/* Orchid Placement Partners — shared stylesheet */

:root {
  --ink: #3a2145;
  --black: #0b0a0e;
  --bg: #faf8f4;
  --paper: #f3efe7;
  --orchid: #6b3f7a;
  --orchid-deep: #3d2447;
  --lilac: #c9a6d9;
  --gold: #b9822f;
  --muted: #6b6b6f;
  --border: rgba(28, 26, 31, 0.14);
  --font-headline: 'Bodoni Moda', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-subtext: 'Manrope', sans-serif;
  --font-playfair: 'Playfair Display', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Page loader ---------- */
/* Opaque by default in the markup (no JS needed to show it) so it covers the
   initial load and, via the click listener in script.js, the moment right
   before navigating to another page too — script.js's only job is to add
   .loader-hidden once a page is ready. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--bg);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.page-loader.loader-hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader-icon {
  width: clamp(56px, 10vw, 84px);
  height: auto;
  animation: loaderBreathe 7s ease-in-out infinite;
}

@keyframes loaderBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* Indeterminate-style bar: not tied to real load progress (there isn't a
   meaningful one to track on a static site), just a fill that completes
   right as the loader fades — gives the pause a sense of purpose. Duration
   is matched by the setTimeout in script.js that triggers the fade-out. */
.page-loader-bar {
  width: 140px;
  height: 2px;
  background: rgba(58, 33, 69, 0.15);
  overflow: hidden;
}

.page-loader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--orchid);
  animation: loaderFill 1.6s ease-in-out forwards;
}

@keyframes loaderFill {
  from { width: 0%; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-icon { animation: none; }
  .page-loader { transition: none; }
  .page-loader-bar-fill { animation: none; width: 100%; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

.section { padding: 56px 0; }
.section-sm { padding: 40px 0; }

.hairline {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---------- Reveal-on-load ---------- */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: revealUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal-d1 { animation-delay: 0.12s; }
.reveal-d2 { animation-delay: 0.24s; }
.reveal-d3 { animation-delay: 0.36s; }

.font-playfair { font-family: var(--font-playfair); }

/* Headlines and hero text: per-character blur-in (spans injected by script.js).
   Triggered by an IntersectionObserver adding .in-view — not a load-time
   animation — so headlines further down the page play as you scroll to them
   instead of already sitting fully visible by the time they're reached. */
.word-nowrap {
  display: inline-block;
  white-space: nowrap;
}

/* Break opportunity script.js inserts inside slash-joined compound words
   (e.g. "Government/Defense"). Hidden by default since Chrome honors a
   <wbr> even inside a white-space:nowrap ancestor, which would otherwise
   defeat the deliberate single-line treatment some headings use at desktop
   widths — shown again below at the width where that nowrap gets dropped. */
.blur-wbr {
  display: none;
}

.char-blur {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, filter 0.3s ease-out;
}

.blur-text.in-view .char-blur {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .char-blur {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(20px, 5vw, 56px);
  background: none;
  border: none;
}

.logo-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease;
}

.logo-mark img {
  height: 92px;
  width: auto;
  object-fit: contain;
}

.logo-full-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icon mark stays in its natural brand colors always; only the wordmark
   takes the monochrome on-dark/on-light treatment. */
.logo-mark .logo-full-icon,
.logo-mark .logo-icon {
  filter: none;
}

.logo-mark .logo-full-word {
  filter: brightness(0) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
  transition: filter 0.2s ease;
}

/* Same on-dark toggle already driving the CTA/hamburger colors — flips the
   wordmark to white when a photo/dark section is behind it. */
.site-header.on-dark .logo-mark .logo-full-word {
  filter: brightness(0) invert(1);
}

/* Every page shows just the floating icon by default — the full
   icon+wordmark lockup is reserved for the homepage hero only. */
.logo-mark .logo-full-group {
  display: none;
}

.logo-mark .logo-icon {
  display: block;
}

/* Homepage exception: full lockup at the top of the hero, swapping to just
   the icon once scrolled past the threshold (toggled in script.js). The
   wordmark stays black here instead of flipping white with the rest of the
   on-dark treatment — .hero-corner-fade gives it a light patch to sit on. */
body.is-home .logo-mark .logo-full-group {
  display: flex;
}

body.is-home .logo-mark .logo-icon {
  display: none;
}

body.is-home .site-header.on-dark .logo-mark .logo-full-word {
  filter: brightness(0) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

body.is-home .site-header.scrolled .logo-mark .logo-full-group {
  display: none;
}

body.is-home .site-header.scrolled .logo-mark .logo-icon {
  display: block;
}

/* Toggled by script.js while the pinned horizontal-scroll section is active —
   the logo would otherwise sit awkwardly over the panning photos. */
.site-header.hide-logo .logo-mark {
  opacity: 0;
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 1;
  min-width: 0;
}

.header-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  padding: 11px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-cta:hover {
  background: var(--ink);
  color: var(--bg);
}

.cta-short { display: none; }

/* .on-dark is toggled by script.js whenever a photo/dark section currently sits
   behind the header's right-hand controls — not just on the homepage hero. */
.site-header.on-dark .nav-cta {
  color: var(--bg);
  border-color: var(--bg);
}

.site-header.on-dark .nav-cta:hover {
  background: var(--bg);
  color: var(--ink);
}

.menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 52px;
}

.menu-trigger .bar {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}

.menu-trigger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.site-header.on-dark .menu-trigger .bar {
  background: var(--bg);
}

/* ---------- Nav overlay ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--black);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* "safe center" centers short menus, but falls back to top-aligned + scrollable
     instead of clipping once the About accordion makes the list taller than the viewport */
  justify-content: safe center;
  padding: 100px clamp(24px, 8vw, 100px) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  overflow-y: auto;
}

.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li {
  padding: 10px 0;
}

.nav-links a.nav-link,
.nav-links button.nav-link {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  background: none;
  border: none;
  color: var(--bg);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  transition: color 0.2s ease;
}

.nav-links a.nav-link:hover,
.nav-links button.nav-link:hover {
  color: var(--lilac);
}

.nav-caret {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--lilac);
  transition: transform 0.25s ease;
}

.nav-item.open .nav-caret { transform: rotate(180deg); }

/* Text-roll hover: two identical letter-by-letter layers stacked in a clipped
   box. On hover the top layer rolls up out of view while a pre-colored
   duplicate rolls up into place from below — reads as the word "flipping"
   rather than a plain color fade. Spans are injected by script.js. */
.text-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  vertical-align: top;
}

.text-roll-layer {
  display: block;
}

.text-roll-bottom {
  position: absolute;
  top: 0;
  left: 0;
}

.text-roll-char {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.text-roll-top .text-roll-char {
  transform: translateY(0);
}

.text-roll-bottom .text-roll-char {
  transform: translateY(100%);
  color: var(--lilac);
}

.nav-link:hover .text-roll-top .text-roll-char,
.nav-link:focus-visible .text-roll-top .text-roll-char {
  transform: translateY(-100%);
}

.nav-link:hover .text-roll-bottom .text-roll-char,
.nav-link:focus-visible .text-roll-bottom .text-roll-char {
  transform: translateY(0);
}

.nav-sublist {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-item.open .nav-sublist {
  max-height: 200px;
}

.nav-sublist li { padding: 5px 0; }

.nav-sublist a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--lilac);
  border-bottom: 1px solid transparent;
}

.nav-sublist a:hover { border-bottom-color: var(--lilac); }

body.nav-open { overflow: hidden; }

/* ---------- CTA buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  padding: 22px 40px;
  border-radius: 0;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--black);
  border-color: var(--black);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* On the dimmed hero photo — invert so buttons read against dark imagery */
.btn.on-dark {
  border-color: var(--bg);
}

.btn.on-dark.btn-primary {
  background: var(--bg);
  color: var(--ink);
}

.btn.on-dark.btn-primary:hover {
  background: var(--orchid);
  color: var(--bg);
  border-color: var(--orchid);
}

.btn.on-dark.btn-outline {
  background: transparent;
  color: var(--bg);
}

.btn.on-dark.btn-outline:hover {
  background: var(--bg);
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 8, 11, 0.82) 0%, rgba(10, 8, 11, 0.58) 40%, rgba(10, 8, 11, 0.62) 100%);
}

/* Light patch behind the top-left logo so the black wordmark (kept black
   here rather than flipping white like the rest of the on-dark header) has
   something to read against over the dark hero photo. */
.hero-corner-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: min(560px, 65vw);
  height: min(320px, 42vh);
  z-index: 0;
  background: radial-gradient(ellipse at top left, rgba(250, 248, 244, 0.4) 0%, rgba(250, 248, 244, 0.2) 35%, rgba(250, 248, 244, 0) 60%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--bg);
  padding: 0 clamp(24px, 6vw, 80px) 90px;
  max-width: 1040px;
}

/* min(7.5vw, 10vh) instead of a plain 7.5vw: on a wide-but-short viewport
   (a laptop screen, as opposed to a tall external monitor) sizing purely off
   width let this headline grow tall enough to overlap the fixed header. The
   vh term caps it to what the viewport's actual height can fit; on normal
   and mobile-portrait aspect ratios vh is the larger number so vw still wins
   and behavior is unchanged. */
.hero-content h1 {
  font-size: clamp(2rem, min(7.5vw, 10vh), 6.4rem);
  font-weight: 600;
  color: var(--bg);
}

.hero-verticals {
  margin: 32px 0 6px;
  font-family: var(--font-subtext);
  font-size: 22px;
  color: rgba(250, 248, 244, 0.85);
  max-width: 720px;
}

/* Secondary line under the vertical list: the hub/geography statement,
   lighter weight so it reads as a supporting detail, not a second headline. */
.hero-hub {
  margin: 0 0 40px;
  font-family: var(--font-subtext);
  font-size: 16px;
  color: rgba(250, 248, 244, 0.78);
  max-width: 720px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  z-index: 2;
  animation: cueBounce 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.scroll-cue.hide { opacity: 0; }

/* The inline variant sits in normal document flow, so once it's faded it
   should also stop reserving layout space — otherwise every section below
   it inherits dead air proportional to how far down the page it happens to
   sit, throwing off spacing that has nothing to do with this cue. */
.scroll-cue.inline.hide {
  margin-top: 0;
  height: 0;
  overflow: hidden;
}

.hero .scroll-cue { color: var(--bg); }

/* Non-hero pages: content height varies, so the cue sits in normal flow instead of pinned to the bottom */
.scroll-cue.inline {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  align-items: flex-start;
  margin-top: 40px;
  animation: none;
}

.scroll-cue.inline .chevron { animation: cueBounce 1.8s ease-in-out infinite; }

.scroll-cue .chevron { font-size: 22px; line-height: 1; }

@keyframes cueBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- Page header (non-hero pages) ---------- */
.page-header {
  position: relative;
  padding: 230px 0 36px;
  text-align: left;
}

/* This page-header's scroll cue fades but still reserves its layout space
   (deliberate, so the page doesn't jump mid-scroll) — combined with the
   default bottom padding that stacked into an oversized gap before the
   Austin section below. Scoped to this page only. */
#why-us {
  padding-bottom: 16px;
}

#why-us .scroll-cue.inline {
  margin-top: 16px;
}

#why-us .scroll-cue.inline.hide {
  margin-top: 0;
}

.page-header h1 {
  font-size: clamp(2.75rem, 8vw, 7rem);
  max-width: 17ch;
}

.page-header .sub {
  margin-top: 24px;
  max-width: 62ch;
  font-family: var(--font-subtext);
  font-size: 24px;
  color: var(--muted);
}

.section-heading {
  max-width: 26ch;
  margin-bottom: 36px;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
}

/* ---------- Rows (alternating image/text) ---------- */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.row + .row { margin-top: clamp(28px, 4vw, 48px); }

.row.reverse .row-media { order: 2; }
.row.reverse .row-text { order: 1; }

.row-text h2 { max-width: 14ch; font-size: clamp(2.5rem, 4.5vw, 3.5rem); }
.row-text h3 { max-width: 26ch; font-size: clamp(1.75rem, 3vw, 2.25rem); }

.row-text .sub {
  margin-top: 18px;
  font-family: var(--font-subtext);
  font-size: 1.1em;
  color: var(--muted);
}

/* ---------- Framed images: small corner accent + soft shadow (no heavy border, no full-edge panel) on every photo ---------- */
.img-frame {
  position: relative;
}

.img-frame::before {
  content: "";
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 56px;
  height: 56px;
  background: var(--orchid);
  border-radius: 0;
  z-index: 0;
}

.img-frame.corner-black::before { background: var(--black); }
.img-frame.corner-gold::before { background: var(--gold); }

.img-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(11, 10, 14, 0.2);
  display: block;
}

/* Austin section: headline/sub above, two large full-width framed photos below */
.austin-header {
  max-width: 680px;
  margin-bottom: 48px;
}

.austin-header h2 {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
}

.austin-header .sub {
  margin-top: 32px;
  font-family: var(--font-subtext);
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.austin-cluster-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.austin-cluster-full .img-frame img { aspect-ratio: 4 / 3; }

/* The manifesto section above stacks its own bottom padding on top of the
   scroll cue's reserved space (still occupying layout room once faded, by
   design, so the page doesn't jump mid-scroll) on top of this section's own
   top padding — scoped override so only this instance tightens up, not
   every .section on the site. */
.austin-section {
  padding-top: 0;
}

/* Full-width dark banner: pure visual separator between the Austin photos
   and the industry cards below, reusing the hero's on-dark button styling. */
.section-cta-band {
  background: var(--ink);
  padding: 72px 0;
  text-align: center;
}

.section-cta-band h2 {
  color: var(--bg);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 32px;
}

.section-cta-band .hero-ctas {
  justify-content: center;
  margin: 0;
}

/* ---------- Manifesto / Why Us ---------- */
.manifesto-lead {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  max-width: 14ch;
}

.manifesto-body {
  margin-top: 28px;
  max-width: 58ch;
  font-family: var(--font-subtext);
  font-size: 24px;
}

.manifesto-body p { margin-bottom: 1.1em; }

/* ---------- Industry cards: full-width horizontal cards, sharp corners ---------- */
.industry-list {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.industry-card {
  position: relative;
}

.industry-card::before {
  content: "";
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 64px;
  height: 64px;
  background: var(--orchid);
  border-radius: 0;
  z-index: 0;
}

.industry-card:nth-child(even)::before {
  background: var(--black);
}

.industry-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(11, 10, 14, 0.14);
}

.industry-card-inner.reverse .industry-card-media { order: 2; }
.industry-card-inner.reverse .industry-card-body { order: 1; }

.industry-card-media {
  overflow: hidden;
}

.industry-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.industry-card-body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.industry-card-body h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

.role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.role-list li {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 14px;
  white-space: nowrap;
}

.industry-card-body .desc {
  margin-top: 24px;
  font-family: var(--font-subtext);
  color: var(--muted);
  font-size: 0.9em;
}

/* ---------- Beats (3-claim prose stacks) ---------- */
.beat {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
}

/* No bookend line closing out the block — just the dividers between items */
.beat:last-child {
  border-bottom: none;
}

.beat-num {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  color: var(--lilac);
}

.beat p { max-width: 62ch; }

.beat strong { font-weight: 600; }

/* ---------- Page CTA ---------- */
.page-cta {
  margin-top: 44px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 14px;
  text-align: left;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.footer-logo img {
  height: 68px;
  width: auto;
  object-fit: contain;
}

/* Icon stays in its natural brand colors; wordmark stays solid black — the
   footer always sits on the light background, so no on-dark toggle needed. */
.footer-logo .footer-logo-icon {
  filter: none;
}

.footer-logo .footer-logo-word {
  filter: brightness(0);
}

.footer-tagline {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  margin: 0;
}

.footer-col-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 8px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
}

.footer-links a:hover { color: var(--orchid); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.footer-bottom a:hover { color: var(--orchid); }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-linkedin img {
  height: 18px;
  width: auto;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Contact form ---------- */
.contact-form {
  max-width: 640px;
  margin-top: 40px;
}

.field {
  margin-bottom: 32px;
}

.field label {
  display: block;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-body);
  font-size: 21px;
  color: var(--ink);
  padding: 12px 2px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--orchid);
}

.field textarea { min-height: 120px; }

.file-field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 10px 2px;
}

.file-field input[type="file"] { display: none; }

.file-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  padding-bottom: 2px;
}

.file-label:hover { color: var(--orchid); border-color: var(--orchid); }

.file-name {
  font-size: 18px;
  color: var(--muted);
}

.form-success {
  display: none;
  margin-top: 56px;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}

.form-success.show { display: block; }
.contact-form.hide { display: none; }

.form-error {
  display: none;
  margin-top: 24px;
  font-family: var(--font-subtext);
  font-size: 17px;
  color: #9a3b3b;
  max-width: 46ch;
}

.form-error.show { display: block; }

/* Spam honeypot — real visitors never see or fill this in. */
.bot-field-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body { font-size: 19px; }

  .blur-wbr { display: inline; }

  .logo-mark img { height: 52px; }

  .site-header { padding: 18px clamp(16px, 5vw, 56px); }

  .header-actions { gap: 10px; }

  .header-ctas { gap: 8px; }

  .cta-full { display: none; }
  .cta-short { display: inline; }

  .nav-cta {
    font-size: 13px;
    padding: 9px 14px;
  }

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

  .row.reverse .row-media,
  .row.reverse .row-text {
    order: initial;
  }

  .austin-cluster-full {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .industry-card-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .industry-card-inner.reverse .industry-card-media,
  .industry-card-inner.reverse .industry-card-body {
    order: initial;
  }

  .industry-card-media { aspect-ratio: 4 / 3; }

  .page-header { padding: 180px 0 32px; }

  .hero-ctas {
    gap: 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .btn { width: 100%; }

  .beat { grid-template-columns: 56px 1fr; }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}