/* ─────────────────────────────────────────
   PAGE HEROES — per-page hero variants
   Shared family: same Fraunces XL, same eyebrow,
   same accent, same hairlines. Composition varies.
   ───────────────────────────────────────── */

/* ===== Common scaffold ===== */
.page-hero {
  position: relative;
  padding-top: clamp(7rem, 11vw, 10rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.page-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Subtle hairline drift in the background corners — uniform brand thread */
.page-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.page-hero__bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(107,138,31,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,138,31,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(60% 80% at 70% 20%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 80% at 70% 20%, #000 0%, transparent 80%);
  opacity: 0.7;
}

/* ───── 1 · SERVICES — index numeral split ───── */
.page-hero--services { padding-bottom: 0; }
.page-hero--services .ph-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 1024px) {
  .page-hero--services .ph-index-grid {
    grid-template-columns: minmax(160px, 26%) 1fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
}
.page-hero--services .ph-index {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(7rem, 16vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.page-hero--services .ph-index::after {
  content: '';
  position: absolute;
  left: 0.05em;
  bottom: -0.18em;
  width: 0.3em;
  height: 6px;
  background: var(--accent);
  border-radius: 4px;
  animation: phIndexBar 2.8s ease-in-out infinite alternate;
}
@keyframes phIndexBar {
  0%   { width: 0.3em; opacity: 0.6; }
  100% { width: 1.4em; opacity: 1; }
}
.page-hero--services .ph-stat-strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-hero--services .ph-stat-strip__cell {
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.page-hero--services .ph-stat-strip__cell:last-child { border-right: 0; }
.page-hero--services .ph-stat-strip__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.page-hero--services .ph-stat-strip__num em { color: var(--accent); font-style: normal; }
.page-hero--services .ph-stat-strip__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .page-hero--services .ph-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .page-hero--services .ph-stat-strip__cell:nth-child(2) { border-right: 0; }
  .page-hero--services .ph-stat-strip__cell:nth-child(1),
  .page-hero--services .ph-stat-strip__cell:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

/* ───── 2 · METHOD — pull quote + center guide line ───── */
.page-hero--method { text-align: center; padding-bottom: clamp(4rem, 7vw, 6rem); }
.page-hero--method .ph-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto 1.5rem;
  color: var(--ink-muted);
  position: relative;
}
.page-hero--method .ph-pullquote em {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: phMethodShift 7s ease-in-out infinite;
  font-style: italic;
}
@keyframes phMethodShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.page-hero--method .ph-eyebrow-mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.page-hero--method .ph-eyebrow-mark .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: phMethodPulse 1.6s ease-in-out infinite;
}
@keyframes phMethodPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,138,31,0.55); }
  50%     { box-shadow: 0 0 0 6px rgba(107,138,31,0); }
}
.page-hero--method h1 { margin: 0 auto; max-width: 22ch; }
.page-hero--method .ph-lede { max-width: 38ch; margin: 1.5rem auto 0; }
.page-hero--method .ph-guide {
  position: relative;
  display: block;
  width: 1px;
  height: 70px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  background: linear-gradient(to bottom, transparent, var(--ink-muted), transparent);
  overflow: hidden;
}
.page-hero--method .ph-guide::before {
  content: '';
  position: absolute; left: -2px;
  top: 0;
  width: 5px; height: 14px;
  background: var(--accent);
  border-radius: 2px;
  filter: blur(0.5px);
  animation: phMethodGuide 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes phMethodGuide {
  0%   { top: -14px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 70px; opacity: 0; }
}

/* ───── 3 · ABOUT — asymmetric split with micro-facts ───── */
.page-hero--about .ph-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 1024px) {
  .page-hero--about .ph-about-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.7fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.page-hero--about .ph-facts {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 1023px) {
  .page-hero--about .ph-facts { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.5rem; }
}
.page-hero--about .ph-fact {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.page-hero--about .ph-fact__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-hero--about .ph-fact__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-hero--about .ph-fact__value em { color: var(--accent); font-style: normal; }
.page-hero--about .ph-fact__hint {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ───── 4 · CAREERS — rotating word + counter ───── */
.page-hero--careers .ph-careers-meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.page-hero--careers .ph-counter {
  display: flex; align-items: baseline; gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
}
.page-hero--careers .ph-counter__num {
  display: inline-flex; align-items: baseline;
  font-feature-settings: "tnum" 1;
}
.page-hero--careers .ph-counter__num em { color: var(--accent); font-style: normal; padding-left: 0.05em; }
.page-hero--careers .ph-counter__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-hero--careers .ph-positions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.page-hero--careers .ph-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-elev);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.page-hero--careers .ph-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #18a957;
  animation: phCareersPulse 1.6s ease-in-out infinite;
}
@keyframes phCareersPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(24,169,87,0.55); }
  50%     { box-shadow: 0 0 0 5px rgba(24,169,87,0); }
}
.page-hero--careers .ph-pill:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ───── 5 · JOURNAL — magazine masthead ───── */
.page-hero--journal {
  text-align: left;
}
.page-hero--journal .ph-masthead {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.page-hero--journal .ph-masthead__issue { color: var(--accent); }
.page-hero--journal .ph-masthead__sep { opacity: 0.4; }
.page-hero--journal .ph-journal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-block;
  position: relative;
}
.page-hero--journal .ph-journal-title em {
  font-style: italic;
  color: var(--accent);
}
.page-hero--journal .ph-journal-title::after {
  content: '';
  display: inline-block;
  width: 0.18em; height: 0.18em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.18em;
  margin-left: 0.05em;
  animation: phJournalDot 1.8s ease-in-out infinite;
}
@keyframes phJournalDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.15); }
}

/* ───── 6 · CONTACT — clock + asymmetric ───── */
.page-hero--contact { padding-bottom: clamp(3rem, 5vw, 4rem); }
.page-hero--contact .ph-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 1024px) {
  .page-hero--contact .ph-contact-grid {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 0.6fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.page-hero--contact .ph-clock {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.5rem;
  background: var(--bg-elev);
}
.page-hero--contact .ph-clock__ring {
  position: relative;
  width: 64px; height: 64px;
}
.page-hero--contact .ph-clock__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.page-hero--contact .ph-clock__ring circle.track { fill: none; stroke: var(--line); stroke-width: 2; }
.page-hero--contact .ph-clock__ring circle.fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 175.93;
  stroke-dashoffset: 0;
  animation: phContactRing 4s linear infinite;
}
@keyframes phContactRing {
  0%   { stroke-dashoffset: 175.93; }
  100% { stroke-dashoffset: -175.93; }
}
.page-hero--contact .ph-clock__hand {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.page-hero--contact .ph-clock__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-hero--contact .ph-clock__time {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-hero--contact .ph-clock__time em { color: var(--accent); font-style: normal; }
.page-hero--contact .ph-channels {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .page-hero--contact .ph-channels {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-hero--contact .ph-channel {
  padding: 1.25rem 1.25rem 1.25rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.3rem;
}
@media (min-width: 760px) {
  .page-hero--contact .ph-channel { border-bottom: 0; border-right: 1px solid var(--line); padding-left: 1.25rem; }
  .page-hero--contact .ph-channel:first-child { padding-left: 0; }
  .page-hero--contact .ph-channel:last-child { border-right: 0; }
}
.page-hero--contact .ph-channel__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-hero--contact .ph-channel__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ───── 7 · ABOUT-US — already has a unique feel from origin block ───── */
.page-hero--about-us .ph-aboutus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 1024px) {
  .page-hero--about-us .ph-aboutus-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}
.page-hero--about-us .ph-marker {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.page-hero--about-us .ph-marker__row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.page-hero--about-us .ph-marker__row:last-child { border-bottom: 0; padding-bottom: 0; }
.page-hero--about-us .ph-marker__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.page-hero--about-us .ph-marker__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  .page-hero--services .ph-index::after,
  .page-hero--method .ph-pullquote em,
  .page-hero--method .ph-eyebrow-mark .dot,
  .page-hero--method .ph-guide::before,
  .page-hero--careers .ph-pill .dot,
  .page-hero--journal .ph-journal-title::after,
  .page-hero--contact .ph-clock__ring circle.fill {
    animation: none !important;
  }
}