/* ============================================================
 *  ANTLER INSIGHTS — Main Stylesheet
 * ============================================================ */

/* ─── FONTS ──────────────────────────────────────────────────── */
@import url('https://use.typekit.net/xog3vbp.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Layout */
  --a-page-width:   1290px;
  --a-page-gutter:  60px;
  --a-grid-gap:     30px;
  --a-radius:       0px;

  /* Fonts */
  --a-font-display: halyard-display, "Halyard Display", Georgia, sans-serif;
  --a-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Typography Scale */
  --a-font-size-h1:   3.353em;
  --a-font-size-h2:   2.765em;
  --a-font-size-h3:   2.059em;
  --a-font-size-h4:   1.647em;
  --a-font-size-h5:   1.294em;
  --a-font-size-h6:   1.059em;
  --a-font-size-btn:  14px;
  --a-font-size-info: 13px;

  /* ── ANTLER BRAND PALETTE ──────────────────────────────────
   *  Btn primary bg, link hover, pillar border hover, footer bg */
  --antler-forest:      #1E3A2F;
  /*  Body text, h1–h3, nav links */
  --antler-graphite:    #2A2E31;
  /*  Eyebrow text, btn hover bg, divider gold, accent, badge bg */
  --antler-gold:        #B08D3A;
  /*  Page background, btn text on dark, hero bg */
  --antler-bone:        #F7F4EE;
  /*  Section alternatif bg (credibility, pillars, why, insights) */
  --antler-mist:        #EAE7DF;
  /*  Border card, divider horizontal, secondary text, footer text */
  --antler-stone:       #75716A;
  /*  Final CTA section bg, btn hover text on dark */
  --antler-ink:         #14130F;

  /* Derived shades — same hues, tuned for contrast per surface */
  --antler-forest-deep: #15291F;              /* deepest surface (founder) */
  --antler-forest-soft: #2A5040;              /* hover/lines on forest    */
  --antler-gold-deep:   #7E6220;              /* gold as text on light bg */
  --antler-gold-light:  #D4B063;              /* gold as text on dark bg  */
  --antler-stone-soft:  #D8D4CB;              /* hairlines on light bg    */
  --antler-stone-light: #A9A69D;              /* stone text on dark bg    */
  --antler-bone-dim:    rgba(247, 244, 238, .72);
  --antler-bone-line:   rgba(247, 244, 238, .12);

  /* Light Scheme (default) */
  --a-bg:             var(--antler-bone);
  --a-bg-alt:         var(--antler-mist);
  --a-bg-extra:       var(--antler-ink);
  --a-bg-extra-hover: var(--antler-forest);
  --a-bd:             var(--antler-stone-soft);
  --a-bd-hover:       var(--antler-stone);
  --a-text:           var(--antler-stone);
  --a-text-light:     #9B978E;
  --a-text-dark:      var(--antler-graphite);
  --a-text-white:     var(--antler-bone);

  /* Brand Accents */
  --a-link:         var(--antler-gold-deep);
  --a-link-hover:   var(--antler-forest);
  --a-link-2:       var(--antler-forest-soft);
  --a-link-3:       var(--antler-gold);
  --a-link-02:      rgba(176, 141, 58, .18);
  --a-dark-02:      rgba(42, 46, 49, .2);
  --a-dark-05:      rgba(42, 46, 49, .05);

  /* Gradients */
  --a-gradient-primary: linear-gradient(135deg, var(--antler-forest) 0%, var(--antler-gold) 100%);
  --a-gradient-dark:    linear-gradient(180deg, var(--antler-ink) 0%, var(--antler-forest) 100%);

  /* Spacing */
  --a-space-1:   4px;
  --a-space-2:   8px;
  --a-space-3:   12px;
  --a-space-4:   16px;
  --a-space-5:   20px;
  --a-space-6:   24px;
  --a-space-8:   32px;
  --a-space-10:  40px;
  --a-space-12:  48px;
  --a-space-14:  56px;
  --a-space-16:  64px;
  --a-space-20:  80px;
  --a-space-24:  96px;
  --a-space-30: 120px;

  /* Shadows */
  --a-shadow-sm:   0 2px  8px rgba(20, 19, 15, .06);
  --a-shadow-md:   0 4px 20px rgba(20, 19, 15, .10);
  --a-shadow-lg:   0 8px 40px rgba(20, 19, 15, .16);
  --a-shadow-dark: 0 4px 20px rgba(0, 0, 0, .35);
  --a-glow-link:   0 0 20px rgba(176, 141, 58, .35);

  /* Transitions */
  --a-transition:      .3s ease;
  --a-transition-fast: .15s ease;

  /* Z-index */
  --a-z-sticky: 100;
  --a-z-modal:  1000;
}

/* ─── DARK SCHEME OVERRIDE ───────────────────────────────────── */
.scheme-dark {
  --a-bg:         var(--antler-forest);
  --a-bg-alt:     var(--antler-forest-deep);
  --a-bg-extra:   var(--antler-ink);
  --a-bd:         var(--antler-bone-line);
  --a-bd-hover:   var(--antler-forest-soft);
  --a-text:       var(--antler-bone-dim);
  --a-text-light: var(--antler-stone-light);
  --a-text-dark:  var(--antler-bone);
  --a-link:       var(--antler-gold-light);
  --a-link-hover: var(--antler-gold);
  --a-dark-02:    rgba(247, 244, 238, .2);
  --a-shadow-md:  var(--a-shadow-dark);
}

/* ─── RESET / BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:  var(--a-font-body);
  font-size:    1rem;
  font-weight:  400;
  line-height:  1.68;
  color:        var(--antler-graphite);
  background:   var(--antler-bone);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color:           var(--a-link);
  text-decoration: none;
  transition:      color var(--a-transition);
}
a:hover { color: var(--a-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--a-font-display);
  font-weight: 500;
  color:       var(--a-text-dark);
  line-height: 1.05;
  letter-spacing: -.01em;
}

ul { list-style: none; }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  width:          100%;
  max-width:      var(--a-page-width);
  margin-inline:  auto;
  padding-inline: var(--a-page-gutter);
}

.section         { padding-block: var(--a-space-30); }
.section-sm      { padding-block: var(--a-space-20); }
.section-lg      { padding-block: 160px; }
.section-alt     { background: var(--antler-mist); }
.section-navy    { background: var(--antler-forest); }
.section-dark    { background: var(--antler-forest-deep); }

/* ─── GRID ───────────────────────────────────────────────────── */
.grid   { display: grid; gap: var(--a-grid-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── TYPOGRAPHY HELPERS ─────────────────────────────────────── */
.eyebrow {
  display:         block;
  font-family:     var(--a-font-body);
  font-size:       var(--a-font-size-info);
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  2.5px;
  color:           var(--antler-gold-deep);
  margin-bottom:   var(--a-space-4);
}
.scheme-dark .eyebrow { color: var(--antler-gold-light); }

.section-title {
  font-size:    clamp(2rem, 4vw, var(--a-font-size-h2));
  color:        var(--a-text-dark);
  margin-bottom: var(--a-space-6);
  line-height:  1.05;
}

.section-lead {
  font-size:     1.125rem;
  color:         var(--a-text);
  max-width:     640px;
  margin-bottom: var(--a-space-10);
  line-height:   1.7;
}

.text-center { text-align: center; }
.text-center .section-lead { margin-inline: auto; }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--a-font-display);
  font-size:       var(--a-font-size-btn);
  font-weight:     500;
  line-height:     1.5;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
  border-radius:   0;
  border:          2px solid transparent;
  padding:         14px 32px;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--a-transition), border-color var(--a-transition), color var(--a-transition);
}

.btn-primary {
  background:   var(--antler-forest);
  border-color: var(--antler-forest);
  color:        var(--antler-bone);
}
.btn-primary:hover {
  background:   var(--antler-gold);
  border-color: var(--antler-gold);
  color:        var(--antler-ink);
}

.btn-outline {
  background:   transparent;
  border-color: var(--antler-graphite);
  color:        var(--antler-graphite);
}
.btn-outline:hover {
  background:   var(--antler-graphite);
  color:        var(--antler-bone);
}

/* On forest/ink surfaces a forest button would sink into the background,
   so the primary button flips to gold there. */
.scheme-dark .btn-primary,
.cta-section .btn-primary {
  background:   var(--antler-gold);
  border-color: var(--antler-gold);
  color:        var(--antler-ink);
}
.scheme-dark .btn-primary:hover,
.cta-section .btn-primary:hover {
  background:   var(--antler-bone);
  border-color: var(--antler-bone);
  color:        var(--antler-ink);
}

.scheme-dark .btn-outline,
.dark-btn-outline {
  border-color: rgba(247, 244, 238, .5);
  color:        var(--antler-bone);
}
.scheme-dark .btn-outline:hover,
.dark-btn-outline:hover {
  background:   var(--antler-bone);
  color:        var(--antler-ink);
}

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

.btn-group {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--a-space-4);
  align-items: center;
}

/* ─── ANNOUNCEMENT BAR ───────────────────────────────────────── */
.announce-bar {
  background:      var(--antler-forest);
  color:           var(--antler-bone);
  text-align:      center;
  padding:         10px var(--a-page-gutter);
  font-size:       13px;
  font-weight:     500;
  letter-spacing:  .3px;
  position:        relative;
  z-index:         var(--a-z-sticky);
}
.announce-bar a {
  color:           var(--antler-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce-bar a:hover { color: var(--antler-bone); }

/* ─── HEADER / NAVIGATION ────────────────────────────────────── */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       calc(var(--a-z-sticky) - 1);
  background:    var(--antler-bone);
  border-bottom: 1px solid var(--antler-stone-soft);
  padding-block: 20px;
  transition:    background var(--a-transition), box-shadow var(--a-transition);
}
.site-header.scrolled {
  box-shadow: var(--a-shadow-md);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-8);
}

.site-logo {
  display:     inline-flex;
  align-items: center;
  gap:         var(--a-space-3);
  font-family: var(--a-font-display);
  font-size:   1.5rem;
  font-weight: 500;
  color:       var(--antler-graphite);
  line-height: 1.2;
  flex-shrink: 0;
}

/* Wordmark lockup — sized by height, aspect ratio from the intrinsic attrs */
.site-logo img {
  display:   block;
  height:    44px;
  width:     auto;
}
.site-logo img + small {
  padding-left: var(--a-space-3);
  border-left:  1px solid var(--antler-stone-soft);
}
.site-logo span { color: var(--antler-gold); }
.site-logo:hover { color: var(--antler-forest); }

.site-nav {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-8);
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-6);
}

.nav-links a {
  font-family:    var(--a-font-display);
  font-size:      13px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--antler-graphite);
  transition:     color var(--a-transition);
}
.nav-links a:hover { color: var(--antler-forest); }

.nav-ctas {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-3);
}

.nav-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
}
.nav-toggle span {
  display:          block;
  width:            24px;
  height:           2px;
  background:       var(--antler-graphite);
  transition:       transform var(--a-transition), opacity var(--a-transition);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display:    none;
  position:   fixed;
  inset:      0;
  background: var(--antler-bone);
  z-index:    calc(var(--a-z-sticky) + 50);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         var(--a-space-6);
  padding:     var(--a-space-20);
}
.mobile-menu.open { display: flex; }

/* :not(.btn) — this rule outranks .btn-primary, so without it the buttons
   inherit the nav link colour and size instead of their own */
.mobile-menu a:not(.btn) {
  font-family:    var(--a-font-display);
  font-size:      1.5rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-graphite);
}
.mobile-menu a:not(.btn):hover { color: var(--antler-forest); }

.mobile-menu .btn {
  min-width:       230px;
  justify-content: center;
}
.mobile-menu-close {
  position:   absolute;
  top:        24px;
  right:      28px;
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--antler-graphite);
  font-size:  2rem;
  line-height: 1;
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  min-height:   100vh;
  display:      flex;
  flex-direction: column;
  justify-content: center;
  position:     relative;
  overflow:     hidden;
  background:   var(--antler-bone);
  padding-block: var(--a-space-30);
}

.hero-bg-grid {
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(30, 58, 47, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 47, .06) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.hero-bg-glow {
  position:         absolute;
  width:            700px;
  height:           700px;
  border-radius:    50%;
  background:       radial-gradient(circle, rgba(176, 141, 58, .18) 0%, transparent 65%);
  top:              -200px;
  right:            -150px;
  pointer-events:   none;
}

.hero-bg-glow-2 {
  position:         absolute;
  width:            500px;
  height:           500px;
  border-radius:    50%;
  background:       radial-gradient(circle, rgba(30, 58, 47, .10) 0%, transparent 65%);
  bottom:           -100px;
  left:             10%;
  pointer-events:   none;
}

.hero-content {
  position: relative;
  z-index:  2;
  max-width: 860px;
}

.hero-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--a-space-3);
  font-size:       12px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  3px;
  color:           var(--antler-gold-deep);
  margin-bottom:   var(--a-space-6);
  border:          1px solid rgba(176, 141, 58, .45);
  padding:         8px 16px;
}
.hero-eyebrow::before {
  content:    '';
  width:      20px;
  height:     1px;
  background: var(--antler-gold);
}

.hero-title {
  font-size:     clamp(3rem, 7vw, 5rem);
  font-family:   var(--a-font-display);
  font-weight:   500;
  color:         var(--antler-graphite);
  line-height:   1.0;
  margin-bottom: var(--a-space-6);
  letter-spacing: -.02em;
}
.hero-title span {
  color: var(--antler-forest);
}

.hero-subtitle {
  font-size:     1.2rem;
  color:         var(--antler-stone);
  line-height:   1.7;
  margin-bottom: var(--a-space-10);
  max-width:     620px;
}

.hero-note {
  margin-top:   var(--a-space-6);
  font-size:    13px;
  color:        var(--antler-stone);
  font-style:   italic;
  letter-spacing: .3px;
}

.hero-scroll-indicator {
  position:    absolute;
  bottom:      40px;
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         8px;
  color:       var(--antler-stone);
  font-size:   12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.hero-scroll-indicator::after {
  content:          '';
  display:          block;
  width:            1px;
  height:           48px;
  background:       linear-gradient(to bottom, var(--antler-stone), transparent);
  animation:        scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}

/* ─── CREDIBILITY BAR ────────────────────────────────────────── */
.credibility {
  background:    var(--antler-mist);
  border-top:    1px solid var(--antler-stone-soft);
  border-bottom: 1px solid var(--antler-stone-soft);
  padding-block: var(--a-space-10);
}

.credibility-label {
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color:          var(--antler-stone);
  margin-bottom:  var(--a-space-6);
  text-align:     center;
}

/* ─── CLIENT LOGO MARQUEE ────────────────────────────────────
 * Three identical groups sit side by side inside a max-content track.
 * The animation shifts the track left by exactly one group (-33.3333%),
 * so the moment it loops the strip is pixel-identical — no jump. Two
 * groups already out-measure any viewport, so the third is always
 * waiting off-screen and the row never runs dry.
 * Full-bleed on purpose: it sits outside .container so logos enter and
 * leave at the window edge. */
.logo-marquee {
  --marquee-gap:      var(--a-space-10);
  --marquee-duration: 48s;

  overflow: hidden;
  /* Soften both ends so logos fade out instead of being guillotined */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.logo-marquee-track {
  display:   flex;
  width:     max-content;
  animation: logo-marquee var(--marquee-duration) linear infinite;
}

.logo-marquee-group {
  display:       flex;
  align-items:   center;
  gap:           var(--marquee-gap);
  /* Matches the internal gap, so the seam between two groups is spaced
     exactly like every other pair of logos. */
  padding-right: var(--marquee-gap);
  flex-shrink:   0;
}

@keyframes logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Every logo gets the same 150x100 slot. object-fit: contain scales each
   one down to fit inside it and centres it, so a wide wordmark and a square
   mark both land on the same baseline grid without either being stretched. */
.logo-marquee img {
  width:           150px;
  height:          100px;
  object-fit:      contain;
  object-position: center;
  opacity:         .55;
  filter:          grayscale(1);
  transition:      opacity var(--a-transition), filter var(--a-transition);
}
.logo-marquee li:hover img { opacity: 1; filter: grayscale(0); }

/* A moving target is hard to read — let the reader stop it */
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* Park the strip and hand the reader the scrollbar instead */
  .logo-marquee-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}

@media (max-width: 767px) {
  /* Same slot and gap, just a slightly quicker pass — there is far less
     screen for a logo to cross. */
  .logo-marquee { --marquee-duration: 34s; }
}

/* ─── PROBLEM SECTION ────────────────────────────────────────── */
.problem-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--a-space-14);
}

.problem-card {
  padding:      var(--a-space-10);
  background:   transparent;
  border:       1px solid var(--antler-stone-soft);
  /* the 3px is always reserved so the hover colour change shifts nothing */
  border-top:   3px solid var(--antler-stone-soft);
  transition:   border-color var(--a-transition), transform var(--a-transition),
                box-shadow var(--a-transition), background var(--a-transition);
  position:     relative;
}
.problem-card:hover {
  border-top-color: var(--antler-forest);
  background:       var(--antler-bone);
  transform:        translateY(-6px);
  box-shadow:       var(--a-shadow-lg);
}

.problem-number {
  font-family:    var(--a-font-display);
  font-size:      4rem;
  font-weight:    500;
  color:          var(--a-link-02);
  line-height:    1;
  margin-bottom:  var(--a-space-4);
  -webkit-text-stroke: 1px rgba(176, 141, 58, .25);
  transition:     color var(--a-transition), -webkit-text-stroke-color var(--a-transition);
}
.problem-card:hover .problem-number {
  color: rgba(176, 141, 58, .45);
  -webkit-text-stroke-color: var(--antler-gold);
}

.problem-card h3 {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-3);
  transition:    color var(--a-transition);
}
.problem-card:hover h3 { color: var(--antler-forest); }

.problem-card p { color: var(--antler-stone); }

/* ─── ANTLER MODEL / PILLARS ─────────────────────────────────── */
.pillars-section {
  background: var(--antler-mist);
}

.pillars-header {
  max-width:     700px;
  margin-bottom: var(--a-space-14);
}

.pillars-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--antler-stone-soft);
}

.pillar-card {
  background:  var(--antler-bone);
  padding:     var(--a-space-12) var(--a-space-10);
  border:      1px solid var(--antler-stone-soft);
  position:    relative;
  overflow:    hidden;
}
.pillar-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     3px;
  background: var(--a-gradient-primary);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--a-transition);
}
/* hover shows the accent bar only — the border stays put */
.pillar-card:hover::before { transform: scaleX(1); }

.pillar-number {
  font-family:    var(--a-font-display);
  font-size:      var(--a-font-size-info);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color:          var(--antler-gold-deep);
  margin-bottom:  var(--a-space-4);
}

.pillar-card h3 {
  font-size:     var(--a-font-size-h4);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-4);
}

.pillar-card p {
  color:     var(--antler-stone);
  font-size: .95rem;
  line-height: 1.7;
}

/* ─── SERVICES ───────────────────────────────────────────────── */
.services-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-space-6);
  margin-top: var(--a-space-14);
}

.service-card {
  padding:     var(--a-space-10);
  border:      1px solid var(--antler-stone-soft);
  position:    relative;
  transition:  border-color var(--a-transition), box-shadow var(--a-transition);
  display:     flex;
  flex-direction: column;
}
.service-card:hover {
  border-color: var(--antler-forest);
  box-shadow:   var(--a-shadow-md);
}

.service-badge {
  display:         inline-block;
  font-size:       11px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
  color:           var(--antler-ink);
  background:      var(--antler-gold);
  padding:         4px 10px;
  margin-bottom:   var(--a-space-4);
  align-self:      flex-start;
}

.service-card h3 {
  font-size:     var(--a-font-size-h4);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-4);
}

.service-card > p {
  color:         var(--antler-stone);
  margin-bottom: var(--a-space-6);
  flex: 1;
}

.service-features {
  margin-bottom: var(--a-space-8);
  display:       flex;
  flex-direction: column;
  gap:           var(--a-space-2);
}

.service-features li {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-3);
  font-size:   .9rem;
  color:       var(--antler-graphite);
}
.service-features li::before {
  content:    '→';
  color:      var(--antler-gold-deep);
  font-weight: 700;
  flex-shrink: 0;
}

.service-card .btn { align-self: flex-start; margin-top: auto; }

/* ─── WHY ANTLER ─────────────────────────────────────────────── */
.why-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-space-10) var(--a-space-14);
  margin-top: var(--a-space-14);
}

.why-item {
  display:   flex;
  flex-direction: column;
  gap:       var(--a-space-4);
  padding:   var(--a-space-8);
  border-left: 2px solid var(--antler-stone-soft);
  transition: border-color var(--a-transition);
}
.why-item:hover { border-left-color: var(--antler-forest); }

.why-number {
  font-family:    var(--a-font-display);
  font-size:      var(--a-font-size-info);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-gold-deep);
}
.why-item h3 {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-graphite);
  margin:        0;
}
.why-item p { color: var(--antler-stone); font-size: .95rem; margin: 0; }

/* ─── HOW IT WORKS ───────────────────────────────────────────── */
.steps-section {
  background: var(--antler-bone);
}

.steps-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--a-space-14);
}

.step-item {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  padding:        var(--a-space-6);
  gap:            var(--a-space-5);
  position:       relative;
}

/* Connector: runs from the right edge of this number box to the left edge of
   the next one, centred on the boxes (item padding + half of the 56px box) */
.step-item::after {
  content:    '';
  position:   absolute;
  top:        calc(var(--a-space-6) + 28px);
  left:       calc(var(--a-space-6) + 56px);
  right:      calc(-1 * (var(--a-grid-gap) + var(--a-space-6)));
  height:     1px;
  background: var(--antler-stone-soft);
  pointer-events: none;
}
/* last column of the row has nothing to connect to */
.steps-grid .step-item:nth-child(4n)::after,
.steps-grid .step-item:last-child::after { content: none; }

.step-number {
  width:           56px;
  height:          56px;
  border-radius:   0;
  background:      var(--antler-forest);
  color:           var(--antler-bone);
  font-family:     var(--a-font-display);
  font-size:       1.2rem;
  font-weight:     500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  position:        relative;
  z-index:         1;
}

.step-item h3 {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-2);
}
.step-item p { color: var(--antler-stone); font-size: .9rem; margin: 0; }

/* ─── PROOF / RESULTS ────────────────────────────────────────── */
.proof-section { background: var(--antler-forest); }

.proof-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top:  var(--a-space-14);
  gap:         1px;
  background:  var(--antler-bone-line);
}

.proof-card {
  background:     var(--antler-forest);
  padding:        var(--a-space-12) var(--a-space-10);
  border:         1px solid var(--antler-bone-line);
  transition:     background var(--a-transition);
}
.proof-card:hover { background: var(--antler-forest-soft); }

.proof-stat {
  font-family:   var(--a-font-display);
  font-size:     clamp(3rem, 5vw, 4.5rem);
  font-weight:   500;
  color:         var(--antler-gold-light);
  line-height:   1;
  margin-bottom: var(--a-space-3);
}

.proof-source {
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-stone-light);
  margin-bottom:  var(--a-space-4);
}

.proof-card h3 {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-bone);
  margin-bottom: var(--a-space-4);
}

.proof-card p { color: var(--antler-bone-dim); font-size: .9rem; margin: 0; }

/* ─── FOUNDER ────────────────────────────────────────────────── */
.founder-inner {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       var(--a-space-20);
  align-items: start;
}

.founder-avatar {
  aspect-ratio: 4/5;
  background:   linear-gradient(135deg, var(--antler-forest) 0%, var(--antler-forest-soft) 100%);
  position:     relative;
  overflow:     hidden;
}
.founder-avatar::after {
  content:   '';
  position:  absolute;
  inset:     0;
  border:    1px solid var(--antler-bone-line);
  pointer-events: none;
}
.founder-avatar-placeholder {
  width:      100%;
  height:     100%;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:        var(--a-space-4);
  color:      var(--antler-stone-light);
}
.founder-avatar-icon {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  background:    var(--antler-forest-deep);
  border:        1px solid var(--antler-bone-line);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.founder-avatar-icon svg { color: var(--antler-gold-light); }

.founder-content { padding-top: var(--a-space-4); }
.founder-content .eyebrow { color: var(--antler-gold-light); }

.founder-title {
  font-size:     clamp(2rem, 3.5vw, var(--a-font-size-h2));
  color:         var(--antler-bone);
  margin-bottom: var(--a-space-6);
}

.founder-bio {
  font-size:      1.05rem;
  color:          var(--antler-bone-dim);
  line-height:    1.8;
  font-style:     italic;
  margin-bottom:  var(--a-space-8);
  border-left:    3px solid var(--antler-gold);
  padding-left:   var(--a-space-6);
}

.founder-not-for {
  margin-bottom: var(--a-space-8);
}
.founder-not-for h4 {
  font-size:     var(--a-font-size-h6);
  color:         var(--antler-bone);
  margin-bottom: var(--a-space-4);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.founder-not-for li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--a-space-3);
  font-size:   .9rem;
  color:       var(--antler-stone-light);
  padding-block: var(--a-space-2);
  border-bottom: 1px solid var(--antler-bone-line);
}
.founder-not-for li::before {
  content:    '✕';
  color:      var(--antler-gold);
  font-size:  .8rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ─── INSIGHTS ───────────────────────────────────────────────── */
.insights-section { background: var(--antler-mist); }

.insights-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--a-space-6);
  margin-bottom:   var(--a-space-14);
}

.insights-grid { grid-template-columns: repeat(3, 1fr); }

.post-card {
  background:     var(--antler-bone);
  border:         1px solid var(--antler-stone-soft);
  display:        flex;
  flex-direction: column;
  transition:     border-color var(--a-transition), transform var(--a-transition), box-shadow var(--a-transition);
  overflow:       hidden;
}
.post-card:hover {
  border-color: var(--antler-forest);
  transform:    translateY(-4px);
  box-shadow:   var(--a-shadow-md);
}

.post-card-image {
  aspect-ratio:  16/9;
  background:    linear-gradient(135deg, var(--antler-mist) 0%, var(--antler-stone-soft) 100%);
  overflow:      hidden;
  position:      relative;
}
.post-card-image-placeholder {
  width:       100%;
  height:      100%;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-family: var(--a-font-display);
  font-size:   3rem;
  font-weight: 500;
  color:       var(--antler-bone);
  letter-spacing: -.02em;
}

.post-card-body { padding: var(--a-space-8); flex: 1; display: flex; flex-direction: column; }

.post-date {
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-stone);
  margin-bottom:  var(--a-space-3);
}

.post-card h3 {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-4);
  flex: 1;
}

.post-card > .post-card-body > p {
  color:         var(--antler-stone);
  font-size:     .9rem;
  margin-bottom: var(--a-space-5);
}

.post-read-more {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--a-space-2);
  font-family:     var(--a-font-display);
  font-size:       12px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
  color:           var(--antler-gold-deep);
  margin-top:      auto;
}
.post-read-more:hover { color: var(--antler-forest); }
.post-read-more::after { content: '→'; font-size: .9em; }

/* ─── FAQ ────────────────────────────────────────────────────── */
.faq-list {
  max-width:   820px;
  margin:      var(--a-space-14) auto 0;
  display:     flex;
  flex-direction: column;
  gap:         0;
}

.faq-item {
  border-top:  1px solid var(--antler-stone-soft);
}
.faq-item:last-child { border-bottom: 1px solid var(--antler-stone-soft); }

.faq-question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-6);
  padding:         var(--a-space-6) 0;
  cursor:          pointer;
  background:      none;
  border:          none;
  width:           100%;
  text-align:      left;
  font-family:     var(--a-font-display);
  font-size:       1.05rem;
  font-weight:     500;
  color:           var(--antler-graphite);
  transition:      color var(--a-transition);
}
.faq-question:hover { color: var(--antler-forest); }
.faq-question.active { color: var(--antler-forest); }

/* The "+" is drawn as two bars rather than set as a glyph: a text "+" centres
   on its baseline, not on the box, and it cannot morph into "−" when open. */
.faq-icon {
  position:         relative;
  width:            24px;
  height:           24px;
  border:           1px solid var(--antler-stone-soft);
  border-radius:    0;
  flex-shrink:      0;
  font-size:        0;
  color:            var(--antler-stone);
  transition:       background var(--a-transition), border-color var(--a-transition), color var(--a-transition);
}
.faq-icon::before,
.faq-icon::after {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      11px;
  height:     1.5px;
  background: currentColor;
  transform:  translate(-50%, -50%);
  transition: transform var(--a-transition);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-question.active .faq-icon {
  background:   var(--antler-forest);
  border-color: var(--antler-forest);
  color:        var(--antler-bone);
}
/* open: the upright bar swings down onto the other one, leaving a minus */
.faq-question.active .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-answer {
  overflow:       hidden;
  max-height:     0;
  transition:     max-height .4s ease;
}
.faq-answer.open { max-height: 600px; }

.faq-answer-inner {
  padding:     0 var(--a-space-10) var(--a-space-6) 0;
  font-size:   .95rem;
  color:       var(--antler-stone);
  line-height: 1.75;
}

/* ─── CTA SECTION ────────────────────────────────────────────── */
.cta-section {
  background:  var(--antler-ink);
  padding-block: var(--a-space-30);
  position:    relative;
  overflow:    hidden;
}
.cta-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23B08D3A' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.cta-inner {
  position:   relative;
  z-index:    1;
  text-align: center;
  max-width:  680px;
  margin:     0 auto;
}

.cta-inner .eyebrow { color: var(--antler-gold-light); }

.cta-inner .section-title {
  color:         var(--antler-bone);
  margin-bottom: var(--a-space-5);
  font-size:     clamp(2rem, 4vw, var(--a-font-size-h2));
}

.cta-inner p {
  color:         var(--antler-bone-dim);
  font-size:     1.1rem;
  margin-bottom: var(--a-space-10);
  line-height:   1.7;
}

.cta-section .btn-outline {
  border-color: rgba(247, 244, 238, .5);
  color:        var(--antler-bone);
}
.cta-section .btn-outline:hover {
  background: var(--antler-bone);
  color:      var(--antler-ink);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background:    var(--antler-forest);
  border-top:    1px solid var(--antler-bone-line);
  padding-block: var(--a-space-20);
}

.footer-top {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:                   var(--a-space-12);
  padding-bottom:        var(--a-space-14);
  border-bottom:         1px solid var(--antler-bone-line);
  margin-bottom:         var(--a-space-8);
}

.footer-brand .site-logo {
  font-size:     1.6rem;
  margin-bottom: var(--a-space-5);
  color:         var(--antler-bone);
}
.footer-brand .site-logo span { color: var(--antler-gold); }
.footer-brand .site-logo:hover { color: var(--antler-gold-light); }

/* The footer sits on forest and the wordmark is dark green, so the lockup is
   flattened to white here — the only way to keep it legible without a mono asset */
.site-footer .site-logo img {
  height:  40px;
  filter:  brightness(0) invert(1);
  opacity: .95;
}
.site-footer .site-logo img + small { border-left-color: var(--antler-bone-line); }

.footer-tagline {
  font-size:     .95rem;
  color:         var(--antler-stone-light);
  margin-bottom: var(--a-space-6);
  line-height:   1.6;
  font-style:    italic;
}

.footer-social {
  display: flex;
  gap:     var(--a-space-4);
}
.footer-social a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border:          1px solid var(--antler-bone-line);
  color:           var(--antler-stone-light);
  font-size:       .85rem;
  font-family:     var(--a-font-display);
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  .5px;
  transition:      border-color var(--a-transition), color var(--a-transition);
}
.footer-social a:hover { border-color: var(--antler-gold); color: var(--antler-gold-light); }

.footer-col h4 {
  font-family:    var(--a-font-display);
  font-size:      12px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-bone);
  margin-bottom:  var(--a-space-5);
}

.footer-col ul {
  display:        flex;
  flex-direction: column;
  gap:            var(--a-space-3);
}

.footer-col li a {
  font-size:  .875rem;
  color:      var(--antler-stone-light);
  transition: color var(--a-transition);
}
.footer-col li a:hover { color: var(--antler-gold-light); }

.footer-contact-item {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-3);
  font-size:   .875rem;
  color:       var(--antler-stone-light);
}
.footer-contact-item a {
  color: var(--antler-stone-light);
}
.footer-contact-item a:hover { color: var(--antler-gold-light); }

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-6);
  font-size:       .8rem;
  color:           var(--antler-stone-light);
}

/* ─── DIVIDER LINE ───────────────────────────────────────────── */
.divider {
  width:      48px;
  height:     3px;
  background: var(--antler-gold);
  margin-bottom: var(--a-space-6);
}
.section.scheme-dark .divider,
.scheme-dark .divider { background: var(--antler-gold-light); }

/* ─── SCROLL ANIMATIONS ──────────────────────────────────────── */
.reveal {
  opacity:    0;
  translate:  0 24px;
  transition: opacity .6s ease, translate .6s ease;
}
.reveal.visible {
  opacity:   1;
  translate: 0;
}

/* Any element with its own :hover animation is revealed through this wrapper
   instead of carrying .reveal itself — the two animations then live on
   different elements and can never overwrite each other's transform.
   Grid display so the single child still fills the cell it used to occupy. */
.reveal-wrap { display: grid; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ════════════════════════════════════════════════════════════
 *  AI LANDING PAGES (ai-lead.html, ai-sales.html)
 *  Page-specific components. Shares every token above.
 * ═══════════════════════════════════════════════════════════ */

/* Long hero headline — smaller than the index.html display size */
.hero-title-sm { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.1; }

/* Logo suffix — "Antler. AI Leads" */
.site-logo small {
  font-family:    var(--a-font-body);
  font-size:      .75rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-stone);
  vertical-align: middle;
  margin-left:    2px;
}
.scheme-dark .site-logo small { color: var(--antler-stone-light); }

/* Four leak cards — 2×2 keeps the long copy readable (index.html uses three) */
.problem-grid-4 { grid-template-columns: repeat(2, 1fr); }

/* ─── AGITATE BOX (cost of inaction) ─────────────────────────── */
.agitate-box {
  margin-top:  var(--a-space-14);
  padding:     var(--a-space-12);
  background:  var(--antler-bone);
  border:      1px solid var(--antler-stone-soft);
  border-left: 4px solid var(--antler-gold);
}
.agitate-box h3 {
  font-size:      1.05rem;
  line-height:    1.4;
  letter-spacing: 0;
  color:          var(--antler-graphite);
  margin-bottom:  var(--a-space-5);
}
.agitate-box p {
  color:       var(--antler-stone);
  font-size:   1rem;
  line-height: 1.8;
  margin:      0;
}

/* The headline number — the one line that has to land */
.agitate-box .agitate-result {
  font-family:   var(--a-font-display);
  font-size:     clamp(1.6rem, 3vw, 2.15rem);
  font-weight:   500;
  line-height:   1.2;
  color:         var(--antler-gold-deep);
  margin-block:  var(--a-space-8) var(--a-space-6);
}

.agitate-box .agitate-compare strong {
  color:       var(--antler-graphite);
  font-weight: 700;
}

/* ─── SOLUTION: TWO-COLUMN + ARCHITECTURE CARD ───────────────── */
.solution-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--a-space-20);
  align-items:           start;
}

.solution-title {
  font-size:      clamp(2rem, 3.4vw, 2.5rem);
  line-height:    1.22;
  color:          var(--antler-graphite);
  margin-bottom:  var(--a-space-6);
}

.solution-lead {
  font-size:     1.0625rem;
  line-height:   1.9;
  color:         var(--antler-stone);
  margin-bottom: var(--a-space-10);
}
.solution-lead em { font-style: italic; color: var(--antler-graphite); }

/* Feature rows — arrow gutter, hairline between rows */
.solution-features { border-bottom: 1px solid var(--antler-stone-soft); }
.solution-features li {
  display:       grid;
  grid-template-columns: 46px 1fr;
  align-items:   baseline;
  padding-block: var(--a-space-5);
  border-top:    1px solid var(--antler-stone-soft);
  font-size:     .97rem;
  line-height:   1.7;
  color:         var(--antler-stone);
}
.solution-features li::before {
  content:     '→';
  color:       var(--antler-gold-deep);
  font-weight: 700;
}
.solution-features strong {
  color:       var(--antler-graphite);
  font-weight: 700;
}

.solution-main .btn-lg { margin-top: var(--a-space-10); }

/* Architecture card */
.arch-card {
  position:   relative;
  padding:    var(--a-space-12);
  background: var(--antler-mist);
  border:     1px solid var(--antler-stone-soft);
}

.arch-badge {
  position:        absolute;
  top:             -13px;
  left:            var(--a-space-6);
  padding:         5px 12px;
  background:      var(--antler-bone);
  border:          1px solid var(--antler-gold);
  color:           var(--antler-gold-deep);
  font-size:       11px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
  line-height:     1.4;
}

.arch-label {
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-stone);
  margin-bottom:  var(--a-space-2);
}

.arch-title {
  font-size:      1.15rem;
  color:          var(--antler-graphite);
  margin-bottom:  var(--a-space-8);
}

.arch-steps {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--a-space-5);
}

.arch-step {
  padding:     var(--a-space-5) var(--a-space-6);
  background:  var(--antler-bone);
  border-left: 4px solid var(--antler-gold);
}
.arch-step h4 {
  font-family:    var(--a-font-body);
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color:          var(--antler-gold-deep);
  margin-bottom:  var(--a-space-2);
}
.arch-step p {
  font-size:   .94rem;
  line-height: 1.6;
  color:       var(--antler-stone);
}

/* Final step = the outcome, carried in forest */
.arch-step-final {
  background:       rgba(30, 58, 47, .07);
  border-left-color: var(--antler-forest);
}
.arch-step-final h4 { color: var(--antler-forest); }

.arch-specs {
  margin-top:  var(--a-space-8);
  padding-top: var(--a-space-8);
  border-top:  1px solid var(--antler-stone-soft);
}
.arch-spec {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--a-space-4);
  padding-block:   var(--a-space-2);
  font-size:       .94rem;
}
.arch-spec dt { color: var(--antler-stone); }
.arch-spec dd {
  font-weight: 700;
  color:       var(--antler-graphite);
  text-align:  right;
}
.arch-spec .arch-spec-win { color: var(--antler-forest); }

/* ─── HOW IT WORKS: STEP LIST + OUTCOME CARD (ai-lead.html) ──── */
/* No align-items: the panel stretches to the height of the step list */
.works-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--a-space-16);
  margin-top:            var(--a-space-14);
}

.works-title {
  font-size:     1.3rem;
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-6);
}

.works-steps {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--a-space-6);
}
.works-steps li {
  display:               grid;
  grid-template-columns: 38px 1fr;
}
.works-step-num {
  font-size:      .85rem;
  font-weight:    700;
  letter-spacing: .5px;
  line-height:    1.55;
  color:          var(--antler-gold-deep);
}
.works-steps h4 {
  font-family:   var(--a-font-body);
  font-size:     .97rem;
  font-weight:   700;
  line-height:   1.55;
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-2);
}
.works-steps p {
  font-size:   .95rem;
  line-height: 1.7;
  color:       var(--antler-stone);
}

.outcome-panel {
  padding:    var(--a-space-10);
  background: var(--antler-mist);
  border:     1px solid var(--antler-stone-soft);
}
.outcome-panel h3 {
  font-size:      1.05rem;
  color:          var(--antler-graphite);
  margin-bottom:  var(--a-space-6);
}

.outcome-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--a-space-5);
}
.outcome-list li {
  display:     flex;
  align-items: baseline;
  gap:         var(--a-space-4);
  color:       var(--antler-graphite);
  font-size:   .95rem;
  line-height: 1.6;
}
.outcome-list li::before {
  content:       '';
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--antler-gold);
  flex-shrink:   0;
}

/* ─── TESTIMONIAL (on forest) ────────────────────────────────── */
.proof-grid-2 { grid-template-columns: repeat(2, 1fr); }

.testimonial {
  max-width:  760px;
  margin:     var(--a-space-14) auto 0;
  text-align: center;
}
.testimonial blockquote {
  font-family: var(--a-font-body);
  font-size:   1.0625rem;
  font-style:  italic;
  font-weight: 400;
  line-height: 1.65;
  color:       var(--antler-bone-dim);
}
.testimonial figcaption {
  margin-top:  var(--a-space-6);
  font-size:   .97rem;
  font-weight: 700;
  color:       var(--antler-bone);
}

/* ─── OFFER CARD ─────────────────────────────────────────────── */
.offer-card {
  position:   relative;
  max-width:  820px;
  margin:     var(--a-space-14) auto 0;
  padding:    var(--a-space-14) var(--a-space-12);
  background: var(--antler-bone);
  border:     1px solid var(--antler-stone-soft);
  border-top: 4px solid var(--antler-forest);
  box-shadow: var(--a-shadow-lg);
}

/* Enterprise variant (ai-sales.html): full-width, badge straddling the top edge,
   so the top edge stays a hairline like the other three sides */
.offer-card-wide {
  max-width:  none;
  padding:    var(--a-space-16);
  border-top: 1px solid var(--antler-stone-soft);
}

.offer-header {
  text-align:     center;
  padding-bottom: var(--a-space-8);
  margin-bottom:  var(--a-space-8);
  border-bottom:  1px solid var(--antler-stone-soft);
}

.offer-badge {
  position:        absolute;
  top:             -16px;
  left:            50%;
  transform:       translateX(-50%);
  padding:         9px 22px;
  background:      var(--antler-gold);
  color:           var(--antler-ink);
  font-size:       12px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  1px;
  line-height:     1.2;
  white-space:     nowrap;
}

.offer-price {
  font-family: var(--a-font-display);
  font-size:   clamp(2.25rem, 5vw, 3rem);
  font-weight: 500;
  color:       var(--antler-graphite);
  line-height: 1.1;
}
.offer-price del {
  color:       var(--antler-stone);
  font-size:   .5em;
  margin-right: var(--a-space-2);
}
.offer-price span {
  display:        block;
  margin-top:     var(--a-space-2);
  font-family:    var(--a-font-body);
  font-size:      13px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-stone);
}

.offer-terms {
  margin-top: var(--a-space-3);
  font-size:  .95rem;
  color:      var(--antler-stone);
}

.offer-list-title {
  font-size:     var(--a-font-size-h6);
  color:         var(--antler-graphite);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--a-space-5);
}
/* Two-column deliverables (ai-sales.html) */
.offer-columns {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--a-space-12);
}
.offer-columns .offer-list-title {
  font-size:      .97rem;
  font-weight:    700;
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: var(--a-space-4);
  border-bottom:  1px solid var(--antler-stone-soft);
  margin-bottom:  var(--a-space-4);
}

.feature-list {
  display:        flex;
  flex-direction: column;
}
.feature-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--a-space-4);
  padding-block: var(--a-space-4);
  border-bottom: 1px solid var(--antler-stone-soft);
}
.feature-list li::before {
  content:     '✓';
  color:       var(--antler-gold-deep);
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}
.feature-list h4 {
  font-size:     1rem;
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-1);
}
.feature-list p {
  font-size: .9rem;
  color:     var(--antler-stone);
  margin:    0;
}

/* Single-line deliverables (no title + description pair, no row rules) */
.feature-list-compact li {
  padding-block: var(--a-space-4);
  border-bottom: none;
  font-size:     .95rem;
  line-height:   1.5;
  color:         var(--antler-graphite);
}
.feature-list-compact li::before {
  color:     var(--antler-forest);
  font-size: 1.05em;
}

.offer-plus {
  margin-top: var(--a-space-6);
  font-size:  .95rem;
  color:      var(--antler-graphite);
}
.offer-plus strong { color: var(--antler-gold-deep); }

.offer-cta {
  margin-top: var(--a-space-8);
  width:      100%;
  justify-content: center;
}

/* Price block sits below the deliverables, above the guarantee */
.offer-price-block {
  margin-top:  var(--a-space-12);
  padding-top: var(--a-space-12);
  border-top:  1px solid var(--antler-stone-soft);
  text-align:  center;
}
.offer-price-block .offer-price { font-size: clamp(2.25rem, 4.2vw, 2.9rem); }
.offer-price-block .offer-terms {
  max-width:     760px;
  margin-inline: auto;
  margin-top:    var(--a-space-4);
  line-height:   1.55;
}

/* Centred call to action, button sized to its label */
.offer-cta-wrap {
  margin-top: var(--a-space-12);
  text-align: center;
}
.offer-cta-wrap .offer-cta {
  width:      auto;
  margin-top: 0;
}

.offer-slots {
  margin-top: var(--a-space-4);
  font-size:  .95rem;
  color:      var(--antler-stone);
}

.guarantee-box {
  margin-top: var(--a-space-8);
  padding:    var(--a-space-6);
  background: rgba(30, 58, 47, .05);
  border:     1px solid var(--antler-forest);
  text-align: center;
}
.guarantee-box h4 {
  font-size:     var(--a-font-size-h6);
  color:         var(--antler-forest);
  margin-bottom: var(--a-space-2);
}
.guarantee-box p {
  font-size: .9rem;
  color:     var(--antler-stone);
  margin:    0;
}

.offer-card-wide .guarantee-box {
  margin-top: var(--a-space-10);
  padding:    var(--a-space-8);
}
.offer-card-wide .guarantee-box h4 { font-size: .97rem; font-weight: 700; }
.offer-card-wide .guarantee-box p {
  font-size:     .95rem;
  line-height:   1.6;
  max-width:     880px;
  margin-inline: auto;
}

/* ─── URGENCY NOTES (final CTA) ──────────────────────────────── */
.cta-inner .urgency-note {
  display:         inline-block;
  margin:          var(--a-space-8) 0 var(--a-space-4);
  padding:         8px 18px;
  background:      rgba(176, 141, 58, .15);
  border:          1px solid var(--antler-gold);
  color:           var(--antler-gold-light);
  font-size:       13px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
}
.cta-inner .urgency-fineprint {
  font-size:     .85rem;
  color:         var(--antler-stone-light);
  margin-bottom: 0;
}
.cta-inner .urgency-fineprint a { color: var(--antler-gold-light); }
.cta-inner .urgency-fineprint a:hover { color: var(--antler-bone); }
.cta-inner p strong { color: var(--antler-bone); font-weight: 500; }

/* ─── SIMPLIFIED FOOTER (two columns) ────────────────────────── */
.footer-top-simple { grid-template-columns: 2fr 1fr; }
.footer-bottom a { color: var(--antler-stone-light); }
.footer-bottom a:hover { color: var(--antler-gold-light); }

/* ─── UTILITIES ──────────────────────────────────────────────── */
.highlight { color: var(--antler-gold-deep); font-weight: 500; }
.strikethrough { text-decoration: line-through; opacity: .6; }

/* ─── AI LANDING PAGES RESPONSIVE ────────────────────────────── */
@media (max-width: 1023px) {
  .proof-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .footer-top-simple { grid-template-columns: 1fr 1fr; }
  .offer-columns { gap: var(--a-space-8); }
  .solution-layout,
  .works-layout {
    grid-template-columns: 1fr;
    gap: var(--a-space-14);
  }
  .arch-card,
  .outcome-panel { max-width: 640px; }
}

@media (max-width: 767px) {
  .problem-grid-4,
  .proof-grid-2,
  .outcome-list,
  .offer-columns,
  .footer-top-simple { grid-template-columns: 1fr; }

  .offer-card { padding: var(--a-space-10) var(--a-space-6); }
  /* the badge wraps to two lines here, so leave it room */
  .offer-card-wide { padding: var(--a-space-14) var(--a-space-6) var(--a-space-10); }
  .offer-badge { white-space: normal; text-align: center; max-width: 90%; }
  .offer-columns { gap: var(--a-space-10); }
  .agitate-box { padding: var(--a-space-8) var(--a-space-6); }
  .arch-card { padding: var(--a-space-10) var(--a-space-6); }
  .solution-features li { grid-template-columns: 28px 1fr; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --a-page-gutter: 40px;
  }

  /* Between 1024px and here the full nav still shows, and the logo lockup is
     wide — tighten the header so it cannot overflow at the low end. */
  .site-logo img { height: 38px; }
  .site-nav  { gap: var(--a-space-5); }
  .nav-links { gap: var(--a-space-4); }
  .nav-ctas  { gap: var(--a-space-2); }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid .step-item:nth-child(2n)::after { content: none; }
}

/* index.html carries six links plus two CTAs — that lockup needs ~1120px of
   viewport, so its nav folds into the hamburger earlier than everyone else's. */
@media (max-width: 1150px) {
  .site-header--crowded .nav-links,
  .site-header--crowded .nav-ctas  { display: none; }
  .site-header--crowded .nav-toggle { display: flex; }
}

@media (max-width: 1023px) {
  :root { --a-page-gutter: 32px; }

  /* inline nav gives way to the hamburger + full-screen menu */
  .nav-links,
  .nav-ctas { display: none; }
  /* ...and the now-empty flex parent goes with them, or the header still
     pays a 32px gap on either side of a zero-width box. */
  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  .founder-inner { grid-template-columns: 1fr; }
  .founder-avatar { max-width: 500px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --a-page-gutter: 20px; }

  .section, .section-sm { padding-block: var(--a-space-16); }
  .section-lg { padding-block: var(--a-space-20); }

  .site-logo img { height: 34px; }
  .site-logo img + small { font-size: .68rem; letter-spacing: 1.5px; }

  .hero { min-height: auto; padding-block: var(--a-space-20); padding-top: calc(var(--a-space-20) + 40px); }
  .hero-title { font-size: 2.5rem; }
  .hero-scroll-indicator { display: none; }

  .grid-2, .grid-3, .grid-4,
  .problem-grid, .services-grid,
  .why-grid, .insights-grid,
  .proof-grid, .pillars-grid,
  .steps-grid { grid-template-columns: 1fr; }

  .step-item::after { content: none; }

  .insights-header { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; gap: var(--a-space-8); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* The page suffix ("Portfolio", "AI Leads"…) costs ~85px next to a 193px
   wordmark. On a 320px screen that is wider than the header can hold, and
   .site-logo does not shrink — so the hamburger was pushed off-page. */
@media (max-width: 420px) {
  .site-logo img + small { display: none; }
  .header-inner { gap: var(--a-space-4); }
}

/* ════════════════════════════════════════════════════════════
 *  PORTFOLIO PAGE (portfolio.html)
 *  Filterable / sortable project grid + case study blocks.
 *  Shares every token from the top of this file.
 * ═══════════════════════════════════════════════════════════ */

:root {
  /* Measured by portfolio.js so the toolbar can stick directly under
     the sticky site header at any breakpoint. The value here is only
     the pre-JS fallback (20px padding × 2 + 44px logo + 1px border). */
  --pf-header-h: 85px;
  --pf-gutter:   var(--a-grid-gap);
}

/* Screen-reader-only label */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Portfolio hero is a lead-in, not a full-screen statement */
.hero-compact { min-height: auto; padding-block: var(--a-space-24) var(--a-space-20); }

/* ─── STAT STRIP ─────────────────────────────────────────────── */
.pf-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border-block:          1px solid var(--antler-stone-soft);
}
.pf-stat { padding-block: var(--a-space-10); text-align: center; }
.pf-stat + .pf-stat { border-left: 1px solid var(--antler-stone-soft); }

.pf-stat-num {
  display:        block;
  font-family:    var(--a-font-display);
  font-size:      clamp(2rem, 4vw, 2.9rem);
  font-weight:    500;
  line-height:    1;
  color:          var(--antler-graphite);
  letter-spacing: -.02em;
}
.pf-stat-label {
  display:        block;
  margin-top:     var(--a-space-3);
  font-size:      var(--a-font-size-info);
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-stone);
}

/* ─── CAPABILITY CHIPS ───────────────────────────────────────── */
.pf-caps {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--a-space-3);
  margin-top: var(--a-space-12);
}
.pf-cap {
  padding:     10px 18px;
  border:      1px solid var(--antler-stone-soft);
  background:  var(--antler-bone);
  font-size:   .875rem;
  color:       var(--antler-graphite);
  transition:  border-color var(--a-transition), color var(--a-transition), background var(--a-transition);
}
.pf-cap:hover {
  border-color: var(--antler-forest);
  color:        var(--antler-forest);
}
.pf-cap::before {
  content:      '';
  display:      inline-block;
  width:        6px;
  height:       6px;
  margin-right: 10px;
  vertical-align: middle;
  background:   var(--antler-gold);
}

/* ─── TOOLBAR (filter · sort · search) ───────────────────────── */
.pf-toolbar {
  position:      sticky;
  top:           var(--pf-header-h);
  z-index:       80;
  background:    var(--antler-bone);
  border-block:  1px solid var(--antler-stone-soft);
  padding-block: var(--a-space-5);
  margin-bottom: var(--a-space-12);
}

.pf-toolbar-inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--a-space-4);
}

.pf-control {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-4);
  flex-wrap:   wrap;
  /* This sits inside .pf-toolbar-row, itself a flex row. Without min-width:0
     its automatic minimum size is its content width, so the sort chips could
     never be squeezed — they pushed the page sideways instead of scrolling. */
  min-width:   0;
}
.pf-control-label {
  font-family:    var(--a-font-display);
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--antler-stone);
  width:          52px;
  flex-shrink:    0;
}

.pf-chips { display: flex; flex-wrap: wrap; gap: var(--a-space-2); }

.pf-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--a-font-display);
  font-size:       12px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.2px;
  line-height:     1.4;
  padding:         9px 15px;
  border:          1px solid var(--antler-stone-soft);
  background:      transparent;
  color:           var(--antler-graphite);
  cursor:          pointer;
  transition:      background var(--a-transition), border-color var(--a-transition), color var(--a-transition);
}
.pf-chip:hover { border-color: var(--antler-forest); color: var(--antler-forest); }
.pf-chip:focus-visible { outline: 2px solid var(--antler-gold); outline-offset: 2px; }

.pf-chip[aria-pressed="true"] {
  background:   var(--antler-forest);
  border-color: var(--antler-forest);
  color:        var(--antler-bone);
}
.pf-chips-sort .pf-chip[aria-pressed="true"] {
  background:   var(--antler-gold);
  border-color: var(--antler-gold);
  color:        var(--antler-ink);
}

.pf-chip-count {
  font-family:    var(--a-font-body);
  font-size:      11px;
  letter-spacing: 0;
  color:          var(--antler-stone);
}
.pf-chip[aria-pressed="true"] .pf-chip-count { color: var(--antler-gold-light); }
.pf-chips-sort .pf-chip[aria-pressed="true"] .pf-chip-count { color: var(--antler-ink); }

/* Sort / search row shares one line on wide screens */
.pf-toolbar-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-6);
  flex-wrap:       wrap;
}

.pf-search { position: relative; flex-shrink: 0; }
.pf-search input {
  font-family:   var(--a-font-body);
  font-size:     .9rem;
  color:         var(--antler-graphite);
  background:    var(--antler-bone);
  border:        1px solid var(--antler-stone-soft);
  border-radius: 0;
  padding:       10px 14px 10px 34px;
  width:         250px;
  transition:    border-color var(--a-transition);
  -webkit-appearance: none;
  appearance:    none;
}
.pf-search input::placeholder { color: var(--antler-stone); }
.pf-search input:focus { outline: none; border-color: var(--antler-forest); }
.pf-search::before {
  content:   '⌕';
  position:  absolute;
  left:      12px;
  top:       50%;
  translate: 0 -55%;
  font-size: 1.05rem;
  color:     var(--antler-stone);
  pointer-events: none;
}

.pf-count {
  font-size:      var(--a-font-size-info);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-stone);
}

/* ─── GRID ───────────────────────────────────────────────────── */
/* No-JS baseline: an ordinary responsive grid. portfolio.js swaps in
   .pf-grid--js and takes over positioning so states can animate. */
.pf-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--pf-gutter);
}
.pf-grid--js {
  display:    block;
  position:   relative;
  /* Deliberately no height transition: the page height has to settle in the
     same frame as the layout, or the scroll anchoring in portfolio.js
     measures against a height that is still shrinking. */
}
.pf-grid--js .pf-item {
  position:   absolute;
  top:        0;
  left:       0;
  opacity:    0;
  translate:  0 22px;
  transition: transform .55s cubic-bezier(.22, .9, .28, 1),
              opacity   .40s ease,
              translate .50s ease,
              scale     .35s ease;
  will-change: transform;
}
.pf-grid--js .pf-item.is-in   { opacity: 1; translate: 0 0; }
.pf-grid--js .pf-item.is-hidden {
  opacity: 0;
  scale:   .94;
  pointer-events: none;
}
/* First placement is a jump, not a move (see portfolio.js) */
.pf-grid--booting .pf-item { transition: none; }

.pf-grid--no-motion .pf-item,
.pf-grid--no-motion.pf-grid--js { transition: none; }

/* ─── PROJECT CARD ───────────────────────────────────────────── */
.pf-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--antler-bone);
  border:         1px solid var(--antler-stone-soft);
  overflow:       hidden;
  transition:     border-color var(--a-transition), box-shadow var(--a-transition), transform var(--a-transition);
}
.pf-card:hover,
.pf-card:focus-within {
  border-color: var(--antler-forest);
  box-shadow:   var(--a-shadow-md);
  transform:    translateY(-4px);
}

/* Thumbnail — a mock browser frame until real screenshots land.
   Drop <img class="pf-shot" src="…" alt=""> inside .pf-thumb and it
   covers the placeholder without any other change. */
.pf-thumb {
  /* Height of the mock browser bar. The screenshot, the monogram and the bar
     itself all measure from this, so they can never drift apart. */
  --pf-chrome-h: 32px;

  position:      relative;
  display:       block;
  aspect-ratio:  16 / 10;
  overflow:      hidden;
  border-bottom: 1px solid var(--antler-stone-soft);
  background:    linear-gradient(150deg, var(--antler-forest) 0%, var(--antler-forest-soft) 100%);
}
.pf-thumb[data-tone="ink"]   { background: linear-gradient(150deg, var(--antler-ink) 0%, var(--antler-graphite) 100%); }
.pf-thumb[data-tone="gold"]  { background: linear-gradient(150deg, var(--antler-gold-deep) 0%, var(--antler-gold) 100%); }
.pf-thumb[data-tone="stone"] { background: linear-gradient(150deg, var(--antler-stone) 0%, var(--antler-stone-light) 100%); }

.pf-thumb::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: radial-gradient(rgba(247, 244, 238, .16) 1px, transparent 1px);
  background-size:  14px 14px;
}

/* Seated below the bar rather than behind it: these are page screenshots
   that carry the site's own navigation, and an overlaid bar would cover the
   very thing that makes them read as a real site. Top-aligned, so what
   survives the crop is the header and the hero — a 16:10 source loses about
   14% off the bottom, which is the least useful part of a page shot. */
.pf-shot {
  position:  absolute;
  inset:     var(--pf-chrome-h) 0 0 0;
  width:     100%;
  height:    calc(100% - var(--pf-chrome-h));
  object-fit: cover;
  object-position: center top;
  z-index:   2;
}

.pf-browser {
  position:      absolute;
  inset:         0 0 auto 0;
  height:        var(--pf-chrome-h);
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding-inline: 12px;
  background:    rgba(20, 19, 15, .26);
  border-bottom: 1px solid rgba(247, 244, 238, .14);
  z-index:       3;
}
.pf-dots { display: flex; gap: 5px; flex-shrink: 0; }
.pf-dots i {
  display:       block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    rgba(247, 244, 238, .38);
}
.pf-url {
  font-family:    var(--a-font-body);
  font-size:      11px;
  letter-spacing: .3px;
  color:          rgba(247, 244, 238, .72);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.pf-mono {
  position:       absolute;
  inset:          var(--pf-chrome-h) 0 0 0;
  display:        grid;
  place-items:    center;
  font-family:    var(--a-font-display);
  font-size:      clamp(2.4rem, 5.5vw, 3.2rem);
  font-weight:    500;
  letter-spacing: -.03em;
  color:          rgba(247, 244, 238, .92);
  transition:     scale .45s ease;
  z-index:        1;
}
.pf-card:hover .pf-mono { scale: 1.07; }

.pf-hint {
  position:        absolute;
  inset:           auto 0 0 0;
  z-index:         4;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-2);
  padding:         9px 14px;
  background:      var(--antler-gold);
  color:           var(--antler-ink);
  font-family:     var(--a-font-display);
  font-size:       11px;
  font-weight:     500;
  text-transform:  uppercase;
  letter-spacing:  1.5px;
  translate:       0 100%;
  transition:      translate .35s ease;
}
.pf-card:hover .pf-hint,
.pf-thumb:focus-visible .pf-hint { translate: 0 0; }
.pf-thumb:focus-visible { outline: 2px solid var(--antler-gold); outline-offset: -2px; }

.pf-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--a-space-6);
}

.pf-meta {
  display:     flex;
  align-items: center;
  gap:         var(--a-space-3);
  flex-wrap:   wrap;
  margin-bottom: var(--a-space-3);
}
.pf-sector {
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-gold-deep);
}
.pf-badge {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding:        3px 8px;
  background:     var(--antler-gold);
  color:          var(--antler-ink);
}

.pf-title {
  font-size:     var(--a-font-size-h5);
  color:         var(--antler-graphite);
  margin-bottom: var(--a-space-3);
}
.pf-desc {
  font-size:     .9rem;
  line-height:   1.6;
  color:         var(--antler-stone);
  margin-bottom: var(--a-space-5);
}

.pf-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-bottom: var(--a-space-5);
}
.pf-tags li {
  font-size:      11px;
  letter-spacing: .4px;
  padding:        4px 9px;
  border:         1px solid var(--antler-stone-soft);
  color:          var(--antler-stone);
}

.pf-actions {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-3);
  flex-wrap:       wrap;
  margin-top:      auto;
  padding-top:     var(--a-space-4);
  border-top:      1px solid var(--antler-stone-soft);
}
.pf-link,
.pf-visit {
  font-family:    var(--a-font-display);
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.pf-link  { color: var(--antler-forest); }
.pf-link::after { content: ' →'; }
.pf-link:hover { color: var(--antler-gold-deep); }
.pf-visit { color: var(--antler-stone); }
.pf-visit:hover { color: var(--antler-forest); }

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.pf-empty {
  padding:    var(--a-space-16) var(--a-space-6);
  text-align: center;
  border:     1px dashed var(--antler-stone-soft);
}
.pf-empty h3 { font-size: var(--a-font-size-h5); margin-bottom: var(--a-space-3); }
.pf-empty p  { color: var(--antler-stone); margin-bottom: var(--a-space-6); }

/* ─── CASE STUDY BLOCKS ──────────────────────────────────────── */
.pf-cases {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--a-space-8);
  margin-top:            var(--a-space-14);
}

.case-card {
  display:        flex;
  flex-direction: column;
  padding:        var(--a-space-10);
  background:     var(--antler-bone);
  border:         1px solid var(--antler-stone-soft);
  border-top:     3px solid var(--antler-forest);
  scroll-margin-top: calc(var(--pf-header-h) + 24px);
  transition:     box-shadow var(--a-transition), border-color var(--a-transition);
}
.case-card:hover { box-shadow: var(--a-shadow-md); }
/* Arriving from a card's "Read case study" link */
.case-card:target,
.case-card.is-flagged {
  border-color: var(--antler-gold);
  box-shadow:   0 0 0 3px rgba(176, 141, 58, .2), var(--a-shadow-md);
}

.case-head {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--a-space-5);
  padding-bottom: var(--a-space-6);
  margin-bottom: var(--a-space-6);
  border-bottom: 1px solid var(--antler-stone-soft);
}
.case-num {
  font-family:    var(--a-font-display);
  font-size:      2rem;
  font-weight:    500;
  line-height:    1;
  color:          var(--antler-gold);
  flex-shrink:    0;
}
.case-sector {
  display:        block;
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color:          var(--antler-stone);
  margin-bottom:  var(--a-space-2);
}
.case-head h3 {
  font-size:     var(--a-font-size-h4);
  color:         var(--antler-graphite);
  line-height:   1.1;
}
.case-kicker {
  margin-top:     6px;
  font-size:      .85rem;
  font-weight:    500;
  color:          var(--antler-gold-deep);
}

.case-relevance {
  color:         var(--antler-stone);
  font-size:     .95rem;
  margin-bottom: var(--a-space-6);
}
.case-list-title {
  font-size:      .8rem;
  font-family:    var(--a-font-body);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-graphite);
  margin-bottom:  var(--a-space-2);
}
.case-card .feature-list { margin-bottom: var(--a-space-6); }
.case-card .feature-list li:last-child { border-bottom: none; }

.case-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--a-space-4);
  flex-wrap:       wrap;
  margin-top:      auto;
  padding-top:     var(--a-space-5);
  border-top:      1px solid var(--antler-stone-soft);
}
.case-visit {
  font-family:    var(--a-font-display);
  font-size:      12px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--antler-forest);
}
.case-visit:hover { color: var(--antler-gold-deep); }
.case-back {
  font-size: 12px;
  color:     var(--antler-stone);
}

/* ─── PORTFOLIO RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1023px) {
  .pf-cases { grid-template-columns: 1fr; }
  .pf-control-label { width: auto; }
}

@media (max-width: 767px) {
  :root { --pf-gutter: 20px; }

  .hero-compact { padding-block: var(--a-space-16) var(--a-space-14); }

  .pf-stats { grid-template-columns: 1fr; }
  .pf-stat  { padding-block: var(--a-space-6); }
  .pf-stat + .pf-stat { border-left: none; border-top: 1px solid var(--antler-stone-soft); }

  .pf-grid { grid-template-columns: 1fr; }

  .pf-toolbar { padding-block: var(--a-space-4); }
  .pf-toolbar-inner { gap: var(--a-space-3); }
  .pf-control { gap: var(--a-space-2); }
  .pf-control-label { width: 100%; }
  /* Chip rows scroll sideways instead of stacking four deep */
  .pf-chips {
    flex-wrap:  nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .pf-chip { white-space: nowrap; }
  /* Chips can only scroll once their line is width-constrained, so the sort
     control and the search field each take a full row of their own. */
  .pf-chips { flex: 1 1 0; min-width: 0; }
  .pf-toolbar-row {
    flex-direction: column;
    align-items:    stretch;
    /* Must be nowrap: in a multi-line flex container `stretch` sizes items to
       their flex line, and the line grows to fit the widest item — so the sort
       chips would stretch the line instead of scrolling inside it. */
    flex-wrap:      nowrap;
    gap:            var(--a-space-3);
  }
  .pf-search { width: 100%; }
  .pf-search input { width: 100%; }

  .case-card { padding: var(--a-space-8) var(--a-space-6); }
  .case-head { gap: var(--a-space-4); }
}