/* The Motion Chiropractic & Sports Performance — site styles */
*{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{ margin:0; background:#0b0c0e; }
  :root{ --accent:#1ca9ec; --ink:#0b0c0e; --paper:#f4f5f6; }
  a{ color:inherit; text-decoration:none; }
  a.mlink:hover{ color:var(--accent); }
  ::selection{ background:var(--accent); color:#0b0c0e; }
  .mbtn{ transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; }
  .mbtn:hover{ transform:translateY(-2px); }
  .mcard{ transition:transform .2s ease, border-color .2s ease, background .2s ease; }
  .chip{ transition:background .18s ease, color .18s ease, border-color .18s ease; }
  .chip:hover{ background:var(--accent); color:#0b0c0e; border-color:var(--accent); }
  @keyframes mrise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

  .rtrack{ display:flex; width:max-content; animation:rscroll 34s linear infinite; }
  .rtrack:hover, .rtrack:focus-within{ animation-play-state:paused; }
  @keyframes rscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){
    .rtrack{ animation:none; flex-wrap:wrap; width:auto; }
  }
  .rmask{ mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

  /* ===== RESPONSIVE ===== */
  .g-hero,.g-approach,.g-services,.g-treatments,.g-testimonials,.g-apply,.g-footer,.g-bio{ }
  @media (max-width:900px){
    .g-hero,.g-approach,.g-services,.g-treatments,.g-testimonials,.g-apply,.g-footer{ grid-template-columns:1fr !important; }
    .g-bio{ grid-template-columns:1fr !important; }
    .g-bio > div:first-child{ position:static !important; margin:0 auto 32px !important; max-width:220px !important; }
    .g-bio > div:first-child > div:first-child{ max-width:220px !important; margin:0 auto !important; }
    .mainnav{ display:none !important; }
    .hamburger{ display:flex !important; }
    #navtoggle:checked ~ .mainnav{
      display:flex !important; position:absolute; top:100%; left:0; right:0; background:#0b0c0e;
      border-bottom:1px solid rgba(255,255,255,.1); flex-direction:column; align-items:flex-start;
      padding:18px 30px; gap:18px; z-index:70;
    }
  }
  @media (max-width:640px){
    h1{ font-size:clamp(38px,11vw,60px) !important; }
  }

  /* ===== LOGO SIZING ===== */
  .site-logo{ height:46px; }
  .footer-logo{ height:40px; }
  @media (max-width:900px){
    .site-logo{ height:36px; }
    .footer-logo{ height:34px; }
    .site-header-inner{ padding-left:18px !important; padding-right:18px !important; gap:14px !important; }
    .book-now-btn{ padding:11px 16px !important; font-size:14px !important; }
  }
  @media (max-width:380px){
    .site-logo{ height:30px; }
    .book-now-btn{ padding:10px 12px !important; font-size:13px !important; }
  }

  /* ===== SOCIAL CHIPS ===== */
  .social-chip{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.04em;
    color:#c3cbd1; border:1px solid rgba(255,255,255,.22); border-radius:10px;
    padding:13px 18px; line-height:1;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
  }
  .social-chip:hover, .social-chip:focus-visible{
    color:var(--accent); border-color:var(--accent); background:rgba(28,169,236,.08);
  }
  .social-chip .ig-icon{ width:20px; height:20px; flex:0 0 auto; }
  @media (max-width:900px){
    .social-chip{ font-size:16px; padding:14px 18px; }
    .social-chip .ig-icon{ width:22px; height:22px; }
  }
  a:focus-visible, label:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ===== EDITORIAL / ATHLETIC POLISH =====
     Bigger type, more air, pill CTAs, and scroll reveals. Overrides use
     !important because the markup carries inline styles from the design export. */

  h1, h2{ letter-spacing:-.018em !important; }

  .hero-title{ font-size:clamp(56px,9.2vw,128px) !important; line-height:.86 !important; }

  /* Pill CTAs read more athletic than the softly-rounded rectangles. */
  .mbtn{ border-radius:100px !important; }
  .mbtn:hover{ transform:translateY(-2px); }

  /* Flatter cards: lift by contrast, not by heavy borders. */
  .mcard{ background:#0f1114 !important; border-color:rgba(255,255,255,.07) !important; }
  .mcard:hover{ border-color:rgba(28,169,236,.45) !important; transform:translateY(-4px); }

  /* Slow drift on the hero photo so the first screen isn't static. */
  .hero-photo{ animation:heroDrift 22s ease-in-out infinite alternate; transform-origin:center; }
  @keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.07); } }

  /* Nav links get an underline that wipes in on hover. */
  .mainnav a{ position:relative; }
  .mainnav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
    background:var(--accent); transition:right .28s cubic-bezier(.4,0,.2,1);
  }
  .mainnav a:hover::after{ right:0; }

  /* Scroll reveals (added by reveal.js; never applied when reduced motion is on). */
  .reveal{ opacity:0; transform:translateY(26px); }
  .reveal.is-revealed{
    opacity:1; transform:none;
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; }
    .hero-photo{ animation:none !important; }
    .mbtn:hover, .mcard:hover{ transform:none !important; }
  }

  /* Hero credential badge — dark card so the cut-out portrait reads correctly. */
  .doc-badge-photo{ width:96px !important; height:96px !important; }
  @media (max-width:900px){
    .doc-badge{ left:0 !important; right:0 !important; bottom:14px !important; padding:12px 18px 12px 12px !important; }
    .doc-badge-photo{ width:72px !important; height:72px !important; }
  }

  /* Hero portrait: a cut-out, so it floats on the gradient rather than sitting in a frame.
     The drift animation is dropped here — it reads as a wobble on a subject with no backdrop. */
  .hero-portrait-wrap .hero-photo{ animation:none !important; filter:drop-shadow(0 30px 60px rgba(0,0,0,.65)); }
  @media (max-width:900px){
    .hero-portrait-wrap{ aspect-ratio:1/1 !important; max-width:420px; margin:0 auto; }
  }