/* components.css — the reusable pieces: hero copy, fact list, timeline, FAQ, contact. */

/* --- hero --- */
.kicker{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:var(--s5)}
/* The name sits here now that the H1 is the positioning line. Its own line by design:
   set inline it runs to about 567px against a 480px column and wraps somewhere
   arbitrary. A forced break puts the name first and keeps every keyword. */
.kicker-name{display:block;margin-bottom:var(--s1)}
/* The H1 is the positioning line, not the name. The wordmark now sits in the header, and
   running the same word in the same typeface twice on one screen looked like indecision.
   The name is carried by the header logo's alt text, the page title, the Person schema
   and the opening line of the summary below, so search still binds name to role.
   Sizes are set to the largest value that still breaks in FOUR lines: one step up and
   "leadership." drops to a line of its own. Measured, not estimated. Never Bold here,
   the brand rules bar it, so 500 does the work at this size. */
.hero-tag{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s5);max-width:none}
.proof{font-size:1.3rem;line-height:1.55;color:var(--ink);margin-bottom:var(--s4)}
.proof strong{color:var(--copper);font-weight:600}
.avail{color:var(--ink-2);font-size:1rem;padding-top:var(--s4);border-top:1px solid var(--rule);max-width:52ch}




/* --- summary --- */
.lede{font-size:1.12rem;color:var(--ink);margin-bottom:var(--s5)}
.band p+p{margin-top:var(--s4);color:var(--ink-2)}

/* --- facts --- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s7)}
.facts li{display:flex;flex-direction:column;gap:var(--s2);padding-left:var(--s4);border-left:2px solid var(--copper)}
.fig{font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--copper);line-height:1.15}
.fact-t{color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* --- timeline --- */
.timeline{display:flex;flex-direction:column;gap:var(--s7)}
/* Two explicit columns. Everything on the left goes in .tl-when, everything on the
   right in .tl-what, so adding a line to a role can never shunt content into the
   wrong column. An earlier version relied on child order and broke when one was added. */
.timeline li{display:grid;grid-template-columns:200px 1fr;gap:var(--s6);padding-bottom:var(--s7);border-bottom:1px solid var(--rule)}
.timeline li:last-child{border-bottom:0;padding-bottom:0}
.tl-when{min-width:0}
.tl-what{min-width:0}
.dates{font-family:var(--mono);font-size:.8rem;color:var(--copper);letter-spacing:.03em;margin-bottom:var(--s3)}
.timeline h3{margin-bottom:var(--s3)}
.org{font-size:.85rem;color:var(--ink-2);line-height:1.5}
.tl-what > p:last-child{color:var(--ink-2);font-size:.94rem;margin:0}
.note{margin-top:var(--s6);font-size:.82rem;color:var(--ink-2);font-style:italic}

/* --- qualifications --- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.cols h3{color:var(--copper);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s4)}
.plain li{padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:.94rem}
.plain li:last-child{border-bottom:0}
.clearance{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4);color:var(--ink-2);font-size:.94rem}
.fig-sm{font-family:var(--mono);font-weight:600;color:var(--copper);border:1px solid var(--copper);padding:var(--s1) var(--s3);border-radius:3px;font-size:.85rem}

/* --- faq --- */
.faq h3{margin-top:var(--s6);margin-bottom:var(--s3);color:var(--ink)}
.faq h3:first-child{margin-top:0}
.faq p{color:var(--ink-2)}

/* --- contact --- */
.contact-list{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.contact-list li{display:grid;grid-template-columns:110px 1fr;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--rule);align-items:baseline}
.lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- hero, portrait-led ---------- */

.hero-cta{display:flex;gap:var(--s4);flex-wrap:wrap;margin:var(--s6) 0 var(--s5)}
.hero-cta .btn{font-size:1rem;padding:var(--s4) var(--s6)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--copper);color:var(--bg);font-weight:600;font-size:.92rem;
  padding:var(--s3) var(--s5);border-radius:3px;border:1px solid var(--copper);
  transition:background .18s ease,color .18s ease;min-height:44px;line-height:1.9}
.btn:hover{background:transparent;color:var(--copper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--copper);color:var(--copper)}

/* ---------- full-bleed image bands ----------
   These are the same five banners used on his LinkedIn profile, so the two match.
   The words are already inside each image, which is why nothing is overlaid here. */
/* The five banner images are now clean photographs with no type burnt into them, so the
   headline is real HTML sitting over the picture. That fixes three things at once: the
   words resize and can be read by a screen reader, they can be translated and searched,
   and the mobile crop no longer has to dodge a block of baked-in text. The brand rules
   asked for HTML text rather than text in images from the start. */
.imgband{position:relative;border-bottom:1px solid var(--rule);overflow:hidden;isolation:isolate}
.imgband img{width:100%;height:auto;aspect-ratio:4/1;object-fit:cover;display:block}
/* Scrim, set by measurement rather than eye. Composited the gradient over the real pixels
   of all five frames in the column where the copy sits (4% to 41% of the frame) and took
   the worst pixel in each. At these stops: body text 8.98:1, the copper figures 3.73:1.
   Copper only ever marks the large bold figure inside the headline, which is 22px or more
   and so needs 3:1, not 4.5:1. It passes. Weaken the scrim and it stops passing.

   RESET 3 SEPTEMBER 2026, and the reason matters. The five photographs were badly
   underexposed as delivered: median luminance 14 to 38 out of 255, no highlights above
   163. On a dark page they read as sludge and the client said so. They were re-exposed
   with scripts/brighten_images.py in the brand-website-builder skill.
   Brightening the pixels UNDER the type lowers the contrast ratio, so the old scrim
   (.93/.89/.55 to 68%) stopped passing the moment the new images went in: white held at
   5.38:1 but copper fell to 2.23:1 against a 3:1 floor. These heavier stops put both back
   where they were, while the composited band as a whole still goes from a median of 21 to
   39, because the gain is on the right of the frame where no scrim reaches.
   THE IMAGES AND THIS RULE ARE ONE CHANGE. Ship either alone and the bands fail AA. */
.imgband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,
    rgba(15,20,25,.96) 0%,
    rgba(15,20,25,.94) 32%,
    rgba(15,20,25,.66) 52%,
    rgba(15,20,25,0) 72%)}
.imgband-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.imgband-copy .wrap{width:100%}
/* Kicker set at 1.2rem, which is 19.2px. That is not just a legibility choice: at 600
   weight, 19.2px clears WCAG's large-text threshold of 18.66px, so the contrast bar drops
   from 4.5:1 to 3:1 and copper's measured 3.68:1 over these photographs passes. At the old
   12.8px it did not, which is why this was briefly amber. Bigger type let the brand keep
   its single accent. Do not shrink it below 1.17rem without switching back to amber. */
.imgband-copy .kicker{margin-bottom:var(--s4);font-size:1.2rem;letter-spacing:.14em}
.imgband-head{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;line-height:1.2;
  color:var(--ink);max-width:20ch;margin:0}
.imgband-head strong{color:var(--copper);font-weight:600}


/* Concurrent appointments line — used where one role carried several commands at once.
   Sits between the organisation line and the description. */
.held{font-size:.88rem;color:var(--ink-2);margin-bottom:var(--s3);padding-left:var(--s3);border-left:2px solid var(--copper)}
.held strong{color:var(--ink);font-weight:600}

/* ---------- full-bleed hero ----------
   The photograph fills the first screen. Copy sits in the right half on desktop,
   where the picture is already dark enough for AA contrast without an overlay.
   Edit the height with --hero-h below. svh, not vh, so mobile browser chrome
   does not crop the bottom of the section. */
.hero{position:relative;min-height:var(--hero-h,100svh);display:grid;align-items:center;
  padding-block:var(--s8);border-bottom:1px solid var(--rule);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;display:block}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(15,20,25,0) 40%,
    rgba(15,20,25,.55) 56%,
    rgba(15,20,25,.88) 70%,
    rgba(15,20,25,.96) 82%)}
.hero-inner{width:100%;display:flex;justify-content:flex-end}
.hero-copy{max-width:30rem;position:relative;z-index:1}
/* Measured: the subject's shoulder reaches 70% of the frame, so there is no empty
   space to sit the copy in. The gradient below turns the right of the photograph
   into a readable panel while leaving him fully visible on the left. */
.summary-portrait{margin:0 0 var(--s7);max-width:240px}
.summary-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;
  border-left:3px solid var(--copper)}