/* Ideate brand layer — loaded AFTER compiled app.css. */
:root {
  --color-shade-1000: #0e0e0d;
  --color-shade-300:  #e2e2dc;
  --font-family-sans: 'DM Sans', sans-serif;
}
body { font-family: 'DM Sans', sans-serif; }
h1,h2,h3,h4,h5,h6,
.text-h1,.text-h2,.text-h3,.text-h4 { font-family: 'Poppins', sans-serif; }
@layer base {
  .wp-block-heading,
  .wp-block-kadence-column .kt-inside-inner-col > .wp-block-heading {
    color: #0e0e0d !important;
  }
}
body.page #main { background: transparent !important; }
body.page .wp-block-kadence-rowlayout,
body.single-projects .wp-block-kadence-rowlayout {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #f4f4f4;
}
/* ---- HERO (centred icon + headline + sub) ------------------------------- */
/* ✦ icon = a paragraph immediately before the hero h1 */
body.page p.wp-block-paragraph:has(+ h1.wp-block-heading) {
  color: #c8f135 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  margin-bottom: 20px !important;
  text-align: center;
  padding-top: 40px;
}
/* Hero H1 */
body.page p.wp-block-paragraph:has(+ h1.wp-block-heading) + h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0e0e0d;
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}
/* Sub-line = paragraph immediately after the hero h1 */
body.page p.wp-block-paragraph:has(+ h1.wp-block-heading) + h1 + p {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: rgba(14, 14, 13, 0.55) !important;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}


/* ============================================================
   CASE-STUDY BODY  (single-project .sp-case section)
   Matches the signed-off Staffline mockup: uniform 900px media
   height, 1- and 2-column only, copy-beside-image splits, dark
   callout, no hairlines around the stats.
   These tokens use different names to the ones above, so nothing
   here clashes with the existing brand layer.
   ============================================================ */
:root{
  --media-h:900px;        /* the ONE number that controls media-block height */
  --gap:10px;
  --radius:14px;
  --ink:#0e0e0d; --grey:#2a2a2a; --mid:#555550; --dim:#99998e;
  --yellow:#c8f135; --border:#e2e2dc; --dark:#111110;
  --poppins:'Poppins',sans-serif; --sans:'DM Sans',sans-serif;
}

/* story sections (header + text, both optional) */
.proj-section{padding:84px 48px 48px;max-width:860px;}
.proj-section__h{font-family:var(--poppins);font-weight:700;font-size:clamp(22px,2.7vw,34px);color:var(--grey);letter-spacing:-0.02em;line-height:1.15;margin-bottom:16px;}
.proj-section__p{font-size:15px;font-weight:300;color:var(--mid);line-height: 1.6;max-width:660px;}
.proj-section__p + .proj-section__p{margin-top:14px;}

/* media blocks — uniform height; image OR video cover-fills */
.img-block{padding:0 var(--gap);margin-bottom:var(--gap);}
.img-block__inner{width:100%;border-radius:var(--radius);overflow:hidden;background:var(--border);position:relative;height:var(--media-h);}
.img-row{display:grid;gap:var(--gap);padding:0 var(--gap);margin-bottom:var(--gap);}
.img-row--2{grid-template-columns:1fr 1fr;}
.img-row__item{border-radius:var(--radius);overflow:hidden;background:var(--border);min-width:0;height:var(--media-h);}
.img-block__inner img,.img-block__inner video,
.img-row__item img,.img-row__item video,
.split__media img,.split__media video{width:100%;height:100%;object-fit:cover;display:block;}

/* copy beside media (equal halves; copy left or right) */
.split{display:grid;gap:var(--gap);padding:0 var(--gap);margin-bottom:var(--gap);}
.split--2{grid-template-columns:1fr 1fr;}
.split--reverse{direction:rtl;} .split--reverse > *{direction:ltr;}
.split__copy{padding:72px 44px 44px;display:flex;flex-direction:column;justify-content:flex-start;}
.split__copy .proj-section__h{margin-bottom:18px;}
.split__copy .proj-section__p{max-width:none;}
.split__copy .proj-section__h,
.split__copy .proj-section__p{margin-left:0 !important;margin-right:0 !important;}
.split__media{border-radius:var(--radius);overflow:hidden;background:var(--border);height:var(--media-h);min-width:0;}

/* punch-line band (white text on dark) */
.callout{background:var(--dark);padding:72px 48px;text-align:center;margin:0 var(--gap) var(--gap);border-radius:var(--radius);}
.callout p{font-family:var(--poppins);font-weight:600;font-size:clamp(20px,2.8vw,36px) !important;color:#fff !important;letter-spacing:-0.01em;line-height:1.3 !important;max-width:800px;margin:0 auto;}
.callout em{color:var(--yellow);font-style:normal;}

/* outcomes — no box, no dividers */
.outcomes{padding:48px;margin:0 var(--gap) var(--gap);text-align:center;}
.outcomes__label{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);margin-bottom:28px;}
.outcomes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.outcome{padding:0;margin:0;}
.outcome:last-child{margin-right:0;}
.outcome__num{font-family:var(--poppins);font-weight:700;font-size:clamp(40px,5vw,64px);color:var(--grey);letter-spacing:-0.04em;line-height:1;margin-bottom:8px;}
.outcome__num span{color:var(--yellow);}
.outcome__label{font-size:14px;font-weight:400;color:var(--mid);line-height:1.5;}

/* testimonial */
.testimonial{padding:56px 48px;background:var(--yellow);margin:0 var(--gap) var(--gap);border-radius:var(--radius);text-align:center;}
.testimonial blockquote{font-family:var(--poppins);font-weight:600;font-size:clamp(18px,2.5vw,30px);color:var(--grey);letter-spacing:-0.015em;line-height:1.3;max-width:760px;margin:0 auto 20px;}
.testimonial blockquote::before{content:'"';} .testimonial blockquote::after{content:'"';}
.testimonial__attr{font-size:13px;font-weight:500;color:var(--mid);}
.testimonial__attr strong{display:block;color:var(--grey);font-size:14px;margin-bottom:2px;}

/* responsive — retune off the single --media-h */
@media(max-width:1100px){ :root{--media-h:660px;} }
@media(max-width:760px){
  :root{--media-h:420px;}
  .img-row,.img-row--2{grid-template-columns:1fr;}
  .split--2{grid-template-columns:1fr;}
  .split--reverse{direction:ltr;}
  .split__copy{padding:28px 24px;}
  .proj-section{padding:56px 24px 32px;}
  .outcomes__grid{grid-template-columns:1fr;gap:32px;}
  .outcome{padding:0;margin-right:0;}
}

/* case-study body: let full-width Section blocks reach the old case-body width (drop the 24px gutter; inner blocks own their 10px gaps) */
.sp-body{padding-left:0 !important;padding-right:0 !important;}


/* ===== FOOTER TWO-ADDRESS COLUMNS (Head Office + London Meetup) ===== */
.ideate-footer-address{display:flex;flex-wrap:wrap;gap:96px;row-gap:32px;align-items:flex-start;}
.ideate-footer-address .ideate-footer-addr-col{}
.ideate-footer-address .ideate-footer-addr-col p{margin-bottom:4px;line-height:24px;}
.ideate-footer-address .ideate-footer-addr-title{margin-bottom:14px;}
.ideate-footer-address .ideate-footer-email-line{margin-top:14px;margin-bottom:0;}