/* williamtrubridge.com — one stylesheet, every page.
   Type: Work Sans (everything), Mr De Haviland (record numerals),
   Marck Script (the poem and the Peake quote). Three faces, each with one job. */

:root{
  --abyss:#04101a;
  --navy:#16305c;
  --navy-deep:#0e2247;
  --mint:#e1eff2;          /* poem band + footer */
  --pale:#d6e4ef;          /* Peake quote band — a close relative of mint, not a jump */
  --slate:#4a5a63;         /* script text on the pale bands */
  --paper:#ffffff;
  --ink:#2b2b2b;
  --ink-soft:#5c6670;
  --amber:#e5a13b;
  --ct-ink:#0b3a42;      /* contact page: deep ink-teal, sits with the band */
  --ct-mute:#4d6d74;

  --sans:"Work Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script-num:"Mr De Haviland",cursive;
  --script-quote:"Marck Script",cursive;

  --wrap:1180px;
  --col:980px;             /* the inner content column, as on the original */
  --head-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.col{max-width:var(--col);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------------- header ---------------- */
.site-head{
  position:sticky;top:0;z-index:100;background:var(--paper);
  height:var(--head-h);display:flex;align-items:center;
}
.site-head .wrap{
  display:grid;grid-template-columns:auto 1fr auto auto auto;
  align-items:center;gap:0;width:100%;
}
.wordmark{
  font-size:17px;font-weight:200;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  padding-right:56px;               /* keeps the nav off the wordmark */
}
/* the badge now sits wholly inside the bar, filling its height */
.badge-cell{grid-column:5;position:relative;height:var(--head-h);width:72px;margin-left:26px}
.badge{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:66px;height:66px;z-index:110;
  display:grid;place-items:center;text-decoration:none;
}
.badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.badge span{
  position:relative;z-index:1;
  font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--amber);
  white-space:nowrap;                /* free to bleed past the circle */
  transform:translateY(-3px);
}
.badge:hover span{color:#f0b862}

.nav{display:flex;align-items:center;gap:26px;grid-column:3;justify-self:end}
.nav a{
  font-size:16px;font-weight:300;color:var(--ink);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--amber)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}
.social{display:flex;align-items:center;gap:15px;grid-column:4;justify-self:end;padding-left:34px}
.social a{color:var(--ink);display:flex}
.social svg{width:17px;height:17px;fill:currentColor}
.social a:hover{color:var(--amber)}

/* ---------------- hero ---------------- */
/* The hero footage is pinned to the viewport and the page scrolls over it —
   the same parallax the original gets from its fixed page-background video. */
.hero-media{
  position:fixed;inset:0;height:100vh;width:100%;
  z-index:0;overflow:hidden;pointer-events:none;background:#000;
}
.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.12) saturate(1.04);
}
/* holds the cuts between shots together and keeps the type legible */
.hero-media .grade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,16,26,.26) 0%,rgba(4,16,26,0) 26%,rgba(4,16,26,0) 54%,rgba(6,20,32,.52) 100%),
    linear-gradient(0deg,rgba(20,44,74,.13),rgba(20,44,74,.13));
}
/* the CRT scanline screen — fine vertical lines over the footage */
.hero-media .scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.24) 0px, rgba(0,0,0,.24) 1px,
    rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px
  );
  mix-blend-mode:multiply;opacity:.85;
}
.hero{
  position:relative;z-index:1;min-height:711px;
  display:flex;align-items:flex-end;justify-content:center;
  background:transparent;text-align:center;
}
/* every band after the hero is opaque and rides over the pinned footage */
.poem-band,.deep,.quote-band,.mis,.site-foot{position:relative;z-index:1}
.hero-inner{position:relative;z-index:2;padding:0 24px 92px;color:var(--paper);width:100%}
.hero h1{
  margin:0;width:100%;font-weight:200;color:var(--paper);
  font-size:clamp(34px,4.9vw,72px);line-height:1.2;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;
  /* letter-spacing adds a trailing gap after the last glyph; this pulls it back
     so both WILLIAM and TRUBRIDGE optically centre on the same axis */
  text-indent:.2em;
  text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.45);
}
.hero .tagline{
  margin:24px 0 0;font-size:clamp(10px,1.02vw,15px);font-weight:300;
  letter-spacing:.35em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ---------------- poem band ---------------- */
.poem-band{background:var(--mint);text-align:center}
.poem-band .wrap{padding:54px 28px 60px}
.poem{
  margin:0 auto;max-width:560px;
  font-family:var(--script-quote);
  font-size:clamp(16px,1.42vw,21px);line-height:1.5;color:var(--slate);
}

/* ---------------- records + intro ---------------- */
/* the background sits still while the text scrolls over it — the parallax
   the original got from its fixed page-background video */
.deep{
  position:relative;color:var(--paper);
  background-color:var(--navy-deep);
  background-image:url("/assets/hero-poster.jpg");
  background-size:cover;
  background-position:74% center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow:hidden;
}
.deep::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(14,34,71,.97) 0%,rgba(14,34,71,.92) 40%,rgba(14,34,71,.34) 72%,rgba(14,34,71,.12) 100%),
    linear-gradient(180deg,rgba(225,239,242,.16) 0%,rgba(225,239,242,0) 9%);
}
.deep > .col{position:relative;z-index:2;padding:56px 28px 70px}

.records{
  margin:0 0 14px;display:grid;gap:6px;justify-content:start;
  padding-left:215px;
}
.record{display:flex;align-items:baseline;gap:16px}
.record .n{
  font-family:var(--script-num);font-size:24px;line-height:1;
  color:var(--paper);min-width:38px;text-align:right;
}
.record .l{
  font-size:15px;font-weight:300;letter-spacing:.35em;text-transform:uppercase;color:var(--paper);
}
/* the divider that keeps the record counts off the paragraphs below */
.records-rule{
  border:0;height:1px;margin:30px 0 44px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0) 72%);
}

.points{display:grid;gap:34px;max-width:620px;margin:0}
.point{display:grid;grid-template-columns:95px 1fr;gap:0;align-items:start}
.point img{width:62px;height:auto;opacity:.9;justify-self:center}
.point p{margin:0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.94)}
.point strong{font-weight:500;color:var(--paper)}
.point a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);font-weight:500}
.point a:hover{border-bottom-color:var(--amber)}

.btn{
  display:inline-block;margin:18px 0 0 95px;
  padding:12px 28px;border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.06);color:var(--paper);text-decoration:none;
  font-size:15px;font-style:italic;font-weight:300;
}
.btn:hover{background:rgba(255,255,255,.16);border-color:var(--paper)}

/* ---------------- Peake quote band ---------------- */
.quote-band{background:var(--pale);text-align:center}
.quote-band .wrap{padding:60px 28px 64px}
.quote-band blockquote{
  margin:0 auto;max-width:1080px;
  font-family:var(--script-quote);
  font-size:clamp(16px,1.42vw,21px);line-height:1.9;color:var(--slate);
}
.quote-band blockquote .ln{display:block}
@media (min-width:1120px){
  /* each sentence holds its own line, as on the original */
  .quote-band blockquote .ln{white-space:nowrap}
}
.quote-band cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:var(--script-quote);font-size:clamp(15px,1.18vw,17px);color:var(--slate);
}

/* ---------------- MIS band ---------------- */
.mis{position:relative;background:var(--navy);color:var(--paper);overflow:hidden}
.mis img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5}
.mis::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(22,48,92,.88),rgba(14,34,71,.92)),
    linear-gradient(180deg,rgba(214,228,239,.18) 0%,rgba(214,228,239,0) 8%);
}
.mis .col{position:relative;z-index:2;padding:66px 28px 74px}
.mis-lockup{
  display:flex;align-items:center;gap:24px;justify-content:center;
  margin-bottom:44px;flex-wrap:wrap;border-bottom:0!important;text-decoration:none;
}
.mis-lockup img.circle{width:104px;height:104px}
.mis-lockup img.mark{width:min(310px,50vw);height:auto}
.mis p{margin:0 0 22px;font-size:16px;line-height:1.8}
.mis p.em{font-style:italic;color:rgba(255,255,255,.93);padding-left:44px}
.mis a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.mis a:hover{border-bottom-color:var(--amber)}
.mis .sig{width:200px;margin:42px auto 0;opacity:.95}

/* ---------------- footer ---------------- */
.site-foot{background:var(--mint);color:var(--ink);text-align:center}
.site-foot .wrap{padding:26px 28px}
.site-foot p{margin:0;font-size:15px;font-weight:300}
.site-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}
.site-foot a:hover{border-bottom-color:var(--amber)}


@media (max-width:900px){
  .nav{display:none}
  .badge{width:132px;height:132px}
  .site-head .wrap{grid-template-columns:1fr 150px auto}
  .deep::after{background:linear-gradient(180deg,rgba(14,34,71,.94),rgba(14,34,71,.9))}
  .records{padding-left:0}
  .point{grid-template-columns:64px 1fr}
  .point img{width:50px}
  .btn{margin-left:64px}
  .mis p.em{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .deep{background-attachment:scroll}
}


/* ================= inner pages =================
   Rebuilt from measurements taken off the live Wix site (see source/measured/*.md),
   not from screenshots. Geometry is quoted at the 1440/1420 reference viewport.

   The original sets every heading in Marzo, which is a CAPS-ONLY face: lowercase
   source text renders as capitals. Verified in-page ('xxxx' and 'XXXX' measure
   identically). Marzo is licensed to Wix and cannot travel, so Work Sans stands in
   and MUST carry text-transform:uppercase everywhere Marzo was used, with the
   measured tracking. Drop the uppercase and the pages stop looking like the site.

   Content column is 980px centred with 21px of inner padding: text starts at
   x=251 in a 1440 viewport, exactly as measured. Do not reuse .col here — that
   belongs to the approved homepage and must not shift. */

.ipcol{max-width:980px;margin:0 auto;padding:0 21px}
.ipwide{max-width:1240px;margin:0 auto;padding:0 21px}
.ipbleed{max-width:none;margin:0;padding:0}

/* Band photography is its own <img> layer inside the band, sized with
   object-fit:cover, with an optional wash over it and the copy above that.

   Two earlier attempts got this wrong and both are worth remembering. Per-band
   `position:fixed` images all pinned to the same viewport and drew over each
   other. `background-attachment:fixed` is sized against the VIEWPORT, so on a
   band taller than the screen only a strip gets painted and the rest falls
   through to the background colour — a bright band of photograph across an
   otherwise flat section. An image layer cannot do either: it is sized to its
   own band and always covers it.

   Wix parallaxes some of these (the image is position:sticky inside a taller
   clipped row). `.band.px` reproduces the motion with a small transform driven
   by scroll — see the parallax script in build.py — and the layer is 112% tall
   so the travel never exposes an edge. With prefers-reduced-motion the script
   does nothing and the band is simply static. */
.band{position:relative;z-index:1;overflow:hidden;background-color:#0b1526}
.band.tb,.band.gal,.band.lk,.band.ct{background-color:#fff}
.band > .pxwrap{position:absolute;inset:0;overflow:hidden;z-index:0}
/* A band that is NOT parallaxed fills its frame exactly, the way Wix's plain
   cover images do. Only the parallaxed ones get the 12% of slack the scroll
   transform travels through — giving every band that slack silently zoomed and
   side-cropped the static ones. */
/* max-width:none matters: the global img{max-width:100%} was clamping every
   oversized layer back to the band width, so the sideways drift on the x/xy
   bands never actually happened — the image just sat 6% left of centre with a
   bare strip down the right-hand edge. */
.band > .pxwrap > .pxbg{position:absolute;left:0;top:0;width:100%;height:100%;
                        max-width:none;object-fit:cover;object-position:center}
.band.px > .pxwrap > .pxbg{top:-6%;height:112%;will-change:transform}
.band.px > .pxwrap > .pxbg[data-px="y"]{top:-14%;height:128%}
.band.px > .pxwrap > .pxbg[data-px="x"],
.band.px > .pxwrap > .pxbg[data-px="xy"]{left:-6%;width:112%}
/* the wash that reproduces Wix's per-image opacity, over the whole band */
.band > .wash{position:absolute;inset:0;z-index:1}
/* Crops matched to what the original actually shows. Wix reports alignType
   "top" for the sponsors band; the contact band's parallax layer is centred. */
.ct > .pxwrap > .pxbg{object-position:center center}
.band > .ipcol,.band > .ipwide,.band > .ipbleed{position:relative;z-index:2}

/* dark bands — body copy measured at 14px / 1.4px tracking / 22.4px leading / #f8f8f8 */
.band.dark{color:#f8f8f8}
.band.dark p{margin:0 0 22px;font-size:14px;font-weight:200;letter-spacing:.1em;line-height:1.6;color:#f8f8f8}
.band.dark strong,.band.dark b{font-weight:500;color:#fff}
.band.dark a{color:#f8f8f8;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(248,248,248,.45)}
.band.dark a:hover{border-bottom-color:var(--amber)}
.measure{max-width:663px}

/* headings — Work Sans standing in for Marzo, always caps */
.h-sec,.h-page,.h-sub{font-weight:200;text-transform:uppercase;margin:0}
.h-sec{font-size:18px;letter-spacing:.35em;line-height:1.6}      /* 18px / 6.3px */
.h-sec.dark-ink{color:#191919}
.h-sec.light-ink{color:#f8f8f8}
.h-page{font-size:40px;letter-spacing:.15em;line-height:1.4}     /* 40px / 6.0px */

/* ---------- profile ---------- */
.pf-hero{min-height:690px;display:flex;align-items:flex-end}
.pf-hero .ipcol{width:100%;padding-bottom:15px}
.band.dark .pf-name,.band.dark .pf-role{line-height:1.6}
.band.dark .pf-name{margin:0;font-size:14px;font-weight:500;letter-spacing:.1em;line-height:1.6;color:#f8f8f8}
.band.dark .pf-role{margin:0;font-size:14px;font-weight:200;letter-spacing:.1em;line-height:1.6;color:#f8f8f8}

.vitals{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:0}
.vitals li{display:flex;white-space:nowrap;font-size:14px;font-weight:200;letter-spacing:.1em;line-height:1.6;color:#f8f8f8}
.vitals .k{flex:0 0 104px}
.vitals .v{flex:1 1 auto}

/* bio band: copy left, the diver picture on the right half (measured x=717 w=664) */
/* On the original the copy column (x=251, 663 wide) and the portrait (x=717,
   664 wide) OVERLAP by ~197px — the picture is a cut-out and the text simply
   runs short of it. Reproduce that rather than sitting them side by side, or
   the portrait is pushed off the right edge. */
/* the copy used to run under the portrait — it now stops clear of it */
.pf-bio{display:grid;grid-template-columns:466px 664px;align-items:end;
        padding-left:calc((100% - 980px) / 2 + 21px)}
.pf-bio .copy{width:663px;position:relative;z-index:2;align-self:start}
.pf-bio .shot{margin:0 0 -60px;align-self:end;justify-self:start;max-width:664px}
.pf-bio .shot img{width:100%;height:auto;will-change:transform}

/* personal bests + timeline — rebuilt off the live DOM, not estimated.
   The Verhoeven photograph is one long top-to-bottom gradient (sampled off the
   asset at the band's own aspect: luminance 216 at the head, 16 at the foot),
   which is why the original sets PERSONAL BESTS and the two columns in DARK ink
   and the timeline beneath them in LIGHT. No panels, no borders, no scrim.
   Live geometry, viewport 1456, content column x=238, band y2113 h951:
     PERSONAL BESTS  text y2162, box left x412  (content +174)
     DEPTH block     x352 y2216 w406 h90 — FOUR lines: the column name, then one
     POOL  block     x755 y2216 w483 h90   line per record, 14px / 22.4px #191919
     TIMELINE        text y2358, box left x407 (content +169)
     records         x352, one line each, 14px / 22.4px extralight, ls 1.4px
     group bar       x565 w5  border-left rgba(248,248,248,.1), inset ~5px
     connector rule  x568 w179 1px rgba(241,241,241,.1)
     event label     x755 */
.h-centre{text-align:left;width:auto;padding-left:0;margin:0;
          margin-left:calc((100% - 980px) / 2 + 174px)}
.h-sec.tl-head{text-align:left;width:auto;padding-left:0;margin:47px 0 0;
          margin-left:calc((100% - 980px) / 2 + 169px)}

.bests{display:grid;grid-template-columns:403px 1fr;gap:0;width:min(908px,100%);
       margin:30px 0 0;margin-left:calc((100% - 980px) / 2 + 114px)}
.bests h3{margin:0;font-size:14px;font-weight:200;letter-spacing:.1em;
          text-transform:uppercase;line-height:22.4px}
.bests dl{margin:0;display:grid;grid-template-columns:44px auto 1fr;gap:0 18px}
.bests dt{font-size:14px;font-weight:200;letter-spacing:.1em;line-height:22.4px}
.bests dd{margin:0;font-size:14px;font-weight:200;letter-spacing:.02em;line-height:22.4px}
.bests dd.fig{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Dark type on this pale half of the photograph does NOT want a glow: a white
   halo sits between the stroke and the ground and softens the very edge that
   carries the contrast — it reads as blur, not weight. Compared four settings
   at 2x on the render; what it actually wanted was ink and stroke. Work Sans
   ExtraLight is a good deal thinner than the Avenir Light the original sets
   this in, so 400 here is the faithful match, not a heavier choice. */
.bests-band .h-sec.dark-ink,.bests h3,.bests dt,.bests dd{
  color:#101010;font-weight:400;text-shadow:none;
}

.tl{width:min(908px,100%);margin:34px 0 0;
    margin-left:calc((100% - 980px) / 2 + 114px)}
.h-sec.light-ink,.tl .att-head,.tlgrp li,.tlgrp .ev{
  color:#f8f8f8;
  font-weight:300;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35);
}
.tl .att-head{margin:0 0 14px;font-size:12px;font-weight:400;letter-spacing:.30em;
              text-transform:uppercase;color:#f8f8f8;opacity:.72}
.tlgrp{position:relative;display:grid;grid-template-columns:213px 1fr;
       align-items:center;margin-bottom:23px}
/* the bar that spreads down the records belonging to one event */
.tlgrp::before{content:"";position:absolute;left:213px;top:5px;bottom:6px;width:5px;
               background:rgba(248,248,248,.22)}
.tlgrp ol{margin:0;padding:0;list-style:none}
.tlgrp li{font-size:14px;font-weight:300;letter-spacing:.1em;line-height:22.4px;
          white-space:nowrap;font-variant-numeric:tabular-nums}
.tlgrp li .r{margin-left:7px}
.tlgrp li .r::before{content:"\2013\00a0"}
/* the rule from the bar across to the event name */
.tlgrp .ev{position:relative;font-size:14px;font-weight:300;letter-spacing:.1em;
           line-height:22.4px;padding-left:190px}
.tlgrp .ev::before{content:"";position:absolute;left:3px;top:50%;width:179px;height:1px;
                   background:rgba(248,248,248,.20)}
.tlgrp .ev:empty::before{display:none}

/* the page's own video (YouTube), 980x550 in the content column */
.vid{position:relative;max-width:980px;margin:0 auto;aspect-ratio:980/550;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 404 ---------- */
/* .band's own background-color is the deep navy, so this needs its own ground
   or the navy ink lands on navy — which is exactly what the first render did.
   min-height keeps the footer at the foot of the window on a short page. */
.nf-band{background-color:#e1eff2;min-height:calc(100vh - 146px);
         display:flex;align-items:center}
.nf-band > .ipcol{width:100%}
.nf{max-width:760px;margin:0 auto;text-align:center}
.nf .h-page{color:#16305c;margin:0 0 22px}
.nf p{margin:0 0 30px;font-size:15px;font-weight:200;letter-spacing:.02em;
      line-height:1.8;color:#4a5a63}
.nf-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0}
.nf-band .btn-outline{border-color:rgba(22,48,92,.45);color:#16305c;background:transparent}
.nf-band .btn-outline:hover{background:var(--amber);border-color:var(--amber);color:#0e2247}

/* ---------- speaking ---------- */
/* Band 1 on the live page: y65 h739, full bleed, object-fit:cover. Wix serves
   the photograph as a 1245x639 fill rendition — aspect 1.949 against the band's
   1440/739 = 1.949, so it lands edge to edge with no crop and he sits at the
   size the frame gives him. assets/band-testimonials.jpg is that same crop.
   The original carries no vignette and no tinted ground: the quotes are simply
   light type on a dark photograph, and they do overlap his arm. */
.testimonials-band{background-color:#000}
.h-testimonials{margin:0;font-size:46px;font-weight:200;letter-spacing:.25em;text-transform:uppercase;
                line-height:1;color:#636363}
/* Offsets measured from the band's content top (y=101 at a 1420 viewport):
   heading 0, Entrepreneurs 54, High Tower 101, Inspire 346, Attendee 519;
   widths 360 / 350 / 259 / 289, right-hand pair flush to the content column. */
.quad{position:relative;min-height:674px;margin:0}
.quad > div{position:absolute}
.quad .q-head{top:0;left:0;width:auto}
.quad blockquote{margin:0;font-size:12px;font-weight:200;font-style:italic;letter-spacing:.1em;
                 line-height:1.5;color:#f8f8f8;
                 text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.6)}
.quad .who{display:block;margin-top:16px;font-style:italic}
.quad .q-eo{top:54px;right:0;width:360px;text-align:right}
.quad .q-ht{top:101px;left:0;width:350px}
.quad .q-if{top:346px;right:0;width:259px;text-align:right}
.quad .q-at{top:519px;left:0;width:289px}

.intro-row{display:grid;grid-template-columns:125px 1fr;gap:0;align-items:start;padding-left:30px}
.intro-row img{width:93px;height:auto}
.band .intro-row p{margin:0 0 14px}
.talks{
  display:grid;grid-template-columns:412px 367px;column-gap:85px;
  margin-top:56px;padding:34px 36px 40px;
  background:linear-gradient(180deg,rgba(6,15,46,.50),rgba(6,15,46,.38));
  border-top:1px solid rgba(248,248,248,.20);
  border-bottom:1px solid rgba(248,248,248,.20);
}
.talks .talk + .talk{border-left:1px solid rgba(248,248,248,.14);padding-left:42px;margin-left:-42px}
.talk h3{margin:0 0 6px;font-size:20px;font-weight:400;letter-spacing:.21em;text-transform:uppercase;
         text-align:center;color:#f8f8f8;line-height:1.4}
.band .talk .sub{margin:0 0 28px;text-align:center;font-style:italic;font-size:14px;font-weight:200;
           line-height:1.8;color:#f8f8f8;letter-spacing:0}
.band .talk p{margin:0 0 16px;letter-spacing:0;line-height:1.5}
.sp-cta{text-align:center;margin:52px 0 72px}
.band .sp-cta p{margin:0 0 30px 130px;max-width:663px;letter-spacing:0;text-align:left}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:210px;height:52px;padding:0 34px;
  border:1px solid rgba(248,248,248,.55);
  background:rgba(6,15,46,.30);
  color:#f8f8f8;text-decoration:none;
  font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--amber);border-color:var(--amber);color:#0e2247;
}

/* ---------- trublue (white page, black type) ---------- */
.tb{background:#fff;color:#000;position:relative;z-index:1}
.tb .h-page{color:#000;text-align:center;letter-spacing:.15em}
.tb .strap{margin:16px 0 0;text-align:center;font-size:18px;font-weight:200;line-height:1.8;color:#000}
.tb h2{margin:0 0 20px;font-size:22px;font-weight:200;letter-spacing:.15em;text-transform:uppercase;color:#000}
.tb p{margin:0 0 18px;font-size:14px;font-weight:200;letter-spacing:.07em;line-height:1.4;color:#000}
.tb-split{display:grid;align-items:center;gap:0;
          margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.tb-split:first-of-type{margin-top:89px}
/* Both rows share one grid — equal halves, equal frames — so the two sections
   line up down the page instead of drifting. Each photograph is oversized inside
   a clipped frame and scales towards its centre on scroll (data-px="zoom"). */
.tb-split + .tb-split{margin-top:0}
.tb-split.img-left,.tb-split.img-right{grid-template-columns:50% 50%}
.tb-split .shot{margin:0;overflow:hidden;aspect-ratio:710/654}
.tb-split .shot img{width:100%;height:100%;object-fit:cover;display:block;
                    transform:scale(1.18);will-change:transform}
.tb-split .copy{padding:0 60px;max-width:610px}
.tb-split.img-right .copy{justify-self:end}
.tb-split .copy h2{padding-left:0}
.tb .bul{margin:0 0 20px;padding:0;list-style:none}
.tb .bul li{position:relative;padding-left:25px;margin-bottom:6px;font-size:14px;font-weight:200;
            letter-spacing:.07em;line-height:1.4;color:#000}
.tb .bul li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:1px;background:#000}
.tb .tri{margin:0;padding:0;list-style:none}
.tb .tri li{position:relative;padding-left:18px;margin-bottom:6px;font-size:14px;font-weight:200;line-height:1.9}
.tb .tri li::before{content:"\1F53A";position:absolute;left:0;top:0;font-size:11px;line-height:1.9}
.tb a{color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35)}
.tb a:hover{border-bottom-color:var(--amber)}
.tb .lede{font-weight:500;font-style:italic}
.tb-videos{display:grid;grid-template-columns:1fr 1fr;gap:46px 20px;margin:56px auto 0;max-width:980px}
.tb-videos figure{margin:0}
.tb-videos .vidbox{position:relative;aspect-ratio:490/270;background:#000}
.tb-videos iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tb-videos figcaption{margin-top:16px;font-size:14px;font-weight:200;line-height:1.4;color:#000}
.tb-benefactors{margin:104px auto 0;max-width:400px}
.tb-benefactors h2{text-align:center}

/* ---------- sponsors ---------- */
/* The live page is a single photographic band carrying one word. It has no logo
   wall — verified in the rendered DOM and in the Wix page JSON's component tree.
   Do not invent one. Panerai (due Oct 2026) would be a new element, not an edit. */
.sp-band{min-height:926px;display:block}
.sp-band > .pxwrap > .pxbg{object-position:center top}
.sp-band .h-page{color:#f8f8f8;text-align:center;max-width:792px;margin:0}
.sp-band > .ipbleed{min-height:926px;display:flex;flex-direction:column;
                    justify-content:space-between}
.sp-note{margin:0;text-align:center;color:#f8f8f8;font-size:15px;font-weight:200;
         font-style:italic;letter-spacing:.06em;text-shadow:0 1px 5px rgba(0,0,0,.8)}

/* ---------- contact ---------- */
/* The band is the sunlit-sand photograph at 32% over white, so it is very pale.
   The original set the heading and the submit bar in #4793a3, which measured
   1.05:1 against that background — invisible. Everything here sits on a deep
   ink-teal instead: it belongs to the green of the band rather than fighting it,
   and it clears AA comfortably. */
.ct-cols{display:grid;grid-template-columns:1fr 460px;gap:0 110px;align-items:start}
.ct .h-page{
  color:var(--ct-ink);font-weight:300;font-size:38px;letter-spacing:.16em;
  margin:0 0 26px;padding:0;
}
.ct-left .h-page + .ct-list{margin-top:0}

.ct-list{margin:0}
.ct-row{display:grid;grid-template-columns:minmax(0,232px) 1fr;align-items:baseline;
        gap:0 22px;padding:14px 0;border-bottom:1px solid rgba(11,58,66,.14)}
.ct-row:first-child{border-top:1px solid rgba(11,58,66,.14)}
.ct-row .k{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
           color:var(--ct-mute);line-height:1.6}
.ct-row .v{font-size:15px;font-weight:300;letter-spacing:.01em;word-break:break-word}
.ct-row a{color:var(--ct-ink);text-decoration:none;border-bottom:1px solid rgba(11,58,66,.3)}
.ct-row a:hover{border-bottom-color:var(--amber)}

.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form label{display:block;margin-bottom:26px}
.form input,.form textarea{
  width:100%;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(11,58,66,.42);
  padding:4px 2px;font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--ct-ink);transition:border-color .25s ease;
}
.form input{height:44px}
.form textarea{height:132px;resize:vertical;padding-top:12px}
.form input::placeholder,.form textarea::placeholder{
  color:var(--ct-mute);opacity:1;font-weight:300;letter-spacing:.02em;
}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--amber)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button{
  width:100%;height:54px;margin-top:10px;border:0;border-radius:0;cursor:pointer;
  background:var(--ct-ink);color:#fff;font-family:var(--sans);
  font-size:12px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  transition:background .25s ease;
}
.form button:hover,.form button:focus-visible{background:#08282e}
.form-note{margin-top:18px;font-size:14px;font-style:italic;color:var(--ct-ink);
           min-height:1.4em;text-align:center;letter-spacing:.02em}
.form-note.err{color:#9c3320}

/* ---------- gallery ---------- */
/* The live page was a Wix Instagram-feed app, which cannot travel. This is a
   static grid of the most recent posts, read from source/gallery.txt. */
.gal{background:#fff;color:#000;position:relative;z-index:1}
.gal .box{max-width:940px;margin:0 auto;padding:26px 0 34px;text-align:center}
.gal .h-page{color:#000}
.gal-lede{margin:14px 0 0;text-align:center;font-size:14px;font-weight:200;
          letter-spacing:.16em;text-transform:uppercase;color:#5c6670}
/* the column count is set from the number of posts that arrive (see the
   gallery script) so the last row is never left ragged — Behold's free plan
   returns 6, which wants 3 across, not 4 and a gap. */
.gal-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:10px;
          max-width:1180px;margin:34px auto 0}
.gtile{position:relative;display:block;aspect-ratio:1;overflow:hidden;
       background:var(--navy-deep);text-decoration:none;border:0}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;
           transition:transform .5s ease,filter .35s ease}
.gtile:hover img{transform:scale(1.05);filter:brightness(1.06)}
.gtile .cap{
  position:absolute;inset:auto 0 0 0;padding:16px 14px 13px;
  font-size:12px;font-weight:200;line-height:1.45;letter-spacing:.04em;color:#f8f8f8;
  background:linear-gradient(0deg,rgba(6,15,46,.88),rgba(6,15,46,0));
  opacity:0;transition:opacity .3s ease;
}
.gtile:hover .cap,.gtile:focus-visible .cap{opacity:1}
/* before the Instagram connection is live there are no tiles at all — a panel
   stands in rather than a grid of empty squares */
.gal-empty{
  max-width:1180px;margin:34px auto 0;padding:64px 24px;text-align:center;
  border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.02);
}
.gal-empty p{margin:0 0 26px;font-size:14px;font-weight:200;letter-spacing:.05em;color:#5c6670}
.gal-empty .btn-outline{border-color:rgba(0,0,0,.45);background:transparent;color:#000}
.gal-empty .btn-outline:hover{background:var(--amber);border-color:var(--amber);color:#0e2247}
.gtile .kind{
  position:absolute;top:10px;right:11px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#f8f8f8;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.gal-foot{margin:30px 0 0;text-align:center}
.gal-foot a{color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35);
            font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.gal-foot a:hover{border-bottom-color:var(--amber)}
@media (max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- links (link-in-bio; no nav on this page) ---------- */
.lk{background:#fff;color:#000;position:relative;z-index:1;min-height:100vh}
.lk-mark{margin:0;padding:89px 0 0;text-align:center;font-size:56px;font-weight:200;
         letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:#000}
.lk-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:56px 0;
         max-width:1340px;margin:60px auto 0;padding:0 40px}
.lk-tile{width:340px;text-align:center;text-decoration:none;color:#000;display:block}
.lk-tile .art{height:190px;display:flex;align-items:center;justify-content:center}
.lk-tile .art img{max-width:190px;max-height:190px;width:auto;height:auto}
.lk-tile .t{display:block;margin-top:14px;font-family:"Raleway",var(--sans);font-size:20px;
            font-weight:400;line-height:1.4}
.lk-tile .d{display:block;margin-top:8px;font-size:16px;font-weight:200;line-height:1.67;color:#000}
.lk-tile:hover .t{color:var(--amber)}
.lk-foot{margin-top:70px;background:rgba(191,191,191,.8);padding:38px 40px 46px}
.lk-foot .row{display:grid;grid-template-columns:repeat(3,1fr);max-width:1180px;margin:0 auto;gap:20px}
.lk-foot h2{margin:0 0 14px;font-family:"Raleway",var(--sans);font-size:16px;font-weight:400;color:#000}
.lk-foot p{margin:0;font-size:16px;font-weight:200;line-height:2;color:#000}
.lk-foot a{color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.3)}
.lk-foot a:hover{border-bottom-color:var(--amber)}
.lk-social{display:flex;gap:7px}
.lk-social a{border:0;color:#000;display:flex}
.lk-social svg{width:25px;height:25px;fill:currentColor}

/* ---------- inner-page responsive ---------- */
@media (max-width:1100px){
  .pf-bio{grid-template-columns:1fr}
  .pf-bio .shot{margin-top:28px;max-width:664px}
  .tb-split.img-left,.tb-split.img-right{grid-template-columns:1fr}
  .tb-split .shot{order:-1;aspect-ratio:16/10}
  .tb-split .copy{padding:24px 20px 0;max-width:100%}
  .sp-note{font-size:13px}
  .sp-band > .ipbleed{min-height:520px}
  .ct-cols{grid-template-columns:1fr;gap:44px}
  .form .row2{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .quad{position:static;min-height:0;display:grid;gap:34px}
  .quad > div{position:static;width:auto!important;text-align:left!important}
  .talks{grid-template-columns:1fr;gap:44px;padding-left:0}
  .intro-row{padding-left:0}
  .pf-bio{padding-left:0}
  .pf-bio .copy{width:auto}
  .lk-tile{width:100%;max-width:340px}
  .bests{grid-template-columns:1fr;gap:32px}
  .tl{grid-template-columns:1fr}
  .tlgrp{grid-template-columns:1fr}
  .tlgrp .ev{padding-left:0;margin-top:6px}
  .tlgrp .ev::before{display:none}
  .tb-videos{grid-template-columns:1fr}
  .lk-grid{gap:44px;padding:0 20px}
  .lk-foot .row{grid-template-columns:1fr;gap:28px}
  .h-testimonials{font-size:32px}
  .lk-mark{font-size:32px;padding-top:56px}
  .intro-row{grid-template-columns:1fr}
  .intro-row img{margin-bottom:20px}
  .band.px > .pxwrap > .pxbg{transform:none!important}
  .bests,.tl,.h-sec.tl-head,.h-centre{left:0;padding-left:0;max-width:100%;margin-left:0}
  .tlgrp::before{display:none}
  .tb-split:first-of-type{margin-top:40px}
  .tb-split .copy{padding-left:20px!important;padding-right:20px}
  .band .sp-cta p{margin-left:0}
  .sp-band{min-height:520px}
  .sp-band .h-page{max-width:100%}
  .h-page{font-size:28px}
  .form .row2{grid-template-columns:1fr}
}

/* ================= blog + posts (light) ================= */
.light{background:var(--pale);position:relative;z-index:1}
.light .wrap{padding:56px 28px 76px}
.blog-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:0 0 30px;
}
.blog-head h1{margin:0;font-size:20px;font-weight:400;color:var(--pale-ink,#1b3050);letter-spacing:.02em}
.cards{display:grid;gap:26px}
.card{
  display:grid;grid-template-columns:minmax(0,480px) 1fr;
  background:var(--paper);overflow:hidden;text-decoration:none;color:var(--ink);
}
.card:hover{box-shadow:0 6px 26px rgba(14,34,71,.14)}
.card .thumb{aspect-ratio:4/3;background:#dfe7ef;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:30px 34px 34px;display:flex;flex-direction:column;justify-content:center}
.card .meta{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 14px}
.card h2{margin:0 0 12px;font-weight:400;font-size:clamp(22px,2.3vw,29px);color:var(--navy);line-height:1.22}
.card p{margin:0;font-size:16px;color:#4a5560;line-height:1.6}
@media (max-width:860px){.card{grid-template-columns:1fr}}

/* a single post */
.post{background:var(--paper);position:relative;z-index:1}
.post .wrap{max-width:820px;padding:60px 28px 80px}
.post h1{
  margin:0 0 18px;font-weight:300;font-size:clamp(28px,3.6vw,42px);
  color:var(--navy);line-height:1.2;letter-spacing:.01em;
}
.post .byline{
  margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid #e2e8ee;
  font-size:14px;color:var(--ink-soft);
}
.post h2{margin:44px 0 14px;font-weight:500;font-size:20px;color:var(--navy);letter-spacing:.02em}
.post p{margin:0 0 20px;font-size:17px;line-height:1.75;color:#33404b}
.post .dateline{font-size:15px;color:var(--ink-soft);letter-spacing:.06em}
.post blockquote{
  margin:26px 0;padding:4px 0 4px 24px;border-left:2px solid var(--amber);
  font-style:italic;color:#3d4a56;font-size:17px;line-height:1.7;
}
.post blockquote p{margin:0 0 8px;font-size:17px}
.post blockquote p:last-child{margin:0}
.post ul{margin:0 0 22px;padding-left:0;list-style:none}
.post ul li{position:relative;padding-left:20px;margin-bottom:10px;font-size:17px;line-height:1.7;color:#33404b}
.post ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--amber)}
.post .cap{
  margin:0 0 24px;font-size:14px;font-style:italic;color:var(--ink-soft);
  padding-left:14px;border-left:1px solid #dbe3ea;
}
.post .namerow{margin:0 0 22px;font-size:16px;line-height:1.9;color:#3d4a56}
.post a{color:var(--navy);border-bottom:1px solid rgba(22,48,92,.35);text-decoration:none}
.post a:hover{border-bottom-color:var(--amber)}
.post-nav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:52px;padding-top:26px;border-top:1px solid #e2e8ee;font-size:15px;
}
.post-nav a{border-bottom:0;color:var(--navy)}
.post-nav a:hover{color:var(--amber)}

/* In-article photographs. The original places each one at a measured size and
   alignment — full column, centred, flush left, flush right, or bleeding wider
   than the text. Where it sits to one side the copy now WRAPS around it, which
   Wix never did. Sizes and alignments come from source/measured/post-images.json. */
.post figure.shot{margin:30px 0 34px}
.post figure.shot img{width:100%;height:auto;display:block}
.post figure.shot.full{max-width:100%!important}
.post figure.shot.mid{margin-left:auto;margin-right:auto}
.post figure.shot.left{float:left;margin:8px 36px 22px 0;max-width:52%}
.post figure.shot.right{float:right;margin:8px 0 22px 36px;max-width:52%}
.post figure.shot.bleed{
  width:min(938px,calc(100vw - 40px));max-width:none!important;
  margin-left:calc((100% - min(938px,calc(100vw - 40px))) / 2);
}
/* floats must not run past their section */
.post h2,.post .post-nav,.post figure.shot.full,.post figure.shot.bleed{clear:both}
.post .wrap::after{content:"";display:block;clear:both}
@media (max-width:720px){
  .post figure.shot.left,.post figure.shot.right{
    float:none;margin:26px auto 30px;max-width:100%;
  }
}
.post figure.shot figcaption{
  margin-top:10px;font-size:14px;font-style:italic;color:var(--ink-soft);
  padding-left:14px;border-left:1px solid #dbe3ea;
}