/* =========================================================
   Baillargeon Health & Fitness — shared styles
   Design tokens carried over from the existing site.
   ========================================================= */
:root{
  --bg:#16140f;
  --bg-alt:#1d1a13;
  --ink:#f3efe4;
  --muted:#9c9482;
  --muted-dim:#75705f;
  --line: rgba(243,239,228,0.14);
  --accent:#b08d57;
  --accent-lt:#c4a06a;
  --accent-soft: rgba(176,141,87,0.35);
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* A long unbreakable token — an email address, a URL — will otherwise blow
   out its grid track and push the whole page into horizontal scroll. */
body{overflow-wrap:break-word;}
.cols2 > *, .cards > *, .form-grid > *, .row > *{min-width:0;}

.eyebrow{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.eyebrow em{color:var(--accent); font-style:normal;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:400; letter-spacing:-0.01em;}
em.gold{font-style:italic; color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  .reveal{opacity:1 !important; transform:none !important;}
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:26px 0; transition:padding .4s ease;
  border-bottom:1px solid transparent;
}
/* The header background lives on a pseudo-element on purpose.
   A backdrop-filter on the header itself would turn it into a containing
   block for position:fixed descendants — which would trap the mobile nav
   panel inside the 60px header bar instead of the viewport. */
header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(22,20,15,0.92), rgba(22,20,15,0));
  transition:background .4s ease;
}
header.scrolled{padding:16px 0; border-bottom-color:var(--line);}
header.scrolled::before{
  background:rgba(22,20,15,0.96); backdrop-filter:blur(10px);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
}
.brand{font-family:'Fraunces', serif; font-size:16px; letter-spacing:0.06em; text-transform:uppercase;}
.brand span{color:var(--accent);}
nav > ul{display:flex; align-items:center; gap:40px; list-style:none;}
nav a{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); transition:color .25s ease;
}
nav a:hover, nav a.active{color:var(--ink);}
.book-btn{border:1px solid var(--accent-soft); padding:10px 20px; color:var(--ink) !important;
  transition:all .25s ease;}
.book-btn:hover{background:var(--accent); border-color:var(--accent); color:var(--bg) !important;}

/* dropdown */
.has-drop{position:relative;}
.drop-toggle{display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none; border:0;
  font-family:inherit; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); transition:color .25s ease;}
.drop-toggle:hover, .has-drop:hover .drop-toggle{color:var(--ink);}
.drop-toggle .chev{font-size:8px; transform:translateY(1px); transition:transform .25s ease;}
.has-drop:hover .drop-toggle .chev{transform:translateY(1px) rotate(180deg);}
.drop{
  position:absolute; top:100%; left:-18px; min-width:210px;
  background:var(--bg-alt); border:1px solid var(--line);
  padding:8px 0; list-style:none; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:all .22s ease; margin-top:14px;
}
.has-drop:hover .drop, .has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0);}
.drop::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.drop li a{display:block; padding:11px 20px; letter-spacing:0.12em;}
.drop li a:hover{color:var(--ink); background:rgba(243,239,228,0.04);}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:1px; background:var(--ink); transition:transform .3s ease, opacity .3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; align-items:center; position:relative; padding-top:120px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 32px; width:100%;}
.hero h1{font-size:clamp(38px, 5vw, 64px); line-height:1.07; margin:20px 0 28px; font-weight:400;}
.hero p.sub{color:var(--muted); font-size:16px; max-width:48ch; margin-bottom:36px;}
.btn-row{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--accent); color:var(--bg); padding:15px 30px; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
  transition:background .25s ease, transform .25s ease; display:inline-block;
}
.btn-primary:hover{background:var(--accent-lt); transform:translateY(-2px);}
.btn-ghost{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.btn-ghost:hover{color:var(--ink); border-color:var(--accent);}

.hero-media{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; height:560px;}
.hero-media .tall{grid-row:span 2; height:100%;}
.hero-media .short{height:272px;}
.hero-media figure{overflow:hidden; position:relative; height:100%;}
.hero-media img{transition:transform 8s ease;}
.hero-media figure:hover img{transform:scale(1.06);}
.frame-line{position:absolute; inset:10px; border:1px solid rgba(243,239,228,0.25); pointer-events:none;}

/* ---------- page header (interior pages) ---------- */
.page-head{padding:190px 0 90px; border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(34px,4.6vw,58px); line-height:1.08; margin:18px 0 24px; max-width:20ch;}
.page-head p{color:var(--muted); font-size:16px; max-width:56ch;}

/* ---------- bands ---------- */
.addr-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0;}
.addr-inner{max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

section{padding:120px 0;}
.alt{background:var(--bg-alt);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:72px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(30px, 4vw, 46px); font-weight:400; margin-top:14px; max-width:22ch;}
.section-head p{color:var(--muted); max-width:38ch; font-size:14px;}

/* ---------- numbered rows ---------- */
.rows{border-top:1px solid var(--line);}
.row{
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:70px 1.15fr 1.75fr; align-items:start; gap:28px;
  padding:38px 0; transition:padding-left .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .row:hover{padding-left:14px;}
}
.row .num{color:var(--accent); font-family:'Fraunces', serif; font-size:15px; padding-top:6px;}
.row h3{font-size:24px; font-weight:400; margin-bottom:6px;}
.row .desc{color:var(--muted); font-size:14.5px;}
.row .tools{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-dim);}

/* ---------- pull quote band ---------- */
.quoteband{background:var(--bg-alt); padding:110px 0;}
.quoteband blockquote{
  font-family:'Fraunces', serif; font-size:clamp(26px,3.6vw,44px); line-height:1.22;
  font-weight:300; max-width:20ch; margin:0 auto; text-align:center;
}
.quoteband .attrib{text-align:center; margin-top:32px;}

/* ---------- fit columns ---------- */
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.fitbox{border:1px solid var(--line); padding:38px 34px; background:rgba(243,239,228,0.02);}
.fitbox.yes{border-top:2px solid var(--accent);}
.fitbox.no{border-top:2px solid var(--muted-dim);}
.fitbox h3{font-size:20px; margin-bottom:22px;}
.fitbox ul{list-style:none;}
.fitbox li{padding:13px 0 13px 24px; position:relative; font-size:15px; color:var(--muted); border-bottom:1px solid var(--line);}
.fitbox li:last-child{border-bottom:0;}
.fitbox li::before{content:""; position:absolute; left:0; top:22px; width:7px; height:7px; border-radius:50%; background:var(--accent);}
.fitbox.no li::before{background:var(--muted-dim);}

/* ---------- timeline ---------- */
.timeline{border-left:1px solid var(--line); max-width:760px;}
.step{position:relative; padding:0 0 44px 40px;}
.step:last-child{padding-bottom:0;}
.step::before{content:""; position:absolute; left:-5px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--accent);}
.step .stepnum{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:6px;}
.step h3{font-size:22px; margin-bottom:8px;}
.step p{color:var(--muted); font-size:15px;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:center;}
.about-media{position:relative; height:620px; overflow:hidden;}
.about-media img{filter:grayscale(15%);}
.about-copy h2{font-size:clamp(28px,3.6vw,42px); margin:18px 0 26px; font-weight:400; max-width:20ch;}
.about-copy p{color:var(--muted); font-size:15px; margin-bottom:18px; max-width:58ch;}
.about-copy p strong{color:var(--ink); font-weight:500;}
.about-sign{margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
  font-family:'Fraunces', serif; font-style:italic; font-size:19px; color:var(--accent); max-width:44ch;}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.card{border:1px solid var(--line); padding:40px 36px; background:rgba(243,239,228,0.02);}
.card .tag{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.card h3{font-size:26px; margin-bottom:12px;}
.card > p{color:var(--muted); font-size:15px;}
.card ul{list-style:none; margin:22px 0 0;}
.card li{padding:9px 0 9px 22px; position:relative; font-size:14px; color:var(--muted); border-bottom:1px solid var(--line);}
.card li:last-child{border-bottom:0;}
.card li::before{content:""; position:absolute; left:0; top:18px; width:5px; height:5px; border-radius:50%; background:var(--accent);}
.card .btn-ghost{display:inline-block; margin-top:26px;}

/* ---------- cta ---------- */
.cta{text-align:center; padding:110px 0;}
.cta h2{font-size:clamp(28px,4vw,46px); font-weight:400; max-width:18ch; margin:16px auto 20px;}
.cta p.sub{color:var(--muted); max-width:52ch; margin:0 auto 34px; font-size:15px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px;}
footer h4{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted-dim);
  margin-bottom:18px; font-weight:500; font-family:'Inter',sans-serif;}
footer .brand-block .brand{font-size:20px; margin-bottom:14px; display:block;}
footer .brand-block p{color:var(--muted); font-size:13.5px; max-width:38ch;}
footer address, footer p, footer a{font-style:normal; font-size:14.5px; color:var(--muted);}
footer ul{list-style:none;}
footer ul li{margin-bottom:9px;}
footer a:hover{color:var(--accent);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:28px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim); flex-wrap:wrap; gap:10px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  section{padding:80px 0;}
  .page-head{padding:150px 0 60px;}
  .hero{padding-top:130px;}
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  /* the desktop layout leaves row 2 / col 2 deliberately empty; on a phone
     that just reads as a hole, so collapse to one row of equal images */
  .hero-media{height:300px; grid-template-rows:1fr; gap:12px;}
  .hero-media .tall{grid-row:auto;}
  .hero-media .short{height:100%;}
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .about-media{height:400px;}
  .cols2, .cards{grid-template-columns:1fr;}
  /* num + heading share row 1; the copy wrapper spans column 2 underneath.
     Targeting > div matters — .desc is inside the wrapper, not a grid item. */
  .row{grid-template-columns:42px 1fr; gap:6px 16px; padding:30px 0;}
  .row .num{padding-top:4px;}
  .row h3{font-size:21px; line-height:1.25;}
  .row > div{grid-column:2;}
  .row .desc{font-size:15px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .quoteband{padding:80px 0;}

  nav{position:fixed; inset:0 0 0 auto; width:min(80vw,340px); z-index:2;
    background:var(--bg-alt); border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .34s ease;
    padding:calc(96px + env(safe-area-inset-top)) 30px calc(40px + env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;}
  nav.open{transform:translateX(0);}
  /* scrim dims the page behind the panel so the half-covered header
     reads as intentional rather than clipped. Injected by site.js. */
  .nav-scrim{position:fixed; inset:0; z-index:1; background:rgba(10,9,6,0.62);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
  .nav-scrim.show{opacity:1; visibility:visible;}
  nav > ul{flex-direction:column; align-items:stretch; gap:0;}
  nav > ul > li{border-bottom:1px solid var(--line);}
  nav > ul > li > a, .drop-toggle{display:block; width:100%; padding:18px 0; text-align:left;}
  .drop{position:static; opacity:1; visibility:visible; transform:none; margin:0 0 10px;
    background:transparent; border:0; border-left:1px solid var(--line); padding:0 0 0 16px; min-width:0;}
  .drop li a{padding:11px 0;}
  .has-drop:hover .drop-toggle .chev{transform:none;}
  .drop-toggle .chev{display:none;}
  .book-btn{display:inline-block; margin-top:22px; text-align:center;}
  .nav-toggle{display:flex; position:relative; z-index:90;}
  .footer-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .wrap, .nav-inner, .hero-grid, .addr-inner{padding-left:22px; padding-right:22px;}
  .cols2{gap:20px;}
}

/* =========================================================
   FORM
   ========================================================= */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.field{display:flex; flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:10px;
}
.field label .req{color:var(--accent);}
.field .hint{font-size:13px; color:var(--muted-dim); margin-top:8px; text-transform:none; letter-spacing:0;}
.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select{
  background:rgba(243,239,228,0.03);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  padding:14px 16px;
  border-radius:0;
  transition:border-color .22s ease, background .22s ease;
  width:100%;
}
.field textarea{min-height:118px; resize:vertical; line-height:1.55;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); background:rgba(243,239,228,0.05);
}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-dim);}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field select option{background:var(--bg-alt); color:var(--ink);}

.radios{display:flex; gap:12px; flex-wrap:wrap;}
.radios label{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--line); padding:12px 18px; margin:0;
  font-size:13px; letter-spacing:0.06em; text-transform:none; color:var(--muted);
  transition:border-color .22s ease, color .22s ease, background .22s ease;
}
.radios label:hover{border-color:var(--accent-soft); color:var(--ink);}
.radios input[type="radio"]{accent-color:var(--accent); width:15px; height:15px; margin:0; cursor:pointer;}
.radios input[type="radio"]:checked + span{color:var(--ink);}

.hp{position:absolute; left:-9999px; opacity:0;}
.form-foot{margin-top:38px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.form-foot p{font-size:13px; color:var(--muted-dim); max-width:44ch;}

@media(max-width:900px){
  .form-grid{grid-template-columns:1fr; gap:22px;}
}