/* =============================================================
   LOUISE LALLY RETAIL — SITE STYLES
   Shared across homepage and inner pages.
   ============================================================= */

:root{
  --navy:        #041B44;
  --yellow:      #FFBF00;
  --white:       #FFFFFF;
  --paper:       #FBF7EC;
  --ink:         #041B44;
  --ink-90:      rgba(4,27,68,.90);
  --ink-80:      rgba(4,27,68,.80);
  --ink-70:      rgba(4,27,68,.70);
  --ink-60:      rgba(4,27,68,.66);
  --ink-40:      rgba(4,27,68,.40);
  --ink-25:      rgba(4,27,68,.25);
  --ink-15:      rgba(4,27,68,.15);
  --ink-08:      rgba(4,27,68,.08);

  --orange:      #F45D02;
  --pink:        #FF729F;
  --purple:      #533A71;
  --shamrock:    #009A44;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --ff-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-body:    "Inter",  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --content-max: 1200px;
  --prose-max:   68ch;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink-90);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }

/* Form feedback (success/error/loading) */
.form-error{
  margin-top: 10px;
  font-family: var(--ff-display); font-size: 13px; font-weight: 600;
  color: #b00020;
  letter-spacing: 0.01em;
}
.form-success{
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--navy);
  border-left: 4px solid var(--shamrock, #009A44);
  border-radius: var(--radius-sm);
  padding: var(--s-5) var(--s-6);
}
.form-success-tick{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--shamrock, #009A44); color: #fff;
  border-radius: 999px;
}
.form-success-body h4{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 17px; color: var(--navy);
  margin: 0 0 6px 0; letter-spacing: -0.01em;
}
.form-success-body p{
  font-size: 14px; color: var(--ink-80); margin: 0;
  line-height: 1.5;
}
[aria-busy="true"] button{ opacity: 0.7; }
a{ color: var(--navy); text-underline-offset: 3px; }
a.li-icon, .li-icon{ text-decoration: none; display: inline-flex; align-items: center; }
button{ font: inherit; cursor: pointer; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--navy); color: var(--yellow);
  padding: 12px 20px; font-family: var(--ff-display); font-weight:600;
  z-index: 999;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* ---------- TYPE ---------- */
.eyebrow{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-5) 0;
}
h1,.h1{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 var(--s-5) 0;
}
h2,.h2{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--s-5) 0;
}
h3,.h3{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 var(--s-4) 0;
}
p{ margin: 0 0 1.5em; max-width: var(--prose-max); color: var(--ink-90); }
.lede{ font-size: 19px; line-height: 1.55; color: var(--ink-90); }

.pullquote{
  background: var(--yellow);
  padding: var(--s-7);
  border-radius: 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

/* ---------- LAYOUT ---------- */
.shell{ max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-5); }
.section{ padding: var(--s-9) 0; }
@media (max-width: 900px){ .section{ padding: var(--s-8) 0; } }
@media (max-width: 560px){ .section{ padding: var(--s-7) 0; } }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: var(--yellow);
  height: 88px;
  display:flex; align-items:center;
  transition: border-color .2s ease, box-shadow .2s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{ border-bottom: 1px solid var(--navy); box-shadow: 0 2px 0 rgba(4,27,68,.04); }
.site-header .shell{ display:flex; align-items:center; justify-content: space-between; width:100%; gap: var(--s-4); }
.site-header .logo img{ height: 48px; width:auto; display:block; }
.site-nav{ display:flex; gap: var(--s-6); }
.site-nav a{
  position: relative;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 6px 0;
}
.site-nav a::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ color: var(--navy); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{ transform: scaleX(1); }
.hdr-cta{ display: inline-flex; }

.hamburger{
  display:none; background: transparent; border: 0; padding: 8px;
  width: 44px; height: 44px; align-items:center; justify-content: center;
}
.hamburger .bars{ width: 24px; height: 2px; background: var(--navy); position: relative; display:block; }
.hamburger .bars::before, .hamburger .bars::after{
  content:""; position:absolute; left:0; width: 24px; height: 2px; background: var(--navy);
}
.hamburger .bars::before{ top: -7px; }
.hamburger .bars::after{  top:  7px; }

@media (max-width: 900px){
  .site-header{ height: 64px; }
  .site-nav{ display: none !important; }
  .hdr-cta{ display: none !important; }
  .hamburger{ display: inline-flex; }
}

/* Mobile menu overlay */
.mobile-menu{
  position: fixed; inset: 0;
  background: var(--yellow);
  z-index: 70;
  transform: translateY(-100%);
  transition: transform .25s ease-out;
  display: flex; flex-direction: column;
  padding: var(--s-6) var(--s-5);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu .close{
  align-self: flex-end;
  background: transparent; border:0; color: var(--navy);
  font-family: var(--ff-display); font-weight: 700; font-size: 24px;
  line-height:1;
}
.mobile-menu nav{ flex:1; display:flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.mobile-menu nav a{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 28px; line-height: 2; color: var(--navy);
  text-decoration: none;
}
.mobile-menu .mobile-cta{ margin: var(--s-6) auto; }
@media (prefers-reduced-motion: reduce){ .mobile-menu{ transition: none; } }

/* ---------- BUTTONS ---------- */
.btn{
  display: inline-flex; align-items:center; gap: 10px;
  font-family: var(--ff-display);
  font-weight: 600; font-size: 16px; line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn .arr{ display:inline-block; transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(3px); }

.btn--primary{ background: var(--navy); color: var(--yellow); border-color: var(--navy); }
.btn--primary:hover{ background: var(--yellow); color: var(--navy); border-color: var(--navy); }

.btn--secondary{ background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.btn--secondary:hover{ background: var(--navy); color: var(--yellow); border-color: var(--navy); }

.btn--ghost{ background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover{ background: var(--navy); color: var(--yellow); }

.btn--lg{ font-size: 18px; padding: 18px 36px; }

.tlink{
  display: inline-flex; align-items:center; gap: 6px;
  font-family: var(--ff-display); font-weight: 600; font-size: 15px;
  color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.tlink:hover{ border-color: var(--navy); }
.tlink .arr{ transition: transform .2s ease; }
.tlink:hover .arr{ transform: translateX(3px); }

/* ---------- HERO ---------- */
.hero{
  background: var(--yellow);
  color: var(--navy);
  padding: var(--s-9) 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--navy);
}
.hero-pattern{
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.09;
  background-image:
    url("../assets/bag-worried.png"),
    url("../assets/bag-unsure.png"),
    url("../assets/bag-confused.png"),
    url("../assets/bag-surprised.png"),
    url("../assets/bag-happy.png"),
    url("../assets/bag-unhappy.png");
  background-repeat: no-repeat;
  background-size: 110px, 95px, 120px, 100px, 130px, 105px;
  background-position:
    5% 8%, 18% 78%, 92% 22%,
    72% 82%, 52% 12%, 34% 48%;
}
.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.hero h1{ max-width: 14ch; }
.hero .sub{ font-size: clamp(18px,1.5vw,21px); max-width: 52ch; color: var(--navy); margin-bottom: 0; }

/* Hero service grid — declare the four pillars up front (editorial style) */
.service-grid{ margin: 28px 0 0; }
.service-grid__lead{
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin: 0 0 16px;
}
.service-grid ul{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 20px;
}
.service-grid li{
  position: relative;
  padding-left: 14px;
  margin: 0;
}
.service-grid li::before{
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: var(--c, var(--navy));
}
.service-grid a{
  display: block;
  text-decoration: none;
  color: var(--navy);
}
.service-grid .num{
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--ink-60);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-grid .lbl{
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  margin-top: 4px;
}
.service-grid a:hover .lbl{
  text-decoration: underline;
  text-decoration-color: var(--c);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (max-width: 720px){
  .service-grid ul{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.hero .cta-row{ margin-top: 40px; display:flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; gap: var(--s-7); }
  .hero{ padding: var(--s-8) 0; }
}
@media (max-width: 560px){
  .hero{ padding: var(--s-7) 0; }
}

.hero-visual{
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: var(--s-7);
  aspect-ratio: 4/5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4);
  max-width: 480px;
  margin-left: auto;
  width: 100%;
}
.hero-visual .bag-area{
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.hero-visual img{ max-height: 100%; width: auto; max-width: 85%; }
.hero-visual .bag-tagline{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 15px; line-height: 1.35;
  color: var(--navy);
  text-align: center;
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-top: 1px solid rgba(15,42,71,.12);
  text-wrap: balance;
}
.hero-visual .caption{
  font-family: var(--ff-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 14px; color: var(--navy);
  margin-top: var(--s-5);
}
.hero-visual .rule{
  width: 80px; height: 1px; background: var(--navy);
  margin: var(--s-3) 0;
}
.hero-visual .sup{
  font-family: var(--ff-body); font-style: italic;
  font-size: 14px; color: var(--ink-70);
}
@media (max-width: 900px){
  .hero-visual{ margin: 0 auto; max-width: 360px; }
}

/* ---------- CREDIBILITY ---------- */
.cred{
  background: var(--white);
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  padding: 80px 0;
}
@media (max-width: 900px){ .cred{ padding: 56px 0; } }
@media (max-width: 560px){ .cred{ padding: 48px 0; } }

.cred-markers{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 96px;
  text-align: center;
  justify-items: center;
}
.cred-markers p{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 19px; line-height: 1.3; color: var(--navy);
  max-width: 280px;
  margin: 0;
}
@media (max-width: 900px){
  .cred-markers{ grid-template-columns: 1fr; gap: var(--s-6); }
}

.testimonial-block{
  background: rgba(255,191,0,.14);
  padding: 56px 64px;
  max-width: 960px;
  margin: 64px auto;
  display: grid;
  grid-template-columns: 35% 65%;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 760px){
  .testimonial-block{
    grid-template-columns: 1fr;
    padding: var(--s-6);
    gap: var(--s-5);
  }
}
.t-photo{
  width: 280px; height: 200px; border-radius: 14px;
  border: 2px solid var(--navy);
  overflow: hidden;
  flex-shrink: 0;
}
.t-photo img{ width: 100%; height: 100%; object-fit: cover; }
.t-quote{
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.3; color: var(--navy);
  max-width: 540px;
  margin: 0 0 var(--s-5) 0;
}
.t-body{
  font-family: var(--ff-body); font-size: 16px;
  line-height: 1.55; color: var(--ink-80);
  max-width: 600px;
  margin: 0 0 var(--s-6) 0;
}
.t-attrib{ display:flex; align-items:center; gap: var(--s-3); flex-wrap: wrap; }
.t-attrib .name{ font-family: var(--ff-display); font-weight: 600; font-size: 19px; color: var(--navy); }
.t-attrib .role{ font-family: var(--ff-body); font-size: 15px; color: var(--ink-80); }
.t-attrib .li-icon{ color: var(--navy); }

.logo-wall{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 48px 56px;
  padding: var(--s-4) 0;
}
.logo-wall .logo{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 15px; color: var(--ink-40);
  letter-spacing: 0.01em;
  transition: color .2s ease, filter .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.logo-wall .logo:hover{ color: var(--navy); }
.logo-wall .logo.first{ color: var(--ink-60); }

/* Image logos — full colour by default, greyscale on hover */
.logo-wall img.logo{
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(0) opacity(1);
  transition: filter .25s ease;
}
.logo-wall img.logo:hover{ filter: grayscale(1) opacity(0.55); }
.logo-caption{
  text-align: center; margin-top: 32px;
  font-family: var(--ff-body); font-style: italic; font-size: 15px;
  color: var(--ink-70);
}
@media (max-width: 700px){ .logo-wall{ gap: 32px; } }

/* ---------- CHALLENGE ---------- */
.challenge{ background: var(--paper); }
.challenge-head{ text-align: center; margin-bottom: var(--s-8); }
.challenge-head p{ margin: 0 auto; max-width: 720px; }

.bag-row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  align-items: end;
}
@media (max-width: 900px){ .bag-row{ grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } }
@media (max-width: 520px){ .bag-row{ grid-template-columns: 1fr; gap: var(--s-7); } }

.bag-card{ text-align: center; display:flex; flex-direction: column; align-items: center; }
.bag-card .bag-slot{
  display:flex; align-items: flex-end; justify-content: center;
  height: 240px;
}
.bag-card img{
  max-height: 220px; width: auto;
  transition: transform .25s ease;
}
.bag-card.b1 .bag-slot{ padding-bottom: 0; }
.bag-card.b1 img{ max-height: 230px; }
.bag-card.b2 .bag-slot{ align-items: flex-start; }
.bag-card.b2 img{ transform: rotate(-3deg); max-height: 200px; }
.bag-card.b3 .bag-slot{ padding-top: 20px; align-items: flex-end; }
.bag-card.b3 img{ max-height: 200px; }
.bag-card.b4 img{ transform: rotate(3deg); max-height: 230px; }

.bag-card:hover.b1 img{ transform: rotate(-2deg); }
.bag-card:hover.b2 img{ transform: rotate(-6deg); }
.bag-card:hover.b3 img{ transform: rotate(2deg); }
.bag-card:hover.b4 img{ transform: rotate(6deg); }

.bag-emotion{
  font-family: var(--ff-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; color: var(--ink-60);
  margin-top: 32px; margin-bottom: 8px;
  transition: color .2s ease;
}
.bag-card:hover .bag-emotion{ color: var(--navy); }
.bag-quote{
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: 17px; color: var(--ink-90);
  line-height: 1.4;
  max-width: 220px;
  margin: 0 auto;
}
.challenge-close{
  text-align: center; margin-top: 64px;
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--ink-90); line-height: 1.4;
  max-width: 720px; margin-left: auto; margin-right: auto;
}

@media (prefers-reduced-motion: reduce){
  .bag-card img, .bag-emotion{ transition: none; }
}

/* ---------- APPROACH ---------- */
.approach-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 900px){
  .approach-grid{ grid-template-columns: 1fr; gap: var(--s-6); }
}
.approach-body{ max-width: 600px; }
.approach-photo{
  margin: var(--s-5) 0 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15,42,71,.12);
}
.approach-photo img{ width: 100%; height: auto; display: block; }
.approach-photo figcaption{
  font-family: var(--ff-body); font-size: 13px;
  color: var(--ink-70); padding: 12px 16px;
  background: var(--white);
  border-top: 1px solid rgba(15,42,71,.08);
  font-style: italic;
}

/* Workshop band */
.workshop-band{
  position: relative;
  width: 100%;
  height: clamp(280px, 38vw, 460px);
  overflow: hidden;
  background: var(--navy);
}
.workshop-band img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.workshop-band::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,42,71,0) 0%, rgba(15,42,71,.55) 100%);
}
.workshop-band__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6);
  color: var(--white);
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.workshop-band__caption .eyebrow{
  color: var(--yellow);
  margin-bottom: var(--s-2);
}
.workshop-band__caption p:last-child{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.approach-body p{ font-size: 17px; line-height: 1.6; color: var(--ink-90); }
.approach-pq{
  padding: 40px 48px;
  max-width: 380px;
  margin-top: 32px;
}
@media (max-width: 900px){
  .approach-pq{ margin-top: 0; }
}

/* ---------- NEWSLETTER ---------- */
.newsletter{
  background: var(--navy);
  color: var(--white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px){ .newsletter{ padding: 56px 0; } }
.newsletter-grid{
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--s-8);
  align-items: center;
  position: relative;
}
@media (max-width: 900px){ .newsletter-grid{ grid-template-columns: 1fr; gap: var(--s-6); } }

.newsletter .eyebrow{ color: var(--yellow); }
.newsletter h2{ color: var(--white); font-size: clamp(28px, 3vw, 36px); margin-bottom: var(--s-5); max-width: 14ch; }
.newsletter p{ color: rgba(255,255,255,.9); max-width: 480px; line-height: 1.55; }
.newsletter .meta{ font-style: italic; color: rgba(255,255,255,.7); font-size: 15px; margin-top: var(--s-5); }

.nl-form{ max-width: 380px; margin-left: auto; width: 100%; }
@media (max-width: 900px){ .nl-form{ margin-left: 0; } }
.nl-form .sub-head{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 14px; color: var(--yellow);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.field{ display:flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white);
}
.field input{
  font: inherit; font-family: var(--ff-body);
  padding: 14px 20px;
  border: 1px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius-sm);
}
.field input:focus{ border-width: 2px; outline: none; padding: 13px 19px; }
.field input::placeholder{ color: var(--ink-40); }

.consent{
  display:flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-4) 0;
}
.consent input[type=checkbox]{
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--yellow);
  border-radius: 3px;
  background: transparent;
  cursor: pointer; position: relative; flex-shrink: 0; margin-top: 2px;
}
.consent input[type=checkbox]:checked{ background: var(--yellow); }
.consent input[type=checkbox]:checked::after{
  content:""; position:absolute; left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--navy);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.consent label{
  font-family: var(--ff-body); font-size: 14px;
  color: rgba(255,255,255,.9); line-height: 1.4;
}
.nl-form .btn{ width: 100%; justify-content: center; }
.nl-reassure{
  margin-top: var(--s-4);
  text-align: center;
  font-family: var(--ff-body); font-style: italic;
  font-size: 13px; color: rgba(255,255,255,.6);
}

/* ---------- SERVICES ---------- */
.services-section{ padding-top: 0; background: var(--paper); }
.services-band{ background: #EEF2F6; padding: var(--s-9) 0 var(--s-8); margin-bottom: var(--s-8); }
.services-head{ text-align: center; margin-bottom: 0; }
.services-head p{ margin: 0 auto; max-width: 720px; }

.pillar{
  position: relative;
  padding: var(--s-7) var(--s-6);
  margin-bottom: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  padding: 64px 0;
  min-height: 280px;
}
.pillar + .pillar{ margin-top: 0; }
@media (max-width: 900px){
  .pillar{ grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-7) 0; }
}

.pillar .text{ position: relative; z-index: 2; max-width: 480px; }
.pillar .text h3{ font-size: clamp(22px, 2.3vw, 28px); margin-bottom: var(--s-4); }
.pillar .text p{ font-size: 16px; color: var(--ink-90); line-height: 1.55; margin-bottom: var(--s-5); }
.pillar .visual{
  position: relative;
  min-height: 260px;
  display:flex; align-items:center; justify-content: center;
}
.pillar .wash{
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  opacity: 1;
  transition: opacity .4s ease;
  z-index: 0;
  border-radius: var(--radius-sm);
}
.pillar.in-view .wash{ opacity: 1; }
.pillar .pnum{
  position: absolute;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(80px, 9vw, 140px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  z-index: 1; pointer-events: none;
  bottom: var(--s-5);
}
.pillar .bag-pair{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s-4);
}
.pillar .bag-pair img{ height: 170px; width:auto; }
.pillar .bag-pair .arrow{
  width: 40px; height: 1px; background: var(--navy); position: relative;
}
.pillar .bag-pair .arrow::after{
  content:""; position:absolute; right: -1px; top: -5px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  transform: rotate(45deg);
}
.pillar .solo{ position: relative; z-index: 2; }
.pillar .solo img{ height: 220px; width: auto; }

/* Pillar variants — restrained palette with structural variety:
   paper / cream / paper / navy-on-cream — gives rhythm without the rainbow.
   Big number does the heavy lifting; shamrock is the single accent. */

.pillar .text h3{ text-wrap: balance; }
.pillar .text .eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--shamrock); font-weight: 700;
}
.pillar .text .eyebrow::before{
  content:""; width: 28px; height: 2px; background: var(--shamrock); display:inline-block;
}
.pillar .tlink{ border-color: var(--shamrock); color: var(--navy); font-weight: 600; }
.pillar .tlink:hover{ border-color: var(--navy); color: var(--navy); }

/* Each pillar gets a slightly different surface tint, full-width */
.pillar-01 .wash{ background: var(--paper); }
.pillar-01 .pnum{ color: var(--shamrock); opacity: 0.22; right: var(--s-6); }

.pillar-02 .wash{ background: #F3EFE6; }
.pillar-02 .pnum{ color: var(--shamrock); opacity: 0.22; left: var(--s-6); }

.pillar-03 .wash{ background: var(--paper); }
.pillar-03 .pnum{ color: var(--shamrock); opacity: 0.22; right: var(--s-6); }

.pillar-04 .wash{ background: var(--navy); }
.pillar-04 .pnum{ color: var(--yellow); opacity: 0.92; left: var(--s-6); }
.pillar-04 .text .eyebrow,
.pillar-04 .text h3{ color: #fff; }
.pillar-04 .text p{ color: rgba(255,255,255,0.86); }
.pillar-04 .text .eyebrow{ color: var(--yellow); }
.pillar-04 .text .eyebrow::before{ background: var(--yellow); }
.pillar-04 .tlink{ border-color: var(--yellow); color: #fff; }
.pillar-04 .tlink:hover{ border-color: #fff; color: #fff; }

/* Desktop layout: alternate text/visual sides */
@media (min-width: 901px){
  .pillar-02 .text, .pillar-04 .text{ order: 2; margin-left: auto; }
  .pillar-02 .visual, .pillar-04 .visual{ order: 1; }
}
@media (prefers-reduced-motion: reduce){
  .pillar .wash{ transition: none; }
}

/* ---------- METHODOLOGY ---------- */
.methodology{ background: var(--paper); }
.method-head{ text-align: center; margin-bottom: var(--s-8); }
.method-head p{ margin: 0 auto; max-width: 720px; }
.method-flow{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); align-items: start;
  position: relative;
  padding-top: 56px;
}
.method-flow .method-track{
  position: absolute;
  top: 36px; left: 12%; right: 12%;
  height: 2px; background: var(--navy);
  opacity: 0.18;
  z-index: 0;
}
@media (max-width: 900px){
  .method-flow{ grid-template-columns: 1fr; gap: var(--s-6); padding-top: 0; }
  .method-flow .method-track{ display: none; }
}
.stage{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 140ms);
  z-index: 1;
}
.stage.in-view{ opacity: 1; transform: translateY(0); }
.stage-node{
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 999px;
  position: relative;
  margin-top: -36px;
  box-shadow: 0 6px 16px rgba(15,42,71,.10);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.stage-node::after{
  content:""; position: absolute; inset: 6px;
  border-radius: 999px;
  border: 1px dashed rgba(15,42,71,.25);
}
.stage:hover .stage-node .node-num{ color: var(--white); }
.stage .node-num{
  font-family: var(--ff-display); font-weight: 800;
  font-size: 22px; line-height: 1; color: var(--navy);
  letter-spacing: -0.01em;
  transition: color .25s ease;
  position: relative; z-index: 1;
}
.stage-card{
  margin-top: var(--s-4);
  background: var(--white);
  border: 1px solid rgba(15,42,71,.10);
  border-radius: 12px;
  padding: var(--s-5);
  text-align: center;
  width: 100%;
  min-height: 168px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stage-card::before{
  content:""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--shamrock));
  opacity: 0.85;
  transition: opacity .25s ease, height .25s ease;
}
.stage-card::after{
  content:""; position: absolute;
  inset: 0;
  background: var(--accent, var(--shamrock));
  opacity: 0.05;
  pointer-events: none;
  transition: opacity .25s ease;
}
.stage:hover .stage-card{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,42,71,.10);
  border-color: rgba(15,42,71,.18);
}
.stage:hover .stage-card::before{ opacity: 1; height: 5px; }
.stage:hover .stage-card::after{ opacity: 0.10; }

/* Per-stage accent rotation */
.stage:nth-child(2){ --accent: var(--shamrock); }
.stage:nth-child(3){ --accent: #C77800; }
.stage:nth-child(4){ --accent: #1B4E89; }
.stage:nth-child(5){ --accent: var(--shamrock); }
.stage:hover .stage-node{
  background: var(--accent, var(--shamrock));
  border-color: var(--accent, var(--shamrock));
  transform: translateY(-2px);
}
.stage .name{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 17px; color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: var(--s-2);
  text-transform: none;
}
.stage .desc{
  font-family: var(--ff-body); font-size: 14px;
  color: var(--ink-80); line-height: 1.5;
  text-wrap: pretty;
  margin-top: 0;
}
.method-cta{ text-align: center; margin-top: var(--s-7); }
@media (prefers-reduced-motion: reduce){
  .stage{ opacity: 1; transform: none; transition: none; }
  .stage:hover .stage-node, .stage:hover .stage-card{ transform: none; }
}

/* ---------- RESULTS ---------- */
.results-head{ text-align: center; margin-bottom: var(--s-8); }
.results-head p{ margin: 0 auto; max-width: 600px; }
.result-cards{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
@media (max-width: 900px){ .result-cards{ grid-template-columns: 1fr; } }
.result-card{
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 32px;
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-width .18s ease;
}
.result-card:hover{ border-width: 2px; padding: 31px; }
.result-card .qmark{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 64px; line-height: 1;
  color: var(--yellow); opacity: .55;
  position: absolute; top: 16px; left: 24px;
}
.result-card .quote{
  font-family: var(--ff-body); font-size: 17px;
  color: var(--ink-90); line-height: 1.5;
  margin: 40px 0 0;
  position: relative; z-index: 1;
}
.result-card .attrib{ margin-top: auto; display:flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.result-card .attrib .name{
  font-family: var(--ff-display); font-weight: 600; font-size: 16px; color: var(--navy);
  display: block;
}
.result-card .attrib .role{
  font-family: var(--ff-body); font-size: 14px; color: var(--ink-70);
  display: block;
  margin-top: 2px;
}
.result-card .li-icon{ color: var(--navy); flex-shrink: 0; }
.results-more{ text-align: center; margin-top: 48px; }

/* ---------- INSIGHTS ---------- */
.insights-head{ display:flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-8); flex-wrap: wrap; }
.insights-head h2{ max-width: 14ch; margin: 0; }

.post-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px){ .post-cards{ grid-template-columns: 1fr; } }
.post{
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-width .18s ease;
  display: flex; flex-direction: column;
}
.post:hover{ border-width: 2px; }
.post .ftr{
  aspect-ratio: 16/9;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.post .ftr::after{
  content:"";
  position: absolute; inset: 0;
  background-image: url("../assets/bag-happy.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: 85% 75%;
  opacity: 0.14;
}
.post .ftr.navy{ background: var(--navy); }
.post .ftr.purple{ background: var(--navy); }
.post .ftr.orange{ background: var(--navy); }
.post .ftr .cat{
  position: absolute; top: 12px; left: 12px;
  font-family: var(--ff-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yellow);
  z-index: 2;
}
.post .body{ padding: 24px; display:flex; flex-direction: column; gap: var(--s-3); }
.post h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 21px; line-height: 1.25;
  color: var(--navy); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post .excerpt{
  font-family: var(--ff-body); font-size: 15px;
  color: var(--ink-80); line-height: 1.45;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post .byline{
  font-family: var(--ff-body); font-size: 13px;
  color: var(--ink-60); margin: 0;
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  background: var(--yellow);
  text-align: center;
  padding: var(--s-9) 0;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
.final-cta h2{ max-width: 14ch; margin: 0 auto var(--s-4); font-size: clamp(32px, 4vw, 48px); }
.final-cta p{ max-width: 600px; margin: 0 auto; font-size: 19px; color: var(--ink-90); }
.final-cta .btn{ margin-top: 40px; }
.final-cta .reassure{ margin-top: var(--s-5); font-size: 14px; color: var(--ink-80); font-style: italic; }

/* ---------- FOOTER ---------- */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,.85);
  padding: 64px 0 32px;
}
.footer-cols{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: var(--s-7);
}
@media (max-width: 900px){ .footer-cols{ grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 560px){ .footer-cols{ grid-template-columns: 1fr; } }
.site-footer img.logo{ height: 56px; width: auto; }
.site-footer .tagline{ font-family: var(--ff-display); font-weight: 600; color: var(--yellow); font-size: 16px; margin-top: var(--s-4); }
.site-footer .blurb{ color: rgba(255,255,255,.8); font-size: 14px; margin-top: var(--s-3); max-width: 36ch; }
.site-footer .footer-heading{
  margin: 0 0 var(--s-4);
  font-family: var(--ff-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--yellow);
}
.site-footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a{ color: rgba(255,255,255,.9); text-decoration: none; font-size: 15px; }
.site-footer a:hover{ color: var(--yellow); }
.footer-nl{ display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.footer-nl input{
  flex: 1; padding: 10px 14px; font: inherit; font-family: var(--ff-body);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: var(--white);
  border-radius: var(--radius-sm);
}
.footer-nl input::placeholder{ color: rgba(255,255,255,.5); }
.footer-nl button{
  background: var(--yellow); color: var(--navy);
  border: 0; padding: 10px 16px;
  font-family: var(--ff-display); font-weight: 600; font-size: 14px;
  border-radius: var(--radius-sm);
}
.footer-social a{ margin-right: var(--s-3); display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom{
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
  display:flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.65);
}
.footer-bottom a{ color: rgba(255,255,255,.7); text-decoration: none; margin-left: var(--s-4); }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--s-5) var(--s-6);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-5);
  align-items: center;
  z-index: 80;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.cookie-banner.hidden{ display: none; }
.cookie-banner h4{ margin: 0 0 6px; color: var(--yellow); font-family: var(--ff-display); font-size: 16px; font-weight: 700; }
.cookie-banner p{ margin: 0; color: rgba(255,255,255,.82); font-size: 14px; max-width: 60ch; }
.cookie-banner p a{ color: var(--yellow); }
.cookie-banner .actions{ display:flex; gap: var(--s-3); flex-wrap: wrap; }
.cookie-banner .btn--primary{ background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.cookie-banner .btn--primary:hover{ background: var(--white); border-color: var(--white); }
.cookie-banner .btn--ghost{ color: var(--white); border-color: rgba(255,255,255,.5); }
.cookie-banner .cookie-small{
  background: transparent; border: 0; color: rgba(255,255,255,.75);
  font-family: var(--ff-display); font-size: 13px; text-decoration: underline;
  padding: 0; cursor: pointer;
}
@media (max-width: 700px){
  .cookie-banner{ grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero{ padding: var(--s-9) 0; }
.about-hero-inner{
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s-8);
  align-items: center;
  position: relative;
}
.about-hero h1{ max-width: 14ch; }
.about-hero .sub{ font-size: 19px; max-width: 540px; color: var(--ink-90); margin-bottom: 0; }
.about-portrait{
  aspect-ratio: 4/5;
  border: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy);
  max-width: 460px;
  margin-left: auto;
  width: 100%;
}
.about-portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (max-width: 900px){
  .about-hero-inner{ grid-template-columns: 1fr; gap: var(--s-7); }
  .about-portrait{ margin: 0 auto; max-width: 340px; }
}

/* --- Borrowed belief story --- */
.story{ background: var(--white); }
.story-grid{
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 900px){
  .story-grid{ grid-template-columns: 1fr; gap: var(--s-6); }
}
.story-body{ max-width: 600px; }
.story-body p{ font-size: 17px; line-height: 1.65; }
.story-close{
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.2vw, 26px);
  color: var(--navy); margin-top: var(--s-5);
  line-height: 1.3;
}

.story-pq{
  padding: 40px 48px;
  font-size: clamp(24px, 2.4vw, 28px);
  margin-bottom: var(--s-7);
}
.bag-progression{
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; flex-wrap: wrap;
}
.bag-progression .pb{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i,0) * 180ms);
}
.bag-progression .pb.in{ opacity: 1; transform: translateY(0); }
.bag-progression img{ height: 82px; width: auto; }
.bag-progression .chev{
  color: var(--navy); opacity: 0.6; font-family: var(--ff-display); font-weight: 700;
}
.bag-prog-caption{
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: 15px; color: var(--ink-80);
  margin-top: var(--s-5);
  opacity: 0; transition: opacity .5s ease;
  transition-delay: 1200ms;
}
.bag-prog-caption.in{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .bag-progression .pb, .bag-prog-caption{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 560px){
  .bag-progression img{ height: 60px; }
}

/* --- Differentiation (navy band) --- */
.diff{
  background: var(--navy); color: rgba(255,255,255,.9);
  padding: var(--s-9) 0;
  text-align: center;
}
@media (max-width: 900px){ .diff{ padding: var(--s-8) 0; } }
.diff .eyebrow{ color: var(--yellow); }
.diff h2{ color: var(--white); max-width: 22ch; margin: 0 auto var(--s-6); }
.diff-body{ max-width: 700px; margin: 0 auto; }
.diff-body p{ color: rgba(255,255,255,.9); font-size: 18px; line-height: 1.6; margin-left: auto; margin-right: auto; }

/* --- Background/experience --- */
.bg-sec{ background: var(--white); padding: var(--s-9) 0; }
.bg-wrap{ max-width: 800px; margin: 0 auto; }
.bg-wrap .eyebrow, .bg-wrap h2{ text-align: center; }
.bg-wrap h2{ margin-bottom: var(--s-7); }
.bg-wrap p{ max-width: none; }

/* --- Speaking --- */
.speaking{ background: var(--white); padding: var(--s-9) 0; position: relative; overflow: hidden; }
.speaking-grid{
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
  position: relative;
}
.speaking-photo-wrap{
  position: relative;
  padding: 32px 32px 32px 32px;
  grid-column: 1 / -1;
}
.speaking-photo-wrap::before{
  content:""; position: absolute;
  left: 0; right: 0; top: 32px; bottom: 32px;
  background: var(--yellow);
  z-index: 0;
}
@media (max-width: 900px){
  .speaking-photo-wrap{ padding: 20px; }
  .speaking-photo-wrap::before{ top: 20px; bottom: 20px; }
}
.speaking-photo{
  position: relative; z-index: 1;
  aspect-ratio: 16/9;
  border: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy);
  max-width: 960px;
  margin: 0 auto;
}
.speaking-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.speaking-copy h3{ font-size: 24px; margin-top: var(--s-4); margin-bottom: var(--s-4); }
.speaking-copy p{ font-size: 17px; line-height: 1.6; }

.speaking-events{
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 760px){ .speaking-events{ grid-template-columns: 1fr; } }
.event-card{
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.event-card .ev-name{ font-family: var(--ff-display); font-weight: 600; font-size: 16px; color: var(--navy); }
.event-card .ev-venue{ font-family: var(--ff-body); font-size: 14px; color: var(--ink-80); margin-top: 6px; }
.event-card .ev-date{ font-family: var(--ff-body); font-size: 13px; color: var(--ink-60); font-style: italic; margin-top: 6px; }

/* --- Core values --- */
.values{
  background: var(--yellow);
  padding: var(--s-9) 0;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
@media (max-width: 900px){ .values{ padding: var(--s-8) 0; } }
.values-head{ text-align: center; margin-bottom: var(--s-8); }
.values-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }
.value-card{
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 24px;
  background: transparent;
}
.value-card .vname{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--s-3);
}
.value-card p{
  font-family: var(--ff-body); font-size: 16px; line-height: 1.5;
  color: var(--ink-90); margin: 0; max-width: none;
}

/* --- Testimonials grid --- */
.testimonials-sec{ background: var(--white); padding: var(--s-9) 0; }
.testimonials-head{ text-align: center; margin-bottom: var(--s-8); max-width: 760px; margin-left: auto; margin-right: auto; }
.testimonials-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px){ .testimonials-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .testimonials-grid{ grid-template-columns: 1fr; } }

.tcard{
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 28px;
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.tcard .qmark{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 56px; line-height: 1;
  color: var(--yellow); opacity: .55;
  position: absolute; top: 12px; left: 20px;
}
.tcard .quote{
  font-family: var(--ff-body); font-size: 15px;
  color: var(--ink-90); line-height: 1.55;
  margin: 36px 0 0;
  position: relative; z-index: 1;
}
.tcard .attrib{ margin-top: auto; display:flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); padding-top: var(--s-3); }
.tcard .attrib .name{ font-family: var(--ff-display); font-weight: 600; font-size: 15px; color: var(--navy); display: block; }
.tcard .attrib .role{ font-family: var(--ff-body); font-size: 13px; color: var(--ink-70); display: block; margin-top: 2px; }
.tcard .attrib .when{ font-family: var(--ff-body); font-size: 12px; color: var(--ink-60); display: block; margin-top: 2px; font-style: italic; }
.tcard .li-icon{ color: var(--navy); flex-shrink: 0; }

/* Featured Penny card */
.tcard--featured{
  grid-column: span 2;
  border-width: 2px;
  padding: 40px;
  background: linear-gradient(0deg, rgba(255,191,0,.08), rgba(255,191,0,.08)), var(--white);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (max-width: 900px){
  .tcard--featured{ grid-column: span 2; grid-template-columns: 100px 1fr; padding: 28px; gap: var(--s-5); }
}
@media (max-width: 640px){
  .tcard--featured{ grid-column: span 1; grid-template-columns: 1fr; text-align: left; }
}
.tcard--featured .photo{
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--navy); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 700; font-size: 36px;
  overflow: hidden;
}
.tcard--featured .photo img{ width: 100%; height: 100%; object-fit: cover; }
.tcard--featured .pre-eyebrow{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 var(--s-3);
}
.tcard--featured .pull{
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.3; color: var(--navy);
  margin: 0 0 var(--s-4);
}
.tcard--featured .body{
  font-family: var(--ff-body); font-size: 15px; line-height: 1.55;
  color: var(--ink-90); margin: 0 0 var(--s-4);
}
.tcard--featured .attrib{ margin: 0; }

.testimonials-foot{
  text-align: center; margin-top: var(--s-7);
  font-family: var(--ff-body); font-style: italic; font-size: 17px;
  color: var(--ink-80);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}

/* ============================================================
   SERVICES PAGES — overview + 4 pillar pages
   Shared accent colour system via .svc-accent-{pillar}
   ============================================================ */

/* Accent scoping: every pillar page sets an --accent on its root wrapper */
.svc-purple{ --accent: var(--purple); --accent-soft: rgba(83,58,113,.08); --accent-ink: var(--white); }
.svc-orange{ --accent: var(--orange); --accent-soft: rgba(244,93,2,.08); --accent-ink: var(--white); }
.svc-pink  { --accent: var(--pink);   --accent-soft: rgba(255,114,159,.14); --accent-ink: var(--navy); }
.svc-yellow{ --accent: var(--yellow); --accent-soft: rgba(255,191,0,.22); --accent-ink: var(--navy); }

/* Breadcrumb */
.breadcrumb{
  font-family: var(--ff-body); font-size: 14px;
  color: var(--ink-70); margin: 0 0 var(--s-5);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.breadcrumb a{ color: var(--ink-70); text-decoration: none; }
.breadcrumb a:hover{ color: var(--navy); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.breadcrumb .sep{ color: var(--ink-40); }
.breadcrumb [aria-current="page"]{ color: var(--navy); font-weight: 600; }

/* Pillar hero (shared) */
.pillar-hero{
  background: var(--yellow);
  color: var(--navy);
  padding: var(--s-9) 0 var(--s-9);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--navy);
}
.pillar-hero .hero-pattern{
  opacity: 0.07;
}
.pillar-hero-inner{
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: center;
  position: relative;
}
@media (max-width: 900px){
  .pillar-hero-inner{ grid-template-columns: 1fr; gap: var(--s-6); }
}
.pillar-hero .eyebrow{ color: var(--accent, var(--navy)); }
.pillar-hero h1{ max-width: 16ch; }
.pillar-hero .sub{
  font-size: clamp(18px,1.5vw,21px);
  max-width: 560px; color: var(--navy);
  margin-bottom: 0;
}

.pillar-hero-visual{
  position: relative;
  padding: var(--s-6);
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.pillar-hero-visual::before{
  content:""; position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 85%;
  background: var(--accent, var(--navy));
  opacity: 0.12;
  z-index: 0;
  border-radius: var(--radius-sm);
}
.pillar-hero-visual .bag-stack{
  position: relative; z-index: 1;
  display:flex; align-items: center; justify-content: center; gap: var(--s-5);
}
.pillar-hero-visual .bag-stack img{ height: clamp(200px, 22vw, 300px); width: auto; }
.pillar-hero-visual .bag-stack .arrow{
  width: 56px; height: 2px; background: var(--navy); position: relative;
}
.pillar-hero-visual .bag-stack .arrow::after{
  content:""; position:absolute; right: -2px; top: -7px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  transform: rotate(45deg);
}
@media (max-width: 900px){
  .pillar-hero-visual{ min-height: 280px; }
  .pillar-hero-visual::before{ width: 90%; left: 5%; right: 5%; }
}

/* ---- What this pillar delivers (4 cards) ---- */
.svc-deliver{ background: var(--white); padding: var(--s-9) 0; }
.svc-deliver-head{ text-align: center; margin-bottom: var(--s-8); max-width: 760px; margin-left: auto; margin-right: auto; }
.deliver-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 760px){ .deliver-grid{ grid-template-columns: 1fr; } }
.deliver-card{
  background: var(--white);
  border: 1px solid var(--ink-15);
  border-top: 4px solid var(--accent, var(--navy));
  border-radius: var(--radius-sm);
  padding: var(--s-6);
}
.deliver-card h3{
  font-size: 20px; line-height: 1.25;
  margin-bottom: var(--s-3);
}
.deliver-card p{
  font-size: 16px; line-height: 1.55;
  color: var(--ink-90);
  margin: 0; max-width: none;
}

/* ---- Who it's for (3 buyer cards) ---- */
.svc-audience{ background: var(--paper); padding: var(--s-9) 0; }
.svc-audience.on-yellow{ background: var(--yellow); border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.svc-audience-head{ text-align: center; margin-bottom: var(--s-7); max-width: 720px; margin-left: auto; margin-right: auto; }
.audience-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px){ .audience-grid{ grid-template-columns: 1fr; } }
.audience-card{
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
}
.svc-audience.on-yellow .audience-card{ border-width: 2px; }
.audience-card h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 18px; line-height: 1.25;
  color: var(--navy); margin: 0 0 var(--s-3);
}
.audience-card p{ font-size: 15px; line-height: 1.55; color: var(--ink-90); margin: 0; max-width: none; }

/* ---- How it works timeline (4 steps) ---- */
.svc-steps{ background: var(--white); padding: var(--s-9) 0; }
.svc-steps-head{ text-align: center; margin-bottom: var(--s-7); }
.steps-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  position: relative;
}
@media (max-width: 900px){ .steps-grid{ grid-template-columns: 1fr; } }
.step{
  position: relative;
  padding: var(--s-5);
  border-top: 1px solid var(--accent, var(--navy));
}
.step .step-num{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 40px; line-height: 1;
  color: var(--accent, var(--navy));
  margin-bottom: var(--s-3);
}
.step .step-name{
  font-family: var(--ff-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 13px; color: var(--navy);
  margin-bottom: var(--s-3);
}
.step p{ font-size: 15px; line-height: 1.5; color: var(--ink-80); margin: 0; max-width: none; }

/* ---- Long-form editorial band (why in-env works / coach-the-coach) ---- */
.svc-editorial{
  background: var(--navy); color: rgba(255,255,255,.92);
  padding: var(--s-9) 0;
}
.svc-editorial .eyebrow{ color: var(--yellow); }
.svc-editorial h2{ color: var(--white); max-width: 22ch; margin: 0 auto var(--s-6); text-align: center; }
.svc-editorial .body{ max-width: 700px; margin: 0 auto; }
.svc-editorial .body p{ color: rgba(255,255,255,.9); font-size: 17px; line-height: 1.65; margin-left: auto; margin-right: auto; }

/* ---- Cross-link (two pillars) ---- */
.svc-crosslink{ background: var(--paper); padding: var(--s-9) 0; }
.crosslink-head{ text-align: center; margin-bottom: var(--s-7); }
.crosslink-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  max-width: 920px; margin: 0 auto;
}
@media (max-width: 760px){ .crosslink-grid{ grid-template-columns: 1fr; } }
.xlink-card{
  display: block;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: var(--s-6);
  text-decoration: none; color: inherit;
  transition: border-width .18s ease, transform .18s ease;
  position: relative;
}
.xlink-card:hover{ border-width: 2px; padding: calc(var(--s-6) - 1px); }
.xlink-card .xl-eyebrow{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.xlink-card h3{
  font-family: var(--ff-display); font-weight: 600; font-size: 22px;
  color: var(--navy); margin: 0 0 var(--s-3);
}
.xlink-card p{ font-size: 15px; line-height: 1.5; color: var(--ink-80); margin: 0 0 var(--s-4); max-width: none; }
.xlink-card .arr-row{
  font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
}
.xlink-card.accent-purple .xl-eyebrow{ color: var(--purple); }
.xlink-card.accent-orange .xl-eyebrow{ color: var(--orange); }
.xlink-card.accent-pink   .xl-eyebrow{ color: var(--pink); }
.xlink-card.accent-yellow .xl-eyebrow{ color: var(--navy); background: var(--yellow); padding: 2px 8px; display: inline-block; }

/* ---- Single featured testimonial (named) ---- */
.svc-test{ background: var(--white); padding: var(--s-9) 0; }
.svc-test-card{
  max-width: 860px; margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--navy);
  border-top: 6px solid var(--accent, var(--navy));
  border-radius: var(--radius-sm);
  padding: var(--s-8);
  position: relative;
}
.svc-test-card::before{
  content: "\201C";
  font-family: var(--ff-display); font-weight: 700;
  font-size: 96px; line-height: 1;
  color: var(--accent, var(--yellow));
  opacity: 0.35;
  position: absolute; top: 24px; left: 32px;
}
.svc-test-card blockquote{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.4;
  color: var(--navy); margin: 40px 0 var(--s-6);
  font-style: italic;
  position: relative; z-index: 1;
}
.svc-test-card .attrib{
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-15);
}
.svc-test-card .attrib .name{
  font-family: var(--ff-display); font-weight: 700; font-size: 17px; color: var(--navy);
  display: block;
}
.svc-test-card .attrib .role{
  font-family: var(--ff-body); font-size: 14px; color: var(--ink-70);
  display: block; margin-top: 2px;
}
.svc-test-card .li-icon{ color: var(--navy); flex-shrink: 0; }
.svc-test-context{
  text-align: center; max-width: 720px; margin: 0 auto var(--s-5);
  font-family: var(--ff-body); font-style: italic; font-size: 15px; color: var(--ink-70);
}

/* ---- Services overview: journey flow ---- */
.svc-journey{ background: var(--white); padding: var(--s-9) 0; }
.svc-journey-head{ text-align: center; margin-bottom: var(--s-8); max-width: 760px; margin-left: auto; margin-right: auto; }
.journey-flow{
  display: grid; grid-template-columns: repeat(7, auto);
  gap: 0; align-items: stretch; justify-content: center;
  max-width: 100%; overflow-x: auto;
  padding: var(--s-4) 0;
}
@media (max-width: 900px){
  .journey-flow{ grid-template-columns: 1fr; justify-content: stretch; gap: var(--s-3); }
  .journey-flow .j-arrow{ display: none; }
}
.j-card{
  min-width: 180px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--s-2); justify-content: center;
}
.j-card.accent-yellow{ border-color: var(--yellow); border-width: 3px; }
.j-card.accent-purple{ border-color: var(--purple); }
.j-card.accent-orange{ border-color: var(--orange); }
.j-card.accent-pink  { border-color: var(--pink); }
.j-card .j-eyebrow{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60);
}
.j-card .j-title{
  font-family: var(--ff-display); font-weight: 700; font-size: 17px;
  color: var(--navy); line-height: 1.25;
}
.j-arrow{
  align-self: center; padding: 0 var(--s-3);
  font-family: var(--ff-display); font-weight: 700; font-size: 28px;
  color: var(--navy);
}
.journey-note{
  text-align: center; margin-top: var(--s-6);
  font-family: var(--ff-body); font-style: italic;
  font-size: 15px; color: var(--ink-70);
}

/* ---- Services overview: Q&A editorial ---- */
.svc-qa{ background: var(--yellow); padding: var(--s-9) 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.svc-qa-inner{ max-width: 800px; margin: 0 auto; text-align: left; }
.svc-qa-inner .eyebrow, .svc-qa-inner h2{ text-align: center; }
.svc-qa-inner h2{ margin-bottom: var(--s-7); }
.qa-item{ margin-bottom: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--navy); }
.qa-item:last-child{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.qa-item .q{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.3;
  color: var(--navy); margin: 0 0 var(--s-4);
}
.qa-item .a{
  font-family: var(--ff-body); font-size: 17px; line-height: 1.6;
  color: var(--ink-90); margin: 0; max-width: none;
}

/* ---- Methodology on Assessments page (four moments expanded) ---- */
.methodology-full{ background: var(--white); padding: var(--s-9) 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.methodology-full-head{ text-align: center; margin-bottom: var(--s-8); max-width: 760px; margin-left: auto; margin-right: auto; }
.moments-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
@media (max-width: 760px){ .moments-grid{ grid-template-columns: 1fr; } }
.moment{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--yellow);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i,0) * 180ms);
}
.moment.in-view{ opacity: 1; transform: translateY(0); }
.moment .bag-slot{
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.moment .bag-slot img{ max-height: 110px; width: auto; }
.moment .m-num{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.1em;
  color: var(--navy); opacity: 0.5;
  display: block; margin-bottom: var(--s-2);
}
.moment h3{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; line-height: 1.2;
  color: var(--navy); margin: 0 0 var(--s-3);
}
.moment p{ font-size: 15px; line-height: 1.55; color: var(--ink-90); margin: 0; max-width: none; }
@media (max-width: 560px){
  .moment{ grid-template-columns: 1fr; }
  .moment .bag-slot{ width: auto; height: 80px; justify-content: flex-start; }
  .moment .bag-slot img{ max-height: 80px; }
}
@media (prefers-reduced-motion: reduce){
  .moment{ opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   INSIGHTS (blog index, category, post)
   ============================================================= */

/* Category pill nav */
.cat-nav{
  background: var(--white);
  border-top: 1px solid var(--ink-15);
  border-bottom: 1px solid var(--ink-15);
  padding: var(--s-7) 0;
}
.cat-nav-row{
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; align-items: center;
}
.cat-pill{
  display: inline-flex; align-items: center;
  font-family: var(--ff-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--navy);
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: 100px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.cat-pill:hover{ background: var(--navy); color: var(--yellow); }
.cat-pill[aria-current="page"],
.cat-pill.is-active{ background: var(--navy); color: var(--yellow); }

/* Featured post (index) */
.featured-post{ padding: var(--s-9) 0; background: var(--paper); }
.featured-inner{
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--s-8); align-items: center;
}
@media (max-width: 900px){
  .featured-inner{ grid-template-columns: 1fr; gap: var(--s-6); }
}
.featured-img{
  aspect-ratio: 4/3;
  background: var(--navy);
  border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.featured-img .mini-flow{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; width: 86%; color: var(--yellow);
  border: 1px solid rgba(255,191,0,.35);
}
.featured-img .mini-flow > div{
  padding: 18px 14px;
  background: rgba(255,255,255,0.02);
}
.featured-img .mini-flow .mnum{
  font-family: var(--ff-display); font-weight: 700; font-size: 28px;
  color: var(--yellow); line-height: 1; margin-bottom: 8px;
}
.featured-img .mini-flow .mname{
  font-family: var(--ff-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.featured-meta .cat-tag{
  font-family: var(--ff-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 var(--s-4);
}
.featured-meta h2{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 36px); line-height: 1.15;
  color: var(--navy); margin: 0 0 var(--s-4);
}
.featured-meta .excerpt{
  font-family: var(--ff-body); font-weight: 400;
  font-size: 17px; line-height: 1.6; color: var(--ink-90);
  max-width: 480px; margin: 0 0 var(--s-4);
}
.featured-meta .byline{
  font-family: var(--ff-body); font-size: 14px; color: var(--ink-60);
  margin: 0 0 var(--s-5);
}
.featured-meta .cat-tag-link{
  color: var(--orange); text-decoration: none; border-bottom: 1px solid transparent;
}
.featured-meta .cat-tag-link:hover{ border-bottom-color: currentColor; }

/* Post grid cards */
.post-grid-section{ padding: var(--s-9) 0; background: var(--paper); }
.post-grid-section.tight{ padding-top: 0; }
.pg-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-7);
}
.pg-head h2{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px); margin: 0;
}
.post-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px){ .post-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .post-grid{ grid-template-columns: 1fr; } }

.p-card{
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--navy);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-width .18s ease;
}
.p-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(4,27,68,.08);
}
.p-card-img{
  aspect-ratio: 16/9;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--s-4);
}
.p-card-img.navy{ background: var(--navy); }
.p-card-img.purple{ background: var(--purple); }
.p-card-img.orange{ background: var(--orange); }
.p-card-img.pink{ background: var(--pink); }
.p-card-img.yellow{ background: var(--yellow); }
.p-card-img.paper{ background: var(--paper); border-bottom: 1px solid var(--ink-15); }

.p-card-img .bag-motif{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62%; height: auto; opacity: 0.18;
  pointer-events: none;
}
.p-card-img.paper .bag-motif{ opacity: 0.35; }
.p-card-img.yellow .bag-motif{ opacity: 0.25; }

.p-card-img .cat-tag{
  position: relative; z-index: 1;
  font-family: var(--ff-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px;
  background: var(--white);
  border-radius: 2px;
  margin: 0;
}
.p-card-img.navy .cat-tag,
.p-card-img.purple .cat-tag,
.p-card-img.orange .cat-tag,
.p-card-img.pink .cat-tag{
  color: var(--navy);
}
.p-card-img.yellow .cat-tag,
.p-card-img.paper .cat-tag{ color: var(--navy); border: 1px solid var(--navy); }

.p-card-body{ padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.p-card-body h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 20px; line-height: 1.3;
  color: var(--navy); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.p-card-body .excerpt{
  font-family: var(--ff-body); font-size: 15px; line-height: 1.55;
  color: var(--ink-80); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-card-body .byline{
  font-family: var(--ff-body); font-size: 13px; color: var(--ink-60);
  margin-top: auto;
}

/* Pagination */
.pagination{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-15);
}
.pagination .tlink{ display: inline-flex; gap: 8px; }

/* Newsletter panel (insights) */
.nl-panel{
  background: var(--navy); color: var(--white);
  padding: var(--s-9) 0;
}
.nl-panel.compact{ padding: var(--s-8) 0; }
.nl-inner{
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8); align-items: center;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 800px){ .nl-inner{ grid-template-columns: 1fr; gap: var(--s-5); } }
.nl-inner p.eyebrow{ color: var(--yellow); }
.nl-inner h2{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(26px, 3vw, 34px); color: var(--white);
  margin: 0 0 var(--s-4); line-height: 1.2;
}
.nl-inner .lede{
  font-family: var(--ff-body); font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.85); margin: 0;
}
.nl-form{
  display: flex; flex-direction: column; gap: var(--s-3);
}
.nl-form .row{ display: flex; gap: var(--s-3); }
.nl-form input[type="email"]{
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--ff-body); font-size: 15px;
  border-radius: var(--radius-sm);
}
.nl-form input[type="email"]::placeholder{ color: rgba(255,255,255,.5); }
.nl-form input[type="email"]:focus{ outline: 2px solid var(--yellow); outline-offset: 2px; }
.nl-form button{
  background: var(--yellow); color: var(--navy);
  font-family: var(--ff-display); font-weight: 600; font-size: 15px;
  border: 0; padding: 14px 22px;
  border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap;
}
.nl-form button:hover{ background: #FFCF33; }
.nl-form .consent{
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-family: var(--ff-body); font-size: 13px; color: rgba(255,255,255,.75);
  line-height: 1.5;
}
.nl-form .consent a{ color: var(--yellow); }
.nl-form .consent input{ margin-top: 3px; accent-color: var(--yellow); }

/* ---------- BLOG POST ---------- */
.post-header{
  padding: var(--s-9) 0 var(--s-7);
  background: var(--paper);
}
.post-header-inner{
  max-width: 800px; margin: 0 auto;
  text-align: center;
}
.post-header .breadcrumb{ justify-content: center; margin-bottom: var(--s-5); }
.post-header .cat-tag{
  font-family: var(--ff-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); text-decoration: none;
  display: inline-block; margin-bottom: var(--s-4);
}
.post-header.cat-leadership .cat-tag{ color: var(--purple); }
.post-header.cat-performance .cat-tag{ color: var(--navy); }
.post-header.cat-coaching .cat-tag{ color: var(--pink); }
.post-header.cat-mystery-shopping .cat-tag{ color: var(--navy); }
.post-header h1{
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1; color: var(--navy);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.post-header .subtitle{
  font-family: var(--ff-display); font-weight: 500; font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4; color: var(--ink-80);
  margin: 0 auto var(--s-6); max-width: 680px;
  text-wrap: pretty;
}
.post-header .byline-row{
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--ff-body); font-size: 14px; color: var(--ink-60);
}
.post-header .byline-row img{ width: 36px; height: 36px; object-fit: contain; }
.post-header .byline-row strong{ color: var(--ink-90); font-weight: 600; }

.post-featured-img{
  max-width: 1000px; margin: 0 auto var(--s-8);
  padding: 0 var(--s-5);
}
.post-featured-img figure{ margin: 0; }
.post-featured-img .imgbox{
  aspect-ratio: 16/9;
  background: var(--yellow);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-7);
  position: relative; overflow: hidden;
}
.post-featured-img .fourstage{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5); width: 100%; max-width: 820px;
}
.post-featured-img .fourstage > div{
  background: var(--navy);
  color: var(--yellow);
  padding: var(--s-5);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.post-featured-img .fourstage .num{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 32px; color: var(--yellow); line-height: 1;
}
.post-featured-img .fourstage .name{
  font-family: var(--ff-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.03em; color: var(--white);
  line-height: 1.3;
}
.post-featured-img figcaption{
  font-family: var(--ff-body); font-style: italic;
  font-size: 14px; color: var(--ink-60);
  margin-top: var(--s-3); text-align: center;
}
@media (max-width: 700px){
  .post-featured-img .fourstage{ grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .post-featured-img .imgbox{ padding: var(--s-5); }
}

.post-body{
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--s-5) var(--s-9);
}
.post-body > p,
.post-body > h2,
.post-body > h3,
.post-body > ul,
.post-body > ol,
.post-body > blockquote,
.post-body > .pull-quote{ margin-left: auto; margin-right: auto; }
.post-body p{
  font-family: var(--ff-body); font-weight: 400;
  font-size: 18px; line-height: 1.7; color: var(--ink-90);
  margin: 0 0 var(--s-5);
}
.post-body p.lead{
  font-size: 21px; line-height: 1.6; color: var(--ink);
  margin-bottom: var(--s-6);
}
.post-body p.lead::first-letter{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 64px; line-height: 0.9;
  float: left; margin: 6px 10px 0 0;
  color: var(--navy);
}
.post-body h2{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25;
  color: var(--navy);
  margin: var(--s-8) 0 var(--s-4);
  text-wrap: balance;
}
.post-body h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 22px; line-height: 1.3;
  color: var(--navy); margin: var(--s-6) 0 var(--s-3);
}
.post-body a{
  color: var(--navy);
  background-image: linear-gradient(transparent calc(100% - 2px), var(--yellow) 2px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 2px;
  text-decoration: none;
}
.post-body a:hover{
  background-image: linear-gradient(transparent 0%, var(--yellow) 0%);
}
.post-body ul, .post-body ol{
  font-family: var(--ff-body); font-size: 18px; line-height: 1.7;
  color: var(--ink-90);
  padding-left: var(--s-5);
  margin: 0 0 var(--s-5);
}
.post-body ul li, .post-body ol li{ margin-bottom: var(--s-3); }

.pull-quote{
  background: var(--yellow);
  padding: var(--s-6) var(--s-7);
  margin: var(--s-7) 0;
  border-radius: var(--radius-sm);
  position: relative;
}
.pull-quote p{
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.35; color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

/* Post footer */
.post-footer{
  max-width: 720px; margin: 0 auto;
  padding: var(--s-7) var(--s-5);
  border-top: 1px solid var(--ink-15);
}
.tags-row{
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.tags-row .tag{
  font-family: var(--ff-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--ink-25);
  border-radius: 100px;
}
.tags-row .tag:hover{ border-color: var(--navy); background: var(--navy); color: var(--yellow); }

.author-bio{
  display: grid; grid-template-columns: 80px 1fr; gap: var(--s-5);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--ink-15);
  padding: var(--s-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-6);
}
.author-bio img{ width: 60px; height: 60px; }
.author-bio h4{
  font-family: var(--ff-display); font-weight: 600; font-size: 18px;
  margin: 0 0 var(--s-2); color: var(--navy);
}
.author-bio p{
  font-family: var(--ff-body); font-size: 15px; line-height: 1.6;
  color: var(--ink-80); margin: 0 0 var(--s-3);
}
.author-bio .tlink{ font-size: 14px; }

.share-row{
  display: flex; gap: var(--s-3); align-items: center;
  font-family: var(--ff-body); font-size: 14px; color: var(--ink-60);
}
.share-row .share-label{ margin-right: var(--s-3); }
.share-row button, .share-row a{
  display: inline-flex; gap: 6px; align-items: center;
  background: transparent; border: 1px solid var(--ink-25);
  color: var(--navy); padding: 8px 14px;
  font-family: var(--ff-display); font-weight: 600; font-size: 13px;
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
}
.share-row button:hover, .share-row a:hover{ border-color: var(--navy); background: var(--navy); color: var(--yellow); }

/* Related posts */
.related-posts{ background: var(--paper); padding: var(--s-9) 0; }
.related-posts h2{
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 var(--s-6); color: var(--navy);
}

/* Responsive tightening */
@media (max-width: 700px){
  .post-body p.lead{ font-size: 19px; }
  .post-body p.lead::first-letter{ font-size: 52px; }
}

/* ---------- UTIL ---------- */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* About H1 kicker — keeps warmth, adds substance */
.h1-kicker{
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink-60);
  letter-spacing: 0;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* ============================================================
   TEDx VIDEO FACADE  — used on About, Speaking, Homepage
   Loads YouTube iframe only on click for performance + privacy.
   ============================================================ */
.yt-facade{
  position: relative; display: block;
  width: 100%; aspect-ratio: 16/9;
  background: var(--navy);
  border: 1px solid var(--navy);
  overflow: hidden; cursor: pointer;
  box-shadow: 8px 8px 0 var(--yellow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.yt-facade:hover{ transform: translate(-2px,-2px); box-shadow: 12px 12px 0 var(--yellow); }
.yt-facade:focus-visible{ outline: 3px solid var(--yellow); outline-offset: 4px; }
.yt-facade img.yt-thumb{
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.85; transition: opacity .2s ease;
}
.yt-facade:hover img.yt-thumb{ opacity: 1; }
.yt-facade .yt-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--yellow);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.yt-facade:hover .yt-play{ transform: translate(-50%,-50%) scale(1.08); }
.yt-facade .yt-play::before{
  content: ""; display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent var(--navy);
  margin-left: 6px;
}
.yt-facade .yt-meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, rgba(4,27,68,0) 0%, rgba(4,27,68,.85) 70%, rgba(4,27,68,.95) 100%);
  color: var(--white);
  font-family: var(--ff-display);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
}
.yt-facade .yt-meta .badge{
  display: inline-block; background: var(--white); color: var(--navy);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; font-weight: 700;
  margin-bottom: 8px;
}
.yt-facade .yt-meta .ttl{
  font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.2;
  color: var(--white); margin: 0;
}
.yt-facade .yt-meta .dur{
  font-size: 13px; color: rgba(255,255,255,.8); white-space: nowrap;
  align-self: flex-end;
}
.yt-facade iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
@media (max-width: 720px){
  .yt-facade{ box-shadow: 4px 4px 0 var(--yellow); }
  .yt-facade:hover{ box-shadow: 8px 8px 0 var(--yellow); }
  .yt-facade .yt-play{ width: 64px; height: 64px; }
  .yt-facade .yt-play::before{ border-width: 13px 0 13px 20px; }
}

/* Compact link-out variant used in homepage credibility strip */
.recognition-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-7);
  align-items: stretch;
}
.award-strip{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-5);
  align-items: center;
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--ink-15);
  border-radius: 12px;
  background: var(--white);
  box-sizing: border-box;
  height: 100%;
}
.award-strip .thumb{
  width: 140px; height: 100px;
  border-radius: 8px; overflow: hidden;
  background: var(--navy);
}
.award-strip .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.award-strip .copy{ margin: 0; }
.award-strip .copy .eyebrow{
  margin: 0 0 4px 0; color: var(--shamrock); letter-spacing: 0.14em; font-weight: 700; font-size: 11px; text-transform: uppercase;
}
.award-strip .copy h3{ margin: 0 0 4px 0; font-size: 18px; line-height: 1.25; font-family: var(--ff-display, inherit); color: var(--navy); }
.award-strip .copy p{ margin: 0; font-size: 14px; color: var(--ink-80); }
@media (max-width: 860px){
  .recognition-row{ grid-template-columns: 1fr; }
}
.tedx-strip{
  display: grid; grid-template-columns: 140px 1fr auto; gap: var(--s-5);
  align-items: center;
  padding: var(--s-5); background: var(--white);
  border: 1px solid var(--ink-15);
  border-radius: 12px;
  margin: 0;
  text-decoration: none; color: var(--navy);
  box-sizing: border-box;
  height: 100%;
  transition: border-color .2s ease, transform .2s ease;
}
.tedx-strip:hover{ border-color: var(--navy); transform: translateY(-2px); }
.tedx-strip .thumb{
  position: relative; width: 140px; height: 100px; overflow: hidden; background: var(--navy);
  border-radius: 8px;
}
.tedx-strip .thumb img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.tedx-strip .thumb .play{
  position: absolute; inset: 0; display: grid; place-items: center;
}
.tedx-strip .thumb .play::after{
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 3px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.tedx-strip .copy .eyebrow{ margin: 0 0 4px 0; color: var(--shamrock); letter-spacing: 0.14em; font-weight: 700; }
.tedx-strip .copy h3{ margin: 0 0 4px 0; font-size: 18px; line-height: 1.25; font-family: var(--ff-display); color: var(--navy); }
.tedx-strip .copy p{ margin: 0; font-size: 14px; color: var(--ink-80); }
.tedx-strip .arr{ font-size: 22px; color: var(--navy); }
@media (max-width: 720px){
  .tedx-strip{ grid-template-columns: 1fr; }
  .tedx-strip .arr{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   SERVICES — pillar table-of-contents chip row
   ============================================================= */

html{ scroll-behavior: smooth; }
.pillar[id]{ scroll-margin-top: 112px; }

.service-grid{
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(4,27,68,.18);
  display: block;
}
.service-grid__lead{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(4,27,68,.60);
  margin: 0 0 var(--s-4) 0;
}
.service-grid ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.service-grid li{
  margin: 0;
  border-left: 2px solid var(--c, rgba(4,27,68,.18));
  padding-left: var(--s-5);
}
.service-grid a{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--navy);
  transition: transform .2s ease;
}
.service-grid .num{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.service-grid .num::before{
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c, var(--navy));
  margin-right: 10px;
  vertical-align: 0;
}
.service-grid .lbl{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy);
  position: relative;
  display: inline-block;
}
.service-grid .lbl::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--c, var(--navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.service-grid a:hover .lbl::after{ transform: scaleX(1); }
.service-grid a:hover{ transform: translateY(-1px); }

@media (max-width: 900px){
  .service-grid{ grid-template-columns: 1fr; gap: var(--s-4); }
  .service-grid ul{ grid-template-columns: repeat(2, 1fr); row-gap: var(--s-4); column-gap: var(--s-5); }
  .service-grid li{ border-left: 0; padding-left: 0; }
}
@media (max-width: 520px){
  .service-grid ul{ grid-template-columns: 1fr; }
}

/* =============================================================
   PILLAR DETAIL PAGES
   ============================================================= */

/* Pillar hero — colored band, pulled directly from pillar colour system */
.pillar-hero{ position: relative; padding: var(--s-9) 0 var(--s-8); overflow: hidden; border-bottom: 1px solid var(--navy); }
.pillar-hero .pnum-bg{
  position: absolute; right: -40px; top: 0; line-height: 0.8;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(200px, 28vw, 380px);
  opacity: 0.08;
  pointer-events: none; user-select: none;
  color: var(--navy);
}
.pillar-hero .ph-inner{ position: relative; display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px){ .pillar-hero .ph-inner{ grid-template-columns: 1fr; gap: var(--s-6); } }
.pillar-hero .breadcrumb{ margin-bottom: var(--s-5); }
.pillar-hero .eyebrow{ margin-bottom: var(--s-4); }
.pillar-hero h1{
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05;
  color: var(--navy); margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.pillar-hero .sub{
  font-family: var(--ff-body); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55;
  color: var(--ink-90); max-width: 56ch; margin: 0 0 var(--s-6);
}
.pillar-hero .ph-meta{
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  border-top: 1px solid rgba(4,27,68,.18);
  padding-top: var(--s-5);
  font-family: var(--ff-display); font-size: 13px; color: var(--navy);
}
.pillar-hero .ph-meta div{ display: flex; flex-direction: column; gap: 2px; }
.pillar-hero .ph-meta .k{ font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; }
.pillar-hero .ph-meta .v{ font-weight: 600; font-size: 15px; }
.pillar-hero .ph-visual{ position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.pillar-hero .ph-visual img{ max-height: 280px; width: auto; filter: drop-shadow(0 8px 24px rgba(4,27,68,.15)); }

/* Hero colour variants */
.pillar-hero.hue-purple{ background: #ECE7F1; }
.pillar-hero.hue-purple .eyebrow{ color: var(--purple); }
.pillar-hero.hue-purple .pnum-bg{ color: var(--purple); opacity: 0.12; }

.pillar-hero.hue-orange{ background: #FDE5D4; }
.pillar-hero.hue-orange .eyebrow{ color: var(--orange); }
.pillar-hero.hue-orange .pnum-bg{ color: var(--orange); opacity: 0.14; }

.pillar-hero.hue-pink{ background: #FFE0EA; }
.pillar-hero.hue-pink .eyebrow{ color: #C74673; }
.pillar-hero.hue-pink .pnum-bg{ color: var(--pink); opacity: 0.25; }

.pillar-hero.hue-yellow{ background: var(--yellow); }
.pillar-hero.hue-yellow .eyebrow{ color: var(--navy); }
.pillar-hero.hue-yellow .pnum-bg{ color: var(--navy); opacity: 0.12; }

/* Sectioned body */
.pillar-body{ padding: var(--s-9) 0; background: var(--white); }
.pillar-body .shell{ max-width: 1040px; }
.pillar-body section + section{ margin-top: var(--s-9); }
.pillar-body h2{
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 36px); line-height: 1.2;
  color: var(--navy); margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.pillar-body .eyebrow{ margin-bottom: var(--s-3); }
.pillar-body p{
  font-family: var(--ff-body); font-size: 18px; line-height: 1.65;
  color: var(--ink-90); margin: 0 0 var(--s-4);
  max-width: 68ch;
}
.pillar-body p.lede{ font-size: 21px; line-height: 1.55; color: var(--ink); max-width: 56ch; margin-bottom: var(--s-6); }

/* What's included — colored cards grid */
.pillar-inc{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
@media (max-width: 780px){ .pillar-inc{ grid-template-columns: 1fr; } }
.pi-card{
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(4,27,68,.12);
  border-top: 3px solid var(--c, var(--navy));
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  border-radius: var(--radius-sm);
}
.pi-card .pi-num{
  font-family: var(--ff-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c, var(--navy));
}
.pi-card h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 20px; line-height: 1.3; color: var(--navy); margin: 0;
}
.pi-card p{ font-size: 15.5px; line-height: 1.55; color: var(--ink-90); margin: 0; }

/* Process steps — vertical rail */
.pillar-steps{ display: grid; gap: var(--s-5); position: relative; }
.pillar-steps::before{
  content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px;
  width: 2px; background: var(--c, var(--navy)); opacity: 0.25;
}
.ps-row{
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-5); align-items: start;
  padding: var(--s-4) 0;
}
.ps-dot{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c, var(--navy));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 700; font-size: 16px;
  z-index: 1;
}
.ps-row h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 20px; line-height: 1.3; color: var(--navy); margin: 8px 0 var(--s-2);
}
.ps-row p{ margin: 0; font-size: 16px; }

/* Outcomes — numbered callouts */
.pillar-outcomes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px){ .pillar-outcomes{ grid-template-columns: 1fr; } }
.po-card{
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--navy);
}
.po-card .big{
  font-family: var(--ff-display); font-weight: 700;
  font-size: 48px; line-height: 1; color: var(--c, var(--navy));
  margin-bottom: var(--s-3);
}
.po-card h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 18px; color: var(--navy); line-height: 1.3; margin: 0 0 var(--s-2);
}
.po-card p{ font-size: 15px; line-height: 1.55; margin: 0; }

/* Who it's for — two column */
.pillar-who{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
}
@media (max-width: 780px){ .pillar-who{ grid-template-columns: 1fr; } }
.pw-col{
  padding: var(--s-6);
  border: 1px solid rgba(4,27,68,.15);
  background: var(--paper);
}
.pw-col h3{
  font-family: var(--ff-display); font-weight: 600; font-size: 18px;
  color: var(--navy); margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c, var(--navy));
}
.pw-col ul{ list-style: none; padding: 0; margin: 0; }
.pw-col li{
  position: relative; padding-left: 26px; margin-bottom: var(--s-3);
  font-family: var(--ff-body); font-size: 16px; line-height: 1.5; color: var(--ink-90);
}
.pw-col li::before{
  content: ''; position: absolute; left: 0; top: 9px;
  width: 14px; height: 2px; background: var(--c, var(--navy));
}

/* Pull quote re-use for pillar */
.pillar-body .pull-quote{ margin: var(--s-7) 0; padding: var(--s-6) var(--s-7); }

/* Related pillars footer */
.other-pillars{ background: var(--paper); padding: var(--s-9) 0; border-top: 1px solid rgba(4,27,68,.12); }
.other-pillars h2{ text-align: center; margin-bottom: var(--s-7); }
.op-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px){ .op-grid{ grid-template-columns: 1fr; } }
.op-card{
  display: block; text-decoration: none; color: var(--navy);
  background: var(--white);
  border: 1px solid rgba(4,27,68,.15);
  border-top: 4px solid var(--c, var(--navy));
  padding: var(--s-6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.op-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(4,27,68,.08); }
.op-card .num{
  font-family: var(--ff-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c, var(--navy));
  margin-bottom: var(--s-3);
}
.op-card h3{
  font-family: var(--ff-display); font-weight: 600; font-size: 22px; line-height: 1.25;
  color: var(--navy); margin: 0 0 var(--s-3);
}
.op-card p{ font-size: 15px; line-height: 1.55; color: var(--ink-90); margin: 0 0 var(--s-4); }
.op-card .arr-link{
  font-family: var(--ff-display); font-weight: 600; font-size: 14px;
  color: var(--c, var(--navy)); display: inline-flex; align-items: center; gap: 6px;
}
.op-card:hover .arr-link{ text-decoration: underline; }


/* =============================================================
   PHONE-FIRST RESPONSIVE PASS (≤480px)
   ============================================================= */
@media (max-width: 480px){
  h1{ font-size: clamp(30px, 9vw, 38px); line-height: 1.08; }
  h2{ font-size: clamp(24px, 7vw, 30px); line-height: 1.12; }
  h3{ font-size: clamp(20px, 5.5vw, 24px); }
  .eyebrow{ font-size: 11px; letter-spacing: 0.14em; }
  .sub{ font-size: 16px; line-height: 1.5; }
  .shell{ padding-left: 20px; padding-right: 20px; }
  .section{ padding: var(--s-7) 0; }
  .site-header{ height: 72px; }
  .site-header .logo-link img{ height: 38px; width: auto; }
  .site-header .cta-header{ display: none; }
  .hero{ padding: 32px 0 40px; }
  .hero .grid, .hero .hero-grid{ grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-visual{ order: 2; }
  .hero-copy{ order: 1; }
  .hero-meta-strip{ flex-wrap: wrap; gap: 10px 18px; font-size: 12px; }
  .hero-cta-row{ flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta-row .btn{ width: 100%; justify-content: center; }
  .breadcrumb{ font-size: 12px; }
  .service-grid{ grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .service-grid li{ padding: 14px; border-left-width: 3px; }
  .service-grid .num{ font-size: 12px; }
  .service-grid .lbl{ font-size: 14px; }
  .toc-row{ grid-template-columns: 1fr; gap: var(--s-4); }
  .toc-row .toc-label{ display: none; }
  .toc-row ul{ grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .toc-row li{ padding: 8px 0 8px 12px; }
  .logo-wall{ gap: 28px 36px; padding: var(--s-3) 0; }
  .logo-wall .logo{ font-size: 16px; }
  .logo-wall img.logo{ max-height: 36px; }
  .btn{ padding: 14px 22px; font-size: 15px; }
  .btn-pair{ flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-pair .btn{ width: 100%; justify-content: center; }
  .pillar{ grid-template-columns: 1fr; padding: var(--s-7) 0; }
  .pillar .wash{ display: none; }
  /* Pillar 04 keeps its navy background on mobile so the white text stays readable */
  .pillar-04{ background: var(--navy); padding: var(--s-7) var(--s-5); border-radius: var(--radius-sm); }
  .pillar-04 .pnum{ left: var(--s-5); }
  .pillar-body{ padding: 0; }
  .pillar-meta{ flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
  .pillar-cards, .outcomes-grid{ grid-template-columns: 1fr; gap: var(--s-3); }
  .how-it-runs ol{ grid-template-columns: 1fr; gap: var(--s-4); }
  .who-its-for{ grid-template-columns: 1fr; }
  .other-pillars-grid{ grid-template-columns: 1fr; gap: var(--s-3); }
  .about-hero{ grid-template-columns: 1fr; }
  .about-hero .portrait{ max-width: 280px; margin: 0 auto; }
  .speaking-photo{ aspect-ratio: 16/10; }
  .insights-grid{ grid-template-columns: 1fr; gap: var(--s-5); }
  .post-card .post-thumb{ aspect-ratio: 16/9; }
  .featured-post{ grid-template-columns: 1fr; }
  .featured-post .post-thumb{ aspect-ratio: 16/9; }
  .category-pills{ flex-wrap: wrap; gap: 8px; }
  .post-body{ font-size: 16.5px; }
  .post-body h2{ margin-top: var(--s-7); }
  .post-body blockquote{ padding: 20px; font-size: 18px; }
  .post-header h1{ font-size: clamp(28px, 8vw, 36px); }
  .contact-cards .grid{ grid-template-columns: 1fr !important; }
  .contact-form-grid{ grid-template-columns: 1fr; }
  .contact-form input, .contact-form textarea, .contact-form select{ font-size: 16px; }
  .nl-panel .nl-form{ flex-direction: column; align-items: stretch; gap: 10px; }
  .nl-panel input[type="email"]{ font-size: 16px; }
  .site-footer{ padding: var(--s-7) 0 var(--s-5); }
  .footer-cols{ grid-template-columns: 1fr; gap: var(--s-5); }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .testimonials-grid{ grid-template-columns: 1fr; }
  .tcard{ padding: 22px; }
  .tcard q{ font-size: 17px; }
  .final-cta{ padding: var(--s-8) 0; text-align: left; }
  .final-cta h2{ font-size: clamp(26px, 7.5vw, 34px); }
  .final-cta .btn{ width: 100%; }
  .cookie-banner{ flex-direction: column; align-items: stretch; padding: 16px; gap: 10px; }
  .cookie-banner .cookie-actions{ width: 100%; flex-direction: column; gap: 8px; }
  .cookie-banner .cookie-actions .btn{ width: 100%; }
  .bag-progression{ gap: 12px; padding: var(--s-5) var(--s-3); }
  .bag-progression img{ height: 52px; }
  .bag-progression .label{ font-size: 11px; }
}


/* Accessibility: skip-to-content link */
.skip-link{
  position: absolute; top: -100px; left: 8px; z-index: 9999;
  background: var(--navy); color: var(--yellow);
  font-family: var(--ff-display); font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus{ top: 8px; outline: 2px solid var(--yellow); outline-offset: 2px; }


/* ---------- CASE STUDY PROOF STRIP (services pages) ---------- */
.cs-proof{
  background: var(--paper);
  padding: var(--s-9) 0;
  border-top: 1px solid var(--ink-15);
  border-bottom: 1px solid var(--ink-15);
}
.cs-proof .shell{ max-width: 1180px; }
.cs-proof .head{
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.cs-proof .head .copy{ max-width: 56ch; }
.cs-proof .head .eyebrow{ margin: 0 0 var(--s-3); }
.cs-proof .head h2{ margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; }
.cs-proof .head .all-link{
  font-family: var(--ff-display); font-weight: 600; font-size: 15px;
  color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 3px;
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-proof .head .all-link:hover{ border-color: var(--navy); }
.cs-proof-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.cs-proof-card{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-5);
  background: var(--white);
  border: 1px solid var(--ink-15);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--navy);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cs-proof-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(4,27,68,.08); }
.cs-proof-card .photo{
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink-08);
}
.cs-proof-card .photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-proof-card .body{ display: flex; flex-direction: column; gap: var(--s-3); }
.cs-proof-card .meta{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c, var(--purple)); margin: 0;
}
.cs-proof-card h3{
  font-family: var(--ff-display); font-weight: 600;
  font-size: 18px; line-height: 1.25; color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.cs-proof-card .stat-block{ margin-top: auto; }
.cs-proof-card .stat{
  display: block;
  font-family: var(--ff-display); font-weight: 700;
  font-size: 28px; line-height: 1; color: var(--c, var(--purple));
  letter-spacing: -0.02em;
}
.cs-proof-card .stat-lbl{
  font-family: var(--ff-body); font-size: 12px; color: var(--ink-70);
  margin: 4px 0 var(--s-3); display: block;
}
.cs-proof-card .arr-link{
  font-family: var(--ff-display); font-weight: 600; font-size: 14px;
  color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-proof-card:hover .arr-link{ text-decoration: underline; }
@media (max-width: 900px){
  .cs-proof-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .cs-proof-card{ grid-template-columns: 1fr; }
  .cs-proof-card .photo{ aspect-ratio: 16/10; }
}