/* ============================================================
   Fourfront — brand tokens (hi-fi)
============================================================ */
:root {
  /* Surface — cool off-white, not warm cream */
  --ff-cream:     #EBEEED;  /* page background (slight cool/green undertone) */
  --ff-paper:     #FFFFFF;  /* card paper */
  --ff-paper-2:   #F6F7F3;  /* lime-tinted ivory */

  /* Ink — forest green is the body color, not pure black */
  --ff-ink:       #072C22;  /* deep forest = primary ink */
  --ff-ink-2:     #2B4731;  /* deep green-grey */
  --ff-ink-3:     #7D908B;  /* mid muted green-grey */
  --ff-ink-4:     #BFC9C6;  /* light muted */

  /* Hairlines — match brand neutrals */
  --ff-line:      rgba(7, 44, 34, 0.10);
  --ff-line-soft: rgba(7, 44, 34, 0.06);

  /* Brand — deep forest #072C22 */
  --ff-forest:    #072C22;
  --ff-forest-2:  #0B3A2C;  /* slightly lifted for cards on dark */
  --ff-forest-3:  #134635;  /* one step lighter for inner visuals */
  --ff-on-dark:   #ECF0EF;  /* soft white on dark */
  --ff-on-dark-2: #BFC9C6;
  --ff-on-dark-3: #7D908B;
  --ff-line-dark: rgba(255, 255, 255, 0.10);

  /* Accent — electric lime #EAFE45 */
  --ff-lime:      #EAFE45;
  --ff-lime-2:    #DCEF38;  /* hover */
  --ff-lime-deep: #577A5D;  /* mid-green for muted accents (stars, italic) */

  /* Verified-badge tier colors (case-detail trust marker) */
  --ff-verified-bronze: #cd7f32;
  --ff-verified-silver: #c0c0c0;
  --ff-verified-gold:   #ffd700;
  /* Instagram-style verified blue — used for the case-detail trust badge */
  --ff-verified-blue:   #0095F6;

  /* Type — Plus Jakarta Sans only. No accents, no italics, no second face. */
  --ff-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 100px;
}
@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 720px)  { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  /* The GSAP scroll-reveal applies a tiny `scale(1.018)` to elements as
     they enter the viewport. On full-bleed sections that pushes their
     bounding box ~1.8% past the right edge, which lets touch devices
     scroll sideways. Clip the body so any sideways overflow from
     animations or floated decoration is invisible. */
  overflow-x: clip;
  background: var(--ff-cream);
  color: var(--ff-ink-2);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ff-ink);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
/* No font accents: em, i and friends inherit fully — no italic, no
   secondary face, no accent color. One font, one color, one weight. */
em, i, .accent {
  font-style: normal;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}
h1 { font-size: 65px; font-weight: 700; line-height: 1.05; }
h2 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; }
h3 { font-size: 40px; line-height: 1.15; }
h4 { font-size: 30px; line-height: 1.2; }

/* Mobile heading scale — keeps the H1 → H4 ratio readable on
   small viewports. Without these, H2 (36px clamp min) ends up
   visually identical to mobile H1, and H3/H4 collapse below. */
@media (max-width: 720px) {
  h1 { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.08; }
  h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.1; }
  h3 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; }
  h4 { font-size: clamp(22px, 5.8vw, 26px); line-height: 1.2; }
}

/* ===== Body copy ============================================
   Site-wide paragraph spec. All paragraphs that render at the
   default 18px scale use this — line-height 1.55, weight 400,
   letter-spacing -0.005em.
   Per-component CSS only needs to set max-width / color / margin
   and override font-size for small-print exceptions.
   For new components, either inherit (do nothing) or add the
   `.body-copy` class for clarity.
============================================================ */
p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #072c22;
}
.body-copy {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #072c22;
}

/* ===== Lists ================================================
   Site-wide list spec. <ul>/<ol> render flush (no native bullet
   gutter) and stack their items as a flex column with 14px gap.
   <li> inherits paragraph typography (18 / 1.55 / -0.005em / 400 /
   #072c22). Components can override `list-style`, `gap`, or per-li
   layout (e.g. flex row with a custom check icon) without
   re-declaring typography.
============================================================ */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
li {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #072c22;
}

.container { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-ink-3);
  font-weight: 700;
}
.eyebrow.on-dark { color: var(--ff-on-dark-2); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 22px;
  border: 1px solid var(--ff-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-family: inherit;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.btn .chip {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--ff-lime);
  border: 0;
  color: var(--ff-forest);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1), background 220ms ease, color 220ms ease;
}
.btn .chip svg path { stroke: var(--ff-forest); }
.btn:hover { transform: translateY(-1px); }
.btn:hover .chip { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ff-ink);
  color: var(--ff-paper);
  border-color: var(--ff-ink);
}
.btn-primary .chip { background: var(--ff-lime); color: var(--ff-forest); }
.btn-primary .chip svg path { stroke: var(--ff-forest); }
.btn-primary:hover {
  background: var(--ff-lime);
  color: var(--ff-forest);
  border-color: var(--ff-lime);
  box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}
.btn-primary:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-primary:hover .chip svg path { stroke: var(--ff-lime); }

/* ===== Secondary Button =========================================
   A standalone, self-contained dark-pill button with a lime chip
   that inverts to lime-on-forest on hover. Same visual recipe as
   .btn + .btn-primary, but available as a SINGLE class so it can
   be dropped anywhere without needing the .btn base.

   Use:
     <a class="secondary-button" href="...">
       Label
       <span class="chip">
         <svg ... ></svg>
       </span>
     </a>
================================================================ */
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--ff-ink);
  background: var(--ff-ink);
  color: var(--ff-paper);
  transition:
    transform 220ms cubic-bezier(0.16,1,0.3,1),
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}
.secondary-button .chip {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ff-lime);
  color: var(--ff-forest);
  flex-shrink: 0;
  transition:
    transform 280ms cubic-bezier(0.16,1,0.3,1),
    background 220ms ease,
    color 220ms ease;
}
.secondary-button .chip svg path,
.secondary-button .chip svg line,
.secondary-button .chip svg polyline { stroke: var(--ff-forest); }
.secondary-button:hover {
  transform: translateY(-1px);
  background: var(--ff-lime);
  color: var(--ff-forest);
  border-color: var(--ff-lime);
  box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}
.secondary-button:hover .chip {
  background: var(--ff-forest);
  color: var(--ff-lime);
  transform: translateX(3px);
}
.secondary-button:hover .chip svg path,
.secondary-button:hover .chip svg line,
.secondary-button:hover .chip svg polyline { stroke: var(--ff-lime); }
.secondary-button:active { transform: translateY(0); }

/* ===== Primary Button ===========================================
   Lime pill with a dark forest chip — the brand's hero / conversion
   CTA. Self-contained single class (no .btn base needed).

   Use:
     <a class="primary-button" href="...">
       Label
       <span class="chip">
         <svg ... ></svg>
       </span>
     </a>

   Optional state:
     .primary-button.is-active   — inverted (dark fill, lime chip)
                                   for the current page / selected state
================================================================ */
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 6px 6px 6px 20px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.015em;
  line-height: 26px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--ff-lime, #EAFE45);
  color: var(--ff-forest, #072C22);
  transition:
    background-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.primary-button .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--ff-forest, #072C22);
  color: var(--ff-lime, #EAFE45);
  border: 0;
  flex-shrink: 0;
  transition:
    background-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.primary-button .chip svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.primary-button:hover {
  box-shadow: 0 8px 24px rgba(7, 44, 34, 0.12);
  transform: translateY(-1px);
}
.primary-button:hover .chip {
  background: #19392A;
  transform: translateX(2px);
}
.primary-button:active { transform: translateY(0); }

/* Inverted state — dark fill, lime chip (e.g. when the CTA's
   target page is the current page). */
.primary-button.is-active {
  background: var(--ff-forest, #072C22);
  color: var(--ff-paper, #ECF0EF);
}
.primary-button.is-active .chip {
  background: var(--ff-lime, #EAFE45);
  color: var(--ff-forest, #072C22);
}
.primary-button.is-active:hover .chip {
  background: var(--ff-paper, #ECF0EF);
}

.btn-lime {
  background: var(--ff-lime);
  color: var(--ff-forest);
  border-color: var(--ff-lime);
}
.btn-lime .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-lime .chip svg path { stroke: var(--ff-lime); }
.btn-lime:hover {
  background: var(--ff-lime-2);
  border-color: var(--ff-lime-2);
  box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--ff-ink);
}
.btn-ghost:hover { background: var(--ff-ink); color: var(--ff-paper); }
.btn-ghost:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-ghost:hover .chip svg path { stroke: var(--ff-lime); }

.btn-on-dark {
  color: var(--ff-on-dark);
  border-color: var(--ff-on-dark);
}
.btn-on-dark .chip { background: var(--ff-lime); color: var(--ff-forest); }
.btn-on-dark .chip svg path { stroke: var(--ff-forest); }
.btn-on-dark:hover { background: var(--ff-lime); color: var(--ff-forest); border-color: var(--ff-lime); }
.btn-on-dark:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-on-dark:hover .chip svg path { stroke: var(--ff-lime); }

/* ===== Pills ===== */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ff-line);
  border-radius: 999px;
  background: var(--ff-paper);
  font-size: 12px; font-weight: 600;
  color: var(--ff-ink);
  letter-spacing: -0.01em;
}
.pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ff-lime); }
.pill.on-dark { background: transparent; color: var(--ff-on-dark); border-color: var(--ff-on-dark-3); }

/* ===== Liquid Glass ==============================================
   Translucent frosted surface used by the sticky nav and any card or
   chip that should feel like it's floating on top of the page.

   Variants:
     .liquid-glass            — light surface (on cream/paper bg)
     .liquid-glass.is-dark    — dark surface (on forest bg)

   Optional modifier:
     .liquid-glass.is-interactive  — hover lift + brighter fill
================================================================ */
.liquid-glass {
  background: rgba(235, 238, 237, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(7, 44, 34, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 24px -8px rgba(7, 44, 34, 0.10);
  color: var(--ff-ink);
}
.liquid-glass.is-dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px -12px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.15);
  color: var(--ff-on-dark);
}
.liquid-glass.is-interactive {
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 320ms ease,
    background 220ms ease;
}
.liquid-glass.is-interactive:hover {
  transform: translateY(-3px);
  background: rgba(235, 238, 237, 0.85);
  border-color: rgba(7, 44, 34, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 40px -10px rgba(7, 44, 34, 0.18),
    0 3px 8px rgba(7, 44, 34, 0.08);
}
.liquid-glass.is-dark.is-interactive:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -10px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.18);
}

/* ===== Liquid Lime Gradient ===============================================
   See-through cream liquid-glass with a SHARP lime hotspot at the
   top-left corner that fades into a faint forest hairline at the
   bottom-right — like light catching the rim of polished glass.

   The body is nearly transparent (~30% white) — the brand presence
   comes from the EDGE, not a body wash. Designed for the cream/paper
   site background. On dark backgrounds the body fill won't read as
   clearly; reach for .liquid-glass.is-dark instead.

   Use:
     <div class="liquid-lime-gradient">…</div>
     <div class="liquid-lime-gradient is-interactive">…</div>   for hover lift

   Apply directly to any card, chip, tile, badge — works at any size.
   The element becomes a positioned, isolated stacking context:
   ::before paints the top/bottom specular highlights, ::after paints
   the shining lime rim. Direct children are auto-lifted above both
   layers, so existing markup needs no wrappers.

   To color the rim differently, override the ::after background
   gradient on a subclass. To remove the rim entirely, set
   .liquid-lime-gradient::after { display: none; }.
================================================================ */
.liquid-lime-gradient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    /* whisper of lime — top-left, very faint */
    radial-gradient(120% 90% at 0% 0%,
      rgba(234, 254, 69, 0.12) 0%,
      rgba(234, 254, 69, 0.04) 28%,
      rgba(234, 254, 69, 0) 58%),
    /* near-transparent warm white body */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(252, 254, 246, 0.28) 50%,
      rgba(248, 252, 238, 0.24) 100%);
  border: 1px solid transparent;
  color: var(--ff-primary);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    /* crisp top specular — glass top-edge sheen */
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    /* subtle inner cavity */
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    /* bottom-edge dark line for depth */
    inset 0 -1px 0 rgba(7, 44, 34, 0.06),
    /* outer drop */
    0 8px 22px -14px rgba(7, 44, 34, 0.14),
    0 1px 3px rgba(7, 44, 34, 0.04);
}
/* Glass specular highlight — top sheen + bottom rim catch */
.liquid-lime-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* primary top sheen */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.10) 26%,
      rgba(255, 255, 255, 0) 52%),
    /* bottom rim catch — secondary refraction */
    linear-gradient(0deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  z-index: 0;
}
/* SHINING LIME RIM — sharp hotspot at top-left, fading around the
   element to a faint forest hairline. Painted via the mask-composite
   trick so it wraps the inherited border-radius. */
.liquid-lime-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.6px;
  background:
    /* tight, sharp brightness peak at top-left corner */
    radial-gradient(110% 95% at 0% 0%,
      rgba(234, 254, 69, 1) 0%,
      rgba(234, 254, 69, 0.85) 5%,
      rgba(234, 254, 69, 0.30) 14%,
      rgba(234, 254, 69, 0.06) 32%,
      rgba(234, 254, 69, 0) 55%),
    /* tail — fade into a faint forest edge */
    linear-gradient(135deg,
      rgba(234, 254, 69, 0.0) 0%,
      rgba(7, 44, 34, 0.04) 60%,
      rgba(7, 44, 34, 0.12) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* a soft glow around the lit edge */
  filter: drop-shadow(0 0 1.5px rgba(234, 254, 69, 0.4));
  pointer-events: none;
  z-index: 0;
}
.liquid-lime-gradient > * { position: relative; z-index: 1; }

.liquid-lime-gradient.is-interactive {
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms ease,
    box-shadow 320ms ease;
}
.liquid-lime-gradient.is-interactive:hover {
  transform: translateY(-3px);
  background:
    radial-gradient(120% 90% at 0% 0%,
      rgba(234, 254, 69, 0.22) 0%,
      rgba(234, 254, 69, 0.08) 28%,
      rgba(234, 254, 69, 0) 58%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(252, 254, 246, 0.40) 50%,
      rgba(248, 252, 238, 0.36) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(7, 44, 34, 0.08),
    0 16px 36px -14px rgba(7, 44, 34, 0.18),
    0 2px 6px rgba(7, 44, 34, 0.06);
}
.liquid-lime-gradient.is-interactive:hover::after {
  filter: drop-shadow(0 0 2.5px rgba(234, 254, 69, 0.6));
}

/* ===== Logo Marquee ============================================
   Auto-scrolling row of client logos with edge fade-out masks.
   Pause on hover. Honors prefers-reduced-motion.

   Structure:
     <section class="marquee">
       <div class="container">       (optional — caps width)
         <div class="marquee-row">
           <div class="marquee-track">
             <img class="marquee-logo" src="..." alt="..." />
             ... (duplicate the list so the loop seams cleanly)
           </div>
         </div>
       </div>
     </section>
================================================================ */
.marquee {
  padding: 24px 0 56px;
  text-align: center;
  position: relative;
}
.marquee-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
}
.marquee-row:hover .marquee-track,
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 40px)); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 36px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.marquee-logo:hover { opacity: 1; filter: grayscale(0); }
/* Works on <img class="marquee-logo"> directly OR on a wrapper containing <img>. */
.marquee-logo > img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(235, 238, 237, 0.82);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ff-line-soft);
}
.nav-inner { height: 84px; display: flex; align-items: center; justify-content: space-between; }
.nav-left { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ff-ink); }
.nav-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ff-forest);
  color: var(--ff-lime);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.03em;
}
.nav-wordmark { font-size: 18px; font-weight: 700; color: var(--ff-ink); letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 15px; color: var(--ff-ink-2);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--ff-ink); }
.nav-links a.is-active { color: var(--ff-ink); }

/* ===== Footer ===== */
.foot {
  background: var(--ff-paper);
  border-top: 1px solid var(--ff-line-soft);
  padding: 80px 0 32px;
  margin-top: 80px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ff-line-soft);
}
.foot-brand .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
}
.foot-brand .logo img { width: 36px; height: 36px; border-radius: 7px; display: block; }
.foot-brand .name { font-size: 15px; font-weight: 600; color: var(--ff-ink); letter-spacing: -0.01em; }
.foot-brand p { color: var(--ff-ink-3); font-size: 14px; max-width: 30ch; line-height: 1.55; }
.foot-socials { display: flex; gap: 8px; margin-top: 18px; }
.foot-socials a {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(235, 238, 237, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(7, 44, 34, 0.08);
  color: var(--ff-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 24px -8px rgba(7, 44, 34, 0.10);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.foot-socials a:hover {
  background: rgba(234, 254, 69, 0.7); /* fluo lime, translucent */
  border-color: rgba(143, 176, 32, 0.35);
  color: var(--ff-forest);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 28px -8px rgba(234, 254, 69, 0.5);
  transform: translateY(-1px);
}
.foot-col h5 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ff-ink-3); font-weight: 700; margin: 0 0 18px;
}
.foot-col a {
  display: block;
  font-size: 14px; color: var(--ff-ink); text-decoration: none;
  margin-bottom: 10px;
  transition: color 200ms ease;
}
.foot-col a:hover { color: var(--ff-lime-deep); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-size: 13px; color: var(--ff-ink-4);
}
.foot-bottom .links { display: flex; gap: 24px; }
.foot-bottom a { color: var(--ff-ink-4); text-decoration: none; }
.foot-bottom a:hover { color: var(--ff-ink-2); }
/* ===== Mobile section padding ============================================
   Many sections across the site reserve 80–120px of vertical padding for
   editorial breathing room on desktop. On phones (≤720px) that becomes
   excessive — half of a viewport-height of empty space between sections.
   Cap every common section class at 48px top/bottom on phones unless a
   page-level rule explicitly overrides. Component-level paddings (cards,
   pills, buttons) are left alone.
============================================================================ */
@media (max-width: 720px) {
  .hero,
  .reason,
  .values,
  .obs,
  .cta-strip,
  .story,
  .doen,
  .motorkap,
  .partner,
  .channels-3,
  .team,
  .mission,
  .pillars,
  .fit,
  .case-detail,
  .tl2,
  .stack-sub,
  .dark-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* .results is a tighter section on mobile — eyebrow + h2 + 1 card per
     row needs no editorial breathing room above. */
  .results {
    padding-top: 20px;
    padding-bottom: 32px;
  }
  /* Section-to-section gaps that came from margin instead of padding */
  .values { margin-bottom: 48px; }
}
     The three link columns + the © legal row are hidden — page nav lives
     in the hamburger menu, and the brand block already carries logo,
     tagline, socials. */
@media (max-width: 720px) {
  /* Mobile footer = brand block only. */
  .foot-grid {
    grid-template-columns: 1fr;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .foot-grid .foot-col { display: none; }
  .foot-bottom { display: none; }
}

/* ===============================================================
   CASE DETAIL COMPONENT
   ===============================================================
   Per-case section used on the Case Studies page. Two-column grid:
   left = eyebrow + h2 (with optional verified badge) + lead copy +
   tool pills. Right = photo with two glass "result" cards overlaid
   on the bottom. Tone is editorial — generous spacing, a single
   focus image, and two punchy stat readouts.

   Use:
     <section class="case-detail" id="…">
       <div class="container">
         <div class="cd-grid">
           <div class="cd-left">
             <h2>Brand Name<span class="verified-badge" …>…</span></h2>
             <div class="lead"><p>…</p></div>
             <div class="cd-pills">
               <span class="cd-pill">…</span> …
             </div>
           </div>
           <div class="cd-right">
             <div class="cd-photo">
               <image-slot id="…">…</image-slot>
               <div class="cd-results-row">
                 <div class="cd-result"><div class="re">…</div><div class="value">…</div><div class="cap">…</div></div>
                 <div class="cd-result">…</div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

   Page-level rules (top/bottom padding overrides, page-specific id
   selectors) stay in the page; component-level structure lives here.
================================================================ */
.case-detail { padding: 150px 0 96px; }
.case-detail + .case-detail { padding-top: 150px; }
.cd-divider { display: flex; align-items: center; gap: 16px; color: var(--ff-ink-4); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 32px; font-weight: 700; }
.cd-divider::before, .cd-divider::after { content: ""; flex: 1; height: 1px; background: var(--ff-line-soft); }
.cd-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: stretch; }
/* The case-detail component intentionally has no eyebrow label above the h2 —
   the brand name itself carries the section. If a future variant needs a
   small caps label, add `.cd-left .eyebrow { margin-bottom: 16px; }`. */
.cd-left h2 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 20px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
/* Case-detail titles are written as a single text node — no inline <em>
   split — so direct-edit, copy/paste, and screen readers all see one
   continuous brand name. */
.cd-left h2 em { font-style: normal; }
.cd-left .lead { max-width: 38ch; margin-bottom: 28px; font-size: 18px; line-height: 1.55; }

/* Tool pills — translucent glass chips listing the stack used. */
.cd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.cd-pill-ico { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.cd-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ff-ink);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(7, 44, 34, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px -10px rgba(7, 44, 34, 0.12);
}
.cd-pill .d { width: 6px; height: 6px; background: var(--ff-lime); border-radius: 999px; }

/* Optional pull-quote (testimonial inside the left column) */
.cd-quote {
  background: var(--ff-paper);
  border: 1px solid var(--ff-line);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 420px;
  position: relative;
}
.cd-quote::before { content: "“"; position: absolute; top: 8px; right: 20px; font-size: 56px; line-height: 0.8; opacity: 0.4; }
.cd-quote p { color: var(--ff-ink); font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
.cd-quote .who { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-ink-3); font-weight: 700; }

/* Right column — photo with two glass result cards overlaid on bottom. */
.cd-right { display: flex; flex-direction: column; gap: 16px; position: relative; }
.cd-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.cd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-photo image-slot {
  display: block;
  width: 100%; height: 100%;
  --image-slot-radius: 18px;
}
.cd-photo .cd-dashboard {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  margin: 0;
}

/* Glass result cards — translucent with backdrop blur, dark-forest
   readout copy in white, the headline value in lime. */
.cd-result {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  padding: 24px 22px 22px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 24px rgba(7,44,34,0.10);
}
.cd-result .re { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 6px; opacity: 0.9; }
.cd-result .value { font-size: 52px; font-weight: 800; color: var(--ff-lime); letter-spacing: -0.04em; line-height: 1; }
.cd-result .value .arr { font-size: 40px; margin-right: 4px; color: var(--ff-lime); }
.cd-result .cap { margin-top: 8px; color: #fff; font-size: 12px; line-height: 1.4; opacity: 0.8; }

/* Two-up results row pinned to bottom of the photo. Falls back to a
   single column below the photo on narrow viewports. */
.cd-results-row {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  z-index: 2;
}

/* Verified badge — bronze / silver / gold tier marker that sits next
   to the brand name in the h2. Hover (or focus) shows a tooltip
   pinned above with the customer-tenure label. */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: help;
  flex-shrink: 0;
  margin-top: 6px;
}
.verified-badge svg { width: 100%; height: 100%; }
.verified-badge svg path { fill: var(--ff-verified-blue); }
.verified-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ff-forest);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  box-shadow: 0 8px 24px rgba(7,44,34,0.22);
  z-index: 10;
}
.verified-badge::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--ff-forest);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10;
}
.verified-badge:hover::after,
.verified-badge:focus-visible::after,
.verified-badge:hover::before,
.verified-badge:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 960px) {
  /* Tighten the case-detail spacing on phones — desktop reserves 150px
     top + 96px bottom for editorial breathing room, which feels excessive
     on a narrow viewport. */
  .case-detail { padding: 48px 0 56px; }
  .case-detail + .case-detail { padding-top: 48px; }
  .cd-grid { grid-template-columns: 1fr; }
  /* Image-first on mobile: the photo is the hero of each case-detail —
     it leads visually, with the copy reading below it. */
  .cd-grid > .cd-right { order: -1; }
  .cd-results-row { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr; margin-top: 16px; }
  .cd-photo { aspect-ratio: 4 / 3; }
  .cd-photo .cd-dashboard { left: 12px; right: 12px; bottom: 12px; }
}