/* The Maxbox app's palette (clients shared/web/styles.css): deep green ink, paper, and
   its accents, brand green on paper and sage on green, over a faint drafting grid.
   Pages start on paper and alternate with green.
   Each page is exactly one screen tall, with its picture inside it: the page and its
   picture move together. pages.js moves the page one page at a time; without it the
   pages simply scroll. */

:root { color-scheme: light; --ink: #213c34; --paper: #f0f0e8; --accent: #315b4e;
  --pad: clamp(16px, 5vw, 72px); }
/* Inter 4 (SIL OFL 1.1, fonts/OFL.txt), subset to Latin. Served with the page so the
   headlines look the same everywhere; its optical-size axis switches to the Display
   design at headline sizes. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { background: var(--ink); overscroll-behavior: none; }
body { margin: 0; background: var(--ink); color: var(--paper);
  font: 17px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }

/* The bar inverts whatever is under it, so it reads on green and on paper. */
.bar { position: fixed; inset: 0 0 auto; z-index: 10; display: flex;
  justify-content: flex-end; align-items: center; padding: 20px var(--pad);
  color: #fff; mix-blend-mode: difference; pointer-events: none; }
/* The brand, top left: the logo's box and its MAXBOX lettering, in their own silver,
   outside the bar so the bar's inversion doesn't touch them. */
.brand { position: fixed; top: 14px; left: var(--pad); z-index: 10; display: flex; align-items: center;
  gap: 10px; pointer-events: none; }
.brand img:first-child { height: 34px; width: auto; }
.brand img:last-child { height: 15px; width: auto; }
.tag { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 11; background: #809184;
  transform-origin: 0 50%; transform: scaleX(0); }

/* No native-scroll hand-off at a move's end: iOS can display scroll and transform
   updates in different frames. Keep one promoted stack inside a fixed small viewport.
   Hidden (not clip) lets browser find/focus reveal a panel for pages.js to adopt. */
.pages { overflow: hidden; overflow: clip; }
html.js, .js body { height: 100%; overflow: hidden; }
.js .pages { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh;
  overflow: hidden; }
.js main { transform: translate3d(0, 0, 0); will-change: transform; }

/* One page, one screen: the visible height (svh), so a phone's browser bar can't
   push a page's foot off screen. */
.panel { position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background-color: var(--paper); color: var(--ink);
  --grid: rgb(49 91 78 / .055); --grid-major: rgb(49 91 78 / .1); }
.panel:nth-child(even) { background-color: var(--ink); color: var(--paper); --accent: #bbccb0;
  --grid: rgb(240 240 232 / .045); --grid-major: rgb(240 240 232 / .08); }
/* Drafting paper: a fine 24px grid with a heavier line every fifth square. */
.panel { background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px; }

.stage { position: relative; height: 100%; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); grid-template-rows: 1fr auto auto;
  column-gap: 3rem; padding: 96px var(--pad) clamp(40px, 9vh, 96px); }
h2 { position: relative; grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(2.6rem, 7vw, 7rem);
  font-weight: 750; line-height: 1.06; letter-spacing: -.02em; }
/* At most about two words a line, so headlines stay a stack of short lines even on wide
   screens, where the font stops growing, and the right side stays clear. */
@media (min-width: 761px) { h2 { max-width: 7.2em; } }
.w, .w > span { display: inline-block; }
.rule { position: relative; grid-column: 1; grid-row: 3; height: 1px; background: var(--accent);
  margin: 2rem 0 1.25rem; transform-origin: 0 50%; }
.stage p { position: relative; grid-column: 2; grid-row: 2 / 4; align-self: end; margin: 0;
  font-size: clamp(1.05rem, .6rem + 1vw, 1.5rem); line-height: 1.5; max-width: 28rem; opacity: .85; }

/* The picture sits above and behind the headline, faded toward the text, and takes
   the page's colour. */
.pic { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; overflow: hidden;
  pointer-events: none; opacity: .4; mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(130% 100% at 100% 0%, #000 35%, transparent 85%);
  mask-image: radial-gradient(130% 100% at 100% 0%, #000 35%, transparent 85%); }
.panel:nth-child(even) .pic { opacity: .55; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The opening page shows the Max Box cube large, behind the headline, fading out
   toward the text at the bottom. */
.logo { position: absolute; top: 56px; right: calc(var(--pad) + 3rem);
  height: calc(100vh - 72px); height: calc(100svh - 72px); aspect-ratio: 896 / 1014;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 90%); }
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* The team page: the founders' portraits, toned in the page's greens, with names,
   about as present as the opening page's cube. As wide as the headline leaves room
   for (44vw), and no taller than the space above the text. */
.team { position: absolute; top: 80px; right: var(--pad); display: grid;
  grid-template-columns: 1fr 1fr; gap: 1.5rem;
  width: min(40rem, 44vw, calc(118svh - 320px)); }
.team figure { margin: 0; }
.team img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.team figcaption { margin-top: .8rem; line-height: 1.3; }
.team b { display: block; font-size: 1.15rem; font-weight: 650; }
.team figcaption span { display: block; margin-top: .25rem; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

/* The analyst page: four of Max Box's report cards, drawn in the app's own style with
   illustrative figures, fanned like a hand of cards: same size, nearly upright, each
   turned a few degrees about one pivot far below the hand. The financial highlights
   lie on top, then the map; the summary and the worked figures fan out behind at the
   sides. .demo is one card's box, placed where the hand is held; everything is in em,
   so the fan scales with the screen through one font size. On a laptop the whole fan
   fits, centred, in the room beside the headline and above the text. */
.panel { --cube-left: calc(100vw - var(--pad) - 3rem - .8836 * (100svh - 72px)); --h2: min(7vw, 7rem); }
.demo { position: absolute; top: calc(84px + 3.8em);
  /* The whole fan (62.4em across, centred 13em right of this box's left edge) sits
     centred in the space between the headline's first line and the right margin. */
  --l: calc(var(--pad) + 5.9 * var(--h2) + 32px); --r: calc(100vw - var(--pad));
  left: calc((var(--l) + var(--r)) / 2 - 13em); width: 24em; height: 29em;
  font-size: min(calc((var(--r) - var(--l)) / 63), calc((91svh - 175px - 4.5vw) / 35.5), 22px);
  line-height: 1.3; pointer-events: none; isolation: isolate; }
.card { position: absolute; background: #f7f7f2; color: var(--ink); border: 1px solid #c5cfc2;
  border-radius: 1em; padding: 1.3em 1.5em; box-shadow: 0 1.4em 3em rgb(0 0 0 / .28); }
.card-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 1.3em; font-weight: 650; color: #23463b; margin-bottom: .9em; }
.tick { width: 1.1em; height: 1.1em; fill: none; stroke: #315b4e; stroke-width: 2; }
.demo .card { inset: 0; overflow: hidden; transform: translate(var(--x), var(--y, 0)) rotate(var(--turn));
  transform-origin: 50% 140%; }
/* Splayed as well as turned; the widest gap is between the two that matter most. */
.sum-card { --x: -12em; --turn: -9deg; z-index: 1; }
.fin-card { --x: -4.5em; --turn: -3deg; z-index: 4; }
.map-card { --x: 6.5em; --turn: 3.5deg; z-index: 3; }
.tab-card { --x: 14em; --turn: 9deg; z-index: 2; }
.price { display: flex; justify-content: space-between; align-items: center; gap: 1em;
  background: #dde4da; border-radius: .9em; padding: 1em 1.2em; }
.eyebrow { display: block; font-size: .7em; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #4d5f57; }
.big { display: block; font-size: 3.1em; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.yield { position: relative; display: grid; justify-items: center; }
.yield svg { width: 4.6em; height: 4.6em; transform: rotate(-90deg); }
.yield circle { fill: #f7f7f2; stroke: #213c34; stroke-width: 3.5; }
.pct { position: absolute; top: 1.3em; font-size: 1.35em; font-weight: 700; }
.cap { font-size: .72em; color: #4d5f57; margin-top: .3em; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.1em 0 .6em; }
.stats div { font-size: .8em; color: #4d5f57; padding: 0 .8em; border-left: 1px solid #c5cfc2; }
.stats div:first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font-size: 1.75em; font-weight: 700; color: var(--ink); line-height: 1.2; }
.row { display: flex; align-items: baseline; gap: .6em; font-size: .9em; padding: .35em 0; }
.row span:first-child { color: #4d5f57; }
.row i { flex: 1; border-bottom: 1px dotted #9aa89f; transform-origin: 0 50%; }
.row span:last-child { font-weight: 600; white-space: nowrap; }
.map { display: block; width: 100%; height: auto; border-radius: .6em; border: 1px solid #c5cfc2; }
.map .land { fill: #e2e9df; }
.map .water { fill: none; stroke: #b8d0d6; stroke-width: 2.2; }
.map .road { fill: none; stroke: #fff; stroke-width: 1.1; }
.map .road.minor { stroke-width: .5; opacity: .9; }
.map .ring { fill: none; stroke: #2f4a42; stroke-width: .35; transform-box: fill-box; transform-origin: center; }
.map .r20, .map .r10 { stroke-dasharray: 1 1.2; }
.map .km { font-size: 2.6px; fill: #2f4a42; text-anchor: middle; }
.map .lead-halo { fill: #b5655b; opacity: .3; }
.map .lead { fill: #8b2c22; }
.map .lead-label { font-size: 3px; font-weight: 700; fill: #213c34; text-anchor: middle; }
.map .pin { transform-box: fill-box; transform-origin: center; }
.map .pin circle { fill: #213c34; stroke: #fff; stroke-width: .5; }
.map .pin text { font-size: 2.7px; font-weight: 700; fill: #fff; text-anchor: middle; }
.card-foot { font-size: .8em; color: #4d5f57; margin-top: .8em; text-align: right; }
.tabs { display: flex; gap: 1.6em; font-size: .85em; font-weight: 600; color: #5b6b64;
  border-bottom: 1px solid #c5cfc2; margin: -.2em 0 .9em; }
.tabs span { padding: 0 .1em .55em; }
.tabs .on { color: var(--ink); box-shadow: inset 0 -2px 0 #315b4e; }
.sum-card .txt { font-size: .9em; }
.sub { font-size: 1.15em; font-weight: 650; color: #23463b; margin: .8em 0 .4em; }
.sum-card ul { margin: 0; padding-left: 1.2em; font-size: .9em; }
.sum-card li + li { margin-top: .3em; }
.sum-card, .tab-card { line-height: 1.35; }
.tab-card .sub { margin-top: 0; }
.tab-card table { border-collapse: collapse; font-size: .74em; width: 100%; }
.tab-card th { background: #dde4da; text-align: left; font-weight: 650; }
.tab-card th, .tab-card td { border: 1px solid #b9c4b6; padding: .55em .6em; vertical-align: middle; }
.tab-card td:nth-child(3) { color: #4d5f57; }

/* The workflow page: a Deal's dated steps and phases, the app's own card; its dates run
   on past the card's edge. It takes the larger of two places: beside the headline, like
   the other pages' pictures, or across the page above the headline (91svh less the rule
   and three headline lines), whichever lets it be bigger. */
.flow, .docs { position: absolute; top: 84px; right: var(--pad); pointer-events: none; line-height: 1.3; }
.flow { width: 40em;
  font-size: min(18px, max(
    min(calc((58vw - 2 * var(--pad) - 24px) / 41), calc((91svh - 170px - 4.5vw) / 28)),
    min(calc((100vw - 2 * var(--pad)) / 41), calc((91svh - 190px - min(22.3vw, 356px)) / 21)))); }
.flow .card, .docs .card { position: relative; }
.flow-card { transform: rotate(-1deg); }
.panel:nth-child(odd) .card { box-shadow: 0 1.2em 2.6em rgb(33 60 52 / .18); }
.flow-head { display: flex; align-items: center; gap: .8em; font-size: 1.15em; }
.flow-head b { font-weight: 650; color: #23463b; }
.asof { color: #9a3a2e; border: 1.5px solid #c56f62; border-radius: 999px; padding: .1em .7em;
  font-size: .85em; font-weight: 600; }
.chip { background: #e3e6e0; border-radius: 999px; padding: .25em .8em; font-size: .75em; font-weight: 600;
  color: #4d5f57; white-space: nowrap; }
.flow-head .chip { margin-left: auto; }
.flow-say { font-size: .95em; margin: .8em 0 1em; padding-bottom: 1em; border-bottom: 1px solid #c5cfc2; }
.dates { display: flex; gap: .8em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent); }
.dates div { flex: 0 0 11em; border: 1px solid #b9c4b6; border-radius: .6em; padding: .7em .9em; }
.dates b { display: block; font-size: 1.05em; font-weight: 650; }
.dates span { display: block; font-size: .8em; color: #4d5f57; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dates .on { background: #dde4da; border-color: #315b4e; }
.phases { display: flex; gap: 1.6em; margin: 1.1em 0 1em; border-bottom: 1px solid #c5cfc2; white-space: nowrap;
  overflow: hidden; font-size: .85em; font-weight: 600; color: #3d5149; }
.phases span { display: inline-flex; align-items: center; gap: .4em; padding-bottom: .6em; }
.phases .tick { width: 1em; height: 1em; }
.phases .on { color: var(--ink); box-shadow: inset 0 -2px 0 #315b4e; }
.task { display: flex; align-items: center; gap: 1em; border: 1px solid #b9c4b6; border-radius: .7em;
  padding: .8em 1.1em; }
.task div { flex: 1; }
.task b { display: block; font-weight: 650; }
.task div span { display: block; margin-top: .2em; font-size: .8em; color: #4d5f57; }
.task .when { font-size: 1.15em; }

/* The business page: the document library, beside the headline like the team page. */
.docs { top: calc(84px + 2.2em); width: 37em;  /* this page's text runs to four lines, hence 6vw */
  --start: max(var(--cube-left), calc(var(--pad) + 6.3 * var(--h2) + 24px));
  right: auto; left: calc((var(--start) + 100vw - var(--pad) - 37.5em) / 2 + .3em);  /* halfway to the right margin */
  font-size: min(calc((100vw - var(--pad) - var(--start)) / 38), calc((91svh - 190px - 6vw) / 33), 18px); }
.docs .docs-card { width: 30em; z-index: 1; transform: rotate(1.3deg); }
/* Behind the library, one document opened: its first page and the claims read from it. */
.docs .claims-card { position: absolute; top: -2.2em; right: 0; width: 25em; transform: rotate(-2.6deg); }
.claims-head b { display: block; font-size: 1.1em; font-weight: 650; color: #23463b; }
.claims-head span { font-size: .75em; color: #4d5f57; }
/* The page preview on the right, where the card shows past the library. */
.claims-body { display: grid; grid-template-columns: 1fr 8.5em; gap: 1.1em; margin-top: .9em; }
.claims-body .page { order: 1; }
.page { display: flex; flex-direction: column; gap: .45em; aspect-ratio: 8.5 / 11; padding: .9em .8em;
  background: #fff; border: 1px solid #c5cfc2; border-radius: .3em; box-shadow: 0 .2em .6em rgb(0 0 0 / .08); }
.page i { display: block; width: 100%; height: .35em; border-radius: .2em; background: #d8ddd6; }
.page .t { width: 70%; height: .55em; margin-bottom: .3em; background: #9aa89f; }
.page .s { width: 62%; }
/* A separate highlight can grow on the compositor instead of repainting a background. */
.page .hl { position: relative; overflow: hidden; width: 92%; }
.page .hl::after { content: ""; position: absolute; inset: 0; background: #e4d38f;
  transform-origin: 0 50%; }
.claims-sub { margin-bottom: .4em; font-size: .72em; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.claim { display: flex; align-items: baseline; gap: .5em; padding: .45em 0; border-top: 1px solid #dfe4dc; font-size: .82em; }
.claim span { flex: 1; color: #4d5f57; }
.claim em { order: 1; padding: 0 .5em; border-radius: 999px; background: #e3e6e0; font-size: .8em; font-style: normal; }
.claim b { order: 2; font-weight: 650; }
.claim.a em, .claim.b em, .claim.c em { background: #e4d38f; }
.docs-title { font-size: 2.1em; font-weight: 750; letter-spacing: -.01em; color: #23463b; }
.filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin: .8em 0 1em; }
.filters label { font-size: .78em; color: #4d5f57; }
.filters span { position: relative; display: block; margin-top: .35em; padding: .55em .7em; border: 1px solid #9aa89f;
  border-radius: .5em; background: #fbfbf8; color: var(--ink); font-size: 1.15em; white-space: nowrap; }
.filters span::after { content: ""; position: absolute; right: .8em; top: 50%; width: .4em; height: .4em;
  border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg); }
.count { font-size: .8em; color: #4d5f57; }
.month { margin: 1em 0 .6em; font-size: .72em; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.doc-list { max-height: 13em; border: 1px solid #9aa89f; border-radius: .7em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.doc-list div { padding: .8em 1em; border-top: 1px solid #c5cfc2; }
.doc-list div:first-child { border-top: 0; }
.doc-list b { display: block; font-size: .95em; font-weight: 650; }
.doc-list span { display: block; margin-top: .25em; font-size: .78em; color: #4d5f57; }

/* The booking page: one plain call to action under its text. It opens the booking dialog (booking.js). */
.cta { position: relative; grid-column: 2; grid-row: 2 / 4; align-self: end; }
.book-now { position: relative; margin-top: 1.5rem; padding: .95rem 2.4rem; border: 1px solid #bbccb0; border-radius: 999px;
  background: #315b4e; color: #f0f0e8; font: inherit; font-size: 1.15rem; font-weight: 650; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 .8rem 2rem rgb(0 0 0 / .3); transition: background-color .2s, transform .2s; }
.book-now:hover { background: #3b6b5c; transform: translateY(-1px); }
.book-now:focus-visible { outline: 3px solid #bbccb0; outline-offset: 3px; }

/* The booking dialog, in the app's card style. */
.booking { width: min(30rem, calc(100vw - 24px)); max-height: min(46rem, calc(100svh - 24px)); padding: 0;
  border: 0; border-radius: 1rem; background: #f7f7f2; color: var(--ink); overflow: auto;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .4); }
.booking::backdrop { background: rgb(14 28 24 / .62); }
.b-sheet { padding: 1.3rem 1.5rem 1.5rem; }
.b-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.b-head h3 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #23463b; }
.b-close { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: #e3e6e0; color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer; }
.b-sub { margin: .3rem 0 1rem; color: #4d5f57; font-size: .95rem; }
.b-mode { display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; border-radius: 999px; background: #e3e6e0; }
.b-mode button { padding: .55rem; border: 0; border-radius: 999px; background: transparent; color: #3d5149;
  font: inherit; font-weight: 600; cursor: pointer; }
.b-mode [aria-pressed="true"] { background: #315b4e; color: #f0f0e8; box-shadow: 0 .2rem .6rem rgb(0 0 0 / .15); }
.b-label { display: flex; justify-content: space-between; margin: 1.1rem 0 .5rem; font-size: .72rem; color: #4d5f57;
  letter-spacing: .1em; text-transform: uppercase; }
.b-month { font-weight: 650; color: var(--ink); }
.b-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.b-days button { display: grid; justify-items: center; padding: .5rem 0; border: 1px solid #b9c4b6; border-radius: .6rem;
  background: #fbfbf8; color: var(--ink); font: inherit; cursor: pointer; }
.b-days small { font-size: .7rem; color: #4d5f57; text-transform: uppercase; letter-spacing: .08em; }
.b-days b { font-size: 1.25rem; font-weight: 650; }
.b-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: .6rem 0 1.1rem; }
.b-times button { padding: .5rem 0; border: 1px solid #b9c4b6; border-radius: 999px; background: #fbfbf8;
  color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.b-days [aria-pressed="true"], .b-times [aria-pressed="true"] { border-color: #315b4e; background: #315b4e; color: #f0f0e8; }
.b-days [aria-pressed="true"] small { color: #dfe7da; }
.b-field { display: grid; gap: .25rem; margin-top: .6rem; font-size: .78rem; color: #4d5f57; }
.b-field input { padding: .5rem .75rem; border: 1px solid #9aa89f; border-radius: .5rem; background: #fff;
  color: var(--ink); font: inherit; font-size: 1rem; }
.b-field input:focus { outline: 2px solid #315b4e; outline-offset: 1px; border-color: #315b4e; }
.b-summary { min-height: 1.3em; margin: .55rem 0 .45rem; font-size: .95rem; font-weight: 600; color: #23463b; }
.b-go { width: 100%; padding: .7rem; border: 0; border-radius: 999px; background: #213c34; color: #f0f0e8;
  font: inherit; font-weight: 650; cursor: pointer; }
.b-go:disabled { background: #b9c4b6; color: #f7f7f2; cursor: default; }
.b-thanks { margin: .4rem 0 .6rem; font-size: 1.05rem; font-weight: 600; color: #23463b; }
.b-note { margin: 0 0 1.2rem; color: #4d5f57; font-size: .92rem; }
.b-status { min-height: 0; margin: 0 0 .6rem; color: #9a3a2e; font-size: .88rem; }
.b-status:empty { display: none; }
.b-privacy { margin-top: .5rem; font-size: .72rem; color: #4d5f57; }
.b-privacy summary { list-style: none; padding: .15rem 0; cursor: pointer; }
.b-privacy summary::-webkit-details-marker { display: none; }
.b-privacy u { color: #23463b; }
.b-privacy summary:focus-visible { outline: 2px solid #315b4e; outline-offset: 2px; }
.b-privacy p { margin: .5rem 0 0; }
.b-times:empty::before { content: "No times on this day."; grid-column: 1 / -1; color: #4d5f57; font-size: .85rem; }
.b-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking button:focus-visible { outline: 2px solid #315b4e; outline-offset: 2px; }

.stamp { position: absolute; left: 50%; top: -3.4em; z-index: 5; white-space: nowrap;
  transform: translateX(-50%); font-size: .78em; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); }
.stamp::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em;
  border-radius: 50%; background: var(--accent); vertical-align: .1em; }

.cue { position: absolute; right: var(--pad); top: 50%; font-size: .72rem;
  letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; opacity: .6; }
.cue::after { content: ""; display: block; width: 1px; height: 64px; margin: 14px auto 0;
  background: currentColor; transform-origin: 50% 0; animation: cue 2.4s ease-in-out infinite; }

@media (max-width: 760px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; }
  .stage p { grid-column: 1; grid-row: 4; }
  .rule { margin: 1.5rem 0 1rem; }
  /* On a phone the picture fills the space above the headline. */
  .pic { top: 64px; bottom: auto; width: 82%; height: 40svh; opacity: .8;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .panel:nth-child(even) .pic { opacity: .9; }
  .logo { top: 76px; right: auto; left: 50%; height: auto; width: min(100vw, 58svh);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .cue { display: none; }
  /* Centred across the screen, also when a short screen makes the pair narrower. */
  .team { top: 76px; left: 0; right: 0; margin-inline: auto; gap: 12px;
    width: min(calc(100vw - 2 * var(--pad)), calc((100svh - 470px) * 1.45)); }
  .team b { font-size: .95rem; }
  /* On a phone the hand is held at the middle of the screen: the financial card and
     the map fill it side by side, and the summary and the figures rise behind them, so
     their titles show above. */
  .demo { top: calc(72px + 7.4em); right: auto; left: 50%; margin-left: -12em;
    font-size: min(calc(100vw / 35), calc((100svh - 400px) / 38.5)); }
  .sum-card { --x: -6em; --y: -3.4em; --turn: -7deg; }
  .fin-card { --x: -4.5em; }
  .map-card { --x: 4.5em; --y: .6em; }
  .tab-card { --x: 6.5em; --y: -2.8em; --turn: 7deg; }
  .stamp { top: -7em; }
  .cta { grid-column: 1; grid-row: 4; }
  .book-now { width: 100%; margin-top: 1.2rem; }
  /* The booking dialog fits a phone screen without scrolling: tighter spacing, inputs kept
     at 16px so phones don't zoom into them. */
  .booking { max-height: calc(100svh - 16px); }
  .b-sheet { padding: .75rem 1rem; }
  .b-head h3 { font-size: 1.1rem; }
  .b-close { width: 1.9rem; height: 1.9rem; }
  .b-sub { margin: .1rem 0 .4rem; font-size: .85rem; }
  .b-mode button { padding: .45rem; }
  .b-label { margin: .5rem 0 .25rem; }
  .b-days button { padding: .3rem 0; }
  .b-days b { font-size: 1.05rem; }
  .b-times { margin: .3rem 0 .4rem; }
  .b-times button { padding: .38rem 0; font-size: .8rem; }
  .b-field { margin-top: .25rem; gap: .1rem; font-size: .72rem; }
  .b-field input { padding: .35rem .65rem; }
  .b-summary { margin: .4rem 0 .3rem; font-size: .88rem; }
  .b-go { padding: .6rem; }
  .flow { top: 76px; left: 0; right: 0; margin-inline: auto; width: 34em;
    font-size: min(calc((100vw - 2 * var(--pad)) / 34), calc((100svh - 470px) / 26)); }
  /* Centred as a pair: the library plus the 3em the opened document shows past it. */
  .docs { top: calc(76px + 2.2em); left: 0; right: 0; margin-inline: auto; translate: -1.5em 0; width: 30em;
    font-size: min(calc((100vw - 2 * var(--pad)) / 31), calc((100svh - 440px) / 33)); }
  .docs .claims-card { right: -3em; width: 23em; }
  .team figcaption span { font-size: .66rem; letter-spacing: .1em; }
}

@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
@keyframes grow { to { transform: scaleX(1); } }
/* The opening cue has no work to do once its page leaves. */
.js .panel:not(.here) .cue::after, .js .panel.leave-up .cue::after,
.js .panel.leave-down .cue::after { animation: none; }

@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.js) .progress { animation: grow linear both; animation-timeline: scroll(root); }
  }
  /* pages.js marks the page being shown with .here; its heading, rule and text arrive
     as it moves in. Without the script (no .js) everything is simply shown. */
  .js .panel:not(.here) .w > span { opacity: 0; transform: translateY(.35em); }
  .js .panel:not(.here) .rule { transform: scaleX(0); }
  .js .panel:not(.here) p { opacity: 0; transform: translateY(16px); }
  .js .panel:not(.here) .logo img { opacity: 0; transform: translateY(1em) scale(.94); }
  .js .panel:not(.here) .team figure { opacity: 0; transform: translateY(1.5em); }
  .js .panel:not(.here) .team figcaption { opacity: 0; }
  .js .panel:not(.here) .asof { opacity: 0; transform: scale(.6); }
  .js .panel:not(.here) .dates div { opacity: 0; transform: translateX(1.5em); }
  .js .panel:not(.here) .phases span { opacity: 0; transform: translateY(.5em); }
  .js .panel:not(.here) .task { opacity: 0; transform: translateY(1em); }
  .js .panel:not(.here) .task .chip { transform: scale(0); }
  .js .panel:not(.here) .docs .claims-card { opacity: 0; transform: translate(-3em, 1em) rotate(2deg); }
  .js .panel:not(.here) .filters label, .js .panel:not(.here) .doc-list div { opacity: 0; transform: translateY(.6em); }
  .js .panel:not(.here) .page .hl::after { transform: scaleX(0); }
  .js .panel:not(.here) .claim { opacity: 0; transform: translateX(.8em); }
  /* The hand arrives closed and fans open. */
  .js .panel:not(.here) .demo .card { opacity: 0; transform: translateY(3em) rotate(0deg); }
  .js .panel:not(.here) .stamp { opacity: 0; }
  .js .panel:not(.here) .book-now { opacity: 0; transform: translateY(1rem); }
  .js .panel:not(.here) .flow-card, .js .panel:not(.here) .docs-card { opacity: 0; transform: translateY(2em) rotate(0deg); }

  .js .panel:not(.here) .row i { transform: scaleX(0); }
  .yield circle { stroke-dasharray: 100; }
  /* Leaving: the page's content fades and drifts the way the page goes (pages.js keeps
     .here on it until it has gone), so it never just blanks. */
  .js .panel.leave-up .stage > *, .js .panel.leave-down .stage > * {
    opacity: 0; transition: opacity .45s ease-in, translate .6s ease-in; }
  .js .panel.leave-up .stage > * { translate: 0 -3rem; }
  .js .panel.leave-down .stage > * { translate: 0 3rem; }
  .js .here .w > span { transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .7, .1, 1); }
  .js .here .w:nth-child(2) > span { transition-delay: .1s; }
  .js .here .w:nth-child(3) > span { transition-delay: .2s; }
  .js .here .rule { transition: transform 1s .25s cubic-bezier(.6, 0, .2, 1); }
  .js .here p { transition: opacity .8s .4s ease-out, transform .8s .4s ease-out; }
  .js .here .logo img { transition: opacity 1.2s ease-out, transform 1.6s cubic-bezier(.2, .7, .1, 1); }
  /* The portraits rise one after the other, then the names; no animated image filters. */
  /* Both start after the page has settled (.75s), so the rise shows, not just the fade. */
  .js .here .team figure { transition: opacity .6s .75s ease-out, transform .65s .75s cubic-bezier(.2, .7, .1, 1); }
  .js .here .team figcaption { transition: opacity .4s 1.2s ease-out; }
  .js .here .team figure + figure { transition-delay: 1.25s; }
  .js .here .team figure + figure figcaption { transition-delay: 1.7s; }
  /* The workflow: the dates arrive one by one, the phases tick through to Closed, then
     the finished step is marked complete. */
  .js .here .asof { transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.3, 1.6, .5, 1); }
  .js .here .dates div { transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .1, 1); }
  .js .here .dates div:nth-child(1) { transition-delay: .5s; }
  .js .here .dates div:nth-child(2) { transition-delay: .6s; }
  .js .here .dates div:nth-child(3) { transition-delay: .7s; }
  .js .here .dates div:nth-child(4) { transition-delay: .8s; }
  .js .here .dates div:nth-child(5) { transition-delay: .9s; }
  .js .here .dates div:nth-child(6) { transition-delay: 1s; }
  .js .here .dates div:nth-child(7) { transition-delay: 1.1s; }
  .js .here .phases span { transition: opacity .4s ease-out, transform .5s cubic-bezier(.2, .7, .1, 1); }
  .js .here .phases span:nth-child(1) { transition-delay: 1s; }
  .js .here .phases span:nth-child(2) { transition-delay: 1.07s; }
  .js .here .phases span:nth-child(3) { transition-delay: 1.14s; }
  .js .here .phases span:nth-child(4) { transition-delay: 1.21s; }
  .js .here .phases span:nth-child(5) { transition-delay: 1.28s; }
  .js .here .phases span:nth-child(6) { transition-delay: 1.35s; }
  .js .here .phases span:nth-child(7) { transition-delay: 1.42s; }
  .js .here .phases span:nth-child(8) { transition-delay: 1.49s; }
  .js .here .task { transition: opacity .6s 1.6s ease-out, transform .7s 1.6s cubic-bezier(.2, .7, .1, 1); }
  .js .here .task .chip { transition: transform .45s 2.2s cubic-bezier(.3, 1.6, .5, 1); }
  /* The library fills in, the document opens behind it, its passages are highlighted
     and the claims read from them land one by one. */
  .js .here .docs .claims-card { transition: opacity .8s .5s ease-out, transform 1s .5s cubic-bezier(.2, .7, .1, 1); }
  .js .here .filters label, .js .here .doc-list div { transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .1, 1); }
  .js .here .filters label:nth-child(1) { transition-delay: .35s; }
  .js .here .filters label:nth-child(2) { transition-delay: .43s; }
  .js .here .filters label:nth-child(3) { transition-delay: .51s; }
  .js .here .doc-list div:nth-child(1) { transition-delay: .6s; }
  .js .here .doc-list div:nth-child(2) { transition-delay: .72s; }
  .js .here .doc-list div:nth-child(3) { transition-delay: .84s; }
  .js .here .doc-list div:nth-child(4) { transition-delay: .96s; }
  .js .here .doc-list div:nth-child(5) { transition-delay: 1.08s; }
  .js .here .page .hl::after { transition: transform .6s cubic-bezier(.6, 0, .2, 1); }
  .js .here .page .hl.a::after { transition-delay: 1.3s; }
  .js .here .page .hl.b::after { transition-delay: 1.6s; }
  .js .here .page .hl.c::after { transition-delay: 1.9s; }
  .js .here .claim { transition: opacity .45s ease-out, transform .5s cubic-bezier(.2, .7, .1, 1); }
  .js .here .claim:nth-of-type(2) { transition-delay: 1.45s; }
  .js .here .claim:nth-of-type(3) { transition-delay: 1.75s; }
  .js .here .claim:nth-of-type(4) { transition-delay: 2.05s; }
  .js .here .claim:nth-of-type(5) { transition-delay: 2.3s; }
  /* SVG child transforms and stroke drawing cause repeated paints and layouts. Reveal the map and
     yield as whole surfaces, keeping the card fan and the later figures. */
  .js .panel:not(.here) .map { opacity: 0; }
  .js .panel:not(.here) .yield svg { opacity: 0; }
  .js .here .map { transition: opacity .7s .5s ease-out; }
  .js .here .yield svg { transition: opacity 1.4s 1.1s ease-out; }
  .js .here .demo .card { transition: opacity .6s .1s ease-out, transform 1.3s .1s cubic-bezier(.3, .8, .2, 1); }
  .js .here .row i { transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
  .js .here .row:nth-child(4) i { transition-delay: 1.3s; }
  .js .here .row:nth-child(5) i { transition-delay: 1.45s; }
  .js .here .row:nth-child(6) i { transition-delay: 1.6s; }
  .js .here .stamp { transition: opacity .8s 2.8s ease-out; }
  .js .here .book-now { transition: opacity .6s .9s ease-out, transform .7s .9s cubic-bezier(.2, .7, .1, 1), background-color .2s; }

  .js .here .flow-card, .js .here .docs-card { transition: opacity .8s .15s ease-out, transform 1s .15s cubic-bezier(.2, .7, .1, 1); }
}