/* ==========================================================================
   F & FIT CLUB — stylesheet
   A quiet, established family studio — not a sales funnel. Heritage palette
   (deep bottle green, warm ivory, a little brass) · serif display type ·
   no badges, no urgency, no "book now" noise.
   ========================================================================== */

/* ---- Fonts: loaded by a <link> in each page's <head> (parallel, not a blocking @import) */

/* ---- Tokens --------------------------------------------------------------*/
:root{
  --ink:#221D16;
  --ink-soft:#5C5346;
  --ink-faint:#6E6554;
  --paper:#F7F1E4;
  --paper-deep:#EDE3CC;
  --surface:#FFFDF8;
  --line:rgba(34,29,22,.15);
  --line-soft:rgba(34,29,22,.08);
  --white:#FFFFFF;

  --green-900:#122A1B;
  --green-700:#1D4229;
  --green-600:#254F32;
  --green-100:#E4E9DB;
  --green-050:#F0F2E9;

  --gold-700:#7C5F27;
  --gold-600:#9C7935;
  --gold-100:#EFE2BC;

  /* Fixed brand ivory — used for text/accents on surfaces that stay dark in
     BOTH themes (.on-dark, footer). Unlike --paper, this never inverts. */
  --cream-fixed:#F7F1E4;
  --btn-primary-hover:var(--green-900);

  --shadow-sm:0 1px 2px rgba(24,20,14,.06);
  --shadow-md:0 14px 34px -20px rgba(24,20,14,.35);
  --shadow-lg:0 30px 70px -30px rgba(24,20,14,.4);

  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-pill:999px;

  --font-display:'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container:1180px;
  --header-h:84px;

  --ease:cubic-bezier(.22,.7,.24,1);
}

/* ---- Dark theme ------------------------------------------------------------
   Auto (prefers-color-scheme) unless the visitor has picked an explicit
   theme, in which case data-theme on <html> (set by js/main.js, persisted
   in localStorage) wins in either direction. --green-900/--gold-600/
   --gold-100/--cream-fixed/--white are deliberately absent below — they're
   fixed brand colours that stay identical in both themes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F1EAD9;
    --ink-soft:#C9C0AC;
    --ink-faint:#93896F;
    --paper:#12160F;
    --paper-deep:#1A2015;
    --surface:#1E2417;
    --line:rgba(241,234,217,.14);
    --line-soft:rgba(241,234,217,.08);
    --green-050:#161C11;
    --gold-700:#D9BD7E;
    --btn-primary-hover:#E4D9BC;
  }
}
:root[data-theme="dark"]{
  --ink:#F1EAD9;
  --ink-soft:#C9C0AC;
  --ink-faint:#93896F;
  --paper:#12160F;
  --paper-deep:#1A2015;
  --surface:#1E2417;
  --line:rgba(241,234,217,.14);
  --line-soft:rgba(241,234,217,.08);
  --green-050:#161C11;
  --gold-700:#D9BD7E;
  --btn-primary-hover:#E4D9BC;
}

/* ---- Reset ---------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;line-height:1.14;letter-spacing:-.01em;text-wrap:balance}

/* ---- Typography scale -----------------------------------------------------*/
h1,.h1{font-size:clamp(2.3rem,1.7rem + 2.8vw,4rem);font-weight:560}
h2,.h2{font-size:clamp(1.8rem,1.5rem + 1.6vw,2.7rem)}
h3,.h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);font-weight:600}
p{color:var(--ink-soft)}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:var(--ink-soft);font-weight:400}
em, .accent-italic{font-style:italic;font-family:var(--font-display)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold-600)}
.on-dark .eyebrow{color:var(--gold-100)}
.on-dark .eyebrow::before{background:var(--gold-100)}

/* ---- Layout helpers --------------------------------------------------------*/
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:28px}
@media (min-width:640px){.container{padding-inline:40px}}
.section{padding-block:clamp(60px,8vw,108px)}
.section-head{max-width:620px;margin-bottom:clamp(32px,5vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:.6rem}
.section-head .lede{margin-top:14px}
.stack-sm > * + *{margin-top:.7em}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rule{width:44px;height:1px;background:var(--gold-600);border:0;margin:0}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:var(--radius-sm);transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

/* ---- Buttons ---------------------------------------------------------------*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 28px;border-radius:var(--radius-pill);
  font-weight:600;font-size:.94rem;white-space:nowrap;font-family:var(--font-body);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s;
  border:1px solid transparent;
}
.btn-primary,.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover,.btn-dark:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover)}
.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.on-dark .btn-outline{border-color:rgba(247,241,228,.35);color:var(--cream-fixed)}
.on-dark .btn-outline:hover{background:var(--cream-fixed);color:var(--green-900);border-color:var(--cream-fixed)}
.btn-text{
  padding:2px 0;border-radius:0;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--gold-600);
}
.btn-text:hover{color:var(--gold-700)}
.btn-sm{padding:10px 20px;font-size:.86rem}
.btn-block{width:100%}

/* ---- Header ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo lockup - same proportions as the share card: the mark is as tall as the wordmark,
   the address line sits centred beneath. The mark is green on light surfaces and flips
   to cream on dark ones (dark theme, footer), exactly like the card. */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);--bm-bg:var(--green-700);--bm-fg:var(--cream-fixed)}
.brand-row{display:flex;align-items:center;gap:.34em;font-family:var(--font-display);font-weight:560;font-size:1.5rem;letter-spacing:-.01em;line-height:1;white-space:nowrap;font-variation-settings:"opsz" 24}
.brand-mark{width:1.06em;height:1.06em;flex:none}
.brand-mark .bm-bg{fill:var(--bm-bg)}
.brand-mark .bm-fg{fill:var(--bm-fg)}
.brand-mark .bm-fg-line{stroke:var(--bm-fg)}
.brand-sub{font-family:var(--font-body);font-weight:600;font-size:.6rem;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;line-height:1}
.site-footer .brand,.on-dark .brand{--bm-bg:var(--cream-fixed);--bm-fg:var(--green-700)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand{--bm-bg:var(--cream-fixed);--bm-fg:var(--green-700)}}
:root[data-theme="dark"] .brand{--bm-bg:var(--cream-fixed);--bm-fg:var(--green-700)}
/* opsz is pinned: Fraunces swaps to a plain ampersand below optical size ~24, so the compact
   (20px) lockup would otherwise show a different "&" than desktop and the share card. */
/* compact lockup: phones, and the mid-width range where the full menu sits beside it */
@media (max-width:1120px){.brand-row{font-size:1.28rem}.brand-sub{font-size:.56rem;letter-spacing:.16em;margin-right:-.16em}}

.nav-primary{display:flex;align-items:center;gap:4px}
.nav-primary a{
  padding:10px 18px;border-radius:var(--radius-pill);font-weight:500;font-size:.94rem;color:var(--ink-soft);
  transition:background-color .2s,color .2s;
}
.nav-primary a:hover{background:var(--paper-deep);color:var(--ink)}
.nav-primary a[aria-current="page"]{color:var(--ink);font-weight:600}

/* Language switch — lives inside nav-primary so one element serves both the
   inline desktop nav row and the off-canvas mobile panel; see the two
   responsive tweaks below (desktop divider vs. mobile stacked row). */
.lang-switch{display:flex;align-items:center;margin-left:12px;padding-left:16px;border-left:1px solid var(--line);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.lang-switch a,.lang-switch span{padding:4px 3px;color:var(--ink-faint)}
.lang-switch a{transition:color .2s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch span[aria-current="true"]{color:var(--ink)}
.lang-switch a:not(:last-child)::after,.lang-switch span:not(:last-child)::after{content:'·';margin-left:6px;color:var(--line)}

.header-actions{display:flex;align-items:center;gap:14px}
.phone-chip{
  display:flex;align-items:center;gap:8px;font-weight:500;font-size:.88rem;color:var(--ink-soft);
}
.phone-chip:hover{color:var(--ink)}

.theme-toggle{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;color:var(--ink-soft);
  transition:background-color .2s,color .2s;
}
.theme-toggle:hover{background:var(--paper-deep);color:var(--ink)}
.theme-toggle svg{display:block}
.theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:'';display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;position:relative;transition:transform .25s var(--ease),opacity .2s;
}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:920px){
  .nav-primary{
    position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:2px;padding:18px;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
    overflow-y:auto;
  }
  .nav-primary.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;transition:opacity .25s var(--ease), transform .25s var(--ease)}
  .nav-primary a{padding:18px 14px;font-size:1.2rem;border-bottom:1px solid var(--line-soft);border-radius:0}
  .lang-switch{
    margin:14px 0 0;padding:18px 14px 4px;border-left:0;border-top:1px solid var(--line-soft);
  }
  .lang-switch a,.lang-switch span{padding:8px 10px;font-size:1rem}
  .header-actions .phone-chip{display:none}
  .nav-toggle{display:flex}
}

/* ---- Hero ------------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(48px,7vw,84px)}
.hero .container{
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,72px);align-items:center;
}
@media (max-width:900px){.hero .container{grid-template-columns:1fr}}
.hero-copy h1{margin-top:16px}
.hero-copy .lede{margin-top:22px;max-width:42ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:34px}

.hero-visual{position:relative}
.hero-photo-card{
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.hero-photo-card picture{display:block;width:100%;height:100%}
.hero-photo-card img{width:100%;height:100%;object-fit:cover}
.hero-caption{margin-top:14px;font-size:.82rem;color:var(--ink-faint);font-style:italic;font-family:var(--font-display)}

/* ---- Sections on dark / sand ---------------------------------------------*/
.on-dark{background:var(--green-900);color:var(--cream-fixed)}
.on-dark p{color:rgba(247,241,228,.72)}
.on-dark h2,.on-dark h3{color:var(--cream-fixed)}
.on-sand{background:var(--paper-deep)}
.on-green{background:var(--green-050)}

/* ---- Editorial service list (used site-wide) ------------------------------*/
.service-row{
  display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:start;
  padding-block:36px;border-top:1px solid var(--line);
}
.service-row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:640px){.service-row{grid-template-columns:1fr;gap:10px}}
.service-num{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--gold-600)}
.service-row h2{margin-bottom:10px}
.service-row p{max-width:62ch}
.service-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tag{font-size:.78rem;font-weight:500;color:var(--ink-faint)}
.tag:not(:last-child)::after{content:'·';margin-left:10px;color:var(--line)}

/* ---- Quiet feature list (why us / what to expect) -------------------------*/
.quiet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 48px}
@media (max-width:700px){.quiet-grid{grid-template-columns:1fr}}
.quiet-item hr.rule{margin-bottom:18px}
.quiet-item h3{margin-bottom:10px}
.quiet-item p{font-size:.98rem}

/* ---- Pull-quote ------------------------------------------------------------*/
.pull-quote{max-width:760px;margin-inline:auto;text-align:center}
.pull-quote blockquote{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,1.2rem + 1vw,2rem);line-height:1.4;color:var(--ink);
}
.pull-quote footer{margin-top:22px;font-size:.85rem;color:var(--ink-faint);letter-spacing:.02em}

/* ---- Gallery ---------------------------------------------------------------*/
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(140px,18vw,220px);gap:6px}
.gallery figure{position:relative;overflow:hidden;background:var(--paper-deep)}
.gallery picture{display:block;width:100%;height:100%}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery a:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:.78rem;font-weight:500;color:var(--white);
  background:linear-gradient(0deg, rgba(18,15,10,.7), transparent);
  font-family:var(--font-display);font-style:italic;
}
.gallery .g1{grid-column:span 3;grid-row:span 2}
.gallery .g2{grid-column:span 3}
.gallery .g3{grid-column:span 2}
.gallery .g4{grid-column:span 2}
.gallery .g5{grid-column:span 2}
.gallery .g6{grid-column:span 3}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure{grid-column:span 1 !important;grid-row:span 1 !important;aspect-ratio:4/3}
}

/* ---- FAQ / accordion ---------------------------------------------------- */
.accordion-item{border-top:1px solid var(--line)}
.accordion-item:last-child{border-bottom:1px solid var(--line)}
.accordion-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;font-family:var(--font-display);font-weight:500;font-size:1.08rem;
}
.accordion-trigger .plus{flex:none;width:20px;height:20px;position:relative}
.accordion-trigger .plus::before,.accordion-trigger .plus::after{content:'';position:absolute;background:var(--gold-600);transition:transform .3s var(--ease)}
.accordion-trigger .plus::before{width:14px;height:1px;top:9.5px;left:3px}
.accordion-trigger .plus::after{width:1px;height:14px;top:3px;left:9.5px}
.accordion-item[open] .accordion-trigger .plus::after{transform:rotate(90deg)}
.accordion-content{padding:0 4px 26px;max-width:64ch}
.accordion-item summary{list-style:none;cursor:pointer}
.accordion-item summary::-webkit-details-marker{display:none}

/* ---- Membership / capacity note -------------------------------------------*/
.note-card{
  background:var(--surface);border:1px solid var(--line);padding:32px 34px;
  display:flex;gap:22px;align-items:flex-start;
}
.note-card svg{flex:none;margin-top:4px;color:var(--gold-600)}
.note-card p{font-size:.98rem}

/* ---- Contact -----------------------------------------------------------*/
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-list{display:flex;flex-direction:column;gap:26px;margin-top:32px}
.contact-item{display:flex;gap:18px;align-items:flex-start}
.contact-item svg{flex:none;margin-top:3px;color:var(--gold-600)}
.contact-item strong{display:block;font-size:1.02rem;font-weight:600}
.contact-item span,.contact-item a{color:var(--ink-soft);font-size:.95rem}
.contact-item a:hover{color:var(--ink)}
.map-frame{overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.map-frame iframe{width:100%;height:320px;border:0;display:block;filter:grayscale(.25) contrast(1.03)}

.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-field label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.form-field input,.form-field textarea{
  padding:13px 4px;border:none;border-bottom:1px solid var(--line);background:transparent;border-radius:0;
  transition:border-color .2s;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.78rem;color:var(--ink-faint);margin-top:16px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- CTA band ------------------------------------------------------------*/
.cta-band{
  padding-block:clamp(40px,6vw,68px);
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
}
.cta-band h2{max-width:20ch}
.cta-band p{margin-top:10px;max-width:44ch}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{background:var(--green-900);color:rgba(247,241,228,.62);padding-block:64px 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid .footer-title{line-height:1.4;letter-spacing:.1em;color:var(--cream-fixed);font-family:var(--font-body);font-weight:600;font-size:.78rem;text-transform:uppercase;margin-bottom:18px;opacity:.7}
.footer-grid ul{display:flex;flex-direction:column;gap:12px;font-size:.92rem}
.footer-grid a:hover{color:var(--cream-fixed)}
.footer-brand .brand{color:var(--cream-fixed)}
.footer-brand .brand-sub{color:inherit;opacity:.8}
.footer-brand p{margin-top:16px;max-width:36ch;font-size:.92rem}
/* the footer is dark in BOTH themes: paragraphs must not pick up the page's --ink-soft */
.site-footer p{color:inherit}
.social-row{display:flex;gap:10px;margin-top:22px}
.social-row a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(247,241,228,.22);display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.social-row a:hover{border-color:var(--gold-100);color:var(--gold-100)}
.footer-bottom{
  margin-top:56px;padding-top:24px;border-top:1px solid rgba(247,241,228,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;
}

/* ---- Entrance animation (CSS-only, no JS/IO dependency) -------------------*/
@media (prefers-reduced-motion: no-preference){
  .hero-copy,.hero-visual{animation:fade-up .9s var(--ease) both}
  .hero-visual{animation-delay:.12s}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ---- Breadcrumb ------------------------------------------------------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.83rem;color:var(--ink-faint);padding-top:26px}
.breadcrumb a:hover{color:var(--ink)}

/* ---- Page hero (inner pages) ---------------------------------------------*/
.page-hero{padding-block:clamp(48px,7vw,88px) clamp(32px,5vw,56px)}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero .lede{margin-top:20px;max-width:60ch}