/*
Theme Name: Ryan Hawkes
Theme URI: https://ryanhawkes.com
Author: Yinka Oyebanjo-Odofin / OXYGN
Description: Custom WordPress theme for ryanhawkes.com — matches the live Webflow site's design system and content exactly (Capital, Financing & Acquisitions service line intentionally excluded per 2026-08-28 positioning decision). No page builder, fully custom-coded, built for use with the free Secure Custom Fields plugin (optional — the theme renders correct default content without it).
Version: 1.0.9
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ryan-hawkes
*/

/* ==========================================================================
   Design tokens — sampled from the live site's screenshots (see project
   brief: ryan-hawkes-visual-design-and-content-brief.md)
   ========================================================================== */

:root {
  --rh-bg: #000000;
  --rh-bg-alt: #0a0a0a;
  --rh-surface: #151515;
  --rh-surface-alt: #212121;
  --rh-text: #f0efec;
  --rh-text-strong: #ffffff;
  --rh-text-secondary: #b8b8b8;
  --rh-accent: #fbe74d;
  --rh-accent-contrast: #000000;
  --rh-divider: #5ea378;
  --rh-border: rgba(240, 239, 236, 0.14);
  --rh-border-strong: rgba(240, 239, 236, 0.28);

  --rh-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --rh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rh-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rh-container: 1200px;
  --rh-gutter: clamp(20px, 5vw, 64px);
  --rh-radius: 2px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--rh-bg);
  color: var(--rh-text);
  font-family: var(--rh-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--rh-font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  color: var(--rh-text-strong);
}

h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

p { margin: 0 0 1.25em; color: var(--rh-text-secondary); }
p strong, p b { color: var(--rh-text-strong); font-weight: 600; }

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

.rh-section {
  padding: clamp(56px, 10vw, 128px) 0;
  position: relative;
}

.rh-section--alt { background: var(--rh-bg-alt); }

/* ==========================================================================
   Component: eyebrow label  (— WHO I AM)
   ========================================================================== */

.rh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rh-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
  margin-bottom: 20px;
}

.rh-eyebrow::before {
  content: "—";
  color: var(--rh-accent);
  font-weight: 700;
}

/* ==========================================================================
   Component: numbered section header  (01 ADVISORY & DESIGN)
   ========================================================================== */

.rh-section-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rh-border);
}

.rh-section-header__number {
  font-family: var(--rh-font-mono);
  color: var(--rh-accent);
  font-size: 1rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.rh-section-header h2,
.rh-section-header h3 { margin: 0; }

/* ==========================================================================
   Component: pill / tag badge  (22 YEARS INSIDE)
   ========================================================================== */

.rh-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }

.rh-pill {
  border: 1px solid var(--rh-border-strong);
  border-radius: var(--rh-radius);
  padding: 8px 14px;
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
  background: transparent;
}

/* ==========================================================================
   Component: pillar card  (2-col grid, arrow icon)
   ========================================================================== */

.rh-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rh-border);
  border: 1px solid var(--rh-border);
  margin: 40px 0;
}

.rh-pillar-card {
  background: var(--rh-bg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color 0.2s ease;
}

.rh-pillar-card:hover { background: var(--rh-surface); }

.rh-pillar-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rh-pillar-card h3 { margin: 0; font-size: 1.3rem; }

.rh-pillar-card__arrow {
  color: var(--rh-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.rh-pillar-card:hover .rh-pillar-card__arrow { transform: translateX(4px); }

.rh-pillar-card p { margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   Component: photo with caption overlay
   ========================================================================== */

.rh-photo {
  position: relative;
  overflow: hidden;
  background: var(--rh-surface);
  aspect-ratio: 4 / 3;
}

.rh-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.rh-photo:hover img { transform: scale(1.04); }

.rh-photo__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 14px;
  font-family: var(--rh-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-text-strong);
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  width: 100%;
}

.rh-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rh-border-strong);
  color: var(--rh-text-secondary);
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 20px;
}

.rh-photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}

/* Research & Analysis grid: the first 4 photos are portrait shots and
   sit one-per-column across a 4-column row; the remaining photos are
   landscape and each span 2 columns, pairing up two-per-row. This
   follows the real aspect ratios of the source photos rather than
   forcing every image into the same box. */
.rh-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.rh-photo-grid .rh-photo:nth-child(-n+4) { aspect-ratio: 3 / 4; }

.rh-photo-grid .rh-photo:nth-child(n+5) {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
  .rh-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .rh-photo-grid .rh-photo:nth-child(-n+4) { grid-column: span 1; }
}

@media (max-width: 560px) {
  .rh-photo-grid { grid-template-columns: 1fr; }
  .rh-photo-grid .rh-photo:nth-child(-n+4),
  .rh-photo-grid .rh-photo:nth-child(n+5) { grid-column: span 1; }
}

@media (max-width: 640px) {
  .rh-photo-row { grid-template-columns: 1fr 1fr; }
}

/* Full-bleed photo break — a wide, cinematic visual pause between text
   blocks with no caption competing for attention. Place rh_photo()
   directly inside a section (not inside .rh-container) to get the
   edge-to-edge width. */
.rh-photo--bleed {
  aspect-ratio: 21 / 9;
  margin: 48px 0;
}

.rh-photo--bleed .rh-photo__caption { display: none; }

@media (max-width: 720px) {
  .rh-photo--bleed { aspect-ratio: 4 / 3; }
}

/* A quieter, more minimal photo row — fewer columns, generous gaps,
   and a plain caption set below the image instead of overlaid on it. */
.rh-photo-row--minimal {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 0;
}

.rh-photo-row--minimal .rh-photo {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}

.rh-photo-row--minimal .rh-photo img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.rh-photo-row--minimal .rh-photo__caption {
  position: static;
  display: block;
  width: auto;
  background: none;
  padding: 14px 0 0;
  color: var(--rh-text-secondary);
}

@media (max-width: 640px) {
  .rh-photo-row--minimal { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Component: nav bar
   ========================================================================== */

.rh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rh-bg);
  border-bottom: 1px solid var(--rh-border);
  transition: box-shadow 0.25s ease;
}

.rh-header.is-scrolled { box-shadow: 0 12px 24px -12px rgba(0,0,0,0.55); }

/* WordPress's admin bar is position:fixed at the very top of the
   viewport (32px tall, 46px on narrow screens) whenever a logged-in
   user with the toolbar enabled is viewing the front end. Our own
   header is also stuck to the top (top: 0) via position: sticky, so
   once the page scrolls the two overlap and the header appears clipped
   behind the admin bar. Nudge the sticky offset down by the admin bar's
   height only when it's present (WP adds body.admin-bar automatically);
   visitors who aren't logged in never see this and are unaffected. */
body.admin-bar .rh-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .rh-header { top: 46px; }
}

.rh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--rh-gutter);
}

.rh-logo {
  font-family: var(--rh-font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--rh-text-strong);
  text-transform: uppercase;
}

.rh-nav { display: flex; align-items: center; gap: 32px; }

.rh-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }

/* Scoped to "ul a" (the actual menu links), not every anchor in the
   nav — the "Book a Call" button lives in .rh-nav as a sibling of the
   <ul>, and this used to match it too. Since ".rh-nav a" (class+tag)
   out-specifies ".rh-btn--primary" (single class) regardless of source
   order, that was overriding the button's intended black text with
   this gray secondary color. */
.rh-nav ul a {
  font-family: var(--rh-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
  transition: color 0.2s ease;
}

.rh-nav ul a:hover { color: var(--rh-text-strong); }

.rh-nav li { position: relative; }

/* Dropdown for nested menu items (e.g. a "Home" item with child pages
   under it in wp-admin) — hidden until hovered/focused instead of
   wrapping inline onto a second line, which is what happens without
   this since .rh-nav ul otherwise matches every <ul>, nested ones
   included. */
@media (min-width: 881px) {
  .rh-nav ul ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin-top: 12px;
    padding: 14px 18px;
    gap: 12px;
    background: var(--rh-bg);
    border: 1px solid var(--rh-border);
    z-index: 30;
  }

  .rh-nav li:hover > ul,
  .rh-nav li:focus-within > ul {
    display: flex;
  }
}

.rh-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rh-border-strong);
  color: var(--rh-text-strong);
  padding: 8px 10px;
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .rh-nav-toggle { display: inline-block; }
  .rh-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--rh-bg); border-bottom: 1px solid var(--rh-border); flex-direction: column; align-items: flex-start; padding: 20px var(--rh-gutter); display: none; }
  .rh-nav.is-open { display: flex; }
  .rh-nav ul { flex-direction: column; gap: 16px; }
  .rh-nav ul ul { padding-left: 16px; margin-top: 10px; gap: 12px; }
}

/* ==========================================================================
   Component: buttons
   ========================================================================== */

.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  font-family: var(--rh-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rh-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.rh-btn:active { transform: translateY(0); }

.rh-btn--primary { background: var(--rh-accent); color: var(--rh-accent-contrast); }
.rh-btn--ghost { background: transparent; color: var(--rh-accent); border-color: var(--rh-accent); }

.rh-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

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

.rh-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  background: var(--rh-bg) var(--rh-hero-image, none) center / cover no-repeat;
  padding-bottom: 56px;
}

.rh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.82) 100%);
}

.rh-hero__tag {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--rh-gutter);
}

.rh-hero__tag-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--rh-accent);
  flex-shrink: 0;
}

.rh-hero__tag span:last-child {
  font-family: var(--rh-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

.rh-hero__content { max-width: 760px; }

.rh-hero__sub {
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

.rh-hero__services {
  font-family: var(--rh-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
  margin: 20px 0 0;
}

.rh-hero__subscribe {
  margin-top: 20px;
  font-family: var(--rh-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

/* ==========================================================================
   Full-bleed photo banner with overlaid text (Speaking, etc.) — same
   idea as the hero, reusable for any section that's a background photo
   with a dark gradient and text on top rather than a boxed photo.
   ========================================================================== */

.rh-banner {
  position: relative;
  background: var(--rh-bg) var(--rh-banner-image, none) center / cover no-repeat;
  padding: clamp(64px, 12vw, 140px) 0;
}

.rh-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.82) 100%);
}

.rh-banner__content { position: relative; z-index: 1; max-width: 760px; }

.rh-cta-line {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--rh-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-accent);
}

.rh-cta-line:hover { text-decoration: underline; }

/* Plain email link variant (e.g. the "Let's Build" closer) — lowercase,
   always underlined, no uppercase tracking since it's a literal address. */
.rh-cta-line--email {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--rh-border-strong);
  text-underline-offset: 8px;
  margin-top: 36px;
}

.rh-cta-line--email:hover { text-decoration-color: var(--rh-accent); }

/* ==========================================================================
   Utility layout
   ========================================================================== */

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

@media (max-width: 820px) {
  .rh-two-col { grid-template-columns: 1fr; }
}

/* Full-bleed text/photo split — e.g. "Who I Am": text column keeps the
   normal container gutter, photo column bleeds edge-to-edge with no
   caption, filling the full section height. */
.rh-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
}

.rh-bio__text {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 96px) var(--rh-gutter);
}

.rh-bio__text > div { max-width: 620px; }

.rh-bio__photo { position: relative; min-height: 480px; background: var(--rh-surface); }

.rh-bio__photo .rh-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
}

.rh-bio__photo .rh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* .rh-bio uses align-items: stretch, so this photo box's rendered
     height follows the (variable, copy-length-dependent) height of the
     text column beside it. With object-fit: cover's default 50% 50%
     center crop, a taller-than-expected box crops the top of the head
     off a portrait. Bias toward the top so the face stays in frame
     regardless of exact box height. */
  object-position: center 15%;
}

.rh-bio__photo .rh-photo__caption { display: none; }

.rh-bio__photo .rh-photo--placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

@media (max-width: 900px) {
  .rh-bio { grid-template-columns: 1fr; }
  .rh-bio__photo { min-height: 360px; }
}

/* Stacked variant — e.g. "The Build Team": the photo column holds a
   tall portrait with a two-photo caption row underneath it, instead
   of a single photo bleeding the full section height. The text
   column top-aligns rather than centering, since it's shorter than
   the photo stack beside it. */
.rh-bio--stacked { align-items: start; }

.rh-bio--stacked .rh-bio__text { align-items: flex-start; }

.rh-bio--stacked .rh-bio__sub { margin-top: 36px; }

.rh-bio--stacked .rh-bio__photo {
  position: static;
  min-height: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(56px, 8vw, 96px) var(--rh-gutter) clamp(56px, 8vw, 96px) 0;
}

.rh-bio--stacked .rh-bio__photo > .rh-photo {
  position: static;
  height: auto;
  aspect-ratio: 4 / 5;
}

.rh-bio--stacked .rh-bio__photo .rh-photo-row--minimal {
  margin: 0;
  gap: 24px;
}

.rh-bio--stacked .rh-bio__photo .rh-photo-row--minimal .rh-photo {
  position: static;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}

.rh-bio--stacked .rh-bio__photo .rh-photo-row--minimal .rh-photo img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rh-bio--stacked .rh-bio__photo .rh-photo-row--minimal .rh-photo__caption {
  display: block;
  position: static;
  width: auto;
  background: none;
  padding: 14px 0 0;
  color: var(--rh-text-secondary);
}

@media (max-width: 900px) {
  .rh-bio--stacked .rh-bio__photo { padding: 0 var(--rh-gutter) clamp(56px, 8vw, 96px); }
}

/* ==========================================================================
   Component: intelligence subscribe box (Intelligence page)
   ========================================================================== */

.rh-intel-box {
  border: 1px solid var(--rh-border);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.rh-intel-box__text { max-width: 640px; }

.rh-intel-box__text h3 { margin-bottom: 16px; }

.rh-intel-box__text p { margin: 0; }

.rh-intel-box__cta { flex-shrink: 0; }

@media (max-width: 640px) {
  .rh-intel-box { flex-direction: column; align-items: flex-start; }
  .rh-intel-box__cta { width: 100%; }
  .rh-intel-box__cta .rh-btn { width: 100%; text-align: center; }
}

.rh-divider {
  height: 3px;
  background: var(--rh-divider);
  border: none;
  margin: 0;
}

.rh-lead { font-size: 1.15rem; color: var(--rh-text); }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.rh-page-hero { padding-top: 96px; padding-bottom: 48px; border-bottom: 1px solid var(--rh-border); }

.rh-page-hero .rh-eyebrow { margin-bottom: 16px; }

.rh-page-hero__subhead { font-size: 1.1rem; max-width: 640px; }

/* ==========================================================================
   Cards for CPT archives (Guides / Reports / Podcast / Press)
   ========================================================================== */

.rh-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.rh-card {
  border: 1px solid var(--rh-border);
  display: flex;
  flex-direction: column;
}

.rh-card__media { aspect-ratio: 16/10; background: var(--rh-surface); }
.rh-card__media img { width: 100%; height: 100%; object-fit: cover; }

.rh-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.rh-card__kicker {
  font-family: var(--rh-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-accent);
}

.rh-card h3 { font-size: 1.1rem; margin: 0; }

.rh-card p { font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

.rh-form { max-width: 640px; }

.rh-form label {
  display: block;
  font-family: var(--rh-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
  margin-bottom: 8px;
}

.rh-form-row { margin-bottom: 20px; }

.rh-form input,
.rh-form textarea {
  width: 100%;
  background: var(--rh-surface);
  border: 1px solid var(--rh-border-strong);
  color: var(--rh-text-strong);
  padding: 14px 16px;
  font-family: var(--rh-font-body);
  font-size: 0.95rem;
  border-radius: var(--rh-radius);
}

.rh-form input:focus,
.rh-form textarea:focus { outline: 1px solid var(--rh-accent); }

.rh-form-note {
  font-family: var(--rh-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--rh-border-strong);
}

.rh-form-note--success { color: var(--rh-divider); border-color: var(--rh-divider); }
.rh-form-note--error { color: #e0715a; border-color: #e0715a; }

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

.rh-footer {
  border-top: 1px solid var(--rh-border);
  padding: 48px var(--rh-gutter) 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rh-footer__copy {
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--rh-text-secondary);
}

.rh-footer__social { display: flex; gap: 18px; }

.rh-footer__social a {
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

.rh-footer__social a:hover { color: var(--rh-accent); }

.rh-footer__tagline {
  font-family: var(--rh-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

@media (max-width: 700px) {
  /* Only wrap the tagline onto its own line once the footer gets tight
     enough that a single row would crowd the social links. */
  .rh-footer__tagline {
    width: 100%;
    border-top: 1px solid var(--rh-border);
    padding-top: 20px;
    margin-top: 12px;
  }
}

/* ==========================================================================
   Scroll-reveal (subtle, matches "editorial, restrained" feel)
   ========================================================================== */

.rh-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rh-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* A light stagger so items in the same row/grid don't all pop in at
   once — subtle, not a slideshow. */
.rh-photo-row .rh-reveal:nth-child(2),
.rh-photo-grid .rh-reveal:nth-child(2),
.rh-pillar-grid .rh-reveal:nth-child(2) { transition-delay: 0.08s; }
.rh-photo-row .rh-reveal:nth-child(3),
.rh-photo-grid .rh-reveal:nth-child(3) { transition-delay: 0.16s; }
.rh-photo-grid .rh-reveal:nth-child(4) { transition-delay: 0.24s; }

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

/* Keep the Who I Am portrait uncropped, independently of text height. */
#who-i-am .rh-bio__photo {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  background: var(--rh-bg-alt);
}

#who-i-am .rh-bio__photo > .rh-photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
}

#who-i-am .rh-bio__photo > .rh-photo img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Homepage cover and navigation matched to the approved Webflow design. */
.rh-header__inner { padding: 16px clamp(24px, 4vw, 56px); }
.rh-logo { flex-shrink: 0; }
.rh-nav > ul { flex-wrap: nowrap; align-items: center; }
.rh-nav > ul > li > a { white-space: nowrap; letter-spacing: .14em; }
.rh-header .rh-btn--primary { background: #ffe600; color: #000; border-radius: 0; padding: 11px 20px; white-space: nowrap; }
.rh-hero { display: block; height: 70vh; min-height: 520px; padding: 0; overflow: hidden; background: var(--rh-bg-alt); }
.rh-hero::before { content: none; }
.rh-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 22% center; }
#intro { padding: 52px 56px 68px; border-bottom: 1px solid var(--rh-border); }
#intro > .rh-container { max-width: none; padding: 0; }
#intro .rh-hero__content { max-width: none; }
#intro .rh-hero__tag { padding: 0; }
#intro h1 { font-size: clamp(40px, 7.5vw, 104px); line-height: .9; margin: 14px 0 26px; }
#intro .rh-lead { max-width: 760px; }
#who-i-am .rh-photo:hover img { transform: none; }
@media (max-width: 1100px) and (min-width: 881px) {
  .rh-nav { gap: 18px; }
  .rh-nav > ul { gap: 18px; }
  .rh-nav > ul > li > a { letter-spacing: .06em; font-size: .65rem; }
}
@media (max-width: 767px) {
  .rh-hero { height: 56vh; min-height: 360px; }
  #intro { padding: 34px 24px 44px; }
  #intro h1 { font-size: clamp(34px, 9vw, 58px); }
}
@media (max-width: 600px) { body.admin-bar .rh-header { top: 0; } }

/* Accessible navigation without changing the normal visual layout. */
.rh-skip-link { position: fixed; top: -200px; left: 16px; z-index: 100000; background: #ffe600; color: #000; padding: 12px 20px; }
.rh-skip-link:focus { top: 48px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 5px; }
[id] { scroll-margin-top: 110px; }
.rh-anchor { display: block; height: 0; }
#main-content:focus { outline: none; }

/* Long-form service copy: retain the theme typography with readable line lengths. */
.rh-service-copy__body { max-width: 820px; }
.rh-service-copy h2 { margin-top: 1.8em; }
.rh-service-copy h2:first-child { margin-top: 0; }
.rh-service-copy .rh-service-stage { display: flex; margin: 64px 0 16px; }
.rh-service-stage + h2 { margin-top: 0; }
.rh-service-copy p a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rh-accent); }
.rh-service-rule { border: 0; border-top: 1px solid var(--rh-border); margin: 48px 0; }

/* The Work: separate design and advisory offerings. */
#the-work .rh-work-copy { max-width: 760px; }
#the-work .rh-work-service { margin-top: clamp(40px, 6vw, 72px); }
#the-work .rh-work-advisory-detail { margin-top: 32px; }
#the-work .rh-work-advisory-detail h4 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 20px;
}

/* Advisory continuum: native disclosures remain usable without JavaScript. */
.rh-journey {
  position: relative;
  margin: 56px 0 72px;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 32px);
  border-block: 1px solid var(--rh-border);
  text-align: center;
  background: radial-gradient(ellipse at 50% 48%, rgba(251,231,77,.07), transparent 68%);
}
.rh-journey__intro { max-width: 620px; margin: 0 auto 40px; }
.rh-journey__track { position: relative; }
.rh-journey__track::before {
  content: ""; position: absolute; top: 44px; left: 0; right: 0;
  border-top: 1px dashed var(--rh-accent); opacity: .5;
  transform-origin: left; transition: transform 1s ease;
}
.rh-journey.is-awaiting .rh-journey__track::before { transform: scaleX(0); }
.rh-journey__endpoint {
  display: block; text-align: left; font-family: var(--rh-font-mono);
  font-size: .65rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rh-text-secondary);
}
.rh-journey__endpoint:last-child { text-align: right; margin-top: 24px; }
.rh-journey__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.rh-journey__stage { position: relative; min-width: 0; }
.rh-journey__stage summary {
  cursor: pointer; list-style: none; font-family: var(--rh-font-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rh-text-secondary); padding: 0 4px 12px;
}
.rh-journey__stage summary::-webkit-details-marker { display: none; }
.rh-journey__stage summary:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 6px; }
.rh-journey__stage[open] summary, .rh-journey__stage summary:hover { color: var(--rh-accent); }
.rh-journey__dot {
  display: block; width: 10px; height: 10px; margin: 0 auto 20px;
  border: 1px solid var(--rh-accent); border-radius: 50%; background: var(--rh-bg);
  transition: background .2s, box-shadow .2s;
}
.rh-journey__stage[open] .rh-journey__dot {
  background: var(--rh-accent); box-shadow: 0 0 16px rgba(251,231,77,.4);
}
.rh-journey__description { font-size: .9rem; padding: 8px 0 16px; }
.rh-journey__description .rh-cta-line { font-size: .8rem; }
.rh-journey__measure { margin: 40px 0 16px; }
.rh-journey__quote {
  margin: 0; color: var(--rh-accent); font-family: var(--rh-font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2;
}
.rh-service-stage[id] { scroll-margin-top: 110px; }
@media (max-width: 600px) {
  .rh-journey__track::before { top: 32px; bottom: 32px; left: 5px; right: auto; border-top: 0; border-left: 1px dashed var(--rh-accent); transform-origin: top; }
  .rh-journey.is-awaiting .rh-journey__track::before { transform: scaleY(0); }
  .rh-journey__stages { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .rh-journey__stage summary { display: flex; align-items: center; gap: 16px; padding: 0; min-height: 44px; }
  .rh-journey__dot { margin: 0; flex-shrink: 0; }
  .rh-journey__description { padding-left: 30px; }
  .rh-journey__endpoint, .rh-journey__endpoint:last-child { text-align: left; padding-left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-journey__track::before, .rh-journey__dot { transition: none; }
  .rh-journey.is-awaiting .rh-journey__track::before { transform: none; }
}

.rh-work-explore { font-size: clamp(.9rem, 1.5vw, 1.1rem); padding: 20px 28px; max-width: 100%; text-align: center; letter-spacing: .05em; }
.rh-work-explore:hover { background: var(--rh-accent); color: var(--rh-accent-contrast); }
.rh-work-explore:focus-visible, .rh-speaking-form :focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 4px; }
.rh-speaking-form { max-width: 820px; }
.rh-speaking-form select { width: 100%; padding: 14px; border: 1px solid var(--rh-border-strong); border-radius: 4px; background: var(--rh-surface); color: var(--rh-text); font: inherit; }
.rh-speaking-form .rh-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Align the continuum endpoints with the journey, independent of open stages. */
.rh-journey__endpoints { display: flex; align-items: center; justify-content: space-between; min-height: 20px; gap: 16px; }
.rh-journey__endpoints .rh-journey__endpoint:last-child { margin-top: 0; }
@media (min-width: 901px) {
  .rh-journey__intro { max-width: none; font-size: clamp(.8rem, .95vw, .95rem); white-space: nowrap; }
}
@media (min-width: 601px) {
  .rh-journey__stages { margin-top: 24px; }
  .rh-journey__track::before { top: 49px; }
}
@media (max-width: 600px) {
  .rh-journey__track { display: flex; flex-direction: column; }
  .rh-journey__endpoints { display: contents; }
  .rh-journey__endpoints .rh-journey__endpoint:first-child { order: 0; }
  .rh-journey__stages { order: 1; }
  .rh-journey__endpoints .rh-journey__endpoint:last-child { order: 2; margin-top: 24px; }
}