/* services-public-relations.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;
}
.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;
}
/* ==========================================================================
   SERVICE DETAIL PAGE — public relations
   ========================================================================== */
.page-hero{ padding-block:clamp(2.2rem,3.9vw,3.8rem) clamp(1.65rem,2.9vw,2.75rem) }
.page-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.6rem,4vw,3.75rem); align-items:start;
}
.page-hero h1{ font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.14; max-width:16ch }
.page-hero .accent{ margin-top:1.25rem; display:block; max-width:30ch }
.page-hero__body p{ color:var(--charcoal-mid); max-width:52ch }
.page-hero__body p + p{ margin-top:1.05rem }
.page-hero__body p:first-child{ font-size:var(--t-lead); color:var(--charcoal) }
/* section headings sit a clear step below the page headline */
.section h2{ font-size:clamp(1.6rem,2.7vw,2.15rem) }
.lede{ font-size:1.02rem; color:var(--charcoal-mid); max-width:62ch }
.lede + .lede{ margin-top:1rem }
.band-dark .lede{ color:var(--on-dark-soft) }
.section-body{ margin-bottom:clamp(1.7rem,3vw,2.5rem) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.6vw,2.4rem) }
.cap{ border-top:2px solid var(--citron); padding-top:1.1rem }
.cap h3{ font-size:1.1rem; margin-bottom:.5rem }
.cap p{ color:var(--charcoal-mid); font-size:.92rem }
.band-dark .cap p{ color:var(--on-dark-soft) }
.note-line{ margin-top:clamp(1.3rem,2.3vw,1.9rem); font-size:.95rem; color:var(--charcoal-mid); max-width:64ch }
.band-dark .note-line{ color:var(--on-dark-soft) }
/* capabilities: a plain three-across list, no boxes */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.3rem,2.5vw,2.2rem) clamp(1.5rem,3vw,2.75rem) }
.capline{ padding-top:.95rem; border-top:1px solid var(--line-stone) }
.capline h3{ font-size:1rem; margin-bottom:.4rem }
.capline p{ color:var(--charcoal-mid); font-size:.89rem; line-height:1.6 }
/* a restrained horizontal strip of real placements, between the copy sections */
.coverage{ padding-block:0 clamp(1.9rem,3.3vw,2.8rem) }
.coverage__label{
  font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:1rem;
}
.coverage__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.4vw,1.1rem) }
.coverage__row figure{ margin:0 }
/* the whole card is the link: image and caption together */
.coverage__card{ display:block; text-decoration:none; color:inherit }
.coverage__card img{ transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease }
.coverage__card:hover img,
.coverage__card:focus-visible img{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(29,31,30,.06), 0 18px 32px -20px rgba(29,31,30,.32);
}
.coverage__row figcaption{
  margin-top:.7rem; font-family:var(--sans); font-size:.74rem;
  color:var(--charcoal-soft); line-height:1.5; min-height:2.2em;
  transition:color .25s ease;
}
.coverage__card:hover figcaption{ color:var(--olive) }
.coverage__row img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top;
  border:1px solid var(--line-stone);
  box-shadow:0 2px 4px rgba(29,31,30,.05), 0 12px 24px -18px rgba(29,31,30,.24);
}
/* proof cards with outcome highlights */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.7rem) }
.case{ display:flex; flex-direction:column; background:var(--white); border-top:2px solid var(--citron); padding:1.5rem 1.45rem 1.5rem }
.case:nth-child(2){ background:var(--stone) }
.case h3{ font-size:1.16rem; margin-bottom:.6rem }
.case p{ color:var(--charcoal-mid); font-size:.92rem; margin-bottom:1.1rem }
.wins{ margin-top:auto; padding-top:.95rem; border-top:1px solid var(--line-stone) }
.win{ display:flex; gap:.6rem; font-size:.83rem; color:var(--charcoal-mid); line-height:1.5 }
.win::before{ content:""; width:.4rem; height:.4rem; background:var(--citron); margin-top:.5rem; flex:none }
@media (max-width:900px){
  .page-hero__grid{ grid-template-columns:1fr }
  .page-hero h1{ max-width:none; font-size:clamp(1.85rem,6.2vw,2.8rem) }
  .grid-3,.caps,.cases{ grid-template-columns:1fr 1fr }
  /* three cards in two columns leaves an orphan, and halving the width shrinks the
     episode/headline type. Below 900px they stack full width, capped so a tablet
     does not get an oversized card. */
  .coverage__row{ grid-template-columns:1fr }
  .coverage__row figure{ width:100%; max-width:36rem; margin-inline:auto }
}
@media (max-width:620px){
  .grid-3,.caps,.cases{ grid-template-columns:1fr }
}