/* Bluemark Financials: one design system for the public site. Rules live in DESIGN.md.
   1 Tokens · 2 Surfaces · 3 Base · 4 Motion · 5 Controls · 6 Navigation · 7 Hero · 8 Home · 9 Inner pages
   10 Contact · 11 Forms · 12 Footer · 13 Quick contact · 15 Preferences */

/* 1 ─ Tokens: every colour comes from the logo. Neutrals lean navy or warm cream. */
:root {
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title: 'Fraunces', Georgia, serif;
  --display: var(--title);
  --wordmark: Georgia, serif;

  --navy: #0a1622; --deep: #0d2235; --blue: #0b4a78; --ribbon: #146b9f; --sky: #8fc4e6; --sky-tint: #d7e8f4;
  --crimson: #b51f35; --crimson-2: #c32c46; --rose: #f0a3b2; --rose-tint: #f7d9de;
  --cream: #f4eee2; --cream-2: #faf6ee; --cream-card: #fffcf6;
  --ink: #10253a; --ink-2: #3d4d5c; --ink-3: #55636f; --hairline: #e3d9c8;

  --t-hero: clamp(3.2rem,7.4vw,7.5rem);
  --t-page: clamp(3rem,6.6vw,6.4rem);
  --t-display: clamp(2.6rem,5.4vw,5.5rem);
  --t-number: clamp(4.5rem,7vw,6rem);
  --t-card: clamp(1.35rem,1.9vw,1.6rem);
  --t-lead: clamp(1.15rem,1.7vw,1.4rem);
  --t-body: clamp(1rem,.95rem + .2vw,1.125rem);
  --t-fine: .875rem;

  --gutter: clamp(22px,5vw,76px);
  --s-section: 120px;
  --s-block: clamp(40px,5vw,72px);
  --header-height: 72px;
  --sheet: 32px;

  --r-field: 12px; --r-card: 28px; --r-pill: 980px;
  --shadow-raised: 0 2px 4px #0a16220f,0 18px 36px -14px #0a162233,0 44px 80px -36px #0a162259;
  --shadow-float: 0 14px 34px -22px #0a1622b3;
  --shadow-sheet: 0 0 #0000;

  --bm-unfold: cubic-bezier(.22,1,.36,1);
  --bm-settle: cubic-bezier(.33,0,.15,1);
  --bm-quick: cubic-bezier(.4,0,.2,1);
  --bm-hover: .25s; --bm-reveal: .7s; --bm-section: 1.1s;

}
@media (max-width: 768px) { :root { --s-section: 72px; --sheet: 26px; } }

/* 2 ─ Surfaces: dark on the root and dark islands, light on .on-cream, crimson on .on-crimson. */
:root,.dark-section {
  --bg: var(--navy); --bg-2: var(--deep); --card: #faf6ee0f; --field: var(--deep);
  --fg: var(--cream-2); --fg-2: #c9d6e2; --fg-3: #a9bccb;
  --line: #faf6ee24; --line-2: #faf6ee42;
  --accent: var(--sky); --key: var(--rose); --tick: var(--rose); --field-edge: #6f8598;
  color-scheme: dark;
}
.on-cream {
  --bg: var(--cream-2); --bg-2: var(--cream); --card: var(--cream-card); --field: var(--cream-card);
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --line: var(--hairline); --line-2: #cbbfa9;
  --accent: var(--blue); --key: var(--crimson); --tick: var(--crimson); --field-edge: #8c8474;
  color-scheme: light;
}
.on-cream .dark-section {
  --bg: var(--navy); --bg-2: var(--deep); --card: #faf6ee0f; --field: var(--deep);
  --fg: var(--cream-2); --fg-2: #c9d6e2; --fg-3: #a9bccb;
  --line: #faf6ee24; --line-2: #faf6ee42;
  --accent: var(--sky); --key: var(--rose); --tick: var(--rose); --field-edge: #6f8598;
  color-scheme: dark;
}
.on-crimson,.dark-section.on-crimson {
  --bg: var(--crimson); --card: #fffcf61f;
  --fg: var(--cream-card); --fg-2: var(--cream-card); --fg-3: var(--cream-card);
  --line: #fffcf63d; --line-2: #fffcf666;
  --accent: var(--cream-card); --key: var(--cream-card); --tick: var(--cream-card);
}
/* Grades: a base, two soft lights that move, and fine static grain. Lit like the 3D B, never flat. */
.lit { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: url(assets/brand/grain.png?v=2) 0 0 / 128px; pointer-events: none; }
.lit i { position: absolute; display: block; width: min(650px,75vw); aspect-ratio: 1; transform: scale(2); }
.lit.is-off i { visibility: hidden; animation-play-state: paused !important; }
.lit i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side,var(--g) 0%,transparent 100%); }
.lit i:first-child { top: -38%; right: -24%; transform-origin: 100% 0; --g: var(--g1); opacity: var(--g1-o,1); }
.lit i:last-child { bottom: -52%; left: -30%; transform-origin: 0 100%; --g: var(--g2); opacity: var(--g2-o,1); }
.grade-navy,.dark-section.grade-navy { --bg: #0b3a60; --g1: #146b9f; --g1-o: 1; --g2: #0a1622; --g2-o: .95; --fg-2: #dde6ee; }
.grade-blue,.dark-section.grade-blue { --bg: #0b3a60; --g1: #146b9f; --g1-o: 1; --g2: #0a1622; --g2-o: .95; }
.grade-crimson { --bg: var(--crimson); --g1: #f0a3b2; --g1-o: .92; --g2: #0a1622; --g2-o: .32; --grain-o: .06; }
.grade-cream { --bg: var(--cream-2); --g1: #d7e8f4; --g2: #f7d9de; --grain-o: .035; }
.feature.grade-blue .lit::before { content: ''; position: absolute; left: -20%; bottom: -40%; width: min(760px,110vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side,#c32c4647,transparent); }
.feature-flip .lit i:first-child { right: auto; left: -24%; transform-origin: 0 0; }
.feature-flip .lit i:last-child { left: auto; right: -30%; transform-origin: 100% 100%; }
@media (max-width: 920px) {
  .lit i:first-child { top: -14%; right: -60%; }
  .lit i:last-child { bottom: -30%; left: -70%; }
  .feature.grade-crimson .lit i:first-child { top: auto; bottom: -22%; right: -40%; left: auto; transform-origin: 100% 100%; }
  .feature.grade-crimson .lit i:last-child { bottom: auto; top: -40%; left: -60%; right: auto; transform-origin: 0 0; }
}
.tile .lit i { width: 60%; }
.tile .lit i:first-child { top: -46%; right: -46%; }
.tile .lit i:last-child { bottom: -50%; left: -50%; }
.tile.grade-crimson { --g1-o: .55; }
.tile.grade-crimson .lit i { animation-name: none; }
.docs-panel .lit i,.who-panel .lit i,.tldr .lit i,.bento-wa .lit i { width: 65%; }
@media (prefers-reduced-motion: no-preference) {
  .lit i::before { animation: bm-drift 8s ease-in-out infinite alternate; }
  .lit i:last-child::before { animation-duration: 11s; animation-direction: alternate-reverse; }
  .lit.is-off i::before { animation-play-state: paused; }
  @keyframes bm-drift { from { transform: translate3d(-14%,-9%,0) scale(.88); opacity: .62; } to { transform: translate3d(14%,10%,0) scale(1.16); opacity: 1; } }
  @supports (animation-timeline: view()) {
    html:not(.scrub-on) .lit i { animation: bm-light-a linear both; animation-timeline: view(); animation-range: cover; }
    html:not(.scrub-on) .lit i:last-child { animation-name: bm-light-b; }
    @keyframes bm-light-a { from { transform: translate3d(18%,32%,0) scale(1.8); } to { transform: translate3d(-18%,-28%,0) scale(2.24); } }
    @keyframes bm-light-b { from { transform: translate3d(-16%,-24%,0) scale(2.2); } to { transform: translate3d(20%,24%,0) scale(1.84); } }
  }
}

/* 3 ─ Base */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 24px); text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--fg-2); font: 400 var(--t-body)/1.6 var(--sans); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button,select,a,summary,label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
ul,ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--cream); color: var(--navy); }
.on-cream ::selection { background: var(--navy); color: var(--cream); }
.on-cream .dark-section ::selection { background: var(--cream); color: var(--navy); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
main:focus { outline: none; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 16px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); transform: translateY(-160%); transition: transform var(--bm-hover) var(--bm-quick); }
.skip-link:focus { transform: none; }
.hp { position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.site-content { overflow-x: clip; }
h1,h2,h3,h4 { color: var(--fg); }
h1,h2 { font-family: var(--display); font-weight: 500; font-variation-settings: 'opsz' 72; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: var(--t-display); }
h3,h4 { font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
h2 :is(span,em) { font-style: normal; }
p { text-wrap: pretty; }
.lead { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; }
.fine { font-size: var(--t-fine); line-height: 1.5; }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--fg-2); font-size: 1rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.4; }
:is(main,.stack) > section { position: relative; background: var(--bg); color: var(--fg-2); }
main > section,footer,.tile,.bento-wa,.who-panel,.docs-panel,.tldr { isolation: isolate; }
.section { padding-block: var(--s-section); }
.section-head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 24px; align-items: end; margin-bottom: var(--s-block); }
.section-head > div { grid-column: 1 / 9; }
.section-head > .lead { grid-column: 9 / 13; margin-bottom: .3em; }
.section-action { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: var(--s-block); }
/* Sections rise over one another as rounded sheets. */
main > section:not(.page-hero,.utility-page,.page-open) { z-index: 5; border-radius: var(--sheet) var(--sheet) 0 0; box-shadow: var(--shadow-sheet); }
main > section:not(.page-hero,.utility-page,:first-child) { margin-top: calc(var(--sheet) * -1); padding-bottom: calc(var(--s-section) + var(--sheet)); }
.stack + section { margin-top: calc(var(--sheet) * -1); }
footer { position: relative; z-index: 12; }
@media (max-width: 920px) { .section-head { display: block; } .section-head > .lead { margin-top: 16px; } }

/* 4 ─ Motion: things unfold, lay flat and settle. Hidden states exist only under html.bm-reveal. */
.line { display: block; padding-bottom: .14em; margin-bottom: -.14em; perspective: 800px; }
.line-inner { display: block; transform-origin: 50% 0; }
.bm-reveal :is(h1,h2):not(.is-in) .line-inner,.bm-reveal :is(.page-hero-copy) h1:not(.is-in) .page-title-line > span { opacity: 0; transform: rotateX(-55deg); }
.bm-reveal :is(h1,h2).is-in .line-inner { transition: transform var(--bm-section) var(--bm-unfold) calc(var(--i,0) * .07s),opacity var(--bm-reveal) var(--bm-quick) calc(var(--i,0) * .07s); }
.rib { position: relative; white-space: nowrap; }
.rib-line { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .16em; overflow: visible; pointer-events: none; }
.rib-line path { fill: none; stroke: var(--tick); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bm-reveal :is(h1,h2):not(.is-in) .rib-line path { stroke-dashoffset: 1; }
.bm-reveal :is(h1,h2).is-in .rib-line path { transition: stroke-dashoffset var(--bm-section) var(--bm-settle) .85s; }
.tick { flex: none; width: 22px; height: 10px; overflow: visible; }
.tick path { fill: none; stroke: var(--tick); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bm-reveal [data-reveal]:not(.is-in) .tick path,.bm-reveal .kicker[data-reveal]:not(.is-in) .tick path,html.bm-reveal:not(.is-loaded) :is(.page-hero-copy,.utility-copy) .tick path { stroke-dashoffset: 1; }
.tick path { transition: stroke-dashoffset var(--bm-reveal) var(--bm-unfold) .15s; }
.bm-reveal [data-reveal]:not(.is-in) { opacity: 0; translate: 0 20px; }
.bm-reveal [data-reveal].is-in { transition: opacity var(--bm-reveal) var(--bm-quick) var(--reveal-delay,0ms),translate var(--bm-reveal) var(--bm-unfold) var(--reveal-delay,0ms); }
@media (max-width: 768px) {
  .bm-reveal [data-reveal]:not(.is-in) { translate: 0 16px; }
  .bm-reveal [data-reveal].is-in { transition-duration: .5s; }
}
.bm-reveal [data-reveal=image]:not(.is-in) { opacity: 1; translate: none; clip-path: inset(100% 0 0 0); }
.bm-reveal [data-reveal=image].is-in { clip-path: inset(0); transition: clip-path var(--bm-section) var(--bm-unfold); }
html.bm-reveal [data-panel]:not(.is-flat) { transform: perspective(1400px) rotateX(6deg) translateY(40px); transform-origin: 50% 0; }
html.bm-reveal [data-panel].is-flat { transform: none; transform-origin: 50% 0; transition: transform var(--bm-section) var(--bm-settle); }
html.bm-reveal:not(.is-loaded) :is(.page-hero-copy,.utility-copy) > :not(h1,.kicker) { opacity: 0; translate: 0 16px; }
.bm-reveal :is(.page-hero-copy,.utility-copy) > :not(h1) { transition: opacity var(--bm-reveal) var(--bm-quick) .35s,translate var(--bm-reveal) var(--bm-unfold) .35s; }
.is-loaded .receipt-check { animation: bm-check var(--bm-reveal) var(--bm-unfold) .1s both; }
@keyframes bm-check { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
html.bm-jump :is([data-reveal],[data-panel],.line-inner,.rib-line path,.tile-num,.gfx-pop,.site-header) { transition: none !important; }
@media print { .bm-reveal :is([data-reveal],[data-panel],.line-inner) { opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),::view-transition-new(root) { animation-duration: .4s; animation-timing-function: var(--bm-settle); }
  .site-header { view-transition-name: site-header; }
  .quick-bar { view-transition-name: quick-bar; }
  .float-stack { view-transition-name: float-contact; }
}

/* 5 ─ Controls: primary, secondary and text. The fill sweeps in behind an angled edge; the arrow moves 3px. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 12px 28px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; color: var(--fg); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; transition: border-color var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick); --sweep: color-mix(in srgb,var(--fg) 10%,transparent); }
.btn.red { background: var(--crimson); border-color: var(--crimson); color: var(--cream-card); --sweep: var(--crimson-2); }
.btn.cream { background: var(--cream-card); border-color: var(--cream-card); color: var(--ink); font-weight: 600; --sweep: var(--rose-tint); }
.btn.cream:hover { border-color: var(--rose-tint); }
.btn::after { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--sweep); clip-path: polygon(0 0,0 0,-16% 100%,0 100%); transition: clip-path var(--bm-reveal) var(--bm-unfold); pointer-events: none; }
.btn-block { width: 100%; }
.btn > span[aria-hidden],.text-link > span[aria-hidden],.card-link > span[aria-hidden] { transition: transform var(--bm-hover) var(--bm-quick); }
.btn:disabled { cursor: wait; opacity: .7; }
.btn:disabled::after { display: none; }
.btn[aria-busy=true]::before { content: ''; width: 14px; height: 14px; border: 2px solid #fffcf666; border-top-color: var(--cream-card); border-radius: 50%; animation: sg-spin .8s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.btn:active:not(:disabled) { transform: scale(.98); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.text-link,.card-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.text-link::after,.card-link::after,footer :is(.f-col ul a,.footer-utilities a:not(.back-top),.foot-bottom a)::after,.nav-links > a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - .95em); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--bm-hover) var(--bm-quick); pointer-events: none; }
:is(.text-link,.card-link,footer .f-col ul a,footer .footer-utilities a:not(.back-top),footer .foot-bottom a):focus-visible::after { transform: scaleX(1); }
.text-link:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { clip-path: polygon(0 0,116% 0,100% 100%,0 100%); }
  .btn:hover > span[aria-hidden],.text-link:hover > span[aria-hidden],.card-link:hover > span[aria-hidden] { transform: translate(3px,-3px); }
  :is(.text-link,.card-link,footer .f-col ul a,footer .footer-utilities a:not(.back-top),footer .foot-bottom a):hover::after { transform: scaleX(1); }
}
.btn:focus-visible::after { clip-path: polygon(0 0,116% 0,100% 100%,0 100%); }
.live-status { display: flex; align-items: center; gap: 9px; color: var(--fg-2); font-size: var(--t-fine); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.live-status:empty { display: none; }
.live-mark { flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--crimson-2); transform: rotate(-18deg); }
.live-status.is-open .live-mark { background: var(--ribbon); }
.dark-section .live-status.is-open .live-mark,footer .live-status.is-open .live-mark { background: var(--sky); }

/* 6 ─ Navigation: a full-width bar. Clear at the top of the page; it slides away going down and returns going up on a
   tinted surface matched to the section beneath. The surface is a separate layer, so the phone's fixed menu is unaffected. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-height); pointer-events: none; transition: transform .42s var(--bm-unfold); }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #0a1622; box-shadow: inset 0 -1px 0 #faf6ee1a; opacity: 0; transition: opacity .3s var(--bm-quick),background-color .3s var(--bm-quick); }
.site-header.is-scrolled:not(.is-tucked,.menu-open)::before { opacity: 1; }
.site-header.is-light:not(.menu-open)::before { background: #faf6ee; box-shadow: inset 0 -1px 0 #10253a1f; }
.site-header.is-tucked:not(.menu-open) { transform: translateY(-100%); }
.nav-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 20px; height: 100%; color: var(--cream-2); transition: color .3s var(--bm-quick); }
.nav-row > * { pointer-events: auto; }
.site-header.is-light:not(.menu-open) .nav-row { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: inherit; }
.header-brand { position: relative; z-index: 2; justify-self: start; }
.header-brand img { width: 26px; height: 32px; object-fit: contain; }
.header-brand-name,.footer-brand-name { display: block; font-family: var(--wordmark); font-weight: 700; font-size: .74rem; line-height: 1.08; letter-spacing: .03em; text-transform: uppercase; }
.nav-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; justify-self: end; }
.nav-links { display: flex; align-items: center; gap: clamp(10px,2vw,28px); font-size: .92rem; font-weight: 500; }
.nav-links > a:not(.btn) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: #c9d6e2; transition: color var(--bm-hover) var(--bm-quick); }
.nav-links > a:not(.btn):is(:hover,[aria-current]) { color: var(--cream-2); }
.site-header.is-light:not(.menu-open) .nav-links > a:not(.btn) { color: var(--ink-2); }
.site-header.is-light:not(.menu-open) .nav-links > a:not(.btn):is(:hover,[aria-current]) { color: var(--ink); }
.nav-links .btn,.nav-status { display: none; }
.header-apply { min-height: 42px; padding: 8px 20px; font-size: .92rem; white-space: nowrap; }
.burger { display: none; position: relative; z-index: 2; flex: none; width: 44px; height: 44px; border-radius: 50%; color: inherit; }
.burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--bm-hover) var(--bm-quick),opacity var(--bm-hover) var(--bm-quick); }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded=true] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 921px) {
  .nav-links > a:not(.btn)[aria-current]::after { transform: scaleX(1); }
  @media (hover: hover) { .nav-links > a:not(.btn):hover::after { transform: scaleX(1); } }
}
@media (max-width: 920px) {
  :root { --header-height: 64px; }
  .nav-row { display: flex; gap: 8px; }
  .burger { margin-right: -11px; }
  .nav-actions { margin-left: auto; }
  .header-apply { display: none; }
  .burger { display: block; }
  .nav-links > a:not(.btn)::after { display: none; }
  /* A full-screen sheet unfolding from the top; links follow line by line, status and Apply last. */
  .nav-links { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--header-height) + 36px) var(--gutter) 40px; overflow-y: auto; background: var(--navy); color: var(--cream-2); }
  .nav-ready .nav-links { visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path var(--bm-reveal) var(--bm-settle),visibility 0s var(--bm-reveal); }
  .nav-ready .nav-links.open { visibility: visible; clip-path: inset(0); transition: clip-path var(--bm-reveal) var(--bm-settle),visibility 0s; }
  .nav-links > a:not(.btn) { min-height: 60px; padding: 0; font: 500 2.2rem/1.2 var(--display); letter-spacing: -.02em; }
  .nav-links .btn { display: inline-flex; width: 100%; min-height: 54px; margin-top: 16px; }
  .nav-status:not(:empty) { display: flex; margin-top: 24px; color: #c9d6e2; font-size: 1rem; }
  .nav-ready .nav-links > * { opacity: 0; transform: translateY(16px); transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick); }
  .nav-ready .nav-links.open > * { opacity: 1; transform: none; transition: opacity var(--bm-reveal) var(--bm-quick) calc(.12s + var(--nav-order,0) * .07s),transform var(--bm-reveal) var(--bm-unfold) calc(.12s + var(--nav-order,0) * .07s); }
  .nav-ready .nav-links.open > :is(.nav-status,.btn) { transition-delay: .5s; }
  .site-header.menu-open .nav-row { color: var(--cream-2); }
}
html.menu-lock,html.menu-lock body { overflow: hidden; }
html.lenis,html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* 7 ─ Hero: a huge headline on the left, the lit B on the right. Its parts settle on load, then it drifts
   under a slow sheen and leans towards the mouse. As the next sheet rises, the hero recedes beneath it. */
.stack { position: relative; isolation: isolate; }
.stack > .hero { z-index: 1; }
.stack > .trust-bar { z-index: 2; }
.stack > :nth-child(n+2) { z-index: 3; }
.stack > :not(.hero) { z-index: 3; }
.stack > #services { position: relative; isolation: isolate; margin-top: 7svh; padding-bottom: calc(var(--s-section) + var(--sheet)); border-radius: var(--sheet) var(--sheet) 0 0; background: var(--bg); box-shadow: inset 0 1px 0 #faf6ee2e,0 -14px 44px -4px #0a162247; }
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--bg); }
.hero-stage { position: relative; min-height: max(100svh,640px); display: flex; align-items: center; padding-block: calc(var(--header-height) + 34px) 92px; transform-origin: 50% 40%; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: center; gap: clamp(16px,3vw,48px); }
.hero-copy { position: relative; z-index: 3; min-width: 0; }
.hero-copy h1 { margin-bottom: 26px; font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.hero-copy h1 em { font-style: normal; color: var(--rose); }
.headline-line { display: block; }
.hero-copy .headline-line { overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; perspective: 800px; }
.hero-copy .headline-line > span { display: block; transform-origin: 50% 0; }
.hero-copy > p { max-width: 40ch; color: var(--fg); font-size: var(--t-lead); line-height: 1.45; }
.hero-copy .cta-row { margin-top: 32px; gap: 14px; }
.hero-copy .btn { min-height: 58px; padding-inline: 30px; font-size: 1.06rem; }
.hero-copy .hero-trust { max-width: 52ch; margin-top: 22px; color: var(--fg-2); font-size: .95rem; line-height: 1.5; }
.loan-chips { margin-top: 28px; }
.loan-chips-label { margin-bottom: 10px; color: var(--fg-2); font-size: 1rem; font-weight: 500; }
.loan-chips ul { display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; list-style: none; }
.hero-copy .loan-chip { min-height: 44px; padding: 8px 18px; font-size: .95rem; white-space: nowrap; }
.hero-art { position: relative; z-index: 2; justify-self: center; width: min(100%,calc(min(74svh,720px) * .8)); aspect-ratio: 720 / 900; }
.art-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side,#146b9fa6 0%,#0b4a7859 52%,transparent 100%); }
.art-glint { display: none; }
.art-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--tilt-x,-5deg)) rotateY(var(--tilt-y,-15deg)) rotateZ(-7deg); transition: transform var(--bm-reveal) var(--bm-unfold); }
.art-float { position: absolute; inset: 0; }
.b-defs { position: absolute; width: 0; height: 0; }
.b-part { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-part path { stroke: #97d0f261; stroke-width: .7; }
.b-shadow path { stroke: none; }
.b-shadow { object-fit: contain; opacity: .85; }
.b-sheen { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(assets/brand/b-silhouette.svg) center / 100% 100% no-repeat; mask: url(assets/brand/b-silhouette.svg) center / 100% 100% no-repeat; }
.b-sheen > span { position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; background: linear-gradient(105deg,transparent 0%,#fffcf64d 50%,transparent 100%); transform: translate3d(-130%,0,0); }
.hero-foot { position: absolute; z-index: 5; bottom: 22px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: center; gap: 18px; }
.hero-scroll-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--fg-2); font-size: .9rem; font-weight: 500; }
.scroll-track { position: relative; display: block; width: 44px; height: 2px; overflow: hidden; border-radius: 2px; background: #faf6ee33; }
.scroll-track > span { position: absolute; inset: 0; width: 16px; border-radius: 2px; background: var(--rose); }
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero .headline-line > span { animation: bm-hinge var(--bm-section) var(--bm-unfold) backwards; }
  .motion-enabled .hero .headline-line + .headline-line > span { animation-delay: .07s; }
  .motion-enabled .hero-copy > :not(h1) { animation: bm-rise var(--bm-reveal) var(--bm-unfold) backwards; animation-delay: .32s; }
  .motion-enabled .hero-copy > .cta-row { animation-delay: .38s; }
  .motion-enabled .hero-copy > .loan-chips { animation: none; }
  .motion-enabled .loan-chips-label { animation: bm-rise var(--bm-reveal) var(--bm-unfold) .44s backwards; }
  .motion-enabled .loan-chips li { animation: bm-rise .5s var(--bm-unfold) calc(.4s + var(--c,0) * 30ms) backwards; }
  .loan-chips li:nth-child(2) { --c: 1; } .loan-chips li:nth-child(3) { --c: 2; } .loan-chips li:nth-child(4) { --c: 3; } .loan-chips li:nth-child(5) { --c: 4; } .loan-chips li:nth-child(6) { --c: 5; } .loan-chips li:nth-child(7) { --c: 6; }
  .motion-enabled .hero-copy > .hero-trust { animation-delay: .44s; }
  .motion-enabled .hero-foot { animation: bm-fade var(--bm-reveal) var(--bm-quick) .9s backwards; }
  .motion-enabled .b-stem { animation: bm-settle-stem var(--bm-section) var(--bm-unfold) .1s backwards; }
  .motion-enabled .b-top { animation: bm-settle-top var(--bm-section) var(--bm-unfold) .26s backwards; }
  .motion-enabled .b-bottom { animation: bm-settle-bottom var(--bm-section) var(--bm-unfold) .42s backwards; }
  .motion-enabled .b-shadow { animation: bm-fade-shadow var(--bm-section) var(--bm-quick) .5s backwards; }
  .motion-enabled .art-glow { animation: bm-breathe 9s ease-in-out infinite alternate; }
  .motion-enabled .art-float { animation: bm-b-drift 8s ease-in-out infinite; }
  .motion-enabled .b-sheen > span { animation: bm-sheen 8s var(--bm-settle) 1.7s infinite; }
  .motion-enabled .scroll-track > span { animation: bm-nudge 2.4s ease-in-out infinite; }
  .hero.is-off :is(.art-glow,.art-float,.b-sheen > span,.scroll-track > span) { animation-play-state: paused !important; }
}
@keyframes bm-hinge { from { opacity: 0; transform: rotateX(-55deg); } to { opacity: 1; transform: none; } }
@keyframes bm-rise { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: none; } }
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-fade-shadow { from { opacity: 0; } to { opacity: .85; } }
@keyframes bm-settle-stem { from { opacity: 0; transform: translate3d(-11%,8%,0) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes bm-settle-top { from { opacity: 0; transform: translate3d(12%,-11%,0) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes bm-settle-bottom { from { opacity: 0; transform: translate3d(12%,11%,0) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes bm-breathe { from { opacity: .72; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes bm-b-drift { 0%,100% { transform: translate3d(0,-9px,0) rotate(-.9deg); } 50% { transform: translate3d(0,9px,0) rotate(.9deg); } }
@keyframes bm-sheen { from { transform: translate3d(-130%,0,0); } 42%,to { transform: translate3d(330%,0,0); } }
@keyframes bm-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
.js .stack > .hero { position: sticky; top: var(--stick,0px); }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); }
  .hero-stage { align-items: flex-start; padding-block: calc(var(--header-height) + 34px) 76px; }
  .hero-art { height: clamp(210px,calc(100svh - var(--header-height) - 590px),400px); width: auto; margin-top: 8px; }
  .hero-copy .cta-row > * { flex: 1 1 auto; }
  .hero-foot { justify-content: flex-end; bottom: 14px; }
  .hero-scroll-link { display: none; }
}
@media (max-width: 700px) {
  .hero-copy h1 { margin-bottom: 18px; font-size: clamp(3.2rem,14.4vw,4.4rem); }
  .hero-copy .btn { min-height: 54px; padding-inline: 22px; font-size: 1rem; }
  .hero-copy .cta-row { margin-top: 22px; gap: 10px; }
  .hero-copy .hero-trust { margin-top: 14px; }
  .loan-chips { margin-top: 20px; }
  .loan-chips ul { max-width: none; margin: -2px calc(var(--gutter) * -1) -24px; padding: 2px var(--gutter) 24px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .loan-chips ul::-webkit-scrollbar { display: none; }
  .loan-chips li { flex: none; scroll-snap-align: start; }
}
/* As the next sheet rises, what sits beneath it recedes and dims. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stack { timeline-scope: --rise-0,--rise-1,--rise-2,--rise-3; }
    .stack > .feature:nth-of-type(n) { view-timeline-inset: 0; }
    #services { view-timeline: --rise-0 block; } #talk { view-timeline: --rise-1 block; } #apply-fast { view-timeline: --rise-2 block; } #stand { view-timeline: --rise-3 block; }
    html:not(.scrub-on) .hero-stage { animation: bm-recede linear both; animation-timeline: --rise-0; animation-range: entry 0% entry 90svh; }
    html:not(.scrub-on) #services > .container { animation: bm-recede linear both; animation-timeline: --rise-1; animation-range: entry 0% entry 70svh; }
    html:not(.scrub-on) #talk > .container { animation: bm-recede linear both; animation-timeline: --rise-2; animation-range: entry 0% entry 70svh; }
    html:not(.scrub-on) #apply-fast > .container { animation: bm-recede linear both; animation-timeline: --rise-3; animation-range: entry 0% entry 70svh; }
    @keyframes bm-recede { from { transform: none; opacity: 1; } to { transform: scale(.93) translate3d(0,-3%,0); opacity: .35; } }
  }
}

/* 8 ─ Home */
/* Trust strip: large calm figures on a graded band. Rendered only when real figures exist. */
.trust-bar { position: relative; isolation: isolate; border-radius: var(--sheet) var(--sheet) 0 0; margin-top: calc(var(--sheet) * -1); box-shadow: var(--shadow-sheet); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px 32px; padding-block: 48px; }
.trust-stat b { display: block; color: var(--fg); font: 500 clamp(3rem,5.4vw,5.4rem)/1 var(--display); font-variation-settings: 'opsz' 72; letter-spacing: -.02em; }
.trust-stat span { display: block; margin-top: 10px; color: var(--fg-2); font-weight: 500; }

/* Colour-blocked features: about one screen each, one big headline, two lines, one action, one living graphic. */
.feature { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; margin-top: calc(var(--sheet) * -1); padding-block: calc(var(--s-section) * .8); border-radius: var(--sheet) var(--sheet) 0 0; background: var(--bg); color: var(--fg-2); box-shadow: var(--shadow-sheet); transform-origin: 50% 0; }
.feature-inner { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: clamp(32px,6vw,96px); }
.feature-flip .feature-inner { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
.feature-flip .feature-copy { order: 2; }
.feature-copy h2 { margin-bottom: 24px; }
.feature-copy .lead { max-width: 34ch; color: var(--fg-2); }
.feature-action { margin-top: 36px; }
.feature-action .btn { min-height: 58px; padding-inline: 32px; font-size: 1.06rem; }
.rib { color: var(--key); }
@media (min-height: 501px) { .js .stack > :is(#services,.feature,.section,.panel,.form-workspace) { position: sticky; top: var(--stick,0px); } }
@media (max-width: 920px) {
  .feature { min-height: 0; padding-block: calc(var(--sheet) + 48px) calc(var(--sheet) + 56px); }
  .feature-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feature-copy { display: contents; }
  .feature-copy h2 { order: 1; margin-bottom: 16px; }
  .feature-copy .lead { order: 2; }
  .gfx-wrap { order: 3; margin-top: 36px; }
  .feature-action { order: 4; margin-top: 36px; }
  .feature-action .btn { width: 100%; }
}

/* Living graphics. The default state is the final frame, so no JS and reduced motion both show them complete.
   graphics.js arms a graphic, then plays it only while it is on screen. */
.gfx-wrap { position: relative; isolation: isolate; min-width: 0; }
.gfx-wrap:hover { perspective: 1200px; }
.gfx > [data-a=float] { position: relative; }
.gfx > [data-a=float]::before { content: ''; position: absolute; inset: 6% -6% -10%; z-index: -1; border-radius: 44px; background: radial-gradient(closest-side,#0a1622a6,#0a162200); opacity: .85; pointer-events: none; transition: opacity var(--bm-reveal) var(--bm-unfold); }
.gfx-wrap:hover > .gfx > [data-a=float]::before { opacity: 1; }
.gfx { position: relative; width: 100%; max-width: 600px; margin-inline: auto; transition: transform var(--bm-hover) var(--bm-quick); }
.gfx-wrap:hover .gfx { transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.gfx-card { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--cream-card); color: var(--ink); box-shadow: 0 2px 4px #0a16221a; contain: layout paint; font-size: clamp(1rem,1.25vw,1.125rem); line-height: 1.4; }
.gfx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--cream); }
.gfx-who { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); font-weight: 600; }
.gfx-who img { flex: none; width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: var(--navy); object-fit: contain; }
.gfx-tag { flex: none; padding: 4px 12px; border-radius: var(--r-pill); background: var(--sky-tint); color: var(--blue); font-size: .875rem; font-weight: 600; }
.gfx-pop { position: absolute; z-index: -1; bottom: calc(100% - 10px); right: 28px; max-width: calc(100% - 56px); padding: 9px 16px 18px; border-radius: 14px 14px 0 0; background: var(--navy); color: var(--cream-2); font-size: .875rem; font-weight: 500; line-height: 1.35; box-shadow: inset 0 1px 0 #faf6ee2e; }
.gfx.is-armed [data-a] { animation-duration: var(--d); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--bm-unfold); }
/* Off-screen graphics pause. Stopping them outright frees layers but makes a visible hitch when they restart. */
.gfx.is-armed:not(.is-playing) [data-a] { animation-play-state: paused; }
.gfx.is-playing [data-a] { animation-play-state: running; }
.gfx.is-armed [data-a=float] { animation-name: gfx-float; animation-duration: 7s; animation-timing-function: ease-in-out; }
@keyframes gfx-float { 0%,100% { transform: translate3d(0,-6px,0); } 50% { transform: translate3d(0,6px,0); } }

/* Chat */
.gfx-chat { --d: 12s; }
.chat-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: clamp(250px,24vw,330px); padding: 24px; }
.bubble { max-width: 82%; padding: 12px 16px; border-radius: 18px; }
.bubble-out { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--blue); color: var(--cream-card); }
.bubble-in { border-bottom-left-radius: 6px; background: var(--cream); color: var(--ink); }
.bubble-tick { display: flex; justify-content: flex-end; margin-top: 4px; }
.bubble-tick svg { width: 20px; height: 12px; fill: none; stroke: var(--sky); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-slot { position: relative; }
.chat-typing { position: absolute; top: 0; left: 0; display: flex; gap: 5px; padding: 15px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--cream); opacity: 0; }
.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.chat-input { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--cream); color: var(--ink-3); font-size: .95rem; }
.chat-input svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--blue); }
.gfx.is-armed [data-a=msg] { animation-name: chat-msg; }
.gfx.is-armed [data-a=typing] { animation-name: chat-typing; }
.gfx.is-armed [data-a=dot] { animation-name: chat-dot; animation-duration: 1s; animation-timing-function: ease-in-out; }
.gfx.is-armed [data-a=dot]:nth-child(2) { animation-delay: .14s; }
.gfx.is-armed [data-a=dot]:nth-child(3) { animation-delay: .28s; }
.gfx.is-armed [data-a=reply] { animation-name: chat-reply; }
.gfx.is-armed [data-a=read] { animation-name: chat-read; animation-timing-function: var(--bm-quick); }
@keyframes chat-msg { 0%,4% { opacity: 0; transform: translate3d(28px,10px,0) scale(.95); } 10%,93% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes chat-typing { 0%,13% { opacity: 0; transform: scale(.8); } 16%,32% { opacity: 1; transform: none; } 35%,100% { opacity: 0; transform: none; } }
@keyframes chat-dot { 0%,60%,100% { transform: none; } 30% { transform: translate3d(0,-5px,0); } }
@keyframes chat-reply { 0%,33% { opacity: 0; transform: translate3d(-22px,8px,0) scale(.9); } 38% { opacity: 1; transform: scale(1.02); } 42%,93% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes chat-read { 0%,44% { clip-path: inset(0 100% 0 0); } 50%,100% { clip-path: inset(0 0 0 0); } }

/* Self-filling form */
.gfx-form { --d: 13s; }
.form-mock { display: grid; gap: 14px; padding: 24px; }
.mock-field { position: relative; display: block; }
.mock-label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: .875rem; font-weight: 500; }
.mock-input { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--r-field); background: var(--cream); color: var(--ink); font-weight: 500; }
.mock-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--blue),0 0 0 6px #146b9f33; opacity: 0; }
.type { position: relative; display: inline-block; white-space: nowrap; }
.type-caret { position: absolute; inset: 0; border-right: 2px solid var(--blue); opacity: 0; }
.mock-btn { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 54px; margin-top: 4px; border-radius: var(--r-pill); background: var(--crimson); color: var(--cream-card); font-weight: 600; }
.mock-ripple { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: #fffcf666; opacity: 0; }
.mock-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: var(--cream-card); }
.mock-done svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gfx.is-armed [data-a=body] { animation-name: gfx-body; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=t1] { animation-name: type-1; animation-timing-function: steps(14); }
.gfx.is-armed [data-a=c1] { animation-name: caret-1; animation-timing-function: steps(14); }
.gfx.is-armed [data-a=r1] { animation-name: ring-1; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=t2] { animation-name: type-2; animation-timing-function: steps(12); }
.gfx.is-armed [data-a=c2] { animation-name: caret-2; animation-timing-function: steps(12); }
.gfx.is-armed [data-a=r2] { animation-name: ring-2; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=t3] { animation-name: type-3; animation-timing-function: steps(14); }
.gfx.is-armed [data-a=c3] { animation-name: caret-3; animation-timing-function: steps(14); }
.gfx.is-armed [data-a=r3] { animation-name: ring-3; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=press] { animation-name: mock-press; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=ripple] { animation-name: mock-ripple; animation-timing-function: var(--bm-unfold); }
.gfx.is-armed [data-a=done] { animation-name: mock-done; animation-timing-function: var(--bm-unfold); }
.gfx.is-armed [data-a=check] { animation-name: mock-check; animation-timing-function: var(--bm-quick); }
@keyframes gfx-body { 0% { opacity: 0; } 3%,93% { opacity: 1; } 98%,100% { opacity: 0; } }
@keyframes type-1 { 0%,5% { clip-path: inset(0 100% 0 0); } 17%,100% { clip-path: inset(0 0 0 0); } }
@keyframes caret-1 { 0%,5% { transform: translateX(-100%); opacity: 0; } 5.1% { opacity: 1; transform: translateX(-100%); } 17% { transform: none; opacity: 1; } 19%,100% { transform: none; opacity: 0; } }
@keyframes ring-1 { 0%,4% { opacity: 0; } 6%,17% { opacity: 1; } 19%,100% { opacity: 0; } }
@keyframes type-2 { 0%,20% { clip-path: inset(0 100% 0 0); } 30%,100% { clip-path: inset(0 0 0 0); } }
@keyframes caret-2 { 0%,20% { transform: translateX(-100%); opacity: 0; } 20.1% { opacity: 1; transform: translateX(-100%); } 30% { transform: none; opacity: 1; } 32%,100% { transform: none; opacity: 0; } }
@keyframes ring-2 { 0%,19% { opacity: 0; } 21%,30% { opacity: 1; } 32%,100% { opacity: 0; } }
@keyframes type-3 { 0%,33% { clip-path: inset(0 100% 0 0); } 44%,100% { clip-path: inset(0 0 0 0); } }
@keyframes caret-3 { 0%,33% { transform: translateX(-100%); opacity: 0; } 33.1% { opacity: 1; transform: translateX(-100%); } 44% { transform: none; opacity: 1; } 46%,100% { transform: none; opacity: 0; } }
@keyframes ring-3 { 0%,32% { opacity: 0; } 34%,44% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes mock-press { 0%,50% { transform: none; } 52% { transform: scale(.97); } 55%,100% { transform: none; } }
@keyframes mock-ripple { 0%,50% { opacity: 0; transform: scale(.3); } 51% { opacity: 1; transform: scale(.3); } 59%,100% { opacity: 0; transform: scale(7); } }
@keyframes mock-done { 0%,54% { clip-path: circle(0% at 50% 50%); } 61%,100% { clip-path: circle(80% at 50% 50%); } }
@keyframes mock-check { 0%,60% { clip-path: inset(0 100% 0 0); } 65%,100% { clip-path: inset(0 0 0 0); } }

/* Status tracker */
.gfx-track { --d: 11s; }
.track { display: grid; padding: 30px 26px 14px; }
.track-step { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 18px; padding-bottom: 32px; }
.track-step:last-child { padding-bottom: 18px; }
.track-line { position: absolute; left: 14px; top: 26px; bottom: -4px; width: 2px; overflow: hidden; background: var(--hairline); }
.track-line > span { position: absolute; inset: 0; background: var(--blue); transform-origin: 50% 0; }
.track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: var(--cream-card); }
.track-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.track-glow { position: absolute; z-index: 0; top: -9px; left: -9px; width: 48px; height: 48px; border-radius: 50%; background: #146b9f47; opacity: 0; }
.track-step:last-child .track-dot { background: var(--crimson); }
.track-step:last-child .track-glow { background: #c32c4647; opacity: 1; }
.track-text b { display: block; color: var(--ink); font-size: 1.2em; font-weight: 600; line-height: 1.3; }
.track-text > span { display: block; margin-top: 3px; color: var(--ink-2); font-size: .95em; }
.gfx.is-armed [data-a=d1] { animation-name: dot-1; } .gfx.is-armed [data-a=d2] { animation-name: dot-2; } .gfx.is-armed [data-a=d3] { animation-name: dot-3; }
.gfx.is-armed [data-a=l1] { animation-name: line-1; animation-timing-function: var(--bm-settle); } .gfx.is-armed [data-a=l2] { animation-name: line-2; animation-timing-function: var(--bm-settle); }
.gfx.is-armed [data-a=g1] { animation-name: glow-1; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=g2] { animation-name: glow-2; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=g3] { animation-name: glow-3; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=x1] { animation-name: text-1; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=x2] { animation-name: text-2; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=x3] { animation-name: text-3; animation-timing-function: var(--bm-quick); }
@keyframes dot-1 { 0%,3% { transform: scale(0); } 7% { transform: scale(1.18); } 10%,100% { transform: none; } }
@keyframes dot-2 { 0%,28% { transform: scale(0); } 32% { transform: scale(1.18); } 35%,100% { transform: none; } }
@keyframes dot-3 { 0%,53% { transform: scale(0); } 57% { transform: scale(1.18); } 60%,100% { transform: none; } }
@keyframes line-1 { 0%,12% { transform: scaleY(0); } 28%,100% { transform: none; } }
@keyframes line-2 { 0%,37% { transform: scaleY(0); } 53%,100% { transform: none; } }
@keyframes glow-1 { 0%,6% { opacity: 0; transform: scale(.5); } 12%,26% { opacity: 1; transform: none; } 30%,100% { opacity: 0; } }
@keyframes glow-2 { 0%,31% { opacity: 0; transform: scale(.5); } 37%,51% { opacity: 1; transform: none; } 55%,100% { opacity: 0; } }
@keyframes glow-3 { 0%,56% { opacity: 0; transform: scale(.5); } 62%,68%,80% { opacity: 1; transform: none; } 74% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
@keyframes text-1 { 0%,4% { opacity: .35; } 10%,100% { opacity: 1; } }
@keyframes text-2 { 0%,29% { opacity: .35; } 35%,100% { opacity: 1; } }
@keyframes text-3 { 0%,54% { opacity: .35; } 60%,100% { opacity: 1; } }

/* Documents checklist */
.gfx-docs { --d: 9s; }
.docs-mock { display: grid; gap: 10px; padding: 20px 24px 24px; }
.docs-mock li { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 16px; border-radius: 14px; background: var(--cream); color: var(--ink); font-weight: 500; }
.docs-box { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--blue); color: var(--cream-card); }
.docs-box svg { position: absolute; inset: 5px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.gfx.is-armed [data-a=b1] { animation-name: box-1; } .gfx.is-armed [data-a=b2] { animation-name: box-2; } .gfx.is-armed [data-a=b3] { animation-name: box-3; } .gfx.is-armed [data-a=b4] { animation-name: box-4; }
.gfx.is-armed [data-a=k1] { animation-name: tick-1; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=k2] { animation-name: tick-2; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=k3] { animation-name: tick-3; animation-timing-function: var(--bm-quick); } .gfx.is-armed [data-a=k4] { animation-name: tick-4; animation-timing-function: var(--bm-quick); }
@keyframes box-1 { 0%,8% { transform: scale(.7); opacity: .3; } 12% { transform: scale(1.14); opacity: 1; } 15%,100% { transform: none; opacity: 1; } }
@keyframes box-2 { 0%,24% { transform: scale(.7); opacity: .3; } 28% { transform: scale(1.14); opacity: 1; } 31%,100% { transform: none; opacity: 1; } }
@keyframes box-3 { 0%,40% { transform: scale(.7); opacity: .3; } 44% { transform: scale(1.14); opacity: 1; } 47%,100% { transform: none; opacity: 1; } }
@keyframes box-4 { 0%,56% { transform: scale(.7); opacity: .3; } 60% { transform: scale(1.14); opacity: 1; } 63%,100% { transform: none; opacity: 1; } }
@keyframes tick-1 { 0%,10% { clip-path: inset(0 100% 0 0); } 15%,100% { clip-path: inset(0 0 0 0); } }
@keyframes tick-2 { 0%,26% { clip-path: inset(0 100% 0 0); } 31%,100% { clip-path: inset(0 0 0 0); } }
@keyframes tick-3 { 0%,42% { clip-path: inset(0 100% 0 0); } 47%,100% { clip-path: inset(0 0 0 0); } }
@keyframes tick-4 { 0%,58% { clip-path: inset(0 100% 0 0); } 63%,100% { clip-path: inset(0 0 0 0); } }

/* Services: list on the left, the active loan expands; the graded photo beside it crossfades. */
.explorer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: stretch; gap: clamp(32px,5vw,72px); }
.loan-list { display: grid; gap: 8px; }
.loan { position: relative; overflow: hidden; border-radius: 20px; background: transparent; transition: background-color var(--bm-hover) var(--bm-quick); }
.loan.is-current { background: var(--card); }
.loan-photo,.loan-progress { display: none; }
.loan-head { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 66px; padding: 12px 22px; color: var(--fg); font: 500 clamp(1.3rem,2vw,1.75rem)/1.2 var(--display); font-variation-settings: 'opsz' 72; letter-spacing: -.012em; text-align: left; transition: color var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick); }
.loan-icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--sky); }
.loan.is-current .loan-icon { color: var(--rose); }
.loan-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.js .loan-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bm-reveal) var(--bm-settle); }
.loan-body > div { min-height: 0; overflow: hidden; }
.js .loan.is-current .loan-body { grid-template-rows: 1fr; }
.loan-body p { max-width: 46ch; padding: 0 22px 0 62px; }
.loan-body .text-link { margin: 6px 0 14px 62px; }
.loan-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; pointer-events: none; }
.loan-time > span { display: block; height: 100%; background: var(--crimson-2); transform: scaleX(0); transform-origin: 0 50%; }
.loan.is-current .loan-time > span { animation: bm-loan-time 6s linear both; animation-play-state: paused; }
.is-running .loan.is-current .loan-time > span { animation-play-state: running; }
@keyframes bm-loan-time { to { transform: scaleX(1); } }
.art-bg { background: radial-gradient(90% 70% at 88% 6%,#146b9f8c,transparent 70%),radial-gradient(70% 60% at 6% 100%,#c32c4640,transparent 72%),linear-gradient(160deg,var(--deep),var(--navy)); }
.explorer-visual { --bg: var(--deep); --g1: #146b9f; --g1-o: .78; --g2: #c32c46; --g2-o: .34; position: relative; isolation: isolate; min-height: min(78svh,680px); overflow: hidden; border-radius: var(--r-card); background: var(--bg); box-shadow: 0 40px 90px -40px #0a1622; }
.explorer-visual .lit i { width: 65%; }
.explorer-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bm-reveal [data-reveal=image]:not(.is-in) img { scale: 1.08; }
.bm-reveal [data-reveal=image].is-in img { transition: scale var(--bm-section) var(--bm-unfold); }
.explorer-visual .loan-art.is-on { opacity: 1; }
.loan-art path:not(.art-fill) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.art-blue,.art-red { stroke-width: 7; }
.art-thin { stroke-width: 3; stroke-opacity: .85; }
.art-soft { stroke-width: 2.5; stroke-opacity: .5; }
.loan-art .art-glow { fill-opacity: .55; }
.art-beam .art-glow { fill-opacity: .22; }
.loan-art path.art-lane { stroke-width: 4; stroke-dasharray: 26 22; stroke-opacity: .7; }
/* The default is the finished scene, so no JS and Reduce Motion both show it complete. */
@media (prefers-reduced-motion: no-preference) {
  .bm-reveal .explorer:not(.is-seen) .loan-art path { opacity: 0; }
  .explorer-visual .loan-art.is-on { animation: art-in var(--bm-reveal) var(--bm-unfold); }
  .explorer.is-seen :is(.explorer-visual .loan-art.is-on,.loan.is-current .loan-art) path:not(.art-fill,.art-lane) { animation: art-draw 1.2s var(--bm-settle) calc(var(--n) * 55ms) both; }
  .explorer.is-seen :is(.explorer-visual .loan-art.is-on,.loan.is-current .loan-art) :is(.art-fill,.art-lane) { animation: art-fade .9s var(--bm-quick) .7s both; }
  :is(.explorer-visual .loan-art.is-on,.loan.is-current .loan-art) {
    .art-back { animation: art-par-a 15s ease-in-out infinite alternate; }
    .art-mid { animation: art-par-b 11s ease-in-out infinite alternate; }
    .art-front { animation: art-par-c 8s ease-in-out infinite alternate; }
    .art-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: art-spin 2.4s linear infinite; }
    .art-lane { animation: art-fade .9s var(--bm-quick) .7s both,art-lane 1.2s linear infinite; }
    .art-whoosh { animation: art-whoosh 1.8s ease-in-out infinite; }
    .art-beam { animation: art-pulse 3.4s ease-in-out infinite; }
    .art-cloud { animation: art-cloud 12s ease-in-out infinite alternate; }
    .art-smoke { animation: art-smoke 4.4s ease-out infinite; }
    .art-win-a { animation: art-pulse 4.2s ease-in-out infinite; }
    .art-win-b { animation: art-pulse 5.6s ease-in-out 1.2s infinite; }
    .art-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: art-sway 4.8s ease-in-out infinite alternate; }
    .art-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: art-bar 4.8s var(--bm-unfold) infinite; }
    .art-bar-b { animation-delay: .35s; } .art-bar-c { animation-delay: .7s; }
    .art-sign { transform-box: fill-box; transform-origin: 50% 0; animation: art-sign 3.6s ease-in-out infinite alternate; }
    .art-flip { transform-box: fill-box; transform-origin: 50% 0; animation: art-flip 6s var(--bm-settle) 1.6s infinite; }
    .art-rise { animation: art-rise 5.4s ease-in-out infinite alternate; }
    .art-bob { animation: art-bob 4.6s ease-in-out infinite alternate; }
    .art-bob-late { animation-delay: -2.2s; }
    .art-swing { transform-box: view-box; transform-origin: 170px 40px; animation: art-swing 5.2s ease-in-out infinite alternate; }
    .art-star { transform-box: fill-box; transform-origin: 50% 50%; animation: art-star 3.8s ease-in-out infinite; }
    .art-star-b { animation-delay: 1.2s; } .art-star-c { animation-delay: 2.3s; }
    .art-float { animation: art-bob 5.4s ease-in-out infinite alternate; }
    .art-tassel { transform-box: view-box; transform-origin: 516px 160px; animation: art-tassel 3.2s ease-in-out infinite alternate; }
    .art-page { transform-box: view-box; transform-origin: 300px 400px; animation: art-page 6.4s var(--bm-settle) 1.6s infinite; }
    .art-win { animation: art-window 7.5s ease-in-out infinite; }
    .art-win-2 { animation-delay: 1.5s; } .art-win-3 { animation-delay: 3s; } .art-win-4 { animation-delay: 4.5s; } .art-win-5 { animation-delay: 6s; }
    .art-jib { transform-box: view-box; transform-origin: 124px 96px; animation: art-jib 9s ease-in-out infinite alternate; }
    .art-load { transform-box: view-box; transform-origin: 262px 96px; animation: art-load 4.5s ease-in-out infinite alternate; }
  }
  .explorer.is-off .loan-art * { animation-play-state: paused !important; }
  @keyframes art-in { from { opacity: 0; transform: scale(1.05); clip-path: inset(0 0 0 14%); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
  @keyframes art-draw { from { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes art-fade { from { opacity: 0; } }
  @keyframes art-drift { from { transform: translate3d(-7px,5px,0) rotate(-.7deg); } to { transform: translate3d(7px,-5px,0) rotate(.7deg); } }
  @keyframes art-par-a { from { transform: translate3d(-5px,3px,0); } to { transform: translate3d(5px,-3px,0); } }
  @keyframes art-par-b { from { transform: translate3d(-9px,5px,0); } to { transform: translate3d(9px,-5px,0); } }
  @keyframes art-par-c { from { transform: translate3d(-15px,3px,0); } to { transform: translate3d(15px,-3px,0); } }
  @keyframes art-spin { to { transform: rotate(360deg); } }
  @keyframes art-lane { to { stroke-dashoffset: -48; } }
  @keyframes art-whoosh { 0%,100% { transform: translate3d(14px,0,0); opacity: .2; } 50% { transform: translate3d(-12px,0,0); opacity: 1; } }
  @keyframes art-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes art-cloud { from { transform: translate3d(-22px,0,0); } to { transform: translate3d(42px,6px,0); } }
  @keyframes art-smoke { from { transform: translate3d(0,14px,0); opacity: 0; } 30% { opacity: 1; } to { transform: translate3d(6px,-22px,0); opacity: 0; } }
  @keyframes art-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
  @keyframes art-bar { 0%,8% { transform: scaleY(.25); } 45%,86% { transform: none; } 100% { transform: scaleY(.25); } }
  @keyframes art-sign { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  @keyframes art-flip { 0%,58%,100% { transform: none; opacity: 1; } 76% { transform: scaleY(0); opacity: 1; } 77% { transform: scaleY(0); opacity: 0; } 86% { transform: none; opacity: 0; } 92% { opacity: 1; } }
  @keyframes art-rise { from { transform: translate3d(0,28px,0); } to { transform: translate3d(0,-12px,0); } }
  @keyframes art-bob { from { transform: translate3d(0,8px,0); } to { transform: translate3d(0,-10px,0); } }
  @keyframes art-swing { from { transform: rotate(-4.5deg); } to { transform: rotate(4.5deg); } }
  @keyframes art-star { 0%,100% { transform: scale(.55) rotate(0); opacity: .25; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
  @keyframes art-tassel { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
  @keyframes art-page { 0%,50% { transform: none; opacity: 1; } 78% { transform: scaleX(-1); opacity: 1; } 82% { transform: scaleX(-1); opacity: 0; } 84% { transform: none; opacity: 0; } 94%,100% { transform: none; opacity: 1; } }
  @keyframes art-window { 0%,100% { opacity: .15; } 12%,40% { opacity: 1; } 55% { opacity: .15; } }
  @keyframes art-jib { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
  @keyframes art-load { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
}
#loan-visual-image { z-index: 1; }
@media (hover: hover) and (pointer: fine) { .loan:not(.is-current) .loan-head:hover { transform: translateX(6px); } .loan:not(.is-current):hover { background: #faf6ee0a; } }
@media (max-width: 700px) {
  .explorer { display: block; }
  .explorer-visual,.loan-time,.loan-icon { display: none; }
  .loan-list { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px calc((100vw - min(84vw,380px)) / 2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .loan-list::-webkit-scrollbar { display: none; }
  .loan,.loan.is-current { flex: 0 0 min(84vw,380px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: center; scroll-snap-stop: always; opacity: .6; transform: scale(.94); transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick); }
  .loan.is-current { opacity: 1; transform: none; }
  .loan-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); }
  .loan-photo img { width: 100%; height: 100%; object-fit: cover; }
  .loan-text { display: flex; flex: 1; flex-direction: column; padding: 20px; }
  .loan-text h3 { display: contents; }
  .loan-head,.loan.is-current .loan-head { min-height: 0; padding: 0 0 8px; pointer-events: none; font-size: 1.5rem; }
  .js .loan-body,.js .loan.is-current .loan-body { display: flex; flex: 1; }
  .loan-body > div { display: flex; flex-direction: column; overflow: visible; }
  .loan-body p { padding: 0; }
  .loan-body .text-link { margin: auto 0 0; padding-top: 8px; min-height: 48px; }
  .loan-progress { display: block; height: 3px; margin-top: 24px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .loan-progress > span { display: block; height: 100%; background: var(--crimson-2); transform: scaleX(var(--loan,.1428)); transform-origin: 0 50%; transition: transform var(--bm-hover) var(--bm-quick); }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      #services > .container { timeline-scope: --loans; }
      .loan-list { scroll-timeline: --loans inline; }
      @keyframes bm-slide { 0%,100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: none; } }
      .loan,.loan.is-current { opacity: 1; transform: none; transition: none; animation: bm-slide linear both; animation-timeline: view(inline); }
      @keyframes bm-loans { from { transform: scaleX(.1428); } to { transform: scaleX(1); } }
      .loan-progress > span { transition: none; animation: bm-loans linear both; animation-timeline: --loans; }
    }
  }
}

/* How it works: three colour-blocked tiles with large numbers, then the documents checklist on its own panel. */
.tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(380px,34vw,480px); padding: clamp(24px,2.6vw,40px); overflow: hidden; border-radius: var(--r-card); background: var(--bg); color: var(--fg-2); transition: transform var(--bm-hover) var(--bm-quick),box-shadow var(--bm-hover) var(--bm-quick); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fffcf6; opacity: 0; transition: opacity var(--bm-hover) var(--bm-quick); pointer-events: none; }
.tile-num { display: block; margin-bottom: auto; padding-bottom: 32px; color: var(--fg); font: 500 var(--t-number)/1 var(--display); font-variation-settings: 'opsz' 72; letter-spacing: -.03em; }
.tile h3 { margin-bottom: 10px; font-size: var(--t-card); }
.tile-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--fg); font-size: var(--t-fine); font-weight: 500; }
.tile.on-cream { background: var(--cream-card); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .tile:hover::after { opacity: .07; } }
.bm-reveal [data-reveal=tile]:not(.is-in) { opacity: 1; translate: none; clip-path: inset(100% 0 0 0 round var(--r-card)); scale: 1.08; }
.bm-reveal [data-reveal=tile].is-in { clip-path: inset(0 0 0 0 round var(--r-card)); scale: 1; transition: clip-path var(--bm-section) var(--bm-unfold) var(--reveal-delay,0ms),scale var(--bm-section) var(--bm-unfold) var(--reveal-delay,0ms); }
.docs-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,80px); margin-top: 16px; padding: clamp(32px,5vw,72px); border-radius: var(--r-card); background: var(--bg); color: var(--fg-2); }
.docs-panel h2 { margin-bottom: 18px; font-size: clamp(2.4rem,4.4vw,4.2rem); }
.docs-panel .section-action { margin-top: 32px; }
@media (max-width: 920px) {
  .tiles { grid-template-columns: minmax(0,1fr); }
  .tile { min-height: 300px; }
  .docs-panel { grid-template-columns: minmax(0,1fr); }
}

/* Partners, testimonials and the real documents list render only once real content exists. */
.docs { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 24px; }
.docs > div:first-child { grid-column: 1 / 6; }
.docs-list { grid-column: 6 / 13; }
.docs-list details { border-top: 1px solid var(--line); }
.docs-list details:last-child { border-bottom: 1px solid var(--line); }
.docs-list summary { min-height: 64px; padding-block: 18px; color: var(--fg); font-weight: 600; cursor: pointer; }
.docs-list ul { padding-bottom: 18px; }
.docs-list li { padding-block: 6px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.logo-grid li { display: grid; place-items: center; min-height: 120px; padding: 24px; border-radius: 20px; background: var(--card); }
.logo-grid img { max-height: 48px; width: auto; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.quotes blockquote { color: var(--fg); font: 500 1.3rem/1.35 var(--display); }
.quotes figcaption { margin-top: 18px; font-size: var(--t-fine); }
@media (max-width: 920px) { .docs { display: block; } .docs-list { margin-top: 28px; } }

/* In short: one large plain-language card. */
.tldr { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(28px,5vw,72px); padding: clamp(32px,6vw,88px); border-radius: var(--r-card); background: var(--cream-card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline),0 30px 70px -48px #10253a66; }
.tldr .lit { --g1: #146b9f; --g1-o: .13; --g2: #c32c46; --g2-o: .09; --grain-o: .035; }
.tldr h2 { font-size: var(--t-display); color: var(--ink); }
.tldr ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px clamp(24px,3vw,48px); }
.tldr li { color: var(--ink); font-size: clamp(1.1rem,1.5vw,1.3rem); font-weight: 500; line-height: 1.4; }
@media (max-width: 920px) { .tldr,.tldr ul { grid-template-columns: minmax(0,1fr); } }

/* Who we are: words on one side; a large lit panel with a crop of the ribbon B and the office card on the other. */
.who { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: clamp(32px,6vw,96px); }
.who-copy h2 { margin-bottom: 28px; }
.who-copy .lead { max-width: 34ch; margin-bottom: 18px; color: var(--fg); }
.who-copy > p:not(.lead) { max-width: 52ch; }
.who-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
.who-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px,50vw,720px); padding: clamp(16px,2vw,28px); border-radius: var(--r-card); background: var(--bg); }
.who-panel .panel-mark { position: absolute; z-index: 0; top: -14%; right: -22%; left: auto; bottom: auto; width: 96%; height: auto; aspect-ratio: 720 / 900; translate: none; rotate: -12deg; opacity: 1; }
.who-card { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; width: 100%; padding: clamp(20px,2.4vw,32px); border-radius: 20px; background: var(--cream-card); color: var(--ink-2); box-shadow: var(--shadow-raised); }
.who-card dt { margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.who-card dd { font-size: 1rem; line-height: 1.5; }
.who-card .live-status { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 920px) { .who { grid-template-columns: minmax(0,1fr); } .who-panel { min-height: 560px; } }
@media (max-width: 520px) { .who-card { grid-template-columns: minmax(0,1fr); } }

/* Questions: the accordion on a graded navy panel. */
.faq-layout { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 24px; }
.faq-intro { grid-column: 1 / 6; }
.faq-list { grid-column: 6 / 13; display: grid; gap: 10px; }
.faq-list details { border-radius: 20px; background: var(--card); transition: background-color var(--bm-hover) var(--bm-quick); }
.faq-list details:hover,.faq-list details.is-open { background: #faf6ee17; }
.faq-list summary,.optional-details summary { position: relative; min-height: 48px; padding: 22px 56px 22px 24px; color: var(--fg); font-size: clamp(1.05rem,1.5vw,1.25rem); font-weight: 600; letter-spacing: -.012em; line-height: 1.35; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.faq-list summary::after,.optional-details summary::after { content: '+'; position: absolute; top: 18px; right: 22px; color: var(--fg-2); font-size: 1.5rem; font-weight: 300; line-height: 1.2; transition: transform var(--bm-hover) var(--bm-quick); }
.faq-list details.is-open summary::after { transform: rotate(45deg); }
.optional-details[open] summary::after { transform: rotate(45deg); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bm-reveal) var(--bm-settle); }
.faq-body > div { min-height: 0; overflow: hidden; }
.is-open > .faq-body { grid-template-rows: 1fr; }
.faq-list p { max-width: 62ch; padding: 0 24px 22px; }
.faq-list .card-link { margin: 0 24px 18px; }
@media (max-width: 920px) { .faq-layout { display: block; } .faq-list { margin-top: 32px; } }

/* The big banner: full width, the B at scale, two actions. */
.cta-banner { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg-2); }
.cta-inner { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: clamp(300px,40svh,430px); }
.cta-inner > :not(.panel-mark) { position: relative; z-index: 1; max-width: 680px; }
.cta-inner h2 { font-size: clamp(2.4rem,4.4vw,4.4rem); }
.cta-inner p { margin-top: 18px; font-size: var(--t-lead); line-height: 1.45; }
.cta-inner .cta-row { margin-top: 26px; }
.cta-inner .btn { min-height: 52px; padding-inline: 28px; font-size: 1rem; }
#get-started { padding-block: clamp(48px,5vw,72px) calc(clamp(48px,5vw,72px) + var(--sheet)); }
.panel-mark { position: absolute; z-index: 0; right: clamp(-60px,-2vw,0px); top: 50%; height: 118%; aspect-ratio: 720 / 900; translate: 0 -50%; rotate: -9deg; pointer-events: none; }
.panel-mark .sculpture-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.panel-mark .mark-face path { stroke: #97d0f261; stroke-width: .7; }
.sculpture-float { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) { .sculpture-float { animation: bm-b-drift 8s ease-in-out infinite; } .is-off .sculpture-float { animation-play-state: paused; } }
@media (max-width: 920px) {
  .cta-inner { justify-content: flex-start; min-height: 0; padding-bottom: 170px; }
  .cta-inner .panel-mark { top: auto; bottom: -18px; right: -6%; height: 190px; translate: none; }
}

/* 9 ─ Inner pages: a typographic head on cream. */
.page-hero { padding-block: calc(var(--header-height) + clamp(56px,8vw,112px)) calc(clamp(56px,6vw,88px) + var(--sheet)); background: var(--bg); color: var(--fg-2); }
.page-hero-layout { display: block; }
.page-hero-copy { max-width: 1000px; }
.page-hero-copy h1 { margin-bottom: 24px; color: var(--fg); font-size: var(--t-page); line-height: 1.02; }
.page-hero-copy h1 em,.utility-copy h1 em,.cta-inner h2 em { font-style: normal; color: var(--key); }
.page-title-line { display: block; }
.page-hero-copy > p { max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 26px; }
.privacy-section { padding-block: clamp(56px,6vw,88px) calc(var(--s-section) + var(--sheet)); }
.privacy-content { columns: 1; }
.privacy-content h2 { margin-top: 44px; max-width: 30ch; font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1.2; letter-spacing: -.012em; }
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p { max-width: 68ch; margin-block: 14px; }
.utility-page { position: relative; min-height: 100svh; padding-block: calc(var(--header-height) + 96px) 120px; }
.utility-layout,.receipt-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(40px,6vw,90px); }
.utility-copy h1 { margin-block: 20px 28px; font-size: var(--t-page); line-height: 1.02; }
.utility-copy p { max-width: 49ch; margin-block: 16px; }
.utility-copy .cta-row { margin-top: 32px; }
.utility-mark { display: grid; place-items: center; opacity: .85; }
.utility-mark img { width: min(100%,280px); height: 300px; }
.error-number { display: block; margin-bottom: 28px; color: var(--accent); font: 500 clamp(3.5rem,7vw,6rem)/.95 var(--display); }
.receipt-check { display: grid; place-items: center; width: 56px; height: 56px; margin-block: 8px 4px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg); font-size: 1.6rem; }
.receipt-reference { display: block; margin-top: 8px; color: var(--fg); font-size: 1.15rem; letter-spacing: .07em; overflow-wrap: anywhere; }
.receipt-next { padding: clamp(28px,4vw,48px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.receipt-next h2 { margin-bottom: 28px; font-size: clamp(2.2rem,3.4vw,3.2rem); }
.receipt-next li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding-block: 20px; border-top: 1px solid var(--line); }
.receipt-next li > span { padding-top: 3px; color: var(--fg-2); font-size: .875rem; }
.receipt-next h3 { margin-bottom: 6px; font-size: 1.05rem; }
.receipt-next .receipt-note { padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-fine); }
#receipt-title:focus { outline: none; }
@media (max-width: 768px) { .utility-layout,.receipt-layout { grid-template-columns: 1fr; gap: 36px; } .utility-mark { display: none; } .utility-page { padding-block: calc(var(--header-height) + 56px) 64px; } }

/* 10 ─ Contact: a ranked bento. One radius, border and padding; navy leads, cream follows. */
#contact-options { padding-block: clamp(48px,6vw,88px) calc(var(--s-section) + var(--sheet)); scroll-margin-top: calc(var(--header-height) + 24px); }
.bento { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); grid-template-areas: "wa call" "wa email" "office office"; gap: 16px; }
.bento-wa { grid-area: wa; } .bento-call { grid-area: call; } .bento-email { grid-area: email; } .bento-office { grid-area: office; }
.bento-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--fg-2); transition: transform var(--bm-hover) var(--bm-quick),border-color var(--bm-hover) var(--bm-quick),box-shadow var(--bm-hover) var(--bm-quick); }
.bento-wa { padding: clamp(32px,4vw,52px); border-color: transparent; background: var(--bg); overflow: hidden; }
.bento-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.bento-wa .bento-top { justify-content: space-between; }
.bento-icon { display: grid; place-items: center; flex: none; color: var(--fg); transition: translate var(--bm-hover) var(--bm-quick); }
.bento-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.bento-icon-wa { color: var(--sky); }
.bento-icon-wa svg { width: 28px; height: 28px; }
.bento-top h2 { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; line-height: 1.3; }
.bento-arrow { margin-left: auto; color: var(--fg-3); font-size: 1.1rem; transition: transform var(--bm-hover) var(--bm-quick),color var(--bm-hover) var(--bm-quick); }
.bento-wa > h2 { margin: clamp(48px,7vw,104px) 0 12px; font-size: clamp(3rem,6vw,5.4rem); }
.bento-wa > p { margin-bottom: 32px; font-size: 1.1rem; }
.bento-wa .btn { width: 100%; min-height: 56px; margin-top: auto; }
.bento-big { display: block; margin: 28px 0 10px; color: var(--fg); font: 500 clamp(1.15rem,2.6vw,2.4rem)/1.12 var(--title); font-variation-settings: 'opsz' 72; letter-spacing: -.015em; overflow-wrap: anywhere; }
.bento-call .bento-big { font-size: clamp(1.8rem,3.6vw,3.3rem); white-space: nowrap; }
.bento-card p { max-width: 42ch; }
a.bento-big::before,.bento-wa .btn::before { content: ''; position: absolute; }
a.bento-big::before { inset: 0; border-radius: var(--r-card); }
.bento-secondary { position: relative; z-index: 1; margin-top: 12px; }
.copy-toast { position: absolute; z-index: 2; top: 24px; right: 24px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--navy); color: var(--cream-2); font-size: .875rem; font-weight: 500; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick); }
.copy-toast.is-on { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .bento-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-raised); }
  .bento-card:hover .bento-icon { translate: 0 -2px; }
  .bento-card:hover .bento-arrow { color: var(--fg); transform: translate(3px,-3px); }
}
.bento-card:has(.bento-big:active) { transform: scale(.98); }
.bento-office { display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: start; column-gap: clamp(32px,5vw,72px); padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.bento-office h2 { margin: 0 0 10px; font-family: var(--sans); font-size: 1rem; font-weight: 600; font-variation-settings: normal; letter-spacing: -.01em; line-height: 1.3; }
.bento-office .live-status { margin-bottom: 10px; }
.bento-office small { display: inline-block; margin-top: 4px; font-size: var(--t-fine); }
.bento-office strong { color: var(--fg); font-weight: 600; }
@media (max-width: 768px) {
  .bento { grid-template-columns: minmax(0,1fr); grid-template-areas: "wa" "call" "email" "office"; gap: 12px; }
  .bento-card,.bento-wa { padding: 20px; }
  .bento-wa > h2 { margin-top: 44px; font-size: clamp(2.8rem,14vw,4rem); }
  .bento-big { margin-top: 20px; font-size: clamp(1.1rem,5.4vw,1.9rem); }
  .bento-call .bento-big { font-size: clamp(1.6rem,8.2vw,2.6rem); }
  .bento-office { grid-template-columns: minmax(0,1fr); row-gap: 20px; padding: 20px; }
  .bento-secondary,.bento-office .text-link { min-height: 48px; }
  .copy-toast { top: 14px; right: 14px; }
}

/* 11 ─ Forms: one calm form card. */
.form-workspace { padding-block: clamp(48px,6vw,88px) calc(var(--s-section) + var(--sheet)); }











.aside-caption { display: block; margin-bottom: 8px; font-size: var(--t-fine); }





.form-panel { min-width: 0; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }








.cform { padding: 32px clamp(22px,4vw,48px) 0; }
fieldset { min-width: 0; border: 0; }
fieldset + fieldset { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.section-label { float: left; width: 100%; margin-bottom: 18px; padding: 0; color: var(--fg); font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.section-label + * { clear: both; }
.form-section-number { display: none; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { min-width: 0; margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; color: var(--fg); font-size: .95rem; font-weight: 500; line-height: 1.4; }
.field :is(input,select,textarea) { appearance: none; -webkit-appearance: none; display: block; width: 100%; padding: 14px 18px; border: 1px solid var(--field-edge); border-radius: var(--r-field); background-color: var(--field); color: var(--fg); caret-color: var(--accent); font: 400 1rem/1.4 var(--sans); transition: border-color var(--bm-hover) var(--bm-quick),box-shadow var(--bm-hover) var(--bm-quick); }
.field :is(input,select) { height: 56px; }
.field select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%233d4d5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.field select option { background: var(--cream-card); color: var(--ink); }
.field textarea { min-height: 126px; resize: vertical; }
.field :is(input,textarea)::placeholder { color: var(--fg-3); opacity: 1; }
.field :is(input,select,textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
.field :is(input,textarea):is(:-webkit-autofill,:autofill) { -webkit-text-fill-color: var(--fg); box-shadow: inset 0 0 0 1000px var(--field); }
.field [aria-invalid=true],.cform .field [aria-invalid=true]:focus { border-color: var(--crimson); }
.cform .field [aria-invalid=true]:focus { box-shadow: 0 0 0 4px #b51f3533; }
.field:has([aria-invalid=true]) label,.field-error { color: var(--crimson); }
.field-error { margin-top: 7px; font-size: var(--t-fine); line-height: 1.5; }
.form-feedback,.flash { margin-bottom: 22px; padding: 16px 18px; border: 1px solid var(--ribbon); border-radius: var(--r-field); background: var(--sky-tint); color: var(--ink); font-size: .95rem; }
.form-feedback,.flash.err { border-color: var(--crimson); background: var(--rose-tint); color: var(--ink); }
.step-next { margin: 4px 0 28px; min-height: 56px; }
.step-back { margin-bottom: 8px; }
.optional-details { margin: 6px 0 24px; border-block: 1px solid var(--line); }
.optional-details summary { padding: 16px 40px 16px 0; font-size: 1rem; }
.optional-details summary::after { top: 12px; right: 0; }
.optional-details .frow { margin-top: 8px; }
.form-submit-row { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.form-submit-row .btn-block { min-height: 56px; font-size: 1.05rem; margin-top: 0 !important; }
.form-note { font-size: var(--t-fine); line-height: 1.5; }
.form-safe { display: flex; gap: 12px; padding-top: 16px; font-size: var(--t-fine); line-height: 1.5; }
.form-safe svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fg); }
.form-safe span:first-child { color: var(--fg); font-weight: 500; }
.form-safe a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.privacy-note { margin: 16px calc(clamp(22px,4vw,48px) * -1) 0; padding: 18px clamp(22px,4vw,48px) 26px; border-top: 1px solid var(--line); font-size: var(--t-fine); line-height: 1.55; }
.privacy-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) { .frow { grid-template-columns: 1fr; gap: 0; }   }

/* 12 ─ Footer */
footer { margin-top: calc(var(--sheet) * -1); padding-block: calc(72px + var(--sheet)) 28px; border-radius: var(--sheet) var(--sheet) 0 0; background: var(--bg); color: var(--fg-2); font-size: .95rem; box-shadow: var(--shadow-sheet); }
.f-address { font-size: .9rem; line-height: 1.55; }
.foot-grid { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: clamp(32px,6vw,88px); padding-bottom: 64px; }
.foot-grid:has(.f-legal) { grid-template-columns: 1.3fr .7fr 1fr 1.1fr; }
.f-col { min-width: 0; }
.footer-brand { color: var(--fg); }
.footer-brand img { width: 26px; height: 30px; }
.f-tagline { margin-top: 14px; color: var(--fg); font-weight: 600; }
.f-tagline::after { content: ''; display: block; width: 28px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--crimson-2); }
.f-blurb { max-width: 36ch; margin-top: 16px; line-height: 1.65; }
.f-col .f-head { margin-bottom: 16px; color: var(--fg); font: 600 1rem/1.3 var(--sans); font-variation-settings: normal; letter-spacing: -.01em; }
.f-col ul { display: grid; gap: 2px; }
.f-col ul a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; overflow-wrap: anywhere; }
.f-col ul a svg { stroke-width: 1.5; }
.f-note { margin-top: 14px; font-size: var(--t-fine); }
footer .live-status { margin-top: 8px; }
.f-legal p { margin-bottom: 10px; font-size: var(--t-fine); }
.footer-utilities { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--t-fine); }
.footer-utilities a { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.back-top span { display: inline-block; transition: transform var(--bm-hover) var(--bm-quick); }
@media (hover: hover) { .back-top:hover span { transform: translateY(-3px); } }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--t-fine); }
.foot-bottom a { position: relative; }
footer :is(.footer-utilities,.foot-bottom) { padding-right: clamp(0px,calc(92px - var(--gutter)),92px); }
@media (max-width: 920px) { .foot-grid,.foot-grid:has(.f-legal) { grid-template-columns: 1fr 1fr; } .f-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid,.foot-grid:has(.f-legal) { grid-template-columns: 1fr; gap: 28px; } .foot-bottom { flex-direction: column; } }
@media (max-width: 920px) and (pointer: coarse) { .f-col ul a,.footer-utilities a { min-height: 48px; } }

/* 13 ─ Quick contact */
.float-stack { position: fixed; z-index: 40; right: max(20px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity var(--bm-hover) var(--bm-quick); }
.float-actions { display: flex; flex-direction: column; gap: 10px; }
.call-float,.wa-float,.float-toggle { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: var(--shadow-float); transition: transform var(--bm-hover) var(--bm-quick); }
.call-float,.float-toggle { border: 1px solid #faf6ee26; background: var(--navy); color: var(--cream-2); }
.wa-float { background: var(--ribbon); color: var(--cream-card); }
.call-float svg { width: 22px; height: 22px; stroke-width: 1.5; }
.wa-float svg { width: 28px; height: 28px; }
.float-toggle svg { width: 24px; height: 24px; }
.float-toggle { display: none; }
.js .float-toggle { display: grid; }
.float-toggle:active,.call-float:active,.wa-float:active { transform: scale(.98); }
.js .float-actions { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick),visibility 0s var(--bm-hover); }
.js .float-stack:is(.is-open,:has(.float-actions :focus-visible)) .float-actions { opacity: 1; visibility: visible; transform: none; transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick),visibility 0s; }
@media (hover: hover) and (pointer: fine) { .js .float-stack:hover .float-actions { opacity: 1; visibility: visible; transform: none; transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-hover) var(--bm-quick),visibility 0s; } }
.at-footer .float-stack,body:has(.site-header.menu-open,.cform :focus) .float-stack { opacity: 0; pointer-events: none; }
.quick-bar { display: none; }
@media (max-width: 768px) {
  .float-stack { display: none; }
  .quick-bar { position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr 1.25fr; align-items: center; gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #faf6ee1f; background: var(--navy); color: var(--cream-2); }
  .quick-bar a:not(.btn) { display: grid; place-items: center; min-height: 48px; font-size: .95rem; font-weight: 500; transition: transform var(--bm-hover) var(--bm-quick); }
  .quick-bar a:not(.btn):active { transform: scale(.98); }
  .quick-bar .btn { min-height: 48px; padding-inline: 12px; font-size: .95rem; white-space: nowrap; }
  .js .quick-bar { transform: translateY(110%); transition: transform var(--bm-hover) var(--bm-quick); }
  .js .quick-bar.is-shown { transform: none; box-shadow: 0 -18px 40px -28px var(--navy); }
  body:has(.site-header.menu-open,.cform :focus) .quick-bar { transform: translateY(110%); }
  footer :is(.footer-utilities,.foot-bottom) { padding-right: 0; }
  footer { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom)); }
}


/* 15 ─ Preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  html.bm-reveal [data-reveal]:not(.is-in) { translate: none; scale: none; clip-path: none; opacity: 0; }
  html.bm-reveal [data-reveal=image]:not(.is-in) { opacity: 0; }
  html.bm-reveal [data-reveal].is-in { clip-path: none; scale: none; transition: opacity var(--bm-hover) var(--bm-quick) !important; }
  html.bm-reveal :is(h1,h2):not(.is-in) .line-inner,html.bm-reveal .page-hero-copy h1:not(.is-in) .page-title-line > span { opacity: 1; transform: none; }
  html.bm-reveal:not(.is-loaded) :is(.page-hero-copy,.utility-copy) > :not(h1,.kicker) { opacity: 1; translate: none; }
  .art-tilt { transform: perspective(1200px) rotateX(-5deg) rotateY(-15deg) rotateZ(-7deg); }
  .js .stack > .hero,.js .stack > :is(#services,.feature,.section,.panel,.form-workspace) { position: relative; top: auto; }
  .site-header.is-tucked { transform: none; }
  .js .float-actions,.js .quick-bar { transition: none; }
}
@media (forced-colors: active) {
  .site-header::before,.receipt-next { background: Canvas; border-color: CanvasText; }
  .call-float,.wa-float,.float-toggle { border: 2px solid ButtonText; }
  .lit { display: none; }
}

/* 16 ─ Devices: what real iPhones, iPads and landscape screens need. */
.container { padding-inline: max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right)); }
@media (pointer: coarse) {
  /* Bigger touch areas without changing how anything looks. */
  .brand { position: relative; }
  .brand::after { content: ''; position: absolute; inset: -8px 0; }
}

/* A stacked hero whose B fills what is left of the first screen, whatever the browser's own bars take. */
@media (max-width: 920px),(max-width: 1100px) and (orientation: portrait) {
  .hero-grid { grid-template-columns: minmax(0,1fr); row-gap: 0; }
  .hero-stage { align-items: flex-start; padding-block: calc(var(--header-height) + 22px) 18px; }
  .hero-art { justify-self: center; height: clamp(170px,calc(100svh - var(--header-height) - var(--copy-h,var(--copy-guess,380px)) - 52px),min(48svh,620px)); width: auto; margin-top: 10px; }
  .hero-foot { justify-content: flex-end; bottom: 14px; }
  .hero-scroll-link { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  /* Close to the measured height, so the B barely changes size when the script measures it on load. */
  .hero-art { --copy-guess: 480px; }
  .hero-copy h1 { font-size: clamp(5rem,11.6vw,8rem); }
  .hero-copy > p { max-width: none; }
  .hero-copy .cta-row > * { flex: 0 0 auto; }
}
@media (min-width: 375px) and (max-width: 600px) {
  :root .hero-copy .cta-row { flex-wrap: nowrap; }
  :root .hero-copy .cta-row > .btn { flex: 1 1 0; gap: 8px; padding-inline: 8px; font-size: .95rem; white-space: nowrap; }
}
/* Narrow full navigation: tablets and big phones on their side. */
@media (min-width: 921px) and (max-width: 1040px) { .nav-links { gap: 6px; } .nav-actions { gap: 8px; } .header-apply { padding-inline: 14px; } }
/* Tall screens: a section stays a generous poster and never turns into a mostly empty one. */
@media (min-width: 921px) and (orientation: portrait) { .feature { min-height: min(100svh,880px); } }
@media (min-height: 1150px) and (orientation: landscape) { .feature { min-height: 1000px; } }
/* Phones on their side: little height, so the hero and features go back to two columns. */
@media (max-height: 500px) and (orientation: landscape) {
  .js .stack > :is(#services,.feature,.section,.panel,.form-workspace) { position: relative; top: auto; }
  .hero-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: start; gap: 16px; }
  .hero-stage { min-height: 0; align-items: flex-start; padding-block: calc(var(--header-height) + 18px) 28px; }
  .hero-copy h1 { margin-bottom: 12px; font-size: clamp(2.3rem,6.4vw,3.6rem); }
  .hero-copy > p { font-size: 1rem; }
  .hero-copy .cta-row { margin-top: 14px; }
  .hero-copy .cta-row > * { flex: 0 0 auto; }
  .hero-copy .btn { min-height: 46px; padding-inline: 18px; font-size: .95rem; }
  .hero-copy .hero-trust { margin-top: 10px; font-size: .875rem; }
  .loan-chips { margin-top: 12px; }
  .loan-chips-label { margin-bottom: 6px; }
  .loan-chips ul { max-width: none; margin-bottom: -24px; padding-bottom: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .loan-chips li { flex: none; }
  .hero-art { height: min(78svh,300px); width: auto; margin-top: 0; }
  .hero-foot { bottom: 8px; }
  .feature { min-height: 0; padding-block: calc(var(--sheet) + 32px); }
  .feature-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 28px; }
  .feature-flip .feature-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .feature-copy { display: block; }
  .gfx-wrap { margin-top: 0; }
  .feature-action { margin-top: 20px; }
  .feature-action .btn { width: auto; }
  .tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tile { min-height: 300px; padding: 20px; }
  .who { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .who-panel { min-height: 420px; }
  .nav-links { padding-top: calc(var(--header-height) + 18px); }
  .nav-links > a:not(.btn) { min-height: 48px; font-size: 1.6rem; }
  .cta-inner { justify-content: center; min-height: 0; padding-bottom: 0; }
  .cta-inner > :not(.panel-mark) { max-width: 58%; }
  .cta-inner .panel-mark { top: 50%; bottom: auto; right: -2%; height: 110%; translate: 0 -50%; }
}

/* 17 ─ Motion layer. Everything here is transform, opacity or clip-path, and all of it sits behind no-preference,
   so Reduce Motion, print and no-JS still show the plain finished page. */
@media (prefers-reduced-motion: no-preference) {
  /* First paint: the bar's contents arrive in order. Home only, so it doesn't replay per page. */
  .motion-enabled .interactive-home .header-brand { animation: bm-nav-item var(--bm-reveal) var(--bm-unfold) .22s backwards; }
  .motion-enabled .interactive-home .nav-actions { animation: bm-nav-item var(--bm-reveal) var(--bm-unfold) .46s backwards; }
  @media (min-width: 921px) {
    .motion-enabled .interactive-home .nav-links > a:not(.btn) { animation: bm-nav-item var(--bm-reveal) var(--bm-unfold) calc(.26s + var(--nav-i,0) * .05s) backwards; }
    .motion-enabled .interactive-home .nav-links > a:nth-child(2) { --nav-i: 1; } .motion-enabled .interactive-home .nav-links > a:nth-child(3) { --nav-i: 2; } .motion-enabled .interactive-home .nav-links > a:nth-child(4) { --nav-i: 3; }
  }
  .motion-enabled .float-stack { animation: bm-rise var(--bm-reveal) var(--bm-unfold) 1.1s backwards; }
  @keyframes bm-nav-item { from { opacity: 0; transform: translate3d(0,-8px,0); } to { opacity: 1; transform: none; } }

  /* Page changes: the new page rises a little as it fades in. */
  ::view-transition-new(root) { animation-name: -ua-view-transition-fade-in,bm-page-in; }
  @keyframes bm-page-in { from { transform: translate3d(0,16px,0); } to { transform: none; } }

  /* Graphics arrive in depth, then their small tab slides out from behind the card. */
  .bm-reveal [data-reveal=gfx]:not(.is-in) { opacity: 0; translate: 0 56px; scale: .93; transform: perspective(1100px) rotateX(14deg); }
  .bm-reveal [data-reveal=gfx].is-in { transition: opacity var(--bm-reveal) var(--bm-quick) var(--reveal-delay,0ms),translate var(--bm-section) var(--bm-unfold) var(--reveal-delay,0ms),scale var(--bm-section) var(--bm-unfold) var(--reveal-delay,0ms),transform var(--bm-section) var(--bm-unfold) var(--reveal-delay,0ms); }
  .bm-reveal [data-reveal=gfx]:not(.is-in) .gfx-pop { translate: 0 100%; }
  .bm-reveal [data-reveal=gfx].is-in .gfx-pop { transition: translate var(--bm-reveal) var(--bm-unfold) .62s; }

  /* Tiles: once the colour has opened, the big number lands. */
  .bm-reveal [data-reveal=tile]:not(.is-in) .tile-num { opacity: 0; scale: .72; }
  .bm-reveal [data-reveal=tile].is-in .tile-num { transition: opacity var(--bm-reveal) var(--bm-quick) .3s,scale var(--bm-section) var(--bm-unfold) .3s; }
  .tile-num { transform-origin: 0 0; transition: scale var(--bm-reveal) var(--bm-unfold); }
  /* The office card rises further over its panel. */
  .bm-reveal .who-card[data-reveal]:not(.is-in) { translate: 0 44px; }
  /* Services rows, footer columns and form groups use the shared rise, in order. */

  /* Scroll depth, run by the browser's compositor: the page has layers moving at different speeds. */
  @supports (animation-timeline: view()) {
    html:not(.scrub-on) .hero-art { animation: bm-art-exit linear both; animation-timeline: --rise-0; animation-range: entry 0% entry 90svh; }
    @keyframes bm-art-exit { from { translate: 0 0; rotate: 0deg; scale: 1; } to { translate: 3% -9%; rotate: 7deg; scale: .9; } }
    html:not(.scrub-on) .hero-copy { animation: bm-copy-exit linear both; animation-timeline: --rise-0; animation-range: entry 0% entry 55svh; }
    @keyframes bm-copy-exit { from { translate: 0 0; opacity: 1; } to { translate: 0 -8%; opacity: 0; } }
    html:not(.scrub-on) .gfx { animation: bm-gfx-depth linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes bm-gfx-depth { from { translate: 0 34px; } to { translate: 0 -34px; } }
    html:not(.scrub-on) .panel-mark .sculpture-mark { animation: bm-mark-turn linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes bm-mark-turn { 0% { translate: 12% 12%; rotate: -14deg; scale: .84; } 45% { translate: 0 0; rotate: -2deg; scale: 1; } 100% { translate: -3% -8%; rotate: 6deg; scale: 1.05; } }
    html:not(.scrub-on) .tile-num { animation: bm-num-depth linear both,bm-num-float 4.6s ease-in-out infinite alternate; animation-timeline: view(),auto; animation-range: cover,normal; }
    @keyframes bm-num-depth { from { translate: 0 26px; } to { translate: 0 -26px; } }
    html:not(.scrub-on) .explorer-visual { animation: bm-visual-depth linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes bm-visual-depth { from { translate: 0 44px; } to { translate: 0 0; } }
    html:not(.scrub-on) .tldr h2 { animation: bm-tldr-depth linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes bm-tldr-depth { from { translate: 0 22px; } to { translate: 0 -22px; } }
  }

  /* Services: the active row's contents rise and its icon lands; the photo keeps drifting while it's on show. */
  @media (min-width: 701px) {
    .loan.is-current .loan-body > div > * { animation: bm-row-in var(--bm-reveal) var(--bm-unfold) .1s backwards; }
    .loan.is-current .loan-body > div > .text-link { animation-delay: .18s; }
    .loan.is-current .loan-icon { animation: bm-icon-in var(--bm-reveal) var(--bm-unfold) backwards; }
    @keyframes bm-row-in { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: none; } }
    @keyframes bm-icon-in { from { transform: scale(.5) rotate(-18deg); } to { transform: none; } }
  }

  /* Questions: the answer rises as it opens. */
  .is-open > .faq-body > div > * { animation: bm-row-in var(--bm-reveal) var(--bm-unfold) .08s backwards; }
  @keyframes bm-row-in { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: none; } }

  /* Toast: a small lift with a settle. */
  .copy-toast.is-on { transition: opacity var(--bm-hover) var(--bm-quick),transform var(--bm-reveal) var(--bm-unfold); }

  /* Replies to touch and pointer. */
  .brand img { transition: rotate var(--bm-reveal) var(--bm-unfold),scale var(--bm-reveal) var(--bm-unfold); }
  .f-col ul a{ transition: translate var(--bm-hover) var(--bm-quick); }
  .loan-icon,.faq-list summary::after { transition: transform var(--bm-hover) var(--bm-quick); }
  :is(.tile,.bento-card,.faq-list details,.loan):active { scale: .99; }
  :is(.tile,.bento-card,.faq-list details,.loan) { transition-property: transform,box-shadow,border-color,background-color,scale; }
  @media (hover: hover) and (pointer: fine) {
    .brand:hover img { rotate: -6deg; scale: 1.08; }
    .tile:hover .tile-num { scale: 1.08; }
    .loan:not(.is-current):hover .loan-icon { transform: scale(1.15) rotate(-6deg); }
    .faq-list details:not(.is-open):hover summary::after { transform: rotate(90deg); }
    .f-col ul a:hover { translate: 4px 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html.bm-reveal [data-reveal=gfx]:not(.is-in) { transform: none; }
}

/* Graphic details added with the motion layer. Their default state is the finished frame. */
.chat-input { position: relative; }
.chat-typed { position: absolute; left: 18px; right: 44px; top: 50%; translate: 0 -50%; overflow: hidden; color: var(--ink); white-space: nowrap; opacity: 0; }
.chat-typed > span { display: inline-block; }
.mock-ok { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--ribbon); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.docs-mock li { position: relative; overflow: hidden; }
.docs-flash { position: absolute; inset: 0; background: #146b9f26; opacity: 0; pointer-events: none; }
.docs-mock li > :not(.docs-flash) { position: relative; }
.gfx.is-armed [data-a=holder] { animation-name: chat-holder; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=typed] { animation-name: chat-typed; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=typedtext] { animation-name: chat-typedtext; animation-timing-function: steps(22); }
.gfx.is-armed [data-a=send] { animation-name: chat-send; }
.gfx.is-armed [data-a=o1] { animation-name: ok-1; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=o2] { animation-name: ok-2; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=o3] { animation-name: ok-3; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=f1] { animation-name: flash-1; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=f2] { animation-name: flash-2; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=f3] { animation-name: flash-3; animation-timing-function: var(--bm-quick); }
.gfx.is-armed [data-a=f4] { animation-name: flash-4; animation-timing-function: var(--bm-quick); }
@keyframes chat-holder { 0%,1% { opacity: 1; } 2%,11% { opacity: 0; } 13%,100% { opacity: 1; } }
@keyframes chat-typed { 0%,1% { opacity: 0; } 2%,10.5% { opacity: 1; } 11%,100% { opacity: 0; } }
@keyframes chat-typedtext { 0%,2% { clip-path: inset(0 100% 0 0); } 10%,100% { clip-path: inset(0 0 0 0); } }
@keyframes chat-send { 0%,10% { transform: none; } 11.5% { transform: translate3d(5px,-3px,0) scale(1.28); } 14%,100% { transform: none; } }
@keyframes ok-1 { 0%,17% { clip-path: inset(0 100% 0 0); } 20%,100% { clip-path: inset(0 0 0 0); } }
@keyframes ok-2 { 0%,30% { clip-path: inset(0 100% 0 0); } 33%,100% { clip-path: inset(0 0 0 0); } }
@keyframes ok-3 { 0%,44% { clip-path: inset(0 100% 0 0); } 47%,100% { clip-path: inset(0 0 0 0); } }
@keyframes flash-1 { 0%,10% { opacity: 0; } 14% { opacity: 1; } 24%,100% { opacity: 0; } }
@keyframes flash-2 { 0%,26% { opacity: 0; } 30% { opacity: 1; } 40%,100% { opacity: 0; } }
@keyframes flash-3 { 0%,42% { opacity: 0; } 46% { opacity: 1; } 56%,100% { opacity: 0; } }
@keyframes flash-4 { 0%,58% { opacity: 0; } 62% { opacity: 1; } 72%,100% { opacity: 0; } }
/* Chat, retimed so the message is typed and sent before it lands in the thread. */
@keyframes chat-msg { 0%,10.5% { opacity: 0; transform: translate3d(28px,10px,0) scale(.95); } 16%,93% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes chat-typing { 0%,19% { opacity: 0; transform: scale(.8); } 22%,37% { opacity: 1; transform: none; } 40%,100% { opacity: 0; transform: none; } }
@keyframes chat-reply { 0%,38% { opacity: 0; transform: translate3d(-22px,8px,0) scale(.9); } 43% { opacity: 1; transform: scale(1.02); } 47%,93% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes chat-read { 0%,49% { clip-path: inset(0 100% 0 0); } 55%,100% { clip-path: inset(0 0 0 0); } }
/* Tracker: each step's words slide in as they light. */
@keyframes text-1 { 0%,4% { opacity: .72; transform: translate3d(18px,0,0); } 10%,100% { opacity: 1; transform: none; } }
@keyframes text-2 { 0%,29% { opacity: .72; transform: translate3d(18px,0,0); } 35%,100% { opacity: 1; transform: none; } }
@keyframes text-3 { 0%,54% { opacity: .72; transform: translate3d(18px,0,0); } 60%,100% { opacity: 1; transform: none; } }
/* Where a section is shorter than the screen the next is already in view, so nothing should recede yet. */
@media (min-width: 921px) and (orientation: portrait),(min-height: 1150px) and (orientation: landscape) { #services > .container,#talk > .container,#apply-fast > .container { animation: none; } }
/* Contrast on the brightest part of the moving lights. */
.feature.grade-blue,.cta-banner.grade-blue,.after-submit { --fg-2: #dde6ee; }

main > .feature { min-height: 0; }

/* Our office: a real clock on India time, with the opening hours marked on its rim. */
.office-live { overflow: clip; }
.office-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: clamp(32px,6vw,96px); }
.office-copy h2 { margin-bottom: 20px; }
.office-copy .live-status { color: var(--fg); font-size: 1rem; }
.office-copy .cc-times { margin-top: 18px; color: var(--fg); font-size: var(--t-lead); line-height: 1.45; }
.office-copy .cc-times small { display: inline-block; margin-top: 6px; color: var(--fg-2); font-size: 1rem; }
.office-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; max-width: 520px; margin: 28px 0 0; padding: 0; list-style: none; }
.office-week li { display: grid; place-items: center; min-height: 48px; padding-inline: 2px; border-radius: var(--r-field); background: #fffcf614; color: var(--fg); font-size: .9rem; font-weight: 500; }
.office-week li.is-closed { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); }
.office-week li[aria-current] { background: var(--cream-2); color: var(--ink); font-weight: 600; }
.office-where { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.office-where strong { color: var(--fg); font-weight: 600; }
.office-where p { color: var(--fg); }
.gfx-clock { max-width: 480px; }
.clock { display: block; width: 100%; padding: 18px 26px 26px; }
.clock svg { display: block; width: 100%; height: auto; overflow: visible; }
.clock-face { fill: var(--cream); }
.clock-rim { fill: none; stroke: var(--sky-tint); stroke-width: 12; }
.clock-open { fill: none; stroke: var(--ribbon); stroke-width: 12; stroke-linecap: round; }
.clock-tick { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; }
.clock-num { fill: var(--ink); font: 500 26px var(--title); text-anchor: middle; dominant-baseline: central; }
.clock-hand { display: none; transform-box: view-box; transform-origin: 200px 200px; stroke-linecap: round; }
.js .clock-hand { display: block; transform: rotate(var(--a,0deg)); }
.clock-h { stroke: var(--navy); stroke-width: 9; }
.clock-m { stroke: var(--navy); stroke-width: 6; }
.js .clock-s { display: none; stroke: var(--crimson); stroke-width: 2.5; transition: transform .3s var(--bm-unfold); }
.js .gfx-clock.is-armed .clock-s { display: block; }
.clock-pin { fill: var(--crimson); }
@media (max-width: 920px) {
  .office-grid { grid-template-columns: minmax(0,1fr); }
  .gfx-clock { max-width: 400px; }
  .office-week li { font-size: .875rem; }
}
@media (max-width: 374px) { .office-week { gap: 3px; } }
@media (max-width: 560px) {
  .office-where { flex-direction: column; align-items: center; text-align: center; }
  .office-where p { width: 100%; }
}

/* 18 ─ Contact, Apply and Enquiry open straight on what the visitor came for. Each is short, and none reuses the home hero. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-open { position: relative; isolation: isolate; overflow: clip; background: var(--bg); color: var(--fg-2); }
.page-open h1 { font-size: clamp(2.5rem,4.6vw,4.2rem); line-height: 1.04; letter-spacing: -.03em; }

/* Contact: the hero is the address book. */
.contact-open { padding-block: calc(var(--header-height) + clamp(28px,4vw,52px)) calc(var(--sheet) + 30px); }
.contact-grid { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,72px); }
.contact-lead { margin-top: 10px; color: var(--fg); font-size: 1rem; text-wrap: pretty; }
.book { margin-top: 20px; border-top: 1px solid var(--line); list-style: none; }
.book-row { position: relative; border-bottom: 1px solid var(--line); }
.book-link { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 80px; padding-block: 8px; color: var(--fg); transition: transform var(--bm-hover) var(--bm-quick); }
.book-name { color: var(--fg-2); font-weight: 500; }
.book-value { display: block; font: 500 clamp(1.45rem,2.5vw,2.2rem)/1.16 var(--title); font-variation-settings: 'opsz' 72; letter-spacing: -.02em; overflow-wrap: anywhere; }
.book-note { display: block; margin-top: 3px; color: var(--fg-2); font-size: .95rem; line-height: 1.4; }
.book-arrow { font: 500 1.35rem/1 var(--sans); color: var(--accent); transition: transform var(--bm-hover) var(--bm-quick); }
.book-rib { position: absolute; left: 0; bottom: -6px; width: 100%; height: 12px; overflow: visible; pointer-events: none; clip-path: inset(-6px 100% -6px 0); transition: clip-path var(--bm-reveal) var(--bm-unfold); }
.book-rib path { fill: none; stroke: var(--rose); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.book-link:is(:hover,:focus-visible,:active) ~ .book-rib { clip-path: inset(-6px 0 -6px 0); }
.book-link:is(:hover,:focus-visible) .book-arrow { transform: translate(4px,-4px); }
.book-row .copy-toast { top: -14px; right: 44px; }
.way-copy .copy-toast { top: auto; right: auto; bottom: 20px; left: 24px; }
.book-extra { position: absolute; right: 44px; bottom: 12px; }
.contact-pin { display: block; color: var(--fg-2); }
.pin-art { display: block; width: 100%; max-width: 260px; margin-inline: auto; overflow: visible; }
.pin-where { display: block; margin-top: 8px; color: var(--fg); line-height: 1.5; }
.pin-where b { font-weight: 600; }
.contact-pin .live-status { margin-top: 8px; color: var(--fg); font-size: .95rem; }
.contact-pin .text-link { margin-top: 6px; }
.pin-ripple { fill: none; stroke: var(--sky); stroke-width: 2; opacity: .35; transform-box: fill-box; transform-origin: 50% 50%; }
.pin-ripple + .pin-ripple { opacity: 0; }
.contact-next > .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.contact-next .btn { min-height: 58px; padding-inline: 32px; font-size: 1.06rem; }
@media (hover: hover) and (pointer: fine) { .book-link:hover { transform: translateX(6px); } }
@media (max-width: 1180px) {
  .book-extra { position: static; display: inline-flex; margin: -6px 0 12px 112px; }
}
@media (max-width: 920px) {
  .contact-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .contact-pin { display: grid; grid-template-columns: 104px minmax(0,1fr); column-gap: 16px; align-items: start; }
  .pin-art { grid-row: 1 / span 3; }
  .pin-where { margin-top: 0; }
}
@media (max-width: 600px) {
  .book-link { grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; min-height: 68px; }
  .book-note { display: none; }
  .book-name { grid-column: 1 / -1; font-size: .95rem; }
  .book-extra { margin-left: 0; }
}

/* Apply: a slim headline, then a ribbon that really tracks the form. */
.apply-open { padding-block: calc(var(--header-height) + clamp(28px,3.6vw,48px)) calc(var(--sheet) + 22px); }
.apply-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 6px 32px; }
.apply-head h1 { font-size: clamp(2.1rem,3.8vw,3.4rem); }
.apply-line { max-width: 34ch; padding-bottom: 4px; color: var(--fg); line-height: 1.45; }
.rail { --rail: 0; position: relative; grid-column: 1 / -1; margin-top: 18px; }
.rail-line { position: absolute; top: 6px; left: 14px; width: calc(100% - 28px); height: 16px; overflow: visible; }
.rail-line path { fill: none; stroke: var(--line-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rail-run { clip-path: inset(-8px calc((1 - var(--rail)) * 100%) -8px 0); transition: clip-path var(--bm-reveal) var(--bm-unfold); }
.rail-run path { stroke-width: 5; stroke-linecap: round; }
.rail ol { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; }
.rail li { display: grid; justify-items: center; gap: 6px; color: var(--fg-2); text-align: center; }
.rail li:first-child { justify-items: start; text-align: left; }
.rail li:last-child { justify-items: end; text-align: right; }
.rail b { font-size: .95rem; font-weight: 500; line-height: 1.3; transition: color var(--bm-hover) var(--bm-quick); }
.rail-node { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); font-size: .875rem; font-weight: 600; transition: scale var(--bm-reveal) var(--bm-unfold),background-color var(--bm-hover) var(--bm-quick),box-shadow var(--bm-hover) var(--bm-quick); }
.rail-node > * { grid-area: 1 / 1; }
.rail-node svg { width: 15px; height: 15px; fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 100% 0 0); transition: clip-path var(--bm-reveal) var(--bm-unfold); }
.rail li:is([data-state=active],[data-state=done],[data-state=next]) b { color: var(--fg); }
.rail li[data-state=active] .rail-node,.rail li[data-state=next] .rail-node { scale: 1.14; box-shadow: inset 0 0 0 2px var(--rose); }
.rail li[data-state=done] .rail-node { background: var(--rose); color: transparent; }
.rail li[data-state=done] .rail-node svg { clip-path: inset(0 0 0 0); }
main > .form-workspace { padding-top: clamp(26px,3vw,40px); }
.apply-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; align-items: start; gap: clamp(16px,2.4vw,32px); }
.form-talk { position: sticky; top: calc(var(--header-height) + 24px); }
.form-talk a { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; color: var(--fg); font-weight: 500; }
.form-talk a span { transition: transform var(--bm-hover) var(--bm-quick); }
.form-talk p { margin-top: 6px; font-size: var(--t-fine); }
.aside-caption { display: block; margin-bottom: 6px; font-size: var(--t-fine); }
@media (hover: hover) { .form-talk a:hover span { transform: translate(3px,-3px); } }
@media (max-width: 920px) {
  .apply-layout { grid-template-columns: minmax(0,1fr); }
  .form-talk { position: static; }
}
@media (max-width: 700px) {
  .apply-head { grid-template-columns: minmax(0,1fr); }
  .rail b { font-size: .875rem; }
}

/* Enquiry: the page opens on a question, and the message box is the visitor's reply. */
.ask-open { padding-block: calc(var(--header-height) + clamp(28px,3.6vw,48px)) calc(var(--sheet) + 40px); }
.ask { display: grid; justify-items: center; text-align: center; }
.ask-lead { max-width: 60ch; margin-top: 8px; color: var(--fg); }
.ask-card { width: min(100%,1040px); margin-top: 20px; border: 0; background: var(--cream-card); color: var(--fg-2); text-align: left; box-shadow: 0 40px 90px -44px #000; }
.ask-card .cform { padding-top: 24px; }
.ask-thread { display: grid; gap: 8px; }
.ask-them { display: flex; align-items: flex-end; gap: 10px; color: var(--ink); }
.ask-them img { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--navy); }
.ask-them span { padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--cream); }
.ask-you { justify-self: end; width: min(100%,88%); margin-bottom: 14px; }
.ask-box { position: relative; }
.ask-box textarea { min-height: 96px; padding-right: 44px; border-radius: 22px; }
.ask-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.ask-ring rect { fill: none; stroke-width: 2.5; }
.ask-box:focus-within .ask-ring { opacity: 1; }
.ask-card .ask-box textarea:focus { border-color: transparent; }
.ask-box .ask-tick { right: 16px; top: auto; bottom: 14px; width: 22px; height: 14px; stroke-width: 1.8; }
.ask-box .ask-tick.is-on { clip-path: inset(0 0 0 0); }
.ask-card fieldset + fieldset { margin-top: 0; padding-top: 14px; }
.ask-card .section-label { margin-bottom: 12px; }
.frow-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ask-card .form-submit-row .form-note { margin-top: -2px; }
.ask .form-talk { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 24px; margin-top: 16px; color: var(--fg-2); }
.ask .form-talk > * { margin: 0; }
@media (max-width: 1000px) { .frow-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .frow-4 { grid-template-columns: minmax(0,1fr); }
  .ask,.ask-card { text-align: left; }
  .ask { justify-items: start; }
  .ask-you { width: 100%; }
}

/* Live form feedback. */
.field { position: relative; }
.field-tick { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; fill: none; stroke: var(--ribbon); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 100% 0 0); transition: clip-path var(--bm-reveal) var(--bm-unfold); }
.field[data-complete=true] > .field-tick { clip-path: inset(0 0 0 0); }
.field:focus-within label { color: var(--blue); }
.cform .btn-block { position: relative; overflow: hidden; }
.btn-glint { position: absolute; top: -10%; bottom: -10%; left: 0; width: 26%; background: linear-gradient(105deg,transparent,#fffcf666,transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-ready [type=submit],.step-ready .step-next { animation: bm-ready var(--bm-reveal) var(--bm-unfold); }
  :is(.is-ready [type=submit],.step-ready .step-next) .btn-glint { opacity: 1; animation: bm-glint 3.2s var(--bm-settle) .3s infinite; }
  .js .cform [data-step]:not([hidden]) { animation: bm-row-in var(--bm-reveal) var(--bm-unfold); }
  @keyframes bm-ready { 0% { transform: none; } 40% { transform: scale(1.025); } 100% { transform: none; } }
  @keyframes bm-glint { from { transform: translate3d(-130%,0,0); } 50%,to { transform: translate3d(420%,0,0); } }
  /* On arrival. */
  .motion-enabled .contact-lead,.motion-enabled .apply-line,.motion-enabled .ask-lead { animation: bm-rise var(--bm-reveal) var(--bm-unfold) .16s backwards; }
  .motion-enabled .book-row { animation: bm-rise var(--bm-reveal) var(--bm-unfold) calc(.22s + var(--r,0) * 80ms) backwards; }
  .book-row:nth-child(2) { --r: 1; } .book-row:nth-child(3) { --r: 2; }
  .motion-enabled .pin-art path { animation: art-draw 1.5s var(--bm-settle) calc(.3s + var(--n) * 130ms) backwards; }
  .motion-enabled .pin-art .art-drift { transform-box: fill-box; transform-origin: 50% 90%; animation: art-drift 12s ease-in-out infinite alternate; }
  .motion-enabled .pin-ripple { animation: pin-ripple 3.6s ease-out 1.4s infinite both; }
  .motion-enabled .pin-ripple + .pin-ripple { animation-delay: 3.2s; }
  @keyframes pin-ripple { from { opacity: .7; transform: scale(.5); } to { opacity: 0; transform: scale(1.9); } }
  .motion-enabled .pin-where,.motion-enabled .contact-pin .live-status,.motion-enabled .contact-pin .text-link { animation: bm-rise var(--bm-reveal) var(--bm-unfold) .6s backwards; }
  .motion-enabled .rail { animation: bm-rise var(--bm-reveal) var(--bm-unfold) .2s backwards; }
  .motion-enabled .ask-card { animation: bm-rise var(--bm-section) var(--bm-unfold) .18s backwards; }
  .motion-enabled .ask-them { animation: bm-ask-in var(--bm-reveal) var(--bm-unfold) .55s backwards; transform-origin: 0 100%; }
  @keyframes bm-ask-in { from { opacity: 0; transform: scale(.8) translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
  .ask-box:focus-within .ask-ring rect { stroke-dasharray: 1; animation: bm-ask-ring .9s var(--bm-unfold) both; }
  @keyframes bm-ask-ring { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* Apply: what happens after you submit, a ribbon that keeps running through the three steps. */
.after-track { position: relative; }
.after-track .rail-line { top: 9px; left: 18px; width: calc(66.66% + 0px); }
.after-steps { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3vw,40px); list-style: none; }
.after-steps h3 { margin-top: 18px; color: var(--fg); font-size: var(--t-card); }
.after-steps p { margin-top: 6px; color: var(--fg-2); }
.after-node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); font-weight: 600; }
@media (max-width: 700px) {
  .after-track .rail-line { display: none; }
  .after-steps { grid-template-columns: minmax(0,1fr); }
  .after-steps h3 { margin-top: 10px; }
}


/* Ambient life: every screen keeps something moving while it can be seen. */
.tile::after,.bento-wa::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; z-index: -1; width: 46%; background: linear-gradient(105deg,transparent,#fffcf62e,transparent); transform: translate3d(-120%,0,0); pointer-events: none; }
.tldr li { position: relative; padding-left: 30px; }
.tldr li::before { content: ''; position: absolute; left: 0; top: .62em; width: 20px; height: 3px; border-radius: 2px; background: linear-gradient(90deg,var(--ribbon),var(--crimson)); transform-origin: 0 50%; }
.faq-list details { position: relative; }
.faq-list details::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rose); opacity: 0; pointer-events: none; }
footer::before { content: ''; position: absolute; top: 0; left: 0; width: 34%; height: 2px; background: linear-gradient(90deg,transparent,var(--rose),var(--sky),transparent); transform: translate3d(-110%,0,0); pointer-events: none; }
footer { overflow: clip; }
.rail::after { content: ''; position: absolute; top: 9px; left: 14px; width: 11%; height: 10px; border-radius: 6px; background: linear-gradient(90deg,transparent,#fffcf6cc,transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-live].is-off,[data-live].is-off :is(*,*::before,*::after),[data-live].is-off::before,[data-live].is-off::after { animation-play-state: paused !important; }
  @keyframes bm-num-float { from { transform: translate3d(0,4px,0) rotate(-1.5deg); } to { transform: translate3d(0,-6px,0) rotate(1.5deg); } }
  .tiles .tile::after { animation: bm-sheen-card 7s var(--bm-settle) infinite; }
  .tiles .tile:nth-child(2)::after { animation-delay: 2.3s; } .tiles .tile:nth-child(3)::after { animation-delay: 4.6s; }
  .tiles .tile h3 { animation: bm-title-float 6s ease-in-out infinite alternate; }
  .tiles .tile:nth-child(2) h3 { animation-delay: -2s; } .tiles .tile:nth-child(3) h3 { animation-delay: -4s; }
  .bento-wa::after { animation: bm-sheen-card 8s var(--bm-settle) 1s infinite; }
  .bento-icon { animation: bm-icon-nudge 7.5s ease-in-out infinite; }
  .bento-card:nth-child(2) .bento-icon { animation-delay: 2.5s; } .bento-card:nth-child(3) .bento-icon { animation-delay: 5s; }
  .tldr li::before { animation: bm-tick-run 8s var(--bm-unfold) infinite; }
  .tldr li:nth-child(2)::before { animation-delay: 2s; } .tldr li:nth-child(3)::before { animation-delay: 4s; } .tldr li:nth-child(4)::before { animation-delay: 6s; }
  .faq-list details:not(.is-open)::before { animation: bm-row-glow 10s ease-in-out infinite; }
  .faq-list details:nth-child(2)::before { animation-delay: 2s; } .faq-list details:nth-child(3)::before { animation-delay: 4s; } .faq-list details:nth-child(4)::before { animation-delay: 6s; } .faq-list details:nth-child(5)::before { animation-delay: 8s; }
  footer::before { animation: bm-foot-line 9s var(--bm-settle) infinite; }
  .book-link:not(:hover,:focus-visible,:active) ~ .book-rib { animation: bm-rib-run 9s var(--bm-unfold) infinite; }
  .book-row:nth-child(2) .book-rib { animation-delay: 3s; } .book-row:nth-child(3) .book-rib { animation-delay: 6s; }
  .rail::after { animation: bm-rail-glint 4.6s var(--bm-settle) infinite; }
  .ask-them span { animation: bm-bubble 5s ease-in-out .9s infinite alternate; }
  .ask .form-talk a span { animation: bm-icon-nudge 6s ease-in-out infinite; }
  .gfx.is-armed .gfx-pop { animation: gfx-tab 6s ease-in-out infinite; animation-play-state: paused; }
  .gfx.is-playing .gfx-pop { animation-play-state: running; }
  .after-run { animation: bm-after-run 9s var(--bm-unfold) infinite; }
  .after-node { animation: bm-after-node 9s ease-in-out infinite; }
  .after-steps li:nth-child(2) .after-node { animation-delay: 3s; } .after-steps li:nth-child(3) .after-node { animation-delay: 6s; }
  @keyframes bm-sheen-card { from { transform: translate3d(-120%,0,0); } 45%,to { transform: translate3d(340%,0,0); } }
  @keyframes bm-title-float { from { transform: translate3d(0,3px,0); } to { transform: translate3d(0,-4px,0); } }
  @keyframes bm-icon-nudge { 0%,22%,100% { transform: none; } 8% { transform: translate3d(0,-5px,0) rotate(-6deg); } 15% { transform: translate3d(0,1px,0) rotate(3deg); } }
  @keyframes bm-tick-run { 0%,100% { transform: scaleX(.3); } 10%,28% { transform: scaleX(1.3); } 40% { transform: scaleX(.3); } }
  @keyframes bm-row-glow { 0%,24%,100% { opacity: 0; } 10% { opacity: .75; } }
  @keyframes bm-foot-line { from { transform: translate3d(-110%,0,0); } 70%,to { transform: translate3d(310%,0,0); } }
  @keyframes bm-rib-run { 0% { clip-path: inset(-6px 100% -6px 0); } 16%,26% { clip-path: inset(-6px 0 -6px 0); } 38%,100% { clip-path: inset(-6px 0 -6px 100%); } }
  @keyframes bm-rail-glint { from { transform: translate3d(-40%,0,0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } to { transform: translate3d(860%,0,0); opacity: 0; } }
  @keyframes bm-bubble { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-3px,0); } }
  @keyframes gfx-tab { 0%,100% { transform: translate3d(0,6px,0); } 50% { transform: translate3d(0,-2px,0); } }
  @keyframes bm-after-run { 0% { clip-path: inset(-8px 100% -8px 0); } 70%,90% { clip-path: inset(-8px 0 -8px 0); } 100% { clip-path: inset(-8px 0 -8px 100%); } }
  @keyframes bm-after-node { 0%,34%,100% { scale: 1; box-shadow: inset 0 0 0 1px var(--line-2); } 6%,26% { scale: 1.18; box-shadow: inset 0 0 0 2px var(--rose),0 0 22px #f0a3b266; } }
}

/* 19 ─ The one scroll system (scroll.js). */
.stack.is-measuring > * { position: relative !important; top: 0 !important; }
/* Each rising sheet's soft shadow on what's beneath it: a painted gradient, so nothing recalculates a blur while scrolling. */
/* A real shadow follows the rounded corners, so the section beneath never looks cut out around them. */
.stack > :not(.hero,:first-child),main > section:not(.page-hero,.utility-page,.page-open,.tldr-section,.stack > *) { box-shadow: 0 -14px 44px -4px #0a162247; }
.scrub-on .stack .line { perspective: none; }
.scrub-on .stack h2 .rib-line path { stroke-dashoffset: 1; transition: stroke-dashoffset var(--bm-section) var(--bm-settle); }
.scrub-on .stack h2.rib-on .rib-line path { stroke-dashoffset: 0; }
.scrub-on .tile-num { animation: bm-num-float 4.6s ease-in-out infinite alternate; }
main > section,footer { contain: layout; }

/* Red sections: a clean colour field, with the pink glow held back behind text. */
.section.grade-crimson,.page-open.grade-crimson,.docs-panel.grade-crimson { --g1-o: .3; --g2-o: .22; }
.on-crimson .btn.red { background: var(--cream-card); border-color: var(--cream-card); color: var(--ink); --sweep: var(--rose-tint); }
.on-crimson .on-cream .btn.red { background: var(--crimson); border-color: var(--crimson); color: var(--cream-card); --sweep: var(--crimson-2); }
.on-crimson .loan-icon,.on-crimson .loan.is-current .loan-icon { color: var(--cream-card); }
.on-crimson .loan-time > span,.on-crimson .loan-progress > span { background: var(--cream-card); }
.on-crimson .book-rib path { stroke: var(--cream-card); }
.on-crimson .after-node { background: var(--crimson); box-shadow: inset 0 0 0 1px var(--cream-card); }

/* Services on white. */
.on-cream .loan-icon { color: var(--blue); }
.on-cream .loan.is-current { box-shadow: inset 0 0 0 1px var(--line); }
.on-cream .loan.is-current .loan-icon { color: var(--crimson); }
@media (hover: hover) and (pointer: fine) { .on-cream .loan:not(.is-current):hover { background: #10253a0a; } }
/* The ribbon rail on red, and the logo on the red footer. */
.on-crimson .rail-run path { stroke: var(--cream-card); }
/* The footer is plain white. */
footer.on-cream { --bg: var(--cream-card); box-shadow: inset 0 1px 0 var(--hairline); }
footer.on-cream > .lit { display: none; }

/* 20 ─ Contact, Apply and Enquiry: sliding panels, each with its own moving graphic. */
.stack > .panel,.stack > .form-workspace { position: relative; isolation: isolate; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; background: var(--bg); color: var(--fg-2); }
.stack > .panel { display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--s-section) * .8); }
.stack > .panel > .container { width: 100%; }
.stack > .form-workspace { padding-block: clamp(56px,6vw,88px) calc(clamp(56px,6vw,88px) + var(--sheet)); }
.stack > :first-child { margin-top: 0; border-radius: 0; }
.stack > :first-child::before { display: none; }
.stack > .page-open { padding-block: calc(var(--header-height) + clamp(28px,4vw,52px)) calc(var(--sheet) + 30px); }
.stack > .contact-open { align-items: center; }
.gfx-map,.gfx-rise { max-width: 520px; }
main .contact-next { overflow: clip; }

/* Contact's map: roads draw, the pin drops, a ring pulses. */
.gfx-map { --d: 10s; }
.map-card { overflow: hidden; border-radius: var(--r-card); background: #eee6d6; box-shadow: 0 2px 4px #0a16221a; }
.map-card svg { display: block; width: 100%; height: auto; }
.map-park { fill: #d7e8f4; }
.map-road { fill: none; stroke: var(--cream-card); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 1; }
.map-road.wide { stroke-width: 26; }
.map-road.thin { stroke-width: 11; }
.map-route { fill: none; stroke: var(--ribbon); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.map-pin { fill: var(--crimson); }
.map-dot { fill: var(--cream-card); }
.map-ring { fill: none; stroke: var(--crimson); stroke-width: 3; opacity: .5; transform-box: fill-box; transform-origin: 50% 50%; }
.gfx.is-armed [data-a=route] { animation-name: map-route; }
@keyframes map-route { 0%,14% { stroke-dashoffset: 1; } 34%,92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.gfx.is-armed [data-a=road] { animation-name: map-road; }
.gfx.is-armed [data-a=drop] { animation-name: map-drop; animation-timing-function: var(--bm-unfold); }
.gfx.is-armed [data-a=pulse] { animation-name: map-pulse; animation-duration: 2.6s; animation-timing-function: ease-out; }
@keyframes map-road { 0% { stroke-dashoffset: 1; } 24%,92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes map-drop { 0%,30% { opacity: 0; transform: translate3d(0,-120px,0); } 38% { opacity: 1; transform: none; } 41% { transform: translate3d(0,-14px,0); } 45%,92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes map-pulse { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.9); } }

/* Three ways to reach us: a sideways row while the panel holds; a swipe row where it can't. */
.h-panel { flex-direction: column; align-items: stretch !important; justify-content: center; gap: clamp(20px,3vw,36px); overflow: clip; }
.h-panel h2 { font-size: clamp(2.4rem,4.4vw,4.4rem); }
.h-track { display: flex; gap: 20px; width: max-content; padding-inline: max(var(--gutter),calc((100vw - 1296px) / 2)); }
.way { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 24px; width: min(74vw,860px); min-height: 400px; padding: clamp(20px,2.6vw,36px); overflow: hidden; border-radius: var(--r-card); background: var(--bg); color: var(--fg-2); }
.way-white { background: var(--cream-card); box-shadow: inset 0 0 0 1px var(--line); }
.way h3 { color: var(--fg); font: 500 clamp(1.8rem,3vw,2.8rem)/1.1 var(--title); letter-spacing: -.02em; }
.way p { margin: 10px 0 20px; }
.way .gfx { max-width: 340px; }
@media (min-width: 921px) and (min-height: 501px) { .scrub-on .h-panel + * { margin-top: 140svh; } }
html:not(.scrub-on) .h-track { width: auto; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
html:not(.scrub-on) .way { flex: none; scroll-snap-align: center; }
@media (max-width: 920px),(max-height: 500px) {
  .h-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .way { flex: none; grid-template-columns: minmax(0,1fr); width: min(84vw,420px); scroll-snap-align: center; }
  .stack > .panel { min-height: 0; }
}

.gfx-tag { position: relative; z-index: 2; }
/* A lock screen: notifications stack in. */
.gfx-lock { --d: 9s; }
.lock { position: relative; display: grid; gap: 8px; align-content: start; min-height: 340px; padding: 16px 14px 20px; border: 2px solid #fffcf633; border-radius: 34px; background: #0a1622; color: var(--cream-2); }
.lock .gfx-tag { justify-self: end; }
.lock-time { font: 500 3.2rem/1 var(--title); text-align: center; margin-bottom: 8px; }
.lock-note { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: #fffcf61f; font-size: .875rem; line-height: 1.35; }
.lock-note b { font-weight: 600; }
.gfx.is-armed [data-a=n1] { animation-name: lock-1; }
.gfx.is-armed [data-a=n2] { animation-name: lock-2; }
.gfx.is-armed [data-a=n3] { animation-name: lock-3; }
@keyframes lock-1 { 0%,6% { opacity: 0; transform: translate3d(0,-24px,0) scale(.94); } 12%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lock-2 { 0%,26% { opacity: 0; transform: translate3d(0,-24px,0) scale(.94); } 32%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lock-3 { 0%,46% { opacity: 0; transform: translate3d(0,-24px,0) scale(.94); } 52%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* A call: rings, connects, then a sound wave. */
.gfx-ring { --d: 8s; }
.ring { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 24px; background: var(--cream-card); color: var(--ink); text-align: center; }
.ring .gfx-tag { justify-self: end; }
.ring-face { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-block: 12px; }
.ring-face img { position: relative; width: 84px; height: 84px; padding: 16px; border-radius: 50%; background: var(--navy); }
.ring-face i { position: absolute; inset: 0; border-radius: 50%; background: #146b9f47; opacity: 0; }
.ring-state { display: grid; color: var(--blue); font-weight: 600; }
.ring-state > span { grid-area: 1 / 1; }
.ring-state > span:first-child { opacity: 0; }
.ring-bars { display: flex; align-items: center; gap: 5px; height: 38px; }
.ring-bars i { display: block; width: 5px; height: 32px; border-radius: 3px; background: var(--ribbon); transform: scaleY(.5); }
.ring-bars i:nth-child(even) { background: var(--crimson); transform: scaleY(.8); }
.gfx.is-armed [data-a^=wave] { animation-name: ring-wave; animation-duration: 2.4s; animation-timing-function: ease-out; }
.gfx.is-armed [data-a=wave2] { animation-delay: .5s; } .gfx.is-armed [data-a=wave3] { animation-delay: 1s; }
.gfx.is-armed [data-a=incoming] { animation-name: ring-in; }
.gfx.is-armed [data-a=on] { animation-name: ring-on; }
.gfx.is-armed [data-a=bars] { animation-name: ring-on; }
.gfx.is-armed [data-a=bar] { animation-name: ring-bar; animation-duration: 1s; animation-timing-function: ease-in-out; }
.gfx.is-armed [data-a=bar]:nth-child(2) { animation-delay: .12s; } .gfx.is-armed [data-a=bar]:nth-child(3) { animation-delay: .3s; } .gfx.is-armed [data-a=bar]:nth-child(4) { animation-delay: .06s; } .gfx.is-armed [data-a=bar]:nth-child(5) { animation-delay: .42s; } .gfx.is-armed [data-a=bar]:nth-child(6) { animation-delay: .22s; } .gfx.is-armed [data-a=bar]:nth-child(7) { animation-delay: .5s; }
@keyframes ring-wave { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }
@keyframes ring-in { 0%,36% { opacity: 1; } 42%,100% { opacity: 0; } }
@keyframes ring-on { 0%,38% { opacity: 0; } 44%,100% { opacity: 1; } }
@keyframes ring-bar { 0%,100% { transform: scaleY(.25); } 50% { transform: none; } }

/* An envelope: opens, the letter slides out, a badge pops. */
.gfx-env { --d: 8s; }
.env { display: grid; gap: 8px; padding: 16px; border-radius: 24px; background: var(--sky-tint); }
.env .gfx-tag { justify-self: end; background: var(--cream-card); }
.env-stage { position: relative; display: block; height: 240px; }
.env-back,.env-front,.env-flap { position: absolute; left: 8%; right: 8%; bottom: 8px; height: 150px; }
.env-back { border-radius: 10px; background: var(--blue); }
.env-front { clip-path: polygon(0 18%,50% 58%,100% 18%,100% 100%,0 100%); border-radius: 10px; background: var(--ribbon); }
.env-flap { bottom: auto; top: 82px; height: 86px; clip-path: polygon(0 0,100% 0,50% 100%); background: #0a3556; transform-origin: 50% 0; transform: scaleY(-1); }
.env-letter { position: absolute; left: 14%; right: 14%; top: 18px; display: grid; gap: 8px; align-content: start; height: 170px; padding: 16px; border-radius: 8px; background: var(--cream-card); box-shadow: 0 1px 3px #0a162233; }
.env-letter i { display: block; height: 8px; border-radius: 4px; background: var(--hairline); }
.env-letter i:last-child { width: 60%; }
.env-badge { position: absolute; top: 2px; right: 2%; padding: 5px 12px; border-radius: var(--r-pill); background: var(--crimson); color: var(--cream-card); font-size: .875rem; font-weight: 600; }
.gfx.is-armed [data-a=flap] { animation-name: env-flap; }
.gfx.is-armed [data-a=letter] { animation-name: env-letter; }
.gfx.is-armed [data-a=badge] { animation-name: env-badge; }
@keyframes env-flap { 0%,10% { transform: scaleY(1); } 24%,90% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
@keyframes env-letter { 0%,22% { transform: translate3d(0,70px,0); } 40%,88% { transform: none; } 100% { transform: translate3d(0,70px,0); } }
@keyframes env-badge { 0%,42% { opacity: 0; transform: scale(.5); } 47% { opacity: 1; transform: scale(1.12); } 51%,88% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: scale(.8); } }

/* The building: lights flicker on, the second floor glows, a ribbon drifts past. */
.gfx-office { --d: 10s; max-width: 500px; }
.ofc-wall { fill: var(--blue); }
.ofc-win { fill: var(--cream-card); }
.ofc-glow { fill: #f0a3b2; }
.ofc-door { fill: var(--navy); }
.ofc-side { fill: none; stroke: var(--cream-card); stroke-width: 8; }
.gfx-office .ofc-road { stroke-dasharray: none; stroke-linecap: butt; stroke-width: 76; }
.gfx-office.is-armed [data-a=l1] { animation-name: ofc-flick; }
.gfx-office.is-armed [data-a=l2] { animation-name: ofc-flick; animation-delay: .9s; }
.gfx-office.is-armed [data-a=l3] { animation-name: ofc-flick; animation-delay: 1.8s; }
.gfx.is-armed [data-a=glow] { animation-name: ofc-glow; animation-duration: 3.6s; animation-direction: alternate; animation-timing-function: ease-in-out; }
@keyframes ofc-flick { 0%,8% { opacity: .35; } 10% { opacity: 1; } 12% { opacity: .5; } 15%,70% { opacity: 1; } 78%,100% { opacity: .35; } }
@keyframes ofc-glow { from { opacity: .82; } to { opacity: 1; } }

/* Apply: the rising ribbon and its milestones. */
.apply-hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,72px); }
.apply-hero .apply-line { margin-block: 14px 24px; max-width: 44ch; }
.apply-hero h1 { font-size: clamp(2.5rem,5vw,4.8rem); }
.apply-hero .loan-chips { margin-top: 24px; }
.gfx-rise { --d: 9s; position: relative; }
.gfx-rise svg { display: block; width: 100%; height: auto; overflow: visible; }
.rise-base { fill: none; stroke: #fffcf640; stroke-width: 6; stroke-linecap: round; }
.rise-run { fill: none; stroke: var(--cream-card); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; }
.rise-node { fill: var(--cream-card); stroke: var(--crimson); stroke-width: 5; transform-box: fill-box; transform-origin: 50% 50%; }
.rise-label { position: absolute; color: var(--cream-card); font-weight: 600; white-space: nowrap; }
.rise-1 { left: 2%; top: 76%; } .rise-2 { left: 34%; top: 44%; } .rise-3 { right: 14%; top: 18%; }
@media (max-width: 560px) { .rise-1 { top: 66%; } }
.gfx.is-armed [data-a=rise] { animation-name: rise-run; animation-timing-function: var(--bm-settle); }
.gfx-rise.is-armed [data-a=m1],.gfx-rise.is-armed [data-a=t1] { animation-name: rise-1; }
.gfx-rise.is-armed [data-a=m2],.gfx-rise.is-armed [data-a=t2] { animation-name: rise-2; }
.gfx-rise.is-armed [data-a=m3],.gfx-rise.is-armed [data-a=t3] { animation-name: rise-3; }
@keyframes rise-run { 0%,4% { stroke-dashoffset: 1; } 60%,92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rise-1 { 0%,4% { opacity: .3; transform: scale(.8); } 9%,92% { opacity: 1; transform: none; } 100% { opacity: .3; } }
@keyframes rise-2 { 0%,28% { opacity: .3; transform: scale(.8); } 33%,92% { opacity: 1; transform: none; } 100% { opacity: .3; } }
@keyframes rise-3 { 0%,56% { opacity: .3; transform: scale(.8); } 61%,92% { opacity: 1; transform: none; } 100% { opacity: .3; } }
.apply-side { position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: 18px; }
.apply-photo { overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 2; background: var(--deep); }
.apply-photo[hidden] { display: none; }
.apply-photo img { width: 100%; height: 100%; object-fit: cover; }
.apply-side .form-talk { position: static; }
.form-workspace .rail { margin: 0 0 12px; }
.rail-note { min-height: 0; margin-bottom: 12px; color: var(--crimson); font-weight: 600; }
.rail-note[hidden] { display: none; }
.after-submit .after-track .rail-line { width: calc(75% + 0px); }
.after-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
.after-steps li:nth-child(2) .after-node { animation-delay: 2.25s; } .after-steps li:nth-child(3) .after-node { animation-delay: 4.5s; } .after-steps li:nth-child(4) .after-node { animation-delay: 6.75s; }
@media (max-width: 920px) {
  .apply-hero-grid { grid-template-columns: minmax(0,1fr); }
  .after-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .after-submit .rail-line { display: none; }
  .apply-side { position: static; }
}
@media (max-width: 520px) { .after-steps { grid-template-columns: minmax(0,1fr); } }

/* Enquiry: a slow cloud of example questions around the headline. */
.ask-hero { overflow: clip; text-align: center; }
.ask-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.ask-hero h1 { font-size: clamp(2.6rem,6vw,5.6rem); max-width: 16ch; }
.q-cloud { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.q { position: absolute; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 18px; background: #fffcf61a; color: var(--cream-2); font-size: .95rem; white-space: nowrap; text-decoration: none; pointer-events: auto; cursor: pointer; transition: scale var(--bm-hover) var(--bm-quick),box-shadow var(--bm-hover) var(--bm-quick); -webkit-tap-highlight-color: transparent; }
.q:hover { box-shadow: inset 0 0 0 1px #fffcf666; color: var(--cream-card); }
.q:active { scale: .95; }
.q:focus-visible { outline: 2px solid var(--cream-card); outline-offset: 2px; }
.q1 { left: 6%; top: 22%; } .q2 { right: 7%; top: 18%; } .q3 { left: 4%; top: 62%; } .q4 { right: 5%; top: 56%; } .q5 { left: 16%; bottom: 10%; } .q6 { right: 14%; bottom: 13%; }
@media (max-width: 1100px) {
  .ask-hero { flex-direction: column; align-items: stretch; gap: 24px; }
  .ask-hero-copy { order: 1; }
  .q-cloud { position: relative; order: 2; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-inline: var(--gutter); }
  /* Stacked closely here, so they drift less and don't run into each other. */
  .q { position: static; white-space: normal; --q-d: .2; }
}
.ask-card { box-shadow: 0 30px 70px -44px #10253a80,inset 0 0 0 1px var(--line); }
.form-workspace .ask .form-talk { color: var(--fg-2); }
/* The reply: a MacBook on computers, an iPhone on phones. One set of parts, drawn two ways. */
.gfx-reply { --d: 7s; }
.reply { position: relative; display: grid; justify-items: center; gap: 12px; padding: 18px 18px 22px; border-radius: 24px; background: var(--cream-card); color: var(--ink); }
.reply .gfx-tag { justify-self: end; }
.reply-device { position: relative; display: block; width: 86%; padding: 9px 9px 12px; border-radius: 16px 16px 3px 3px; background: #0b0f14; box-shadow: 0 0 0 1.5px #aeb5bd; }
.reply-screen { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px; background: radial-gradient(90% 90% at 88% 8%,#f0a3b2cc,#f0a3b200 60%),radial-gradient(90% 110% at 8% 100%,#b51f35,#b51f3500 62%),linear-gradient(150deg,#0e2f4c,#1c6a9c); }
/* Top of a MacBook's screen: menu bar and notch. */
.reply-bar { position: absolute; inset: 0 0 auto; display: block; height: 18px; background: #0a162266; }
.reply-bar::before { content: ''; position: absolute; left: 10px; top: 7px; width: 74px; height: 4px; border-radius: 2px; background: linear-gradient(90deg,#fffcf6e6 0 14px,#0000 14px 20px,#fffcf699 20px 42px,#0000 42px 48px,#fffcf699 48px); }
.reply-island { position: absolute; z-index: 2; left: 50%; top: 0; display: block; width: 15%; height: 12px; border-radius: 0 0 6px 6px; background: #0b0f14; translate: -50% 0; }
.reply-time { position: absolute; right: 10px; top: 0; display: block; color: #fffcf6; font-size: .68rem; font-weight: 500; line-height: 18px; }
/* The notification, sliding in from the side as it does on a Mac. */
.reply-note { --nx: 34px; --ny: 0px; position: absolute; z-index: 1; right: 10px; top: 28px; display: flex; align-items: center; gap: 9px; width: min(64%,270px); padding: 9px 10px; border-radius: 13px; background: #fffcf6f2; box-shadow: 0 10px 26px -10px #0a1622a6; color: var(--ink); font-size: .82rem; line-height: 1.25; }
.reply-note img { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 8px; background: var(--navy); }
.reply-words { flex: 1; min-width: 0; display: block; }
.reply-words b { display: block; font-weight: 600; }
.reply-words span { display: block; color: var(--ink-2); }
.reply-note em { flex: none; align-self: flex-start; color: var(--ink-2); font-size: .72rem; font-style: normal; }
.reply-halo { position: absolute; right: 6px; top: 24px; display: block; width: min(66%,278px); height: 62px; border-radius: 16px; background: #f0a3b273; opacity: 0; }
.reply-dock { position: absolute; left: 50%; bottom: 6px; display: flex; gap: 4px; padding: 4px 5px; border-radius: 9px; background: #fffcf633; translate: -50% 0; }
.reply-dock i { display: block; width: 17px; height: 17px; border-radius: 5px; background: var(--cream-card); }
.reply-dock i:nth-child(2) { background: var(--crimson); } .reply-dock i:nth-child(3) { background: #8fc4e6; } .reply-dock i:nth-child(4) { background: var(--navy); } .reply-dock i:nth-child(5) { background: #f0a3b2; } .reply-dock i:nth-child(6) { background: var(--blue); }
.reply-home { display: none; }
/* The MacBook's base, wider than its lid, with the thumb scoop. */
.reply-base { position: relative; display: block; width: 100%; height: 13px; margin-top: -12px; border-radius: 2px 2px 10px 10px; background: linear-gradient(#e0e3e7,#a4abb3); box-shadow: 0 16px 22px -14px #10253a8c; }
.reply-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 5px; border-radius: 0 0 6px 6px; background: #8c939b; translate: -50% 0; }
/* Phones: the same parts become an iPhone's lock screen. */
@media (max-width: 700px) {
  .reply-device { width: min(100%,224px); padding: 7px; border-radius: 38px; box-shadow: 0 0 0 1.5px #4a525c,0 26px 40px -24px #10253a99; }
  .reply-device::before,.reply-device::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #4a525c; }
  .reply-device::before { left: -3px; top: 84px; height: 62px; }
  .reply-device::after { right: -3px; top: 104px; height: 44px; }
  .reply-screen { aspect-ratio: 9 / 19; border-radius: 31px; background: radial-gradient(90% 46% at 80% 0,#f0a3b2b3,#f0a3b200),radial-gradient(120% 56% at 10% 100%,#b51f35,#b51f3500),linear-gradient(170deg,#0e2f4c,#1c6a9c); }
  .reply-bar,.reply-dock,.reply-base { display: none; }
  .reply-island { top: 10px; width: 34%; height: 21px; border-radius: 12px; background: #05080b; }
  .reply-time { left: 0; right: 0; top: 44px; text-align: center; font-size: 3rem; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
  .reply-note { --nx: 0px; --ny: -26px; left: 8px; right: 8px; top: 126px; width: auto; gap: 8px; padding: 9px 8px; border-radius: 20px; font-size: .78rem; }
  .reply-note img { width: 30px; height: 30px; padding: 5px; }
  .reply-words b { white-space: nowrap; }
  .reply-note em { font-size: .68rem; }
  .reply-halo { left: 4px; right: 4px; top: 122px; width: auto; height: 66px; border-radius: 23px; }
  .reply-home { position: absolute; left: 50%; bottom: 7px; display: block; width: 36%; height: 4px; border-radius: 2px; background: #fffcf6e6; translate: -50% 0; }
}
.gfx.is-armed [data-a=note] { animation-name: reply-note; }
.gfx.is-armed [data-a=halo] { animation-name: reply-halo; animation-duration: 2.8s; animation-timing-function: ease-out; }
@keyframes reply-note { 0%,12% { opacity: 0; transform: translate3d(var(--nx),var(--ny),0) scale(.94); } 20%,90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes reply-halo { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.4); } }

@media (prefers-reduced-motion: no-preference) {
  .q { animation: q-drift 12s ease-in-out infinite alternate,q-light 18s ease-in-out infinite; }
  .q2 { animation-duration: 16s,18s; animation-delay: -3s,3s; } .q3 { animation-duration: 10s,18s; animation-delay: -6s,6s; } .q4 { animation-duration: 15s,18s; animation-delay: -2s,9s; } .q5 { animation-duration: 11s,18s; animation-delay: -5s,12s; } .q6 { animation-duration: 14s,18s; animation-delay: -8s,15s; }
  @keyframes q-drift { from { transform: translate3d(calc(-14px*var(--q-d,1)),calc(10px*var(--q-d,1)),0); } to { transform: translate3d(calc(14px*var(--q-d,1)),calc(-12px*var(--q-d,1)),0); } }
  @keyframes q-light { 0%,14%,100% { background-color: #fffcf61a; } 5%,10% { background-color: #fffcf64d; } }
  .after-run { animation: bm-after-run 9s var(--bm-unfold) infinite; }
  .ask-box textarea:placeholder-shown { caret-color: var(--crimson); }
  .ask-box:not(:focus-within) .ask-ring { opacity: .35; animation: q-ring 3.4s ease-in-out infinite alternate; }
  @keyframes q-ring { from { opacity: .15; } to { opacity: .6; } }
}
.on-cream .rail-node { background: var(--cream-card); }
.on-cream .rail li[data-state=active] .rail-node,.on-cream .rail li[data-state=next] .rail-node { box-shadow: inset 0 0 0 2px var(--crimson); }
.on-cream .rail li[data-state=done] .rail-node { color: transparent; }
/* On a red first screen the header's button turns cream, so it doesn't vanish. */
.site-header.on-red:not(.is-scrolled) .header-apply { background: var(--cream-card); border-color: var(--cream-card); color: var(--ink); --sweep: var(--rose-tint); }

/* Contact's first screen: larger type, centred between the header and the fold. */
.stack > .contact-open { padding-block: calc(var(--header-height) + 20px) calc(var(--sheet) + 20px); }
@media (min-width: 921px) { .contact-open .contact-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,80px); } }
.contact-open h1 { font-size: clamp(3rem,6.6vw,6.4rem); }
.contact-open .contact-lead { margin-top: 22px; font-size: clamp(1rem,1.25vw,1.2rem); max-width: 56ch; }
.contact-open .book { margin-top: 28px; }
.contact-open .book-link { min-height: clamp(84px,9svh,104px); }
.contact-open .book-value { font-size: clamp(1.5rem,2.7vw,2.5rem); }
.contact-open .book-extra { position: static; display: inline-flex; margin: -8px 0 12px 112px; }
@media (max-width: 600px) { .contact-open .book-extra { margin-left: 0; } .contact-open .gfx-map { max-width: 340px; } }
.gfx-map { max-width: 500px; }
/* The logo keeps its red on a red first screen. */
/* The logo's blue half vanishes on a blue or red first screen, so it sits on a small cream plate there. A shadow, not padding, so nothing moves when the plate comes and goes. */
.site-header:not(.is-light,.is-scrolled,.menu-open) .header-brand img { border-radius: 5px; background: var(--cream-card); box-shadow: 0 0 0 4px var(--cream-card); }

/* 21 ─ Polish. Headings and text wrap without stray last words. */
h1,h2,h3 { text-wrap: balance; }
p,li { text-wrap: pretty; }
.gfx-wrap .gfx-pop { white-space: nowrap; }

/* Press feel on touch, matching hover on a mouse. */
@media (hover: none) {
  .btn:active::after { clip-path: polygon(0 0,116% 0,100% 100%,0 100%); }
  :is(.way,.book-link,.loan,.tile,.bento-card,.faq-list summary,.loan-chip) { transition: transform var(--bm-hover) var(--bm-quick); }
  :is(.way,.book-link,.loan,.tile,.bento-card,.faq-list summary):active { transform: scale(.985); }
  .loan-chip:active { transform: scale(.95); }
  .gfx-wrap:active .gfx { transform: scale(.985); }
}
/* A mouse: cards answer the pointer. */
@media (hover: hover) and (pointer: fine) {
  .way { transition: translate var(--bm-hover) var(--bm-quick); }
  .way:hover { translate: 0 -6px; }
  .way .btn:hover > span[aria-hidden] { transform: translate(3px,-3px); }
  .apply-photo,.map-card { transition: scale var(--bm-reveal) var(--bm-unfold); }
  .gfx-wrap:hover .map-card { scale: 1.015; }
  .q { pointer-events: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The photo in view on a phone keeps slowly moving, as the large one does on PC. */
  .loan.is-current .loan-photo img { animation: bm-photo-slow 7s ease-in-out infinite alternate; }
  @keyframes bm-photo-slow { from { transform: scale(1); } to { transform: scale(1.09); } }
  /* A line along the top of the page tracks how far you've read. */
  .scroll-line { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,var(--sky),var(--rose)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .scroll-line { display: none; } }

/* One graphics layer per glow on desktop, and only while its section is near the screen. */
@media (prefers-reduced-motion: no-preference) {
  html.scrub-on .lit i::before { animation: none; }
  html.scrub-on main section > .lit > i,html.scrub-on footer > .lit > i { animation: bm-glow-move 8s ease-in-out infinite alternate; }
  html.scrub-on main section > .lit > i:last-child { animation-duration: 11s; animation-direction: alternate-reverse; }
  @keyframes bm-glow-move { from { transform: translate3d(-14%,-9%,0) scale(1.76); } to { transform: translate3d(14%,10%,0) scale(2.32); } }
  .tile .lit i::before,.docs-panel .lit i::before,.tldr .lit i::before,.bento-wa .lit i::before { animation: none; }
}

/* Apply and Enquiry: one centred, narrower form column. */
.form-workspace .rail,.form-workspace .rail-note,.apply-layout { width: min(100%,760px); margin-inline: auto; }
.form-workspace .rail-note { text-align: center; }
.apply-layout { display: flex; flex-direction: column; gap: 18px; }
.apply-layout .form-panel { width: 100%; }
.apply-side { display: contents; }
.apply-photo { order: -1; width: 100%; aspect-ratio: 16 / 5; }
.apply-photo img { display: block; }
.form-talk,.apply-side .form-talk { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 24px; text-align: center; }
.form-talk > * { margin: 0; }
.ask-card { width: min(100%,760px); }
.ask-you { width: 100%; }
.frow-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 700px) { .frow-4 { grid-template-columns: minmax(0,1fr); } }
/* After you submit: centred to match. */
.after-submit .section-head { display: block; text-align: center; }
.after-submit .section-head .kicker { justify-content: center; }
.after-steps li { display: grid; justify-items: center; text-align: center; }
@media (min-width: 921px) { .after-submit .after-track .rail-line { left: 12.5%; width: 75%; } }

/* A number or time range stays on one line. */
.nb { white-space: nowrap; }
/* The forms finish arranging themselves as the page loads; their glow joins after that, so it doesn't jump. */
.js:not(.is-loaded) .form-workspace > .lit { visibility: hidden; }