/* Shared shell for the BTT interior pages: /about and the /blog articles.
   Deliberately shared so interior pages cannot drift from each other the way
   the original single-page site did. */
/* The palette lives in btt-tokens.json and is emitted into btt-tokens.css,
   which every page loads BEFORE this file and which defines --navy, --green
   and the rest as aliases of the --btt-* tokens. The literals that used to sit
   here were a second copy of the brand, and a second copy is a drift generator:
   scripts/check-tokens.mjs now fails if the website and the app disagree by a
   byte, which only means anything if there is exactly one definition. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--charcoal);
  background:var(--cream);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green)}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* Header */
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:16px 0;position:sticky;top:0;z-index:50}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-family:'Playfair Display',serif;font-size:20px;color:var(--navy);text-decoration:none;font-weight:700}
.wordmark .g{color:var(--green)}
.topbar nav{display:flex;gap:24px;font-size:15px;align-items:center}
.topbar nav a{color:var(--mid);text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--navy)}
.nav-cta{background:var(--green);color:#fff!important;padding:10px 18px;border-radius:7px;font-weight:600}
.nav-cta:hover{background:var(--green-light)}

/* Page hero */
.phero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:66px 0 58px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
.phero h1{font-family:'Playfair Display',serif;font-size:clamp(31px,4.4vw,50px);line-height:1.15;margin-bottom:18px}
.phero p{font-size:17.5px;color:rgba(255,255,255,.78);max-width:660px}
.crumbs{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:18px}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.crumbs a:hover{color:#fff}

section{padding:66px 0}
h2{font-family:'Playfair Display',serif;font-size:clamp(25px,2.9vw,34px);color:var(--navy);margin-bottom:16px}
h3{font-family:'Playfair Display',serif;font-size:21px;color:var(--navy);margin:30px 0 12px}
p{margin-bottom:18px;color:var(--mid)}
.lead{font-size:18.5px;color:var(--charcoal)}
ul,ol{margin:0 0 20px 22px;color:var(--mid)}
li{margin-bottom:9px}
blockquote{border-left:3px solid var(--gold);background:var(--white);padding:22px 26px;
  border-radius:0 12px 12px 0;margin:26px 0;font-family:'Playfair Display',serif;font-size:19px;color:var(--navy)}

.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-weight:600;font-size:15px;
  text-decoration:none;transition:.25s;border:0;cursor:pointer}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 20px rgba(30,107,56,.32)}
.btn-primary:hover{background:var(--green-light);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--navy)}

/* Founder */
.founder{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.founder-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start}
.founder-media{position:relative}
.founder-photo{width:100%;border-radius:16px;overflow:hidden;background:var(--navy);aspect-ratio:1/1}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.founder-banner{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--cream-dark)}
.founder-banner img{width:100%;height:auto}
.founder-banner figcaption{padding:12px 16px;font-size:13px;color:var(--muted)}
.cred-pills{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px}
.cred-pill{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:7px 13px;
  border-radius:99px;background:rgba(30,107,56,.1);color:var(--green);border:1px solid rgba(30,107,56,.28)}
.cred-pill.track{background:rgba(30,107,56,.12);color:var(--green);border:1px solid rgba(30,107,56,.4)}
.cred-pill.next{background:transparent;color:var(--muted);border:1px dashed var(--border);font-weight:600}
.cred-pill.gold{background:rgba(201,168,76,.17);color:#8a6d1c;border-color:rgba(201,168,76,.5)}
.ph-slot{aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;color:var(--muted);font-size:13.5px;background:repeating-linear-gradient(45deg,#eeeee8,#eeeee8 10px,#e6e6df 10px,#e6e6df 20px)}

/* Article */
.article{background:var(--white)}
.article .container{max-width:760px}
.meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13.5px;color:rgba(255,255,255,.6);margin-top:18px}
.meta .chip{background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.45);color:var(--gold);
  padding:5px 12px;border-radius:99px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}

/* Cards + blog index */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:32px}
.card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:28px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(19,30,61,.12)}
.card .kicker{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:10px}
.card h3{margin:0 0 10px;font-size:20px}
.card p{font-size:14.5px;margin-bottom:16px;flex:1}
.card .more{font-weight:600;color:var(--green);font-size:14.5px}
/* A past event carries its cover photograph. The tile is ratio-locked, so the
   card is its full height before the image arrives and the grid does not
   reflow as photographs load. */
.card.has-cover{padding-top:0;overflow:hidden}
.card-cover{display:block;margin:0 -28px 20px;line-height:0;background:var(--cream-dark)}
.card-cover img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.card-recog{font-size:14px;color:var(--navy);background:var(--cream-dark);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;padding:11px 14px;margin-bottom:16px;flex:0 0 auto;line-height:1.55}

.cta-band{background:var(--navy-deep);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.72);max-width:620px;margin:0 auto 24px}
.disclosure{font-size:12px;color:rgba(255,255,255,.42);line-height:1.6;max-width:840px}

footer{background:#080d18;color:rgba(255,255,255,.55);padding:34px 0;font-size:13px}
footer a{color:rgba(255,255,255,.75);text-decoration:underline}

/* ---- Mobile menu ---- */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media(max-width:860px){
  .founder-grid{grid-template-columns:1fr;gap:28px}
  .nav-toggle{display:block}
  .topbar .container{flex-wrap:wrap}
  /* The panel is hidden, NOT the links. Hiding every link left phone visitors
     on an interior page with no way to reach any other page. */
  .topbar nav{display:none;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:10px 0 4px;border-top:1px solid var(--border);margin-top:14px}
  .topbar nav.open{display:flex}
  .topbar nav a{padding:13px 2px;font-size:16px;border-bottom:1px solid var(--border)}
  .topbar nav a:last-child{border-bottom:0}
  .topbar nav .nav-cta{margin-top:12px;text-align:center;padding:14px 18px}
}
@media(max-width:640px){
  section{padding:48px 0}
  .phero{padding:46px 0 42px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Blog: category navigation, featured post, category blocks ---- */
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cat-nav a{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);text-decoration:none;
  padding:9px 16px;border-radius:99px;font-size:14px;transition:.2s}
.cat-nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.cat-nav a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);font-weight:600}
.cat-nav a span{font-size:11.5px;opacity:.7;background:rgba(0,0,0,.2);padding:2px 8px;border-radius:99px}
.cat-nav a[aria-current] span{background:rgba(0,0,0,.14);opacity:.85}

.featured-wrap{background:var(--cream-dark);padding:52px 0}
.featured{display:block;background:var(--navy);color:#fff;border-radius:18px;overflow:hidden;
  text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;
  border-left:4px solid var(--gold)}
.featured:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(19,30,61,.22)}
.featured-body{padding:38px 40px}
.featured .kicker{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
.featured h2{color:#fff;font-size:clamp(24px,2.7vw,33px);margin-bottom:14px}
.featured p{color:rgba(255,255,255,.75);font-size:16.5px;max-width:720px;margin-bottom:18px}
.featured .more{color:var(--gold);font-weight:600;font-size:15px}

.cat-block{padding:56px 0;border-top:1px solid var(--border)}
.cat-block:nth-of-type(even){background:var(--white)}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cat-head h2{margin-bottom:8px}
.cat-blurb{color:var(--mid);max-width:620px;margin:0}
.empty-cat{margin-top:26px;padding:26px;border:1px dashed var(--border);border-radius:12px;
  color:var(--muted);background:var(--white)}

/* In-article related posts */
.related{border-top:1px solid var(--border);margin-top:38px;padding-top:30px}
.related h3{margin-top:0}

@media(max-width:640px){
  .featured-body{padding:28px 24px}
  .cat-head{flex-direction:column;align-items:flex-start}
  .cat-block{padding:44px 0}
}

/* ============================================================================
   ARTICLE TEMPLATE (rebuilt 2026-07-31)
   The page container stays wide; the READING COLUMN is capped at 800px because
   line length, not page width, is what makes long-form text readable.
   ========================================================================== */
.art-wrap{background:var(--white);padding:0 0 70px}
.art-col{max-width:800px;margin:0 auto;padding:0 24px}
.art-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:60px 0 54px}
.art-hero .art-col{max-width:840px}
.art-hero h1{font-family:'Playfair Display',serif;font-size:clamp(30px,4.2vw,46px);line-height:1.18;margin:14px 0 16px}
.art-hero .dek{font-size:18px;color:rgba(255,255,255,.8);margin:0}
.art-figure{margin:0 0 34px;border-radius:0 0 16px 16px;overflow:hidden;background:var(--cream-dark)}
.art-figure img{width:100%;height:auto}
.art-figure figcaption{padding:12px 20px;font-size:13px;color:var(--muted);background:var(--white)}
.art-body{padding-top:44px;font-size:18px;line-height:1.78;color:#2f2f2f}
.art-body p{margin-bottom:24px;color:#2f2f2f;font-size:18px}
.art-body h2{font-size:clamp(23px,2.6vw,30px);margin:44px 0 14px;line-height:1.25}
.art-body h3{font-size:20.5px;margin:34px 0 10px}
.art-body ul,.art-body ol{margin:0 0 26px 24px;font-size:18px;color:#2f2f2f}
.art-body li{margin-bottom:11px}
.art-body blockquote{font-size:20px;margin:32px 0}
.art-body img{border-radius:12px;margin:8px 0 30px}
.art-body a{text-decoration:underline;text-underline-offset:2px}
/* Responsive video: no fixed height, no letterboxing, no overflow. */
.art-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--navy-deep);margin:8px 0 30px}
.art-video iframe,.art-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:38px 0 0;
  padding-top:26px;border-top:1px solid var(--border)}
.art-share span{font-size:13px;color:var(--muted);margin-right:4px}
.art-share a,.art-share button{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:99px;border:1px solid var(--border);background:var(--white);
  color:var(--navy);text-decoration:none;cursor:pointer;transition:.2s}
.art-share a:hover,.art-share button:hover{border-color:var(--navy);transform:translateY(-1px)}
.art-ends{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.art-end{border-radius:14px;padding:26px 24px}
.art-end.join{background:var(--navy);color:#fff}
.art-end.bom{background:var(--cream-dark);border:1px solid var(--border)}
.art-end h4{font-family:'Playfair Display',serif;font-size:19px;margin:0 0 8px;color:inherit}
.art-end.join h4{color:#fff}
.art-end p{font-size:14.5px;margin-bottom:16px}
.art-end.join p{color:rgba(255,255,255,.75)}
.art-end .btn{padding:12px 20px;font-size:14px}
.art-end.join .btn{background:var(--gold);color:var(--navy-deep);box-shadow:none}
.art-end.join .btn:hover{background:#d8b95f}
@media(max-width:720px){
  .art-body{font-size:17px;padding-top:34px}
  .art-body p,.art-body ul,.art-body ol{font-size:17px}
  .art-ends{grid-template-columns:1fr}
}

/* ---- Leadership cards ---- */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:34px}
.lead-p{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.lead-p:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(19,30,61,.13)}
.lead-p .ph{aspect-ratio:1/1;background:var(--navy);overflow:hidden}
.lead-p .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lead-p .bd{padding:24px 24px 26px}
.lead-p h3{margin:0 0 6px;font-size:21px}
.lead-role{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);
  font-weight:700;margin-bottom:14px;line-height:1.5}
.lead-p p{font-size:14.5px;margin-bottom:14px}

/* ---- Gallery ---- */
.gg{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.gg figure{margin:0;border-radius:14px;overflow:hidden;background:var(--white);border:1px solid var(--border)}
.gg figure.wide{grid-column:span 2}
.gg img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gg figcaption{padding:13px 16px;font-size:13.5px;color:var(--mid)}
@media(max-width:700px){.gg figure.wide{grid-column:span 1}}

/* ---- Contact ---- */
.ct-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.ct-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.ct-row .ic{font-size:20px;line-height:1}
.ct-row strong{display:block;font-size:14px;color:var(--navy);margin-bottom:3px}
.ct-row span,.ct-row a{font-size:14.5px;color:var(--mid)}
.ct-box{background:var(--navy);color:#fff;border-radius:16px;padding:32px 30px}
.ct-box h3{color:#fff;margin-top:0}
.ct-box p{color:rgba(255,255,255,.76);font-size:15px}
@media(max-width:860px){.ct-grid{grid-template-columns:1fr;gap:28px}}

/* ---- /join step list ---- */
.join-steps{list-style:none;margin:30px 0 0;padding:0;counter-reset:js}
.join-steps li{counter-increment:js;position:relative;padding:0 0 22px 56px;border-left:2px solid var(--border);margin-left:16px}
.join-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.join-steps li::before{content:counter(js);position:absolute;left:-17px;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.join-steps strong{display:block;font-family:'Playfair Display',serif;font-size:18px;color:var(--navy);margin-bottom:5px}
.join-steps span{display:block;font-size:15px;color:var(--mid);line-height:1.7}

/* ---- Team gallery: event groups ---- */
.gal-group{padding:52px 0;border-top:1px solid var(--border)}
.gal-group:nth-of-type(even){background:var(--white)}
.gal-group-head{max-width:760px}
.gal-group-head h2{margin-bottom:8px}
.gal-group-head p{color:var(--mid);margin:0}
.gg figure.wide{grid-column:span 2}
@media(max-width:700px){.gg figure.wide{grid-column:span 1}}

/* ============================================================================
   BRANDED TEAM CARD: ONE style, homepage through subpages
   ============================================================================
   Ported verbatim from the homepage so a leader card looks identical on /,
   /about and /leadership. Previously the homepage used .lead-card and the
   subpages used a different .lead-p, so the same person rendered in two
   different type sizes and colours depending on the route.
   ========================================================================== */
.lead-card{flex:0 0 300px;background:var(--white);border:1px solid var(--border);border-radius:15px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .3s ease, box-shadow .3s ease}
.lead-card:hover,.lead-card:focus-visible{transform:translateY(-6px);box-shadow:0 18px 40px rgba(19,30,61,.14);outline:none}
.lead-card:focus-visible{border-color:var(--gold)}
.lead-photo{aspect-ratio:1/1;width:100%;background:linear-gradient(150deg,#1c2b52,#17532c);overflow:hidden}
.lead-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.lead-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.lead-name{font-family:'Playfair Display',serif;font-size:20px;color:var(--navy)}
.lead-title{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--green);font-weight:700;line-height:1.5}
.lead-bio{font-size:14px;color:var(--mid);line-height:1.68;flex:1;margin:0}
.lead-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.lead-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:5px 11px;border-radius:99px;background:rgba(30,107,56,.1);color:var(--green);border:1px solid rgba(30,107,56,.28)}

/* ---- Badge tiers ----------------------------------------------------------
   .gold   award received        solid gold    Ring Earner, Watch Earner
   .track  on track, qualified   solid green   Watch Earner Track
   .next   not yet started       dashed grey   Next: Marketing Director
   Promotion is a DATA change: move the string from `pursuing` to `earned` in
   btt-leaders.js and the pill goes green to gold everywhere by itself.
   -------------------------------------------------------------------------- */
.lead-badge.track{background:rgba(30,107,56,.12);color:var(--green);border:1px solid rgba(30,107,56,.4)}
.lead-badge.next{background:transparent;color:var(--muted);border:1px dashed var(--border);font-weight:600}
.lead-badge.gold{background:rgba(201,168,76,.16);color:#8a6d1c;border-color:rgba(201,168,76,.5)}
.lead-card.cta{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);border-color:rgba(255,255,255,.14)}
.lead-card.cta .lead-name{color:#fff}
.lead-card.cta .lead-bio{color:rgba(255,255,255,.72)}
.lead-card.cta .lead-cta{margin-top:10px;display:inline-block;background:var(--gold);color:var(--navy-deep);
  padding:11px 20px;border-radius:8px;font-weight:600;font-size:14px;text-align:center}
.lead-cta-icon{font-size:40px;padding:34px 0 6px;text-align:center}

/* Sliding variant, used on /about. Same card, carried by a CSS marquee. */
.lead-car{position:relative;margin-top:38px;width:100%}
@supports (width: 100dvw){
  .lead-car{width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw)}
}
.lead-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.lead-track{display:flex;gap:22px;padding:6px 24px 10px;width:max-content;
  animation:leadMarquee 32s linear infinite}
@keyframes leadMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lead-car:hover .lead-track,.lead-car:focus-within .lead-track{animation-play-state:paused}

/* Board variant, used on /leadership. Same card, laid out as a grid. */
.lead-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:34px}
.lead-board .lead-card{flex:none}

@media(max-width:640px){
  .lead-card{flex:0 0 78vw}
  .lead-track{gap:16px;animation-duration:26s}
  .lead-board .lead-card{flex:none}
}
@media(prefers-reduced-motion:reduce){
  .lead-track{animation:none}
  .lead-viewport{overflow-x:auto}
}

/* ============================================================================
   FULL FOOTER + NAV LOGO (2026-07-31)
   ============================================================================
   Interior pages shipped a two-line footer stub and a text-only wordmark while
   the homepage had the logo, socials, link columns and MeetZair credit. These
   styles bring the shared shell to parity.
   ========================================================================== */
.wordmark{display:inline-flex;align-items:center;gap:10px}
.wordmark img{width:34px;height:34px;object-fit:contain;flex:0 0 auto}

footer{background:#080d18;color:rgba(255,255,255,.55);padding:52px 0 30px;font-size:13px}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand p{color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.7;margin:14px 0 18px;max-width:330px}
/* The brand mark is a link home, but NOT an underlined one. `footer a` sets
   text-decoration:underline for every anchor down here, which is right for a
   list of text links and wrong for a wordmark: an underline through a logo
   reads as damage, not as a link.

   The affordance is kept another way. It is plainly a logo, the cursor turns
   to a pointer, and it lifts slightly on hover, so it still announces itself
   as clickable. Focus styling is untouched, so keyboard users still get a
   visible ring. */
.footer-logo{min-height:44px;display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;
  font-size:17px;font-weight:700;color:#fff;text-decoration:none;
  transition:opacity .2s,transform .2s;width:max-content}
.footer-logo:hover{opacity:.85;transform:translateY(-1px)}
.footer-logo:focus-visible{outline:2px solid var(--green-light,#2a7d42);outline-offset:4px;border-radius:6px}
.footer-logo img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.footer-logo .gl{color:var(--green-light,#2a7d42)}

.social-row{display:flex;gap:11px;flex-wrap:wrap}
/* 44px is the tapTarget floor declared in btt-tokens.json, whose own comment says
   it is a floor and not a suggestion. These were 36px, which cleared WCAG 2.5.8 AA
   (24x24) but failed our own stricter rule, on every page, for every network. */
.social-row a{width:var(--btt-layout-tapTarget,44px);height:var(--btt-layout-tapTarget,44px);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:.25s}
.social-row a:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px)}
.social-row svg{width:19px;height:19px;fill:rgba(255,255,255,.8)}
.social-row a:hover svg{fill:#fff}

.footer-links h5,.footer-links .footer-heading{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin:0 0 14px;font-weight:700}
.footer-links ul{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:9px}
.footer-links a{color:rgba(255,255,255,.55);text-decoration:none;font-size:13.5px}
.footer-links a:hover{color:#fff}

.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:22px 0 14px;font-size:12.5px}
.powered-by{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:rgba(255,255,255,.45);font-size:12px}
.powered-by strong{font-size:13.5px}
.footer-est{color:rgba(255,255,255,.4)}
footer .disclosure{font-size:11.5px;color:rgba(255,255,255,.38);line-height:1.65;max-width:860px;margin:0}

@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* Tap-target floor on the brand links.
   Measured at 26 to 38px tall across every interior page in the rendered
   crawl. They are wide, so they were never hard to hit with a mouse, but a
   short target is a short target on a phone.
   Appended as ONE rule covering all three selectors rather than editing each
   existing block, so there is a single place this floor is declared. */
.wordmark, .footer-logo, .nav-logo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Digital contact card, /cards/<slug>. Mobile first: this page is opened on a
   phone, from a message or a camera, far more often than on a desktop.

   Secondary text is --mid (#4a4a4a), never --muted (#7a7a6e). --muted measures
   4.19:1 on cream, below AA, and this surface gets read on a phone in a
   hallway. The token is not edited because it is byte-compared against the app
   repo; it is simply not used here.

   Every text colour below is set explicitly on the element that paints it, so
   a base rule elsewhere cannot out-specify a positional one and leave a line
   unreadable while every word is still present.
   -------------------------------------------------------------------------- */
.vc-page { background: var(--cream); }

.vc-hero {
  background: var(--btt-gradient-hero);
  color: var(--white);
  padding: 26px 20px 0;
  text-align: center;
}
.vc-hero-inner { max-width: 560px; margin: 0 auto; padding-bottom: 78px; }

.vc-brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.vc-brand:hover { color: var(--white); }
.vc-brand img { border-radius: 50%; }

.vc-portrait {
  width: 160px; height: 160px; margin: 20px auto 16px;
  border-radius: 50%; overflow: hidden;
  background: var(--navy-deep);
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold), 0 18px 40px rgba(0, 0, 0, .38);
}
.vc-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Executive header hierarchy: category, then name, then role, then company,
   each on its own line.

   The previous single line read "Founder, BTT / Marketing Director", which put
   the organisation acronym directly above the organisation name and separated
   the two halves with a middle dot. That dot reached an iPhone as a corrupted
   glyph. Four short lines cannot wrap through the middle of a word, cannot
   duplicate the company, and need no separator character at all. */
.vc-eyebrow {
  margin: 0 0 9px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.vc-name {
  font-family: var(--btt-font-display);
  /* Bounded so a longer name stays on one or two clean lines at 360px rather
     than breaking mid-word. */
  font-size: clamp(26px, 6.6vw, 36px);
  line-height: 1.14;
  margin: 0 0 10px;
  color: var(--white);
  overflow-wrap: break-word;
}
.vc-title {
  margin: 0 0 3px; font-size: 16px; font-weight: 600;
  color: var(--white); letter-spacing: .01em;
  text-wrap: balance;
}
.vc-org {
  margin: 0; font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .02em;
}

/* A hairline rule between the name block and the actions, so the header reads
   as a formal identity block rather than a stack of text. */
.vc-hero-inner::after {
  content: ""; display: block;
  width: 54px; height: 2px; margin: 16px auto 0;
  background: var(--gold); opacity: .75;
}

/* The action block overlaps the hero, so the primary control sits within reach
   of a thumb without any scrolling on a phone. */
.vc-body {
  max-width: 560px; margin: -60px auto 0; padding: 0 20px 60px;
  position: relative; z-index: 1;
}

.vc-save {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(19, 30, 61, .16);
  display: grid; gap: 10px;
}

.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 13px 20px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; width: 100%;
  transition: transform var(--btt-motion-fast) var(--btt-motion-ease),
              background var(--btt-motion-fast) var(--btt-motion-ease);
}
.vc-btn:hover { transform: translateY(-1px); }
.vc-btn-gold { background: var(--gold); color: #2c2409; }
.vc-btn-gold:hover { background: #d8b95f; }
.vc-btn-ghost { background: var(--white); color: var(--navy); border-color: var(--border); }
.vc-btn-ghost:hover { border-color: var(--navy); }
.vc-btn-sm { min-height: 44px; font-size: 14.5px; padding: 10px 16px; width: auto; }
.vc-btn .vc-act-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.vc-btn .vc-act-ico svg { width: 20px; height: 20px; fill: currentColor; }

/* Says what Save actually does. "Save to Contacts" did not tell a recipient
   that a photo, two numbers, an email and a profile link were about to land in
   their address book. */
.vc-save-help {
  margin: 0; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--mid);
}
.vc-save-note {
  margin: 0; min-height: 18px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--green);
}

.vc-h2 {
  font-family: var(--btt-font-display);
  font-size: 19px; margin: 30px 0 12px; color: var(--navy);
}

/* TWO independent guards against sideways scroll, and each was MEASURED to be
   sufficient on its own: reverting either still passes, reverting both
   reproduces the overflow at 390px and 360px (an action row reaching 398px).

   The cause is a long unbroken value, an email address or a full URL, in a row
   whose track is sized to max-content. minmax(0, 1fr) bounds the track;
   min-width:0 lets the grid item shrink below its min-content width. Both are
   kept because they fail differently: a future layout change that removes the
   explicit track would otherwise silently reintroduce the overflow.

   Declared at the base width, not only in the wide-viewport rule, because the
   overflow only appears on the narrow screens this card is mostly read on. */
.vc-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.vc-act {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  min-height: 60px; padding: 12px 15px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; text-decoration: none; color: var(--navy);
  transition: border-color var(--btt-motion-fast) var(--btt-motion-ease),
              box-shadow var(--btt-motion-fast) var(--btt-motion-ease);
}
.vc-act:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(19, 30, 61, .09); }
.vc-act-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(30, 107, 56, .1); color: var(--green);
}
.vc-act-ico svg { width: 19px; height: 19px; fill: currentColor; }
.vc-act-txt { display: flex; flex-direction: column; min-width: 0; }
.vc-act-label { font-size: 15px; font-weight: 700; color: var(--navy); }
.vc-act-sub {
  font-size: 13.5px; color: var(--mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vc-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vc-social {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; text-decoration: none;
}
.vc-social:hover { border-color: var(--green); }
.vc-social-name { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.vc-social-sub {
  font-size: 12.5px; color: var(--mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A leader's own account is marked, so a team handle can never be mistaken for
   theirs. */
.vc-social.is-personal { border-color: rgba(201, 168, 76, .55); }

.vc-note {
  margin: 0; font-size: 15px; line-height: 1.7; color: var(--charcoal);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}

.vc-qr {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.vc-qr-img { width: 148px; flex: 0 0 148px; }
.vc-qr-img svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.vc-qr-side { flex: 1 1 190px; min-width: 0; }
.vc-qr-side p { margin: 0 0 11px; font-size: 14px; color: var(--mid); }

.vc-join { margin-top: 34px; text-align: center; }
.vc-join p { margin: 0 0 13px; font-size: 15px; color: var(--mid); }

/* Wider viewports get a two-column action grid, but the card itself stays a
   card: this is a business card, not a landing page, and stretching it to a
   desktop content width makes it read as neither. */
@media (min-width: 620px) {
  .vc-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-save { grid-template-columns: 1fr 1fr; align-items: start; }
  .vc-save-help, .vc-save-note { grid-column: 1 / -1; }
}