/* ============================================
   NR Roberts Consulting — Global Stylesheet v2
   Brand palette: near-black / off-white / red accent
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Canvas */
  --bg: #0b0c0f;
  --bg-elevated: #14161c;
  --bg-subtle: #1a1d25;

  /* Ink */
  --ink: #f1ede3;
  --ink-muted: #a5a198;
  --ink-faint: #66635c;

  /* Brand accent — matches logo red */
  --accent: #d83e36;
  --accent-bright: #e84b42;
  --accent-dim: #8a2820;

  /* Navy — logo supporting color (used sparingly since bg is dark) */
  --navy: #5d6c8e;
  --navy-dim: #333e5a;

  /* Lines */
  --border: #23252d;
  --border-strong: #2e313b;

  /* Type */
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', -apple-system, sans-serif;

  /* Layout */
  --max: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144;
}

h1 { font-size: clamp(2.75rem, 7.2vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--body); letter-spacing: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 56ch;
}

/* ============================================
   Layout primitives
   ============================================ */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

/* ============================================
   Navigation
   ============================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 12, 15, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  height: 42px;
}

.brand-logo img {
  height: 100%;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--accent);
}

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 0.7rem 1.25rem;
  border-radius: 2px;
  font-weight: 600 !important;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover { background: var(--accent-bright); transform: translateY(-1px); }
.nav-cta::after { display: none !important; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-family: var(--body);
}

@media (max-width: 880px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1.5rem var(--gutter);
    gap: 1.25rem;
    align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
  .nav-cta { width: 100%; text-align: center; }
  .brand-logo { height: 36px; }
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 2px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(216, 62, 54, 0.5);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

/* ============================================
   Hero
   ============================================ */

.hero {
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -10%; right: -20%;
  width: 70%;
  height: 110%;
  background: radial-gradient(ellipse at center, rgba(216, 62, 54, 0.10), transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}

.hero-inner { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.hero-eyebrow::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--accent);
}

.hero h1 {
  margin-bottom: 2rem;
  max-width: 18ch;
}

.hero h1 .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

.hero-lead {
  margin-bottom: 2.75rem;
  max-width: 58ch;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   Stats band — NEW (home page credibility)
   ============================================ */

.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 3rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stats-grid.stats-three { grid-template-columns: repeat(3, 1fr); }

.stat {
  padding: 0 0.5rem;
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}

.stat:first-child { border-left: none; padding-left: 0; }

.stat .num {
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 0.55rem;
  letter-spacing: -0.02em;
}

.stat .num .accent { color: var(--accent); }

.stat .label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
  display: block;
}

@media (max-width: 780px) {
  .stats-grid,
  .stats-grid.stats-three { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .stat { border-left: none; padding-left: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); padding-right: 1rem; }
  /* An odd count leaves a lone tile on the last row; a divider beside nothing
     reads as a missing item. */
  .stats-grid.stats-three .stat:last-child:nth-child(odd) { border-right: none; }
}

/* ============================================
   Tagline band (secondary)
   ============================================ */

.tagline-band {
  border-bottom: 1px solid var(--border);
  padding: 2.25rem 0;
  background: var(--bg);
}

.tagline-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.tagline-band .tag {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 400;
  color: var(--ink-muted);
}

.tagline-band .tag .sep {
  color: var(--accent);
  margin: 0 0.6rem;
  font-style: normal;
}

.tagline-band .location {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ============================================
   Section headers
   ============================================ */

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 4rem;
  align-items: start;
}

.section-head .label-col .eyebrow { display: block; margin-bottom: 0.6rem; }

.section-head .label-col .num {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.section-head h2 { max-width: 20ch; }

@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
}

/* ============================================
   Services grid (home page preview)
   ============================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  background: var(--bg);
  padding: 2.5rem 2.25rem;
  transition: background 0.3s ease;
  position: relative;
}

.service-card:hover { background: var(--bg-elevated); }

.service-card .num {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.25rem;
  display: block;
  letter-spacing: 0.05em;
}

.service-card h3 {
  margin-bottom: 1rem;
  font-family: var(--display);
  font-weight: 500;
}

.service-card p {
  color: var(--ink-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

@media (max-width: 780px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Manifesto / difference section
   ============================================ */

.manifesto {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

.compare .col h4 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-strong);
  font-weight: 500;
}

.compare .col.them h4 { color: var(--ink-faint); }
.compare .col.us h4 { color: var(--accent); }

.compare ul { list-style: none; }

.compare li {
  padding: 0.85rem 0;
  font-size: 1rem;
  color: var(--ink-muted);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  line-height: 1.55;
}

.compare .col.us li { color: var(--ink); }

.compare li::before {
  content: '—';
  color: var(--ink-faint);
  flex-shrink: 0;
}

.compare .col.us li::before { color: var(--accent); }

@media (max-width: 780px) {
  .compare { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================
   Process steps
   ============================================ */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: step;
}

.process .step {
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-strong);
}

.process .step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.7rem;
  left: 0;
  background: var(--bg);
  padding-right: 0.75rem;
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.process .step h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.process .step p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
}
@media (max-width: 520px) {
  .process { grid-template-columns: 1fr; }
}

/* ============================================
   Partnerships / principal opportunities band
   (medium-heat developer positioning)
   ============================================ */

.partnerships {
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.partnerships::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.partnerships .container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.partnerships .eyebrow { display: block; margin-bottom: 1.25rem; }

.partnerships h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 1.5rem;
  max-width: 14ch;
}

.partnerships p {
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 54ch;
}

@media (max-width: 860px) {
  .partnerships .container { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================
   CTA band
   ============================================ */

.cta-band {
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(216, 62, 54, 0.10), transparent 60%);
  pointer-events: none;
}

.cta-band .inner { position: relative; z-index: 1; }

.cta-band h2 { margin-bottom: 1.5rem; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-band .lead { margin: 0 auto 2.5rem; }

/* ============================================
   Footer
   ============================================ */

footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding: 4.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-grid h5 {
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.footer-grid ul { list-style: none; }

.footer-grid li {
  margin-bottom: 0.6rem;
  font-size: 0.93rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.footer-grid a { transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--accent); }

.footer-brand-logo {
  height: 52px;
  margin-bottom: 1.25rem;
}

.footer-brand-logo img { height: 100%; width: auto; }

.footer-brand p {
  color: var(--ink-muted);
  font-size: 0.93rem;
  max-width: 38ch;
  line-height: 1.65;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

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

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================
   Page header (for inner pages)
   ============================================ */

.page-header {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -10%; right: -25%;
  width: 65%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(216, 62, 54, 0.08), transparent 60%);
  pointer-events: none;
}

.page-header .inner { position: relative; z-index: 1; }

.page-header .eyebrow { display: block; margin-bottom: 1.5rem; }

.page-header h1 { margin-bottom: 1.5rem; max-width: 16ch; }

.page-header p.lead { max-width: 60ch; }

/* ============================================
   About page
   ============================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
}

.about-photo {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
}

.about-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 12, 15, 0.35) 100%);
  pointer-events: none;
}

.about-body p {
  color: var(--ink-muted);
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: 1.5rem;
}

.about-body p strong { color: var(--ink); font-weight: 600; }

.about-body h3 {
  margin-top: 2.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
}

.about-body .focus-list {
  list-style: none;
  padding: 0;
}

.about-body .focus-list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
}

.about-body .focus-list li:last-child { border-bottom: 1px solid var(--border); }

.about-body .focus-list li::before {
  content: '→';
  color: var(--accent);
  flex-shrink: 0;
  font-size: 0.9rem;
}

.credentials {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.credentials dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 2.5rem;
}

.credentials dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.25rem;
}

.credentials dd {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { max-width: 420px; }
}

/* ============================================
   Career timeline (About page)
   ============================================ */

.timeline {
  margin-top: 1rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.timeline-item:last-child { border-bottom: 1px solid var(--border); }

.timeline-item .years {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding-top: 0.2rem;
}

.timeline-item .role h4 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.timeline-item .role .company {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.timeline-item .role p {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 720px) {
  .timeline-item { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.75rem 0; }
}

/* ============================================
   Services page — detailed
   ============================================ */

.service-detail {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  padding: 3.75rem 0;
  border-top: 1px solid var(--border);
}

.service-detail:last-of-type { border-bottom: 1px solid var(--border); }

.service-detail .num {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
  display: block;
  letter-spacing: 0.05em;
}

.service-detail h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.service-detail .body p {
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  line-height: 1.72;
}

.service-detail .body p.translation {
  color: var(--accent);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 2px solid var(--accent);
}

.service-detail ul {
  list-style: none;
  margin-top: 0.5rem;
}

.service-detail li {
  padding: 0.7rem 0;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  font-size: 0.98rem;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
}

.service-detail li::before {
  content: '→';
  color: var(--accent);
  flex-shrink: 0;
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .service-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================
   Contact page
   ============================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-info .block {
  padding: 1.85rem 0;
  border-top: 1px solid var(--border);
}

.contact-info .block:last-child { border-bottom: 1px solid var(--border); }

.contact-info .label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
  display: block;
}

.contact-info .value {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}

.contact-info a.value { transition: color 0.2s ease; }
.contact-info a.value:hover { color: var(--accent); }

.contact-cta {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}

.contact-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
}

.contact-cta h3 {
  font-family: var(--display);
  font-size: 1.65rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.contact-cta p {
  color: var(--ink-muted);
  margin-bottom: 2rem;
  font-size: 0.98rem;
  line-height: 1.65;
}

.contact-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================
   Scheduling embed
   ============================================ */

.schedule { padding-top: 0; }

.schedule-heading {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 2rem;
}

/* Height lives here rather than in Calendly's suggested inline style attribute,
   otherwise the inline value wins and the taller mobile layout never applies.
   Calendly renders its own white card, so it sits on a light panel rather than
   fighting the dark page background. */
.schedule .calendly-inline-widget {
  height: 760px;
  background: #fff;
  border: 1px solid var(--border);
}

.schedule-fallback {
  color: var(--ink-muted);
  line-height: 1.7;
}

.schedule-fallback a { color: var(--accent); }

@media (max-width: 860px) {
  .schedule .calendly-inline-widget { height: 900px; }
}

/* ============================================
   Reveal on load — staggered
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: reveal 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.reveal.d1 { animation-delay: 0.1s; }
.reveal.d2 { animation-delay: 0.25s; }
.reveal.d3 { animation-delay: 0.4s; }
.reveal.d4 { animation-delay: 0.55s; }
.reveal.d5 { animation-delay: 0.7s; }

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================
   Listings
   ============================================ */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 980px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .listing-grid { grid-template-columns: 1fr; } }

.listing-card {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.2s ease;
}

.listing-card:hover { border-color: var(--accent); }

.listing-kind {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.listing-card h3 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0;
}

.listing-location { color: var(--ink-muted); font-size: 0.95rem; }

.listing-price {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
  margin-top: 0.35rem;
}

.listing-details { color: var(--ink-muted); font-size: 0.9rem; }

.listing-description {
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0.4rem 0 0;
}

.listing-inquire {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.listing-inquire:hover .arrow { padding-left: 4px; }
.listing-inquire .arrow { transition: padding 0.2s ease; }

/* The brokerage logo leads the listings page, deliberately larger than the
   NRR logo anywhere on the site (nav brand is 42px). Ohio's advertising rule
   wants the broker at equal or greater prominence; on a page of brokerage
   inventory, greater is the honest reading. White backing because the
   Shai-Hess mark is dark type on transparent and this site is near-black. */
.listings-header .broker-logo {
  height: 72px;
  width: auto;
  background: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  margin-bottom: 1.75rem;
}

.listings-embed { padding-top: 0; }

.listings-embed iframe {
  width: 100%;
  height: 1200px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

@media (max-width: 767px) {
  .listings-embed iframe { height: 1500px; }
  .listings-header .broker-logo { height: 56px; }
}

/* Buildout card photos, hotlinked from their CDN. Fixed ratio so a grid of
   mixed portrait and landscape shots still reads as a grid. */
.listing-photo {
  margin: -2rem -2rem 1rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-subtle);
}

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

/* The whole card is the link. The Details anchor stretches an invisible
   click surface over its card, so clicking the photo, the name or the price
   goes where Details goes. The card is the positioning context; without
   that, the stretched surface would cover the page. */
.listing-card { position: relative; cursor: pointer; }

.listing-card .listing-inquire::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Listings filter bar. Mirrors the Shai-Hess search: free text, city, use
   type, sale/lease, acreage range. A plain GET form, so every result set is
   a shareable URL and the back button behaves. */
.listing-filter {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.lf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.listing-filter input,
.listing-filter select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.92rem;
  padding: 0.75rem 0.9rem;
  border-radius: 2px;
}

.listing-filter input[type="search"] { flex: 3 1 240px; min-width: 0; }
.listing-filter select { flex: 1 1 150px; }
.listing-filter input[type="number"] { flex: 0 1 118px; }

.listing-filter input::placeholder { color: var(--ink-faint); }
.listing-filter input:focus,
.listing-filter select:focus { outline: none; border-color: var(--accent); }

.listing-filter .btn { padding: 0.75rem 1.5rem; }

.lf-reset {
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-decoration: underline;
}

.lf-reset:hover { color: var(--accent); }

.lf-count {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lf-empty { margin-bottom: 2rem; }
.lf-empty a { color: var(--accent); text-decoration: underline; }

@media (max-width: 700px) {
  .listing-filter input[type="search"],
  .listing-filter select,
  .listing-filter input[type="number"],
  .listing-filter .btn { flex: 1 1 100%; }
}

/* Results beside the map, the way the brokerage site reads. The list
   scrolls inside its own column; the map stays put alongside it. */
.listing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.listing-split .listing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 78vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.listing-map-wrap { position: sticky; top: 90px; }

.listing-map {
  height: 78vh;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

/* Leaflet ships light-mode chrome; these keep its controls and popups from
   glaring against a near-black page. */
.listing-map .leaflet-control-attribution {
  background: rgba(11, 12, 15, 0.8);
  color: var(--ink-faint);
}
.listing-map .leaflet-control-attribution a { color: var(--ink-muted); }

@media (max-width: 1100px) {
  .listing-split { grid-template-columns: minmax(0, 1fr); }
  .listing-split .listing-grid { max-height: none; overflow: visible; padding-right: 0; }
  .listing-map-wrap { position: static; order: -1; }
  .listing-map { height: 420px; }
}

@media (max-width: 640px) {
  .listing-split .listing-grid { grid-template-columns: minmax(0, 1fr); }
}