/* Phase 2 additions; content remains usable without JavaScript. */
:root { --green-600: #2d7d1b; }
[hidden] { display: none !important; }
/* No-JS: fully visible. The .js gate (added by app.js only when motion is allowed)
   introduces the hidden start-state, so scroll reveals never hide content otherwise. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.22,.7,.24,1), transform .75s cubic-bezier(.22,.7,.24,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid #087578; outline-offset: 5px; }
.contact-panel :focus-visible, .footer :focus-visible { outline-color: #80e2d6; }
.fineprint { color: #526277; font-size: .84rem; }
.form-card h2 { font-size: clamp(1.9rem, 4vw, 2.35rem); }
.form-intro { color: var(--muted); margin: 12px 0 25px; }
.field label span { font-weight: 400; }
.field { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.field input, .field select { min-height: 51px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid #087578; outline-offset: 2px; }
.field small, .field-help { color: #526277; font-size: .84rem; line-height: 1.5; }
.field-help { margin: 0 0 8px; }
.field small { display: block; margin-top: 7px; }
.field textarea { min-height: 155px; }
.consent-label { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; line-height: 1.6; margin-top: 24px; }
.consent-label input { flex: 0 0 19px; width: 19px; height: 19px; margin: 4px 0 0; accent-color: #087578; }
.consent-label a, .form-status a, .rich a { color: #05666a; text-decoration: underline; text-underline-offset: 3px; }
.form-actions { gap: 12px; }
.form-actions .btn { text-align: center; }
.form-status { overflow-wrap: anywhere; }
.form-status:empty { margin: 0; min-height: 0; }
.form-status.is-error { color: #9b2525; }
.form-actions button:disabled { opacity: .65; cursor: wait; transform: none; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.business-detail { margin-top: 24px; }
.business-detail p { margin-top: 6px; white-space: pre-line; }
.contact-panel > .btn { margin-top: 24px; }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.faq-layout .lead { margin-top: 20px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 23px 32px 23px 0; font-size: 1.03rem; font-weight: 750; cursor: pointer; position: relative; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 2px; top: 19px; font-size: 1.5rem; color: #087578; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { margin: 0 28px 24px 0; color: #526277; line-height: 1.75; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.proof-card { margin: 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.proof-card blockquote { margin: 0 0 24px; font-size: 1.15rem; line-height: 1.7; }
.proof-card figcaption { font-weight: 700; }
.proof-card p { color: #526277; margin: 12px 0; }
.team-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 22px; }
.privacy-settings { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom-links { flex-wrap: wrap; }
.analytics-consent { position: fixed; z-index: 100; bottom: 20px; left: 20px; right: 20px; max-width: 650px; padding: 25px; border: 1px solid #b9cfcb; border-radius: 20px; background: #fff; box-shadow: 0 12px 50px #061c3d35; max-height: calc(100dvh - 40px); overflow: auto; }
.analytics-consent h2 { font-size: 1.35rem; margin-bottom: 10px; }
.analytics-consent p { color: #526277; font-size: .94rem; margin-bottom: 16px; }
.analytics-consent a { color: #05666a; text-decoration: underline; }
.analytics-consent-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---- Phase 2.5 motion & micro-interactions (reduced-motion safe) ---- */
/* Reading progress bar */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #0a9294, #63bd23); z-index: 60; will-change: transform; pointer-events: none; }
/* Back-to-top */
.to-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #057a7e, #2d7d1b); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(6,28,61,.22); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92); transition: opacity .3s ease, transform .3s ease, visibility .3s; z-index: 60; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(6,28,61,.28); }
.to-top svg { width: 22px; height: 22px; }
/* Sticky header condenses on scroll */
.site-header { transition: box-shadow .3s ease, background .3s ease; }
.nav { transition: height .3s ease; }
.site-header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(6,28,61,.07); }
.site-header.scrolled .nav { height: 72px; }
/* Animated gradient wordmark */
.gradient-text { background-size: 220% auto; animation: sg-shine 7s linear infinite; }
@keyframes sg-shine { to { background-position: 220% center; } }
/* Primary button shine sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn-primary:hover::after { animation: sg-sheen .85s ease; }
@keyframes sg-sheen { from { left: -130%; } to { left: 190%; } }
/* Hero orbiting halo and floating service chips */
.hero::after { animation: sg-drift 20s ease-in-out infinite; }
@keyframes sg-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px, 22px) scale(1.04); } }
.visual-orb { animation: sg-orb 9s ease-in-out infinite; }
@keyframes sg-orb { 0%,100% { box-shadow: 0 40px 100px rgba(6,28,61,.22); } 50% { box-shadow: 0 46px 120px rgba(5,122,126,.30); } }
.float-card { animation: sg-float 6.5s ease-in-out infinite; }
.float-card.fc2 { animation-duration: 7.5s; animation-delay: -1.5s; }
.float-card.fc3 { animation-duration: 8s; animation-delay: -3s; }
.float-card.fc4 { animation-duration: 7s; animation-delay: -2s; }
.float-card:hover { animation-play-state: paused; }
@keyframes sg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
/* Card & chip hover micro-interactions */
.service-icon { transition: transform .3s cubic-bezier(.22,.7,.24,1); }
.service-card:hover .service-icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.value-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #cbdce6; }
.process-card { transition: transform .3s ease, box-shadow .3s ease; }
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.sector { transition: transform .25s ease, border-color .25s ease, color .25s ease; }
.sector:hover { transform: translateY(-2px); border-color: #0a9294; color: #057a7e; }
.bullet { transition: transform .25s ease, border-color .25s ease; }
.bullet:hover { transform: translateX(3px); border-color: #cbdce6; }
.contact-item { transition: transform .25s ease; }
.contact-item:hover { transform: translateX(3px); }
.trust-item { transition: color .25s ease, background .25s ease; }
.trust-item:hover { background: var(--surface); color: #082b58; }
/* FAQ answer reveal */
.faq-list summary { transition: color .2s ease; }
.faq-list details[open] summary { color: #05666a; }
.faq-list summary::after { transition: transform .25s ease; }
.faq-list details[open] p { animation: sg-faq .35s ease both; }
@keyframes sg-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Resource articles & capability content */
.article-body { max-width: 820px; margin-inline: auto; }
.rich ul { margin: 4px 0 20px; padding-left: 22px; color: #4f6074; }
.rich li { margin-bottom: 9px; line-height: 1.7; }
.rich li strong { color: var(--navy-950); }
.service-card .eyebrow { margin-bottom: 10px; }
/* Page enter / leave transitions between internal pages */
html.js #main { animation: sg-page-in .55s cubic-bezier(.22,.7,.24,1) both; }
@keyframes sg-page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.js.is-leaving body { opacity: 0; transition: opacity .28s ease; }
/* Animated gradient dividers marking the alternating surface sections */
.section.surface { position: relative; }
.section.surface::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 36px), var(--max)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(10,146,148,.4), rgba(99,189,35,.4), transparent); background-size: 200% 100%; animation: sg-divider 9s linear infinite; }
@keyframes sg-divider { to { background-position: -200% 0; } }
/* Signature eyebrow line draws in with its reveal */
html.js .reveal .eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform .6s ease .12s; }
html.js .reveal.is-visible .eyebrow::before { transform: scaleX(1); }
/* Parallax targets */
.visual-orb, .page-hero-visual { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js #main, .section.surface::before { animation: none !important; }
  html.js.is-leaving body { transition: none !important; }
  html.js .reveal .eyebrow::before { transform: none !important; }
  .gradient-text, .float-card, .visual-orb, .hero::after { animation: none !important; }
  .btn-primary::after { display: none; }
  .to-top, .site-header, .nav, .service-icon, .value-card, .process-card, .sector, .bullet, .contact-item, .trust-item { transition: none !important; }
}
@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  html:not(.nav-enhanced) .nav { height: auto; min-height: 74px; flex-wrap: wrap; padding-block: 16px; gap: 16px; }
  html:not(.nav-enhanced) .nav-toggle { display: none; }
  html:not(.nav-enhanced) .nav-links { display: flex; position: static; box-shadow: none; border: 0; padding: 0; width: 100%; }
}
@media (max-width: 620px) {
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }
  .form-card, .contact-panel { min-width: 0; }
  .contact-item a { overflow-wrap: anywhere; }
  .analytics-consent { bottom: 12px; left: 12px; right: 12px; padding: 20px; }
  .analytics-consent-actions .btn { flex: 1; }
}