/* Futura Planning — shared site styles (home + subpages) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  font-family: Inter, system-ui, sans-serif;
  color: #243044;
  background: #FDFBF6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Focus rings: 2px solid on every interactive element */
:focus-visible {
  outline: 2px solid #2C4A8F;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Gold ring where the background is dark navy */
header :focus-visible,
#contact :focus-visible,
[data-dark] :focus-visible {
  outline-color: #FFCC57;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* Form fields: gold focus ring */
.fp-field:focus, .fp-field:focus-visible {
  outline: 2px solid #F0B83C;
  outline-offset: 1px;
  border-color: #F0B83C !important;
}

/* CTA sheen: a single soft light sweep across gold buttons every few seconds */
.cta-sheen { position: relative; overflow: hidden; }
.cta-sheen::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: ctaSheen 6s ease-in-out 2.4s infinite;
  pointer-events: none;
}
@keyframes ctaSheen {
  0% { left: -75%; }
  16% { left: 125%; }
  100% { left: 125%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-sheen::after { animation: none; }
}

/* Slow rotating dashed ring (Fast-Track 48hr dial) */
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Mobile category rail: arrow nudges right to invite scrolling */
@keyframes railNudge {
  0%, 70%, 100% { transform: translateX(0); }
  80% { transform: translateX(4px); }
  90% { transform: translateX(0); }
  95% { transform: translateX(3px); }
}
.rail-nudge { animation: railNudge 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rail-nudge { animation: none; } }

/* Icon micro-animations: a soft pop when the parent card/link is hovered,
   and a ring-wiggle for phone icons. Hover-only, so touch devices and
   reduced-motion users are unaffected. */
@keyframes icoPop {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-6deg) scale(1.1); }
  65% { transform: rotate(4deg) scale(1.04); }
}
.group:hover .ico-hover { animation: icoPop 480ms cubic-bezier(0.16,1,0.3,1); }
@keyframes icoRing {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-13deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  78% { transform: rotate(-2deg); }
}
a:hover .ico-ring, .group:hover .ico-ring { animation: icoRing 650ms ease-in-out; transform-origin: 50% 35%; }
@media (prefers-reduced-motion: reduce) {
  .group:hover .ico-hover, a:hover .ico-ring, .group:hover .ico-ring { animation: none; }
}

/* Floating WhatsApp gentle flash (a soft expanding ring) */
.wa-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.55);
  animation: waRing 2.6s cubic-bezier(0.16,1,0.3,1) infinite;
  pointer-events: none;
}
@keyframes waRing {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flash::before { animation: none; }
}

/* Hero photo scrim: left-weighted on desktop, top-down on mobile */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18,31,69,0.88) 0%, rgba(18,31,69,0.66) 38%, rgba(18,31,69,0.3) 64%, rgba(18,31,69,0.12) 100%);
}
@media (max-width: 767px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(18,31,69,0.86) 0%, rgba(18,31,69,0.66) 55%, rgba(18,31,69,0.5) 100%);
  }
}
.hero-top-blend {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(26,48,102,0.65), rgba(26,48,102,0));
}

/* Drawn underline for inline text links (Learn more) */
.fp-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 340ms cubic-bezier(0.16,1,0.3,1);
}
.group:hover .fp-underline { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) { .fp-underline { transition: none; } }

/* Hero signature flourish: a pen-stroke underline that draws itself in.
   Base state is fully drawn; the .hero-sig-anim class (added only when
   animations are viable) starts it hidden and draws it after the H1 lands. */
.hero-sig path { stroke-dashoffset: 0; }
.hero-sig-anim path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sigDraw 1100ms cubic-bezier(0.16,1,0.3,1) 1050ms forwards;
}
@keyframes sigDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-sig-anim path { animation: none; stroke-dashoffset: 0; }
}

/* Frozen-context snap: when the animation engine is detected as frozen
   (hidden iframe / capture tooling), useStaticRender tags <html> with
   .om-static so transitions and animations resolve to their end state
   instantly instead of sticking at frame 0. Real browsers never get this. */
html.om-static *, html.om-static *::before, html.om-static *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

/* Headings default to Fraunces */
h1, h2, h3 { font-family: Fraunces, Georgia, serif; }

/* Entrance animations (deterministic — fill-mode both holds final state) */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-anim, .hero-anim { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Long-form legal / prose pages */
.fp-legal { color: #243044; font-size: 16px; line-height: 1.75; }
.fp-legal > * + * { margin-top: 1.1rem; }
.fp-legal h2 { font-family: Fraunces, Georgia, serif; font-weight: 400; color: #1A3066; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; line-height: 1.2; margin-top: 2.4rem; }
.fp-legal h2:first-child { margin-top: 0; }
.fp-legal h3 { font-family: Fraunces, Georgia, serif; font-weight: 400; color: #1A3066; font-size: 19px; margin-top: 1.6rem; }
.fp-legal p { color: #3a4658; }
.fp-legal strong { color: #1A3066; font-weight: 600; }
.fp-legal a { color: #2C4A8F; text-decoration: underline; text-underline-offset: 2px; }
.fp-legal a:hover { color: #1A3066; }
.fp-legal ul { list-style: none; margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.fp-legal ul li { position: relative; padding-left: 1.6rem; color: #3a4658; }
.fp-legal ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 9px; background: #F0B83C; }
.fp-legal .fp-legal-note { font-size: 13.5px; color: #6A7385; }
.fp-legal-updated { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #C9912A; background: rgba(255,204,87,0.18); border-radius: 999px; padding: 5px 14px; margin-bottom: 1.8rem; }
.fp-legal-card { background: #fff; border: 1px solid rgba(26,48,102,0.1); border-radius: 18px; padding: clamp(24px,4vw,40px); box-shadow: 0 14px 36px -20px rgba(26,48,102,0.22); }