/* Site stylesheet. Every value comes from the design tokens in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head-h); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--body); line-height: var(--body-lh); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }
.on-dark, .foot, .dhero, .menu, .hshake, .band-photo, .hero {
  --lime: var(--lime-dk); --on-lime: var(--on-lime-dk); }   /* the accent on a dark ground */
.on-dark :focus-visible, .foot :focus-visible, .dhero :focus-visible, .menu :focus-visible { outline-color: var(--lime); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--on-lime);
  padding: 12px 18px; border-radius: var(--r); font: 400 var(--label)/var(--label-lh) var(--mono); text-transform: uppercase; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.sec { padding: var(--sec-y) 0; }
.sec--tint { background: var(--tint); }
.on-dark { color: var(--cream); }

/* ---------------------------------------------------------------- type roles */
.t-h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: 400; text-wrap: balance; }
.t-h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); font-weight: 400; text-wrap: balance; }
.t-h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); font-weight: 400; text-wrap: balance; }
.t-h4 { font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: 400; }
.t-h5 { font-size: var(--h5); line-height: var(--h5-lh); font-weight: 400; }
.t-lead { font-size: var(--lead); line-height: var(--lead-lh); }
.t-body { font-size: var(--body); line-height: var(--body-lh); }
.t-soft { color: var(--ink-soft); }
.on-dark .t-soft { color: var(--cream-soft); }
.t-title { font-size: var(--lead); line-height: var(--lead-lh); font-weight: 400; }   /* card and row titles are weight 400 */
.stack > * + * { margin-top: var(--g-24); }
.stack-12 > * + * { margin-top: var(--g-12); }
.center { text-align: center; }

/* bracket eyebrow */
.eyebrow, .label { font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh);
  font-weight: 400; text-transform: uppercase; letter-spacing: normal; }
.eyebrow::before { content: "["; } .eyebrow::after { content: "]"; }
.head-group { display: flex; flex-direction: column; gap: var(--g-18); }
.head-group--center { align-items: center; text-align: center; }

/* accent rectangle button, with the rolling label */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 var(--g-48);
  background: var(--lime); color: var(--on-lime); border-radius: var(--r); text-decoration: none;
  font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase;
  white-space: nowrap; }
.btn--sm { height: 42px; padding: 0 var(--g-18); }
.btn--block { display: flex; width: 100%; }
.btn--tint { background: var(--tint); height: 42px; padding: 0 var(--g-18); }
/* the rolling label: a 20px window; on hover the resting copy tips to +13deg, rises 19px and fades while the
   incoming copy, parked 20px below at -14deg and transparent, turns upright */
.roll { display: block; position: relative; height: 20px; line-height: 20px; overflow: hidden; }
.roll > span { display: block; transition: transform var(--dur-roll) var(--ease-load), opacity var(--dur-roll) var(--ease-load); }
.roll > span + span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(20px) rotate(-14deg); }
.btn:hover .roll > span:first-child, .btn:focus-visible .roll > span:first-child { opacity: 0; transform: translateY(-19px) rotate(13deg); }
.btn:hover .roll > span + span, .btn:focus-visible .roll > span + span { opacity: 1; transform: none; }

/* accent circle-arrow link: a 24px window holding two arrows, the second parked 24px to the left; on hover both
   slide 24px right. The glyph renders 12px with a 1.5px stroke. */
.arrow-link { display: inline-flex; align-items: center; gap: var(--g-12); text-decoration: none;
  font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; }
.arrow-link__c { width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--lime); color: var(--on-lime);
  display: grid; place-items: center; flex: none; }
.arr { position: relative; display: block; width: 24px; height: 24px; overflow: hidden; }
.arr svg { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; stroke-width: 1.8;
  transition: transform var(--dur-arrow) var(--ease-load); }
.arr svg + svg { transform: translateX(-24px); }
a:hover .arr svg, a:focus-visible .arr svg { transform: translateX(24px); }
a:hover .arr svg + svg, a:focus-visible .arr svg + svg { transform: none; }
/* the circle-arrow link that leaves the site: a right arrow means "go on" within the site, and a press release,
   related news or video opens another website, so those use the up-right arrow, same 20px box and stroke, parked
   down-left and sliding up-right by the same 24px on the same transition (the diagonal 24px window clips it as the
   straight one does) */
.arrow-link--ext .arr svg { left: 0; top: 0; width: 24px; height: 24px; stroke-width: 1.5; }   /* The icon set draws this glyph 10 units across to the right arrow's 14: the 24px box at 1.5 (the same 1.5px line) makes it 10px, the nearest it can read to the 11.7px of the right arrow */
.arrow-link--ext .arr svg + svg { transform: translate(-24px, 24px); }
.arrow-link--ext:hover .arr svg, .arrow-link--ext:focus-visible .arr svg { transform: translate(24px, -24px); }
.arrow-link--ext:hover .arr svg + svg, .arrow-link--ext:focus-visible .arr svg + svg { transform: none; }

/* dashed hairline */
.dash { border: 0; height: 0; border-top: 1px dashed var(--dash); margin: 0; }
.on-dark .dash, .dash--dark { border-top-color: var(--dash-dark); }

/* stadium avatar and overlapping group */
/* mono author block */
.author { display: flex; align-items: flex-end; gap: var(--g-12); }
.author__t { font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; }

/* icon tiles */
/* 60x60 dark (36px icon) and 84x84 accent (48px icon), radius 6, padding 12; strokes set to render 2px */
.tile { display: grid; place-items: center; border-radius: var(--r); flex: none; }
.tile--dark { width: 60px; height: 60px; background: var(--ink); color: var(--cream); }
.tile--dark svg { width: 36px; height: 36px; stroke-width: 1.333; }
.tile--lime { width: 84px; height: 84px; background: var(--lime); color: var(--on-lime); }
.tile--lime svg { width: 48px; height: 48px; stroke-width: 1; }

/* stripes motif and grain on the anchor */
.anchor { background-color: var(--anchor); background-image: url("/assets/img/grain.png"); background-size: 150px; color: var(--cream); position: relative; }
.stripes { position: absolute; pointer-events: none; }
.stripes span { display: block; background: linear-gradient(90deg, var(--lime) 0%, var(--anchor) 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 7px); mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 7px); }
.stripes span:first-child { width: 571px; height: 24px; }
.stripes span:last-child { width: 214px; height: 72px; background: linear-gradient(111deg, var(--lime) 24%, var(--anchor) 100%); }
.stripes--tl { top: 0; left: 0; }
.stripes--br { bottom: 0; right: 0; transform: rotate(180deg); }
.stripes--br span { margin-left: auto; }
@media (max-width: 809px) { .stripes span:first-child { width: 280px; } .stripes span:last-child { width: 120px; height: 48px; } }

/* ---------------------------------------------------------------- header */
.head { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h); color: var(--ink);
  transition: background-color var(--dur-hover) var(--ease-in), color var(--dur-hover) var(--ease-in); }
.head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .18; }
/* The logo always sits on light: the original green-and-black logo cannot be read on the dark photo, the green
   heroes, the open menu or the footer, and it is never recoloured. So the header is solid white on every page and
   in every state the logo shows in; with the phone menu open the logo is hidden and the bar turns see-through on the
   pine (the phone menu, below). */
.head, .head.is-glass, .head.is-dark { background: var(--head-bg); color: var(--ink); }
.head__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--g-24); }
.head__left { display: flex; align-items: center; gap: var(--g-36); }
.brand { display: block; height: 36px; }
/* the original logo, as is, in every header state: never recoloured, no bar, no plate */
.brand img { height: 36px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--g-24); }
.nav__link { text-decoration: none; font-size: var(--body); line-height: var(--body-lh); padding: 2px 0; transition: opacity var(--dur-hover) var(--ease-in); }
.nav__link:hover, .nav__link[aria-current="page"] { opacity: .8; }   /* 80%: 70% measured 4.10:1 (cream on green) and 4.44:1 (ink on the ground), under 4.5 */

/* burger: three 20x2 lines at a 6.5px pitch in a 24x15 box, inside a 64x64 hit area (60x64 and flush with the
   screen edge on phones); open, the outer lines cross into an X of 22px lines */
.burger { display: none; width: 64px; height: 64px; flex: none; align-items: center; justify-content: center; }
.burger__box { position: relative; display: block; width: 24px; height: 15px; }
.burger__box span { position: absolute; left: 2px; width: 20px; height: 2px; background: currentColor;
  transition: transform var(--dur-hover) var(--ease-in), opacity var(--dur-hover) var(--ease-in); }
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6.5px; }
.burger__box span:nth-child(3) { top: 13px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) scaleX(1.1); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) scaleX(1.1); }
html.no-js .burger { visibility: hidden; }   /* without JavaScript the footer carries every link */

/* the phone menu: its own full-screen layer on the anchor, a SIBLING of the header (a backdrop-filter on the
   header would otherwise become the fixed layer's containing block and collapse it). Opened, it covers the whole
   screen (Cleven, 17 Oct 2026, after the Atlis build's menu): the bar turns see-through on the pine with its hairline
   gone and the cross in cream; the logo is hidden, since it only ever sits on white, and a Home link heads the list
   in its place. The links are capitals (24 to 28px, weight 500) in 44px rows from 24px under the bar, 18px side
   padding, no dividers, then the full-width 60px accent button 36px below. The ground carries the footer's grain
   and its two stripe stacks at their phone size (top left, where the logo was, and bottom right), held in the
   screen's corners, with the first link 24 under the top stack at every width. The bar, its hairline and the menu
   fade together over 0.4s; the logo hides at once and comes back only after the fade, once the bar is white again. */
.menu { display: none; }
@media (max-width: 1137px) {
  .burger { display: flex; }
  .head-cta, .head .nav { display: none; }
  .menu { display: block; position: fixed; inset: 0; z-index: 45; background-color: var(--anchor); color: var(--cream);
    padding: calc(var(--head-h) + var(--g-24)) var(--g-18) 84px; overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transition: opacity var(--dur-menu) var(--ease-menu), visibility 0s var(--dur-menu); }
  .menu.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-menu) var(--ease-menu); }
  .menu { background-image: url("/assets/img/grain.png"); background-size: 150px; }
  .menu > nav { position: relative; }   /* above the stripes */
  .menu { padding-top: max(calc(var(--head-h) + var(--g-24)), calc(72px + var(--g-24))); }   /* 24 under the stripes */
  .menu .stripes { position: fixed; }   /* held in the screen's corners when a sideways phone scrolls the menu */
  .menu .stripes span:first-child { width: 280px; }
  .menu .stripes span:last-child { width: 120px; height: 48px; }   /* the phone-size stack (72 tall) at every menu width */
  .menu__list { display: flex; flex-direction: column; }
  .menu__link { display: flex; align-items: center; min-height: 44px; padding: 2px 0; border-radius: var(--r-sm);
    color: var(--cream); text-decoration: none; font-size: clamp(24px, 6.6vw, 28px); line-height: 1.2;
    font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; }
  .menu__cta { margin-top: var(--g-36); }
  .head { transition: background-color var(--dur-menu) var(--ease-menu), color var(--dur-menu) var(--ease-menu); }
  .head::after { transition: opacity var(--dur-menu) var(--ease-menu); }
  .head .brand { transition: visibility 0s linear var(--dur-menu); }
  .head.is-open { background: transparent; color: var(--cream); }
  .head.is-open::after { opacity: 0; }
  .head.is-open .brand { visibility: hidden; transition: none; }
}
@media (max-width: 809px) { .burger { width: 60px; margin-right: calc(var(--pad-x) * -1); } }

/* ---------------------------------------------------------------- reveal */
[data-rise] { opacity: 0; transform: translateY(var(--rise-y));
  transition: opacity var(--dur-rise) var(--ease-in) calc(var(--delay-rise) + var(--rise-delay, 0s)),
              transform var(--dur-rise) var(--ease-in) calc(var(--delay-rise) + var(--rise-delay, 0s)); }
[data-rise].is-in { opacity: 1; transform: none; }
[data-load] { opacity: 0; transform: translateY(var(--rise-y)); animation: load-in .64s var(--ease-load) forwards; animation-delay: var(--load-delay, .1s); }
@keyframes load-in { to { opacity: 1; transform: none; } }
html.no-js [data-rise], html.no-js [data-load] { opacity: 1; transform: none; animation: none; }

/* ---------------------------------------------------------------- home hero */
/* the hero is the window's height, with a 400px floor and a 1100px ceiling, so on a laptop the whole hero,
   including the logo, is visible without scrolling. The card and the deal strip need about 380px with the header
   (the card 21px under it at 400 on desktop, 48 on a phone with a three-line card), so a 1366 x 768 laptop zoomed
   to 150% (about 911 x 438) still shows it whole */
.hero { position: relative; height: 100svh; min-height: 400px; max-height: 1100px; color: var(--cream); overflow: hidden; background: var(--anchor); }
/* one still photo, the Golden Gate above the fog. Centred; phones keep about a third of the frame, so the crop
   moves to the south tower. */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 809px) { .hero__img--gg { object-position: 28% 50%; } }
/* a light .12 through the middle, not 0: a bright sky read 4.38:1 behind the card's eyebrow at 1024 wide. The H1
   stands on the photo with no box, so the lower part darkens as the photo bands' does (.62 at 72%, .8 at the foot)
   and the bands' 14px blur fades in over its bottom 55% (`.band-photo__blur`, in the hero's markup) */
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,33,28,.72) 0%, rgba(33,33,28,.6) 9%, rgba(33,33,28,.12) 26%, rgba(33,33,28,.12) 44%, rgba(33,33,28,.62) 72%, rgba(33,33,28,.8) 100%); }
.hero__in { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: calc(var(--strip-h) + var(--g-24) + var(--g-36)); }   /* the H1 36 over the deal strip */
.hero__row { width: 100%; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; gap: var(--g-24); }
.glass-card { width: 571px; max-width: 100%; padding: var(--g-24); border-radius: var(--r); background: var(--glass-card);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: var(--g-36); }
.glass-card__copy { display: flex; flex-direction: column; gap: var(--g-24); }
/* the home H1 has no box: the card keeps its place (571 wide on the right, full width on phones) and loses its
   glass, its padding and its corner, so the H1's edge is the card's (on phones the deal strip's). `.hero` in the
   selector outranks the phone rule's `.glass-card` background below; the contact form's summary keeps the glass. */
.hero .glass-card--h1 { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
@media (max-width: 809px) {
  .hero__in { padding-bottom: calc(var(--strip-h) + var(--g-12) + var(--g-24)); }   /* the H1 24 over the strip */
  .hero__row { flex-direction: column; align-items: stretch; gap: var(--g-12); }
  /* on phones the card sits over the bright left wall: .46 read 3.39:1 under the eyebrow at 390 wide */
  .glass-card { width: 100%; background: var(--glass-card-phone); }
}

/* ---------------------------------------------------------------- deal strip (home hero)
   A white panel along the lower part of the photo, on the container's edges, holding the record: every deal is
   logo, arrow, logo, in the logos' own colours on the white their files are drawn on (#FFFFFF, as the tombstone
   and deal-card logo tiles). The logos scroll across the bridge photo itself. The card sits above the strip and
   never under it (--strip-h and the gaps set both). */
.hero { --strip-h: 76px; }
.hero__deals { position: absolute; left: 0; right: 0; bottom: var(--g-24); }
.marquee { height: var(--strip-h); background: #FFFFFF; border-radius: var(--r); overflow: hidden; display: flex; align-items: center; }
.marquee__view { position: relative; width: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.marquee__track { display: flex; align-items: center; gap: var(--g-72); width: max-content; }
.marquee__row { will-change: transform; }
.marquee__deal { display: flex; align-items: center; gap: var(--g-18); flex: none; }
.marquee__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.marquee__type { font-size: var(--lead); line-height: var(--lead-lh); color: #111111; white-space: nowrap; }
.marquee__amount { font-family: var(--mono); font-size: var(--q); line-height: var(--q-lh); }
.deal-arrow { flex: none; color: var(--ink); overflow: visible; }
@media (max-width: 809px) { .hero__deals { bottom: var(--g-12); } }

/* ---------------------------------------------------------------- split (intro) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-72); padding-top: var(--g-36); }
.split__right { display: flex; flex-direction: column; gap: var(--g-24); }
.intro { padding: var(--g-72) 0 var(--sec-y); }
/* the section rhythm is 108 (72 on phones) on every page (tokens.css), so Home's intro joins its features with the
   ordinary rhythm and needs no rule of its own */
@media (max-width: 809px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--g-36); } }
/* a split holding its left column alone (the Success Stories title) spans the row, held to the article column's
   690, so its H1 keeps two lines from 810 up instead of three in a half column at 810 to 1000 */
.split > .head-group:only-child { grid-column: 1 / -1; max-width: 690px; }

/* ---------------------------------------------------------------- feature cards */
.features__head { max-width: 928px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--g-24); align-items: center; text-align: center; }
.features__grid { margin-top: var(--g-96); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-24); }
.fcard { background: var(--ground); border-radius: var(--r); padding: var(--g-18) var(--g-18) var(--g-24);
  display: flex; flex-direction: column; gap: var(--g-96); text-decoration: none; transition: transform var(--dur-hover) var(--ease-in); }
.fcard:hover { transform: translateY(-4px); }
.fcard__txt { display: flex; flex-direction: column; gap: var(--g-12); flex: 1; }
.fcard__txt .t-body { color: var(--ink-soft); margin-bottom: var(--g-12); }   /* body copy of 1, 2 or 3 lines: the arrow links still end on one line across the three cards */
.fcard .t-title { text-wrap: balance; }   /* no title ends on one word alone: balance evens the lines without adding one, as the H1 to H3 roles do; hyphenated words stay whole (the build keeps them unbroken) */
.fcard .arrow-link { margin-top: auto; }
@media (max-width: 1199px) { .features__grid { grid-template-columns: minmax(0, 1fr); } .fcard { gap: var(--g-48); } }

/* ---------------------------------------------------------------- inset photo band */
.band-photo { padding: 0 var(--g-6); }
.band-photo__in { position: relative; border-radius: var(--r); overflow: hidden; min-height: 714px; color: var(--cream); display: flex; }
.band-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Wide screens (below the full-width point crops.css takes over): the window starts at source y 360, just above
   the plaque rows (460 to 830), so the wall and the tombstones lead and the chairs drop under the text. The image
   is 0.66553 x its width tall and scales by (box width)/2048; max() stops it rising past its own bottom edge, so a
   narrower band stays bottom-aligned with no gap. */
.band-photo--tomb .band-photo__img { object-position: 50% max(calc((100vw - 12px) * -0.17578), calc(714px - (100vw - 12px) * 0.66553)); }
/* below the full-width point crops.css sizes this photo itself and sets object-position 50% 50% (this rule's px
   offset used to reach those rules and push the painted picture down); on phones it places the plaque rows near
   the band's top, by the band's own width, so the band is a size container */
.band-photo--tomb { container-type: inline-size; }
/* About's crop: up to a band of 1668 (viewport about 1680) the same window as 50% 90% (0.9 x the overflow, written
   out in px: 0.9 x (714 - 0.66667 x width)), the crop Catapult approved. Wider, the window's top stays at source y 330,
   just above the plaques (350 to 510) and the wall logo (440 to 480), so a 1920 or 2560 screen still shows them; 90%
   alone slid the window down to the table and chairs there. min(0px) keeps a band too narrow to overflow (phones, and
   810 to 1070) at 0, as 90% did. */
.about-hero .band-photo__img { object-position: 50% min(0px, max(calc((100vw - 12px) * -0.2148), calc(642.6px - (100vw - 12px) * 0.6))); }
/* About's band is the Team band's size, 560 from 810 up. The photo is drawn in a 714px tall box (620 on phones)
   with cover and object-position, at the band's top, and the band clips that box's foot, so the same scale and top
   row apply at every width and only the chairs at the foot are cut off; the copy rises with the band's foot. The
   band is 520 on phones. */
.about-hero .band-photo__in { min-height: 560px; }
.about-hero .band-photo__img { bottom: auto; height: 714px; }
@media (max-width: 809px) { .about-hero .band-photo__in { min-height: 520px; } .about-hero .band-photo__img { height: 620px; } }
/* .62 by the middle: at 900 the plaque-safe crop put a bright mat behind the eyebrow and .55 measured 4.26:1 */
.band-photo__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,33,28,0) 20%, rgba(33,33,28,.62) 50%, rgba(33,33,28,.8) 100%); }
.band-photo__blur { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 60%); mask: linear-gradient(180deg, transparent 0, #000 60%); }
.band-photo__copy { position: relative; margin-top: auto; padding: 0 var(--g-48) var(--g-72) 55px; display: flex; flex-direction: column; gap: var(--g-24); max-width: 960px; }
.band-photo__copy .t-h2 { font-size: var(--band-h2); line-height: var(--band-h2-lh); }
.band-photo--center .band-photo__copy { align-items: center; text-align: center; margin: auto auto var(--g-72); padding: 0 var(--g-24); }
@media (max-width: 809px) { .band-photo__in { min-height: 620px; } .band-photo__copy { padding: 0 var(--g-24) var(--g-48); }
  .band-photo--tomb { min-height: 760px; }
  /* the home wall band's blur covers its foot 45% on phones (55% elsewhere), so it starts under the plaque rows
     crops.css lifts to the top; the copy, from about 440 down, stays on it */
  .band-photo--tomb .band-photo__blur { height: 45%; } }

/* ---------------------------------------------------------------- contact section */
/* the contact band's gradient starts on the page's ground, so its top is no change of ground: the last content
   section before it pads 0 below on every page and the join is one rhythm, 108 (72 on phones). The build marks
   main when the band follows it */
.main--cta > section:last-child:not(.sec--tint):not(.anchor) { padding-bottom: 0; }
.cta { background: linear-gradient(180deg, var(--ground) 0%, var(--tint) 100%); padding: var(--sec-y) 0; }
.cta__in { max-width: 928px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--g-36); }
/* the body line leads the section, with no heading: balanced, so no word sits alone */
.cta__in .t-lead { text-wrap: balance; }
.cta__links { display: flex; align-items: center; gap: var(--g-18); flex-wrap: wrap; justify-content: center; }
/* the contact section has no row of photos, address and LinkedIn; .cta__links remains only as the 404's button row */

/* ---------------------------------------------------------------- footer */
.foot { position: relative; overflow: hidden; }
/* no logo, tagline or button: the links to the pages and Legal, then the copyright and credit, then the
   disclosure. 120 on top clears the stripes' 96px stack (96 on phones, under a 72px stack). */
.foot__wrap { padding-top: calc(var(--g-96) + var(--g-24)); padding-bottom: var(--g-72); display: flex; flex-direction: column; gap: var(--g-36); }
/* The groups are columns at every width, each a bracketed heading over its links, one per line. The OFFICE column
   holds the address in the links' own type (16, the body line, the links' 3px above and below, never italic). From
   810 up PAGES, LEGAL and OFFICE stand side by side, 2 : 1 : 1.4 and 48 apart, PAGES' six links in two columns of
   three, OFFICE never narrower than its longest line, so the street and the suite never wrap (from 810 to 917 its
   1.4 share, 212 to 245, broke them onto two lines with a comma left at the end of the first, iPads held upright
   included). Phones keep their two columns (below). */
.foot__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(max-content, 1.4fr); gap: var(--g-48); }
.foot__side { display: contents; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-12); }
.foot__col ul { display: flex; flex-direction: column; gap: var(--g-6); }
.foot__col a { display: inline-block; padding: 3px 0; text-decoration: none; transition: opacity var(--dur-hover) var(--ease-in); }
.foot__col a:hover { opacity: .7; }
.foot__addr { font-style: normal; padding: 3px 0; }
.foot__base { display: flex; align-items: baseline; gap: var(--g-6) var(--g-24); flex-wrap: wrap; }
.foot__copy { font-size: var(--small); line-height: var(--small-lh); }
.foot__legal { font-size: var(--small); line-height: var(--small-lh); max-width: 928px; color: var(--cream-soft); }
.foot__legal a { color: inherit; }
.foot__credit { font-size: var(--small); line-height: var(--small-lh); }
/* the credit is the footer's quietest line, so it has no underline (the browser's default is turned off, as it is
   for the group links); it dims on hover as the links do */
.foot__credit a { display: inline-block; padding: 3px 0; text-decoration: none; transition: opacity var(--dur-hover) var(--ease-in); }
.foot__credit a:hover { opacity: .7; }
@media (min-width: 810px) {
  .foot__col { gap: var(--g-18); }
  .foot__col--pages ul { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(3, auto);
    column-gap: var(--g-48); row-gap: var(--g-6); }
  /* the address is information, not a seventh link: it takes the disclosure's 78% cream, the street and suite on
     one line and the city on the next, so it does not look like a page link */
  .foot__addr { color: var(--cream-soft); }
  .foot__addr .foot__sep:nth-last-child(2) { display: none; }
  .foot__addr .foot__line:last-child { display: block; }
  /* under a dashed rule the copyright at the left and the credit alone at the right */
  .foot__base { justify-content: space-between; padding-top: var(--g-36); border-top: 1px dashed var(--dash-dark); }
}
/* 810 to 1137: the disclosure's one line, 505 long from the content's left edge, reaches the bottom-right stripes'
   214 x 72 block (the turn puts it over the bar's left end, 571 to 357 in from the right edge) up to 1100, so the
   footer pads 120 below as it does above, the disclosure 24 clear of that stack as the groups are of the top-left
   one (without this, from 810 to 1100 the FINRA/SIPC part of the disclosure sat on the stripes) */
@media (min-width: 810px) and (max-width: 1137px) { .foot__wrap { padding-bottom: calc(var(--g-96) + var(--g-24)); } }
@media (max-width: 809px) {
  .foot__wrap { padding-top: var(--g-96); }
  /* two columns, the right the wider (2 : 3, the left never narrower than its longest link): the address's longest
     line, "San Francisco, CA 94104", is 176px at 16px, so equal halves (171 at 390) broke it; 2 : 3 holds it on
     one line from 360 up */
  .foot__cols { grid-template-columns: minmax(max-content, 2fr) minmax(0, 3fr); gap: var(--g-24); align-items: start; }
  .foot__side { display: flex; flex-direction: column; gap: var(--g-24); }
  .foot__line { display: block; }
  .foot__sep { display: none; }
  /* the credit's link is 24.8 tall, the 24 every link outside running text gets (the Small size is 12 / 16.8 here,
     so 3 above and below made it 22.8) */
  .foot__credit a { padding: 4px 0; }
}
/* 600 to 809: each column as wide as its words and 96 apart, so the right column's edge no longer nearly lines up with the credit under it;
   359 and down: OFFICE runs under both columns, where its three lines fit (the right column is 158 at 320) */
@media (min-width: 600px) and (max-width: 809px) { .foot__cols { grid-template-columns: max-content max-content; column-gap: var(--g-96); } }
@media (max-width: 359px) { .foot__side { display: contents; } .foot__col--office { grid-column: 1 / -1; } }

/* The Team opening, the photo band: the same box as the Success Stories handshake band (`.hshake`): an inset band
   6 under the header (head-h + 6) and 6 in from the viewport edges, radius 6, 560 tall, graphite under the photo;
   on phones (809 and down) the photo whole at 3:2, its foot fading into graphite, the copy under it on graphite,
   as the handshake banner's. The two bands' boxes must stay equal.
   The boat (source x 525 to 1335, y 398 to 512 of 1536 x 1024) stays whole at every width: the photo is sized and
   placed by hand (not object-fit) so the crop is a formula. --tp-h is the band's height, --iw and --ih the photo's
   own size in it (3:2, at least the band's width, and from 810 up at least 1.15 times the band's own 3:2 width,
   966, so at the narrowest desktop widths the boat can sit high enough to leave the copy clear water under it),
   --d where the boat's top sits in the band. The photo is as wide as the band or wider, and .38867 of its height
   is above the boat's top (398 / 1024), so .38867 * --ih is the most the photo can move up and the band still be
   covered from the top, and --tp-h - .61133 * --ih the least it must, to be covered at the foot. --d is the boat's
   top: 36% of the band down, unless that would leave less than --g-48 of water between the boat's foot (.11133 of
   the photo's height under its top) and the copy (--tp-cz is the copy's whole height from the band's foot: its own
   height --tp-ch plus the padding under it), then higher, always within the two limits above. Left, the boat's
   middle (.60547 of the width) goes to the middle of the band, held inside it. The copy sits at the band's foot
   over the water under the boat, on a scrim tied to the copy. --tp-ch is the copy's height with the heading on two
   lines (18.2 + 18 + two lines of 67.2 = 171; stacked below 1200 the intro goes under it: + 24 + 28 = 223), true
   from 810 to 2560 because the heading's one-line width is 1152 and its best two-line wrap 611, both at 64px. The
   title has no eyebrow, so the copy is really 36.2 shorter (134.8, and 186.8 stacked), and the two values keep the
   36.2 on purpose: the copy is anchored at the band's foot, so the H1 and the intro do not move and the boat (--d)
   keeps its place; the water above the H1 is 36.2 deeper (at least 84.2 where the formula held it to 48). */
.tphoto { padding: calc(var(--head-h) + var(--g-6)) var(--g-6) var(--g-6); }
.tphoto__band { position: relative; border-radius: var(--r); overflow: hidden; container-type: inline-size; background: var(--graphite); color: var(--cream);
  display: flex; flex-direction: column; --tp-h: 560px; height: var(--tp-h); --tp-pad: var(--g-48); --tp-ch: 171px; --tp-cz: calc(var(--tp-pad) + var(--tp-ch)); }
.tphoto__ph { position: absolute; inset: 0; overflow: hidden;
  --iw: max(100cqw, calc(var(--tp-h) * 1.725)); --ih: calc(var(--iw) / 1.5);
  --d: clamp(calc(var(--tp-h) - .61133 * var(--ih)), min(calc(var(--tp-h) * .36), calc(var(--tp-h) - var(--tp-cz) - var(--g-48) - .11133 * var(--ih))), calc(.38867 * var(--ih))); }
.tphoto__img { position: absolute; max-width: none; width: var(--iw); height: var(--ih);
  left: clamp(calc(100cqw - var(--iw)), calc(50cqw - .60547 * var(--iw)), 0px); top: calc(var(--d) - .38867 * var(--ih)); }
.tphoto__scrim { display: none; }
/* over the water the scrim is tied to the copy, not to the photo's height: it starts 48px above the copy (at the
   boat's foot, never over the boat) and holds .58 to .78 behind it, the band's full width, so the text is on the
   same darkness whatever the width or how many lines the intro takes */
/* the copy's left edge is the page's content edge, the cards' and the header's: the band is inset 6, so the .wrap's 24px of side padding would put it 6px right of that edge
   up to a 1378px viewport. 18px (a 6px inset plus 18 is the page's 24) up to a 1354px band, 24px from a 1366px band up (a wide page centres its content 1366 wide), the
   two joined in between: 50cqw is half the band's width, and 659px is 683 less the 24 */
.tphoto__wrap { position: relative; z-index: 0; margin-top: auto; width: 100%; padding-bottom: var(--tp-pad);
  padding-inline: clamp(var(--g-18), calc(50cqw - 659px), var(--g-24)); }
.tphoto__wrap::before { content: ""; position: absolute; z-index: -1; bottom: 0; top: calc(var(--g-48) * -1); left: 50%; width: 100cqw; margin-left: -50cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(33, 33, 28, 0), rgba(33, 33, 28, .58) var(--g-48), rgba(33, 33, 28, .78)); }
.tphoto__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--g-72); align-items: end; }
.tphoto__in .t-lead { padding-bottom: 6px; }
/* 1199 and down: the intro goes under the heading, one column, so the heading keeps its two lines (beside a 420 intro it would take three below 1163); the column is held
   to 960 so the heading (1152 on one line, 611 on its best two) can never fit on one line and change the copy's height --tp-ch counts on */
@media (max-width: 1199px) {
  .tphoto__band { --tp-pad: var(--g-36); --tp-ch: 223px; }
  .tphoto__in { grid-template-columns: minmax(0, 1fr); gap: var(--g-24); align-items: start; max-width: 960px; }
  .tphoto__in .t-lead { padding-bottom: 0; }
}
/* phones: the handshake banner's treatment. The photo whole at 3:2 (cover on a 3:2 box crops nothing), its foot fading into the graphite under it over 72px, the copy under it on
   graphite, 36 above and below and 18 in from the band's sides */
@media (max-width: 809px) {
  .tphoto__band { display: block; height: auto; }
  .tphoto__ph { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .tphoto__img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .tphoto__scrim { display: block; position: absolute; inset: auto 0 0 0; height: var(--g-72); background: linear-gradient(180deg, rgba(33, 33, 28, 0), var(--graphite)); }
  .tphoto__wrap { margin-top: 0; padding: var(--g-36) var(--g-18); }
  .tphoto__wrap::before { display: none; }
}

/* ---------------------------------------------------------------- team cards */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-24); }
.tcard { display: flex; flex-direction: column; gap: var(--g-24); }
.tcard__frame { display: block; }
.tcard__frame img { width: 200px; height: 200px; object-fit: cover; object-position: 50% 12%; border-radius: var(--r); }   /* 200 x 200 for all three, so the titles and names start on one line (a 290 x 320 headshot would show 200 x 221); the crop trims the bottom edge */
.tcard__txt { display: flex; flex-direction: column; gap: var(--g-12); }
.tcard__name a { text-decoration: none; }
/* the routes to a banker written out: mono label, the number or address as an underlined link, all three cards'
   blocks on one line at the foot of the card, then LinkedIn as its logo (`.in-link`, below) */
.tcard__ct { margin-top: auto; padding-top: var(--g-18); border-top: 1px dashed var(--dash); display: flex; flex-direction: column; gap: var(--g-18); }
.tcard__ct dl { display: flex; flex-direction: column; gap: var(--g-6); }
.tcard__ct dl > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--g-12); align-items: baseline; }
.tcard__ct dd a { display: inline-block; padding: 3px 0; overflow-wrap: anywhere; }
.tcard__ct > div:last-child { display: flex; }
.tcard__ct .in-link { margin-top: -10px; }   /* its 10px of tap padding sits in the 18px gap above it: the glyph is as far under the email as the text of a mono link would be */
@media (max-width: 1137px) { .team-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; row-gap: var(--g-72); } }   /* stacked, each card ends in its written-out contacts: 72 apart */
/* stacked (1137 and down), each banker is one block: no dashed rule between the bio and the contacts, which could
   be read as tying one banker's contact details to the neighbouring bio, and the contacts 36 under the bio (the
   card's 24 plus 12; the dl's own 16 top margin, the browser's default, is zeroed here). In three columns (1138
   and up) the rule stays: each card is its own column there, and the rule lines the three contact blocks up across
   the row. */
@media (max-width: 1137px) { .tcard__ct { padding-top: var(--g-12); border-top: 0; } .tcard__ct dl { margin-top: 0; } }

/* ---------------------------------------------------------------- What We Do hero */
/* head-h + 108 on top (the H1 opens 108 under the header, with no eyebrow), and head-h + 72 on phones. From 1138,
   where the text stands beside the photo, the H1 is pulled up 12, its line box's space above the capitals
   (measured at 1138 to 1920), so its first line's capitals sit on the photo's top edge */
.ihero { padding: calc(var(--head-h) + 108px) 0 var(--sec-y); }
@media (max-width: 809px) { .ihero { padding-top: calc(var(--head-h) + 72px); } }
@media (min-width: 1138px) { .ihero .head-group .t-h1 { margin-top: calc(var(--g-12) * -1); } }
/* the practice text on the left (the headline at the top, the paragraph at the foot), the hallway on the right at its own
   3:2, the whole photograph: 3:2 is the file's shape, so `cover` crops nothing at any width */
.ihero__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-72); }
.ihero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: var(--g-48); }
.ihero__txt { max-width: 571px; }
.ihero__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 2; }
.ihero__photo img { width: 100%; height: 100%; object-fit: cover; }
.nw { white-space: nowrap; }   /* a hyphenated word in a headline never breaks at its hyphen */
@media (max-width: 1137px) { .ihero__split { grid-template-columns: minmax(0, 1fr); gap: var(--g-48); } .ihero__copy { justify-content: flex-start; gap: var(--g-36); } }

/* ---------------------------------------------------------------- the values list (What We Do) */
.ledger__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-72); align-items: end; }
.ledger { margin-top: var(--g-72); border-bottom: 1px solid var(--dash); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-72); padding: var(--g-36) 0;
  border-top: 1px dashed var(--dash); align-items: start; }
.lrow__name { display: flex; align-items: center; gap: var(--g-24); }
@media (min-width: 1138px) { .lrow { align-items: center; } }   /* the title sits level with its body, like a table row */
@media (max-width: 1137px) {
  .ledger__head { grid-template-columns: minmax(0, 1fr); gap: var(--g-24); align-items: start; }
  .lrow { grid-template-columns: minmax(0, 1fr); gap: var(--g-18); }
  .lrow > .t-lead { padding-left: 84px; }   /* under the title: the 60px tile and its 24px gap */
}
@media (max-width: 809px) { .ledger { margin-top: var(--g-48); } .lrow { padding: var(--g-24) 0; } .lrow > .t-lead { padding-left: 0; } }

/* ---------------------------------------------------------------- dark heroes */
/* the deal and banker heroes: their first element (the way back, the portrait tile) starts at the top-left stripe
   stack's foot plus 24 at every width: head-h + 120 from 810 up (the stack is 96 tall) and head-h + 96 on phones
   (72 tall). The stripes set the floor, because a smaller offset would put the back link on them, so the top
   padding is 192 from 810 up and 156 on phones */
.dhero { padding: calc(var(--head-h) + 120px) 0 var(--sec-y); overflow: hidden; }
.dhero > .stripes--tl { top: var(--head-h); }
.dhero__in { max-width: 928px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--g-18); }
.dhero__in .t-lead { max-width: 571px; margin-top: 6px; }   /* 18 eyebrow to H1, 24 H1 to lead (measured) */
.dhero--split .dhero__grid { display: grid; grid-template-columns: 498px minmax(0, 1fr); gap: var(--g-72); align-items: center; }
.dhero--banker .dhero__grid { grid-template-columns: 312px minmax(0, 1fr); }
@media (min-width: 810px) and (max-width: 1199px) { .dhero--split .t-h1 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: 0; } }
.dhero__info { display: flex; flex-direction: column; gap: var(--g-72); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--g-36) var(--g-72); }
/* a deal's own press release, news and video as circle-arrow links in a row. A deal's info column is the sentence
   and the links, 48 apart (36 on phones) */
.dhero--deal .dhero__info { gap: var(--g-48); }
.dhero__links { display: flex; flex-wrap: wrap; gap: var(--g-18) var(--g-36); }
.meta-row > div { display: flex; flex-direction: column; gap: var(--g-12); }
.meta-row .label { opacity: 1; }
.meta-row a { text-decoration: none; }
@media (max-width: 1137px) { .dhero--split .dhero__grid { grid-template-columns: minmax(0, 1fr); } } 
@media (max-width: 809px) { .dhero { padding-top: calc(var(--head-h) + 96px); } }
/* stacked, a deal page reads its sentence and links first and the diagram after them */
@media (max-width: 1137px) { .dhero--deal .dhero__info { order: -1; } }
@media (max-width: 809px) { .dhero__links { gap: var(--g-12) var(--g-24); } .dhero--deal .dhero__info { gap: var(--g-36); } }
/* a deal page's way back to the list: the circle-arrow link turned to point left, top left above the grid */
.dhero__back { margin-bottom: var(--g-48); }
.arrow-link--back .arrow-link__c { transform: rotate(180deg); }
@media (max-width: 809px) { .dhero__back { margin-bottom: var(--g-36); } }
/* the centred dark hero: a 486px band (477 on phones) with head-h + 108 on top and 108 below, the text block
   centred between the bar and the band's foot, H1 at the H1 size */
.dhero.dhero--center { min-height: 486px; padding: calc(var(--head-h) + 108px) 0 108px; display: flex; flex-direction: column; justify-content: center; }
.dhero--center > .wrap { width: 100%; }
@media (max-width: 809px) { .dhero.dhero--center { min-height: 477px; } }

/* ---------------------------------------------------------------- tombstone
   The tombstone is Catapult's own format, matching the printed tombstones that hang on the office walls: a white
   card carrying a double green rule frame, a thick outer line and a thin inner one, in Catapult's tombstone green
   (#007A36, a fixed colour like the logo's, never the accent); inside it, centred and in this order, the first
   party's logo, the verb in italic, the second party's logo, the advisor's line in italic and Catapult's own logo
   at 55% of the frame (300 at most, the SVG's own width). No date, no side label, no divider, no amount. One
   construction on the list (.tomb beside its five rows) and on a deal page (.tomb--deal, up to 498 wide). The card
   is 152 to 498 wide depending on the layout, so it is drawn in one of three sizes by its OWN width (a container
   query; the card is the container):
     S below 280 (the list's miniature): mat 6, rule 4 + 2 + 1, padding 12, logos up to 56, Small italic
     M from 280 (the list at 1024, a phone's deal page): mat 12, rule 6 + 2 + 2, padding 24, logos up to 72, Body italic
     L from 440 (a deal page on a desktop or tablet): mat 24, rule 8 + 2 + 2, padding 36, logos up to 120, Lead italic
   (rule = the outer line + the clear gap + the inner line, 1.7%, 0.4% and 0.5% of the frame's width). The card
   never stands shorter than 4:5 (the frame's min-height, in the card's own width) and grows when its content needs
   more. The card is the site's white with the site's 6px corner (the mat around the frame, so the green frame also
   shows on the green of a deal page); the printed rule inside it is square. */
.tomb { --tomb-rule: #007A36; container: tomb / inline-size; display: flex; height: 100%;
  background: #FFFFFF; color: var(--ink); border-radius: var(--r); }
.tomb--deal { max-width: 498px; }
.tomb__frame { --tm: var(--g-6); --to: 4px; --tg: 2px; --ti: 1px; --tp: var(--g-12); --tz: 56px; --tl: 56px; --tgap: var(--g-12); --tt: var(--small); --tt-lh: var(--small-lh);
  position: relative; box-sizing: border-box; flex: 1 1 auto; min-width: 0; min-height: calc(125cqw - 2 * var(--tm)); margin: var(--tm); padding: var(--tp); border: var(--to) solid var(--tomb-rule);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: var(--tgap); text-align: center; }
.tomb__frame::before { content: ""; position: absolute; inset: var(--tg); border: var(--ti) solid var(--tomb-rule); pointer-events: none; }
.tomb__party { display: grid; place-items: center; width: 100%; min-height: var(--tz); }
.tomb__party img { max-width: 100%; max-height: var(--tl); width: auto; height: auto; object-fit: contain; }
.tomb__party .typeset { font-size: var(--body); line-height: var(--body-lh); color: #111111; overflow-wrap: anywhere; }
.tomb__verb, .tomb__advisor { font-style: italic; font-size: var(--tt); line-height: var(--tt-lh); text-wrap: balance; overflow-wrap: anywhere; }
.tomb__brand { display: block; line-height: 0; }
.tomb__brand img { display: block; width: min(calc((100cqw - 2 * var(--tm)) * .55), 300px); max-width: 100%; height: auto; }   /* 55% of the frame; the SVG's own size is 300 wide, so never past that */
.tomb__cap { font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; color: var(--cream); text-align: center; overflow-wrap: anywhere; }   /* the banker portrait's caption, not the tombstone */
@container tomb (min-width: 280px) {
  .tomb__frame { --tm: var(--g-12); --to: 6px; --ti: 2px; --tp: var(--g-24); --tz: 72px; --tl: 72px; --tgap: var(--g-18); --tt: var(--body); --tt-lh: var(--body-lh); }
}
@container tomb (min-width: 440px) {
  .tomb__frame { --tm: var(--g-24); --to: 8px; --ti: 2px; --tp: var(--g-36); --tz: 0px; --tl: 120px; --tgap: var(--g-24); --tt: var(--lead); --tt-lh: var(--lead-lh); }
}

/* the five rows beside a tombstone: Case study, Testimonial, Video, Press release, Related news. Mono labels with
   icons on dashed hairlines, as tall as the tombstone; a row the deal has not is faded and not a link */
.tlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.tlinks li { flex: 1 1 0; min-height: 40px; display: flex; border-top: 1px dashed var(--dash); }
.tlinks li:last-child { border-bottom: 1px dashed var(--dash); }
.tlinks__row { flex: 1; display: flex; align-items: center; gap: var(--g-10); padding: 4px 0; color: var(--ink); text-decoration: none; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; }
.tlinks__ic { flex: none; display: block; line-height: 0; }
.tlinks__ic svg { width: 18px; height: 18px; stroke-width: 2; }   /* renders a 1.5px line, as the circle arrow's */
a.tlinks__row:hover .tlinks__t { text-decoration: underline; text-underline-offset: 3px; }
.tlinks__row.is-off { opacity: .4; }

/* ---------------------------------------------------------------- article column (case study) */
.article { max-width: 690px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--g-72); }
.article__lead { display: flex; flex-direction: column; gap: var(--g-24); }
.article__block { display: flex; flex-direction: column; gap: var(--g-36); }
.article__body { display: flex; flex-direction: column; gap: var(--g-18); color: var(--ink-soft); font-size: var(--lead); line-height: var(--lead-lh); }
.article__body ul { display: flex; flex-direction: column; border-bottom: 1px dashed var(--dash); }
.article__body li { padding: var(--g-18) 0; border-top: 1px dashed var(--dash); }
.article__body a { color: var(--ink); }
.draft-note { display: inline-flex; align-self: flex-start; padding: var(--g-6) var(--g-12); border-radius: var(--r); background: var(--soft); color: var(--ink);
  font-family: var(--mono); font-size: var(--label); text-transform: uppercase; }

/* the case-study image: the company's own picture, at its own size or smaller, on a tint frame that hugs it
   (radius 6, padding 12), the first block of the article column */
.article__fig { margin: 0; align-self: flex-start; max-width: 100%; padding: var(--g-12); background: var(--tint); border-radius: var(--r); }
.article__fig img { display: block; max-width: 100%; height: auto; border-radius: var(--r); }

/* ---------------------------------------------------------------- spotlight (quote + links) */
.spot { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: var(--g-72); }
.spot__quote { display: flex; flex-direction: column; gap: var(--g-48); }
.spot__q { font-size: var(--lead); line-height: var(--lead-lh); font-weight: 500; }
/* the company's logo, 24 under the quoted person's name, at every width */
.spot__by { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-24); }
.spot__logo { line-height: 0; }
.spot__logo img { max-height: 40px; width: auto; max-width: 200px; }
.spot-links { display: flex; flex-direction: column; gap: var(--g-18); }
.meta-row .in-link { display: flex; color: inherit; margin-block: -10px; }   /* the banker hero's fourth item: cream like the row's other values on the green ground; the 10px of tap padding sits in the gaps, so the glyph's 24px is the value line */
@media (max-width: 1137px) { .spot { grid-template-columns: minmax(0, 1fr); gap: var(--g-48); } }

/* ---------------------------------------------------------------- prev / next */
.pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-24); }
.pn a { display: flex; flex-direction: column; gap: var(--g-12); padding: var(--g-18); background: var(--tint); border-radius: var(--r); text-decoration: none; }
.pn .pn__next { text-align: right; align-items: flex-end; grid-column: 2; }
@media (max-width: 809px) { .pn { grid-template-columns: minmax(0, 1fr); } .pn .pn__next { text-align: left; align-items: flex-start; grid-column: 1; } }

/* ---------------------------------------------------------------- the case study
   A two-up layout from 1200 up, so the case study takes more of a wide screen and needs less scrolling. Below 1200
   it is a single column (.article, 690) in the order: picture, Overview, Significance, Catapult's role, quote. The
   previous and next cards are two circle arrows (.dpn); .pn stays for the banker pages. Overview is an h2.t-h5
   with a line under it, as the two headings after it. */
.case__lead { display: flex; flex-direction: column; gap: var(--g-24); padding-top: var(--g-18); border-top: 1px dashed var(--dash); }   /* the Overview's text, under its title as a list sits under its own */
.case__col { display: flex; flex-direction: column; gap: var(--g-72); min-width: 0; }   /* a column of blocks, 72 apart like the article's */

/* the foot of a deal, under a dashed rule: the previous deal's circle arrow at the far left, the next deal's at
   the far right, no title, and between them ALL TRANSACTIONS as the site's small accent button (.btn--sm, 42 tall,
   rolling label), centred in the row. The two outer columns are equal (1fr) and the button's auto, so the button
   is centred whether or not an arrow stands on either side (the first deal has no previous, the last no next). One
   row at every width, so Tab order is the visual order: 48 + 12 + 151 + 12 + 48 is 271 and a 320 phone leaves 296. */
.dpn { display: grid; grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); align-items: center; gap: var(--g-12);
  padding-top: var(--g-36); border-top: 1px dashed var(--dash); }
.dpn__prev, .dpn__next { border-radius: var(--r-pill); }   /* the focus ring follows the circle */
.dpn__prev { grid-column: 1; justify-self: start; }
.dpn__all { grid-column: 2; }
.dpn__next { grid-column: 3; justify-self: end; }
@media (min-width: 810px) { .dpn { gap: var(--g-24); } }

/* below 1200 the layout is a single column: the dashed rules between rows go (each block carries its own line
   under its title), the wrappers dissolve into it, and the spotlight stacks as .spot does at 1137 */
@media (max-width: 1199px) {
  .case__col { display: contents; }
  .case__fig { order: 1; } .case__over { order: 2; } .case__sig { order: 3; } .case__role { order: 4; } .case__quote { order: 5; }
  .case__rule { display: none; }
  .case .spot { grid-template-columns: minmax(0, 1fr); gap: var(--g-48); }
}

/* ---- case layout, two-up: [Overview, picture | Significance, Catapult's role], rule, [quote | logo]; every row
   on the same two columns ---- */
@media (min-width: 1200px) {
  .case--a .case__grid { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .case--a .case__rule, .case--a .case__quote { grid-column: 1 / -1; }
  .case--a .case__quote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case--a .case__col:only-child { grid-column: 1 / -1; max-width: 690px; }
}

/* ---------------------------------------------------------------- handshake banner
   The inset photo band at the very top of Success Stories, the first thing under the header (the light header's 72
   plus 6, as About's photo is), the green title hero after it, with the client quotes over the photo's dark left
   side and the hands in the right third. One photo, still; the quotes change over it. All of them are in the HTML
   and the ones not showing are display: none (out of sight, of the reading order and of the tab order); site.js
   sets the quotes' box to the tallest one's height, so the band never changes height as they change. On phones
   (809 and down) the photo shows whole at 3:2 with the quote under it on graphite, the photo's foot fading into
   it, so the text never crosses the hands. */
.hshake { padding-top: calc(var(--head-h) + var(--g-6)); padding-bottom: var(--g-6); }
.hshake__in { min-height: 560px; background: var(--graphite); }
/* the photo's frame: the whole band from 810 up, so the photo covers it */
.hshake__ph { position: absolute; inset: 0; }
.hshake .band-photo__img { object-position: 50% 50%; }
.hshake__scrim { background: linear-gradient(90deg, rgba(33, 33, 28, .78) 0%, rgba(33, 33, 28, .55) 40%, rgba(33, 33, 28, 0) 72%); }
.hshake__copy { margin: auto 0; max-width: min(720px, 60%); padding: var(--g-72) var(--g-48) var(--g-72) 55px; gap: var(--g-18); }
.hshake__slides { position: relative; }
.hshake__slide { display: none; flex-direction: column; align-items: flex-start; gap: var(--g-24); }
.hshake__slide.is-active { display: flex; animation: hs-in .4s var(--ease-in); }
@keyframes hs-in { from { opacity: 0; } }
.hshake__q { margin: 0; }
.hshake__ctl { margin-top: var(--g-18); display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-12); }
.hshake :focus-visible { outline-color: var(--lime); }
html.no-js .hshake__ctl { display: none; }
.qnav { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--r-pill); }
.qnav--prev .arrow-link__c { transform: rotate(180deg); }
.qnav:hover .arr svg, .qnav:focus-visible .arr svg { transform: translateX(24px); }
.qnav:hover .arr svg + svg, .qnav:focus-visible .arr svg + svg { transform: none; }
@media (max-width: 809px) {
  .hshake__in { flex-direction: column; min-height: 0; }
  /* the frame is the 3:2 box, and it shows the photo's window centred on the clasp (otherwise the left side of a
     phone screen looks empty, with the hands in the photo's right third): source x 694 to 1536 (842 wide, the
     clasp at 1115 in its middle, the photo's right edge its right edge) and y 149 to 711 (the clasp at 430 in its
     middle). So the photo is 1536 / 842 of the frame's width, 694 / 842 of it to the left, and 149.33 / 561.33 of
     the frame's height above. The same file, never retouched. */
  .hshake__ph { position: relative; inset: auto; aspect-ratio: 3 / 2; overflow: hidden; }
  .hshake .band-photo__img { inset: auto; max-width: none; width: calc(100% * 1536 / 842); height: auto; object-fit: fill;
    left: calc(-100% * 694 / 842); top: calc(-100% * 149.33 / 561.33); }
  /* the quote under the photo, on graphite, the photo's foot fading into it, at every phone width. These three
     rules stay outside the 600 to 809 block below: inside it, under 600 the quote would fall back to the desktop's
     60% column (130px of text at 390) with no fade and the desktop's side scrim over the photo. */
  .hshake__scrim { display: none; }
  .hshake__copy { position: relative; margin: 0; max-width: none; padding: var(--g-36) var(--g-18); background: var(--graphite); }
  .hshake__copy::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--g-72); background: linear-gradient(180deg, rgba(33, 33, 28, 0), var(--graphite)); pointer-events: none; }
}
/* 600 to 809 (tablets in the phone layout): a wider window, source x 436 to 1536 and y 63 to 797, the clasp at 62% across, so a 756px frame
   does not enlarge the 1536px file past 1.4 on a 2x screen (the phones' window would be 1.8) */
@media (min-width: 600px) and (max-width: 809px) {
  .hshake .band-photo__img { width: calc(100% * 1536 / 1100); left: calc(-100% * 436 / 1100); top: calc(-100% * 63.33 / 733.33); }
}

/* ---------------------------------------------------------------- search + the record (tombstones beside their
   five rows)
   The finder is the search alone: the form input's construction at 42px with the search icon at 20px inside it.
   Each deal is a tombstone with its five rows beside it. */
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-24); }
.search { position: relative; display: block; flex: 0 1 360px; min-width: 0; }
.search svg { position: absolute; left: var(--g-12); top: 11px; width: 20px; height: 20px; stroke-width: 1.8; color: var(--ink-soft); pointer-events: none; }
.search__in { width: 100%; height: 42px; padding: 0 var(--g-12) 0 42px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--ground); color: var(--ink); font: 400 var(--body)/var(--body-lh) var(--font); -webkit-appearance: none; appearance: none; }
.search__in::placeholder { color: var(--ink-soft); opacity: 1; }
.search__in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.on-dark .search__in:focus-visible { outline-color: var(--lime); }
.finder__none { margin-top: var(--g-48); }
@media (max-width: 809px) { .search { flex-basis: 100%; } }
.deal-grid { margin-top: var(--g-72); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-72) var(--g-24); }
.tstone { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--g-18); align-items: stretch; }
.tstone[hidden] { display: none; }
.tstone__face { display: block; min-width: 0; text-decoration: none; }
.tstone__face .tomb { transition: transform var(--dur-hover) var(--ease-in); }
.tstone__face:hover .tomb { transform: translateY(-4px); }
.empty { margin-top: var(--g-48); }
/* the mono link with its up-right arrow. Kept for reuse; nothing uses it now, because the Team card's LinkedIn
   link became a logo (`.in-link`, below) */
.dcard__link { display: inline-flex; align-items: center; gap: var(--g-6); padding: 4px 0; color: var(--ink);
  font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; text-underline-offset: 3px; }
.dcard__link svg { width: 14px; height: 14px; stroke-width: 1.5; flex: none; }
.dcard__link:hover { text-decoration-thickness: 2px; }
/* the LinkedIn logo as a link, on the Team card and the banker page. The icon set's `linkedin` in the site's ink
   (currentColor, no brand blue), a 24px glyph with a 1.5px line in a 44 x 44 tap target; the glyph's left edge
   sits on the text edge (the box reaches 10px past it), the link is named "<Name> on LinkedIn" by `aria-label`
   (written by the build). Hover dims it to 70%, as the footer's links do. */
.in-link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: -10px; color: var(--ink);
  border-radius: var(--r-sm); transition: opacity var(--dur-hover) var(--ease-in); }
.in-link svg { width: 24px; height: 24px; stroke-width: 1.5; flex: none; }
.in-link:hover { opacity: .7; }
@media (max-width: 1199px) { .deal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 809px) { .deal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--g-48); } .tstone { grid-template-columns: minmax(0, 1fr) 132px; gap: var(--g-12); max-width: 642px; } }   /* 642 = the L plaque's 498 + 12 + the rows' 132: one column never makes a plaque wider than the deal page's */

/* ---------------------------------------------------------------- contact page */
.form { display: flex; flex-direction: column; gap: var(--g-24); margin-top: var(--g-96); }
.field { display: flex; flex-direction: column; gap: var(--g-10); }
.field label { font-family: var(--mono); font-size: var(--label); text-transform: uppercase; }
.field input, .field textarea { width: 100%; height: 60px; padding: var(--g-10) var(--g-12); border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--ground); color: var(--ink); font: 400 var(--body)/var(--body-lh) var(--font); }
.field textarea { height: 200px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.form .btn { align-self: flex-start; }
.form-note { color: var(--ink-soft); font-size: var(--small); line-height: var(--small-lh); }

/* the diagram's glass tile, holding a native-size headshot (never upscaled). On the green hero the diagram's 30%
   cream glass turns mint and drops the cream caption to about 3.4:1, so this tile keeps a 12% glass (5.1:1, WCAG
   AA). */
/* the diagram's glass tile, holding a native-size headshot (never upscaled). On the pine hero the diagram's 30% cream
   glass turns mint and drops the cream caption to about 3.4:1, so this tile keeps a 12% glass (5.1:1, WCAG AA). */
.portrait-tile { align-self: center; justify-self: start; width: 212px; background: rgba(248, 248, 243, .12); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: var(--r); padding: var(--g-6) var(--g-6) var(--g-12); display: flex; flex-direction: column; gap: var(--g-12); }
.portrait-tile img { width: 200px; height: auto; border-radius: var(--r); }
.portrait-tile .tomb__cap { color: var(--cream); }

/* ---------------------------------------------------------------- 404 */
.nf { padding: calc(var(--head-h) + 108px) 0 var(--sec-y); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  [data-rise], [data-load] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- contact wizard
   The /contact/ form as four short steps and a review, one at a time (site.js wireWizard), beside the
   coffee-corner photo carrying a live summary in the home hero's glass card over the photo band's scrim. Built
   from the site's own parts: tint tiles that turn accent when chosen, the form's inputs, the accent button, the
   circle-arrow link turned back, the eyebrow as the step count. Without JavaScript every step shows as one form,
   the summary, the bar and Continue/Back stay hidden, and Send works through the mailto action. */
.wiz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-72); align-items: start; }
.wiz { margin-top: var(--g-48); gap: var(--g-36); }
/* progress: one 6px bar per step, pine once reached */
.wiz__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-6); }
.wiz__bar li { height: 6px; border-radius: var(--r); background: var(--tint); transition: background-color var(--dur-hover) var(--ease-in); }
.wiz__bar li.is-on { background: var(--anchor); }   /* green, not the accent: a pale accent on the tint measures 1.3 to 1.5:1; the green is 6.0:1 */
.wiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.wiz__step.is-in, .wiz__review.is-in { animation: wiz-in var(--dur-hover) var(--ease-in); }
@keyframes wiz-in { from { opacity: 0; } }
.wiz__legend { padding: 0; margin-bottom: var(--g-24); }
.wiz__legend > span { display: block; }
.wiz__count + .wiz__q { margin-top: var(--g-18); }
/* the brackets stay drawn but leave the fieldset's name, so a screen reader says "Step 2 of 4, Where are things?"
   rather than "left bracket ..." each time focus enters the group (alt text on content; older engines keep "[") */
.wiz__count::before { content: "["; content: "[" / ""; }
.wiz__count::after { content: "]"; content: "]" / ""; }
.wiz__q:focus { outline: none; }   /* focus is moved here by script, never by Tab */
.wiz__body, .wiz__fields, .wiz__review { display: flex; flex-direction: column; gap: var(--g-24); }
/* choice tiles: a real radio inside its label, on the tint; the chosen one turns lime */
.wiz__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-12); }
.wiz__tiles--3 { grid-template-columns: minmax(0, 1fr); }   /* the timing reads as a scale, one row each */
.wiz__tiles--5 .wiz-tile:last-child { grid-column: 1 / -1; }
.wiz-tile { display: flex; align-items: flex-start; gap: var(--g-18); padding: var(--g-18); border-radius: var(--r); background: var(--tint);
  color: var(--ink); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-in); }
.wiz-tile:has(input:checked) { background: var(--soft); }
.wiz-tile:has(input:checked) .wiz-tile__s { color: var(--ink); }   /* the 75% ink line reads 4.3 to 4.6:1 on the pale accent; full ink is used on it */
.wiz-tile__t { display: flex; flex-direction: column; gap: var(--g-6); min-width: 0; }
.wiz-tile__s { color: var(--ink-soft); }
.wiz-tile input { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 2px 0 0; border: 1px solid var(--ink);
  border-radius: var(--r-pill); background: var(--ground); cursor: pointer; }
.wiz-tile input:checked { border-width: 7px; }
.wiz__help { color: var(--ink-soft); }
.wiz__err { font-family: var(--mono); font-size: var(--label); line-height: var(--label-lh); text-transform: uppercase; }
.wiz__err:empty { display: none; }
.wiz .field [aria-invalid="true"] { border-color: var(--ink); }
/* Back (the circle-arrow link turned left, as a button) at the left, Continue or Send at the right */
.wiz__nav { display: flex; align-items: center; gap: var(--g-24); }
.wiz__nav .btn { align-self: center; margin-left: auto; }
.wiz__back:hover .arr svg, .wiz__back:focus-visible .arr svg { transform: translateX(24px); }
.wiz__back:hover .arr svg + svg, .wiz__back:focus-visible .arr svg + svg { transform: none; }
/* the review: the email exactly as it will open, on the tint */
.wiz__mail { background: var(--tint); border-radius: var(--r); padding: var(--g-18); display: flex; flex-direction: column; gap: var(--g-18); }
.wiz__mail dl { margin: 0; display: flex; flex-direction: column; gap: var(--g-12); }
.wiz__mail dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--g-12); align-items: baseline; }
.wiz__mail dd { margin: 0; overflow-wrap: anywhere; }
.wiz__mail-body { white-space: pre-wrap; overflow-wrap: anywhere; padding-top: var(--g-18); border-top: 1px dashed var(--dash); }
/* the summary: the coffee corner under the photo band's scrim, the glass card over it, sticky beside the steps */
.wiz-aside { position: sticky; top: calc(var(--head-h) + var(--g-48)); }
.wiz-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; padding: var(--g-24); }
.wiz-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
html.no-js .wiz-photo .band-photo__scrim { display: none; }
.wiz-sum { position: relative; width: 100%; gap: var(--g-24); color: var(--cream); }   /* fills the photo's inner width beside the steps (571 left it 24 in on the left, 28 on the right) */
.wiz-sum__list { margin: 0; border-bottom: 1px dashed var(--dash-dark); }
.wiz-sum__list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--g-12); align-items: baseline; padding: var(--g-12) 0; border-top: 1px dashed var(--dash-dark); }
.wiz-sum__list dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }   /* one answer per line (site.js) */
@media (max-width: 1137px) {
  .wiz-split { grid-template-columns: minmax(0, 1fr); gap: var(--g-48); }
  .wiz-aside { position: static; }
  .wiz-photo { aspect-ratio: auto; padding-top: 144px; }
  .wiz-sum { width: 571px; }   /* the glass card's own width on the wide stacked photo */
  html.no-js .wiz-photo { aspect-ratio: 3 / 2; }
}
@media (max-width: 809px) {
  .wiz__tiles { grid-template-columns: minmax(0, 1fr); }
  .wiz-photo { padding: var(--g-96) var(--g-12) var(--g-12); }
  .wiz-sum { width: 100%; }
  .wiz-sum__list > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Contact opens on the form */
.contact-open { padding-top: calc(var(--head-h) + var(--g-72)); }