/* about.html */
/* ==========================================================================
   MACKASEY — HOMEPAGE
   Palette: warm ivory, warm stone, charcoal, white. No accent hue.
   Contrast comes from colour blocking, scale and typography rather than colour:
   a stone statement band, charcoal sections, and white/stone card alternation.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --ivory:      #F7F4EE;
  --white:      #FFFFFF;
  --charcoal:   #1B1D1C;
  /* Olive-lime is a mark and a fill, never type on a light ground (1.7:1 on ivory).
     Deep olive carries the type; charcoal sits on top of the lime, not ivory. */
  --citron:     #B8C928;
  --olive:      #657019;   /* type on light grounds */
  --alert:      #A65A4C;   /* muted red — negative coverage only */
  --olive-lit:  #8A9A28;   /* the same family, light enough for type on charcoal */
  --logo-rule:  #B8C928;   /* the wordmark rule — measured off the final sheet */
  --ink:        #1B1D1C;
  --ink-soft:   #34372F;
  --stone:      #E9E5DE;   /* soft warm neutral */
  --stone-deep: #DCD7CC;

  --charcoal-soft: #5F605E;
  --charcoal-mid:  #454746;
  --line:          #DCD7CC;
  --line-stone:    #DCD7CC;
  --on-dark:       #F2EFE8;
  --on-dark-soft:  rgba(244,242,237,.74);


  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-h1:    clamp(2.6rem, 6.6vw, 5rem);
  --t-h2:    clamp(1.9rem, 3.8vw, 3.05rem);
  --t-h3:    clamp(1.18rem, 1.6vw, 1.42rem);
  --t-lead:  clamp(1.02rem, 1.3vw, 1.22rem);
  --t-body:  1rem;
  --t-small: .845rem;
  --t-eyebrow: .68rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --sec-y:  clamp(3.5rem, 6.4vw, 6.25rem);
  --sec-y-sm: clamp(2.7rem, 4.9vw, 4.75rem);   /* ~24% tighter */
  --sec-y-xs: clamp(2.1rem, 3.6vw, 3.4rem);    /* the positioning transition */
  --max:    1280px;
}
/* Selection tints, kept quiet on both grounds. A light tint on the charcoal
   sections read as a pale block behind individual words. */
::selection{ background:rgba(29,31,30,.11) }
/* Section labels and display headings are chrome rather than reading text.
   Stray selection on them was reading as a designed block behind a word.
   Body copy, bios and credentials stay fully selectable. */
.eyebrow,
h1, h2, h3{ -webkit-user-select:none; user-select:none }
.section--tight{ padding-block:clamp(2.5rem,4vw,3.5rem) }
.section--services{ padding-block:clamp(2.1rem,3.7vw,3.55rem) var(--sec-y-sm) }
/* Results: top only. The cards should arrive sooner; the run-out below is fine. */
.section--results{ padding-block:clamp(1.85rem,3.2vw,3.1rem) var(--sec-y-sm) }
.section--dark{ padding-block:clamp(2.95rem,5.4vw,5.15rem) }
.section--quotes{ padding-block:clamp(2.2rem,3.9vw,3.6rem) }
/* 5. SECTIONS -------------------------------------------------------------- */

/* 5a. HERO ----------------------------------------------------------------- */
.hero{ padding-block:clamp(1.85rem,3.6vw,3.5rem) clamp(2.5rem,4.6vw,4.5rem) }
.hero__cred{
  margin-top:1.4rem; padding-top:1.05rem; border-top:3px solid var(--citron);
  font-size:.86rem; color:var(--charcoal-soft); max-width:44ch;
}
/* 5c. INTRO — the full-width statement band -------------------------------- */
.intro__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,5rem); align-items:start;
}
/* ==========================================================================
   ABOUT PAGE — extends the homepage system, adds nothing to the palette
   ========================================================================== */
.page-hero{ padding-block:clamp(2.6rem,4.6vw,4.6rem) clamp(2.4rem,4.2vw,4rem) }
.page-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(1.75rem,4.5vw,4.25rem); align-items:start;
}
/* three balanced lines — each break is deliberate, not a wrap */
.page-hero h1{ font-size:clamp(2.05rem,4.2vw,3.35rem); max-width:none; line-height:1.13 }
.page-hero h1 span{ display:block; white-space:nowrap }
.page-hero__body p{ color:var(--charcoal-mid); max-width:54ch }
.page-hero__body p + p{ margin-top:1.15rem }
.page-hero__body p:first-child{ font-size:var(--t-lead); color:var(--charcoal) }
/* leadership bios — portrait one side, copy the other, alternating */
.bio{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.75rem,4vw,3.75rem); align-items:start;
}
.bio + .bio{ margin-top:clamp(2.75rem,5vw,4.75rem); padding-top:clamp(2.75rem,5vw,4.75rem); border-top:1px solid var(--line-stone) }
/* Jack keeps the original proportion; the founder's portrait leads */
.bio--flip{ grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr) }
.bio--flip .bio__figure{ order:2 }
.bio__figure{ position:relative; margin:0 }
.bio__portrait{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; display:block }
.bio__name{ font-size:clamp(1.6rem,2.5vw,2.1rem); line-height:1.15; margin-bottom:.5rem }
.bio__role{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--charcoal-soft); line-height:1.7;
  padding-bottom:1.1rem; margin-bottom:1.3rem; border-bottom:3px solid var(--citron);
  display:inline-block;
}
.bio__body p{ color:var(--charcoal-mid); max-width:62ch }
.bio__body p + p{ margin-top:1.05rem }
/* education and recognition — placed in the portrait column so it fills the
   space beneath the image rather than leaving that column empty */
.creds{ margin-top:1.5rem; padding-top:1.15rem; border-top:3px solid var(--citron) }
.creds h4{
  font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--charcoal-soft); margin:0 0 .85rem;
}
.creds li{ font-size:.87rem; color:var(--charcoal-mid); line-height:1.6 }
.creds li + li{ margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-stone) }
.creds ul{ padding-bottom:.35rem }
/* four-up and three-up capability grids */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.75rem) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.6vw,2.5rem) }
.cap{ border-top:2px solid var(--citron); padding-top:1.15rem }
.cap h3{ font-size:1.16rem; margin-bottom:.55rem }
.cap p{ color:var(--charcoal-mid); font-size:.93rem }
.band-dark .cap{ border-top-color:var(--citron) }
.band-dark .cap p{ color:var(--on-dark-soft) }
.lede{ font-size:var(--t-lead); color:var(--charcoal-mid); max-width:62ch }
.lede + .lede{ margin-top:1.1rem }
.band-dark .lede{ color:var(--on-dark-soft) }
.section-body{ margin-bottom:clamp(2rem,3.6vw,3rem) }
.section-body--snug{ margin-bottom:clamp(1.8rem,3.25vw,2.7rem) }
@media (max-width:900px){
  .page-hero__grid,.bio,.bio--flip{ grid-template-columns:1fr }
  .page-hero h1{ font-size:clamp(1.85rem,6.4vw,2.9rem) }
  /* the figure dissolves so the portrait and the credentials become siblings of
     the bio text, letting the credentials fall after the biography where they
     read correctly, rather than between the portrait and the first line. */
  .bio,.bio--flip{ display:grid; row-gap:1.5rem }
  .bio__figure{ display:contents }
  .bio__portrait{ order:1; max-width:20rem }
  .bio__body{ order:2 }
  .creds{ order:3; margin-top:0 }
  .bio + .bio{ margin-top:2.25rem; padding-top:2.25rem }
  .grid-4,.grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:620px){
  .grid-4,.grid-3{ grid-template-columns:1fr }
  .page-hero h1 span{ white-space:normal }
}