/* ==========================================================================
   Patrícia Ribeiro — Autonomia Organizacional
   Design system: Verde profundo / Areia quente / Off-white / Grafite
   Tipografia: EB Garamond (editorial) + Lato (clareza)
   ========================================================================== */

:root {
  --c-green: #34463A;
  --c-green-ink: #26332A;
  --c-green-soft: #44584A;
  --c-sand: #C5B59C;
  --c-sand-deep: #AD9A7A;
  --c-sand-tint: #EFE9DD;
  --c-cream: #F5F2EC;
  --c-white: #FFFFFF;
  --c-graphite: #262626;
  --c-ink: #262B27;
  --c-line-dark: rgba(38, 38, 38, 0.14);
  --c-line-light: rgba(245, 242, 236, 0.28);

  --font-serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.75rem);
  --section-pad: clamp(4.25rem, 9vw, 7.5rem);

  --fs-hero: clamp(2.35rem, 2.1vw + 1.8rem, 4.1rem);
  --fs-h2: clamp(1.9rem, 1.4vw + 1.5rem, 2.85rem);
  --fs-h3: clamp(1.3rem, 0.5vw + 1.15rem, 1.55rem);
  --fs-lead: clamp(1.05rem, 0.3vw + 0.95rem, 1.2rem);
  --fs-label: 0.76rem;

  --ease: cubic-bezier(.22, .7, .3, 1);
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

html, body {
  background: var(--c-cream);
  color: var(--c-ink);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sharp corners everywhere by design — except the WhatsApp bubble, which keeps its native round shape on purpose. */
button, input, textarea, select, img, .btn, .card, section, .solution-card, .testi-card, .channel-card, .workshop-item, .hiring-card, .pain-item, .stat {
  border-radius: 0;
}

h1, h2, h3, h4, blockquote {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.14;
  color: var(--c-green-ink);
  letter-spacing: 0.002em;
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark blockquote { color: var(--c-cream); }

p { color: var(--c-ink); }
.on-dark p { color: rgba(245,242,236,0.86); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

.section-pad { padding-block: var(--section-pad); }
.bg-cream { background: var(--c-cream); }
.bg-white { background: var(--c-white); }
.bg-green { background: var(--c-green); }
.bg-sand  { background: var(--c-sand-tint); }
.bg-sand-solid { background: var(--c-sand); }

/* Text tuned for sitting on the solid, warmer sand background */
.on-sand .label { color: var(--c-green); }
.on-sand .stat .figure span { color: var(--c-green-soft); }
.on-sand .stat .caption { color: var(--c-green-ink); opacity: 0.72; }
.on-sand .eyebrow-row::before { background: var(--c-green); }

/* ---------- Type helpers ---------- */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
}
.on-dark .label { color: var(--c-sand); }

.lede {
  font-size: var(--fs-lead);
  color: var(--c-ink);
  max-width: 64ch;
}
.on-dark .lede { color: rgba(245,242,236,0.86); }

.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--c-sand-deep);
  border: 0;
  margin: 1.5rem 0;
}
.on-dark .rule { background: var(--c-sand); }

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.eyebrow-row::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--c-sand-deep);
  flex-shrink: 0;
}
.on-dark .eyebrow-row::before { background: var(--c-sand); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  text-align: center;
  line-height: 1.45;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (max-width: 480px) { .btn { padding: 0.95rem 1.4rem; letter-spacing: 0.07em; } }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn-arrow { transition: transform .3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }

.btn-primary {
  background: var(--c-green);
  color: var(--c-cream);
  border-color: var(--c-green);
}
.btn-primary:hover { background: var(--c-green-ink); border-color: var(--c-green-ink); box-shadow: 0 14px 28px -12px rgba(38, 51, 42, 0.55); }

.btn-outline {
  background: transparent;
  color: var(--c-green);
  border-color: var(--c-green);
}
.btn-outline:hover { background: var(--c-green); color: var(--c-cream); box-shadow: 0 14px 28px -12px rgba(38, 51, 42, 0.4); }

.btn-on-dark {
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(245,242,236,0.55);
}
.btn-on-dark:hover { background: var(--c-sand); border-color: var(--c-sand); color: var(--c-green-ink); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45); }

.btn-sand {
  background: var(--c-sand);
  color: var(--c-green-ink);
  border-color: var(--c-sand);
}
.btn-sand:hover { background: var(--c-sand-deep); border-color: var(--c-sand-deep); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.4); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-green);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.text-link:hover { color: var(--c-green-ink); gap: 0.8rem; }
.on-dark .text-link { color: var(--c-cream); }
.on-dark .text-link:hover { color: var(--c-sand); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line-dark);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 58px; width: auto; }
@media (max-width: 420px) { .brand img { height: 50px; } }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: 2.4rem; align-items: center; }
.main-nav a {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"], .main-nav .sub-trigger.is-current { border-color: var(--c-sand-deep); color: var(--c-green); }

/* Soluções dropdown: opens on hover and on keyboard focus */
.has-sub { position: relative; }
.has-sub::after { content: ''; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 1.9rem; }
.sub-trigger::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 0.5rem; vertical-align: 0.2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.sub-nav {
  position: absolute;
  top: calc(100% + 1.9rem);
  left: -1.4rem;
  min-width: 290px;
  display: block !important;
  background: var(--c-white);
  border: 1px solid var(--c-line-dark);
  box-shadow: 0 22px 40px -24px rgba(38, 51, 42, 0.35);
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub:hover .sub-nav, .has-sub:focus-within .sub-nav { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .sub-trigger::after, .has-sub:focus-within .sub-trigger::after { transform: rotate(225deg) translate(-2px, -2px); }
.main-nav .sub-nav a {
  display: block;
  padding: 0.65rem 1.4rem;
  border: 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-green-ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
}
.main-nav .sub-nav a:hover, .main-nav .sub-nav a[aria-current="page"] { background: var(--c-sand-tint); color: var(--c-green); padding-left: 1.7rem; }
.main-nav .sub-nav .sub-all { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--c-line-dark); }
.main-nav .sub-nav .sub-all a { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-sand-deep); }

.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.header-actions .btn { padding: 0.8rem 1.5rem; }
@media (max-width: 480px) {
  .header-actions { gap: 0.9rem; }
  .header-actions .btn { padding: 0.7rem 1rem; font-size: 0.72rem; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  background: none;
  border: none;
  padding: 0.5rem 0;
}
.nav-toggle span { display: block; width: 100%; height: 1.5px; background: var(--c-ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--c-cream);
  z-index: 999;
  padding: 2rem var(--pad);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  overflow-y: auto;
}
.mobile-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li { border-bottom: 1px solid var(--c-line-dark); }
.mobile-nav a {
  display: block;
  padding: 1.15rem 0;
  font-family: var(--font-serif);
  font-size: 1.4rem;
}
.mobile-sub-title { display: block; padding: 1.15rem 0 0.4rem; font-family: var(--font-serif); font-size: 1.4rem; }
.mobile-nav .mobile-sub ul { padding: 0 0 0.9rem 1rem; }
.mobile-nav .mobile-sub li { border-bottom: 0; }
.mobile-nav .mobile-sub a { padding: 0.45rem 0; font-family: var(--font-sans); font-size: 1rem; color: #4a4f4b; }
.mobile-nav .contact-mini { margin-top: 2.5rem; font-size: 0.9rem; }
.mobile-nav .contact-mini p { margin-bottom: 0.4rem; }

@media (min-width: 960px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: clamp(1.1rem, 4vw, 2.25rem);
  bottom: clamp(1.1rem, 4vw, 2.25rem);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 10px 24px -6px rgba(18, 71, 40, 0.5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 32px -8px rgba(18, 71, 40, 0.6);
}
.whatsapp-float svg { width: 30px; height: 30px; display: block; }
.whatsapp-float .wa-tooltip {
  position: absolute;
  right: calc(100% + 0.9rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-green-ink);
  color: var(--c-cream);
  padding: 0.55rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.whatsapp-float:hover .wa-tooltip { opacity: 1; }
@media (max-width: 640px) {
  .wa-tooltip { display: none; }
  .whatsapp-float { width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   Hero — one edited photograph with the headline built into it
   ========================================================================== */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-green);
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  transform: scale(1.3);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-green);
  mix-blend-mode: color;
  opacity: 0.16;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(23, 31, 26, 0) 38%, rgba(23, 31, 26, 0.38) 72%, rgba(23, 31, 26, 0.74) 100%),
    linear-gradient(90deg, rgba(23, 31, 26, 0.48) 0%, rgba(23, 31, 26, 0.06) 48%, rgba(23, 31, 26, 0) 68%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 9vw, 5rem);
}
.hero .label { text-shadow: 0 2px 16px rgba(14, 19, 16, 0.85); }
.hero h1 { color: var(--c-cream); font-size: var(--fs-hero); max-width: 16ch; text-shadow: 0 4px 24px rgba(14, 19, 16, 0.4); }
.hero-sub { margin-top: 1.5rem; max-width: 46ch; color: rgba(245,242,236,0.92); text-shadow: 0 2px 16px rgba(14, 19, 16, 0.45); }
.hero-sub strong { font-weight: 700; color: var(--c-sand); }
.hero-actions { margin-top: 2.25rem; }

@media (min-width: 700px) { .hero { min-height: 88vh; } }

/* Mobile/tablet: the photo sits behind the full text block, so darken from the label down. */
@media (max-width: 959px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(23, 31, 26, 0.05) 0%, rgba(23, 31, 26, 0.5) 30%, rgba(23, 31, 26, 0.72) 60%, rgba(23, 31, 26, 0.85) 100%);
  }
}

/* Wide screens: the portrait photo lives on the right and melts into deep green on the left,
   so the headline never sits on top of her face. */
@media (min-width: 960px) {
  .hero { align-items: center; background: var(--c-green-ink); }
  .hero-media { left: 34%; }
  .hero-media img { object-position: center 28%; }
  .hero-scrim {
    background:
      linear-gradient(90deg, #26332A 0%, #26332A 34%, rgba(38, 51, 42, 0.82) 42%, rgba(38, 51, 42, 0.25) 58%, rgba(38, 51, 42, 0) 72%),
      linear-gradient(180deg, rgba(23, 31, 26, 0) 60%, rgba(23, 31, 26, 0.45) 100%);
  }
  .hero h1 { max-width: 14ch; }
}

/* ==========================================================================
   Grids / cards (generic)
   ========================================================================== */
.grid { display: grid; gap: 1px; background: var(--c-line-dark); }
.on-dark.grid { background: var(--c-line-light); }

.intro-block { max-width: 100%; }

/* Desktop: heading on the left, copy on the right, so long paragraphs fill the width
   instead of hugging the left edge. */
@media (min-width: 960px) {
  .intro-block.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 1.1rem;
    align-items: start;
  }
  .intro-block.split > .label,
  .intro-block.split > .meta-row { grid-column: 1 / -1; }
  .intro-block.split > h2 { grid-column: 1; grid-row: 2 / span 6; margin-top: 0; }
  .intro-block.split > p:not(.label) { grid-column: 2; margin-top: 0 !important; max-width: none; }
}
.intro-block h2 { margin-top: 0.6rem; font-size: var(--fs-h2); }

/* Pain points (2.2) — portrait beside a stack of serif statements */
.pain-wrap { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; gap: 2.5rem; }
.pain-media { position: relative; overflow: hidden; aspect-ratio: 5 / 4; }
.pain-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: scale(1.3); }
.pain-heading {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sand-deep);
}
.pain-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 2rem; }
.pain-item dt {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem);
  line-height: 1.15;
  color: var(--c-green);
  transition: color 0.3s ease, transform 0.3s ease;
}
.pain-item dd { margin: 0.5rem 0 0; font-size: 1rem; color: #4a4f4b; max-width: 44ch; }
.pain-item:hover dt { color: var(--c-sand-deep); transform: translateX(6px); }

@media (min-width: 900px) {
  .pain-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  .pain-media { aspect-ratio: 4 / 5; }
  .pain-list { gap: 2.4rem; }
  .pain-item:nth-child(even) { padding-left: clamp(2rem, 5vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) { .pain-item dt { transition: none; } .pain-item:hover dt { transform: none; } }

/* Method steps (2.3) — a sequence that builds, not four equal boxes */
.method-steps { margin-top: 3rem; max-width: 100%; position: relative; }
/* Centered on the 2.25rem marker; the fill lives inside the spine so the two can never drift apart. */
.method-steps .spine {
  position: absolute;
  left: calc(1.125rem - 0.5px);
  top: 1.125rem;
  bottom: 1.125rem;
  width: 1px;
  background: rgba(245, 242, 236, 0.2);
}
.method-steps .spine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--c-sand);
  transition: height 0.15s linear;
}
.method-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2.5rem;
  cursor: default;
}
.method-step:last-child { padding-bottom: 0; }
.method-step-marker {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--c-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--c-sand);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--c-green);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.method-step-body h3 { color: var(--c-cream); font-size: 1.3rem; margin-bottom: 0.5rem; transition: color .3s var(--ease); }
.method-step-body p { font-size: 0.95rem; max-width: 50ch; }
.method-step:hover .method-step-marker { background: var(--c-sand); color: var(--c-green-ink); }
.method-step:hover .method-step-body h3 { color: var(--c-sand); }

@media (min-width: 760px) {
  .method-step { grid-template-columns: 3rem 1fr; }
  .method-step-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: baseline; }
  .method-step-body h3 { margin-bottom: 0; font-size: 1.65rem; }
  .method-step-body p { max-width: none; font-size: 1rem; }
}

.pillars-note { margin-top: 3rem; font-size: 0.86rem; color: rgba(245,242,236,0.65); max-width: 60ch; }

/* Solutions (2.4) — stacked bars that open to reveal the description */
.solutions-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.solution-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  background: var(--c-white);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.solution-item summary::-webkit-details-marker { display: none; }
.solution-item summary .label { grid-column: 1; }
.solution-item summary h3 { grid-column: 1; font-size: clamp(1.3rem, 0.8vw + 1.05rem, 1.65rem); color: var(--c-green-ink); transition: color .3s var(--ease); }
.solution-item summary .toggle { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 16px; height: 16px; }
.solution-item summary .toggle::before, .solution-item summary .toggle::after {
  content: ''; position: absolute; background: var(--c-green); transition: transform .3s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
}
.solution-item summary .toggle::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.solution-item summary .toggle::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.bg-white .solution-item summary { background: var(--c-cream); }
.solution-item summary:hover, .bg-white .solution-item summary:hover { background: var(--c-sand-tint); }
.solution-item[open] summary { background: var(--c-green); }
.solution-item[open] summary h3 { color: var(--c-cream); }
.solution-item[open] summary .label { color: var(--c-sand); }
.solution-item[open] summary .toggle::before { background: var(--c-cream); }
.solution-item[open] summary .toggle::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.solution-item summary:focus-visible { outline: 2px solid var(--c-sand-deep); outline-offset: 2px; }
.solution-body { padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 2rem; animation: solution-open .4s var(--ease); }
.solution-body .tagline { font-family: var(--font-serif); font-style: italic; color: var(--c-green); font-size: 1.2rem; }
.solution-body p:not(.tagline) { margin-top: 0.6rem; color: #4a4f4b; max-width: 68ch; }
.solution-body .text-link { display: inline-block; margin-top: 1.2rem; }
@keyframes solution-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 760px) {
  .solution-item summary { grid-template-columns: 11rem minmax(0, 1fr) auto; padding-block: 1.5rem; }
  .solution-item summary .label, .solution-item summary h3 { grid-column: auto; }
  .solution-item summary .toggle { grid-column: auto; grid-row: auto; }
  .solution-body { padding-left: calc(clamp(1.25rem, 3vw, 2rem) + 11rem + 1.5rem); }
}
@media (prefers-reduced-motion: reduce) { .solution-body { animation: none; } }

.solutions-cta { margin-top: 3rem; text-align: center; }

/* Stats (2.5) */
.stats-wrap { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 3.25rem; }
.stat { background: var(--c-cream); padding: 2.25rem 2.5rem; text-align: left; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stat:hover { transform: translateY(-5px); box-shadow: 0 18px 32px -16px rgba(38, 51, 42, 0.3); }
.stat .figure { font-family: var(--font-serif); font-size: clamp(2.6rem, 4vw, 3.6rem); color: var(--c-green); line-height: 1; }
.stat .figure span { color: var(--c-green-soft); }
.stat .caption { margin-top: 0.6rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #585d59; }
@media (min-width: 700px) { .stats-wrap { grid-template-columns: repeat(3, 1fr); } }

/* Testimonials (2.6) — a centered, swipeable slider */
.testi-slider { margin-top: 3.25rem; }
.testi-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: var(--c-white);
  text-align: center;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testi-stars { display: flex; gap: 0.3rem; margin-bottom: 1.5rem; color: var(--c-sand-deep); }
.testi-stars svg { width: 17px; height: 17px; fill: currentColor; }
.testi-slide blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--c-green-ink); max-width: 56ch; }
.testi-slide cite { display: block; margin-top: 1.75rem; font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--c-green); text-transform: uppercase; letter-spacing: 0.04em; }
.testi-slide cite span { display: block; font-weight: 400; color: #6a6f6b; margin-top: 0.25rem; text-transform: none; letter-spacing: 0; font-size: 0.92rem; }

.testi-nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; }
.testi-arrow {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--c-line-dark);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.testi-arrow svg { width: 16px; height: 16px; }
.testi-arrow:hover { background: var(--c-green); border-color: var(--c-green); color: var(--c-cream); }
.testi-dots { display: flex; gap: 0.55rem; }
.testi-dot { width: 7px; height: 7px; padding: 0; border: none; background: var(--c-line-dark); cursor: pointer; transition: background-color .25s var(--ease), transform .25s var(--ease); }
.testi-dot.active { background: var(--c-green); transform: scale(1.4); }

@media (min-width: 700px) { .testi-slide { flex: 0 0 80%; } }
@media (min-width: 1000px) { .testi-slide { flex: 0 0 64%; } }

/* About split (2.7) */
.about-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.about-media { position: relative; }
@media (min-width: 560px) and (max-width: 899px) { .about-media { max-width: 460px; } }
.about-media-inner { aspect-ratio: 4/5; overflow: hidden; }
.about-media-inner img { aspect-ratio: 4/5; }
.about-media .frame-mark { position: absolute; top: -10px; left: -10px; width: 40px; height: 40px; border-left: 1px solid var(--c-sand-deep); border-top: 1px solid var(--c-sand-deep); z-index: 2; }
@media (min-width: 900px) { .about-media .frame-mark { top: -18px; left: -18px; width: 46px; height: 46px; } }
.on-sand .about-media .frame-mark { border-color: var(--c-green); }
.about-text .label { margin-bottom: 1rem; }
.about-text h2 { font-size: var(--fs-h2); }
.about-text p { margin-top: 1.1rem; }
.qualifications { margin-top: 1.75rem; }
.qualifications li { padding: 0.65rem 0; border-top: 1px solid var(--c-line-dark); font-size: 0.95rem; }
.qualifications li:last-child { border-bottom: 1px solid var(--c-line-dark); }
.about-text .hero-actions { margin-top: 2rem; }

@media (min-width: 900px) { .about-split { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; } }
@media (min-width: 900px) { .about-split.reverse { grid-template-columns: 1.15fr 0.85fr; } }
@media (min-width: 900px) { .about-split.reverse .about-media { order: 2; } }

/* Intermediate quote banner with parallax */
.quote-banner {
  position: relative;
  height: clamp(280px, 46vw, 460px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-banner-media { position: absolute; inset: 0; overflow: hidden; }
.quote-banner-media img { object-position: center 22%; }
.quote-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,31,26,0.45) 0%, rgba(23,31,26,0.25) 50%, rgba(23,31,26,0.55) 100%);
}
.quote-banner-content { position: relative; z-index: 1; text-align: center; }
.quote-banner-content .serif-quote {
  color: var(--c-cream);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  max-width: 18ch;
  margin-inline: auto;
}

@media (max-width: 959px) {
  .quote-banner { align-items: flex-end; padding-bottom: 2.25rem; }
  .quote-banner-scrim { background: linear-gradient(180deg, rgba(23,31,26,0) 35%, rgba(23,31,26,0.8) 100%); }
}

@media (min-width: 960px) {
  .quote-banner { height: clamp(420px, 38vw, 560px); justify-content: flex-start; background: var(--c-green-ink); }
  .quote-banner-media { left: 40%; }
  .quote-banner-media img { object-position: center 25%; }
  .quote-banner-scrim {
    background: linear-gradient(90deg, #26332A 0%, #26332A 40%, rgba(38, 51, 42, 0.75) 47%, rgba(38, 51, 42, 0.15) 62%, rgba(38, 51, 42, 0) 75%);
  }
  .quote-banner-content { text-align: left; width: 100%; }
  .quote-banner-content .serif-quote { margin-inline: 0; font-size: clamp(2.2rem, 3.4vw, 3.2rem); max-width: none; line-height: 1.25; }
}

/* Final CTA banners */
.cta-banner { text-align: left; }
.cta-banner .container { max-width: clamp(700px, 56vw, 1020px); }
.cta-banner h2 { font-size: var(--fs-h2); }
.cta-banner p { margin-top: 1.1rem; }
.cta-banner .hero-actions { margin-top: 2rem; }

/* ==========================================================================
   Page banner (interior pages)
   ========================================================================== */
.page-banner { background: var(--c-green); padding-block: clamp(4.5rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem); }
.page-banner h1 { font-size: clamp(1.85rem, 2.2vw + 1.2rem, 3.6rem); max-width: 22ch; }
.page-banner .lede { max-width: 64ch; }

@media (min-width: 960px) {
  .page-banner .container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: end;
  }
  .page-banner .container > .label { grid-column: 1 / -1; }
  .page-banner .container > h1 { grid-column: 1; grid-row: 2 / span 4; align-self: end; }
  .page-banner .container > p:not(.label),
  .page-banner .container > .hero-actions { grid-column: 2; }
  .page-banner .container > .lede:first-of-type { margin-top: 0; }
}
.page-banner p { margin-top: 1.25rem; }
.page-banner p + p { margin-top: 0.9rem; }

/* Individual solution pages */
.solution-banner .label a { color: inherit; border-bottom: 1px solid currentColor; transition: color .25s var(--ease); }
.solution-banner .label a:hover { color: var(--c-cream); }
.solution-banner .label span { margin-inline: 0.35rem; opacity: 0.6; }
.solution-banner h1 { max-width: 14ch; margin-top: 0.9rem; }
@media (min-width: 960px) { .solution-banner h1 { margin-top: 0; } }
.solution-banner .solution-tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 0.8vw + 1.1rem, 1.7rem); color: var(--c-sand); line-height: 1.3; }
.solution-banner .meta-row { margin: 1.75rem 0 0; }
@media (min-width: 960px) { .page-banner .container > .meta-row { grid-column: 2; } }


.banner-media { position: relative; height: clamp(220px, 32vw, 420px); overflow: hidden; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

/* Method detail sections */
.detail-section { border-top: 1px solid var(--c-line-dark); }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.detail-main { max-width: 680px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.meta-row span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-green); border: 1px solid var(--c-line-dark); padding: 0.35rem 0.7rem;
}
.on-dark .meta-row span { color: var(--c-cream); border-color: var(--c-line-light); }
.detail-main h2 { font-size: var(--fs-h2); }
.detail-main .lede { margin-top: 1.1rem; }
.detail-main p + p { margin-top: 1rem; }

.detail-list { margin-top: 1.75rem; display: flex; flex-direction: column; }
.detail-list li { position: relative; padding: 0.75rem 0 0.75rem 1.4rem; border-top: 1px solid var(--c-line-dark); font-size: 0.96rem; }
.detail-list li:last-child { border-bottom: 1px solid var(--c-line-dark); }
.detail-list li::before { content: '—'; position: absolute; left: 0; color: var(--c-sand-deep); }
.on-sand .detail-list li::before { color: var(--c-green); }
.on-sand .detail-list li { border-color: rgba(38, 51, 42, 0.18); }
.on-dark .detail-list li { border-color: var(--c-line-light); }

.detail-callout {
  background: var(--c-sand-tint);
  padding: 1.9rem clamp(1.4rem, 3vw, 2.1rem);
  align-self: start;
}
.on-dark .detail-callout { background: rgba(245,242,236,0.08); }
.detail-callout .label { margin-bottom: 0.75rem; }
.detail-callout p { font-size: 0.95rem; }
.detail-callout .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }

@media (min-width: 880px) { .detail-grid { grid-template-columns: 1.6fr 1fr; gap: 3.5rem; } }

.detail-aside-image { margin-top: 2.5rem; }
.detail-aside-image img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.detail-aside-image figcaption { margin-top: 0.75rem; font-size: 0.82rem; color: #6a6f6b; font-style: italic; font-family: var(--font-serif); }

/* How it works intro (3.2) */
.how-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 860px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.how-grid p + p { margin-top: 1rem; }

/* Tracks / tabs (3.6) */
.tabs { margin-top: 3rem; }
.tab-list { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line-dark); }
.tab-btn {
  background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.9rem 0.5rem; font-family: var(--font-serif); font-size: 1rem; line-height: 1.3;
  color: #6a6f6b; transition: color .25s var(--ease), border-color .25s var(--ease);
}
@media (min-width: 640px) {
  .tab-list { display: flex; gap: 2.5rem; }
  .tab-btn { padding: 0.9rem 0.25rem; font-size: 1.15rem; }
}
.tab-btn[aria-selected="true"] { color: var(--c-green); border-color: var(--c-sand-deep); }
.tab-panel { display: none; padding-top: 2.5rem; }
.tab-panel.active { display: block; }

.workshop-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line-dark); }
.workshop-item { background: var(--c-white); padding: 1.6rem clamp(1.2rem, 2.5vw, 1.9rem); }
.workshop-item h4 { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 500; color: var(--c-green-ink); }
.workshop-item p { margin-top: 0.4rem; font-size: 0.9rem; color: #4a4f4b; }
@media (min-width: 780px) { .workshop-list { grid-template-columns: repeat(2, 1fr); } }

.hiring-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line-dark); }
.hiring-card { background: var(--c-sand-tint); padding: 2rem; }
.hiring-card h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.5rem; }
.hiring-card p { font-size: 0.92rem; }
@media (min-width: 780px) { .hiring-grid { grid-template-columns: repeat(3, 1fr); } }

/* Where to start (3.9) */
.start-note { margin-top: 1.25rem; font-size: 0.85rem; color: rgba(245,242,236,0.65); max-width: 60ch; }

/* FAQ (3.10) */
.faq-list { margin-top: 2.5rem; max-width: 100%; }
.faq-item { border-top: 1px solid var(--c-line-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--c-line-dark); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--c-green-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-item summary .toggle::before, .faq-item summary .toggle::after {
  content: ''; position: absolute; background: var(--c-green); transition: transform .25s var(--ease);
}
.faq-item summary .toggle::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-item summary .toggle::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item[open] summary .toggle::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item .faq-answer { padding-bottom: 1.6rem; max-width: 68ch; font-size: 0.96rem; color: #4a4f4b; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-channels { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line-dark); }
.channel-card { background: var(--c-white); padding: 2.1rem; }
.channel-card .label { margin-bottom: 0.8rem; }
.channel-card a, .channel-card span.value { font-family: var(--font-serif); font-size: 1.3rem; color: var(--c-green-ink); }
.channel-card a:hover { color: var(--c-green); }
@media (min-width: 760px) { .contact-channels { grid-template-columns: repeat(3, 1fr); } }

.contact-form-wrap { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 940px) { .contact-form-wrap { grid-template-columns: 0.9fr 1.1fr; } }

.form-side .label { margin-bottom: 1rem; }
.form-side h2 { font-size: var(--fs-h2); }
.form-side p { margin-top: 1.1rem; }

.field { margin-bottom: 1.5rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-green-ink); margin-bottom: 0.55rem; }
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line-dark);
  padding: 0.75rem 0.1rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-green); }
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row .field { grid-column: span 1; }
.form-note { font-size: 0.82rem; color: #6a6f6b; margin-top: 1rem; }
.form-success { display: none; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--c-sand-tint); font-size: 0.92rem; }
.form-success.show { display: block; }

/* ==========================================================================
   Footer — light, editorial, not another dark block stacked on the CTA
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; background: var(--c-cream); color: var(--c-ink); border-top: 1px solid var(--c-line-dark); }
.footer-watermark {
  position: absolute;
  right: -4%;
  bottom: -14%;
  width: 34%;
  max-width: 380px;
  min-width: 200px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.footer-top { position: relative; z-index: 1; padding-block: clamp(3.5rem, 7vw, 5.5rem); display: grid; grid-template-columns: 1fr; gap: 2.75rem; }
/* the PNG carries ~15% transparent padding, so pull it back into the column edge */
.footer-brand img { --logo-h: clamp(104px, 9vw, 132px); height: var(--logo-h); width: auto; margin: calc(var(--logo-h) * -0.16) 0 calc(var(--logo-h) * -0.16) calc(var(--logo-h) * -0.155); }
.footer-brand .tagline { margin-top: 1.1rem; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--c-green); max-width: 26ch; }
.footer-col h5 { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-sand-deep); margin-bottom: 1.1rem; }
.footer-col ul li { margin-bottom: 0.65rem; font-size: 0.92rem; color: #4a4f4b; }
.footer-col a:hover { color: var(--c-green); }
.footer-link-icon { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; }
.footer-link-icon svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-sand-deep); transition: color .25s var(--ease); }
.footer-link-icon span { overflow-wrap: anywhere; }
.footer-link-icon:hover svg { color: var(--c-green); }
.footer-bottom { position: relative; z-index: 1; border-top: 1px solid var(--c-line-dark); padding-block: 1.6rem 6rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.8rem; color: #6a6f6b; }
@media (min-width: 760px) { .footer-bottom { padding-block: 1.6rem; padding-right: 5rem; } }

@media (min-width: 600px) {
  .footer-top { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: 1.2fr 0.9fr 1.1fr 1fr; }
}
@media (min-width: 760px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}
.footer-link-icon span { white-space: nowrap; }
.footer-bottom .credit { display: block; margin-top: 0.3rem; }

/* ==========================================================================
   Parallax images
   ========================================================================== */
[data-parallax] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-parallax] { transform: none; }
}