/* ============================================================
   MARCH ONWARD — styles.css
   ============================================================ */


/* ------------------------------------------------------------
   FONT FACES
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/FunnelDisplay-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/DMSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');
}

/* ------------------------------------------------------------
   DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Palette */
  --bg:           #0A0A0A;
  --bg-card:      #131313;
  --bg-card-h:    #181818;
  --text:         #F5F5F5;
  --text-muted:   #888888;
  --text-faint:   #555555;
  --accent:       #D4FF3A;
  --accent-h:     #BFE800;
  --accent-glow:  rgba(212,255,58,0.15);
  --border:       #1F1F1F;
  --border-h:     #2D2D2D;

  /* Typography */
  --f-display: 'Geist', 'Funnel Display', Georgia, sans-serif;
  --f-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --max-w:    1380px;
  --narrow-w: 860px;
  --read-w:   760px;
  --pad:      24px;

  /* Hero overlay opacity (user-tunable) */
  --hero-overlay:  1;

  /* Easing */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px)  { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --pad: 48px; } }

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  color: var(--text);
}
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #000; }

/* Focus */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Skip link */
.skip-link {
  position: absolute; top: 0; left: 0;
  padding: 12px 18px;
  background: var(--accent); color: #000; font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
  z-index: 10000;
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------
   GRAIN OVERLAY
   ------------------------------------------------------------ */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.container--narrow { max-width: var(--narrow-w); }

/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn--primary { background: var(--accent); color: #000; }
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,255,58,0.08);
}
.btn--primary:active { transform: translateY(0); }
.btn--lg { padding: 17px 32px; font-size: 16px; }

.btn__arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .btn--primary { animation: btn-pulse 3s ease-in-out infinite; }
  .btn--primary:hover,
  .btn--primary:focus-visible { animation: none; }
}
@keyframes btn-pulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 28px 4px var(--accent-glow); }
}

/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10,10,10,0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .nav { background: rgba(10,10,10,0.97); }
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 13px var(--pad);
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__logo-img { height: 36px; width: auto; display: block; }

.nav__logo {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.nav__logo-arrow {
  color: var(--accent);
  font-family: var(--f-body);
  font-size: 17px;
  transition: transform 0.2s var(--ease);
}
.nav__logo:hover .nav__logo-arrow { transform: translateX(3px); }

.nav__links {
  display: none;
  gap: 26px;
  margin-left: auto;
  margin-right: 20px;
}
.nav__links a { font-size: 14px; color: var(--text-muted); }
.nav__links a:hover { color: var(--accent); }

.nav__cta { display: none; padding: 10px 18px; font-size: 14px; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px; height: 20px;
  padding: 0; background: none; border: none;
  margin-left: auto;
}
.nav__bar {
  display: block;
  width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile drawer — default hidden; shown only when :not([hidden]) */
.nav__mobile { display: none; }
.nav__mobile:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px var(--pad) 20px;
  border-top: 1px solid var(--border);
  background: rgba(10,10,10,0.98);
}
.nav__mobile a:not(.btn) {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  border-bottom: 1px solid var(--border);
}
.nav__mobile a:not(.btn):last-of-type { border-bottom: none; }
.nav__mobile .btn { margin-top: 16px; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  padding: 110px 0 80px;
  overflow: hidden; isolation: isolate;
  background: var(--bg);
}

/* Image */
/* Crossfade slideshow */
.hero__slideshow {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0) brightness(0.82) contrast(1.7);
  opacity: 0;
  animation-name: heroFade;
  animation-duration: 32s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.hero__slide--1 {
  background-image: url('/assets/images/cafe.jpg');
  animation-delay: 0s;
  background-position: center;
}
.hero__slide--2 {
  background-image: url('/assets/images/trade.jpg');
  animation-delay: 8s;
  background-position: center 30%;
}
.hero__slide--3 {
  background-image: url('/assets/images/crafting.jpg');
  animation-delay: 16s;
  left: -25%;
  right: -25%;
  background-size: cover;
  background-position: 60% 15%;
  filter: saturate(0) brightness(1.05) contrast(1.7);
}
.hero__slide--4 {
  background-image: url('/assets/images/accountant.jpg?v=2');
  animation-delay: 24s;
  background-position: 80% 20%;
}
@media (max-width: 899px) {
  .hero__slide--1 { background-position: 75% center; }
  .hero__slide--2 { background-position: 75% 30%; }
  .hero__slide--3 { background-position: 60% 15%; }
  .hero__slide--4 { background-position: 80% 20%; }
}
@keyframes heroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  29%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Overlay */
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10,10,10,calc(0.95*var(--hero-overlay))) 0%,
    rgba(10,10,10,calc(0.70*var(--hero-overlay))) 50%,
    rgba(10,10,10,calc(0.50*var(--hero-overlay))) 100%
  );
}
@media (min-width: 640px) {
  .hero__overlay {
    background: linear-gradient(
      90deg,
      rgba(10,10,10,calc(0.95*var(--hero-overlay))) 0%,
      rgba(10,10,10,calc(0.55*var(--hero-overlay))) 55%,
      rgba(10,10,10,calc(0.25*var(--hero-overlay))) 100%
    );
  }
}

/* Ambient glow (used by 404 page) */
@keyframes glow-breathe {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.07); opacity: 0.8; }
}

/* Content */
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.hero__content { max-width: 740px; }

.hero__sub {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 48px;
}
.hero__headline {
  font-family: var(--f-display);
  font-size: clamp(42px, 6.5vw, 88px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.hero__headline .word {
  display: inline-block;
  margin-right: 0.15em;
}
.hero__headline .word--accent, .hero__headline .word--accent em {
  font-style: normal; font-weight: 300; color: var(--accent);
}
.hero__br-tablet { display: none; }
.br-mobile { display: none; }

/* Word-by-word load animation */
.hero__headline .word {
  opacity: 0;
  transform: translateY(36px);
  animation: word-in 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.30s + var(--wi) * 0.08s);
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero fade-up elements */
.hero [data-anim="fade-up"] {
  opacity: 0; transform: translateY(20px);
  animation: fade-up-in 0.7s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fade-up-in {
  to { opacity: 1; transform: translateY(0); }
}

.hero__lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65; color: #fff;
  max-width: 680px; margin: 0 0 18px;
}
.hero__lede:first-of-type { margin-top: 0; }

.hero__cta-row {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px;
  margin-top: 56px;
}
.hero__nudge {
  font-family: var(--f-body);
  font-style: italic; font-weight: 400;
  font-size: 14px; color: rgba(255,255,255,0.7);
  margin: 8px 0 0;
}

.hero__lede--accent { color: var(--accent); }

.hero__form {
  display: flex; flex-direction: column;
  gap: 14px; margin-top: 60px;
  max-width: 680px;
}
.hero__fields {
  display: flex; gap: 10px 16px; align-items: stretch;
}
.hero__input {
  flex: 1; min-width: 0;
  padding: 11px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #fff; font-family: var(--f-body); font-size: 15px;
  outline: none; -webkit-appearance: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.hero__input:first-child { flex: 1.3; }
.hero__input::placeholder { color: rgba(255,255,255,0.65); }
.hero__input:focus { border-color: var(--accent); background: rgba(255,255,255,0.12); }
.hero__input.is-error { border-color: #ff4455; }
.hero__input:-webkit-autofill,
.hero__input:-webkit-autofill:hover,
.hero__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.hero__submit { white-space: nowrap; flex-shrink: 0; padding: 11px 20px; font-size: 15px; }
@media (max-width: 599px) {
  .hero__fields { flex-direction: column; gap: 12px; }
  .hero__submit { justify-content: center; margin-top: 6px; }
  .hero__sub { font-size: 28px; }
}

/* ------------------------------------------------------------
   SCROLL ANIMATION (non-hero)
   ------------------------------------------------------------ */
[data-anim="fade-up"] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
[data-anim="fade-up"].is-visible { opacity: 1; transform: translateY(0); }
/* Hero elements animate via @keyframes above — don't double-apply */
.hero [data-anim="fade-up"] { transition: none; }

/* ------------------------------------------------------------
   SECTION SHELL
   ------------------------------------------------------------ */
.section { padding: 80px 0; position: relative; }
@media (min-width: 768px) { .section { padding: 110px 0; } }

.section--light {
  background: #E8E8E8;
  color: #0A0A0A;
}
.section--light .eyebrow { color: #555; }
.section--light .section__title { color: #0A0A0A; }
.section--light .step__num { color: #999; }
.section--light .step__title { color: #0A0A0A; }
.section--light .step__body { color: #444; }

.section__hd { margin-bottom: 52px; }
#case-studies .eyebrow { display: table; margin-bottom: 20px; }
#case-studies .section__title { margin-top: 0; }
.section__title { font-size: clamp(28px, 3.8vw, 40px); margin: 0; }

.title-highlight {
  display: inline;
  background: var(--accent);
  color: #0A0A0A;
  padding: 2px 10px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.section__cta {
  margin-top: 52px;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 12px;
}

/* ------------------------------------------------------------
   STEPS
   ------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3,1fr); gap: 28px; }
}

.step { display: flex; flex-direction: column; gap: 10px; }
.step--card {
  background: transparent;
  border-radius: 14px;
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease);
}
.step--card::before {
  content: '';
  position: absolute;
  width: 300%; aspect-ratio: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--accent) 60deg,
    transparent 120deg,
    transparent 360deg);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.step--card::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #D8D8D8;
  transition: box-shadow 0.3s var(--ease);
  pointer-events: none;
}
.step--card > * { position: relative; z-index: 1; }
.step--card:hover::before {
  opacity: 1;
  animation: card-trace 2s linear infinite;
}
.step--card:hover { transform: translateY(-3px); }
.step--card:hover::after { box-shadow: 0 8px 32px rgba(0,0,0,0.12); border-color: transparent; }
@keyframes card-trace {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.step__num {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.18em;
  color: #999; margin-bottom: 4px;
}
.step--card .step__num { color: #0A0A0A; opacity: 0.35; }
.step__title { font-size: 22px; }
.step__body  { font-size: 15px; color: var(--text-muted); margin: 0; }
.step__link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.section--light .step__link { color: #5C7000; }
.section--light .step__title { color: #0A0A0A; }
.section--light .step__body  { color: #555; }

.btn--dark {
  background: #0A0A0A; color: #fff;
  border: none;
}
.btn--dark:hover,
.btn--dark:focus-visible {
  background: #1a1a1a;
  transform: translateY(-1px);
}

/* Button sheen */
.btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: btn-sheen 0.55s ease-in-out forwards; }
@keyframes btn-sheen {
  from { left: -80%; }
  to   { left: 120%; }
}

/* ------------------------------------------------------------
   SERVICES — tab panel design
   ------------------------------------------------------------ */

/* Desktop wrapper: visible ≥900px */
.svc-desktop { display: block; }
@media (max-width: 899px) { .svc-desktop { display: none; } }

/* Mobile accordion: hidden ≥900px */
.svc-accordion { display: none; }
@media (max-width: 899px) { .svc-accordion { display: flex; flex-direction: column; gap: 8px; } }

/* Tab nav grid (both rows) */
.svc-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Shared tab base */
.svc-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 24px;
  width: 100%;
  background: #0C0C0C;
  border: 1px solid #161616;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.svc-tab:hover { background: var(--bg-card); border-color: var(--border); }

/* Top tabs — rounded top, accent indicator on bottom */
.svc-nav--top .svc-tab {
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid transparent;
}
.svc-nav--top .svc-tab:hover { border-bottom-color: transparent; }
.svc-nav--top .svc-tab[aria-selected="true"] {
  background: var(--bg-card-h);
  border-color: var(--border-h);
  border-bottom-color: var(--accent);
}

/* Panel strip — no top/bottom border (tabs provide those edges) */
.svc-panels {
  border: 1px solid var(--border-h);
  border-top: none;
  border-bottom: none;
  background: var(--bg-card-h);
  overflow: hidden;
}

/* Bottom tabs — rounded bottom, accent indicator on top */
.svc-nav--bot .svc-tab {
  border-radius: 0 0 12px 12px;
  border-top: 3px solid transparent;
}
.svc-nav--bot .svc-tab:hover { border-top-color: transparent; }
.svc-nav--bot .svc-tab[aria-selected="true"] {
  background: var(--bg-card-h);
  border-color: var(--border-h);
  border-top-color: var(--accent);
}

/* Tab labels */
.svc-tab__num {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent);
}

.svc-tab__name {
  font-family: var(--f-display);
  font-weight: 500; font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.02em; color: var(--text);
  line-height: 1.1;
}
.svc-tab__hint { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* Panels */
.svc-panel { display: none; padding: 44px 48px; }
.svc-panel.is-active { display: grid; }
@media (min-width: 900px) {
  .svc-panel.is-active { grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
}

/* Panel copy */
.svc-panel__left { display: flex; flex-direction: column; gap: 18px; }
.svc-panel__title { font-size: clamp(24px, 2.8vw, 32px); margin: 0; }
.svc-panel__lede {
  font-family: var(--f-body); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.6; color: var(--text); margin: 0;
}
.svc-panel__more {
  font-family: var(--f-body); font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--text-muted); margin: 0;
}
.svc-panel__right { display: flex; flex-direction: column; gap: 20px; }
.svc-panel__list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.svc-panel__list li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 1.5; color: var(--text);
}
.svc-panel__list li::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-family: var(--f-body); font-weight: 500;
}

/* Mobile accordion */
.svc-acc-item {
  border: 1px solid #161616;
  border-radius: 12px;
  background: #0C0C0C;
  overflow: hidden;
}
.svc-acc-item.is-open {
  border-color: var(--accent);
  background: var(--bg-card-h);
}
.svc-acc-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 20px 22px; width: 100%;
  background: transparent; border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer; text-align: left;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.svc-acc-item.is-open .svc-acc-btn {
  border-bottom-color: transparent;
}
.svc-acc-body {
  display: none;
  padding: 28px 24px;
}
.svc-acc-body .svc-panel__left { margin-bottom: 28px; }
.svc-acc-item.is-open .svc-acc-body { display: block; }

/* ------------------------------------------------------------
   CASE STUDIES
   ------------------------------------------------------------ */
.case {
  background: #fff;
  border: 1px solid #D0D0D0;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.case:hover { border-color: #A0A0A0; transform: translateY(-2px); }
.case .case__quote { color: #0A0A0A; }
.case .case__sub { color: #666; }
.case .case__results li { color: #222; }
.case .case__closing { color: #555; border-top-color: #E0E0E0; }


.case__media {
  position: relative;
  aspect-ratio: 3/2;
  background: var(--bg-card);
  overflow: hidden;
}
.case__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter 0.4s ease;
}
.case__media:hover img { filter: saturate(0) brightness(0.85) contrast(1.5); }
.case--sm .case__media:hover img { filter: saturate(0) brightness(1.1) contrast(1.5); }

@media (min-width: 900px) {
  .case--featured .case__media img {
    object-position: center 80%;
  }
  .case__body {
    position: relative;
    z-index: 2;
  }
}

.case__visit-btn {
  display: inline-flex;
  align-items: center;
  position: absolute;
  z-index: 5;
  overflow: hidden;
  background: var(--accent);
  color: #0A0A0A;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.case__visit-btn:hover,
.case__visit-btn:focus-visible {
  background: var(--accent-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,255,58,0.08);
}
.case__visit-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.case__visit-btn:hover::after { animation: btn-sheen 0.55s ease-in-out forwards; }

.case--featured .case__visit-btn {
  bottom: 26px;
  right: 20px;
}
@media (max-width: 899px) {
  .case--featured .case__visit-btn {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .case--featured .case__media img {
    object-position: center 5%;
  }
}
.case--sm .case__visit-btn {
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.case__media--sm { aspect-ratio: 5/3; }

/* Sproofspaces image crop */
.img--sproofspaces { object-position: center 20%; }
@media (max-width: 899px) {
  .img--sproofspaces { object-position: center 45%; }
  .hero__headline { font-size: 52px; }
  .hero__sub { font-size: 26px; }
}

/* Tablet-only refinements (600–899px) */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__br-tablet { display: inline; }
  .hero__lede { max-width: 520px; }
}

/* Mobile-only refinements (<600px) */
@media (max-width: 599px) {
  .br-mobile { display: inline; }
}

.case__body { padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }

.case__sector {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #5C7000;
}
.case__quote {
  font-family: var(--f-body);
  font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.3; margin: 0;
}
.case__block { display: flex; flex-direction: column; gap: 8px; }
.case__block p { line-height: 1.4; margin: 0; }
.case__sector + .case__quote { margin-top: 14px; }
.case__quote + .case__block { margin-top: 8px; }
.case__block + .case__block { margin-top: 14px; }
.case__sub {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #555; margin: 0;
}
.case__results { display: flex; flex-direction: column; gap: 3px; }
.case__results li {
  position: relative; padding-left: 18px;
  font-size: 15px;
}
.case__results li::before {
  content: '';
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
}
.case__closing {
  font-family: var(--f-body);
  font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--text-muted);
  margin: 0; padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Featured case */
.case--featured { margin-bottom: 36px; }
@media (min-width: 880px) {
  .case--featured { display: grid; grid-template-columns: 5fr 7fr; }
  .case--featured .case__media { aspect-ratio: auto; height: 100%; min-height: 440px; }
  .case--featured .case__body  { padding: 44px 40px; }
  .case--featured .case__quote { font-size: 22px; }
}

.case-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 640px) { .case-grid { grid-template-columns: repeat(2,1fr); } }

.cases__footnote {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
  background: var(--accent);
  color: #0A0A0A;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: var(--f-body);
  text-align: center;
}

/* Small horizontal cards */
.case--sm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.case--sm .case__media--sm {
  width: 100%;
  min-width: unset;
  aspect-ratio: 5/3;
  flex-shrink: 0;
}
.case--sm .case__body {
  padding: 24px 16px 16px;
  font-size: 13px;
  min-width: 0;
}
@media (min-width: 900px) {
  .case--sm {
    flex-direction: row;
  }
  .case--sm .case__media--sm {
    width: 260px;
    min-width: 260px;
    aspect-ratio: unset;
    align-self: stretch;
  }
  .case--sm .case__body {
    padding-top: 36px;
  }
}
.case--sm .case__sector { font-size: 10px; }
.case--sm .case__sector + .case__block { margin-top: 18px; }
.case--sm .case__sub { font-size: 10px; }
.case--sm .case__results { font-size: 13px; }
.case--sm .case__closing { font-size: 13px; }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.section--faq { background: #0A0A0A; }
.section--faq .section__title { color: var(--text); }
.section--faq .eyebrow { color: var(--text-muted); }

.faq { display: flex; flex-direction: column; gap: 20px; }

.faq__item {
  background: #1A1A1A;
  border-radius: 12px;
  border: 1px solid #2C2C2C;
  transition: border-color 0.3s var(--ease);
  overflow: hidden;
}
.faq__item:hover { border-color: #444; }
.faq__item[open] { border-color: var(--accent); }

.faq__q {
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  padding: 20px 24px;
  font-family: var(--f-body); font-weight: 600; font-size: 17px;
  color: #F0F0F0; cursor: pointer; list-style: none;
  transition: color 0.2s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__item[open] .faq__q { color: var(--accent); }

.faq__icon {
  flex-shrink: 0;
  font-family: var(--f-mono); font-size: 18px; font-weight: 400;
  color: #888;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.2s var(--ease);
}
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: #0A0A0A;
}

.faq__a { padding: 0 24px 20px; }
.faq__a p { font-size: 16px; line-height: 1.7; color: #999; margin: 0; }
.faq__a p + p { margin-top: 14px; }

.faq__a { animation: faq-reveal 0.28s var(--ease-out); }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   FORM MODAL
   ------------------------------------------------------------ */
.form-modal {
  position: fixed; inset: 0; margin: auto;
  width: min(92vw, 520px);
  max-height: 90vh; overflow-y: auto;
  background: #131313;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 48px 40px 40px;
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  z-index: 1000;
}
.form-modal::backdrop {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}
.form-modal__close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 4px 8px;
  transition: color 0.2s;
}
.form-modal__close:hover { color: var(--text); }
.form-modal__eyebrow {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.form-modal__title { font-size: clamp(26px, 4vw, 36px); margin: 0 0 10px; }
.form-modal__sub { font-size: 15px; color: var(--text-muted); margin: 0 0 28px; line-height: 1.6; }
.form-modal__form { display: flex; flex-direction: column; gap: 12px; }
.form-modal__input {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff; font-family: var(--f-body); font-size: 15px;
  outline: none; -webkit-appearance: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-modal__input::placeholder { color: rgba(255,255,255,0.35); }
.form-modal__input:focus { border-color: var(--accent); background: rgba(255,255,255,0.1); }
.form-modal__input.is-error { border-color: #ff4455; }
.form-modal__input:-webkit-autofill,
.form-modal__input:-webkit-autofill:hover,
.form-modal__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
  -webkit-text-fill-color: #fff; caret-color: #fff;
}
.form-modal__submit { margin-top: 4px; justify-content: center; }
.form-modal__nudge {
  font-family: var(--f-body); font-style: italic;
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin: 4px 0 0; text-align: center;
}
@media (max-width: 599px) {
  .form-modal { padding: 40px 24px 32px; }
}

/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */
.final-cta {
  position: relative;
  padding: 130px 0;
  text-align: center;
  overflow: hidden; isolation: isolate;
  background: #E8E8E8;
  border-top: 1px solid #D0D0D0;
}
@media (min-width: 768px) { .final-cta { padding: 160px 0; } }

.final-cta__inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.final-cta__title { font-size: clamp(38px, 7vw, 72px); margin: 0 0 8px; padding-bottom: 4px; color: #0A0A0A; font-weight: 700; line-height: 1.15; overflow: visible; }
.final-cta__thin { font-style: italic; font-weight: 300; }
.final-cta .title-highlight { color: #0A0A0A; }
.final-cta .title-highlight .final-cta__thin { color: #0A0A0A; }
.final-cta .btn--primary { background: #0A0A0A; color: #F5F5F5; animation: none; margin-top: 24px; }
.final-cta .btn--primary:hover,
.final-cta .btn--primary:focus-visible { background: #222; color: #F5F5F5; }
.final-cta .eyebrow { color: #5C7000; }
.final-cta__sub {
  font-family: var(--f-body);
  font-style: italic; font-weight: 400;
  font-size: 14px; color: #666; margin: 0;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0; background: var(--bg);
}
@media (min-width: 768px) { .footer { padding: 42px 0; } }

.footer__inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  text-align: center;
  font-size: 14px; color: var(--text-muted);
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--text); }
.footer__brand {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.footer__logo { display: inline-block; }
.footer__logo-img { height: 30px; width: auto; display: block; }
.footer__copy { margin: 0; font-size: 13px; color: var(--text-faint); }
.footer__legal, .footer__contact { margin: 0; }

/* Mobile: flatten brand so logo / email / legal / copy stack independently */
@media (max-width: 699px) {
  .footer__brand { display: contents; }
  .footer__logo    { order: 1; }
  .footer__contact { order: 2; }
  .footer__legal   { order: 3; }
  .footer__copy    { order: 4; }
}
@media (min-width: 700px) {
  .footer__brand { align-items: flex-start; }
}

@media (min-width: 700px) {
  .footer__inner {
    flex-direction: row; justify-content: space-between; text-align: left;
  }
}

/* scroll-behaviour only */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }