/* ==========================================================================
   CARE HOME ACCOUNTANTS. STYLESHEET
   Structure:
   01. Variables        02. Reset            03. Typography
   04. Layout            05. Navigation       06. Buttons & Components
   07. Hero              08. Sections         09. Journey / Timeline
   10. Reporting visual  11. Insights cards   12. Footer
   13. Services page     14. Resources page   15. Contact page
   16. Animation         17. Responsive       18. Accessibility
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 01. VARIABLES                                                          */
/* ---------------------------------------------------------------------- */
:root{
  --bone: #F3F0E8;
  --warm-white: #FAF8F3;
  --stone: #DDD8CE;
  --grey: #77736C;
  --charcoal: #171715;
  --ink: #0D0D0C;
  --orange: #D94820;
  --orange-dim: #B83A17;
  --orange-10: rgba(217,72,32,0.1);
  --orange-20: rgba(217,72,32,0.2);
  --line: rgba(13,13,12,0.12);
  --line-light: rgba(250,248,243,0.16);

  --font-head: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius-s: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-s: .35s;
  --dur-m: .6s;
  --dur-l: 1s;
}

/* ---------------------------------------------------------------------- */
/* 02. RESET                                                              */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure,blockquote{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea, select{ font: inherit; color: inherit; }
svg{ display: block; }

/* ---------------------------------------------------------------------- */
/* 03. TYPOGRAPHY                                                         */
/* ---------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.h-display{
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.h-xl{ font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -0.015em; }
.h-lg{ font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.h-md{ font-size: clamp(1.25rem, 1.8vw, 1.65rem); }
.h-sm{ font-size: 1.05rem; font-weight: 600; }

.accent{ color: var(--orange); font-style: italic; font-family: var(--font-head); font-weight: 500; }

.eyebrow{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
  display: inline-block;
}
.eyebrow--dark{ color: var(--orange); }

.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 46ch;
}
.body-s{ font-size: 0.92rem; color: var(--grey); line-height: 1.6; }
.mono-tag{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.num{ font-family: var(--font-label); font-weight:600; font-variant-numeric: tabular-nums; }

.bracket{
  color: var(--grey);
  font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* 04. LAYOUT                                                             */
/* ---------------------------------------------------------------------- */
.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  position: relative;
}
.section--tight{ padding-block: clamp(3rem, 6vw, 5rem); }
.section--dark{
  background: var(--ink);
  color: var(--warm-white);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color: var(--warm-white); }
.section--stone{ background: var(--stone); }
.rule{
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}
.rule--light{ background: var(--line-light); }

.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 700;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  transform-origin: left;
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress-bar{ transition: none; }
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--warm-white);
  padding: 1rem 1.4rem;
  z-index: 999;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.8rem;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
}

/* focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* 05. NAVIGATION                                                         */
/* ---------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.35rem 0;
  transition: background var(--dur-s) var(--ease), padding var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(243,240,232,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark{ flex-shrink: 0; color: inherit; }
.brand img{ height: 30px; width: auto; }

.nav-primary{
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
}
.nav-links{
  display: flex;
  gap: clamp(1.1rem, 2vw, 2rem);
  align-items: center;
}
.nav-links a{
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.35rem 0.05rem;
  color: var(--ink);
}
.nav-links a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--orange);
  transition: right var(--dur-s) var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{
  right: 0;
}
.nav-links a[aria-current="page"]{ color: var(--orange); }

.nav-aux{
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.nav-login{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.nav-login:hover{ color: var(--ink); border-color: var(--grey); }

.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: "";
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  position: absolute;
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle span::before{ transform: translateY(-5px); }
.nav-toggle span::after{ transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(0) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--warm-white);
  z-index: 480;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  transition: transform var(--dur-m) var(--ease-soft);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-light);
}
.mobile-menu .mobile-foot{
  margin-top: 2.5rem;
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.75rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------- */
/* 06. BUTTONS & COMPONENTS                                               */
/* ---------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  position: relative;
  overflow: hidden;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.btn::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur-s) var(--ease);
  z-index: -1;
}
.btn-primary{ background: var(--ink); color: var(--warm-white); }
.btn-primary::before{ background: var(--orange); }
.btn-primary:hover{ border-color: var(--orange); }
.btn-primary:hover::before{ transform: translateY(0); }

.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost::before{ background: var(--ink); }
.btn-ghost:hover{ color: var(--warm-white); }
.btn-ghost:hover::before{ transform: translateY(0); }

.btn-on-dark{ border-color: var(--line-light); color: var(--warm-white); }
.btn-on-dark::before{ background: var(--orange); }
.btn-on-dark:hover{ border-color: var(--orange); }
.btn-on-dark:hover::before{ transform: translateY(0); }

.btn-arrow{ transition: transform var(--dur-s) var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
}
.text-link svg{ transition: transform var(--dur-s) var(--ease); }
.text-link:hover svg{ transform: translateX(3px); }
.text-link--orange{ color: var(--orange); border-color: var(--orange); }

.pill-note{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--line);
  padding: 0.4rem 0.75rem;
  border-radius: 99px;
  display: inline-block;
}

/* reveal utility frame: now hosts generated graphics rather than photography */
.img-frame{
  position: relative;
  overflow: hidden;
  background: var(--stone);
}
.img-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateY(var(--px, 0px)) scale(1);
  transition: transform 1.2s var(--ease-soft);
}
.img-frame:hover img{ transform: translateY(var(--px, 0px)) scale(1.045); }

/* -- graphic frame: soft gradient canvas for generated visuals -- */
.graphic-frame{
  background: linear-gradient(150deg, var(--warm-white) 0%, var(--stone) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.graphic-visual{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--px, 0px));
  transition: transform 1.2s var(--ease-soft);
}
.img-frame:hover .graphic-visual{ transform: translateY(var(--px, 0px)) scale(1.03); }

/* icon-graphic: centred line-art icon used across services, insights, resources */
.icon-graphic{ padding: clamp(2rem, 6vw, 3.5rem); }
.icon-graphic svg{
  width: 100%;
  max-width: 132px;
  height: auto;
  overflow: visible;
  transition: transform .5s var(--ease);
}
.img-frame:hover .icon-graphic svg{ transform: scale(1.06) rotate(-1.5deg); }
.icon-graphic .pulse-accent{
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseAccent 2.6s ease-in-out infinite;
}
@keyframes pulseAccent{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .55; transform: scale(1.14); }
}

/* bars-graphic: vertical comparison bars used on the positioning section */
.bars-graphic svg{ width: 100%; max-width: 210px; height: auto; }
.bars-graphic rect{
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--ease-soft);
}
.reveal-mask.is-visible .bars-graphic rect{ transform: scaleY(1); }
.bars-graphic rect:nth-of-type(1){ transition-delay: .05s; }
.bars-graphic rect:nth-of-type(2){ transition-delay: .15s; }
.bars-graphic rect:nth-of-type(3){ transition-delay: .25s; }
.bars-graphic rect:nth-of-type(4){ transition-delay: .35s; }
.bars-graphic rect:nth-of-type(5){ transition-delay: .45s; }

/* pressure feature backdrop: abstract data-grid pattern replacing photography */
.pressure-feature-graphic{
  position: absolute; inset: 0;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.pressure-feature-graphic svg{ width: 100%; height: 100%; }
.pressure-feature-graphic .pulse-dot{
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseAccent 2.8s ease-in-out infinite;
}
.pressure-feature-graphic .pulse-dot:nth-of-type(2){ animation-delay: .6s; }
.pressure-feature-graphic .pulse-dot:nth-of-type(3){ animation-delay: 1.2s; }

/* -- signature UI card component: hero / why-us / resources featured -- */
.ui-card-frame{
  position: relative;
  overflow: visible;
  padding: clamp(1.75rem, 5vw, 3.25rem);
}
.ui-card{
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.35rem, 2.6vw, 1.9rem);
  width: 100%;
  max-width: 380px;
  box-shadow: 0 34px 64px -24px rgba(13,13,12,0.22);
  position: relative;
  z-index: 2;
}
.ui-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.15rem;
}
.ui-card-head strong{ font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; }
.ui-card-head span{
  font-family: var(--font-label); font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey);
  white-space: nowrap;
}
.ui-card-row{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.ui-card-num{
  font-family: var(--font-label); font-weight: 600;
  color: var(--orange);
  background: var(--bone);
  width: 1.9rem; height: 1.9rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.ui-card-row-body{ display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.ui-card-row-body strong{ font-family: var(--font-head); font-weight: 500; font-size: 0.88rem; }
.ui-card-row-body span{ font-size: 0.74rem; color: var(--grey); }
.ui-card-status{
  font-family: var(--font-label); font-weight: 600;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.28rem 0.6rem;
  color: var(--grey);
  flex-shrink: 0;
  white-space: nowrap;
}
.ui-card-status--live{
  color: var(--orange);
  border-color: var(--orange);
  animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .5; } }

.ui-pill{
  position: absolute;
  z-index: 3;
  background: var(--warm-white);
  border-radius: 99px;
  padding: 0.65rem 1.1rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.8rem;
  box-shadow: 0 18px 32px -14px rgba(13,13,12,0.24);
  white-space: nowrap;
  animation: floatPill 5s ease-in-out infinite;
}
.ui-pill--a{ top: 8%; left: 4%; animation-delay: 0s; }
.ui-pill--b{ top: 26%; right: 2%; animation-delay: .7s; }
.ui-pill--c{ bottom: 10%; left: 8%; animation-delay: 1.4s; }
@keyframes floatPill{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
@media (max-width: 620px){
  .ui-pill{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .ui-pill, .ui-card-status--live, .icon-graphic .pulse-accent, .pressure-feature-graphic .pulse-dot{
    animation: none !important;
  }
}

/* card base */
.card{
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--warm-white);
}

/* breadcrumb */
.breadcrumb{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a{ color: var(--grey); transition: color var(--dur-s) var(--ease); }
.breadcrumb a:hover{ color: var(--orange); }
.breadcrumb span[aria-current]{ color: var(--ink); }

/* back to top */
.back-to-top{
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover{ background: var(--orange); }
.back-to-top svg{ transition: transform var(--dur-s) var(--ease); }
.back-to-top:hover svg{ transform: translateY(-2px); }

/* ---------------------------------------------------------------------- */
/* 07. HERO                                                               */
/* ---------------------------------------------------------------------- */
.hero{
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(6.5rem, 14vw, 9rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.hero .wrap{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  width: 100%;
}
.hero-copy{ position: relative; }
.hero-copy .eyebrow{ margin-bottom: 1.4rem; }
.hero-title{
  overflow: hidden;
}
.hero-title .line{
  display: block;
  overflow: hidden;
}
.hero-title .line span{
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-soft);
}
.hero.is-ready .hero-title .line span{ transform: translateY(0); }
.hero-title .line:nth-child(1) span{ transition-delay: .05s; }
.hero-title .line:nth-child(2) span{ transition-delay: .16s; }
.hero-title .line:nth-child(3) span{ transition-delay: .27s; }

.hero-sub{
  margin-top: 1.75rem;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease-soft) .55s, transform .8s var(--ease-soft) .55s;
}
.hero.is-ready .hero-sub{ opacity: 1; transform: translateY(0); }

.hero-ctas{
  margin-top: 2.25rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease-soft) .7s, transform .8s var(--ease-soft) .7s;
}
.hero.is-ready .hero-ctas{ opacity: 1; transform: translateY(0); }

.hero-trust{
  margin-top: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 1s var(--ease-soft) .9s;
}
.hero.is-ready .hero-trust{ opacity: 1; }
.hero-trust-line{ width: 34px; height: 1px; background: var(--orange); }
.hero-trust p{ font-family: var(--font-label); font-weight:600; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--grey); text-transform: uppercase; }

.hero-visual{
  position: relative;
  aspect-ratio: 4/5.1;
  overflow: hidden;
}
.hero-visual .img-frame{
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s var(--ease-soft) .2s;
}
.hero.is-ready .hero-visual .img-frame{ clip-path: inset(0 0 0 0); }
.hero-visual .ui-card{ transform: scale(0.94); transition: transform 1.3s var(--ease-soft) .3s; }
.hero.is-ready .hero-visual .ui-card{ transform: scale(1); }

.scroll-indicator{
  position: absolute;
  left: var(--gutter);
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.scroll-indicator .track{
  width: 1px; height: 34px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.scroll-indicator .track::after{
  content: "";
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--orange);
  animation: scrollTrack 2.2s var(--ease) infinite;
}
@keyframes scrollTrack{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

/* ---------------------------------------------------------------------- */
/* 08. SECTIONS. Shared editorial patterns                               */
/* ---------------------------------------------------------------------- */

/* Positioning: scroll-linked statement */
.positioning{
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.positioning-media{
  position: sticky;
  top: 7rem;
  align-self: start;
  aspect-ratio: 3/3.7;
}
.positioning-copy .h-xl{ max-width: 16ch; }
.positioning-copy{ padding-top: 0.5rem; }
.positioning-para{
  margin-top: 2.25rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--charcoal);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.positioning-para + .positioning-para{ margin-top: 1.5rem; }
.positioning-para b{ color: var(--orange); font-weight: 600; }

/* Financial pressures. Asymmetric editorial grid */
.pressures-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.pressures-head .h-xl{ max-width: 20ch; }
.pressures-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pressure-cell{
  background: var(--warm-white);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  position: relative;
  transition: background var(--dur-s) var(--ease);
}
.pressure-cell:hover{ background: var(--bone); }
.pressure-cell .mono-tag{ display: block; margin-bottom: 0.9rem; }
.pressure-feature{
  grid-column: span 4;
  grid-row: span 2;
  background: var(--ink);
  color: var(--warm-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pressure-feature .mono-tag{ color: var(--stone); position: relative; z-index: 1; }
.pressure-feature h3{ color: var(--warm-white); max-width: 18ch; position: relative; z-index: 1; }
.pressure-image{
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
}
.pressure-stat{
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pressure-stat .num{
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.pressure-stat p{ font-size: 0.85rem; color: var(--charcoal); max-width: 22ch; }
.pressure-callout{
  grid-column: span 2;
}
.pressure-callout p{ font-size: 0.92rem; color: var(--charcoal); }
.pressure-note{
  margin-top: 1rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* metric strip (ledger tape) */
.metric-strip{
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.metric-track{
  display: flex;
  width: max-content;
  animation: metricScroll 32s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .metric-track{ animation: none; } }
.metric-track:hover{ animation-play-state: paused; }
.metric-item{
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.1rem 2.25rem;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.metric-item .num{ color: var(--orange); font-size: 1.1rem; }
.metric-item span{ font-family: var(--font-label); font-weight:600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); }
@keyframes metricScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* SERVICES EXPERIENCE (homepage). Sticky side nav w/ changing panel     */
/* ---------------------------------------------------------------------- */
.services-exp{
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.services-nav{
  position: sticky;
  top: 7rem;
  align-self: start;
}
.services-nav-list li{
  border-top: 1px solid var(--line);
}
.services-nav-list li:last-child{ border-bottom: 1px solid var(--line); }
.services-nav-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  text-align: left;
}
.services-nav-btn .mono-tag{ color: var(--stone-num, var(--grey)); flex-shrink: 0; width: 1.6rem; }
.services-nav-btn .label{ font-family: var(--font-head); font-size: 1.02rem; font-weight: 500; transition: color var(--dur-s) var(--ease); }
.services-nav-btn[aria-selected="true"] .label{ color: var(--orange); }
.services-nav-btn[aria-selected="true"] .mono-tag{ color: var(--orange); }
.services-nav-btn:hover .label{ color: var(--orange-dim); }

.services-panels{ position: relative; min-height: 460px; }
.service-panel{
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.service-panel.is-active{
  display: grid;
  animation: panelIn .5s var(--ease-soft);
}
@keyframes panelIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.service-panel-media{ aspect-ratio: 4/3.3; }
.service-panel-body h3{ margin-bottom: 1rem; max-width: 20ch; }
.service-panel-body p{ color: var(--charcoal); margin-bottom: 1.5rem; max-width: 42ch; }
.service-panel-list{ margin-bottom: 1.75rem; }
.service-panel-list li{
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--grey);
  display: flex;
  gap: 0.65rem;
}
.service-panel-list li::before{ content: "→"; color: var(--orange); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* 09. JOURNEY / TIMELINE: pinned scroll-story with fallback rail         */
/* ---------------------------------------------------------------------- */
.journey-pin{
  position: relative;
  background: var(--bone);
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}
/* Pin mode: JS adds .has-pin on capable viewports; extra scroll runway drives the horizontal story */
.journey-pin.has-pin{ padding-block: 0; height: 340vh; }
.journey-sticky{ position: relative; }
.journey-pin.has-pin .journey-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.journey-head{ margin-bottom: clamp(2.5rem, 5vw, 4rem); flex-shrink: 0; }
.journey-head .h-xl{ max-width: 24ch; }

.journey-track-wrap{ overflow: hidden; }
.journey-pin:not(.has-pin) .journey-track-wrap{
  overflow-x: auto;
  scrollbar-width: none;
}
.journey-pin:not(.has-pin) .journey-track-wrap::-webkit-scrollbar{ display: none; }

.journey-track{
  display: flex;
  gap: 0;
  padding-left: var(--gutter);
  will-change: transform;
}
.journey-pin.has-pin .journey-track{ padding-right: var(--gutter); }
.journey-pin:not(.has-pin) .journey-track{ scroll-snap-type: x proximity; padding-right: var(--gutter); }

.journey-stage{
  flex: 0 0 clamp(280px, 32vw, 400px);
  scroll-snap-align: start;
  padding: clamp(1.75rem, 2.4vw, 2.4rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.75rem, 2.4vw, 2.4rem) 0;
  border-right: 1px solid var(--line);
  margin-right: clamp(1.5rem, 2.4vw, 2.25rem);
  position: relative;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.journey-pin.has-pin .journey-stage{ opacity: 0.35; }
.journey-pin.has-pin .journey-stage.is-active{ opacity: 1; }
.journey-stage:first-child{ padding-left: 0; }
.journey-stage-watermark{
  position: absolute;
  top: -0.5rem; right: 1rem;
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 500;
  color: var(--stone);
  line-height: 1;
  z-index: 0;
  transition: color .5s var(--ease);
  pointer-events: none;
}
.journey-pin.has-pin .journey-stage.is-active .journey-stage-watermark{ color: var(--orange-10); }
.journey-stage-index{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  color: var(--orange);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}
.journey-stage h4{ font-size: 1.25rem; margin-bottom: 0.75rem; max-width: 16ch; position: relative; z-index: 1; }
.journey-stage p{ font-size: 0.88rem; color: var(--grey); max-width: 30ch; position: relative; z-index: 1; }
.journey-progress{
  height: 1px;
  background: var(--line);
  margin-top: 1.5rem;
  position: relative;
}
.journey-progress-bar{
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--orange);
  width: 0%;
  transition: width .1s linear;
}
.journey-hint{
  margin-top: 1rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}
@media (prefers-reduced-motion: reduce){
  .journey-pin.has-pin{ height: auto; padding-block: clamp(4.5rem, 9vw, 8.5rem); }
  .journey-pin.has-pin .journey-sticky{ position: relative; height: auto; overflow: visible; }
  .journey-pin.has-pin .journey-track-wrap{ overflow-x: auto; }
  .journey-pin.has-pin .journey-stage{ opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* 10. FINANCIAL VISIBILITY / REPORTING VISUAL                            */
/* ---------------------------------------------------------------------- */
.reporting{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.reporting-copy .h-xl{ max-width: 16ch; margin-bottom: 1.5rem; }
.reporting-copy p{ color: var(--stone); max-width: 40ch; margin-bottom: 1.5rem; }
.reporting-copy ul{ display: grid; gap: 0.9rem; }
.reporting-copy li{ display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.9rem; color: var(--stone); }
.reporting-copy li::before{ content: "◆"; color: var(--orange); font-size: 0.55rem; }

.report-panel{
  background: var(--charcoal);
  border: 1px solid rgba(250,248,243,0.1);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.report-panel-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.report-panel-head .mono-tag{ color: var(--stone); }
.report-flag{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 0.3rem 0.55rem;
}
.report-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(250,248,243,0.08);
}
.report-tile{
  background: var(--charcoal);
  padding: 1.25rem 1.4rem;
}
.report-tile .mono-tag{ margin-bottom: 0.6rem; display: block; }
.report-tile .num{ font-size: 1.5rem; color: var(--warm-white); display: block; }
.report-tile .num small{ font-size: 0.9rem; color: var(--orange); margin-left: 0.35rem; font-family: var(--font-label); font-weight:600; }
.report-bars{ display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: 0.85rem; }
.report-bars span{ flex: 1; background: var(--orange); opacity: 0.55; }
.report-bars span:last-child{ opacity: 1; }
.report-line{
  grid-column: span 2;
  height: 90px;
  padding: 1.25rem 1.4rem 0.75rem;
}
.report-line svg{ width: 100%; height: 100%; }

/* ---------------------------------------------------------------------- */
/* WHY US                                                                 */
/* ---------------------------------------------------------------------- */
.why-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.why-list{ display: grid; gap: 0; }
.why-item{
  padding: clamp(1.6rem, 2vw, 2.1rem) 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
}
.why-list .why-item:last-child{ border-bottom: 1px solid var(--line); }
.why-item .num{ color: var(--orange); font-size: 0.85rem; padding-top: 0.2rem; }
.why-item h4{ font-size: 1.1rem; margin-bottom: 0.5rem; }
.why-item p{ font-size: 0.9rem; color: var(--grey); max-width: 38ch; }
.why-media{ position: sticky; top: 7rem; align-self: start; aspect-ratio: 4/4.6; }

/* ---------------------------------------------------------------------- */
/* 11. INSIGHTS / RESOURCE CARDS                                          */
/* ---------------------------------------------------------------------- */
.insights-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.insights-head .h-xl{ max-width: 18ch; }
.insight-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.insight-card{ display: block; }
.insight-media{ aspect-ratio: 4/3; margin-bottom: 1.15rem; overflow: hidden; }
.insight-meta{
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.insight-meta .bracket{ color: var(--grey); text-transform: none; letter-spacing: 0; }
.insight-card h4{
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  transition: color var(--dur-s) var(--ease);
}
.insight-card:hover h4{ color: var(--orange); }
.insight-card p{ font-size: 0.85rem; color: var(--grey); }
.insight-read{
  margin-top: 1rem;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------- */
/* FINAL CTA                                                              */
/* ---------------------------------------------------------------------- */
.final-cta{
  text-align: left;
}
.final-cta-inner{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.final-cta .h-display{ max-width: 15ch; }
.final-cta-actions{ display: grid; gap: 1.5rem; }
.final-cta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-label); font-weight:600;
  font-size: 0.85rem;
  color: var(--stone);
}
.final-cta-row:last-child{ border-bottom: 1px solid var(--line-light); }
.final-cta-row a{ transition: color var(--dur-s) var(--ease); }
.final-cta-row a:hover{ color: var(--orange); }

/* ---------------------------------------------------------------------- */
/* 12. FOOTER                                                             */
/* ---------------------------------------------------------------------- */
.site-footer{
  background: var(--ink);
  color: var(--stone);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-light);
}
.footer-brand .brand{ color: var(--warm-white); margin-bottom: 1.25rem; }
.footer-brand p{ max-width: 32ch; font-size: 0.88rem; color: var(--stone); margin-bottom: 1.5rem; }
.footer-col h5{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.1rem;
}
.footer-col ul{ display: grid; gap: 0.7rem; }
.footer-col a{ font-size: 0.9rem; color: var(--stone); transition: color var(--dur-s) var(--ease); }
.footer-col a:hover{ color: var(--orange); }
.footer-membership{
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.75rem;
  color: var(--grey);
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--grey);
}
.footer-legal{ display: flex; gap: 1.5rem; }
.footer-legal a{ color: var(--grey); transition: color var(--dur-s) var(--ease); }
.footer-legal a:hover{ color: var(--orange); }
.footer-social{ display: flex; gap: 1.1rem; }
.footer-social a{ color: var(--stone); transition: color var(--dur-s) var(--ease); }
.footer-social a:hover{ color: var(--orange); }

/* ---------------------------------------------------------------------- */
/* PAGE HERO (inner pages)                                                */
/* ---------------------------------------------------------------------- */
.page-hero{
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-hero .breadcrumb{ margin-bottom: 1.75rem; }
.page-hero .h-display{ max-width: 18ch; }
.page-hero-sub{ margin-top: 1.5rem; }
.page-hero-meta{
  margin-top: 2.5rem;
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.page-hero-meta div span{ display: block; font-family: var(--font-label); font-weight:600; font-size: 0.65rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.page-hero-meta div strong{ font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; }

/* ---------------------------------------------------------------------- */
/* 13. SERVICES PAGE                                                      */
/* ---------------------------------------------------------------------- */
.services-toc{
  position: sticky;
  top: 6.2rem;
  z-index: 40;
  background: rgba(243,240,232,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services-toc-list{
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 1rem;
}
.services-toc-list::-webkit-scrollbar{ display: none; }
.services-toc-list a{
  white-space: nowrap;
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.services-toc-list a:hover, .services-toc-list a.is-active{ color: var(--orange); border-color: var(--orange); }

.service-detail{
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 8.5rem;
}
.service-detail:nth-child(even) .service-detail-grid{ direction: rtl; }
.service-detail:nth-child(even) .service-detail-grid > *{ direction: ltr; }
.service-detail-grid{
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.service-detail-index{ font-family: var(--font-label); font-weight:600; font-size: 0.8rem; color: var(--orange); display: block; margin-bottom: 1.25rem; }
.service-detail-body h2{ max-width: 16ch; margin-bottom: 1.25rem; }
.service-detail-body > p{ color: var(--charcoal); max-width: 50ch; margin-bottom: 1.75rem; }
.service-detail-media{ aspect-ratio: 4/3; margin-bottom: 1.75rem; }

.detail-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.detail-col h5{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1rem;
}
.detail-col ul{ display: grid; gap: 0.75rem; }
.detail-col li{ font-size: 0.9rem; color: var(--charcoal); display: flex; gap: 0.6rem; }
.detail-col li::before{ content: "→"; color: var(--orange); flex-shrink: 0; }

.related-services{
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.related-services a{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey);
  border: 1px solid var(--line);
  padding: 0.55rem 0.9rem;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.related-services a:hover{ color: var(--orange); border-color: var(--orange); }

/* FAQ accordion */
.faq-list{ max-width: 780px; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-q{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
}
.faq-q h4{ font-size: 1.05rem; font-weight: 500; }
.faq-q .plus{
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.faq-q .plus::before{ left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-q .plus::after{ top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item[data-open="true"] .plus::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item[data-open="true"] .plus::before{ background: var(--orange); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-m) var(--ease);
}
.faq-a p{ padding-bottom: 1.5rem; max-width: 60ch; color: var(--grey); font-size: 0.92rem; }

.services-cta{
  text-align: center;
  padding-block: clamp(4rem, 7vw, 6rem);
}
.services-cta .h-xl{ max-width: 20ch; margin-inline: auto; margin-bottom: 2rem; }
.services-cta-actions{ display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* 14. RESOURCES PAGE                                                     */
/* ---------------------------------------------------------------------- */
.featured-article{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.featured-media{ aspect-ratio: 4/3.3; }
.featured-body{ display: flex; flex-direction: column; justify-content: center; }
.featured-body h2{ max-width: 16ch; margin-block: 1.25rem; }
.featured-body p{ color: var(--charcoal); max-width: 44ch; margin-bottom: 1.75rem; }

.resource-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: clamp(2rem, 3vw, 2.5rem);
}
.resource-filters{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filter-chip{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  color: var(--grey);
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.filter-chip[aria-pressed="true"], .filter-chip:hover{
  color: var(--warm-white);
  background: var(--ink);
  border-color: var(--ink);
}
.search-field{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.4rem;
  min-width: 220px;
}
.search-field input{
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-size: 0.9rem;
}
.search-field input::placeholder{ color: var(--grey); }

.resource-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.resource-grid .insight-card[data-cat]{ transition: opacity .35s var(--ease), transform .35s var(--ease); }
.resource-grid .insight-card.is-hidden{ display: none; }

.newsletter-block{
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3.25rem);
  background: var(--ink);
  color: var(--warm-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.newsletter-block h3{ max-width: 16ch; }
.newsletter-form{ display: flex; gap: 0; border-bottom: 1px solid var(--line-light); padding-bottom: 0.6rem; }
.newsletter-form input{
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--warm-white);
  font-size: 0.95rem;
}
.newsletter-form input::placeholder{ color: var(--grey); }
.newsletter-form button{
  font-family: var(--font-label); font-weight:600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.newsletter-note{ font-size: 0.72rem; color: var(--grey); margin-top: 0.75rem; }

/* ---------------------------------------------------------------------- */
/* 15. CONTACT PAGE                                                       */
/* ---------------------------------------------------------------------- */
.contact-layout{
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.contact-info{ position: sticky; top: 7rem; }
.contact-info p.lede{ margin-bottom: 2rem; }
.contact-detail{ padding: 1.1rem 0; border-top: 1px solid var(--line); }
.contact-detail:last-of-type{ border-bottom: 1px solid var(--line); }
.contact-detail span{ display: block; font-family: var(--font-label); font-weight:600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey); margin-bottom: 0.4rem; }
.contact-detail strong{ font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; }
.contact-alt{ margin-top: 2rem; display: grid; gap: 0.75rem; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-field{ display: flex; flex-direction: column; gap: 0.55rem; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-family: var(--font-label); font-weight:600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey); }
.form-field input, .form-field select, .form-field textarea{
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.7rem 0.1rem;
  font-size: 0.95rem;
  transition: border-color var(--dur-s) var(--ease);
}
.form-field select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2377736C' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--orange); outline: none; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select{ border-color: var(--orange); }
.form-error{ font-size: 0.75rem; color: var(--orange); display: none; }
.form-field.has-error .form-error{ display: block; }
.form-consent{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.form-consent input{ margin-top: 0.3rem; accent-color: var(--orange); }
.form-consent label{ font-size: 0.82rem; color: var(--grey); }
.form-submit{ grid-column: 1 / -1; margin-top: 0.75rem; display: flex; align-items: center; gap: 1.25rem; }
.form-note{ font-size: 0.75rem; color: var(--grey); }

.form-success{
  display: none;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--orange);
  text-align: left;
}
.form-success.is-visible{ display: block; }
.form-success .eyebrow{ margin-bottom: 1.25rem; }
.form-success h3{ margin-bottom: 0.9rem; max-width: 22ch; }
.form-success p{ color: var(--grey); max-width: 48ch; }
form.is-hidden{ display: none; }

.contact-faq{ margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------------------------------------------------------------------- */
/* 16. SCROLL REVEAL ANIMATION SYSTEM                                     */
/* ---------------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-mask{
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-soft);
}
.reveal-mask.is-visible{ clip-path: inset(0 0 0 0); }
.reveal-stagger.is-visible > *{ }
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .02s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .09s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .16s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .23s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .30s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .37s; }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-mask, .reveal-stagger > *, .hero-title .line span, .hero-sub, .hero-ctas, .hero-trust, .hero-visual .img-frame, .hero-visual .ui-card{
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* cursor-follow micro detail (desktop only) */
.cursor-dot{
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
  z-index: 600;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
  mix-blend-mode: difference;
}
.cursor-dot.is-active{ opacity: 1; }
.cursor-dot.is-large{ width: 46px; height: 46px; }

/* ---------------------------------------------------------------------- */
/* 17. RESPONSIVE                                                         */
/* ---------------------------------------------------------------------- */
@media (max-width: 1080px){
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-top .footer-col:last-child{ grid-column: span 1; }
  .pressures-grid{ grid-template-columns: repeat(4, 1fr); }
  .pressure-feature{ grid-column: span 4; }
  .pressure-image{ grid-column: span 2; }
  .pressure-stat{ grid-column: span 2; }
  .pressure-callout{ grid-column: span 4; }
}

@media (max-width: 900px){
  .nav-links, .nav-aux .nav-login{ display: none; }
  .nav-toggle{ display: flex; }

  .hero .wrap{ grid-template-columns: 1fr; }
  .hero{ align-items: flex-start; padding-top: clamp(7.5rem, 20vw, 9rem); }
  .hero-visual{ order: -1; aspect-ratio: 4/3.6; margin-bottom: 2rem; }
  .scroll-indicator{ display: none; }

  .positioning{ grid-template-columns: 1fr; }
  .positioning-media{ position: relative; top: 0; aspect-ratio: 16/10; }

  .pressures-grid{ grid-template-columns: repeat(2, 1fr); }
  .pressure-feature{ grid-column: span 2; grid-row: span 1; }
  .pressure-image{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
  .pressure-stat, .pressure-callout{ grid-column: span 2; }

  .services-exp{ grid-template-columns: 1fr; }
  .services-nav{ position: relative; top: 0; display: flex; overflow-x: auto; gap: 0.5rem; }
  .services-nav-list{ display: flex; gap: 0.25rem; }
  .services-nav-list li{ border: none; flex-shrink: 0; }
  .services-nav-btn{ padding: 0.6rem 1rem; border: 1px solid var(--line); white-space: nowrap; }
  .service-panel{ grid-template-columns: 1fr; }

  .why-grid{ grid-template-columns: 1fr; }
  .why-media{ position: relative; top: 0; aspect-ratio: 16/10; order: -1; }

  .reporting{ grid-template-columns: 1fr; }

  .insight-grid, .resource-grid{ grid-template-columns: repeat(2, 1fr); }

  .final-cta-inner{ grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }

  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: span 2; margin-bottom: 1rem; }

  .service-detail-grid{ grid-template-columns: 1fr; }
  .service-detail:nth-child(even) .service-detail-grid{ direction: ltr; }
  .detail-columns{ grid-template-columns: 1fr; }

  .featured-article{ grid-template-columns: 1fr; }

  .contact-layout{ grid-template-columns: 1fr; }
  .contact-info{ position: relative; top: 0; }

  .newsletter-block{ grid-template-columns: 1fr; }

  .cursor-dot{ display: none; }
}

@media (max-width: 620px){
  .insight-grid, .resource-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .pressures-grid{ grid-template-columns: 1fr 1fr; }
  .pressure-feature{ grid-column: span 2; }
  .pressure-image{ grid-column: span 2; }
  .pressure-stat{ grid-column: span 1; }
  .pressure-callout{ grid-column: span 2; }
  .journey-stage{ flex: 0 0 82vw; }
  .footer-brand{ grid-column: span 2; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------- */
/* 18. ACCESSIBILITY                                                      */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================== */
/* FINAL POLISH — BRAND, DATA MOTION, CONTACT, BOOKING AND CLIENT PORTAL  */
/* ====================================================================== */

.brand-logo{
  display:block;
  width:auto;
  height:42px;
  max-width:min(235px,46vw);
  object-fit:contain;
}
.site-header.is-scrolled .brand-logo{height:38px;}
.site-footer .brand-logo{height:38px;filter:invert(1);}
.site-footer .brand{width:fit-content;}
.btn{white-space:nowrap;}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.1rem;border:1px solid var(--ink);
  color:var(--ink);font-family:var(--font-label);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;transition:background .25s var(--ease),color .25s var(--ease);
}
.btn-outline:hover{background:var(--ink);color:var(--warm-white);}

/* The orange accents now animate once to communicate progress rather than pulse forever. */
.icon-graphic .pulse-accent,
.pressure-feature-graphic .pulse-dot{animation:none;opacity:1;transform:none;}
.graphic-frame rect.pulse-accent{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(.08);opacity:.2;}
.graphic-frame circle.pulse-accent[fill]{transform-box:fill-box;transform-origin:center;transform:scale(.4);opacity:0;}
.graphic-frame circle.pulse-accent[stroke-dasharray]{stroke-dashoffset:138;}
.graphic-frame circle.pulse-accent[stroke]:not([stroke-dasharray]){stroke-dasharray:90;stroke-dashoffset:90;}
.graphic-frame path.pulse-accent{stroke-dasharray:100;stroke-dashoffset:100;}
.graphic-frame.is-visible rect.pulse-accent,
.service-panel.is-active rect.pulse-accent,
.service-detail.is-visible rect.pulse-accent,
.insight-card.is-visible rect.pulse-accent{animation:dataBarRise .85s var(--ease-soft) forwards;}
.graphic-frame.is-visible circle.pulse-accent[fill],
.service-panel.is-active circle.pulse-accent[fill],
.service-detail.is-visible circle.pulse-accent[fill],
.insight-card.is-visible circle.pulse-accent[fill]{animation:dataNodeArrive .7s var(--ease-soft) forwards;}
.graphic-frame.is-visible circle.pulse-accent[stroke-dasharray],
.service-panel.is-active circle.pulse-accent[stroke-dasharray],
.service-detail.is-visible circle.pulse-accent[stroke-dasharray],
.insight-card.is-visible circle.pulse-accent[stroke-dasharray]{animation:dataRingFill 1.25s var(--ease-soft) forwards;}
.graphic-frame.is-visible circle.pulse-accent[stroke]:not([stroke-dasharray]),
.service-panel.is-active circle.pulse-accent[stroke]:not([stroke-dasharray]),
.service-detail.is-visible circle.pulse-accent[stroke]:not([stroke-dasharray]),
.insight-card.is-visible circle.pulse-accent[stroke]:not([stroke-dasharray]),
.graphic-frame.is-visible path.pulse-accent,
.service-panel.is-active path.pulse-accent,
.service-detail.is-visible path.pulse-accent,
.insight-card.is-visible path.pulse-accent{animation:dataStrokeDraw 1s var(--ease-soft) forwards;}
@keyframes dataBarRise{from{transform:scaleY(.08);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes dataNodeArrive{0%{transform:scale(.4) translateY(7px);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes dataRingFill{from{stroke-dashoffset:138}to{stroke-dashoffset:34}}
@keyframes dataStrokeDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* Contact layout */
.about-contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.contact-layout{grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;}
.contact-info{padding-top:.4rem;}
.contact-info .lede{max-width:34ch;}
.contact-detail{display:grid;grid-template-columns:88px minmax(0,1fr);gap:1rem;align-items:baseline;padding:1.15rem 0;}
.contact-detail span{margin:0;}
.contact-detail strong{min-width:0;overflow-wrap:anywhere;line-height:1.45;}
.contact-alt{margin-top:1.5rem;gap:0;border-top:1px solid var(--line);}
.contact-alt .text-link{justify-content:space-between;width:100%;padding:.9rem 0;border-bottom:1px solid var(--line);}
.contact-form-card{background:var(--warm-white);border:1px solid var(--line);padding:clamp(1.5rem,3.5vw,3rem);box-shadow:0 30px 65px -48px rgba(13,13,12,.4);scroll-margin-top:7rem;}
.form-grid{gap:1.15rem 1rem;}
.form-field{gap:.45rem;}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--line);background:var(--bone);border-radius:2px;padding:.85rem .9rem;min-height:48px;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.form-field textarea{min-height:132px;}
.form-field select{background-position:right .9rem center;padding-right:2.5rem;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--orange);background:var(--warm-white);box-shadow:0 0 0 3px rgba(217,72,32,.1);}
.form-submit{align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.25rem;}
.form-note{max-width:38ch;line-height:1.5;}
.form-success{background:var(--bone);min-height:280px;align-content:center;}
.form-success.is-visible{display:grid;}

/* Embedded TidyCal booking */
.booking-section{background:var(--ink);color:var(--warm-white);scroll-margin-top:5rem;overflow:hidden;position:relative;}
.booking-section::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-220px;top:-240px;border:1px solid rgba(217,72,32,.25);box-shadow:0 0 0 90px rgba(217,72,32,.035),0 0 0 180px rgba(217,72,32,.02);pointer-events:none;}
.booking-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(540px,1.28fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;position:relative;z-index:1;}
.booking-copy{position:sticky;top:8rem;}
.booking-copy .lede{color:rgba(250,248,243,.68);}
.booking-points{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;}
.booking-points span{border:1px solid rgba(250,248,243,.18);padding:.55rem .75rem;font-family:var(--font-label);font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(250,248,243,.78);}
.booking-calendar{background:var(--warm-white);color:var(--ink);border:1px solid rgba(250,248,243,.16);min-height:650px;box-shadow:0 38px 90px -55px rgba(0,0,0,.8);overflow:hidden;}
.booking-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bone);}
.booking-calendar-head>div{display:grid;gap:.25rem;}
.booking-calendar-head strong{font-family:var(--font-head);font-size:1.05rem;}
.booking-status{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:99px;padding:.42rem .65rem;font-family:var(--font-label);font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);white-space:nowrap;}
.booking-status i{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(217,72,32,.1);}
.tidycal-embed{width:100%;min-height:590px;background:var(--warm-white);}
.tidycal-embed iframe{display:block;width:100%!important;min-height:590px!important;border:0!important;}
.booking-fallback{padding:1rem 1.2rem;font-size:.85rem;color:var(--grey);}
.booking-fallback a{color:var(--orange);text-decoration:underline;}

/* Client portal coming soon */
.portal-hero{min-height:100svh;padding:clamp(8.5rem,13vw,11rem) 0 clamp(5rem,8vw,7rem);display:flex;align-items:center;position:relative;overflow:hidden;}
.portal-hero::after{content:"";position:absolute;width:42vw;height:42vw;min-width:480px;min-height:480px;right:-18vw;top:12%;border-radius:50%;border:1px solid rgba(217,72,32,.2);box-shadow:0 0 0 80px rgba(217,72,32,.035),0 0 0 160px rgba(217,72,32,.02);pointer-events:none;}
.portal-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:clamp(3rem,6vw,6.5rem);align-items:center;position:relative;z-index:1;}
.portal-copy .breadcrumb{margin-bottom:2.25rem;}.portal-copy .h-display{max-width:10.5ch;margin-top:1rem;}.portal-copy .lede{margin-top:1.5rem;max-width:42ch;}
.portal-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem;}.portal-benefits{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;}.portal-benefits span{border:1px solid var(--line);background:rgba(250,248,243,.6);padding:.55rem .75rem;font-family:var(--font-label);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.portal-preview{position:relative;padding:clamp(1rem,2vw,1.5rem);background:var(--stone);box-shadow:0 50px 100px -65px rgba(13,13,12,.65);}
.portal-window{background:#11110f;color:var(--warm-white);padding:clamp(1.2rem,2.5vw,2rem);min-height:590px;position:relative;overflow:hidden;}.portal-window::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 6%,rgba(217,72,32,.2),transparent 32%);pointer-events:none;}
.portal-window-head,.portal-metrics,.portal-chart-card,.portal-site-list{position:relative;z-index:1;}.portal-window-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(250,248,243,.12);}.portal-window-head>div{display:grid;gap:.25rem;}.portal-window-head strong{font-family:var(--font-head);font-size:1.05rem;}.portal-kicker{font-family:var(--font-label);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(250,248,243,.5);}.portal-live{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(250,248,243,.12);border-radius:99px;padding:.4rem .65rem;font-family:var(--font-label);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(250,248,243,.7);}.portal-live i{width:6px;height:6px;border-radius:50%;background:var(--orange);}
.portal-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(250,248,243,.12);margin-top:1.1rem;border:1px solid rgba(250,248,243,.12);}.portal-metric{background:rgba(250,248,243,.035);color:var(--warm-white);text-align:left;padding:1rem;display:grid;gap:.22rem;transition:background .25s var(--ease),transform .25s var(--ease);}.portal-metric:hover{background:rgba(250,248,243,.08);}.portal-metric.is-active{background:var(--warm-white);color:var(--ink);transform:translateY(-3px);}.portal-metric span{font-family:var(--font-label);font-size:.61rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.62;}.portal-metric strong{font-family:var(--font-head);font-size:1.35rem;}.portal-metric small{font-size:.68rem;color:var(--orange);}
.portal-chart-card{margin-top:1rem;border:1px solid rgba(250,248,243,.12);padding:1rem;background:rgba(250,248,243,.035);}.portal-chart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;}.portal-chart-head>div{display:grid;gap:.25rem;}.portal-chart-head span{font-size:.68rem;color:rgba(250,248,243,.55);}.portal-chart-head strong{font-family:var(--font-head);font-size:1.35rem;}#portal-chart-change{color:var(--orange);font-weight:600;}.portal-chart{width:100%;height:120px;margin-top:.8rem;overflow:visible;}.portal-chart-grid line{stroke:rgba(250,248,243,.12);stroke-width:1;}.portal-chart-line{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}.portal-chart-line.is-redrawing{animation:portalLineDraw .65s var(--ease-soft);}.portal-chart-dot{fill:var(--orange);stroke:var(--warm-white);stroke-width:2;vector-effect:non-scaling-stroke;}@keyframes portalLineDraw{from{opacity:.35}to{opacity:1}}
.portal-site-list{margin-top:1rem;border:1px solid rgba(250,248,243,.12);}.portal-site-row{display:grid;grid-template-columns:1.5fr .75fr .75fr .75fr;gap:.7rem;align-items:center;padding:.8rem .9rem;border-top:1px solid rgba(250,248,243,.12);font-size:.72rem;}.portal-site-row:first-child{border-top:0}.portal-site-head{color:rgba(250,248,243,.45);font-family:var(--font-label);font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}.portal-site-row strong{font-family:var(--font-head);font-size:.78rem;}.portal-site-row em{justify-self:start;color:var(--warm-white);background:rgba(250,248,243,.1);border-radius:99px;padding:.25rem .48rem;font-style:normal;white-space:nowrap;}.portal-site-row em.is-watch{color:var(--orange);background:rgba(217,72,32,.12);}
.section--orange{background:var(--orange);color:var(--ink);}.eyebrow--dark{color:var(--ink);}.portal-interest-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr);gap:clamp(3rem,7vw,7rem);align-items:start;}.portal-form-card{background:var(--warm-white);padding:clamp(1.5rem,3vw,2.5rem);border:1px solid rgba(13,13,12,.16);box-shadow:0 30px 70px -48px rgba(13,13,12,.5);}

@media(max-width:1080px){.contact-layout,.booking-layout,.portal-hero-grid,.portal-interest-grid{grid-template-columns:1fr}.contact-info,.booking-copy{position:relative;top:0}.booking-calendar,.portal-preview{max-width:800px;width:100%}.portal-copy .h-display{max-width:12ch}}
@media(max-width:900px){.about-contact-grid{grid-template-columns:1fr}.contact-layout{gap:2.5rem}.contact-detail{grid-template-columns:76px minmax(0,1fr)}.portal-hero{min-height:auto}.portal-hero::after{display:none}}
@media(max-width:620px){.brand-logo{height:34px;max-width:185px}.site-header.is-scrolled .brand-logo{height:32px}.contact-form-card{padding:1.25rem}.contact-detail{grid-template-columns:1fr;gap:.25rem}.booking-calendar{min-height:600px}.booking-calendar-head{align-items:flex-start;flex-direction:column}.tidycal-embed,.tidycal-embed iframe{min-height:560px!important}.portal-window{min-height:auto;padding:1rem}.portal-metrics{grid-template-columns:1fr}.portal-metric.is-active{transform:none}.portal-site-row{grid-template-columns:1.3fr .8fr .8fr}.portal-site-row>:nth-child(4){display:none}.portal-hero-grid,.portal-interest-grid{gap:2.5rem}}
@media(prefers-reduced-motion:reduce){.graphic-frame rect.pulse-accent,.graphic-frame circle.pulse-accent,.graphic-frame path.pulse-accent{animation:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}}

/* ====================================================================== */
/* 20. INTEGRATED CMS CONTENT                                              */
/* ====================================================================== */
.cms-post-card[hidden], .service-detail[hidden]{ display:none !important; }
.cms-empty-state{
  grid-column:1/-1;
  padding:3rem;
  border:1px solid var(--line);
  background:var(--warm-white);
  text-align:center;
  color:var(--muted);
}
.cms-feature-graphic{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 76% 20%, rgba(217,72,32,.16), transparent 28%),
    var(--warm-white);
}
.cms-feature-graphic svg{ width:min(42%,260px); height:auto; }
.cms-post-card .insight-media img,
.featured-article .featured-media>img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Dynamic article template */
.cms-article-page{
  padding-top:clamp(9rem,14vw,12rem);
  padding-bottom:clamp(5rem,9vw,8rem);
  min-height:75vh;
}
.article-loading{
  min-height:55vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1rem;
  color:var(--muted);
  font-size:.78rem;
}
.article-loading span{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid var(--stone);
  border-top-color:var(--orange);
  animation:articleSpin .8s linear infinite;
}
@keyframes articleSpin{to{transform:rotate(360deg)}}
.article-hero{
  max-width:1050px;
  padding-bottom:clamp(2.5rem,5vw,5rem);
}
.article-hero .breadcrumb{ margin-bottom:clamp(2rem,4vw,3.5rem); }
.article-meta{
  display:flex;
  gap:.7rem 1rem;
  flex-wrap:wrap;
  margin-bottom:1.3rem;
  color:var(--muted);
  font-family:var(--font-label);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.article-meta span{ display:inline-flex;align-items:center;gap:.5rem; }
.article-meta span:not(:last-child)::after{ content:"/";color:var(--stone);margin-left:.5rem; }
.article-hero .h-display{ max-width:13ch; }
.article-hero .lede{ max-width:58ch;margin-top:1.6rem; }
.article-author{
  margin-top:1.4rem;
  font-family:var(--font-label);
  font-size:.75rem;
  font-weight:600;
}
.article-cover{
  margin:0 0 clamp(3rem,6vw,6rem);
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--stone);
}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-layout{
  display:grid;
  grid-template-columns:220px minmax(0,760px);
  gap:clamp(2.5rem,7vw,7rem);
  align-items:start;
  justify-content:center;
}
.article-side{
  position:sticky;
  top:120px;
  display:grid;
  gap:.55rem;
  padding-top:1rem;
  border-top:1px solid var(--ink);
  font-size:.73rem;
  color:var(--muted);
}
.article-side>span:first-child{
  font-family:var(--font-label);
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.article-side strong{font-family:var(--font-head);color:var(--ink);font-size:.9rem}
.article-side .text-link{margin-top:1rem;width:fit-content}
.article-body{
  font-size:1rem;
  line-height:1.85;
  color:#2c2b28;
}
.article-body h2{
  font-family:var(--font-head);
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:1.08;
  letter-spacing:-.04em;
  color:var(--ink);
  margin:2.8rem 0 1rem;
}
.article-body h3{
  font-family:var(--font-head);
  font-size:1.35rem;
  color:var(--ink);
  margin:2rem 0 .7rem;
}
.article-body p{margin:0 0 1.25rem}
.article-body ul{margin:0 0 1.5rem;padding-left:1.2rem}
.article-body li{margin:.45rem 0;padding-left:.25rem}
.article-body a{color:var(--orange);text-decoration-thickness:1px;text-underline-offset:3px}
.article-body blockquote{
  margin:2rem 0;
  padding:1.4rem 1.6rem;
  border-left:3px solid var(--orange);
  background:var(--bone);
  font-family:var(--font-head);
  font-size:1.2rem;
  line-height:1.5;
  color:var(--ink);
}
.article-not-found{
  min-height:55vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.article-not-found .h-display{max-width:11ch;margin-top:1rem}
.article-not-found .lede{max-width:45ch;margin:1.2rem 0 2rem}
.cms-preview-bar{
  position:sticky;
  top:0;
  z-index:100;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem clamp(1rem,3vw,2.5rem);
  background:var(--orange);
  color:var(--warm-white);
  box-shadow:0 12px 35px -24px rgba(13,13,12,.6);
}
.cms-preview-bar>div{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.cms-preview-bar span{font-family:var(--font-label);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.cms-preview-bar strong{font-family:var(--font-head);font-size:.85rem}
.cms-preview-bar button{border:1px solid rgba(255,255,255,.45);background:transparent;color:white;padding:.55rem .75rem;font-weight:600}

@media(max-width:760px){
  .article-layout{grid-template-columns:1fr}
  .article-side{position:relative;top:auto;grid-template-columns:1fr 1fr;gap:.45rem 1rem}
  .article-side .text-link{grid-column:1/-1}
  .article-cover{aspect-ratio:4/3}
  .cms-preview-bar strong{display:none}
}
.cms-resource-launch{
  grid-column:1/-1;
  width:100%;
  padding:clamp(2rem,5vw,4.5rem);
  background:var(--warm-white);
  border:1px solid var(--line);
}
.cms-resource-launch h2{font-size:clamp(2rem,4vw,4rem);max-width:14ch;margin:.9rem 0 1rem}
.cms-resource-launch>p:not(.eyebrow){max-width:52ch;color:var(--muted);line-height:1.7;margin-bottom:1.4rem}
[data-cms-home-posts]{visibility:hidden}
.cms-content-ready [data-cms-home-posts]{visibility:visible}
.cms-home-resource-empty{
  grid-column:1/-1;
  padding:clamp(1.8rem,4vw,3rem);
  border:1px solid rgba(13,13,12,.16);
  background:var(--warm-white);
}
.cms-home-resource-empty h3{font-size:clamp(1.6rem,3vw,2.7rem);max-width:18ch;margin:.8rem 0}
.cms-home-resource-empty>p:last-child{max-width:55ch;color:var(--muted);line-height:1.65}