/* ============================================================
   RHY LAKE & PARTNERS — Landing Page
   Light, technical-blueprint aesthetic (paper cream + ink + brand green),
   modeled on the reference site's real look. Section/surface rules keep
   using --black (= page surface) and text rules keep using --white
   (= ink/foreground) — only the token *values* flipped from the dark
   theme, so the whole page recolors from this block alone.
   ============================================================ */

:root {
  --black: #f4f1e9;
  --panel: #eae5d8;
  --panel-2: #e2ddce;
  --white: #17181b;
  --ink: #17181b;
  --gray-300: rgba(23, 24, 27, 0.72);
  --gray-500: rgba(23, 24, 27, 0.54);
  --gray-700: rgba(23, 24, 27, 0.34);
  --line: rgba(23, 24, 27, 0.15);
  --line-soft: rgba(23, 24, 27, 0.08);

  --green: #2e9e4e;
  --green-dim: rgba(46, 158, 78, 0.12);
  --green-glow: rgba(46, 158, 78, 0.22);
  --on-accent: #ffffff;

  --font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --container: none;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --roll-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.cursor-enabled,
body.cursor-enabled a,
body.cursor-enabled button,
body.cursor-enabled input,
body.cursor-enabled textarea {
  cursor: none;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--green);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 0.3s ease, width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.cursor-dot.is-active { opacity: 1; }
.cursor-dot.is-hover {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  background: transparent;
  border: 1px solid var(--green);
}
.cursor-dot.is-down { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before { content: "["; color: var(--gray-700); }
.eyebrow::after { content: "]"; color: var(--gray-700); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.05;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

/* Stacked-label roll: two copies of the text swap vertically on hover,
   same mechanic as the reference site's fill buttons. */
.btn-roll { overflow: hidden; }
.roll-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  height: 1.1em;
}
.roll-inner span {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--roll-ease);
  white-space: nowrap;
}
.roll-inner span:last-child { transform: translateY(100%); }
.btn-roll:hover .roll-inner span:first-child { transform: translateY(-100%); }
.btn-roll:hover .roll-inner span:last-child { transform: translateY(0); }
.btn-roll .btn-arrow { transition: transform 0.4s var(--roll-ease); width: 13px; height: 13px; flex: none; }
.btn-roll:hover .btn-arrow { transform: translate(3px, -3px); }

.btn-primary {
  background: var(--white);
  color: var(--black);
}
.btn-primary:hover { background: var(--green); color: var(--on-accent); transform: translateY(-2px); }

.btn-ghost-light {
  border-color: var(--line);
  color: var(--white);
  background: transparent;
}
.btn-ghost-light:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* Text link with animated arrow — used for secondary CTAs */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.link-arrow svg { width: 13px; height: 13px; transition: transform 0.3s ease; }
.link-arrow:hover { color: var(--green); border-color: var(--green); gap: 13px; }

/* ---------------- Header ---------------- */
/* Grid-cell nav with divider lines and invert-fill hover, modeled on the
   reference site's bordered-cell header (bearplus/heronaiapp.com). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0 0;
  background: rgba(244, 241, 233, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: padding 0.4s ease, background 0.4s ease;
}

.site-header.is-scrolled {
  padding: 8px 0 0;
  background: rgba(244, 241, 233, 0.92);
}

.header-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 78px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: height 0.4s ease;
}
.is-scrolled .header-bar { height: 64px; }

.brand {
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.brand img {
  height: 46px;
  width: auto;
  transition: height 0.4s ease;
}
.is-scrolled .brand img { height: 38px; }

.nav-cells { display: flex; align-items: stretch; margin-left: auto; }

.nav-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-300);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s ease;
}

.nav-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: translateY(101%);
  transition: transform 0.45s var(--roll-ease);
  z-index: -1;
}
.nav-cell:hover::before { transform: translateY(0); }
.nav-cell:hover { color: var(--on-accent); }

.cell-roll {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  height: 1.15em;
}
.cell-roll span {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--roll-ease);
  white-space: nowrap;
}
.cell-roll span:last-child { transform: translateY(100%); }
.nav-cell:hover .cell-roll span:first-child { transform: translateY(-100%); }
.nav-cell:hover .cell-roll span:last-child { transform: translateY(0); }

.nav-cell-cta { color: var(--white); font-weight: 600; }

.cell-arrow {
  position: relative;
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform 0.4s var(--roll-ease);
}
.nav-cell-cta:hover .cell-arrow { transform: translate(3px, -3px); }

.nav-toggle {
  display: none;
  position: relative;
  flex: none;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  width: 66px;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform 0.35s var(--roll-ease), opacity 0.25s ease, top 0.35s var(--roll-ease);
}
.nav-toggle span:nth-child(1) { top: calc(50% - 6px); }
.nav-toggle span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span:nth-child(3) { top: calc(50% + 6px); }

/* Morph into an X when the drawer is open, driven off the aria-expanded
   state the JS already sets — no extra class/JS needed. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--black);
  padding: 100px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  z-index: 99;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
/* This generic link color would otherwise win (by specificity) over the
   CTA button's own color rule and make its text unreadable against its
   dark fill — pin it explicitly. */
.mobile-nav a.btn-primary { color: var(--on-accent); }
.mobile-nav a {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-300);
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:hover { color: var(--green); }
.mobile-nav .btn { margin-top: 26px; }
@media (max-width: 780px) { .mobile-nav { display: flex; } }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 170px 0 0;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  top: -10%;
  right: -6%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, var(--green-dim), transparent 68%);
  z-index: -2;
  pointer-events: none;
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 90%);
}

.hero-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.4s ease-out;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 90px;
}

.hero .eyebrow { margin-bottom: 30px; }

.hero h1 {
  font-size: clamp(40px, 5.6vw, 80px);
  text-transform: uppercase;
  color: var(--white);
}
.hero h1 em { font-style: normal; color: var(--green); }

.hero-desc {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-500);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--line);
  padding-left: 40px;
  justify-self: end;
}

.hero-stat {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hero-stat:first-child { padding-top: 0; }
.hero-stat:last-child { border-bottom: none; padding-bottom: 0; }

.hero-stat .num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hero-stat .num span { color: var(--green); }
.hero-stat .label {
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--gray-500);
  max-width: 260px;
}

.hero-bottom-row {
  padding-top: 26px;
  padding-bottom: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-tags {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding: 0 0px 0 20px;
  border-left: 1px solid var(--line);
}
.hero-tag:first-child { padding-left: 0; border-left: 0; }

.hero-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.hero-scroll .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------------- Value strip (numbered, no cards) ---------------- */
.value-strip { background: var(--black); padding: 110px 0; border-top: 1px solid var(--line); }

.value-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 64px;
}
.value-head h2 { font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; max-width: 620px; }
.value-head p { max-width: 320px; color: var(--gray-500); font-size: 14.5px; line-height: 1.75; }

.value-list { display: flex; flex-direction: column; }

.value-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.value-row:last-child { border-bottom: 1px solid var(--line); }

.value-num {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transition: -webkit-text-stroke-color 0.4s ease;
}
.value-row:hover .value-num { -webkit-text-stroke-color: var(--green); }

.value-row h3 { font-size: 21px; text-transform: uppercase; max-width: 380px; }
.value-row p { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--gray-500); max-width: 520px; }

/* ---------------- Section shared ---------------- */
.section { padding: 130px 0; border-top: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: 70px; }
.section-head h2 { margin-top: 20px; font-size: clamp(30px, 3.8vw, 50px); text-transform: uppercase; }
.section-head p { margin-top: 22px; font-size: 16px; line-height: 1.8; color: var(--gray-500); }

/* ---------------- Services (accordion) ---------------- */
.services { background: var(--black); }
.service-list { display: flex; flex-direction: column; }

.service-row {
  border-top: 1px solid var(--line);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }

.service-header {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  gap: 40px;
  align-items: center;
  width: 100%;
  padding: 40px 0;
  cursor: pointer;
}

.service-index {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transition: -webkit-text-stroke-color 0.4s ease, color 0.4s ease;
}
.service-row:hover .service-index,
.service-row[data-open="true"] .service-index { -webkit-text-stroke-color: var(--green); }

.service-heading { margin: 0; font-weight: inherit; }
.service-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 480px;
}
.service-main .service-sub { display: block; margin-top: 16px; font-size: 14.5px; color: var(--gray-500); line-height: 1.75; max-width: 460px; }

.service-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  justify-self: end;
}
.service-toggle::before,
.service-toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--white);
  transition: transform 0.4s var(--roll-ease), background 0.3s ease;
}
.service-toggle::before { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.service-toggle::after { width: 1px; height: 100%; transform: translate(-50%, -50%); }
.service-row[data-open="true"] .service-toggle::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.service-row:hover .service-toggle::before,
.service-row:hover .service-toggle::after,
.service-row[data-open="true"] .service-toggle::before { background: var(--green); }

.service-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--roll-ease);
}
.service-row[data-open="true"] .service-panel { grid-template-rows: 1fr; }

.service-panel-inner {
  overflow: hidden;
  padding-left: 130px;
}
.service-row[data-open="true"] .service-panel-inner { padding-bottom: 40px; }

.service-points { display: flex; flex-direction: column; gap: 20px; }
.service-point {
  padding-left: 20px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gray-300);
  max-width: 640px;
}
.service-point::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--green); }
.service-point strong { display: block; margin-bottom: 6px; color: var(--white); font-weight: 600; }
.service-point span { display: block; }

/* ---------------- Team ---------------- */
.team { background: var(--black); }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }

/* Equal padding on every card (not just the outer edges) keeps each
   column the same content-width, so aspect-ratio gives every photo the
   same height — asymmetric padding here previously made column 1 wider
   than 2/3, which made its photo taller. */
.team-card {
  border-right: 1px solid var(--line);
  padding: 0 34px;
}
.team-card:last-child { border-right: none; }

.team-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gray-700);
  padding: 28px 0 24px;
}

.team-photo {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--panel);
}

.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.team-card:hover .team-photo img { filter: grayscale(0.15) contrast(1.05) brightness(0.98); transform: scale(1.04); }

.team-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.team-card:hover .team-photo::after { transform: scaleX(1); }

.team-body { padding: 26px 0 40px; }
.team-body h3 { font-size: 19px; text-transform: uppercase; }
.team-body .team-title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.team-body p.bio { margin-top: 20px; font-size: 13.8px; line-height: 1.8; color: var(--gray-500); }

.team-tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.team-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-300);
  border: 1px solid var(--line);
  padding: 6px 12px;
}

/* ---------------- Contact ---------------- */
.contact { background: var(--black); position: relative; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  top: -20%; right: -8%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, var(--green-dim), transparent 65%);
  pointer-events: none;
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; }

.contact-head h2 { margin-top: 20px; font-size: clamp(30px, 4vw, 48px); text-transform: uppercase; }
.contact-head p { margin-top: 22px; font-size: 16px; line-height: 1.8; color: var(--gray-500); max-width: 440px; }

.contact-info-list { margin-top: 48px; display: flex; flex-direction: column; }

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.contact-info-item:last-child { border-bottom: 1px solid var(--line); }

.contact-info-icon {
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icon svg { width: 17px; height: 17px; stroke: var(--green); }

.contact-info-text .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); }
.contact-info-text .value { margin-top: 4px; font-size: 15.5px; font-weight: 500; color: var(--white); }

.social-row { margin-top: 40px; display: flex; gap: 12px; }

.social-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.social-btn svg { width: 17px; height: 17px; fill: var(--white); color: var(--white); }
.social-btn:hover { background: var(--green); border-color: var(--green); transform: translateY(-3px); }
.social-btn:hover svg { fill: var(--on-accent); color: var(--on-accent); }

/* Contact form — flat, no card container */
.contact-form-wrap h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }
.contact-form-wrap .form-sub { font-size: 13.5px; color: var(--gray-500); margin-bottom: 34px; }

.form-row { display: flex; flex-direction: column; gap: 30px; }

.field { border-bottom: 1px solid var(--line); padding-bottom: 12px; transition: border-color 0.3s ease; }
.field:focus-within { border-color: var(--green); }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-700);
  margin-bottom: 10px;
}

.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--white);
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-700); }
.field input:focus, .field textarea:focus { outline: none; }
.field textarea { resize: vertical; min-height: 70px; }

.contact-form-wrap .btn { margin-top: 36px; width: 100%; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--black); color: var(--gray-500); padding: 44px 0; border-top: 1px solid var(--line); }

.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-inner img { height: 32px; opacity: 0.9; }

.footer-links { display: flex; gap: 30px; }
.footer-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-links a:hover { color: var(--green); }

.footer-fine { font-size: 12px; letter-spacing: 0.02em; }

/* ---------------- Reveal animation ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 50px; }
  .hero-stats { border-left: none; padding-left: 0; flex-direction: row; gap: 40px; border-top: 1px solid var(--line); padding-top: 30px; }
  .hero-stat { border-bottom: none; padding: 0; flex: 1; }
  .value-head { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-card:nth-child(2) { border-right: none; }
  .service-header { grid-template-columns: 60px 1fr 30px; gap: 24px; }
  .service-panel-inner { padding-left: 84px; }
  .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .value-row{ gap: 0 ;}
  .value-row .value-num, .service-row .service-index{ -webkit-text-stroke-color: var(--green); }
}

@media (max-width: 780px) {
  .container { padding: 0 24px; }
  .header-bar { height: 66px; }
  .brand { padding: 0 18px; border-left: none; }
  .brand img { height: 36px; }

  /* Three stat blocks side-by-side don't fit a phone width — a flex row
     with min-width:auto items forces the whole single-column hero grid
     wider than the viewport, which silently clips (not scrolls, since
     the body hides horizontal overflow) everything in that column,
     heading included. Stacking removes the blowout at its source. */
  .hero-stats { flex-direction: column; gap: 0; border-top: none; padding-top: 0; width: 100%;}
  .hero-stat { border-bottom: 1px solid var(--line-soft); padding: 20px 0; flex: none; }
  .hero-stat:first-child { padding-top: 0; }
  .hero-stat:last-child { border-bottom: none; padding-bottom: 0; }

  .hero-bottom-row { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 20px; padding-bottom: 20px;}
  .hero-tags { flex-direction: column; gap: 12px; width: 100%; }
  .hero-tag { border-left: none; padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); width: 100%; }
  .hero-tag:last-child { border-bottom: none; padding-bottom: 0; }

  .nav-cells { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 118px 0 0; }
  .hero-inner { padding-bottom: 50px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { border-right: none !important; padding: 0 !important; border-bottom: 1px solid var(--line); padding-bottom: 40px !important; }
  .team-card:not(:first-child) { padding-top: 40px !important; }
  .section { padding: 90px 0; }
  .value-strip { padding: 80px 0; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .hero h1 { font-size: 32px; }
  .hero-desc { font-size: 15.5px; }
  .hero-cta-row .btn, .hero-cta-row .link-arrow { width: 100%; justify-content: center; }
  .hero-stat .num { font-size: 32px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.18em; }
}