/* ==========================================================================
   Roanlight Dental, shared design system
   Used by index.html, services.html, about.html, contact.html

   One hue only: terracotta. Everything else is a warm neutral. No second
   saturated accent, no olive, no gold, no maroon, no peach.
   Display face: Plus Jakarta Sans (700/800). Text face: Inter (400/600).
   ========================================================================== */

:root {
  /* type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* the single hue, plus its tints and shades */
  --clay: #B4472A;
  --clay-deep: #8A3520;
  --clay-soft: #E9CFC3;
  --clay-wash: #F3E2D9;

  /* warm neutrals */
  --sand: #F7F0E8;
  --sand-deep: #EDE3D6;
  --paper: #FFFCF7;
  --ink: #2B1D17;
  --ink-soft: #5F5049;
  --ink-faint: #8A7B72;
  --line: rgba(43, 29, 23, 0.13);
  --line-strong: rgba(43, 29, 23, 0.24);

  --shadow: 0 24px 60px -34px rgba(43, 29, 23, 0.55);
  --shadow-soft: 0 12px 34px -22px rgba(43, 29, 23, 0.45);

  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --max-w: 1180px;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.16;
  margin: 0;
  color: var(--ink);
}

/* Emphasis inside headlines is colour and weight, never a slanted display
   face. Italic display type was explicitly rejected. */
.hl {
  color: var(--clay);
  font-style: normal;
  font-weight: 800;
}
.hl-rule {
  display: inline-block;
  border-bottom: 3px solid var(--clay-soft);
  padding-bottom: 2px;
}

a { color: inherit; }
/* height:auto so the HTML width and height attributes, which browsers apply
   as presentational hints, cannot beat the aspect ratios set below. */
img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  flex: none;
}
.eyebrow.on-dark { color: var(--clay-soft); }
.eyebrow.on-dark .dot { background: var(--clay-soft); }

/* ---------- Header ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s var(--ease);
}
header.site.is-stuck {
  border-bottom-color: var(--line);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  transition: padding 0.3s var(--ease);
}
header.site.is-stuck .nav-row { padding-top: 13px; padding-bottom: 13px; }

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-decoration: none;
}

.logo-mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--clay);
  position: relative;
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--clay);
}

nav.links {
  display: flex;
  gap: 30px;
  font-size: 0.94rem;
  font-weight: 500;
}
nav.links a {
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
nav.links a:hover { color: var(--clay-deep); }
nav.links a.active { color: var(--ink); }
nav.links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--clay);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clay);
  color: #FFF8F4;
  border: 1.5px solid var(--clay);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s var(--ease);
  white-space: nowrap;
}
.cta-btn:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  transform: translateY(-1px);
}
.cta-btn.ghost {
  background: transparent;
  color: var(--clay-deep);
  border-color: var(--line-strong);
}
.cta-btn.ghost:hover {
  background: var(--clay);
  border-color: var(--clay);
  color: #FFF8F4;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 56px 88px 32px;
  max-width: 660px;
  margin-left: auto;
}

.hero-copy h1 {
  font-size: clamp(2.15rem, 3.9vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.12;
  margin-bottom: 24px;
}

.hero-copy p.lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 0 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 42px;
  flex-wrap: wrap;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.check-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.check-icon svg { width: 11px; height: 11px; }

/* Hero photograph, parallax host */
.hero-media {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background: var(--sand-deep);
  border-left: 1px solid var(--line);
}
.hero-media img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.hero-caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  background: rgba(43, 29, 23, 0.72);
  backdrop-filter: blur(6px);
  color: #F6EFE9;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  max-width: 340px;
}
.hero-caption strong {
  display: block;
  font-weight: 600;
  color: #FFF;
  margin-bottom: 2px;
}

/* ---------- Section shells ---------- */

section { padding: 104px 0; }
section.tight { padding: 76px 0; }

.section-head {
  max-width: 660px;
  margin-bottom: 52px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 16px 0 0;
  max-width: 560px;
}
.section-head.center p { margin-left: auto; margin-right: auto; }

/* A rule that draws itself under section heads */
.rule {
  display: block;
  height: 2px;
  width: 100%;
  max-width: 220px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  margin-top: 26px;
  transition: transform 0.9s var(--ease);
}
.section-head.center .rule { margin-left: auto; margin-right: auto; transform-origin: center; }
.rule.in-view { transform: scaleX(1); }

/* ---------- Page header for subpages ---------- */

.page-header {
  background: var(--sand-deep);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.page-header .ph-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  max-width: var(--max-w);
  margin: 0 auto;
}
.page-header .ph-copy {
  padding: 76px 56px 76px 32px;
}
.page-header h1 {
  font-size: clamp(1.95rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  max-width: 620px;
}
.page-header p.lead {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0;
}
.page-header .ph-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-left: 1px solid var(--line);
}
.page-header .ph-media img {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}

/* ---------- Reveal on enter ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Services ---------- */

.services { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card .shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-deep);
}
.service-card .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.service-card:hover .shot img { transform: scale(1.04); }
.service-card .body { padding: 26px 26px 30px; }
.service-card h3 {
  font-size: 1.14rem;
  margin-bottom: 10px;
}
.service-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}
.service-meta {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.service-meta span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay-deep);
  border: 1px solid var(--clay-soft);
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---------- Signature move: sticky copy, scrolling photo column ----------
   Desktop with motion allowed: the four copy blocks all occupy one sticky
   grid area in column one and cross fade as their matching photo passes in
   column two. Narrow screens and reduced motion get plain document flow,
   copy then photo, four times over, which is why the two are interleaved in
   the markup rather than split into two containers. */

.story { background: var(--sand-deep); border-bottom: 1px solid var(--line); }
.story-intro { margin-bottom: 56px; max-width: 620px; }
.story-intro h2 { font-size: clamp(1.75rem, 2.8vw, 2.35rem); }
.story-intro p { color: var(--ink-soft); margin: 16px 0 0; }

.story-steps { display: block; }

.story-text { margin-bottom: 22px; }
.story-text .step-no {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--clay);
  display: block;
  margin-bottom: 12px;
}
.story-text h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 14px; }
.story-text p { color: var(--ink-soft); margin: 0; max-width: 430px; }

.story-figure { margin: 0 0 52px; }
.story-figure img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.story-figure figcaption {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 10px;
}

@media (min-width: 981px) {
  .story-steps {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    column-gap: 72px;
  }
  .story-text {
    grid-column: 1;
    grid-row: 1 / 5;
    position: sticky;
    top: 22vh;
    align-self: start;
    height: fit-content;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .story-text.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .story-figure { grid-column: 2; margin-bottom: 96px; }
  .story-figure:nth-of-type(1) { grid-row: 1; }
  .story-figure:nth-of-type(2) { grid-row: 2; }
  .story-figure:nth-of-type(3) { grid-row: 3; }
  .story-figure:nth-of-type(4) { grid-row: 4; margin-bottom: 0; }
}

/* ---------- AI front desk strip ---------- */

.ai-strip {
  background: var(--ink);
  color: #F4ECE5;
  border-radius: var(--radius-lg);
  padding: 60px 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.ai-strip h2 {
  color: #FFF9F4;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  margin-bottom: 18px;
}
.ai-strip p {
  color: rgba(244, 236, 229, 0.78);
  margin: 0 0 28px;
  max-width: 460px;
  font-size: 1rem;
}
.ai-strip .cta-btn {
  background: var(--clay);
  border-color: var(--clay);
  color: #FFF8F4;
}
.ai-strip .cta-btn:hover { background: #C65232; border-color: #C65232; }

.ai-card {
  border: 1px solid rgba(244, 236, 229, 0.2);
  border-radius: var(--radius-md);
  padding: 8px 26px;
}
.ai-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(244, 236, 229, 0.14);
}
.ai-stat:last-child { border-bottom: none; }
.ai-stat .num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFF9F4;
  white-space: nowrap;
}
.ai-stat .label {
  font-size: 0.85rem;
  color: rgba(244, 236, 229, 0.7);
  max-width: 210px;
}

/* ---------- Testimonial ---------- */

.quote-section { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.quote-layout img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.quote-block p.quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.42;
  color: var(--ink);
  margin: 0 0 26px;
}
.quote-block p.quote::before { content: "\201C"; color: var(--clay); }
.quote-block p.quote::after { content: "\201D"; color: var(--clay); }
.quote-attrib .name { font-weight: 600; font-size: 0.95rem; }
.quote-attrib .role { color: var(--ink-faint); font-size: 0.86rem; }

/* ---------- CTA banner ---------- */

.cta-banner {
  background: var(--clay);
  border-radius: var(--radius-lg);
  padding: 72px 56px;
  text-align: center;
  color: #FFF6F1;
}
.cta-banner h2 {
  color: #FFF6F1;
  font-size: clamp(1.7rem, 2.9vw, 2.3rem);
  max-width: 640px;
  margin: 0 auto 16px;
}
.cta-banner p {
  color: rgba(255, 246, 241, 0.86);
  max-width: 500px;
  margin: 0 auto 32px;
}
.cta-banner .hero-actions { justify-content: center; margin-bottom: 0; }
.cta-banner .cta-btn {
  background: #FFF6F1;
  border-color: #FFF6F1;
  color: var(--clay-deep);
}
.cta-banner .cta-btn:hover { background: #FFF; border-color: #FFF; color: var(--clay-deep); }
.cta-banner .cta-btn.ghost {
  background: transparent;
  color: #FFF6F1;
  border-color: rgba(255, 246, 241, 0.55);
}
.cta-banner .cta-btn.ghost:hover { background: rgba(255, 246, 241, 0.14); color: #FFF6F1; }

/* ---------- Footer ---------- */

footer.site {
  background: var(--ink);
  color: rgba(244, 236, 229, 0.8);
  padding: 76px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(244, 236, 229, 0.14);
}
.footer-brand .logo { color: #FFF9F4; margin-bottom: 16px; }
.footer-brand .logo-mark { border-color: var(--clay-soft); }
.footer-brand .logo-mark::after { background: var(--clay-soft); }
.footer-brand p {
  font-size: 0.9rem;
  color: rgba(244, 236, 229, 0.62);
  max-width: 270px;
  margin-bottom: 20px;
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 229, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease;
}
.social-row a:hover { background: rgba(244, 236, 229, 0.12); }
.social-row svg { width: 15px; height: 15px; stroke: #F4ECE5; }

.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--clay-soft);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a {
  text-decoration: none;
  color: rgba(244, 236, 229, 0.74);
  font-size: 0.91rem;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: #FFF9F4; }
.footer-col p { font-size: 0.91rem; color: rgba(244, 236, 229, 0.74); margin: 0 0 8px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(244, 236, 229, 0.52);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .legal-links { display: flex; gap: 20px; }
.footer-bottom a { text-decoration: none; color: rgba(244, 236, 229, 0.52); }
.footer-bottom a:hover { color: #FFF9F4; }

/* ---------- About page ---------- */

.philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.philosophy img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.philosophy figcaption {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 10px;
}
.philosophy figure { margin: 0; }
.philosophy p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 18px 0 0;
  max-width: 560px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.value-card {
  border-top: 2px solid var(--clay);
  padding-top: 22px;
}
.value-card .value-mark {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--clay);
  display: block;
  margin-bottom: 12px;
}
.value-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.value-card p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }

/* Counted numbers on the about page */
.count-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
}
.count-item .count-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--clay);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.count-item .count-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.team-lead {
  margin-bottom: 56px;
}
.team-lead img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.team-lead figcaption {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 10px;
}
.team-lead figure { margin: 0; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.team-card { }
.team-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.team-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.team-card .role {
  color: var(--clay-deep);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.team-card p.bio { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ---------- Contact page ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  margin-bottom: 24px;
}
.info-card h3 { font-size: 1.02rem; margin-bottom: 16px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.hours-table tr { border-bottom: 1px solid var(--line); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 10px 0; color: var(--ink-soft); }
.hours-table td:last-child { text-align: right; color: var(--ink); font-weight: 500; }

.contact-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-detail-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.contact-detail-list .detail-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--clay-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail-list .detail-icon svg { width: 15px; height: 15px; stroke: var(--clay); }
.contact-detail-list strong { display: block; color: var(--ink); font-size: 0.94rem; }

/* An honest way to say where we are: a photo of the front desk and written
   directions, rather than a drawing pretending to be a map. */
.find-us img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.find-us ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  display: grid;
  gap: 8px;
}
.find-us .note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 14px 0 0;
}

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 40px;
}
.form-note {
  display: inline-block;
  color: var(--clay-deep);
  border: 1px solid var(--clay-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .field.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--clay); }
.field textarea { resize: vertical; min-height: 110px; }
.form-submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.form-submit-row .fine-print { font-size: 0.82rem; color: var(--ink-faint); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; margin: 0; padding: 48px 24px 44px; order: 2; }
  .hero-media { order: 1; min-height: 380px; border-left: none; border-bottom: 1px solid var(--line); }
  .page-header .ph-grid { grid-template-columns: 1fr; }
  .page-header .ph-copy { padding: 52px 24px 44px; }
  .page-header .ph-media { min-height: 260px; border-left: none; border-top: 1px solid var(--line); }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .ai-strip { grid-template-columns: 1fr; padding: 40px 28px; }
  .quote-layout { grid-template-columns: 1fr; gap: 32px; }
  .quote-layout img { aspect-ratio: 16 / 10; }
  .philosophy { grid-template-columns: 1fr; gap: 36px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .count-row { grid-template-columns: 1fr 1fr; gap: 26px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .nav-row { padding: 16px 20px; }
  nav.links { display: none; }
  .menu-toggle { display: block; }
  .nav-actions .cta-btn.ghost { display: none; }
  section { padding: 64px 0; }
  .service-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .cta-banner { padding: 48px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-caption { position: static; max-width: none; margin: 0; border-radius: 0; }
}

/* ---------- Motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .rule { transform: scaleX(1); transition: none; }
  .service-card .shot img { transition: none; }
  .cta-btn { transition: none; }
  .cta-btn:hover { transform: none; }
  .hero-media img,
  .page-header .ph-media img { transform: none !important; }
  .story-steps { display: block; }
  .story-text {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    margin-bottom: 22px;
  }
  .story-figure { margin-bottom: 52px; }
}