/* ============================================================
   Milestone Advisory: Editorial (Direction B)
   Brand: green #52C657, ink #1A1A1A, warm paper.
   Type: Newsreader (display serif) + Inter (sans body/labels)
   ============================================================ */

:root{
  --ink:#1a1a1a;
  --ink-2:#3a3a3a;
  --muted:#6b6b6b;
  --line:#e2e0da;
  --line-2:#d3d1c9;
  --paper:#f5f4f1;
  --paper-2:#efede8;
  --white:#ffffff;
  --green:#52c657;
  --green-ink:#1f7a2e;      /* accessible green for text/links on light */
  --green-deep:#123a1a;     /* very dark green for dark bands */
  --black:#111110;

  --sky-green:#56d660;      /* reference hero base */
  --deal-green:#509537;     /* reference rollover green */
  --card-dark:#232323;      /* reference deal card */

  --wrap:1240px;
  --gutter:clamp(20px,5vw,64px);
  --header-h:82px;          /* sticky header height. The mobile nav drawer and the CS
                               one-viewport quiz both measure off this, so it lives here
                               rather than being repeated as a literal in three files. */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(44px,5.5vw,84px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:420;
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0;
}
h1.display{font-size:clamp(2.6rem,6vw,5rem)}
h2.display{font-size:clamp(2rem,4.4vw,3.4rem)}
h3.display{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.serif{font-family:var(--serif)}
.lead{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.5;color:var(--ink-2);font-weight:400}

.label{
  font-family:var(--sans);
  /* Was .72rem (11.5px). Lisa's "headings are too small" examples ("Growth Advisory",
     "How we help") are both this eyebrow label, not the .display headings, so the size
     lift belongs here. Letter-spacing eases slightly as the size grows, otherwise the
     tracking reads too loose at the larger size. */
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}
.label--green{color:var(--green-ink)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green);display:inline-block}

p{margin:0 0 1.1em}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:2px;border:1px solid transparent;
  cursor:pointer;transition:.18s ease;line-height:1;min-width:180px;text-align:center;
}
.btn svg{width:1rem;height:1rem}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--green-ink)}
.btn--green{background:var(--green);color:#08210c}
.btn--green:hover{background:#43b249}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--on-dark{background:var(--green);color:#08210c}
.btn--on-dark:hover{background:#43b249}
.textlink{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;
  color:var(--ink);border-bottom:1px solid var(--green);padding-bottom:2px;transition:.18s;
}
.textlink:hover{color:var(--green-ink);gap:.7rem}
.textlink::after{content:"→";color:var(--green-ink)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,244,241,.86);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.93rem;font-weight:500;color:var(--ink-2);transition:.15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:1.2rem}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;margin-left:.4rem}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.2s}
html.nav-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
html.nav-open .menu-toggle span:nth-child(2){opacity:0}
html.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem}
.hero h1{max-width:16ch}
.hero .lead{max-width:42ch;margin-top:1.6rem}
.hero-cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-media{margin-top:clamp(40px,6vw,72px)}
.hero-media img{width:100%;height:clamp(320px,44vw,560px);object-fit:cover;border-radius:3px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.hero-meta div{max-width:22ch}
.hero-meta .label{display:block;margin-bottom:.4rem}
.hero-meta p{font-size:.95rem;color:var(--ink-2);margin:0}

/* ---------- Split intro ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,4rem)}
.split-side .label{display:block}
.split-body p{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;color:var(--ink-2)}
.split-body p:first-child{color:var(--ink)}

/* ---------- Proof band ---------- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.proof div{background:var(--paper);padding:1.8rem 1.4rem}
.proof .k{font-family:var(--serif);font-size:1.5rem;line-height:1.15;color:var(--ink)}
.proof .v{font-size:.82rem;color:var(--muted);margin-top:.4rem}

/* ---------- Deals (dark) ---------- */
.deals{background:var(--black);color:#efeee9}
.deals .eyebrow::before{background:var(--green)}
.deals .label{color:var(--green)}
.deals h2{color:#f6f5f0;max-width:20ch}
.deals-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.deals-intro p{color:#b8b7ae;max-width:44ch;margin:0}
.deal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2a2a27;border:1px solid #2a2a27}
.deal{
  background:#151513;padding:2rem 1.7rem;display:flex;flex-direction:column;gap:1.1rem;
  min-height:210px;transition:.2s;
}
.deal:hover{background:#1c1c19}
.deal-logo{height:56px;display:flex;align-items:center}
.deal-logo img{max-height:46px;width:auto;max-width:170px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.92}
.deal-parties{font-family:var(--serif);font-size:1.02rem;color:#f0efe9}
.deal-desc{font-size:.9rem;color:#a7a69d;line-height:1.5;margin-top:auto}

/* ---------- Services ---------- */
.services-head{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem;max-width:60ch}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svc{
  background:var(--white);border:1px solid var(--line);border-radius:3px;padding:2.2rem 2rem;
  display:flex;flex-direction:column;min-height:290px;transition:.2s;
}
.svc:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(0,0,0,.35)}
.svc .num{font-family:var(--serif);font-size:1rem;color:var(--green-ink);margin-bottom:1.4rem}
.svc h3{margin:0 0 .8rem}
.svc p{color:var(--ink-2);font-size:.98rem;margin-bottom:1.6rem}
.svc .textlink{margin-top:auto;align-self:flex-start}
.svc--accent{background:var(--green);border-color:var(--green)}
.svc--accent h3,.svc--accent p{color:#0a250e}
.svc--accent p{opacity:.86}
.svc--accent .num{color:#0a250e}
.svc--accent .btn{margin-top:auto;align-self:flex-start}

/* ---------- Why / list ---------- */
.why-grid{display:grid;grid-template-columns:1fr;gap:2.4rem}
.why-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.why-item{padding:1.7rem 0;border-top:1px solid var(--line)}
.why-item:nth-child(odd){padding-right:2rem}
.why-item:nth-child(even){padding-left:2rem;border-left:1px solid var(--line)}
.why-item h4{font-family:var(--serif);font-weight:460;font-size:1.2rem;margin:0 0 .5rem}
.why-item p{font-size:.95rem;color:var(--ink-2);margin:0}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:1fr;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.8rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:1.4rem;color:var(--green-ink);min-width:2.4rem}
.step h4{margin:.1rem 0 .5rem;font-family:var(--serif);font-weight:460;font-size:1.25rem}
.step p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ---------- Testimonials ---------- */
.quotes{background:var(--paper-2)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.quote{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:1.9rem 1.7rem;display:flex;flex-direction:column}
.quote .mark{font-family:var(--serif);font-size:2.4rem;line-height:.6;color:var(--green);height:1rem}
.quote p{font-family:var(--serif);font-size:1.12rem;line-height:1.42;color:var(--ink);margin:1.2rem 0 1.6rem}
.quote .who{margin-top:auto}
.quote .who strong{display:block;font-size:.95rem}
.quote .who span{font-size:.85rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--black);color:var(--paper);text-align:left}
.cta-band--image{background-image:linear-gradient(rgba(7,7,7,.74),rgba(7,7,7,.74)),url("../img/hero/hero-boardroom.png");background-size:cover;background-position:center}
.cta-band .display{color:#f6f5f0;max-width:18ch}
.cta-band .lead{color:#b8b7ae;max-width:46ch;margin-top:1.2rem}
.cta-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Newsletter ---------- */
.news-signup{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center}
.signup-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:460px}
.signup-form input{
  flex:1;min-width:220px;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:2px;
  font:inherit;font-size:.95rem;background:var(--white);color:var(--ink);
}
.signup-form input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}

/* ---------- Insights ---------- */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.insight{border-top:2px solid var(--ink);padding-top:1.2rem;display:flex;flex-direction:column;min-height:180px}
.insight .k{font-size:.75rem;color:var(--green-ink);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
.insight h4{font-family:var(--serif);font-weight:460;font-size:1.2rem;line-height:1.25;margin:0 0 1.2rem}
.insight .textlink{margin-top:auto;align-self:flex-start}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:#c9c8c0;padding-block:clamp(48px,6vw,80px) 2.2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-brand img{height:26px;margin-bottom:1.2rem}
.foot-brand p{font-size:.92rem;color:#9a998f;max-width:34ch}
.foot-col h5{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7d7c73;margin:0 0 1.1rem}
.foot-col a,.foot-col p{display:block;font-size:.92rem;color:#c9c8c0;margin:0 0 .6rem;transition:.15s}
.foot-col a:hover{color:var(--green)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.6rem;font-size:.8rem;color:#7d7c73}
.foot-bottom a:hover{color:var(--green)}

/* ---------- Page hero (inner) ---------- */
.page-hero{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(32px,4vw,48px)}
.page-hero h1{max-width:18ch}
.page-hero .lead{max-width:56ch;margin-top:1.4rem}
.prose{max-width:70ch}
.prose h2{font-family:var(--serif);font-weight:460;font-size:clamp(1.5rem,2.4vw,2rem);margin:2.4rem 0 1rem}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:2rem 0 .6rem}
.prose p{color:var(--ink-2)}
.prose ul{padding-left:1.1rem;margin:0 0 1.4rem}
.prose li{margin-bottom:.5rem;color:var(--ink-2)}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.sticky-side{position:sticky;top:100px}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chip{font-size:.82rem;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:.4rem .9rem;color:var(--ink-2)}

.notice{background:#fbfbf9;border:1px dashed var(--line-2);border-left:3px solid var(--green);
  padding:1.2rem 1.4rem;border-radius:2px;font-size:.92rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-list{margin-top:2rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:460;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:var(--sans);font-size:1.3rem;line-height:1;color:var(--green-ink);
  flex-shrink:0;transition:.18s ease;
}
.faq-item[open] summary::after{content:"\2212"}
.faq-item .faq-a{color:var(--ink-2);font-size:.98rem;line-height:1.55;padding:0 0 1.5rem;margin:0;max-width:70ch}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:2.6rem}
.team-grid--3{grid-template-columns:repeat(3,1fr)}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--paper-2)}
.member h4{font-family:var(--serif);font-weight:460;font-size:1.15rem;margin:1rem 0 .2rem}
.member .role{font-size:.85rem;color:var(--green-ink);font-weight:600}
.member p{font-size:.9rem;color:var(--ink-2);margin:.6rem 0 0}

/* ---------- Responsive ---------- */
@media (min-width:760px){
  .split{grid-template-columns:.7fr 1.3fr}
  .proof{grid-template-columns:repeat(4,1fr)}
  .hero-grid{grid-template-columns:1.3fr .7fr;align-items:end}
  /* The h1 box bottom sits below its last baseline by the font descent (.2625em)
     plus half the leading (.03em), so bottom-aligning the boxes left the CTA button
     hanging ~24px under the headline. Trimming that space lands the button's bottom
     edge on the headline baseline, and stays correct as the clamped h1 resizes. */
  .hero-grid h1{margin-bottom:-.293em}
  .news-signup{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .why-grid{grid-template-columns:.7fr 1.3fr}
  .page-about .why-grid, .page-growth .why-grid{grid-template-columns:1fr}
  .page-about .why-list, .page-growth .why-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
}
@media (max-width:820px){
  .nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.4rem var(--gutter) 1.2rem;
    box-shadow:0 20px 30px -24px rgba(0,0,0,.4);
  }
  html.nav-open .nav{display:flex}
  .nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav a:last-child{border-bottom:0}
  .menu-toggle{display:block}
  .nav-cta .btn{padding:.7rem 1.1rem;font-size:.88rem;min-width:0}
  .quote-grid,.insight-grid,.svc-grid,.team-grid{grid-template-columns:1fr 1fr}
  .cta-inner{grid-template-columns:1fr}
  .cta-actions{justify-content:flex-start}
  .two-col{grid-template-columns:1fr}
  .sticky-side{position:static}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .deal-grid,.proof{grid-template-columns:1fr 1fr}
  .quote-grid,.insight-grid,.svc-grid,.team-grid,.deal-grid{grid-template-columns:1fr}
  .why-list{grid-template-columns:1fr}
  .why-item:nth-child(even){padding-left:0;border-left:0}
  .why-item:nth-child(odd){padding-right:0}
  .foot-top{grid-template-columns:1fr}
}

/* nav dropdown */
.nav-dd{position:relative;display:inline-block}
.nav-dd-menu{position:absolute;top:100%;left:0;min-width:200px;background:var(--paper,#fff);border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:.4rem;box-shadow:0 12px 30px rgba(0,0,0,.10);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-menu a{display:block;padding:.5rem .7rem;border-radius:6px}
.nav-dd-menu a:hover{background:rgba(0,0,0,.05)}
@media(max-width:820px){.nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:1rem}}

/* ---------- v3: hero sky ---------- */
.hero--sky{
  background:var(--sky-green) url("../img/hero/sky-pathway-hero.webp") 100% 50%/cover no-repeat;
  padding-block:clamp(72px,10vw,140px);
  position:relative;
}
.hero--sky::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(10,20,10,.45),rgba(10,20,10,.25));
  pointer-events:none;
}
.hero--sky .wrap{position:relative;z-index:1}
.hero--sky .label{color:#eafbe7}
.hero--sky h1{color:#f6f5f0}
.hero--sky .lead{color:rgba(255,255,255,.92)}

/* ---------- v3: narrative + pathway graphic ---------- */
.narrative-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem)}
.narrative-grid img{max-width:100%}
@media(min-width:760px){
  .narrative-grid{grid-template-columns:1.1fr .9fr;align-items:center}
}

/* ---------- v3: deals carousel ---------- */
.deal-carousel{position:relative;padding-inline:4.4rem}
.deal-track{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.deal-track::-webkit-scrollbar{display:none}
.deal-card{
  flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;background:var(--card-dark);
  min-height:200px;position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;padding:1.5rem;
}
.deal-card:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.deal-pair{display:flex;align-items:center;gap:1.2rem;justify-content:center}
.deal-pair img{max-height:72px;max-width:45%;width:auto;object-fit:contain}
.deal-x{color:#9a9a92;font-size:1.2rem}
.deal-overlay{
  position:absolute;inset:0;background:var(--deal-green);color:#fff;padding:1.5em 2em;
  display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(8px);
  transition:.25s ease;
}
.deal-card:hover .deal-overlay,.deal-card:focus-within .deal-overlay,.deal-card.is-open .deal-overlay{
  opacity:1;transform:none;
}
.deal-overlay p{color:rgba(255,255,255,.92);margin:0}
.deal-overlay strong{display:block;margin-bottom:.4rem}
.deal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--green);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;
}
.deal-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.deal-nav--prev{left:.7rem}
.deal-nav--next{right:.7rem}
@media(max-width:820px){
  .deal-card{flex-basis:calc((100% - 1rem)/2)}
}
@media(max-width:560px){
  .deal-card{flex-basis:100%}
  /* m8: track full width on top, then both arrows as ONE row below it (not stacked) */
  .deal-carousel{
    display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"track track" "prev next";
    gap:.75rem;padding-inline:0;
  }
  .deal-track{grid-area:track}
  .deal-nav{position:static;transform:none;justify-self:center}
  .deal-nav--prev{grid-area:prev}
  .deal-nav--next{grid-area:next}
}

/* ---------- v3: What We Do icons ---------- */
.svc-grid--icons{grid-template-columns:repeat(2,1fr)}
.svc-icon{width:88px;height:88px;object-fit:contain;margin-bottom:1.2rem}
.svc-cta{display:flex;justify-content:center;margin-top:2.4rem}
@media(max-width:820px){.svc-grid--icons{grid-template-columns:1fr}}

/* ---------- v3: Who We've Worked With marquee ---------- */
/* The clients band sits tight under the hero and close to the next section: its own bottom padding
   plus the following section's top padding otherwise stack into an awkward gap below the logos. */
.worked-with{padding-block:clamp(40px,5vw,72px) clamp(16px,2vw,32px)}
.worked-with + .section{padding-top:clamp(24px,3vw,48px)}
.logo-marquee{overflow:hidden;margin-top:2.6rem}
.logo-track{display:flex;width:max-content;animation:marquee 80s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-tile{
  flex:none;width:200px;height:120px;margin-right:1.5rem;background:var(--white);
  border-radius:8px;box-shadow:0 0 5px 1px rgba(0,0,0,.15);display:flex;align-items:center;
  justify-content:center;padding:0 24px;
}
.logo-tile img{max-width:70%;max-height:64px;object-fit:contain}
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .logo-tile[aria-hidden="true"]{display:none}
}

/* ---------- v3: footer affiliations + map ---------- */
.foot-affiliations{
  display:flex;gap:3rem;flex-wrap:wrap;align-items:center;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid #2a2a27;
}
.foot-aff{display:flex;align-items:center;gap:1rem}
.foot-aff-label{font-size:.8rem;color:var(--green);font-weight:500}
.foot-aff img{max-height:3rem;width:auto;background:#fff;border-radius:4px;padding:.25rem}
.foot-map{margin-top:.8rem}
.foot-map iframe{width:100%;height:160px;border:0;border-radius:3px}

/* ---------- v3: colour-accent sweep ---------- */
.label--on-dark{color:var(--green)}
.faq-item summary:hover{color:var(--green-ink)}

/* ---------- v3: about bio list ---------- */
.bio-list{display:grid;gap:0;margin-top:2.6rem}
.bio{display:grid;grid-template-columns:1fr;gap:1.6rem;padding:2.2rem 0;border-top:1px solid var(--line)}
@media(min-width:760px){.bio{grid-template-columns:260px 1fr;gap:2.5rem}}
.bio img{width:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--paper-2)}
.bio h3{font-family:var(--serif);font-weight:460;font-size:1.4rem;margin:0}
.bio .role{font-size:.9rem;color:var(--green-ink);font-weight:600;margin:.2rem 0 1rem}
.bio p{font-size:.98rem;color:var(--ink-2)}

/* ---------- News archive ----------
   The archive migrated off Webflow: 44 posts at /news-posts/{slug}. Cards carry
   imagery (the old listing was text-only, which was the client's main complaint)
   and the two webinar posts that had no real image fall back to a tinted panel
   rather than shipping Webflow's grey placeholder. */
.news-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.news-filter{
  font-family:var(--sans);font-size:.85rem;font-weight:500;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:.45rem 1rem;color:var(--ink-2);transition:.15s;
}
.news-filter:hover{border-color:var(--ink);color:var(--ink)}
.news-filter span{color:var(--muted);margin-left:.25rem}
.news-filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.news-filter.is-active span{color:rgba(255,255,255,.6)}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 1.5rem}
.news-card{background:var(--white);border:1px solid var(--line);display:flex}
/* An author `display:flex` beats the UA's `[hidden]{display:none}`, so without
   this the category filter marks cards hidden and they stay on screen. */
.news-card[hidden]{display:none}
.news-card-link{display:flex;flex-direction:column;width:100%}
.news-card-media{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.news-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.news-card:hover .news-card-media img{transform:scale(1.03)}
.news-card-media--none{
  background:linear-gradient(135deg,var(--paper-2),var(--line));
  position:relative;
}
.news-card-media--none::after{
  content:"";position:absolute;inset:0;
  background:url("../img/logo/m-mark-green.svg") center/38px no-repeat;opacity:.32;
}
.news-card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.news-card-body .k{
  font-size:.72rem;color:var(--green-ink);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.7rem;
}
.news-card-body h3{
  font-family:var(--serif);font-weight:460;font-size:1.18rem;line-height:1.3;
  margin:0 0 .7rem;color:var(--ink);
}
.news-card-body p{font-size:.92rem;color:var(--ink-2);margin:0 0 1.2rem}
.news-card-body .textlink{margin-top:auto;align-self:flex-start}
.news-empty{margin-top:2rem;color:var(--muted)}

/* ---------- Single news post ---------- */
.post-head{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(20px,2.5vw,32px)}
.post-back{display:inline-block;margin-bottom:1.6rem}
.post-head h1{max-width:24ch}
.post-head .lead{max-width:62ch;margin-top:1.2rem}
.post-byline{font-size:.9rem;color:var(--muted);margin:1rem 0 0}
.post-hero{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.post-hero img{width:100%;max-height:520px;object-fit:cover;border-radius:3px}
.post-body{padding-block:clamp(32px,4vw,56px)}
.post-body .prose{max-width:68ch}
.post-body .prose p{font-size:1.03rem;line-height:1.7;margin:0 0 1.3rem}
.post-body .prose img{margin:2rem 0;border-radius:3px}
.post-body .prose a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.post-body .prose figure{margin:2rem 0}
.post-body .prose figcaption{font-size:.86rem;color:var(--muted);margin-top:.6rem}
.post-body .prose blockquote{
  margin:2rem 0;padding-left:1.4rem;border-left:2px solid var(--green);
  font-family:var(--serif);font-size:1.16rem;line-height:1.45;color:var(--ink);
}
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line);
}
.post-nav-link{
  font-family:var(--serif);font-size:1.05rem;line-height:1.3;color:var(--ink);
  display:flex;flex-direction:column;gap:.5rem;
}
.post-nav-link .label{color:var(--muted)}
.post-nav-link:hover{color:var(--green-ink)}
.post-nav-link--next{text-align:right;grid-column:2}

@media(max-width:900px){
  .news-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .news-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav-link--next{text-align:left;grid-column:1}
}

/* ---------- Services overview ----------
   The nav's "Services" used to link straight to Growth Advisory, so clicking it
   dropped you into one of four services with no sign the others existed. This
   page is the hub it now points at. */
.svc-lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2.6rem}
.svc-lg{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:1.4rem}
.svc-lg .svc-icon{width:52px;height:auto;margin-bottom:1.1rem}
.svc-lg h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin:0 0 .8rem}
.svc-lg > p{color:var(--ink-2);margin:0 0 1.3rem}
.svc-lg-who{background:var(--paper-2);padding:1rem 1.1rem;margin:0 0 1.4rem}
.svc-lg-who .label{display:block;margin-bottom:.4rem}
.svc-lg-who p{margin:0;font-size:.94rem;color:var(--ink-2)}
.svc-lg .textlink{margin-top:auto;align-self:flex-start}

.picker-band{background:var(--paper-2)}
.picker-band .lead{max-width:56ch}
.picker{margin:2.2rem 0 0;padding:0;border-top:1px solid var(--line-2)}
.picker-row{
  display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--line-2);
}
.picker dt{font-family:var(--serif);font-size:1.12rem;line-height:1.35;color:var(--ink);margin:0}
.picker dd{margin:0;white-space:nowrap}
.picker-note{margin-top:1.6rem;color:var(--ink-2);max-width:60ch}

@media(max-width:760px){
  .svc-lg-grid{grid-template-columns:1fr;gap:2rem}
  .picker-row{grid-template-columns:1fr;gap:.5rem}
  .picker dd{white-space:normal}
}