/* =========================================================
   GUREWICZ GROUP — v2
   ========================================================= */

/* --- Reset & root ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  overflow-x: clip;  /* contain horizontal escapes */
}

body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-primary);
  background: var(--surface-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

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

button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

ul { list-style: none; }

::selection {
  background: var(--ink-primary);
  color: var(--surface-cream);
}

/* --- Tokens ---------------------------------------------- */
:root {
  /* Surfaces */
  --surface-cream: #F5F1E8;
  --surface-cream-deep: #EFEAE0;
  --surface-paper: #FBF9F4;
  --surface-warm-white: #FAF8F2;

  /* Sage */
  --sage-50: #EAEDE5;
  --sage-100: #DAE0D5;
  --sage-200: #C5CCC1;
  --sage-300: #AFB8A9;
  --sage-500: #9DA89C;
  --sage-700: #6E7A6E;
  --sage-900: #404A42;

  /* Ink */
  --ink-primary: #1A1A1A;
  --ink-secondary: #444444;
  --ink-tertiary: #888780;

  /* Signal */
  --signal-marina: #1F5A60;
  --signal-storm: #2C3D4F;
  --signal-storm-deep: #1F2D3C;
  --signal-hibiscus: #B72E2A;

  /* Type */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Spacing */
  --s-4: 0.25rem; --s-8: 0.5rem; --s-12: 0.75rem; --s-16: 1rem;
  --s-20: 1.25rem; --s-24: 1.5rem; --s-32: 2rem; --s-40: 2.5rem;
  --s-48: 3rem; --s-64: 4rem; --s-80: 5rem; --s-96: 6rem;
  --s-128: 8rem; --s-160: 10rem;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;

  /* Container */
  --container-max: 1440px;
  --container-pad: 24px;
}

@media (min-width: 768px) { :root { --container-pad: 40px; } }
@media (min-width: 1024px) { :root { --container-pad: 64px; } }
@media (min-width: 1440px) { :root { --container-pad: 80px; } }

/* --- Container ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* --- Typography primitives ------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  line-height: 1.5;
}

.eyebrow--cream { color: var(--sage-100); }

/* =========================================================
   FLOATING NAV — frosted glass pill
   ========================================================= */
.nav {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 100;
  pointer-events: none;
}

@media (min-width: 768px) {
  .nav { top: 24px; left: 32px; right: 32px; }
}

.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 12px 12px 24px;
  background: rgba(20, 22, 24, 0.42);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-pill);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  color: #FAF8F2;
  white-space: nowrap;
  height: 100%;
}

.nav__logo {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity 200ms var(--ease-out);
}

@media (min-width: 1024px) {
  .nav__logo { height: 32px; }
}

.nav__brand:hover .nav__logo { opacity: 0.85; }

.nav__menu {
  display: none;
}

@media (min-width: 1024px) {
  .nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
  }
  .nav__list a {
    display: inline-flex;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(250, 248, 242, 0.78);
    border-radius: var(--r-pill);
    transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
  }
  .nav__list a:hover {
    color: #FAF8F2;
    background: rgba(255, 255, 255, 0.06);
  }
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  background: #FAF8F2;
  color: #1A1A1A !important;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: var(--r-pill);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}

.nav__cta svg { transition: transform 200ms var(--ease-out); }
.nav__cta:hover svg { transform: translateX(2px); }
.nav__cta:hover { background: #fff; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: -4px;
  gap: 5px;
  align-items: center;
}

@media (min-width: 1024px) {
  .nav__toggle { display: none; }
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #FAF8F2;
  border-radius: 1px;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}

.nav__toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Mobile menu ----------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 22, 24, 0.85);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px var(--container-pad) 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out), visibility 400ms;
}

.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: #FAF8F2;
  letter-spacing: -0.015em;
}

.mobile-menu__nav a em {
  font-style: italic;
  font-weight: 400;
}

.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.mobile-menu__contact a { color: rgba(250,248,242,0.78); }

/* =========================================================
   HERO — cinematic with bleed wordmark
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #0A0A0A;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.08);
  animation: heroKenBurns 18s ease-out forwards;
}

@keyframes heroKenBurns {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}

.hero__media-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.18) 25%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}

.hero__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 120px var(--container-pad) 0;
  max-width: var(--container-max);
  margin: 0 auto;
  z-index: 3;
}

/* Localized radial halo behind the headline — protects type contrast against
   bright regions of the photo (sunlit windows, sky) without darkening the
   whole image. Anchored to where the headline lives, fades out toward edges.
   Sits between the photo tint (z:1) and the frame content (z:3). */
.hero__frame::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  width: 70%;
  height: 380px;
  background: radial-gradient(
    ellipse 70% 60% at 30% 50%,
    rgba(10, 14, 18, 0.55) 0%,
    rgba(10, 14, 18, 0.30) 40%,
    rgba(10, 14, 18, 0.0) 75%
  );
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 768px) {
  .hero__frame::before {
    top: 120px;
    width: 60%;
    height: 440px;
  }
}

@media (min-width: 768px) {
  .hero__frame { padding-top: 160px; padding-left: max(48px, var(--container-pad)); padding-right: max(48px, var(--container-pad)); }
}

.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,248,242,0.85);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp 800ms 400ms var(--ease-out) forwards;
}

.hero__meta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B72E2A;
  box-shadow: 0 0 0 3px rgba(183, 46, 42, 0.25);
  animation: heroDotPulse 2s ease-in-out infinite;
}

@keyframes heroDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(183, 46, 42, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(183, 46, 42, 0.0); }
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: #FAF8F2;
  max-width: 18ch;
  /* Layered shadow for legibility on bright photo regions. The tight inner shadow
     anchors the type against the immediate background; the wider outer shadow
     extends the halo atmospherically. Kept low-opacity so it reads as luminance,
     not as "outlined text." */
  text-shadow:
    0 1px 2px rgba(10, 14, 18, 0.45),
    0 4px 24px rgba(10, 14, 18, 0.35);
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > * {
  display: inline-block;
}

.hero__line {
  opacity: 0;
  transform: translateY(80%);
  animation: heroLineReveal 1100ms var(--ease-out) forwards;
}

.hero__line:nth-child(1) { animation-delay: 600ms; }
.hero__line:nth-child(2) { animation-delay: 780ms; }

@keyframes heroLineReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero__headline em {
  font-style: italic;
  font-weight: 400;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Floating search pill -------------------------------- */
.hero__search {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 8px;
  width: min(640px, calc(100vw - 32px));
  background: rgba(20, 22, 24, 0.42);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 36px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  transform: translate(-50%, 20px);
  animation: heroSearchIn 1000ms 1200ms var(--ease-out) forwards;
}

@keyframes heroSearchIn { to { opacity: 1; transform: translate(-50%, 0); } }

.hero__search-input {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(250,248,242,0.62);
  text-align: left;
  border-radius: var(--r-pill);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}

.hero__search-input:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(250,248,242,0.78);
}

.hero__search-input span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__search-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: #FAF8F2;
  color: #1A1A1A !important;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 200ms var(--ease-out);
}

.hero__search-cta svg { transition: transform 200ms var(--ease-out); }
.hero__search-cta:hover svg { transform: translateX(2px); }

@media (max-width: 640px) {
  .hero__search {
    bottom: 22%;
    width: min(calc(100vw - 32px), 480px);
    padding: 4px 4px 4px 6px;
    gap: 0;
  }
  .hero__search-input {
    padding: 10px 8px;
    font-size: 0.8125rem;
    gap: 8px;
  }
  .hero__search-input span {
    font-size: 0.8125rem;
  }
  .hero__search-cta {
    padding: 10px 14px;
    font-size: 0.75rem;
  }
}

/* --- Bottom meta corners --------------------------------- */
.hero__bottom-meta {
  position: absolute;
  bottom: 14%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  animation: heroBottomIn 900ms 1400ms var(--ease-out) forwards;
}

@media (min-width: 768px) {
  .hero__bottom-meta { bottom: 32px; }
}

@keyframes heroBottomIn {
  to { opacity: 1; }
}

.hero__bottom-meta--left {
  left: var(--container-pad);
  text-align: left;
}

.hero__bottom-meta--right {
  right: var(--container-pad);
  align-items: flex-end;
}

.hero__bottom-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,248,242,0.72);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 0 28px rgba(0,0,0,0.45);
}

.hero__bottom-value {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(250,248,242,1);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 0 28px rgba(0,0,0,0.45);
}

.hero__bottom-line {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(250,248,242,0.45);
  margin-top: 6px;
  animation: heroLineSweep 2.5s 2s ease-in-out infinite;
}

@keyframes heroLineSweep {
  0%, 100% { transform: scaleX(1); transform-origin: right; }
  50%      { transform: scaleX(0.4); }
}

@media (max-width: 768px) {
  .hero__bottom-meta--right { display: none; }
  .hero__bottom-meta--left .hero__bottom-value { font-size: 0.75rem; }
}

/* --- The signature: massive italic wordmark bleed -------- */
.hero__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4%;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
  line-height: 0;
}

@media (min-width: 768px) {
  .hero__wordmark { bottom: -12%; }
}

.hero__wordmark span {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  /* Scale entirely off viewport width — "Gurewicz" italic Cormorant at this letter-spacing
     has a width-to-em ratio of ~3.82, so font-size = 28.8vw makes the word ~110% of viewport
     (deliberate ~5% bleed each side at every breakpoint). No clamp floor — that was the
     bug at mobile widths, forcing the word to render 200px tall on a 375px screen and
     overflow by 30%. */
  font-size: 28.8vw;
  letter-spacing: -0.04em;
  color: rgba(250, 248, 242, 0.92);
  text-shadow: 0 6px 40px rgba(0,0,0,0.25);
  line-height: 0.85;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40px);
  animation: heroWordmarkRise 1400ms 1100ms var(--ease-out) forwards;
}

/* At wider viewports the word would grow too large — cap at 440px so it stops
   scaling past the design intent. Past ~1528px the word is 440px tall and the
   bleed reads as deliberate confidence rather than "uncontained type." */
@media (min-width: 1528px) {
  .hero__wordmark span { font-size: 440px; }
}

@keyframes heroWordmarkRise {
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   TICKER — recent closes marquee
   ========================================================= */
.ticker {
  background: #0F1418;
  color: rgba(250,248,242,0.85);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ticker__track {
  display: flex;
  width: max-content;
  padding: 14px 0;
  animation: tickerScroll 60s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation-duration: 240s; }
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker__row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ticker__pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B72E2A;
  box-shadow: 0 0 0 3px rgba(183,46,42,0.25);
  animation: tickerDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes tickerDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(183,46,42,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(183,46,42,0); }
}

.ticker__label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(250,248,242,0.55);
  font-size: 0.6875rem;
}

.ticker__sep {
  color: rgba(250,248,242,0.25);
}

.ticker__item strong {
  font-weight: 500;
  color: #FAF8F2;
  margin-right: 6px;
  letter-spacing: 0;
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
  background: var(--surface-cream-deep);
  padding: 72px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink-primary);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.stat__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.stat__currency {
  font-size: 0.6em;
  vertical-align: 0.2em;
  color: var(--ink-tertiary);
  margin-right: 2px;
}

.stat__unit {
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--ink-secondary);
}

.stat__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-primary);
  margin-top: 8px;
}

.stat__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* =========================================================
   SECTION BASE
   ========================================================= */
.section {
  padding: 96px 0;
  background: var(--surface-cream);
}

@media (min-width: 1024px) {
  .section { padding: 128px 0; }
}

.section--paper {
  background: var(--surface-paper);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
  max-width: 720px;
}

.section__head--row {
  flex-direction: column;
  max-width: none;
  gap: 32px;
}

@media (min-width: 1024px) {
  .section__head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
  }
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--ink-primary);
  margin-top: 4px;
}

.section__title em {
  font-style: italic;
  font-weight: 400;
}

.section__sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 56ch;
}

.section__sub--inline {
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 480px;
}

.section__foot {
  margin-top: 56px;
  text-align: center;
}

/* =========================================================
   LISTINGS
   ========================================================= */
.listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .listings { grid-template-columns: 1fr 1fr; gap: 32px 32px; }
  .listing--hero { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .listings { gap: 56px 40px; }
}

.listing {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
}

@media (min-width: 1024px) {
  .listing--hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: end;
  }
  .listing--hero .listing__body { padding-bottom: 24px; }
}

.listing__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-200);
}

.listing--hero .listing__media { aspect-ratio: 16 / 10; }

.listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.listing:hover .listing__media img { transform: scale(1.04); }

.listing__price-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
}

.listing__overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(20, 22, 24, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FAF8F2;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.listing:hover .listing__overlay {
  opacity: 1;
  transform: translateY(0);
}

.listing__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listing__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.listing__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
}

.listing__status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-700);
}

.listing__sep { color: var(--sage-200); }

.listing__address {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-primary);
}

.listing__specs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
}

.listing__story {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-top: 6px;
  max-width: 44ch;
}

/* =========================================================
   NEIGHBORHOODS — horizontal scroll gallery
   ========================================================= */
.neighborhoods .section__head--row { margin-bottom: 56px; }

.hgallery {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--container-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.hgallery::-webkit-scrollbar { display: none; }

.hgallery__track {
  display: flex;
  gap: 24px;
  padding: 0 var(--container-pad);
  width: max-content;
}

.hcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  width: min(380px, 78vw);
  gap: 20px;
  color: inherit;
  transition: transform 400ms var(--ease-out);
}

@media (min-width: 768px) {
  .hcard { width: 420px; }
}

@media (min-width: 1024px) {
  .hcard { width: 460px; }
}

.hcard:hover { transform: translateY(-4px); }

.hcard__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-200);
}

.hcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.hcard:hover .hcard__media img { transform: scale(1.04); }

.hcard__media--type {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--sage-300), var(--sage-500));
  position: relative;
}

.hcard__media--type::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.10), transparent 50%);
}

.hcard__type-label {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--surface-warm-white);
  text-align: center;
  line-height: 1;
  padding: 0 24px;
}

.hcard__type-label em {
  font-style: italic;
  font-weight: 400;
}

.hcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hcard__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}

.hcard__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-primary);
  line-height: 1.1;
}

.hcard__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-top: 4px;
}

.hcard__cta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-primary);
  margin-top: 8px;
  border-bottom: 1px solid var(--sage-300);
  padding-bottom: 2px;
  width: max-content;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.hcard:hover .hcard__cta {
  color: var(--signal-marina);
  border-color: var(--signal-marina);
}

.hgallery__pagination {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  max-width: 480px;
}

.hgallery__progress {
  flex: 1;
  height: 2px;
  background: var(--sage-200);
  border-radius: 2px;
  overflow: hidden;
}

.hgallery__progress-bar {
  height: 100%;
  width: 20%;
  background: var(--ink-primary);
  border-radius: 2px;
  transition: width 200ms var(--ease-out);
}

.hgallery__counter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 96px;
    align-items: center;
  }
}

.about__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-200);
}

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

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

.about__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--ink-primary);
}

.about__title em { font-style: italic; font-weight: 400; }

.about__lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.about__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.about__paragraphs p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.about__credentials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--sage-200);
}

.about__cred-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
}

@media (min-width: 640px) { .about__cred-row { grid-template-columns: 130px 1fr; } }

.about__credentials dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.about__credentials dd {
  font-size: 0.9375rem;
  color: var(--ink-primary);
}

/* =========================================================
   METHOD — timeline + phase lists
   ========================================================= */
.method__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.method__head .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}

.method__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--ink-primary);
}

.method__title em { font-style: italic; font-weight: 400; }

.method__sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-top: 20px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* Phases */
.phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 768px) {
  .phases {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

@media (min-width: 1024px) {
  .phases { gap: 80px; }
}

.phase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--sage-200);
}

.phase__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-tertiary);
}

.phase__name {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-primary);
}

.phase__sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin: 4px 0 16px;
}

.phase__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--sage-200);
}

.phase__list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  position: relative;
}

.phase__list li::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--sage-500);
  border-radius: 50%;
}

/* =========================================================
   THE BRIEF
   ========================================================= */
.briefs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .briefs { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.brief-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.brief-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-200);
}

.brief-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.brief-card:hover .brief-card__media img { transform: scale(1.04); }

.brief-card__media--type {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--sage-300), var(--sage-500));
}

.brief-card__type-label {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--surface-warm-white);
  letter-spacing: -0.015em;
}

.brief-card__type-label em { font-style: italic; }

.brief-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  background: rgba(250,248,242,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-primary);
  border-radius: var(--r-pill);
}

.brief-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.brief-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink-primary);
}

.brief-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  flex: 1;
}

.brief-card__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-top: 8px;
}

/* =========================================================
   INQUIRE
   ========================================================= */
.inquire {
  background: var(--signal-storm);
  color: var(--surface-warm-white);
  padding: 96px 0;
}

@media (min-width: 1024px) { .inquire { padding: 128px 0; } }

.inquire__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 768px) {
  .inquire__grid {
    grid-template-columns: 1fr 1.6fr;
    gap: 64px;
  }
}

@media (min-width: 1280px) {
  .inquire__grid { grid-template-columns: 1fr 1.6fr; gap: 96px; }
}

.inquire__portrait { max-width: 360px; width: 100%; }

.portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sage-500);
}

.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

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

.inquire__monogram {
  margin-bottom: 4px;
  display: inline-block;
}

.inquire__monogram img {
  height: 56px;
  width: auto;
  display: block;
  opacity: 0.92;
}

.inquire__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--surface-warm-white);
  margin-bottom: 8px;
}

.inquire__title em { font-style: italic; font-weight: 400; }

.inquire__sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sage-100);
  max-width: 36rem;
  margin-bottom: 16px;
}

.inquire__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  margin-bottom: 24px;
  border-top: 1px solid rgba(157, 168, 156, 0.25);
}

.inquire__contact-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: baseline;
}

@media (min-width: 640px) { .inquire__contact-row { grid-template-columns: 100px 1fr; } }

.inquire__contact dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-200);
}

.inquire__contact dd {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--surface-warm-white);
}

.inquire__contact dd a {
  color: var(--surface-warm-white);
  border-bottom: 1px solid rgba(245,241,232,0.4);
  padding-bottom: 1px;
  transition: border-color 150ms var(--ease-out);
}

.inquire__contact dd a:hover { border-color: var(--surface-warm-white); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 14px 24px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: var(--r-pill);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}

.btn svg { transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }

.btn--cream {
  background: var(--surface-warm-white);
  color: var(--signal-storm);
}

.btn--cream:hover { background: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-primary);
  border-bottom: 1px solid var(--sage-300);
  padding-bottom: 12px;
  transition: border-color 200ms var(--ease-out);
}

.link-arrow svg { transition: transform 250ms var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { border-color: var(--ink-primary); }

/* =========================================================
   FOOTER with bleed wordmark
   ========================================================= */
.footer {
  position: relative;
  background: var(--signal-storm-deep);
  color: var(--sage-100);
  padding: 80px 0 0;
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 64px;
  }
}

.footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: 12px;
  display: block;
}

.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--sage-100);
  margin-bottom: 12px;
}

.footer__credentials {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--sage-200);
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-200);
  margin-bottom: 20px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col li {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sage-100);
}

.footer__col a {
  transition: color 200ms var(--ease-out);
}

.footer__col a:hover { color: var(--surface-warm-white); }

/* The massive GG monogram ghost mark */
.footer__monogram {
  position: absolute;
  right: -2vw;
  bottom: -3vw;
  z-index: 0;
  pointer-events: none;
  opacity: 0.08;
  width: clamp(280px, 38vw, 560px);
  height: auto;
}

@media (max-width: 767px) {
  .footer__monogram {
    right: -8vw;
    bottom: -4vw;
    opacity: 0.06;
    width: 75vw;
  }
}

.footer__monogram img {
  width: 100%;
  height: auto;
  display: block;
}

.footer__top,
.footer__bottom {
  position: relative;
  z-index: 1;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--sage-200);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 32px;
  }
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.footer__credit span {
  opacity: 0.55;
}

.footer__credit a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(245, 241, 232, 0.85);
  text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) {
  .footer__credit a:hover {
    color: #FAF8F2;
  }
}

.footer__credit a svg {
  transform: translateY(-1px);
  opacity: 0.7;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}

@media (hover: hover) {
  .footer__credit a:hover svg {
    transform: translateY(-2px) translateX(1px);
    opacity: 1;
  }
}

/* =========================================================
   INTERACTIVE STATES — additions
   Native cursor, no custom cursor. The interaction signal lives
   in how elements respond. The site already has hover transforms
   on .listing, .hcard, .brief-card (image scale, vertical lift) —
   this block adds the things that were missing: animated link
   underlines, decisive press states, real focus rings.
   ========================================================= */

/* Decisive press states for cards (existing hover already lifts; this adds
   the "press settles" feel — depth coming back toward the surface when
   the user commits). */
.listing,
.hcard,
.brief-card {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.listing:active,
.hcard:active,
.brief-card:active {
  transform: translateY(-1px);
  transition-duration: 120ms;
}

/* CTA press state — subtle settle when clicked, matches the 80ms press window
   that feels "responsive" without being mushy. */
.nav__cta:active,
.btn--cream:active {
  transform: translateY(1px);
  transition: transform 80ms ease;
}

/* Inline text links — animated underline (slide-in from left), not a default
   underline on hover. Avoids the "text shifts by 1px when an underline
   appears" jank. */
.link-arrow,
.nav__list a {
  position: relative;
  text-decoration: none;
}

.link-arrow::after,
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .link-arrow:hover::after,
  .nav__list a:hover::after {
    transform: scaleX(1);
  }
}

/* Focus rings — box-shadow not outline (better border-radius support on
   older Safari). Cream inner, ink outer for legibility on both surfaces. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(250, 248, 242, 0.95),
    0 0 0 4px rgba(20, 22, 24, 0.6);
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .listing,
  .hcard,
  .brief-card,
  .nav__cta,
  .btn--cream {
    transition: none;
  }
  .link-arrow::after,
  .nav__list a::after {
    transition: none;
  }
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__line,
  .hero__meta,
  .hero__search,
  .hero__bottom-meta,
  .hero__wordmark span,
  .hero__media img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================
   FOCUS STATES
   ========================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--signal-marina);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

.nav a:focus-visible,
.nav button:focus-visible,
.hero__search-input:focus-visible,
.hero__search-cta:focus-visible {
  outline-color: rgba(250, 248, 242, 0.8);
}