/* ============================================================================
   KINETIX PHYSIOTHERAPY — BLOG DESIGN TOKENS
   ----------------------------------------------------------------------------
   Single source of truth extracted from the main site (draft.html).
   Every blog page links this file FIRST, then blog.css.
   Do not hard-code colors/fonts elsewhere — pull from these variables.

   COLOR PALETTE
     --black   #030810  page background (near-black navy)
     --dark    #080f1a  alternate section background
     --surf    #0d1520  raised surfaces / cards
     --orange  #FF7A1F  brand accent (CTAs, links, highlights)
     --oglow   orange glow used on primary buttons
     --white   #f2f6fa  primary text
     --muted   #4e6070  secondary text / labels
     --line    rgba(255,255,255,.07)  hairline borders

   TYPE
     Display : 'Bebas Neue'      → hero/section numerals & big headings
     Body    : 'Space Grotesk'   → everything else (300–700)

   SPACING / RHYTHM
     Section padding desktop : ~7–9rem block, 3rem inline
     Section padding mobile  : ~5rem block, 1.5rem inline
     Max content width       : 1300px (site) / 760px (article reading column)

   MOTION
     Reveal easing : cubic-bezier(.16,1,.3,1)  (approximates GSAP power3.out)
     Reveal duration: .9s
     Hover transitions: .2s ease on color/background/transform

   NAV / FOOTER
     Reused verbatim from draft.html so the blog reads as the same site.
   ==========================================================================*/

:root{
  --black:  #030810;
  --dark:   #080f1a;
  --surf:   #0d1520;
  --orange: #FF7A1F;
  --orange-hover:#e06800;
  --oglow:  rgba(255,122,31,0.35);
  --white:  #f2f6fa;
  --muted:  #4e6070;
  --line:   rgba(255,255,255,0.07);
  --ff-display:'Bebas Neue', sans-serif;
  --ff-body:  'Space Grotesk', system-ui, sans-serif;

  --reveal-ease: cubic-bezier(.16,1,.3,1);
  --maxw-site: 1300px;
  --maxw-read: 760px;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;overflow-x:hidden}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Accessible focus ring (site hides cursor; blog keeps standard cursor + focus) */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* ─── NAV (verbatim from draft.html) ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;
  border-bottom:1px solid var(--line);
  background:rgba(3,8,16,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-logo img{height:40px;filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;opacity:0.9}
.nav-links{display:flex;align-items:center;gap:0.25rem;list-style:none}
.nav-a{
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);
  padding:0.5rem 0.85rem;border-radius:3px;
  transition:color 0.2s;
}
.nav-a:hover,.nav-a:focus-visible,.nav-a[aria-current="page"]{color:var(--white)}
.nav-book{
  background:var(--orange);color:#fff;
  font-size:0.78rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;padding:0.6rem 1.4rem;
  border-radius:3px;margin-left:0.5rem;white-space:nowrap;
  transition:background 0.2s,transform 0.15s;
}
.nav-book:hover{background:var(--orange-hover);transform:translateY(-1px)}

/* ─── BUTTONS (verbatim from draft.html) ─── */
.btn-primary{
  display:inline-flex;align-items:center;gap:0.65rem;
  background:var(--orange);color:#fff;
  font-size:0.88rem;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;padding:1.05rem 2.4rem;border-radius:3px;
  box-shadow:0 0 50px var(--oglow);
  transition:background 0.2s,transform 0.15s,box-shadow 0.2s;
}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-2px);box-shadow:0 0 80px rgba(255,122,31,0.55)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:0.65rem;
  border:1px solid rgba(255,255,255,0.18);color:var(--white);
  font-size:0.88rem;font-weight:600;letter-spacing:0.07em;
  text-transform:uppercase;padding:1.05rem 2.2rem;border-radius:3px;
  transition:border-color 0.2s,background 0.2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.04)}

/* ─── SECTION LABEL (the "03 — What We Offer" motif) ─── */
.kx-toplabel{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}
.kx-toplabel .num{font-size:0.68rem;font-weight:700;letter-spacing:0.2em;color:var(--orange);text-transform:uppercase}
.kx-toplabel .label{font-size:0.68rem;font-weight:700;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase}

/* ─── FOOTER (verbatim from draft.html) ─── */
footer{
  border-top:1px solid var(--line);
  padding:2.2rem 3rem;
}
.footer-inner{
  max-width:var(--maxw-site);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-logo img{height:32px;filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;opacity:0.6}
.footer-copy{font-size:0.78rem;color:var(--muted)}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:0.78rem;color:var(--muted);transition:color 0.2s}
.footer-links a:hover{color:var(--white)}

/* ─── SCROLL-REVEAL PRIMITIVES (lightweight IntersectionObserver, no GSAP) ─── */
.g-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--reveal-ease),transform .9s var(--reveal-ease)}
.g-left{opacity:0;transform:translateX(-45px);transition:opacity .9s var(--reveal-ease),transform .9s var(--reveal-ease)}
.g-right{opacity:0;transform:translateX(45px);transition:opacity .9s var(--reveal-ease),transform .9s var(--reveal-ease)}
.g-fade{opacity:0;transition:opacity .8s var(--reveal-ease)}
.is-in.g-up,.is-in.g-left,.is-in.g-right,.is-in.g-fade{opacity:1;transform:none}

/* Respect users who prefer reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .g-up,.g-left,.g-right,.g-fade{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s !important;transition-duration:.05s !important}
}

/* ─── SHARED RESPONSIVE NAV/FOOTER PADDING ─── */
@media(max-width:768px){
  nav{padding:0 1.5rem}
  footer,.footer-inner{padding:1.5rem}
}