/* consultant.css — lean styles for single-franchise_consultant.php.
   Part 1: shared FranNet chrome (header/nav/footer/buttons) matching the homepage.
   Part 2: consultant page (c-*) — reproduces the redesign's visual bones, optimized.
   Inlined by the template. Hand-authored; keep lean. */

:root{
  --ink:#242424; --navy:#0e2340; --blue:#1a4fa3; --red:#d21f27; --red-dark:#b91b22;
  --util:#c2410c; --line:#e7e7e7; --muted:#5b6472; --bg-soft:#f6f7f9; --max:1400px;
  --font:'Poppins','Poppins Fallback',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.6}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
a{color:var(--blue)}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:16px;padding:13px 24px;border-radius:6px;line-height:1.2;text-decoration:none;border:1px solid var(--red);cursor:pointer;transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(.94);color:#fff;transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid #c9ccd2;font-weight:600}
.btn-outline:hover{filter:none;color:var(--ink);border-color:var(--ink)}
.btn-outline.red{color:var(--red);border-color:var(--red)}
.c-btn-book{background:var(--red);border-color:var(--red)}
.c-btn-book:hover{background:var(--red-dark);border-color:var(--red-dark)}

/* utility bar + header/nav (chrome, matches homepage) */
/* Eyebrow hidden on a consultant's own page: its links (Match with a consultant,
   Looking For a Specific Consultant, Franchisors, Join the Team) pull visitors away
   from the consultant whose page they're on. consultant.css is inlined in the template
   head, so this is cache-proof and ships with the launch template. */
.utility{display:none}
.utility .wrap{display:flex;justify-content:flex-end;gap:28px;padding:9px 26px;font-size:14px;font-weight:500}
.utility a{color:var(--util);text-decoration:none}
/* HOTFIX 2026-07-29 — kept in lockstep with frannet-core.css (see the long note there).
   The bare `header` element selector also matched the base templates' in-article
   <header class="sa-article__head">, tying the mega menu on z-index and letting later
   article heads paint over it. Scope it out and lift the header to 60; the mobile drawer
   companions below (85/90) stay above it so the header can never cover the drawer. */
header:not(.sa-article__head){position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:15px 26px;max-width:var(--max);margin:0 auto}
.nav .logo img{width:190px;height:auto}
.menu{display:flex;align-items:center;gap:26px;font-weight:500;font-size:16px}
.menu .links{display:flex;gap:26px}
.menu .links a{color:var(--ink);text-decoration:none}
.menu .cta{display:flex;gap:12px}
.caret{font-size:.7em;opacity:.7;margin-left:3px}
.has-mega{position:relative;display:flex;align-items:center}
.mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 60px rgba(10,42,102,.16);padding:26px 30px;display:grid;grid-template-columns:repeat(5,minmax(148px,1fr));gap:26px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:70;width:max-content;max-width:92vw}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega .mega-h{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--blue);margin:0 0 12px;font-weight:700}
.mega a{display:block;color:var(--ink);font-size:.9rem;font-weight:500;padding:6px 0;line-height:1.3;text-decoration:none}
.mega a:hover{color:var(--red)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:3px;background:var(--ink);border-radius:2px}
/* Mobile-nav media query MUST come AFTER the base .hamburger rule: equal specificity
   resolves by source order, so base display:none after this block would permanently
   hide the hamburger (the cascade bug fixed on the homepage — same class here). */
@media(max-width:960px){.mega{display:none}.menu .links{display:none}.menu .cta{display:none}.utility{display:none}.hamburger{display:flex}}
/* 85/90: deliberately ABOVE the sticky header (60) — see the header note above. */
.m-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:85}
.m-overlay.open{display:block}
.mobile-nav{position:fixed;top:0;right:0;height:100%;width:min(330px,86vw);background:#fff;z-index:90;box-shadow:-12px 0 40px rgba(0,0,0,.18);padding:70px 26px 30px;overflow-y:auto;transform:translateX(106%);transition:transform .3s ease}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{display:block;color:var(--ink);font-weight:500;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;text-decoration:none}
.m-close{position:absolute;top:18px;right:20px;font-size:1.6rem;background:none;border:0;cursor:pointer;color:var(--ink);line-height:1}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:10px;background:#fff;padding:10px 16px;border-radius:6px;z-index:100}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* footer (chrome) */
footer{background:var(--navy);color:#c7d2e6;padding:56px 0 28px;font-size:15px}
footer a{color:#c7d2e6;text-decoration:none}
footer a:hover{color:#fff}
/* .fcols grid moved to frannet-core.css (canonical 5-col footer markup, Phase 2). */
footer h2{color:#fff;font-size:16px;font-weight:600;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
.fimg img{width:170px;filter:brightness(0) invert(1)}
.phone{color:#fff;font-weight:600;margin:16px 0}
.phone a{color:#ff7a70}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center}
.social a:hover{background:var(--red)}
.social svg{width:16px;height:16px;fill:#c7d2e6}
.social a:hover svg{fill:#fff}
footer p:not(.phone){color:#c7d2e6}
.link-strong{color:#ff7a70;font-weight:600;text-decoration:underline}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;font-size:12.5px;color:#8ea0be;line-height:1.6}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}

/* ===================== consultant page ===================== */
.c-main{overflow-x:hidden}
.c-h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--navy);margin:0 0 22px}
.c-narrow{max-width:820px}
/* FAQ measure (2026-08-27, supersedes the Round 1 left-justify). Round 1 pushed c-faq onto the
   page's shared left edge; the team asked for it back as a CENTRED block, a little wider. .wrap
   already centres via margin:0 auto, so widening c-narrow here is the whole change. Text stays
   left-aligned - nothing on this page sets text-align:center, and it should stay that way.
   c-journey left this rule when it merged into .c-story, and c-specialties left it when it went
   full width, so the Round 1 rule is now FAQ-only rather than three selectors deep.
   .c-narrow itself is still untouched: single-consultant_post.php and consultant-blog-index.php
   depend on its 820px centred column. */
.c-faq>.c-narrow{max-width:960px}
.c-rich p{margin:0 0 1em}
.c-eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--blue);font-weight:600;margin:0 0 10px}

/* hero */
.c-hero{background:linear-gradient(180deg,#f4f7fc 0%,#fff 100%);padding:56px 0 44px}
/* align-items:start (2026-08-26) so the photo anchors to the top of the bio column instead of
   floating at its vertical centre. .c-hero__media gets flex-start too: the headshot's height is
   no longer fixed (see the adaptive frame below), so a stretch default could stretch it. */
.c-hero__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:32px;align-items:start}
.c-hero__name{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700;line-height:1.1;color:var(--navy);margin:0 0 14px;position:relative}
.c-hero__name .c-hero__sub{display:block;font-size:1.05rem;font-weight:500;color:var(--muted);margin-top:10px;letter-spacing:.2px}
.c-hero__name::after{content:"";display:block;width:96px;height:3px;background:var(--red);margin-top:16px;border-radius:2px}
/* 42em, up from 36em (2026-08-27). The bio cap - not the grid gap - was the biggest single
   contributor to the empty channel between the text and the photo: at 1440px the 36em cap left
   123px of the 768px column unused. See the hero gap note below. */
.c-hero__bio{font-size:1.12rem;color:#33404f;margin:0 0 22px;max-width:42em}
.c-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
/* Secondary social links, own row under the primary buttons (2026-08-27). */
.c-social-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:0 0 26px}
.c-stats{list-style:none;display:flex;gap:34px;margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.c-stats__n{display:block;font-size:2rem;font-weight:700;color:var(--red);line-height:1}
.c-stats__l{display:block;font-size:.82rem;color:var(--muted);margin-top:4px}
/* Photo column is now a stack: portrait on top, stats beneath it filling the space under the
   frame (2026-08-27). The stats match the photo's width so the two read as one block.
   MEASURED DECOMPOSITION of the old 287px channel between bio text and photo at 1440px:
     123px  bio stopped at its 36em cap inside a 768px column
     116px  photo centred inside a 532px column
      48px  the grid gap
   The brief named the gap, but it was the smallest of the three. Widening the bio to 42em and
   cutting the gap to 32px closes most of it; the remaining 116px is the photo centring, which is
   kept deliberately - left-aligning the photo would strand ~230px of dead space at the right edge
   of the hero. Closing it further means a longer line measure or a wider photo. */
.c-hero__media{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px}
.c-hero__media .c-stats{width:300px;gap:12px;justify-content:space-between;padding-top:18px}
.c-hero__media .c-stats li{flex:1 1 0;min-width:0}
.c-hero__media .c-stats__n{font-size:1.55rem}
.c-hero__media .c-stats__l{font-size:.72rem;line-height:1.3}
/* ADAPTIVE PHOTO FRAME (2026-08-26). The frame used to be a hard 300x300, so a portrait upload was
   centre-cropped to a square. Fixing the WIDTH and letting height follow the image's own aspect
   ratio means a square renders square and a portrait renders portrait, with no distortion.
   max-height caps a very tall image (object-fit:cover then crops rather than stretches).
   No CLS: the <img> carries width/height attributes, so the browser knows the aspect ratio - and
   the max-height clamp - before the bytes arrive, and reserves the final box at parse time.
   The initials placeholder is a DIV with no intrinsic ratio, so it keeps an explicit height. */
.c-headshot{width:300px;height:auto;max-height:420px;object-fit:cover;border-radius:20px;box-shadow:0 22px 50px rgba(10,42,102,.20)}
.c-headshot--initials{height:300px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;font-size:5rem;font-weight:700;letter-spacing:1px}

/* sections rhythm */
.c-story,.c-reasons,.c-specialties,.c-reviews,.c-how,.c-connect{padding:52px 0}
.c-story,.c-specialties,.c-how{background:var(--bg-soft)}

/* why work with me — numbered cards */
.c-reasons__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.c-reason{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;position:relative}
.c-reason__num{font-size:1.5rem;font-weight:700;color:var(--red);opacity:.85}
.c-reason__h{font-size:1.15rem;color:var(--navy);margin:6px 0 8px}
.c-reason__t{color:#42505f}
.c-reason__t p{margin:0}

/* specialties chips */
.c-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.c-chip{background:#fff;border:1px solid #d5deea;color:var(--navy);font-weight:500;padding:9px 18px;border-radius:999px;font-size:.95rem}

/* mid-page CTA band */
.c-cta-band{background:var(--navy);color:#fff;padding:34px 0}
.c-cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.c-cta-band__in p{margin:0;font-size:1.2rem;font-weight:500;max-width:60%}

/* reviews */
.c-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.c-review{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin:0}
.c-review blockquote{margin:0 0 14px;font-size:1.02rem;color:#33404f;line-height:1.55}
.c-review figcaption{font-weight:600;color:var(--navy)}
.c-review figcaption span{font-weight:400;color:var(--muted)}

/* condensed brand strip */
/* Full content width (2026-08-27) so the intro lines up with the 4-step grid beneath it instead
   of sitting inset. Readability note: at 1440px this is a ~1348px measure, well past the usual
   comfortable line length - it reads as a lead-in, not body copy, so keep it short. */
.c-how__intro{max-width:none;margin:0 0 28px;font-size:1.08rem;color:#33404f}
.c-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;counter-reset:s}
.c-steps li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.c-steps li span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--blue);color:#fff;border-radius:50%;font-weight:700;margin-bottom:10px}
.c-steps h3{margin:0 0 6px;font-size:1.05rem;color:var(--navy)}
.c-steps p{margin:0;color:#4a5666;font-size:.95rem}

/* connect: calendly + form */
.c-connect__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
/* No-Calendly consultants (~56 of 64): collapse to a single centered contact column — no empty half, header sits over the form. */
.c-connect--form-only .c-connect__grid{grid-template-columns:1fr;max-width:600px;margin-inline:auto}
.c-connect__lead{font-size:1.08rem;color:#33404f;margin:0 0 18px}
.c-connect__formh{font-size:1.1rem;color:var(--navy);margin:0 0 14px}
.c-form{display:flex;flex-direction:column;gap:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:24px}
.c-form label{display:flex;flex-direction:column;font-size:.85rem;font-weight:600;color:var(--navy);gap:5px}
.c-form input,.c-form textarea{font-family:inherit;font-size:1rem;padding:11px 13px;border:1px solid #cbd3de;border-radius:8px;background:#fff}
.c-form .btn{margin-top:6px;align-self:flex-start}
.c-form__ok{color:#177245;font-weight:600;margin:4px 0 0}

/* sticky book bar */
.c-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(14,35,64,.97);color:#fff;display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 20px;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.c-sticky__txt{font-weight:500}
.c-sticky .btn{padding:10px 20px}

/* responsive */
@media(max-width:900px){
  .c-hero__grid{grid-template-columns:1fr;gap:28px;text-align:center}
  /* display:contents promotes the photo and stats to grid items so they can be ordered
     independently: photo first, then the name/bio/CTAs, then stats last - the same reading
     order mobile had before the stats moved columns. */
  .c-hero__media{display:contents}
  .c-hero__media .c-headshot{order:-1;justify-self:center}
  .c-hero__media .c-stats{order:1;justify-self:center;width:auto}
  .c-hero__name::after,.c-stats{margin-left:auto;margin-right:auto}
  .c-stats{justify-content:center}
  .c-hero__bio{margin-left:auto;margin-right:auto}
  .c-reasons__grid,.c-reviews__grid,.c-steps{grid-template-columns:1fr 1fr}
  .c-connect__grid{grid-template-columns:1fr}
  .c-cta-band__in p{max-width:100%}
}
@media(max-width:560px){
  .c-reasons__grid,.c-reviews__grid,.c-steps,.c-stats{grid-template-columns:1fr}
  .c-stats{flex-direction:column;gap:16px}
  .c-headshot{width:220px;max-height:320px}
  .c-headshot--initials{height:220px}
  .c-sticky{flex-direction:column;gap:8px;padding:10px}
}

/* STORY BAND (2026-08-27): video + My Journey in one band. The video takes the narrower column
   so the prose gets the room it needs. --solo collapses to one column when only one side exists,
   which is the common case (11 of 67 consultants have a journey, 1 has a video) - a solo journey
   then spans the full width with no empty video column, and a solo video is capped so it does not
   balloon to 1348px. The .yt-facade inside supplies its own 16/9 box and rounded corners. */
.c-story__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:44px;align-items:start}
.c-story__grid--solo{grid-template-columns:minmax(0,1fr)}
.c-story__grid--solo .c-story__video{max-width:640px}
/* Kept next to the base rules on purpose: the shared @media(max-width:900px) block earlier in this
   file sits BEFORE these declarations, so an override placed there loses the cascade at equal
   specificity and the band stayed two-column down to 390px. Same local pattern as .c-blog__grid. */
@media(max-width:900px){.c-story__grid{grid-template-columns:1fr;gap:32px}
  .c-story__grid--solo .c-story__video{max-width:none}}

/* review stars + specialty links + blog + faq (Phase 1 additions) */
.c-review__stars{color:#e8a317;font-size:1rem;letter-spacing:2px;margin-bottom:8px}
.c-specialties__lead{color:#42505f;margin:0 0 16px}
.c-chip a{color:var(--navy);text-decoration:none}
.c-chip:hover{border-color:var(--blue)}
.c-chip a:hover{color:var(--blue)}
.c-specialties__all{margin-top:18px}
.c-specialties__all a,.c-blog__all a{color:var(--blue);font-weight:600;text-decoration:none}
.c-blog{padding:52px 0}
.c-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.c-post{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.c-post__thumb img{width:100%;height:180px;object-fit:cover;display:block}
.c-post__h{font-size:1.1rem;margin:16px 18px 8px}
.c-post__h a{color:var(--navy);text-decoration:none}
.c-post__h a:hover{color:var(--blue)}
.c-post__x{margin:0 18px 14px;color:#4a5666;font-size:.95rem}
.c-post__more{margin:auto 18px 18px;color:var(--red);font-weight:600;text-decoration:none}
.c-blog__all{margin-top:22px}
.c-faq{padding:52px 0;background:var(--bg-soft)}
.c-faq__item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 12px}
.c-faq__item summary{font-weight:600;color:var(--navy);cursor:pointer;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.c-faq__item summary::-webkit-details-marker{display:none}
.c-faq__item summary::after{content:"+";color:var(--red);font-weight:700}
.c-faq__item[open] summary::after{content:"–"}
.c-faq__item p{margin:14px 0 0;color:#3a3a3a}
@media(max-width:900px){.c-blog__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.c-blog__grid{grid-template-columns:1fr}}

/* blog: breadcrumb, single article, index (Phase 3) */
.c-breadcrumb{font-size:.85rem;color:var(--muted);margin:0 0 18px;padding-top:26px}
.c-breadcrumb a{color:var(--blue);text-decoration:none}
.c-breadcrumb a:hover{text-decoration:underline}
.c-h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;color:var(--navy);line-height:1.15;margin:0 0 14px}
.c-article{padding:0 0 56px}
.c-article__h1{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;color:var(--navy);line-height:1.18;margin:0 0 12px}
.c-article__meta{color:var(--muted);font-size:.95rem;margin:0 0 24px}
.c-article__meta a{color:var(--blue);text-decoration:none}
.c-article__hero{margin:0 0 28px}
.c-article__hero img{width:100%;height:auto;border-radius:14px;display:block}
.c-article__body{font-size:1.08rem;color:#2d3742;line-height:1.75}
.c-article__body h2{font-size:1.5rem;color:var(--navy);margin:1.6em 0 .5em}
.c-article__body h3{font-size:1.2rem;color:var(--navy);margin:1.4em 0 .4em}
.c-article__body p{margin:0 0 1.1em}
/* a11y: underline in-text links (axe link-in-text-block) — body/rich, breadcrumb, byline meta, in-text footer links */
.c-article__body a,.c-rich a{color:var(--blue);text-decoration:underline}
.c-breadcrumb a,.c-article__meta a,footer p a{text-decoration:underline}
.c-article__body img{max-width:100%;height:auto;border-radius:10px}
.c-article__author{margin-top:44px;padding:28px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.c-article__author .c-h2{margin-top:0}
.c-blogindex-head{padding:8px 0 30px}
.c-blogindex-head__lead{color:#42505f;font-size:1.1rem;margin:0 0 22px}
.c-post__meta{color:var(--muted);font-size:.82rem;margin:0 18px 8px}
.c-blog__empty{color:#42505f;font-size:1.05rem;padding:10px 0 30px}
.c-blog__empty a{color:var(--blue)}

/* Consultant's own LinkedIn link (hero CTA row) */
.c-linkedin,.c-youtube{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;font-size:.95rem;text-decoration:none;padding:9px 4px}
.c-linkedin svg{color:#2f6fd0}
.c-youtube svg{color:#d21f27}
.c-linkedin:hover,.c-youtube:hover{text-decoration:underline}

/* Group 5: "Leave a Google review" CTA (optional; hide-when-empty like the Calendly link) */
.c-greview{padding:6px 0 30px}
.c-greview .wrap{display:flex;justify-content:center}
.c-greview__btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:11px;
  border:1.5px solid var(--line,#e4e8f0);background:#fff;color:#1a2b4a;font-weight:600;font-size:15px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.c-greview__btn:hover{border-color:#4285f4;box-shadow:0 8px 20px rgba(66,133,244,.18);transform:translateY(-1px)}
.c-greview__btn svg{color:#4285f4;flex:none}

/* Screen-reader-only utility. Mirrors standalone.css's .sa-visually-hidden.
   REQUIRED here: the consultant templates load THIS file and not standalone.css, so the
   descriptive spans added to the "Read more" links on 2026-08-03 would otherwise render as
   visible text and print the post title inline next to the link. */
.sa-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Reviews carousel (2026-08-20). 3+ reviews only; 1-2 keep .c-reviews__grid with no chrome.
   Scroll-snap rather than a JS library: no new asset on 66 consultant pages, works with JS off.

   UNIFORM CARD HEIGHT (2026-08-26). A flex track is as tall as its tallest child, so one 683px review
   made the track 687px and short-review views showed a ~330px empty band above the dots (mobile: 915px
   track, 484px band). BOTH rules below are required - line-clamp bounds the tallest card so the track
   cannot balloon, and align-items:stretch makes every card fill the track so a short review leaves
   whitespace inside its own card, not a band of page background under it. Clamp alone only looks
   sufficient because today every review exceeds it; one short review later would reopen the gap. Do NOT
   restore align-items:flex-start - it was the pre-clamp guard and the clamp replaces it. The clamp is
   per-breakpoint: a 1-up mobile card is narrower, so the same text costs more lines. */
.c-reviews__carousel{position:relative}
.c-reviews__track{display:flex;align-items:stretch;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.c-reviews__track::-webkit-scrollbar{display:none}
.c-reviews__track:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.c-reviews__track>.c-review{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;height:auto;
  display:flex;flex-direction:column}
/* Body clamps; stars and the name/location caption always stay fully visible. blockquote grows into
   the spare height so captions line up along the bottom of every card. */
.c-reviews__track>.c-review blockquote{flex:1 1 auto;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:10;line-clamp:10;overflow:hidden}
.c-reviews__controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.c-reviews__nav{width:40px;height:40px;border-radius:50%;border:1px solid #d9e0f1;background:#fff;
  color:var(--royal);font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease}
.c-reviews__nav:hover:not(:disabled){background:var(--bg-soft)}
.c-reviews__nav:disabled{opacity:.35;cursor:default}
.c-reviews__nav:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.c-reviews__dots{display:flex;gap:8px}
.c-reviews__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c9d3e6;cursor:pointer}
.c-reviews__dot.is-active{background:var(--royal)}
.c-reviews__dot:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
@media (max-width:1024px){.c-reviews__track>.c-review{flex:0 0 calc((100% - 22px)/2)}}
@media (max-width:700px){.c-reviews__track>.c-review{flex:0 0 100%}
  .c-reviews__track>.c-review blockquote{-webkit-line-clamp:14;line-clamp:14}}
@media (prefers-reduced-motion:reduce){.c-reviews__track{scroll-behavior:auto}}
/* Markets list (2026-09-23): same chips as specialties; when both sections render, the second joins
   the first instead of opening a second band with its own top padding. The link fills the whole pill,
   so a tap anywhere on it works (the chip's hover border already promises that). */
.c-specialties + .c-markets{padding-top:0}
.c-markets .c-chip{padding:0}
.c-markets .c-chip a{display:block;padding:9px 18px}