/*
Theme Name: TheWhysCounselor
Theme URI: https://thewhyscounselor.com
Author: Hashtag Media
Author URI: https://hashtagmedia.ae
Description: A five-page consulting theme built for TheWhysCounselor — Answers. Outcomes. Service Experience. Includes Home, About, Services, Insights and Contact templates, a working contact form, and customizer controls for logo, hero imagery, contact details and social links.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thewhyscounselor
Tags: consulting, business, one-column, custom-logo, custom-menu, featured-images, blog, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --orange: #f36527;
  --orange-dark: #d94f14;
  --orange-soft: #fdece3;
  --brown: #6f605b;
  --brown-dark: #4a3f3b;
  --brown-deep: #3a302c;
  --ink: #2f2925;
  --body: #5c534e;
  --muted: #857a74;
  --line: #e7e0da;
  --bg: #ffffff;
  --bg-warm: #faf7f4;
  --bg-peach: #fdf4ee;
  --bg-grey: #f4f2f0;
  --white: #ffffff;

  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(58, 48, 44, .06);
  --shadow-md: 0 10px 30px rgba(58, 48, 44, .08);
  --header-h: 84px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--orange); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--brown-dark); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; }
.section--tight { padding: 52px 0; }
.section--warm { background: var(--bg-warm); }
.section--grey { background: var(--bg-grey); }
.section--peach { background: var(--bg-peach); }

/* ==========================================================================
   3. Shared bits
   ========================================================================== */
.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 .7rem; font-family: var(--font-body);
}
.eyebrow--light { color: #f7a67c; }

.section-head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 34px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--muted); }
.section-head .link-more { justify-self: end; white-space: nowrap; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; align-items: start; gap: 14px; } .section-head .link-more { justify-self: start; } }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 14px 24px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn--ghost:hover { background: var(--orange); color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #fff; color: var(--brown-deep); border-color: #fff; }
.btn--sm { padding: 11px 18px; font-size: .72rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--orange);
}
.link-more .arrow { transition: transform .18s ease; }
.link-more:hover .arrow { transform: translateX(3px); }

.pillars { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; }
.pillar { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-left: 1px solid var(--line); min-width: 0; flex: 1 1 0; }
.pillar:first-child { padding-left: 0; border-left: 0; }
.pillar svg { width: 28px; height: 28px; flex: none; }
.pillar span { font-size: .84rem; font-weight: 600; color: var(--brown-dark); line-height: 1.25; }
@media (max-width: 560px) {
  .pillars { flex-wrap: wrap; gap: 14px 0; }
  .pillar { flex: 0 0 100%; padding: 0; border-left: 0; }
}

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 30px; font-size: .92rem; color: var(--body); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.quote-block { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink); }
.quote-attrib { display: block; width: fit-content; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--orange); }
.quote-attrib strong { display: block; font-family: var(--font-body); font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brown-dark); }
.quote-attrib span { font-family: var(--font-body); font-style: normal; font-size: .78rem; color: var(--muted); }

.stack-words { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; color: #fff; }

/* Hero shell -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg-warm); }
.hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__media::after { content: ""; position: absolute; inset: 0; }
.hero__inner { position: relative; z-index: 2; padding: 62px 0 46px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: start; }
.hero__copy { max-width: 560px; }
.hero__copy p.lede { font-size: 1.02rem; color: var(--brown-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 34px; }
.hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__side { margin-top: 8px; }
}

/* Fade so hero text stays readable over photography */
.hero--wash .hero__media::after {
  background: linear-gradient(100deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.72) 54%, rgba(255,255,255,.15) 78%, rgba(255,255,255,0) 100%);
}
@media (max-width: 900px) {
  .hero--wash .hero__media::after { background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.6) 100%); }
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__text { display: block; line-height: 1.05; }
.brand__name { display: block; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; color: var(--brown); text-transform: uppercase; }
.brand__tag { display: block; font-family: var(--font-display); font-size: .62rem; letter-spacing: .12em; color: var(--orange); text-transform: uppercase; margin-top: 2px; }
.brand img.custom-logo, .custom-logo-link img { max-height: 54px; width: auto; }
.custom-logo-link { display: inline-flex; align-items: center; }

.nav-main ul { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.nav-main a {
  font-size: .76rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--brown-dark); padding: 6px 0; display: block; position: relative;
}
.nav-main a:hover { color: var(--orange); }
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .current-menu-parent > a { color: var(--orange); }
.nav-main .current-menu-item > a::after,
.nav-main .current_page_item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange);
}
.nav-main ul ul {
  display: none; position: absolute; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: 8px 0; min-width: 210px; flex-direction: column; gap: 0; z-index: 20;
}
.nav-main li { position: relative; }
.nav-main li:hover > ul, .nav-main li:focus-within > ul { display: flex; }
.nav-main ul ul a { padding: 9px 18px; letter-spacing: .06em; }

.header-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none; width: 46px; height: 42px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius); cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--brown-dark); position: relative; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav-main {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav-main.is-open { max-height: 80vh; overflow-y: auto; }
  .nav-main ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav-main a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
  .nav-main ul ul { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 14px; }
  .nav-main .mobile-cta { display: block; margin-top: 16px; }
  .nav-main .mobile-cta .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1021px) { .nav-main .mobile-cta { display: none; } }

/* ==========================================================================
   5. Home
   ========================================================================== */
.home-hero .hero__inner { padding: 74px 0 54px; min-height: 520px; }
.home-hero h1 { font-family: var(--font-display); }
.home-hero h1 .accent { color: var(--orange); display: block; }
.home-hero h1 .plain { color: var(--brown-dark); display: block; }
.home-hero .tagline { font-size: 1.06rem; color: var(--brown-dark); font-weight: 500; margin-bottom: 1rem; }
.home-hero .intro { font-size: .95rem; color: var(--body); max-width: 470px; }

.hero-note {
  margin-top: 14px;
  background: rgba(88, 74, 68, .92); color: #fff; padding: 26px 28px; border-radius: var(--radius);
  max-width: 330px; margin-left: auto;
}
.hero-note .quote-block { color: #fff; text-align: left; }
.hero-note--light { background: rgba(255,255,255,.92); color: var(--ink); }
.hero-note--light .quote-block, .hero-note--light .quote-attrib strong { color: var(--ink); }
.hero-note .quote-attrib { border-top-color: var(--orange); }
.hero-note .quote-attrib strong { color: #fff; }
.hero-headline-card {
  margin: 0 0 6px auto; text-align: left; max-width: 190px;
}
.hero-headline-card::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--orange); margin-top: 14px;
}
.hero-headline-card span {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25;
  color: var(--brown-dark);
  /* keeps the line legible wherever the photo is busy, without a visible box */
  text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.85), 0 0 40px rgba(255,255,255,.7);
}
@media (max-width: 900px) {
  .hero-headline-card { margin-left: 0; max-width: none; }
  .hero-headline-card::after { margin-bottom: 4px; }
}
.hero-headline-card--light { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.35); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stat { text-align: center; padding: 0 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem); color: var(--orange); font-weight: 700; line-height: 1; }
.stat__label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-dark); margin: 10px 0 6px; }
.stat__desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.about-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 54px; align-items: start; }
.about-split .divider-left { padding-left: 54px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; gap: 32px; } .about-split .divider-left { padding-left: 0; border-left: 0; } }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1020px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.svc-card { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 22px; display: flex; flex-direction: column; }
.svc-card__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.svc-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.svc-card p { font-size: .88rem; }
.svc-card .link-more { margin-top: auto; padding-top: 12px; }

.cta-band { position: relative; overflow: hidden; background: var(--brown-deep); color: #fff; }
.cta-band__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,48,44,.94) 0%, rgba(58,48,44,.72) 45%, rgba(58,48,44,.45) 100%); }
.cta-band__inner { position: relative; z-index: 2; padding: 66px 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .6fr); gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 520px; }
.cta-band__side { text-align: right; }
.cta-band__side .rule { width: 46px; height: 2px; background: var(--orange); margin: 16px 0 16px auto; }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } .cta-band__side { text-align: left; } .cta-band__side .rule { margin-left: 0; } }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.testimonial p { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink); }
.testimonial cite { font-style: normal; display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.testimonial cite strong { display: block; font-size: .82rem; color: var(--brown-dark); }
.testimonial cite span { font-size: .78rem; color: var(--muted); }

.closing-bar { background: var(--brown); color: #fff; padding: 34px 0; }
.closing-bar__inner { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; text-align: center; }
.closing-bar h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.closing-bar p { margin: 6px 0 0; color: rgba(255,255,255,.85); font-size: .92rem; }

/* ==========================================================================
   6. About
   ========================================================================== */
.about-hero .hero__inner { padding: 58px 0 40px; }
.about-hero__portrait {
  position: absolute; right: 0; bottom: 0; top: 0; width: 42%;
  background-size: cover; background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
@media (max-width: 900px) { .about-hero__portrait { display: none; } }

.founder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.05fr); gap: 34px; }
.founder-grid > * + * { padding-left: 34px; border-left: 1px solid var(--line); }
@media (max-width: 1000px) { .founder-grid { grid-template-columns: 1fr; } .founder-grid > * + * { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid var(--line); } }

.founder-name { font-size: 2.2rem; margin-bottom: .15em; }
.founder-role { font-family: var(--font-display); font-size: 1.12rem; color: var(--brown-dark); margin-bottom: 1.1rem; }

.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.fact strong { display: block; font-family: var(--font-body); font-size: .92rem; color: var(--brown-dark); font-weight: 600; }
.fact span { font-size: .85rem; color: var(--muted); }

.badges { display: flex; gap: 16px; align-items: center; margin: 18px 0 20px; flex-wrap: wrap; }
.badge-img { width: 132px; height: auto; border-radius: 4px; }
.badge-img--round { width: 122px; border-radius: 50%; }
@media (max-width: 420px) { .badge-img { width: 116px; } .badge-img--round { width: 108px; } }
.badge-cert {
  width: 132px; border-radius: 4px; overflow: hidden; border: 2px solid var(--orange);
  background: #123a5e; color: #fff; padding: 12px 10px; font-size: .62rem; line-height: 1.3;
}
.badge-cert .badge-cert__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.badge-cert .badge-cert__top b { font-size: .72rem; letter-spacing: .06em; }
.badge-cert h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; margin: 0; line-height: 1.2; }
.badge-cert p { margin: 2px 0 12px; font-size: .68rem; color: rgba(255,255,255,.85); }
.badge-cert small { display: block; border-top: 1px solid rgba(255,255,255,.35); padding-top: 6px; font-size: .58rem; letter-spacing: .04em; }
.badge-ring {
  width: 116px; height: 116px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 4px solid #fff; box-shadow: 0 0 0 2px var(--orange); padding: 10px;
}
.badge-ring b { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.badge-ring svg { width: 34px; height: 34px; margin: 4px 0; }
.badge-ring span { font-size: .56rem; line-height: 1.25; }

.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.skill-tags li { font-size: .74rem; color: var(--brown-dark); background: var(--bg-warm); border: 1px solid var(--line); border-radius: 4px; padding: 6px 11px; }

.pull-quote { background: var(--bg-grey); position: relative; overflow: hidden; text-align: center; padding: 46px 0; }
.pull-quote blockquote { border: 0; padding: 0; margin: 0 auto; max-width: 780px; font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: var(--ink); }
.pull-quote .quote-attrib { border-top: 2px solid var(--orange); }
.pull-quote .hex-watermark { position: absolute; right: -30px; top: -20px; width: 220px; opacity: .5; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.trio > * { padding: 46px 34px; border-left: 1px solid var(--line); }
.trio > *:first-child { border-left: 0; padding-left: 0; }
.trio .trio__cta { background: var(--bg-peach); padding: 46px 34px; }
@media (max-width: 950px) { .trio { grid-template-columns: 1fr; } .trio > * { border-left: 0; padding: 30px 0; border-top: 1px solid var(--line); } .trio > *:first-child { border-top: 0; padding-top: 0; } .trio .trio__cta { padding: 30px 26px; } }

.team-note { text-align: center; margin-top: 22px; }
.team-note svg { width: 62px; height: 62px; margin: 0 auto 12px; }
.team-note strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--brown-dark); font-weight: 600; line-height: 1.5; }

/* ==========================================================================
   7. Services
   ========================================================================== */
.svc-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1020px) { .svc-detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-detail-grid { grid-template-columns: 1fr; } }
.svc-detail { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; background: #fff; display: flex; flex-direction: column; }
.svc-detail:nth-child(even) { background: var(--bg-warm); }
.svc-detail__icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.svc-detail__icon.is-orange { background: var(--orange); }
.svc-detail__icon.is-brown { background: var(--brown); }
.svc-detail__icon svg { width: 24px; height: 24px; }
.svc-detail__icon svg *:not([fill="none"]) { fill: #fff; }
.svc-detail h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.svc-detail .sub { font-family: var(--font-body); font-size: .86rem; font-weight: 600; color: var(--brown-dark); margin-bottom: .9rem; }
.svc-detail p { font-size: .86rem; }
.svc-detail .check-list { margin: 6px 0 18px; }
.svc-detail .link-more { margin-top: auto; }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.steps > li { list-style: none; padding: 0 22px; border-left: 1px solid var(--line); }
.steps > li:first-child { border-left: 0; padding-left: 0; }
.step__num { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 700; margin-bottom: 12px; }
.step__title { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: .4rem; }
.step p { font-size: .84rem; color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 26px; } .steps > li { border-left: 0; padding: 0; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.difference { background: var(--brown-deep); color: #fff; position: relative; overflow: hidden; }
.difference .hex-watermark { position: absolute; right: -40px; top: 10px; width: 260px; opacity: .12; }
.difference__inner { position: relative; z-index: 2; padding: 58px 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 44px; align-items: center; }
.difference h2 { color: #fff; }
.difference p { color: rgba(255,255,255,.82); font-size: .92rem; }
.difference__items { display: grid; grid-template-columns: repeat(4, 1fr); }
.difference__item { text-align: center; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.18); }
.difference__item:first-child { border-left: 0; }
.difference__item svg { width: 36px; height: 36px; margin: 0 auto 12px; }
.difference__item svg *:not([fill="none"]) { fill: currentColor; }
.difference__item strong { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.35; display: block; }
@media (max-width: 900px) { .difference__inner { grid-template-columns: 1fr; } .difference__items { grid-template-columns: repeat(2, 1fr); gap: 26px; } .difference__item { border-left: 0; } }

.final-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 34px; align-items: center; padding: 44px 0; }
.final-cta h2 { margin-bottom: .3rem; }
.final-cta p { margin: 0; font-size: .92rem; }
.final-cta__tag { border-left: 1px solid var(--line); padding-left: 34px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.9; }
@media (max-width: 950px) { .final-cta { grid-template-columns: 1fr; gap: 22px; } .final-cta__tag { border-left: 0; padding-left: 0; } }

/* ==========================================================================
   8. Insights
   ========================================================================== */
.filter-bar { border-bottom: 1px solid var(--line); background: #fff; }
.filter-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.filter-list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.filter-list a { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brown-dark); white-space: nowrap; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.filter-list a:hover { color: var(--orange); }
.filter-list .is-active a { color: var(--orange); border-bottom-color: var(--orange); }
.search-mini { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; min-width: 230px; background: #fff; }
.search-mini input { border: 0; outline: 0; font-family: var(--font-body); font-size: .84rem; width: 100%; background: transparent; color: var(--ink); }
.search-mini button { border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; color: var(--orange); }
@media (max-width: 760px) { .filter-bar__inner { flex-direction: column; align-items: stretch; } .search-mini { min-width: 0; } }

.insights-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .insights-layout { grid-template-columns: 1fr; } }

.post-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.post-feature__thumb { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg-grey); height: 100%; min-height: 240px; }
.post-feature__body { padding: 22px 26px 22px 0; }
.post-feature h3 { font-size: 1.4rem; }
@media (max-width: 700px) { .post-feature { grid-template-columns: 1fr; } .post-feature__body { padding: 0 22px 24px; } }

.post-cat { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: .5rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
@media (max-width: 860px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.post-card__thumb { display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg-grey); }
.post-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.02rem; }
.post-card p { font-size: .84rem; }
.post-card .link-more { margin-top: auto; padding-top: 10px; }

.sidebar-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-warm); padding: 24px; margin-bottom: 22px; }
.sidebar-box h4 { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.sidebar-box .sub { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); line-height: 1.35; margin-bottom: .6rem; }
.sidebar-box p { font-size: .82rem; }
.sidebar-box svg.box-icon { width: 34px; height: 34px; margin-bottom: 12px; }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li { border-bottom: 1px solid var(--line); }
.topic-list li:last-child { border-bottom: 0; }
.topic-list a { display: block; padding: 9px 0; font-size: .86rem; color: var(--brown-dark); }
.topic-list a:hover { color: var(--orange); }

.subscribe-form input[type="email"] { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; font-family: var(--font-body); font-size: .86rem; margin-bottom: 10px; background: #fff; }
.subscribe-form .btn { width: 100%; justify-content: center; }
.subscribe-form small { display: block; margin-top: 8px; font-size: .72rem; color: var(--muted); }

.idea-band { position: relative; overflow: hidden; background: var(--brown-deep); color: #fff; margin-top: 40px; }
.idea-band__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.idea-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,48,44,.93), rgba(58,48,44,.6)); }
.idea-band__inner { position: relative; z-index: 2; padding: 46px 0; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.idea-band h2 { color: #fff; margin-bottom: .3rem; }
.idea-band p { color: rgba(255,255,255,.85); margin: 0; }

.pagination { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.pagination .page-numbers { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: .84rem; color: var(--brown-dark); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* Single post ------------------------------------------------------------- */
.entry-hero { background: var(--bg-warm); padding: 48px 0 34px; border-bottom: 1px solid var(--line); }
.entry-meta { font-size: .8rem; color: var(--muted); }
.entry-content { max-width: 720px; margin: 0 auto; padding: 44px 0 60px; font-size: 1.02rem; }
.entry-content h2 { margin-top: 2rem; }
.entry-content img { border-radius: var(--radius); margin: 1.5rem 0; }
.entry-thumb { max-width: 960px; margin: 28px auto 0; padding: 0 var(--gutter); }
.entry-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
  border-radius: var(--radius);
}
@media (max-width: 600px) {
  .entry-thumb { margin-top: 18px; }
  .entry-thumb img { aspect-ratio: 3 / 2; }
}

/* Images placed inside the article body */
.entry-content img { width: 100%; height: auto; }
.entry-content .alignleft, .entry-content .alignright { width: auto; max-width: 46%; }

/* ==========================================================================
   9. Contact
   ========================================================================== */
.contact-hero .hero__inner { padding: 52px 0 34px; }
.contact-quick { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 26px; }
.contact-quick__item { display: flex; gap: 12px; align-items: flex-start; max-width: 200px; }
.contact-quick__item svg { width: 30px; height: 30px; flex: none; }
.contact-quick__item span { font-size: .86rem; font-weight: 600; color: var(--brown-dark); line-height: 1.35; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 30px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.form-card { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.form-card h2 { font-size: 1.5rem; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--brown-dark); margin-bottom: 6px; }
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 12px 14px; font-family: var(--font-body); font-size: .92rem; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #b3a9a3; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(243,101,39,.14); }
.form-note { font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.form-hp { position: absolute; left: -9999px; }
.form-message { border-radius: var(--radius); padding: 14px 16px; font-size: .9rem; margin-bottom: 18px; }
.form-message.is-ok { background: #eef7ee; border: 1px solid #bcdcbb; color: #2c5c2c; }
.form-message.is-error { background: #fdeeea; border: 1px solid #f3c3b3; color: #a3341a; }

.contact-side { background: var(--bg-peach); border: 1px solid #f3ded1; border-radius: var(--radius); padding: 30px; }
.contact-side h2 { font-size: 1.2rem; }
.contact-rows { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 22px; }
.contact-row { display: flex; gap: 14px; align-items: flex-start; }
.contact-row svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.contact-row strong { display: block; font-family: var(--font-body); font-size: .92rem; color: var(--brown-dark); }
.contact-row span, .contact-row a { display: block; font-size: .86rem; color: var(--muted); }
.contact-row a { color: var(--orange); }

.value-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; padding: 40px 0; }
.value-trio svg { width: 40px; height: 40px; margin: 0 auto 12px; }
.value-trio strong { display: block; font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); margin-bottom: .25rem; }
.value-trio p { font-size: .86rem; margin: 0; }
@media (max-width: 700px) { .value-trio { grid-template-columns: 1fr; gap: 28px; } }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 26px 0; flex-wrap: wrap; }
.footer-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-nav a { font-size: .74rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--brown-dark); }
.footer-nav a:hover { color: var(--orange); }
.social { display: flex; gap: 14px; align-items: center; padding-left: 26px; border-left: 1px solid var(--line); }
.social a { color: var(--brown); display: flex; }
.social a:hover { color: var(--orange); }
.social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid var(--line); padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 760px) { .social { padding-left: 0; border-left: 0; } }

/* ==========================================================================
   11. Editor / generic page + 404
   ========================================================================== */
.page-body { padding: 54px 0 66px; }
.page-body .entry-content { margin: 0; }
.page-body img { border-radius: var(--radius); }
.wp-caption-text { font-size: .8rem; color: var(--muted); }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin: 0 auto 1rem; }
table { width: 100%; border-collapse: collapse; }
table th, table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: .9rem; }

.error-404 { text-align: center; padding: 90px 0; }
.error-404 .code { font-family: var(--font-display); font-size: 5rem; color: var(--orange); line-height: 1; }

/* Print ------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .idea-band, .btn { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   12. Small-screen refinements
   ========================================================================== */
@media (max-width: 700px) {
  :root { --gutter: 18px; }
  .section { padding: 48px 0; }
  .section--tight { padding: 36px 0; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
  .hero__inner, .home-hero .hero__inner { padding: 44px 0 36px; min-height: 0; }
  .hero__actions { margin: 22px 0 26px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-note { max-width: none; margin-left: 0; }
  .stats { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; text-align: left; }
  .stat:first-child { border-top: 0; padding-top: 0; }
  .cta-band__inner, .difference__inner, .idea-band__inner { padding: 44px 0; }
  .closing-bar__inner { gap: 20px; }
  .final-cta { padding: 34px 0; }
  .contact-quick { gap: 20px; }
  .contact-quick__item { max-width: none; flex: 1 1 100%; }
  .form-card, .contact-side, .sidebar-box { padding: 22px; }
  .founder-name { font-size: 1.85rem; }
  .badges { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .btn { padding: 13px 18px; font-size: .74rem; }
  .entry-content { font-size: .98rem; }
}

/* Long words and pasted URLs should never push a layout sideways */
h1, h2, h3, p, li, td { overflow-wrap: break-word; }

/* ==========================================================================
   13. Hero quote (About, Services, Insights)
   The home page keeps its brown card; these pages set the quote directly on
   the photograph, as the wireframes do.
   ========================================================================== */
.hero-quote {
  margin: 0 0 4px auto; padding: 0; border: 0; max-width: 330px;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.4; color: var(--ink);
  text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 28px rgba(255,255,255,.8);
}
.hero-quote .quote-attrib { margin-top: 16px; }
.hero-quote .quote-attrib strong,
.hero-quote .quote-attrib span { text-shadow: none; }
@media (max-width: 900px) {
  .hero-quote { margin-left: 0; max-width: none; }
}

.stack-words--dark { color: var(--brown-dark); text-align: right; margin-left: auto; }
@media (max-width: 900px) { .stack-words--dark { text-align: left; margin-left: 0; } }

/* A text link that keeps its sentence case */
.link-more--plain { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .86rem; }

/* Centre the attribution under a centred pull quote */
.pull-quote .quote-attrib { margin-left: auto; margin-right: auto; text-align: center; }

/* About hero needs headroom for the portrait on wide screens */
@media (min-width: 901px) {
  .about-hero .hero__inner { min-height: 430px; }
  .about-hero .hero__copy { max-width: 520px; }
}

/* ==========================================================================
   14. Hero image framing
   The photo spans the full width of the hero with no gaps, scaled to the
   width rather than cropped to fill — so the whole frame of the shot is
   visible left to right, with only the top and bottom trimmed.
   ========================================================================== */
.hero__media {
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--bg-warm);
}

@media (min-width: 901px) {
  .hero .hero__inner { min-height: 470px; }
  .home-hero .hero__inner { min-height: 560px; }
  .about-hero .hero__inner { min-height: 490px; }
}

/* Phones: the hero is narrow and tall, so scale to height instead and keep
   it centred — otherwise the image would leave bands above and below. */
@media (max-width: 900px) {
  .hero__media { background-size: cover; background-position: center center; }
}

/* ==========================================================================
   15. Hero refinements against the wireframes
   ========================================================================== */

/* Stacked words in the Services hero: white, top right, over the photograph */
.stack-words--hero {
  color: #fff; text-align: right; margin: 0 0 18px auto;
  text-shadow: 0 1px 3px rgba(58,48,44,.55), 0 0 18px rgba(58,48,44,.35);
}
@media (max-width: 900px) {
  .stack-words--hero { color: var(--brown-dark); text-align: left; margin-left: 0; text-shadow: none; }
}

/* Attribution under a hero quote keeps a soft halo so it stays readable
   where the photograph is light */
.hero-quote .quote-attrib strong,
.hero-quote .quote-attrib span {
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.8);
}
.hero-quote .quote-attrib span { color: var(--brown-dark); }

/* Nothing in the hero should touch the header */
.hero__side { padding-top: 6px; }

/* About: the portrait sits on the right, anchored to the bottom of the hero,
   with the quote clearing it rather than running underneath */
.about-hero__portrait {
  width: 34%;
  background-position: center bottom;
  background-size: cover;
}
@media (min-width: 901px) {
  .about-hero .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .about-hero .hero__copy { max-width: 560px; }
  .about-hero .hero__side { padding-right: 30px; }
  .about-hero .hero-quote { max-width: 290px; }
}
@media (min-width: 1280px) {
  .about-hero .hero__side { padding-right: 60px; }
}

/* A section heading that keeps the full column width */
.section-head--stack { grid-template-columns: 1fr; }

/* ==========================================================================
   16. Mobile: header, menu, heroes and CTA bands
   ========================================================================== */

/* --- Header and slide-down menu ---------------------------------------- */
@media (max-width: 1020px) {
  .header-inner { min-height: 66px; gap: 12px; }
  .brand { gap: 9px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: .9rem; letter-spacing: .03em; }
  .brand__tag { font-size: .52rem; letter-spacing: .07em; }
  .brand img.custom-logo, .custom-logo-link img { max-height: 42px; }

  .nav-toggle { width: 44px; height: 44px; }

  /* Display toggle rather than max-height: a collapsed menu can't be tabbed
     into or read by a screen reader, and it won't overlap the hero. */
  .nav-main {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 120; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    max-height: none; overflow: visible;
  }
  .nav-main.is-open {
    display: block;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-main ul { flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 18px; }
  .nav-main li { width: 100%; }
  .nav-main a { padding: 15px 0; font-size: .84rem; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
  .nav-main ul ul { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 16px; }
  .nav-main .mobile-cta { display: block; padding: 16px var(--gutter) 4px; }
  .nav-main .mobile-cta .btn { width: 100%; justify-content: center; }
}

/* --- Heroes ------------------------------------------------------------- */
/* On phones the photograph moves below the copy as its own band. Text on a
   clean white field always reads; text over a photo on a small screen does not. */
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; background: var(--bg); }
  .hero__inner { order: 1; position: relative; z-index: 2; padding: 34px 0 30px; }
  .hero__media {
    order: 2; position: static; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; height: clamp(190px, 46vw, 290px);
    background-size: cover; background-position: center center;
  }
  .hero__media::after { display: none; }
  .about-hero__portrait { display: none; }

  .hero__grid { grid-template-columns: 1fr; gap: 22px; }
  .hero__copy { max-width: none; }
  .hero__side { padding: 0; align-items: stretch; }
  .hero-note, .hero-quote, .hero-headline-card { max-width: none; margin-left: 0; }
  .hero-quote { text-shadow: none; }
  .hero-quote .quote-attrib strong, .hero-quote .quote-attrib span { text-shadow: none; }
  .stack-words--hero { color: var(--brown-dark); text-shadow: none; text-align: left; margin-left: 0; }
}

/* --- CTA bands, closing bars and final calls ---------------------------- */
@media (max-width: 760px) {
  .cta-band__inner, .idea-band__inner, .difference__inner { padding: 40px 0; gap: 24px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__side { text-align: left; }
  .cta-band__side .rule { margin-left: 0; }

  .idea-band__inner { flex-direction: column; align-items: stretch; }
  .closing-bar__inner { flex-direction: column; align-items: stretch; text-align: left; gap: 18px; }
  .closing-bar h2 { font-size: 1.4rem; }

  .final-cta { grid-template-columns: 1fr; gap: 20px; }
  .final-cta__tag { border-left: 0; padding-left: 0; }

  /* Full-width tap targets in every band */
  .cta-band .btn,
  .idea-band .btn,
  .closing-bar .btn,
  .final-cta .btn,
  .trio__cta .btn { width: 100%; justify-content: center; }

  .difference__items { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .difference__item { border-left: 0; padding: 0 6px; }
  .stack-words { font-size: .72rem; letter-spacing: .13em; }
}

@media (max-width: 460px) {
  .difference__items { grid-template-columns: 1fr; }
  .value-trio { padding: 30px 0; }
  .filter-list { gap: 16px; padding-bottom: 4px; }
  .search-mini { width: 100%; }
}

/* Anything tappable gets a comfortable target on touch screens */
@media (hover: none) {
  .nav-main a, .footer-nav a, .topic-list a { min-height: 44px; display: flex; align-items: center; }
  .social a { padding: 6px; }
}

/* ==========================================================================
   17. Admin bar and footer on small screens
   ========================================================================== */

/* WordPress stops pinning its admin bar below 600px — it scrolls away with the
   page. Holding the sticky header 46px down from the top then leaves a gap
   that page content shows through, which reads as a header floating mid-page.
   Only offset the header while the admin bar is actually pinned. */
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Footer navigation: even rows rather than tall, widely spaced links */
@media (max-width: 760px) {
  .footer-top { gap: 18px; padding: 22px 0; }
  .footer-nav { width: 100%; }
  .footer-nav ul { gap: 10px 20px; }
  .footer-nav a { padding: 4px 0; }
  .footer-bottom { padding: 14px 0; gap: 8px; }
  .footer-bottom p { font-size: .74rem; }
}

/* Comfortable tap targets without stretching layout rows */
@media (hover: none) {
  .footer-nav a, .topic-list a { min-height: 0; display: inline-block; padding: 8px 0; }
  .nav-main a { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   18. Gutter guarantee
   Several blocks (.hero__inner, .cta-band__inner, .difference__inner,
   .idea-band__inner, .filter-bar__inner, .final-cta, .value-trio) are also
   .wrap elements and set a vertical padding shorthand, which silently wipes
   out the side gutters. Unnoticeable on desktop, where the container is
   narrower than the viewport; on a phone the text runs to the screen edge.
   These longhand declarations come last, so the gutters always survive.
   ========================================================================== */
.wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Full-bleed children inside a .wrap can opt out explicitly */
.wrap > .is-bleed { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }

/* The article body sits inside .wrap already, so it needs no second gutter */
.entry-content, .entry-thumb { padding-left: 0; padding-right: 0; }

/* ==========================================================================
   19. Hero side column containment on small screens
   The quote, stacked words and headline block are positioned to the right on
   desktop with auto margins. On phones those must reset hard, or the block
   can sit outside the gutter and get clipped at the screen edge.
   ========================================================================== */
@media (max-width: 900px) {
  .hero .hero__side,
  .hero .hero__side > * {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    text-align: left;
  }
  .hero .hero-quote { padding: 0; border: 0; }
  .hero .hero-headline-card::after { margin-left: 0; }
  .hero .hero__grid > * { min-width: 0; }
  .hero__inner { overflow-x: clip; }
}

/* ==========================================================================
   20. Hero side column — hard reset on small screens
   The quote, stacked words and headline block are placed with auto margins on
   desktop. Neutralising those with normal declarations proved unreliable once
   the block's content was wider than the column, so on phones the whole side
   column becomes plain full-width blocks. Declared with !important because
   this must win over every earlier rule and any Additional CSS.
   ========================================================================== */
@media (max-width: 900px) {
  .hero .hero__side {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .hero .hero__side > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    text-align: left !important;
    white-space: normal !important;
    float: none !important;
  }
  .hero .hero__side > *:last-child { margin-bottom: 0 !important; }
  .hero .hero-quote { padding: 0 !important; border: 0 !important; }
  .hero .hero-note { padding: 22px !important; }
  .hero .quote-attrib { margin-left: 0 !important; }
}

/* ==========================================================================
   21. Scheduling buttons, contact call-out, RSS line
   ========================================================================== */

/* The header button carries a long label; it shortens before it can crowd
   the navigation, and returns to full length where there is room. */
.btn--book .btn__short { display: none; }
@media (max-width: 1240px) {
  .btn--book .btn__full { display: none; }
  .btn--book .btn__short { display: inline; }
}
@media (max-width: 1020px) {
  /* Inside the mobile menu there is room for the full label again */
  .nav-main .btn--book .btn__full { display: inline; }
  .nav-main .btn--book .btn__short { display: none; }
}
.btn--book { font-size: .74rem; padding: 13px 18px; }
.nav-main .btn--book { font-size: .78rem; padding: 14px 20px; }

/* Contact: "What question are you trying to answer?" */
.question-callout { background: var(--bg-peach); }
.callout { max-width: 880px; }
.callout h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.question-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 10px; }
.question-list li {
  font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink);
  padding: 12px 16px; background: #fff; border-left: 3px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0;
}
.callout__close { font-weight: 600; color: var(--brown-dark); margin: 0; }
@media (min-width: 860px) {
  .question-list { grid-template-columns: repeat(3, 1fr); }
  .question-list li { font-size: .95rem; }
}

/* RSS link under the newsletter box */
.rss-line { margin: 14px 0 0; }
.rss-line a { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--brown-dark); }
.rss-line a:hover { color: var(--orange); }
.rss-line svg { width: 15px; height: 15px; color: var(--orange); }

/* ==========================================================================
   22. About portrait — cut-out support
   The portrait is now a background-free PNG, so it must sit whole on the hero
   rather than being cropped to fill, and the left-edge fade has to go or it
   would make his shoulder translucent.
   ========================================================================== */
@media (min-width: 901px) {
  .about-hero__portrait {
    width: 46%;
    right: 0;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about-hero .hero__side { padding-right: 190px; }
}
@media (min-width: 1280px) {
  .about-hero .hero__side { padding-right: 240px; }
}

/* Newsletter box variants */
.subscribe-note { display: block; margin-top: 8px; font-size: .72rem; color: var(--muted); }
.subscribe-form .btn { width: 100%; justify-content: center; }
.sidebar-box .mc4wp-form input[type="email"] { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; font-family: var(--font-body); font-size: .86rem; margin-bottom: 10px; background: #fff; }
.sidebar-box .mc4wp-form input[type="submit"] { width: 100%; background: var(--orange); color: #fff; border: 0; border-radius: var(--radius); padding: 12px 18px; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.sidebar-box .mc4wp-form input[type="submit"]:hover { background: var(--orange-dark); }

/* ==========================================================================
   23. Hero buttons stay on one row
   The longer "Let's Find the Right Next Step" label was wrapping the pair onto
   two lines. They shrink slightly and sit side by side instead.
   ========================================================================== */
@media (min-width: 901px) {
  .hero__actions { flex-wrap: nowrap; align-items: stretch; }
  .hero__actions .btn { white-space: nowrap; font-size: .72rem; padding: 13px 16px; }
  .hero__copy { max-width: 560px; }
}
@media (min-width: 1200px) {
  .hero__actions .btn { font-size: .76rem; padding: 14px 20px; }
}