/* =========================================================
   AURORA SHELL — sitewide additions layered over styles.css
   Affects: logo size, cursor light, film grain, scroll reveals,
   header morph on scroll, copper hover accents.
   ========================================================= */

:root {
  --aurora-copper: #C48A44;
  --aurora-copper-soft: #d9b27a;
}

/* ---------- Larger logo across the site (bumped +60% on header) ---------- */
.brand-logo,
.brand img,
.footer-logo {
  width: 122px !important;
  height: 122px !important;
  filter: drop-shadow(0 4px 18px rgba(196,138,68,0.30));
  transition: width .35s ease, height .35s ease;
}
.site-header.scrolled .brand-logo,
.site-header.scrolled .brand img {
  width: 90px !important;
  height: 90px !important;
}
.footer-logo { width: 96px !important; height: 96px !important; }
.brand { gap: 18px !important; }

/* ---------- Header morph (scrolled state — added by JS) ---------- */
.site-header {
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
  background: rgba(6, 18, 32, 0.96) !important;
  border-bottom: 1px solid rgba(196,138,68,0.18);
  box-shadow: 0 8px 32px rgba(6,18,32,0.18);
}
.site-header.scrolled .brand,
.site-header.scrolled .nav-link,
.site-header.scrolled .nav-links a {
  color: #F8F6EF !important;
}
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-links a:hover {
  color: var(--aurora-copper) !important;
}

/* ---------- Cursor warm-light follower ---------- */
.aurora-cursor-light {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  background: radial-gradient(circle, rgba(196,138,68,0.22) 0%, rgba(196,138,68,0.07) 35%, transparent 65%);
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(50vw, 50vh, 0);
  opacity: 0;
  transition: opacity .4s ease;
}
body.aurora-has-cursor .aurora-cursor-light { opacity: 1; }

/* ---------- Global film grain ---------- */
.aurora-grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: multiply;
}

/* ---------- Scroll-reveal (auto-applied to .reveal and section blocks) ---------- */
.aurora-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.aurora-reveal.in-view { opacity: 1; transform: translateY(0); }

/* The existing styles.css uses .reveal too — preserve that behavior
   but make sure transitions are buttery. */
.reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }

/* ---------- Copper hover accents on links ---------- */
a:not(.brand):not(.nav-cta):not(.service-row) {
  transition: color .25s ease;
}
.nav-link:hover { color: var(--aurora-copper) !important; }

/* ---------- Smooth page-in fade ---------- */
@keyframes aurora-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: aurora-fade-in .6s ease both; }

/* =========================================================
   CINEMATIC HERO TREATMENT (inner pages)
   Hides the 3D wireframes and replaces them with a
   page-specific cinematic photograph + Aurora gradient.
   ========================================================= */

/* Kill all 3D wireframe / spirograph canvases site-wide */
.wireframe-stage,
.wireframe-stage canvas,
.spiro-stage,
.spiro-stage canvas,
canvas[data-three],
canvas[data-spirograph],
#waveCanvas {
  display: none !important;
}

/* Inner-page hero shell */
body:not(.page-index) .hero,
body:not(.page-index) section.hero.is-pillar {
  position: relative !important;
  background-color: #061220;
  color: #F8F6EF !important;
  isolation: isolate;
  min-height: 78vh;
  overflow: hidden;
  padding: 120px 0 100px;
  display: flex; align-items: center;
}
body:not(.page-index) .hero::before,
body:not(.page-index) .hero.is-pillar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(95deg, rgba(6,18,32,0.92) 0%, rgba(6,18,32,0.72) 30%, rgba(6,18,32,0.35) 55%, rgba(6,18,32,0.05) 80%, rgba(6,18,32,0) 100%),
    linear-gradient(180deg, rgba(6,18,32,0.25) 0%, rgba(6,18,32,0) 50%, rgba(6,18,32,0.45) 100%),
    var(--aurora-hero-photo, url("images/hero-default.jpg")) !important;
  background-size: cover, cover, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  animation: aurora-kenburns 30s ease-in-out infinite alternate;
  filter: saturate(1.15) contrast(1.05) brightness(0.95);
  pointer-events: none;
  opacity: 1 !important;
}

/* Also override the editorial left rule for inner-page heroes */
body:not(.page-index) .hero.is-pillar::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  background:
    radial-gradient(55% 45% at 22% 35%, rgba(196,138,68,0.32), transparent 70%),
    radial-gradient(45% 40% at 85% 78%, rgba(196,138,68,0.22), transparent 70%) !important;
  mix-blend-mode: screen !important;
  z-index: 1 !important;
  pointer-events: none;
  opacity: 1 !important;
}
body:not(.page-index) .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(55% 45% at 22% 35%, rgba(196,138,68,0.32), transparent 70%),
    radial-gradient(45% 40% at 85% 78%, rgba(196,138,68,0.22), transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
}
body:not(.page-index) .hero > .container,
body:not(.page-index) .hero > * { position: relative; z-index: 2; }

@keyframes aurora-kenburns {
  0%   { transform: scale(1)   translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.2%, -1.5%); }
}

/* Hero content positioning — force left-aligned, constrained width */
body:not(.page-index) .hero,
body:not(.page-index) .hero .hero-inner,
body:not(.page-index) .hero .container {
  text-align: left !important;
}
body:not(.page-index) .hero .container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
}
body:not(.page-index) .hero .hero-inner {
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 920px) {
  body:not(.page-index) .hero .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Text styling inside the dark hero */
body:not(.page-index) .hero .eyebrow,
body:not(.page-index) .hero .eyebrow-block {
  color: var(--aurora-copper) !important;
  text-shadow: 0 2px 12px rgba(6,18,32,0.9), 0 0 24px rgba(6,18,32,0.7) !important;
  font-weight: 600 !important;
}
body:not(.page-index) .hero h1 {
  color: #ffffff !important;
  text-shadow:
    0 4px 32px rgba(6,18,32,0.85),
    0 0 30px rgba(6,18,32,0.55),
    0 1px 0 rgba(6,18,32,0.5) !important;
  max-width: 16ch !important;
}
body:not(.page-index) .hero h1 em,
body:not(.page-index) .hero h1 .it,
body:not(.page-index) .hero h1 i {
  color: #F2C58F !important; font-style: italic;
  text-shadow:
    0 4px 32px rgba(6,18,32,0.95),
    0 0 28px rgba(6,18,32,0.7),
    0 1px 0 rgba(6,18,32,0.6) !important;
}
body:not(.page-index) .hero .subline,
body:not(.page-index) .hero p {
  color: rgba(248,246,239,0.95) !important;
  text-shadow: 0 2px 16px rgba(6,18,32,0.85), 0 0 24px rgba(6,18,32,0.6) !important;
  max-width: 44ch !important;
}
body:not(.page-index) .hero .link,
body:not(.page-index) .hero .cta-row a {
  color: #fff !important;
}
body:not(.page-index) .hero .link-quiet {
  color: rgba(248,246,239,0.7) !important;
}
body:not(.page-index) .hero .link:hover,
body:not(.page-index) .hero .cta-row a:hover {
  color: var(--aurora-copper-soft) !important;
}

/* Breadcrumb sits above hero on inner pages — pull it onto a dark band */
body:not(.page-index) .breadcrumb {
  position: relative; z-index: 5;
  padding: 12px 0; color: rgba(248,246,239,0.7);
}

/* Page-specific cinematic photos
   Each chosen for tone: warm light, atmospheric, reads as "premium" against the Aurora gradient. */
body.page-about              { --aurora-hero-photo: url("images/hero-about.jpg"); }
body.page-business-foundation { --aurora-hero-photo: url("images/hero-business-foundation.jpg"); }
body.page-capital-access     { --aurora-hero-photo: url("images/hero-capital-access.jpg"); }
body.page-case-studies       { --aurora-hero-photo: url("images/hero-case-studies.jpg"); }
body.page-contact            { --aurora-hero-photo: url("images/hero-contact.jpg"); }
body.page-industry-specialists { --aurora-hero-photo: url("images/hero-industry-specialists.jpg"); }
body.page-tax-architecture   { --aurora-hero-photo: url("images/hero-tax-architecture.jpg"); }
body.page-insights           { --aurora-hero-photo: url("images/hero-insights.jpg"); }


/* =========================================================
   TEAM — Editorial Profile Spread (about.html)
   Alternating photo / bio columns, always-visible bios.
   Replaces the old hover-reveal .team-slide layout.
   ========================================================= */
.team-spread {
  display: flex;
  flex-direction: column;
  gap: 110px;
  margin-top: 56px;
}

.team-spread-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

.team-spread-row + .team-spread-row {
  padding-top: 110px;
  border-top: 1px solid var(--line, rgba(15,20,25,0.08));
  margin-top: -110px;
}

.team-spread-row-reverse .team-spread-photo-col { order: 2; }
.team-spread-row-reverse .team-spread-bio-col { order: 1; }

.team-spread-photo-col { position: relative; }

.team-spread-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 2px;
  box-shadow:
    0 36px 80px rgba(15, 20, 25, 0.18),
    0 12px 28px rgba(15, 20, 25, 0.12);
  filter: saturate(1.05) contrast(1.04);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
}

.team-spread-photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 48px 96px rgba(15, 20, 25, 0.22),
    0 14px 32px rgba(15, 20, 25, 0.14);
}

/* Pillar number, displayed faintly behind the bio for editorial rhythm */
.team-spread-num {
  position: absolute;
  top: -28px;
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(80px, 9vw, 140px);
  line-height: 1;
  font-weight: 500;
  color: var(--accent, #A0692B);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
}
.team-spread-row .team-spread-num { left: -16px; }
.team-spread-row-reverse .team-spread-num { right: -16px; left: auto; }

.team-spread-bio-col {
  display: flex;
  flex-direction: column;
  position: relative;
}

.team-spread-role {
  display: inline-block;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent, #A0692B);
  margin-bottom: 18px;
}

.team-spread-name {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--ink, #0F1419);
  margin: 0 0 28px 0;
}

.team-spread-name em {
  font-style: italic;
  color: var(--accent, #A0692B);
  font-weight: 500;
}

.team-spread-body p {
  font-family: var(--sans, "Inter", sans-serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft, #1A1F28);
  margin: 0 0 20px 0;
}

.team-spread-body p:last-child { margin-bottom: 0; }

.team-spread-body em {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent, #A0692B);
  font-size: 1.04em;
}

/* Mobile / narrow tablets — stack photo above bio, kill the alternation */
@media (max-width: 900px) {
  .team-spread { gap: 72px; margin-top: 32px; }

  .team-spread-row,
  .team-spread-row-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .team-spread-row-reverse .team-spread-photo-col { order: 0; }
  .team-spread-row-reverse .team-spread-bio-col { order: 1; }

  .team-spread-row + .team-spread-row {
    padding-top: 72px;
    margin-top: -72px;
  }

  .team-spread-photo {
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
  }

  .team-spread-name {
    font-size: clamp(30px, 7vw, 40px);
    margin-bottom: 18px;
  }

  .team-spread-num {
    font-size: 70px;
    top: -18px;
  }
  .team-spread-row .team-spread-num,
  .team-spread-row-reverse .team-spread-num {
    left: -4px;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-spread-photo { transition: none; }
  .team-spread-photo:hover { transform: none; }
}

/* =========================================================
   PILLAR PAGE INTERSTITIAL IMAGES
   Editorial section breaks between text-heavy blocks on the
   four service pillar pages. Restraint: 1-2 per page max.
   ========================================================= */
.pillar-feature {
  padding: 56px 0;
  position: relative;
}
.pillar-feature-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
}
.pillar-feature-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 36px 80px rgba(15, 20, 25, 0.18),
    0 12px 28px rgba(15, 20, 25, 0.12);
}
.pillar-feature-img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.04);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.pillar-feature-img-wrap:hover .pillar-feature-img {
  transform: scale(1.02);
}
.pillar-feature-caption {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--stone, #5C5C57);
  margin: 22px 0 0 0;
  max-width: 60ch;
  letter-spacing: 0.005em;
}
.pillar-feature-caption::before {
  content: "— ";
  color: var(--accent, #A0692B);
  font-style: normal;
  font-weight: 500;
}

@media (max-width: 720px) {
  .pillar-feature { padding: 36px 0; }
  .pillar-feature-inner { padding: 0 28px; }
  .pillar-feature-img { aspect-ratio: 16 / 10; }
  .pillar-feature-caption { font-size: 15px; margin-top: 16px; }
}

/* =========================================================
   AURORA DRIFT — global ambient light layer
   Three slow-drifting copper "embers" sit behind all page
   content. Fixed-position so the light persists as the
   reader scrolls — same atmosphere, top to bottom.
   Subtle on light backgrounds (just adds warmth), more
   visible against the dark hero photos.
   ========================================================= */
.aurora-drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  /* Behind all content, in front of body bg */
}

/* Body content needs to sit ABOVE the drift layer.
   The site uses .container and section elements that are
   block-level — we lift them with positioning context. */
body > main,
body > footer,
body > .closing,
main,
footer.footer {
  position: relative;
  z-index: 2;
}
.site-header,
body > header {
  position: sticky;
  top: 0;
  z-index: 500;
}

.aurora-drift .ember {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

/* Per-page drift palette — set as CSS custom properties on body.
   The default is the firm's copper. Each page overrides below to
   match the color story of its hero photo. */
:root {
  --drift-c1: 196, 138, 68;   /* primary — warm copper */
  --drift-c2: 160, 105, 43;   /* deep copper */
  --drift-c3: 242, 197, 143;  /* champagne highlight */
}

.aurora-drift .ember-1 {
  width: 52vmax;
  height: 52vmax;
  background: radial-gradient(circle,
    rgba(var(--drift-c1), 0.55) 0%,
    rgba(var(--drift-c1), 0.22) 32%,
    rgba(var(--drift-c1), 0) 62%);
  left: -12%;
  top: -5%;
  animation: aurora-drift-1 14s ease-in-out infinite alternate;
}

.aurora-drift .ember-2 {
  width: 46vmax;
  height: 46vmax;
  background: radial-gradient(circle,
    rgba(var(--drift-c2), 0.50) 0%,
    rgba(var(--drift-c2), 0.20) 32%,
    rgba(var(--drift-c2), 0) 62%);
  right: -10%;
  top: 32%;
  animation: aurora-drift-2 18s ease-in-out infinite alternate;
}

.aurora-drift .ember-3 {
  width: 58vmax;
  height: 58vmax;
  background: radial-gradient(circle,
    rgba(var(--drift-c3), 0.42) 0%,
    rgba(var(--drift-c3), 0.16) 32%,
    rgba(var(--drift-c3), 0) 62%);
  left: 22%;
  bottom: -15%;
  animation: aurora-drift-3 22s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(28vw, 18vh, 0) scale(1.18) rotate(15deg); }
  100% { transform: translate3d(40vw, -8vh, 0) scale(0.95) rotate(-12deg); }
}

@keyframes aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(-22vw, 25vh, 0) scale(1.20) rotate(-18deg); }
  100% { transform: translate3d(-12vw, -28vh, 0) scale(0.92) rotate(14deg); }
}

@keyframes aurora-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(-22vw, -18vh, 0) scale(1.12) rotate(20deg); }
  100% { transform: translate3d(-32vw, -38vh, 0) scale(0.88) rotate(-16deg); }
}

/* Drifting sparks — small bright points of light that float upward.
   Like dust motes catching sunlight. Color follows the per-page palette. */
.aurora-drift .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--drift-c3), 0.85);
  box-shadow:
    0 0 12px rgba(var(--drift-c3), 0.7),
    0 0 24px rgba(var(--drift-c1), 0.4);
  bottom: -2%;
  opacity: 0;
  will-change: transform, opacity;
}

.aurora-drift .spark-1 { left: 12%; animation: spark-rise 11s ease-in infinite;  animation-delay: 0s; }
.aurora-drift .spark-2 { left: 28%; animation: spark-rise 13s ease-in infinite;  animation-delay: 1.5s; }
.aurora-drift .spark-3 { left: 46%; animation: spark-rise 10s ease-in infinite;  animation-delay: 3.2s; }
.aurora-drift .spark-4 { left: 64%; animation: spark-rise 14s ease-in infinite;  animation-delay: 4.8s; }
.aurora-drift .spark-5 { left: 78%; animation: spark-rise 12s ease-in infinite;  animation-delay: 7s; }
.aurora-drift .spark-6 { left: 90%; animation: spark-rise 9s ease-in infinite;   animation-delay: 9.5s; }

@keyframes spark-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(-2vw, -55vh, 0) scale(1); opacity: 0.85; }
  92%  { opacity: 0.7; }
  100% { transform: translate3d(2vw, -110vh, 0) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-drift .ember,
  .aurora-drift .spark {
    animation: none;
  }
  .aurora-drift .spark { opacity: 0; }
}

@media (max-width: 720px) {
  .aurora-drift .ember { filter: blur(48px); }
  /* Half the sparks on mobile for battery */
  .aurora-drift .spark-2,
  .aurora-drift .spark-4,
  .aurora-drift .spark-6 { display: none; }
}

/* =========================================================
   PER-PAGE DRIFT PALETTES
   Each page's ambient light takes its color story from the
   hero photo, so the atmosphere matches the page's mood.
   Triple values (R, G, B) are consumed by rgba(var(--), a).
   ========================================================= */

/* ABOUT — matches the deep navy / steel-blue cast of the hero overlay */
body.page-about {
  --drift-c1: 90, 130, 175;
  --drift-c2: 50, 90, 140;
  --drift-c3: 165, 195, 225;
}

/* BUSINESS FOUNDATION — angular glass architecture (cool steel, slate, ice) */
body.page-business-foundation {
  --drift-c1: 92, 130, 168;
  --drift-c2: 70, 105, 145;
  --drift-c3: 200, 220, 235;
}

/* CAPITAL ACCESS — gold bullion (deep gold, amber, champagne) */
body.page-capital-access {
  --drift-c1: 218, 165, 32;
  --drift-c2: 184, 124, 18;
  --drift-c3: 255, 220, 130;
}

/* TAX ARCHITECTURE — IRS form close-up (cream, sepia, warm beige) */
body.page-tax-architecture {
  --drift-c1: 200, 170, 130;
  --drift-c2: 165, 130, 90;
  --drift-c3: 240, 220, 185;
}

/* INDUSTRY SPECIALISTS — Kenworth truck at golden hour (orange, burnt amber) */
body.page-industry-specialists {
  --drift-c1: 220, 140, 60;
  --drift-c2: 180, 100, 40;
  --drift-c3: 255, 200, 135;
}

/* CASE STUDIES — sunset financial district (pink-orange, magenta wash) */
body.page-case-studies {
  --drift-c1: 230, 130, 105;
  --drift-c2: 196, 100, 95;
  --drift-c3: 255, 205, 170;
}

/* CONTACT — misty mountain landscape (teal, sage, blue-green) */
body.page-contact {
  --drift-c1: 90, 135, 130;
  --drift-c2: 110, 155, 145;
  --drift-c3: 190, 215, 205;
}

/* INSIGHTS index — fountain pen close-up (warm cream, sepia) */
body.page-insights {
  --drift-c1: 196, 138, 68;
  --drift-c2: 160, 105, 43;
  --drift-c3: 242, 197, 143;
}

/* SEO LANDINGS — inherit from their parent pillar */

/* Capital Access landings (gold) */
body.page-atlanta-business-funding,
body.page-business-credit-building-atlanta {
  --drift-c1: 218, 165, 32;
  --drift-c2: 184, 124, 18;
  --drift-c3: 255, 220, 130;
}

/* Tax Architecture landings (cream/sepia) */
body.page-atlanta-tax-consultant,
body.page-irs-audit-help-atlanta {
  --drift-c1: 200, 170, 130;
  --drift-c2: 165, 130, 90;
  --drift-c3: 240, 220, 185;
}

/* Industry Specialists landings (golden hour orange) */
body.page-trucking-authority-georgia,
body.page-sam-registration-8a-atlanta {
  --drift-c1: 220, 140, 60;
  --drift-c2: 180, 100, 40;
  --drift-c3: 255, 200, 135;
}

/* Insight articles inherit copper default; no per-article overrides. */

/* =========================================================
   SERVICES DROPDOWN — polished, always-on-top, all 4 items
   Overrides styles.css with stronger shadow + cleaner padding
   ========================================================= */
.nav-dropdown {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: -16px !important;
  min-width: 280px !important;
  background: #FAFAF7 !important;
  border: 1px solid rgba(15, 20, 25, 0.06) !important;
  border-radius: 2px !important;
  padding: 8px 0 !important;
  box-shadow:
    0 24px 60px rgba(15, 20, 25, 0.22),
    0 8px 20px rgba(15, 20, 25, 0.12) !important;
  z-index: 250 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s !important;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity .25s ease, transform .25s ease, visibility 0s !important;
}
.nav-dropdown a {
  display: block !important;
  padding: 12px 28px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #0F1419 !important;
  text-shadow: none !important;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease !important;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: #A0692B !important;
  background: rgba(196, 138, 68, 0.08) !important;
  outline: 0 !important;
}
/* Ensure no ancestor clips the dropdown */
.site-header, .nav, .nav-links, .nav-dropdown-wrap {
  overflow: visible !important;
}
/* When header is scrolled (dark bg), dropdown stays light & readable */
.site-header.scrolled .nav-dropdown { background: #FAFAF7 !important; }
.site-header.scrolled .nav-dropdown a { color: #0F1419 !important; }

/* =========================================================
   RESPONSIVE HEADER FIX — v=31
   Desktop nav needs ~1080px to fit comfortably (122px logo +
   serif brand text + 5 nav items + CTA). Below that, show the
   hamburger. Also scale the logo down so it doesn't dominate.
   Covers: Z Fold 7 cover (~344-432px), Z Fold 7 inner (~716-812px),
   small tablets, and any narrow laptop window.
   ========================================================= */

/* Show hamburger / hide desktop nav-links below 1080px */
@media (max-width: 1079px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: grid !important; }
}
/* Above 1080px, desktop nav returns; hamburger hides */
@media (min-width: 1080px) {
  .nav-links { display: flex !important; }
  .nav-toggle { display: none !important; }
}

/* Logo scaling cascade — overrides the 122px !important rule earlier in this file */
@media (max-width: 1079px) {
  .brand-logo,
  .brand img {
    width: 72px !important;
    height: 72px !important;
  }
  .site-header.scrolled .brand-logo,
  .site-header.scrolled .brand img {
    width: 56px !important;
    height: 56px !important;
  }
  .brand { font-size: 19px !important; gap: 12px !important; }
  .nav { min-height: 72px; padding: 10px 0; }
}

@media (max-width: 700px) {
  .brand-logo,
  .brand img {
    width: 56px !important;
    height: 56px !important;
  }
  .site-header.scrolled .brand-logo,
  .site-header.scrolled .brand img {
    width: 48px !important;
    height: 48px !important;
  }
  .brand { font-size: 17px !important; gap: 10px !important; }
  .nav { min-height: 64px; padding: 8px 0; }
}

/* Z Fold 7 cover screen (~344-432px) — drop brand text, keep just the logo */
@media (max-width: 460px) {
  .brand {
    font-size: 0 !important;       /* hides the text node */
    gap: 0 !important;
  }
  .brand-logo,
  .brand img {
    width: 48px !important;
    height: 48px !important;
  }
  .site-header.scrolled .brand-logo,
  .site-header.scrolled .brand img {
    width: 42px !important;
    height: 42px !important;
  }
  .nav { min-height: 60px; }
  /* Tighten container padding on tiny screens */
  .site-header .container { padding-left: 16px; padding-right: 16px; }
}

/* Ensure the hamburger is touch-friendly and visible */
@media (max-width: 1079px) {
  .nav-toggle {
    width: 44px;
    height: 44px;
    z-index: 510;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .site-header.scrolled .nav-toggle-inner span {
    background: #F8F6EF !important;
  }
}

/* Mobile nav panel: make sure it sits above hero photo on inner pages */
.mobile-nav { z-index: 480 !important; }
.mobile-nav.is-open { display: block !important; }

/* Foldable inner screen (~716-820px) — keep hero text readable, prevent overflow */
@media (max-width: 820px) {
  body:not(.page-index) .hero h1 {
    font-size: clamp(40px, 8vw, 64px) !important;
    max-width: 100% !important;
  }
  body:not(.page-index) .hero .subline,
  body:not(.page-index) .hero p {
    max-width: 100% !important;
  }
  .hero .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Cover-screen safety — anything that might overflow horizontally */
@media (max-width: 460px) {
  .hero h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .pillar-includes,
  .related-pillars,
  .pillar-fit { grid-template-columns: 1fr !important; }
}

/* =========================================================
   PILLAR ITEM ICONS + SECTION INTERSTITIAL — v=31
   Visual rhythm system for services pages. Icons sit above the
   numbered label on each pillar item. Interstitial photos break
   long prose sections with a quiet, editorial moment.
   ========================================================= */

.pillar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  color: var(--accent);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(196,138,68,0.12), rgba(160,105,43,0.04));
  box-shadow: inset 0 0 0 1px rgba(160,105,43,0.18);
  transition: transform .35s cubic-bezier(.2,.6,.2,1), background .35s ease, color .35s ease;
}
.pillar-item:hover .pillar-item-icon,
.pillar-item:focus-within .pillar-item-icon {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(135deg, rgba(196,138,68,0.20), rgba(160,105,43,0.08));
}
.pillar-item-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar-item .pillar-item-num {
  margin-bottom: 12px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Section interstitial — full-width editorial photo break */
.section-interstitial {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.section-interstitial .interstitial-photo {
  position: relative;
  height: clamp(280px, 42vh, 480px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-interstitial .interstitial-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,18,32,0.10) 0%,
    rgba(6,18,32,0.0) 30%,
    rgba(6,18,32,0.0) 70%,
    rgba(6,18,32,0.55) 100%
  );
}
.section-interstitial .interstitial-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #F8F6EF;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.3;
  text-shadow: 0 2px 18px rgba(6,18,32,0.7);
}
.section-interstitial .interstitial-tag {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aurora-copper);
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
}
@media (max-width: 700px) {
  .section-interstitial .interstitial-caption {
    padding: 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .section-interstitial .interstitial-tag { align-self: flex-start; }
}

/* =========================================================
   PILLAR ICON ANIMATION SYSTEM — v=32
   Three layers triggered by the existing .in-view reveal observer:
   1. Springy scale + rotate entrance for the badge
   2. SVG path stroke-draw — line art paints itself in
   3. Gentle perpetual glow pulse after entrance completes
   Hover interrupts everything with a stronger copper glow.
   ========================================================= */

/* --- 1. Initial hidden state (before card scrolls into view) --- */
.pillar-item .pillar-item-icon {
  transform: scale(0.4) rotate(-90deg);
  opacity: 0;
}
.pillar-item .pillar-item-icon svg path,
.pillar-item .pillar-item-icon svg line,
.pillar-item .pillar-item-icon svg rect,
.pillar-item .pillar-item-icon svg circle {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.3s cubic-bezier(.2,.6,.2,1) .35s;
}
/* Filled mark (e.g. calendar dot) — fades in rather than draws */
.pillar-item .pillar-item-icon svg circle[fill="currentColor"] {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity .55s ease 1.1s;
}

/* --- 2. In-view trigger — entrance happens here --- */
.pillar-item.in-view .pillar-item-icon {
  transform: scale(1) rotate(0);
  opacity: 1;
  transition:
    transform .95s cubic-bezier(.34, 1.45, .55, 1) .15s,
    opacity .6s ease .15s;
}
.pillar-item.in-view .pillar-item-icon svg path,
.pillar-item.in-view .pillar-item-icon svg line,
.pillar-item.in-view .pillar-item-icon svg rect,
.pillar-item.in-view .pillar-item-icon svg circle {
  stroke-dashoffset: 0;
}
.pillar-item.in-view .pillar-item-icon svg circle[fill="currentColor"] {
  opacity: 1;
}

/* --- 3. Continuous gentle pulse — starts after entrance, breathes copper --- */
@keyframes pillar-icon-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(160,105,43,0.18),
      0 0 0 0 rgba(196,138,68,0);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(160,105,43,0.32),
      0 0 22px 2px rgba(196,138,68,0.16);
  }
}
.pillar-item.in-view .pillar-item-icon {
  animation: pillar-icon-pulse 4.5s ease-in-out 1.8s infinite;
}

/* Stagger pulses so cards don't breathe in lockstep */
.pillar-item:nth-child(2).in-view .pillar-item-icon { animation-delay: 2.1s; }
.pillar-item:nth-child(3).in-view .pillar-item-icon { animation-delay: 2.4s; }
.pillar-item:nth-child(4).in-view .pillar-item-icon { animation-delay: 2.7s; }
.pillar-item:nth-child(5).in-view .pillar-item-icon { animation-delay: 3.0s; }
.pillar-item:nth-child(6).in-view .pillar-item-icon { animation-delay: 3.3s; }

/* --- 4. Enhanced hover — overrides the pulse with a stronger glow --- */
.pillar-item:hover .pillar-item-icon,
.pillar-item:focus-within .pillar-item-icon {
  animation: none !important;
  transform: translateY(-3px) scale(1.08) rotate(0) !important;
  background: linear-gradient(135deg, rgba(196,138,68,0.26), rgba(160,105,43,0.10)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(160,105,43,0.40),
    0 0 30px 6px rgba(196,138,68,0.22) !important;
  transition:
    transform .35s cubic-bezier(.34, 1.45, .55, 1),
    background .35s ease,
    box-shadow .35s ease !important;
}

/* --- 5. Reduced-motion safety — show icons fully, no motion --- */
@media (prefers-reduced-motion: reduce) {
  .pillar-item .pillar-item-icon,
  .pillar-item.in-view .pillar-item-icon {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .pillar-item .pillar-item-icon svg path,
  .pillar-item .pillar-item-icon svg line,
  .pillar-item .pillar-item-icon svg rect,
  .pillar-item .pillar-item-icon svg circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .pillar-item .pillar-item-icon svg circle[fill="currentColor"] {
    opacity: 1 !important;
  }
}