/* nikolastheiss.com
   Palette and type follow brand/nikolas_brandsheet.pdf. See brand/web-style.md.
   Motion lives at the end of this file and in /assets/js/site.js. */

@font-face { font-family: "Sweet Sans Pro"; src: url("/assets/fonts/sweetsans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN Next Condensed"; src: url("/assets/fonts/dinnext-condensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/metropolis-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/metropolis-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Fallback faces sized to the web fonts' metrics, so text does not move when they load. */
@font-face { font-family: "DIN Next Condensed Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); font-weight: 400; size-adjust: 60.1%; ascent-override: 124.8%; descent-override: 41.6%; line-gap-override: 33.3%; }
@font-face { font-family: "Sweet Sans Pro Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); font-weight: 500; size-adjust: 108.2%; ascent-override: 71.2%; descent-override: 21.3%; line-gap-override: 18.5%; }
@font-face { font-family: "Metropolis Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); font-weight: 400; size-adjust: 102.7%; ascent-override: 77.4%; descent-override: 20.0%; line-gap-override: 0.0%; }
@font-face { font-family: "Metropolis Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 700; size-adjust: 101.5%; ascent-override: 78.3%; descent-override: 20.2%; line-gap-override: 0.0%; }

:root {
  --black: #191919;
  --ink: #231f20;
  --charcoal: #424548;
  --copper: #ca8a4d;
  --copper-light: #d09b68;
  --copper-ink: #85582a;      /* copper darkened for small text on light backgrounds */
  --bark: #9d7a50;
  --bone: #ededed;
  --paper: #f8f8f8;
  --pine: #1a291b;
  --navy: #152934;
  --line-dark: rgba(202, 138, 77, .28);
  --line-light: rgba(25, 25, 25, .14);

  --font-label: "Sweet Sans Pro", "Sweet Sans Pro Fallback", "Avenir Next", "Segoe UI", sans-serif;
  --font-display: "DIN Next Condensed", "DIN Next Condensed Fallback", "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Metropolis", "Metropolis Fallback", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(48px, 6vw, 84px);
  --header-h: 68px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* long, soft settle */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, picture, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, ul, ol, h1, h2, h3, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
::selection { background: var(--copper); color: var(--black); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--copper); color: var(--black); padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
.wrap .narrow { max-width: 760px; }
.center { text-align: center; }
.small { font-size: .875rem; color: var(--charcoal); }

/* ---------- type ---------- */
h1, h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem); }
h3 { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .9375rem; line-height: 1.4; }
.label { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: .26em; font-size: .75rem; line-height: 1.5; color: var(--charcoal); }
.label.copper { color: var(--copper); }
.label.copper-ink { color: var(--copper-ink); }
.lede { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.6; }
.label + h1, .label + h2 { margin-top: 18px; }
h1 + .lede, h2 + p { margin-top: 22px; }
p + p { margin-top: 1em; }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--font-label); font-weight: 500; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; line-height: 1.2; text-align: center;
  border: 1px solid transparent; border-radius: 0;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* Hover: the fill sweeps in from the bottom-left corner to the top-right. Its leading edge (::before)
   is a band of chessboard squares; the solid colour (::after) follows a moment behind and covers it.
   --fill is the hover colour, --chk the size of two squares. To go back to a plain fill, delete ::before. */
.btn { --chk: 24px; }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-clip-path: polygon(0 100%, 0 100%, 0 100%); clip-path: polygon(0 100%, 0 100%, 0 100%); transition: clip-path .58s var(--ease-in-out), -webkit-clip-path .58s var(--ease-in-out); }
.btn::before { background: conic-gradient(var(--fill) 25%, transparent 0 50%, var(--fill) 0 75%, transparent 0) 0 100% / var(--chk) var(--chk); }
.btn::after { background: var(--fill); }
.btn:hover::before, .btn:focus-visible::before, .btn:hover::after, .btn:focus-visible::after { -webkit-clip-path: polygon(0 100%, 0 -100%, 200% 100%); clip-path: polygon(0 100%, 0 -100%, 200% 100%); }
.btn:hover::after, .btn:focus-visible::after { transition-delay: .15s; }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: .8125rem; --chk: 28px; }
.btn-solid { background: var(--copper); color: var(--black); border-color: var(--copper); --fill: var(--bone); }
.btn-solid:hover { border-color: var(--bone); box-shadow: 0 10px 30px -12px rgba(202, 138, 77, .7); }
.btn-ghost { color: var(--bone); border-color: rgba(237, 237, 237, .45); --fill: var(--copper); }
.btn-ghost:hover { color: var(--black); border-color: var(--copper); }
.btn-outline { color: var(--black); border-color: var(--black); --fill: var(--black); }
.btn-outline:hover { color: var(--bone); }
.btn .price { padding-left: .9em; border-left: 1px solid currentColor; letter-spacing: .08em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.center-row { justify-content: center; }
.text-link { position: relative; font-family: var(--font-label); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; }
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 100% 50%; transition: transform .5s var(--ease-out); }
.text-link:hover { color: var(--copper-ink); }
.text-link:hover::after { animation: underline-redraw .7s var(--ease-out); }
@keyframes underline-redraw { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; color: var(--bone); border-bottom: 1px solid var(--line-dark); transition: transform .5s var(--ease-out), background-color .3s, box-shadow .3s; view-transition-name: site-header; }
.site-header.is-scrolled { background: rgba(25, 25, 25, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.site-header.is-hidden { transform: translateY(-101%); }
.header-inner { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand img { width: 29px; height: auto; transition: transform .6s var(--ease-out); }
.brand:hover img { transform: translateY(-2px) rotate(-4deg); }
.brand-text { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-label); text-transform: uppercase; line-height: 1; }
.brand-name { font-size: .875rem; letter-spacing: .2em; white-space: nowrap; }
.brand-sub { font-size: .5625rem; letter-spacing: .36em; color: var(--copper); }
.site-nav { display: flex; gap: clamp(16px, 1.9vw, 30px); }
/* the longest link gives way where the header is short of room */
@media (max-width: 1119px) { .nav-wide { display: none; } }
@media (max-width: 359px) { .nav-mid { display: none; } }
.site-nav a { position: relative; white-space: nowrap; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 15px 0; transition: color .3s; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--copper-light); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { min-height: 44px; padding: 10px 18px; gap: 0; --chk: 22px; }
@media (max-width: 959px) {
  :root { --header-h: 124px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid var(--line-dark); margin-top: 2px; }
  .site-nav a { flex: 1 1 auto; text-align: center; padding: 15px 2px 14px; letter-spacing: .14em; }
  .site-nav a::after { bottom: 0; height: 2px; }
  .header-inner { padding-bottom: 0; }
}
@media (max-width: 479px) { .cta-long { display: none; } }
@media (max-width: 379px) {
  .brand-name { font-size: .75rem; letter-spacing: .16em; }
  .header-cta { padding-inline: 12px; letter-spacing: .14em; }
  .site-nav a { font-size: .625rem; letter-spacing: .1em; }
}

/* scroll progress hairline (element is added by site.js) */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 25; background: var(--copper); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section.tight { padding-block: clamp(32px, 5vw, 64px); }
.bone { background: var(--bone); }
.dark, .site-header, .site-footer { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAApeUlEQVR42oWdu7LcuA5FoS4zYcL//0wmSBj0DSzKi0vouVM1ZfucfkgUicfGxkZ8v9/4fr9x/9fu//v9875/9v1+9//7dfH9fltE7NeM++/j/qyuzx54X+B9/f78rs99Xrtfj2vqvJbv9zv2tdyv4efE/dr9PYE/j+/cn73vV9fccV3Pz3TN+7++1xPve+7rfl/gmvd3Dbwvvt/vwPof37Gfx/4urhG+N67v9xvXdbWIWPcXrO/3u67r6t/vN/Hn/pD9u4iIuK4reWP356378xov+LquvG8u7+/cF7twDf2+hn5/dvt+vysi2nVdERGJTZjXda19D/efgc+JfT33d3Bz7uvkhlv3PXET7OvmA4x7Pdr959LDXfiMfa95v35f18Tn7GfQ7vvreO+639ewpvt+Gg5Qx32u52dY/L1QgcUd+MLYF3k/IO6c5MXiwe7NsLgg+/XYvWt///05/fv9Ttx83++5N8h+fefN7A24H5Qe2PEg7/fxJOb982ehcb0Lm2JExMS6PfeMDbMfcL8ffr+ua+I69/dwA+41ezbw/Z59gp/noGtauIbjXq/rig+OdoMp5WmO+8Pn3iX3zll42M/OvK7rsQg46e1erIXd/jxYPMiF3UnzuGDaEg9h4foXN9r9uY/L+H6/Y5+k++cNJndvhF5tDJyQHhGzeF/Dgrd7ffZ3BTZnw/Xnva6Pldj3da9n0PRf19WxVrQYj9u4r6/D3LfPvchTu9QXv7/oMLswefRpPIWBh7h3cmAR94VuU9QjYtzW4zlRe8fi+3KbIvyOi7lowu9rnTDbE6d47Q2xNxd83uNq8PO9sRJrkbJm9tuL/h4bvuNBPlYE8QVd4OI14cE/lg+/n/s6Ptd1DZgiHv/n5nARS78LnMp9Yf0+3YmHshAsLVxMvx9Wvx9+Xtc1fwQQx+Iw+MNnBPzSgmk7Fn+fFFwvH2iXC2o43c+m533ta4P12gcgt8XDxht7XfAgF+KO/VAX1mEhANyfTf+7n922ms/1fWBGxr3rJx8U3syAYnBX7ZN0XdfE38c+lYgGd9DEG+GpC5xyLkr82NE09wkTOYpgiQu0ECPkfjDbDN73n7c1WbwWLOzzPfSHcGmBjfMEQbeJ9+nv93dPPK+ki4CV7XA1j0vgwcQm6xei1oUHnVjQxYACvq/h4nakt3fiwAXu1+7fbz92RJ04fc8pwoMY3NUI6Oi/92clos6ET0zGBHvRYEKfzVVF/NtEy6p1+FF+xsIm7IoxnowCa/8EaQyW+B5YULvNhB/eGyD3mlz3wwg8DJ5a2/qOxeKFcgMEHuJ+sFys0AM/fD+CsXB0CD/FSPgw/dikMyLGTvFkcTof1t44SDOY3iy4i4n4YnFj30Fc7PtWrLE3wqDbgsWxlToyEcQTzgQCKSQtzdj3ceG0vBbzvsGJIIO7xwu/NwHTKwZGq9gI3IHbzzBCXIwmYR7LPBqLxY0wkVrxe1LBz2KApDy2w6o91oTgBdM1vHZH8ku5PLOUJ3Vk+qR1eFIzZhU/UtPHjX2/378PGLs1aB55AgVYPLsa0ekSUrVN4tIC8AIP8AAPIQEihFIGgigNi8hrTJjK/eATv6s+e+nn+1Qm3k80qWkDctMy20ikX3ujpqLrhc8Ppl7bMty4AEGfvTloTfYabje7Pgixn3Tggbn+5bwbDmSIzwvM+31PRM2dCPOxd924AwMGUo0mUSeCaVkokmVQs0/zfjChSH7dJ7DD3TBif6WB+/QTNgTgsLjJ9ka7ry03WLQ3PFxaIAV8AB3k6i90an8Oo3SkfP98Lt5/XVe/gK4whWDu1xWx0fkTslz0EzBNhA53ZJoAM+hvF0wsT7xRmoXF3xElI2qepDCEyQARqVPCKjH9STzwJRcTCpIarYyCzO27E8HcEioX+P0D096fy+CpYa22+SbE+8+n750jgL/vU0zTg1PcWYCg+Ua69SvXHPodgZJAChYoYjQB6syRWRDpKlJ0vL/D3x5FB16D10IFjKPIoIJF0ylvSpXGviZ8XpeLGi5ouKiDZ1IVPjqLIo8Pxm5fClwGo0mdEGLThuuOSFNgxRKofqQk8j8Nfof+ZRLox3XyuwnUP2gRTSSrLztt4Xcp0nfxokfEROD3Sqlw74RIF1Me+GCmXMS2G4IvntylDbJ07y0i4gNoK1DGKoFsmh+iLFwYmhAHUIh+t59k5SOdvsifNIAJnb5P8N3CtTRDePjZwIaaWKANfASAGj4Q5qqtgGNT7imYM+91A+683cuUT0/hE3zNggUkwsiNnd/vNz80JbDxHSjOUji/T+JGrRpwYFYyGHkGcVfiwaogMS9uTvpR7AgFbonPb9o4ARi2uXqGzTpkXRo2/xDA8Xy+ULejyMBNKUyd+fbjDu8135thuDKn2ngDjv5kChuq3Pf7Ua2WddnEw3xyOWG29IHHAjAqV4BzlBqBQD0VG5YEi1zzuVGYdW7SUJTbtUn4cGmCJ9M/bKjnVN+n4gj8UDtvLIvCx7P6NoTAEdNnuTNdB1Bxh/i1CySJWKb/YbRHE6lC9BJocZxk5c+H2b7f35W7pqDJ6tQ1FddT9d+jGsTNyFyXZhnY77Br2WCDFpR+crJerNjjRUIQALM/cx4B0JmRsK7eC/YLc/ujvAm0riEn/usudJKak3bcQLhQXbA7mPI84IIADj7AXdgft8lmvfcV1MGNHHgrHiCv7wHvd2yBjcuAjtZo+WcuF8IlRAEMdZENmtArp1FNweGRinrzipjRbCFU9VoRER/xkg6I8F7E5Ju3mWbhH3mkb5o3ZF+4sOA8VYHUaihwSpX9BgrdZnYkeU2qLKX850Kg1EgggCkPBEMB/z03+YGFAZnRfU/b/CY2ysAG7LIaDanTUxG731NZ1S730T840l2m97HjChY6GBUh6DCEozIXPMJ6VUJoHjtQoImCPW9wn8Jpv7MhPTAjjgdSxBW0EN3RPzbgESOwbKiIP4G0ddGXnFVsC/Zw33BIErWAw1+7pg4TnQCl/lpD7Y5J1gVPtEp6TWB4q0p+KvExrWGl5sC2dbqcO7/yP6YIchMNkWYiJnAxgP4wxZVqcgtLbipZfIfvawqckuwXpT9NJMOwGS8CqyZqUXfh5ikdsvrBC2WJy6xCJfpHjoxKFH0Xsd1A3XJh9w0UGQyOkFLT/XuZ2tDnND5Ycbv4vqOqpg1GWk7HhuS18+GmsXOSC8XYfKwRzSyKHK+glUEV3YgPyPf7jY8izgMwQIDVkffRpI7bxw1EkfTHpLgQEA/ekHasmYlmHTpQY9oUQoPChYT730yJFlKTLkA/5IsHAscULLrkagjDNn1/o6+HG2oowgymTBs3wGY/0qedhcCVteu6+h+dhFZUSXaNN1TmaooEDcyzhpsAxQNE7wWfEQYmeHIR2W6/1FWkSJfsWGojtQUolhE3/myJ680yJk0n68ip2i1NMWMGHhjm0lNVsO7YoeB3H1U7gDNtc7LIMnh8GOA/RswdFJptCtPcZJHr9u+mUprJPJm+BpDp0ZVwL+AUZkyzZtM6hQYRmmQuPfSQmeKswsSGgP/9+iFcfQmFOnwwsHwGSvs+totMpT5JDjj4ZC5g/MWiATM+URxvAhziKEjXbNFYqHE24Lops0F/EUTJBPCT6ZkwbcfDRBoVAt+PnFXgAUH7xvoyFww+t9/8rTLo3ITDDYZUlge8Z6ZjS1g1odOkqcZaVHl3KiZo+1l+kHOmfOxiMV0BR1V5MjxJMLwpUCOYPsmTUj15b5YhaI9pG1GxZClQPpuVr9ADfBiR7vVBZNudm+qeWmHlDowbp5R87B29p9Kohoe32M+0Tfw253AbXfXw+IgPTeCCpnPvlGk/x4ACZmWJEXkwNhB5MgpOFLKfB7IZC6rSpM05Og+64VDcVwK/5SlmPxXTtGcTorr0Ahhgfg8CPjjbR9CIgLDJx9Ld8L6C5Py9sdQiE6ohxC4XEipbQmOyILq3oqWDEFlTI9ixAIiap2E4UlBFLd3W4MVDuh98IgPIyoTLz3aAFjse2Jt5qGoztGG4kP1H1Ex8vRtpUgdIqBXoYEuyoLCtwc7bRfLvAGqe934KoN6tjkdYz3rrjvzgO6IoSBzpjKgtBBV2SbGrDn34cKFCR7pBLBk7vCGw6jhlqRRlkSwIdmIW7aPLrZoq1e16LDs8uipYvWg3Dfnwg/dMNifRMDBYE5y3jIj+Qd1xCfIyNNYBJT6nUEA4YcmjoUwmcLIiI4bIAeTj76mGs1Dke5hosijRjbFwKl8trvh8V5Xcvtnk/w+TX7SwNN+XujOSFgWHjBjFq4UVz4DFlLGJBdd1rT9qN+zqt8miy22qm+FggBQMjFbxoGWGAvAm/dVkWa7gDTM4nCKvuxNxFpvGefAqAs0siAdu1GuuIgF6TFJpwBkPke4PXB6nvQPHX64LEOplT9KDxwsLDbMJAVs6EMiCznqwGBHGu4e1ifs0CqZDCAAhb6rdD/SoInnzFJBnF8e46qI4Nol41E0Pfyl4agYhsFF74V/pGpbpuEUbz2AzO3ldwiKeuOqPSXRVdAwTUpmI5f4aMzmMwyIYS9Vdu6s33GhAo5b6iJq6CQ+zi0Whud6n64BhUQ4NNF27JNqUGXSWEdXuGtxIP8j6R74vSzjFugkT8YSTH2TDCwS0hdPWRSdp6vLrbMsQ6E34rYlT1HSSK1PF0mWqEasTUMHDYdM4H0pKnoFR6gulok8mDo9erKbeog7fyI4Cb1if3AOiJJbAth8RFbrZKbv7QhUz5uftg923dDLNl9qAA+k1S31Lgei2M98knks0TBTVjhQgiIrB3y4xIBII18a6UyS2VnzXk48CpH/IgSALbL/J/tsgqxHBzcLrqHdyPFy6RB4qdJYsxEANlKWmQI2KAbvhbCLYe+rBm94yisLyA57LrLDu6pN0cJ1YDlPt8hXgift7AOzgQPMaX31Dxou52+ETh7jQqwjk3JpJio1JcCk/G6oTR3FyUzg7A6fmMq7vTYEt3cy/w8TOwB8MRtZujzZONnepsuQ+H5/0pQJ8SK+Cajuv2qw7HbnZSKrT65bBFzV/hQK20GZNFUvc/joKPtmiJREKdgRSbEdxxY4nVao6BGn2JmPA2i4TxUyqQw30aTJTqdA9O63YgW6APlRnxI9mmykjyCY2RVeZrqsKNHFNgxAnHxQW9FjEojfIZVLHFR0BUStov1VtOyqrSJID69AMEClvxcKDa+eX2hXt+A8dLNVsm5iATRBjg3lJBEBVH3Lq1GTUGlsDroQ3N3ba5Ib0Qp4o1LjNmnUrCPzh6HczQFEaNPr060G93ByLC/LnEzFJmgRxn9RJ5iZ5bs+h4w6E2k3Y9xSlQiffKV/c3G+jaNwNztzxHXluQ+UpLKFEc/fDerin9pUlFFF2M9+qAmhguYY5VkXXZC9kL35RXkPU23D3J79PB29BtSE/2MWptpPFaJadeGJIWr8i4FNSeLFZGx15LQEVJv+JaLep/tmrgr6ibVZgmIZ0QXzL2QHr1DsqLjolmNIl+qfIohwsD+4NW7TXLHUsBAso1vRQgBhwXf+i6du8sQRn537wqdy5oEWyoNmoSmw2nwpwmtj6g6dR/uaQ9QPl5hA1g9sYgDaXascprQubxMNvClsO5cjUMen4TJdb2e24TT+xgJSVpKWacSrihZke3+83Pk4FUA48OtpVAWKnO8ncy4gNbrrqR1rycZ1E+6INxcJpyZjBRX78PsFBfvlYqg6wV1gVIFJ8mF5Zl6uLTDhxAjeth+laiJNOooF7pR/OFSzg1IPNQ84hTumhUMpzaEgw9zPFpkCpFsQ3E5tjSsfx1W7KfFR6HwdtlywSvIcnwsUJCrWsQtDEbSrxo6Buqu5SNYq+d4gSW7WrVF2KTulsXaNoNBhY37/1YEgGcEEs1Xf067JD0FUloFlD3W8HM1LggmlA6YJBnJKDz+5nVIobGyz9xSmStttWexG0kUPtZvVVCMmEu/bZNkJEDHLMRz4tHtZy0ASE0MWeZgurTpHY1STu9pc0n9kQJF/LX4SS8qqpjUVrU0CbaqRDn8f2093lPwrfacAm3QzGzUtwhHQhFyw28wM0pGmlHKVEhwzVXkfxskhWJ5mOaWQJoIiyZNfzr0CCwIMmlBfSVWy2JlXKhDngGmJa+MaWTtGqtJ/c8yTmB9tXWBhI7XrivkvAwWLXont21e3RK3kF5betUKoLsVKOooi+L5wKFW6hK2Al+bFf15WfOEVH94VNmcImE/uwL9SwxVMy4FuX6scNJbpOchrrqOKINbA1CAW++pZZ3SEbg1LHxnBJO4I/a2JVvvqjkbuT2mPpBpPdl7sASSt27RnXxhSxySKm07iIaJcbkYEWmVZSFfoNu4V6nfj3EIxHhVib70NtPk4pp0OcrMitrejeC2yYgRy7JY6OB3VttAKgYRGFuTp98CxqwK1qfyGrVK0/vQgKCdwM4gB0RR+2ZQISpEbjo2uMQvsw24L4MPt0ilaUhIl3784RZIg0ZxlEBn5E47olmSw7xIoLyHFkgBKTHhBDC5HWZ0iiSZi668u8RqoCMP4hqtallxkCS0KU4KMBLyLaB/2lS7SWo9dINv5h76H+2dxeaYAg3vL02wRPFxR0Eo6bYRrivHrPQqDZKuQgaLbNaImK+K8OisNUA5lqeq11NvaaTDJB5Hoy3mq7JEKSpE9NFGt/xfbBTCEaYL5UOhOF6gtTDgpe21zu3pyJVhLSSgcL7i6Os2aMojs7A5iiscmM0gyLN47NdhDeWHgHEWBaVQebmilP1T66dKrof5MbpOrwZzrnLgq27OB5Hdb2QzFv5na8ILeMoJrx+Ad0Qky2c9KPgBZ69PXqBKa6G8lpmgT+EdCQobF0so6yHjvr6YqwIefuzq9GAgFS7NXmR6DKoGewaU/B14ByXt7/PpDBgnzojTPZuLAPzff7zcvkcyXyg728lClSztiLIIZIzfLFKdjp6inu8IEzTr3llBLe8cARgLkrkBTbijRgIjnxZlNXo+jcJ0YeKrF2mF/LMTed6ObJKXFOgWkWWRWb5fi8D3Z9Exm9WTLArAS2WyCAsFrrAiH9AAEQNc6iPjqZTmzQAN/74MJQ3UvPQyIKRM6YdDV4/UuLzyLCBNK2A7FB1T/qhMFtMJDrki6m+mx3FM64AykQLdbe2Ifu9Laqf7gjWIfl7qA/5Qlk/dYMSAY/WrCDGaLmNfcwJS68oxOvknc4ihX3YqUYEeHARgq3qWLDKuBaF1NsNo/CDSNawYmr6oI004QWQuoCS5lFCo/ugbE6C7xcN1+7I47d563oXAid4vVDPORQaJXf9Qi6hraWJgvC2jH1HjcBoasgMFU/TkS2HT3NJO4dU2AQd+zFZNdiSrlnxQ8taliUpf7pEKEgC056eD0LYdh1Cd81M/LnmLr4bw3ppYrQi8sk/Jlj36b8ZohF0ZAKHT1AKi2+FHRd0YlCepFMTcUJR8N2QUdav9ifZFXGObbHHYUHhbig3Q5JTh6bA+T+x6J+1Kb4KgxIz/mJcrH4L30tKbilta7EVGBRfDLNktrAQttJJ+yoatNLWknVnqVAzR0HR48tiQOQViAFh6klN7GrWBsgSrWLhkAlro1lHUhDamK1pAo6f9PFIurt5gqJIDd/TEjxNJZQgBQaekkT1gp19FeNVS0uLN29YEFUo1YV0UvIbFskFkZM3jtMn+roL4ixmIERP4LVlzyGYct4D+NwmdVTbJ5A7XP/YjgEt4gIeD4NPiiLPmCnWiH6y4TQS+BBRLynmwUYHh64RULCFPeJvO1QQ1unG9GDWEK0Xjxljot1JEywxcULuLWlTUDX42BzoDOks9ufFgVuzqXbeVV9QW7BFF7s0lsYOHcpy7vS5HakDqk8zuAEu+xmBdQXkCH9aSdqJHDeKJ0ZFeW/OT9CHQytUNNbRepJMZWjZIu1T7kLSje6nYcdE/GH4mTi+A4WwuW3QsXyvdsonp2SNSTgP8HrNfEsVFZrRsTUp2PVgSFW5lI34xIprkLMTOBfYpymCvbO18OmnOVOFWE63M4U/dfqQUvzJFaRwRwA0EeTTLLoB56S3D2GXAmHrUBy6kom0pQpIt5rOJVaO5bbVoBvsxI1XZ9mSVFmMCraEE08sOv97ykRGmpmkOvVUcbrRaGCtfJDMQfwY4+3RrTpzL3gkT1CMx8RtpxeLLaWolEtyG7cf26dCve8ip4zqBpj1j7BDBcmpMTH4sJiKbIgpnF2cRdSVI1OJ2uSFup4fYHZk0k6EW8wB3fT+FESVTrJFJKTZfbzmHqw5JD/HRB9XzgpKGbXp+ilk43Jmx6qdsunlMjgIs4JX03qb83JPooJ1vywFJFH0aSlfEFHne48hNVJ4sGe/lkM52zCnLkRBoEiHZ6X4Cl8skVXmithUP8bNtHWj/5gctYCsWwRHiw6CA6VHJtXAuvqNNwbouME0wdO5YQLLBMGfFHUfI9CBTeVMPYdaU98/0N6EJY8iAW7O9DzFJRVTOfwUSvxVT1KlZgb13txVK3z/qDoqkjgnD+0KLWvKPVAtFQmC0d0DlhwQUPMDzdmdWG0y1E52Yrx/q8Dl42ixYbEN17r01VBBUAxSZuIfuVoAaeMisStce0OD3YxuIV3CegZIPbv57g+kMKz7R/sU8JYdJuUziK52jum8r9kKkTUaEOQmmp2+CQEe4NokDjch1/eWYDTMwmldbFMAuRDRvXNdCMJtZLj1TXAOiBt2KgaoM4Fm/OFwdXdUTvcWGJMz8NNv5QadPmvGecoHHOP2WHfiIFWrSTFHF/XRV2zDZwIBnu90PcINZOzr/cpN1pQXPl4Y/fh3nTCjSmYEgI83KtcKdezZZVqQb5GzzBmW2k1kaVU5/mwhZO6jpiCcmhhsJLBAVXu+o9T4tf5WlMrShfwwPpoSIv6qXrBRSxYmdTgzKdaFKdS0BJJ3JQbkwe7/P5BRmReTiy4sDJuBndn4SGVFP/mCncxbjq/31pZzzUQganGuat9xGNfTOS2bsc0iF4l5ULFXn7P8w7kDmhSu4oNS2NwA+BNqh1nFpYnQEOi0EuXWNzB645zHuHR6a9m91fETFZKvFWGfkli0NcfKN+lWb0upNN0peqoNJPu3u9SLm/xHpzlTUPzOFV9Sje2qRe2qf3V4+bJ+z4Gg8hkuyTZCtD/qBOrr3rpATmwGv9HMcEDrnaQe0CQPpBK3YjK/eVkiX3xU6ZfwD4V8l7qOgVJ3nksu91DU06JsXZBcFlAeQbt80c1ppJNLnuPZVGmmr3SeHPB8CjF4ayYUIzY6xK+KX25MoKjfn50YFJulzlgpaAjTtUvfu8qgq0X4a7QwDxaSKQoc5T/RItZes9BM3IhYoMwpLoIdDClyBzkKMyoCw1mcbYioPMktLAkYiHvVM1+JMniqa7tjfpBcp8qwjdNzQzxf/ai7/SGuah5xlSAXwVvi37ykDUWQLCMzaLXqRVE86VCRIiqkyba3Yuzqu9GcPkUSdDl0cybjnOizNF14XF7Ypuy2jRYRIm39CTfExaSvQS5ZUGB8eSzKAgBNhdd/bSeLfx6z4+OwCoAm/JpwYi/IgaicmWuU1OtmIWTpZlFbHTPgnS4Crg3TSSU+Aolnxxs0UJ5iPRis7cUeTn57JkAvgrUpZTdxeKmIlP6FSJIS5sligh0FZEug6+m/tsd2b7UeViZEYx6+GGzIZSvHyaWFbRCvY5T3g53pfEIq0DSzNOy5sj61UxXCMpYO6vtenArVGE9+4ev6eDlsjeWkWz+iH5DZTmPR38p3mnipgdzWPdyYQNEaBCHzJtlKqrSYRB0EOGBECvV8A10NM5TdABKMIXIIQsiIj2EZiSzcXypUzQ+ahhuVHvZ06njHMLEnG5pIEWTICfx2Y5+ny4C+dTo9wZYj77UBfd9SoZcTeO8YY/PkatoGoS5VH1izNHRQRlsZWHuzVOLzc7ROgf2rirVS2UBXDnHKhMB4UDA98/8i0mRmqtwUFeV61pHwoMvpgoZEW9trdBJ69Czou5E5dt6NWNXgi+v6FQU1ShO7nYvVuoLSRs1aTkvxxiQmngN2fIgS9GEj4YCubED0tXBamagkLKzpJl1NGMpmSarcuJ0vlIjsQpNo2ElZ3mkXdHcvYqhl9vnDfj5lEpeVYutgsKNBTdRh6IIrpbQpV6IoBwdDdjEHofQjBpWxDzlwAfIw9nOXMPPHrIsrYgGuYAe70lnLP4PN0yB8WBiWxK/Vn66NJyridTXhCA914D5St6ElYL6EaiQEYkcfqdio1g0Fl0Y5NHNpPp2V2Huk+0wcmm7YpZwBwnwZwF/DlUC2bzXdsF/SlB0+8mBmw5O5wJrYcY5k+DBW0G1CeyyrhxwSM/iYFVqmhpbbDilMzANvAJXhimrrjIhn0yliSPOeYCk4pLZ6THwXfg5uxm73MpAoYDiMk3QJFkwnBX16vh8Als1mpGiGSqCk+KZiLQJjx38IQUn6SiyaEmJIp+0KHcK+mSJscsfrmJASBPv2WQCC8OVWh9FB+ChfiufmRVZX2uWQMg4Uu/odHTBouBtHcLuHyAgDNOpOTHiPXiDrRepGUGbrD7V2sGgZxrpkrT+0VbKKgqFUYWAsbSX8Nn7viYnpFWzjULTU4tR7gvSg8xHj7wXa8I6L9/Le32p8Ul7LGANlii5M0754EmNkd26UkoYIvfrQltC1Q3nuJ6Cyc65lHaHmRhO5FsxuWQV5cNQweAQ3i6oQ1XU3goSeprE9iN6DeibpIgKps02BZCebhZoaGNz+/IaFg0CITCnfcTrDRW5B5mGMgvhooG67Vm0X2o32YvXwR45RudpRuLyw4VvZmS6fPrEZV4iyU2jVyIWPLn45mAjjx8GOYwxFz3LYd53wfgguf8w/552uqFare1ZjJEUfCB3i6KR2dQeC2QOBSGuPoXqlfYhHALCcT8pGo0HYEW8pfSbW0JF4yEoEQJwIt5DNogjL1yvaT5E/kJubVpAxRUq90m5xotg0cWY1MiDtnnRSwHLvohBARCCDxApaWjNZKPYoVsFv8jxNS/4DzIMh1Sxp3GygQyxggU7DziPGQA6OJalBilNoY6CLLoZu2hAXeb89V5yuhV/UOlvSpGessgmAC60AA3hDPFR8JIINA7BTiEkKYnCo3mLDVGoArWCxN7VkmER1KMPV+bnoLCqymV54In7eknxYkh1yF31eI8aOqJwcKbt/1P9yZyvkEx5pKzbOXJWsyJfan4w11Puse3eJLZEeO7QUi68LGzC4GCfEg5qkm8hfjylQJdYuC5ggKT5I+JmC4o1mF39Um37iMbxXm7YCSLDiHO20dIgMOtoMVJOAkqUcCy4alPyTaTqBCLxVPWv7F3+IxSHobpHvr0GMhHxircybGoy2bHQVqJBjrdAVT24VKTwaAAI5RGrYVKNMosq0ntxPT18KU4IdU6STlRJUnFkDwVIrUzgFtZUTHAoDhjfB+PymDzz8Vi6onZpk9CAYh3TySSld2g7QnG1qwVjbCkiCYYT/G8SfklHr3EOqHoia7E4FpiROy5I5JQcRtJUqQoR7h45o01fZXkxTtnFFu8RgL0wty9NkUJhf6ksu5SK0qq2q2Dgv4Y3xltkM/weVTK6Lpi7uIeUXYXEVBNLyNA81Gz12kXmoqX1wQbpmgnFvt1WUHbciP3K78WPinjLNHdBjGxOrxR/s5DXWKION1nc1LWlh3K0gsvLqM055iZfN01uYftnV4A2jQcjHWqQdahmHnaYw0q/udOHiYSfhYI6rcU0wLKthRrBOmKTCt8+FHZxehMxSqgl1+21qXs+erPFZKEOdX81DhDRcWefzQcprPTdDEDiVENPbJosZA+i8PdHC4qLB+JTvwr4opoy3SHZfYk9GWJhdHRaWn6RqUjnyCG1rrBBYIob/kyAof41wI9DC0XB52sgmAeeYBPHRaorgO5peqjAjsVeIkXUL/KAdCWi4AWHOgpTIMtRyGekSzzcBXqSGZBSZZwzi/Znk5g3xD2rqLfNAjNY2G76EtfRU85xwn9xqRsYJi+VQHLGZe7jQ8CcuDToMod2k2cFYWeSk2Sl2aUSmmV5XdQfcU7XNvZ8jITdpgyf2QzQ3zefvzYczOKjUCMLs1SECfY6E1KN9xSYVOHimJ0ogoWnlzc1rr2YqshkDmbpTpMszZ9oYO7qo/F8PU44y0I38eD6GvITXdZTvin9sNQFyROUhUYVTfDRsK6TFP/RBdjVzThJQ1IT+KvcqCKCuw05ze0l8aig0U0IB9NVOp2HxdvVpBFvCSTb+CVFmhXvMXFdDy0BfY7Cn5nyShy6qxGuyrN7MZzr1The9BSdHfD/4L0QtXcVI4OOfiAt8JKfZI2X5r4VYqqURZoi/B14N4M5UYHcPPiIsBCj9cMNlfeq4RRddE5bgcHaJ1CqhD/ZlmF6QimYm+5DymJugf9r0vHYSFiqLXVZc1I0Iwac4780NoBjswEtzXGmmAwFwSvtTQBRS1j6gy1YImJfz0eEsV5dtCJHNoHR3GbVNQjgvEN7KzXjL2SmHchQ6iCLE0kxVUraM21L1rfV5hHSg2Zw1gXfTvUdD09Q+xGItSKti3iPAODGMtX46GnCAVhIoToKKd1jdbrV2eV7s+godM9wK6aQ9qK4X7VQLinNrur1nnod5/SwpZShe06RxqmHOjLKCSjUniZQIwaK3UcWSgdO24KN33Gq+Vrpne6nLJnK/bQ/HF6hXHbSH6m3lygRJW675+1SWinewtnUgnQgZLlfszvo6xekdMOoHE5hGqXSPEanJVVxPou05pjmorovN/twG6wsU/zibXtkLtxBFPHQs1E+8hGUAmRZ7DXmlEMsZCoPIU5QPId7g6HG3kg1VV7syaYNFFKPPj9EUjUYZMlKLXRAvAoqlEAW8dyE/6ZDMIVN06SmNuTC9zzWzhrZbGIvroOpJrs/Wtxzk6xTPIU5e8Cjv4RMCxLY0y2RiCQTeSTLhKm2kV74roVyJCHUpgi0abq4MfQBGDRV6bLcIcfbHXK+2ESBqTIk2LVK2T3OAWCOqA1urEK4vFkpSCjc34I/Q3gIlHVxpNh/ujCM4pAvLC6ODAzrPx39S5TLxWlI9xMVG+bQz1SFicLZUTSPtUIhNhVkuX7cHDcoRnnNVnId3YNNJK9sAdS0+MuWDdYcKB+gdV3X+uDBHPIJlQwfc0ApxKYi0zBPC+lDqLoSSr2oyziKkbetIBEcU9tAdKMeZoO25VFeLEp9VtdtIPQb7GnVtFRqcKqNJ4py4DMDAqo8Ucg87BTJ2AXXjiKojw9+KkmA/+g/G01OIVxN+Z6h+vCEpD0vPgnZoZSY4isNttXQ/2huIdkQCXE2cr3cf8yCQvM4nqKbcZkWA9JC6sSzCO84h+MDWf6bBajCqLzRippDjZTpIWN81IM6BXAfQ5jYQwMEJREgMGg5JoETj2VDlroPUoyHpz2kkNTtwsVZfSHENw0mkD3CGYgEEjR9hmXSgAJeZeEYfNklLElB8J4o1/CQFh+1nH9ucOBAPJISKHawp6x/XMkRi3+pL3U/xEn0q5Be2M7ewxdnnGNtmvNmDryMt7gmry3VND3dx+xBmVLomfBhHMrJAkIW6jqtGDBNfnZHQNbZqxWnfGErovwpKnJaoNxje5S/J5g5c5cLX1K26n9hmW65R8kBRkAIs+gF7urgZ33Uo3eigARNNmuF7nIWsvrkOjd1UETBtY6CS73+IzALcaTDMk/mMnvICAsEhXjaS2dE10dOO2m440Ig4wL2C4v+xVosCNdNBf5KASCKSdmpiswjCVTUed1D25Qzc1NtHznQG3UQ1lg0kGpsIF9nqrIUjWex+VuhDEvXR3iYuHiz3ES8J53FL5LkEQzHOQd+eZybbvZFMi+ScmPaac4xiQLI4WZxgtxHzCrLFP+qo8BhvDcK3lm3mk7RRdDE20o/fHU2OK0rQRrhzhRteSJkRsXwqQmUMAshGTJo4rqu+YlidDiHISqwWnDiyRwMQVMoX2wIEMI+nAyNQtL4wHnhz1IN3k/3oK6zF3mvH9AgAb1ohgtXkoQVhCT5ieuHZIfLucjAFFiNarBgjeu8OzcZ6G0oFJsrt9KdR7ZaWsij3CZOckLVpjkZV+krCvmFpcS+qs0medAuGIgrVp4UI0Wq1S5RaJamzyx9bkUQ8Omln3Z/85Ls8XC/UdRan0f/tKSEKUDKsmT7Hx6N/SPJ5SgAAAAAAElFTkSuQmCC") 0 0 / 120px, radial-gradient(120% 80% at 50% 0, rgba(255, 255, 255, .04), transparent 62%), var(--black); }
/* no grain on page heroes: a full-bleed background image there becomes the page's largest paint */
.page-hero.dark { background: radial-gradient(120% 80% at 50% 0, rgba(255, 255, 255, .04), transparent 62%), var(--black); }
.dark { color: var(--bone); }
.dark .label { color: var(--copper); }
.dark p { color: rgba(237, 237, 237, .86); }

/* Brand texture. --tile is set by site.js so that a whole number of tiles fits the
   box in both directions; without script, "round" stretches tiles slightly to fit. */
[data-snap] { position: relative; display: grid; align-content: center; }
[data-snap] > * { position: relative; min-width: 0; }
[data-snap]::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/pattern-copper.svg") 0 0 / var(--tile, 200px) var(--tile, 200px) round; opacity: .3; pointer-events: none; }
.pattern[data-snap]::before { opacity: .2; }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-top { position: relative; overflow: hidden; padding-block: clamp(28px, 3vw, 36px) clamp(34px, 3.4vw, 40px); }
/* texture: whole tiles, anchored to the bottom-right corner, ending exactly on the proof strip's rule */
.hero-top::before { content: ""; position: absolute; inset: 0 0 0 42%; background: url("/assets/img/pattern-copper.svg") 100% 100% / var(--tile, 220px) var(--tile, 220px); opacity: .16; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.hero-top > * { position: relative; }
.hero-grid { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
.hero-copy .lede { max-width: 36em; }
.hero-portrait { justify-self: center; width: min(64vw, 260px); }
.hero-portrait.small { width: min(52vw, 220px); }
.hex-frame { position: relative; aspect-ratio: 283 / 434; }
.hex-frame picture { position: absolute; inset: 4.4%; }
.hex-frame picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; -webkit-clip-path: polygon(50% 0, 100% 27.8%, 100% 72.2%, 50% 100%, 0 72.2%, 0 27.8%); clip-path: polygon(50% 0, 100% 27.8%, 100% 72.2%, 50% 100%, 0 72.2%, 0 27.8%); filter: grayscale(.25) contrast(1.03); }
.hex-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* two half outlines, each drawn from the top point down one side to the bottom point; each is about 560 units long */
.hex-line path { fill: none; stroke: var(--copper); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 565; stroke-dashoffset: 0; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .hero-portrait { width: min(100%, 300px, 38vh); justify-self: end; }
  /* on short laptop screens the headline gives way so the credentials strip stays in view */
  .hero h1 { font-size: min(clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem), 9.6vh); }
  .hero-top { padding-top: min(36px, 5vh); }
}
.proof { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--copper); }
.proof li { padding: 18px 12px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.proof li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
.proof strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); line-height: 1; text-transform: uppercase; color: var(--copper); letter-spacing: .02em; }
.proof span { font-family: var(--font-label); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(237, 237, 237, .8); }
@media (min-width: 820px) {
  .proof { grid-template-columns: repeat(4, 1fr); }
  .proof li { padding: 18px 20px 20px 28px; border-left: 1px solid var(--line-dark); }
  .proof li:first-child { border-left: 0; padding-left: 0; }
  .proof li:nth-child(n+3) { border-top: 0; }
}



.page-hero { padding-block: clamp(56px, 9vw, 120px); position: relative; overflow: hidden; }
.page-hero.compact { padding-block: clamp(40px, 6vw, 72px); }
.page-hero::before { content: ""; position: absolute; inset: 0 0 0 55%; background: url("/assets/img/pattern-copper.svg") 100% 100% / 220px; opacity: .14; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.page-hero > * { position: relative; }
.about-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 760px) { .about-hero { grid-template-columns: 1fr auto; } .about-hero .hero-portrait.small { width: 240px; } }

/* ---------- steps ---------- */
.steps { list-style: none; display: grid; gap: 0; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-light); }
.steps li { padding: 30px 0; border-bottom: 1px solid var(--line-light); }
.step-num { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--copper-ink); margin-bottom: 16px; }
.steps h3 { margin-bottom: 10px; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-light); }
  .steps li { padding: 36px 32px 40px; border-bottom: 0; border-left: 1px solid var(--line-light); }
  .steps li:first-child { border-left: 0; padding-left: 0; }
  .steps li:last-child { padding-right: 0; }
}

/* ---------- tools strip ---------- */
.tools { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; margin-top: clamp(36px, 5vw, 56px); padding: 0; }
.prose .tools { margin-block: 2em; padding-left: 0; }
.tools li { display: flex; flex-direction: column; gap: 6px; }
.tools svg { width: 38px; height: 38px; margin-bottom: 8px; fill: none; stroke: var(--copper-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tools svg .fill { fill: var(--copper-ink); stroke: none; opacity: .5; }
.tools h3 { font-size: .8125rem; }
.tools p { font-size: .9375rem; color: var(--charcoal); line-height: 1.45; }
@media (min-width: 820px) { .tools { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ---------- cards ---------- */
.cards { display: grid; gap: 20px; margin-top: clamp(28px, 3.6vw, 44px); }
@media (min-width: 760px) { .cards.two { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--line-light); padding: clamp(24px, 3.2vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.section:not(.bone) .card:not(.featured) { background: #fff; }
.card h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: .01em; line-height: 1.05; }
.card-link { text-decoration: none; transition: border-color .4s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.card-link:hover { border-color: var(--copper); transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(25, 25, 25, .45); }
.more { margin-top: auto; padding-top: 10px; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--copper-ink); }
.more::after { content: "\2192"; display: inline-block; margin-left: .7em; transition: transform .45s var(--ease-out); }
.card-link:hover .more::after { transform: translateX(6px); }
.prices { max-width: 940px; margin-inline: auto; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card.featured { background: var(--black); color: var(--bone); border-color: var(--black); box-shadow: 0 30px 60px -36px rgba(25, 25, 25, .7); }
.price-card.featured li { color: rgba(237, 237, 237, .88); }
.amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line-light); }
.featured .amount { border-color: var(--line-dark); }
.amount .num { font-family: var(--font-display); font-size: clamp(3.5rem, 3rem + 2vw, 4.5rem); line-height: .9; color: var(--copper-ink); }
.featured .amount .num { color: var(--copper); }
.amount .per { font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; }
.ticks { list-style: none; display: grid; gap: 10px; margin-bottom: 14px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border: 1px solid var(--copper); transform: rotate(45deg); }
.intro-strip { max-width: 940px; margin: 20px auto 0; padding: clamp(22px, 3vw, 32px) clamp(26px, 4vw, 44px); border: 1px solid var(--line-light); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.intro-strip > div { flex: 1 1 320px; }
.intro-strip h3 { margin-bottom: 8px; }
.intro-strip p { font-size: .9375rem; color: var(--charcoal); }

/* ---------- testimonials ---------- */
.quotes { display: grid; gap: 20px; margin-top: clamp(26px, 3.2vw, 38px); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quote { border: 1px solid var(--line-dark); background: var(--black); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; transition: border-color .4s var(--ease-out); }
.quote:hover { border-color: var(--copper); }
.quote blockquote { font-size: 1.0625rem; line-height: 1.65; }
.quote blockquote::before { content: "\201C"; display: block; font-family: var(--font-body); font-weight: 700; font-size: 3.25rem; line-height: .8; height: 30px; color: var(--copper); margin-bottom: 6px; }
.quote figcaption { margin-top: auto; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }

/* ---------- about teaser ---------- */
.about-teaser { display: grid; gap: 28px; }
@media (min-width: 820px) { .about-teaser { grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; } }
.about-teaser .text-link { display: inline-block; margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq { margin-top: clamp(26px, 3.6vw, 40px); display: grid; gap: 0 clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; } }
.faq-col { border-top: 1px solid var(--line-light); }
@media (max-width: 899px) { .faq-col + .faq-col { border-top: 0; } }
.faq details { border-bottom: 1px solid var(--line-light); interpolate-size: allow-keywords; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; transition: color .3s; }
.faq summary:hover { color: var(--copper-ink); }
.faq summary::-webkit-details-marker { display: none; }
/* plus that turns into a minus */
.faq summary::after { content: ""; flex: none; width: 15px; height: 15px; background: linear-gradient(var(--copper-ink), var(--copper-ink)) 50% 50% / 100% 1.5px no-repeat, linear-gradient(var(--copper-ink), var(--copper-ink)) 50% 50% / 1.5px 100% no-repeat; transition: transform .5s var(--ease-out), background-size .5s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }
.faq details p { padding: 0 44px 24px 0; }
.faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .5s var(--ease-out), opacity .4s, content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq a, .prose a { color: var(--copper-ink); text-underline-offset: 3px; }

/* ---------- prose pages ---------- */
.prose { max-width: calc(760px + 2 * var(--gutter)); }
.prose h2 { font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem); margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p, .prose h2 + ul { margin-top: 18px; }
.prose ul { margin-top: 1em; }
.prose ul:not(.ticks):not(.tools) { padding-left: 1.2em; display: grid; gap: 8px; }
.prose ul:not(.ticks):not(.tools) li::marker { color: var(--copper); }
.prose .ticks { gap: 14px; }
.pull { margin-top: 2.4em; padding: 6px 0 6px 28px; border-left: 2px solid var(--copper); }
.pull p { font-size: 1.25rem; line-height: 1.5; }
.pull footer { margin-top: 14px; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); }

/* ---------- CTA band ---------- */
.cta-band { padding-block: 0; }
.wrap.cta-panel { width: min(100% - 2 * var(--gutter), 720px); margin-block: clamp(36px, 4.4vw, 56px); padding: clamp(28px, 4vw, 44px) clamp(22px, 5vw, 56px); background: var(--black); border: 1px solid var(--copper); outline: 8px solid var(--black); }
.cta-mark { width: 54px; margin: 0 auto 20px; }

/* ---------- booking ---------- */
.book-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.book-tabs a { font-family: var(--font-label); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 13px 18px; border: 1px solid var(--line-dark); transition: color .3s, border-color .3s, background-color .3s; }
.book-tabs a:hover { border-color: var(--copper); color: var(--copper-light); }
.book-tabs a[aria-current="page"] { background: var(--copper); border-color: var(--copper); color: var(--black); }
.scheduler { background: #fff; border: 1px solid var(--line-light); }
.scheduler iframe { width: 100%; height: 1000px; border: 0; }
.scheduler + p { margin-top: 18px; }
.next { margin-top: 28px; padding-left: 1.3em; display: grid; gap: 14px; }
.next li::marker { color: var(--copper-ink); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { color: rgba(237, 237, 237, .8); border-top: 1px solid var(--line-dark); font-size: .9375rem; }
.footer-inner { display: grid; gap: 32px; padding-block: 44px 28px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; } }
.footer-brand { display: flex; gap: 20px; align-items: flex-start; max-width: 380px; }
.footer-brand img { width: 46px; flex: none; }
.footer-brand .label { color: var(--bone); }
.footer-nav { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.footer-nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(var(--copper), var(--copper)) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .45s var(--ease-out), color .3s; }
.footer-nav a:hover { color: var(--copper-light); background-size: 100% 1px; }
.footer-legal p { padding-block: 20px 28px; border-top: 1px solid var(--line-dark); font-size: .8125rem; color: rgba(237, 237, 237, .6); }

/* ---------- rating climb ---------- */
.climb-head { max-width: calc(940px + 2 * var(--gutter)); margin-left: max(0px, (100% - var(--wrap) - 2 * var(--gutter)) / 2); margin-bottom: clamp(22px, 3vw, 36px); }
.climb-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .climb-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); } }
.climb-stat { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.climb-stat .num { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 4vw, 6rem); line-height: .82; color: var(--copper); font-variant-numeric: tabular-nums; }
.climb-stat .per { font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; line-height: 1.7; text-transform: uppercase; color: rgba(237, 237, 237, .8); transition: opacity .9s ease; }
.climb-stat .per strong { display: block; margin-bottom: 5px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); letter-spacing: .03em; line-height: 1; color: var(--copper); }
.climb-stat .per strong, .climb-stat .num { font-variant-numeric: tabular-nums lining-nums; }
/* while the chart is drawing, the title line shows each event's rating change: copper for a gain, grey for a loss */
.climb-stat .per strong.down { color: rgba(237, 237, 237, .55); }
.climb { min-width: 0; }
.climb-svg { width: 100%; height: auto; overflow: visible; }
.climb-svg.wide { display: none; }
@media (min-width: 620px) { .climb-svg.wide { display: block; } .climb-svg.narrow { display: none; } }
.climb-svg text { font-family: var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.climb-svg .grid { stroke: rgba(237, 237, 237, .12); stroke-width: 1; }
.climb-svg .tick { fill: rgba(237, 237, 237, .62); }
.climb-svg .master { stroke: var(--copper); stroke-width: 1; stroke-dasharray: 2 6; }
.climb-svg .master-label { fill: var(--copper); letter-spacing: .18em; }
.climb-svg .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.climb-svg .before { stroke: rgba(237, 237, 237, .4); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.climb-svg .climb-line { stroke: var(--copper); stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.climb-svg .pt circle { fill: var(--copper); }
.climb-svg .pt-start circle { fill: var(--black); stroke: var(--bone); stroke-width: 2; }
.climb-svg .pt .ring { fill: none; stroke: var(--copper); stroke-width: 1.5; }
.climb-svg .pt text { fill: var(--bone); }
.climb-svg .pt-first circle { fill: rgba(237, 237, 237, .6); }
.climb-svg .pt-first text, .climb-svg .pt-plateau text { fill: rgba(237, 237, 237, .7); }
.climb-svg .bracket { fill: none; stroke: rgba(237, 237, 237, .4); stroke-width: 1; }
.climb-svg .pt .nm { fill: var(--copper); letter-spacing: .18em; }
/* labels that belong to one view only: site.js sets --k from 0 (full history) to 1 (zoomed on the climb) */
.climb-svg .f { opacity: calc(1 - var(--k, 0) * 2.5); }
.climb-svg .z { opacity: calc(var(--k, 0) * 2.5 - 1.5); }
/* the switch keeps its place from the start, so nothing moves when it appears at the end of the animation */
.climb-views { display: flex; gap: 26px; margin-top: 6px; }
.climb.anim:not(.s3) .climb-views { visibility: hidden; }
.climb.anim.s3 .climb-views { animation: fade .9s ease .9s both; }
.climb-views button { min-height: 44px; padding: 6px 0 0; border: 0; background: linear-gradient(var(--copper), var(--copper)) 0 calc(100% - 8px) / 0 1px no-repeat; cursor: pointer; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(237, 237, 237, .6); transition: color .3s, background-size .45s var(--ease-out); }
.climb-views button:hover { color: var(--bone); }
.climb-views button[aria-pressed="true"] { color: var(--copper); background-size: 100% 1px; }
.climb figcaption { margin-top: 14px; font-size: .8125rem; line-height: 1.5; color: rgba(237, 237, 237, .6); }
.climb-card { margin-block: 2em; padding: clamp(18px, 3vw, 32px); background: var(--black); border: 1px solid var(--copper); }

/* ---------- a lesson in one position ---------- */
/* first section under the hero: less space above, so its title shows on a laptop screen without scrolling */
#position { padding-top: clamp(28px, 2.4vw, 34px); }
/* between the eyebrow and the title: a line that draws downward and ends in an arrowhead */
/* the link is 44px wide so it is easy to hit; the line and arrowhead are drawn by the span inside it
   (the animation clips what it draws, and a clipped link could not be clicked) */
.cue { display: block; width: 44px; margin: 6px auto 0; }
.cue span { position: relative; display: block; width: 11px; height: 24px; margin: 0 auto; background: linear-gradient(var(--copper-ink), var(--copper-ink)) 50% 0 / 1px calc(100% - 2px) no-repeat; animation: cue 2.6s var(--ease-in-out) 1.2s infinite both; }
.cue span::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; border-right: 1px solid var(--copper-ink); border-bottom: 1px solid var(--copper-ink); transform: rotate(45deg); }
.cue + h2 { margin-top: 6px; }
@keyframes cue { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 50%, 78% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0); opacity: 0; } }
.lesson { display: grid; gap: clamp(28px, 5vw, 72px); margin-top: clamp(28px, 3.6vw, 44px); align-items: center; }
@media (min-width: 960px) { .lesson { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.lesson-board { width: 100%; max-width: 480px; margin-inline: auto; }
.board { width: 100%; height: auto; }
.board .coord { font-family: var(--font-label); fill: var(--charcoal); }
.lesson-board figcaption, .mini-board figcaption, .photo figcaption { margin-top: 10px; font-family: var(--font-label); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--charcoal); }
.lesson-board figcaption { text-align: center; font-size: .6875rem; }
.climb-copy .text-link { display: inline-block; margin-top: 26px; color: var(--bone); }
.climb-copy .text-link:hover { color: var(--copper-light); }

/* ---------- how I coach: two principles and the lesson timeline ---------- */
.principles { display: grid; gap: 26px; margin-top: clamp(28px, 3.6vw, 44px); }
.principles h3 { margin-bottom: 10px; color: var(--copper-ink); }
@media (min-width: 820px) { .principles { grid-template-columns: 1.35fr 1fr; gap: 56px; } }
.timeline { display: grid; gap: 30px 0; margin-top: clamp(32px, 4vw, 52px); }
.timeline .step-num { font-family: var(--font-display); line-height: 1; color: var(--copper-ink); }
.tl-when { font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 4px; }
.tl-item h3 { margin-bottom: 8px; }
.tl-item p:last-child { font-size: .9375rem; line-height: 1.55; color: var(--charcoal); margin-top: 0; }
/* the cycle sits in a copper frame with its label set into the top edge */
.tl-loop { position: relative; border: 1px solid var(--copper-ink); padding: 34px 22px 24px; }
.tl-loop-label { position: absolute; top: 0; left: 14px; transform: translateY(-50%); margin: 0; padding: 0 10px; background: var(--bone); font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--ink); }
.tl-cycle { list-style: none; display: grid; gap: 26px; }
.tl-cycle .tl-item { position: relative; }
@media (max-width: 899px) {
  /* phones: numeral beside the text, to keep the list short */
  .tl-item { display: grid; grid-template-columns: 62px 1fr; column-gap: 16px; }
  .tl-item .step-num { grid-row: 1 / span 3; margin-bottom: 0; }
  .tl-item > :not(.step-num) { grid-column: 2; }
}
@media (min-width: 900px) {
  .timeline { grid-template-columns: minmax(0, 1fr) minmax(0, 3.1fr); align-items: stretch; }
  .tl-start { position: relative; padding: 34px 44px 24px 0; }
  /* arrows: from the opening step into the cycle, and between the steps of the cycle */
  .tl-start::after, .tl-cycle .tl-item + .tl-item::before { content: "\2192"; position: absolute; top: 25px; font-size: 1.25rem; line-height: 1; color: var(--copper-ink); }
  .tl-start::after { right: 12px; top: 59px; }
  .tl-cycle .tl-item + .tl-item::before { left: -30px; }
  .tl-loop { padding: 34px 32px 24px; }
  .tl-cycle { grid-template-columns: repeat(3, 1fr); gap: 44px; }
}

/* playable board (src/js/puzzle.js) */
.puzzle-side h3 { margin-bottom: 14px; }
.puzzle-ui { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.puzzle-status { min-height: 3.3em; font-weight: 700; }
.puzzle-ui.is-over .puzzle-status { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.puzzle-end { scroll-margin-block: calc(var(--header-h) + 16px) 24px; }
.puzzle-count { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.puzzle-count-text { flex: none; min-width: 11.5em; }
/* 50-move gauge: five blocks of ten moves; the fill turns red for the last ten */
.puzzle-bar { position: relative; flex: 1; height: 10px; background: rgba(25, 25, 25, .1); box-shadow: inset 0 0 0 1px rgba(25, 25, 25, .16); overflow: hidden; }
.puzzle-bar span { display: block; height: 100%; background: var(--copper-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out), background-color .4s; }
.puzzle-bar.late span { background: #a3271c; }
.puzzle-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), var(--paper) calc(20% - 2px) 20%); background-size: calc(100% + 2px) 100%; }
.puzzle-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
button.btn { cursor: pointer; background: none; font-family: var(--font-label); }
button.btn-solid { background: var(--copper); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .6875rem; --chk: 22px; }
.btn:disabled { opacity: .4; pointer-events: none; }
.puzzle-end { margin-top: 26px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--copper); background: #fff; }
.puzzle-end h3 { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: .01em; line-height: 1.1; margin-bottom: 10px; }
.puzzle-end .cta-row { margin-top: 20px; }
.is-live .board { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.is-live .sq { cursor: pointer; outline: none; }
.is-live.is-over .sq { cursor: default; }
.is-live .sq.own { cursor: grab; touch-action: none; }
.is-live.is-dragging .sq { cursor: grabbing; }
.lesson-board .board > .pc.drag { transition: none; }
.sq.over { fill: rgba(133, 88, 42, .3); }
.sq.sel { fill: rgba(133, 88, 42, .38); }
.sq.mated { fill: rgba(133, 88, 42, .55); }
.sq:focus-visible { stroke: var(--copper-ink); stroke-width: 6; stroke-dasharray: none; }
.puzzle-dots circle { fill: rgba(25, 25, 25, .26); }
.pc.gone { opacity: 0; }
.pc.spent { opacity: .82; }
/* a refused second rook move: red square, red glow, quick shake ("translate" leaves the piece's own transform alone) */
.sq.deny { fill: rgba(196, 44, 32, .5); }
.pc.deny { filter: drop-shadow(0 0 14px rgba(196, 44, 32, .95)); animation: deny .42s linear; }
@keyframes deny { 0%, 100% { translate: 0 0; } 15% { translate: -12px 0; } 35% { translate: 11px 0; } 55% { translate: -8px 0; } 75% { translate: 5px 0; } 90% { translate: -2px 0; } }
/* threefold repetition counter: data-n = times the current position has occurred (1 to 3).
   It keeps its space but shows only from the second occurrence, in red. */
.puzzle-repeat { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: #a3271c; font-weight: 700; font-variant-numeric: tabular-nums; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.puzzle-repeat[data-n="2"], .puzzle-repeat[data-n="3"] { visibility: visible; opacity: 1; transition: opacity .3s; }
.pips { display: flex; gap: 11px; padding-inline: 3px; }
.pips i { width: 12px; height: 12px; border: 1.5px solid #a3271c; transform: rotate(45deg); }
.pips i:first-child, .pips i:nth-child(2), .puzzle-repeat[data-n="3"] .pips i { background: #a3271c; }
.puzzle-repeat[data-n="2"] .pips i:nth-child(2), .puzzle-repeat[data-n="3"] .pips i:last-child { animation: pip .6s var(--ease-out); }
@keyframes pip { from { transform: rotate(45deg) scale(2.1); } }
/* hint: a small label with a rule running out from it, then the sentence in plain body type */
.puzzle-hint { margin-top: 22px; font-size: .9375rem; animation: rise .7s var(--ease-out) both; }
.hint-label { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--copper-ink); }
.hint-label::after { content: ""; flex: 1; height: 1px; background: var(--line-light); }
[hidden] { display: none !important; }

/* result popup */
.puzzle-modal { width: min(calc(100vw - 32px), 560px); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(34px, 6vw, 52px) clamp(22px, 5vw, 48px) clamp(26px, 4vw, 36px); border: 1px solid var(--copper); outline: 8px solid var(--black); text-align: center; overflow: auto; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); }
.puzzle-modal::backdrop { background: rgba(25, 25, 25, .74); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.puzzle-modal[open] { animation: modal-in .7s var(--ease-out) both; }
.puzzle-modal[open]::backdrop { animation: fade .5s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(28px) scale(.96); } }
.puzzle-modal h2 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3rem); }
.puzzle-modal h2 + p { margin-top: 16px; }
.puzzle-modal .puzzle-hint { text-align: left; color: var(--bone); }
.puzzle-modal .hint-label { color: var(--copper); }
.puzzle-modal .hint-label::after { background: var(--line-dark); }
.puzzle-modal h2:focus { outline: none; }
.puzzle-modal .cta-row { margin-top: 26px; }
.modal-mark { width: 54px; margin: 0 auto 18px; }

/* close: an X in a small hexagon, the shape of the portrait frame and the step numerals */
.modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.modal-close svg { width: 30px; height: 33px; overflow: visible; }
.modal-close .hex { fill: transparent; stroke: var(--copper); stroke-width: 1.3; transition: fill .35s var(--ease-out); }
.modal-close .x { fill: none; stroke: var(--bone); stroke-width: 1.7; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s var(--ease-out), stroke .35s; }
.modal-close:hover .hex { fill: var(--copper); }
.modal-close:hover .x { stroke: var(--black); transform: rotate(90deg); }
.modal-link { display: inline-block; margin-top: 20px; padding: 10px 6px; border: 0; background: none; cursor: pointer; font-family: var(--font-label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: rgba(237, 237, 237, .8); transition: color .3s; }
.modal-link:hover { color: var(--copper-light); }
.is-live .lesson-board figcaption, .is-live figcaption { display: none; }

/* ---------- photographs ---------- */
.photo { position: relative; isolation: isolate; }
.photo picture { display: block; position: relative; }
.photo picture::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--copper); z-index: -1; }
.photo img { width: 100%; filter: grayscale(.2) contrast(1.03); }
.photo figcaption { margin-top: 24px; }
.about-teaser .photo { margin-top: 26px; max-width: 320px; }
.photo-pair { display: grid; gap: 36px; margin-block: 1.8em 2.4em; padding-right: 12px; align-items: start; }
@media (min-width: 760px) { .photo-pair { grid-template-columns: .81fr 1.338fr; gap: 40px; } }

/* knight mark built from its facets */
.knight { width: 100%; height: auto; overflow: visible; }
.knight path { fill: var(--copper); }

/* ---------- brand shapes ---------- */
/* diamond rule under centred section headings */
.center.narrow h2::after { content: ""; display: block; width: 150px; height: 11px; margin: 18px auto 0; background: url("/assets/img/rule-diamond.svg") center / contain no-repeat; }
/* hexagon numerals */
.steps .step-num, .timeline .step-num { display: grid; place-items: center; width: 62px; height: 70px; padding-top: 3px; font-size: 1.75rem; letter-spacing: .02em; background: url("/assets/img/hex-num.svg") center / contain no-repeat; margin-bottom: 20px; }
/* the notched tab from the stream overlay: the light section above keys into the dark one */
.notch { position: relative; }
.notch::after { content: ""; position: absolute; top: -1px; left: 50%; width: min(44%, 400px); height: 15px; transform: translateX(-50%); background: var(--paper); -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 15px 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 15px 100%); z-index: 1; }
.notch.on-bone::after { background: var(--bone); }
/* seal on the portrait */
.seal { position: absolute; left: -9%; bottom: 7%; width: 37%; aspect-ratio: 1; }
.seal-text { width: 100%; height: 100%; animation: seal-turn 70s linear infinite; }
.seal-mark { position: absolute; left: 50%; top: 50%; width: 24%; transform: translate(-50%, -50%); }
@keyframes seal-turn { to { transform: rotate(360deg); } }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer nav, .cta-band, .cue, .climb-views, .progress, .scheduler, .book-tabs, .seal, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .dark, .bone, .site-footer, .card, .price-card.featured { background: #fff !important; color: #000 !important; }
  .dark p, .featured li, .proof span, .climb-stat .per, .climb figcaption { color: #000 !important; }
  .section { padding-block: 22pt; }
  .hero-top::before, .page-hero::before, [data-snap]::before, .notch::after { display: none; }
  .climb-svg text { fill: #000 !important; }
  .climb-svg .before { stroke: #777; }
  .card, .quote, .steps li, .faq details, figure { break-inside: avoid; }
  .faq details::details-content { block-size: auto; opacity: 1; content-visibility: visible; }
  a { text-decoration: none; }
}

/* ---------- typography details ---------- */
p, li, figcaption { text-wrap: pretty; }
.amount .num, .btn .price, .climb-stat .num, .step-num { font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 479px) { h1 { font-size: clamp(2.5rem, 12vw, 2.9rem); } h2 { font-size: clamp(1.9rem, 9vw, 2.2rem); } }

/* lead testimonial */
@media (min-width: 760px) {
  .quotes { grid-template-columns: repeat(6, 1fr); }
  .quote { grid-column: span 2; }
  .quotes .quote:first-child { grid-column: 1 / -1; padding: clamp(30px, 3.6vw, 44px) clamp(36px, 7vw, 96px); text-align: center; align-items: center; }
  .quotes .quote:first-child blockquote { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.5; max-width: 34em; }
  .quotes .quote:first-child blockquote::before { margin-inline: auto; margin-bottom: 14px; }
}
@media (min-width: 760px) and (max-width: 1019px) { .quote { grid-column: span 3; } .quotes .quote:last-child { grid-column: 1 / -1; } }

/* ---------- draft markers (must be gone before release) ---------- */
mark.todo { background: #ffe9a8; color: #4a3500; padding: 1px 6px; font: 400 .8125rem/1.5 var(--font-body); letter-spacing: 0; text-transform: none; border: 1px dashed #b98900; }

/* =====================================================================
   Motion
   ===================================================================== */

/* Page-to-page: the header holds still while the page cross-fades and settles. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
::view-transition-group(site-header) { z-index: 5; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Opening sequence for the top of every page. Pure CSS, so it runs before any script. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes track-in { from { opacity: 0; letter-spacing: .6em; } }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); transform: translateY(.28em); } to { clip-path: inset(-10% 0 -10% 0); transform: none; } }
@keyframes draw { from { stroke-dashoffset: 565; } }
@keyframes portrait-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes rule-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes texture-in { from { opacity: 0; } }

.hero .label, .page-hero .label { animation: track-in 1.2s var(--ease-out) .15s both; }
.hero h1, .page-hero h1 { animation: unveil 1.1s var(--ease-out) .25s both; }
.hero .lede, .page-hero .lede { animation: rise 1s var(--ease-out) .5s both; }
.hero .cta-row, .page-hero .cta-row, .page-hero .book-tabs { animation: rise 1s var(--ease-out) .65s both; }
.hex-line path { animation: draw 1.8s var(--ease-in-out) .35s both; }
.hex-frame picture { animation: portrait-in 1.4s var(--ease-out) .7s both; }
.hero-top::before, .page-hero::before { animation: texture-in 2.2s ease .4s both; }
.proof { animation: rule-in 1.3s var(--ease-in-out) .7s both; }
.proof li { animation: rise .9s var(--ease-out) both; }
.proof li:nth-child(1) { animation-delay: .95s; }
.proof li:nth-child(2) { animation-delay: 1.05s; }
.proof li:nth-child(3) { animation-delay: 1.15s; }
.proof li:nth-child(4) { animation-delay: 1.25s; }

.seal { animation: fade 1.2s ease 1.5s both; }

/* Scroll reveals. site.js adds .rv to elements below the fold and .in as they enter. */
.js .rv { opacity: 0; transform: translateY(24px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
/* (no clip-path here: a fully clipped element never registers as visible to the observer) */
.js h2.rv { transform: translateY(.45em); }
.js h2.rv.in { transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .label.rv { transform: none; letter-spacing: .6em; }
.js .label.rv.in { letter-spacing: .26em; transition: opacity 1s, letter-spacing 1.2s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .cta-mark.rv { transform: translateY(14px) scale(.9); }
.js [data-snap]::before { opacity: 0; transition: opacity 1.6s ease; }
.js [data-snap].seen::before { opacity: .3; }
.js .pattern[data-snap].seen::before { opacity: .2; }

/* Signature pieces. site.js adds .drawn to [data-draw] elements when they enter view. */
/* The rating chart is drawn by site.js (section 2b): grey history first, then the copper climb.
   .anim = this chart will be animated; .s1 .s2 .s3 = stages reached, which reveal the labels. */
.climb.anim:not(.drawn) .line { stroke-dashoffset: 1; }
.climb.anim .pt { opacity: 0; transition: opacity .9s ease; }
.climb.anim.s1 .pt-first, .climb.anim.s2 .pt-plateau, .climb.anim.s2 .pt-start, .climb.anim.s3 .pt-master { opacity: 1; }

.lesson-board .board > g { transition: transform .38s var(--ease-out), opacity .3s; }
.js .lesson-board:not(.drawn) .board > .pc { opacity: 0; }
.js .lesson-board.drawn .board > .pc { animation: fade .9s var(--ease-out) .25s both; }
.js .lesson-board.drawn .board > .pc + .pc { animation-delay: .45s; }
.js .lesson-board.drawn .board > .pc + .pc + .pc { animation-delay: .65s; }
.js .lesson-board .board > .pc.gone { animation: none; }

.knight path { transform-box: fill-box; transform-origin: 50% 50%; }
.js .knight path { transition: opacity .7s ease, transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
.js .knight:not(.drawn) path { opacity: 0; transform: translate(var(--kx, 0), var(--ky, 0)) scale(.5); }
.knight path:nth-child(4n+1) { --kx: -34px; --ky: -22px; }
.knight path:nth-child(4n+2) { --kx: 30px; --ky: -30px; }
.knight path:nth-child(4n+3) { --kx: 36px; --ky: 24px; }
.knight path:nth-child(4n) { --kx: -28px; --ky: 34px; }
.knight path:nth-child(1) { --kx: 0px; --ky: 0px; }
.knight path:nth-child(2) { --i: 1; }
.knight path:nth-child(3) { --i: 2; }
.knight path:nth-child(4) { --i: 3; }
.knight path:nth-child(5) { --i: 4; }
.knight path:nth-child(6) { --i: 5; }
.knight path:nth-child(7) { --i: 6; }
.knight path:nth-child(8) { --i: 7; }
.knight path:nth-child(9) { --i: 8; }
.knight path:nth-child(10) { --i: 9; }
.knight path:nth-child(11) { --i: 10; }
.knight path:nth-child(12) { --i: 11; }
.knight path:nth-child(13) { --i: 12; }
.knight path:nth-child(14) { --i: 13; }
.knight path:nth-child(15) { --i: 14; }
.knight path:nth-child(16) { --i: 15; }
.knight path:nth-child(17) { --i: 16; }
.knight path:nth-child(18) { --i: 17; }

/* headings revealed line by line: site.js wraps each rendered line, then restores the plain text */
.ln { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.ln > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--l, 0) * 110ms); }
.lines-in .ln > span { transform: none; }
.js h2.rv.split { opacity: 1; transform: none; }

/* the photo drifts a few pixels inside its frame as the page scrolls */
.js .hex-frame picture { translate: 0 calc(var(--drift, 0) * 1px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js h2.rv, .js .label.rv { opacity: 1; transform: none; letter-spacing: .26em; }
  .js [data-snap]::before { opacity: .3; }
  .js .pattern[data-snap]::before { opacity: .2; }
  .js .lesson-board:not(.drawn) .board > .pc, .js .knight:not(.drawn) path { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}