/* =========================================================
   SoveRIN — HERO MASTER SYSTEM v2
   Reference page: What We Do

   GOAL
   - Keep one typographic system across Home / About /
     What We Do / Partnering / Contact.
   - Keep the same upper text axis and vertical rhythm.
   - Do NOT force identical hero widths/heights: copy width is
     page-specific because title/body lengths differ.
   - What We Do remains the reference and is not repositioned.
   ========================================================= */

:root{
  --hero-master-title:clamp(48px,3.55vw,64px);
  --hero-master-title-lh:.98;
  --hero-master-title-track:-.035em;
  --hero-master-body:clamp(14px,.95vw,17px);
  --hero-master-body-lh:1.58;
  --hero-master-eyebrow:12px;
  --hero-master-eyebrow-lh:1.2;
  --hero-master-eyebrow-track:.32em;
  --hero-master-gap-eyebrow-title:18px;
  --hero-master-gap-title-body:22px;
  --hero-master-copy-top:56px;
}

/* ---------- Shared Hero typography ---------- */
.page-home .hero .eyebrow,
.page-about .about-hero .eyebrow,
.page-what-we-do .hero .eyebrow,
.page-partnering .partner-hero .eyebrow,
.page-contact .contact-hero .eyebrow{
  margin:0;
  font-family:var(--sans);
  font-size:var(--hero-master-eyebrow);
  line-height:var(--hero-master-eyebrow-lh);
  font-weight:700;
  letter-spacing:var(--hero-master-eyebrow-track);
}

.page-home .hero h1,
.page-about .about-hero .hero-copy h1,
.page-what-we-do .hero h1,
.page-partnering .partner-hero .partner-copy h1,
.page-contact .contact-hero .contact-copy h1{
  margin-top:var(--hero-master-gap-eyebrow-title);
  margin-bottom:var(--hero-master-gap-title-body);
  font-size:var(--hero-master-title);
  line-height:var(--hero-master-title-lh);
  letter-spacing:var(--hero-master-title-track);
  font-weight:400;
}

.page-home .hero-text,
.page-about .about-hero .hero-copy>p:not(.eyebrow),
.page-what-we-do .hero p,
.page-partnering .partner-hero .partner-copy>p:not(.eyebrow),
.page-contact .contact-hero .contact-copy>p:not(.eyebrow){
  margin-top:0;
  margin-bottom:0;
  font-size:var(--hero-master-body);
  line-height:var(--hero-master-body-lh);
}

/* =========================================================
   DESKTOP
   What We Do defines the visual start line.
   The other four pages use the same copy-top offset, while
   their text widths remain page-specific.
   ========================================================= */
@media (min-width:1101px){

  /* HOME — short title/body: deliberately narrow copy field. */
  .page-home .hero-inner{
    min-height:520px;
    grid-template-columns:minmax(0,560px) minmax(520px,1fr);
    gap:clamp(36px,4vw,72px);
    align-items:start;
  }
  .page-home .hero-copy{
    max-width:560px;
    padding:var(--hero-master-copy-top) 0 48px;
  }
  .page-home .hero-text{max-width:540px;}
  .page-home .hero-actions{margin-top:28px;}

  /* ABOUT — long title: widest text field, same typography. */
  .page-about .hero-grid{
    min-height:510px;
    grid-template-columns:minmax(0,700px) minmax(220px,310px);
    gap:clamp(56px,6vw,100px);
    align-items:start;
  }
  .page-about .hero-copy{
    max-width:700px;
    padding-top:var(--hero-master-copy-top);
  }
  .page-about .hero-copy>p:not(.eyebrow){max-width:600px;}
  .page-about .hero-copy .primary-btn{margin-top:28px;}
  .page-about .hero-side{
    align-self:center;
  }

  /* WHAT WE DO — MASTER. Geometry stays in what-we-do.css. */

  /* PARTNERING — medium width. No per-page X translation. */
  .page-partnering .partner-hero-inner{
    height:420px;
    min-height:0;
  }
  .page-partnering .partner-copy{
    width:min(34%,540px);
    max-width:540px;
    height:420px;
    min-height:0;
    padding:var(--hero-master-copy-top) 0 34px;
    transform:none;
    justify-content:flex-start;
  }
  .page-partnering .partner-copy>p:not(.eyebrow){max-width:470px;}
  .page-partnering .partner-note{
    margin-top:26px;
    max-width:410px;
  }

  /* Keep the lab visible without washing it out. */
  .page-partnering .partner-visual::after{
    background:linear-gradient(90deg,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.67) 10%,
      rgba(255,255,255,.36) 20%,
      rgba(255,255,255,.08) 29%,
      rgba(255,255,255,0) 36%);
  }

  /* CONTACT — short copy: medium-narrow left column. */
  .page-contact .contact-hero-inner{
    min-height:500px;
    grid-template-columns:minmax(0,62%) minmax(300px,38%);
    align-items:start;
  }
  .page-contact .contact-copy{
    max-width:620px;
    padding:var(--hero-master-copy-top) 42px 48px 0;
  }
  .page-contact .contact-copy h1{max-width:600px;}
  .page-contact .contact-copy>p:not(.eyebrow){max-width:570px;}
  .page-contact .hero-keywords{margin-top:28px;}
  .page-contact .hero-side{
    align-self:center;
  }
}

/* ---------- Tablet ---------- */
@media (min-width:821px) and (max-width:1100px){
  :root{
    --hero-master-title:clamp(40px,5vw,52px);
    --hero-master-body:15px;
    --hero-master-eyebrow:10px;
    --hero-master-gap-eyebrow-title:16px;
    --hero-master-gap-title-body:20px;
  }

  .page-home .hero-copy,
  .page-about .about-hero .hero-copy,
  .page-partnering .partner-copy,
  .page-contact .contact-copy{
    transform:none;
  }

  .page-partnering .partner-hero-inner{height:380px;}
  .page-partnering .partner-copy{
    height:380px;
    width:min(42%,450px);
    max-width:450px;
    padding:44px 18px 28px 0;
    justify-content:flex-start;
  }
  .page-partnering .partner-copy>p:not(.eyebrow){max-width:390px;}

  .page-contact .contact-copy{padding-top:44px;padding-bottom:40px;}
}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  :root{
    --hero-master-title:clamp(38px,9.5vw,50px);
    --hero-master-body:15px;
    --hero-master-eyebrow:10px;
    --hero-master-gap-eyebrow-title:16px;
    --hero-master-gap-title-body:18px;
  }

  .page-home .hero h1,
  .page-about .about-hero .hero-copy h1,
  .page-what-we-do .hero h1,
  .page-partnering .partner-hero .partner-copy h1,
  .page-contact .contact-hero .contact-copy h1{
    letter-spacing:-.03em;
  }
}