/* /founders.html: the three co-founders. Markup: scripts/founders-page.mjs.
   Brand tokens only (the generator refuses a hex colour here). Loaded after styles.css.
   Mobile first: one column, a 220px frame above the words; from 720px a 240px
   frame sits left of the words; from 920px it is 340px and stays in view while
   they scroll. */

/* one width for the hero, the founders and the closing band, so their left edges line up */
.container.fd-wrap{max-width:1120px}

/* ---------- hero (.page-hero from styles.css: the wash and the spacing) ---------- */
.fd-hero{padding-bottom:clamp(28px,4vw,44px)}
.fd-hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.02;letter-spacing:-.03em;margin:12px 0 18px;text-wrap:balance}
.fd-hero .lead{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.65;max-width:60ch;text-wrap:pretty}
.fd-hero .breadcrumbs [aria-current]{color:var(--ink-mute)}

/* ---------- a founder ---------- */
.fd-founder{padding:clamp(44px,6.2vw,84px) 0;background:var(--white,white);scroll-margin-top:64px}
.fd-founder.fd-alt{background:var(--bg)}
/* on a phone the frame's offset block reaches 16px below it, so the gap under it is wider */
.fd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}

/* the 4:5 frame, with a soft green block offset behind it; on a phone 220 x 275, so the words start sooner */
.fd-media{position:relative;width:min(100% - 16px,220px)}
.fd-media::before{content:'';position:absolute;inset:16px -16px -16px 16px;border-radius:26px;background:var(--green-tint)}
.fd-photo{position:relative;aspect-ratio:4 / 5;border-radius:22px;overflow:hidden;background:var(--green-tint);
  box-shadow:0 1px 2px rgba(15,26,20,.06),0 30px 60px -34px rgba(14,80,34,.55)}
.fd-photo picture,.fd-photo img{display:block;width:100%;height:100%}
.fd-photo img{object-fit:cover}

/* no photo yet: the initials in a soft green frame, ready to swap for a photo (PHOTO_* in the generator) */
.fd-ph{display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 16%,var(--white,white) 0%,rgba(46,158,58,.07) 62%,rgba(46,158,58,.15) 100%),var(--white,white);
  box-shadow:inset 0 0 0 1px var(--border),0 1px 2px rgba(15,26,20,.05),0 30px 60px -36px rgba(14,80,34,.4)}
.fd-ph::after{content:'';position:absolute;inset:12px;border:1px solid rgba(14,80,34,.08);border-radius:14px;pointer-events:none}
.fd-ph span{font-family:var(--font-display);font-weight:700;font-size:clamp(64px,8vw,96px);line-height:1;letter-spacing:-.02em;
  color:var(--green-deep)}

/* the words */
.fd-body{min-width:0;max-width:660px}
.fd-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1.08;
  letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:balance}
.fd-role{margin:10px 0 0;font-family:var(--font-display);font-weight:600;font-size:12.5px;line-height:1.3;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
/* a founder's own LinkedIn profile: small, under the name and role */
.fd-in{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 13px 6px 10px;border:1px solid var(--border);
  border-radius:999px;background:var(--white,white);font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.3;
  color:var(--green-deep);text-decoration:none;transition:border-color .2s ease,background .2s ease}
.fd-in svg{flex:0 0 auto;width:15px;height:15px}
.fd-in:hover{border-color:var(--green);background:var(--green-tint)}
.fd-in:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.fd-tagline{margin:28px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,1.9vw,22px);line-height:1.4;
  letter-spacing:-.01em;color:var(--ink-soft);max-width:32ch;text-wrap:balance}
.fd-tagline::before{content:'';display:block;width:40px;height:3px;border-radius:3px;background:var(--yellow);margin-bottom:16px}
.fd-text{margin-top:18px}
.fd-text p{margin:0 0 16px;font-size:16.5px;line-height:1.75;color:var(--ink-mute);max-width:62ch;text-wrap:pretty}
.fd-text p:last-child{margin-bottom:0}
.fd-text a{color:var(--green-deep);font-weight:600;text-decoration-color:rgba(46,158,58,.45);text-underline-offset:3px}
.fd-text a:hover{text-decoration-color:currentColor}
/* a hyphenated word never breaks at its hyphen (agri-PV) */
.fd-nw{white-space:nowrap}

/* a tablet: the frame beside the words, not alone above them */
@media (min-width:720px){
  .fd-grid{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:48px;align-items:start}
  .fd-media{width:auto}
}
@media (min-width:920px){
  .fd-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(56px,7vw,96px);align-items:start}
  .fd-media{width:auto;position:sticky;top:104px}
  .fd-body{padding-top:6px}
}

/* ---------- closing band ---------- */
.fd-close{padding:clamp(48px,7vw,88px) 0}
.fd-band{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 48px;
  padding:clamp(28px,4.5vw,52px);border-radius:22px;background:linear-gradient(150deg,var(--green-deep) 0%,var(--green-darker) 100%);
  box-shadow:0 30px 60px -36px rgba(14,80,34,.6)}
.fd-band::before{content:'';position:absolute;top:-170px;left:-120px;width:440px;height:440px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at center,rgba(127,217,138,.14),rgba(127,217,138,0) 62%)}
.fd-band-copy{position:relative;flex:1 1 360px;max-width:500px}
.fd-band h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.025em;
  color:var(--bg);margin:0}
.fd-band p{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.78);text-wrap:pretty}
/* the two buttons side by side, the phone number under them */
.fd-band-actions{position:relative;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:12px 14px}
.fd-band .btn-light{padding:16px 22px}
.fd-band .btn-ghost-light{font-size:16px;padding:14.5px 22px}
.fd-band-phone{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:4px 2px;white-space:nowrap;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--bg)}
.fd-band-phone i{font-size:19px;color:var(--yellow)}
.fd-band-phone:hover{text-decoration:underline;text-underline-offset:3px}
.fd-band-phone:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:6px}

@media (max-width:560px){
  .fd-band-actions{width:100%;grid-template-columns:minmax(0,1fr)}
  .fd-band-phone{justify-self:center}
}