/* Shared primitives, navigation, photography, motion and footer. Page files contain layouts only. */
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { margin: 0; min-height: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-8)); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font: 400 var(--text-body)/1.6 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body:not(.home-page) { display: flex; flex-direction: column; }
body>main { flex: 1; }
body:not([data-overlay-header])>main { padding-top: var(--header-height); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button { cursor: pointer; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
[data-theme='landscape'] :focus-visible { outline-color: var(--color-inverse); }
.skip-link { position: fixed; top: 8px; left: var(--page-gutter); padding: 10px 18px; background: var(--color-ink); color: var(--color-inverse); border-radius: var(--radius-control); transform: translateY(-160%); z-index: var(--layer-skip); }
.skip-link:focus { transform: none; }

/* Header: a slim bar, transparent over photography and frosted once scrolled. */
.site-header { position: fixed; inset: 0 0 auto; height: var(--header-height); padding-inline: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); color: var(--color-ink); z-index: var(--layer-header); transition: color var(--duration-normal) var(--ease-out); }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #f6f7f4cc; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 1px 0 #0e1b1712; transition: opacity var(--duration-normal) var(--ease-out); }
body[data-overlay-header] .site-header:not([data-scrolled]) { color: var(--color-inverse); }
body[data-overlay-header] .site-header:not([data-scrolled])::before { opacity: 0; }
body[data-overlay-header] .site-header:not([data-scrolled]) .site-nav a { opacity: .9; }
body[data-overlay-header] .site-header:not([data-scrolled]) .site-nav a:hover { opacity: 1; }
.brand-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: var(--text-small); font-weight: 500; letter-spacing: -.01em; }
.brand-icon { display: block; width: 20px; height: 20px; background: currentColor; mask: url('/assets/brand-symbol.svg') center/contain no-repeat; -webkit-mask: url('/assets/brand-symbol.svg') center/contain no-repeat; transition: transform var(--duration-normal) var(--ease-spring); }
.brand-link:hover .brand-icon { transform: rotate(45deg); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-caption); white-space: nowrap; opacity: .72; transition: opacity var(--duration-fast) var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current='page'] { opacity: 1; }
.site-nav a[aria-current='page'] { font-weight: 500; }
.menu-toggle { display: none; }

.site-footer { width: 100%; padding: var(--space-6) var(--page-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); font-size: var(--text-caption); color: var(--muted); }
.site-footer>span { margin-right: auto; }
.site-footer a { transition: color var(--duration-fast) var(--ease-out); }
.site-footer a:hover { color: var(--ink); }
.home-page .site-footer { position: absolute; bottom: 0; left: 0; padding-block: var(--space-5); }

/* Type */
.ui-title { font-size: var(--text-title); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: var(--space-3) 0 var(--space-5); text-wrap: balance; }
.ui-section-title { font-size: var(--text-section); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin: 0; text-wrap: balance; }
.ui-lead { font-size: var(--text-lead); line-height: 1.35; letter-spacing: -.015em; max-width: 34ch; margin: 0; text-wrap: pretty; }
.ui-eyebrow { display: block; font-size: var(--text-small); font-weight: 500; letter-spacing: -.005em; color: var(--muted); }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.ui-help { font-size: var(--text-small); line-height: 1.6; color: var(--muted); }
.ui-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.ui-number { font-variant-numeric: tabular-nums; }
.ui-label { display: block; font-size: var(--text-small); margin-bottom: var(--space-2); }

/* Buttons: the trailing mark sits in its own circle and moves on hover. */
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; max-width: 100%; padding: 6px 22px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-inverse); font: 500 var(--text-small)/1.25 var(--font); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-spring); }
.ui-button:has(>.ui-icon,>.button-arrow,>[aria-hidden='true']) { padding-right: 7px; }
.ui-button>.ui-icon, .ui-button>.button-arrow, .ui-button>[aria-hidden='true'] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #ffffff24; font-size: 1.05rem; line-height: 1; transition: transform var(--duration-normal) var(--ease-spring); }
.ui-button:hover:not(:disabled) { background: var(--color-accent); }
.ui-button:hover:not(:disabled)>.ui-icon, .ui-button:hover:not(:disabled)>[aria-hidden='true'] { transform: translate(2px,-1px) scale(1.06); }
.ui-button:active:not(:disabled) { transform: scale(.98); }
.ui-button:disabled { opacity: .5; cursor: default; }
.ui-button--secondary { border-color: var(--color-line); background: transparent; color: var(--color-ink); }
.ui-button--secondary>.ui-icon, .ui-button--secondary>[aria-hidden='true'] { background: var(--color-soft); }
.ui-button--secondary:hover:not(:disabled) { background: var(--color-soft); border-color: var(--color-accent); }
.ui-button--text { padding-inline: 0; background: transparent; color: var(--color-accent); }
.ui-button--text>.ui-icon { background: transparent; }
.ui-button--text:hover:not(:disabled) { background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.ui-button--danger { background: transparent; border-color: var(--color-line); color: var(--color-danger); }
.ui-button--danger:hover:not(:disabled) { background: #f8ebe7; border-color: var(--color-danger); }
[data-theme='landscape'] .ui-button { background: var(--control-fill); border-color: var(--control-border); color: var(--control-ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-theme='landscape'] .ui-button:hover:not(:disabled) { background: var(--control-hover); border-color: var(--color-inverse); }
.ui-button[aria-busy='true']::after { content: ''; width: 16px; height: 16px; margin: 9px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; }
.ui-button[aria-busy='true']>.button-arrow { display: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Fields */
.ui-input { width: 100%; min-height: 52px; border: 1px solid var(--color-line); border-radius: var(--radius-control); padding: 12px 16px; background: var(--color-surface); color: var(--color-ink); font-size: var(--text-body); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.ui-input::placeholder { color: #7c8a84; }
.ui-input:hover { border-color: #b9c4bc; }
.ui-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px #0b7a5724; }
.field-input { display: flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.field-input:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px #0b7a5724; }
.field-input .ui-input { border: 0; padding-inline: 0; background: transparent; box-shadow: none; }
.field-input>span { font-size: var(--text-small); color: var(--muted); }
.ui-panel { padding: clamp(1.5rem,3.5vw,2.5rem); border-radius: var(--radius-panel); background: var(--color-surface); }

/* Full-bleed photography */
.page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 92dvh; padding: calc(var(--header-height) + var(--space-7)) var(--page-gutter) clamp(2.5rem,7vw,5.5rem); overflow: clip; background: var(--color-night); view-timeline: --hero block; view-timeline-inset: 0; }
.page-hero--short { min-height: 64dvh; }
.page-hero-media { position: absolute; inset: 0; z-index: -1; animation: hero-arrive 1.8s var(--ease-out) both; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#0b161380,transparent 22%,#0b161326 46%,#0b1613cc); }
.page-hero--short::after { background: linear-gradient(180deg,#0b161380,#0b161333 26%,#0b1613d9); }
.page-hero-copy { width: 100%; max-width: var(--page-width); margin-inline: auto; }
.page-hero-copy>* { animation: copy-arrive 1.1s var(--ease-out) both; animation-delay: calc(.15s + var(--arrive-index,0)*.09s); }
.page-hero-copy>:nth-child(2) { --arrive-index: 1; }
.page-hero-copy>:nth-child(3) { --arrive-index: 2; }
.page-hero-copy>:nth-child(4) { --arrive-index: 3; }
.page-hero-copy .ui-eyebrow { color: var(--ink); }
.bleed { margin: 0; overflow: clip; background: var(--color-paper); }
.bleed img { width: 100%; height: clamp(20rem,62vw,50rem); object-fit: cover; }
@keyframes hero-arrive { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }

/* Scroll choreography runs on the compositor where supported; ui/site.js covers other browsers. */
@media(prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: view()) {
    .page-hero-media img { animation: hero-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .page-hero-copy { animation: hero-copy-out linear both; animation-timeline: --hero; animation-range: exit 0% exit 75%; }
    .bleed img { animation: bleed-open linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    [data-reveal] { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0 entry 13rem; }
  }
}
@keyframes hero-drift { to { transform: translateY(14%) scale(1.08); } }
@keyframes hero-copy-out { to { opacity: 0; transform: translateY(-3rem); } }
@keyframes bleed-open { from { clip-path: inset(9% 14% round 2.25rem); transform: scale(1.1); } to { clip-path: inset(0 0 round 0); transform: none; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(2.75rem); } to { opacity: 1; transform: none; } }
.reveal-fallback [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-fallback [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(2.75rem); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }

/* Saving a receipt, offered at the end of the report. */
.vault-save { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-5) 0; border-block: 1px solid var(--line); font-size: var(--text-small); }
.vault-save p { margin: 0; }
.vault-save a, .vault-offer a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.vault-offer { margin-block: var(--space-7) var(--space-5); padding: clamp(2rem,5vw,4rem); }
.vault-offer h2 { font-size: clamp(1.75rem,3.6vw,3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 var(--space-4); }
.vault-offer p { max-width: 56ch; margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--muted); }
.vault-offer-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.vault-offer-status { margin-top: var(--space-4) !important; }
.vault-offer-status:empty { display: none; }

@media(max-width:760px) {
  .site-header[data-menu-open] { color: var(--color-inverse) !important; }
  .site-header[data-menu-open]::before { opacity: 0; }
  .menu-toggle { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; z-index: 1; }
  .menu-lines { position: relative; display: block; width: 22px; height: 12px; }
  .menu-lines i { position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--duration-normal) var(--ease-spring), top var(--duration-normal) var(--ease-spring); }
  .menu-lines i:first-child { top: 0; }
  .menu-lines i:last-child { top: 10.5px; }
  [data-menu-open] .menu-lines i { top: 5px; }
  [data-menu-open] .menu-lines i:first-child { transform: rotate(45deg); }
  [data-menu-open] .menu-lines i:last-child { transform: rotate(-45deg); }
  .brand-link { position: relative; z-index: 1; }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2); padding: var(--page-gutter); background: var(--color-night); visibility: hidden; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
  [data-menu-open] .site-nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .site-nav a { min-height: 56px; font-size: clamp(1.9rem,8vw,2.5rem); font-weight: 600; letter-spacing: -.035em; opacity: 0; transform: translateY(1.75rem); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-slow) var(--ease-spring); }
  [data-menu-open] .site-nav a { opacity: 1; transform: none; transition-delay: calc(60ms + var(--nav-index,0)*55ms); }
  .site-nav a:nth-child(2) { --nav-index: 1; }
  .site-nav a:nth-child(3) { --nav-index: 2; }
  .site-nav a:nth-child(4) { --nav-index: 3; }
  .page-hero { min-height: 84dvh; }
  .page-hero--short { min-height: 58dvh; }
  .site-footer { padding-block: var(--space-5); }
  .site-footer>span { width: 100%; margin: 0; }
  .vault-offer-actions .ui-button { flex: 1 1 100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } @view-transition { navigation: none; } }