/* Ascendra: base tokens, typography, buttons, home-1 hero (palette: White #FAFAF8, Onyx #202124, Silver #AEB5BC) */
:root {
  --white: #FAFAF8; --onyx: #202124; --silver: #AEB5BC;
  --bg: var(--white); --ink: var(--onyx); --surface: var(--white);
  --tint: color-mix(in srgb, var(--silver) 18%, var(--white));
  --line: var(--silver);
  --line-strong: color-mix(in srgb, var(--silver) 55%, var(--onyx));
  --muted: color-mix(in srgb, var(--onyx) 74%, var(--white));
  --glow: rgba(174, 181, 188, .85);
  --shadow-ink: rgba(32, 33, 36, .38);
  --hh: 76px;
  --f-head: 'Prata', 'Times New Roman', serif;
  --f-sub: 'Arimo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius: 20px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.nb-lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.container { width: min(100% - 48px, 1240px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -80px; z-index: 400; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 600 16px/1 var(--f-body); }
.skip:focus { inset-block-start: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(46px, 6vh, 54px); padding: 0 24px; border: 1.5px solid transparent; border-radius: 14px; font: 600 16px/1 var(--f-body); cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .25s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn--p { background: var(--ink); color: var(--bg); box-shadow: 0 12px 28px -10px var(--shadow-ink), 0 0 0 0 var(--glow); animation: btnRing 3s ease-in-out infinite; }
.btn--p:hover { box-shadow: 0 16px 34px -8px var(--shadow-ink), 0 0 0 5px var(--glow); }
.btn--s { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--s:hover { border-color: var(--ink); box-shadow: 0 0 0 5px var(--glow), 0 12px 26px -12px var(--shadow-ink); }
@keyframes btnRing { 0%, 100% { box-shadow: 0 12px 28px -10px var(--shadow-ink), 0 0 0 0 var(--glow); } 50% { box-shadow: 0 12px 28px -10px var(--shadow-ink), 0 0 0 7px transparent; } }
.ar { transition: transform .2s; }
.btn:hover .ar, .hero-card-link:hover .ar { transform: translateX(4px); }

/* ===== HOME 1 / SECTION 1 : HERO (fits one screen) ===== */
.hero { position: relative; isolation: isolate; height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); min-height: 520px; background: var(--bg); }
.hero-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-aura::before, .hero-aura::after { content: ''; position: absolute; border-radius: 50%; }
.hero-aura::before { width: 620px; height: 620px; inset-block-start: -240px; inset-inline-end: -160px; background: radial-gradient(circle, color-mix(in srgb, var(--silver) 70%, transparent) 0%, transparent 68%); animation: drift 18s ease-in-out infinite alternate; }
.hero-aura::after { width: 560px; height: 560px; inset-block-end: -260px; inset-inline-start: -180px; background: radial-gradient(circle, color-mix(in srgb, var(--silver) 55%, transparent) 0%, transparent 68%); animation: drift 22s ease-in-out -9s infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(34px, 22px, 0) scale(1.12); } }
.hero-wrap { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(12px, 2vh, 20px); padding-block: clamp(14px, 2.6vh, 28px); }
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; min-height: 0; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(10px, 2.1vh, 22px); min-width: 0; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 15px/1.2 var(--f-sub); box-shadow: 0 0 22px -4px var(--glow); }
.hero-eyebrow i { font-size: 15px; }
.hero-title { font: 400 clamp(34px, min(5.1vw, 7.4vh), 68px)/1.08 var(--f-head); letter-spacing: 0; color: var(--ink); }
.hero-lead { max-width: 50ch; font: 400 clamp(16px, 2.1vh, 18px)/1.65 var(--f-body); color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); font: 500 15px/1.2 var(--f-body); }
.hero-trust i { font-size: 15px; }

.hero-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 26px; }
.hero-card::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 30px; background: linear-gradient(120deg, var(--silver), var(--white), var(--silver)); background-size: 220% 220%; filter: blur(16px); opacity: .9; animation: sheen 8s ease-in-out infinite alternate; }
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero-card-title { font: 700 clamp(18px, 2.2vh, 21px)/1.25 var(--f-sub); }
.hero-card-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.hero-plate { position: relative; isolation: isolate; min-height: 0; border-radius: 18px; overflow: hidden; border: 1.5px solid var(--line); background: radial-gradient(ellipse at 50% 62%, var(--white) 0%, color-mix(in srgb, var(--silver) 40%, var(--white)) 100%); }
.hero-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.hero-floors { position: relative; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); padding-inline-start: 26px; min-height: 0; }
.hero-rail { position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; border-radius: 8px; background: color-mix(in srgb, var(--silver) 60%, transparent); }
.hero-car { position: absolute; inset-inline-start: -9px; width: 26px; inset-block-start: 0; height: 33.333%; display: grid; place-items: center; transform: translateY(calc(var(--i, 1) * 100%)); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.hero-car span { display: grid; place-items: center; width: 26px; height: min(58%, 46px); border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 0 0 4px var(--glow), 0 8px 18px -4px var(--shadow-ink); }
.floor { display: flex; align-items: center; gap: 12px; margin-block: 3px; padding: 8px 12px; min-width: 0; text-align: start; background: transparent; border: 1.5px solid transparent; border-radius: 16px; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .3s; }
.floor:hover { border-color: var(--line); }
.floor[aria-pressed="true"] { background: var(--tint); border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--glow), 0 14px 30px -14px var(--shadow-ink); }
.floor-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); font-size: 16px; box-shadow: 0 0 16px -2px var(--glow); }
.floor-t { display: grid; min-width: 0; font: 400 15px/1.35 var(--f-body); color: var(--muted); }
.floor-t b { font: 700 17px/1.3 var(--f-sub); color: var(--ink); }
.hero-card-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font: 600 16px/1.2 var(--f-body); transition: box-shadow .25s, transform .2s; box-shadow: 0 12px 26px -12px var(--shadow-ink); }
.hero-card-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px var(--glow), 0 14px 30px -10px var(--shadow-ink); }

.hero-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; box-shadow: 0 18px 44px -26px var(--shadow-ink), 0 0 30px -8px var(--glow); }
.hero-benefits li { display: flex; align-items: center; gap: 14px; padding: clamp(10px, 1.6vh, 16px) 20px; min-width: 0; }
.hero-benefits li + li { border-inline-start: 1.5px solid var(--line); }
.hero-benefits i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 17px; box-shadow: 0 0 16px -2px var(--glow); }
.hero-benefits span { display: grid; font: 400 15px/1.35 var(--f-body); color: var(--muted); }
.hero-benefits b { font: 700 18px/1.25 var(--f-sub); color: var(--ink); }

/* short laptops: let the page breathe instead of squashing */
@media (max-height: 600px) and (min-width: 961px) {
  .hero { height: auto; }
  .hero-card { min-height: 420px; }
}
@media (max-width: 1100px) {
  .hero-card-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .9fr) minmax(0, 1.4fr); }
}
@media (max-width: 960px) {
  .hero { height: auto; min-height: 0; }
  .hero-wrap { height: auto; padding-block: 32px; gap: 24px; }
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-copy { justify-content: flex-start; }
  .hero-card-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .hero-plate { min-height: 300px; }
  .hero-floors { min-height: 300px; }
  .hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-benefits li:nth-child(3) { border-inline-start: 0; }
  .hero-benefits li:nth-child(n+3) { border-block-start: 1.5px solid var(--line); }
}
@media (max-width: 620px) {
  .container { width: min(100% - 32px, 1240px); }
  .hero-wrap { padding-block: 24px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-card-body { grid-template-columns: minmax(0, 1fr); }
  .hero-plate { min-height: 260px; }
  .hero-floors { min-height: 330px; }
  .hero-benefits { grid-template-columns: minmax(0, 1fr); }
  .hero-benefits li + li { border-inline-start: 0; border-block-start: 1.5px solid var(--line); }
}

/* simple page shell for the other pages */
.shell { min-height: calc(100svh - var(--hh)); display: grid; place-items: center; padding-block: 48px; }
.shell-box { display: grid; justify-items: center; gap: 16px; max-width: 640px; padding: 40px 32px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 26px; box-shadow: 0 24px 60px -30px var(--shadow-ink), 0 0 40px -10px var(--glow); }
.shell-box i.shell-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 26px; box-shadow: 0 0 24px -2px var(--glow); }
.shell-box h1 { font: 400 clamp(32px, 4vw, 46px)/1.15 var(--f-head); }
.shell-box p { color: var(--muted); font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== HOME 1 / SECTION 2 : INDEPENDENCE BENEFITS ===== */
.ind { position: relative; isolation: isolate; padding-block: clamp(56px, 8vh, 88px); background: var(--tint); border-block: 1.5px solid var(--line); }
.ind::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55% 50% at 90% 0%, color-mix(in srgb, var(--silver) 60%, transparent), transparent 70%), radial-gradient(ellipse 50% 45% at 4% 100%, color-mix(in srgb, var(--silver) 50%, transparent), transparent 70%); }
.ind-wrap { display: grid; gap: 20px; }
.ind-head { display: grid; justify-items: center; gap: 14px; margin-bottom: 16px; text-align: center; }
.ind-title { font: 400 clamp(32px, 4vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); }
.ind-lead { max-width: 56ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ind-photo { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); box-shadow: 0 0 38px -8px var(--glow), 0 22px 44px -28px var(--shadow-ink); transition: transform .25s, box-shadow .3s; }
.ind-photo:hover { transform: translateY(-4px); box-shadow: 0 0 0 4px var(--glow), 0 26px 50px -24px var(--shadow-ink); }
.ind-photo img { width: 100%; height: 100%; object-fit: cover; }
.ind-card { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; aspect-ratio: 1 / 1; padding: clamp(20px, 2.4vw, 30px); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: 0 0 38px -8px var(--glow), 0 22px 44px -28px var(--shadow-ink); transition: transform .25s, box-shadow .3s, border-color .2s; }
.ind-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--glow), 0 26px 50px -24px var(--shadow-ink); }
.ind-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 21px; box-shadow: 0 0 20px -2px var(--glow); }
.ind-ic--sm { width: 46px; height: 46px; font-size: 19px; }
.ind-card h3 { font: 700 clamp(22px, 2.2vw, 26px)/1.2 var(--f-sub); letter-spacing: 0; color: var(--ink); }
.ind-card p { font: 400 16px/1.6 var(--f-body); color: var(--muted); }
.ind-points { display: grid; gap: 6px; }
.ind-points li { display: flex; align-items: center; gap: 10px; font: 500 15px/1.4 var(--f-body); color: var(--ink); }
.ind-points i { font-size: 14px; }
.ind-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 600 16px/1.3 var(--f-body); color: var(--ink); }
.ind-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.ind-more:hover .ar { transform: translateX(4px); }
@container (max-width: 359px) { .ind-points { display: none; } }

.ind-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: 22px 28px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: 0 0 38px -8px var(--glow), 0 22px 44px -28px var(--shadow-ink); }
.ind-band-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ind-band h3 { font: 700 clamp(19px, 2vw, 22px)/1.25 var(--f-sub); letter-spacing: 0; color: var(--ink); }
.ind-band p { font: 400 16px/1.5 var(--f-body); color: var(--muted); }
.ind-band-acts { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ind { padding-block: 44px; }
  .ind-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-card { aspect-ratio: auto; }
  .ind-points { display: grid !important; }
  .ind-band { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .ind-band-acts .btn { flex: 1 1 100%; }
}


/* Home 1 · Section 3: product explorer */
.product-explorer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(54px, 6.4vw, 86px);
  background:
    radial-gradient(ellipse 36% 42% at 4% 12%, rgba(174,181,188,.24), transparent 76%),
    radial-gradient(ellipse 34% 48% at 96% 88%, rgba(174,181,188,.18), transparent 72%),
    var(--bg);
}
.product-explorer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14% auto 10% 50%;
  width: min(52vw, 720px);
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  border-radius: 48% 52% 44% 56%;
  pointer-events: none;
}
.explorer-wrap { position: relative; }
.explorer-head { max-width: 660px; margin: 0 auto clamp(26px, 3.2vw, 40px); text-align: center; }
.explorer-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font: 600 14px/1.35 var(--f-body);
  letter-spacing: .045em; text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.explorer-title {
  color: var(--ink); font: 400 clamp(32px, 4.1vw, 52px)/1.13 var(--f-head);
  letter-spacing: -.025em; text-wrap: balance;
}
.explorer-intro { max-width: 530px; margin: 13px auto 0; color: var(--muted); font: 400 16px/1.65 var(--f-body); }
.explorer-layout {
  display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  align-items: center; gap: clamp(28px, 5vw, 68px);
  max-width: 1120px; margin-inline: auto;
}
.explorer-visual { min-width: 0; }
.explorer-photo {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  min-height: 390px; aspect-ratio: 1.04 / 1;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 7px;
  background: var(--tint);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 85%, transparent),
              0 0 34px rgba(174,181,188,.36), 0 24px 52px -28px var(--shadow-ink);
}
.explorer-photo::after {
  content: ""; position: absolute; z-index: -1; inset: 10px;
  border: 1px solid rgba(255,255,255,.58); pointer-events: none;
}
.explorer-photo img {
  width: 100%; height: 100%; min-height: 390px; object-fit: cover; object-position: center;
  transition: opacity .22s ease, transform .65s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
.explorer-photo:hover img { transform: scale(1.035); filter: saturate(1.06); }
.explorer-photo-shade {
  position: absolute; inset: 35% 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(16,17,19,.52));
}
.explorer-photo-tag {
  position: absolute; inset-inline-start: 22px; inset-block-end: 22px;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 44px);
  padding: 9px 13px; border: 1px solid rgba(255,255,255,.58);
  color: #fff; background: rgba(25,26,28,.78); backdrop-filter: blur(12px);
  font: 600 14px/1.3 var(--f-body); box-shadow: 0 0 18px rgba(255,255,255,.12);
}
.explorer-photo-index {
  position: absolute; inset-inline-end: 22px; inset-block-end: 25px;
  display: inline-flex; align-items: center; gap: 8px; color: #fff;
  font: 600 14px/1 var(--f-body); font-variant-numeric: tabular-nums;
}
.explorer-photo-index i { display: block; width: 26px; height: 1px; background: rgba(255,255,255,.8); }
.explorer-content { min-width: 0; }
.explorer-tabs { display: grid; gap: 9px; }
.explorer-tab {
  display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; align-items: center; gap: 12px;
  width: 100%; min-height: 68px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 5px; text-align: start;
  color: var(--ink); background: var(--surface);
  box-shadow: 0 5px 18px -15px var(--shadow-ink);
  cursor: pointer; transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.explorer-tab:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 0 20px rgba(174,181,188,.28), 0 8px 20px -16px var(--shadow-ink); }
.explorer-tab.is-active {
  color: var(--white); background: var(--onyx); border-color: var(--onyx);
  box-shadow: 0 0 0 1px rgba(174,181,188,.45), 0 0 26px rgba(174,181,188,.42), 0 12px 24px -17px var(--shadow-ink);
}
.explorer-tab-icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; font-size: 16px;
  color: var(--ink); background: var(--tint);
}
.explorer-tab.is-active .explorer-tab-icon { color: var(--onyx); background: var(--white); border-color: var(--white); }
.explorer-tab b { display: block; font: 600 17px/1.25 var(--f-sub); }
.explorer-tab small { display: block; margin-top: 3px; color: var(--muted); font: 400 14px/1.4 var(--f-body); }
.explorer-tab.is-active small { color: rgba(250,250,248,.82); }
.explorer-tab-arrow { justify-self: end; font-size: 14px; transition: transform .2s ease; }
.explorer-tab.is-active .explorer-tab-arrow { transform: translateX(2px); }
.explorer-detail { padding: 20px 2px 0; animation: explorer-in .32s ease both; }
.explorer-detail-kicker { margin-bottom: 5px; color: var(--muted); font: 600 14px/1.4 var(--f-body); letter-spacing: .025em; }
.explorer-detail h3 { color: var(--ink); font: 400 clamp(22px, 2.3vw, 29px)/1.25 var(--f-head); }
.explorer-detail-copy { margin-top: 8px; max-width: 520px; color: var(--muted); font: 400 15px/1.65 var(--f-body); }
.explorer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.explorer-tags li {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 9px;
  border: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb, var(--surface) 82%, transparent);
  font: 500 14px/1.3 var(--f-body);
}
.explorer-tags i { color: var(--muted); font-size: 12px; }
.explorer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.explorer-actions .btn { min-height: 46px; padding-inline: 17px; font-size: 14px; }
@keyframes explorer-in { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .explorer-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; }
  .explorer-photo, .explorer-photo img { min-height: 340px; }
  .explorer-tab { grid-template-columns: 36px minmax(0,1fr) 16px; gap: 9px; padding-inline: 10px; }
  .explorer-tab-icon { width: 34px; height: 34px; }
  .explorer-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 680px) {
  .product-explorer { padding-block: 46px; }
  .explorer-head { margin-bottom: 22px; }
  .explorer-title { font-size: clamp(31px, 9vw, 40px); }
  .explorer-intro { font-size: 15px; line-height: 1.6; }
  .explorer-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .explorer-photo, .explorer-photo img { min-height: 0; height: auto; aspect-ratio: 1.18 / 1; }
  .explorer-photo-tag { inset-inline-start: 14px; inset-block-end: 14px; padding: 8px 10px; }
  .explorer-photo-index { inset-inline-end: 14px; inset-block-end: 17px; }
  .explorer-tab { min-height: 62px; }
  .explorer-detail { padding-top: 16px; }
  .explorer-detail h3 { font-size: 24px; }
  .explorer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .explorer-actions .btn { min-width: 0; padding-inline: 9px; font-size: 14px; }
}
@media (max-width: 390px) {
  .container { width: min(100% - 32px, 1240px); }
  .explorer-actions { grid-template-columns: 1fr; }
  .explorer-tab b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .explorer-detail, .explorer-photo img, .explorer-tab { animation: none; transition: none; }
}


/* Shared navigation styles merged from navbar.css */
/* Ascendra navigation */
.site-header { position: sticky; top: 0; z-index: 300; height: var(--hh); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1.5px solid var(--line); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 14px 34px -18px var(--shadow-ink), 0 8px 30px -10px var(--glow); }
.nb-bar { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }

.nb-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; color: var(--ink); }
.nb-logo { display: block; flex: none; color: var(--ink); filter: drop-shadow(0 0 10px var(--glow)); }
.nb-logo path { stroke: var(--bg); }
.nb-name { font: 400 26px/1 var(--f-head); letter-spacing: 0; white-space: nowrap; }

.nb-menu { justify-self: center; }
.nb-list { display: flex; align-items: center; gap: 6px; }
.nb-item { position: relative; }
.nb-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 500 16px/1 var(--f-body); cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .25s; }
.nb-link:hover, .nb-has.is-open > .nb-link { background: var(--tint); box-shadow: 0 0 0 3px var(--glow); }
.nb-link[aria-current="page"], .nb-has.is-current > .nb-link { font-weight: 700; }
.nb-link[aria-current="page"]::after, .nb-has.is-current > .nb-link::after { content: ''; position: absolute; inset-inline: 16px; inset-block-end: 5px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px 1px var(--glow); }
.nb-chev { font-size: 14px; transition: transform .25s; }
.nb-has.is-open > .nb-link .nb-chev { transform: rotate(180deg); }

.nb-sub { display: none; position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0; z-index: 10; min-width: 220px; padding: 8px; gap: 4px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -18px var(--shadow-ink), 0 0 34px -6px var(--glow); }
.nb-sub::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: -12px; height: 12px; }
.nb-has.is-open > .nb-sub { display: grid; }
.nb-sub a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 12px; font: 500 16px/1.2 var(--f-body); transition: background .2s, box-shadow .2s; }
.nb-sub a i { width: 20px; text-align: center; font-size: 15px; }
.nb-sub a:hover { background: var(--tint); box-shadow: 0 0 0 3px var(--glow); }
.nb-sub a[aria-current="page"] { font-weight: 700; background: var(--tint); }

.nb-tools { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nb-tool { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer; transition: box-shadow .25s, transform .2s, border-color .2s; }
.nb-tool:hover { transform: translateY(-1px); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.nb-tool i { font-size: 17px; }
.nb-theme .fa-sun { display: none; }
.nb-login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 600 16px/1 var(--f-body); white-space: nowrap; box-shadow: 0 12px 26px -12px var(--shadow-ink); transition: transform .2s, box-shadow .25s; }
.nb-login:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px var(--glow), 0 14px 28px -10px var(--shadow-ink); }
.nb-login--panel, .nb-burger { display: none; }
.nb-burger { place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 19px; cursor: pointer; }
.nb-burger .fa-xmark { display: none; }
.nb-burger[aria-expanded="true"] .fa-bars { display: none; }
.nb-burger[aria-expanded="true"] .fa-xmark { display: inline-block; }

/* hover-open dropdowns only on real desktop pointers */
@media (min-width: 1024px) and (hover: hover) {
  .nb-has:hover > .nb-sub { display: grid; }
  .nb-has:hover > .nb-link { background: var(--tint); box-shadow: 0 0 0 3px var(--glow); }
  .nb-has:hover > .nb-link .nb-chev { transform: rotate(180deg); }
}

/* tablet and mobile: name + logo left, RTL / theme / hamburger right, menus inside the panel under Login */
@media (max-width: 1023px) {
  :root { --hh: 68px; }
  .nb-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .nb-menu { position: fixed; inset-block-start: var(--hh); inset-inline: 0; z-index: 290; display: none; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--hh)); max-height: calc(100svh - var(--hh)); overflow-y: auto; padding: 20px 24px 28px; background: var(--bg); border-bottom: 1.5px solid var(--line); box-shadow: 0 30px 50px -24px var(--shadow-ink), 0 0 40px -8px var(--glow); }
  .nb-menu.is-open { display: flex; }
  .nb-login--panel { display: inline-flex; width: 100%; min-height: 54px; font-size: 17px; }
  .nb-login--bar { display: none; }
  .nb-burger { display: inline-grid; }
  .nb-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nb-link { width: 100%; justify-content: space-between; min-height: 54px; padding: 0 16px; font-size: 17px; border: 1.5px solid transparent; }
  .nb-link[aria-current="page"]::after, .nb-has.is-current > .nb-link::after { display: none; }
  .nb-link[aria-current="page"], .nb-has.is-current > .nb-link { background: var(--tint); border-color: var(--line); }
  .nb-sub { position: static; min-width: 0; margin: 4px 0 8px; margin-inline-start: 16px; box-shadow: none; border-width: 0; border-inline-start: 2px solid var(--line-strong); border-radius: 0; background: transparent; padding: 4px 0 4px 12px; padding-inline: 12px 0; }
  .nb-sub::before { display: none; }
  .nb-sub a { min-height: 50px; font-size: 16px; }
}
@media (max-width: 420px) {
  .nb-name { font-size: 22px; }
  .nb-tools { gap: 6px; }
  .nb-tool, .nb-burger { min-width: 44px; height: 44px; }
}


/* Premium refinement — Home 1, Section 3 */
.product-explorer {
  padding-block: clamp(58px, 5.8vw, 78px);
  background:
    radial-gradient(ellipse 42% 46% at 5% 13%, rgba(174,181,188,.34), transparent 72%),
    radial-gradient(ellipse 38% 48% at 94% 86%, rgba(174,181,188,.28), transparent 70%),
    radial-gradient(ellipse 52% 32% at 50% 0%, rgba(255,255,255,.88), transparent 76%),
    var(--bg);
}
.product-explorer::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(72vw, 980px);
  height: min(72vw, 980px);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--silver) 40%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 54px rgba(174,181,188,.12), inset 0 0 48px rgba(174,181,188,.08);
  pointer-events: none;
}
.explorer-head { margin-bottom: clamp(30px, 3.3vw, 44px); }
.explorer-eyebrow {
  border-color: color-mix(in srgb, var(--line-strong) 74%, transparent);
  box-shadow: 0 0 0 3px rgba(174,181,188,.12), 0 0 24px rgba(174,181,188,.22);
  background: color-mix(in srgb, var(--surface) 90%, white);
}
.explorer-title { text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.explorer-intro { color: color-mix(in srgb, var(--muted) 92%, var(--ink)); }
.explorer-layout {
  max-width: 1160px;
  gap: clamp(32px, 4.8vw, 64px);
}
.explorer-photo {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--line-strong) 72%, var(--silver));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72),
    0 0 0 5px rgba(174,181,188,.11),
    0 0 42px rgba(174,181,188,.42),
    0 26px 64px -30px var(--shadow-ink);
}
.explorer-photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%, transparent 70%, rgba(174,181,188,.12));
}
.explorer-photo::after { inset: 10px; border-color: rgba(255,255,255,.72); }
.explorer-photo-tag {
  border-radius: 5px;
  box-shadow: 0 0 24px rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18);
}
.explorer-tabs { gap: 10px; }
.explorer-tab {
  min-height: 70px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
  box-shadow: 0 8px 24px -18px var(--shadow-ink), 0 0 0 1px rgba(174,181,188,.08);
}
.explorer-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(174,181,188,.22), 0 0 30px rgba(174,181,188,.34), 0 14px 28px -18px var(--shadow-ink);
}
.explorer-tab.is-active {
  background: linear-gradient(115deg, #202124, #292b2e 62%, #1d1e20);
  border-color: #34373a;
  box-shadow: 0 0 0 1px rgba(174,181,188,.65), 0 0 0 4px rgba(174,181,188,.16), 0 0 34px rgba(174,181,188,.48), 0 18px 32px -20px var(--shadow-ink);
}
.explorer-tab-icon { box-shadow: 0 0 20px rgba(174,181,188,.25); }
.explorer-detail {
  padding: 22px 4px 0;
  animation: explorer-in .36s cubic-bezier(.2,.7,.2,1) both;
}
.explorer-detail-kicker { letter-spacing: .035em; }
.explorer-detail h3 { letter-spacing: -.015em; }
.explorer-tags li {
  border-color: color-mix(in srgb, var(--line-strong) 58%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(174,181,188,.13);
}
.explorer-actions .btn {
  min-height: 48px;
  border-radius: 9px;
  box-shadow: 0 10px 24px -16px var(--shadow-ink), 0 0 0 1px rgba(174,181,188,.12);
  transition: transform .22s ease, box-shadow .25s ease, background .22s ease;
}
.explorer-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(174,181,188,.24), 0 0 26px rgba(174,181,188,.34), 0 14px 28px -16px var(--shadow-ink);
}
/* Give the light theme the same deliberate silver glow as the dark theme. */
html[data-theme="light"] .product-explorer .explorer-photo {
  box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 0 0 5px rgba(174,181,188,.14), 0 0 46px rgba(174,181,188,.48), 0 26px 64px -30px rgba(28,30,32,.28);
}
html[data-theme="light"] .product-explorer .explorer-tab.is-active {
  color: #fafaf8;
  background: linear-gradient(115deg, #202124, #303236 65%, #202124);
  border-color: #3b3d40;
  box-shadow: 0 0 0 1px rgba(174,181,188,.78), 0 0 0 4px rgba(174,181,188,.18), 0 0 36px rgba(174,181,188,.55), 0 16px 32px -18px rgba(28,30,32,.3);
}
html[data-theme="light"] .product-explorer .explorer-tab:not(.is-active) {
  background: rgba(255,255,255,.84);
  box-shadow: 0 7px 24px -17px rgba(28,30,32,.3), 0 0 20px rgba(174,181,188,.13);
}
html[data-theme="light"] .product-explorer .explorer-eyebrow { box-shadow: 0 0 0 3px rgba(174,181,188,.16), 0 0 26px rgba(174,181,188,.28); }
html[data-theme="light"] .product-explorer .explorer-tags li { background: rgba(255,255,255,.8); }
@media (max-width: 680px) {
  .product-explorer { padding-block: 44px; }
  .explorer-layout { gap: 24px; }
  .explorer-photo { box-shadow: 0 0 0 3px rgba(174,181,188,.12), 0 0 28px rgba(174,181,188,.32), 0 18px 42px -26px var(--shadow-ink); }
  .explorer-detail { padding-top: 18px; }
}


/* ===== HOME 1 / SECTION 4 : INSTALLATION JOURNEY (lift-rail timeline) ===== */
.jny { --g: clamp(16px, 2vw, 28px); --car: 64px; --node: 46px; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 6vw, 84px); background: var(--tint); border-block: 1.5px solid var(--line); }
.jny::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 52% at 6% 4%, rgba(174, 181, 188, .78), transparent 70%), radial-gradient(ellipse 42% 50% at 96% 98%, rgba(174, 181, 188, .66), transparent 70%); }
.jny::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--silver) 40%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--silver) 40%, transparent) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 72% 82% at 50% 50%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 72% 82% at 50% 50%, #000 18%, transparent 78%); }
.jny-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 44px); }
.jny-intro, .jny-side { display: grid; justify-items: start; align-content: end; gap: 16px; min-width: 0; }
.jny-title { font: 400 clamp(32px, 4vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); }
.jny-lead { max-width: 52ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); }

.jny-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); margin: 0; padding-top: 20px; list-style: none; }
.jny-car { position: absolute; left: 0; top: 0; z-index: 1; width: var(--car); height: var(--car); border-radius: 18px; background: var(--ink); opacity: 0; pointer-events: none; transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .3s; animation: jnyCar 2.8s ease-in-out infinite; }
.jny-track.is-ready .jny-car { opacity: 1; }
@keyframes jnyCar {
  0%, 100% { box-shadow: 0 0 0 5px rgba(174, 181, 188, .55), 0 0 30px rgba(174, 181, 188, .95), 0 16px 28px -14px var(--shadow-ink); }
  50% { box-shadow: 0 0 0 10px rgba(174, 181, 188, .26), 0 0 46px rgba(174, 181, 188, 1), 0 16px 28px -14px var(--shadow-ink); }
}
.jny-step { display: flex; flex-direction: column; min-width: 0; }

.jny-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); box-shadow: 0 0 0 4px rgba(174, 181, 188, .3), 0 0 40px 2px rgba(174, 181, 188, .85), 0 22px 40px -26px var(--shadow-ink); transition: transform .3s, box-shadow .35s; }
.jny-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.jny-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .55) 50%, transparent 64%); transform: translateX(-120%); transition: transform .9s ease; }
.jny-step.is-active .jny-photo, .jny-step:hover .jny-photo { transform: translateY(-4px); box-shadow: 0 0 0 5px rgba(174, 181, 188, .55), 0 0 56px 6px rgba(174, 181, 188, .95), 0 26px 44px -24px var(--shadow-ink); }
.jny-step.is-active .jny-photo img, .jny-step:hover .jny-photo img { transform: scale(1.05); }
.jny-step.is-active .jny-photo::after, .jny-step:hover .jny-photo::after { transform: translateX(120%); }
.jny-no { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--f-sub); box-shadow: 0 0 18px -2px var(--glow); }

.jny-rail { position: relative; flex: none; display: grid; place-items: center; height: var(--car); }
.jny-rail::before, .jny-rail::after { content: ''; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: calc(100% + var(--g)); height: 4px; margin-block-start: -2px; border-radius: 4px; }
.jny-rail::before { background: color-mix(in srgb, var(--silver) 72%, var(--bg)); box-shadow: 0 0 14px rgba(174, 181, 188, .95); }
.jny-rail::after { background: var(--ink); box-shadow: 0 0 14px var(--glow); transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.jny-step.is-done .jny-rail::after { transform: scaleX(1); }
.jny-step:last-child .jny-rail::before, .jny-step:last-child .jny-rail::after { display: none; }
.jny-node { position: relative; z-index: 2; display: grid; place-items: center; width: var(--node); height: var(--node); padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: 0 0 20px -2px var(--glow); transition: background .3s, color .3s, box-shadow .25s, border-color .3s; }
.jny-node:hover { box-shadow: 0 0 0 5px var(--glow), 0 0 24px var(--glow); }
.jny-step.is-done .jny-node { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.jny-step.is-active .jny-node { background: var(--surface); border-color: var(--surface); color: var(--ink); }

.jny-body { display: grid; align-content: start; gap: 8px; min-width: 0; }
.jny-body h3 { font: 700 clamp(21px, 2vw, 24px)/1.2 var(--f-sub); letter-spacing: 0; color: var(--ink);padding-top:20px; }
.jny-body p { font: 400 16px/1.6 var(--f-body); color: var(--muted); }
.jny-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--f-body); box-shadow: 0 0 18px -4px var(--glow); }
.jny-chip i { font-size: 14px; }

@media (max-width: 980px) {
  .jny-head { grid-template-columns: minmax(0, 1fr); }
  .jny-track { grid-template-columns: minmax(0, 1fr); row-gap: var(--g); }
  .jny-step { display: grid; grid-template-columns: var(--car) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 14px; }
  .jny-photo { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; }
  .jny-body { grid-column: 2; grid-row: 2; }
  .jny-rail { grid-column: 1; grid-row: 1 / span 2; height: auto; place-items: start center; }
  .jny-node { margin-block-start: calc((var(--car) - var(--node)) / 2); }
  .jny-rail::before, .jny-rail::after { inset-inline-start: 50%; inset-block-start: calc(var(--car) / 2); width: 4px; height: calc(100% + var(--g)); margin: 0; margin-inline-start: -2px; }
  .jny-rail::after { transform: scaleY(0); transform-origin: top center; }
  .jny-step.is-done .jny-rail::after { transform: scaleY(1); }
}
@media (max-width: 620px) {
  .jny { --car: 56px; --node: 42px; padding-block: 44px; }
  .jny-step { column-gap: 12px; }
  .jny-photo { aspect-ratio: 4 / 3; }
  .jny-node { font-size: 16px; }
  .jny-side .btn { width: 100%; white-space: normal; text-align: center; }
}


/* ===== HOME 1 / SECTION 5 : SAFETY BY DESIGN (inverse stage with photo pins) ===== */
.saf { --sg: clamp(20px, 3vw, 40px); position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 6vw, 84px); background: radial-gradient(ellipse 42% 46% at 4% 8%, rgba(174, 181, 188, .5), transparent 72%), radial-gradient(ellipse 40% 46% at 96% 94%, rgba(174, 181, 188, .45), transparent 70%), var(--bg); }
.saf-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sg); align-items: center; padding: clamp(24px, 3vw, 44px); border: 1.5px solid var(--silver); border-radius: 26px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 6px rgba(174, 181, 188, .42), 0 0 0 14px rgba(174, 181, 188, .16), 0 0 84px 6px rgba(174, 181, 188, 1), 0 34px 60px -34px var(--shadow-ink); }
.saf-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 62% at 50% 50%, rgba(174, 181, 188, .34), transparent 72%), radial-gradient(ellipse 30% 40% at 0% 0%, rgba(174, 181, 188, .2), transparent 74%); }
.saf-copy { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.saf-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1.5px solid color-mix(in srgb, var(--bg) 55%, transparent); border-radius: 999px; font: 600 15px/1.2 var(--f-sub); color: var(--bg); box-shadow: 0 0 22px -4px rgba(174, 181, 188, .75); }
.saf-eyebrow i { font-size: 15px; }
.saf-title { font: 400 clamp(30px, 3.4vw, 46px)/1.12 var(--f-head); letter-spacing: 0; color: var(--bg); }
.saf-lead { max-width: 44ch; font: 400 17px/1.65 var(--f-body); color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.saf-cta { background: var(--bg); color: var(--ink); border-color: var(--bg); box-shadow: 0 0 0 0 rgba(174, 181, 188, .8), 0 0 28px rgba(174, 181, 188, .65); }
.saf-cta:hover { box-shadow: 0 0 0 5px rgba(174, 181, 188, .6), 0 0 34px rgba(174, 181, 188, .85); }
.saf-cta:hover .ar { transform: translateX(4px); }

.saf-visual { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 1.5px solid var(--silver); border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 4px rgba(174, 181, 188, .4), 0 0 56px 4px rgba(174, 181, 188, .75); }
.saf-visual img { width: 100%; height: 100%; object-fit: cover; }
.saf-pin { position: absolute; inset-inline-start: auto; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 2px solid var(--white); border-radius: 50%; background: var(--onyx); color: var(--white); font: 700 16px/1 var(--f-sub); cursor: pointer; animation: safPulse 2.4s ease-out infinite; transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s; }
.saf-pin:hover { transform: scale(1.1); }
.saf-pin.is-active { background: var(--white); color: var(--onyx); border-color: var(--onyx); transform: scale(1.18); animation: none; box-shadow: 0 0 0 6px rgba(32, 33, 36, .22), 0 0 26px 6px rgba(174, 181, 188, .95); }
@keyframes safPulse { 0% { box-shadow: 0 0 0 0 rgba(32, 33, 36, .5), 0 0 16px rgba(174, 181, 188, .9); } 100% { box-shadow: 0 0 0 14px rgba(32, 33, 36, 0), 0 0 16px rgba(174, 181, 188, .9); } }

.saf-list { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.saf-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--bg) 38%, transparent); border-radius: 16px; background: transparent; color: var(--bg); text-align: start; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .3s, transform .2s; }
.saf-item:hover { border-color: var(--silver); box-shadow: 0 0 22px -2px rgba(174, 181, 188, .7); }
.saf-ic { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 18px; }
.saf-it { display: grid; gap: 3px; min-width: 0; }
.saf-it b { font: 700 18px/1.25 var(--f-sub); }
.saf-it span { font: 400 15px/1.5 var(--f-body); color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.saf-item.is-active { background: var(--bg); color: var(--ink); border-color: var(--bg); box-shadow: 0 0 0 4px rgba(174, 181, 188, .4), 0 0 34px rgba(174, 181, 188, .75); }
.saf-item.is-active .saf-it span { color: color-mix(in srgb, var(--ink) 78%, var(--bg)); }

@media (max-width: 980px) {
  .saf-stage { grid-template-columns: minmax(0, 1fr); }
  .saf-visual { width: min(100%, 520px); justify-self: center; }
}
@media (max-width: 620px) {
  .saf { padding-block: 44px; }
  .saf-stage { padding: 20px; border-radius: 22px; }
  .saf-item { padding: 10px 12px; gap: 12px; }
  .saf-cta { width: 100%; white-space: normal; text-align: center; }
}


/* ===== HOME 1 / SECTION 6 : YOUR HOME, MATCHED (situation to solution) ===== */
.mat { --mg: clamp(16px, 2vw, 28px); position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 6vw, 84px); background: radial-gradient(ellipse 44% 50% at 96% 6%, rgba(174, 181, 188, .72), transparent 70%), radial-gradient(ellipse 42% 48% at 3% 96%, rgba(174, 181, 188, .62), transparent 70%), var(--tint); border-block: 1.5px solid var(--line); }
.mat-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.7fr); gap: var(--mg); align-items: stretch; }
.mat-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(22px, 2.6vw, 34px); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 26px; box-shadow: 0 0 0 2px rgba(174, 181, 188, .2), 0 0 28px rgba(174, 181, 188, .38), 0 26px 50px -30px var(--shadow-ink); }
.mat-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 46% at 100% 0%, rgba(174, 181, 188, .5), transparent 72%), radial-gradient(ellipse 70% 40% at 0% 100%, rgba(174, 181, 188, .36), transparent 72%); }
.mat-top { display: grid; justify-items: start; gap: 16px; }
.mat-title { font: 400 clamp(28px, 3vw, 40px)/1.14 var(--f-head); letter-spacing: 0; color: var(--ink); }
.mat-lead { font: 400 17px/1.65 var(--f-body); color: var(--muted); }
.mat-bottom { display: grid; justify-items: start; gap: 14px; }
.mat-note { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.4 var(--f-body); color: var(--ink); }
.mat-note i { font-size: 15px; }

.mat-list { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mat-row { height: 100%; display: grid; grid-template-columns: 46px minmax(0, 1.15fr) 20px 84px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 18px 10px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 0 0 1px rgba(174, 181, 188, .25), 0 0 16px rgba(174, 181, 188, .32), 0 16px 30px -24px var(--shadow-ink); transition: transform .25s, border-color .2s, box-shadow .3s; }
.mat-row:hover, .mat-row:focus-visible { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(174, 181, 188, .35), 0 0 26px rgba(174, 181, 188, .55), 0 20px 36px -24px var(--shadow-ink); }
.mat-ic { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 18px; box-shadow: 0 0 20px -2px var(--glow); transition: background .25s, color .25s; }
.mat-row:hover .mat-ic, .mat-row:focus-visible .mat-ic { background: var(--ink); color: var(--bg); }
.mat-sit, .mat-sol { display: grid; gap: 3px; min-width: 0; }
.mat-sit b { font: 700 18px/1.25 var(--f-sub); color: var(--ink); }
.mat-sit span { font: 400 15px/1.45 var(--f-body); color: var(--muted); }
.mat-arrow { justify-self: center; font-size: 15px; color: var(--ink); }
.mat-row:hover .mat-arrow, .mat-row:focus-visible .mat-arrow { transform: translateX(4px); }
.mat-thumb { display: block; width: 84px; height: 64px; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 0 22px -2px var(--glow); }
.mat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mat-row:hover .mat-thumb img, .mat-row:focus-visible .mat-thumb img { transform: scale(1.12); }
.mat-sol b { font: 700 17px/1.25 var(--f-sub); color: var(--ink); }
.mat-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--tint); font: 500 14px/1.2 var(--f-body); color: var(--ink); }
.mat-chip i { font-size: 13px; }

@media (max-width: 980px) {
  .mat-grid { grid-template-columns: minmax(0, 1fr); }
  .mat-panel { gap: 22px; }
  .mat-list { grid-template-rows: none; }
}
@media (max-width: 620px) {
  .mat { padding-block: 44px; }
  .mat-panel { border-radius: 22px; }
  .mat-bottom .btn { width: 100%; white-space: normal; text-align: center; }
  .mat-row { grid-template-columns: 56px minmax(0, 1fr) 20px; grid-template-areas: "ic sit sit" "th sol arr"; gap: 12px; padding: 12px; }
  .mat-ic { grid-area: ic; }
  .mat-sit { grid-area: sit; }
  .mat-thumb { grid-area: th; width: 56px; height: 56px; }
  .mat-sol { grid-area: sol; }
  .mat-arrow { grid-area: arr; }
}


/* ===== HOME 1 / SECTION 7 : TWO LANES OF HOMEOWNER STORIES ===== */
.stories { --story-gap: 18px; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(54px, 6vw, 82px); background: radial-gradient(ellipse 40% 40% at 10% 0%, rgba(174,181,188,.25), transparent 72%), radial-gradient(ellipse 36% 44% at 92% 100%, rgba(174,181,188,.2), transparent 72%), var(--bg); border-block: 1px solid var(--line); }
.stories::before { content: ''; position: absolute; inset: 12% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 42% 55% at 50% 48%, rgba(174,181,188,.13), transparent 72%); }
.stories-head { display: grid; justify-items: center; gap: 12px; max-width: 850px; padding-inline: 24px; margin: 0 auto 28px; text-align: center; }
.stories-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--f-sub); box-shadow: 0 0 22px -7px var(--glow); }
.stories-eyebrow i { font-size: 15px; }
.stories-title { font: 400 clamp(32px, 4.2vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); }
.stories-lead { max-width: 66ch; font: 400 16px/1.65 var(--f-body); color: var(--muted); }
.stories-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.stories-rating { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 50px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 0 22px -9px var(--glow), 0 10px 24px -20px var(--shadow-ink); font: 400 14px/1.35 var(--f-body); }
.stories-rating strong { font: 700 16px/1.2 var(--f-sub); }
.stories-rating > span:last-child { color: var(--muted); }
.stories-stars, .story-stars { display: inline-flex; gap: 3px; color: var(--silver); text-shadow: 0 0 12px rgba(174,181,188,.5); }
.stories-stars { font-size: 14px; }
.stories-cta { min-height: 50px; }
.stories-lanes { display: grid; gap: var(--story-gap); width: 100%; }
.stories-lane { position: relative; overflow: hidden; padding: 7px 0 12px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); }
.stories-track { display: flex; width: max-content; gap: var(--story-gap); will-change: transform; animation: stories-drift 62s linear infinite; }
.stories-track--reverse { animation-name: stories-drift-reverse; animation-duration: 68s; }
.stories-lane:has(.story-card:hover) .stories-track, .stories-lane:focus-within .stories-track { animation-play-state: paused; }
.story-card { flex: 0 0 clamp(280px, 28vw, 370px); display: flex; flex-direction: column; align-items: flex-start; min-height: 204px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(174,181,188,.12), 0 10px 26px -22px var(--shadow-ink), 0 0 22px -15px var(--glow); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.story-card:hover, .story-card:focus-within { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 0 0 2px rgba(174,181,188,.28), 0 0 28px -8px var(--glow), 0 18px 34px -24px var(--shadow-ink); }
.story-stars { font-size: 13px; margin-bottom: 12px; }
.story-card blockquote { flex: 1; margin: 0; color: var(--ink); font: 400 15px/1.6 var(--f-body); }
.story-person { display: flex; align-items: center; gap: 11px; margin-top: 16px; width: 100%; }
.story-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--tint); color: var(--ink); font: 600 14px/1 var(--f-sub); }
.story-person-copy { display: grid; gap: 3px; min-width: 0; }
.story-person-copy b { color: var(--ink); font: 700 15px/1.2 var(--f-sub); }
.story-person-copy small { display: inline-flex; width: fit-content; align-items: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--tint); color: var(--muted); font: 500 14px/1.25 var(--f-body); }
@keyframes stories-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--story-gap) / 2)); } }
@keyframes stories-drift-reverse { from { transform: translateX(calc(-50% - var(--story-gap) / 2)); } to { transform: translateX(0); } }
@media (max-width: 700px) { .stories { padding-block: 46px; --story-gap: 12px; } .stories-head { gap: 11px; margin-bottom: 20px; padding-inline: 18px; } .stories-title { max-width: 14ch; } .stories-lead { font-size: 15px; } .stories-actions { width: 100%; } .stories-rating, .stories-cta { width: 100%; } .story-card { flex-basis: min(82vw, 330px); min-height: 210px; padding: 18px; } .stories-lane { -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } }
@media (prefers-reduced-motion: reduce) { .stories-track, .stories-track--reverse { animation: none; transform: none; } .stories-lane { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; } .stories-track { width: max-content; } .story-card { scroll-snap-align: start; } }


/* HOME 1 / SECTION 8 — considered, conversion-focused closing CTA */
.home-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 5.2vw, 72px); background: radial-gradient(ellipse 34% 70% at 0% 50%, rgba(174,181,188,.24), transparent 74%), radial-gradient(ellipse 30% 56% at 100% 8%, rgba(174,181,188,.18), transparent 72%), var(--bg); border-top: 1px solid var(--line); }
.home-cta::before { content: ''; position: absolute; z-index: -1; width: min(56vw, 720px); aspect-ratio: 1; inset-inline-end: -18%; top: 50%; transform: translateY(-50%); border: 1px solid rgba(174,181,188,.24); border-radius: 50%; box-shadow: inset 0 0 55px rgba(174,181,188,.08), 0 0 70px rgba(174,181,188,.10); pointer-events: none; }
.home-cta-wrap { width: min(1240px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, .88fr); align-items: center; gap: clamp(30px, 5.2vw, 76px); }
.home-cta-copy { min-width: 0; display: grid; justify-items: start; align-content: center; gap: 18px; }
.home-cta-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--f-sub); letter-spacing: .055em; box-shadow: 0 0 0 1px rgba(174,181,188,.12), 0 0 22px -5px rgba(174,181,188,.72); }
.home-cta-eyebrow i { font-size: 15px; }
.home-cta-title { max-width: 12ch; color: var(--ink); font: 400 clamp(36px, 4.4vw, 60px)/1.1 var(--f-head); letter-spacing: 0; text-wrap: balance; }
.home-cta-lead { max-width: 54ch; color: var(--muted); font: 400 17px/1.75 var(--f-body); }
.home-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 3px; }
.home-cta-primary { min-height: 54px; gap: 14px; padding-inline: 22px; border-radius: 13px; box-shadow: 0 0 0 1px rgba(174,181,188,.5), 0 0 24px rgba(174,181,188,.42), 0 14px 28px -16px var(--shadow-ink); transition: transform .22s ease, box-shadow .25s ease; }
.home-cta-primary:hover, .home-cta-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(174,181,188,.34), 0 0 34px rgba(174,181,188,.68), 0 18px 32px -16px var(--shadow-ink); }
.home-cta-primary i { transition: transform .22s ease; }
.home-cta-primary:hover i { transform: translate(2px,-2px); }
.home-cta-secondary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); font: 600 15px/1.3 var(--f-body); border-bottom: 1px solid var(--line-strong); transition: gap .2s ease, border-color .2s ease; }
.home-cta-secondary:hover, .home-cta-secondary:focus-visible { gap: 15px; border-color: var(--ink); }
.home-cta-assurances { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 3px; color: var(--muted); font: 500 14px/1.5 var(--f-body); }
.home-cta-assurances span { display: inline-flex; align-items: center; gap: 8px; }
.home-cta-assurances i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 11px; box-shadow: 0 0 14px -5px rgba(174,181,188,.65); }
.home-cta-visual { position: relative; min-width: 0; margin: 0; aspect-ratio: 4 / 4.25; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px rgba(174,181,188,.25), 0 0 32px rgba(174,181,188,.36), 0 28px 54px -32px var(--shadow-ink); }
.home-cta-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 54%, rgba(32,33,36,.14) 100%); }
.home-cta-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.home-cta-visual:hover img { transform: scale(1.035); }
.home-cta-visual figcaption { position: absolute; z-index: 1; inset-inline: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid rgba(250,250,248,.58); border-radius: 14px; background: rgba(250,250,248,.94); color: #202124; box-shadow: 0 0 24px rgba(174,181,188,.34), 0 12px 28px -18px rgba(32,33,36,.5); backdrop-filter: blur(12px); }
.home-cta-caption-icon { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #AEB5BC; border-radius: 12px; background: #FAFAF8; font-size: 17px; }
.home-cta-visual figcaption > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.home-cta-visual figcaption b { font: 700 16px/1.25 var(--f-sub); }
.home-cta-visual figcaption small { font: 400 14px/1.45 var(--f-body); color: #55585C; }
.home-cta-caption-arrow { margin-inline-start: auto; font-size: 16px; }
@media (max-width: 850px) { .home-cta-wrap { grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 28px; } .home-cta-title { font-size: clamp(34px, 5vw, 48px); } .home-cta-assurances { display: grid; gap: 8px; } }
@media (max-width: 680px) { .home-cta { padding-block: 42px; } .home-cta-wrap { width: min(100% - 36px, 520px); grid-template-columns: minmax(0,1fr); gap: 28px; } .home-cta-copy { gap: 15px; } .home-cta-title { max-width: 13ch; font-size: clamp(35px, 10vw, 46px); } .home-cta-lead { font-size: 16px; } .home-cta-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 10px; } .home-cta-primary { width: 100%; } .home-cta-secondary { justify-content: center; align-self: flex-start; } .home-cta-assurances { gap: 8px; } .home-cta-visual { aspect-ratio: 1 / .92; border-radius: 20px; } .home-cta-visual figcaption { inset-inline: 10px; bottom: 10px; padding: 11px; gap: 10px; } .home-cta-visual figcaption b { font-size: 15px; } .home-cta-visual figcaption small { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .home-cta-primary, .home-cta-primary i, .home-cta-secondary, .home-cta-visual img { transition: none; } .home-cta-primary:hover, .home-cta-primary:focus-visible, .home-cta-visual:hover img { transform: none; } }


/* Home 2 / Section 1 — The Vertical Reveal */
.vertical-hero{--vh-ink:#202124;--vh-paper:#FAFAF8;--vh-silver:#AEB5BC;position:relative;isolation:isolate;min-height:calc(100vh - var(--header-height, 78px));min-height:calc(100svh - var(--header-height, 78px));padding-block:clamp(34px,5vh,58px);padding-inline:clamp(22px,5.2vw,88px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse 30% 60% at 92% 10%,rgba(174,181,188,.20),transparent 75%),radial-gradient(ellipse 32% 55% at 2% 92%,rgba(174,181,188,.15),transparent 75%),var(--bg,#FAFAF8);color:var(--text,#202124)}
.vertical-hero:before{content:"";position:absolute;inset:18px;z-index:-1;border:1px solid rgba(174,181,188,.3);pointer-events:none;box-shadow:inset 0 0 55px rgba(174,181,188,.07),0 0 32px rgba(174,181,188,.08)}
.vertical-hero-inner{width:min(100%,1500px);margin:auto;display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.05fr);align-items:center;gap:clamp(34px,6vw,100px)}
.vertical-hero-copy{position:relative;z-index:2;max-width:620px;animation:vh-copy-enter .9s cubic-bezier(.2,.7,.2,1) both}
.vertical-hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(22px,3vh,34px);font:600 14px/1.4 var(--f-sub,'Arimo'),sans-serif;letter-spacing:.12em;color:var(--muted,#55585C)}
.vertical-hero-eyebrow-mark{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line-strong,rgba(174,181,188,.75));border-radius:50%;color:var(--text,#202124);box-shadow:0 0 0 4px rgba(174,181,188,.12),0 0 22px rgba(174,181,188,.28)}
.vertical-hero-index{margin-inline-start:auto;font:500 14px/1 var(--f-body,'Inter'),sans-serif;letter-spacing:.08em;color:var(--muted,#55585C)}
.vertical-hero-title{max-width:none;margin:0;font:400 clamp(34px,min(5.1vw,7.4vh),68px)/1.08 var(--f-display,'Prata'),serif;letter-spacing:0;color:var(--text,#202124)}
.vertical-hero-title em{display:block;margin-top:.12em;font-style:normal;color:var(--muted,#55585C);text-shadow:0 0 28px rgba(174,181,188,.3)}
.vertical-hero-lead{max-width:43ch;margin:clamp(18px,3vh,30px) 0 0;font:400 clamp(15px,1.2vw,18px)/1.75 var(--f-body,'Inter'),sans-serif;color:var(--muted,#55585C)}
.vertical-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2vw,24px);margin-top:clamp(24px,4vh,38px)}
.vertical-hero-primary,.vertical-hero-secondary{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:14px 20px;font:600 14px/1.35 var(--f-body,'Inter'),sans-serif;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease;border-radius:10px;}
.vertical-hero-primary{background:var(--text,#202124);color:var(--bg,#FAFAF8);border:1px solid var(--text,#202124);box-shadow:0 0 0 1px rgba(174,181,188,.55),0 8px 22px rgba(32,33,36,.12),0 0 24px rgba(174,181,188,.28)}
.vertical-hero-primary:hover,.vertical-hero-primary:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 4px rgba(174,181,188,.24),0 12px 28px rgba(32,33,36,.18),0 0 34px rgba(174,181,188,.42)}
.vertical-hero-secondary{color:var(--text,#202124);border:1px solid var(--line-strong,rgba(174,181,188,.8));background:rgba(250,250,248,.35)}
.vertical-hero-secondary:hover,.vertical-hero-secondary:focus-visible{transform:translateY(-2px);border-color:var(--text,#202124);box-shadow:0 0 22px rgba(174,181,188,.3)}
.vertical-hero-proof{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:clamp(24px,4vh,38px);padding-top:18px;border-top:1px solid var(--line,rgba(174,181,188,.55));font:500 14px/1.5 var(--f-body,'Inter'),sans-serif;color:var(--muted,#55585C)}
.vertical-hero-proof span{display:inline-flex;align-items:center;gap:8px}.vertical-hero-proof i{color:var(--text,#202124);font-size:13px}
.vertical-hero-visual{position:relative;min-width:0;padding:0 clamp(14px,2.3vw,34px) 0 0;animation:vh-visual-enter 1.1s .08s cubic-bezier(.2,.7,.2,1) both}
.vertical-hero-image-frame{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,67vh,760px);height:clamp(420px,67vh,760px);border:1px solid rgba(174,181,188,.8);background:#34373A;box-shadow:0 0 0 1px rgba(174,181,188,.25),0 22px 60px -28px rgba(32,33,36,.35),0 0 38px rgba(174,181,188,.28)}
.vertical-hero-image-frame:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(250,250,248,.22);box-shadow:inset 0 0 55px rgba(32,33,36,.12)}
.vertical-hero-image-frame>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;transform:scale(1.04);animation:vh-image-settle 1.8s cubic-bezier(.2,.7,.2,1) both;filter:saturate(.78)}
.vertical-hero-image-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(32,33,36,.04) 35%,rgba(32,33,36,.68) 100%),linear-gradient(90deg,rgba(32,33,36,.15),transparent 45%)}
.vertical-hero-door{position:absolute;z-index:3;top:0;bottom:0;width:50%;background:linear-gradient(110deg,rgba(32,33,36,.9),rgba(65,68,72,.84) 45%,rgba(174,181,188,.6));pointer-events:none;animation:vh-door-open 1.45s .22s cubic-bezier(.75,0,.18,1) both}
.vertical-hero-door--left{left:0;transform-origin:left center;border-right:1px solid rgba(250,250,248,.6);box-shadow:inset -10px 0 28px rgba(174,181,188,.2)}
.vertical-hero-door--right{right:0;transform-origin:right center;background:linear-gradient(250deg,rgba(32,33,36,.92),rgba(65,68,72,.84) 48%,rgba(174,181,188,.5));border-left:1px solid rgba(250,250,248,.6);box-shadow:inset 10px 0 28px rgba(174,181,188,.2)}
.vertical-hero-lightline{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;background:#FAFAF8;box-shadow:0 0 8px #FAFAF8,0 0 22px rgba(174,181,188,.95);transform:scaleY(0);transform-origin:center;animation:vh-line-flash .9s .45s ease-out both;pointer-events:none}
.vertical-hero-image-label{position:absolute;z-index:5;left:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);display:flex;align-items:center;gap:13px;padding:16px 18px;background:rgba(32,33,36,.88);border:1px solid rgba(174,181,188,.72);color:#FAFAF8;box-shadow:0 0 28px rgba(174,181,188,.2);backdrop-filter:blur(12px);animation:vh-label-enter .8s 1s both}
.vertical-hero-label-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid #AEB5BC;color:#FAFAF8}.vertical-hero-image-label b{display:block;font:600 15px/1.4 var(--f-sub,'Arimo'),sans-serif}.vertical-hero-image-label small{display:block;margin-top:3px;font:400 14px/1.4 var(--f-body,'Inter'),sans-serif;color:#D8DADD}.vertical-hero-label-arrow{margin-inline-start:auto;font-size:16px}
.vertical-hero-vertical-note{position:absolute;right:0;top:5%;display:flex;align-items:center;gap:9px;writing-mode:vertical-rl;font:600 12px/1.3 var(--f-body,'Inter'),sans-serif;letter-spacing:.16em;color:var(--muted,#55585C)}.vertical-hero-vertical-note i{height:38px;width:1px;background:var(--silver,#AEB5BC)}
.vertical-hero-floor{position:absolute;left:-20px;top:18%;display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 9px;background:var(--bg,#FAFAF8);border:1px solid var(--line-strong,rgba(174,181,188,.8));box-shadow:0 0 22px rgba(174,181,188,.24);font:600 12px/1 var(--f-body,'Inter'),sans-serif;color:var(--muted,#55585C)}.vertical-hero-floor i{height:24px;width:1px;background:var(--silver,#AEB5BC);animation:vh-floor-pulse 2.2s ease-in-out infinite}
.vertical-hero-scroll{position:absolute;bottom:clamp(12px,2vh,22px);left:clamp(22px,5.2vw,88px);display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--muted,#55585C);font:600 12px/1.3 var(--f-body,'Inter'),sans-serif;letter-spacing:.12em}.vertical-hero-scroll-line{display:block;width:34px;height:1px;background:var(--silver,#AEB5BC);box-shadow:0 0 10px rgba(174,181,188,.8)}.vertical-hero-scroll i{font-size:12px;animation:vh-scroll-bob 1.8s ease-in-out infinite}
.vertical-hero-next{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px clamp(22px,5.2vw,88px);border-top:1px solid var(--line,rgba(174,181,188,.4));background:var(--bg,#FAFAF8);color:var(--text,#202124)}.vertical-hero-next span{font:600 12px/1.4 var(--f-body,'Inter'),sans-serif;letter-spacing:.12em;color:var(--muted,#55585C)}.vertical-hero-next p{margin:6px 0 0;font:400 15px/1.5 var(--f-body,'Inter'),sans-serif}.vertical-hero-next>a{display:inline-flex;gap:12px;align-items:center;color:var(--text,#202124);font:600 14px/1.4 var(--f-body,'Inter'),sans-serif;text-decoration:none}
@keyframes vh-copy-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes vh-visual-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes vh-image-settle{from{transform:scale(1.12)}to{transform:scale(1.04)}}@keyframes vh-door-open{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}@keyframes vh-line-flash{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(0);opacity:0}}@keyframes vh-label-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes vh-floor-pulse{0%,100%{opacity:.45;transform:scaleY(.75)}50%{opacity:1;transform:scaleY(1)}}@keyframes vh-scroll-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(max-width:900px){.vertical-hero{min-height:auto;padding-block:42px 64px}.vertical-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.vertical-hero-image-frame{height:clamp(410px,62vh,610px);min-height:410px}.vertical-hero-actions{align-items:flex-start;flex-direction:column}.vertical-hero-scroll{bottom:18px}}
@media(max-width:640px){.vertical-hero{padding:32px 20px 64px;min-height:auto}.vertical-hero:before{inset:9px}.vertical-hero-inner{grid-template-columns:minmax(0,1fr);gap:28px}.vertical-hero-copy{max-width:none}.vertical-hero-eyebrow{margin-bottom:20px}.vertical-hero-title{max-width:none}.vertical-hero-lead{font-size:15px;max-width:36ch}.vertical-hero-actions{width:100%;gap:11px;margin-top:24px}.vertical-hero-primary,.vertical-hero-secondary{width:100%;min-height:50px}.vertical-hero-proof{gap:10px 16px;margin-top:22px;padding-top:15px}.vertical-hero-visual{padding:0 12px 0 0}.vertical-hero-image-frame{height:clamp(390px,105vw,520px);min-height:0}.vertical-hero-vertical-note{right:-1px;top:3%;font-size:11px}.vertical-hero-floor{left:-8px;top:15%;padding:10px 7px}.vertical-hero-image-label{left:10px;right:10px;bottom:10px;padding:12px;gap:10px}.vertical-hero-image-label b{font-size:15px}.vertical-hero-image-label small{font-size:14px}.vertical-hero-scroll{left:20px;bottom:18px;font-size:12px}.vertical-hero-next{align-items:flex-start;flex-direction:column;padding:22px 20px;gap:14px}}
@media(max-height:700px) and (min-width:901px){.vertical-hero{padding-block:24px 42px}.vertical-hero-image-frame{height:58vh;min-height:360px}.vertical-hero-eyebrow{margin-bottom:18px}.vertical-hero-lead{margin-top:18px}.vertical-hero-actions{margin-top:22px}.vertical-hero-proof{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.vertical-hero-copy,.vertical-hero-visual,.vertical-hero-image-frame>img,.vertical-hero-door,.vertical-hero-lightline,.vertical-hero-image-label,.vertical-hero-floor i,.vertical-hero-scroll i{animation:none!important;transition:none!important}.vertical-hero-door{display:none}.vertical-hero-lightline{display:none}.vertical-hero-image-frame>img{transform:none}}


/* ===== HOME 2 / SECTION 2 : THE LIFT SHAFT OF INDEPENDENCE (4 benefits = 4 floors; a lift car rides between them) ===== */
.lsh { --lsh-dir: 1; --lsh-ease: cubic-bezier(.65, 0, .35, 1); --lsh-out: cubic-bezier(.2, .7, .2, 1); --lsh-dur: 5s; --lsh-card: color-mix(in srgb, var(--line-strong) 62%, var(--line)); position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: var(--hh); padding: clamp(56px, 6vw, 72px) 24px; background: radial-gradient(ellipse 40% 36% at 50% 0%, color-mix(in srgb, var(--silver) 26%, transparent), transparent 78%), var(--bg); color: var(--ink); }
.lsh::before { content: ""; position: absolute; inset: 18px; z-index: -1; border: 1px solid color-mix(in srgb, var(--silver) 55%, transparent); border-radius: 22px; box-shadow: inset 0 0 42px color-mix(in srgb, var(--silver) 14%, transparent); pointer-events: none; }
.lsh-wrap { width: min(100%, 1200px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "intro shaft photo"; column-gap: clamp(24px, 3.4vw, 44px); align-items: stretch; }

/* column 1: text */
.lsh-intro { grid-area: intro; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3vw, 32px); min-width: 0; }
.lsh-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lsh-pill { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px/1.4 var(--f-sub); }
.lsh-title { margin: 0; font: 400 clamp(32px, 3.2vw, 42px)/1.18 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.lsh-w { display: inline-block; vertical-align: top; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.lsh-w > span { display: inline-block; }
.lsh-lead { max-width: 40ch; margin: 0; color: var(--muted); font: 400 18px/1.6 var(--f-body); }
.lsh-cta { grid-area: cta; display: flex; flex-direction: column; gap: 12px; }
.lsh-cta .btn { width: 100%; }

/* column 2: shaft + floors */
.lsh-shaft { grid-area: shaft; position: relative; display: flex; min-width: 0; }
.lsh-list { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lsh-floor { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 16px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lsh-floor:focus-visible { outline: none; }
.lsh-floor:focus-visible .lsh-card { outline: 3px solid var(--ink); outline-offset: 3px; }
.lsh-node { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--lsh-card); border-radius: 50%; background: var(--bg); color: var(--muted); font: 700 15px/1 var(--f-sub); transition: border-color .4s, color .4s; }
.is-passed .lsh-node { border-color: var(--ink); color: var(--ink); }
.lsh-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 14px 16px; border: 1.5px solid var(--lsh-card); border-radius: 18px; background: var(--surface); transition: transform .35s var(--lsh-out), border-color .3s, background .3s, box-shadow .35s; }
.lsh-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 18px; transition: transform .45s var(--lsh-out), background .3s, color .3s, border-color .3s; }
.lsh-copy { display: block; min-width: 0; }
.lsh-name { display: block; color: var(--ink); font: 600 20px/1.25 var(--f-sub); }
.lsh-text { display: block; margin-top: 4px; color: var(--muted); font: 400 15px/1.45 var(--f-body); }
.lsh-bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.is-active .lsh-card { border-color: var(--ink); background: var(--tint); box-shadow: 0 18px 40px -26px var(--shadow-ink), 0 0 0 4px color-mix(in srgb, var(--silver) 40%, transparent); }
.is-active .lsh-icon { border-color: var(--ink); background: var(--ink); color: var(--bg); transform: scale(1.06) rotate(-6deg); }
@media (hover: hover) { .lsh-floor:hover .lsh-card { transform: translateX(calc(4px * var(--lsh-dir))); border-color: var(--ink); } }

/* the rail, the progress line and the car */
.lsh-rail { position: absolute; inset-inline-start: 0; top: var(--rt, 0px); width: 40px; height: var(--rh, 0px); pointer-events: none; }
.lsh-rail::before, .lsh-fill { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - 1px); width: 2px; border-radius: 2px; }
.lsh-rail::before { background: var(--lsh-card); transform-origin: top; }
.lsh-fill { background: var(--ink); transform: scaleY(var(--prog, 0)); transform-origin: bottom; transition: transform var(--ride, 0ms) var(--lsh-ease); }
.lsh-car { position: absolute; inset-inline-start: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 40px; height: 52px; margin-top: -26px; border-radius: 11px; background: var(--ink); color: var(--bg); outline: 1.5px solid color-mix(in srgb, var(--bg) 42%, transparent); outline-offset: -5px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 40%, transparent), 0 14px 24px -12px var(--shadow-ink); transform: translateY(var(--cy, 0px)); transition: transform var(--ride, 0ms) var(--lsh-ease), opacity .6s ease 1s; }
.lsh-car::before { content: ""; position: absolute; inset-inline-start: 50%; top: -14px; width: 2px; height: 14px; margin-inline-start: -1px; background: var(--ink); }
.lsh-digits { display: block; height: 20px; overflow: hidden; }
.lsh-digits-in { display: flex; flex-direction: column; transform: translateY(calc((var(--n, 1) - 1) * -20px)); transition: transform var(--ride, 0ms) var(--lsh-ease); }
.lsh-digits b { display: block; height: 20px; font: 700 15px/20px var(--f-sub); text-align: center; }

/* column 3: photo */
.lsh-photo { grid-area: photo; display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; }
.lsh-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 26px; background: var(--tint); box-shadow: 0 24px 60px -34px var(--shadow-ink), 0 0 44px -8px var(--glow); }
.lsh-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; clip-path: inset(0 50% 0 50%); transform: scale(1.04); transition: clip-path .9s var(--lsh-ease), transform 1.4s var(--lsh-out), opacity .2s; }
.lsh-img.is-active { z-index: 2; opacity: 1; clip-path: inset(0); transform: none; }
.lsh-img.is-prev { z-index: 1; opacity: 1; clip-path: inset(0); transform: none; transition: none; }
.lsh-cap { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.lsh-cap-num { color: var(--muted); font: 600 14px/1 var(--f-body); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lsh-cap-name { flex: 1; min-width: 0; color: var(--ink); font: 600 16px/1.25 var(--f-sub); animation: lsh-swap .5s var(--lsh-out) both; }
.lsh-dots { display: flex; gap: 6px; }
.lsh-dots i { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--lsh-card); transition: width .4s var(--lsh-out), background .3s; }
.lsh-dots i.is-on { width: 26px; background: var(--ink); }
.lsh-pause { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; transition: border-color .2s, box-shadow .25s; }
.lsh-pause:hover { border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.lsh-pause:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lsh-pause .fa-play { display: none; }
.lsh-pause[aria-pressed="true"] .fa-pause { display: none; }
.lsh-pause[aria-pressed="true"] .fa-play { display: inline; }

/* autoplay: the progress line inside the active card drives the 5 s cycle */
.lsh.is-playing .is-active .lsh-bar { animation: lsh-run var(--lsh-dur) linear forwards; }
.lsh.is-playing.is-paused .is-active .lsh-bar { animation-play-state: paused; }
@keyframes lsh-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lsh-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* entrance (only when JS is running; without JS everything is simply visible) */
.lsh.is-js .lsh-pill, .lsh.is-js .lsh-lead, .lsh.is-js .lsh-cta, .lsh.is-js .lsh-li, .lsh.is-js .lsh-photo { opacity: 0; transform: translateY(18px); }
.lsh.is-js .lsh-w > span { transform: translateY(115%); }
.lsh.is-js .lsh-rail::before { transform: scaleY(0); }
.lsh.is-js .lsh-car { opacity: 0; }
.lsh.is-js:not(.is-in) .lsh-img { clip-path: inset(0 50% 0 50%); }
.lsh.is-in .lsh-pill, .lsh.is-in .lsh-lead, .lsh.is-in .lsh-cta, .lsh.is-in .lsh-li, .lsh.is-in .lsh-photo { opacity: 1; transform: none; transition: opacity .7s var(--lsh-out), transform .8s var(--lsh-out); }
.lsh.is-in .lsh-pill { transition-delay: 0ms; }
.lsh.is-in .lsh-lead { transition-delay: 520ms; }
.lsh.is-in .lsh-cta { transition-delay: 660ms; }
.lsh.is-in .lsh-photo { transition-delay: 450ms; }
.lsh.is-in .lsh-li { transition-delay: calc(350ms + var(--k, 0) * 110ms); }
.lsh-li:nth-child(1) { --k: 3; } .lsh-li:nth-child(2) { --k: 2; } .lsh-li:nth-child(3) { --k: 1; } .lsh-li:nth-child(4) { --k: 0; }
.lsh.is-in .lsh-w > span { transform: none; transition: transform .9s var(--lsh-out) calc(120ms + var(--wi, 0) * 90ms); }
.lsh.is-in .lsh-rail::before { transform: scaleY(1); transition: transform 1.1s var(--lsh-ease) .3s; }
.lsh.is-in .lsh-car { opacity: 1; }

/* tablet: heading on top, shaft and photo side by side, buttons underneath */
@media (max-width: 1080px) {
  .lsh-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "shaft photo" "cta cta"; row-gap: 32px; }
  .lsh-intro { display: contents; }
  .lsh-head { max-width: 640px; }
  .lsh-cta { flex-direction: row; flex-wrap: wrap; }
  .lsh-cta .btn { width: auto; }
}
/* mobile: one column, photo first, then the shaft */
@media (max-width: 640px) {
  .lsh { padding: 56px 16px; }
  .lsh::before { inset: 8px; border-radius: 18px; }
  .lsh-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "shaft" "cta"; row-gap: 28px; }
  .lsh-list { gap: 14px; }
  .lsh-floor { column-gap: 12px; }
  .lsh-card { gap: 12px; padding: 12px 14px; }
  .lsh-cta { flex-direction: column; }
  .lsh-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lsh *, .lsh *::before { transition: none !important; animation: none !important; }
}

/* ===== HOME 2 / SECTION 3 : BUILD YOUR ACCESSIBLE HOME (pinned scroll scene: the house is drawn piece by piece, each product photo docks into its slot) ===== */
.fit { --fit-card: color-mix(in srgb, var(--line-strong) 62%, var(--line)); --fit-ease: cubic-bezier(.2, .7, .2, 1); --ph: clamp(88px, 8.4vw, 116px); position: relative; color: var(--ink); background: var(--bg); }
.fit-track { position: relative; height: 340vh; }
.fit-pin { position: sticky; top: var(--hh, 76px); height: calc(100vh - var(--hh, 76px)); height: calc(100svh - var(--hh, 76px)); display: flex; align-items: center; justify-content: center; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vh, 56px) 24px; background: radial-gradient(ellipse 36% 44% at 100% 42%, color-mix(in srgb, var(--silver) 24%, transparent), transparent 74%), radial-gradient(ellipse 34% 34% at 0% 100%, color-mix(in srgb, var(--silver) 16%, transparent), transparent 76%), var(--bg); }
.fit-pin::before { content: ""; position: absolute; inset: 18px; z-index: -1; border: 1px solid color-mix(in srgb, var(--silver) 55%, transparent); border-radius: 22px; box-shadow: inset 0 0 42px color-mix(in srgb, var(--silver) 14%, transparent); pointer-events: none; }
.fit-wrap { width: min(100%, 1200px); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(14px, 2.4vh, 24px); }

.fit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fit-headtext { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.fit-pill { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px/1.4 var(--f-sub); }
.fit-title { max-width: 26ch; margin: 0; font: 400 clamp(30px, 3.2vw, 42px)/1.18 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.fit-w { display: inline-block; vertical-align: top; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.fit-w > span { display: inline-block; }
.fit-all--m { display: none; }

.fit-stage { min-height: 0; display: flex; align-items: center; justify-content: center; }
.fit-svg { width: 100%; height: 100%; overflow: visible; }
.fit-d { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.fit-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 3; }
.fit-d[data-d="ground"] { stroke: var(--line-strong); }
.fit-d[data-d="floor"], .fit-d[data-d="door"], .fit-d[data-d="ramprail"] { stroke-width: 2; }
.fit-car rect { fill: var(--bg); stroke: var(--ink); stroke-width: 3; }
.fit-car path { fill: none; stroke: var(--ink); stroke-width: 2; }

.fit-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.fit-tile { position: relative; display: grid; grid-template-columns: var(--ph) minmax(0, 1fr); align-items: center; gap: 16px; height: 100%; padding: 10px; border: 1.5px solid var(--fit-card); border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .4s, background .4s, box-shadow .4s, transform .35s var(--fit-ease); }
.fit-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .fit-tile.is-lit:hover { transform: translateY(-4px); border-color: var(--ink); } }
.fit-slot { position: relative; display: block; width: var(--ph); height: var(--ph); border: 1.5px dashed var(--line-strong); border-radius: 14px; }
.fit-ph { position: absolute; inset: -1.5px; z-index: 20; display: block; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--tint); will-change: transform; }
.fit-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fit-info { display: flex; flex-direction: column; min-width: 0; }
.fit-idx { color: var(--muted); font: 600 14px/1 var(--f-body); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.fit-name { margin-top: 6px; color: var(--ink); font: 600 22px/1.2 var(--f-sub); letter-spacing: -.01em; }
.fit-text { margin-top: 4px; color: var(--muted); font: 400 15px/1.45 var(--f-body); }
.fit-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink); font: 600 16px/1.3 var(--f-sub); }
.fit-link .ar { font-size: 14px; }
.fit-tile:hover .fit-link .ar { transform: translateX(4px); }

/* scene is driven by JS (.is-js): empty slots first, tiles light up as their photo docks */
.fit.is-js .fit-tile { background: transparent; border-style: dashed; border-color: var(--line); pointer-events: none; }
.fit.is-js .fit-tile.is-lit { background: var(--surface); border-style: solid; border-color: var(--fit-card); pointer-events: auto; box-shadow: 0 18px 40px -28px var(--shadow-ink); }
.fit.is-js .fit-tile .fit-info { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--fit-ease); }
.fit.is-js .fit-tile.is-lit .fit-info { opacity: 1; transform: none; }
.fit.is-js .fit-ph { opacity: 0; }
.fit.is-js .fit-tile.is-lit .fit-slot { border-color: transparent; }
.fit.is-done .fit-tile { animation: fit-glow 1.1s ease both; }
.fit.is-done .fit-li:nth-child(2) .fit-tile { animation-delay: .15s; }
.fit.is-done .fit-li:nth-child(3) .fit-tile { animation-delay: .3s; }
.fit.is-done .fit-all { animation: fit-glow 1.1s .5s ease both; }
@keyframes fit-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--silver) 0%, transparent); } 40% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--silver) 55%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--silver) 0%, transparent); } }

/* entrance of the header */
.fit.is-js .fit-pill, .fit.is-js .fit-all--d, .fit.is-js .fit-all--m { opacity: 0; transform: translateY(16px); }
.fit.is-js .fit-w > span { transform: translateY(115%); }
.fit.is-in .fit-pill, .fit.is-in .fit-all--d, .fit.is-in .fit-all--m { opacity: 1; transform: none; transition: opacity .7s var(--fit-ease), transform .8s var(--fit-ease), border-color .2s, box-shadow .25s; }
.fit.is-in .fit-all { transition-delay: .5s, .5s, 0s, 0s; }
.fit.is-in .fit-w > span { transform: none; transition: transform .9s var(--fit-ease) calc(100ms + var(--wi, 0) * 90ms); }

/* when the screen is too short to pin the whole scene (or motion is reduced) it is simply shown finished */
.fit.is-static .fit-track { height: auto; }
.fit.is-static .fit-pin { position: relative; top: auto; height: auto; padding-block: clamp(48px, 6vw, 72px); }
.fit.is-static .fit-stage { height: clamp(220px, 34vw, 340px); }

@media (max-width: 900px) {
  .fit { --ph: 72px; }
  .fit-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fit-tile { gap: 14px; }
  .fit-info { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
  .fit-name { margin-top: 0; font-size: 20px; }
  .fit-text { grid-column: 1 / -1; margin-top: 2px; }
  .fit-link { grid-column: 1 / -1; margin-top: 4px; }
}
@media (max-width: 640px) {
  .fit-pin { padding-inline: 16px; }
  .fit-pin::before { inset: 8px; border-radius: 18px; }
  .fit-head { align-items: flex-start; }
  .fit-all--d { display: none; }
  .fit-all--m { display: inline-flex; width: 100%; }
  .fit-wrap { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .fit-title { font-size: 30px; }
  .fit-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fit *, .fit *::before { transition: none !important; animation: none !important; }
}


/* Home 2 / Section 4 — client support and progress dashboard */
.client4{--c4-bg:#FAFAF8;--c4-ink:#202124;--c4-muted:#55585B;--c4-line:rgba(174,181,188,.68);position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,6vw,80px) 24px;background:radial-gradient(ellipse 40% 60% at 88% 50%,rgba(174,181,188,.22),transparent 74%),linear-gradient(135deg,#F3F4F4,#E9ECEE);color:var(--c4-ink);font-family:var(--f-body,'Inter'),sans-serif}
.client4:before{content:"";position:absolute;inset:12px;border:1px solid rgba(174,181,188,.32);border-radius:28px;pointer-events:none;box-shadow:inset 0 0 40px rgba(174,181,188,.08),0 0 38px rgba(174,181,188,.12)}
.client4-wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);gap:clamp(28px,4vw,54px);align-items:center}
.client4-copy{animation:c4-rise .75s both}.client4-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 18px;border:1px solid var(--c4-line);border-radius:999px;background:rgba(250,250,248,.8);font:600 14px/1.3 var(--f-sub,'Arimo'),sans-serif;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(174,181,188,.12),0 0 24px rgba(174,181,188,.2)}.client4-pill span{width:8px;height:8px;border-radius:50%;background:#7B8389;box-shadow:0 0 0 5px rgba(174,181,188,.2),0 0 14px rgba(174,181,188,.45)}
.client4-title{max-width:12ch;margin:0;font:400 clamp(36px,4.2vw,54px)/1.12 var(--f-head,'Prata'),serif;letter-spacing:-.025em}.client4-lead{max-width:49ch;margin:20px 0 26px;color:var(--c4-muted);font:400 17px/1.75 var(--f-body,'Inter'),sans-serif}.client4-benefits{display:grid;gap:14px;margin:0 0 28px;padding:0;list-style:none}.client4-benefits li{display:flex;align-items:center;gap:14px;font:600 18px/1.45 var(--f-sub,'Arimo'),sans-serif}.client4-check{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #AEB5BC;border-radius:50%;background:linear-gradient(145deg,#FAFAF8,#E8EAEB);color:#202124;box-shadow:0 0 0 4px rgba(174,181,188,.12),0 0 22px rgba(174,181,188,.25);transition:transform .3s,box-shadow .3s}.client4-benefits li:hover .client4-check{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 0 5px rgba(174,181,188,.2),0 0 28px rgba(174,181,188,.42)}
.client4-actions{display:flex;flex-wrap:wrap;gap:12px}.client4-btn{min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 23px;border:1px solid #AEB5BC;border-radius:14px;text-decoration:none;font:600 17px/1.3 var(--f-sub,'Arimo'),sans-serif;transition:transform .25s,box-shadow .25s,background .25s}.client4-btn--primary{background:#202124;color:#FAFAF8;box-shadow:0 0 0 1px rgba(174,181,188,.35),0 8px 22px rgba(32,33,36,.12),0 0 25px rgba(174,181,188,.3)}.client4-btn--secondary{background:rgba(250,250,248,.75);color:#202124}.client4-btn:hover,.client4-btn:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 3px rgba(174,181,188,.22),0 0 30px rgba(174,181,188,.38),0 12px 24px rgba(32,33,36,.12)}.client4-btn i{transition:transform .25s}.client4-btn:hover i{transform:translate(3px,-1px)}
.client4-panel{padding:clamp(22px,3vw,32px);border:1px solid rgba(174,181,188,.82);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,246,245,.93));box-shadow:0 22px 56px -34px rgba(32,33,36,.38),0 0 0 1px rgba(174,181,188,.16),0 0 34px rgba(174,181,188,.23);animation:c4-rise .8s .12s both;transition:box-shadow .35s,border-color .35s}.client4-panel:hover{border-color:#8D969C;box-shadow:0 25px 58px -32px rgba(32,33,36,.38),0 0 0 1px rgba(174,181,188,.24),0 0 40px rgba(174,181,188,.34)}.client4-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px}.client4-panel-head h3{margin:0;font:600 23px/1.3 var(--f-sub,'Arimo'),sans-serif}.client4-status{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #AEB5BC;border-radius:999px;background:#E9EBEC;color:#202124;font:600 14px/1.3 var(--f-sub,'Arimo'),sans-serif;white-space:nowrap}.client4-status span{width:7px;height:7px;border-radius:50%;background:#7D858B;box-shadow:0 0 12px rgba(174,181,188,.8)}
.client4-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 26px;padding:0;list-style:none}.client4-steps:before{content:"";position:absolute;top:20px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,#AEB5BC 0 7px,transparent 7px 12px)}.client4-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#55585B;font:500 15px/1.35 var(--f-sub,'Arimo'),sans-serif}.client4-step-dot{display:grid;place-items:center;width:41px;height:41px;border:1px solid #AEB5BC;border-radius:50%;background:#FAFAF8;color:#202124;box-shadow:0 0 0 5px rgba(250,250,248,.92);transition:transform .3s,box-shadow .3s}.client4-steps li.is-done .client4-step-dot,.client4-steps li.is-current .client4-step-dot{background:#E4E7E8;border-color:#7F8990;box-shadow:0 0 0 5px rgba(174,181,188,.14),0 0 22px rgba(174,181,188,.3)}.client4-steps li.is-current .client4-step-dot{animation:c4-pulse 2.6s ease-in-out infinite}
.client4-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.client4-info{position:relative;overflow:hidden;padding:20px 20px 18px;border:1px solid var(--c4-line);border-radius:20px;background:rgba(250,250,248,.78);transition:transform .3s,box-shadow .3s}.client4-info:after{content:"";position:absolute;top:0;left:-120%;width:70%;height:1px;background:linear-gradient(90deg,transparent,#AEB5BC,transparent);transition:left .65s}.client4-info:hover{transform:translateY(-4px);box-shadow:0 0 26px rgba(174,181,188,.22)}.client4-info:hover:after{left:140%}.client4-info-icon{display:none}.client4-info h4{margin:0 0 10px;font:600 21px/1.3 var(--f-sub,'Arimo'),sans-serif}.client4-info p{margin:4px 0;color:var(--c4-muted);font:400 16px/1.55 var(--f-body,'Inter'),sans-serif}.client4-file{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:16px 18px;border:1px solid var(--c4-line);border-radius:15px;background:rgba(250,250,248,.72);color:#202124;text-decoration:none;font:500 16px/1.4 var(--f-body,'Inter'),sans-serif;transition:transform .25s,border-color .25s,box-shadow .25s}.client4-file>span:first-child{display:flex;align-items:center;gap:12px}.client4-file>span:first-child i{color:#62696F;font-size:18px}.client4-file-type{display:flex;align-items:center;gap:10px;color:#55585B;font:600 14px/1.3 var(--f-sub,'Arimo'),sans-serif}.client4-file:hover,.client4-file:focus-visible{transform:translateX(4px);border-color:#8D969C;box-shadow:0 0 0 2px rgba(174,181,188,.13),0 0 25px rgba(174,181,188,.25)}.client4-note{display:flex;align-items:center;gap:9px;margin:18px 0 0;color:#55585B;font:400 14px/1.5 var(--f-body,'Inter'),sans-serif}.client4-note i{color:#747D83}
@keyframes c4-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes c4-pulse{0%,100%{box-shadow:0 0 0 5px rgba(174,181,188,.14),0 0 18px rgba(174,181,188,.22)}50%{box-shadow:0 0 0 8px rgba(174,181,188,.08),0 0 28px rgba(174,181,188,.4)}}
@media(max-width:900px){.client4-wrap{grid-template-columns:1fr;max-width:720px;gap:32px}.client4-title{max-width:16ch}.client4-copy{max-width:680px}}
@media(max-width:600px){.client4{padding:48px 18px}.client4:before{inset:7px;border-radius:18px}.client4-wrap{gap:28px}.client4-title{font-size:clamp(34px,9vw,42px)}.client4-lead{font-size:16px;margin:16px 0 22px}.client4-benefits{gap:12px}.client4-benefits li{font-size:16px}.client4-check{flex-basis:36px;width:36px;height:36px}.client4-actions{display:grid;grid-template-columns:1fr}.client4-btn{width:100%;min-height:58px;font-size:16px}.client4-panel{padding:20px 16px;border-radius:22px}.client4-panel-head{align-items:flex-start;flex-direction:column;margin-bottom:22px}.client4-panel-head h3{font-size:22px}.client4-steps{gap:2px;margin-bottom:22px}.client4-steps:before{top:17px;left:10%;right:10%}.client4-steps li{font-size:14px;gap:9px}.client4-step-dot{width:35px;height:35px}.client4-info-grid{gap:10px}.client4-info{padding:16px 13px;border-radius:16px}.client4-info h4{font-size:18px}.client4-info p{font-size:14px}.client4-file{padding:15px 13px;font-size:14px}.client4-file-type{font-size:14px}.client4-note{font-size:14px;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.client4-copy,.client4-panel{animation:none}.client4 *{transition:none!important;animation:none!important}}

/* ======================================================================
   LOGIN PAGE (merged from login.css)
   ====================================================================== */
/* Ascendra login: lift shaft panel, door card, form, step strip (palette: White, Onyx, Silver via tokens in style.css) */

/* navbar on this page: same bar, centre menus removed */
body[data-page="login"] .nb-menu, body[data-page="signup"] .nb-menu,
body[data-page="login"] .nb-burger, body[data-page="signup"] .nb-burger { display: none !important; }
body[data-page="login"] .nb-bar, body[data-page="signup"] .nb-bar { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1023px) and (min-width: 561px) { body[data-page="login"] .nb-login--bar, body[data-page="signup"] .nb-login--bar { display: inline-flex; } }

/* page frame */
.lg { position: relative; isolation: isolate; display: grid; align-content: center; min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); padding-block: clamp(14px, 2.6vh, 28px); background: var(--bg); }
ol.shaft-floors, ol.lg-steps { margin: 0; padding: 0; list-style: none; }
.lg-wrap { display: grid; gap: clamp(12px, 2vh, 18px); }
.lg-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }

/* left panel */
.lg-panel { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 18px); min-width: 0; padding: clamp(18px, 2.4vw, 28px); background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 26px; }
.lg-title { font: 400 clamp(28px, 3vw, 38px)/1.15 var(--f-head); color: var(--ink); }
.lg-sub { margin-block-start: 6px; font: 400 17px/1.5 var(--f-sub); color: var(--muted); }
.lg-help { display: grid; gap: 6px; font: 400 16px/1.4 var(--f-body); color: var(--muted); }
.lg-help p { display: flex; align-items: center; gap: 10px; }
.lg-help i { font-size: 16px; color: var(--ink); }
.lg-help a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lg-help a:hover { text-decoration-thickness: 2px; }

/* lift shaft (vertical on desktop) */
.shaft { --p: 0; position: relative; flex: 1; min-height: 250px; }
.shaft-track { position: absolute; inset-block: 0; inset-inline-start: 18px; width: 8px; border-radius: 8px; background: color-mix(in srgb, var(--silver) 55%, transparent); }
.shaft-fill { position: absolute; inset-block-end: 0; inset-inline-start: 18px; width: 8px; border-radius: 8px; background: var(--ink); height: calc(22px + (100% - 44px) * var(--p)); transition: height .9s cubic-bezier(.65, 0, .35, 1); }
.shaft-floors { position: absolute; inset: 0; }
.fl { position: absolute; inset-inline-start: 0; inset-block-end: calc((100% - 44px) * var(--k)); width: 44px; height: 44px; }
.fl:nth-child(1) { --k: 0; }
.fl:nth-child(2) { --k: .5; }
.fl:nth-child(3) { --k: 1; }
.fl-node { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); font: 700 16px/1 var(--f-sub); box-shadow: 0 0 16px -2px var(--glow); transition: background .3s, color .3s, border-color .3s; }
.fl:nth-child(1) .fl-node { border-radius: 12px; }
.fl.is-done .fl-node { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fl-label { position: absolute; inset-inline-start: 60px; inset-block-start: 50%; transform: translateY(-50%); font: 400 17px/1.3 var(--f-body); color: var(--ink); white-space: nowrap; }
.fl-label b { font: 700 17px/1.3 var(--f-sub); }
.fl.is-done .fl-label { font-weight: 600; }

.shaft-hint { position: absolute; inset-inline-start: 0; inset-block-end: calc((100% - 44px) * .25); display: flex; align-items: center; gap: 16px; height: 44px; font: 400 16px/1.3 var(--f-body); color: var(--muted); }
.shaft-hint-ic { display: grid; place-items: center; width: 44px; font-size: 17px; color: var(--ink); }
.shaft-hint-ic i { padding-block: 4px; background: var(--surface); }

.car { position: absolute; inset-inline-start: 0; inset-block-end: calc((100% - 44px) * var(--p)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 18px; box-shadow: 0 0 0 4px var(--glow), 0 0 22px 2px var(--glow), 0 8px 18px -4px var(--shadow-ink); transition: inset-block-end .9s cubic-bezier(.65, 0, .35, 1), inset-inline-start .9s cubic-bezier(.65, 0, .35, 1); }

/* right card */
.lg-card { --s: 1; position: relative; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 16px); min-width: 0; padding: clamp(16px, 2vw, 24px); background: var(--surface); border: 1.5px solid var(--line); border-radius: 26px; box-shadow: 0 24px 60px -34px var(--shadow-ink), 0 0 44px -8px var(--glow); }
.lg-card::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 30px; background: linear-gradient(120deg, var(--silver), var(--white), var(--silver)); background-size: 220% 220%; filter: blur(16px); opacity: .9; animation: sheen 8s ease-in-out infinite alternate; }

/* elevator doors */
.lg-card .doors { position: relative; display: grid; place-items: center; height: clamp(68px, 10vh, 92px); border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line-strong); background: linear-gradient(180deg, var(--tint), var(--surface)); box-shadow: inset 0 0 26px -4px var(--glow); }
.lg-card .door { position: absolute; inset-block: 0; width: 50%; background: linear-gradient(100deg, var(--tint), color-mix(in srgb, var(--line-strong) 45%, var(--tint)) 50%, var(--tint)); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.lg-card .door--a { inset-inline-start: 0; border-inline-end: 1.5px solid var(--line-strong); transform: translateX(calc(var(--s) * -88%)); animation: doorA 1s .25s cubic-bezier(.65, 0, .35, 1) backwards; }
.lg-card .door--b { inset-inline-end: 0; border-inline-start: 1.5px solid var(--line-strong); transform: translateX(calc(var(--s) * 88%)); animation: doorB 1s .25s cubic-bezier(.65, 0, .35, 1) backwards; }
.lg-card.is-closed .door { transform: none; }
@keyframes doorA { from { transform: translateX(0); } }
@keyframes doorB { from { transform: translateX(0); } }
.lg-card .door-display { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 15px/1.2 var(--f-body); box-shadow: 0 0 0 4px var(--glow), 0 8px 18px -8px var(--shadow-ink); }
.lg-card .door-display i { font-size: 15px; }

/* form */
.lg-form { display: grid; gap: clamp(10px, 1.7vh, 14px); transition: opacity .4s; animation: lgFade .6s .95s ease backwards; }
.lg-form.is-busy { pointer-events: none; }
@keyframes lgFade { from { opacity: 0; transform: translateY(10px); } }
.lg-label { padding: 0; font: 700 16px/1.3 var(--f-sub); color: var(--ink); }
.lg-role { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.lg-role .lg-label { margin-block-end: 8px; }
.role-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.role-opt { position: relative; display: block; }
.role-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.role-opt span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(46px, 6.4vh, 52px); border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 17px/1 var(--f-sub); transition: background .2s, border-color .2s, box-shadow .25s; }
.role-opt span i { font-size: 16px; }
.role-opt:hover span { border-color: var(--line-strong); }
.role-opt input:checked + span { background: var(--tint); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.role-opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

.lg-field { display: grid; gap: 8px; min-width: 0; }
.lg-input { width: 100%; min-height: clamp(46px, 6.4vh, 52px); padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 400 16px/1.3 var(--f-body); transition: border-color .2s, box-shadow .25s; }
.lg-input::placeholder { color: var(--muted); opacity: 1; }
.lg-input:hover { border-color: var(--ink); }
.lg-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.lg-input.is-invalid { border-width: 2.5px; border-color: var(--ink); }
.lg-pass { position: relative; }
.lg-pass .lg-input { padding-inline-end: 84px; }
.lg-show { position: absolute; inset-block: 6px; inset-inline-end: 6px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 600 15px/1 var(--f-body); cursor: pointer; transition: background .2s; }
.lg-show:hover { background: var(--tint); }
.lg-err { display: flex; align-items: flex-start; gap: 8px; font: 500 15px/1.4 var(--f-body); color: var(--ink); }
.lg-err[hidden] { display: none; }
.lg-err i { margin-block-start: 3px; font-size: 15px; }

.lg-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.lg-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font: 400 16px/1.3 var(--f-body); cursor: pointer; }
.lg-check input { position: absolute; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.lg-box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--bg); font-size: 14px; transition: background .2s, box-shadow .2s; }
.lg-box i { opacity: 0; transition: opacity .15s; }
.lg-check input:checked + .lg-box { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px var(--glow); }
.lg-check input:checked + .lg-box i { opacity: 1; }
.lg-check input:focus-visible + .lg-box { outline: 3px solid var(--ink); outline-offset: 3px; }
.lg-forgot { unicode-bidi: plaintext; display: inline-flex; align-items: center; min-height: 40px; font: 500 16px/1.3 var(--f-body); text-decoration: underline; text-underline-offset: 3px; }
.lg-forgot:hover { text-decoration-thickness: 2px; }
.lg-submit { width: 100%; min-height: clamp(48px, 6.6vh, 54px); font-size: 17px; }
.lg-submit:disabled { cursor: progress; animation: none; transform: none; }

/* three animation steps */
.lg-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; }
.lg-step { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px 16px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; transition: background .3s, border-color .3s, box-shadow .3s; }
.lg-step b { font: 700 18px/1.25 var(--f-sub); color: var(--ink); }
.lg-step span { font: 400 16px/1.4 var(--f-body); color: var(--muted); }
.lg-step.is-done { background: var(--tint); }
.lg-step.is-active { background: var(--tint); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.lg-arrow { display: grid; place-items: center; font-size: 18px; color: var(--muted); }

/* tablet and mobile: shaft becomes a short strip above the form, car rises sideways */
@media (max-width: 899px) {
  .lg-main { grid-template-columns: minmax(0, 1fr); }
  .lg-panel { gap: 12px; padding: 18px; }
  .lg-title { font-size: clamp(26px, 6vw, 32px); }
  .lg-sub { font-size: 16px; }
  .shaft { flex: none; height: 96px; min-height: 0; }
  .shaft-track { inset-block: auto; inset-inline: 0; inset-block-start: 18px; width: auto; height: 8px; }
  .shaft-fill { inset-block: auto; inset-block-start: 18px; inset-inline-start: 0; height: 8px; width: calc(22px + (100% - 44px) * var(--p)); transition: width .9s cubic-bezier(.65, 0, .35, 1); }
  .shaft-hint { display: none; }
  .fl { inset-block: 0 auto; inset-inline-start: calc((100% - 44px) * var(--k)); }
  .fl-pre { display: none; }
  .fl-label { inset-block-start: 52px; inset-inline-start: 50%; width: 96px; margin-inline-start: -48px; transform: none; font-size: 15px; text-align: center; white-space: normal; }
  .fl:nth-child(1) .fl-label { inset-inline-start: 0; margin-inline-start: 0; width: auto; text-align: start; white-space: nowrap; }
  .fl:nth-child(3) .fl-label { inset-inline-start: auto; inset-inline-end: 0; margin-inline-start: 0; width: auto; text-align: end; white-space: nowrap; }
  .car { inset-block: 0 auto; inset-inline-start: calc((100% - 44px) * var(--p)); }
}
@media (max-width: 899px) and (min-width: 480px) {
  .fl-label { width: 150px; margin-inline-start: -75px; }
}
@media (max-width: 639px) {
  .lg-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lg-arrow { display: none; }
  .lg-step { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px; padding: 10px 14px; text-align: start; }
}
@media (max-width: 420px) {
  .lg-card { padding: 14px; border-radius: 22px; }
  .lg-panel { border-radius: 22px; }
  .role-opts { gap: 8px; }
}

/* very short laptops: tighten, never squash */
@media (min-width: 900px) and (max-height: 760px) {
  .lg-title { font-size: 30px; }
  .lg-sub { font-size: 16px; }
  .shaft { min-height: 200px; }
  .lg-step { padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-card .door, .car, .shaft-fill, .lg-form { transition: none; animation: none; }
  .lg-card .door--a, .lg-card .door--b, .lg-card::before { animation: none; }
}

/* ======================================================================
   SIGN UP PAGE (merged from signup.css; rules only apply on the sign up page)
   ====================================================================== */
/* Ascendra sign up: builds on login.css (shaft, doors, card, fields, step strip) */

/* left panel: shaft + photo side by side */
:where(body[data-page="signup"]) .su-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; flex: 1; min-height: 250px; }
:where(body[data-page="signup"]) .su-photo { position: relative; min-height: 0; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 18px; overflow: hidden; background: var(--tint); box-shadow: 0 0 0 4px var(--glow), 0 0 30px -4px var(--glow); }
:where(body[data-page="signup"]) .su-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
:where(body[data-page="signup"]) .lg-help { display: grid; gap: 6px; }
:where(body[data-page="signup"]) .lg-help p { display: flex; align-items: center; gap: 10px; }

/* card: step meter, panes, strength, actions */
:where(body[data-page="signup"]) .su-meter { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--f-sub); color: var(--muted); }
:where(body[data-page="signup"]) .su-meter span { margin-inline-end: 4px; }
:where(body[data-page="signup"]) .su-meter i { flex: 1; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--silver) 55%, transparent); transition: background .35s; }
:where(body[data-page="signup"]) .su-meter i.on { background: var(--ink); }
:where(body[data-page="signup"]) .lg-form { gap: clamp(10px, 1.7vh, 14px); }
:where(body[data-page="signup"]) .su-pane { display: grid; gap: clamp(10px, 1.7vh, 14px); animation: suIn .45s ease backwards; }
:where(body[data-page="signup"]) .su-pane[hidden] { display: none; }
@keyframes suIn { from { opacity: 0; transform: translateX(calc(var(--s) * 18px)); } }
:where(body[data-page="signup"]) .su-alt { text-align: center; font: 400 16px/1.4 var(--f-body); color: var(--muted); }
:where(body[data-page="signup"]) .su-alt a, :where(body[data-page="signup"]) .su-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-page="signup"]) .su-alt a:hover, :where(body[data-page="signup"]) .su-link:hover { text-decoration-thickness: 2px; }
:where(body[data-page="signup"]) .su-strength { display: flex; align-items: center; gap: 6px; }
:where(body[data-page="signup"]) .su-strength i { flex: none; width: 36px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--silver) 55%, transparent); transition: background .3s; }
:where(body[data-page="signup"]) .su-strength i.on { background: var(--ink); }
:where(body[data-page="signup"]) .su-strength span { margin-inline-start: 6px; font: 500 15px/1.3 var(--f-body); color: var(--muted); }
:where(body[data-page="signup"]) .su-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
:where(body[data-page="signup"]) .su-actions .btn { min-height: clamp(48px, 6.6vh, 54px); font-size: 17px; }
:where(body[data-page="signup"]) .su-actions .btn--s { padding-inline: 20px; }
:where(body[data-page="signup"]) .su-actions .lg-submit { width: auto; }
:where(body[data-page="signup"]) .su-pane .lg-submit[data-next] { margin-block-start: 2px; }

/* tablet and mobile: photo hides, shaft becomes the short strip (rules in login.css) */
@media (max-width: 899px) {
  :where(body[data-page="signup"]) .su-body { display: block; flex: none; min-height: 0; }
  :where(body[data-page="signup"]) .su-photo { display: none; }
  :where(body[data-page="signup"]) .lg-help { gap: 4px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  :where(body[data-page="signup"]) .su-body { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 639px) {
  :where(body[data-page="signup"]) .lg-steps { gap: 6px; }
}
@media (max-width: 420px) {
  :where(body[data-page="signup"]) .su-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  :where(body[data-page="signup"]) .lg-steps { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  :where(body[data-page="signup"]) .lg-step { padding-inline: 10px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  :where(body[data-page="signup"]) .su-body { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { :where(body[data-page="signup"]) .su-pane { animation: none; } :where(body[data-page="signup"]) .su-meter i, :where(body[data-page="signup"]) .su-strength i { transition: none; } }

/* ======================================================================
   404 + COMING SOON PAGES (merged from state-pages.css; door rules scoped to .st-card)
   ====================================================================== */
/* Ascendra: Coming soon + 404 pages
   Panel (dashed) + door card, equal columns, 24px gap. Colours come from the tokens in style.css / darkmode.css,
   so light, dark and RTL all work without extra overrides.
   Type: Prata = headings and big numbers, Arimo = sub-headings and labels, Inter = content. Smallest text: 15px. */

.st { position: relative; isolation: isolate; display: grid; align-content: center; min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); padding-block: clamp(16px, 3vh, 32px); background: var(--bg); }
.st ol, .st ul { margin: 0; padding: 0; list-style: none; }
.st-wrap { display: grid; gap: 16px; }
.st-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

/* ---------- copy panel (dashed) ---------- */
.st-panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 36px; background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 26px; }
.st-head { display: grid; justify-items: start; gap: 16px; }
.st-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--f-sub); box-shadow: 0 0 22px -4px var(--glow); }
.st-title { font: 400 clamp(30px, 3.4vw, 44px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.st-lead { text-wrap: pretty; max-width: 46ch; font: 400 17px/1.6 var(--f-body); color: var(--muted); }
.st-lead a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- countdown ---------- */
.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cd-box { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 14px 8px 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
.cd-box b { font: 400 clamp(30px, 3vw, 38px)/1.1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--ink); }
.cd-box b.is-tick { animation: cdTick .35s ease; }
.cd-box span { font: 400 15px/1.3 var(--f-body); color: var(--muted); }
.cd-box .lab-s { display: none; }
@keyframes cdTick { from { transform: translateY(-6px); opacity: .35; } }

/* ---------- build progress ---------- */
.pg { display: grid; gap: 8px; }
.pg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pg-label { font: 700 16px/1.3 var(--f-sub); color: var(--ink); }
.pg-val { font: 600 16px/1.3 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-bar { position: relative; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--silver) 55%, transparent); overflow: hidden; }
.pg-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p, 72) * 1%); border-radius: 999px; background: var(--ink); animation: pgIn 1.4s .6s cubic-bezier(.65, 0, .35, 1) backwards; }
@keyframes pgIn { from { width: 0; } }

/* ---------- notify form ---------- */
.nf { display: grid; gap: 8px; }
.nf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.nf-field { min-width: 0; }
.st-input { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 400 16px/1.3 var(--f-body); transition: border-color .2s, box-shadow .25s; }
.st-input::placeholder { color: var(--muted); opacity: 1; }
.st-input:hover { border-color: var(--ink); }
.st-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.st-input.is-invalid { border-width: 2.5px; border-color: var(--ink); }
.nf-btn { min-height: 52px; min-width: 150px; }
.nf-btn:disabled { cursor: progress; animation: none; transform: none; }
.st-err { display: flex; align-items: flex-start; gap: 8px; font: 500 15px/1.4 var(--f-body); color: var(--ink); }
.st-err[hidden], .nf-done[hidden], .nf-row[hidden] { display: none; }
.st-err i { margin-block-start: 3px; font-size: 15px; }
.nf-done { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--tint); border: 1.5px solid var(--line-strong); border-radius: 16px; box-shadow: 0 0 0 4px var(--glow); animation: stFade .5s ease backwards; }
.nf-done > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 16px; }
.nf-done div { display: grid; gap: 2px; min-width: 0; }
.nf-done b { font: 700 18px/1.3 var(--f-sub); color: var(--ink); }
.nf-done span { font: 400 16px/1.45 var(--f-body); color: var(--muted); overflow-wrap: anywhere; }
@keyframes stFade { from { opacity: 0; transform: translateY(8px); } }
.nw { white-space: nowrap; }
.st-note { font: 400 16px/1.5 var(--f-body); color: var(--muted); }
.st-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.st-note a:hover, .st-lead a:hover { text-decoration-thickness: 2px; }

/* ---------- 404: buttons + floor chips ---------- */
.st-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fc { display: grid; gap: 10px; }
.fc-label { font: 700 16px/1.3 var(--f-sub); color: var(--ink); }
.fc-list { display: flex; flex-wrap: wrap; gap: 12px; }
.fc-list li { flex: 1 1 auto; }
.chip { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: 700 16px/1.2 var(--f-sub); transition: border-color .2s, box-shadow .25s, background .2s, transform .2s; }
.chip-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font: 700 15px/1 var(--f-sub); }
.chip:hover { border-color: var(--ink); background: var(--tint); box-shadow: 0 0 0 4px var(--glow); transform: translateY(-2px); }

/* ---------- door card ---------- */
.st-card { --s: 1; --dir: 1; position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 26px; box-shadow: 0 24px 60px -34px var(--shadow-ink), 0 0 44px -8px var(--glow); }
.st-card::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 30px; background: linear-gradient(120deg, var(--silver), var(--white), var(--silver)); background-size: 220% 220%; filter: blur(16px); opacity: .9; animation: sheen 8s ease-in-out infinite alternate; }

.st-card .doors { position: relative; display: grid; place-items: center; flex: none; height: 84px; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line-strong); background: linear-gradient(180deg, var(--tint), var(--surface)); box-shadow: inset 0 0 26px -4px var(--glow); }
.st-card .door { position: absolute; inset-block: 0; width: 50%; background: linear-gradient(100deg, var(--tint), color-mix(in srgb, var(--line-strong) 45%, var(--tint)) 50%, var(--tint)); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.st-card .door--a { inset-inline-start: 0; border-inline-end: 1.5px solid var(--line-strong); transform: translateX(calc(var(--s) * var(--dir) * -88%)); animation: doorA 1s .25s cubic-bezier(.65, 0, .35, 1) backwards; }
.st-card .door--b { inset-inline-end: 0; border-inline-start: 1.5px solid var(--line-strong); transform: translateX(calc(var(--s) * var(--dir) * 88%)); animation: doorB 1s .25s cubic-bezier(.65, 0, .35, 1) backwards; }
.st-card.is-closed .door { transform: none; }
.st-card .door-display { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 15px/1.2 var(--f-body); white-space: nowrap; box-shadow: 0 0 0 4px var(--glow), 0 8px 18px -8px var(--shadow-ink); }
.st-card .door-display i { font-size: 15px; }
.st-card .door-display .d { display: inline-block; animation: flick 1.3s calc(.9s + var(--i, 0) * .22s) linear backwards; }
@keyframes flick { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .15; } 38% { opacity: 1; } 52% { opacity: 0; } 66% { opacity: 1; } 80% { opacity: .3; } 100% { opacity: 1; } }

/* photo with silver glow border; fills whatever height the copy panel sets */
.st-photo { position: relative; flex: 1; min-height: 190px; margin: 0; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 22%, transparent), 0 0 30px -2px var(--glow); }
.st-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- coming soon: floor track ---------- */
.trk { --p: 72; display: grid; gap: 10px; flex: none; }
.trk-rail { position: relative; height: 40px; }
.trk-line, .trk-fill { position: absolute; inset-block-start: 16px; height: 8px; border-radius: 8px; }
.trk-line { inset-inline: 0; background: color-mix(in srgb, var(--silver) 55%, transparent); }
.trk-fill { inset-inline-start: 0; width: calc(20px + (100% - 40px) * var(--p) / 100); background: var(--ink); animation: trkIn 1.4s .6s cubic-bezier(.65, 0, .35, 1) backwards; }
.trk-node { position: absolute; inset-block-start: 0; inset-inline-start: calc((100% - 40px) * var(--k)); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink); font: 700 16px/1 var(--f-sub); box-shadow: 0 0 16px -2px var(--glow); }
.trk-node.is-done { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.trk-car { position: absolute; inset-block-start: 0; inset-inline-start: calc((100% - 40px) * var(--p) / 100); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 17px; box-shadow: 0 0 0 4px var(--glow), 0 0 22px 2px var(--glow), 0 8px 18px -4px var(--shadow-ink); animation: carIn 1.4s .6s cubic-bezier(.65, 0, .35, 1) backwards; }
@keyframes trkIn { from { width: 20px; } }
@keyframes carIn { from { inset-inline-start: 0; } }
.trk-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font: 400 16px/1.3 var(--f-body); color: var(--muted); }
.trk-labels li:nth-child(2) { text-align: center; }
.trk-labels li:nth-child(3) { text-align: end; }
.trk-labels li.is-done { color: var(--ink); font-weight: 600; }

/* ---------- 404: idle status row ---------- */
.st-status { display: flex; align-items: center; gap: 14px; flex: none; font: 400 16px/1.4 var(--f-body); color: var(--muted); }
.dots { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); animation: dotLoop 3.6s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 1.2s; }
.dots i:nth-child(3) { animation-delay: 2.4s; }
@keyframes dotLoop { 0%, 30% { background: var(--ink); transform: scale(1.2); } 34%, 100% { background: var(--line); transform: scale(1); } }

/* ---------- animation steps strip (desktop) ---------- */
.st-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; }
.st-step { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px 16px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; transition: background .3s, border-color .3s, box-shadow .3s; }
.st-step b { font: 700 18px/1.25 var(--f-sub); color: var(--ink); }
.st-step span { font: 400 16px/1.4 var(--f-body); color: var(--muted); text-wrap: balance; }
.st-step.is-done { background: var(--tint); }
.st-step.is-active { background: var(--tint); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.st-arrow { display: grid; place-items: center; font-size: 18px; color: var(--muted); }

/* ---------- tablet + mobile: single column, doors strip first, photo + track hide ---------- */
@media (max-width: 899px) {
  .st { align-content: start; min-height: 0; padding-block: 24px 32px; }
  .st-main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .st-panel { display: contents; }
  .st-head { order: 1; gap: 12px; }
  .st-card { order: 2; padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .st-card::before { display: none; }
  .st-panel > :not(.st-head) { order: 3; }
  .st-card .doors { height: 76px; }
  .st-photo, .trk, .st-status, .st-steps { display: none; }
  .st-title { font-size: clamp(28px, 6.4vw, 38px); }
  .st-lead { font-size: 16px; }
}
@media (max-width: 559px) {
  .cd { gap: 8px; }
  .cd-box { padding: 12px 4px 10px; border-radius: 14px; }
  .cd-box b { font-size: 28px; }
  .cd-box .lab-l { display: none; }
  .cd-box .lab-s { display: inline; }
  .nf-row { grid-template-columns: minmax(0, 1fr); }
  .nf-btn { width: 100%; }
  .st-cta .btn { flex: 1 1 100%; }
  .fc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip { justify-content: flex-start; padding: 0 14px; }
  .st-note { text-align: center; }
  .st-note .nsp { display: none; }
}

/* short laptops: tighten rather than squash */
@media (min-width: 900px) and (max-height: 760px) {
  .st-panel { padding: 28px 32px; gap: 14px; }
  .st-card { padding: 20px; gap: 14px; }
  .st-card .doors { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-card .door, .st-card::before, .nf-done { transition: none; animation: none; }
  .st-card .door--a, .st-card .door--b, .st-card .door-display .d, .pg-fill, .trk-fill, .trk-car, .cd-box b.is-tick { animation: none; }
  .dots i { animation: none; }
  .dots i:first-child { background: var(--ink); }
}

/* ======================================================================
   USER + ADMIN DASHBOARDS (merged from dashboard.css; variables scoped to body.dash)
   ====================================================================== */
/* Ascendra dashboards: sticky top bar, left sidebar, content area.
   Palette tokens only (White #FAFAF8, Onyx #202124, Silver #AEB5BC) via style.css + darkmode.css.
   Type: Prata headings, Arimo sub-headings, Inter content. Smallest text is 14px. */
body.dash { --dh: 68px; --dw: 284px; --gap: 24px; }
body.dash { background: var(--bg); color: var(--ink); font: 400 15px/1.6 var(--f-body); }
body.dash.dn-lock { overflow: hidden; }

/* ---------- sidebar ---------- */
.dside { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; width: var(--dw); display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; overflow-y: auto; background: var(--surface); border-inline-end: 1.5px solid var(--line); box-shadow: 0 0 40px -12px var(--glow); transition: transform .3s ease; }
.dside-brand { display: flex; align-items: center; gap: 12px; padding-inline: 8px; min-height: 44px; }
.dside-brand .nb-name { font-size: 26px; }
.dprofile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--tint); box-shadow: 0 0 22px -6px var(--glow); }
.dprofile-av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 17px/1 var(--f-sub); box-shadow: 0 0 0 4px var(--glow); }
.dprofile-t { display: grid; min-width: 0; }
.dprofile-t b { font: 700 17px/1.3 var(--f-sub); overflow-wrap: anywhere; }
.dprofile-t span { font: 400 14px/1.4 var(--f-body); color: var(--muted); overflow-wrap: anywhere; }
.dmenu { display: grid; gap: 6px; }
.dmenu a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 14px; font: 600 16px/1.2 var(--f-sub); color: var(--ink); transition: background .2s, border-color .2s, box-shadow .25s; }
.dmenu a i { display: grid; place-items: center; flex: none; width: 22px; font-size: 17px; }
.dmenu a:hover { border-color: var(--line); background: var(--tint); }
.dmenu a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow), 0 12px 24px -12px var(--shadow-ink); }
.dscrim { position: fixed; inset: 0; z-index: 55; background: rgba(32, 33, 36, .55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.dscrim.is-open { opacity: 1; visibility: visible; }

/* ---------- main column + sticky bar ---------- */
.dmain { margin-inline-start: var(--dw); min-width: 0; }
.dbar { position: sticky; inset-block-start: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--dh); padding-inline: var(--gap); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block-end: 1.5px solid var(--line); transition: box-shadow .25s; }
.dbar.is-scrolled { box-shadow: 0 14px 30px -22px var(--shadow-ink), 0 0 26px -8px var(--glow); }
.dbar-start, .dbar-end { display: flex; align-items: center; gap: 10px; }
.dbar-end { margin-inline-start: auto; }
.dbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 46px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 600 15px/1 var(--f-body); cursor: pointer; transition: box-shadow .25s, border-color .2s, transform .2s; }
.dbtn:hover { border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); transform: translateY(-1px); }
.dbtn--logout { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dbtn--icon { padding: 0; width: 46px; }
.dbtn--burger { display: none; }
.dbtn .i-sun { display: none; }

/* ---------- content ---------- */
.dcontent { display: grid; gap: var(--gap); padding: var(--gap); max-width: 1180px; margin-inline: auto; }
.dsec { scroll-margin-block-start: calc(var(--dh) + 16px); display: grid; gap: 18px; align-content: start; }
.dsec-head { display: grid; gap: 4px; }
.dsec-head h1, .dsec-head h2 { font: 400 clamp(28px, 3.4vw, 38px)/1.15 var(--f-head); }
.dsec-head p { color: var(--muted); font-size: 16px; max-width: 64ch; }
.dcard { position: relative; min-width: 0; padding: 20px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: 0 18px 44px -28px var(--shadow-ink), 0 0 30px -10px var(--glow); }
.dcard h3 { font: 700 19px/1.3 var(--f-sub); margin-block-end: 12px; }
.dgrid { display: grid; gap: var(--gap); }
.dgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* overview */
.dwelcome { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.dwelcome-copy { display: grid; gap: 14px; align-content: center; }
.dwelcome-copy h1 { font: 400 clamp(28px, 3.4vw, 40px)/1.15 var(--f-head); }
.dwelcome-copy p { color: var(--muted); font-size: 16px; }
.dwelcome-photo { position: relative; min-height: 240px; padding: 0; overflow: hidden; }
.dwelcome-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dstat { display: flex; align-items: center; gap: 14px; }
.dstat i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 18px; box-shadow: 0 0 18px -2px var(--glow); }
.dstat span { display: grid; min-width: 0; font: 400 14px/1.35 var(--f-body); color: var(--muted); }
.dstat b { font: 700 20px/1.25 var(--f-sub); color: var(--ink); }

/* progress + steps */
.dprog { display: grid; gap: 8px; }
.dprog-row { display: flex; justify-content: space-between; gap: 12px; font: 600 15px/1.3 var(--f-sub); }
.dprog-bar { height: 12px; border-radius: 999px; background: var(--tint); border: 1.5px solid var(--line); overflow: hidden; }
.dprog-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: 999px; background: var(--ink); box-shadow: 0 0 14px var(--glow); }
.dsteps { display: grid; gap: 0; }
.dstep { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding-block: 14px; }
.dstep + .dstep { border-block-start: 1.5px solid var(--line); }
.dstep-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 16px; }
.dstep.is-done .dstep-dot { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dstep.is-now .dstep-dot { background: var(--tint); box-shadow: 0 0 0 5px var(--glow); }
.dstep-t { display: grid; min-width: 0; }
.dstep-t b { font: 700 17px/1.3 var(--f-sub); }
.dstep-t span { color: var(--muted); font-size: 15px; }
.dtag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 600 14px/1.2 var(--f-sub); white-space: nowrap; }
.dtag--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* forms */
.dform { display: grid; gap: 16px; }
.dfield { display: grid; gap: 6px; min-width: 0; }
.dfield label, .dfield legend { font: 700 15px/1.3 var(--f-sub); padding: 0; }
.dfield input, .dfield select, .dfield textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--bg); color: var(--ink); font: 400 16px/1.4 var(--f-body); }
.dfield textarea { min-height: 96px; resize: vertical; }
.dfield input:focus-visible, .dfield select:focus-visible, .dfield textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.dfield fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dslots { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.dslot { position: relative; }
.dslot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dslot span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; font: 600 15px/1 var(--f-body); background: var(--surface); }
.dslot input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }
.dslot input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.dnote { min-height: 22px; font: 600 15px/1.4 var(--f-body); }

/* visit + warranty lists */
.dlist { display: grid; gap: 0; }
.drow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 14px; }
.drow + .drow { border-block-start: 1.5px solid var(--line); }
.drow-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 17px; }
.drow-t { display: grid; min-width: 0; }
.drow-t b { font: 700 17px/1.3 var(--f-sub); }
.drow-t span { color: var(--muted); font-size: 15px; }
.dlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font: 600 15px/1 var(--f-body); background: var(--surface); transition: box-shadow .25s, border-color .2s; }
.dlink:hover { border-color: var(--ink); box-shadow: 0 0 0 4px var(--glow); }

/* profile */
.dkv { display: grid; gap: 0; }
.dkv div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; }
.dkv div + div { border-block-start: 1.5px solid var(--line); }
.dkv dt { color: var(--muted); font-size: 15px; }
.dkv dd { margin: 0; font: 600 16px/1.4 var(--f-body); text-align: end; overflow-wrap: anywhere; }

@media (max-width: 1200px) { .dgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  body.dash { --gap: 20px; }
  .dside { transform: translateX(-100%); box-shadow: none; }
  .dside.is-open { transform: none; box-shadow: 0 0 60px -10px var(--shadow-ink); }
  .dmain { margin-inline-start: 0; }
  .dbtn--burger { display: inline-flex; }
  .dwelcome, .dgrid--2, .dgrid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  body.dash { --gap: 16px; --dh: 64px; }
  .dbar { padding-inline: 12px; }
  .dbtn { padding: 0 12px; }
  .dbtn--logout span { display: none; }
  .dbtn--logout { width: 46px; padding: 0; }
  .dgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .dcard { padding: 16px; border-radius: 18px; }
  .dstep { grid-template-columns: 40px minmax(0, 1fr); }
  .dstep .dtag { grid-column: 2; justify-self: start; }
  .drow { grid-template-columns: 44px minmax(0, 1fr); }
  .drow > :last-child { grid-column: 2; justify-self: start; }
  .dkv div { flex-direction: column; gap: 2px; }
  .dkv dd { text-align: start; }
}
@media (prefers-reduced-motion: reduce) { .dside, .dscrim, .dbtn, .dbar { transition: none; } }

/* list resets for ol/dl */
.dsteps, .dlist, .dmenu, .dkv { list-style: none; margin: 0; padding: 0; }

/* sidebar top row + footer cards (fill the space under the menu) */
.dside-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dside-close { display: none; }
.dside-foot { margin-block-start: auto; display: grid; gap: 12px; }
.dfoot-card { display: grid; gap: 10px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--tint); box-shadow: 0 0 22px -6px var(--glow); }
.dfoot-card h3 { margin: 0; font: 700 17px/1.3 var(--f-sub); }
.dfoot-card p { margin: 0; font: 400 15px/1.45 var(--f-body); color: var(--muted); }
.dfoot-card .dprog-bar { height: 10px; }
.dfoot-card .dlink { justify-content: center; }

/* admin: projects, requests, clients */
.dproj { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) minmax(170px, 230px); gap: 16px; align-items: center; padding-block: 14px; }
.dproj + .dproj, .dreq + .dreq { border-block-start: 1.5px solid var(--line); }
.dreq { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding-block: 14px; }
.dacts { display: flex; flex-wrap: wrap; gap: 8px; }
button.dlink { cursor: pointer; }
.dlink--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dlink[disabled] { cursor: default; box-shadow: none; border-color: var(--line-strong); }
.drow-ic--txt { font: 700 15px/1 var(--f-sub); }
.dsearch { max-width: 440px; margin-block-end: 6px; }
.dempty { padding-block: 14px; color: var(--muted); font-size: 16px; }

/* full-screen sidebar on mobile and tablet */
@media (max-width: 1023px) {
  .dside { width: 100%; max-width: none; padding: 20px clamp(16px, 5vw, 40px) 28px; gap: 20px; border-inline-end: 0; }
  .dside > * { width: 100%; max-width: 600px; margin-inline: auto; }
  .dside-close { display: inline-flex; }
  .dmenu a { min-height: 54px; font-size: 17px; }
  .dmenu { gap: 8px; }
}
@media (max-width: 900px) {
  .dproj { grid-template-columns: 44px minmax(0, 1fr); }
  .dproj > :nth-child(n+3) { grid-column: 2; }
  .dreq { grid-template-columns: 44px minmax(0, 1fr); }
  .dreq > :nth-child(n+3) { grid-column: 2; justify-self: start; }
}

/* hidden items must stay hidden even where a class sets display */
.dash [hidden] { display: none !important; }

/* ======================================================================
   ABOUT PAGE
   ====================================================================== */
/* Ascendra about: 70vh banner (min 520px) with copy panel + door card in equal columns (24px gap), stats strip inside the banner,
   then story + team sections. Reuses the .st-* panel/card/door/track pieces from the state pages. Colours come from the tokens in
   style.css / darkmode.css, so light, dark and RTL need no extra overrides.
   Type: Prata = headings and big numbers, Arimo = sub-headings and labels, Inter = content. Smallest text: 15px.
   One rhythm everywhere: 24px between blocks, 16px inside a block. */
.ab { position: relative; isolation: isolate; display: grid; min-height: 520px; min-height: max(520px, 70vh); min-height: max(520px, 70svh); padding-block: 24px; background: var(--bg); }
.ab ol, .ab-sec ol { margin: 0; padding: 0; list-style: none; }
.ab-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 24px; }
.ab-wrap .st-main { min-height: 0; }

/* stats strip */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ab-stats li { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 16px 12px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
.ab-stats b { font: 400 clamp(28px, 3vw, 38px)/1.1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--ink); }
.ab-stats span { font: 400 16px/1.3 var(--f-body); color: var(--muted); }

/* scroll cue */
.ab-cue { justify-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 12px; border-radius: 10px; font: 500 16px/1.3 var(--f-body); color: var(--muted); transition: color .2s; }
.ab-cue i { font-size: 15px; animation: abBob 1.8s ease-in-out infinite; }
.ab-cue:hover { color: var(--ink); }
@keyframes abBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* equal padding on both banner blocks (desktop only; mobile keeps the stacked rules from the state pages) */
@media (min-width: 900px) {
  .ab-panel, .ab-card { padding: 28px; gap: 16px; }
  .ab-card .doors { height: 72px; }
}
.ab-panel { justify-content: center; }
.ab-photo { min-height: 140px; }
.ab-photo img { opacity: 0; transition: opacity .6s ease; }
.ab-photo img.is-on { opacity: 1; }
.ab-photo img.ab-pos-a { object-position: 50% 30%; }
.ab-photo img.ab-pos-b { object-position: 50% 20%; }
.ab-card .trk-fill { transition: width .8s cubic-bezier(.65, 0, .35, 1); }
.ab-card .trk-car { transition: inset-inline-start .8s cubic-bezier(.65, 0, .35, 1); }
.ab-card .trk-node { transition: background .3s, color .3s, border-color .3s; }
.ab-card .door-display { font-family: var(--f-sub); font-weight: 700; }

/* sections */
.ab-sec { position: relative; padding-block: 64px; background: var(--bg); scroll-margin-top: var(--hh); }
.ab-sec--tint { background: var(--tint); border-block: 1.5px solid var(--line); }
.ab-sec-in { display: grid; gap: 24px; }
.ab-head { display: grid; justify-items: center; gap: 16px; text-align: center; }
.ab-h2 { font: 400 clamp(28px, 3.4vw, 44px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.ab-lead { max-width: 56ch; font: 400 17px/1.6 var(--f-body); color: var(--muted); text-wrap: pretty; }
.ab-grid { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-card-s { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 24px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; box-shadow: 0 0 30px -10px var(--glow); transition: transform .25s, box-shadow .3s, border-color .25s; }
.ab-card-s:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--glow), 0 18px 40px -24px var(--shadow-ink); }
.ab-card-s h3 { font: 700 20px/1.3 var(--f-sub); color: var(--ink); }
.ab-card-s p { font: 400 16px/1.6 var(--f-body); color: var(--muted); }
.ab-ms { display: flex; align-items: center; gap: 16px; }
.ab-ms b { font: 400 clamp(28px, 3vw, 36px)/1.1 var(--f-head); color: var(--ink); }
.ab-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 18px; color: var(--ink); box-shadow: 0 0 16px -2px var(--glow); }
.ab-card-s--photo { padding: 16px 16px 24px; }
.ab-tphoto { margin: 0 0 4px; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 22%, transparent), 0 0 24px -4px var(--glow); }
.ab-tphoto img { width: 100%; height: 100%; object-fit: cover; }
.ab-card-s--photo h3, .ab-card-s--photo p { padding-inline: 8px; }
.ab-end { display: flex; justify-content: center; }

@media (max-width: 1099px) {
  .ab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ab { min-height: 0; padding-block: 24px 32px; }
  .ab-wrap { grid-template-rows: none; gap: 16px; }
  .ab-stats { gap: 16px; }
  .ab-cue { display: none; }
  .ab-sec { padding-block: 48px; }
  .ab-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ab-grid { gap: 16px; }
  .ab-sec-in { gap: 24px; }
}
@media (max-width: 639px) {
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ab-end .btn { width: 100%; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .ab-panel, .ab-card { padding: 24px; }
  .ab-stats li { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-photo img, .ab-card .trk-fill, .ab-card .trk-car, .ab-card .trk-node, .ab-card-s { transition: none; }
  .ab-cue i { animation: none; }
}

/* ===== PRODUCTS / BANNER : THE TWO ASCENTS (70vh) ===== */
.pb { --pb-pad: clamp(28px, 5vh, 56px); --pb-ink: var(--white); --pb-soft: color-mix(in srgb, var(--white) 90%, var(--onyx)); --pb-glow: rgba(174, 181, 188, .95); --pb-glow-soft: rgba(174, 181, 188, .55); --pb-shade-top: rgba(32, 33, 36, .80); --pb-shade-mid: rgba(32, 33, 36, .72); --pb-shade-end: rgba(32, 33, 36, .86); --pb-bloom: rgba(174, 181, 188, .26);
  position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(520px, 70vh); min-height: max(520px, 70svh); padding-block: var(--pb-pad); overflow: hidden; background: var(--onyx); color: var(--pb-ink); }
.pb-bg { position: absolute; inset: 0; z-index: -1; }
.pb-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.pb-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 60% at 50% 50%, var(--pb-bloom), transparent 72%), linear-gradient(180deg, var(--pb-shade-top), var(--pb-shade-mid) 48%, var(--pb-shade-end)); }
.pb::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--silver), transparent); box-shadow: 0 0 22px 2px var(--pb-glow-soft); }

.pb-wrap { width: min(100% - 48px, 1240px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); }
.pb-copy { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: clamp(10px, 1.9vh, 18px); text-align: center; text-shadow: 0 1px 14px rgba(32, 33, 36, .6); animation: pbRise .8s .1s both; }
.pb-eyebrow { display: inline-flex; align-items: center; gap: 14px; font: 700 15px/1.2 var(--f-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--pb-soft); }
.pb-eyebrow::before, .pb-eyebrow::after { content: ''; width: 36px; height: 2px; border-radius: 2px; background: var(--silver); box-shadow: 0 0 12px var(--pb-glow); }
.pb-title { font: 400 clamp(36px, min(5vw, 7.6vh), 66px)/1.08 var(--f-head); color: var(--pb-ink); text-shadow: 0 2px 24px rgba(32, 33, 36, .55), 0 0 30px rgba(174, 181, 188, .4); }
.pb-title { text-wrap: balance; }
.pb-sub { font: 700 clamp(18px, 2.4vh, 21px)/1.35 var(--f-sub); color: var(--pb-ink); }
.pb-lead { max-width: 46ch; font: 400 clamp(16px, 2.1vh, 18px)/1.65 var(--f-body); color: var(--pb-soft); }
.pb-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-block-start: 4px; }
.pb-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font: 700 17px/1.3 var(--f-sub); color: var(--pb-ink); border-block-end: 2px solid var(--silver); box-shadow: 0 8px 16px -10px var(--pb-glow); transition: border-color .2s, box-shadow .25s, text-shadow .25s; }
.pb-link:hover, .pb-link:focus-visible { border-color: var(--pb-ink); box-shadow: 0 10px 20px -8px var(--pb-glow); text-shadow: 0 0 14px var(--pb-glow); }
.pb-link:focus-visible { outline: 3px solid var(--pb-ink); outline-offset: 4px; }
.pb-link .ar { font-size: 15px; transition: transform .2s; }
.pb-link:hover .ar { transform: translateX(4px); }

.pb-fig { grid-row: 1; display: grid; gap: 10px; align-content: center; min-width: 0; color: var(--pb-ink); animation: pbRise .8s .3s both; }
.pb-fig--stairs { grid-column: 1; justify-items: end; text-align: end; }
.pb-fig--ramps { grid-column: 3; justify-items: start; text-align: start; }
.pb-fig:focus-visible { outline: 3px solid var(--pb-ink); outline-offset: 6px; border-radius: 12px; }
.pb-label { display: grid; gap: 2px; text-shadow: 0 1px 14px rgba(32, 33, 36, .6); }
.pb-num { font: 700 15px/1.2 var(--f-sub); letter-spacing: .14em; color: var(--pb-soft); }
.pb-name { font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--f-head); }
.pb-hint { font: 400 15px/1.4 var(--f-body); color: var(--pb-soft); }

.pb-art { display: block; width: 100%; max-width: clamp(220px, 40vh, 340px); height: auto; aspect-ratio: 240 / 200; overflow: visible; filter: drop-shadow(0 0 5px var(--pb-glow)) drop-shadow(0 0 16px var(--pb-glow-soft)); }
.pb-line { fill: none; stroke: var(--pb-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: pbDraw 1.6s .35s cubic-bezier(.4, 0, .2, 1) both; }
.pb-rail { fill: none; stroke: var(--pb-soft); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; }
.pb-ground { stroke: var(--silver); stroke-width: 1.5; opacity: .85; }
.pb-ring { fill: none; stroke: var(--pb-ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.pb-core, .pb-dot { fill: var(--pb-ink); }
.pb-halo { fill: var(--silver); opacity: .45; transform-box: fill-box; transform-origin: center; animation: pbPulse 2.4s ease-in-out infinite; }
.pb-fig:hover .pb-ring, .pb-fig:focus-visible .pb-ring { transform: scale(1.4); }

@keyframes pbDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pbPulse { 0%, 100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.25); opacity: .2; } }
@keyframes pbRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* tablet and mobile: copy first, the two ascents side by side underneath */
@media (max-width: 960px) {
  .pb-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; }
  .pb-copy { grid-column: 1 / -1; }
  .pb-fig--stairs { grid-column: 1; grid-row: 2; }
  .pb-fig--ramps { grid-column: 2; grid-row: 2; }
}
@media (max-width: 480px) {
  .pb-wrap { width: min(100% - 32px, 1240px); }
  .pb-name { font-size: 22px; }
  .pb-eyebrow::before, .pb-eyebrow::after { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-copy, .pb-fig, .pb-line, .pb-halo { animation: none; }
}

/* ===== PRODUCTS / SECTION 2 : THE STAIR-CLIMB STAGE =====
   Left: heading + four stair-stepped selectors on a rail with a lift carriage. Right: image stage with a stepped corner,
   a stair-shaped counter that fills the notch, info row and three facts. One gap token (--g) is used everywhere.
   Type: Prata = heading + names, Arimo = subheads, Inter = body. Smallest text: 14px. Colours come from theme tokens (light + dark). */
.stc { --g: 16px; --st: 36px; position: relative; padding-block: clamp(56px, 8vh, 88px); background: var(--bg); scroll-margin-block-start: var(--hh); }
.stc-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--g) * 2); align-items: stretch; }
.stc-side { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.stc-head { display: grid; gap: var(--g); justify-items: start; }
.stc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--f-sub); color: var(--ink); }
.stc-eyebrow i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 15px; }
.stc-title { font: 400 clamp(30px, 3.6vw, 46px)/1.12 var(--f-head); color: var(--ink); text-wrap: balance; }
.stc-lead { max-width: 46ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); }

.stc-steps { position: relative; flex: 1; display: grid; grid-auto-rows: 1fr; gap: var(--g); }
.stc-rail { position: absolute; inset-block: 0; inset-inline-start: 7px; width: 2px; border-radius: 2px; background: var(--line); transform-origin: top; }
.stc-car { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--line-strong), 0 0 18px 2px var(--glow); transform: translateY(calc(var(--y, 40px) - 8px)); transition: transform .65s cubic-bezier(.34, 1.45, .5, 1); }
.stc-step { --m: calc(28px + var(--i) * 20px); position: relative; margin-inline-start: var(--m); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 16px; row-gap: 2px; min-width: 0; padding: 0 20px; text-align: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); cursor: pointer; transition: background .35s, color .35s, border-color .35s; }
.stc-step::before { content: ''; position: absolute; inset-inline-start: calc(8px - var(--m)); width: calc(var(--m) - 8px); inset-block-start: calc(50% - 1px); height: 2px; background: var(--line); transition: background .35s; }
.stc-step:hover { border-color: var(--line-strong); background: var(--tint); }
.stc-step:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.stc-step.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stc-step.is-active::before { background: var(--ink); }
.stc-no { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 700 16px/1 var(--f-sub); }
.stc-step.is-active .stc-no { border-color: var(--bg); }
.stc-nm { align-self: end; font: 400 clamp(20px, 2vw, 26px)/1.15 var(--f-head); }
.stc-sp { align-self: start; font: 400 15px/1.4 var(--f-body); color: var(--muted); }
.stc-step.is-active .stc-sp { color: color-mix(in srgb, var(--bg) 84%, var(--ink)); }

.stc-stage { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.stc-figwrap { position: relative; flex: 1; min-height: clamp(280px, 34vw, 440px); }
.stc-fig { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--tint);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--st) * 3) 100%, calc(var(--st) * 3) calc(100% - var(--st)), calc(var(--st) * 2) calc(100% - var(--st)), calc(var(--st) * 2) calc(100% - var(--st) * 2), var(--st) calc(100% - var(--st) * 2), var(--st) calc(100% - var(--st) * 3), 0 calc(100% - var(--st) * 3)); }
.stc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.stc-img.is-active { opacity: 1; transform: scale(1); }
.stc-wipe { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.stc-wipe i { background: var(--silver); transform: scaleY(0); }
.stc-fig.is-wipe .stc-wipe i { animation: stcWipe .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--k) * 70ms); }
.stc-badge { position: absolute; z-index: 1; inset-block-end: 0; inset-inline-start: 0; width: calc(var(--st) * 3); height: calc(var(--st) * 3); display: grid; grid-template-columns: repeat(3, var(--st)); grid-template-rows: repeat(3, var(--st)); background: var(--ink); color: var(--bg); pointer-events: none;
  clip-path: polygon(0 0, var(--st) 0, var(--st) var(--st), calc(var(--st) * 2) var(--st), calc(var(--st) * 2) calc(var(--st) * 2), calc(var(--st) * 3) calc(var(--st) * 2), calc(var(--st) * 3) calc(var(--st) * 3), 0 calc(var(--st) * 3)); }
.stc-badge > * { grid-row: 3; display: grid; place-items: center; }
.stc-n { grid-column: 1; font: 400 18px/1 var(--f-head); }
.stc-of { grid-column: 2; font: 700 14px/1 var(--f-sub); }
.stc-badge i { grid-column: 3; font-size: 16px; }
.stc-prog { position: absolute; z-index: 3; inset-block-start: var(--g); inset-inline-end: var(--g); display: flex; gap: 6px; padding: 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; }
.stc-seg { width: 32px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stc-seg i { display: block; height: 100%; width: 0; background: var(--ink); }
.stc-seg.is-done i { width: 100%; }
.stc-seg.is-on i { animation: stcFill 7s linear forwards; }
.stc.is-paused .stc-seg.is-on i { animation-play-state: paused; }
.stc-nav { position: absolute; z-index: 3; inset-block-end: var(--g); inset-inline-end: var(--g); display: flex; gap: 12px; }
.stc-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; cursor: pointer; transition: background .2s, color .2s; }
.stc-btn:hover { background: var(--ink); color: var(--bg); }
.stc-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.stc-info { display: flex; align-items: center; justify-content: space-between; gap: var(--g); padding: var(--g) 20px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; }
.stc-copy { min-width: 0; }
.stc-name { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--f-head); color: var(--ink); }
.stc-spec { margin-block-start: 4px; font: 400 17px/1.4 var(--f-sub); color: var(--muted); }
.stc-cta { flex: none; }
.stc-facts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.stc-facts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; font: 500 15px/1.3 var(--f-body); color: var(--ink); }
.stc-facts li:nth-child(2) { --k: 1; } .stc-facts li:nth-child(3) { --k: 2; }
.stc-facts i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 15px; }

.stc.js-ready:not(.is-in) .stc-step { opacity: 0; }
.stc.is-in .stc-step { animation: stcStepIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms); }
.stc.is-in .stc-rail { animation: stcRail .9s cubic-bezier(.65, 0, .35, 1) both; }
.stc-stage.is-rise .stc-name, .stc-stage.is-rise .stc-spec { animation: stcRise .5s cubic-bezier(.2, .7, .2, 1) both; }
.stc-stage.is-rise .stc-spec { animation-delay: 60ms; }
.stc-stage.is-rise .stc-facts li { animation: stcRise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 70ms + 100ms); }
@keyframes stcWipe { 0% { transform: scaleY(0); transform-origin: bottom; } 45% { transform: scaleY(1); transform-origin: bottom; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: top; } }
@keyframes stcFill { from { width: 0; } to { width: 100%; } }
@keyframes stcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stcStepIn { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes stcRail { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 960px) {
  .stc-wrap { grid-template-columns: minmax(0, 1fr); }
  .stc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(84px, auto); }
  .stc-rail, .stc-car { display: none; }
  .stc-step { margin-inline-start: 0; }
  .stc-step::before { display: none; }
}
@media (max-width: 720px) {
  .stc-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .stc { --st: 28px; }
  .stc-sp { display: none; }
  .stc-step { padding: 0 14px; column-gap: 12px; }
  .stc-no { width: 34px; height: 34px; font-size: 15px; }
  .stc-figwrap { min-height: 260px; }
  .stc-info { flex-direction: column; align-items: stretch; }
  .stc-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .stc *, .stc *::before { animation: none !important; transition: none !important; }
  .stc.js-ready:not(.is-in) .stc-step { opacity: 1; }
  .stc-seg.is-on i { width: 100%; }
  .stc-img { transform: none; }
}
/* ======================================================================
   ABOUT PAGE / OUR STORY: THE RISING LINE
   ====================================================================== */
/* A staircase line climbs across the section, one landing per milestone (the same step shape as the logo).
   Heading sits in the empty top corner the climb leaves. Under the line a silver glow fill grows and a counter counts up.
   A small lift car rides the line from landing to landing; each landing draws, glows and reveals when the car arrives.
   Type: Prata = heading + years + counters, Arimo = labels + step titles, Inter = paragraphs. Smallest text: 15px.
   Mobile / tablet (under 1100px): the staircase becomes a vertical line down the start edge.
   Without JavaScript or with reduced motion the final state shows at once (JS adds .rl--anim only when it will animate). */
.rl { --rl-halo: 0 0 0 3px color-mix(in srgb, var(--silver) 45%, transparent), 0 0 22px 4px var(--glow); position: relative; isolation: isolate; overflow: hidden; padding-block: 56px; background: var(--tint); border-block: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.rl ol { margin: 0; padding: 0; list-style: none; }
.rl-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 46% 60% at 100% 100%, var(--glow), transparent 70%), radial-gradient(ellipse 40% 50% at 0% 0%, color-mix(in srgb, var(--silver) 42%, transparent), transparent 70%); }
.rl-stage { position: relative; display: grid; gap: 32px; }

/* heading block */
.rl-head { display: grid; justify-items: start; gap: 12px; }
.rl-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.3 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rl-eyebrow::after { content: ""; width: 36px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px var(--glow); }
.rl-h2 { font: 400 clamp(30px, 3.2vw, 42px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.rl-lead { max-width: 52ch; font: 400 17px/1.6 var(--f-body); color: var(--muted); text-wrap: pretty; }

/* steps (mobile first: vertical line down the start edge) */
.rl-steps { display: grid; grid-template-columns: minmax(0, 1fr); }
.rl-step { position: relative; min-width: 0; padding-block-end: 28px; padding-inline-start: 44px; }
.rl-step:last-child { padding-block-end: 0; }
.rl-step::before { content: ""; position: absolute; inset-inline-start: 11.5px; top: 15px; bottom: -15px; width: 3px; border-radius: 2px; background: var(--ink); box-shadow: var(--rl-halo); transform-origin: top center; }
.rl-step:last-child::before { display: none; }
.rl-year { display: block; font: 400 clamp(28px, 3vw, 40px)/1.1 var(--f-head); color: var(--ink); }
.rl-text h3 { margin-top: 8px; font: 700 20px/1.3 var(--f-sub); color: var(--ink); }
.rl-text p { margin-top: 8px; font: 400 16px/1.6 var(--f-body); color: var(--muted); }
.rl-base { display: block; margin-top: 12px; }
.rl-fill { display: none; }
.rl-count { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 16px/1.3 var(--f-sub); color: var(--muted); }
.rl-count b { direction: ltr; unicode-bidi: isolate; font: 400 24px/1.1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--ink); }

/* milestone dot with pulse ring */
.rl-dot { position: absolute; inset-inline-start: 4px; top: 6px; z-index: 2; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--tint); border: 4px solid var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 30%, transparent), 0 0 18px var(--glow); transition: box-shadow .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1) .5s; }
.rl-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--silver); opacity: 0; }

/* lift car (only shown when the animation runs) */
.rl-car { position: absolute; top: 0; left: 0; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 15px; opacity: 0; pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 30%, transparent), 0 0 22px 2px var(--glow); transition: opacity .4s; }
.rl:not(.rl--anim) .rl-car { display: none; }

/* animation start states (set by JS) */
.rl--anim .rl-text, .rl--anim .rl-count { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .55s, transform .6s ease .55s; }
.rl--anim .rl-step.is-on .rl-text, .rl--anim .rl-step.is-on .rl-count { opacity: 1; transform: none; }
.rl--anim .rl-dot { transform: scale(0); }
.rl--anim .rl-step.is-on .rl-dot { transform: scale(1); }
.rl--anim .rl-step::before { transform: scaleY(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1) .2s; }
.rl--anim .rl-step.is-on::before { transform: scaleY(1); }

@media (prefers-reduced-motion: no-preference) {
  .rl-step.is-on .rl-dot::after, .rl:not(.rl--anim) .rl-dot::after { animation: rlPulse 2.6s ease-out infinite; }
}
@keyframes rlPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* desktop: the staircase */
@media (min-width: 1100px) {
  .rl-stage { min-height: 470px; gap: 0; }
  .rl-head { grid-area: 1 / 1; align-self: start; max-width: 52%; }
  .rl-steps { grid-area: 1 / 1; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .rl-step { display: flex; flex-direction: column; padding: 0; }
  .rl-step::before { display: none; }
  .rl-text { padding: 0 20px 28px; }
  .rl-base { position: relative; height: calc(64px + var(--i) * 64px); margin: 0; }
  .rl-base::before { content: ""; position: absolute; inset-inline: 0; top: -1.5px; height: 3px; border-radius: 2px; background: var(--ink); box-shadow: var(--rl-halo); transform-origin: left center; }
  .rl-step:not(:first-child) .rl-base::after { content: ""; position: absolute; inset-inline-start: -1.5px; top: -1.5px; width: 3px; height: 64px; border-radius: 2px; background: var(--ink); box-shadow: var(--rl-halo); transform-origin: bottom center; }
  .rl-fill { display: block; position: absolute; inset: 0; transform-origin: top center; background: linear-gradient(to bottom, color-mix(in srgb, var(--silver) 38%, transparent), transparent 94%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--silver) 46%, transparent) 0 1px, transparent 1px 9px); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
  .rl-count { position: absolute; inset-inline: 20px; top: 24px; }
  .rl-dot { inset-inline-start: 20px; top: -9px; }

  .rl--anim .rl-text, .rl--anim .rl-count { transition-delay: .6s; }
  .rl--anim .rl-step::before { transform: none; }
  .rl--anim .rl-base::before { transform: scaleX(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1) .25s; }
  .rl--anim .rl-step:first-child .rl-base::before { transition-delay: 0s; }
  .rl--anim .rl-step:not(:first-child) .rl-base::after { transform: scaleY(0); transition: transform .25s ease; }
  .rl--anim .rl-step.is-on .rl-base::before { transform: scaleX(1); }
  .rl--anim .rl-step.is-on .rl-base::after { transform: scaleY(1); }
  .rl--anim .rl-fill { transform: scaleY(0); transition: transform .9s ease .5s; }
  .rl--anim .rl-step.is-on .rl-fill { transform: scaleY(1); }
  .rl--anim .rl-step:first-child .rl-dot { transition-delay: .3s; }
}
@media (hover: hover) {
  .rl-step:hover .rl-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--silver) 46%, transparent), 0 0 28px 4px var(--glow); }
}
@media (prefers-reduced-motion: reduce) {
  .rl-dot, .rl-car { transition: none; }
}
/* Shared back-to-top control: high contrast in both light and dark themes */
.back-to-top {
  position: fixed;
  inset-inline-end: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9999;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #aeb5bc;
  border-radius: 50%;
  background: #fafaf8;
  color: #202124;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  font: 700 26px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover { background: #aeb5bc; }
.back-to-top:focus-visible { outline: 3px solid #202124; outline-offset: 3px; }
@media (max-width: 480px) {
  .back-to-top { inset-inline-end: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* Responsive navigation fixes: full-width drawer, uncluttered links, Login last */
@media (max-width: 1023px) {
  .nb-bar { gap: 8px; }
  .nb-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    width: 100%;
    max-height: calc(100vh - var(--hh));
    max-height: calc(100svh - var(--hh));
    padding: 18px clamp(20px, 6vw, 40px) 24px;
    border-radius: 0 0 18px 18px;
  }
  .nb-list { order: 1; }
  .nb-login--panel { order: 2; margin-top: 4px; }
  .nb-link,
  .nb-link[aria-current="page"],
  .nb-has.is-current > .nb-link {
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .nb-link:hover,
  .nb-has.is-open > .nb-link { background: var(--tint); box-shadow: none; }
  .nb-sub { margin-inline-start: 10px; }
}
@media (max-width: 420px) {
  .nb-brand { gap: 6px; }
  .nb-logo { width: 34px; height: 34px; }
  .nb-name { font-size: 20px; }
  .nb-tools { gap: 4px; }
  .nb-tool, .nb-burger { min-width: 38px; width: 38px; height: 40px; padding-inline: 4px; }
  .nb-tool { font-size: 13px; }
}

/* Current page and section highlight in the responsive navigation */
@media (max-width: 1023px) {
  .nb-link[aria-current="page"],
  .nb-has.is-current > .nb-link {
    border-inline-start: 3px solid var(--ink);
    padding-inline-start: 13px;
    background: var(--tint);
    font-weight: 700;
  }
  .nb-sub a[aria-current="page"] {
    background: var(--tint);
    box-shadow: inset 3px 0 0 var(--ink);
    font-weight: 700;
  }
}

/* Shared five-column accessibility footer */
.site-footer {
  padding: clamp(40px, 6vw, 72px) 0 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.site-footer__col { min-width: 0; padding: 12px; }
.site-footer__col h2 {
  margin: 5px 0 16px;
  font: 700 15px/1.3 var(--f-sub);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col li,
.site-footer__col p,
.site-footer__col a { font: 400 15px/1.55 var(--f-body); }
.site-footer__col p { max-width: 30ch; color: var(--muted); }
.site-footer__col li a,
.site-footer__text-link { color: var(--muted); transition: color .2s; }
.site-footer__col li a:hover,
.site-footer__text-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--ink); }
.site-footer__logo i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--tint); font-size: 17px; }
.site-footer__logo span { font: 400 24px/1 var(--f-head); }
.site-footer__logo .nb-logo { width: 38px; height: 38px; filter: none; }
.site-footer__logo .nb-name { font-size: 26px; }
.site-footer__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: 14px 0 10px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600 !important; }
.site-footer__cta:hover { box-shadow: 0 0 0 4px var(--glow); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 18px 12px 0; border-top: 1px solid var(--line); color: var(--muted); font: 400 14px/1.5 var(--f-body); }
@media (max-width: 1000px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 36px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .site-footer__col { padding: 10px; }
}
@media (max-width: 420px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__col { padding: 10px 8px; }
  .site-footer__bottom { flex-direction: column; gap: 4px; }
}

/* Home 1 product explorer: align the padded product panel with its image */
.explorer-layout { align-items: stretch; }
.explorer-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--tint));
  box-shadow: 0 16px 40px -30px var(--shadow-ink);
}
.explorer-tabs { gap: 12px; }
.explorer-tab { min-height: 74px; padding: 12px 16px; border-radius: 12px; }
.explorer-detail { padding: 0; }
.explorer-tags { gap: 9px; }
.explorer-actions { gap: 12px; margin-top: 0; }
@media (max-width: 900px) {
  .explorer-content { padding: 20px; gap: 16px; }
}
@media (max-width: 680px) {
  .explorer-content { padding: 18px; }
  .explorer-tab { min-height: 66px; padding: 10px 12px; }
}

/* Keep installation journey descriptions and badges aligned across desktop steps */
@media (min-width: 981px) {
  .jny-body p { min-height: 4.8em; }
}
@media (max-width: 980px) {
  .jny-body p { min-height: 0; }
}

/* Home 1 situation matcher: balanced layout with a natural pinned-scroll sequence */
.mat { overflow: visible; }
.mat-grid {
  max-width: 1320px;
  grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(36px, 6vw, 88px);
}
.mat-panel {
  position: sticky;
  top: calc(var(--hh) + 28px);
  align-self: start;
  justify-content: space-between;
  min-height: 390px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, var(--tint));
}
.mat-panel::before { opacity: .65; }
.mat-top { gap: 20px; }
.mat-title { max-width: 11ch; font-size: clamp(34px, 3.5vw, 50px); text-wrap: balance; }
.mat-lead { max-width: 36ch; font-size: 17px; }
.mat-bottom { gap: 12px; }
.mat-list {
  min-height: 1280px;
  min-height: max(1280px, calc(100svh + 480px));
  grid-template-rows: repeat(5, minmax(220px, 1fr));
  gap: 18px;
}
.mat-list > li { min-height: 0; }
.mat-row {
  position: relative;
  grid-template-columns: 52px minmax(0, 1.08fr) 24px 100px minmax(0, .92fr);
  gap: clamp(10px, 1.35vw, 18px);
  padding: 22px clamp(16px, 2vw, 26px);
  border-radius: 22px;
  transition: transform .35s ease, border-color .3s ease, box-shadow .35s ease, background .3s ease;
}
.mat-row.is-active {
  z-index: 1;
  transform: translateX(6px);
  border-color: var(--ink);
  background: color-mix(in srgb, var(--surface) 78%, var(--tint));
  box-shadow: 0 0 0 3px var(--glow), 0 0 32px color-mix(in srgb, var(--glow) 42%, transparent), 0 22px 38px -25px var(--shadow-ink);
}
.mat-ic { width: 50px; height: 50px; }
.mat-sit b { font-size: clamp(18px, 1.45vw, 21px); }
.mat-sit span { font-size: 16px; }
.mat-thumb { width: 100px; height: 80px; border-radius: 14px; transition: box-shadow .3s, border-color .3s; }
.mat-row.is-active .mat-thumb { border-color: var(--ink); box-shadow: 0 0 0 3px var(--glow), 0 0 26px var(--glow); }
.mat-row.is-active .mat-thumb img { transform: scale(1.09); }
.mat-sol b { font-size: 18px; }
.mat-chip { min-height: 30px; }
@media (max-width: 1023px) {
  .mat { overflow: hidden; }
  .mat-grid { max-width: 820px; grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mat-panel { position: relative; top: auto; min-height: 0; }
  .mat-list { min-height: 0; grid-template-rows: none; gap: 14px; }
  .mat-row { min-height: 140px; }
}
@media (max-width: 620px) {
  .mat-grid { gap: 22px; }
  .mat-panel { padding: 22px; }
  .mat-list { gap: 12px; }
  .mat-row {
    min-height: 132px;
    grid-template-columns: 56px minmax(0, 1fr) 20px;
    grid-template-areas: "ic sit sit" "th sol arr";
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }
  .mat-row.is-active { transform: none; }
  .mat-ic { width: 46px; height: 46px; }
  .mat-thumb { width: 56px; height: 56px; }
  .mat-sol b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mat-row, .mat-thumb img, .mat-ic, .mat-arrow { transition: none !important; }
  .mat-row.is-active { transform: none; }
}

/* Larger situation panel with concise reassurance points */
.mat-panel { width: 100%; min-height: 540px; }
.mat-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mat-points li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, var(--tint));
}
.mat-point-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
}
.mat-points li > span:last-child { display: grid; gap: 3px; min-width: 0; }
.mat-points b { color: var(--ink); font: 700 15px/1.3 var(--f-sub); }
.mat-points small { color: var(--muted); font: 400 14px/1.45 var(--f-body); }
@media (max-width: 1023px) {
  .mat-panel { min-height: clamp(540px, 62vh, 620px); }
}
@media (max-width: 620px) {
  .mat-panel { min-height: 0; gap: 24px; padding: 24px; }
  .mat-points { gap: 10px; }
  .mat-points li { padding: 10px; }
  .mat-point-icon { width: 36px; height: 36px; }
}

/* Situation matcher: larger solution imagery and steady alignment at each breakpoint */
.mat-row.is-active { transform: none; }
.mat-row {
  grid-template-columns: 52px minmax(0, 1.08fr) 24px 160px minmax(0, .92fr);
  align-content: center;
}
.mat-thumb { width: 160px; height: 124px; }
.mat-sit, .mat-sol { align-content: center; }
@media (max-width: 1023px) and (min-width: 621px) {
  .mat-row {
    min-height: 164px;
    grid-template-columns: 50px minmax(0, 1.1fr) 24px 136px minmax(145px, .9fr);
    gap: 12px;
    padding: 16px;
  }
  .mat-thumb { width: 136px; height: 108px; }
}
@media (max-width: 760px) and (min-width: 621px) {
  .mat-row {
    grid-template-columns: 46px minmax(0, 1fr) 20px 116px minmax(125px, .85fr);
    gap: 9px;
    padding: 14px 12px;
  }
  .mat-thumb { width: 116px; height: 96px; }
  .mat-sit b, .mat-sol b { font-size: 16px; }
  .mat-sit span { font-size: 14px; }
}
@media (max-width: 620px) {
  .mat-row {
    min-height: 168px;
    grid-template-columns: 88px minmax(0, 1fr) 20px;
    grid-template-areas: "ic sit sit" "th sol arr";
    gap: 12px;
    padding: 16px;
  }
  .mat-thumb { width: 84px; height: 84px; }
  .mat-row.is-active { transform: none; }
}
@media (max-width: 760px) and (min-width: 621px) {
  .mat-row {
    min-height: 176px;
    grid-template-columns: 116px minmax(0, 1fr) 24px;
    grid-template-areas: "ic sit sit" "th sol arr";
    gap: 12px;
    padding: 16px;
  }
  .mat-thumb { width: 116px; height: 100px; }
  .mat-ic { grid-area: ic; }
  .mat-sit { grid-area: sit; }
  .mat-thumb { grid-area: th; }
  .mat-sol { grid-area: sol; }
  .mat-arrow { grid-area: arr; }
}
@media (max-width: 620px) {
  .mat-row { grid-template-columns: 96px minmax(0, 1fr) 20px; min-height: 180px; }
  .mat-thumb { width: 92px; height: 92px; }
}

/* Center the installation journey content on narrow mobile screens */
@media (max-width: 620px) {
  .jny { --car: 44px; --node: 42px; }
  .jny-step { column-gap: 12px; }
  .jny-rail { inset-inline-start: -16px; }
  .jny-photo,
  .jny-body {
    width: min(360px, 100%);
    justify-self: center;
    inset-inline-start: -28px;
  }
  .jny-photo { aspect-ratio: 4 / 3; }
  .jny-body { justify-items: center; text-align: center; }
  .jny-chip { justify-self: center; }
}

/* Minimal navigation on the not-found and coming-soon pages. */
body[data-page="not-found"] .nb-menu,
body[data-page="coming-soon"] .nb-menu,
body[data-page="not-found"] .nb-burger,
body[data-page="coming-soon"] .nb-burger { display: none !important; }
body[data-page="not-found"] .nb-bar,
body[data-page="coming-soon"] .nb-bar { grid-template-columns: minmax(0, 1fr) auto; }
body[data-page="not-found"] .nb-login--bar,
body[data-page="coming-soon"] .nb-login--bar { display: inline-flex; }
@media (max-width: 420px) {
  body[data-page="not-found"] .nb-brand,
  body[data-page="coming-soon"] .nb-brand { gap: 7px; }
  body[data-page="not-found"] .nb-logo,
  body[data-page="coming-soon"] .nb-logo { width: 38px; height: 38px; }
  body[data-page="not-found"] .nb-name,
  body[data-page="coming-soon"] .nb-name { font-size: 20px; }
  body[data-page="not-found"] .nb-tools,
  body[data-page="coming-soon"] .nb-tools { gap: 4px; }
  body[data-page="not-found"] .nb-tool,
  body[data-page="coming-soon"] .nb-tool { min-width: 38px; height: 40px; padding-inline: 8px; }
  body[data-page="not-found"] .nb-login--bar,
  body[data-page="coming-soon"] .nb-login--bar { min-height: 40px; padding-inline: 12px; gap: 7px; font-size: 14px; }
}

/* Prevent long dashboard contact details from escaping their cards on small screens. */
.dstat span { min-width: 0; overflow-wrap: anywhere; }
.dstat b { min-width: 0; overflow-wrap: anywhere; }



/* ============================================================
   CONTACT / SECTION 2 : THE FLOOR REQUEST  (fm- namespace)
   Full-bleed split. Left side is always dark (white type on onyx),
   right side follows the theme tokens. Prata heading, Arimo labels,
   Inter body and inputs. All text is 14px or larger.
   ============================================================ */
.fm { --fm-pad: clamp(56px, 8vh, 88px); --fm-edge: max(24px, calc((100vw - 1240px) / 2)); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--bg); color: var(--ink); scroll-margin-top: var(--hh); overflow: hidden; }
.fm [hidden] { display: none !important; }
.fm ul { margin: 0; padding: 0; list-style: none; }
.fm fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---- left: contact side (always dark) ---- */
.fm-side { position: relative; isolation: isolate; display: grid; align-content: center; padding: var(--fm-pad) clamp(28px, 4vw, 56px) var(--fm-pad) var(--fm-edge); background: var(--onyx); color: var(--white); }
.fm-photo { position: absolute; inset: 0; z-index: -1; }
.fm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: grayscale(.25); }
.fm-photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 30% 0%, rgba(174, 181, 188, .26), transparent 72%), linear-gradient(180deg, rgba(32, 33, 36, .90), rgba(32, 33, 36, .94)); }
.fm-side-in { display: grid; gap: clamp(14px, 2vh, 20px); justify-items: start; }
.fm-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid rgba(174, 181, 188, .75); border-radius: 999px; font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--white); box-shadow: 0 0 22px rgba(174, 181, 188, .28); }
.fm-tag i { font-size: 15px; }
.fm-title { font: 400 clamp(32px, 3.4vw, 46px)/1.12 var(--f-head); letter-spacing: 0; color: var(--white); text-wrap: balance; text-shadow: 0 0 28px rgba(174, 181, 188, .35); }
.fm-lead { max-width: 46ch; font: 400 17px/1.65 var(--f-body); color: color-mix(in srgb, var(--white) 88%, var(--onyx)); text-wrap: pretty; }
.fm-ways { display: grid; width: 100%; margin-top: 4px; border-top: 1px solid rgba(174, 181, 188, .45); }
.fm-way { border-bottom: 1px solid rgba(174, 181, 188, .45); }
.fm-way > a, .fm-way > div { display: flex; align-items: center; gap: 16px; min-height: 72px; padding-block: 12px; color: var(--white); transition: padding-inline-start .3s cubic-bezier(.2, .7, .2, 1); }
.fm-way > a:hover, .fm-way > a:focus-visible { padding-inline-start: 10px; }
.fm-way > a:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.fm-way-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid rgba(174, 181, 188, .8); border-radius: 50%; font-size: 17px; color: var(--white); box-shadow: 0 0 16px rgba(174, 181, 188, .25); transition: background .25s, color .25s, box-shadow .25s; }
.fm-way > a:hover .fm-way-ic, .fm-way > a:focus-visible .fm-way-ic { background: var(--white); color: var(--onyx); box-shadow: 0 0 24px rgba(250, 250, 248, .55); }
.fm-way-tx { display: grid; gap: 3px; min-width: 0; }
.fm-way-tx b { font: 700 18px/1.25 var(--f-sub); overflow-wrap: anywhere; }
.fm-way-tx small { font: 400 15px/1.4 var(--f-body); color: color-mix(in srgb, var(--white) 84%, var(--onyx)); }
.fm-shaft { position: absolute; inset-block: 0; inset-inline-end: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(174, 181, 188, .9) 12%, rgba(174, 181, 188, .9) 88%, transparent); box-shadow: 0 0 18px 2px rgba(174, 181, 188, .5); }
.fm-lift { position: absolute; inset-inline-start: 50%; top: 0; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgba(250, 250, 248, .22), 0 0 22px rgba(250, 250, 248, .9); animation: fmLift 6s ease-in-out infinite alternate; }

/* ---- right: request form (theme tokens) ---- */
.fm-main { position: relative; display: grid; align-content: center; padding: var(--fm-pad) var(--fm-edge) var(--fm-pad) clamp(28px, 4vw, 64px); background: radial-gradient(ellipse 60% 44% at 100% 0%, color-mix(in srgb, var(--silver) 34%, transparent), transparent 72%), radial-gradient(ellipse 46% 40% at 0% 100%, color-mix(in srgb, var(--silver) 24%, transparent), transparent 72%), var(--bg); }
.fm-panel { width: min(100%, 680px); margin-inline: auto; }
.fm-form { display: grid; gap: clamp(14px, 2vh, 18px); }
.fm-form-title { font: 700 clamp(22px, 2.2vw, 26px)/1.2 var(--f-sub); color: var(--ink); }
.fm-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--bg); font: 600 16px/1.4 var(--f-body); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 26px color-mix(in srgb, var(--silver) 80%, transparent); animation: fmPop .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.fm-alert i { flex: none; font-size: 18px; }
.fm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vh, 18px) 16px; }
.fm-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fm-label { padding: 0; font: 700 15px/1.3 var(--f-sub); letter-spacing: .02em; color: var(--ink); }
.fm-opt { font: 400 15px/1.3 var(--f-body); color: var(--muted); }
.fm-input { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--f-body); transition: border-color .2s, box-shadow .25s, background .2s; }
.fm-textarea { min-height: 120px; padding-block: 14px; resize: vertical; }
.fm-input::placeholder { color: color-mix(in srgb, var(--ink) 66%, var(--bg)); opacity: 1; }
.fm-input:hover { border-color: var(--ink); }
.fm-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 80%, transparent), 0 0 24px color-mix(in srgb, var(--silver) 90%, transparent); }
.fm-field.is-bad .fm-input { border-color: var(--ink); border-width: 2px; background: color-mix(in srgb, var(--silver) 22%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 22px color-mix(in srgb, var(--silver) 90%, transparent); animation: fmShake .45s cubic-bezier(.36, .07, .19, .97) both; }
.fm-err { display: flex; align-items: flex-start; gap: 10px; font: 600 15px/1.4 var(--f-body); color: var(--ink); animation: fmDrop .3s cubic-bezier(.2, .8, .3, 1) both; }
.fm-err::before { content: '!'; display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 14px/1 var(--f-sub); }

/* lift-button panel */
.fm-floors > .fm-label { display: block; margin-block-end: 10px; }
.fm-floor-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fm-floor { position: relative; display: block; min-width: 0; cursor: pointer; }
.fm-floor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fm-floor-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 10px 8px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--f-body); text-align: center; transition: transform .2s, background .25s, color .25s, border-color .25s, box-shadow .3s; }
.fm-floor-btn i { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 15px; }
.fm-floor:hover .fm-floor-btn { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 70%, transparent); }
.fm-floor input:focus-visible + .fm-floor-btn { outline: 3px solid var(--ink); outline-offset: 3px; }
.fm-floor input:checked + .fm-floor-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 80%, transparent), 0 0 28px color-mix(in srgb, var(--silver) 95%, transparent); animation: fmPress .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.fm-floors.is-bad .fm-floor-btn { border-color: var(--ink); border-width: 2px; animation: fmShake .45s cubic-bezier(.36, .07, .19, .97) both; }
.fm-floors.is-bad .fm-floor input:checked + .fm-floor-btn { animation: none; }

.fm-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--bg); font: 600 17px/1 var(--f-body); cursor: pointer; animation: fmRing 2.8s ease-in-out infinite; transition: transform .2s, box-shadow .25s; }
.fm-submit:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--silver) 85%, transparent), 0 14px 28px -12px var(--shadow-ink); }
.fm-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.fm-submit .ar { transition: transform .25s; }
.fm-submit:hover .ar { transform: translateX(4px); }
.fm-submit:disabled { cursor: progress; animation: none; transform: none; }
.fm-submit.is-sending [data-fm-submit-icon] { width: 18px; height: 18px; border: 2.5px solid color-mix(in srgb, var(--bg) 35%, transparent); border-top-color: var(--bg); border-radius: 50%; animation: fmSpin .7s linear infinite; }
.fm-submit.is-sending [data-fm-submit-icon]::before { content: none; }
.fm-form.is-shake .fm-submit { animation: fmShake .45s cubic-bezier(.36, .07, .19, .97) both; }
.fm-micro { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font: 500 15px/1.3 var(--f-body); color: var(--muted); }
.fm-micro li { display: inline-flex; align-items: center; gap: 8px; }
.fm-micro i { color: var(--ink); font-size: 14px; }

/* success state */
.fm-done { display: grid; justify-items: center; gap: 14px; padding-block: 8px; text-align: center; animation: fmPop .5s cubic-bezier(.2, .9, .3, 1.15) both; }
.fm-done-art { width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--silver) 95%, transparent)); }
.fm-done-ring, .fm-done-tick { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fm-done-ring { animation: fmDraw .8s .1s cubic-bezier(.4, 0, .2, 1) forwards; }
.fm-done-tick { animation: fmDraw .5s .75s cubic-bezier(.4, 0, .2, 1) forwards; }
.fm-done-title { font: 400 clamp(30px, 3vw, 40px)/1.15 var(--f-head); color: var(--ink); }
.fm-done-text { max-width: 44ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); text-wrap: pretty; }
.fm-again { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 16px/1 var(--f-body); cursor: pointer; transition: border-color .2s, box-shadow .25s; }
.fm-again:hover { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 80%, transparent); }
.fm-again:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* entrance */
.fm-rise { transition: opacity .7s ease calc(var(--n, 0) * 90ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 90ms); }
.fm.is-js:not(.is-in) .fm-rise { opacity: 0; transform: translateY(22px); }
.fm-submit.fm-rise { transition: opacity .7s ease calc(var(--n, 0) * 90ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 90ms), box-shadow .25s; }

@keyframes fmLift { from { top: 6%; } to { top: calc(94% - 12px); } }
@keyframes fmShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes fmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fmPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fmPress { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes fmRing { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--silver) 90%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
@keyframes fmSpin { to { transform: rotate(360deg); } }
@keyframes fmDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 960px) {
  .fm { grid-template-columns: minmax(0, 1fr); }
  .fm-side { padding: var(--fm-pad) 24px; }
  .fm-main { padding: var(--fm-pad) 24px; }
  .fm-shaft { inset-block: auto 0; inset-inline: 0; width: auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(174, 181, 188, .9) 12%, rgba(174, 181, 188, .9) 88%, transparent); }
  .fm-lift { display: none; }
}
@media (max-width: 620px) {
  .fm-row { grid-template-columns: minmax(0, 1fr); }
  .fm-floor-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-side, .fm-main { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-lift, .fm-submit, .fm-alert, .fm-err, .fm-done, .fm-field.is-bad .fm-input, .fm-floors.is-bad .fm-floor-btn, .fm-floor input:checked + .fm-floor-btn, .fm-form.is-shake .fm-submit { animation: none; }
  .fm-done-ring, .fm-done-tick { animation: none; stroke-dashoffset: 0; }
  .fm-rise { transition: none; }
}

/* ======================================================================
   ABOUT PAGE / MEET THE TEAM: THE HANDOVER (pinned scroll)
   ====================================================================== */
/* The section pins to the screen while you scroll through 4 steps, one per team. A tall arch-shaped photo window sits in the
   centre and opens like lift doors on each step; a ghost numeral flips behind it; a tape measure along the bottom fills and a
   small car slides from mark to mark. Click a mark to jump to that team.
   JS adds .tm--pin only when it will pin (motion allowed and the screen is at least 540px tall). Without it the 4 teams show as a
   plain list of arches, so reduced motion, no JavaScript and very short screens all still work.
   Type: Prata = heading, numerals, team names. Arimo = eyebrow + tape labels. Inter = lines. Smallest text: 15px. */
.tm { --tm-halo: 0 0 0 3px color-mix(in srgb, var(--silver) 45%, transparent), 0 0 22px 4px var(--glow); --tm-dir: 1; position: relative; scroll-margin-top: var(--hh); background: var(--bg); }
.tm ol { margin: 0; padding: 0; list-style: none; }
.tm-stage { position: relative; isolation: isolate; overflow: hidden; }
.tm-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 44% 56% at 0% 100%, var(--glow), transparent 70%), radial-gradient(ellipse 40% 50% at 100% 0%, color-mix(in srgb, var(--silver) 42%, transparent), transparent 70%); }
.tm-in { display: grid; justify-items: center; gap: 32px; padding-block: 56px; }

/* heading */
.tm-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.tm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.3 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-eyebrow::before, .tm-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px var(--glow); }
.tm-h2 { font: 400 clamp(28px, 3.2vw, 42px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }

/* team list (default: simple list of arches) */
.tm-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: 100%; max-width: 1100px; }
.tm-item { display: grid; justify-items: center; gap: 16px; min-width: 0; text-align: center; }
.tm-visual { position: relative; display: grid; place-items: center; width: 100%; }
.tm-num { display: none; }
.tm-arch { position: relative; width: min(240px, 70%); aspect-ratio: 11 / 16; margin: 0; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 999px 999px 0 0; background: var(--tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 30%, transparent), 0 0 40px -4px var(--glow); }
.tm-arch img { width: 100%; height: 100%; object-fit: cover; }
.tm-arch img.tm-pos { object-position: 55% 40%; }
.tm-door { display: none; }
.tm-text { display: grid; gap: 8px; max-width: 40ch; }
.tm-text h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--f-head); color: var(--ink); }
.tm-text p { font: 400 17px/1.55 var(--f-body); color: var(--muted); text-wrap: pretty; }
.tm-tape { display: none; }
.tm-foot { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 1100px; }
@media (min-width: 640px) { .tm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tm-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* pinned mode */
.tm--pin .tm-track { height: calc(100vh - var(--hh) + 240vh); height: calc(100svh - var(--hh) + 240svh); }
.tm--pin .tm-stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); }
.tm--pin .tm-in { height: 100%; padding-block: 32px; gap: 16px; grid-template-rows: auto minmax(0, 1fr) auto; }
.tm--pin .tm-head { gap: 8px; }
.tm--pin .tm-h2 { font-size: clamp(26px, 4.4svh, 42px); }
.tm--pin .tm-foot { gap: 4px; }
@media (min-width: 900px) { .tm--pin .tm-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } }
.tm--pin .tm-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; height: 100%; min-height: 0; max-width: none; }
.tm--pin .tm-item { grid-area: 1 / 1; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease .45s, visibility 0s .7s; }
.tm--pin .tm-item.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease .5s, visibility 0s .5s; }
.tm--pin .tm-visual { min-height: 0; height: 100%; container-type: size; }
.tm--pin .tm-arch { width: auto; max-width: 100%; height: 100%; }
.tm--pin .tm-num { display: block; position: absolute; inset-inline: 0; top: 50%; z-index: 0; text-align: center; font: 400 clamp(120px, 30svh, 280px)/1 var(--f-head); font-size: min(150cqh, 62cqw); color: color-mix(in srgb, var(--ink) 4%, transparent); -webkit-text-stroke: 2px color-mix(in srgb, var(--silver) 85%, var(--ink)); text-shadow: 0 0 40px var(--glow); transform: translateY(-46%); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.tm--pin .tm-item.is-on .tm-num { opacity: 1; transform: translateY(-50%); transition: opacity .6s ease .7s, transform .6s ease .7s; }
.tm--pin .tm-arch { z-index: 1; }
.tm--pin .tm-door { display: block; position: absolute; top: 0; bottom: 0; z-index: 2; width: 50.5%; background: linear-gradient(90deg, color-mix(in srgb, var(--silver) 62%, var(--bg)), color-mix(in srgb, var(--silver) 30%, var(--bg))); transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.tm--pin .tm-door--a { inset-inline-start: 0; border-inline-end: 1.5px solid var(--line-strong); }
.tm--pin .tm-door--b { inset-inline-end: 0; border-inline-start: 1.5px solid var(--line-strong); }
.tm--pin .tm-item.is-on .tm-door { transition: transform .7s cubic-bezier(.65, 0, .35, 1) .65s; }
.tm--pin .tm-item.is-on .tm-door--a { transform: translateX(calc(-101% * var(--tm-dir))); }
.tm--pin .tm-item.is-on .tm-door--b { transform: translateX(calc(101% * var(--tm-dir))); }
.tm--pin .tm-text { opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.tm--pin .tm-item.is-on .tm-text { opacity: 1; transform: none; transition: opacity .5s ease 1s, transform .5s ease 1s; }
.tm--pin .tm-tape { display: grid; gap: 2px; width: 100%; }
@media (max-height: 700px) { .tm--pin .tm-text p { font-size: 16px; } .tm--pin .tm-text h3 { font-size: 26px; } }

/* tape measure */
.tm-rail { position: relative; height: 28px; margin-inline: 12.5%; }
.tm-ticks { position: absolute; inset-inline: 0; top: 50%; height: 12px; transform: translateY(-50%); opacity: .6; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1.5px, transparent 1.5px 14px); }
.tm-line { position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line-strong); }
.tm-fill { position: absolute; inset-inline-start: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--tm-f, 0) * 100%); border-radius: 2px; background: var(--ink); box-shadow: var(--tm-halo); }
.tm-pt { position: absolute; top: 50%; inset-inline-start: calc(var(--k) * 33.3333%); z-index: 1; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transform: translate(calc(-50% * var(--tm-dir)), -50%); transition: background .3s, border-color .3s, box-shadow .3s; }
.tm-pt.is-past { background: var(--ink); border-color: var(--ink); box-shadow: var(--tm-halo); }
.tm-car { position: absolute; top: 50%; inset-inline-start: calc(var(--tm-f, 0) * 100%); z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 13px; transform: translate(calc(-50% * var(--tm-dir)), -50%); box-shadow: var(--tm-halo); }
.tm-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-mark { display: grid; justify-items: center; align-content: start; min-height: 40px; padding: 4px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 500 15px/1.3 var(--f-sub); color: var(--muted); transition: color .25s; }
.tm-mark:hover, .tm-mark.is-on { color: var(--ink); }
.tm-mark.is-on { font-weight: 700; }
.tm-n { display: none; }
@media (max-width: 639px) {
  .tm-t { display: none; }
  .tm-n { display: block; }
  .tm--pin .tm-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-pt, .tm-mark { transition: none; }
}

/* ======================================================================
   ABOUT PAGE / OUR PROMISE: THE ASCENT (six checks as a staircase)
   ====================================================================== */
/* Six checks are six stairs rising left to right (01 to 06). Desktop (1200px and up) is one 6 x 8 grid: row unit 56px, gap 16px,
   every card spans 3 rows and each next card starts one row higher, so the rise is exactly 72px. The two corner triangles are filled by
   two stair-shaped panels (header top-left, call to action bottom-right), so the block is one clean rectangle with no empty cells.
   A lift car rides a dashed rail along the stair tops (one animated number, --pd-i, drives it); the active card inverts, finished cards
   fill, and the progress bar of the active card advances to the next check by itself. Hover or tap a card to jump to it.
   Under 1200px it is a list (a vertical rail with the car on the active floor, or two columns on tablets), same gap everywhere.
   Type: Prata = heading, numerals, call to action title; Arimo = eyebrow, sub-heading, card titles; Inter = lines, button. Smallest text: 15px.
   Colours are theme tokens only, so every text stays readable in light and dark. */
@keyframes pdFill { from { width: 0; } to { width: 100%; } }
.pd { --pd-u: 56px; --pd-g: 16px; --pd-s: calc(var(--pd-u) + var(--pd-g)); --pd-t: 4s; --pd-panel: color-mix(in srgb, var(--silver) 22%, var(--bg)); position: relative; isolation: isolate; overflow: hidden; padding-block: 56px; background: var(--tint); border-block: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.pd ol { margin: 0; padding: 0; list-style: none; }
.pd-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 50% 60% at 50% 62%, var(--glow), transparent 72%), radial-gradient(ellipse 36% 46% at 100% 0%, color-mix(in srgb, var(--silver) 40%, transparent), transparent 70%); }

/* mobile + tablet base: a list */
.pd-board { --pd-i: 0; position: relative; container-type: inline-size; display: grid; gap: 12px; width: 100%; }
.pd-fill, .pd-car { display: none; }
.pd-head { display: grid; gap: 10px; align-content: start; padding: 24px 20px; background: var(--pd-panel); border-radius: 18px; }
.pd-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.3 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ink); }
.pd-h2 { font: 400 clamp(28px, 6.4vw, 40px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); }
.pd-h2 span { display: block; }
.pd-lead { font: 400 18px/1.45 var(--f-sub); color: var(--muted); }
.pd-steps { display: grid; gap: 12px; }
.pd-step { position: relative; padding-inline-start: 40px; }
.pd-step::before { content: ""; position: absolute; z-index: 1; inset-inline-start: 7px; top: 50%; width: 18px; height: 18px; margin-top: -9px; box-sizing: border-box; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background .3s, border-color .3s; }
.pd-step::after { content: ""; position: absolute; inset-inline-start: 15px; top: -12px; bottom: -12px; border-inline-start: 2px dashed var(--line-strong); }
.pd-step:first-child::after { top: 50%; }
.pd-step:last-child::after { bottom: 50%; }
.pd-step.is-past::before { background: var(--ink); border-color: var(--ink); }
.pd-step.is-on::before { content: "\f338"; display: grid; place-items: center; inset-inline-start: 0; width: 32px; height: 32px; margin-top: -16px; border-radius: 10px; background: var(--ink); border-color: var(--ink); color: var(--bg); font: 900 14px/1 "Font Awesome 6 Free"; }
.pd-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; width: 100%; min-height: 96px; padding: 16px 18px 20px; overflow: hidden; text-align: start; cursor: pointer; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 16px; transition: background .35s, color .35s, border-color .35s, transform .25s; }
.pd-step.is-past .pd-card { background: var(--pd-panel); }
.pd-step.is-on .pd-card { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pd-num { font: 400 32px/1 var(--f-head); }
.pd-txt { display: grid; gap: 4px; min-width: 0; }
.pd-tt { font: 700 18px/1.3 var(--f-sub); }
.pd-tx { font: 400 15px/1.45 var(--f-body); color: var(--muted); }
.pd-step.is-on .pd-tx { color: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
.pd-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); font-size: 15px; }
.pd-bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: color-mix(in srgb, currentColor 16%, transparent); }
.pd-bar b { display: block; width: 0; height: 100%; background: currentColor; }
.pd-step.is-past .pd-bar b { width: 100%; }
.pd-step.is-on .pd-bar b { animation: pdFill var(--pd-t) linear forwards; }
.pd--hold .pd-step.is-on .pd-bar b, .pd--off .pd-step.is-on .pd-bar b, .pd--anim:not(.is-in) .pd-step.is-on .pd-bar b { animation-play-state: paused; }
.pd-cta { display: grid; gap: 10px; align-content: center; padding: 24px 20px; border-radius: 18px; background: var(--ink); color: var(--bg); }
.pd-proof { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 15px/1.4 var(--f-body); color: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
.pd-proof i { margin-inline-end: 6px; }
.pd-cta h3 { font: 400 clamp(24px, 3vw, 30px)/1.2 var(--f-head); }
.pd-cta p { font: 400 16px/1.5 var(--f-body); color: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
.pd-cta .btn { justify-self: start; margin-top: 6px; background: var(--bg); color: var(--ink); border-color: var(--bg); }
.pd-cta .btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 35%, transparent); }

/* tablet: two columns, no rail */
@media (min-width: 700px) and (max-width: 1199px) {
  .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-step { padding-inline-start: 0; }
  .pd-step::before, .pd-step::after, .pd-step.is-on::before { display: none; }
  .pd-head { padding: 28px; }
  .pd-cta { padding: 28px; }
}

/* desktop: the staircase */
@media (min-width: 1200px) {
  .pd-board { --cw: calc((100% - 5 * var(--pd-g)) / 6); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(8, var(--pd-u)); gap: var(--pd-g); }
  .pd-steps { display: contents; }
  .pd-fill { display: block; grid-area: 1 / 1 / -1 / -1; pointer-events: none; }
  .pd-fill--a { background-color: var(--pd-panel); background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--pd-s) - 1px), color-mix(in srgb, var(--ink) 9%, transparent) calc(var(--pd-s) - 1px) var(--pd-s));
    clip-path: polygon(0 0, calc(var(--cw) * 5 + var(--pd-g) * 4) 0, calc(var(--cw) * 5 + var(--pd-g) * 4) calc(var(--pd-s) * 1 - var(--pd-g)), calc(var(--cw) * 4 + var(--pd-g) * 3) calc(var(--pd-s) * 1 - var(--pd-g)), calc(var(--cw) * 4 + var(--pd-g) * 3) calc(var(--pd-s) * 2 - var(--pd-g)), calc(var(--cw) * 3 + var(--pd-g) * 2) calc(var(--pd-s) * 2 - var(--pd-g)), calc(var(--cw) * 3 + var(--pd-g) * 2) calc(var(--pd-s) * 3 - var(--pd-g)), calc(var(--cw) * 2 + var(--pd-g)) calc(var(--pd-s) * 3 - var(--pd-g)), calc(var(--cw) * 2 + var(--pd-g)) calc(var(--pd-s) * 4 - var(--pd-g)), var(--cw) calc(var(--pd-s) * 4 - var(--pd-g)), var(--cw) calc(var(--pd-s) * 5 - var(--pd-g)), 0 calc(var(--pd-s) * 5 - var(--pd-g))); }
  .pd-fill--b { background-color: var(--ink); background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--pd-s) - 1px), color-mix(in srgb, var(--bg) 14%, transparent) calc(var(--pd-s) - 1px) var(--pd-s));
    clip-path: polygon(calc(var(--cw) + var(--pd-g)) 100%, calc(var(--cw) + var(--pd-g)) calc(var(--pd-s) * 7), calc(var(--cw) * 2 + var(--pd-g) * 2) calc(var(--pd-s) * 7), calc(var(--cw) * 2 + var(--pd-g) * 2) calc(var(--pd-s) * 6), calc(var(--cw) * 3 + var(--pd-g) * 3) calc(var(--pd-s) * 6), calc(var(--cw) * 3 + var(--pd-g) * 3) calc(var(--pd-s) * 5), calc(var(--cw) * 4 + var(--pd-g) * 4) calc(var(--pd-s) * 5), calc(var(--cw) * 4 + var(--pd-g) * 4) calc(var(--pd-s) * 4), calc(var(--cw) * 5 + var(--pd-g) * 5) calc(var(--pd-s) * 4), calc(var(--cw) * 5 + var(--pd-g) * 5) calc(var(--pd-s) * 3), 100% calc(var(--pd-s) * 3), 100% 100%); }
  .pd-head { grid-area: 1 / 1 / 4 / 4; z-index: 1; padding: 24px 28px 20px; background: none; border-radius: 0; gap: 10px; }
  .pd-h2 { font-size: 40px; line-height: 1.15; }
  .pd-cta { grid-area: 5 / 5 / 9 / 7; z-index: 1; padding: 24px 28px; background: none; border-radius: 0; gap: 12px; }
  .pd-step { padding-inline-start: 0; grid-row-end: span 3; }
  .pd-step:nth-child(1) { grid-column: 1; grid-row-start: 6; }
  .pd-step:nth-child(2) { grid-column: 2; grid-row-start: 5; }
  .pd-step:nth-child(3) { grid-column: 3; grid-row-start: 4; }
  .pd-step:nth-child(4) { grid-column: 4; grid-row-start: 3; }
  .pd-step:nth-child(5) { grid-column: 5; grid-row-start: 2; }
  .pd-step:nth-child(6) { grid-column: 6; grid-row-start: 1; }
  .pd-step::before { content: ""; display: block; inset-inline: 0; top: -9px; width: auto; height: 0; margin: 0; border: 0; border-top: 2px dashed var(--line-strong); border-radius: 0; background: none; color: inherit; transition: border-color .3s; }
  .pd-step::after { display: none; }
  .pd-step.is-past::before, .pd-step.is-on::before { content: ""; display: block; inset-inline-start: 0; top: -9px; width: auto; height: 0; margin: 0; border: 0; border-top: 2px dashed var(--ink); background: none; border-radius: 0; }
  .pd-card { height: 100%; min-height: 0; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; column-gap: 8px; padding: 16px 16px 20px; }
  .pd-num { grid-column: 1; grid-row: 1; }
  .pd-ic { grid-column: 2; grid-row: 1; }
  .pd-txt { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  .pd-num { font-size: 36px; line-height: 38px; }
  .pd-tt { font-size: clamp(16px, 1.45cqi, 20px); }
  .pd-car { position: absolute; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 14px; pointer-events: none;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--line-strong);
    inset-inline-start: calc(var(--pd-i) * (var(--cw) + var(--pd-g)) + (var(--cw) - 32px) / 2); top: calc((5 - var(--pd-i)) * var(--pd-s) - 24px);
    transition: opacity .5s ease .9s, inset-inline-start .7s cubic-bezier(.65, 0, .35, 1), top .7s cubic-bezier(.65, 0, .35, 1); }
  .pd-proof { font-size: 15px; }
}
@media (hover: hover) {
  .pd-card:hover { border-color: var(--ink); transform: translateY(-3px); }
}

/* entrance (JS adds .pd--anim, then .is-in when the board scrolls into view) */
.pd--anim .pd-step { opacity: 0; transform: translateY(36px); transition: opacity .6s ease calc(var(--k) * 90ms + 150ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 90ms + 150ms); }
.pd--anim.is-in .pd-step { opacity: 1; transform: none; }
.pd--anim .pd-head, .pd--anim .pd-cta, .pd--anim .pd-fill, .pd--anim .pd-car { opacity: 0; }
.pd--anim .pd-head, .pd--anim .pd-cta, .pd--anim .pd-fill { transition: opacity .7s ease .1s; }
.pd--anim.is-in .pd-head, .pd--anim.is-in .pd-cta, .pd--anim.is-in .pd-fill, .pd--anim.is-in .pd-car { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pd-card, .pd-step, .pd-car, .pd-step::before { transition: none; }
  .pd-step.is-on .pd-bar b { animation: none; width: 100%; }
}

/* ======================================================================
   ABOUT PAGE / WHY ASCENDRA: BENTO GRID
   ====================================================================== */
/* One strict grid: 4 columns x 3 rows, the same gap everywhere, the same padding and radius on every tile, so every edge lines up.
   Desktop: Survey 2x2 | Homes 1x1 | Rating 1x1 / Quote 2x1 / Safety 1x1 | Call-outs 1x1 | Call to action 2x1 (7 tiles, no empty cell).
   Under 1000px it is 2 columns (Survey, Quote and the call to action span both); tile order never changes.
   Every tile: icon top-start, content bottom-start. Type: Prata = heading + numbers, Arimo = eyebrow + tile titles, Inter = lines. Smallest text: 15px.
   Animation: tiles rise in a wave from the bottom row up, numbers count up, the tape marker slides, a silver spotlight follows the pointer.
   JS adds .bn--anim only when it will animate, so without JS or with reduced motion everything shows at once. */
@property --bn-t { syntax: '<percentage>'; inherits: true; initial-value: 62%; }
.bn { --bn-gap: 16px; --bn-pad: 24px; --bn-dir: 1; position: relative; isolation: isolate; overflow: hidden; padding-block: 56px; background: var(--bg); border-block: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.bn ul { margin: 0; padding: 0; list-style: none; }
.bn-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 40% 50% at 0% 0%, color-mix(in srgb, var(--silver) 42%, transparent), transparent 70%), radial-gradient(ellipse 44% 56% at 100% 100%, var(--glow), transparent 72%); }
.bn-in { display: grid; justify-items: center; gap: 32px; }

/* heading */
.bn-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.bn-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.3 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bn-eyebrow::before, .bn-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px var(--glow); }
.bn-h2 { font: 400 clamp(28px, 3.2vw, 42px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }

/* grid (mobile + tablet first: 2 columns) */
.bn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(192px, auto); gap: var(--bn-gap); width: 100%; }
.bn-tile--survey, .bn-tile--quote, .bn-tile--cta { grid-column: 1 / -1; }
.bn-tile--survey { grid-row: span 2; }

/* tile */
.bn-tile { --mx: 50%; --my: 0%; position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: var(--bn-pad); border: 1.5px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--silver) 22%, transparent), 0 16px 34px -24px var(--shadow-ink); transition: border-color .3s, box-shadow .3s; }
.bn-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--silver) 60%, transparent), transparent 70%); }
.bn-tile > * { position: relative; }
.bn-ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 16px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 28%, transparent), 0 0 18px var(--glow); }
.bn-body { grid-row: 3; display: grid; justify-items: start; gap: 8px; }
.bn-tt { font: 700 20px/1.3 var(--f-sub); color: var(--ink); }
.bn-body p { font: 400 16px/1.5 var(--f-body); color: var(--muted); text-wrap: pretty; }
.bn-num { font: 400 clamp(36px, 3.6vw, 46px)/1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--ink); text-shadow: 0 0 26px var(--glow); }
.bn-tile--survey .bn-tt { font-size: clamp(22px, 2.2vw, 26px); }
.bn-cta-t { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--f-head); color: var(--ink); }
.bn-tile--cta { border-color: var(--ink); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--silver) 22%, var(--surface))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 30%, transparent), 0 0 30px -4px var(--glow); }
.bn-tile--cta .bn-body { gap: 14px; }

/* measuring tape (Survey tile) */
.bn-tape { position: relative; align-self: center; height: 64px; margin-block: 8px; animation: none; }
.bn-ticks { position: absolute; inset-inline: 0; top: 14px; height: 14px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1.5px, transparent 1.5px 14px); opacity: .7; }
.bn-line { position: absolute; inset-inline: 0; top: 20px; height: 2px; background: var(--line-strong); }
.bn-fill { position: absolute; inset-inline-start: 0; top: 19px; height: 4px; width: var(--bn-t); border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 16px 2px var(--glow); }
.bn-mark { position: absolute; top: 21px; inset-inline-start: var(--bn-t); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 13px; transform: translate(calc(-50% * var(--bn-dir)), -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 18px 3px var(--glow); }
.bn-end { position: absolute; bottom: 0; font: 600 15px/1 var(--f-sub); color: var(--muted); }
.bn-end--a { inset-inline-start: 0; }
.bn-end--b { inset-inline-end: 0; }
.bn.is-in .bn-tape { animation: bnTape 6s ease-in-out infinite alternate; }
@keyframes bnTape { from { --bn-t: 14%; } to { --bn-t: 88%; } }

/* spotlight + hover glow */
@media (hover: hover) {
  .bn-tile:hover { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 34%, transparent), 0 0 32px -6px var(--glow), 0 18px 36px -24px var(--shadow-ink); }
  .bn-tile:hover::before { opacity: 1; }
}

/* entrance: rise in a wave, bottom row first */
.bn--anim .bn-tile { opacity: 0; transform: translateY(28px); transition: opacity .6s ease calc(var(--d) * 90ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--d) * 90ms), border-color .3s, box-shadow .3s; }
.bn--anim.is-in .bn-tile { opacity: 1; transform: none; }

/* desktop: the 4 x 3 bento */
@media (min-width: 1000px) {
  .bn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 192px); grid-auto-rows: auto; }
  .bn-tile--survey { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bn-tile--homes { grid-column: 3; grid-row: 1; }
  .bn-tile--rating { grid-column: 4; grid-row: 1; }
  .bn-tile--quote { grid-column: 3 / 5; grid-row: 2; }
  .bn-tile--safe { grid-column: 1; grid-row: 3; }
  .bn-tile--call { grid-column: 2; grid-row: 3; }
  .bn-tile--cta { grid-column: 3 / 5; grid-row: 3; }
}
@media (max-width: 639px) {
  .bn { --bn-gap: 12px; --bn-pad: 16px; }
  .bn-tile--cta .btn { width: 100%; }
  .bn-tt { font-size: 17px; }
  .bn-tile--safe p, .bn-tile--call p { min-height: 3em; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-tile, .bn-tile::before { transition: none; }
  .bn.is-in .bn-tape { animation: none; }
}

/* ===== PRODUCTS / SECTION 3 : THE RISE GAUGE ===== */
.rg { --rg-ink: var(--white); --rg-soft: color-mix(in srgb, var(--white) 90%, var(--onyx)); --rg-glow: rgba(174, 181, 188, .95); --rg-glow-soft: rgba(174, 181, 188, .55); --rg-shade-top: rgba(32, 33, 36, .82); --rg-shade-mid: rgba(32, 33, 36, .74); --rg-shade-end: rgba(32, 33, 36, .86); --rg-bloom: rgba(174, 181, 188, .24);
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vh, 80px); background: var(--onyx); color: var(--rg-ink); scroll-margin-block-start: var(--hh); }
.rg::before, .rg::after { content: ''; position: absolute; inset-inline: 0; z-index: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--silver), transparent); box-shadow: 0 0 22px 2px var(--rg-glow-soft); pointer-events: none; }
.rg::before { inset-block-start: 0; }
.rg::after { inset-block-end: 0; }
.rg-bg { position: absolute; inset: 0; z-index: -1; }
.rg-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 56% at 50% 52%, var(--rg-bloom), transparent 72%), linear-gradient(180deg, var(--rg-shade-top), var(--rg-shade-mid) 48%, var(--rg-shade-end)); }
.rg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.rg-photo.is-on { opacity: 1; transform: scale(1); }

.rg-wrap { display: grid; justify-items: center; text-align: center; }
.rg-head { display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 14px); margin-block-end: clamp(14px, 2.2vh, 22px); text-shadow: 0 1px 14px rgba(32, 33, 36, .6); }
.rg-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.2 var(--f-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--rg-soft); }
.rg-eyebrow i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--silver); font-size: 15px; color: var(--rg-ink); box-shadow: 0 0 20px 0 var(--rg-glow-soft); }
.rg-title { text-wrap: balance; font: 400 clamp(30px, 4vw, 48px)/1.12 var(--f-head); color: var(--rg-ink); text-shadow: 0 2px 24px rgba(32, 33, 36, .55), 0 0 30px rgba(174, 181, 188, .35); }
.rg-lead { max-width: 56ch; font: 400 17px/1.65 var(--f-body); color: var(--rg-soft); }

.rg-body { width: min(100%, 1000px); }
.rg-stage { position: relative; aspect-ratio: 1000 / 200; }
.rg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px var(--rg-glow)) drop-shadow(0 0 16px var(--rg-glow-soft)); }
.rg-ground, .rg-wall { stroke: var(--silver); stroke-width: 1.5; opacity: .85; }
.rg-rise-line { stroke: var(--rg-soft); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; }
.rg-slope { fill: none; stroke: var(--rg-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rg-halo { fill: var(--silver); opacity: .5; transform-box: fill-box; transform-origin: center; animation: rgPulse 2.4s ease-in-out infinite; }
.rg-dot { fill: var(--rg-ink); }
.rg-tag { position: absolute; font: 500 15px/1.2 var(--f-body); color: var(--rg-soft); text-shadow: 0 1px 12px rgba(32, 33, 36, .7); white-space: nowrap; pointer-events: none; }
.rg-tag--rise { top: 69.75%; inset-inline-start: 70%; transform: translate(12px, -50%); }
.rg-tag--door { top: 45.5%; inset-inline-start: 82%; transform: translate(-50%, -100%); }

.rg-ruler { position: relative; height: 44px; margin-inline: 15px; touch-action: none; cursor: pointer; }
.rg-ruler::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 8px; height: 12px; box-sizing: border-box; border-inline-end: 2px solid rgba(250, 250, 248, .8); background: repeating-linear-gradient(90deg, rgba(250, 250, 248, .8) 0 2px, transparent 2px 3.3333%); }
.rg-ruler::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 19px; height: 2px; background: rgba(250, 250, 248, .75); }
.rg-major { position: absolute; inset-block-start: 4px; width: 2px; height: 20px; margin-inline-start: -1px; background: rgba(250, 250, 248, .9); }
.rg-major--a { inset-inline-start: 33.3333%; }
.rg-major--b { inset-inline-start: 66.6667%; }
.rg-fill { position: absolute; inset-block-start: 17px; inset-inline-start: 33.3333%; width: 33.3333%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--white), var(--silver)); box-shadow: 0 0 14px 2px var(--rg-glow), 0 0 30px 4px var(--rg-glow-soft); transition: inset-inline-start .5s cubic-bezier(.4, 0, .2, 1); }
.rg-handle { position: absolute; inset-block-start: 21px; inset-inline-start: 50%; z-index: 1; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--silver); background: var(--white); cursor: grab; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(174, 181, 188, .45), 0 0 26px 4px var(--rg-glow); transition: inset-inline-start .5s cubic-bezier(.4, 0, .2, 1), box-shadow .25s; }
.rg-handle:hover { box-shadow: 0 0 0 8px rgba(174, 181, 188, .45), 0 0 30px 6px var(--rg-glow); }
.rg-handle:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; }
.rg.is-drag .rg-handle, .rg.is-drag .rg-fill { transition: none; }
.rg.is-drag .rg-handle { cursor: grabbing; }

.rg-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-zone { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px 14px; background: none; border: 0; color: var(--rg-ink); text-shadow: 0 1px 12px rgba(32, 33, 36, .6); opacity: .8; cursor: pointer; transition: opacity .3s; }
.rg-zone:hover, .rg-zone.is-active { opacity: 1; }
.rg-zone:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; border-radius: 10px; }
.rg-zone::after { content: ''; position: absolute; inset-inline: 22%; inset-block-end: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--white), var(--silver)); box-shadow: 0 0 14px 2px var(--rg-glow); transform: scaleX(0); transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.rg-zone.is-active::after { transform: scaleX(1); }
.rg-zone-name { font: 700 clamp(18px, 2.2vw, 22px)/1.25 var(--f-sub); }
.rg-zone-type { font: 400 15px/1.4 var(--f-body); color: var(--rg-soft); }

.rg-answer { display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 12px); margin-block-start: clamp(16px, 2.4vh, 24px); text-shadow: 0 1px 14px rgba(32, 33, 36, .6); }
.rg-a { transition: opacity .22s ease, transform .22s ease; }
.rg-answer.is-swap .rg-a { opacity: 0; transform: translateY(8px); }
.rg-a-name { font: 400 clamp(28px, 3.4vw, 42px)/1.12 var(--f-head); color: var(--rg-ink); }
.rg-a-desc { max-width: 60ch; min-height: calc(1.65em * 2); font: 400 17px/1.65 var(--f-body); color: var(--rg-soft); }
.rg-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font: 700 17px/1.3 var(--f-sub); color: var(--rg-ink); border-block-end: 2px solid var(--silver); box-shadow: 0 8px 16px -10px var(--rg-glow); transition: border-color .2s, box-shadow .25s, text-shadow .25s; }
.rg-link:hover, .rg-link:focus-visible { border-color: var(--rg-ink); box-shadow: 0 10px 20px -8px var(--rg-glow); text-shadow: 0 0 14px var(--rg-glow); }
.rg-link:focus-visible { outline: 3px solid var(--rg-ink); outline-offset: 4px; }
.rg-link .ar { font-size: 15px; transition: transform .2s; }
.rg-link:hover .ar { transform: translateX(4px); }

/* entrance: only when JS is running, so the section is never hidden without it */
.rg.is-js .rg-reveal { opacity: 0; transform: translateY(18px); }
.rg.is-in .rg-reveal { opacity: 1; transform: none; transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.rg.is-js .rg-slope { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rg.is-in .rg-slope { animation: rgDraw 1.5s .35s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes rgDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rgPulse { 0%, 100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.25); opacity: .2; } }

@media (max-width: 640px) {
  .rg-tag { display: none; }
  .rg-slope { stroke-width: 9; }
  .rg-ground, .rg-wall { stroke-width: 4; }
  .rg-rise-line { stroke-width: 5; }
  .rg-dot { r: 14px; }
  .rg-halo { r: 30px; }
  .rg-ruler { margin-inline: 14px; }
  .rg-zone { padding-inline: 2px; }
  .rg-zone-type { font-size: 14px; }
  .rg-a-desc { min-height: calc(1.65em * 3); }
}
@media (prefers-reduced-motion: reduce) {
  .rg-photo, .rg-fill, .rg-handle, .rg-zone::after, .rg-a, .rg-link { transition: none; }
  .rg-halo { animation: none; }
  .rg.is-js .rg-reveal { opacity: 1; transform: none; }
  .rg.is-js .rg-slope { stroke-dashoffset: 0; animation: none; }
}

/* ===== PRODUCTS / SECTION 4 : THE MOSAIC (bento grid, every cell filled) ===== */
.mz { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vh, 80px); background: var(--bg); }
.mz::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 36% at 94% 4%, color-mix(in srgb, var(--silver) 46%, transparent), transparent 72%), radial-gradient(ellipse 38% 40% at 4% 98%, color-mix(in srgb, var(--silver) 40%, transparent), transparent 72%); }
.mz-head { display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 14px); margin-block-end: clamp(20px, 3.2vh, 32px); text-align: center; }
.mz-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 15px/1.2 var(--f-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.mz-eyebrow i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); border: 1.5px solid var(--line-strong); font-size: 15px; box-shadow: 0 0 20px -2px var(--glow); }
.mz-title { font: 400 clamp(30px, 4vw, 48px)/1.12 var(--f-head); color: var(--ink); text-wrap: balance; }
.mz-lead { max-width: 56ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); }

/* 6 x 3 cells, 7 tiles, zero empty cells:  A 3x2 | B 2x1 | C 1x2 / D 2x1 | E 2x1 | F 2x1 | G 2x1 */
.mz-grid { --g: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15.4vw, 214px); gap: var(--g); }
.mz-a { grid-column: 1 / 4; grid-row: 1 / 3; }
.mz-b { grid-column: 4 / 6; grid-row: 1; }
.mz-c { grid-column: 6; grid-row: 1 / 3; }
.mz-d { grid-column: 4 / 6; grid-row: 2; }
.mz-e { grid-column: 1 / 3; grid-row: 3; }
.mz-f { grid-column: 3 / 5; grid-row: 3; }
.mz-g { grid-column: 5 / 7; grid-row: 3; }

.mz-tile { --mx: 50%; --my: 50%; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; padding: clamp(16px, 1.8vw, 24px); overflow: hidden; border-radius: 22px; color: var(--white); box-shadow: 0 0 0 1.5px var(--line-strong), 0 0 0 5px color-mix(in srgb, var(--silver) 24%, transparent), 0 18px 34px -24px var(--shadow-ink); transition: box-shadow .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
a.mz-tile:hover, a.mz-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 6px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 34px -2px var(--glow), 0 22px 38px -24px var(--shadow-ink); }
a.mz-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.mz-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(250, 250, 248, .3), transparent 70%); }
.mz-tile:hover::before { opacity: 1; }

.mz-photo > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.mz-photo::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(32, 33, 36, .06) 28%, rgba(32, 33, 36, .86)); pointer-events: none; }
.mz-photo:hover > img { transform: scale(1.06); }

.mz-copy { display: grid; gap: 6px; max-width: 34ch; text-shadow: 0 1px 14px rgba(32, 33, 36, .6); }
.mz-label { font: 700 15px/1.2 var(--f-sub); letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.mz-name { font: 400 clamp(20px, 2.1vw, 30px)/1.15 var(--f-head); text-wrap: balance; }
.mz-a .mz-name { font-size: clamp(28px, 3.2vw, 44px); }
.mz-text { font: 400 16px/1.5 var(--f-body); opacity: .94; text-wrap: pretty; }

.mz-go { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(250, 250, 248, .75); background: rgba(250, 250, 248, .16); color: var(--white); font-size: 15px; backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
a.mz-tile:hover .mz-go, a.mz-tile:focus-visible .mz-go { opacity: 1; transform: none; }
@media (hover: none) { .mz-go { opacity: 1; transform: none; } }

/* solid tiles: F inverts with the theme (Onyx on light, White on dark), G is the silver call to action */
.mz-solid { align-items: flex-end; }
.mz-f { background: var(--ink); color: var(--bg); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px color-mix(in srgb, var(--silver) 30%, transparent), 0 0 30px -4px var(--glow); }
.mz-f::before { background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--silver) 55%, transparent), transparent 70%); }
.mz-f .mz-copy { text-shadow: none; }
.mz-mark { position: absolute; inset-block-start: 18px; inset-inline-end: 20px; font-size: 40px; opacity: .22; }
.mz-g { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--silver) 34%, var(--surface))); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px color-mix(in srgb, var(--silver) 34%, transparent), 0 0 32px -2px var(--glow); }
.mz-g::before { background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--silver) 60%, transparent), transparent 70%); }
.mz-g .mz-copy { text-shadow: none; }
.mz-g .mz-name { font-size: clamp(24px, 2.6vw, 34px); }
.mz-g .mz-go { opacity: 1; transform: none; border-color: var(--ink); background: var(--ink); color: var(--bg); backdrop-filter: none; animation: mzPulse 2.6s ease-in-out infinite; }
.mz-g:hover .mz-go { animation-play-state: paused; transform: translateX(3px); }
@keyframes mzPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--silver) 70%, transparent), 0 0 14px var(--glow); } 50% { box-shadow: 0 0 0 9px transparent, 0 0 26px 2px var(--glow); } }

/* entrance (JS only, so nothing is hidden without it) */
.mz.is-js .mz-tile { opacity: 0; transform: translateY(22px) scale(.97); }
.mz.is-js .mz-photo > img { transform: scale(1.14); }
.mz.is-in .mz-tile { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--d) * 90ms), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d) * 90ms), box-shadow .35s; }
.mz.is-in .mz-photo > img { transform: scale(1); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1) calc(var(--d) * 90ms); }
.mz.is-in a.mz-tile:hover, .mz.is-in a.mz-tile:focus-visible { transform: translateY(-3px); transition-delay: 0s; }
.mz.is-in .mz-photo:hover > img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }

/* tablet: 4 x 5 cells, every cell filled */
@media (max-width: 1024px) {
  .mz-grid { --g: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 19vw, 200px); }
  .mz-a { grid-column: 1 / 4; grid-row: 1 / 3; }
  .mz-c { grid-column: 4; grid-row: 1 / 3; }
  .mz-b { grid-column: 1 / 3; grid-row: 3; }
  .mz-d { grid-column: 3 / 5; grid-row: 3; }
  .mz-e { grid-column: 1 / 3; grid-row: 4; }
  .mz-f { grid-column: 3 / 5; grid-row: 4; }
  .mz-g { grid-column: 1 / 5; grid-row: 5; }
}
/* mobile: 2 x 8 cells, every cell filled */
@media (max-width: 640px) {
  .mz-grid { --g: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .mz-a { grid-column: 1 / 3; grid-row: 1 / 3; }
  .mz-c { grid-column: 1; grid-row: 3 / 5; }
  .mz-d { grid-column: 2; grid-row: 3 / 5; }
  .mz-b { grid-column: 1 / 3; grid-row: 5; }
  .mz-e { grid-column: 1 / 3; grid-row: 6; }
  .mz-f { grid-column: 1 / 3; grid-row: 7; }
  .mz-g { grid-column: 1 / 3; grid-row: 8; }
  .mz-tile { padding: 16px; border-radius: 18px; }
  .mz-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-tile, .mz-photo > img, .mz-go { transition: none; }
  .mz-g .mz-go { animation: none; }
  .mz.is-js .mz-tile { opacity: 1; transform: none; }
  .mz.is-js .mz-photo > img { transform: none; }
}

/* ===== HOME 2 / SECTION 5 : THE DOOR OPENS (two lift doors slide open with the scroll and reveal the closing invitation) ===== */
.opn { --open: 1; --car: 1; --p: .5; --opn-dir: 1; --pocket: 30px; --opn-ease: cubic-bezier(.2, .7, .2, 1); --opn-door: color-mix(in srgb, var(--silver) 38%, var(--bg)); position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 72px) 24px; color: var(--ink); background: radial-gradient(ellipse 42% 50% at 50% 100%, color-mix(in srgb, var(--silver) 26%, transparent), transparent 76%), var(--bg); }
.opn::before { content: ""; position: absolute; inset: 18px; z-index: 0; border: 1px solid color-mix(in srgb, var(--silver) 55%, transparent); border-radius: 22px; box-shadow: inset 0 0 42px color-mix(in srgb, var(--silver) 14%, transparent); pointer-events: none; }
.opn-content { position: relative; z-index: 1; padding-inline: var(--pocket); transform: scale(calc(.96 + .04 * var(--open))); opacity: calc(.25 + .75 * var(--open)); }
.opn-wrap { width: min(100%, 1200px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.opn-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.opn-pill { display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 14px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px/1.4 var(--f-sub); }
.opn-title { max-width: 18ch; margin: 0; font: 400 clamp(32px, 3.6vw, 46px)/1.16 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.opn-w { display: inline-block; vertical-align: top; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.opn-w > span { display: inline-block; }
.opn-lead { max-width: 44ch; margin: 14px 0 0; color: var(--muted); font: 400 18px/1.6 var(--f-body); }
.opn-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.opn-li { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 500 16px/1.4 var(--f-body); }
.opn-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 13px; }

/* the journey rail: survey, quote, install */
.opn-rail { position: relative; width: min(100%, 440px); display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 0; padding: 0; list-style: none; }
.opn-rail::before { content: ""; position: absolute; top: 14px; inset-inline: 16.667%; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--line-strong) 62%, var(--line)); }
.opn-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.opn-node { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink); font: 700 14px/1 var(--f-sub); }
.opn-step-name { color: var(--ink); font: 600 15px/1.2 var(--f-sub); }
.opn-car { position: absolute; z-index: 2; top: -1px; inset-inline-start: calc(16.667% + var(--car) * 66.667%); width: 32px; height: 32px; margin-inline-start: -16px; border-radius: 9px; background: var(--ink); outline: 1.5px solid color-mix(in srgb, var(--bg) 42%, transparent); outline-offset: -4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 40%, transparent), 0 10px 18px -10px var(--shadow-ink); }
.opn-car::after { content: ""; position: absolute; inset-block: 7px; inset-inline-start: 50%; width: 1.5px; margin-inline-start: -.75px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.opn-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* photo: always the whole 1:1 picture, it only drifts a little with the scroll */
.opn-photo { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; transform: translateY(calc((.5 - var(--p)) * 24px)); }
.opn-frame { aspect-ratio: 1 / 1; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 26px; background: var(--tint); box-shadow: 0 24px 60px -34px var(--shadow-ink), 0 0 44px -8px var(--glow); }
.opn-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.opn-cap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--fit-card, var(--line-strong)); border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 15px/1.4 var(--f-body); }

/* doors, light spill and the lift display */
.opn-door { position: absolute; inset-block: 0; z-index: 5; width: 50%; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--ink) 8%, transparent)), repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--ink) 7%, transparent) 22px 23px), var(--opn-door); }
.opn-door--s { inset-inline-start: 0; border-inline-end: 2px solid var(--line-strong); transform: translateX(calc(var(--open) * (-100% + var(--pocket)) * var(--opn-dir))); }
.opn-door--e { inset-inline-end: 0; border-inline-start: 2px solid var(--line-strong); transform: translateX(calc(var(--open) * (100% - var(--pocket)) * var(--opn-dir))); }
.opn-glow { position: absolute; inset-block: 0; inset-inline: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent 28%, color-mix(in srgb, var(--silver) 55%, transparent) 50%, transparent 72%); opacity: calc(sin(var(--open) * 3.14159) * .9); transform: scaleX(calc(.2 + .8 * var(--open))); }
.opn-display { position: absolute; z-index: 6; top: 12px; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 15px/1 var(--f-sub); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 10px 22px -12px var(--shadow-ink); }
.opn-digits { display: block; height: 20px; overflow: hidden; }
.opn-digits-in { display: flex; flex-direction: column; transform: translateY(calc(var(--floor, 0) * -20px)); transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.opn-digits b { display: block; height: 20px; font: 700 16px/20px var(--f-sub); text-align: center; }
.opn-where { font: 600 14px/1 var(--f-body); opacity: .9; }

/* reveal behind the doors (only with JS; toggled by scroll, so it plays backwards too) */
.opn.is-js .opn-pill, .opn.is-js .opn-lead, .opn.is-js .opn-li, .opn.is-js .opn-rail, .opn.is-js .opn-cta { opacity: 0; transform: translateY(16px); }
.opn.is-js .opn-w > span { transform: translateY(115%); }
.opn.is-js.is-open .opn-pill, .opn.is-js.is-open .opn-lead, .opn.is-js.is-open .opn-li, .opn.is-js.is-open .opn-rail, .opn.is-js.is-open .opn-cta { opacity: 1; transform: none; transition: opacity .7s var(--opn-ease), transform .8s var(--opn-ease); }
.opn.is-open .opn-lead { transition-delay: .45s; }
.opn.is-open .opn-li:nth-child(1) { transition-delay: .55s; } .opn.is-open .opn-li:nth-child(2) { transition-delay: .65s; } .opn.is-open .opn-li:nth-child(3) { transition-delay: .75s; }
.opn.is-open .opn-rail { transition-delay: .85s; } .opn.is-open .opn-cta { transition-delay: .95s; }
.opn.is-js.is-open .opn-w > span { transform: none; transition: transform .9s var(--opn-ease) calc(80ms + var(--wi, 0) * 80ms); }
.opn.is-done .opn-book { animation: fit-glow 1.1s ease both; }

@media (max-width: 900px) {
  .opn-wrap { grid-template-columns: minmax(0, 1fr); }
  .opn-title { max-width: 22ch; }
  .opn-photo { max-width: 460px; }
}
@media (max-width: 640px) {
  .opn { --pocket: 16px; padding-inline: 16px; }
  .opn::before { inset: 8px; border-radius: 18px; }
  .opn-cta { flex-direction: column; align-self: stretch; }
  .opn-cta .btn { width: 100%; }
  .opn-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .opn *, .opn *::before { transition: none !important; animation: none !important; }
}


/* Home 2 · Section 6 — A Day at Home */
.dayhome{position:relative;isolation:isolate;overflow:hidden;padding:72px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--silver) 10%,var(--bg)),var(--bg));color:var(--ink);transition:background .35s ease}
.dayhome-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(174,181,188,.08),rgba(32,33,36,.13));opacity:var(--dayhome-dusk,0);transition:opacity .25s linear}
.dayhome-inner{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.dayhome-head{text-align:center;max-width:760px;margin:0 auto 24px}
.dayhome-kicker{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:30px;padding:7px 16px;font:400 14px/1.3 var(--f-sub);background:var(--bg);color:var(--ink)}
.dayhome-head h2{font:400 clamp(30px,4vw,46px)/1.16 var(--f-head);letter-spacing:-.025em;margin:14px 0 10px}
.dayhome-head>p{font:400 16px/1.55 var(--f-sub);margin:0;color:var(--muted)}
.dayhome-journey{position:relative;padding-top:0}
.dayhome-arc{display:block;width:100%;height:110px;overflow:visible;margin-bottom:-1px}
.dayhome-arc-base,.dayhome-arc-lit{fill:none;stroke:var(--line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.dayhome-arc-base{stroke-dasharray:5 7}
.dayhome-arc-lit{stroke:var(--ink);stroke-width:2.1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .12s linear}
.dayhome-sun{fill:var(--bg);stroke:#c93636;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(201,54,54,.18))}
.dayhome-moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px);list-style:none;margin:0;padding:0}
.dayhome-moment{position:relative;min-width:0;text-align:center;opacity:.62;transition:opacity .3s ease}
.dayhome-node{position:absolute;top:-111px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--line-strong);border:2px solid var(--bg);transform:translateX(-50%);z-index:2;transition:background .25s,box-shadow .25s}
.dayhome-connector{position:absolute;top:-99px;left:50%;height:0;width:1px;background:var(--ink);transform:translateX(-50%);transition:height .35s ease}
.dayhome-photo{aspect-ratio:1/1;width:100%;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--tint);transform:translateY(12px);opacity:.12;transition:transform .45s ease,opacity .4s ease,border-color .3s}
.dayhome-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.dayhome-time{margin:12px 0 4px;font:700 14px/1.3 var(--f-sub);color:var(--muted)}
.dayhome-moment h3{font:700 18px/1.35 var(--f-sub);margin:0 0 5px;color:var(--ink)}
.dayhome-desc{font:400 14px/1.5 var(--f-body);margin:0 auto;max-width:240px;color:var(--muted)}
.dayhome-moment.is-lit{opacity:1}
.dayhome-moment.is-lit .dayhome-node{background:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--silver) 30%,transparent)}
.dayhome-moment.is-lit .dayhome-connector{height:100px}
.dayhome-moment.is-lit .dayhome-photo{transform:translateY(0);opacity:1;border-color:var(--line-strong)}
.dayhome-moon{display:none}
@media(max-width:760px){
 .dayhome{padding:48px 0}
 .dayhome-inner{width:min(560px,calc(100% - 32px))}
 .dayhome-head{margin-bottom:28px}
 .dayhome-head h2{font-size:clamp(30px,8vw,39px)}
 .dayhome-arc{display:none}
 .dayhome-journey{padding:0 0 0 0}
 .dayhome-moments{display:flex;flex-direction:column;gap:22px;position:relative;padding:0 0 0 18px}
 .dayhome-moments:before{content:"";position:absolute;top:8px;bottom:8px;left:4px;width:2px;background:linear-gradient(var(--line-strong),var(--ink));}
 .dayhome-moment{display:grid;grid-template-columns:minmax(84px,112px) minmax(0,1fr);column-gap:16px;align-items:center;text-align:left;opacity:.62}
 .dayhome-node{top:50%;left:-14px;width:12px;height:12px;transform:translateY(-50%);z-index:2}
 .dayhome-connector{display:none}
 .dayhome-photo{grid-column:1;grid-row:1 / span 3;max-width:112px;transform:translateX(-5px)}
 .dayhome-time{grid-column:2;margin:0 0 4px}
 .dayhome-moment h3{grid-column:2;font-size:17px}
 .dayhome-desc{grid-column:2;margin:4px 0 0;max-width:none;font-size:14px}
 .dayhome-moment.is-lit .dayhome-photo{transform:translateX(0)}
 .dayhome-moment.is-lit .dayhome-node{box-shadow:0 0 0 4px color-mix(in srgb,var(--silver) 32%,transparent)}
 .dayhome-moon{display:block;position:absolute;bottom:-4px;left:-4px;background:var(--bg);color:var(--ink);font-size:20px;line-height:1;padding:3px}
}
@media(prefers-reduced-motion:reduce){
 .dayhome,.dayhome *{transition:none!important;scroll-behavior:auto!important}
 .dayhome-moment{opacity:1!important}
 .dayhome-photo{opacity:1!important;transform:none!important}
 .dayhome-connector{height:100px!important}
 .dayhome-arc-lit{stroke-dashoffset:0!important}
}


/* Home-2 Section 7 — Independence in Everyday Life */

/* Home 2: remove decorative outer section frames while preserving component borders. */
.vertical-hero::before, .lsh::before, .fit-pin::before, .client4::before, .opn::before { display: none; }



@keyframes ind7-scene-in{from{clip-path:inset(0 8% 0 8%);opacity:.65}to{clip-path:inset(0);opacity:1}}




/* Home 2 / Section 8: an open doorway and a clear next step. */
.cta8{--cta8-ease:cubic-bezier(.2,.75,.25,1);position:relative;isolation:isolate;overflow:hidden;padding:clamp(36px,4vw,52px) 0;background:radial-gradient(ellipse 42% 70% at 76% 48%,color-mix(in srgb,var(--silver) 17%,transparent),transparent 76%),var(--bg);color:var(--ink)}
.cta8-inner{width:min(100% - 48px,1240px);min-height:clamp(390px,43vw,520px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(30px,5vw,68px)}
.cta8-copy{position:relative;z-index:2;max-width:560px;animation:cta8-copy-in .75s var(--cta8-ease) both paused}
.cta8-kicker{margin:0 0 18px;color:var(--muted);font:700 14px/1.5 var(--f-sub);letter-spacing:.1em}
.cta8-copy h2{max-width:12ch;margin:0;color:var(--ink);font:400 clamp(40px,5vw,66px)/1.08 var(--f-head);letter-spacing:-.025em;text-wrap:balance}
.cta8-copy h2 em{display:block;color:var(--muted);font-style:normal}
.cta8-lead{max-width:49ch;margin:18px 0 0;color:var(--muted);font:400 17px/1.65 var(--f-body)}
.cta8-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:24px}
.cta8-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 20px;background:var(--ink);color:var(--bg);font:600 16px/1.3 var(--f-sub);text-decoration:none;box-shadow:0 10px 24px -14px var(--shadow-ink);transition:transform .25s ease,box-shadow .25s ease}
.cta8-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px var(--shadow-ink)}
.cta8-secondary{display:inline-flex;align-items:center;gap:10px;min-height:46px;color:var(--ink);font:600 15px/1.4 var(--f-sub);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:gap .25s ease,color .25s ease}
.cta8-secondary:hover{gap:15px;color:var(--muted)}
.cta8-note{margin:16px 0 0;color:var(--muted);font:400 14px/1.5 var(--f-body)}
.cta8-scene{position:relative;isolation:isolate;min-height:clamp(360px,40vw,480px);aspect-ratio:1.5/1;margin:0;overflow:hidden;background:var(--tint);box-shadow:0 20px 54px -34px var(--shadow-ink)}
.cta8-scene img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.82);animation:cta8-image-in 1.1s var(--cta8-ease) both paused}
.cta8-scene::after{content:"";position:absolute;inset:40% 0 0;z-index:1;background:linear-gradient(transparent,rgba(20,22,23,.68));pointer-events:none}
.cta8-door{position:absolute;z-index:2;inset-block:0;width:50%;background:linear-gradient(110deg,color-mix(in srgb,var(--ink) 94%,transparent),color-mix(in srgb,var(--muted) 74%,transparent) 72%,color-mix(in srgb,var(--silver) 64%,transparent));border:1px solid color-mix(in srgb,var(--bg) 54%,transparent);pointer-events:none}
.cta8-door--left{inset-inline-start:0;transform-origin:left center;animation:cta8-open-left 1.15s .2s var(--cta8-ease) both paused}
.cta8-door--right{inset-inline-end:0;transform-origin:right center;background:linear-gradient(250deg,color-mix(in srgb,var(--ink) 94%,transparent),color-mix(in srgb,var(--muted) 74%,transparent) 72%,color-mix(in srgb,var(--silver) 64%,transparent));animation:cta8-open-right 1.15s .2s var(--cta8-ease) both paused}
.cta8-light{position:absolute;z-index:1;inset-block:8%;inset-inline-start:50%;width:2px;background:var(--bg);box-shadow:0 0 14px 4px color-mix(in srgb,var(--bg) 74%,transparent);opacity:0;animation:cta8-light-reveal .7s .72s ease-out both paused}
.cta8-scene figcaption{position:absolute;z-index:3;inset-inline-start:22px;inset-block-end:20px;color:#fff;font:700 14px/1.4 var(--f-sub);letter-spacing:.1em;text-shadow:0 1px 10px rgba(0,0,0,.65);opacity:0;animation:cta8-caption-in .6s 1s ease-out both paused}
@keyframes cta8-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cta8-image-in{from{clip-path:inset(5% 5% 5% 5%);opacity:.6}to{clip-path:inset(0);opacity:1}}
@keyframes cta8-open-left{from{transform:translateX(0)}to{transform:translateX(-94%)}}
@keyframes cta8-open-right{from{transform:translateX(0)}to{transform:translateX(94%)}}
@keyframes cta8-light-reveal{from{opacity:0;transform:scaleY(.2)}to{opacity:.85;transform:scaleY(1)}}
@keyframes cta8-caption-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:820px){.cta8-inner{grid-template-columns:1fr;gap:26px;min-height:0}.cta8-copy{max-width:680px}.cta8-copy h2{max-width:14ch}.cta8-scene{width:100%;min-height:0;aspect-ratio:1.7/1}}
@media(max-width:560px){.cta8{padding:32px 0}.cta8-inner{width:min(100% - 36px,520px);gap:22px}.cta8-kicker{margin-bottom:12px}.cta8-copy h2{font-size:42px}.cta8-lead{margin-top:14px;font-size:16px}.cta8-actions{align-items:flex-start;flex-direction:column;gap:10px;margin-top:18px}.cta8-primary{width:100%}.cta8-note{margin-top:12px}.cta8-scene{aspect-ratio:1.25/1}.cta8-scene figcaption{inset-inline-start:15px;inset-block-end:14px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.cta8-copy,.cta8-scene img,.cta8-door,.cta8-light,.cta8-scene figcaption,.cta8-primary,.cta8-secondary{animation:none!important;transition:none!important}.cta8-door--left{transform:translateX(-94%)}.cta8-door--right{transform:translateX(94%)}.cta8-light,.cta8-scene figcaption{opacity:1}}

.cta8:not(.is-visible) .cta8-copy{opacity:0;transform:translateY(18px)}
.cta8.is-visible .cta8-copy,.cta8.is-visible .cta8-scene img,.cta8.is-visible .cta8-door,.cta8.is-visible .cta8-light,.cta8.is-visible .cta8-scene figcaption{animation-play-state:running}


/* Home 2 survey CTA: centered introduction, image-led benefit panel, clear journey panel. */
.opn-layout{padding:clamp(38px,4vw,54px) 24px;background:radial-gradient(ellipse 50% 65% at 50% 100%,color-mix(in srgb,var(--silver) 15%,transparent),transparent 76%),var(--bg)}
.opn-layout::before{display:none}
.opn-layout .opn-content{padding:0;transform:none;opacity:1}
.opn-heading{position:relative;z-index:1;max-width:900px;margin:0 auto 26px;text-align:center}
.opn-heading .opn-pill{margin:0 auto 10px;min-height:38px;font-size:14px}
.opn-heading .opn-title{max-width:24ch;margin:0 auto;font:400 clamp(34px,4vw,50px)/1.12 var(--f-head);letter-spacing:-.025em;color:var(--ink)}
.opn-heading .opn-lead{max-width:64ch;margin:10px auto 0;font:400 16px/1.55 var(--f-body);color:var(--muted)}
.opn-layout .opn-wrap{position:relative;z-index:1;width:min(100%,1240px);grid-template-columns:minmax(0,1.2fr) minmax(0,.88fr);gap:24px;align-items:stretch}
.opn-benefit-panel,.opn-proof-panel{min-width:0;min-height:390px;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);box-shadow:0 18px 44px -34px var(--shadow-ink)}
.opn-benefit-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.95fr) minmax(0,1fr);align-items:stretch;gap:12px;padding:24px}
.opn-benefit-column{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:0}
.opn-benefit{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.opn-benefit-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:3px;border:1px solid var(--line);border-radius:50%;background:var(--tint);color:var(--ink);font-size:17px}
.opn-benefit h3{margin:0;color:var(--ink);font:600 16px/1.3 var(--f-sub)}
.opn-benefit p{max-width:18ch;margin:0;color:var(--muted);font:400 14px/1.45 var(--f-body)}
.opn-layout .opn-photo{align-self:stretch;justify-content:center;gap:10px;transform:none}
.opn-layout .opn-frame{width:100%;height:100%;min-height:280px;aspect-ratio:auto;border:0;border-radius:18px;background:var(--tint);box-shadow:none}
.opn-layout .opn-frame img{object-fit:cover;object-position:center}
.opn-layout .opn-cap{min-height:38px;padding:4px 8px;border:0;border-radius:0;background:transparent;color:var(--muted);font:600 14px/1.4 var(--f-sub);text-align:center}
.opn-proof-panel{position:relative;display:flex;flex-direction:column;padding:26px 28px 22px}
.opn-proof-heading{position:relative;padding-inline-end:56px}
.opn-proof-heading h3{margin:0;color:var(--ink);font:400 27px/1.2 var(--f-head)}
.opn-proof-heading p{margin:5px 0 0;color:var(--muted);font:400 15px/1.45 var(--f-body)}
.opn-proof-mark{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--ink);font-size:17px}
.opn-proof-center{display:flex;flex:1;align-items:center;justify-content:center;gap:14px;min-height:100px;color:var(--ink)}
.opn-proof-center strong{font:400 clamp(52px,6vw,76px)/1 var(--f-head);letter-spacing:-.04em}
.opn-proof-center span{max-width:12ch;color:var(--muted);font:500 16px/1.4 var(--f-sub)}
.opn-layout .opn-rail{width:100%;margin:0 0 18px;padding:0 4px}
.opn-layout .opn-rail::before{background:var(--line-strong)}
.opn-layout .opn-node{width:32px;height:32px;background:var(--surface);font-size:14px}
.opn-layout .opn-step-name{font-size:14px;color:var(--ink)}
.opn-layout .opn-car{width:34px;height:34px;background:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--silver) 20%,transparent),0 8px 18px -10px var(--shadow-ink)}
.opn-proof-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.opn-proof-points span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--tint) 52%,var(--surface));color:var(--ink);font:500 14px/1.3 var(--f-body);text-align:center}
.opn-proof-points i{color:var(--muted);font-size:14px}
.opn-action{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;margin-top:12px;padding:0 16px;border-radius:12px;background:var(--ink);color:var(--bg);font:600 15px/1.35 var(--f-sub);text-decoration:none;transition:transform .22s ease,box-shadow .25s ease}
.opn-action:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--shadow-ink)}
@media(max-width:980px){.opn-layout .opn-wrap{grid-template-columns:1fr}.opn-benefit-panel,.opn-proof-panel{min-height:360px}.opn-benefit-panel{grid-template-columns:minmax(0,1fr) minmax(200px,.85fr) minmax(0,1fr)}}
@media(max-width:640px){.opn-layout{padding:32px 18px}.opn-heading{margin-bottom:20px;text-align:start}.opn-heading .opn-pill{margin-inline:0}.opn-heading .opn-title{font-size:36px;text-align:start}.opn-heading .opn-lead{font-size:15px;margin-inline:0}.opn-layout .opn-wrap{gap:16px}.opn-benefit-panel{grid-template-columns:1fr 1fr;gap:14px;padding:16px;min-height:0}.opn-layout .opn-photo{grid-column:1/-1;grid-row:1;min-height:0}.opn-layout .opn-frame{height:auto;min-height:0;aspect-ratio:1.5/1}.opn-benefit-column{display:grid;grid-template-rows:repeat(3,minmax(88px,auto));gap:10px}.opn-benefit-icon{width:40px;height:40px;font-size:16px}.opn-benefit h3{font-size:15px}.opn-benefit p{font-size:14px}.opn-proof-panel{min-height:0;padding:20px 16px 16px}.opn-proof-heading h3{font-size:25px}.opn-proof-center{min-height:94px}.opn-proof-points{gap:6px}.opn-proof-points span{font-size:14px;min-height:54px;padding:5px 4px;flex-direction:column;gap:3px}.opn-action{font-size:15px}}
@media(prefers-reduced-motion:reduce){.opn-layout .opn-benefit,.opn-proof-panel,.opn-layout .opn-action{transition:none!important;animation:none!important}}


/* Home 2 survey CTA: remove edge door strips, enlarge the image, and open up feature spacing. */
.opn-layout .opn-door,.opn-layout .opn-glow,.opn-layout .opn-display{display:none}
.opn-layout .opn-content{--open:1;--p:1}
.opn-benefit-panel,.opn-proof-panel{min-height:460px}
.opn-benefit-panel{gap:18px;padding:26px}
.opn-benefit-column{justify-content:space-between;gap:18px;padding-block:10px}
.opn-benefit{gap:7px}
.opn-benefit-icon{width:46px;height:46px;margin-bottom:4px}
.opn-layout .opn-photo{gap:10px}
.opn-layout .opn-frame{min-height:350px}
@media(max-width:980px){.opn-benefit-panel,.opn-proof-panel{min-height:430px}.opn-layout .opn-frame{min-height:320px}}
@media(max-width:640px){.opn-benefit-panel,.opn-proof-panel{min-height:0}.opn-layout .opn-frame{min-height:0}.opn-benefit-column{gap:16px;padding-block:0}.opn-benefit-icon{width:42px;height:42px}}




/* Independence timeline markers: keep each marker inside its own column. */

/* About / Meet the team: retain the pinned handover animation, with number left and a taller image right. */
.tm--pin .tm-visual{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(300px,.95fr);grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;gap:clamp(28px,5vw,72px);width:min(100%,960px);height:clamp(390px,55svh,560px);margin-inline:auto}
.tm--pin .tm-num{position:relative;grid-column:1;grid-row:1;inset:auto;z-index:0;display:grid;place-items:center;width:100%;height:100%;font:400 clamp(170px,27svh,250px)/1 var(--f-head);font-size:clamp(170px,27svh,250px);text-align:center;color:color-mix(in srgb,var(--ink) 4%,transparent);-webkit-text-stroke:2px color-mix(in srgb,var(--silver) 85%,var(--ink));transform:translateY(14px);opacity:0}
.tm--pin .tm-item.is-on .tm-num{opacity:1;transform:none;transition:opacity .6s ease .7s,transform .6s ease .7s}
.tm--pin .tm-arch{grid-column:2;grid-row:1;align-self:stretch;width:auto;max-width:100%;height:100%;aspect-ratio:11/16}
.tm--pin .tm-text{max-width:60ch;justify-self:center;text-align:center}
@media(max-width:900px){.tm--pin .tm-visual{grid-template-columns:minmax(150px,.72fr) minmax(230px,1fr);gap:24px;width:min(100%,760px);height:clamp(340px,48svh,460px)}.tm--pin .tm-num{font-size:clamp(140px,24svh,210px)}}
@media(max-width:600px){.tm--pin .tm-visual{grid-template-columns:minmax(100px,.58fr) minmax(190px,1fr);gap:16px;width:100%;height:clamp(300px,44svh,400px)}.tm--pin .tm-num{font-size:clamp(110px,22svh,170px)}.tm--pin .tm-text{max-width:42ch}}


/* About team pinned slide: keep each description below its number, clear of the image. */
.tm--pin .tm-item{position:relative}
.tm--pin .tm-text{position:absolute;inset-inline-start:max(0px,calc((100% - 960px)/2));inset-block-start:calc(50% + clamp(110px,16svh,150px));width:min(34vw,400px);max-width:400px;justify-self:start;align-self:start;text-align:center}
@media(max-width:900px){.tm--pin .tm-text{inset-inline-start:max(0px,calc((100% - 760px)/2));inset-block-start:calc(50% + clamp(100px,15svh,135px));width:min(42vw,300px);max-width:300px}}
@media(max-width:600px){.tm--pin .tm-text{inset-inline-start:0;inset-block-start:calc(50% + clamp(86px,14svh,112px));width:calc(36% - 8px);max-width:none}}

/* About pinned team: balanced 50/50 layout, lifted number, wider rectangular image. */
.tm--pin .tm-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);width:min(100%,1120px)}
.tm--pin .tm-arch{width:100%;max-width:none;height:100%;aspect-ratio:auto;border-radius:16px}
.tm--pin .tm-num,.tm--pin .tm-item.is-on .tm-num{transform:translateY(-24px)}
.tm--pin .tm-text{inset-inline-start:max(0px,calc((100% - 1120px)/2));inset-block-start:calc(50% + clamp(105px,15svh,140px));width:min(42vw,500px);max-width:500px}
.tm--pin .tm-foot{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.tm--pin .tm-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;width:min(100%,760px)}.tm--pin .tm-text{inset-inline-start:max(0px,calc((100% - 760px)/2));inset-block-start:calc(50% + clamp(100px,15svh,135px));width:min(42vw,330px);max-width:330px}}
@media(max-width:600px){.tm--pin .tm-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;height:clamp(300px,44svh,400px)}.tm--pin .tm-text{inset-inline-start:0;inset-block-start:calc(50% + clamp(86px,14svh,112px));width:calc(50% - 6px);max-width:none}.tm--pin .tm-arch{border-radius:12px}}

/* Our story staircase: give each rise more height and keep the section spacious enough. */
@media(min-width:1100px){
  .rl-stage{min-height:520px}
  .rl-base{height:calc(64px + var(--i)*82px)}
  .rl-step:not(:first-child) .rl-base::after{height:82px}
}

/* Tighten the number-to-description spacing in the pinned team sequence. */
.tm--pin .tm-num,.tm--pin .tm-item.is-on .tm-num{transform:translateY(-48px)}
.tm--pin .tm-text{inset-block-start:calc(50% + clamp(75px,12svh,110px))}
@media(max-width:900px){.tm--pin .tm-text{inset-block-start:calc(50% + clamp(75px,12svh,105px))}}
@media(max-width:600px){.tm--pin .tm-text{inset-block-start:calc(50% + clamp(65px,11svh,85px))}}

/* Pinned team slide: replace the oversized number with useful left-column copy. */
.tm--pin .tm-in{row-gap:clamp(28px,4vh,44px)}
.tm--pin .tm-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:stretch;gap:clamp(24px,3vw,40px)}
.tm--pin .tm-visual>.tm-text{position:relative;grid-column:1;grid-row:1;inset:auto;align-self:center;justify-self:stretch;width:auto;max-width:44ch;text-align:start}
.tm--pin .tm-arch{grid-column:2;grid-row:1}
.tm--pin .tm-kicker{font:700 15px/1.35 var(--f-sub);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.tm--pin .tm-visual{gap:24px}.tm--pin .tm-visual>.tm-text{max-width:34ch}}
@media(max-width:600px){.tm--pin .tm-visual{gap:12px}.tm--pin .tm-visual>.tm-text{max-width:none}}

/* Pinned team slide: add a concise expectation list below each stage description. */
.tm-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-block-start:8px;padding-block-start:14px;border-block-start:1px solid var(--line);list-style:none}
.tm-points li{position:relative;padding-inline-start:22px;font:500 15px/1.45 var(--f-body);color:var(--ink)}
.tm-points li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:var(--muted);font:700 15px/1.4 var(--f-sub)}
@media(max-width:600px){.tm-points{grid-template-columns:1fr;gap:8px}}

/* Match the pinned team copy column to the full image height. */
.tm--pin .tm-visual>.tm-text{align-self:stretch;height:100%;align-content:space-between;gap:clamp(12px,2vh,20px);padding-block:clamp(12px,2.5vh,24px);box-sizing:border-box}
.tm--pin .tm-proof{padding-block-start:14px;border-block-start:1px solid var(--line);font:500 15px/1.5 var(--f-body);color:var(--muted)}
@media(max-width:600px){.tm--pin .tm-visual>.tm-text{gap:10px;padding-block:8px}.tm--pin .tm-proof{padding-block-start:10px}}

/* ABOUT PAGE / HERO: photo-led, centered banner with a distinct reveal animation. */
.ab-banner{--ab-banner-ink:var(--white);--ab-banner-soft:rgba(250,250,248,.88);position:relative;isolation:isolate;display:grid;align-items:stretch;min-height:max(580px,78svh);overflow:hidden;background:var(--onyx);color:var(--ab-banner-ink)}
.ab-banner-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--onyx)}
.ab-banner-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,23,.72),rgba(20,21,23,.55) 48%,rgba(20,21,23,.72)),linear-gradient(0deg,rgba(20,21,23,.92),transparent 50%,rgba(20,21,23,.28))}
.ab-banner-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:0;transform:scale(1.08);transition:opacity 1.3s ease}
.ab-banner-bg img.is-on{opacity:1;animation:ab-photo-breathe 9s ease-in-out both}
.ab-banner-inner{width:min(100% - 48px,1240px);min-height:inherit;display:grid;grid-template-rows:1fr auto;align-items:center;gap:clamp(28px,5vh,52px);padding-block:clamp(36px,6vh,64px) 28px}
.ab-banner-copy{display:grid;justify-items:center;gap:clamp(12px,1.8vh,18px);max-width:760px;margin-inline:auto;text-align:center;text-shadow:0 2px 18px rgba(20,21,23,.55)}
.ab-banner-eyebrow{display:inline-flex;align-items:center;gap:14px;font:700 15px/1.25 var(--f-sub);letter-spacing:.15em;text-transform:uppercase;color:var(--ab-banner-soft);animation:ab-copy-unveil .9s .1s both}
.ab-banner-eyebrow::before,.ab-banner-eyebrow::after{content:"";width:34px;height:1px;background:var(--silver);box-shadow:0 0 12px rgba(250,250,248,.55)}
.ab-banner-title{max-width:16ch;font:400 clamp(40px,min(5.6vw,8.5vh),76px)/1.08 var(--f-head);color:var(--ab-banner-ink);text-wrap:balance;animation:ab-copy-unveil 1s .22s both}
.ab-banner-sub{font:700 clamp(18px,2.4vh,22px)/1.4 var(--f-sub);color:var(--ab-banner-ink);animation:ab-copy-unveil 1s .36s both}
.ab-banner-lead{max-width:54ch;font:400 clamp(16px,2vh,18px)/1.65 var(--f-body);color:var(--ab-banner-soft);animation:ab-copy-unveil 1s .48s both}
.ab-banner-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-block-start:8px;animation:ab-copy-unveil 1s .6s both}
.ab-banner-actions .btn{min-height:48px}
.ab-banner-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,980px);margin-inline:auto;border-block-start:1px solid rgba(250,250,248,.42)}
.ab-banner-stats li{display:grid;justify-items:center;gap:5px;min-width:0;padding:18px 14px 4px;text-align:center;animation:ab-stat-rise .8s both}
.ab-banner-stats li:nth-child(1){animation-delay:.35s}.ab-banner-stats li:nth-child(2){animation-delay:.48s}.ab-banner-stats li:nth-child(3){animation-delay:.61s}.ab-banner-stats li:nth-child(4){animation-delay:.74s}
.ab-banner-stats li+li{border-inline-start:1px solid rgba(250,250,248,.3)}
.ab-banner-stats b{font:400 clamp(28px,3vw,38px)/1.1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--ab-banner-ink)}
.ab-banner-stats span{font:500 15px/1.4 var(--f-body);color:var(--ab-banner-soft)}
@keyframes ab-copy-unveil{from{opacity:0;clip-path:inset(0 0 100%);transform:translateY(14px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes ab-stat-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ab-photo-breathe{from{transform:scale(1.1);filter:blur(4px)}to{transform:scale(1.02);filter:blur(0)}}
@media(max-width:760px){.ab-banner{min-height:max(680px,86svh)}.ab-banner-inner{width:min(100% - 36px,620px);gap:32px;padding-block:42px 24px}.ab-banner-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-banner-stats li{padding:14px 8px}.ab-banner-stats li:nth-child(3){border-inline-start:0}.ab-banner-stats li:nth-child(n+3){border-block-start:1px solid rgba(250,250,248,.3)}}
@media(max-width:480px){.ab-banner{min-height:760px}.ab-banner-copy{gap:14px}.ab-banner-eyebrow{font-size:14px;letter-spacing:.1em}.ab-banner-eyebrow::before,.ab-banner-eyebrow::after{width:20px}.ab-banner-title{font-size:40px}.ab-banner-actions{width:100%;flex-direction:column}.ab-banner-actions .btn{width:100%;justify-content:center}.ab-banner-stats span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.ab-banner-copy,.ab-banner-stats li,.ab-banner-bg img.is-on{animation:none}.ab-banner-bg img{transition:none}}

/* About Section 2: full viewport composition, taller photo and richer intro column. */
.ab{min-height:100vh;min-height:100svh;padding-block:clamp(24px,4vh,40px)}
.ab-wrap{grid-template-rows:minmax(0,1fr) auto;gap:clamp(18px,3vh,28px)}
.ab-wrap .st-main{height:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.ab .st-panel{display:flex;justify-content:center;gap:clamp(16px,2.5vh,24px);padding:clamp(24px,3vw,40px)}
.ab .st-card{height:100%;min-height:0;gap:clamp(12px,2vh,18px)}
.ab .st-card .doors{height:clamp(64px,9vh,84px)}
.ab-photo{flex:1 1 0;min-height:0}
.ab-intro-points{display:grid;gap:12px;margin:4px 0 0;padding:0;list-style:none}
.ab-intro-points li{display:flex;align-items:center;gap:12px;font:500 16px/1.45 var(--f-body);color:var(--ink)}
.ab-intro-points i{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;font-size:12px;color:var(--ink);background:var(--tint)}
@media(max-width:899px){.ab{min-height:100vh;min-height:100svh}.ab-wrap{grid-template-rows:auto auto}.ab-wrap .st-main{height:auto;grid-template-columns:minmax(0,1fr)}.ab .st-panel{display:flex}.ab .st-card{display:flex;padding:20px;border:1.5px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 24px 60px -34px var(--shadow-ink),0 0 44px -8px var(--glow)}.ab .st-card::before{display:block}.ab .st-card .doors{height:68px}.ab .st-photo,.ab .trk{display:block}.ab-photo{height:clamp(240px,38vh,380px);min-height:240px;flex:none}.ab .trk{margin-block-start:4px}}
@media(max-width:639px){.ab{padding-block:24px}.ab .st-panel{padding:24px}.ab .st-card{padding:16px;gap:12px}.ab-photo{height:240px;min-height:240px}.ab-intro-points{gap:10px}.ab-intro-points li{font-size:15px}}

/* About Section 2: use the lower panel space for a practical reassurance note. */
.ab-panel-note{display:flex;align-items:center;gap:14px;margin-block-start:auto;padding-block-start:18px;border-block-start:1px solid var(--line);color:var(--ink)}
.ab-panel-note-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;background:var(--tint);font-size:17px;color:var(--ink)}
.ab-panel-note>span:last-child{display:grid;gap:5px;max-width:46ch}
.ab-panel-note strong{font:700 16px/1.35 var(--f-sub);color:var(--ink)}
.ab-panel-note>span:last-child>span{font:400 15px/1.55 var(--f-body);color:var(--muted)}
@media(max-width:639px){.ab-panel-note{padding-block-start:14px}.ab-panel-note-icon{width:38px;height:38px}}

/* Home 1 light theme: remove the silver-gray wash and keep surfaces clean and minimal. */
html[data-theme="light"] body[data-page="home-1"]{--tint:#fff;--surface:#fff;--line:#e8e7e3;--line-strong:#c9c8c3;--glow:rgba(174,181,188,.22);--shadow-ink:rgba(32,33,36,.12)}
html[data-theme="light"] body[data-page="home-1"] .hero,
html[data-theme="light"] body[data-page="home-1"] .ind,
html[data-theme="light"] body[data-page="home-1"] .product-explorer,
html[data-theme="light"] body[data-page="home-1"] .jny,
html[data-theme="light"] body[data-page="home-1"] .saf,
html[data-theme="light"] body[data-page="home-1"] .mat,
html[data-theme="light"] body[data-page="home-1"] .stories,
html[data-theme="light"] body[data-page="home-1"] .home-cta{background:#fff;border-block-color:#e8e7e3}
html[data-theme="light"] body[data-page="home-1"] .hero-aura,
html[data-theme="light"] body[data-page="home-1"] .ind::before,
html[data-theme="light"] body[data-page="home-1"] .product-explorer::before,
html[data-theme="light"] body[data-page="home-1"] .product-explorer::after,
html[data-theme="light"] body[data-page="home-1"] .jny::before,
html[data-theme="light"] body[data-page="home-1"] .jny::after,
html[data-theme="light"] body[data-page="home-1"] .saf-stage::before,
html[data-theme="light"] body[data-page="home-1"] .mat-panel::before,
html[data-theme="light"] body[data-page="home-1"] .stories::before,
html[data-theme="light"] body[data-page="home-1"] .home-cta::before{display:none}
html[data-theme="light"] body[data-page="home-1"] .hero-card,
html[data-theme="light"] body[data-page="home-1"] .hero-benefits,
html[data-theme="light"] body[data-page="home-1"] .hero-plate,
html[data-theme="light"] body[data-page="home-1"] .ind-card,
html[data-theme="light"] body[data-page="home-1"] .ind-photo,
html[data-theme="light"] body[data-page="home-1"] .jny-photo,
html[data-theme="light"] body[data-page="home-1"] .mat-panel,
html[data-theme="light"] body[data-page="home-1"] .story-card{background-color:#fff}
html[data-theme="light"] body[data-page="home-1"] .ind-photo,
html[data-theme="light"] body[data-page="home-1"] .ind-card,
html[data-theme="light"] body[data-page="home-1"] .jny-photo,
html[data-theme="light"] body[data-page="home-1"] .mat-panel,
html[data-theme="light"] body[data-page="home-1"] .story-card{box-shadow:0 8px 24px -20px rgba(32,33,36,.22)}
html[data-theme="light"] body[data-page="home-1"] .home-cta-visual{box-shadow:0 12px 32px -24px rgba(32,33,36,.26)}

/* Home 1 light mode: remove the remaining gray halo around the hero product card. */
html[data-theme="light"] body[data-page="home-1"] .hero-card{background:#fff;border-color:#e8e7e3;box-shadow:none}
html[data-theme="light"] body[data-page="home-1"] .hero-card::before{display:none}
html[data-theme="light"] body[data-page="home-1"] .hero-plate{background:#fff;box-shadow:none}

/* About page light mode: clean white sections with restrained borders and no gray atmosphere. */
html[data-theme="light"] body[data-page="about"]{--tint:#fff;--surface:#fff;--line:#e8e7e3;--line-strong:#c9c8c3;--glow:rgba(174,181,188,.2);--shadow-ink:rgba(32,33,36,.12)}
html[data-theme="light"] body[data-page="about"] .ab,
html[data-theme="light"] body[data-page="about"] .rl,
html[data-theme="light"] body[data-page="about"] .tm,
html[data-theme="light"] body[data-page="about"] .pd,
html[data-theme="light"] body[data-page="about"] .bn{background:#fff;border-block-color:#e8e7e3}
html[data-theme="light"] body[data-page="about"] .ab .hero-aura,
html[data-theme="light"] body[data-page="about"] .rl-aura,
html[data-theme="light"] body[data-page="about"] .tm-aura,
html[data-theme="light"] body[data-page="about"] .pd-aura,
html[data-theme="light"] body[data-page="about"] .bn-aura{display:none}
html[data-theme="light"] body[data-page="about"] .ab-card::before{display:none}
html[data-theme="light"] body[data-page="about"] .ab-card,
html[data-theme="light"] body[data-page="about"] .tm-arch,
html[data-theme="light"] body[data-page="about"] .bn-tile{box-shadow:0 10px 28px -24px rgba(32,33,36,.24)}
html[data-theme="light"] body[data-page="about"] .bn-tile--cta{background:#fff;box-shadow:0 10px 28px -24px rgba(32,33,36,.24)}

/* Home 2 light mode: replace silver-gray washes with white surfaces and subtle borders. */
html[data-theme="light"] body[data-page="home-2"]{--tint:#fff;--surface:#fff;--line:#e8e7e3;--line-strong:#c9c8c3;--glow:rgba(174,181,188,.2);--shadow-ink:rgba(32,33,36,.12)}
html[data-theme="light"] body[data-page="home-2"] .vertical-hero,
html[data-theme="light"] body[data-page="home-2"] .lsh,
html[data-theme="light"] body[data-page="home-2"] .fit,
html[data-theme="light"] body[data-page="home-2"] .fit-pin,
html[data-theme="light"] body[data-page="home-2"] .client4,
html[data-theme="light"] body[data-page="home-2"] .opn,
html[data-theme="light"] body[data-page="home-2"] .dayhome,
html[data-theme="light"] body[data-page="home-2"] .cta8{background:#fff;border-color:#e8e7e3}
html[data-theme="light"] body[data-page="home-2"] .vertical-hero::before,
html[data-theme="light"] body[data-page="home-2"] .lsh::before,
html[data-theme="light"] body[data-page="home-2"] .fit-pin::before,
html[data-theme="light"] body[data-page="home-2"] .client4::before,
html[data-theme="light"] body[data-page="home-2"] .opn::before,
html[data-theme="light"] body[data-page="home-2"] .dayhome-sky,
html[data-theme="light"] body[data-page="home-2"] .client4-panel{background:#fff;border-color:#e8e7e3;box-shadow:0 12px 28px -24px rgba(32,33,36,.24)}
html[data-theme="light"] body[data-page="home-2"] .client4-status,
html[data-theme="light"] body[data-page="home-2"] .client4-check,
html[data-theme="light"] body[data-page="home-2"] .vertical-hero-secondary{background:#fff}
html[data-theme="light"] body[data-page="home-2"] .client4-panel:hover{box-shadow:0 14px 32px -24px rgba(32,33,36,.26)}
html[data-theme="light"] body[data-page="home-2"] .vertical-hero-image-frame{box-shadow:0 12px 30px -24px rgba(32,33,36,.28)}

/* ==========================================================================
   Home 2 · "Floor by floor" (Every floor, still yours.)
   Spacing rule: section padding 72 top = 72 bottom (56 on mobile).
   Every gap = var(--flr-gap) = 24px. No spacer divs, no stacked margins.
   Type: Prata (headings) · Arimo (eyebrows/labels) · Inter (body). Min 14px.
   All colours come from the global theme variables, so both modes stay legible.
   ========================================================================== */
.flr {
  --flr-gap: 24px;
  --flr-pad: 72px;
  --flr-door-a: #c3c7cc; --flr-door-b: #eceef0; --flr-door-seam: #6d7378;
  position: relative; background: var(--bg); color: var(--ink);
  padding-block: var(--flr-pad);
}
.flr-inner { width: min(100% - 80px, 1240px); margin-inline: auto; display: grid; gap: var(--flr-gap); }

/* header */
.flr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--flr-gap); align-items: end; }
.flr-title-col { display: grid; gap: var(--flr-gap); min-width: 0; }
.flr-eyebrow { display: flex; align-items: center; gap: 12px; font: 700 14px/1.4 var(--f-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.flr-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--ink); flex: none; }
.flr-title { font: 400 clamp(40px, 5.5vw, 68px)/1.04 var(--f-head); letter-spacing: -.01em; color: var(--ink); }
.flr-side { display: grid; gap: var(--flr-gap); justify-items: start; }
.flr-lead { font: 400 17px/1.6 var(--f-body); color: var(--muted); max-width: 46ch; }
.flr-link { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid var(--ink); font: 700 14px/1.2 var(--f-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.flr-link:hover { color: var(--muted); border-color: var(--muted); }

/* grid: cards 01/03 left, cabin photo centre, cards 02/04 right */
.flr-grid { display: grid; gap: var(--flr-gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); grid-template-areas: "c1 ph c2" "c3 ph c4"; }
.flr-card[data-floor="1"] { grid-area: c1; } .flr-card[data-floor="2"] { grid-area: c2; }
.flr-card[data-floor="3"] { grid-area: c3; } .flr-card[data-floor="4"] { grid-area: c4; }
.flr-cabin { grid-area: ph; }

.flr-card { display: flex; flex-direction: column; gap: var(--flr-gap); padding: var(--flr-gap); min-width: 0; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); transition: border-color .3s, box-shadow .3s; }
.flr-card.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.flr-tag { display: flex; align-items: center; gap: 16px; }
.flr-num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 15px/1 var(--f-sub); transition: background .3s, color .3s; }
.flr-card.is-active .flr-num { background: var(--ink); color: var(--bg); }
.flr-label { font: 700 14px/1.4 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.flr-copy { display: grid; gap: 8px; align-content: start; }
.flr-card h3 { font: 400 26px/1.25 var(--f-head); color: var(--ink); }
.flr-card p { font: 400 16px/1.55 var(--f-body); color: var(--muted); }
.flr-fact { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--flr-gap); border-top: 1px dashed var(--line-strong); font: 500 15px/1.4 var(--f-body); color: var(--ink); }
.flr-fact i { flex: none; width: 18px; text-align: center; font-size: 15px; color: var(--ink); }

/* cabin photo + lift doors + floor display */
.flr-cabin { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); background: var(--tint); min-height: 100%; isolation: isolate; }
.flr-cabin > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.flr-door { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, var(--flr-door-a), var(--flr-door-b) 50%, var(--flr-door-a)); transition: transform .7s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.flr-door--l { inset-inline-start: 0; border-inline-end: 2px solid var(--flr-door-seam); }
.flr-door--r { inset-inline-end: 0; border-inline-start: 2px solid var(--flr-door-seam); }
.flr.is-open .flr-door--l { transform: translateX(-101%); }
.flr.is-open .flr-door--r { transform: translateX(101%); }
.flr-display { position: absolute; z-index: 3; top: var(--flr-gap); inset-inline: 0; margin-inline: auto; width: max-content; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--ink); color: var(--bg); font: 700 22px/1.25 var(--f-sub); }
.flr-display svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.flr-digits { display: block; height: 1.25em; overflow: hidden; }
.flr-reel { display: block; transform: translateY(calc(var(--flr-i, 0) * -1.25em)); transition: transform .45s cubic-bezier(.3, .8, .2, 1); }
.flr-reel b { display: block; height: 1.25em; font-weight: 700; }
.flr-cap { position: absolute; z-index: 3; inset-inline: var(--flr-gap); bottom: var(--flr-gap); padding: 12px 16px; background: var(--ink); color: var(--bg); font: 700 14px/1.4 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; }

/* proof strip */
.flr-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: var(--flr-gap); padding: var(--flr-gap); background: var(--surface); border: 1px solid var(--line-strong); }
.flr-proof { display: flex; align-items: center; gap: 12px; min-width: 0; font: 600 16px/1.4 var(--f-body); color: var(--ink); }
.flr-proof + .flr-proof { padding-inline-start: var(--flr-gap); border-inline-start: 1px solid var(--line-strong); }
.flr-proof i { flex: none; font-size: 15px; color: var(--ink); }
.flr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font: 700 14px/1.2 var(--f-sub); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background .25s, color .25s; }
.flr-btn:hover { background: var(--bg); color: var(--ink); }

/* hidden-until-revealed states only apply once JS has armed the section */
.flr[data-armed] .flr-card { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .75, .25, 1), border-color .3s, box-shadow .3s; transition-delay: calc(var(--flr-n, 0) * 120ms), calc(var(--flr-n, 0) * 120ms), 0s, 0s; }
.flr[data-armed] .flr-card.is-in { opacity: 1; transform: none; }

/* tablet: photo on top, cards in two columns */
@media (max-width: 900px) {
  .flr-inner { width: min(100% - 48px, 760px); }
  .flr-head { grid-template-columns: 1fr; align-items: start; }
  .flr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "ph ph" "c1 c2" "c3 c4"; }
  .flr-cabin { min-height: 0; aspect-ratio: 16 / 10; }
  .flr-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flr-strip .flr-btn { grid-column: 1 / -1; }
}

/* mobile: single column, photo sticks so the floor display stays in view */
@media (max-width: 599px) {
  .flr { --flr-pad: 56px; }
  .flr-inner { width: min(100% - 48px, 520px); }
  .flr-title { font-size: 40px; }
  .flr-lead { font-size: 16px; }
  .flr-grid { grid-template-columns: 1fr; grid-template-areas: "ph" "c1" "c2" "c3" "c4"; }
  .flr-cabin { position: sticky; top: var(--hh); z-index: 5; aspect-ratio: 4 / 3; }
  .flr-card { position: relative; z-index: 1; gap: 8px; padding: 16px 24px 16px 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .flr-tag { display: contents; }
  .flr-num { grid-row: 1 / span 2; }
  .flr-label { align-self: center; }
  .flr-copy { grid-column: 2; }
  .flr-card h3 { font-size: 22px; }
  .flr-card p { font-size: 14px; line-height: 1.5; }
  .flr-fact { display: none; }
  .flr-display { top: 16px; font-size: 20px; }
  .flr-cap { inset-inline: 16px; bottom: 16px; padding: 8px 12px; font-size: 14px; letter-spacing: .06em; }
  .flr-strip { padding: 0; border: 0; background: transparent; grid-template-columns: 1fr; }
  .flr-strip .flr-proof { display: none; }
  .flr-btn { width: 100%; }
}

/* reduced motion: everything static */
@media (prefers-reduced-motion: reduce) {
  .flr-door { display: none; }
  .flr-reel, .flr-card, .flr-num { transition: none !important; }
  .flr[data-armed] .flr-card { opacity: 1; transform: none; }
}


/* ===== About page / Section 7: "Press a floor" FAQ lift =====
   Left panel (questions as lift buttons) + right cabin (doors slide open on the answer) + full-width CTA strip.
   One 16px gap everywhere (12px on mobile); panel and cabin share the same height. Doors only use transform. */
.lf { --lf-gap: 16px; --lf-pad: 24px; --lf-door: 56px; --lf-dur: .4s; --lf-dir: 1; position: relative; isolation: isolate; overflow: hidden; padding-block: 56px; background: var(--tint); border-block-end: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.lf ul { margin: 0; padding: 0; list-style: none; }
.lf-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(ellipse 40% 50% at 0% 0%, color-mix(in srgb, var(--silver) 42%, transparent), transparent 70%), radial-gradient(ellipse 44% 56% at 100% 100%, var(--glow), transparent 72%); }
.lf-in { display: grid; gap: var(--lf-gap); }
.lf-main { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--lf-gap); align-items: stretch; }

/* left panel */
.lf-panel, .lf-cabin { min-width: 0; border: 1.5px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--silver) 22%, transparent), 0 16px 34px -24px var(--shadow-ink); }
.lf-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--lf-gap); padding: var(--lf-pad); }
.lf-head { display: grid; align-content: start; gap: 12px; }
.lf-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1.3 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lf-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px var(--glow); }
.lf-h2 { font: 400 clamp(30px, 3.2vw, 40px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); }
.lf-h2 span { display: block; }
.lf-sub { font: 400 18px/1.45 var(--f-sub); color: var(--muted); }
.lf-floors { display: grid; grid-template-rows: repeat(5, minmax(48px, 1fr)); gap: 12px; min-height: 0; }
.lf-floor { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 16px/1.3 var(--f-body); text-align: start; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.lf-fn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 14px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.lf-fq { min-width: 0; text-wrap: balance; }
.lf-floor.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 20px -2px var(--glow); }
@media (hover: hover) {
  .lf-floor:not(.is-on):hover { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 34%, transparent), 0 0 22px -4px var(--glow); }
}

/* right cabin */
.lf-cabin { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.lf-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--lf-gap); min-height: 64px; padding: 0 var(--lf-pad); background: color-mix(in srgb, var(--silver) 20%, var(--surface)); border-bottom: 1.5px solid var(--line); }
.lf-disp { justify-self: start; display: inline-flex; align-items: center; gap: 10px; direction: ltr; font: 400 28px/1 var(--f-head); color: var(--ink); }
.lf-disp i { font-size: 18px; }
.lf-disp b { font-weight: 400; font-variant-numeric: tabular-nums; }
.lf-count { font: 500 15px/1.3 var(--f-body); color: var(--muted); text-align: center; }
.lf-count b { font-weight: 700; color: var(--ink); }
.lf-dots { justify-self: end; display: inline-flex; gap: 8px; }
.lf-dots i { width: 12px; height: 12px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: background .3s, border-color .3s; }
.lf-dots i.is-on { background: var(--ink); border-color: var(--ink); }
.lf-shaft { position: relative; overflow: hidden; min-height: 0; }
.lf-stage { display: grid; height: 100%; padding: var(--lf-pad) calc(var(--lf-door) + var(--lf-pad)); }

/* doors: transform only, no layout shift */
.lf-door { position: absolute; inset-block: 0; z-index: 2; width: 50%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--silver) 40%, var(--surface)) 0 7px, var(--surface) 7px 14px); transition: transform var(--lf-dur) cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.lf-door--s { inset-inline-start: 0; border-inline-end: 1.5px solid var(--line-strong); transform: translateX(calc(var(--lf-dir) * (var(--lf-door) - 100%))); }
.lf-door--e { inset-inline-end: 0; border-inline-start: 1.5px solid var(--line-strong); transform: translateX(calc(var(--lf-dir) * (100% - var(--lf-door)))); }
.lf-cabin[data-doors="closed"] .lf-door { transform: none; }

/* answers share one grid cell, so the cabin is always as tall as the longest answer */
.lf-ans { grid-area: 1 / 1; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: var(--lf-gap); min-width: 0; visibility: hidden; opacity: 0; }
.lf-ans.is-on { visibility: visible; opacity: 1; }
.lf-art { display: flex; flex-direction: column; gap: var(--lf-gap); min-height: 0; }
.lf-big { font: 400 clamp(72px, 8vw, 96px)/1 var(--f-head); direction: ltr; color: var(--ink); }
.lf-photo { position: relative; flex: 1; min-height: 140px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 16px; background: var(--tint); }
.lf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-txt { display: flex; flex-direction: column; justify-content: space-between; gap: var(--lf-gap); min-width: 0; }
.lf-copy { display: grid; gap: var(--lf-gap); }
.lf-q { font: 700 24px/1.25 var(--f-sub); color: var(--ink); text-wrap: balance; }
.lf-a { font: 400 18px/1.6 var(--f-body); color: var(--muted); text-wrap: pretty; }
.lf-tip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1.5px dashed var(--line-strong); border-radius: 14px; font: 400 15px/1.4 var(--f-body); color: var(--muted); }
.lf-tip i { flex: none; font-size: 16px; color: var(--ink); }
.lf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lf-gap); }
.lf-facts li { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 104px; padding: 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.lf-facts b { font: 400 28px/1.1 var(--f-head); direction: ltr; white-space: nowrap; color: var(--ink); }
.lf-facts span { font: 400 15px/1.3 var(--f-body); color: var(--muted); overflow-wrap: anywhere; }

/* bottom CTA strip */
.lf-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--lf-gap); min-height: 88px; padding: 16px var(--lf-pad); border: 1.5px solid var(--ink); border-radius: 22px; background: var(--ink); color: var(--bg); }
.lf-cta-copy { display: flex; align-items: center; gap: 24px; min-width: 0; }
.lf-cta-t { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--f-head); color: var(--bg); }
.lf-cta-p { font: 400 16px/1.4 var(--f-body); color: var(--bg); }
.lf-cta-btns { display: flex; flex: none; gap: 12px; }
.lf-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--bg); border-radius: 14px; font: 600 16px/1 var(--f-body); white-space: nowrap; transition: transform .2s, box-shadow .25s; }
.lf-cbtn--ghost { background: transparent; color: var(--bg); }
.lf-cbtn--solid { background: var(--bg); color: var(--ink); }
.lf-cbtn:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 28%, transparent); }
.lf-cbtn:focus-visible { outline-color: var(--bg); }
.lf-cbtn .ar { transition: transform .2s; }
.lf-cbtn:hover .ar { transform: translateX(4px); }

@media (max-width: 1100px) {
  .lf-cta-copy { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* tablet and mobile: header, five floor buttons in one row, cabin, then CTA */
@media (max-width: 1100px) {
  .lf { --lf-gap: 12px; }
  .lf-main { grid-template-columns: minmax(0, 1fr); }
  .lf-panel { display: contents; }
  .lf-head { padding: 20px; border: 1.5px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--silver) 20%, var(--surface)); }
  .lf-floors { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; }
  .lf-floor { justify-content: center; min-height: 52px; padding: 0; }
  .lf-fn { width: auto; height: auto; border: 0; border-radius: 0; font: 700 18px/1 var(--f-body); }
  .lf-fq { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .lf-bar { min-height: 56px; }
}
@media (max-width: 700px) {
  .lf { --lf-pad: 16px; --lf-door: 24px; }
  .lf-bar { grid-template-columns: auto minmax(0, 1fr); }
  .lf-count { text-align: end; }
  .lf-dots { display: none; }
  .lf-stage { padding: var(--lf-pad) calc(var(--lf-door) + 12px); }
  .lf-ans { grid-template-columns: minmax(0, 1fr); }
  .lf-art { display: none; }
  .lf-q { font-size: 22px; }
  .lf-a { font-size: 17px; }
  .lf-facts { gap: 8px; }
  .lf-facts li { min-height: 88px; padding: 12px 8px; }
  .lf-facts b { font-size: 20px; }
  .lf-facts span { font-size: 14px; }
  .lf-cta { flex-direction: column; align-items: stretch; padding: 20px; }
  .lf-cta-btns { flex-direction: column-reverse; }
  .lf-cbtn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-door { transition: none; }
  .lf-ans { transition: opacity .3s ease, visibility 0s linear .3s; }
  .lf-ans.is-on { transition: opacity .3s ease; }
  .lf-floor, .lf-dots i, .lf-cbtn, .lf-cbtn .ar { transition: none; }
}

/* light mode on the About page: clean white section, restrained borders, same as the other About sections */
html[data-theme="light"] body[data-page="about"] .lf { background: #fff; }
html[data-theme="light"] body[data-page="about"] .lf-aura { display: none; }
html[data-theme="light"] body[data-page="about"] .lf-panel,
html[data-theme="light"] body[data-page="about"] .lf-cabin { box-shadow: 0 10px 28px -24px rgba(32, 33, 36, .24); }
@media (max-width: 980px) {
  html[data-theme="light"] body[data-page="about"] .lf-head { box-shadow: 0 10px 28px -24px rgba(32, 33, 36, .24); }
}


/* ===== Products page / Section 5: "Built safe, piece by piece" (pinned scroll assembles the products) =====
   The stage pins under the header while the track scrolls; JS writes --t (0 to 1) on each part and the CSS moves it in.
   Without JS or with reduced motion (no .bp--live) nothing pins and every part sits assembled. */
.bp { --bp-gap: 16px; --bp-pad: 24px; --bp-dir: 1; --bp-run: 240vh; position: relative; background: var(--bg); border-top: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.bp ul { margin: 0; padding: 0; list-style: none; }
.bp-stage { display: grid; align-content: center; padding-block: 32px; background: var(--bg); }
.bp--live .bp-track { height: calc(100vh - var(--hh) + var(--bp-run)); height: calc(100svh - var(--hh) + var(--bp-run)); }
.bp--live .bp-stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); padding-block: 24px; }
.bp-frame { display: grid; gap: var(--bp-gap); }
.bp-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.bp-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 600 14px/1 var(--f-sub); color: var(--muted); }
.bp-tag i { color: var(--ink); font-size: 14px; }
.bp-title { font: 400 clamp(30px, 3.4vw, 44px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.bp-lead { max-width: 60ch; font: 400 18px/1.55 var(--f-body); color: var(--muted); text-wrap: balance; }
.bp-panels { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--bp-gap); align-items: stretch;height:450px; }
.bp-panel { display: flex; flex-direction: column; gap: var(--bp-gap); min-width: 0; overflow: hidden; padding: var(--bp-pad); border: 1.5px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 28px -24px var(--shadow-ink); }
.bp-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bp-ph h3 { font: 700 22px/1.2 var(--f-sub); color: var(--ink); }
.bp-ph span { font: 400 15px/1.2 var(--f-body); color: var(--muted); }
.bp-grid { display: grid; flex: 1; gap: var(--bp-gap); min-height: 0; }
.bp-grid--sl { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.25fr) 24px minmax(0, 1fr); grid-template-rows: repeat(3, minmax(56px, 1fr)); }
.bp-grid--rp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 64px 20px minmax(64px, 1fr) 20px 64px; row-gap: 8px; column-gap: var(--bp-gap); }
.bp-part, .bp-arr, .bp-out { grid-column: var(--c); grid-row: var(--r); min-width: 0; }
.bp-part { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 700 18px/1.2 var(--f-sub); text-align: center; transform: translate(calc((1 - var(--t, 1)) * var(--fx, 0%) * var(--bp-dir)), calc((1 - var(--t, 1)) * var(--fy, 0%))); opacity: calc(.15 + .85 * var(--t, 1)); transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.bp-part i { flex: none; font-size: 16px; }
.bp-part.is-in { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 38%, transparent); animation: bpSnap .35s cubic-bezier(.3, 1.6, .5, 1); }
.bp-part.is-new { background: var(--ink); color: var(--bg); }
@keyframes bpSnap { 0% { scale: 1; } 45% { scale: 1.06; } 100% { scale: 1; } }
.bp-arr { display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.bp-out { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: 14px; text-align: center; transition: border-color .3s, box-shadow .3s; }
.bp-out b { font: 700 20px/1.2 var(--f-sub); color: var(--ink); }
.bp-out span { font: 400 15px/1.3 var(--f-body); color: var(--muted); }
.bp-out.is-done { border-style: solid; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 38%, transparent), 0 0 24px -4px var(--glow); }
.bp-strip { display: flex; align-items: center; gap: var(--bp-gap); min-height: 72px; padding: 0 var(--bp-pad); border: 1.5px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 28px -24px var(--shadow-ink); }
.bp-count { flex: none; font: 700 20px/1.2 var(--f-sub); color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-bar { position: relative; flex: 1; height: 14px; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--tint); }
.bp-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; border-radius: 999px; background: var(--ink); }
.bp-hint { flex: none; min-width: 9ch; text-align: end; font: 400 15px/1.2 var(--f-body); color: var(--muted); }

@media (max-width: 980px) {
  .bp-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bp { --bp-gap: 12px; --bp-pad: 16px; }
  .bp--live .bp-stage { padding-block: 16px; }
  .bp-lead { font-size: 16px; }
  .bp-ph h3 { font-size: 20px; }
  .bp-grid--sl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(3, 44px); gap: 8px; }
  .bp-grid--sl .bp-part { --c: 1 !important; }
  .bp-grid--sl .bp-out { --c: 2 !important; }
  .bp-grid--sl .bp-part[data-k="1"], .bp-grid--sl .bp-part[data-k="3"], .bp-grid--sl .bp-part[data-k="5"] { --c: 3 !important; }
  .bp-grid--rp { grid-template-rows: 44px 56px 44px; row-gap: 8px; column-gap: 8px; }
  .bp-grid--rp .bp-out { --r: 2 !important; }
  .bp-grid--rp .bp-part[data-k="8"], .bp-grid--rp .bp-part[data-k="9"] { --r: 3 !important; }
  .bp-arr { display: none; }
  .bp-part { padding: 0 6px; font-size: 15px; }
  .bp-part i { display: none; }
  .bp-strip { min-height: 60px; }
  .bp-count { font-size: 18px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .bp-lead { display: none; }
  .bp-head { gap: 8px; }
  .bp-title { font-size: 28px; }
  .bp-grid--sl { grid-template-rows: repeat(3, 40px); }
  .bp-grid--rp { grid-template-rows: 40px 48px 40px; }
  .bp-strip { min-height: 56px; }
}
@media (min-width: 981px) and (max-height: 780px) {
  .bp-lead { display: none; }
  .bp-grid--sl { grid-template-rows: repeat(3, minmax(48px, 1fr)); }
  .bp-grid--rp { grid-template-rows: 52px 20px minmax(56px, 1fr) 20px 52px; }
  .bp-strip { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-part, .bp-out, .bp-part.is-in { transition: none; animation: none; }
}

/* ===== Products page / Section 6: "The Climb" =====
   Four solid steps rise like a staircase; a dashed stairlift rail runs along their tops and a carriage climbs it as you scroll.
   Nothing pins, stacks or swaps. Left column and stairs share one baseline, rail and chips fill the space above the lower steps.
   Padding matches section 4. Without JS everything is already built; reduced motion shows the finished climb. */
.cmb { --cmb-head: 84px; --cmb-1: color-mix(in srgb, var(--silver) 20%, var(--bg)); --cmb-2: color-mix(in srgb, var(--silver) 38%, var(--bg)); --cmb-3: color-mix(in srgb, var(--silver) 58%, var(--bg)); --p: 0; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vh, 80px); background: var(--bg); border-top: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.cmb::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 36% at 94% 4%, color-mix(in srgb, var(--silver) 46%, transparent), transparent 72%), radial-gradient(ellipse 38% 40% at 4% 98%, color-mix(in srgb, var(--silver) 40%, transparent), transparent 72%); }
.cmb ol, .cmb ul { margin: 0; padding: 0; list-style: none; }
.cmb-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: stretch; }

.cmb-side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.8vh, 18px); min-width: 0; }
.cmb-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cmb-tag i { font-size: 15px; }
.cmb-title { font: 400 clamp(32px, 3.2vw, 42px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.cmb-lead { font: 400 17px/1.65 var(--f-body); color: var(--muted); }
.cmb-facts { display: grid; gap: 8px; width: 100%; }
.cmb-facts li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); font: 600 15px/1.2 var(--f-body); color: var(--ink); }
.cmb-facts i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--tint); font-size: 14px; }

.cmb-stairs { position: relative; min-height: 460px; overflow: hidden; }
.cmb-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cmb-base, .cmb-prog { fill: none; stroke-width: 3; stroke-linejoin: round; }
.cmb-base { stroke: var(--line-strong); stroke-dasharray: 10 8; }
.cmb-prog { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 0; }
.cmb-steps { position: absolute; inset: 0; }
.cmb-step { --cmb-bg: var(--cmb-1); position: absolute; bottom: 0; inset-inline-start: calc(25% * var(--i)); width: 25%; height: calc((100% - var(--cmb-head)) * var(--k)); }
.cmb-step:nth-child(2) { --cmb-bg: var(--cmb-2); }
.cmb-step:nth-child(3) { --cmb-bg: var(--cmb-3); }
.cmb-step:nth-child(4) { --cmb-bg: var(--ink); --cmb-fg: var(--bg); }
.cmb-block { position: absolute; inset: 0 0 -6px; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 30px; border: 1.5px solid var(--line-strong); background: var(--cmb-bg); color: var(--cmb-fg, var(--ink)); transition: clip-path .75s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 120ms), transform .3s ease; }
.cmb-step:not(:first-child) .cmb-block { inset-inline-start: -1.5px; }
.cmb-step:nth-child(4) .cmb-block { border-color: var(--ink); }
.cmb-step.is-cur .cmb-block, .cmb-step:hover .cmb-block, .cmb-step:focus-within .cmb-block { transform: translateY(-6px); }
.cmb-no { font: 400 clamp(40px, 3.6vw, 52px)/1 var(--f-head); opacity: .62; transition: opacity .35s; }
.cmb-step.is-on .cmb-no { opacity: 1; }
.cmb-name { font: 700 20px/1.25 var(--f-sub); text-wrap: balance; }
.cmb-text { font: 400 15px/1.55 var(--f-body); color: color-mix(in srgb, currentColor 90%, transparent); text-wrap: pretty; }
.cmb-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; min-height: 32px; font: 600 15px/1.2 var(--f-body); color: inherit; }
.cmb-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmb-link:hover .ar { transform: translateX(4px); }

.cmb-stop { position: absolute; inset-inline: 0; bottom: calc(100% + 14px); display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; transition: opacity .45s ease calc(.5s + var(--i) * 120ms), scale .45s cubic-bezier(.3, 1.5, .5, 1) calc(.5s + var(--i) * 120ms); }
.cmb-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 600 14px/1 var(--f-body); color: var(--ink); white-space: nowrap; transition: border-color .3s; }
.cmb-dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--bg); transition: background .3s, border-color .3s; }
.cmb-step.is-on .cmb-chip, .cmb-step.is-on .cmb-dot { border-color: var(--ink); }
.cmb-step.is-on .cmb-dot { background: var(--ink); }
.cmb-car { position: absolute; inset-inline-start: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: var(--bg); font-size: 15px; box-shadow: 0 0 0 4px var(--glow), 0 10px 22px -8px var(--shadow-ink); translate: -50% -50%; opacity: 0; pointer-events: none; transition: opacity .4s; }
.cmb-car.is-ready { opacity: 1; }

/* entrance (JS only, so nothing is hidden without it): risers grow up, rail reveals, chips pop in */
.cmb.is-js .cmb-block { clip-path: inset(100% 0 0 0); }
.cmb.is-js .cmb-block > * { opacity: 0; translate: 0 14px; }
.cmb.is-js .cmb-no { opacity: 0; }
.cmb.is-js .cmb-stop { opacity: 0; scale: .7; }
.cmb.is-js .cmb-rail { clip-path: inset(-24px 100% -24px 0); }
.cmb.is-in .cmb-block { clip-path: inset(0); }
.cmb.is-in .cmb-block > * { opacity: 1; translate: 0 0; transition: opacity .5s ease calc(.3s + var(--i) * 120ms), translate .6s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i) * 120ms); }
.cmb.is-in .cmb-no { opacity: .62; }
.cmb.is-in .cmb-step.is-on .cmb-no { opacity: 1; }
.cmb.is-in .cmb-stop { opacity: 1; scale: 1; }
.cmb.is-in .cmb-rail { clip-path: inset(-24px 0 -24px 0); transition: clip-path 1.1s cubic-bezier(.4, 0, .2, 1) .45s; }

@media (max-width: 1080px) {
  .cmb-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cmb-title { max-width: 22ch; }
  .cmb-lead { max-width: 60ch; }
  .cmb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmb-stairs { min-height: 480px; }
  .cmb-block { padding: 16px 14px 28px; }
}
@media (max-width: 760px) {
  .cmb-facts { grid-template-columns: minmax(0, 1fr); }
  .cmb-stairs { min-height: 0; overflow: visible; }
  .cmb-stairs::before, .cmb-stairs::after { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 10px; width: 3px; border-radius: 3px; background: var(--line-strong); }
  .cmb-stairs::before { inset-block-end: 0; }
  .cmb-stairs::after { height: calc(var(--p) * 100%); background: var(--ink); }
  .cmb-rail, .cmb-car { display: none; }
  .cmb-steps { position: relative; inset: auto; display: grid; }
  .cmb-step { position: relative; inset: auto; width: auto; height: auto; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; padding-block-end: 0; }
  .cmb-step:nth-child(1) { --mw: 72%; } .cmb-step:nth-child(2) { --mw: 82%; } .cmb-step:nth-child(3) { --mw: 92%; } .cmb-step:nth-child(4) { --mw: 100%; }
  .cmb-block { position: relative; inset: auto !important; grid-column: 2; width: var(--mw); margin-inline-start: auto; min-height: 150px; padding: 16px 16px 20px; }
  .cmb-step:not(:first-child) .cmb-block { margin-block-start: -1.5px; }
  .cmb-stop { display: contents; }
  .cmb-dot { position: absolute; inset-inline-start: 3px; top: 24px; z-index: 1; }
  .cmb-chip { position: absolute; inset-inline-end: 12px; top: 12px; z-index: 1; }
  .cmb-name { padding-inline-end: 0; }
  .cmb.is-js .cmb-stop { opacity: 1; scale: 1; }
  .cmb.is-js .cmb-chip, .cmb.is-js .cmb-dot { opacity: 0; transition: opacity .45s ease calc(.5s + var(--i) * 120ms); }
  .cmb.is-in .cmb-chip, .cmb.is-in .cmb-dot { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cmb .cmb-block, .cmb .cmb-block > *, .cmb .cmb-stop, .cmb .cmb-rail, .cmb .cmb-chip, .cmb .cmb-dot, .cmb-car { transition: none !important; }
}

/* ===== About page / Section 8: "Call the lift" CTA =====
   One full-width band, centred stack, one 16px rhythm between every item, 56px padding top and bottom, nothing under 14px.
   The band is Onyx in light mode and inverts through the tokens in dark mode. Without JS everything is already visible. */
.clt { --clt-gap: 16px; --clt-fg: var(--bg); --clt-soft: color-mix(in srgb, var(--bg) 80%, var(--ink)); --clt-line: color-mix(in srgb, var(--bg) 42%, transparent); position: relative; isolation: isolate; overflow: hidden; padding-block: 56px; background: var(--ink); color: var(--clt-fg); scroll-margin-top: var(--hh); }
.clt::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 52% at 50% 100%, color-mix(in srgb, var(--bg) 16%, transparent), transparent 72%); }
.clt ul { margin: 0; padding: 0; list-style: none; }
.clt-in { display: flex; flex-direction: column; align-items: center; gap: var(--clt-gap); text-align: center; }
.clt-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--clt-line); border-radius: 999px; font: 700 15px/1 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; color: var(--clt-fg); }
.clt-title { font: 400 clamp(32px, 4.2vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--clt-fg); text-wrap: balance; }
.clt-title span { display: block; text-wrap: balance; }
.clt-sub { max-width: 54ch; font: 400 17px/1.65 var(--f-body); color: var(--clt-soft); text-wrap: balance; }

.clt-cable { flex: none; width: 0; height: 44px; margin-block-end: calc(var(--clt-gap) * -1); border-inline-start: 1.5px dashed var(--clt-line); transform-origin: top; }
.clt-call { display: flex; flex-direction: column; align-items: center; gap: var(--clt-gap); color: var(--clt-fg); -webkit-tap-highlight-color: transparent; }
.clt-call:focus-visible { outline: 3px solid var(--clt-fg); outline-offset: 6px; border-radius: 18px; }
.clt-btn { position: relative; display: grid; place-items: center; width: 136px; height: 136px; }
.clt-btn::before { content: ''; position: absolute; inset-block: 0 auto; inset-inline-start: 50%; height: 24px; border-inline-start: 1.5px dashed var(--clt-line); transform-origin: top; }
.clt-ring { position: absolute; border: 1.5px dashed var(--clt-line); border-radius: 50%; pointer-events: none; }
.clt-ring--1 { inset: 12px; }
.clt-ring--2 { inset: 0; }
.clt-burst { position: absolute; inset: 24px; border: 2px solid var(--clt-fg); border-radius: 50%; opacity: 0; pointer-events: none; }
.clt-core { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--silver); background: var(--clt-fg); color: var(--ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 14%, transparent), 0 14px 30px -10px rgba(0, 0, 0, .55); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.clt-arrow { width: 28px; height: 24px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.clt-ding { position: absolute; z-index: 2; inset-block-start: 20px; inset-inline-end: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--clt-fg); box-shadow: 0 0 0 2px var(--ink); opacity: .55; }
.clt-label { font: 700 clamp(20px, 2.2vw, 24px)/1.2 var(--f-sub); color: var(--clt-fg); }
.clt-tel { min-height: 32px; display: inline-flex; align-items: center; font: 600 16px/1.2 var(--f-body); color: var(--clt-soft); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--clt-line); }
.clt-tel:hover, .clt-tel:focus-visible { color: var(--clt-fg); text-decoration-color: currentColor; }
.clt-tel:focus-visible { outline: 3px solid var(--clt-fg); outline-offset: 4px; border-radius: 6px; }
.clt-trust { display: flex; flex-wrap: wrap; justify-content: center; }
.clt-trust li { padding-inline: 32px; font: 500 16px/1.4 var(--f-body); color: var(--clt-soft); }
.clt-trust li + li { border-inline-start: 1.5px dashed var(--clt-line); }

/* idle: two rings pulse outward one after the other, like a lift call light waiting */
.clt-ring { animation: cltPulse 2.6s ease-out infinite; }
.clt-ring--2 { animation-delay: .65s; }
@keyframes cltPulse { 0% { transform: scale(.94); opacity: .9; } 70%, 100% { transform: scale(1.14); opacity: 0; } }

/* hover, press and keyboard focus: the button presses in, the arrow lifts, one ring bursts, the ding light blinks */
.clt-call:hover .clt-core, .clt-call:focus-visible .clt-core { transform: scale(.94); box-shadow: 0 0 0 7px color-mix(in srgb, var(--bg) 22%, transparent), 0 8px 20px -10px rgba(0, 0, 0, .6); }
.clt-call:active .clt-core { transform: scale(.88); }
.clt-call:hover .clt-arrow, .clt-call:focus-visible .clt-arrow { transform: translateY(-4px); }
.clt-call:hover .clt-burst, .clt-call:focus-visible .clt-burst { animation: cltBurst .8s ease-out; }
.clt-call:hover .clt-ding, .clt-call:focus-visible .clt-ding { animation: cltDing .9s steps(1, end) 2; opacity: 1; }
@keyframes cltBurst { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cltDing { 0%, 100% { opacity: 1; box-shadow: 0 0 0 2px var(--ink), 0 0 14px 4px var(--clt-fg); } 50% { opacity: .3; box-shadow: 0 0 0 2px var(--ink); } }

/* entrance (JS only): heading rises line by line, cable draws down, the button lights up */
.clt.is-js .clt-rise { opacity: 0; translate: 0 18px; }
.clt.is-js .clt-cable, .clt.is-js .clt-btn::before { transform: scaleY(0); }
.clt.is-js .clt-core { transform: scale(.82); box-shadow: 0 0 0 0 transparent, 0 14px 30px -10px rgba(0, 0, 0, .55); }
.clt.is-js .clt-label, .clt.is-js .clt-tel, .clt.is-js .clt-trust, .clt.is-js .clt-ring { opacity: 0; }
.clt.is-js .clt-ring { animation: none; }
.clt.is-in .clt-rise { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--n) * 130ms), translate .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * 130ms); }
.clt.is-in .clt-cable { transform: none; transition: transform .6s ease .55s; }
.clt.is-in .clt-btn::before { transform: none; transition: transform .35s ease 1.1s; }
.clt.is-in .clt-core { transform: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 14%, transparent), 0 14px 30px -10px rgba(0, 0, 0, .55); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) 1.2s, box-shadow .6s ease 1.2s; }
.clt.is-in .clt-label, .clt.is-in .clt-tel, .clt.is-in .clt-trust { opacity: 1; transition: opacity .6s ease 1.35s; }
.clt.is-in .clt-ring { opacity: 1; animation: cltPulse 2.6s ease-out 1.6s infinite; }
.clt.is-in .clt-ring--2 { animation-delay: 2.25s; }
.clt.is-in .clt-call:hover .clt-core, .clt.is-in .clt-call:focus-visible .clt-core { transform: scale(.94); transition-delay: 0s; transition-duration: .22s; }
.clt.is-in .clt-call:active .clt-core { transform: scale(.88); }

@media (max-width: 700px) {
  .clt-title { font-size: clamp(30px, 8.6vw, 36px); }
  .clt-sub { font-size: 16px; }
  .clt-trust { flex-direction: column; align-items: center; gap: var(--clt-gap); }
  .clt-trust li { padding-inline: 0; }
  .clt-trust li + li { border-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clt *, .clt *::before { animation: none !important; transition: none !important; }
  .clt.is-js .clt-rise, .clt.is-js .clt-label, .clt.is-js .clt-tel, .clt.is-js .clt-trust, .clt.is-js .clt-ring { opacity: 1; translate: none; }
  .clt.is-js .clt-ring { opacity: .6; }
  .clt.is-js .clt-cable, .clt.is-js .clt-btn::before { transform: none; }
  .clt.is-js .clt-core { transform: none; }
}

/* ===== Login page: photo + form (58 / 42) =====
   Both panels share one height, 16px gap, 24px panel padding, 56px padding top and bottom. Under 981px the photo sits on top.
   Old lift-shaft styles (.lg-*, .shaft, .doors) stay in this file because the sign up page still uses them. */
.lgn { position: relative; isolation: isolate; display: grid; align-content: center; min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); padding-block: 56px; background: var(--bg); }
.lgn ul { margin: 0; padding: 0; list-style: none; }
.lgn-main { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 16px; align-items: stretch; }

.lgn-photo { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-width: 0; min-height: 480px; padding: 24px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 26px; background: var(--onyx); color: var(--white); }
.lgn-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; animation: lgnZoom 1.8s cubic-bezier(.2, .7, .2, 1) backwards; }
.lgn-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(32, 33, 36, 0) 34%, rgba(32, 33, 36, .62) 62%, rgba(32, 33, 36, .94) 100%); }
.lgn-copy { display: grid; gap: 8px; }
.lgn-title { font: 400 clamp(30px, 3.2vw, 44px)/1.12 var(--f-head); letter-spacing: 0; color: var(--white); text-wrap: balance; }
.lgn-sub { font: 400 18px/1.5 var(--f-sub); color: rgba(250, 250, 248, .92); }
.lgn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lgn-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1.5px solid rgba(250, 250, 248, .55); border-radius: 999px; background: rgba(250, 250, 248, .14); font: 600 15px/1 var(--f-body); color: var(--white); }
.lgn-chips i { font-size: 14px; }

.lgn-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 24px; border: 1.5px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 24px 60px -34px var(--shadow-ink), 0 0 44px -10px var(--glow); animation: lgnRise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.lgn-head { display: grid; gap: 6px; }
.lgn-welcome { font: 400 clamp(28px, 2.6vw, 34px)/1.15 var(--f-head); letter-spacing: 0; color: var(--ink); }
.lgn-lead { font: 400 17px/1.5 var(--f-sub); color: var(--muted); }
.lgn-form { display: grid; gap: 14px; }
.lgn-role { min-width: 0; margin: 0; padding: 0; border: 0; }
.lgn-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lgn-tab { position: relative; display: block; }
.lgn-tab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lgn-tab span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font: 700 16px/1 var(--f-sub); color: var(--muted); transition: background .2s, border-color .2s, color .2s; }
.lgn-tab span i { font-size: 15px; }
.lgn-tab:hover span { border-color: var(--line-strong); color: var(--ink); }
.lgn-tab input:checked + span { border-color: var(--ink); background: var(--tint); color: var(--ink); box-shadow: 0 0 0 3px var(--glow); }
.lgn-tab input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.lgn-form .lg-submit { margin-block-start: 2px; }
.lgn-new { text-align: center; font: 400 16px/1.4 var(--f-body); color: var(--muted); }
.lgn-new a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lgn-new a:hover { text-decoration-thickness: 2px; }
@keyframes lgnZoom { from { transform: scale(1.08); } }
@keyframes lgnRise { from { opacity: 0; transform: translateY(16px); } }
.lgn-chips li { animation: lgnRise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.lgn-chips li:nth-child(1) { animation-delay: .35s; } .lgn-chips li:nth-child(2) { animation-delay: .45s; } .lgn-chips li:nth-child(3) { animation-delay: .55s; }

@media (max-width: 980px) {
  .lgn { min-height: 0; }
  .lgn-main { grid-template-columns: minmax(0, 1fr); }
  .lgn-photo { min-height: 340px; }
}
@media (max-width: 600px) {
  .lgn-photo { min-height: 220px; padding: 20px; gap: 0; }
  .lgn-sub, .lgn-chips { display: none; }
  .lgn-title { font-size: clamp(28px, 8vw, 32px); }
  .lgn-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lgn-photo img, .lgn-card, .lgn-chips li { animation: none; }
}


/* ===== PRODUCTS / SECTION 7 : CTA "READY TO RIDE" (inverse band: --ink as the stage, --bg as the type, so it flips with dark mode on its own) ===== */
.pcta { --pc-bg: var(--ink); --pc-fg: var(--bg); --pc-soft: color-mix(in srgb, var(--pc-fg) 84%, var(--pc-bg)); --pc-line: color-mix(in srgb, var(--pc-fg) 38%, var(--pc-bg)); --pc-dur: 9s; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vh, 88px); background: var(--pc-bg); color: var(--pc-fg); scroll-margin-top: var(--hh); }
.pcta::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 60% at 50% 0%, color-mix(in srgb, var(--pc-fg) 22%, transparent), transparent 72%), radial-gradient(ellipse 34% 46% at 4% 100%, color-mix(in srgb, var(--pc-fg) 14%, transparent), transparent 72%), radial-gradient(ellipse 34% 46% at 96% 100%, color-mix(in srgb, var(--pc-fg) 14%, transparent), transparent 72%); animation: pctaBreath 7s ease-in-out infinite; }
.pcta ul { margin: 0; padding: 0; list-style: none; }
.pcta-in { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vh, 20px); text-align: center; }
.pcta-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--pc-line); border-radius: 999px; font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-fg); box-shadow: 0 0 22px color-mix(in srgb, var(--pc-fg) 22%, transparent); }
.pcta-tag i { font-size: 15px; }
.pcta-title { max-width: 18ch; font: 400 clamp(34px, 4.6vw, 58px)/1.12 var(--f-head); letter-spacing: 0; color: var(--pc-fg); text-wrap: balance; }
.pcta-title .pcta-rise { display: inline-block; }
.pcta-lead { max-width: 60ch; font: 400 17px/1.65 var(--f-body); color: var(--pc-soft); text-wrap: pretty; }
.pcta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pcta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 1.5px solid var(--pc-fg); border-radius: 14px; font: 600 16px/1 var(--f-body); white-space: nowrap; cursor: pointer; transition: transform .2s, box-shadow .25s, background .2s, color .2s; }
.pcta-btn--main { background: var(--pc-fg); color: var(--pc-bg); animation: pctaRing 2.8s ease-in-out infinite; }
.pcta-btn--ghost { background: transparent; color: var(--pc-fg); border-color: var(--pc-line); }
.pcta-btn:hover { transform: translateY(-2px); }
.pcta-btn--main:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc-fg) 34%, transparent), 0 14px 30px -10px rgba(0, 0, 0, .5); }
.pcta-btn--ghost:hover { border-color: var(--pc-fg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc-fg) 24%, transparent); }
.pcta-btn .ar { transition: transform .25s; }
.pcta-btn:hover .ar { transform: translateX(4px); }
.pcta-btn:focus-visible { outline: 3px solid var(--pc-fg); outline-offset: 4px; }
.pcta-track { position: relative; width: min(100%, 940px); margin-top: clamp(4px, 1vh, 10px); padding-top: 34px; }
.pcta-rail { position: absolute; inset-inline: 0; top: 14px; height: 0; border-top: 2px dashed var(--pc-line); }
.pcta-rail::before { content: ''; position: absolute; inset-inline: 0; top: -2px; height: 2px; background: var(--pc-fg); box-shadow: 0 0 14px color-mix(in srgb, var(--pc-fg) 70%, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .5s; }
.pcta-car { position: absolute; top: 0; inset-inline-start: 16.666%; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: -15px; border-radius: 50%; background: var(--pc-fg); color: var(--pc-bg); font-size: 14px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc-fg) 28%, transparent), 0 0 22px color-mix(in srgb, var(--pc-fg) 60%, transparent); animation: pctaGlide var(--pc-dur) ease-in-out infinite; }
.pcta-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcta-point { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 16px; font: 600 16px/1.3 var(--f-body); color: var(--pc-soft); animation: pctaLight var(--pc-dur) ease-in-out infinite; }
.pcta-point + .pcta-point { border-inline-start: 1.5px solid var(--pc-line); }
.pcta-point i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--pc-line); border-radius: 50%; font-size: 14px; }
.pcta-point:nth-child(1) { animation-name: pctaLight1; }
.pcta-point:nth-child(2) { animation-name: pctaLight2; }
.pcta-point:nth-child(3) { animation-name: pctaLight3; }
.pcta-rise { transition: opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }
.pcta.is-js:not(.is-in) .pcta-rise { opacity: 0; transform: translateY(22px); }
.pcta.is-in .pcta-rail::before { transform: scaleX(1); }
@keyframes pctaGlide { 0%, 14% { inset-inline-start: 16.666%; } 28%, 42% { inset-inline-start: 50%; } 56%, 70% { inset-inline-start: 83.333%; } 84%, 100% { inset-inline-start: 16.666%; } }
@keyframes pctaLight1 { 0%, 24% { color: var(--pc-fg); } 30%, 100% { color: var(--pc-soft); } }
@keyframes pctaLight2 { 0%, 24% { color: var(--pc-soft); } 28%, 52% { color: var(--pc-fg); } 58%, 100% { color: var(--pc-soft); } }
@keyframes pctaLight3 { 0%, 52% { color: var(--pc-soft); } 56%, 80% { color: var(--pc-fg); } 86%, 100% { color: var(--pc-soft); } }
@keyframes pctaBreath { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes pctaRing { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-fg) 50%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
@media (max-width: 760px) {
  .pcta-title { max-width: 14ch; }
  .pcta-actions { width: 100%; flex-direction: column; }
  .pcta-btn { width: 100%; }
  .pcta-track { padding-top: 0; }
  .pcta-rail, .pcta-car { display: none; }
  .pcta-points { grid-template-columns: 1fr; }
  .pcta-point { justify-content: flex-start; min-height: 48px; padding: 0; animation: none; color: var(--pc-fg); }
  .pcta-point + .pcta-point { border-inline-start: 0; border-top: 1.5px solid var(--pc-line); }
}
@media (prefers-reduced-motion: reduce) {
  .pcta::before, .pcta-btn--main, .pcta-car, .pcta-point { animation: none; }
  .pcta-point { color: var(--pc-fg); }
  .pcta-rise, .pcta-rail::before { transition: none; }
}


/* ============================================================
   CONTACT / SECTION 3 : FIND US  (mp- namespace)
   Centred header, wide map band, four-part visit strip.
   Prata heading, Arimo subheaders, Inter body. All text is 15px or larger.
   ============================================================ */
.mp { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vh, 88px); background: var(--bg); color: var(--ink); border-top: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.mp::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 44% 36% at 50% 0%, color-mix(in srgb, var(--silver) 40%, transparent), transparent 72%), radial-gradient(ellipse 36% 40% at 100% 100%, color-mix(in srgb, var(--silver) 28%, transparent), transparent 72%), radial-gradient(ellipse 36% 40% at 0% 100%, color-mix(in srgb, var(--silver) 24%, transparent), transparent 72%); }
.mp ul { margin: 0; padding: 0; list-style: none; }
.mp-in { display: grid; gap: clamp(18px, 2.6vh, 28px); }
.mp-head { display: grid; justify-items: center; gap: clamp(12px, 1.8vh, 18px); text-align: center; }
.mp-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); box-shadow: 0 0 22px color-mix(in srgb, var(--silver) 80%, transparent); }
.mp-tag i { font-size: 15px; }
.mp-title { font: 400 clamp(32px, 4vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.mp-lead { max-width: 60ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); text-wrap: pretty; }

/* map band */
.mp-map { position: relative; height: clamp(320px, 50vh, 480px); overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--tint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--silver) 55%, transparent), 0 0 44px color-mix(in srgb, var(--silver) 95%, transparent), 0 26px 50px -30px var(--shadow-ink); }
.mp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.04); }
.mp-pulse { position: absolute; inset-inline-start: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; transition: opacity .3s; }
.mp-pulse span { position: absolute; inset-inline-start: -46px; top: -46px; width: 92px; height: 92px; border: 2.5px solid var(--ink); border-radius: 50%; opacity: 0; animation: mpPing 3s cubic-bezier(.2, .6, .3, 1) infinite; }
.mp-pulse span:nth-child(2) { animation-delay: 1s; }
.mp-pulse span:nth-child(3) { animation-delay: 2s; }
.mp-shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 clamp(36px, 7vh, 52px); border: 0; background: transparent; cursor: pointer; }
.mp-hint { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px; border: 1.5px solid rgba(174, 181, 188, .85); border-radius: 999px; background: var(--onyx); color: var(--white); font: 600 15px/1 var(--f-body); box-shadow: 0 0 24px rgba(174, 181, 188, .55); transition: transform .25s, opacity .3s; }
.mp-hint i { font-size: 15px; }
.mp-shield:hover .mp-hint { transform: translateY(-3px); }
.mp-shield:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.mp-map.is-live .mp-shield { pointer-events: none; }
.mp-map.is-live .mp-hint, .mp-map.is-live .mp-pulse { opacity: 0; }

/* visit strip */
.mp-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1.5px solid var(--line-strong); }
.mp-item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: clamp(16px, 2.4vh, 22px) clamp(14px, 1.6vw, 22px); }
.mp-item + .mp-item { border-inline-start: 1.5px solid var(--line); }
.mp-item:first-child { padding-inline-start: 0; }
.mp-item:last-child { padding-inline-end: 0; }
.mp-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); font-size: 17px; color: var(--ink); box-shadow: 0 0 16px color-mix(in srgb, var(--silver) 80%, transparent); transition: background .25s, color .25s, transform .25s; }
.mp-item:hover .mp-ic { background: var(--ink); color: var(--bg); transform: scale(1.06); }
.mp-tx { display: grid; gap: 6px; min-width: 0; }
.mp-tx h3 { font: 700 18px/1.25 var(--f-sub); color: var(--ink); }
.mp-tx p { font: 400 16px/1.55 var(--f-body); color: var(--muted); overflow-wrap: anywhere; }
.mp-status { display: inline-flex; align-items: flex-start; gap: 10px; font: 600 15px/1.35 var(--f-body) !important; color: var(--ink) !important; }
.mp-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--silver) 90%, transparent); animation: mpBlink 2s ease-in-out infinite; }
.mp-status.is-closed .mp-dot { background: transparent; border: 2px solid var(--ink); animation: none; }
.mp-item--go { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
.mp-go { width: 100%; }
.mp-go i { font-size: 15px; }
.mp-ask { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; font: 600 16px/1.2 var(--f-body); color: var(--ink); }
.mp-ask:hover { text-decoration: underline; text-underline-offset: 4px; }
.mp-ask:hover .ar { transform: translateX(4px); }
.mp-ask .ar { font-size: 14px; transition: transform .2s; }
.mp-ask:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* entrance */
.mp-rise { transition: opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms), clip-path .9s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }
.mp.is-js:not(.is-in) .mp-rise { opacity: 0; transform: translateY(24px); }
.mp.is-js:not(.is-in) .mp-map { clip-path: inset(0 0 100% 0 round 20px); }
.mp.is-in .mp-map { clip-path: inset(0 0 0 0 round 20px); }

@keyframes mpPing { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes mpBlink { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--silver) 90%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 1020px) {
  .mp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-item:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .mp-item:nth-child(2) { padding-inline-end: 0; }
  .mp-item:nth-child(n+3) { border-top: 1.5px solid var(--line); }
  .mp-item:nth-child(4) { padding-inline-end: 0; }
}
@media (max-width: 620px) {
  .mp-map { height: 320px; }
  .mp-info { grid-template-columns: minmax(0, 1fr); }
  .mp-item, .mp-item:nth-child(2), .mp-item:nth-child(4) { padding-inline: 0; }
  .mp-item + .mp-item { border-inline-start: 0; border-top: 1.5px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-pulse span, .mp-dot { animation: none; }
  .mp-pulse span:first-child { opacity: .6; transform: scale(.6); }
  .mp-rise { transition: none; }
}

/* Home 2 section 4: keep the dashboard detail icons visible in dark mode. */
html:not([data-theme="light"]) body[data-page="home-2"] .client4-info-icon{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(174,181,188,.38);border-radius:10px;background:rgba(255,255,255,.08);color:#d9dfe3;font-size:15px;}
html:not([data-theme="light"]) body[data-page="home-2"] .client4-info h4{margin-right:40px;}
@media(max-width:600px){html:not([data-theme="light"]) body[data-page="home-2"] .client4-info-icon{top:14px;right:13px;width:30px;height:30px;}}

/* Home 2 section 4: ensure progress and account icons keep clear contrast in both themes. */
html:not([data-theme="light"]) body[data-page="home-2"] .client4-step-dot i{color:#202124;}
html[data-theme="light"] body[data-page="home-2"] .client4-info-icon{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #d8dadd;border-radius:10px;background:#f3f4f5;color:#43494e;font-size:15px;}
html[data-theme="light"] body[data-page="home-2"] .client4-info h4{margin-right:40px;}
@media(max-width:600px){html[data-theme="light"] body[data-page="home-2"] .client4-info-icon{top:14px;right:13px;width:30px;height:30px;}}

/* Dark mode: keep the unfinished Done flag bright against its dark step circle. */

/* About page promise section: remove decorative horizontal rules in either theme. */
.pd-eyebrow::before{display:none;}
@media(min-width:1200px){
  .pd-fill--a,.pd-fill--b{background-image:none!important;}
  .pd-step::before,.pd-step.is-past::before,.pd-step.is-on::before{border-top:0!important;}
}


/* ======================================================================
   CONTACT PAGE / SECTION 4 : THE ASCENT (pinned scroll)
   The stage pins; scroll progress (--cl-pos, 0 to N-1) rides a lift car up a four-floor building.
   Each floor lights up as the car arrives. Fonts: Prata (heading), Arimo (sub), Inter (body). Minimum text size 14px.
   Without JS, with reduced motion, or on very short screens it becomes a plain list (no pin).
   ====================================================================== */
.cl { --cl-n: 4; --cl-pos: 0; --cl-open: 1; --cl-prog: 0; --cl-shaft: clamp(76px, 9vw, 108px); --cl-pad: clamp(20px, 4.5vh, 44px); --cl-off: var(--tint); --cl-on: var(--surface); position: relative; background: var(--bg); color: var(--ink); border-top: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.cl-track { position: relative; }
.cl--pin .cl-track { height: calc((100vh - var(--hh)) + (var(--cl-n) - 1) * 80vh); height: calc((100svh - var(--hh)) + (var(--cl-n) - 1) * 80svh); }
.cl-stage { position: relative; isolation: isolate; display: flex; align-items: stretch; padding-block: var(--cl-pad); }
.cl--pin .cl-stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); }
.cl-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 0% 0%, color-mix(in srgb, var(--silver) 38%, transparent), transparent 72%), radial-gradient(ellipse 40% 50% at 100% 100%, color-mix(in srgb, var(--silver) 30%, transparent), transparent 72%); }
.cl-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: stretch; width: min(100% - 48px, 1240px); margin-inline: auto; min-height: 0; }

/* copy column */
.cl-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(12px, 2.2vh, 22px); min-width: 0; }
.cl-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); box-shadow: 0 0 22px color-mix(in srgb, var(--silver) 80%, transparent); }
.cl-tag i { font-size: 15px; }
.cl-title { font: 400 clamp(30px, min(4vw, 6vh), 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.cl-lead { max-width: 46ch; font: 400 clamp(16px, 2.1vh, 17px)/1.65 var(--f-body); color: var(--muted); text-wrap: pretty; }
.cl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cl-call { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 16px/1.2 var(--f-body); color: var(--ink); }
.cl-call i { font-size: 15px; }
.cl-call:hover { text-decoration: underline; text-underline-offset: 4px; }

/* floor indicator panel (the lift's own display) */
.cl-panel { --cl-num-h: 52px; --cl-name-h: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num name" "bar bar"; align-items: center; gap: 12px 20px; width: min(100%, 460px); padding: 14px 20px 16px; border-radius: 20px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 4px var(--glow), 0 18px 38px -20px var(--shadow-ink); }
.cl-num { grid-area: num; display: flex; align-items: center; gap: 12px; }
.cl-roll { display: block; overflow: hidden; }
.cl-roll-in { display: block; will-change: transform; }
.cl-roll-in b { display: block; font-weight: 400; white-space: nowrap; }
.cl-roll--num { height: var(--cl-num-h); }
.cl-roll--num b { height: var(--cl-num-h); line-height: var(--cl-num-h); font: 400 44px/var(--cl-num-h) var(--f-head); color: var(--bg); }
.cl-roll--num .cl-roll-in { transform: translateY(calc(var(--cl-cur, 0) * var(--cl-num-h) * -1)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cl-roll--name { grid-area: name; height: var(--cl-name-h); }
.cl-roll--name b { height: var(--cl-name-h); font: 700 clamp(18px, 2.3vh, 21px)/var(--cl-name-h) var(--f-sub); color: var(--bg); overflow: hidden; text-overflow: ellipsis; }
.cl-roll--name .cl-roll-in { transform: translateY(calc(var(--cl-cur, 0) * var(--cl-name-h) * -1)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cl-meta { display: grid; justify-items: start; gap: 2px; }
.cl-lbl { font: 600 14px/1 var(--f-sub); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 82%, var(--ink)); }
.cl-arrow { font-size: 16px; color: var(--bg); opacity: .45; }
.cl.is-moving .cl-arrow { opacity: 1; animation: clArrow .7s ease-in-out infinite; }
.cl-bar { grid-area: bar; position: relative; display: flex; align-items: center; justify-content: space-between; height: 14px; }
.cl-bar::before, .cl-bar-fill { content: ''; position: absolute; inset-inline-start: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.cl-bar::before { inset-inline-end: 6px; background: color-mix(in srgb, var(--bg) 32%, transparent); }
.cl-bar-fill { width: calc((100% - 12px) * var(--cl-prog)); background: var(--bg); }
.cl-dot { position: relative; z-index: 1; width: 14px; height: 14px; border: 2px solid var(--bg); border-radius: 50%; background: var(--ink); transition: background .3s; }
.cl-dot.is-on { background: var(--bg); }
@keyframes clArrow { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }

/* building */
.cl-building { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 26px; background: var(--cl-off); box-shadow: 0 0 0 5px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 44px color-mix(in srgb, var(--silver) 75%, transparent), 0 26px 50px -30px var(--shadow-ink); }
.cl-floors { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(var(--cl-n), minmax(0, 1fr)); min-height: 0; }
.cl-floor { order: calc(var(--i) * -1); position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.6vw, 20px); min-height: 0; padding-block: clamp(8px, 1.4vh, 14px); padding-inline: calc(var(--cl-shaft) + clamp(14px, 2vw, 26px)) clamp(14px, 2vw, 26px); }
.cl-floor:not(:last-child) { border-block-start: 1.5px solid var(--line-strong); }
.cl-floor::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 140% at 0% 50%, color-mix(in srgb, var(--silver) 50%, transparent), transparent 72%), var(--cl-on); transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cl-floor.is-on::before { transform: scaleX(1); }
.cl-lamp { position: absolute; z-index: 3; inset-inline-start: calc(var(--cl-shaft) - 7px); top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); transition: background .3s, box-shadow .3s; }
.cl-floor.is-on .cl-lamp { background: var(--silver); }
.cl-floor.is-here .cl-lamp { background: var(--ink); border-color: var(--ink); animation: clLamp 1.8s ease-in-out infinite; }
@keyframes clLamp { 0%, 100% { box-shadow: 0 0 0 3px var(--glow); } 50% { box-shadow: 0 0 0 8px transparent; } }
.cl-no { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); font: 700 16px/1 var(--f-sub); color: var(--ink); transition: background .3s, color .3s, box-shadow .3s; }
.cl-floor.is-on .cl-no { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: 0 0 0 4px var(--glow); }
.cl-ft { display: grid; gap: 4px; min-width: 0; }
.cl-ft-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cl-ft h3 { font: 700 clamp(18px, 2.6vh, 24px)/1.25 var(--f-sub); color: var(--ink); }
.cl-ft p { font: 400 clamp(15px, 2vh, 18px)/1.5 var(--f-body); color: var(--muted); text-wrap: pretty; }
.cl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; border: 1.5px dashed var(--line-strong); border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--ink); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.cl-chip i { font-size: 13px; }
.cl-floor.is-on .cl-chip { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* shaft + car */
.cl-shaft { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; width: var(--cl-shaft); border-inline-end: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--ink) 7%, transparent); pointer-events: none; }
.cl-shaft::before, .cl-shaft::after { content: ''; position: absolute; inset-block: 0; width: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.cl-shaft::before { inset-inline-start: 5px; }
.cl-shaft::after { inset-inline-end: 5px; }
.cl-pulley { position: absolute; inset-inline-start: 50%; top: 6px; width: 16px; height: 16px; margin-inline-start: -8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--surface); z-index: 1; }
.cl-cable { position: absolute; inset-inline-start: 50%; top: 0; width: 2px; margin-inline-start: -1px; height: calc(100% * (1 - (1 + var(--cl-pos)) / var(--cl-n)) + 8px); background: var(--ink); }
.cl-car { --cl-gap: 8px; position: absolute; z-index: 2; inset-inline: 10px; bottom: var(--cl-gap); height: calc(100% / var(--cl-n) - var(--cl-gap) * 2); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 2px solid var(--ink); border-radius: 12px 12px 8px 8px; background: var(--ink); box-shadow: 0 0 0 4px var(--glow), 0 12px 24px -10px var(--shadow-ink); transform: translateY(calc(var(--cl-pos) * -1 * (100% + var(--cl-gap) * 2))); will-change: transform; }
.cl-car-top { display: grid; place-items: center; height: 22px; font: 700 14px/1 var(--f-sub); color: var(--bg); background: var(--ink); }
.cl-cab { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--surface); color: var(--ink); font-size: clamp(16px, 2.6vh, 24px); }
.cl-door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--ink); }
.cl-door--l { left: 0; border-right: 1.5px solid var(--silver); transform: translateX(calc(var(--cl-open) * -92%)); }
.cl-door--r { right: 0; border-left: 1.5px solid var(--silver); transform: translateX(calc(var(--cl-open) * 92%)); }

/* entrance */
.cl-rise { transition: opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }
.cl.is-js:not(.is-in) .cl-rise { opacity: 0; transform: translateY(24px); }

/* plain list: no JS, reduced motion or a very short screen (no pin, every floor lit, top-down order) */
.cl:not(.cl--pin) .cl-grid { align-items: center; }
.cl:not(.cl--pin) .cl-floors { grid-template-rows: none; grid-auto-rows: minmax(120px, auto); }
.cl:not(.cl--pin) .cl-floor { order: 0; padding-inline-start: clamp(14px, 2vw, 26px); }
.cl:not(.cl--pin) .cl-floor::before { transform: scaleX(1); }
.cl:not(.cl--pin) .cl-shaft, .cl:not(.cl--pin) .cl-lamp, .cl:not(.cl--pin) .cl-panel { display: none; }
.cl:not(.cl--pin) .cl-no { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cl:not(.cl--pin) .cl-chip { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* short laptops */
@media (max-height: 640px) and (min-width: 901px) {
  .cl-lead { display: none; }
}

/* tablet and phone: one column, copy on top, building fills the rest of the pinned screen */
@media (max-width: 900px) {
  .cl { --cl-shaft: 72px; }
  .cl-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; width: min(100% - 32px, 1240px); }
  .cl-copy { gap: 12px; }
  .cl-title { font-size: clamp(28px, 6vw, 40px); }
  .cl-panel { width: 100%; max-width: 520px; }
  .cl:not(.cl--pin) .cl-grid { grid-template-rows: none; }
  .cl:not(.cl--pin) .cl-floors { grid-auto-rows: minmax(104px, auto); }
}
/* compact: heading, tag, floor number and button on top, floors below */
@media (max-width: 900px) and (max-height: 899px) {
  .cl { --cl-shaft: 60px; --cl-pad: clamp(16px, 3vh, 24px); }
  .cl-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag panel" "title title" "ctas ctas"; align-items: center; gap: 10px 12px; }
  .cl-tag { grid-area: tag; justify-self: start; min-height: 34px; padding: 0 14px; font-size: 14px; }
  .cl-tag i { font-size: 14px; }
  .cl-title { grid-area: title; font-size: clamp(25px, 6.6vw, 34px); }
  .cl-lead { display: none; }
  .cl-panel { --cl-num-h: 36px; grid-area: panel; grid-template-columns: auto; grid-template-areas: "num"; width: auto; padding: 4px 14px; border-radius: 14px; }
  .cl-roll--num b { font-size: 28px; }
  .cl-roll--name, .cl-bar, .cl-lbl { display: none; }
  .cl-ctas { grid-area: ctas; }
  .cl-call, .cl-chip, .cl-no { display: none; }
  .cl-ctas .btn { min-height: 44px; }
  .cl-floor { grid-template-columns: minmax(0, 1fr); padding-block: 8px; padding-inline: calc(var(--cl-shaft) + 14px) 14px; }
  .cl:not(.cl--pin) .cl-floor { padding-inline-start: 14px; }
  .cl-ft h3 { font-size: clamp(17px, 2.3vh, 20px); }
  .cl-ft p { font-size: clamp(14px, 1.9vh, 16px); line-height: 1.4; }
  .cl-car { --cl-gap: 6px; inset-inline: 7px; }
  .cl-car-top { height: 20px; }
}
@media (max-width: 900px) and (max-height: 699px) {
  .cl-ctas { display: none; }
}
@media (max-width: 400px) {
  .cl-floor { padding-inline-end: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-rise { transition: none; }
  .cl.is-moving .cl-arrow, .cl-floor.is-here .cl-lamp { animation: none; }
}


/* ======================================================================
   CONTACT PAGE / SECTION 5 : DOOR PANELS (quick answers)
   Five lift doors in a row. The open door takes the space (flex-grow animates) and its content slides open from the centre seam.
   Prata heading, Arimo sub, Inter body. Minimum text size 14px. Phones: the doors stack as an accordion.
   ====================================================================== */
.fq { --fq-rail: 88px; --fq-h: clamp(340px, 50vh, 430px); position: relative; isolation: isolate; padding-block: clamp(56px, 8vh, 88px); background: var(--bg); color: var(--ink); border-top: 1.5px solid var(--line); scroll-margin-top: var(--hh); }
.fq::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 44% 40% at 0% 0%, color-mix(in srgb, var(--silver) 38%, transparent), transparent 72%), radial-gradient(ellipse 44% 40% at 100% 100%, color-mix(in srgb, var(--silver) 30%, transparent), transparent 72%); }
.fq ul, .fq li { margin: 0; padding: 0; list-style: none; }
.fq-in { display: grid; gap: clamp(20px, 3vh, 32px); }
.fq-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 4vw, 56px); align-items: end; }
.fq-head-l { display: grid; justify-items: start; gap: clamp(12px, 1.8vh, 18px); }
.fq-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); box-shadow: 0 0 22px color-mix(in srgb, var(--silver) 80%, transparent); }
.fq-tag i { font-size: 15px; }
.fq-title { font: 400 clamp(32px, 4vw, 52px)/1.12 var(--f-head); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.fq-lead { max-width: 52ch; font: 400 17px/1.65 var(--f-body); color: var(--muted); text-wrap: pretty; }

.fq-list { display: flex; gap: 12px; height: var(--fq-h); }
.fq-item { position: relative; display: grid; grid-template-columns: var(--fq-rail) minmax(0, 1fr); flex: 0 0 var(--fq-rail); min-width: 0; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 22px; background: var(--surface); box-shadow: 0 0 26px -6px color-mix(in srgb, var(--silver) 90%, transparent); transition: flex-grow .75s cubic-bezier(.65, 0, .25, 1), box-shadow .4s; }
.fq-item.is-open { flex-grow: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--silver) 40%, transparent), 0 0 44px color-mix(in srgb, var(--silver) 75%, transparent), 0 24px 46px -30px var(--shadow-ink); }
.fq-h { display: contents; margin: 0; }
.fq-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; width: var(--fq-rail); height: 100%; padding: 18px 0; border: 0; border-inline-end: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: background .4s, color .4s; }
.fq-btn:hover { background: var(--tint); }
.fq-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.fq-no { font: 700 16px/1 var(--f-sub); letter-spacing: .06em; }
.fq-rail { flex: 1; display: grid; place-items: center; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 18px/1.2 var(--f-sub); letter-spacing: .04em; white-space: nowrap; }
.fq-ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--tint); font-size: 17px; transition: background .4s, color .4s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.fq-item.is-open .fq-btn { background: var(--ink); color: var(--bg); }
.fq-item.is-open .fq-ic { background: var(--bg); color: var(--ink); border-color: var(--bg); transform: rotate(360deg); }

/* the door: content slides open from the centre seam */
.fq-panel { position: relative; min-width: 0; }
.fq-panel-in { position: absolute; inset-block: 0; inset-inline-start: 0; width: max(100%, 440px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.8vh, 16px); padding: clamp(20px, 3vh, 32px) clamp(22px, 3vw, 40px); clip-path: inset(0 50% 0 50%); opacity: 0; visibility: hidden; transition: clip-path .6s cubic-bezier(.65, 0, .25, 1), opacity .3s, visibility 0s .6s; }
.fq-panel-in::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 90% at 0% 50%, color-mix(in srgb, var(--silver) 40%, transparent), transparent 74%), var(--surface); }
.fq-item.is-open .fq-panel-in { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path .7s cubic-bezier(.65, 0, .25, 1) .2s, opacity .3s .2s, visibility 0s; }
.fq-q { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--f-sub); color: var(--ink); text-wrap: balance; }
.fq-a { max-width: 52ch; font: 400 clamp(16px, 1.5vw, 18px)/1.65 var(--f-body); color: var(--muted); text-wrap: pretty; }
.fq-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.fq-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--tint); font: 600 14px/1 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.fq-facts i { font-size: 14px; }
.fq-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 16px/1.2 var(--f-body); color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.fq-link:hover { text-decoration-color: var(--ink); }
.fq-link:hover .ar { transform: translateX(4px); }
.fq-link .ar { font-size: 14px; transition: transform .2s; }
.fq-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.fq-item.is-open .fq-panel-in > * { animation: fqIn .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.fq-item.is-open .fq-panel-in > :nth-child(1) { animation-delay: .45s; }
.fq-item.is-open .fq-panel-in > :nth-child(2) { animation-delay: .52s; }
.fq-item.is-open .fq-panel-in > :nth-child(3) { animation-delay: .59s; }
.fq-item.is-open .fq-panel-in > :nth-child(4) { animation-delay: .66s; }
@keyframes fqIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* entrance */
.fq-rise, .fq-item { transition-property: opacity, transform, flex-grow, box-shadow; }
.fq-rise { transition: opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }
.fq.is-js:not(.is-in) .fq-rise, .fq.is-js:not(.is-in) .fq-item { opacity: 0; transform: translateY(26px); }
.fq.is-js .fq-item { transition: flex-grow .75s cubic-bezier(.65, 0, .25, 1), box-shadow .4s, opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }

@media (max-width: 1020px) {
  .fq-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fq { --fq-rail: 76px; }
}

/* FAQ doors stack on tablets and phones to preserve answer width */
@media (max-width: 900px) {
  .fq-in { width: min(100% - 32px, 1240px); }
  .fq-list { flex-direction: column; height: auto; gap: 10px; }
  .fq-item { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px 0fr; transition: grid-template-rows .6s cubic-bezier(.65, 0, .25, 1), box-shadow .4s; }
  .fq-item.is-open { grid-template-rows: 64px 1fr; }
  .fq.is-js .fq-item { transition: grid-template-rows .6s cubic-bezier(.65, 0, .25, 1), box-shadow .4s, opacity .7s ease calc(var(--n, 0) * 90ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 90ms); }
  .fq-btn { flex-direction: row; width: 100%; height: 64px; padding: 0 14px 0 18px; gap: 14px; border-inline-end: 0; }
  .fq-rail { flex: 1; writing-mode: horizontal-tb; transform: none; place-items: center start; font-size: 18px; white-space: normal; }
  .fq-ic { order: 3; width: 38px; height: 38px; font-size: 15px; }
  .fq-panel { overflow: hidden; min-height: 0; }
  .fq-panel-in { position: relative; width: auto; clip-path: none; padding: 20px 18px 22px; border-block-start: 1.5px solid var(--line-strong); }
  .fq-item.is-open .fq-panel-in { clip-path: none; }
  .fq-q { font-size: 21px; }
  .fq-a { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-item, .fq-panel-in, .fq-ic, .fq-rise { transition: none !important; }
  .fq-item.is-open .fq-panel-in > * { animation: none; }
}

/* CONTACT PAGE / SECTION 6: CALL THE LIFT */
.go { --go-soft: color-mix(in srgb, var(--bg) 72%, var(--ink)); position: relative; isolation: isolate; padding-block: clamp(56px, 8vh, 88px); overflow: hidden; background: var(--ink); color: var(--bg); }
.go::before { content: ''; position: absolute; inset: -60px 0; z-index: -1; pointer-events: none; background: none; }
.go::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 60% at 80% 50%, color-mix(in srgb, var(--silver) 30%, transparent), transparent 70%); }
.go-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.go-copy { display: grid; justify-items: start; gap: clamp(14px, 2.2vh, 22px); }
.go-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--go-soft); border-radius: 999px; font: 700 15px/1 var(--f-sub); letter-spacing: .1em; text-transform: uppercase; color: var(--bg); }
.go-title { font: 400 clamp(34px, 4.6vw, 60px)/1.1 var(--f-head); color: var(--bg); text-wrap: balance; }
.go-lead { max-width: 50ch; font: 400 17px/1.65 var(--f-body); color: var(--go-soft); text-wrap: pretty; }
.go-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.go-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 1.5px solid var(--bg); border-radius: 14px; font: 600 16px/1 var(--f-body); white-space: nowrap; transition: transform .2s, box-shadow .25s, background .2s, color .2s; }
.go-btn:hover { transform: translateY(-2px); }
.go-btn--p { background: var(--bg); color: var(--ink); animation: goBtn 3s ease-in-out infinite; }
.go-btn--o { background: transparent; color: var(--bg); }
.go-btn--o:hover { background: var(--bg); color: var(--ink); }
.go-btn .ar { transition: transform .2s; }
.go-btn:hover .ar { transform: translateX(4px); }
.go-btn:focus-visible, .go-call:focus-visible, .go-ways a:focus-visible { outline: 3px solid var(--bg); outline-offset: 4px; }
@keyframes goBtn { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bg) 45%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
.go-panel { display: grid; justify-items: center; gap: clamp(12px, 2vh, 18px); padding: clamp(18px, 2.6vh, 26px) clamp(18px, 2.4vw, 28px) clamp(20px, 3vh, 28px); border: 1.5px solid var(--go-soft); border-radius: 28px; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg) 14%, transparent), 0 30px 60px -30px rgba(0,0,0,.6); }
.go-disp { width: 100%; overflow: hidden; border-radius: 12px; background: var(--ink); color: var(--bg); direction: ltr; }
.go-ticker { display: flex; width: max-content; animation: goTick 16s linear infinite; }
.go-ticker span { flex: none; padding: 12px 0; font: 600 15px/1.2 var(--f-sub); letter-spacing: .08em; text-transform: uppercase; white-space: pre; }
@keyframes goTick { to { transform: translateX(-50%); } }
.go-call { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.go-ring { position: absolute; inset: 0; border: 2px solid color-mix(in srgb, var(--ink) 48%, transparent); border-radius: 50%; animation: goRing 2.4s ease-out infinite; }
.go-ring--2 { animation-delay: .8s; }
.go-ring--3 { animation-delay: 1.6s; }
@keyframes goRing { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.12); opacity: 0; } }
.go-core { position: relative; display: grid; place-items: center; width: 100px; height: 100px; border: 4px solid var(--ink); border-radius: 50%; background: var(--bg); font-size: 30px; }
.go-core i { animation: goNudge 1.5s ease-in-out infinite; }
@keyframes goNudge { 50% { transform: translateY(-4px); } }
.go-cap { font: 700 18px/1.25 var(--f-sub); color: var(--ink); text-align: center; }
.go-ways { display: grid; gap: 4px; width: 100%; padding-top: 10px; border-top: 1.5px solid var(--line-strong); }
.go-ways a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; font: 500 16px/1.3 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.go-ways a:hover { text-decoration: underline; text-underline-offset: 4px; }
.go-rise { transition: opacity .7s ease calc(var(--n, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 110ms); }
.go.is-js:not(.is-in) .go-rise { opacity: 0; transform: translateY(26px); }
@media (max-width: 900px) { .go-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } .go-panel { width: min(100%, 460px); justify-self: start; } }
@media (max-width: 620px) { .go-in { width: min(100% - 32px, 1240px); } .go-btn { flex: 1 1 100%; } .go-panel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .go-ticker, .go-ring, .go-core i, .go-btn--p { animation: none !important; } .go-rise { transition: none; } }

/* LOGIN PAGE: animated client lift lobby */
.lgx { --lgx-fh: clamp(88px, 12.5vh, 112px); position: relative; isolation: isolate; display: grid; align-content: center; min-height: calc(100svh - var(--hh)); padding-block: clamp(24px, 4.5vh, 48px); background: var(--bg); color: var(--ink); overflow: hidden; }
.lgx::before { content: ''; position: absolute; inset: -48px 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--silver) 18%, transparent) 1px, transparent 1.5px); background-size: 56px 56px; opacity: .18; animation: lgxDrift 7s linear infinite; }
.lgx::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 100% 0%, color-mix(in srgb, var(--silver) 14%, transparent), transparent 72%), radial-gradient(ellipse 40% 50% at 0% 100%, color-mix(in srgb, var(--silver) 12%, transparent), transparent 72%); opacity: .24; }
@keyframes lgxDrift { to { transform: translateY(-44px); } }
.lgx ol, .lgx ul, .lgx li, .lgx h2, .lgx p { margin: 0; padding: 0; list-style: none; }
.lgx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lgx-copy { display: grid; justify-items: start; gap: clamp(14px, 2vh, 20px); min-width: 0; }
.lgx-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 700 15px/1 var(--f-sub); letter-spacing: .06em; }
.lgx-title { max-width: 11ch; font: 400 clamp(38px, min(5vw, 7vh), 66px)/1.08 var(--f-head); color: var(--ink); text-wrap: balance; }
.lgx-sub { max-width: 42ch; font: 400 18px/1.6 var(--f-sub); color: var(--muted); }
.lgx-shaft { --p: 0; position: relative; width: min(100%, 500px); margin-block-start: 8px; }
.lgx-floors { display: flex; flex-direction: column-reverse; }
.lgx-floor { position: relative; display: flex; align-items: center; height: clamp(78px, 10vh, 94px); padding-inline-start: 76px; border-block-start: 1.5px solid var(--line); }
.lgx-floor h2 { font: 700 19px/1.25 var(--f-sub); }
.lgx-floor p { font: 400 15px/1.5 var(--f-body); color: var(--muted); }
.lgx-fno { position: absolute; inset-inline-start: 38px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); font: 700 15px/1 var(--f-sub); }
.lgx-floor.is-done .lgx-fno { background: var(--ink); color: var(--bg); }
.lgx-rail { position: absolute; inset-inline-start: 36px; top: 47px; bottom: 47px; width: 4px; background: var(--line); }
.lgx-car { position: absolute; z-index: 2; inset-inline-start: 38px; bottom: 24px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 20px; transform: translateY(calc(var(--p) * -170px)); transition: transform 1.1s cubic-bezier(.65,0,.35,1); animation: lgxBob 3s ease-in-out infinite; }
@keyframes lgxBob { 50% { translate: 0 -5px; } }
.lgx-card { position: relative; isolation: isolate; display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: clamp(22px,3vh,30px); border: 1.5px solid var(--line-strong); border-radius: 24px; background: var(--surface); box-shadow: 0 20px 50px -32px var(--shadow-ink), 0 0 0 1px color-mix(in srgb,var(--line-strong) 28%,transparent); }
.lgx-disp { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 700 15px/1 var(--f-sub); }
.lgx-head { display: grid; gap: 4px; }
.lgx-welcome { font: 400 clamp(30px,3vw,38px)/1.15 var(--f-head); }
.lgx-lead { font: 400 17px/1.5 var(--f-sub); color: var(--muted); }
.lgx-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.lgx-step { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 0 4px; border: 1.5px solid var(--line); border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--muted); white-space: nowrap; }
.lgx-step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); font: 700 14px/1 var(--f-sub); }
.lgx-step.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lgx-form { display: grid; gap: 14px; }
.lgx-new { text-align: center; font: 400 15px/1.4 var(--f-body); color: var(--muted); }
.lgx-new a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.lgx-door { position: absolute; z-index: 5; top: 0; bottom: 0; width: 50.5%; pointer-events: none; background: linear-gradient(100deg,var(--ink),color-mix(in srgb,var(--ink) 88%,var(--silver))); transition: transform .9s cubic-bezier(.65,0,.35,1); }
.lgx-door--a { inset-inline-start: 0; transform: translateX(-101%); animation: lgxOpenA 1.1s .25s backwards; }
.lgx-door--b { inset-inline-end: 0; transform: translateX(101%); animation: lgxOpenB 1.1s .25s backwards; }
.lgx-card.is-closed .lgx-door { transform: none; }
@keyframes lgxOpenA { from { transform: translateX(0); } }
@keyframes lgxOpenB { from { transform: translateX(0); } }
.lgx-rise { animation: lgxRise .75s cubic-bezier(.2,.7,.2,1) calc(var(--n,0) * 110ms) backwards; }
@keyframes lgxRise { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 900px) { .lgx { align-content: start; } .lgx-in { grid-template-columns: minmax(0,1fr); gap: 24px; width: min(100% - 32px,1240px); } .lgx-copy { width: min(100%,620px); margin-inline: auto; } .lgx-title { max-width: 16ch; } .lgx-shaft { width: 100%; } .lgx-card { width: min(100%,520px); justify-self: center; } }
@media (max-width: 600px) { .lgx { padding-block: 24px; } .lgx-in { gap: 20px; width: min(100% - 32px,520px); } .lgx-shaft { display: none; } .lgx-card { gap: 14px; padding: 20px 18px; } }
@media (prefers-reduced-motion: reduce) { .lgx::before, .lgx-car, .lgx-disp i, .lgx-rise, .lgx-door { animation: none !important; } .lgx-car, .lgx-door { transition: none; } }

/* Client portal details and mobile card fit */
body[data-page="login"] .lgx { min-height: calc(100svh - var(--hh)); padding-block: clamp(28px,4vh,44px); }
body[data-page="login"] .lgx::before { opacity: .18; background-size: 56px 56px; }
body[data-page="login"] .lgx::after { opacity: .24; }
body[data-page="login"] .lgx-in { grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: clamp(28px,5vw,72px); }
body[data-page="login"] .lgx-card { gap: 16px; padding: clamp(22px,3vh,30px); border-radius: 24px; box-shadow: 0 20px 50px -32px var(--shadow-ink), 0 0 0 1px color-mix(in srgb,var(--line-strong) 28%,transparent); }
body[data-page="login"] .lgx-step { min-height: 40px; font-size: 14px; }
body[data-page="login"] .lgx-step span { width: 22px; height: 22px; font-size: 14px; }
body[data-page="login"] .lgx-new { font-size: 15px; }
html[data-theme="dark"] body[data-page="login"] .lgx-card { background: color-mix(in srgb,var(--surface) 96%,var(--white)); border-color: var(--line-strong); }
@media (max-width: 900px) { body[data-page="login"] .lgx-in { grid-template-columns: minmax(0,1fr); } body[data-page="login"] .lgx-copy { width: min(100%,620px); margin-inline: auto; } body[data-page="login"] .lgx-shaft { width: 100%; } }
@media (max-width: 600px) { body[data-page="login"] .lgx-shaft { display: none; } body[data-page="login"] .lgx-card { gap: 14px; padding: 20px 18px; } }
@media (max-width: 560px) { .stc-step { grid-template-columns: 34px minmax(0,1fr); column-gap: 9px; padding-inline: 10px; } .stc-nm { font-size: clamp(16px,4.4vw,20px); line-height: 1.08; overflow-wrap: anywhere; } }
/* Dashboard tablet refinements: room around native select arrows and taller hero photos */
body.dash .dfield select { padding-inline: 16px 42px; }
@media (max-width: 1023px) {
  body.dash .dwelcome-photo { min-height: clamp(360px, 52vh, 440px); }
  body.dash .dwelcome-photo img { object-position: 50% 28%; }
}
/* Contact form section: add a consistent outer gutter from the viewport */
.fm { margin: clamp(12px, 2vw, 24px); border-radius: 24px; }
@media (max-width: 620px) {
  .fm { margin: 12px; border-radius: 18px; }
}
/* Dashboard selects: inset text and a padded custom dropdown chevron */
body.dash .dfield select {
  appearance: none;
  padding: 10px 42px 10px 16px;
  padding-inline: 16px 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23202124' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
html[data-theme="dark"] body.dash .dfield select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23FAFAF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[dir="rtl"] body.dash .dfield select {
  padding-inline: 42px 16px;
  background-position: left 16px center;
}
/* Login portal redesign: image-led project welcome and aligned sign-in panel */
body[data-page="login"] .lgx { min-height: calc(100svh - var(--hh)); display: grid; align-content: center; padding-block: clamp(28px, 4vh, 40px); background: var(--bg); }
body[data-page="login"] .lgx::before, body[data-page="login"] .lgx::after { display: none; }
body[data-page="login"] .lgx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 470px); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
body[data-page="login"] .lgx-visual { position: relative; isolation: isolate; display: flex; min-height: 570px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(24px, 3vw, 38px); border-radius: 24px; background: #202124; color: #FAFAF8; }
body[data-page="login"] .lgx-visual-image, body[data-page="login"] .lgx-visual-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-page="login"] .lgx-visual-image { z-index: -2; object-fit: cover; object-position: 50% 38%; animation: lgxPhotoIn 1s cubic-bezier(.2,.7,.2,1) both, lgxPhotoDrift 18s ease-in-out 1s infinite alternate; }
body[data-page="login"] .lgx-visual-shade { z-index: -1; background: linear-gradient(180deg, rgba(20,21,23,.42), rgba(20,21,23,.18) 30%, rgba(20,21,23,.9) 72%, rgba(20,21,23,.96)); }
@keyframes lgxPhotoIn { from { opacity: .65; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes lgxPhotoDrift { to { transform: scale(1.055) translateY(-.5%); } }
body[data-page="login"] .lgx-visual-top { display: flex; align-items: center; gap: 12px; font: 700 14px/1.2 var(--f-sub); letter-spacing: .12em; }
body[data-page="login"] .lgx-visual-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(250,250,248,.68); border-radius: 13px; background: rgba(32,33,36,.44); font-size: 18px; }
body[data-page="login"] .lgx-visual-copy { display: grid; gap: 14px; max-width: 600px; }
body[data-page="login"] .lgx-kicker { display: flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--f-sub); letter-spacing: .1em; }
body[data-page="login"] .lgx-kicker span { width: 8px; height: 8px; border-radius: 50%; background: #FAFAF8; box-shadow: 0 0 0 5px rgba(250,250,248,.16); }
body[data-page="login"] .lgx-title { max-width: 12ch; font: 400 clamp(38px, 4.5vw, 58px)/1.08 var(--f-head); color: #FAFAF8; text-wrap: balance; }
body[data-page="login"] .lgx-sub { max-width: 45ch; font: 400 16px/1.6 var(--f-body); color: rgba(250,250,248,.9); }
body[data-page="login"] .lgx-shaft { --p: 0; position: relative; width: min(100%, 520px); margin-block-start: 4px; }
body[data-page="login"] .lgx-floors { display: flex; flex-direction: column-reverse; }
body[data-page="login"] .lgx-floor { position: relative; display: flex; align-items: center; gap: 14px; height: 58px; padding-inline-start: 46px; border-block-start: 1px solid rgba(250,250,248,.28); color: #FAFAF8; }
body[data-page="login"] .lgx-floor:last-child { border-block-start-color: transparent; }
body[data-page="login"] .lgx-fno { position: absolute; inset-inline-start: 15px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-block-start: -13px; border: 1px solid rgba(250,250,248,.8); border-radius: 50%; background: rgba(32,33,36,.6); color: #FAFAF8; font: 700 14px/1 var(--f-sub); }
body[data-page="login"] .lgx-floor.is-done .lgx-fno { background: #FAFAF8; color: #202124; }
body[data-page="login"] .lgx-floor-copy { display: grid; gap: 2px; }
body[data-page="login"] .lgx-floor-copy b { font: 700 16px/1.2 var(--f-sub); }
body[data-page="login"] .lgx-floor-copy > span { font: 400 14px/1.3 var(--f-body); color: rgba(250,250,248,.84); }
body[data-page="login"] .lgx-rail { position: absolute; inset-inline-start: 27px; top: 29px; bottom: 29px; width: 2px; border-radius: 2px; background: rgba(250,250,248,.48); }
body[data-page="login"] .lgx-car { position: absolute; z-index: 2; inset-inline-start: 27px; bottom: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #202124; border-radius: 9px; background: #FAFAF8; color: #202124; font-size: 14px; transform: translateY(calc(var(--p) * -116px)); transition: transform 1s cubic-bezier(.65,0,.35,1); animation: lgxLiftBob 2.8s ease-in-out infinite; }
@keyframes lgxLiftBob { 50% { margin-bottom: 3px; } }
body[data-page="login"] .lgx-visual-foot { display: flex; align-items: center; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid rgba(250,250,248,.3); font: 500 14px/1.4 var(--f-body); color: rgba(250,250,248,.92); }
body[data-page="login"] .lgx-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; overflow: hidden; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 58px -38px var(--shadow-ink); animation: lgxCardIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lgxCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body[data-page="login"] .lgx-card-head { display: grid; gap: 6px; }
body[data-page="login"] .lgx-card-eyebrow { font: 700 14px/1.3 var(--f-sub); letter-spacing: .1em; color: var(--muted); }
body[data-page="login"] .lgx-welcome { font: 400 clamp(30px, 3vw, 38px)/1.12 var(--f-head); color: var(--ink); }
body[data-page="login"] .lgx-lead { font: 400 16px/1.5 var(--f-body); color: var(--muted); }
body[data-page="login"] .lgx-disp { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 600 14px/1 var(--f-sub); }
body[data-page="login"] .lgx-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
body[data-page="login"] .lgx-step { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 14px/1 var(--f-body); white-space: nowrap; }
body[data-page="login"] .lgx-step > span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--tint); color: var(--ink); font: 700 14px/1 var(--f-sub); }
body[data-page="login"] .lgx-step.is-active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
body[data-page="login"] .lgx-step.is-active > span { background: var(--bg); color: var(--ink); }
body[data-page="login"] .lgx-form { display: grid; gap: 14px; }
body[data-page="login"] .lgx-form .lgn-tabs { gap: 8px; }
body[data-page="login"] .lgx-form .lgn-tab span { min-height: 44px; font-size: 15px; }
body[data-page="login"] .lgx-label { font: 600 15px/1.3 var(--f-sub); color: var(--ink); }
body[data-page="login"] .lgx-form .lg-field { gap: 7px; }
body[data-page="login"] .lgx-form .lg-input { min-height: 48px; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--f-body); }
body[data-page="login"] .lgx-form .lg-input::placeholder { color: var(--muted); opacity: 1; }
body[data-page="login"] .lgx-form .lg-show { min-width: 62px; font-size: 14px; }
body[data-page="login"] .lgx-form .lg-check { font-size: 14px; }
body[data-page="login"] .lgx-form .lg-forgot { font-size: 14px; }
body[data-page="login"] .lgx-form .lg-submit { width: 100%; min-height: 50px; font-size: 15px; }
body[data-page="login"] .lgx-new { text-align: center; font: 400 14px/1.4 var(--f-body); color: var(--muted); }
body[data-page="login"] .lgx-new a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body[data-page="login"] .lgx-door { position: absolute; z-index: 5; top: 0; bottom: 0; width: 50.5%; pointer-events: none; background: linear-gradient(100deg,var(--ink),color-mix(in srgb,var(--ink) 88%,var(--silver))); transition: transform .8s cubic-bezier(.65,0,.35,1); }
body[data-page="login"] .lgx-door--a { inset-inline-start: 0; transform: translateX(-101%); animation: lgxOpenA .9s .2s backwards; }
body[data-page="login"] .lgx-door--b { inset-inline-end: 0; transform: translateX(101%); animation: lgxOpenB .9s .2s backwards; }
body[data-page="login"] .lgx-card.is-closed .lgx-door { transform: none; }
@media (max-width: 900px) {
  body[data-page="login"] .lgx { align-content: start; padding-block: 24px; }
  body[data-page="login"] .lgx-in { grid-template-columns: minmax(0,1fr); gap: 20px; width: min(100% - 32px,680px); }
  body[data-page="login"] .lgx-visual { min-height: 390px; padding: 26px; }
  body[data-page="login"] .lgx-title { max-width: 16ch; }
  body[data-page="login"] .lgx-card { width: 100%; }
}
@media (max-width: 600px) {
  body[data-page="login"] .lgx { padding-block: 16px; }
  body[data-page="login"] .lgx-in { width: min(100% - 24px,520px); gap: 14px; }
  body[data-page="login"] .lgx-visual { min-height: 300px; padding: 18px; border-radius: 18px; }
  body[data-page="login"] .lgx-visual-copy { gap: 10px; }
  body[data-page="login"] .lgx-title { max-width: 14ch; font-size: clamp(34px,9vw,44px); }
  body[data-page="login"] .lgx-sub { font-size: 15px; }
  body[data-page="login"] .lgx-floor { height: 48px; }
  body[data-page="login"] .lgx-floor-copy > span { display: none; }
  body[data-page="login"] .lgx-rail { top: 24px; bottom: 24px; }
  body[data-page="login"] .lgx-car { transform: translateY(calc(var(--p) * -96px)); }
  body[data-page="login"] .lgx-card { gap: 13px; padding: 20px 16px; border-radius: 18px; }
  body[data-page="login"] .lgx-form { gap: 11px; }
  body[data-page="login"] .lgx-form .lgx-steps { gap: 4px; }
  body[data-page="login"] .lgx-form .lgx-step { gap: 4px; padding-inline: 2px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="login"] .lgx-visual-image, body[data-page="login"] .lgx-car, body[data-page="login"] .lgx-card, body[data-page="login"] .lgx-door { animation: none !important; }
  body[data-page="login"] .lgx-car, body[data-page="login"] .lgx-door { transition: none; }
}
/* Keep the animated lift lane clear of the milestone copy */
body[data-page="login"] .lgx-floor { padding-inline-start: 76px; }
@media (max-width: 600px) {
  body[data-page="login"] .lgx-floor { padding-inline-start: 62px; }
}/* Login portal redesign: image-led project welcome and aligned sign-in panel */
body[data-page="signup"] .lgx { min-height: calc(100svh - var(--hh)); display: grid; align-content: center; padding-block: clamp(28px, 4vh, 40px); background: var(--bg); }
body[data-page="signup"] .lgx::before, body[data-page="signup"] .lgx::after { display: none; }
body[data-page="signup"] .lgx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 470px); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
body[data-page="signup"] .lgx-visual { position: relative; isolation: isolate; display: flex; min-height: 570px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(24px, 3vw, 38px); border-radius: 24px; background: #202124; color: #FAFAF8; }
body[data-page="signup"] .lgx-visual-image, body[data-page="signup"] .lgx-visual-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-page="signup"] .lgx-visual-image { z-index: -2; object-fit: cover; object-position: 50% 38%; animation: lgxPhotoIn 1s cubic-bezier(.2,.7,.2,1) both, lgxPhotoDrift 18s ease-in-out 1s infinite alternate; }
body[data-page="signup"] .lgx-visual-shade { z-index: -1; background: linear-gradient(180deg, rgba(20,21,23,.42), rgba(20,21,23,.18) 30%, rgba(20,21,23,.9) 72%, rgba(20,21,23,.96)); }
@keyframes lgxPhotoIn { from { opacity: .65; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes lgxPhotoDrift { to { transform: scale(1.055) translateY(-.5%); } }
body[data-page="signup"] .lgx-visual-top { display: flex; align-items: center; gap: 12px; font: 700 14px/1.2 var(--f-sub); letter-spacing: .12em; }
body[data-page="signup"] .lgx-visual-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(250,250,248,.68); border-radius: 13px; background: rgba(32,33,36,.44); font-size: 18px; }
body[data-page="signup"] .lgx-visual-copy { display: grid; gap: 14px; max-width: 600px; }
body[data-page="signup"] .lgx-kicker { display: flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--f-sub); letter-spacing: .1em; }
body[data-page="signup"] .lgx-kicker span { width: 8px; height: 8px; border-radius: 50%; background: #FAFAF8; box-shadow: 0 0 0 5px rgba(250,250,248,.16); }
body[data-page="signup"] .lgx-title { max-width: 12ch; font: 400 clamp(38px, 4.5vw, 58px)/1.08 var(--f-head); color: #FAFAF8; text-wrap: balance; }
body[data-page="signup"] .lgx-sub { max-width: 45ch; font: 400 16px/1.6 var(--f-body); color: rgba(250,250,248,.9); }
body[data-page="signup"] .lgx-shaft { --p: 0; position: relative; width: min(100%, 520px); margin-block-start: 4px; }
body[data-page="signup"] .lgx-floors { display: flex; flex-direction: column-reverse; }
body[data-page="signup"] .lgx-floor { position: relative; display: flex; align-items: center; gap: 14px; height: 58px; padding-inline-start: 46px; border-block-start: 1px solid rgba(250,250,248,.28); color: #FAFAF8; }
body[data-page="signup"] .lgx-floor:last-child { border-block-start-color: transparent; }
body[data-page="signup"] .lgx-fno { position: absolute; inset-inline-start: 15px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-block-start: -13px; border: 1px solid rgba(250,250,248,.8); border-radius: 50%; background: rgba(32,33,36,.6); color: #FAFAF8; font: 700 14px/1 var(--f-sub); }
body[data-page="signup"] .lgx-floor.is-done .lgx-fno { background: #FAFAF8; color: #202124; }
body[data-page="signup"] .lgx-floor-copy { display: grid; gap: 2px; }
body[data-page="signup"] .lgx-floor-copy b { font: 700 16px/1.2 var(--f-sub); }
body[data-page="signup"] .lgx-floor-copy > span { font: 400 14px/1.3 var(--f-body); color: rgba(250,250,248,.84); }
body[data-page="signup"] .lgx-rail { position: absolute; inset-inline-start: 27px; top: 29px; bottom: 29px; width: 2px; border-radius: 2px; background: rgba(250,250,248,.48); }
body[data-page="signup"] .lgx-car { position: absolute; z-index: 2; inset-inline-start: 27px; bottom: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #202124; border-radius: 9px; background: #FAFAF8; color: #202124; font-size: 14px; transform: translateY(calc(var(--p) * -116px)); transition: transform 1s cubic-bezier(.65,0,.35,1); animation: lgxLiftBob 2.8s ease-in-out infinite; }
@keyframes lgxLiftBob { 50% { margin-bottom: 3px; } }
body[data-page="signup"] .lgx-visual-foot { display: flex; align-items: center; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid rgba(250,250,248,.3); font: 500 14px/1.4 var(--f-body); color: rgba(250,250,248,.92); }
body[data-page="signup"] .lgx-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; overflow: hidden; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 58px -38px var(--shadow-ink); animation: lgxCardIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lgxCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body[data-page="signup"] .lgx-card-head { display: grid; gap: 6px; }
body[data-page="signup"] .lgx-card-eyebrow { font: 700 14px/1.3 var(--f-sub); letter-spacing: .1em; color: var(--muted); }
body[data-page="signup"] .lgx-welcome { font: 400 clamp(30px, 3vw, 38px)/1.12 var(--f-head); color: var(--ink); }
body[data-page="signup"] .lgx-lead { font: 400 16px/1.5 var(--f-body); color: var(--muted); }
body[data-page="signup"] .lgx-disp { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 600 14px/1 var(--f-sub); }
body[data-page="signup"] .lgx-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
body[data-page="signup"] .lgx-step { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 14px/1 var(--f-body); white-space: nowrap; }
body[data-page="signup"] .lgx-step > span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--tint); color: var(--ink); font: 700 14px/1 var(--f-sub); }
body[data-page="signup"] .lgx-step.is-active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
body[data-page="signup"] .lgx-step.is-active > span { background: var(--bg); color: var(--ink); }
body[data-page="signup"] .lgx-form { display: grid; gap: 14px; }
body[data-page="signup"] .lgx-form .lgn-tabs { gap: 8px; }
body[data-page="signup"] .lgx-form .lgn-tab span { min-height: 44px; font-size: 15px; }
body[data-page="signup"] .lgx-label { font: 600 15px/1.3 var(--f-sub); color: var(--ink); }
body[data-page="signup"] .lgx-form .lg-field { gap: 7px; }
body[data-page="signup"] .lgx-form .lg-input { min-height: 48px; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--f-body); }
body[data-page="signup"] .lgx-form .lg-input::placeholder { color: var(--muted); opacity: 1; }
body[data-page="signup"] .lgx-form .lg-show { min-width: 62px; font-size: 14px; }
body[data-page="signup"] .lgx-form .lg-check { font-size: 14px; }
body[data-page="signup"] .lgx-form .lg-forgot { font-size: 14px; }
body[data-page="signup"] .lgx-form .lg-submit { width: 100%; min-height: 50px; font-size: 15px; }
body[data-page="signup"] .lgx-new { text-align: center; font: 400 14px/1.4 var(--f-body); color: var(--muted); }
body[data-page="signup"] .lgx-new a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body[data-page="signup"] .lgx-door { position: absolute; z-index: 5; top: 0; bottom: 0; width: 50.5%; pointer-events: none; background: linear-gradient(100deg,var(--ink),color-mix(in srgb,var(--ink) 88%,var(--silver))); transition: transform .8s cubic-bezier(.65,0,.35,1); }
body[data-page="signup"] .lgx-door--a { inset-inline-start: 0; transform: translateX(-101%); animation: lgxOpenA .9s .2s backwards; }
body[data-page="signup"] .lgx-door--b { inset-inline-end: 0; transform: translateX(101%); animation: lgxOpenB .9s .2s backwards; }
body[data-page="signup"] .lgx-card.is-closed .lgx-door { transform: none; }
@media (max-width: 900px) {
  body[data-page="signup"] .lgx { align-content: start; padding-block: 24px; }
  body[data-page="signup"] .lgx-in { grid-template-columns: minmax(0,1fr); gap: 20px; width: min(100% - 32px,680px); }
  body[data-page="signup"] .lgx-visual { min-height: 390px; padding: 26px; }
  body[data-page="signup"] .lgx-title { max-width: 16ch; }
  body[data-page="signup"] .lgx-card { width: 100%; }
}
@media (max-width: 600px) {
  body[data-page="signup"] .lgx { padding-block: 16px; }
  body[data-page="signup"] .lgx-in { width: min(100% - 24px,520px); gap: 14px; }
  body[data-page="signup"] .lgx-visual { min-height: 300px; padding: 18px; border-radius: 18px; }
  body[data-page="signup"] .lgx-visual-copy { gap: 10px; }
  body[data-page="signup"] .lgx-title { max-width: 14ch; font-size: clamp(34px,9vw,44px); }
  body[data-page="signup"] .lgx-sub { font-size: 15px; }
  body[data-page="signup"] .lgx-floor { height: 48px; }
  body[data-page="signup"] .lgx-floor-copy > span { display: none; }
  body[data-page="signup"] .lgx-rail { top: 24px; bottom: 24px; }
  body[data-page="signup"] .lgx-car { transform: translateY(calc(var(--p) * -96px)); }
  body[data-page="signup"] .lgx-card { gap: 13px; padding: 20px 16px; border-radius: 18px; }
  body[data-page="signup"] .lgx-form { gap: 11px; }
  body[data-page="signup"] .lgx-form .lgx-steps { gap: 4px; }
  body[data-page="signup"] .lgx-form .lgx-step { gap: 4px; padding-inline: 2px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="signup"] .lgx-visual-image, body[data-page="signup"] .lgx-car, body[data-page="signup"] .lgx-card, body[data-page="signup"] .lgx-door { animation: none !important; }
  body[data-page="signup"] .lgx-car, body[data-page="signup"] .lgx-door { transition: none; }
}
body[data-page="signup"] .lgx-steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
body[data-page="signup"] .lgx-step { gap: 4px; padding-inline: 3px; font-size: 14px; }
body[data-page="signup"] .lgx-card { gap: 12px; }
body[data-page="signup"] .lgx-card-head { gap: 5px; }
body[data-page="signup"] .lgx-form { gap: 10px; }
body[data-page="signup"] .su-meter { display: flex; align-items: center; gap: 8px; min-height: 24px; font: 600 14px/1.3 var(--f-sub); color: var(--muted); }
body[data-page="signup"] .su-meter > span { margin-inline-end: 4px; white-space: nowrap; }
body[data-page="signup"] .su-meter > i { flex: 1; height: 7px; border-radius: 9px; background: var(--tint); }
body[data-page="signup"] .su-meter > i.on { background: var(--ink); }
body[data-page="signup"] .su-pane { display: grid; gap: 11px; animation: suIn .4s ease both; }
body[data-page="signup"] .su-pane[hidden] { display: none !important; }
body[data-page="signup"] .su-pane .lg-field { gap: 5px; }
body[data-page="signup"] .su-alt { text-align: center; font: 400 14px/1.4 var(--f-body); color: var(--muted); }
body[data-page="signup"] .su-alt a, body[data-page="signup"] .su-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body[data-page="signup"] .su-strength { display: flex; align-items: center; gap: 6px; min-height: 22px; font: 500 14px/1.3 var(--f-body); color: var(--muted); }
body[data-page="signup"] .su-strength i { flex: none; width: 28px; height: 6px; border-radius: 8px; background: var(--tint); }
body[data-page="signup"] .su-strength i.on { background: var(--ink); }
body[data-page="signup"] .su-strength span { margin-inline-start: 4px; }
body[data-page="signup"] .su-actions { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 9px; }
body[data-page="signup"] .su-actions .btn { min-width: 0; min-height: 48px; padding-inline: 12px; font-size: 14px; }
body[data-page="signup"] .su-actions .lg-submit { width: 100%; }
@media (max-width: 900px) {
  body[data-page="signup"] .lgx-card { order: 1; }
  body[data-page="signup"] .lgx-visual { order: 2; }
}
@media (max-width: 600px) {
  body[data-page="signup"] .lgx-steps { gap: 3px; }
  body[data-page="signup"] .lgx-step { gap: 3px; font-size: 14px; }
  body[data-page="signup"] .lgx-step > span { width: 20px; height: 20px; }
  body[data-page="signup"] .lgx-card { gap: 11px; }
  body[data-page="signup"] .su-pane { gap: 9px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  body[data-page="signup"] .lgx { padding-block: 20px; }
  body[data-page="signup"] .lgx-visual { min-height: 520px; }
  body[data-page="signup"] .lgx-card { padding-block: 20px; gap: 10px; }
}
/* Home 1: consistent section breathing room and face-safe journey crops */
body[data-page="home-1"] main > section:not(.hero) { padding-block: clamp(48px, 6vw, 72px); }
body[data-page="home-1"] .jny-photo img { object-position: 50% 22%; }
body[data-page="home-1"] .jny-step.is-active .jny-photo img,
body[data-page="home-1"] .jny-step:hover .jny-photo img { transform: scale(1.02); }
/* Keep the signup lift car and floor markers clear of timeline labels */
body[data-page="signup"] .lgx-floor { padding-inline-start: 76px; }
@media (max-width: 600px) {
  body[data-page="signup"] .lgx-floor { padding-inline-start: 62px; }
}
/* Home 2: keep content sections on a shared vertical rhythm. */
body[data-page="home-2"] main > section:not(.vertical-hero) { padding-block: clamp(48px, 6vw, 72px); }

/* Home 1: use identical top and bottom spacing on every section. */
body[data-page="home-1"] main > section { padding-block: clamp(48px, 6vw, 72px); }

/* Restore Home 1 hero spacing; keep its original full-height layout. */
body[data-page="home-1"] main > section.hero { padding-block: 0; }

/* About page: consistent top and bottom padding across content sections. */
body[data-page="about"] main > section:not(.ab-banner) { padding-block: clamp(40px, 5vw, 56px); }

/* Products page: matching top and bottom spacing on every content section. */
body[data-page="products"] main > section:not(.pb) { padding-block: clamp(40px, 5vw, 64px); }

/* LTR account card shutters: stay open at rest and close only during submit */
[dir="ltr"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--a,
[dir="ltr"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--a { transform: translateX(-101%) !important; animation: none !important; }
[dir="ltr"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--b,
[dir="ltr"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--b { transform: translateX(101%) !important; animation: none !important; }
[dir="ltr"] body[data-page="login"] .lgx-card.is-closed .lgx-door,
[dir="ltr"] body[data-page="signup"] .lgx-card.is-closed .lgx-door { transform: translateX(0) !important; }
/* Products: show every assembly part on tablet/mobile and keep labels inside cards */
@media (max-width: 980px) {
  .bp--live .bp-track { height: auto !important; }
  .bp--live .bp-stage { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; align-content: start !important; padding-block: 20px !important; }
  .bp-panels { height: auto !important; }
  .bp-panel { min-height: 0; }
  .bp-grid--sl { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: repeat(3,44px); gap: 8px; }
  .bp-grid--sl .bp-part { --c: 1 !important; }
  .bp-grid--sl .bp-out { --c: 2 !important; }
  .bp-grid--sl .bp-part[data-k="1"], .bp-grid--sl .bp-part[data-k="3"], .bp-grid--sl .bp-part[data-k="5"] { --c: 3 !important; }
  .bp-grid--rp { grid-template-rows: 44px 56px 44px; row-gap: 8px; column-gap: 8px; }
  .bp-grid--rp .bp-out { --r: 2 !important; }
  .bp-grid--rp .bp-part[data-k="8"], .bp-grid--rp .bp-part[data-k="9"] { --r: 3 !important; }
  .bp-arr { display: none; }
  .bp-part { min-width: 0; padding-inline: 4px; font-size: clamp(12px, 2vw, 15px); line-height: 1.12; overflow-wrap: anywhere; }
  .bp-part i { display: none; }
  .bp-part span { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .cmb-step:nth-child(1), .cmb-step:nth-child(2), .cmb-step:nth-child(3), .cmb-step:nth-child(4) { --mw: 100%; }
  .cmb-block { width: 100%; margin-inline-start: 0; }
}
/* Account shutters: explicitly open away from the form in either direction */
[dir="ltr"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--a,
[dir="ltr"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--a { transform: translateX(-105%) !important; animation: none !important; }
[dir="ltr"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--b,
[dir="ltr"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--b { transform: translateX(105%) !important; animation: none !important; }
[dir="rtl"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--a,
[dir="rtl"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--a { transform: translateX(105%) !important; animation: none !important; }
[dir="rtl"] body[data-page="login"] .lgx-card:not(.is-closed) .lgx-door--b,
[dir="rtl"] body[data-page="signup"] .lgx-card:not(.is-closed) .lgx-door--b { transform: translateX(-105%) !important; animation: none !important; }
[dir="ltr"] body[data-page="login"] .lgx-card.is-closed .lgx-door,
[dir="ltr"] body[data-page="signup"] .lgx-card.is-closed .lgx-door,
[dir="rtl"] body[data-page="login"] .lgx-card.is-closed .lgx-door,
[dir="rtl"] body[data-page="signup"] .lgx-card.is-closed .lgx-door { transform: translateX(0) !important; }
/* Keep assembled product labels inside narrow stairlift output cells */
@media (max-width: 980px) {
  .bp-grid--sl { grid-template-columns: minmax(0,.85fr) minmax(0,1.4fr) minmax(0,.85fr) !important; }
  .bp-grid--sl .bp-out { min-width: 0; padding-inline: 5px; }
  .bp-grid--sl .bp-out b { max-width: 100%; font-size: clamp(14px, 4.2vw, 17px); line-height: 1.1; overflow-wrap: anywhere; }
  .bp-grid--sl .bp-out span { max-width: 100%; font-size: clamp(12px, 3.5vw, 14px); line-height: 1.15; overflow-wrap: anywhere; }
}
/* Ascendra custom cursors: branded arrow and click pointer on precise pointer devices */
@media (hover: hover) and (pointer: fine) {
  :root {
    --asc-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 2v24l7-6 4.2 9 4.1-1.9-4-8.8h9L4 2z' fill='%23202124' stroke='%23FAFAF8' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
    --asc-click-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 28V15a2 2 0 0 1 4 0v5-9a2 2 0 0 1 4 0v9-7a2 2 0 0 1 4 0v8-5a2 2 0 0 1 4 0v8c0 4-3 7-7 7h-4c-2 0-3-1-5-3l-4-5a2 2 0 0 1 3-3l3 3' fill='%23202124' stroke='%23FAFAF8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' transform='translate(-2 -2)'/%3E%3C/svg%3E") 13 4, pointer;
  }
  html, body, body * { cursor: var(--asc-cursor) !important; }
  a, button, [role="button"], summary, label[for], select, input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"] { cursor: var(--asc-click-cursor) !important; }
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: text !important; }
}
/* Keep login and signup progress steps readable on narrow screens. */
@media (max-width: 600px) {
  body[data-page="login"] .lgx-steps,
  body[data-page="signup"] .lgx-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
  body[data-page="login"] .lgx-step,
  body[data-page="signup"] .lgx-step { justify-content: flex-start; min-width: 0; min-height: 38px; padding: 6px 10px; gap: 8px; font-size: 14px; line-height: 1.25; white-space: normal; text-align: start; overflow-wrap: anywhere; }
}

/* User dashboard: add practical preparation guidance to the visit card. */
.dcard--visits { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.dvisit-prep { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--tint) 58%, var(--surface)); }
.dvisit-prep-head { display: flex; align-items: center; gap: 12px; }
.dvisit-prep-ic { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); font-size: 17px; }
.dvisit-prep h4 { font: 700 16px/1.3 var(--f-sub); }
.dvisit-prep-head p { margin-block-start: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.dvisit-prep ul { display: grid; gap: 10px; margin-block-start: 16px; }
.dvisit-prep li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font: 400 14px/1.45 var(--f-body); }
.dvisit-prep li i { flex: none; margin-block-start: 3px; color: var(--muted); font-size: 13px; }
.dvisit-prep > a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-block-start: 16px; color: var(--ink); font: 600 14px/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) { .dvisit-prep { padding: 15px; } }

html[data-theme="light"] body[data-page="home-2"] .client4 { background: #EEF0F1; }
html[data-theme="light"] body[data-page="home-2"] .dayhome { background: #E6EAED; }

/* Home 1 product explorer: visible light surface and consistent depth on its cards. */
html[data-theme="light"] body[data-page="home-1"] .product-explorer { background: #EEF0F1; }
html[data-theme="light"] body[data-page="home-1"] .product-explorer .explorer-content { background: #F8F9F9; box-shadow: 0 16px 36px rgba(32,33,36,.12), 0 0 0 1px rgba(174,181,188,.2); }
html[data-theme="light"] body[data-page="home-1"] .product-explorer .explorer-photo { box-shadow: 0 10px 28px rgba(32,33,36,.18), 0 0 0 5px rgba(174,181,188,.2); }
html[data-theme="light"] body[data-page="home-1"] .product-explorer .explorer-tab:not(.is-active) { box-shadow: 0 8px 20px rgba(32,33,36,.12), 0 0 0 1px rgba(174,181,188,.22); }
html[data-theme="light"] body[data-page="home-1"] .product-explorer .explorer-tags li { box-shadow: 0 4px 12px rgba(32,33,36,.1); }
html[data-theme="light"] body[data-page="home-1"] .product-explorer .explorer-actions .btn { box-shadow: 0 8px 18px rgba(32,33,36,.14), 0 0 0 1px rgba(174,181,188,.2); }

/* Home assessment section: clear light surface and stronger depth on its cards. */
html[data-theme="light"] body[data-page="home-1"] .home-cta { background: #EEF0F1; }
html[data-theme="light"] body[data-page="home-1"] .home-cta-eyebrow { box-shadow: 0 6px 18px rgba(32,33,36,.12), 0 0 0 1px rgba(174,181,188,.22); }
html[data-theme="light"] body[data-page="home-1"] .home-cta-primary { box-shadow: 0 8px 20px rgba(32,33,36,.2), 0 0 0 1px rgba(174,181,188,.32); }
html[data-theme="light"] body[data-page="home-1"] .home-cta-assurances i { box-shadow: 0 4px 12px rgba(32,33,36,.14); }
html[data-theme="light"] body[data-page="home-1"] .home-cta-visual { box-shadow: 0 16px 36px rgba(32,33,36,.2), 0 0 0 1px rgba(174,181,188,.3); }
html[data-theme="light"] body[data-page="home-1"] .home-cta-visual figcaption { box-shadow: 0 10px 24px rgba(32,33,36,.2), 0 0 0 1px rgba(174,181,188,.24); }

/* Footer contact action: give wrapped button text comfortable space on every screen. */
.site-footer__cta { box-sizing: border-box; width: 100%; min-height: 56px; padding: 10px 16px; line-height: 1.35; text-align: start; }
.site-footer__cta i { flex: none; }