.directory-site {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.directory-site *,
.directory-site *::before,
.directory-site *::after { box-sizing: border-box; }
.directory-site .container { width: min(var(--container), calc(100% - 72px)); margin: 0 auto; }
.directory-site .site-header { position: fixed; right: 0; left: 0; z-index: 300; }
.directory-site .nav { min-height: var(--site-header-height); display: flex; align-items: center; justify-content: space-between; }
.directory-site .brand { color: var(--ink); text-decoration: none; }
.directory-site .nav-actions { display: flex; align-items: center; margin-left: auto; }
.directory-site .button { display: inline-flex; align-items: center; justify-content: center; }
.directory-site .mobile-label { display: none; }

.directory-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 132px) 0 clamp(68px, 8vw, 112px);
  border-bottom: 3px solid var(--ink);
  background:
    repeating-radial-gradient(circle at 92% 30%, transparent 0 52px, rgba(21, 18, 14, 0.08) 53px 55px, transparent 56px 92px),
    repeating-linear-gradient(135deg, transparent 0 25px, rgba(21, 18, 14, 0.04) 25px 27px),
    var(--paper);
}

.directory-hero::before {
  content: "INDEX / GTM / 2026";
  position: absolute;
  right: -42px;
  bottom: 60px;
  padding: 8px 54px;
  color: var(--paper);
  background: var(--ink);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: rotate(-90deg);
}

.directory-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); align-items: end; gap: 66px; }
.directory-site .eyebrow,
.directory-site .section-kicker { margin: 0 0 18px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.15em; line-height: 1.25; text-transform: uppercase; }
.directory-site h1 { max-width: 930px; margin: 0; font-size: clamp(64px, 8.4vw, 130px); line-height: 0.84; text-shadow: none; overflow-wrap: normal; }
.directory-intro { max-width: 480px; padding-bottom: 4px; font-size: clamp(1rem, 1.55vw, 1.2rem); font-weight: 600; }
.directory-intro p { margin: 0 0 18px; }
.directory-note { padding: 13px 15px; border: 1px solid var(--ink); background: var(--acid-beige); font-size: 0.73rem; font-weight: 500; }

.directory-controls { padding: 0 0 52px; background: var(--cream-2); border-bottom: 3px solid var(--ink); }
.directory-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 46px; border-right: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.directory-stats div { min-height: 126px; display: flex; flex-direction: column; justify-content: center; padding: 20px 28px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.directory-stats div:last-child { border-right: 0; }
.directory-stats strong { font-family: "Archivo Black", sans-serif; font-size: clamp(2.8rem, 6vw, 5.5rem); letter-spacing: -0.08em; line-height: 0.85; }
.directory-stats span { margin-top: 9px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.search-block label { display: block; margin-bottom: 10px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.search-field { min-height: 72px; display: flex; align-items: center; border: 3px solid var(--ink); background: var(--paper); box-shadow: 7px 7px 0 var(--copper); }
.search-field > span { padding-left: 22px; font-family: "Archivo Black", sans-serif; font-size: 1.8rem; }
.search-field input { min-width: 0; flex: 1; padding: 18px 20px; color: var(--ink); background: transparent; border: 0; outline: none; font: 700 clamp(1rem, 2vw, 1.35rem)/1.2 "Space Grotesk", sans-serif; }
.search-field button { min-height: 46px; margin-right: 12px; padding: 10px 15px; color: var(--paper); background: var(--ink); border: 0; font: 700 0.6rem/1 "Space Grotesk", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.category-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.category-filter { min-height: 44px; padding: 10px 14px; color: var(--ink); background: transparent; border: 2px solid var(--ink); font: 700 0.61rem/1.1 "Space Grotesk", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.category-filter:hover,
.category-filter:focus-visible,
.category-filter.is-active { color: var(--paper); background: var(--ink); outline: none; }

.directory-results { min-height: 70vh; padding: clamp(70px, 9vw, 126px) 0; background-image: linear-gradient(rgba(21, 18, 14, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 18, 14, 0.045) 1px, transparent 1px); background-size: 36px 36px; }
.results-bar { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.directory-site h2 { margin: 0; max-width: 900px; font-size: clamp(48px, 6vw, 88px); line-height: 0.88; }
#result-count { margin: 0 0 6px; padding: 9px 12px; color: var(--paper); background: var(--ink); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.directory-card { min-width: 0; min-height: 390px; display: flex; flex-direction: column; padding: 26px; background: rgba(252, 250, 246, 0.94); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--copper); transition: transform 130ms ease, box-shadow 130ms ease; }
.directory-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--copper); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.tool-logo-frame { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; padding: 7px; overflow: hidden; background: var(--paper); border: 2px solid var(--ink); }
.tool-logo { width: 100%; height: 100%; display: block; object-fit: contain; }
.tool-monogram { width: 52px; height: 52px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); font-family: "Archivo Black", sans-serif; font-size: 0.88rem; letter-spacing: -0.04em; }
.tool-stage { padding: 5px 8px; border: 1px solid var(--ink); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.directory-card h3 { margin: 0 0 12px; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 0.95; overflow-wrap: anywhere; }
.tool-description { margin: 0 0 22px; color: var(--muted-ink); font-size: 0.76rem; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.tool-tags span { padding: 5px 7px; background: var(--acid-beige); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.tool-link { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 11px 13px; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.tool-link:hover,
.tool-link:focus-visible { color: var(--ink); background: var(--paper); outline: none; }
.empty-state { padding: 70px 24px; text-align: center; border: 2px solid var(--ink); background: var(--paper); }
.empty-state strong { font-family: "Archivo Black", sans-serif; font-size: clamp(2rem, 6vw, 5rem); text-transform: uppercase; }
.empty-state p { margin: 10px 0 24px; }
.empty-state button { min-height: 46px; padding: 10px 18px; color: var(--paper); background: var(--ink); border: 0; font: 700 0.65rem/1 "Space Grotesk", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
.directory-disclaimer { max-width: 960px; margin: 38px 0 0; color: var(--muted-ink); font-size: 0.66rem; }
.directory-method { padding: clamp(72px, 9vw, 132px) 0; color: var(--ink); background: var(--cream-2); border-top: 1px solid var(--ink); }
.directory-method-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.directory-method h2 { max-width: 780px; color: var(--ink); font-size: clamp(2.4rem, 6vw, 5.8rem); overflow-wrap: anywhere; }
.directory-method-copy { max-width: 760px; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; }
.directory-method-copy p + p { margin-top: 22px; }

.directory-cta { padding: clamp(78px, 10vw, 144px) 0; color: var(--paper); background: var(--ink); border-top: 3px solid var(--ink); }
.directory-cta .section-kicker,
.directory-cta h2 { color: var(--paper); }
.directory-cta h2 { max-width: 1060px; margin-bottom: 42px; }
.directory-cta .button { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.directory-site .footer { color: var(--ink); background: var(--cream-2); border-top: 2px solid var(--ink); }
.directory-site .footer a { color: var(--ink); }

@media (max-width: 1040px) {
  .directory-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .directory-intro { max-width: 760px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-method-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .directory-site .container { width: min(var(--container), calc(100% - 28px)); }
  .directory-site .nav { min-height: var(--site-header-height); gap: 8px; }
  .directory-site .brand { font-size: 1rem; }
  .directory-site .nav-actions { gap: 8px; }
  .directory-site .nav-actions .button { min-height: 44px; padding: 0 11px; font-size: 0.54rem; }
  .directory-site .desktop-label { display: none; }
  .directory-site .mobile-label { display: inline; }
  .directory-hero { padding: 48px 0 54px; }
  .directory-hero::before { display: none; }
  .directory-site h1 { font-size: clamp(42px, 12.5vw, 60px); line-height: 0.88; overflow-wrap: normal; word-break: normal; }
  .directory-site h2 { font-size: clamp(40px, 12vw, 58px); }
  .directory-stats { grid-template-columns: 1fr; }
  .directory-stats div { min-height: 92px; border-right: 0; }
  .search-field { min-height: 62px; }
  .search-field > span { padding-left: 14px; }
  .search-field input { padding: 14px 10px; font-size: 0.88rem; }
  .category-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-filter { width: 100%; padding: 9px 7px; font-size: 0.52rem; }
  .results-bar { align-items: flex-start; flex-direction: column; }
  .tool-grid { grid-template-columns: 1fr; }
  .directory-card { min-height: 340px; box-shadow: 5px 5px 0 var(--copper); }
  .directory-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .directory-site *,
  .directory-site *::before,
  .directory-site *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}