/* ==========================================================================
   FPFR — core stylesheet
   Design tokens, reset, header, navigation, buttons and footer.
   Loaded by every page; pair with fpfr-home.css or fpfr-pages.css.
   ========================================================================== */

:root{
  --navy:#10243F;          /* deep navy — primary */
  --navy-deep:#0A1A30;
  --navy-soft:#1B355A;
  --gold:#C49A2C;          /* brand gold (from the seal) */
  --gold-bright:#E0B848;
  --gold-pale:#F1E3BC;
  --white:#FFFFFF;
  --ivory:#FAF8F3;
  --ink:#152238;
  --muted:#5B6678;
  --line:rgba(16,36,63,.14);
  --line-dark:rgba(255,255,255,.16);
  --radius:18px;
  --header-h:88px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.05;letter-spacing:-0.005em}
.mono{font-family:'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;
  color:var(--gold);font-weight:500;
}

/* photo frame */
.ph{
  border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(135deg, var(--navy-soft), var(--navy-deep));
}
.ph img{width:100%;height:100%;object-fit:cover}

/* visible to screen readers only — used to disambiguate repeated link text */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* skip link — keyboard users bypass the nav */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--white);
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:.92rem;
}
.skip-link:focus{left:0}

/* ───── header ───── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,243,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:15px;flex-shrink:0;color:var(--navy)}
/* the seal. width/height attributes on the <img> hold its aspect ratio, so
   the header never reflows while the logo loads */
.brand-seal{height:56px;width:auto;flex-shrink:0}
.brand-name{display:flex;flex-direction:column;justify-content:center;padding-left:15px;border-left:1px solid rgba(196,154,44,.55)}
.brand-line1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:1.34rem;text-transform:uppercase;letter-spacing:.1em;line-height:1;color:var(--navy);white-space:nowrap}
.brand-line2{margin-top:2px;font-family:'Spline Sans Mono',ui-monospace,monospace;font-weight:400;font-size:.57rem;text-transform:uppercase;letter-spacing:.2em;line-height:1;color:var(--gold);white-space:nowrap}

.nav-links{display:flex;gap:26px;font-size:.92rem;font-weight:500;flex-shrink:0;margin-left:auto;margin-right:26px}
.nav-links a{position:relative;padding:4px 0;color:var(--navy);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s ease}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--gold)}

.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-cta{font-size:.92rem;font-weight:500;color:var(--navy);padding:8px 18px;border:1px solid rgba(196,154,44,.75);border-radius:999px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.nav-cta:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}

/* ───── mobile navigation ───── */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;
  border:1px solid rgba(196,154,44,.6);border-radius:12px;
  color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s;
}
.nav-toggle:hover{background:rgba(196,154,44,.12)}
.nav-toggle span{position:relative;display:block;width:19px;height:1.8px;background:currentColor;border-radius:2px;transition:transform .28s ease,background .12s ease}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .28s ease,top .18s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  box-shadow:0 22px 44px rgba(16,36,63,.14);
  padding:10px 0 22px;
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 28px;font-size:1rem;font-weight:500;color:var(--navy);
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-of-type{border-bottom:none}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{background:rgba(196,154,44,.09);color:var(--gold)}
.mobile-nav a::after{content:"→";color:var(--gold);opacity:.55;font-size:.9rem}
.mobile-nav .mn-group{
  padding:20px 28px 8px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);
}
.mobile-nav .mn-cta{margin:18px 28px 0;justify-content:center;background:var(--gold-bright);color:var(--navy-deep);border-radius:999px;font-weight:600;border:none}
.mobile-nav .mn-cta:hover{background:var(--gold);color:var(--navy-deep)}
.mobile-nav .mn-cta::after{content:none}

/* ───── buttons ───── */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-weight:600;font-size:.95rem;border:none;cursor:pointer;white-space:nowrap;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
/* a single pass of light on hover — the sheen sits above the fill but below
   the label, and never animates on its own */
@media (prefers-reduced-motion: no-preference){
  .btn::after{
    content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transition:left .7s cubic-bezier(.22,.61,.36,1);
  }
  .btn:hover::after{left:130%}
}
.btn > *{position:relative;z-index:1}
.btn svg{flex-shrink:0;transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}
.btn.navy{background:var(--navy);color:var(--white)}
.btn.navy:hover{background:var(--navy-soft);transform:translateY(-2px)}
.btn.gold{background:var(--gold-bright);color:var(--navy-deep)}
.btn.gold:hover{background:var(--gold);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--line-dark)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.outline-d{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.outline-d:hover{background:rgba(16,36,63,.05)}
.btn.outline-l{background:transparent;color:var(--gold-bright);border:1px solid rgba(224,184,72,.6)}
.btn.outline-l:hover{background:var(--gold-bright);color:var(--navy-deep)}
.btn.outline-gold{
  background:transparent;color:var(--gold-bright);border:1px solid rgba(224,184,72,.6);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;padding:16px 32px;
}
.btn.outline-gold:hover{background:var(--gold-bright);color:var(--navy-deep);border-color:var(--gold-bright)}
.btn-lg{padding:19px 44px;font-size:1.05rem}

/* ───── footer — one band ─────
   Seal-with-ribbon on the left, three clinics with address and phone on
   the right, one legal line beneath. Everything that duplicated the main
   nav is gone. Privacy & Terms stays because it lives nowhere else.

   The 361 KB background photograph is gone too: it was the heaviest
   single asset on the site, and a full-bleed image behind a footer this
   small worked against the point of shrinking it. */
.site-foot{
  position:relative;background:var(--navy-deep);
  color:rgba(255,255,255,.72);font-size:.92rem;
}
.site-foot a:hover{color:var(--gold-bright)}

.foot-band{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center;padding:46px 28px 42px}
.foot-mark{width:168px;height:auto;flex-shrink:0}

.foot-clinics{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.foot-clinic h5{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;font-weight:600;color:var(--white);margin-bottom:7px}
.foot-clinic .fc-addr{display:block;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.56)}
.foot-clinic a.fc-addr:hover{color:var(--gold-bright)}
.foot-clinic .fc-tel{display:inline-block;margin-top:7px;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.96rem;color:var(--gold-bright)}

.legal{
  background:var(--navy-deep);border-top:1px solid var(--line-dark);
  padding:18px 0;font-size:.8rem;color:rgba(255,255,255,.45);
}
.legal-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.legal a{color:rgba(255,255,255,.58)}

/* ───── reveal on scroll ───── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* if JS never runs, content must still be visible */
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
}

/* Scroll-driven upgrade. Where the browser supports it, the reveal is tied
   to scroll position and runs on the compositor instead of being fired once
   by JavaScript. fpfr.js still adds .in underneath — harmless here, and it
   stays the fallback for browsers without scroll timelines (Firefox today). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:1;transform:none;transition:none;
      animation:fpfr-rise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 30%;
    }
  }
}
@keyframes fpfr-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ───── cross-document view transitions ─────
   Seven separate HTML files behave like one app: the page cross-fades on
   navigation and the header and footer stay anchored instead of blinking.
   Purely additive — browsers without support navigate exactly as before. */
@view-transition{navigation:auto}
header{view-transition-name:site-header}
.site-foot{view-transition-name:site-footer}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* ───── responsive ───── */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
}
@media(max-width:900px){
  /* Mark on top, the three clinics in a row beneath it. The addresses are
     the part that shrinks — they also appear full-size in the locations
     strip up the page, so the footer copy is a reminder rather than the
     only place to read them. The phone numbers deliberately do NOT shrink
     to match: on a phone that is the thing people tap to call, and it has
     to stay a real tap target. */
  .foot-band{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center;padding:38px 20px 34px}
  .foot-mark{width:152px}
  .foot-clinics{grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
  .foot-clinic h5{font-size:1rem;margin-bottom:5px}
  .foot-clinic .fc-addr{font-size:.68rem;line-height:1.35}
  .foot-clinic .fc-tel{font-size:.82rem;margin-top:6px}
}
@media(max-width:420px){
  /* At 320px three columns leave about 90px each, and "(808) 676-7700" in
     mono needs ~102px at the size above — so it was breaking across two
     lines mid-number. It is sized to fit on one line here and told never
     to wrap. The vertical padding keeps the tap area bigger than the type,
     since this is still a phone number someone is trying to hit. */
  .foot-band{padding:34px 16px 30px}
  .foot-clinics{gap:9px}
  .foot-clinic h5{font-size:.9rem}
  .foot-clinic .fc-addr{font-size:.62rem;line-height:1.3}
  .foot-clinic .fc-tel{font-size:.63rem;white-space:nowrap;padding:4px 0;margin-top:3px}
}
@media(max-width:600px){
  :root{--header-h:68px}
  .brand{gap:9px}
  .brand-seal{height:44px}
  /* The name stays on phones — a seal on its own doesn't tell a first-time
     visitor whose site they are on. Both lines fit: the lockup is a column,
     so the second line costs no width unless it is wider than the first,
     and measured at 375px there is well over 100px to spare. It is set
     slightly LARGER here than on desktop, where 9px is already borderline. */
  .brand-name{display:flex;padding-left:9px}
  .brand-line1{font-size:1.02rem;letter-spacing:.06em}
  .brand-line2{font-size:.62rem;letter-spacing:.13em}
  .nav-actions{gap:8px}
  .nav-actions .nav-cta{padding:7px 14px;font-size:.82rem}
  .legal-inner{justify-content:center;text-align:center}
}
@media(max-width:420px){
  .nav-actions .nav-cta{display:none}
  .brand-line1{font-size:.96rem;letter-spacing:.04em}
}