/* Self-hosted fonts (was a render-blocking Google Fonts stylesheet). Latin subset, variable weight. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-latin-20260921.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin-20260921.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --ink:#1c1f22;
  --ink-soft:#5c636b;
  --paper:#f2f3f4;
  --paper-raised:#ffffff;
  --brand:#4a5058;
  --brand-deep:#22262a;
  --accent:#a8763e;
  --accent-hover:#8f6333;
  --accent-soft:#d9b98a;
  --line:#dcdedf;

  /* Redder terracotta */
  --accent-warm:#a8763e;
  --accent-warm-soft:#d9b98a;
  /* Darker than --accent-warm specifically for small text on --paper —
     the lighter value reads 4.3:1, just under the 4.5:1 body-text floor. */
  --accent-warm-text:#7d5429;

  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);

  /* Ambient shadows tinted with the brand navy — never pure black */
  --shadow-card: 0 1px 2px rgba(34,38,42,0.05), 0 10px 24px -8px rgba(34,38,42,0.16), 0 28px 56px -28px rgba(34,38,42,0.2);
  --shadow-card-hover: 0 2px 4px rgba(34,38,42,0.08), 0 18px 36px -10px rgba(34,38,42,0.22), 0 36px 72px -28px rgba(34,38,42,0.26);
  --shadow-glow-accent: 0 0 0 1px rgba(168,118,62,0.12), 0 16px 40px -12px rgba(168,118,62,0.35);
  --bezel-pad: 7px;
  --radius-shell: 1.5rem;
  --radius-core: calc(1.5rem - var(--bezel-pad));
}
html{scroll-behavior:smooth;}
/* Phones: every size on the site is set in rem, so scaling the root
   font-size scales type, spacing, and component sizing (buttons, the nav
   bar, badges) all together — the whole page reads smaller/denser instead
   of like a desktop layout stretched to fit a narrow screen. Left alone
   above this breakpoint (tablet/desktop already sized correctly). */
@media (max-width:639px){
  html{ font-size:84%; }
  /* iOS Safari force-zooms the whole page on focus for any text field whose
     *computed* font-size is under 16px — every form field here (chat, the
     lead-popup fields, FAQ search) is sized with a Tailwind text-sm/rem
     value that the 84% root scale above pushes under that line. Pinning
     inputs back to a real 16px (px, so it ignores the root scale) is the
     standard fix and is worth the !important: it's overriding Tailwind
     utility classes and component-specific rules on dozens of fields across
     every page, not one selector worth chasing down individually. */
  input, textarea, select{ font-size:16px !important; }
  /* The homepage hero video frames its subject toward the right side of
     the source footage (composed for desktop, where the text column only
     covers the left ~40% and the person reads fine on the right). On a
     narrow phone the text spans nearly the full width, so a plain center
     crop (the default 50%) pushed the person almost off the right edge
     instead of reading as centered behind the text. */
  #heroVideo{ object-position: 70% center; }
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{
  background:rgba(34,38,42,0.22); border-radius:999px; border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background:rgba(34,38,42,0.38); }
html{ scrollbar-color: rgba(34,38,42,0.22) var(--paper); scrollbar-width: thin; }
/* Tailwind's arbitrary-value opacity modifier (text-[var(--x)]/NN) can't resolve a CSS
   custom property to RGB channels, so it silently fails to compile — footer text and
   links were inheriting body's dark --ink color on a near-black background (~1.1:1
   contrast). Set it explicitly here instead of depending on that utility. */
footer{ color: rgba(247,246,242,0.75); }
footer a:hover{ color: var(--paper); }

.font-display{font-family:'Fraunces',serif;}

/* Tailwind's text-4xl/5xl utilities bundle their own line-height, and the
   responsive (sm:/md:) utility blocks are emitted after the base layer —
   so a bare `leading-[1.12]` gets beaten by sm:text-5xl's bundled
   line-height:1 at >=640px even though it appears later in the class list.
   Set it here instead, after tailwind.css in the cascade, so it holds at
   every breakpoint. */
.hero-h1{ line-height: 1.12; }
.tracking-tightish{letter-spacing:-0.03em;}
.leading-relaxed-body{line-height:1.7;}

.shadow-soft{
  box-shadow: 0 1px 2px rgba(34,38,42,0.06), 0 8px 24px -8px rgba(34,38,42,0.2), 0 24px 48px -24px rgba(34,38,42,0.18);
}
.shadow-soft-lg{
  box-shadow: 0 2px 4px rgba(34,38,42,0.08), 0 16px 40px -12px rgba(34,38,42,0.24), 0 32px 64px -24px rgba(34,38,42,0.22);
}
/* Nav/footer/intro logo mark: a soft drop-shadow (not a boxed shadow) so the
   badge grounds into the bar instead of reading as a separate sticker. */
.nav-logo-mark{
  filter: drop-shadow(0 1px 2px rgba(34,38,42,0.18)) drop-shadow(0 4px 10px rgba(34,38,42,0.12));
}
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ombré gradient-sweep button */
.btn-primary{
  /* #c2914f is the mid-gradient highlight stop, chosen for ~4.9:1 contrast
     against the white label text (AA minimum is 4.5:1) — checked directly
     rather than eyeballed, since an earlier red-palette stop here failed
     that same check at ~3.5:1 and had a text-shadow papering over it instead
     of a real fix. */
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 35%, #c2914f 65%, var(--accent) 100%);
  background-size:250% 100%; background-position:0% 0%;
  color:var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 6px 18px -4px rgba(168,118,62,0.4);
  transition: background-position 0.6s ease, transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.btn-primary:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

.btn-outline{
  background: linear-gradient(90deg, rgba(247,245,239,0.06) 0%, rgba(247,245,239,0.24) 50%, rgba(247,245,239,0.06) 100%);
  background-size:250% 100%; background-position:0% 0%;
  border:1px solid rgba(247,245,239,0.35);
  color:var(--paper);
  transition: background-position 0.6s ease, transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-outline:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-dark{
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 40%, #3a2f26 70%, var(--brand-deep) 100%);
  background-size:250% 100%; background-position:0% 0%;
  color:var(--paper);
  border:1px solid rgba(217,185,138,0.4);
  transition: background-position 0.6s ease, transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-dark:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-ghost{
  background: linear-gradient(90deg, rgba(34,38,42,0.02) 0%, rgba(34,38,42,0.08) 50%, rgba(34,38,42,0.02) 100%);
  background-size:250% 100%; background-position:0% 0%;
  color:var(--ink-soft); border:1px solid var(--line);
  transition: background-position 0.6s ease, transform 0.25s var(--ease-spring), color 0.2s ease;
}
.btn-ghost:active{ transform: scale(0.97); }
.btn-ghost:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

.btn-primary:active, .btn-outline:active, .btn-dark:active{ transform: scale(0.97); }
@media (prefers-reduced-motion: reduce){
  .btn-primary, .btn-outline, .btn-dark, .btn-ghost{ transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .btn-primary:hover, .btn-outline:hover, .btn-dark:hover, .btn-ghost:hover{ background-position:100% 0%; transform:none; }
}

.nav-link{ position:relative; color:var(--ink-soft); transition: color 0.2s ease; }
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition: transform 0.25s ease;
}
.nav-link.is-active::after{ transform:scaleX(1); }
.nav-link:focus-visible{ outline: 2px solid var(--brand); outline-offset: 4px; border-radius:2px; }

/* Progressive-enhancement scroll reveal: visible by default (no-JS / no-IO safe).
   JS adds "js-reveal" to <html> only once IntersectionObserver is confirmed working,
   which is what actually gates the opacity:0 starting state. */
.js-reveal .reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }
.js-reveal .reveal.is-visible:nth-child(2){ transition-delay: 0.06s; }
.js-reveal .reveal.is-visible:nth-child(3){ transition-delay: 0.12s; }
.js-reveal .reveal.is-visible:nth-child(4){ transition-delay: 0.18s; }
.js-reveal .reveal.is-visible:nth-child(5){ transition-delay: 0.24s; }
.js-reveal .reveal.is-visible:nth-child(6){ transition-delay: 0.3s; }

/* Large feature images: pure fade-in, no slide, slower for a more deliberate feel. */
.js-reveal .reveal.reveal-fade{
  transform:none;
  transition: opacity 1.1s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}

/* Scroll parallax layer — JS sets --parallax-y; falls back to 0 (no motion) if JS never runs */
.parallax-el{ transform: translateY(var(--parallax-y, 0px)); will-change: transform; }
@media (prefers-reduced-motion: reduce){
  .parallax-el{ transform:none !important; }
}

/* Soften the hard color-cut where a dark hero/page-header section meets the
   light body below it. Opt-in via .fade-from-dark-above on the section that
   follows the dark one (previously an automatic `section.bg-[--brand-deep]
   + section` sibling rule — that fired on EVERY dark section a page had, not
   just the opening hero, and produced two different bugs: on the homepage,
   the hero already fades itself to --paper via its own bottom gradient, so
   a second dark-to-transparent fade stacked on top of that already-light
   pixel and reappeared as a dark band right at the seam; on a later
   full-bleed photo row, the fade only had a gap to show through in (the
   text column's own top padding), rendering as a stray floating gray box
   instead of a clean transition. Apply this class only where the following
   section is a plain padded block with nothing else painted at its own top
   edge — that's almost always just the hero-to-body transition. */
.fade-from-dark-above{ position:relative; }
.fade-from-dark-above::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6rem;
  background:linear-gradient(to bottom, var(--brand-deep), transparent);
  pointer-events:none;
}

/* Header gains weight once the page has scrolled past the hero */
/* background-color kept short and deliberately un-eased (not the 0.3s used
   elsewhere): during a fast scroll, hero content underneath a still-fading
   translucent header briefly "ghosts" through it — a visible glitch on
   pages with light-colored hero text (e.g. FAQ's eyebrow badge). A quick
   linear snap closes that window without feeling abrupt. */
header{ transition: box-shadow 0.3s ease, background-color 0.12s linear, transform 0.35s var(--ease-out); }
/* Named header-is-hidden (not the generic .is-hidden utility below) —
   that utility is `display:none !important`, and with !important it was
   winning over this rule's transform whenever both matched the header,
   collapsing it out of layout instead of sliding it off-screen. That
   silently shifted all page content up by the header's height on every
   scroll-down, which is what broke anchor-jump landing spots. */
header.header-is-hidden{ transform:translateY(-100%); }
@media (prefers-reduced-motion: reduce){
  header{ transition: box-shadow 0.3s ease, background-color 0.12s linear; }
  header.header-is-hidden{ transform:none; }
}
header.is-scrolled{
  box-shadow: 0 1px 0 rgba(34,38,42,0.06), 0 12px 24px -16px rgba(34,38,42,0.25);
}

/* Transparent-over-hero nav that solidifies once scrolled — every real page
   on the site (everything but the 3 plain legal pages) has a full-bleed dark
   section directly under the header, so the header can start invisible and
   let that section's own content read clean, then fade in a solid frosted
   bar once there's light content behind it. Reuses the existing is-scrolled
   toggle in site.js (already fires every scroll frame) — no new JS. */
header.header--transparent{
  background-color: transparent; border-bottom-color: transparent; backdrop-filter:none;
}
header.header--transparent .nav-wordmark{ color:#fff; }
header.header--transparent .nav-link{ color:rgba(247,246,242,0.85); }
header.header--transparent .nav-link::after{ background:#fff; }
header.header--transparent #mobileMenuBtn{ color:#fff; }
@media (hover:hover) and (pointer:fine){
  header.header--transparent .nav-link:hover{ color:#fff; }
}
header.header--transparent.is-scrolled{
  background-color: rgba(247,246,242,0.9); backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
header.header--transparent.is-scrolled .nav-wordmark{ color:var(--ink); }
header.header--transparent.is-scrolled .nav-link{ color:var(--ink-soft); }
header.header--transparent.is-scrolled .nav-link::after{ background:var(--accent); }
header.header--transparent.is-scrolled #mobileMenuBtn{ color:var(--ink); }
.nav-wordmark{ transition: color 0.3s ease; }
#mobileMenuBtn{ transition: color 0.3s ease; }

/* The header itself only ever paints text/background — it doesn't overlap
   anything by default, since it's a normal sticky element that pushes the
   page's first section down below it. Pulling that first dark section up by
   exactly the header's height (80px, constant at every breakpoint — h-20)
   is what actually lets the transparent header show hero content instead of
   bare page background. The section's own top padding (py-20/md:py-28, both
   >= 80px) absorbs the shift so the heading text still lands in the same
   place, only the section's background/noise/glow bleeds up under the header.
   In rem, not px, so it stays in lockstep with the header's own h-20 (5rem)
   when the phone-only root font-size scale below kicks in — a fixed px pull
   against a header that shrinks with the root size would overshoot and drag
   hero content up under the bar. */
header.header--transparent ~ main > section:first-child{
  margin-top: -5rem;
}

/* Ambient drifting glow on the static dark page-headers/CTAs — gives them
   the same "nothing ever sits still" feel as the homepage's real hero video,
   without needing new footage. Skipped on the homepage's actual hero, which
   already has real motion from #heroVideo. */
.ambient-glow{
  position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(35% 35% at 30% 40%, rgba(168,118,62,0.35), transparent 70%);
  animation: ambient-drift 22s ease-in-out infinite;
}
@keyframes ambient-drift{
  0%{ transform:translate(-4%,-3%) scale(1); }
  50%{ transform:translate(4%,3%) scale(1.08); }
  100%{ transform:translate(-4%,-3%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .ambient-glow{ animation:none; }
}

/* Mixed-weight serif emphasis within a headline — an upright/italic pairing
   in one H1 instead of a flat single-weight line. */
.headline-accent{ font-style:italic; color:var(--accent-soft); }

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2.5px; z-index:60;
  background:var(--accent); transform-origin:left; transform:scaleX(0);
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display:none; }
}

@keyframes bounce-hint{
  0%,100%{ transform: translateY(0); opacity:0.7; }
  50%{ transform: translateY(7px); opacity:1; }
}
.scroll-cue{ animation: bounce-hint 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation:none; }
}

.mobile-scrim{
  position:fixed; inset:0; top:5rem; z-index:48;
  background:rgba(34,38,42,0.35);
  opacity:0; pointer-events:none;
  transition: opacity 0.25s ease;
}
.mobile-scrim.is-open{ opacity:1; pointer-events:auto; }

.mobile-menu{
  position:fixed; top:calc(5rem + 0.75rem); left:1rem; right:1rem; z-index:49;
  display:flex; flex-direction:column; gap:0.25rem;
  background:rgba(247,246,242,0.94); backdrop-filter: blur(20px) saturate(180%);
  border:1px solid var(--line); border-radius:1.25rem; padding:0.75rem;
  box-shadow: 0 2px 4px rgba(34,38,42,0.08), 0 16px 40px -12px rgba(34,38,42,0.28);
  opacity:0; transform: translateY(-10px) scale(0.98);
  transform-origin: top center;
  pointer-events:none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.mobile-menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav-link{
  display:flex; align-items:center; min-height:44px;
  padding:0.6rem 0.9rem; border-radius:0.75rem;
  font-size:0.95rem; font-weight:500; color:var(--ink);
  transition: background 0.15s ease;
}
.mobile-nav-link:active{ background:rgba(34,38,42,0.06); }
@media (prefers-reduced-motion: reduce){
  .mobile-menu{ transition: opacity 0.15s ease; transform:none; }
  .mobile-scrim{ transition: opacity 0.15s ease; }
}

@keyframes kenburns{
  0%{ transform: scale(1) translate(0,0); }
  50%{ transform: scale(1.08) translate(-1.5%, -1%); }
  100%{ transform: scale(1) translate(0,0); }
}
.hero-loop{ animation: kenburns 14s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce){
  .hero-loop{ animation: none; }
}

input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* Lead capture popup */
.lead-scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(34,38,42,0.55); backdrop-filter: blur(4px);
  opacity:0; pointer-events:none;
  transition: opacity 0.3s ease;
}
.lead-scrim.is-open{ opacity:1; pointer-events:auto; }

.lead-modal{
  position:fixed; z-index:99; left:50%; top:50%;
  width:min(440px, calc(100vw - 2rem));
  max-height:calc(100vh - 2rem); overflow:auto;
  background:var(--paper-raised); border-radius:1.5rem;
  box-shadow: 0 2px 4px rgba(34,38,42,0.1), 0 32px 64px -16px rgba(34,38,42,0.5);
  opacity:0; pointer-events:none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.lead-modal.is-open{ opacity:1; pointer-events:auto; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce){
  .lead-scrim, .lead-modal{ transition: opacity 0.15s ease; }
  .lead-modal{ transform: translate(-50%, -50%) !important; }
}
.lead-step{
  display:none;
  opacity:0;
  transform: translateX(12px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.lead-step.is-active{ display:block; }
.lead-step.is-active.is-in{ opacity:1; transform:none; }
.lead-step.is-leaving{ opacity:0; transform: translateX(-12px); }
@media (prefers-reduced-motion: reduce){
  .lead-step{ transition:none; transform:none; }
}
.lead-progress-dot{
  width:18px; height:6px; border-radius:999px; background:var(--line);
  transform-origin:left center;
  transform:scaleX(0.333);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lead-progress-dot.is-active{ background:var(--accent); transform:scaleX(1); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.lead-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Skip-to-content link: sr-only until keyboard-focused, then it becomes the
   first visible, reachable thing on the page — lets keyboard/AT users bypass
   the header and nav instead of tabbing through them on every single page. */
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:300;
  background:var(--brand-deep); color:var(--paper);
  padding:0.75rem 1.25rem; border-radius:0.75rem;
  font-size:0.85rem; font-weight:600;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ===== Opening intro (brief branded splash, once per session) ===== */
.intro-splash{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-deep); overflow:hidden;
  opacity:1; cursor:pointer;
  transition: opacity 0.6s var(--ease-out);
}
/* Zooms past rather than just fading flat — reads as the splash pulling
   back to reveal the page behind it instead of a plain cut. */
/* Named is-fading, not the generic .is-hidden utility (display:none
   !important) — that utility was winning here too and hiding the splash
   instantly instead of letting it fade over the transition below. */
.intro-splash.is-fading{ opacity:0; transform:scale(1.06); pointer-events:none; }
.intro-splash{ transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.intro-splash.is-removed{ display:none; }
/* Same slow drift used on the page-header ambient-glow, so the splash
   already feels like part of the same site instead of a static loading card. */
.intro-splash::before{
  content:''; position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(35% 35% at 50% 45%, rgba(217,185,138,0.28), transparent 70%);
  animation: ambient-drift 8s ease-in-out infinite;
}
.intro-mark{ position:relative; display:flex; align-items:center; gap:0.85rem; }
.intro-logo{
  width:44px; height:44px; border-radius:12px;
  opacity:0; transform:scale(0.7);
  animation: intro-logo-in 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.1s forwards;
}
.intro-word{
  font-family:'Fraunces',serif; letter-spacing:-0.02em;
  font-size:1.15rem; color:var(--paper);
  opacity:0; transform:translateY(8px);
  animation: intro-word-in 0.6s var(--ease-out) 0.32s forwards;
}
@keyframes intro-logo-in{ to{ opacity:1; transform:scale(1); } }
@keyframes intro-word-in{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .intro-splash, .intro-splash.is-fading{ transition:none; transform:none; }
  .intro-splash::before{ animation:none; }
  .intro-logo, .intro-word{ animation:none; opacity:1; transform:none; }
}

/* ===== Home page only: the wordmark traced letter-by-letter in gold light,
   a traveling spark leading the write, then the whole screen wipes off in a
   random direction — a bigger, one-time "wow" moment reserved for the front
   door of the site. Scoped entirely under .intro-splash--ignite so every
   other page keeps the plain logo+word fade above untouched. */
.intro-splash--ignite .intro-mark{ flex-direction:column; gap:0.55rem; text-align:center; }
.intro-splash--ignite .intro-logo{ display:none; }
.intro-ignite-mark{
  position:relative; margin:0; font-family:'Fraunces',serif; font-style:italic;
  font-weight:600; letter-spacing:-0.02em; color:var(--paper);
  font-size:clamp(2.75rem, 13vw, 6.5rem); line-height:1.05;
}
.intro-ignite-tagline{
  margin:0; font-family:'Inter',sans-serif; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase; font-size:0.7rem;
  color:rgba(217,185,138,0.75); opacity:0; transform:translateY(6px);
  animation: intro-word-in 0.7s var(--ease-out) 1.05s forwards;
}
.intro-ignite-letter{
  display:inline-block; color:transparent;
  -webkit-text-stroke:1px rgba(242,243,244,0.16); text-shadow:none;
}
.intro-ignite-letter.lit{ animation: intro-ignite-write 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes intro-ignite-write{
  0%{ color:transparent; -webkit-text-stroke:1px rgba(242,243,244,0.16); text-shadow:none; }
  40%{ color:#fff8ef; -webkit-text-stroke:0px transparent;
       text-shadow:0 0 10px #fff8ef, 0 0 26px var(--accent-soft), 0 0 46px var(--accent); }
  100%{ color:var(--paper); -webkit-text-stroke:0px transparent;
        text-shadow:0 0 6px rgba(217,185,138,0.65), 0 0 22px rgba(168,118,62,0.4); }
}
.intro-ignite-spark{
  position:absolute; top:50%; left:0; width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle, #fff8ef, var(--accent-soft) 55%, transparent 75%);
  box-shadow: 0 0 16px 5px rgba(217,185,138,0.75);
  opacity:0; pointer-events:none; transform:translate(-50%,-50%);
  transition: left 0.1s linear, top 0.1s linear, opacity 0.15s ease;
}
.intro-splash--ignite.exit-up,
.intro-splash--ignite.exit-down,
.intro-splash--ignite.exit-left,
.intro-splash--ignite.exit-right,
.intro-splash--ignite.exit-fade{
  
  transition: transform 0.15s cubic-bezier(0.76,0,0.24,1), opacity 0.15s ease;
}
.intro-splash--ignite.exit-up{ transform:translateY(-100%); }
.intro-splash--ignite.exit-down{ transform:translateY(100%); }
.intro-splash--ignite.exit-left{ transform:translateX(-100%); }
.intro-splash--ignite.exit-right{ transform:translateX(100%); }
.intro-splash--ignite.exit-fade{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .intro-ignite-letter, .intro-ignite-spark{ display:none; }
  .intro-ignite-tagline{ animation:none; opacity:1; transform:none; }
}

/* Above-the-fold hero/page-header stagger reveal on page load */
.hero-intro{
  opacity:0; transform:translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.hero-intro-d1{ transition-delay:0.05s; }
.hero-intro-d2{ transition-delay:0.16s; }
.hero-intro-d3{ transition-delay:0.27s; }
.hero-intro-d4{ transition-delay:0.38s; }
.is-intro-ready .hero-intro{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .hero-intro{ transition:none; opacity:1; transform:none; }
}

/* ===== Custom cursor — desktop/fine-pointer only, replaces the native pointer =====
   Gated by a JS-added class on <html> so a script failure never leaves the
   visitor with no cursor at all (progressive enhancement, same pattern as
   .js-reveal). */
html.custom-cursor-active,
html.custom-cursor-active *{ cursor:none !important; }
/* Text-entry fields keep the native I-beam — suppressing it here too would
   remove the only affordance telling a visitor a field is typeable. */
html.custom-cursor-active input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.custom-cursor-active textarea{ cursor:text !important; }
.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999;
  width:20px; height:23px;
  pointer-events:none; opacity:0;
  /* A single drop-shadow instead of three stacked ones — drop-shadow forces
     a recomputed blur/alpha mask every frame this moves, and stacking three
     of them was the actual cause of the reported cursor lag, not the
     custom-cursor idea itself. One layer keeps the glow, cuts that cost ~3x. */
  filter: drop-shadow(0 0 8px rgba(168,118,62,0.55));
  transition: opacity 0.25s ease, width 0.25s var(--ease-out), height 0.25s var(--ease-out);
  will-change: transform;
}
.cursor-ring path{
  fill: var(--paper-raised);
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.cursor-ring.is-active{ opacity:1; }
.cursor-ring.is-hover{
  width:30px; height:34.5px;
  filter: drop-shadow(0 0 12px rgba(168,118,62,0.7));
}
.cursor-ring.is-hover path{ stroke: var(--accent-hover); }
@media (pointer: coarse), (prefers-reduced-motion: reduce){
  .cursor-ring{ display:none; }
}

/* ===== 3D business card ===== */
.biz-card-3d-wrap{
  width:240px; perspective:1000px;
}
.biz-card-3d{
  width:100%; aspect-ratio:768/439; border-radius:0.75rem; overflow:hidden;
  transform: rotateX(8deg) rotateY(-14deg);
  box-shadow:
    -10px 16px 24px -10px rgba(34,38,42,0.35),
    -20px 34px 48px -20px rgba(34,38,42,0.35);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform;
}
.biz-card-3d img{ width:100%; height:100%; object-fit:cover; display:block; }
.biz-card-3d-wrap:hover .biz-card-3d,
.biz-card-3d-wrap.is-tilting .biz-card-3d{
  box-shadow:
    -14px 24px 32px -10px rgba(34,38,42,0.4),
    -28px 46px 64px -24px rgba(34,38,42,0.4);
}
@media (prefers-reduced-motion: reduce){
  .biz-card-3d{ transition:none; }
}
@media (pointer: coarse){
  .biz-card-3d{ transform:rotateX(4deg) rotateY(-8deg); }
}

/* Footer link underline-in on hover, matching the top nav's pattern */
footer a{ position:relative; }
footer a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition: transform 0.25s ease;
}
footer a:hover::after{ transform:scaleX(1); }

/* ===== Signature ring badge — animated gradient border + soft glow halo =====
   Masks a wide animated gradient down to a 1.5px ring (SSC/A2H technique),
   paired with a blurred radial glow behind it. Used on pill badges and
   section eyebrow labels so small text elements read as designed components
   rather than bare uppercase text. */
.ring-badge{ position:relative; isolation:isolate; border-radius:9999px; }
.ring-badge::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background:linear-gradient(90deg, rgba(168,118,62,0) 0%, var(--accent) 30%, var(--accent-soft) 50%, var(--accent) 70%, rgba(168,118,62,0) 100%);
  background-size:250% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation: ring-shift 5s linear infinite;
  pointer-events:none; z-index:1;
}
.ring-badge::after{
  content:''; position:absolute; inset:-7px; border-radius:inherit;
  background:radial-gradient(circle, rgba(168,118,62,0.28), transparent 70%);
  filter:blur(8px); opacity:0.55;
  animation: ring-glow-pulse 3.4s ease-in-out infinite alternate;
  pointer-events:none; z-index:-1;
}
.ring-badge.on-dark::before{
  background:linear-gradient(90deg, rgba(217,185,138,0) 0%, var(--accent-soft) 30%, #ffffff 50%, var(--accent-soft) 70%, rgba(217,185,138,0) 100%);
}
@keyframes ring-shift{ from{ background-position:0% 0%; } to{ background-position:250% 0%; } }
@keyframes ring-glow-pulse{ from{ opacity:0.3; } to{ opacity:0.65; } }
@media (prefers-reduced-motion: reduce){
  .ring-badge::before{ animation:none; }
  .ring-badge::after{ animation:none; opacity:0.45; }
}
.eyebrow-badge{ display:inline-flex; align-items:center; justify-content:center; text-align:center; padding:0.4rem 1rem; border-radius:9999px; }

/* Pulsing live-dot for the "accepting new clients" nav badge */
.live-dot{ position:relative; width:7px; height:7px; border-radius:999px; background:#3fae62; flex-shrink:0; }
.live-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:999px; background:#3fae62; opacity:0.5;
  animation: live-dot-pulse 2s ease-out infinite;
}
@keyframes live-dot-pulse{ 0%{ transform:scale(0.6); opacity:0.6; } 100%{ transform:scale(2.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none; opacity:0; } }

/* Timeline process-step dots */
@keyframes timeline-dot-pulse{ 0%{ transform:scale(0.7); opacity:0.55; } 100%{ transform:scale(2.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .timeline-dot::before, .timeline-dot::after{ animation:none; opacity:0; }
}

/* Clean-copy block (formerly the double-bezel "premium card"). No box, no shadow:
   just a hairline rule and the copy. The class names stay so no HTML has to change. */
.card-premium{ background:none; padding:0; border-radius:0; box-shadow:none; align-self:start; }
.cards-equal-height > .card-premium{ height:100%; align-self:stretch; }
.card-premium-inner{
  background:none; border:0; border-top:1px solid var(--line); border-radius:0;
  height:100%; padding:1.4rem 0 0;
}

/* ===== Hexagon image frame — a signature detail, used sparingly ===== */
.hex-frame{
  position:relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  /* The hex clip only masks the image, not its rectangular box — without a
     background here the 4 corner triangles outside the hexagon show raw
     page background through, reading as a rendering glitch rather than a
     deliberate cut shape. A brand-tinted fill makes the negative space
     intentional. */
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
}
.hex-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 2px rgba(168,118,62,0.28);
  clip-path: inherit;
}
/* Services page quick-nav — understated text links, not pill buttons,
   letting someone jump straight to a service without another card grid.
   Now doubles as a sticky scroll-spy index (site.js toggles .is-active to
   match whichever service block is in view) instead of a static list. */
.service-quicknav-link{
  display:inline-flex; align-items:baseline; gap:0.4rem;
  font-size:0.85rem; font-weight:600; color:var(--ink-soft); white-space:nowrap;
  padding:0.2rem 0; transition: color 0.2s ease;
}
.service-quicknav-num{ font-family:'Fraunces',serif; color:var(--accent-soft); font-size:0.8rem; transition:color 0.2s ease; }
@media (hover:hover) and (pointer:fine){
  .service-quicknav-link:hover{ color:var(--brand); }
}
.service-quicknav-link:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
.service-quicknav-link.is-active{ color:var(--ink); }
.service-quicknav-link.is-active .service-quicknav-num{ color:var(--accent); }
@media (prefers-reduced-motion: reduce){ .service-quicknav-link, .service-quicknav-num{ transition:none; } }

/* Sticky wrapper for the nav above — pinned just under the header for the
   full length of the services narrative, with a thin progress fill along
   its bottom edge tracking scroll position through the six blocks. */
.services-nav{
  position:sticky; top:5rem; z-index:20;
  background:rgba(247,246,242,0.94); backdrop-filter:blur(8px);
}
.services-nav-track{ display:flex; gap:1.5rem; overflow-x:auto; scrollbar-width:none; }
.services-nav-track::-webkit-scrollbar{ display:none; }
.services-nav-fill{
  position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--accent); transition:width 0.4s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){ .services-nav-fill{ transition:none; } }

/* ===== Services narrative — bridges + weight variants =====
   Six services, each a distinct skeleton rather than one repeated
   component. These rules cover just the recurring mechanics (weight,
   bridges, varied image framing); the actual layout differences live in
   the markup itself. */
/* The sticky site header (5rem) plus the sticky services index below it
   (~4rem) both cover the top of the viewport. Without this, jumping to a
   block via the index links (or a direct #id link) lands it half-hidden
   underneath that stack instead of clear of it. */
.service-block{ position:relative; scroll-margin-top:11rem; }
.service-block + .service-block{ margin-top:5rem; }
@media (min-width:768px){ .service-block + .service-block{ margin-top:7rem; } }

/* Bridge 01->02: a large, faint "next number" fades in at the close of a
   block, pulling the eye into what follows instead of just stopping. */
.service-ghost-num{
  font-family:'Fraunces',serif; font-weight:600; color:var(--accent-soft);
  font-size:4.5rem; line-height:1; opacity:0.32; margin-top:2rem;
}
@media (min-width:768px){ .service-ghost-num{ font-size:6.5rem; } }

/* Bridge 02->03: a trailing italic half-thought closes one block; the next
   opens with a line that answers it, instead of a hard paragraph stop. */
.service-bridge-trail, .service-bridge-payoff{
  font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft); font-size:1.1rem;
}
.service-bridge-trail{ margin-top:1.25rem; }
.service-bridge-payoff{ margin-bottom:0.85rem; }

/* Bridge 03->04: the stat moment overlaps into billing's closing space
   instead of sitting as its own fully isolated, symmetrically-padded slab. */
.service-stat-bridge{ margin-top:-2.5rem; position:relative; z-index:1; }
@media (min-width:768px){ .service-stat-bridge{ margin-top:-3.5rem; } }

/* Fix #1: the quiet, no-image blocks (04) leave real space beside their
   text column on wide screens — instead of that reading as leftover
   whitespace, a single oversized faint numeral occupies it, consistent
   with the numbered-index motif used elsewhere on the page. */
.service-quiet-num{
  font-family:'Fraunces',serif; font-weight:600; color:var(--accent-soft);
  font-size:clamp(4.5rem, 22vw, 9rem); line-height:1; opacity:0.22;
  margin-left:auto; flex-shrink:0; align-self:flex-end;
}
@media (min-width:768px){ .service-quiet-num{ align-self:auto; } }

/* Bridge 04->05: a soft tint wash spans the seam instead of a hard cut
   between two plain-background blocks. */
.service-tint-bridge{
  position:absolute; left:-1.5rem; right:-1.5rem; bottom:-3.5rem; height:9rem;
  background:linear-gradient(to bottom, transparent, rgba(168,118,62,0.06) 45%, transparent);
  pointer-events:none; z-index:-1;
}

/* Bridge 05->06: the next block's image bleeds upward into this block's
   closing whitespace rather than the two simply meeting edge to edge. */
.service-image-bleed-up{ margin-top:-4.5rem; position:relative; z-index:2; }
@media (min-width:768px){ .service-image-bleed-up{ margin-top:-6rem; } }

/* Varied image treatments (Fix #6) — not every photo sits in the same
   rectangle. A small tight-cropped square for the quietest service... */
.service-image-tight{ width:8rem; height:8rem; border-radius:1rem; flex-shrink:0; }
@media (min-width:768px){ .service-image-tight{ width:10rem; height:10rem; } }

/* ...and a full-width bleed with the headline sitting on the photo itself
   for the other differentiator, rather than beside it. */
.service-image-full{ aspect-ratio:16/7; border-radius:1.5rem; overflow:hidden; position:relative; }
@media (max-width:767px){ .service-image-full{ aspect-ratio:4/3; } }
.service-image-full-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.75rem; background:linear-gradient(to top, rgba(34,38,42,0.88), rgba(34,38,42,0.25) 55%, transparent);
}
@media (min-width:768px){ .service-image-full-overlay{ padding:2.5rem; } }
.service-image-full-overlay h2{ color:var(--paper); }
.service-image-full-overlay .ring-badge{ color:var(--accent-soft); }

.hex-accent-dot{
  position:absolute; width:16px; height:16px; border-radius:999px; z-index:1;
  background:var(--accent); box-shadow:0 0 0 6px rgba(168,118,62,0.15), 0 0 18px rgba(168,118,62,0.45);
}

/* ===== Stat counters ===== */
.stat-number{
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-size:clamp(2.25rem, 5vw, 3.25rem); color:var(--brand);
  text-shadow: 0 0 24px rgba(168,118,62,0.18);
}
.stat-number.on-dark{ color:var(--paper); text-shadow: 0 0 28px rgba(168,118,62,0.4); }
/* Color intentionally omitted — every usage pairs this class with its own
   text-[rgba(...)] utility (default text or on-dark variant); a color here
   would win the cascade over that utility since this stylesheet loads after
   tailwind.css, silently overriding the intended per-instance color. */
.stat-label{ margin-top:0.5rem; font-size:0.85rem; }
.text-glow{ text-shadow: 0 0 18px rgba(168,118,62,0.35); }

/* Hero stat row with thin dividers instead of plain gaps — reads as one
   composed measurement, not three separate floating labels. */
.stat-row-divided{ display:flex; flex-direction:column; gap:1.25rem; }
.stat-row-divided > div{ padding:0; border-left:none; }
@media (min-width:640px){
  .stat-row-divided{ flex-direction:row; flex-wrap:wrap; gap:0; }
  .stat-row-divided > div{ padding:0 2.5rem; border-left:1px solid rgba(247,246,242,0.18); }
  .stat-row-divided > div:first-child{ padding-left:0; border-left:none; }
}

/* A single statistic given the whole stage — huge type, tiny label. Used
   once per page, deliberately, instead of three equally-sized numbers
   competing for attention. */
.stat-number-huge{
  font-size:clamp(4.5rem, 16vw, 9rem); line-height:0.95;
  text-shadow: 0 0 40px rgba(168,118,62,0.22);
}

/* ===== Values — interactive numbered list =====
   Click/hover/focus any item; its description swaps in on the right.
   Absolute-positioned paragraphs cross-fade over a fixed-height box so
   swapping never shifts the layout under a cursor mid-hover. */
.values-item{
  display:flex; align-items:baseline; gap:1.25rem; width:100%; text-align:left;
  padding:1.35rem 0; border-top:1px solid var(--line); background:none;
  border-left:none; border-right:none; cursor:pointer;
}
.values-list .values-item:last-child{ border-bottom:1px solid var(--line); }
.values-index{ font-family:'Fraunces',serif; color:var(--accent-soft); font-size:0.95rem; flex-shrink:0; }
.values-name{
  font-family:'Fraunces',serif; font-size:1.5rem; letter-spacing:-0.02em;
  color:var(--ink-soft); transition:color 0.3s ease;
}
@media (min-width:768px){ .values-name{ font-size:1.9rem; } }
.values-item.is-active .values-name{ color:var(--ink); }
.values-item.is-active .values-index{ color:var(--accent); }
@media (hover:hover) and (pointer:fine){
  .values-item:hover .values-name{ color:var(--ink); }
  .values-item:hover .values-index{ color:var(--accent); }
}
.values-item:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
/* Taller than the text alone needs — .values-detail-num below fills the
   rest with a large faint numeral (the same "ghost numeral" motif used on
   the services page's bridges) so the right column carries visual weight
   closer to the four-item list beside it, instead of one short paragraph
   floating over empty space. */
.values-detail{ position:relative; min-height:16rem; }
.values-detail p{
  position:absolute; top:0; left:0; right:0; opacity:0; pointer-events:none;
  transition:opacity 0.3s ease; color:var(--ink-soft); line-height:1.7; font-size:1.05rem;
}
.values-detail p.is-active{ opacity:1; pointer-events:auto; }
.values-detail-num{
  position:absolute; bottom:0; right:0; opacity:0;
  font-family:'Fraunces',serif; font-weight:600; font-size:7rem; line-height:1;
  color:var(--accent-soft); transition:opacity 0.3s ease; pointer-events:none;
}
.values-detail-num.is-active{ opacity:0.3; }
@media (prefers-reduced-motion: reduce){
  .values-name, .values-index, .values-detail p, .values-detail-num{ transition:none; }
}

/* Pop-in entrance for stat cards — scale+rotate rather than a flat slide-up */
.js-reveal .reveal.reveal-pop{ transform: translateY(20px) scale(0.86) rotate(-2deg); }
.js-reveal .reveal.reveal-pop.is-visible{ transform:none; }

/* Step panel */
.step-panel + .step-panel{ margin-top:6rem; }
@media (min-width:768px){ .step-panel + .step-panel{ margin-top:10rem; } }

.step-panel-label{
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.8125rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-warm-text);
}
.step-panel-heading{ font-weight:400; color:var(--ink); }
.step-panel-heading em{ font-style:italic; color:var(--accent-warm); }

.step-panel-checklist{ list-style:none; margin:0; padding:0; }
.step-panel-checklist li{
  position:relative; padding-left:1.75rem; color:var(--ink-soft);
  line-height:1.6;
}
.step-panel-checklist li + li{ margin-top:0.6rem; }
.step-panel-checklist li::before{
  content:''; position:absolute; left:0; top:0.5em; width:10px; height:10px;
  border-radius:999px; border:2px solid var(--accent-warm); background:var(--paper);
}

.step-panel-cta{
  display:inline-flex; align-items:center; gap:0.5rem; font-weight:600;
  font-size:0.9rem; padding:0.75rem 1.5rem; border-radius:999px;
  background:var(--accent-warm); color:var(--paper-raised);
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.step-panel-cta:hover{ background:#914a2c; transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .step-panel-cta{ transition:none; } .step-panel-cta:hover{ transform:none; } }

.step-panel-image{ aspect-ratio:4/5; border-radius:1.5rem; overflow:hidden; }

/* ===== Process timeline — alternating cards along a center line ===== */
.timeline{ position:relative; }
.timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, rgba(74,80,88,0.2) 8%, rgba(168,118,62,0.35) 50%, rgba(74,80,88,0.2) 92%, transparent);
  transform:translateX(-50%); display:none;
}
/* Progressively-drawn fill over the static track above — grows as each row
   reveals (driven by the existing reveal IntersectionObserver in site.js,
   no new scroll-math engine), reading as the line being drawn as you scroll
   through the process instead of cards just fading in independently. */
.timeline-fill{
  display:none; position:absolute; left:50%; top:0; width:2px; height:0%;
  background:linear-gradient(to bottom, var(--accent), var(--accent-hover));
  transform:translateX(-50%); transition: height 0.8s var(--ease-out); z-index:0;
}
@media (min-width:768px){ .timeline-fill{ display:block; } }
@media (prefers-reduced-motion: reduce){ .timeline-fill{ transition:none; } }
.timeline-row{ display:grid; grid-template-columns:1fr; gap:1rem; position:relative; }
.timeline-row + .timeline-row{ margin-top:2rem; }
.timeline-dot{ display:none; }
@media (min-width: 768px){
  .timeline::before{ display:block; }
  .timeline-row{ grid-template-columns:1fr 2.5rem 1fr; align-items:center; gap:0; }
  .timeline-dot{
    display:flex; width:14px; height:14px; border-radius:999px; margin:0 auto;
    background:var(--accent); box-shadow:0 0 0 5px rgba(168,118,62,0.15), 0 0 16px rgba(168,118,62,0.4);
    position:relative; z-index:1;
  }
  /* Two staggered rings in --accent and --accent-hover, pulsing outward out of
     phase, read together as "pulsing colors" while only animating transform
     and opacity (never a layout- or paint-triggering property). */
  .timeline-dot::before,
  .timeline-dot::after{
    content:''; position:absolute; inset:-6px; border-radius:999px; pointer-events:none;
  }
  .timeline-dot::before{ background:var(--accent); animation: timeline-dot-pulse 2.4s ease-out infinite; }
  .timeline-dot::after{ background:var(--accent-hover); animation: timeline-dot-pulse 2.4s ease-out infinite; animation-delay:1.2s; }
  .timeline-row .timeline-card{ grid-column:1; }
  .timeline-row .timeline-spacer{ grid-column:3; }
  .timeline-row.is-flipped .timeline-card{ grid-column:3; }
  .timeline-row.is-flipped .timeline-spacer{ grid-column:1; }
}
.timeline-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:1.25rem;
  padding:1.5rem 1.75rem; box-shadow:var(--shadow-card);
}
.timeline-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px; background:var(--brand-deep); color:var(--paper);
  font-family:'Fraunces',serif; font-weight:600; font-size:0.9rem; margin-bottom:0.75rem;
}

/* ===== Linear timeline variant — one straight rail down the left edge,
   a dot per row, used for the Services list (numbered) and News feed
   (chronological). Reuses .timeline/.timeline-row/.timeline-fill and the
   reveal-driven fill-height logic already in site.js — only the layout
   differs from the homepage's alternating left/right cards, since a
   numbered list and a chronological feed both read better as one
   continuous line than a zigzag. Dots start neutral and switch to the
   accent color + a one-shot pulse when their row's reveal fires, so the
   line visibly "fills in" as you scroll rather than everything already
   looking finished on load. */
.timeline--linear::before{
  display:block; left:1.5rem; top:0.25rem; bottom:0.25rem;
  background:linear-gradient(to bottom, transparent, rgba(74,80,88,0.2) 6%, rgba(168,118,62,0.3) 50%, rgba(74,80,88,0.2) 94%, transparent);
}
.timeline--linear .timeline-fill{ display:block; left:1.5rem; }
.timeline--linear .timeline-row{
  display:grid; grid-template-columns:3rem 1fr; column-gap:1.25rem; align-items:start;
}
.timeline--linear .timeline-row + .timeline-row{ margin-top:2.75rem; }
.timeline--linear .timeline-dot{
  display:flex; grid-column:1; width:3rem; height:3rem; margin:0;
  align-items:center; justify-content:center; position:relative; z-index:1;
  border-radius:999px; background:var(--paper-raised); border:2px solid var(--line); box-shadow:none;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out);
}
.timeline--linear .timeline-row.is-visible .timeline-dot{
  background:var(--accent); border-color:var(--accent); transform:scale(1.05);
  box-shadow:0 0 0 5px rgba(168,118,62,0.15);
}
.timeline--linear .timeline-dot::before{ background:var(--accent); animation:none; opacity:0; }
.timeline--linear .timeline-dot::after{ animation:none; opacity:0; }
.timeline--linear .timeline-row.is-visible .timeline-dot::before{ animation: timeline-dot-pulse 0.9s ease-out 1; }
.timeline--linear .timeline-dot-label{
  font-family:'Fraunces',serif; font-weight:600; font-size:0.85rem; color:var(--ink-soft);
  transition: color 0.4s ease;
}
.timeline--linear .timeline-row.is-visible .timeline-dot-label{ color:#fff; }
.timeline--linear .timeline-content{ grid-column:2; }
@media (max-width:479px){
  .timeline--linear::before, .timeline--linear .timeline-fill{ left:1.125rem; }
  .timeline--linear .timeline-row{ grid-template-columns:2.25rem 1fr; column-gap:0.85rem; }
  .timeline--linear .timeline-dot{ width:2.25rem; height:2.25rem; }
  .timeline--linear .timeline-dot-label{ font-size:0.62rem; }
}
@media (prefers-reduced-motion: reduce){
  .timeline--linear .timeline-dot{ transition:none; }
  .timeline--linear .timeline-row.is-visible .timeline-dot::before{ animation:none; opacity:0; }
}

/* News feed's date badge doubles as its timeline dot — wider than the
   generic 3rem circle so month/day/year all still fit. */
.timeline--news .timeline-row{ grid-template-columns:4.25rem 1fr; }
.timeline--news .timeline-dot{
  width:4.25rem; height:auto; border-radius:0.85rem; flex-direction:column; padding:0.6rem 0.3rem;
  line-height:1.15;
}
.timeline--news .timeline-dot .news-month{ font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); transition:color 0.4s ease; }
.timeline--news .timeline-dot .news-day{ font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; color:var(--ink); transition:color 0.4s ease; }
.timeline--news .timeline-dot .news-year{ font-size:0.6rem; color:var(--ink-soft); transition:color 0.4s ease; }
.timeline--news .timeline-row.is-visible .timeline-dot .news-month{ color:var(--accent-soft); }
.timeline--news .timeline-row.is-visible .timeline-dot .news-day,
.timeline--news .timeline-row.is-visible .timeline-dot .news-year{ color:#fff; }
@media (max-width:479px){
  .timeline--news .timeline-row{ grid-template-columns:3.5rem 1fr; }
  .timeline--news .timeline-dot{ width:3.5rem; padding:0.45rem 0.2rem; }
  .timeline--news .timeline-dot .news-day{ font-size:1.05rem; }
}

/* ===== Image hover-zoom — subtle scale on hover/focus, used on the
   Services page's alternating image blocks so the section reads as
   interactive rather than a flat gallery. Transform only. */
.img-hover-zoom{ overflow:hidden; position:relative; }
.img-hover-zoom img{ transition: transform 0.5s var(--ease-out); filter:saturate(1.08) contrast(1.03); }
.img-hover-zoom:hover img, .img-hover-zoom:focus-within img{ transform:scale(1.06); }
/* A soft brand-tinted color grade so stock photography reads as art-directed
   rather than pasted-in — warm gold at the top-left easing into a touch of
   the brand's dark ink at the bottom-right, multiplied over the photo. */
.img-hover-zoom::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(168,118,62,0.16) 0%, transparent 45%, rgba(34,38,42,0.12) 100%);
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion: reduce){
  .img-hover-zoom img{ transition:none; }
  .img-hover-zoom:hover img, .img-hover-zoom:focus-within img{ transform:none; }
}

/* ===== Accent pulse dot — a small always-on ping, used inside eyebrow
   badges (e.g. each Services row's label) so a static pill reads as
   "live" without borrowing the nav's semantic green live-dot. Same
   live-dot-pulse keyframe, different host/color. */
.accent-dot{ position:relative; width:6px; height:6px; border-radius:999px; background:var(--accent); flex-shrink:0; }
.accent-dot::after{
  content:''; position:absolute; inset:-5px; border:1.5px solid var(--accent); border-radius:999px;
  animation: live-dot-pulse 2.4s ease-out infinite; opacity:0.5;
}
@media (prefers-reduced-motion: reduce){ .accent-dot::after{ animation:none; opacity:0; } }

/* ===== Tag ticker — slow auto-scrolling marquee of real service names,
   used at the top of the Services list. Duplicated content for a
   seamless loop; pauses on hover so it never fights someone trying to
   read it, and freezes (wraps normally) under reduced motion. */
.tag-ticker{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tag-ticker-track{ display:flex; width:max-content; animation: ticker-scroll 32s linear infinite; }
.tag-ticker:hover .tag-ticker-track, .tag-ticker:focus-within .tag-ticker-track{ animation-play-state:paused; }
.tag-ticker-item{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1rem, 2vw, 1.2rem);
  color:var(--ink-soft); white-space:nowrap; display:flex; align-items:center; padding:0 1.75rem;
}
.tag-ticker-item::after{ content:'\2022'; color:var(--accent); margin-left:1.75rem; font-style:normal; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .tag-ticker{ -webkit-mask-image:none; mask-image:none; }
  .tag-ticker-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}

/* ===== Blog page opening — a character-decode headline + a light-sweep
   across the dark header, distinct from every other page's calm
   hero-intro fade-up. Gated by the same .is-intro-ready class the rest
   of the site's staged reveal uses (added either immediately or once
   the splash finishes — see site.js), so first-visit vs repeat-visit
   timing still lines up; the actual character-cycling is driven from
   JS, this just holds the sweep and the per-char opacity states. */
.blog-hero{ position:relative; }
.blog-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(100deg, transparent 30%, rgba(217,185,138,0.22) 45%, rgba(217,185,138,0.4) 50%, rgba(217,185,138,0.22) 55%, transparent 70%);
  background-size:250% 100%; background-position:150% 0; opacity:0;
}
.is-intro-ready .blog-hero::before{ animation: blog-sweep 2.4s ease-in-out 0.2s 2; }
@keyframes blog-sweep{
  0%{ background-position:150% 0; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ background-position:-50% 0; opacity:0; }
}
.blog-decode .char{ display:inline-block; opacity:0; }
@media (prefers-reduced-motion: reduce){
  .blog-hero::before{ animation:none !important; opacity:0 !important; }
  .blog-decode .char{ opacity:1 !important; }
}

/* Ghost numeral for the home page's boxless editorial trio — adds the same
   "numbered system" presence as the Services/Blog numbered badges, without
   reversing the deliberate no-card-boxes treatment those three blocks use. */
.editorial-num{
  display:block; font-family:'Fraunces',serif; font-weight:600; font-size:2.5rem;
  line-height:1; color:var(--accent-soft); opacity:0.6; margin-bottom:0.75rem;
}

/* Numbered badge on each blog card, matching the Services page's
   numbered-step language so the two "list" pages read as one system. */
.blog-card-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px; background:var(--brand-deep); color:var(--paper);
  font-family:'Fraunces',serif; font-weight:600; font-size:0.85rem; flex-shrink:0;
  transition: box-shadow 0.35s ease;
}
/* Blog card premium hover — the whole card lifts, its badge gets a soft
   glow ring, and the "Read the full article" arrow nudges forward, all on
   real pointers only so a touch tap never leaves a stuck hover state. */
.blog-card-link{ transition: transform 0.4s var(--ease-spring); border-radius:1.25rem; }
.blog-card-arrow{ display:inline-block; transition: transform 0.3s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .blog-card-link:hover{ transform:translateY(-6px); }
  .blog-card-link:hover .blog-card-num{ box-shadow:0 0 0 6px rgba(168,118,62,0.16); }
  .blog-card-link:hover .blog-card-arrow{ transform:translateX(5px); }
}
@media (prefers-reduced-motion: reduce){
  .blog-card-link{ transition:none; }
  .blog-card-link:hover{ transform:none; }
}

/* ===== Blog editorial redesign — category filter pills =====
   Real client-side filtering (site.js toggles .hidden on matching
   [data-category] elements), not decorative. Kept deliberately quiet —
   thin border, no color until hover/active — so the row reads as
   navigation, not another row of buttons competing with the CTAs. */
.blog-filter-bar{ display:flex; flex-wrap:wrap; gap:0.625rem; }
.blog-filter-pill{
  font-size:0.8rem; font-weight:600; letter-spacing:0.01em;
  padding:0.5rem 1.1rem; border-radius:9999px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--paper-raised);
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
@media (hover:hover) and (pointer:fine){
  .blog-filter-pill:hover{ border-color:var(--accent); color:var(--ink); }
}
.blog-filter-pill:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.blog-filter-pill.is-active{ background:var(--brand-deep); border-color:var(--brand-deep); color:var(--paper); }
@media (prefers-reduced-motion: reduce){ .blog-filter-pill{ transition:none; } }
/* Dedicated hidden state (not Tailwind's .hidden) — site.css loads after the
   Tailwind bundle, so a plain .hidden{display:none} utility loses the
   cascade to this file's own .blog-list-row{display:grid} at equal
   specificity. !important here is intentional: this must always win. */
.is-hidden{ display:none !important; }

/* Category + read-time byline, shared by the featured card and each list row */
.blog-meta{ font-size:0.8rem; color:var(--ink-soft); }
.blog-meta-cat{ color:var(--brand); font-weight:600; }

/* ===== Blog editorial redesign — secondary article list =====
   Deliberately not a card grid: a divided, text-forward list (thin
   top-border rule per row) so the one Featured piece above reads as
   the clear hero and these read as an index, per the "enterprise
   editorial publication, not startup blog template" brief. Background
   tint + title color + arrow nudge on hover, no lift/shadow — that
   heavier treatment stays reserved for the single featured card. */
.blog-list-row{
  display:grid; grid-template-columns:1fr; gap:0.75rem;
  grid-template-areas: "index" "body" "cta";
  padding:1.75rem 0; border-top:1px solid var(--line);
  transition: background-color 0.3s ease;
}
.blog-list-row:last-of-type{ border-bottom:1px solid var(--line); }
@media (min-width:768px){
  .blog-list-row{
    grid-template-columns:4.5rem 1fr auto; gap:1.75rem; align-items:center;
    grid-template-areas: "index body cta";
  }
}
.blog-list-index{
  grid-area:index; font-family:'Fraunces',serif; font-weight:600; color:var(--accent-soft);
  font-size:1.15rem; line-height:1;
}
.blog-list-body{ grid-area:body; }
.blog-list-cta{ grid-area:cta; white-space:nowrap; }
.blog-list-title{ transition:color 0.25s ease; }
@media (hover:hover) and (pointer:fine){
  .blog-list-row:hover{ background:rgba(74,80,88,0.035); }
  .blog-list-row:hover .blog-list-title{ color:var(--brand); }
  .blog-list-row:hover .blog-card-arrow{ transform:translateX(5px); }
}
@media (prefers-reduced-motion: reduce){ .blog-list-row{ transition:none; } }

/* Stacked-sticky scroll card */
.stack-scroll .timeline-row{
  position:sticky; top:calc(5rem + var(--stack-index, 0) * 0.9rem);
  z-index:calc(var(--stack-index, 0) + 1);
  background:var(--paper-raised); border:1px solid var(--line); border-bottom:none;
  border-radius:1.5rem 1.5rem 0 0; box-shadow:0 -12px 28px rgba(28,31,34,0.07);
  padding:2rem 1.5rem; margin-top:0 !important;
  min-height:calc(100svh - 5rem);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.stack-scroll .timeline-row:last-child{ border-bottom:1px solid var(--line); border-radius:1.5rem; box-shadow:var(--shadow-card); }
.stack-scroll .timeline-row + .timeline-row{ margin-top:1.25rem; }
/* The dot/date badge normally sits inline at the top of the row (see
   .timeline--linear grid-template-columns above); in the full-screen
   panels it reads better pinned to the corner of the card instead of
   pushing the vertically-centered content off-balance. */
.stack-scroll .timeline-row{ position:sticky; }
.stack-scroll .timeline-dot{ position:absolute; top:1.75rem; left:1.5rem; }
.stack-scroll .timeline-content{ margin-top:2.5rem; }
.timeline-image{
  margin-top:1.5rem; border-radius:1rem; overflow:hidden; aspect-ratio:16/9;
  box-shadow:var(--shadow-card);
}
.timeline-image img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:768px){
  .stack-scroll .timeline-content{ margin-top:0; }
  .stack-scroll .timeline-dot{ position:static; margin-bottom:1.75rem; width:4.5rem !important; padding:0.65rem 0.3rem !important; }
  .stack-scroll .timeline-dot .news-day{ font-size:1.5rem !important; }
  .stack-scroll .timeline-dot .news-month{ font-size:0.7rem !important; }
  .stack-scroll .timeline-dot .news-year{ font-size:0.68rem !important; }
  .stack-scroll h2{ font-size:2.75rem !important; line-height:1.12 !important; letter-spacing:-0.01em; max-width:34rem; }
  .stack-scroll .timeline-content p{ font-size:1.2rem !important; line-height:1.65 !important; max-width:38rem; margin-top:1rem; }
  .stack-scroll .timeline-image{ margin-top:2rem; aspect-ratio:16/8; max-height:min(46vh, 420px); width:100%; }
  .stack-scroll .timeline-row{ padding:3rem 3.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .stack-scroll .timeline-row{ position:relative; top:auto; box-shadow:var(--shadow-card); border-radius:1.5rem; border-bottom:1px solid var(--line); min-height:0; }
  .stack-scroll .timeline-dot{ position:static; margin-bottom:1rem; }
}

/* Circular portrait halo — an oversized soft-color ring behind each team
   photo, gently pulsing. The avatar itself keeps its own overflow-hidden
   circle crop, so the halo lives on this separate wrapper instead, sized
   larger and sitting behind it (z-index), rather than on the photo itself
   where overflow-hidden would just clip it away. */
.avatar-halo{ position:relative; }
.avatar-halo::before{
  content:''; position:absolute; inset:-14%; border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 72%);
  opacity:0.45;
  animation: halo-pulse 4.5s ease-in-out infinite;
}
.avatar-halo .team-avatar{ position:relative; z-index:1; }
@keyframes halo-pulse{
  0%,100%{ transform:scale(1); opacity:0.35; }
  50%{ transform:scale(1.09); opacity:0.6; }
}
@media (prefers-reduced-motion: reduce){
  .avatar-halo::before{ animation:none; }
}

/* ===== Hover effects, gated to real pointers (plan 001) =====
   Prevents touch taps from triggering and "sticking" a hover state. */
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover{ background-position:100% 0%; color:var(--ink); transform: translateY(-2px); }

  .btn-primary:hover{
    background-position:100% 0%;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px -6px rgba(168,118,62,0.55);
  }

  .btn-outline:hover{
    background-position:100% 0%;
    transform: translateY(-3px) scale(1.02);
    border-color:rgba(247,245,239,0.7);
    box-shadow: 0 10px 26px -8px rgba(247,245,239,0.22);
  }

  .btn-dark:hover{
    background-position:100% 0%;
    transform: translateY(-3px) scale(1.02);
    border-color:rgba(217,185,138,0.75);
    box-shadow: 0 14px 32px -8px rgba(168,118,62,0.35);
  }

  .nav-link:hover{ color:var(--ink); }
  .nav-link:hover::after{ transform:scaleX(1); }


  .card-premium .team-avatar{ transition: transform 0.4s var(--ease-spring); }
  .card-premium:hover .team-avatar{ transform: scale(1.05) rotate(-2deg); }
}

/* Chat widget */
.chatbot-launcher{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:3.75rem; height:3.75rem; border-radius:9999px;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color:var(--paper); border:1px solid rgba(217,185,138,0.35);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow-accent);
  cursor:pointer;
  opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, opacity 0.3s ease;
}
/* Hidden until the visitor scrolls past the hero — on short/mobile viewports
   the hero's own text can otherwise sit directly behind the launcher on
   first load, burying the last line under an opaque button. */
.chatbot-launcher.is-revealed{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chatbot-launcher.is-revealed:active{ transform: scale(0.96); }
@media (prefers-reduced-motion: reduce){
  .chatbot-launcher{ transition: opacity 0.15s ease; transform:none; }
  .chatbot-launcher.is-revealed{ transform:none; }
}
.chatbot-launcher:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chatbot-launcher .icon-close{ display:none; }
.chatbot-launcher.is-open .icon-chat{ display:none; }
.chatbot-launcher.is-open .icon-close{ display:block; }

.chatbot-panel{
  position:fixed; right:1.25rem; bottom:6rem; z-index:90;
  width:min(360px, calc(100vw - 2rem));
  max-height:min(520px, calc(100vh - 8rem));
  background:var(--paper-raised); border-radius:var(--radius-shell);
  box-shadow:var(--shadow-card-hover); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform: translateY(16px) scale(0.96); transform-origin:bottom right;
  pointer-events:none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-spring);
}
.chatbot-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.chatbot-panel-header{
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  color:var(--paper); padding:1rem 1.25rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
.chatbot-panel-title{ font-size:0.95rem; font-weight:600; }
.chatbot-panel-sub{ font-size:0.72rem; color:rgba(247,246,242,0.7); margin-top:0.15rem; }
.chatbot-panel-close{
  flex-shrink:0; width:30px; height:30px; border-radius:999px; color:var(--paper);
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.12);
  transition: background-color 0.2s ease, transform 0.2s var(--ease-spring);
}
.chatbot-panel-close:hover{ background:rgba(255,255,255,0.22); }
.chatbot-panel-close:active{ transform:scale(0.92); }
.chatbot-panel-close:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }

.chatbot-body{ padding:1.1rem 1.1rem 1.25rem; overflow-y:auto; flex:1; }
.chatbot-msg{
  background:var(--paper); border:1px solid var(--line); border-radius:1rem; border-top-left-radius:0.35rem;
  padding:0.7rem 0.9rem; font-size:0.85rem; line-height:1.5; color:var(--ink-soft);
  margin-bottom:0.85rem; max-width:92%; width:fit-content;
}
.chatbot-msg.is-user{
  background:var(--brand); color:var(--paper); border:none;
  border-radius:1rem; border-top-right-radius:0.35rem;
  margin-left:auto; margin-right:0;
}
.chatbot-typing{ display:flex; align-items:center; gap:0.3rem; padding:0.85rem 0.9rem; }
.chatbot-typing span{
  width:6px; height:6px; border-radius:999px; background:var(--ink-soft); opacity:0.5;
  animation: chatbot-typing-bounce 1.1s ease-in-out infinite;
}
.chatbot-typing span:nth-child(2){ animation-delay:0.15s; }
.chatbot-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes chatbot-typing-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:0.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .chatbot-typing span{ animation:none; }
}
.chatbot-quick-replies{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; }
.chatbot-option{
  text-align:left; font-size:0.82rem; font-weight:600; color:var(--brand);
  border:1px solid var(--line); border-radius:0.75rem; padding:0.6rem 0.85rem;
  background:var(--paper-raised); width:100%;
  transition: border-color 0.2s ease, transform 0.2s var(--ease-spring), background-color 0.2s ease;
}
.chatbot-option:active{ transform: scale(0.98); }
.chatbot-option:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.chatbot-input-row{
  display:flex; align-items:center; gap:0.5rem; flex-shrink:0;
  padding:0.65rem 0.75rem; border-top:1px solid var(--line); background:var(--paper-raised);
}
.chatbot-input{
  flex:1; min-width:0; border:none; background:var(--paper); border-radius:999px;
  padding:0.6rem 1rem; font-size:0.85rem; color:var(--ink);
}
.chatbot-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.chatbot-input:disabled{ opacity:0.6; }
.chatbot-send{
  flex-shrink:0; width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  transition: background-color 0.2s ease, transform 0.2s var(--ease-spring);
}
.chatbot-send:hover{ background:var(--accent-hover); }
.chatbot-send:active{ transform:scale(0.92); }
.chatbot-send:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.chatbot-send:disabled{ opacity:0.5; pointer-events:none; }

@media (hover:hover) and (pointer:fine){
  .chatbot-launcher:hover{ transform: translateY(-3px) scale(1.04); }
  .chatbot-option:hover{ border-color:var(--brand); background: rgba(74,80,88,0.04); }
}
@media (prefers-reduced-motion: reduce){
  .chatbot-launcher, .chatbot-panel, .chatbot-option{ transition: none; }
}
/* Below 640px, the chat becomes its own full screen rather than a small
   corner popup — closer to a real messaging app than a widget bolted onto
   the corner of the page. */
@media (max-width: 640px){
  .chatbot-panel{
    right:0; left:0; top:0; bottom:0; width:100%; max-height:100%;
    border-radius:0; border:none;
    transform: translateY(100%); transform-origin:center;
  }
  .chatbot-panel.is-open{ transform:translateY(0); }
  .chatbot-panel-header{ padding-top:calc(1rem + env(safe-area-inset-top)); }
  .chatbot-input-row{ padding-bottom:calc(0.65rem + env(safe-area-inset-bottom)); }
  .chatbot-launcher{ right:1rem; bottom:1rem; }
}

/* FAQ accordion */
.faq-search-wrap{ position:relative; }
.faq-search-icon{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); pointer-events:none;
}
.faq-search{
  width:100%; border:1px solid var(--line); border-radius:9999px; background:var(--paper-raised);
  padding:0.75rem 1.25rem 0.75rem 2.75rem; font-size:0.875rem; color:var(--ink);
}
.faq-search:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.faq-jumpto{ display:flex; flex-direction:column; gap:0.3rem; margin-top:1.75rem; }
.faq-jumpto-label{ font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:0.5rem; }
.faq-jumpto a{
  font-size:0.85rem; font-weight:600; color:var(--ink-soft); padding:0.4rem 0 0.4rem 0.85rem;
  border-left:2px solid var(--line); transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-jumpto a:hover{ color:var(--brand); border-left-color:var(--accent-soft); }

.faq-category{ margin-bottom:3.5rem; scroll-margin-top:6.5rem; }
.faq-category:last-child{ margin-bottom:0; }
.faq-category-title{ margin-bottom:0.5rem; }
/* Editorial divided list, not boxed cards — thin top-border rules between
   rows, matching the Blog page's secondary-article list pattern instead of
   the bordered/rounded/backgrounded "card" this used to be. */
.faq-list{ display:flex; flex-direction:column; counter-reset:faq-counter; }
.faq-item{
  border-top:1px solid var(--line); transition: background-color 0.3s ease;
}
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item.is-open{ background:rgba(74,80,88,0.03); }
.faq-question{
  counter-increment: faq-counter;
  width:100%; display:grid; grid-template-columns:2.25rem 1fr 1.5rem; align-items:baseline; gap:1rem;
  padding:1.35rem 0; text-align:left; font-weight:600; font-size:1.02rem; color:var(--ink);
}
.faq-question::before{
  content: counter(faq-counter, decimal-leading-zero);
  font-family:'Fraunces',serif; font-weight:600; color:var(--accent-soft); font-size:0.9rem;
}
.faq-question:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.faq-toggle{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-soft); transition: transform 0.3s var(--ease-out), color 0.2s ease;
}
.faq-toggle::before{ content:'\2192'; font-size:1.05rem; }
.faq-item.is-open .faq-toggle{ transform:rotate(90deg); color:var(--brand); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height 0.3s var(--ease-out); }
.faq-answer-inner{ padding:0 2.25rem 1.5rem 0; margin-left:2.25rem; font-size:0.9rem; color:var(--ink-soft); line-height:1.7; max-width:38rem; }
.faq-answer-inner a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .faq-item{ transition:none; }
  .faq-answer{ transition:none; }
  .faq-toggle{ transition:none; }
}

/* In The News / Press list — structure borrowed from eClinicalWorks' news
   archive (date badge + headline + excerpt + divider), copy is entirely
   H&A's own. */
.news-item{ display:flex; gap:1.25rem; padding:1.85rem 0; border-bottom:1px solid var(--line); }
.news-item:first-child{ padding-top:0; }
.news-item:last-child{ border-bottom:none; padding-bottom:0; }
.news-date-badge{
  flex-shrink:0; width:64px; background:var(--brand-deep); color:var(--paper); border-radius:0.85rem;
  text-align:center; padding:0.65rem 0.3rem; line-height:1.15;
}
.news-date-badge .news-month{ font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-soft); }
.news-date-badge .news-day{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; }
.news-date-badge .news-year{ font-size:0.62rem; color:rgba(247,246,242,0.65); }
.news-year-filter{ display:flex; flex-direction:column; gap:0.4rem; }
.news-year-filter a{
  font-size:0.85rem; font-weight:600; color:var(--ink-soft); padding:0.3rem 0;
  transition: color 0.2s ease;
}
.news-year-filter a:hover, .news-year-filter a.is-active{ color:var(--brand); }


/* =====================================================================
   APPLE DESIGN LAYER + LIGHT/DARK THEME  (added 2026-09-19)
   Appended last so it wins on equal specificity. Light-mode values are
   unchanged wherever a rule below isn't an intentional restyle (glass pill
   nav, flip cards, split-logo showcase, type wrapping).

   Principles applied (WWDC "Designing Fluid Interfaces" + design foundations):
   - Materials: translucent blurred surfaces carry hierarchy; a bright top
     edge reads as light catching the material.
   - Motion: critically damped easing by default (no overshoot); feedback
     fires on press, not release; only transform/opacity animate.
   - Accessibility: reduced-motion -> cross-fade; reduced-transparency ->
     frosted solid; increased-contrast -> defined borders.
   - Type: balanced headings, pretty paragraphs, optical sizing on.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;
  --surface:#f2f3f4;                 /* page background — identical to --paper in light */
  --ease-apple: cubic-bezier(0.32,0.72,0,1);
  --glass-bg: rgba(247,246,242,0.72);
  --glass-bg-strong: rgba(247,246,242,0.92);
  --glass-line: rgba(34,38,42,0.09);
  --glass-hi: rgba(255,255,255,0.8);
  --glass-shadow: 0 1px 2px rgba(34,38,42,0.06), 0 14px 34px -14px rgba(34,38,42,0.3);
  --dark-panel: linear-gradient(145deg, #22262a 0%, #2c3136 58%, #3a2f26 100%);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --ink:#edeff1;
  --ink-soft:#a9b0b8;
  --surface:#0e1012;
  --paper-raised:#171a1d;
  --line:rgba(255,255,255,0.11);
  --accent-warm-text:#d9b98a;
  --glass-bg: rgba(22,25,28,0.68);
  --glass-bg-strong: rgba(22,25,28,0.92);
  --glass-line: rgba(255,255,255,0.11);
  --glass-hi: rgba(255,255,255,0.1);
  --glass-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -14px rgba(0,0,0,0.7);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 10px 24px -8px rgba(0,0,0,0.55), 0 28px 56px -28px rgba(0,0,0,0.65);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.5), 0 18px 36px -10px rgba(0,0,0,0.6), 0 36px 72px -28px rgba(0,0,0,0.7);
  --dark-panel: linear-gradient(145deg, #1b1e22 0%, #24282d 58%, #302620 100%);
}
body{ background:var(--surface); color:var(--ink); }

/* Theme change cross-fades the whole page via the View Transitions API
   (opacity only — never a colour transition on every element). */
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 0.4s; animation-timing-function: var(--ease-apple); }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration: 0.01s; }
}

/* ---------- 2. Typography ---------- */
.font-display{ font-optical-sizing: auto; }
h1, h2, h3, h4{ text-wrap: balance; }
p, li{ text-wrap: pretty; }


#siteHeader{
  padding:0.625rem 0; border-bottom-width:0; border-color:transparent;
  background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  pointer-events:none;
  --pill-bg: var(--glass-bg); --pill-line: var(--glass-line); --pill-hi: var(--glass-hi);
}
#siteHeader.is-scrolled{ box-shadow:none; }
#siteHeader.header--transparent:not(.is-scrolled){
  --pill-bg: rgba(18,20,22,0.34); --pill-line: rgba(255,255,255,0.18); --pill-hi: rgba(255,255,255,0.16);
}
#siteHeader > div{
  pointer-events:auto;
  height:3.75rem; width:min(70rem, calc(100% - 1.25rem)); max-width:none;
  padding-inline:0.9rem 0.6rem;
  border-radius:999px;
  background:var(--pill-bg);
  border:1px solid var(--pill-line);
  box-shadow: inset 0 1px 0 var(--pill-hi), var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
#siteHeader.header--transparent:not(.is-scrolled) > div{ box-shadow: inset 0 1px 0 var(--pill-hi), 0 10px 30px -14px rgba(0,0,0,0.5); }
@media (min-width:768px){ #siteHeader > div{ padding-inline:1.1rem 0.7rem; } }

/* Grouped CTA + theme toggle so the bar keeps three flex children. */
.header-actions{ display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }

.nav-logo-mark{ transition: transform 0.5s var(--ease-apple); }
a:hover > .nav-logo-mark{ transform: rotate(-4deg) scale(1.06); }
html[data-theme="dark"] .nav-logo-mark{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 4px 14px rgba(168,118,62,0.28));
  border-radius: 0.7rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}
html[data-theme="dark"] .nav-wordmark{ color:#fff; }

/* ---------- 4. Theme toggle ---------- */
.theme-toggle{
  position:relative; display:inline-grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:999px; flex-shrink:0;
  color:var(--ink); background:transparent; border:1px solid var(--glass-line);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition: transform 0.25s var(--ease-apple), background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle--header{ display:none; }
@media (min-width:768px){ .theme-toggle--header{ display:inline-grid; } }
@media (hover:hover) and (pointer:fine){ .theme-toggle:hover{ background:rgba(127,127,127,0.14); } }
.theme-toggle:active{ transform:scale(0.9); transition-duration:0.09s; }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle svg{
  grid-area:1/1; width:1.15rem; height:1.15rem;
  transition: transform 0.55s var(--ease-apple), opacity 0.3s ease;
}
.theme-toggle .icon-sun{ opacity:0; transform:rotate(-80deg) scale(0.4); }
html[data-theme="dark"] .theme-toggle .icon-sun{ opacity:1; transform:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(80deg) scale(0.4); }
#siteHeader.header--transparent:not(.is-scrolled) .theme-toggle{ color:#fff; border-color:rgba(255,255,255,0.24); }
html[data-theme="dark"] #siteHeader.is-scrolled .theme-toggle,
html[data-theme="dark"] #siteHeader:not(.header--transparent) .theme-toggle{ color:#fff; }

.mobile-theme-row{
  width:100%; justify-content:space-between; text-align:left;
  background:none; border:0; font:inherit; cursor:pointer;
}
.mobile-theme-state{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:0.5rem; }
.mobile-theme-state::before{
  content:''; width:2.1rem; height:1.25rem; border-radius:999px;
  background:linear-gradient(var(--accent), var(--accent)) no-repeat 0.2rem center / 0.85rem 0.85rem, var(--line);
  transition: background-position 0.4s var(--ease-apple);
}
html[data-theme="dark"] .mobile-theme-state::before{ background-position: calc(100% - 0.2rem) center, 0 0; }

/* ---------- 5. Materials: mobile menu, chat, modals ---------- */
.mobile-menu{
  background:var(--glass-bg-strong);
  border-color:var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  top:calc(5rem + 0.25rem);
  transform-origin: top right;           /* opens from the menu button (spatial consistency) */
}
.mobile-nav-link{ color:var(--ink); }
.mobile-nav-link:active{ background:rgba(127,127,127,0.14); }
.mobile-scrim{ top:0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-theme="dark"] .mobile-scrim{ background:rgba(0,0,0,0.55); }


.flip-grid{
  display:grid; gap:1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.flip-card{
  position:relative; perspective:1600px; min-height:19.5rem;
  outline:none; -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.flip-card-inner{
  position:relative; display:grid; width:100%; height:100%;
  transform-style:preserve-3d;
  transition: transform 0.75s var(--ease-apple);
}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-card-inner{ transform:rotateY(180deg); }
}
.flip-card.is-flipped .flip-card-inner,
.flip-card:has(a:focus-visible) .flip-card-inner,
.flip-card:focus-visible .flip-card-inner{ transform:rotateY(180deg); }
.flip-card:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--radius-shell); }

.flip-face{
  grid-area:1/1; display:flex; flex-direction:column; box-sizing:border-box;
  width:100%; min-height:100%;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:var(--radius-shell); padding:1.9rem 1.75rem 1.6rem;
}
.flip-front{
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(168,118,62,0.10), transparent 55%),
    var(--paper-raised);
  border:1px solid var(--line); box-shadow:var(--shadow-card);
}
.flip-back{
  transform:rotateY(180deg);
  background:var(--dark-panel); color:var(--paper);
  border:1px solid rgba(217,185,138,0.3);
  box-shadow: var(--shadow-glow-accent), var(--shadow-card);
}
.flip-num{
  font-family:'Fraunces',serif; font-size:2.6rem; line-height:1; letter-spacing:-0.03em;
  color:var(--accent-soft); font-variant-numeric:lining-nums;
}
html:not([data-theme="dark"]) .flip-num{ color:var(--accent); }
.flip-rule{ display:block; width:2.5rem; height:3px; background:var(--accent); margin:1rem 0 1.1rem; border-radius:2px; }
.flip-title{ font-family:'Fraunces',serif; font-size:1.4rem; line-height:1.2; letter-spacing:-0.022em; color:var(--ink); margin-bottom:0.7rem; }
.flip-copy{ font-size:0.92rem; line-height:1.65; color:var(--ink-soft); }
.flip-hint{
  margin-top:auto; padding-top:1.25rem;
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-warm-text);
}
.flip-hint svg{ width:0.95rem; height:0.95rem; transition:transform 0.6s var(--ease-apple); }
@media (hover:hover) and (pointer:fine){ .flip-card:hover .flip-hint svg{ transform:rotate(180deg); } }
.flip-back .flip-eyebrow{ font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-soft); }
.flip-back .flip-title{ color:#fff; margin-top:0.55rem; }
.flip-list{ list-style:none; padding:0; margin:0.4rem 0 0; display:grid; gap:0.6rem; }
.flip-list li{ display:flex; gap:0.65rem; align-items:flex-start; font-size:0.9rem; line-height:1.45; color:rgba(247,246,242,0.86); }
.flip-list svg{ width:1.05rem; height:1.05rem; flex-shrink:0; margin-top:0.12rem; color:var(--accent-soft); }
.flip-link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.6rem 1.15rem; border-radius:999px;
  font-size:0.84rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.28);
  transition: transform 0.25s var(--ease-apple), background-color 0.2s ease;
}
.flip-back .flip-list{ margin-bottom:1.25rem; }
@media (hover:hover) and (pointer:fine){ .flip-link:hover{ background:rgba(255,255,255,0.2); transform:translateX(3px); } }
.flip-link:active{ transform:scale(0.96); transition-duration:0.09s; }
.flip-link:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }

/* Reduced motion: no 3D turn — the two faces cross-fade instead. */
@media (prefers-reduced-motion: reduce){
  .flip-card-inner, .flip-card:hover .flip-card-inner, .flip-card.is-flipped .flip-card-inner,
  .flip-card:has(a:focus-visible) .flip-card-inner, .flip-card:focus-visible .flip-card-inner{ transform:none; transition:none; }
  .flip-face{ -webkit-backface-visibility:visible; backface-visibility:visible; transition:opacity 0.25s ease; }
  .flip-back{ transform:none; opacity:0; pointer-events:none; }
  .flip-card.is-flipped .flip-front, .flip-card:hover .flip-front, .flip-card:has(a:focus-visible) .flip-front{ opacity:0; }
  .flip-card.is-flipped .flip-back, .flip-card:hover .flip-back, .flip-card:has(a:focus-visible) .flip-back{ opacity:1; pointer-events:auto; }
}


.split-logo-section{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(4.5rem, 9vw, 8rem) 0;
  border-block:1px solid var(--line);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(168,118,62,0.13), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(74,80,88,0.10), transparent 70%),
    var(--surface);
}
.split-logo-wrapper{
  --split-dist: min(19rem, 46vw);
  position:relative; width:min(40rem, 92vw); height:12.5rem;
  margin:3.25rem auto 2.75rem; perspective:1200px;
}
.split-logo-half{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  will-change:transform, opacity;
  transition: transform 1.3s var(--ease-apple), opacity 1.1s ease;
  opacity:0;
}
/* 1px overlap between the halves hides the antialiasing seam once merged */
.split-logo-left{  clip-path:inset(-5rem calc(50% - 0.5px) -5rem -5rem);  transform:translateX(calc(var(--split-dist) * -1)) rotateY(-22deg) scale(0.72); }
.split-logo-right{ clip-path:inset(-5rem -5rem -5rem calc(50% - 0.5px)); transform:translateX(var(--split-dist)) rotateY(22deg) scale(0.72); }
.split-logo-wrapper.is-merged .split-logo-half{ transform:none; opacity:1; }
.split-lockup{ display:flex; align-items:center; gap:clamp(1rem, 3vw, 1.6rem); width:max-content; }
.split-lockup svg{ width:clamp(5.5rem, 17vw, 8.25rem); height:auto; flex-shrink:0; filter: drop-shadow(0 14px 26px rgba(34,38,42,0.28)); }
.split-lockup-text{ text-align:left; }
.split-lockup-name{ font-family:'Fraunces',serif; font-size:clamp(2.4rem, 8.5vw, 4.4rem); line-height:0.95; letter-spacing:-0.035em; color:var(--ink); }
.split-lockup-sub{ margin-top:0.55rem; font-size:clamp(0.62rem, 1.9vw, 0.9rem); font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-warm-text); }
.split-logo-wrapper::after{
  content:''; position:absolute; inset:-2rem -3rem; border-radius:999px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(168,118,62,0.22), transparent 72%);
  opacity:0; transition:opacity 1.2s ease 0.9s; z-index:-1;
}
.split-logo-wrapper.is-merged::after{ opacity:1; }
html[data-theme="dark"] .split-lockup svg{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 12px 30px rgba(168,118,62,0.3)); }
@media (prefers-reduced-motion: reduce){
  .split-logo-half{ transition:opacity 0.3s ease; transform:none !important; opacity:1; }
  .split-logo-half{ clip-path:none; }
  .split-logo-right{ display:none; }
}

/* ---------- 8. Footer logo lockup ---------- */
footer .footer-logo-mark{ width:2.5rem; height:2.5rem; border-radius:0.7rem; box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 8px 22px -8px rgba(168,118,62,0.4); }

/* ---------- 9. Dark-mode adaptations of existing components ---------- */
html[data-theme="dark"]{
  scrollbar-color: rgba(255,255,255,0.22) var(--surface);
}
html[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--surface); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.22); border-color:var(--surface); }
/* Headings that used the graphite --brand as text colour on light surfaces */
html[data-theme="dark"] .text-\[var\(--brand\)\]{ color:var(--ink); }
html[data-theme="dark"] .hover\:text-\[var\(--brand\)\]:hover{ color:#fff; }
html[data-theme="dark"] .nav-link:focus-visible,
html[data-theme="dark"] .btn-primary:focus-visible,
html[data-theme="dark"] .btn-ghost:focus-visible,
html[data-theme="dark"] .service-quicknav-link:focus-visible{ outline-color:var(--accent-soft); }
html[data-theme="dark"] .service-quicknav-link:hover{ color:#fff; }
html[data-theme="dark"] .btn-ghost{
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
  background-size:250% 100%;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background-color:var(--paper-raised); color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] .bg-white{ background-color:var(--paper-raised); }
html[data-theme="dark"] ::placeholder{ color:rgba(169,176,184,0.7); }

/* ---------- 10. Accessibility media features ---------- */
@media (prefers-reduced-transparency: reduce){
  #siteHeader > div, .mobile-menu{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-bg-strong); }
  #siteHeader.header--transparent:not(.is-scrolled) > div{ background:rgba(18,20,22,0.82); }
  .mobile-scrim{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast: more){
  #siteHeader > div, .flip-front, .flip-back, .mobile-menu{ border-color:currentColor; }
  :root{ --glass-line: rgba(34,38,42,0.55); }
  html[data-theme="dark"]{ --glass-line: rgba(255,255,255,0.6); --line: rgba(255,255,255,0.35); }
}

/* ---------- 11. Header fit ----------
   The glass pill is narrower than the old full-bleed bar and now also holds
   the theme toggle, so the wordmark waits for >=1200px and the CTA uses its
   existing short label between 768px and 1099px. Measured overflow-free at
   768 / 820 / 900 / 1024 / 1100 / 1180 / 1280 / 1440. */
@media (max-width:1199px){ #siteHeader a[href="index.html"] > span{ display:none; } }
@media (min-width:768px) and (max-width:1099px){
  #siteHeader .header-actions .js-open-lead > span:first-child{ display:inline; }
  #siteHeader .header-actions .js-open-lead > span:last-child{ display:none; }
}

/* ---------- 12. Contrast-audit fixes ----------
   Found by measuring real contrast ratios on every page in both themes. */

/* Pre-existing, both themes: the About hero stats ask for accent-soft via a
   utility class, but .stat-number's own colour won the cascade and left them
   graphite on the dark hero (~1.9:1). */
.stat-number.text-\[var\(--accent-soft\)\]{ color:var(--accent-soft); }

/* The sticky services index had a hardcoded cream background. */
.services-nav{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce){ .services-nav{ -webkit-backdrop-filter:none; backdrop-filter:none; } }

/* Dark: text that used the graphite --brand token on what is now a dark surface */
html[data-theme="dark"] .stat-number{ color:var(--ink); }
html[data-theme="dark"] .stat-number.text-\[var\(--accent-soft\)\]{ color:var(--accent-soft); }
html[data-theme="dark"] .step-panel-cta{ color:#fff; }
html[data-theme="dark"] .service-quicknav-link.is-active .service-quicknav-num{ color:var(--accent-soft); }
html[data-theme="dark"] .faq-answer-inner a,
html[data-theme="dark"] .faq-jumpto a:hover,
html[data-theme="dark"] .faq-item.is-open .faq-toggle,
html[data-theme="dark"] .news-year-filter a:hover,
html[data-theme="dark"] .news-year-filter a.is-active,
html[data-theme="dark"] .blog-meta-cat,
html[data-theme="dark"] .blog-list-row:hover .blog-list-title{ color:var(--accent-soft); }
html[data-theme="dark"] .chatbot-option{ color:var(--ink); }
html[data-theme="dark"] .chatbot-option:hover{ border-color:var(--accent-soft); background:rgba(255,255,255,0.05); }

/* Dark: the three places --paper was used as a *surface* rather than as light text */
html[data-theme="dark"] .chatbot-msg,
html[data-theme="dark"] .chatbot-input,
html[data-theme="dark"] .step-panel-checklist li::before{ background:var(--surface); }

/* Dark: focus rings that were the (now invisible) graphite token */
html[data-theme="dark"] .values-item:focus-visible,
html[data-theme="dark"] .blog-filter-pill:focus-visible,
html[data-theme="dark"] .chatbot-option:focus-visible,
html[data-theme="dark"] .chatbot-send:focus-visible{ outline-color:var(--accent-soft); }

/* Flip-card back face: a touch lighter/warmer in dark so it separates from the front */
html[data-theme="dark"]{ --dark-panel: linear-gradient(145deg, #262b31 0%, #2f353c 58%, #40312a 100%); }
html[data-theme="dark"] .flip-back{ border-color:rgba(217,185,138,0.42); }

/* ---------- 13. Dark polish ---------- */
/* The dark->body fade is confined to its section's container; on the darker
   page that read as a lighter box. Make it full-bleed in dark mode only. */
@supports (overflow: clip){
  html[data-theme="dark"] main{ overflow-x:clip; }
  html[data-theme="dark"] .fade-from-dark-above::before{ left:50%; right:auto; width:100vw; transform:translateX(-50%); }
}
/* Embedded Google Maps can't be themed; invert + hue-rotate keeps the pin red and roads legible. */
html[data-theme="dark"] iframe[src*="google.com/maps"]{ filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.92) contrast(0.95); }


/* ---------- 14. De-vibe pass ---------- */

/* Classes the markup already used but the compiled Tailwind file never contained
   (found by scanning every class in every page). These were rendering as no-ops:
   italic footer addresses, tables with no collapsed borders, a byline with no gap. */
.not-italic{ font-style:normal; }
.underline{ text-decoration:underline; text-underline-offset:3px; }
.gap-x-2{ column-gap:0.5rem; }
.gap-y-1{ row-gap:0.25rem; }
.my-6{ margin-top:1.5rem; margin-bottom:1.5rem; }
.pr-4{ padding-right:1rem; }
.text-left{ text-align:left; }
.overflow-x-auto{ overflow-x:auto; }
.border-collapse{ border-collapse:collapse; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:0.375rem; }
.text-\[rgba\(247\,246\,242\,0\.6\)\]{ color:rgba(247,246,242,0.6); }
.text-\[rgba\(247\,246\,242\,0\.65\)\]{ color:rgba(247,246,242,0.65); }
.text-\[rgba\(247\,246\,242\,0\.7\)\]{ color:rgba(247,246,242,0.7); }
.text-\[rgba\(247\,246\,242\,0\.75\)\]{ color:rgba(247,246,242,0.75); }
/* Article tables (added after the Tailwind build) */
main table{ width:100%; font-size:0.9rem; }
main table th, main table td{ padding:0.6rem 1rem 0.6rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
main table th{ font-weight:600; color:var(--ink); }

/* Eyebrow labels: one quiet outlined tag. Previously every one had an animated
   gradient border and a pulsing glow, ten of them on the homepage alone. */
.ring-badge::before{
  animation:none; background:none; padding:0; inset:0;
  -webkit-mask:none; mask:none;
  border:1px solid rgba(168,118,62,0.4);
}
.ring-badge::after{ display:none; }
.ring-badge.on-dark::before{ background:none; border-color:rgba(217,185,138,0.4); }

/* Accent words in headlines: upright, and dark enough to read on light
   sections (the old pale gold measured 1.7:1). Italic stays on the homepage h1 only. */
.headline-accent{ font-style:normal; color:var(--accent-hover); }
.hero-h1 .headline-accent{ font-style:italic; }
.bg-\[var\(--brand-deep\)\] .headline-accent, .hero-h1 .headline-accent,
html[data-theme="dark"] .headline-accent{ color:var(--accent-soft); }

/* Glow and shadow effects that read as decoration */
.ambient-glow{ animation:none; opacity:0.5; }
.stat-number, .stat-number.on-dark, .stat-number-huge, .text-glow{ text-shadow:none; }
.step-panel-cta{ background:var(--accent-hover); }
.step-panel-cta:hover{ background:var(--accent); }

/* Dark->body fade under page headers: full-bleed in both themes (it used to stop
   at the container edge and show as a visible box). */
@supports (overflow: clip){
  main{ overflow-x:clip; }
  .fade-from-dark-above::before{ left:50%; right:auto; width:100vw; transform:translateX(-50%); }
}

/* News: normal cards in a list. The full-screen sticky stack hid each headline
   under the next card and was oversized for a couple of short posts. */
.stack-scroll .timeline-row{
  position:static; min-height:0; justify-content:flex-start;
  border-bottom:1px solid var(--line); border-radius:1.5rem; box-shadow:var(--shadow-card);
  padding:2rem 1.75rem 2.25rem;
}
.stack-scroll .timeline-row + .timeline-row{ margin-top:1.5rem; }
.timeline--news::before, .timeline--news::after, .stack-scroll::before, .stack-scroll::after{ display:none; }
.timeline--news .timeline-row::before, .timeline--news .timeline-row::after{ display:none; }
.timeline--news .timeline-fill, .timeline--news .timeline-track{ display:none; }

/* ===== 15. Motion layer =====
   Looping canvas backdrops for every dark hero/CTA, slow drift on photography,
   and a site-wide pause control. Only transform/opacity are animated. */
.motion-canvas{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  opacity:0; transform:scale(1.05);
  transition: opacity 1.8s var(--ease-out) 0.35s, transform 2.6s var(--ease-out) 0.35s;
}
.is-intro-ready .motion-canvas.is-live{ opacity:1; transform:none; }
.is-intro-ready 
.motion-photo{ animation: ha-photo-drift 22s ease-in-out infinite alternate; animation-play-state:paused; will-change:transform; }
.motion-photo.is-alt{ animation-name: ha-photo-drift-b; animation-duration:26s; }
.motion-photo.is-inview{ animation-play-state:running; }
@keyframes ha-photo-drift{
  from{ transform:scale(1.03) translate3d(0.8%,0.6%,0); }
  to{ transform:scale(1.11) translate3d(-1.4%,-1%,0); }
}
@keyframes ha-photo-drift-b{
  from{ transform:scale(1.10) translate3d(-1%,0.8%,0); }
  to{ transform:scale(1.03) translate3d(1.2%,-0.6%,0); }
}
.motion-frame::before{
  content:''; position:absolute; inset:-10% 0; width:45%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,240,215,0.22) 50%, transparent 100%);
  transform:translate3d(-130%,0,0) skewX(-14deg); opacity:0;
  animation: ha-glint 11s ease-in-out infinite; animation-play-state:paused;
}
.motion-frame.is-inview::before{ animation-play-state:running; }
@keyframes ha-glint{
  0%, 62%{ transform:translate3d(-130%,0,0) skewX(-14deg); opacity:0; }
  70%{ opacity:1; }
  92%, 100%{ transform:translate3d(300%,0,0) skewX(-14deg); opacity:0; }
}

.motion-toggle{
  position:fixed; left:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  font:600 11px/1 'Inter',system-ui,sans-serif; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(247,246,242,0.92); background:rgba(34,38,42,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(217,185,138,0.28); border-radius:999px; cursor:pointer;
  box-shadow:0 6px 20px rgba(34,38,42,0.22), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease;
}
.motion-toggle:hover{ background:rgba(34,38,42,0.88); border-color:rgba(217,185,138,0.55); }
.motion-toggle:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }
.motion-toggle:active{ transform:scale(0.96); }
.motion-toggle-icon{ position:relative; width:10px; height:12px; display:inline-block; }
.motion-toggle-icon::before, .motion-toggle-icon::after{
  content:''; position:absolute; top:0; width:3px; height:12px; border-radius:1px; background:currentColor;
}
.motion-toggle-icon::before{ left:0; }
.motion-toggle-icon::after{ right:0; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon::before{
  width:10px; height:12px; left:0; border-radius:0; background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.motion-toggle[aria-pressed="true"] .motion-toggle-icon::after{ display:none; }
@media (max-width:640px){ .motion-toggle-label{ display:none; } .motion-toggle{ padding:0 15px; } }

html.motion-paused .motion-photo,
html.motion-paused .motion-frame::before,
html.motion-paused .ambient-glow{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .motion-photo, .motion-frame::before{ animation:none !important; }
  .motion-canvas{ transition:opacity 0.4s ease; transform:none; }
}

/* Page-hero video slot (inserted by tools/ha_hero_video.py wire). */
.page-hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  opacity:0; transform:scale(1.06);
  transition: opacity 1.6s var(--ease-out) 0.2s, transform 2.8s var(--ease-out) 0.2s;
}
.is-intro-ready .page-hero-video{ opacity:1; transform:none; }
.page-hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,16,18,0.84) 0%, rgba(14,16,18,0.72) 46%, rgba(14,16,18,0.60) 100%),
    linear-gradient(to top, rgba(14,16,18,0.55) 0%, transparent 42%);
}
/* Extra dimming for clips with bright areas behind the copy (keeps body text at AA contrast). */
.page-hero-scrim--dim::after, .page-hero-scrim--dimmer::after{ content:''; position:absolute; inset:0; background:rgba(14,16,18,0.24); }
.page-hero-scrim--dimmer::after{ background:rgba(14,16,18,0.60); }
@media (prefers-reduced-motion: reduce){ .page-hero-video{ transition:opacity 0.4s ease; transform:none; } }


/* Chat privacy notice (tells visitors chats are saved and not to enter patient information). */
.chatbot-notice{
  margin:0; padding:0.5rem 1rem 0.55rem; font-size:0.6875rem; line-height:1.45;
  color:var(--ink-soft, #5b6168); border-top:1px solid var(--line, rgba(34,38,42,0.12));
}
html[data-theme="dark"] .chatbot-notice{ color:rgba(247,246,242,0.6); border-top-color:rgba(247,246,242,0.12); }


/* ===== 16. Mobile polish, services hero card video, values network visuals (2026-09-21) ===== */

/* Hero copy must clear the fixed nav pill on phones (the eyebrow used to sit underneath it). */
@media (max-width:767px){
  main > section.bg-\[var\(--brand-deep\)\]:first-child > .relative.max-w-6xl{ padding-top:6.25rem; }
}
/* Long eyebrow badges wrap to two balanced lines instead of overflowing the pill. */
@media (max-width:640px){
  .eyebrow-badge{ letter-spacing:0.09em; line-height:1.45; padding:0.5rem 1.05rem; text-wrap:balance; max-width:100%; }
}

/* Pause control: on phones it is small and only shows while a hero/CTA motion scene is on screen,
   so it never sits on top of body copy. Desktop is unchanged. */
@media (max-width:640px){
  .motion-toggle{ left:12px; bottom:12px; min-height:38px; min-width:38px; padding:0 12px; opacity:0.92; transition: transform 0.25s var(--ease-out), opacity 0.25s ease, visibility 0s; }
  .motion-toggle.is-away{ opacity:0; visibility:hidden; pointer-events:none; transition: transform 0.25s var(--ease-out), opacity 0.25s ease, visibility 0s 0.25s; }
  /* Slow photo drift is off on phones (battery, and it removes the last reason to show the pause button mid-page). */
  .motion-photo, .motion-frame::before{ animation:none !important; }
}

/* Services hero: looping clip in the card slot. */
.hero-card-video{ position:relative; background:#22262a; }
@media (min-width:768px){ .hero-card-video{ margin-top:1.5rem; } }
.hero-card-video video{ display:block; }
.hero-card-video::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  background: linear-gradient(to top, rgba(14,16,18,0.28), transparent 45%);
}

/* About page "How we operate": one network visual per value (replaces the ghost numeral). */
.values-detail{ min-height:24.5rem; }
.values-visual{
  position:absolute; left:0; right:0; top:10rem; bottom:0;
  opacity:0; pointer-events:none; transition:opacity 0.5s ease;
}
.values-visual.is-active{ opacity:1; }
.values-visual .hv-svg{ display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 16px rgba(34,38,42,0.22)); }
html[data-theme="dark"] .values-visual .hv-svg{ filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55)); }
@media (min-width:768px){
  .values-detail{ min-height:27rem; }
  .values-visual{ top:6.5rem; }
}
:root{ --hv-line: rgba(28,31,34,0.32); }
html[data-theme="dark"]{ --hv-line: rgba(247,246,242,0.34); }
.hv-line{ stroke:var(--hv-line); stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.hv-line.hv-faint{ opacity:0.55; }
.hv-arc{ fill:none; stroke:var(--accent); stroke-opacity:0.2; stroke-width:1; vector-effect:non-scaling-stroke; }
.hv-node{ transform-box:fill-box; transform-origin:center; }
.values-visual.is-active .hv-node{ animation: hv-breathe 6s ease-in-out infinite; }
.values-visual.is-active .hv-node.d1{ animation-delay:-1.5s; }
.values-visual.is-active .hv-node.d2{ animation-delay:-3s; }
.values-visual.is-active .hv-node.d3{ animation-delay:-4.5s; }
.values-visual.is-active .hv-orbit{ animation: hv-orbit 60s linear infinite; }
.hv-orbit{ transform-origin:200px 130px; }
@keyframes hv-breathe{ 0%,100%{ transform:scale(1); opacity:0.92; } 50%{ transform:scale(1.08); opacity:1; } }
@keyframes hv-orbit{ to{ transform:rotate(360deg); } }
html.motion-paused .values-visual .hv-node,
html.motion-paused .values-visual .hv-orbit{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .values-visual .hv-node, .values-visual .hv-orbit{ animation:none !important; }
  .values-visual{ transition:none; }
}

/* News on phones: the cards are plain static blocks now, so the date badge sits in the flow above the headline
   (it used to be absolutely positioned to a card that no longer positions it, so every badge piled onto the first card). */
@media (max-width:767px){
  .stack-scroll .timeline-dot{ position:static; margin-bottom:1.1rem; align-self:flex-start; }
  .stack-scroll .timeline-content{ margin-top:0; }
}

/* ===== 17. Layout variety pass (2026-09-21 design audit) =====
   Homepage design audit found two spots that read as templated because every
   row repeats the exact same shape. Fixed without touching HTML structure
   or the compiled Tailwind classes already in use. */

/* "A Clear Path" steps: every step had text-left/image-right, four times in a
   row. Alternate steps 2 and 4 to image-left/text-right (grid order only,
   the underlying grid-template-columns class stays server-compiled-safe
   because we override with a plain rule, not a new Tailwind utility). */
@media (min-width:768px){
  #step-2 > .grid, #step-4 > .grid{ grid-template-columns:1fr 1.15fr; }
  #step-2 .step-panel-image, #step-4 .step-panel-image{ order:-1; }
}

/* Six-service flip grid: was a literal 3x2 grid of equal cards. Give the
   flagship first service (01, eCW Implementation & Optimization) a wider
   column so the grid reads as a deliberate bento layout, not a template. */
@media (min-width:1024px){
  .flip-grid{ grid-auto-flow:dense; }
  .flip-grid .flip-card:first-child{ grid-column:span 2; }
}