/* ==========================================================================
   MEHLMAN & CO. — stylesheet
   Locked: Pierce & Pierce aesthetic · Bone paper, oxblood wax, EB Garamond
   ========================================================================== */

:root {
  --ink: #131517;
  --ink-soft: #2a2d32;
  --bone: #F5F1E8;
  --bone-warm: #EFE9D8;
  --bone-deep: #E8E1CE;
  --oxblood: #6B1F22;
  --oxblood-deep: #4a1214;
  --oxblood-bright: #8B2A2E;
  --brass: #8B6F2A;
  --brass-warm: #C89A4A;
  --steel: #3E4E5C;

  --text: rgba(19, 21, 23, 0.9);
  --text-soft: rgba(19, 21, 23, 0.65);
  --text-mute: rgba(19, 21, 23, 0.45);
  --text-fine: rgba(19, 21, 23, 0.32);

  --serif: 'EB Garamond', 'Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-power: cubic-bezier(0.77, 0, 0.175, 1);

  --container: 1280px;
  --container-tight: 920px;

  /* Typography scale — use these everywhere */
  --fs-eyebrow: 13px;
  --fs-label: 12.5px;
  --fs-body: 16px;
  --fs-body-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-quote: clamp(1.35rem, 2vw, 1.65rem);
  --fs-h3: clamp(1.65rem, 2.6vw, 2.25rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 5.5vw, 4.5rem);
  --fs-display: clamp(3rem, 8vw, 6rem);

  /* Letter-spacing scale */
  --ls-tight: -0.02em;
  --ls-body: 0.002em;
  --ls-small-caps: 0.08em;
  --ls-eyebrow: 0.3em;
  --ls-label: 0.28em;
  --ls-wide: 0.4em;

  /* Line-height scale */
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-relaxed: 1.65;

  /* Section spacing - consistent rhythm */
  --section-pad: 6rem;
  --section-pad-sm: 4.5rem;
  --section-pad-lg: 7rem;
  --section-meta-gap: 2.5rem;
  --section-heading-gap: 2.25rem;
}

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

html {
  /* Native scroll with fixed-nav offset for anchor links */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bone);
  overflow-x: hidden;
}

/* Suppress Android Chrome's "Touch to Search" feature on decorative/display
   text — hero wordmark, headings, button labels, nav, meta labels — where
   a finger tap would pop up a Google search drawer for the tapped word.

   Scoped to touch devices only via pointer:coarse. Desktop users (mouse +
   keyboard) retain full text selection on everything — they don't trigger
   Touch-to-Search and they frequently want to copy headings, quotes, stats,
   contact details, etc. This preserves desktop utility while fixing the
   Android pop-up annoyance Caroline flagged. */
@media (pointer: coarse) {
  .hero-firm,
  .hero-subtitle,
  .hero-tagline,
  .hero-pillar-number,
  .hero-pillar-body,
  .section-heading,
  .section-meta,
  .section-meta-num,
  .section-meta-label,
  .nav,
  .nav-links,
  .footer,
  .btn-seal,
  .btn-label,
  .nav-cta,
  .wrs-label,
  .client-name,
  .stat-number,
  .stat-label,
  .pe-title,
  .pe-cta,
  .testimonial-quote,
  .testimonial-attrib,
  .cta-final-heading,
  .cta-final-sub,
  .ei-node,
  .ei-node-time,
  .ei-node-short,
  .ei-phase-roman,
  .ei-phase-day,
  .ei-phase-label,
  .faq-summary,
  .faq-toggle,
  .tech-feature-title,
  .tech-feature-label,
  .tech-support-label,
  .tech-title,
  .case-label,
  .case-meta-label,
  .case-number-label,
  .case-callout-label,
  .case-hero-h,
  .team-member-label,
  .team-cards-deck-label,
  .tcf-name,
  .tcf-title,
  .tcf-phone,
  .tcf-firm-name,
  .tcf-firm-sub,
  .tcf-bottom,
  .tcb-wordmark,
  .tcb-est,
  .tcb-link,
  .contact-page-label,
  .contact-detail-label,
  .contact-big-label,
  .tier-num,
  .tier-scope,
  .page-hero-num,
  .page-hero-firm,
  .history-chapter-label,
  .accent,
  .section-heading em,
  .fivedim-lead,
  .fd-num {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

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

/* ==========================================================================
   LOADER
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.5s var(--ease-in-out), visibility 0.5s var(--ease-in-out);
}

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

/* Subpages skip the loader entirely — the seal impress is a home-only brand moment.
   Navigating between internal pages should feel instant, not ceremonial. */
body.is-subpage .loader {
  display: none;
}

.loader-seal {
  opacity: 0;
  transform: scale(0.6);
  filter: blur(4px);
  animation: loader-impress 0.9s var(--ease-power) 0.15s forwards;
}

.loader-text {
  font-family: var(--serif);
  font-size: 14px;
  font-variant: small-caps;
  letter-spacing: 0.4em;
  color: var(--text-mute);
  opacity: 0;
  animation: loader-fade-in 0.6s var(--ease-out) 0.9s forwards;
}

@keyframes loader-impress {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(4px); }
  60%  { opacity: 1; transform: scale(1.08); filter: blur(0); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes loader-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PROGRESS BAR
   ========================================================================== */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(to right, var(--oxblood-deep), var(--oxblood));
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(107, 31, 34, 0.3);
}

/* ==========================================================================
   REBRAND BANNER — temporary, sunsets automatically. See JS for dismissal.
   ========================================================================== */

.rebrand-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101; /* above nav */
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  max-height: 120px; /* generous cap — actual height driven by content */
  transition: max-height 0.5s var(--ease-power), opacity 0.4s var(--ease-out);
}

.rebrand-banner.is-dismissed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.rebrand-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.rebrand-banner-text {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}

.rebrand-phase {
  color: rgba(245, 241, 232, 0.55);
  font-style: italic;
  white-space: nowrap;
}

.rebrand-phase-label {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-style: normal;
  color: rgba(245, 241, 232, 0.4);
  margin-right: 0.35em;
  font-weight: 500;
}

.rebrand-phase-now {
  color: var(--bone);
  font-style: normal;
  font-weight: 500;
}

.rebrand-phase-now .rebrand-phase-label {
  color: var(--brass-warm);
}

.rebrand-arrow {
  color: rgba(245, 241, 232, 0.3);
  font-size: 11px;
  letter-spacing: 0;
  flex-shrink: 0;
}

.rebrand-banner-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(245, 241, 232, 0.5);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s var(--ease-out);
}

.rebrand-banner-close:hover {
  color: var(--bone);
}

/* Push the fixed nav down by banner height so it sits below, not on top.
   --banner-height is set dynamically by JS to match the banner's actual
   rendered height (changes with viewport width as copy wraps). Falls back
   to 48px before JS runs — close enough to avoid major layout shift. */
body:not(.banner-dismissed) .nav {
  top: var(--banner-height, 48px);
}

body:not(.banner-dismissed) {
  padding-top: var(--banner-height, 48px);
}

body:not(.banner-dismissed) .hero {
  min-height: calc(100vh - var(--banner-height, 48px));
}

@media (max-width: 680px) {
  .rebrand-banner-inner { padding: 0.5rem 2.5rem 0.5rem 1rem; }
  .rebrand-banner-text {
    font-size: 11.5px;
    gap: 0.15rem 0.4rem;
    line-height: 1.4;
    flex-wrap: wrap;
  }
  .rebrand-phase { white-space: normal; }

  /* On mobile, hide the label chips ("Originally" / "Formerly") to save room.
     The arrows alone carry the sequence. */
  .rebrand-phase:not(.rebrand-phase-now) .rebrand-phase-label {
    display: none;
  }

  /* The "Now" label stays — it's the key signal */
  .rebrand-phase-now .rebrand-phase-label {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  /* Force only the "Now" phase onto its own row (line 2). Both arrows stay
     on line 1 — the second arrow trails at the end of line 1 ("→ Enduring
     Retail Audit →") signaling the next step, then "Now Mehlman & Co."
     lands on line 2. */
  .rebrand-phase-now {
    flex-basis: 100%;
    text-align: center;
  }
}

/* Extra-narrow phones (< 380px) — let past names wrap too if needed */
@media (max-width: 380px) {
  .rebrand-banner-text { font-size: 10.5px; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem 2.5rem;
  transition: background 0.2s var(--ease-out), padding 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
  border-bottom: 0.5px solid transparent;
}

.nav.nav-scrolled {
  background: rgba(239, 233, 216, 0.96);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  padding: 1rem 2.5rem;
  border-bottom-color: rgba(19, 21, 23, 0.08);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
}

.nav-seal {
  transition: transform 0.6s var(--ease-out);
  /* Pass clicks through to the parent <a class="nav-mark"> — prevents SVG
     from intercepting or dropping clicks based on where inside the bounding
     box the user clicks (scalloped shape leaves "empty" corners inside the
     SVG that don't register clicks without this). */
  pointer-events: none;
}

.nav-mark:hover .nav-seal {
  transform: rotate(8deg) scale(1.06);
}

.nav-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Current-page indicator: oxblood text + persistent underline (Dan's request
   for visual feedback about which page you're on). Styling uses aria-current
   which build.py injects on the matching link. */
.nav-links a[aria-current="page"] {
  color: var(--oxblood);
}

.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease-out);
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-power);
  z-index: -1;
}

.nav-cta:hover {
  color: var(--bone);
}

.nav-cta:hover::before {
  transform: translateY(0);
}

/* Current-page Contact: oxblood text to match other active nav links —
   no filled background (keep border + transparent interior for readability) */
.nav-cta[aria-current="page"] {
  color: var(--oxblood);
  border-color: var(--oxblood);
}

/* Don't auto-fill the button on the contact page itself */
.nav-cta[aria-current="page"]::before {
  transform: translateY(100%);
}

/* But on hover (even on the contact page), let it still do the fill effect */
.nav-cta[aria-current="page"]:hover {
  color: var(--bone);
}
.nav-cta[aria-current="page"]:hover::before {
  transform: translateY(0);
  background: var(--oxblood);
}

.nav-cta::after {
  display: none !important;
}

.nav-cta .nav-cta-line {
  width: 24px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.667);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}

.nav-cta:hover .nav-cta-line {
  transform: scaleX(1);
}

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 101; /* above .nav-links overlay */
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-power), top 0.3s var(--ease-out), bottom 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
  transform-origin: center;
}

.nav-toggle-line:nth-child(1) { top: 15px; }
.nav-toggle-line:nth-child(2) { bottom: 15px; }

/* Open state — lines cross to form X */
.nav.is-open .nav-toggle-line:nth-child(1) {
  top: 50%;
  margin-top: -0.5px;
  transform: rotate(45deg);
}
.nav.is-open .nav-toggle-line:nth-child(2) {
  bottom: 50%;
  margin-bottom: -0.5px;
  transform: rotate(-45deg);
}

/* Lock body scroll when menu is open */
body.nav-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav { padding: 1rem 1.5rem; }

  /* Show hamburger */
  .nav-toggle { display: block; }

  /* Nav links become a full-screen overlay */
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;
    background: var(--bone);
    padding: 2rem;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-power), visibility 0s linear 0.45s;
  }

  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-power), visibility 0s linear 0s;
  }

  /* Larger, editorial link treatment on the overlay */
  .nav-links a {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink);

    /* Entry stagger — start offset, animate in when parent is open */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-power);
  }

  /* Current page on mobile overlay: oxblood + italic for editorial emphasis */
  .nav-links a[aria-current="page"] {
    color: var(--oxblood);
    font-style: italic;
  }

  .nav.is-open .nav-links a {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger each link's entry */
  .nav.is-open .nav-links a:nth-child(1) { transition-delay: 0.12s; }
  .nav.is-open .nav-links a:nth-child(2) { transition-delay: 0.18s; }
  .nav.is-open .nav-links a:nth-child(3) { transition-delay: 0.24s; }
  .nav.is-open .nav-links a:nth-child(4) { transition-delay: 0.30s; }
  .nav.is-open .nav-links a:nth-child(5) { transition-delay: 0.36s; }

  /* Underline animation not useful on overlay — disable */
  .nav-links a::after { display: none; }

  /* Contact CTA on overlay: restore as boxed link with explicit 1px border.
     Desktop uses 0.5px hairline, but iOS Safari can drop the right/bottom
     of sub-pixel borders when combined with overflow:hidden. */
  .nav-links .nav-cta {
    display: flex;
    margin-top: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 13px;
    font-family: var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
  }

  .nav-links .nav-cta .nav-cta-line { display: none; }
}

/* ==========================================================================
   CONTAINER & SECTION
   ========================================================================== */

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

@media (max-width: 768px) {
  .container { padding: 0 1.5rem; }
}

.section-meta {
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  margin-bottom: var(--section-meta-gap);
  padding-bottom: 1rem;
  border-bottom: 0.5px solid rgba(19, 21, 23, 0.1);
}

.section-meta-num {
  font-family: var(--serif);
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: var(--ls-eyebrow);
  color: var(--oxblood);
  font-weight: 600;
  flex-shrink: 0;
}

.section-meta-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7rem 2.5rem 4rem;
  background: var(--bone-warm);
  color: var(--ink);
  overflow: hidden;
}

.hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-ambient::before {
  content: '';
  position: absolute;
  top: 25%; left: 10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(107, 31, 34, 0.06) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.hero-ambient::after {
  content: '';
  position: absolute;
  bottom: 10%; right: 10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139, 111, 42, 0.05) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.hero-ambient-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(19, 21, 23, 0.08), transparent);
  left: 5%;
  right: 5%;
  transform: scaleX(0);
  transform-origin: center;
  animation: draw-line 2s var(--ease-power) forwards;
}

.hero-ambient-line-1 { top: 14%; animation-delay: 0.4s; }
.hero-ambient-line-2 { bottom: 14%; animation-delay: 0.6s; }

@media (max-width: 900px), (max-height: 1000px) {
  .hero-ambient-line { display: none; }
}

@keyframes draw-line {
  to { transform: scaleX(1); }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  margin-top: -2rem;
}

.hero-seal {
  position: relative;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: scale(0.4);
  filter: blur(8px);
  animation: seal-impress 1.4s var(--ease-power) 0.2s forwards;
}

.hero-seal svg {
  display: block;
  transition: transform 0.4s var(--ease-out);
}

.hero-seal-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(19,21,23,0.12) 0%, transparent 70%);
  opacity: 0;
  animation: shadow-fade-in 1s var(--ease-out) 0.4s forwards;
}

@keyframes seal-impress {
  0%   { opacity: 0; transform: scale(0.4) translateY(-40px); filter: blur(8px); }
  50%  { opacity: 0.8; transform: scale(1.15) translateY(4px); filter: blur(1px); }
  65%  { transform: scale(0.95) translateY(-2px); }
  80%  { transform: scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes shadow-fade-in {
  from { opacity: 0; width: 260px; }
  to   { opacity: 1; width: 200px; }
}

.hero-firm {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

/* Tighter tracking on narrow viewports so "Mehlman & Co." stays on one line */
@media (max-width: 500px) {
  .hero-firm { letter-spacing: 0.03em; }
}

/* Split text animation */
.hero-firm .word {
  display: inline-block;
  /* Each word becomes an atomic line-break unit — prevents orphan
     punctuation (like the period in "Co.") wrapping to its own line. */
}

.hero-firm .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: char-reveal 0.8s var(--ease-out) forwards;
}

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

.hero-rule {
  width: 80px;
  height: 0.5px;
  background: var(--ink);
  opacity: 0;
  transform: scaleX(0);
  margin: 0.5rem 0 1.25rem;
  animation: rule-draw 0.8s var(--ease-out) 1s forwards;
}

@keyframes rule-draw {
  to { opacity: 0.45; transform: scaleX(1); }
}

.hero-subtitle {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-style: italic;
  color: var(--text);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fade-in-up 0.8s var(--ease-out) 1.2s forwards;
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(13px, 1vw, 14px);
  font-variant: small-caps;
  letter-spacing: 0.4em;
  color: var(--oxblood);
  font-weight: 500;
  opacity: 0;
  animation: fade-in-up 0.8s var(--ease-out) 1.5s forwards;
}

.hero-bottom {
  margin-top: 3.5rem;
  opacity: 0;
  animation: fade-in-up 1s var(--ease-out) 1.8s forwards;
}

@media (max-width: 560px) {
  .hero-bottom { margin-top: 2.5rem; }
}

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-scroll-line {
  width: 1px;
  height: 72px;
  background: linear-gradient(
    to bottom,
    rgba(19, 21, 23, 0.14) 0%,
    rgba(19, 21, 23, 0.32) 45%,
    rgba(19, 21, 23, 0.12) 100%
  );
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -1px;
  width: 3px;
  height: 32px;
  background: var(--oxblood);
  border-radius: 1.5px;
  animation: scroll-indicator 1.8s var(--ease-in-out) infinite;
  box-shadow: 0 0 6px rgba(107, 31, 34, 0.35);
}

@keyframes scroll-indicator {
  from { top: -32px; }
  to { top: 100%; }
}

/* On touch devices, reverse the animation direction so the bead travels
   UP. Scrolling on mobile means flicking upward with the thumb — content
   moves up, so the indicator should travel up to match the gesture.
   Desktop (mouse/trackpad) keeps the downward direction since there's no
   physical gesture to match — it just reads as "below the fold." */
@media (pointer: coarse) {
  .hero-scroll-line::before {
    animation-direction: reverse;
  }
}

/* Hero value-prop pillars - bold numeric impact, like a stats bar */
.hero-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 3rem 0 0;
  max-width: 1100px;
  width: 100%;
  border-top: 0.5px solid rgba(19, 21, 23, 0.18);
  border-bottom: 0.5px solid rgba(19, 21, 23, 0.18);
  opacity: 0;
  animation: fade-in-up 1s var(--ease-out) 1.8s forwards;
}

.hero-pillar {
  padding: 2.25rem 1.5rem;
  text-align: center;
  border-right: 0.5px solid rgba(19, 21, 23, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: background 0.4s var(--ease-out);
}

.hero-pillar:last-child {
  border-right: none;
}

.hero-pillar:hover {
  background: rgba(107, 31, 34, 0.03);
}

.hero-pillar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--oxblood);
  transition: width 0.5s var(--ease-out);
}

.hero-pillar:hover::before {
  width: 40%;
}

.hero-pillar-number {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  color: var(--oxblood);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant: small-caps;
}

/* Hero pillars: inherit the parent container's fade-in. Numbers sit as
   static assertions rather than counting up — the count-up moment is reserved
   for the "By the numbers" section deeper on the page, where it's earned by
   the framing. Here, calm authority reads better than clever animation. */

.hero-pillar-suffix {
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: 2px;
}

.hero-pillar-body {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: 0.005em;
  max-width: 220px;
}

@media (max-width: 900px) {
  .hero-pillars {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.5rem;
  }
  .hero-pillar {
    border-bottom: 0.5px solid rgba(19, 21, 23, 0.18);
    padding: 1.75rem 1.25rem;
  }
  .hero-pillar:nth-child(2n) { border-right: none; }
  .hero-pillar:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 560px) {
  .hero-pillars { grid-template-columns: 1fr; }
  .hero-pillar { border-right: none !important; }
  .hero-pillar-number { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   STATS
   ========================================================================== */

.stats {
  padding: 6.5rem 0 7rem;
  background: var(--bone-warm);
  position: relative;
}

.stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(19, 21, 23, 0.08);
}

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

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

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

.stat {
  padding-top: 2rem;
  position: relative;
}

.stat-rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--oxblood);
  transition: width 1s var(--ease-out);
}

.stat.in-view .stat-rule {
  width: 40px;
}

.stat-number {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.stat-label {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.4;
  max-width: 240px;
}

/* ==========================================================================
   SECTION HEADINGS (shared)
   ========================================================================== */

.section-heading {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: 1.75rem;
}

/* Centered variant gets slightly more air beneath it since it usually sits
   above an intro paragraph that's also centered */
.section-heading.section-heading-centered {
  margin-bottom: 2rem;
}

.section-heading em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 400;
}

.section-heading-centered {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--section-heading-gap);
}

.section-sub {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  margin: -1.5rem auto 4rem;
  max-width: 680px;
  line-height: 1.55;
  text-wrap: balance;
}

.body-large {
  font-family: var(--serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text);
  margin-bottom: 1.5rem;
  letter-spacing: var(--ls-body);
  text-wrap: pretty;
}

.body-large:last-child { margin-bottom: 0; }

.body-large .accent {
  color: var(--oxblood);
  font-style: italic;
}

.body-large .accent-gold {
  color: var(--brass-warm);
  font-style: italic;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  padding: 6.5rem 0;
  background: var(--bone-warm);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

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

.service-card {
  background: var(--bone);
  padding: 2.5rem 2rem;
  border: 0.5px solid rgba(19, 21, 23, 0.1);
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  transform-style: preserve-3d;
  cursor: pointer;
}

.service-card:hover {
  border-color: rgba(107, 31, 34, 0.3);
  box-shadow: 0 30px 60px -30px rgba(19, 21, 23, 0.15);
}

.service-num {
  font-family: var(--serif);
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.3em;
  color: var(--oxblood);
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-num::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--oxblood);
}

.service-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.25;
}

.service-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: 0.003em;
}

/* ==========================================================================
   CLIENTS
   ========================================================================== */

.clients {
  padding: 6.5rem 0;
  background: var(--bone);
}

.client-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 0.5px solid rgba(19, 21, 23, 0.15);
  border-left: 0.5px solid rgba(19, 21, 23, 0.15);
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .client-wall { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .client-wall { grid-template-columns: repeat(2, 1fr); }
}

.client-name {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--text);
  padding: 3rem 1.5rem;
  text-align: center;
  border-right: 0.5px solid rgba(19, 21, 23, 0.15);
  border-bottom: 0.5px solid rgba(19, 21, 23, 0.15);
  transition: color 0.4s var(--ease-out), background 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.client-name::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-power);
  z-index: -1;
}

.client-name:hover {
  color: var(--bone);
}

.client-name:hover::before {
  transform: scaleY(1);
}

.client-footer-note {
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-mute);
}

/* ==========================================================================
   STORY
   ========================================================================== */

.story {
  padding: 6.5rem 0;
  background: var(--bone-warm);
  position: relative;
  overflow: hidden;
}

.story::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(107, 31, 34, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.story::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 111, 42, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.story .section-meta {
  border-bottom-color: rgba(19, 21, 23, 0.12);
}

.story .section-meta-label {
  color: var(--text-mute);
}

.story .section-meta-num {
  color: var(--oxblood);
}

.story .section-heading {
  color: var(--ink);
}

.story .section-heading em {
  color: var(--oxblood);
}

.story .body-large {
  color: var(--text);
}

.story .body-large .accent {
  color: var(--oxblood);
  font-style: italic;
  font-weight: 500;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  align-items: start;
}

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

/* ==========================================================================
   PRINCIPAL
   ========================================================================== */

.principal {
  padding: 5rem 0;
  background: var(--bone-warm);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact {
  padding: 6.5rem 0;
  background: var(--bone);
}

.contact-heading {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  text-align: center;
  margin-bottom: 5rem;
  letter-spacing: -0.01em;
}

.contact-heading em {
  font-style: italic;
  color: var(--oxblood);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
}

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

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Contact form */
.contact-form {
  background: var(--bone-warm);
  padding: 3rem 2.5rem;
  border: 0.5px solid rgba(19, 21, 23, 0.1);
  position: relative;
}

.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 1px;
  background: var(--oxblood);
}

.form-title {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid rgba(19, 21, 23, 0.12);
}

.field {
  position: relative;
  margin-bottom: 1.75rem;
}

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
  transition: color 0.3s var(--ease-out);
}

.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  padding: 8px 0;
  outline: none;
  cursor: text;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-fine);
}

.field-line {
  height: 1px;
  background: rgba(19, 21, 23, 0.15);
  position: relative;
  overflow: hidden;
}

.field-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.field input:focus ~ .field-line::after,
.field textarea:focus ~ .field-line::after,
.field select:focus ~ .field-line::after {
  transform: scaleX(1);
}

.field:focus-within label {
  color: var(--oxblood);
}

.btn-seal {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--ink);
  color: var(--bone);
  padding: 1rem 2rem;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease-out);
  margin-top: 1rem;
}

.btn-seal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-power);
}

.btn-seal:hover::before {
  transform: translateX(0);
}

.btn-seal .btn-label,
.btn-seal .btn-seal-icon {
  position: relative;
  z-index: 1;
}

.btn-seal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out);
}

.btn-seal:hover .btn-seal-icon {
  transform: rotate(10deg) scale(1.1);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  padding: 5rem 0 3rem;
  background:
    /* Warm brass glow, bottom-right corner */
    radial-gradient(
      ellipse 600px 500px at 92% 88%,
      rgba(200, 154, 74, 0.06) 0%,
      rgba(200, 154, 74, 0.03) 40%,
      transparent 75%
    ),
    /* Soft oxblood glow, top-left corner */
    radial-gradient(
      ellipse 650px 500px at 8% 15%,
      rgba(107, 31, 34, 0.08) 0%,
      rgba(107, 31, 34, 0.04) 40%,
      transparent 75%
    ),
    /* Base ink color */
    var(--ink);
  color: rgba(245, 241, 232, 0.75);
  position: relative;
  overflow: hidden;
}

/* No pseudo-element blobs — they were getting clipped at the footer's top
   and right edges, creating visible hard cuts. Background gradients are
   part of the footer's own paint layer and naturally stay within its bounds. */

.footer .container { position: relative; z-index: 1; }

.footer-top {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  /* When rendered as <a> (home link) — strip link defaults */
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s var(--ease-out);
}

a.footer-top:hover {
  opacity: 0.85;
}
a.footer-top:hover .footer-seal {
  transform: rotate(-3deg);
}
.footer-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease-power);
}

/* Let clicks on the seal pass through to the parent <a class="footer-top"> */
.footer-seal svg {
  pointer-events: none;
}

.footer-wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-firm {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--bone);
}

.footer-sub {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(245, 241, 232, 0.7);
}

.footer-est {
  font-family: var(--serif);
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: #D5A757;
  margin-top: 6px;
  font-weight: 500;
}

.footer-rule {
  height: 0.5px;
  background: rgba(245, 241, 232, 0.15);
  margin-bottom: 3rem;
}

.footer-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .footer-meta { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

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

.footer-col a,
.footer-col span {
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(245, 241, 232, 0.7);
  transition: color 0.3s var(--ease-out);
}

.footer-col a:hover {
  color: var(--brass-warm);
}

.footer-col-heading {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-warm);
  margin-bottom: 8px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 0.5px solid rgba(245, 241, 232, 0.1);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(245, 241, 232, 0.7);
}

@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ==========================================================================
   REVEAL / ANIMATION UTILITIES

   Previously: per-word splitting with overflow-clipped inline-block spans.
   Issue: fragile on mobile — baseline drift on iOS Safari, subpixel rounding
   flickers, reflow cascades when many elements animate in close succession.
   Dan (team review) noticed text visibly jumping on mobile.

   Replaced with: whole-element fade + 12px lift. Same visual spirit (content
   arrives gently as the reader scrolls), no per-word DOM complications. This
   is what major editorial sites (NYT, FT, New Yorker) actually use.
   ========================================================================== */

.reveal-lines,
.reveal-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}

.reveal-lines.in-view,
.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Once the element is revealed and no further animation is needed, drop the
   will-change hint so the GPU can release the compositor layer. This prevents
   memory bloat on pages with many reveal-animated elements. */
.reveal-lines.reveal-done,
.reveal-item.reveal-done {
  will-change: auto;
  transform: none;
}

/* Users who prefer reduced motion: show content instantly, no animation */
@media (prefers-reduced-motion: reduce) {
  .reveal-lines,
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .stats, .services, .clients, .story {
    padding: 6rem 0;
  }

  .contact-form { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   CONTACT FORM — submission states (honeypot, error, success)
   ========================================================================== */

/* Honeypot: visually hidden but still focusable by bots */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Loading state on submit button */
.btn-seal.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.btn-seal.is-loading .btn-seal-icon svg {
  animation: seal-spin 1.2s linear infinite;
}
@keyframes seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Inline error message below the button */
.form-error {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: rgba(107, 31, 34, 0.06);
  border-left: 2px solid var(--oxblood);
  color: var(--oxblood);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Success state — replaces the form in-place after successful submit */
.contact-success {
  padding: 3.5rem 3rem;
  background: #fff;
  border-top: 3px solid var(--oxblood);
  text-align: center;
  animation: success-fade-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes success-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.contact-success .success-seal {
  display: block;
  margin: 0 auto 1.5rem;
  animation: success-seal-press 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes success-seal-press {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.contact-success .success-kicker {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-warm);
  margin-bottom: 1rem;
}

.contact-success .success-title {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 1.25rem 0;
}

.contact-success .success-lede {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 440px;
  margin: 0 auto 1.75rem;
}

.contact-success .success-sign {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--oxblood);
  margin: 0;
}
.contact-success .success-sign em {
  font-style: italic;
}

@media (max-width: 768px) {
  .contact-success { padding: 2.5rem 1.5rem; }
  .contact-success .success-title { font-size: 2rem; }
}