/* United Services USA Corp. v2
   taste-skill draw: seed 1955403881, direction "uneven-photographs", palette "Frost and slate", type Sentient + Switzer.
   Icons: Phosphor (MIT), light and duotone weights only. */

@font-face { font-family: 'Sentient'; src: url('/fonts/sentient-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('/fonts/sentient-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f7f9fa;
  --stone: #ecf0f2;
  --stone-2: #dfe6e9;
  --ink: #1f3038;
  --soft: #46545b;
  --accent: #0d7480;
  --deep: #14232a;
  --deep-2: #1c2f37;
  --on-deep: #eef3f4;
  --on-deep-soft: #a3b3b9;
  --accent-on-deep: #7fc6cc;

  --serif: 'Sentient', 'Iowan Old Style', Georgia, serif;
  --sans: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  --m: clamp(20px, 5.5vw, 96px);
  --gap: clamp(16px, 1.8vw, 28px);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 500 14px var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { padding-inline: var(--m); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sans { font-family: var(--sans); }
.soft { color: var(--soft); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display { font: 300 clamp(56px, 8vw, 128px)/0.96 var(--serif); letter-spacing: -0.02em; }
.h2 { font: 300 clamp(40px, 4.45vw, 64px)/1.04 var(--serif); letter-spacing: -0.015em; }
.h3 { font: 400 28px/1.2 var(--serif); letter-spacing: -0.005em; }
.lead { font: 400 clamp(19px, 1.5vw, 22px)/1.5 var(--serif); }
.small { font: 400 14px/1.55 var(--sans); }
.ln { display: block; }

/* ---------- icons ---------- */
.i { width: 1em; height: 1em; flex: none; fill: currentColor; }
.i-duo .tone { fill: var(--accent); opacity: 0.22; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px var(--m) 22px;
  color: var(--ink);
  transition: transform 0.6s var(--out), background-color 0.45s var(--out), color 0.45s var(--out);
}
body[data-hero="photo"] .top { color: #fff; }
body[data-hero="photo"] .top.solid, .top.solid { background: var(--paper); color: var(--ink); }
.top.away { transform: translateY(-101%); }
.mark { display: flex; gap: 12px; align-items: center; text-decoration: none; font: 500 14px/1.25 var(--sans); }
.mark svg { width: 44px; height: auto; flex: none; }
.mark .m-top { fill: var(--accent-on-deep); }
.top.solid .mark .m-top, body:not([data-hero="photo"]) .mark .m-top { fill: var(--accent); }
.nav-wrap { display: flex; align-items: baseline; gap: 44px; font: 500 16px/1.25 var(--sans); }
.nav { display: flex; align-items: baseline; gap: 0.3em; }
.nav li:not(:last-child)::after { content: ","; }
.nav-cta { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.nav-cta .i { font-size: 18px; transition: transform 0.5s var(--spring); }
.nav-cta:hover .i { transform: translate(3px, -2px); }
.nav a, .nav-cta span { position: relative; text-decoration: none; padding-block: 4px; }
.nav a::after, .nav-cta span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.5s var(--out); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav-cta:hover span::after, .nav-cta[aria-current="page"] span::after { transform: scaleX(1); transform-origin: 0 50%; }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; cursor: pointer; font: 500 16px var(--sans); }
.menu-btn .i { font-size: 22px; }

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--deep); color: var(--on-deep);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px var(--m) 40px;
  opacity: 0; transition: opacity 0.45s var(--out);
}
.menu[hidden] { display: none; }
.menu.open { opacity: 1; }
.menu-head { display: flex; justify-content: space-between; align-items: flex-start; }
.menu-close { background: none; border: 0; color: inherit; font: 500 16px var(--sans); display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 4px 0; }
.menu-close .i { font-size: 22px; }
.menu-links a { display: block; overflow: hidden; text-decoration: none; font: 300 clamp(40px, 11vw, 64px)/1.1 var(--serif); }
.menu-links a span { display: block; transform: translateY(105%); transition: transform 0.8s var(--spring); }
.menu.open .menu-links a span { transform: none; }
.menu.open .menu-links li:nth-child(2) span { transition-delay: 0.05s; }
.menu.open .menu-links li:nth-child(3) span { transition-delay: 0.1s; }
.menu.open .menu-links li:nth-child(4) span { transition-delay: 0.15s; }
.menu.open .menu-links li:nth-child(5) span { transition-delay: 0.2s; }
.menu-foot { font: 400 16px/1.6 var(--sans); color: var(--on-deep-soft); }
.menu-foot a { color: var(--on-deep); }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--paper); --b-i: rgba(255, 255, 255, 0.14);
  display: inline-flex; align-items: center; gap: 18px;
  height: 58px; padding: 0 8px 0 26px; border: 0; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.5s var(--spring), background-color 0.4s var(--out);
}
.btn:active { transform: scale(0.98); }
.btn-i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--b-i); transition: transform 0.6s var(--spring); }
.btn-i .i { font-size: 18px; }
.btn:hover .btn-i { transform: translate(3px, -1px) scale(1.06); }
.btn-paper { --b-bg: var(--paper); --b-fg: var(--ink); --b-i: var(--stone); }
.btn-accent { --b-bg: var(--accent); --b-fg: #fff; }
.roll { display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15; }
.roll > span { display: block; transition: transform 0.55s var(--spring); }
.roll > span::after { content: attr(data-text); display: block; }
.btn:hover .roll > span, .link-arrow:hover .roll > span { transform: translateY(-50%); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.link-arrow .i { font-size: 18px; transition: transform 0.5s var(--spring); }
.link-arrow:hover .i { transform: translate(3px, -2px); }

/* ---------- photos ---------- */
.ph { position: relative; overflow: hidden; background: var(--stone-2); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- HOME: hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--deep); color: #fff; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 34%; background: linear-gradient(rgba(12, 20, 24, 0.5), rgba(12, 20, 24, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */ }
.hero::after { bottom: 0; height: 62%; background: linear-gradient(rgba(12, 20, 24, 0), rgba(12, 20, 24, 0.62)); /* taste-skill-ignore: neutral scrim under text on a photo */ }
.hero-dim { position: absolute; inset: 0; z-index: 1; background: var(--deep); opacity: 0; pointer-events: none; }
.hero-foot { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(32px, 6vh, 64px); }
.hero-title { font: 300 clamp(56px, 8vw, 128px)/0.95 var(--serif); letter-spacing: -0.024em; }
.hero-row { display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 64px); margin-top: clamp(24px, 4vh, 40px); }
.hero-row p { max-width: 40ch; font: 400 18px/1.55 var(--serif); color: rgba(255, 255, 255, 0.9); }

/* ---------- HOME: statement, uneven photographs ---------- */
.state { padding-block: clamp(120px, 20vh, 220px) clamp(100px, 16vh, 180px); }
.state-p { grid-column: 1 / -1; justify-self: center; max-width: 1130px; text-align: center; text-wrap: balance; font: 300 36px/1.36 var(--serif); letter-spacing: -0.012em; }
.pill { display: inline-block; position: relative; width: 2.7em; height: 0.96em; margin: 0 0.06em; border-radius: 999px; overflow: hidden; vertical-align: -0.16em; background: var(--stone-2); isolation: isolate; }
.pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.state-p .w { display: inline-block; }
/* ---------- HOME: opening window ---------- */
.opening { position: relative; background: var(--paper); }
.op-stage { position: relative; height: 100svh; overflow: hidden; background: var(--deep); }
.op-stage img, .op-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.op-stage video { object-position: 60% 50%; }
.op-stage::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(rgba(12, 20, 24, 0), rgba(12, 20, 24, 0.6)); /* taste-skill-ignore: neutral scrim under text on a photo */ pointer-events: none; }
.op-line { position: absolute; z-index: 2; left: var(--m); bottom: clamp(40px, 8vh, 80px); color: #fff; font: 300 clamp(40px, 4.45vw, 64px)/1.04 var(--serif); letter-spacing: -0.015em; }
.op-line span { display: block; }
.opening.is-live { height: 210svh; }
.opening.is-live .op-stage { position: sticky; top: 0; }
.opening.is-live .op-stage { clip-path: inset(var(--iy, 0%) var(--ix, 0%)); }
.opening.is-live .op-stage img, .opening.is-live .op-stage video { transform: scale(var(--sc, 1)); }
.opening.is-live .op-stage::after { opacity: var(--lo, 1); }
.opening.is-live .op-line span { opacity: var(--lo, 1); transform: translateY(calc((1 - var(--lo, 1)) * 30px)); }
.opening.is-live .op-line span + span { opacity: var(--lo2, 1); transform: translateY(calc((1 - var(--lo2, 1)) * 30px)); }

/* ---------- HOME: portrait beside three stacked facts ---------- */
.split { padding-block: clamp(110px, 18vh, 200px); }
.split .g12 { align-items: center; }
.sp-pic { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
.sp-text { grid-column: 8 / -1; }
.sp-list { margin-top: 48px; }
.sp-list li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding-block: 26px; }
.sp-list li + li { margin-top: 4px; }
.sp-list .i { font-size: 48px; }
.sp-list h3 { font: 400 28px/1.2 var(--serif); margin-bottom: 6px; }
.sp-list p { font: 400 16px/1.55 var(--sans); color: var(--soft); max-width: 40ch; }

/* pictures that drift inside their frame while the page scrolls */
.drift img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }

/* ---------- HOME: what we manage (one-size name columns) ---------- */
.manage { padding-block: clamp(110px, 16vh, 180px); background: var(--stone); }
.manage h2 { grid-column: 1 / -1; margin-bottom: 88px; }
.m-col { grid-column: span 3; }
.m-col:nth-of-type(1) { grid-column: 1 / span 3; }
.m-col:nth-of-type(2) { grid-column: 4 / span 3; }
.m-col:nth-of-type(3) { grid-column: 7 / span 3; }
.m-col .i { font-size: 48px; margin-bottom: 22px; }
.m-col h3 { font: 400 28px/1.2 var(--serif); margin-bottom: 18px; }
.m-col li { font: 400 18px/1.3 var(--sans); color: var(--soft); padding-block: 5px; }
.m-col li button { all: unset; cursor: default; transition: color 0.3s var(--out); }
.m-col li button:hover, .m-col li button:focus-visible, .m-col li button.on { color: var(--ink); }
.m-side { grid-column: 10 / -1; grid-row: 2; }
.m-pics { aspect-ratio: 4 / 5; }
.m-pics img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.9s var(--out), transform 1.4s var(--out); }
.m-pics img.on { opacity: 1; transform: none; }
.m-desc { margin-top: 18px; font: 400 16px/1.5 var(--sans); min-height: 6em; }
.m-desc strong { display: block; font-weight: 500; margin-bottom: 4px; }
.m-desc span { color: var(--soft); }

/* ---------- HOME: lender report (dark) ---------- */
.report { background: var(--deep); color: var(--on-deep); padding-block: clamp(96px, 16vh, 180px); }
.report { overflow: hidden; }
.report .g12 { align-items: center; }
.r-text { grid-column: 1 / 6; }
.r-text .h2 { margin-bottom: 28px; }
.r-text p { color: var(--on-deep); max-width: 40ch; margin-bottom: 40px; }
.r-pic { grid-column: 7 / -1; margin-right: calc(-1 * var(--m)); aspect-ratio: 5 / 4; }
.r-note { margin-top: 18px; font: 400 14px/1.5 var(--sans); color: var(--on-deep-soft); }

[data-ui="report"] { background: var(--paper); color: var(--ink); padding: clamp(24px, 3vw, 44px); font: 400 14px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
[data-ui="report"] .rd-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 32px; }
[data-ui="report"] .rd-title { font: 400 28px/1.1 var(--serif); }
[data-ui="report"] .rd-sub { color: var(--soft); margin-top: 6px; }
[data-ui="report"] .rd-badge { display: inline-flex; gap: 8px; align-items: center; background: var(--stone); padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
[data-ui="report"] .rd-badge .i { color: var(--accent); font-size: 18px; }
[data-ui="report"] .rd-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 14px; }
[data-ui="report"] .rd-sum div { background: var(--stone); padding: 16px 18px; }
[data-ui="report"] .rd-sum dt { color: var(--soft); }
[data-ui="report"] .rd-sum dd { font: 400 28px/1.2 var(--serif); margin-top: 4px; }
[data-ui="report"] .rd-sum .held dd { color: var(--accent); }
[data-ui="report"] .rd-bar { display: flex; height: 10px; margin-bottom: 32px; background: var(--stone); }
[data-ui="report"] .rd-bar span { display: block; height: 100%; transition: flex-basis 1.6s var(--out); }
[data-ui="report"] .rd-bar .ok { background: var(--ink); flex: 0 0 0%; }
[data-ui="report"] .rd-bar .hold { background: var(--accent); flex: 0 0 0%; }
[data-ui="report"].in .rd-bar .ok { flex-basis: 82.99%; }
[data-ui="report"].in .rd-bar .hold { flex-basis: 17.01%; transition-delay: 0.5s; }
[data-ui="report"] table { width: 100%; border-collapse: collapse; }
[data-ui="report"] th { text-align: left; font-weight: 500; color: var(--soft); padding: 0 12px 10px; }
[data-ui="report"] td { padding: 14px 12px; vertical-align: top; }
[data-ui="report"] tbody tr:nth-child(odd) td { background: var(--stone); }
[data-ui="report"] .num { text-align: right; white-space: nowrap; }
[data-ui="report"] td small { display: block; color: var(--soft); font-size: 14px; margin-top: 3px; }
[data-ui="report"] td.cut { color: var(--accent); font-weight: 500; }
[data-ui="report"] .rd-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
[data-ui="report"] .rd-foot div { display: flex; gap: 10px; align-items: flex-start; }
[data-ui="report"] .rd-foot .i { font-size: 22px; color: var(--accent); margin-top: 1px; }
[data-ui="report"] .rd-foot b { display: block; font-weight: 500; }
[data-ui="report"] .rd-foot span { color: var(--soft); }

/* ---------- HOME: how we run a project (drag row) ---------- */
.run { padding-block: clamp(110px, 18vh, 200px) clamp(90px, 14vh, 160px); overflow: clip; }
.run.is-pinned { padding-block: 0; }
.run.is-pinned .run-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.run.is-pinned .run-btns { display: none; }
.run.is-pinned .run-row { overflow: visible; scroll-snap-type: none; cursor: default; padding-top: 40px; }
.run.is-pinned .run-col { flex-basis: min(300px, 31svh); }
.run-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.run-top .h2 { max-width: 12em; }
.run-btns { display: flex; gap: 6px; }
.run-btns button { width: 48px; height: 48px; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background-color 0.3s var(--out), opacity 0.3s; }
.run-btns button:hover { background: var(--accent); }
.run-btns button[disabled] { opacity: 0.3; cursor: default; background: var(--ink); }
.run-btns .i { font-size: 20px; }
.run-bar { height: 6px; background: var(--stone-2); margin-top: 32px; position: relative; overflow: hidden; }
.run-bar span { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0.2); transition: transform 0.4s var(--out); }
.run-row { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 48px var(--m) 8px; margin-inline: calc(-1 * var(--m)); scroll-padding-inline: var(--m); cursor: grab; }
.run-row::-webkit-scrollbar { display: none; }
.run-row.dragging { cursor: grabbing; scroll-snap-type: none; }
.run-row.dragging * { user-select: none; pointer-events: none; }
.run-col { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.run-col .ph { aspect-ratio: 4 / 5; margin-bottom: 22px; }
.run-col h3 { display: flex; gap: 12px; align-items: center; font: 600 18px/1.25 var(--sans); }
.run-col h3 .i { font-size: 30px; }
.run-col p { font: 400 16px/1.55 var(--sans); color: var(--soft); margin-top: 10px; }

/* ---------- HOME: what we oversee (two full-screen panels that stack) ---------- */
.oversee { position: relative; background: var(--deep); }
.ov-head { background: var(--paper); padding-block: clamp(110px, 18vh, 200px) clamp(64px, 10vh, 110px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.ov-head .h2 { grid-column: 1 / 8; }
.ov-intro { grid-column: 8 / -1; font: 400 18px/1.55 var(--serif); max-width: 38ch; }
.ov-panel { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: var(--deep); }
.ov-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--ps, 1)); transform-origin: 50% 30%; }
.ov-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--deep); opacity: var(--pd, 0); pointer-events: none; }
.ov-panel::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(12, 20, 24, 0), rgba(12, 20, 24, 0.66)); /* taste-skill-ignore: neutral scrim under text on a photo */ pointer-events: none; }
.ov-copy { position: absolute; z-index: 2; left: var(--m); bottom: clamp(40px, 8vh, 80px); max-width: 560px; }
.ov-copy .i { font-size: 56px; margin-bottom: 18px; }
.ov-copy .i-duo .tone { fill: #fff; opacity: 0.3; }
.ov-copy h3 { font: 300 clamp(40px, 4.45vw, 64px)/1.04 var(--serif); letter-spacing: -0.015em; }
.ov-copy p { font: 400 18px/1.55 var(--serif); color: rgba(255, 255, 255, 0.9); margin-top: 14px; max-width: 40ch; }
.ov-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ov-copy li { font: 500 14px/1 var(--sans); padding: 10px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.ov-track { height: 225svh; }
.ov-last { position: relative; top: auto; margin-top: -100svh; z-index: 2; }
.ov-copy > * { opacity: var(--co, 1); }
.ov-note { position: relative; z-index: 3; background: var(--deep); color: var(--on-deep-soft); font: 400 14px/1.5 var(--sans); padding-block: 22px; }

/* ---------- HOME/ABOUT: office (wide photo, colour tile, facts) ---------- */
.office { padding-block: clamp(110px, 18vh, 200px); background: var(--stone); }
.office .h2 { grid-column: 1 / -1; }
.office .lead { grid-column: 1 / 7; margin-top: 24px; }
.off-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; margin-top: 72px; align-items: start; }
.off-photo { grid-column: 1 / 9; aspect-ratio: 16 / 10; }
.off-photo img { position: absolute; inset: 0; transition: opacity 1.6s ease-out; }
.off-photo img + img { opacity: 0; }
.off-photo.alt img + img { opacity: 1; }
.off-card { position: absolute; top: 0; right: 0; width: 320px; padding: 20px; background: var(--paper); font: 400 16px/1.5 var(--sans); z-index: 2; }
.off-card .i { font-size: 26px; color: var(--accent); margin-bottom: 10px; }
.off-side { grid-column: 9 / -1; }
.off-map { background: var(--deep); display: grid; place-items: center; padding: 18px; }
.off-map svg { width: 100%; height: auto; max-height: 100%; }
.m-state { fill: #22373f; }
.m-cty path { fill: #2f5a60; stroke: var(--deep); stroke-width: 2; }
.m-ring { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.6; transform-box: fill-box; transform-origin: center; }
.m-dot { fill: #fff; }
.off-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 24px; font: 400 14px/1.45 var(--sans); }
.off-facts dt { display: flex; gap: 8px; align-items: center; color: var(--soft); margin-bottom: 4px; }
.off-facts dt .i { font-size: 18px; color: var(--accent); }
.off-facts dd { font-weight: 500; }

/* ---------- closing photograph ---------- */
.closing { position: relative; height: 90svh; min-height: 560px; overflow: hidden; color: #fff; background: var(--deep); }
.closing .cl-pic { position: absolute; inset: 0; overflow: hidden; }
.closing .cl-pic img { object-position: 30% 50%; filter: brightness(0.86); }
.closing-text { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: 27svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.closing-text > div { grid-column: 8 / -1; }
.closing-text h2 { margin-bottom: 22px; }
.closing-text p { font: 400 18px/1.55 var(--serif); color: rgba(255, 255, 255, 0.92); max-width: 38ch; margin-bottom: 32px; }

/* ---------- footer (name first) ---------- */
.foot { position: relative; background: var(--deep); color: var(--on-deep); overflow: hidden; min-height: 90svh; display: flex; flex-direction: column; padding: 0 var(--m) 36px; }
.foot-name { display: block; width: max-content; max-width: 100%; font: 300 11.6vw/1 var(--serif); letter-spacing: -0.03em; white-space: nowrap; padding-top: clamp(72px, 12vh, 132px); color: var(--on-deep); }
.foot-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 72px; }
.foot-places { grid-column: 1 / 6; }
.foot-places li + li { margin-top: 10px; }
.foot-places a { font: 300 clamp(28px, 2.5vw, 36px)/1.2 var(--serif); color: var(--accent-on-deep); text-decoration: none; display: inline-flex; gap: 14px; align-items: center; }
.foot-places a .i { font-size: 0.8em; transition: transform 0.5s var(--spring); }
.foot-places a:hover .i { transform: translate(4px, -3px); }
.foot-places p { font: 400 16px/1.5 var(--sans); color: var(--on-deep-soft); margin-top: 18px; max-width: 34ch; }
.foot-cols { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); font: 400 16px/1.5 var(--sans); }
.foot-cols h3 { font: 500 16px/1.5 var(--sans); color: var(--on-deep-soft); margin-bottom: 12px; }
.foot-cols li + li { margin-top: 6px; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--accent-on-deep); }
.foot-legal { margin-top: auto; padding-top: 96px; display: flex; justify-content: space-between; gap: 24px; font: 400 14px/1.5 var(--sans); color: var(--on-deep-soft); }
.foot-legal a { color: var(--on-deep); }

/* ---------- inner pages ---------- */
.page-head { padding-top: calc(var(--header-h) + clamp(64px, 12vh, 140px)); padding-bottom: clamp(56px, 9vh, 110px); }
.page-head .display { grid-column: 1 / 8; }
.page-head .lead { grid-column: 8 / -1; align-self: end; padding-bottom: 0.6em; }

/* services */
.for { padding-block: clamp(100px, 16vh, 180px) clamp(60px, 10vh, 120px); }
.for h2 { grid-column: 1 / 5; }
.for-list { grid-column: 5 / -1; }
.for-list li { display: grid; grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 24px; align-items: start; padding-block: 30px; }
.for-list li + li { background: none; }
.for-list .i { font-size: 52px; }
.for-list h3 { font: 400 28px/1.15 var(--serif); }
.for-list p { font: 400 16px/1.55 var(--sans); color: var(--soft); }
.svc { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--paper); }
.svc:nth-of-type(even) { background: var(--stone); }
.svc-media { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--deep); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: 50% 50%; }
.svc-copy { padding: clamp(96px, 16vh, 170px) var(--m) clamp(96px, 16vh, 170px) clamp(48px, 6vw, 110px); align-self: center; }
.svc.flip .svc-media { order: 2; }
.svc.flip .svc-copy { padding-left: var(--m); padding-right: clamp(48px, 6vw, 110px); }
.svc-head .i { font-size: 64px; margin-bottom: 26px; }
.svc-head h2 { font: 300 clamp(36px, 3.4vw, 52px)/1.06 var(--serif); letter-spacing: -0.012em; }
.svc-head p { margin-top: 14px; font: 400 18px/1.45 var(--serif); color: var(--soft); }
.svc-para { margin-top: 32px; font: 400 clamp(18px, 1.35vw, 21px)/1.6 var(--serif); max-width: 42ch; }
.svc-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 40px; font: 400 16px/1.4 var(--sans); max-width: 560px; }
.svc-inc li { display: flex; gap: 12px; align-items: flex-start; }
.svc-inc .i { font-size: 20px; color: var(--accent); margin-top: 0; }

/* about */
.ab-hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; background: var(--deep); }
.ab-hero .ph { position: absolute; inset: 0; background: var(--deep); }
.ab-hero .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ab-hero::before, .ab-hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.ab-hero::before { top: 0; height: 30%; background: linear-gradient(rgba(12, 20, 24, 0.45), rgba(12, 20, 24, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */ }
.ab-hero::after { bottom: 0; height: 55%; background: linear-gradient(rgba(12, 20, 24, 0), rgba(12, 20, 24, 0.66)); /* taste-skill-ignore: neutral scrim under text on a photo */ }
.ab-hero .hero-foot { z-index: 2; }
.ab-hero .hero-dim { z-index: 1; }
.side { padding-block: clamp(110px, 18vh, 200px); }
.side .h2 { grid-column: 1 / 8; }
.side .lead { grid-column: 1 / 7; margin-top: 32px; }
.side-pics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 96px; align-items: start; }
.side-pics .a { grid-column: 1 / 8; }
.side-pics .a .ph { aspect-ratio: 3 / 2; }
.side-pics .b { grid-column: 9 / -1; align-self: end; }
.side-pics .b .ph { aspect-ratio: 4 / 5; }
.side-pics figcaption { margin-top: 14px; font: 400 15px/1.5 var(--sans); color: var(--soft); }
.principles { padding-block: 0 clamp(110px, 18vh, 200px); }
.principles ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.principles li .i { font-size: 48px; margin-bottom: 22px; }
.principles h3 { font: 400 28px/1.2 var(--serif); margin-bottom: 12px; }
.principles p { font: 400 16px/1.55 var(--sans); color: var(--soft); max-width: 36ch; }

/* questions */
.faq { padding-block: 0 clamp(110px, 18vh, 200px); }
.faq .g12 { align-items: start; }
.faq-groups { grid-column: 1 / 8; }
.faq-group + .faq-group { margin-top: 88px; }
.faq-group > h2 { display: flex; gap: 14px; align-items: center; font: 400 28px/1.2 var(--serif); margin-bottom: 22px; }
.faq-group > h2 .i { font-size: 40px; }
.qa { background: var(--stone); }
.qa + .qa { margin-top: 4px; }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 26px; cursor: pointer; font: 400 22px/1.3 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .q-i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; transition: transform 0.5s var(--spring), background-color 0.3s; }
.qa summary .q-i .i { font-size: 16px; }
.qa[open] summary .q-i { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.qa .a { overflow: hidden; }
.qa .a p { padding: 0 26px 28px; max-width: 62ch; font: 400 18px/1.6 var(--serif); }
.faq-side { grid-column: 9 / -1; position: sticky; top: 120px; }
.faq-side .ph { aspect-ratio: 4 / 5; }
.faq-side .ph img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--out), transform 1.6s var(--out); transform: scale(1.04); }
.faq-side .ph img.on { opacity: 1; transform: none; }
.q-band { position: relative; height: 62svh; min-height: 380px; overflow: hidden; margin-bottom: clamp(80px, 12vh, 140px); }
.q-band img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 55%; }
.faq-side p { margin-top: 22px; font: 400 16px/1.55 var(--sans); color: var(--soft); }
.faq-side .link-arrow { margin-top: 14px; color: var(--ink); }

/* request */
.req { padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px)); padding-bottom: clamp(110px, 16vh, 180px); }
.req .g12 { align-items: start; }
.req-main { grid-column: 1 / 8; }
.req-main .display { margin-bottom: 28px; }
.req-main .lead { max-width: 36ch; margin-bottom: 64px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font: 400 16px/1.4 var(--sans); }
.f { display: flex; flex-direction: column; gap: 8px; }
.f.full { grid-column: 1 / -1; }
.f > label, .f legend { font-weight: 500; font-size: 16px; padding: 0; }
.f input, .f select, .f textarea { width: 100%; border: 0; border-radius: 0; background: var(--stone); padding: 16px 18px; font: 400 16px/1.4 var(--sans); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.3s, background-color 0.3s; }
.f input:focus, .f select:focus, .f textarea:focus { outline-color: var(--accent); background: #fff; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231f3038'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; padding-right: 48px; }
.f textarea { min-height: 150px; resize: vertical; }
fieldset.f { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--stone); font-size: 16px; transition: background-color 0.3s var(--out), color 0.3s var(--out); }
.chips span .i { font-size: 18px; }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-end { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; margin-top: 16px; flex-wrap: wrap; }
.form-end p { font-size: 14px; color: var(--soft); max-width: 40ch; }
.form-done { grid-column: 1 / -1; display: none; gap: 14px; align-items: flex-start; background: var(--stone); padding: 22px 24px; }
.form-done .i { font-size: 26px; color: var(--accent); }
.form.sent .form-done { display: flex; }
.req-side { grid-column: 9 / -1; position: sticky; top: 120px; }
.req-side .ph { aspect-ratio: 4 / 5; }
.req-side .ph.x img { position: absolute; inset: 0; transition: opacity 1.6s ease-out; }
.req-side .ph.x img:not(.on) { opacity: 0; }
.req-office { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin-top: 16px; background: var(--stone); padding: 10px; }
.req-office .ph { aspect-ratio: 1; }
.req-office p { font: 400 15px/1.45 var(--sans); }
.req-office b { display: block; font-weight: 500; }
.req-side dl { margin-top: 28px; display: grid; gap: 20px; font: 400 16px/1.5 var(--sans); }
.req-side dt { display: flex; gap: 10px; align-items: center; color: var(--soft); margin-bottom: 2px; }
.req-side dt .i { font-size: 20px; color: var(--accent); }
.req-side dd { font-weight: 500; }
.next { margin-top: 40px; }
.next h2 { font: 400 28px/1.2 var(--serif); margin-bottom: 18px; }
.next li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; font: 400 16px/1.5 var(--sans); color: var(--soft); }
.next li + li { margin-top: 16px; }
.next li .i { font-size: 26px; color: var(--ink); }
.next b { display: block; color: var(--ink); font-weight: 500; }

/* band that closes inner pages */
.band { background: var(--stone); padding-block: clamp(90px, 14vh, 160px) clamp(170px, 22vh, 220px); }
.band .h2 { grid-column: 1 / 8; }
.band .band-act { grid-column: 9 / -1; align-self: end; }
.band .band-act p { font: 400 18px/1.55 var(--serif); margin-bottom: 26px; }

/* ---------- motion ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.35s var(--out) both; }
  ::view-transition-new(root) { animation: vt-in 0.6s var(--out) both; }

  .js [data-lines] .ln { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js [data-lines] .ln > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--spring); }
  .js [data-lines].in .ln > span { transform: none; }
  .js [data-lines].in .ln:nth-child(2) > span { transition-delay: 0.09s; }
  .js [data-lines].in .ln:nth-child(3) > span { transition-delay: 0.18s; }

  /* the clip sits on the picture, never on the observed box: a fully clipped box never intersects */
  .js [data-shutter] > img, .js [data-shutter] > video { clip-path: inset(0 0 100% 0); transform: scale(1.07); transition: clip-path 1.25s var(--spring), transform 1.8s var(--out), opacity 1.6s ease-out; }
  .js [data-shutter].in > img, .js [data-shutter].in > video { clip-path: inset(0 0 0 0); transform: none; }
  .js .drift[data-shutter] > img { clip-path: inset(0 0 100% 0); transform: translate3d(0, var(--dy, 0px), 0); transition: clip-path 1.25s var(--spring); }
  .js .drift[data-shutter].in > img { clip-path: inset(0 0 0 0); transform: translate3d(0, var(--dy, 0px), 0); }

  .js [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--out), transform 1.1s var(--out); }
  .js [data-rise].in { opacity: 1; transform: none; }
  .js [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--out), transform 1s var(--out); transition-delay: calc(var(--k, 0) * 70ms); }
  .js [data-stagger].in > * { opacity: 1; transform: none; }

  .js .hero-media { transform: scale(1.08); opacity: 0; transition: transform 2.4s var(--out), opacity 1.2s var(--out); }
  .js .loaded .hero-media { transform: none; opacity: 1; }
  .js .hero-row { opacity: 0; transition: opacity 1s var(--out) 0.7s; }
  .js .loaded .hero-row { opacity: 1; }

  .m-ring { animation: ring 2.8s var(--out) infinite; }

  .is-filling .w { opacity: var(--o, 0.42); transform: translate3d(0, var(--y, 0px), 0); }
  .is-filling .pill { transform: scaleX(0.35); opacity: 0; transition: transform 1s var(--spring), opacity 0.6s var(--out); }
  .is-filling .pill img { transform: scale(1.4); transition: transform 1.6s var(--out); }
  .is-filling .pill.open { transform: none; opacity: 1; }
  .is-filling .pill.open img { transform: none; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }

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

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-wrap { display: none; }
  .menu-btn { display: inline-flex; }
  .run-top { flex-direction: column; align-items: flex-start; }
  .state-p { justify-self: start; text-align: left; max-width: none; font-size: 30px; }
  .m-col:nth-of-type(n) { grid-row: 2; }
  .m-side { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; align-items: end; }
  .m-pics { aspect-ratio: 3 / 2; }
  .r-text { grid-column: 1 / -1; position: static; margin-bottom: 56px; }
  .m-col:nth-of-type(1) { grid-column: 1 / span 4; }
  .m-col:nth-of-type(2) { grid-column: 5 / span 4; }
  .m-col:nth-of-type(3) { grid-column: 9 / span 4; }
  .off-photo { grid-column: 1 / -1; }
  .off-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; align-items: start; }
  .off-facts { margin-top: 0; }
  .closing-text > div { grid-column: 6 / -1; }
  .sp-pic { grid-column: 1 / 7; }
  .sp-text { grid-column: 7 / -1; }
  .ov-head .h2, .ov-intro { grid-column: 1 / -1; }
  .ov-intro { margin-top: 22px; }
  .foot-places { grid-column: 1 / -1; }
  .foot-cols { grid-column: 1 / -1; margin-top: 64px; }
  .for h2 { grid-column: 1 / -1; margin-bottom: 24px; }
  .svc-inc { grid-template-columns: 1fr; }
  .for-list { grid-column: 1 / -1; }
  .faq-groups { grid-column: 1 / -1; }
  .faq-side { grid-column: 1 / -1; position: static; margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; }
  .req-main { grid-column: 1 / -1; }
  .req-side { grid-column: 1 / -1; position: static; margin-top: 88px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .req-side dl { margin-top: 0; }
}

@media (max-width: 760px) {
  :root { --header-h: 72px; }
  body { font-size: 16px; }
  .top { padding-top: 18px; padding-bottom: 16px; }
  .hero-media { object-position: 72% 50%; }
  .hero-title { font-size: clamp(44px, 12.4vw, 64px); }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .state-p { font-size: 24px; line-height: 1.4; }
  .op-line { font-size: 30px; right: var(--m); }
  .sp-pic, .sp-text { grid-column: 1 / -1; }
  .sp-text { margin-top: 56px; }
  .sp-list li { grid-template-columns: 52px 1fr; gap: 16px; padding-block: 18px; }
  .sp-list .i { font-size: 40px; }
  .r-pic { grid-column: 1 / -1; margin: 56px calc(-1 * var(--m)) 0; }
  .ov-copy { right: var(--m); }
  .ov-copy .i { font-size: 44px; }
  .manage { padding-block: 14vh; }
  .manage h2 { margin-bottom: 56px; }
  .m-col, .m-col:nth-of-type(n) { grid-column: 1 / -1; grid-row: auto; }
  .m-col + .m-col { margin-top: 48px; }
  .m-side { display: none; }
  [data-ui="report"] .rd-head { flex-direction: column; }
  [data-ui="report"] .rd-sum { grid-template-columns: 1fr; }
  [data-ui="report"] .rd-foot { display: none; }
  [data-ui="report"] tbody tr.fund-x { display: none; }
  [data-ui="report"] th:nth-child(2), [data-ui="report"] td:nth-child(2) { display: none; }
  [data-ui="report"] td, [data-ui="report"] th { padding-inline: 8px; }
  .run-col { flex-basis: 78vw; }
  .office .lead { grid-column: 1 / -1; }
  .off-photo { aspect-ratio: auto; padding-top: 75%; }
  .off-photo img { top: 0; bottom: auto; height: auto; aspect-ratio: 4 / 3; }
  .off-card { position: relative; width: auto; }
  .off-side { grid-template-columns: 1fr; }
  .closing { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .closing .cl-pic { position: relative; height: 62svh; }
  .closing .cl-pic img { object-position: 22% 50%; filter: none; }
  .closing-text { position: relative; inset: auto; padding: 56px var(--m) 120px; left: 0; right: 0; bottom: 0; }
  .closing-text > div { grid-column: 1 / -1; }
  .foot-name { font-size: 11.4vw; padding-top: 64px; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .foot-legal { flex-direction: column; gap: 8px; }
  .page-head .display, .page-head .lead { grid-column: 1 / -1; }
  .page-head .lead { margin-top: 28px; }
  .for-list li { grid-template-columns: 52px 1fr; }
  .for-list li p { grid-column: 2; }
  .for-list .i { font-size: 42px; }
  .svc { grid-template-columns: 1fr; min-height: 0; }
  .svc-media, .svc.flip .svc-media { position: relative; order: 0; height: 62svh; }
  .svc-copy, .svc.flip .svc-copy { padding: 56px var(--m) 88px; }
  .svc-head .i { font-size: 52px; }
  .side .h2, .side .lead { grid-column: 1 / -1; }
  .side-pics .a { grid-column: 1 / -1; }
  .side-pics .b { grid-column: 4 / -1; margin-top: 40px; }
  .principles ul { grid-template-columns: 1fr; gap: 56px; }
  .faq-side { grid-template-columns: 1fr; }
  .qa summary { padding: 20px; font-size: 18px; }
  .qa .a p { padding: 0 20px 24px; }
  .form { grid-template-columns: 1fr; }
  .req-side { grid-template-columns: 1fr; }
  .band .h2, .band .band-act { grid-column: 1 / -1; }
  .band .band-act { margin-top: 32px; }
}