/* Brand color and motion layer. The core layout and content stay in style.css. */
:root {
  --paper: #fcfeff;
  --ink: #182b37;
  --muted: #566977;
  --green: #a6f19c;
  --line: #dbe9ed;
  --emerald: #00a8a6;
  --mint: #e9fbfc;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
::selection { background: #a5eee8; color: #182b37; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--emerald); }
.header { height: 104px; background: rgb(255 255 255 / 94%); transition: background .3s, box-shadow .3s; }
.header.scrolled { box-shadow: 0 5px 24px rgb(16 46 38 / 5%); }
.wordmark { flex-shrink: 0; }
.brand-logo { width: 99px; height: 65px; display: block; object-fit: contain; }
.footer .brand-logo { width: 116px; height: 76px; }
.header nav a { padding: 8px 0; }
.header nav a:after { bottom: 0; background: var(--emerald); height: 2px; }
.header nav a.current { color: #007e88; }
.header nav a.current:after { width: 100%; }
.read-progress { background: linear-gradient(90deg, #00a8a6, #31d775); height: 3px; }
.button { min-height: 44px; transition: transform .25s, background .25s, box-shadow .25s; }
.dark { background: #007e88; color: #fff; }
.dark:hover { background: #00656f; box-shadow: 0 8px 24px #00a8a625; }
.outline:hover { background: #182b37; }
.muted { color: #5e7b8b; }
.hero { padding-top: 40px; padding-bottom: 48px; position: relative; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy > .eyebrow { color: #007e88; }
.hero h1 { font-weight: 500; margin-top: 27px; line-height: 1.12; letter-spacing: -.052em; }
.hero h1 .hero-line { display: block; color: var(--ink); }
.hero h1 .hero-accent { color: #007e88; background: linear-gradient(100deg, #007e88 0%, #009d8c 57%, #007e88 100%); background-size: 180% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-foot { color: #566977; }
.hero-visual { border-radius: 14px; isolation: isolate; box-shadow: 0 20px 65px #008eae18; --pointer-x: 50%; --pointer-y: 50%; }
.hero-visual img, .hero-visual:hover img { transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) scale(1.075); filter: brightness(1.22) saturate(1.13); transition: transform .65s cubic-bezier(.2,.7,.3,1); }
.hero-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), #c4ffff28 0%, transparent 48%); mix-blend-mode: screen; }
.hero-visual:after { background: linear-gradient(180deg, #052c3838, transparent 33%, transparent 57%, #052c3885); }
.visual-top, .visual-bottom { z-index: 2; }
.visual-bottom { transform: translate3d(var(--caption-x, 0px), var(--caption-y, 0px), 0); transition: transform .65s cubic-bezier(.2,.7,.3,1); }
.visual-bottom strong { color: #bafca9; }
.round-link { background: #ffffff0d; backdrop-filter: blur(4px); }
.round-link:hover { background: #82e9ea; color: #182b37; border-color: #82e9ea; }
.expertise-strip { background: #eefcfe; border-color: #d0edef; }
.expertise-strip i { color: #00a8a6; }
.result-grid { perspective: 1600px; }
.result-card { background: #eefbff; border: 1px solid #cde6ef; border-radius: 12px; }
.result-card.green { background: linear-gradient(135deg, #bbf3a8 0%, #88e0d4 100%); border-color: #81d6d2; }
.result-card:after { content: ''; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff45; }
.result-card .huge > .metric-number { font-size: 1em; }
.metric-suffix { font-size: .5em; }
.services-band { background: linear-gradient(120deg, #e8faff, #e7fbf3); }
.services-band .section-heading > p { color: #486976; }
.services-band .eyebrow { color: #007e88; }
.service-tabs button { color: #3f6577; position: relative; padding-left: 18px; }
.service-tabs button > span:first-child { color: #567988; }
.service-tabs button:before { content: ''; position: absolute; left: 0; top: 26%; bottom: 26%; width: 3px; border-radius: 5px; background: #04aba9; transform: scaleY(0); transition: transform .35s; }
.service-tabs button[aria-selected=true] { color: #007e88; background: #ffffff90; }
.service-tabs button[aria-selected=true]:before { transform: scaleY(1); }
.service-panel { background: #ffffff; color: #182b37; border: 1px solid #c6e5ed; border-radius: 12px; box-shadow: 0 15px 35px #002e2525; }
.service-label { color: #007b86; }
.service-panel > p { color: #4d6675; }
.service-tags span { color: #456776; border-color: #cde5eb; background: #edf9fd; }
.service-panel .text-link { color: #007b86; border-color: #007b86; }
.funnel > div { color: #507280; border-color: #c4e0e9; }
.funnel > div.active { background: #72dfd72e; border-color: #24aca680; color: #007581; }
.growth-chart { background: #effbff; border-color: #c9e5ee; border-radius: 12px; }
.chart circle { fill: #00a8a6; }
#chart-point { fill: #75e8de; stroke: #007a87; }
.milestone-controls button { min-height: 44px; }
.milestone-controls button[aria-pressed=true] { background: #91e6df; }
.process-section { background: linear-gradient(150deg, #eafbfd, #f4fcff); }
.process-list button { color: #4b6c7e; min-height: 60px; transition: color .25s, background .25s; }
.process-list button[aria-selected=true] { background: #a3e9e4; }
.process-panel { background: #fff; border: 1px solid #cce5ec; border-radius: 12px; box-shadow: 0 15px 45px #006b3c08; }
.process-number { color: #008590; }
.about-principles > div > span { color: #007e88; }
.quote-section { background: linear-gradient(125deg, #9ce8e0 0%, #c5f5a8 100%); }
.quote-credit div > span { color: #365b70; }
.brief-form { border-radius: 12px; box-shadow: 0 12px 45px #00633a06; }
.goal-options input:checked + span { background: #c1efe9; border-color: #5dc4c6; }
.goal-options span { min-height: 44px; display: flex; align-items: center; }
.footer { background: #fff; }
.story-dialog { border-radius: 14px; background: #fcfeff; }
.story-stats { background: #b7ece6; }
.dialog-close { position: sticky; top: -30px; float: right; margin: -22px -20px 0 10px; z-index: 3; background: #fff; }
.story-dialog blockquote { border-left-color: #00a8a6; }

/* Motion is enabled only after progressive enhancement initializes. */
.experience-motion .hero-copy > .eyebrow, .experience-motion .hero-line, .experience-motion .hero-copy > p, .experience-motion .hero-actions, .experience-motion .hero-foot { animation: hero-entrance .95s cubic-bezier(.16,1,.3,1) both; }
.experience-motion .hero-line:nth-child(1) { animation-delay: .07s; }
.experience-motion .hero-line:nth-child(2) { animation-delay: .14s; }
.experience-motion .hero-line:nth-child(3) { animation-delay: .21s; }
.experience-motion .hero-copy > p { animation-delay: .28s; }
.experience-motion .hero-actions { animation-delay: .35s; }
.experience-motion .hero-foot { animation-delay: .42s; }
.experience-motion .hero-visual { animation: scene-entrance 1.25s cubic-bezier(.16,1,.3,1) both; }
.experience-motion .hero h1 .hero-accent { animation-name: hero-entrance, accent-light; animation-duration: .95s, 7s; animation-delay: .21s, 1s; animation-iteration-count: 1, 2; }
.experience-motion .reveal { transition: opacity .85s, transform .85s cubic-bezier(.16,1,.3,1); }
.experience-motion .result-card:nth-child(2) { transition-delay: .12s; }
.experience-motion .result-card.visible:hover { transform: translateY(-7px); box-shadow: 0 15px 35px #006d3d12; transition-delay: 0s; }
.experience-motion .growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.experience-motion .growth-chart.visible .growth-line { animation: draw-growth 1.5s .15s ease forwards; }
.experience-motion #chart-point { transition: cx .5s cubic-bezier(.2,.7,.3,1), cy .5s cubic-bezier(.2,.7,.3,1); }
.experience-motion .story-dialog[open] { animation: dialog-entrance .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes hero-entrance { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes scene-entrance { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes accent-light { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes draw-growth { to { stroke-dashoffset: 0; } }
@keyframes dialog-entrance { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 1001px) {
  .growth-copy, .about-statement { position: sticky; top: 155px; align-self: start; }
  .process-panel { position: sticky; top: 130px; align-self: start; }
  .hero-visual { min-height: 580px; }
}
@media (max-width: 700px) {
  .header { height: 88px; }
  .brand-logo { width: 85px; height: 56px; }
  .header nav { top: 88px; background: #fff; }
  html { scroll-padding-top: 100px; }
  .hero { padding-top: 30px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(41px, 10vw, 65px); }
  .hero-visual { min-height: 420px; }
  .hero-visual img { transform: scale(1.045); }
  .hero-copy > .eyebrow { font-size: 11px; letter-spacing: .08em; }
  .service-tabs button { font-size: 20px; padding-left: 15px; }
  .service-panel { min-height: 480px; }
  .service-panel h3 { font-size: 30px; }
  .service-panel .text-link { font-size: 14px; }
  .dialog-close { top: -30px; margin-right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual img, .hero-visual:hover img { transform: none !important; }
  .visual-bottom { transform: none !important; }
  .growth-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .experience-motion .result-card.visible:hover { transform: none; }
}