/* contact.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 }
}
/* ==========================================================================
   CASE STUDY PAGE
   ========================================================================== */
.case-hero{ padding-block:clamp(2.2rem,3.9vw,3.8rem) clamp(1.5rem,2.6vw,2.4rem) }
/* a short statement band, not a full section */
.section--statement{ padding-block:clamp(2.4rem,4.2vw,3.6rem) }
.case-hero h1{ font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.14; max-width:17ch }
.case-hero__intro{ font-size:var(--t-lead); color:var(--charcoal); max-width:54ch; margin-top:1.2rem }
/* the case-study body: a narrow, readable measure throughout */
.cs{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(1.4rem,3.4vw,3.25rem) }
.cs__label{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--charcoal-soft); padding-top:.45rem;
}
.cs__body h2{ font-size:clamp(1.45rem,2.3vw,1.9rem); margin-bottom:1rem; max-width:22ch }
.cs__body p{ color:var(--charcoal-mid); max-width:58ch }
.cs__body p + p{ margin-top:.95rem }
.cs__list{ margin-top:1.1rem; max-width:58ch }
.cs__list li{
  display:flex; gap:.7rem; font-size:.95rem; color:var(--charcoal-mid); line-height:1.6;
  padding:.42rem 0; border-top:1px solid var(--line-stone);
}
.cs__list li:first-child{ border-top:0 }
.cs__list li::before{ content:""; width:.4rem; height:.4rem; background:var(--citron); margin-top:.62rem; flex:none }
/* a restrained stat row — no oversized decorative numerals */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,2rem) }
/* this campaign has two headline figures rather than four; the row is held to
   the left at a sensible width so two stats do not stretch across the page */
/* three of the four values here are phrases rather than figures, so the longer
   ones step down a size and stay aligned with the numeral */
.stat__n--sm{ font-size:clamp(1.02rem,1.5vw,1.28rem); line-height:1.25 }
.stat{ border-top:2px solid var(--citron); padding-top:1rem }
.stat__n{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(1.75rem,2.9vw,2.4rem); line-height:1; margin-bottom:.45rem;
}
.stat__l{ font-size:.84rem; color:var(--charcoal-mid); line-height:1.5 }
.band-dark .stat__l{ color:var(--on-dark-soft) }
/* the single headline outcome */
.featured{ font-family:var(--display); font-size:clamp(1.4rem,2.5vw,2.05rem); line-height:1.35; max-width:26ch }
.featured--dark{ color:var(--ivory) }
.figure-note{
  margin-top:.85rem; font-family:var(--sans); font-size:.78rem;
  color:var(--charcoal-soft); line-height:1.5;
}
/* a supporting visual set inside a section, smaller than the hero image */
.cs__figure{ margin:1.6rem 0 0; max-width:34rem }
.cs__figure img{ width:100%; display:block; border:1px solid var(--line-stone) }
.cs__figure figcaption{
  margin-top:.7rem; font-family:var(--sans); font-size:.78rem;
  color:var(--charcoal-soft); line-height:1.5;
}
.cs-visual img,
.cs-visual .ph{
  aspect-ratio:16/9; background:var(--stone); position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--charcoal-soft); line-height:1.8;
}
@media (max-width:900px){
  .cs{ grid-template-columns:1fr; gap:.6rem }
  .stats{ grid-template-columns:1fr 1fr }
  .case-hero h1{ max-width:none; font-size:clamp(1.85rem,6.2vw,2.8rem) }
}
@media (max-width:560px){ .stats{ grid-template-columns:1fr } }
/* two-stat rows: a credential pair in the overview, campaign outcomes in the results */
.stats--two{ grid-template-columns:repeat(2,1fr); max-width:40rem }
.stats--two .stat__l{ max-width:26ch }
/* run-in headings for the three audience groups */
.cs__sub{ font-size:1rem; margin:1.5rem 0 .5rem }
.cs__sub:first-of-type{ margin-top:1.2rem }
/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-hero{ padding-block:clamp(2.4rem,4.2vw,4rem) clamp(.7rem,1.2vw,1rem) }
.contact-hero h1{ font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.14; max-width:17ch }
.contact-hero__intro{ font-size:var(--t-lead); color:var(--charcoal-mid); max-width:56ch; margin-top:1.2rem }
.section--contact{ padding-block:clamp(1rem,1.8vw,1.5rem) clamp(2.4rem,4.2vw,3.6rem) }
.contact-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.8rem,4vw,4rem); align-items:start;
}
.contact-aside h2{ font-size:clamp(1.45rem,2.3vw,1.9rem); margin-bottom:1rem }
.contact-aside p{ color:var(--charcoal-mid); max-width:44ch }
.contact-aside__block{ margin-top:1.9rem; padding-top:1.4rem; border-top:3px solid var(--citron) }
.contact-aside__label{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:.55rem;
}
.contact-aside__mail{ font-family:var(--display); font-size:1.18rem; color:var(--charcoal); text-decoration:none; border-bottom:1px solid var(--line-stone) }
.contact-aside__mail:hover{ border-bottom-color:var(--olive); color:var(--olive) }
.contact-aside__discreet{ margin-top:.85rem; font-size:.85rem; color:var(--charcoal-mid); line-height:1.5 }
.contact-aside__note{ margin-top:1.6rem; font-size:.92rem; color:var(--charcoal-mid); max-width:38ch }
/* form */
.form{ background:var(--white); border-top:2px solid var(--citron); padding:clamp(1.4rem,2.3vw,1.95rem) }
.form .field input,.form .field select,.form .field textarea{ background:#FCFBF8 }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field{ margin-bottom:1rem; display:flex; flex-direction:column }
.field label{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:.4rem;
}
.field .opt{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--charcoal-soft) }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--charcoal);
  background:var(--ivory); border:1px solid var(--line-stone); border-radius:0;
  padding:.72rem .8rem; width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:8.5rem; resize:vertical; line-height:1.6 }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(101,112,25,.12);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--charcoal-soft) 50%),linear-gradient(135deg,var(--charcoal-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%, calc(100% - 13px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.4rem }
.form .btn{ width:100%; justify-content:center; margin-top:.4rem }
.form__fine{ margin-top:.9rem; font-size:.84rem; color:var(--charcoal-mid); line-height:1.55 }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
/* success state */
.form-success{ background:var(--white); border-top:3px solid var(--citron); padding:clamp(1.8rem,3vw,2.6rem) }
.form-success h2{ font-size:clamp(1.35rem,2.1vw,1.7rem); margin-bottom:.8rem }
.form-success p{ color:var(--charcoal-mid); max-width:44ch }
.form-success p + p{ margin-top:.9rem }
.form-success .arrow{ margin-top:1.4rem }
/* what happens next */
.next{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.6vw,2.4rem) }
.next__item{ border-top:2px solid var(--citron); padding-top:1.1rem }
.next__item h3{ font-size:1.1rem; margin-bottom:.5rem }
.next__item p{ color:var(--charcoal-mid); font-size:.92rem }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr }
  .contact-hero h1{ max-width:none; font-size:clamp(1.85rem,6.2vw,2.8rem) }
  .next{ grid-template-columns:1fr }
}
@media (max-width:560px){ .form__row{ grid-template-columns:1fr } }