/* ==========================================================
   THE SUMMIT FITNESS METHOD — summitmethodfitness.com
   Palette: ink / charcoal / warm white / deep crimson
   Type:    Anton (display) · Archivo (body & UI)
   ========================================================== */

:root{
  --ink:        #0B0B0D;
  --charcoal:   #15171B;
  --panel:      #1C1F24;
  --line:       #2A2E35;
  --paper:      #F2EDE3;
  --stone:      #A19B8E;
  --crimson:    #9E1B2F;
  --crimson-hi: #C9314B;
  --max: 1180px;
  --radius: 10px;
  --ease: cubic-bezier(.22,.7,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ---------- type ---------- */
h1,h2,h3,.display{
  font-family:'Anton', 'Archivo', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.01em;
}
h1{ font-size:clamp(2.6rem, 7vw, 5.4rem); }
h2{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing:.02em; }
.accent{ color:var(--crimson-hi); }
p.lead{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--stone); max-width:56ch; }
p + p{ margin-top:1em; }

/* eyebrow / altitude marker — the recurring signature label */
.eyebrow{
  display:flex; align-items:center; gap:.65rem;
  font-size:.72rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--stone);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--crimson);
}
.eyebrow .alt{ color:var(--crimson-hi); }

/* ---------- layout ---------- */
.wrap{ width:min(var(--max), 92vw); margin-inline:auto; }
section{ padding:clamp(4rem, 9vw, 7.5rem) 0; }
.section-head{ margin-bottom:clamp(2rem,4vw,3.2rem); max-width:760px; }
.section-head p{ margin-top:1rem; color:var(--stone); }
.grid{ display:grid; gap:1.4rem; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Archivo', sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:4px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;
  cursor:pointer;
}
.btn-primary{ background:var(--crimson); color:#fff; }
.btn-primary:hover{ background:var(--crimson-hi); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line); color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--stone); transform:translateY(-2px); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:linear-gradient(to bottom, rgba(11,11,13,.92), rgba(11,11,13,.75));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand svg{ width:30px; height:30px; }
.brand-name{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:.09em;
}
.brand-name span{ color:var(--crimson-hi); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone); transition:color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta .btn{ padding:.65rem 1.25rem; font-size:.72rem; }
.nav-login{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); display:inline-flex; align-items:center; gap:.4rem;
}
.nav-login:hover{ color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; color:var(--paper); cursor:pointer; }
@media (max-width:980px){
  .nav-links, .nav-cta .nav-login{ display:none; }
  .nav-toggle{ display:block; }
  .nav-links.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem;
    position:absolute; top:72px; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    padding:1.6rem 4vw 2rem;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92vh;
  display:flex; align-items:center;
  padding:9rem 0 10rem;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 75% -10%, rgba(158,27,47,.18), transparent 60%),
    var(--ink);
}
.hero-inner{ position:relative; z-index:2; max-width:820px; }
.hero h1{ margin:0 0 1.4rem; }
.hero .lead{ margin-bottom:2.4rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-ridges{
  position:absolute; left:0; right:0; bottom:-2px; z-index:1;
  width:100%; height:auto; pointer-events:none;
}
.hero-alt{
  position:absolute; right:4vw; top:50%; transform:translateY(-50%) rotate(90deg);
  transform-origin:center;
  font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--line);
  z-index:1; white-space:nowrap;
}
@media (max-width:700px){ .hero-alt{ display:none; } .hero{ min-height:auto; } }

/* page hero (interior pages) */
.page-hero{
  padding:10rem 0 4.5rem;
  background:
    radial-gradient(900px 400px at 80% -20%, rgba(158,27,47,.15), transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.page-hero .lead{ margin-top:1.2rem; }

/* ---------- pillars strip ---------- */
.pillars{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--charcoal); padding:2.2rem 0;
}
.pillars .wrap{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.pillar{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(1rem, 2vw, 1.35rem); letter-spacing:.05em;
  display:flex; align-items:center; gap:.9rem; color:var(--paper);
}
.pillar::before{ content:"▲"; font-size:.6em; color:var(--crimson-hi); }

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem;
  transition:transform .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-4px); border-color:#3a3f48; }
.card h3{ margin:.9rem 0 .7rem; }
.card p{ color:var(--stone); font-size:.98rem; }
.card .tick{
  width:34px; height:3px; background:var(--crimson);
}

/* ---------- photo placeholders ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.05'%3E%3Cpath d='M0 40 Q 60 8 120 40 T 240 40'/%3E%3Cpath d='M0 95 Q 60 63 120 95 T 240 95'/%3E%3Cpath d='M0 150 Q 60 118 120 150 T 240 150'/%3E%3Cpath d='M0 205 Q 60 173 120 205 T 240 205'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(145deg, #1B1E23, #121417);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
}
.ph::before{
  content:""; position:absolute; top:14px; left:14px;
  width:22px; height:22px;
  border-top:2px solid var(--crimson-hi); border-left:2px solid var(--crimson-hi);
}
.ph::after{
  content:""; position:absolute; bottom:14px; right:14px;
  width:22px; height:22px;
  border-bottom:2px solid var(--crimson-hi); border-right:2px solid var(--crimson-hi);
}
.ph-label{
  text-align:center; padding:1.5rem; color:var(--stone);
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.9;
}
.ph-label strong{ display:block; color:var(--paper); letter-spacing:.26em; }
.ph-wide{ min-height:420px; }
.ph-tall{ min-height:520px; }
.ph-sm{ min-height:220px; }

/* ---------- 7 rules / switchbacks ---------- */
.rules{ counter-reset:rule; display:grid; gap:0; max-width:860px; }
.rule{
  counter-increment:rule;
  display:grid; grid-template-columns:88px 1fr; gap:1.6rem;
  padding:2rem 0; border-bottom:1px solid var(--line);
  position:relative;
}
.rule:first-child{ border-top:1px solid var(--line); }
.rule-num{
  font-family:'Anton', sans-serif; font-size:2.4rem; color:var(--line);
  line-height:1; transition:color .3s;
}
.rule-num::before{ content:"0" counter(rule); }
.rule:hover .rule-num{ color:var(--crimson-hi); }
.rule h3{ margin-bottom:.5rem; font-size:1.2rem; }
.rule p{ color:var(--stone); font-size:.98rem; max-width:58ch; }
.rule .alt-tag{
  font-size:.66rem; letter-spacing:.3em; color:var(--stone);
  text-transform:uppercase; margin-top:.7rem; display:block; opacity:.7;
}
@media (max-width:640px){ .rule{ grid-template-columns:56px 1fr; gap:1rem; } .rule-num{ font-size:1.7rem; } }

/* ---------- programs ---------- */
.tier{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:2.4rem 2rem;
  position:relative;
}
.tier.featured{ border-color:var(--crimson); background:linear-gradient(180deg, rgba(158,27,47,.10), rgba(28,31,36,1) 45%); }
.tier .flag{
  position:absolute; top:-13px; left:2rem;
  background:var(--crimson); color:#fff;
  font-size:.64rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:3px;
}
.tier-name{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.5rem; letter-spacing:.03em; }
.tier-sub{ color:var(--stone); font-size:.9rem; margin:.5rem 0 1.4rem; }
.tier ul{ display:grid; gap:.65rem; margin-bottom:2rem; }
.tier li{
  display:flex; gap:.7rem; align-items:flex-start;
  color:var(--stone); font-size:.95rem;
}
.tier li::before{ content:"▲"; color:var(--crimson-hi); font-size:.55em; margin-top:.55em; }
.tier .btn{ margin-top:auto; justify-content:center; }

/* ---------- basecamp preview ---------- */
.basecamp{
  background:var(--charcoal);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bc-mock{
  background:var(--ink); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem; box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.bc-bar{ display:flex; gap:.45rem; padding:0 .2rem .9rem; }
.bc-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.bc-bar i:first-child{ background:var(--crimson); }
.bc-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:.8rem; }
.bc-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
}
.bc-tile b{ display:block; color:var(--paper); font-family:'Anton',sans-serif; font-size:1.15rem; letter-spacing:.04em; margin-top:.4rem; }
.bc-barchart{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:.7rem; }
.bc-barchart i{ flex:1; background:var(--line); border-radius:2px 2px 0 0; }
.bc-barchart i.hot{ background:var(--crimson-hi); }
.locked{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; margin-bottom:1.2rem;
}
.locked::before{ content:"🔒"; font-size:.8rem; }

/* ---------- journey ---------- */
.journey{ position:relative; }
.journey-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:2.5rem; }
.jstep{ position:relative; padding-top:1.4rem; }
.jstep::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--line);
}
.jstep::after{
  content:""; position:absolute; top:-4px; left:0; width:10px; height:10px;
  background:var(--crimson); transform:rotate(45deg);
}
.jstep h4{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:.05em; margin-bottom:.4rem; }
.jstep p{ font-size:.85rem; color:var(--stone); }
@media (max-width:900px){ .journey-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .journey-steps{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(800px 300px at 50% 120%, rgba(158,27,47,.28), transparent 70%),
    var(--charcoal);
  border-top:1px solid var(--line);
}
.cta-band h2{ margin-bottom:1rem; }
.cta-band p{ color:var(--stone); max-width:52ch; margin:0 auto 2.2rem; }

/* ---------- forms ---------- */
.form{
  display:grid; gap:1.2rem; max-width:720px;
}
.field label{
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--stone);
  margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:6px; color:var(--paper);
  font-family:'Archivo',sans-serif; font-size:1rem;
  padding:.9rem 1rem; transition:border-color .2s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--crimson-hi);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.85rem; color:var(--stone); }
.notice{
  background:rgba(158,27,47,.12); border:1px solid var(--crimson);
  border-radius:8px; padding:1.1rem 1.3rem; font-size:.95rem; display:none;
}
.notice.show{ display:block; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; color:var(--paper);
  font-family:'Archivo',sans-serif; font-weight:600; font-size:1.05rem;
  text-align:left; padding:1.4rem 3rem 1.4rem 0; cursor:pointer;
  position:relative;
}
.faq-q::after{
  content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--crimson-hi);
  transition:transform .3s var(--ease);
}
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ color:var(--stone); padding:0 0 1.5rem; max-width:64ch; }

/* ---------- results ---------- */
.result-card .ph{ min-height:300px; }
.result-meta{ padding:1.2rem 0 0; }
.result-meta b{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.result-meta span{ display:block; color:var(--stone); font-size:.85rem; margin-top:.3rem; }

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line); background:var(--charcoal);
  padding:3.5rem 0 2rem; margin-top:0;
}
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; }
.foot-grid h5{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
  margin-bottom:1rem; font-weight:600;
}
.foot-grid a{ display:block; color:var(--stone); font-size:.9rem; padding:.28rem 0; transition:color .2s; }
.foot-grid a:hover{ color:var(--paper); }
.foot-tag{ color:var(--stone); font-size:.9rem; max-width:34ch; margin-top:1rem; }
.foot-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:3rem; padding-top:1.5rem;
  font-size:.78rem; color:var(--stone);
}
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- pricing ---------- */
.founding-line{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crimson-hi); border:1px solid var(--crimson);
  border-radius:999px; padding:.5rem 1.1rem; margin-bottom:1.8rem;
}
.founding-line::before{ content:"▲"; font-size:.6em; }
.price{ margin:.4rem 0 1.6rem; }
.price .now{
  font-family:'Anton',sans-serif; font-size:2.4rem; line-height:1; color:var(--paper);
}
.price .now small{
  font-family:'Archivo',sans-serif; font-size:.85rem; font-weight:600; color:var(--stone);
  letter-spacing:.08em;
}
.price .later{
  display:block; margin-top:.45rem; font-size:.78rem; color:var(--stone);
  letter-spacing:.1em; text-transform:uppercase;
}
.price .later s{ color:var(--stone); }
.price .pif{
  display:block; margin-top:.35rem; font-size:.95rem; color:var(--paper); font-weight:600;
}
.price .pif em{ font-style:normal; color:var(--crimson-hi); }
.opts{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem;
}
.opts span{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .85rem;
}
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.checks label{
  display:flex; align-items:center; gap:.6rem;
  font-size:.95rem; color:var(--paper); text-transform:none; letter-spacing:0; font-weight:400;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:.7rem .9rem; cursor:pointer; margin:0;
}
.checks input{ width:auto; accent-color:var(--crimson); }
@media (max-width:640px){ .checks{ grid-template-columns:1fr; } }
.price-note{
  background:var(--panel); border:1px solid var(--crimson);
  border-radius:var(--radius); padding:1.6rem 1.8rem; margin-bottom:2.2rem;
}
.price-note p{ color:var(--stone); font-size:.95rem; }
.price-note p strong{ color:var(--paper); }
.price-note p + p{ margin-top:.8rem; }

/* ---------- decorative art panels (photo slots pre-photography) ---------- */
.art-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #1B1E23, #121417);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  min-height:320px; padding:2.5rem;
}
.art-panel svg{ width:100%; height:auto; }
.art-tall{ min-height:520px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--crimson-hi); outline-offset:2px;
}