/* True North Resilience — Sisters Oct 2026 landing pages
   8pt system: all spacing is a multiple of 8 (4 = half-step inside components).
   Font sizes follow the type scale; line-heights round to multiples of 4.
   Body floor: 19px desktop / 18px mobile. */

:root{
  --ink:#1C1E1B;
  --pine:#33463A;
  --pine-deep:#222E26;
  --sage:#7D8F6F;
  --sand:#C9A876;
  --terracotta:#B06A4A;
  --cream:#FBF7F0;
  --paper:#F4F0E6;
  --slate:#5C6470;
  --line:#E0DACB;

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --maxw:1120px;
  --narrow:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:19px;
  line-height:32px;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s3);padding-right:var(--s3)}
.narrow{max-width:var(--narrow);margin-left:auto;margin-right:auto}
section{padding-top:var(--s10);padding-bottom:var(--s10)}
@media(max-width:720px){
  body{font-size:18px;line-height:28px}
  section{padding-top:var(--s8);padding-bottom:var(--s8)}
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0}
h1{font-size:clamp(38px,5.4vw,60px);line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(30px,3.6vw,42px);line-height:1.16;margin-bottom:var(--s3)}
h3{font-size:clamp(22px,2.2vw,26px);line-height:1.24;margin-bottom:var(--s1)}
h4{font-size:20px;line-height:28px;margin-bottom:var(--s1)}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(20px,2.3vw,24px);line-height:1.55}
.eyebrow{
  font-family:var(--sans);font-size:15px;line-height:24px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin:0 0 var(--s2)
}
.eyebrow.dark{color:var(--terracotta)}
.small{font-size:16px;line-height:24px;color:var(--slate)}
em.promise{font-style:italic;font-family:var(--serif)}
/* trademark marks: true superscript that never pushes the line-height around */
sup.tm{font-size:.55em;line-height:0;vertical-align:super;letter-spacing:.02em;margin-left:1px}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.cta-row.center{justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:var(--s2) var(--s4);
  font-family:var(--sans);font-size:18px;line-height:24px;font-weight:700;
  letter-spacing:.02em;text-decoration:none;border-radius:2px;
  border:2px solid transparent;transition:transform .12s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--sand);outline-offset:3px}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:#9c5b3d}
.btn-secondary{background:transparent;color:var(--cream);border-color:rgba(251,247,240,.6)}
.btn-secondary:hover{background:rgba(251,247,240,.12)}
.btn-secondary.on-light{color:var(--pine);border-color:var(--pine)}
.btn-secondary.on-light:hover{background:rgba(51,70,58,.08)}
.cta-note{margin-top:var(--s2);font-size:16px;line-height:24px;color:var(--slate)}
.cta-note.light{color:rgba(251,247,240,.78)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:flex-end;color:var(--cream)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,30,27,.34) 0%,rgba(28,30,27,.52) 45%,rgba(28,30,27,.86) 100%);
}
.hero .wrap{position:relative;padding-top:var(--s16);padding-bottom:var(--s10)}
.hero h1{max-width:18ch}
.hero .lede{max-width:46ch;margin-top:var(--s3);color:rgba(251,247,240,.94)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s4);
  font-size:16px;line-height:24px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(251,247,240,.82)
}
@media(max-width:720px){.hero{min-height:0}.hero .wrap{padding-top:var(--s12)}}

/* ---------- blocks ---------- */
.band-dark{background:var(--pine-deep);color:var(--cream)}
.band-dark .small,.band-dark .cta-note{color:rgba(251,247,240,.74)}
.band-paper{background:var(--paper)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.card{background:#fff;border:1px solid var(--line);padding:var(--s4)}
.card .num{
  font-family:var(--serif);font-size:16px;line-height:24px;color:var(--sand);
  letter-spacing:.12em;margin-bottom:var(--s2)
}
.band-dark .card{background:rgba(251,247,240,.06);border-color:rgba(251,247,240,.18)}

/* problem / solution pairs */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);
  padding:var(--s5) 0;border-top:1px solid var(--line)}
.pair:last-of-type{border-bottom:1px solid var(--line)}
.pair .label{
  font-size:14px;line-height:24px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s1)
}
.pair .label.sol{color:var(--sage)}
@media(max-width:720px){.pair{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* video */
.video-frame{position:relative;background:#000;border:1px solid var(--line)}
.video-frame video{width:100%;display:block}
.video-cap{margin-top:var(--s2);font-size:16px;line-height:24px;color:var(--slate)}

/* lists */
ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding-left:var(--s4);margin-bottom:var(--s2)}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:12px;width:16px;height:2px;background:var(--sage)
}
ul.ticks.tight li{margin-bottom:var(--s1)}

/* pricing */
.tier{background:#fff;border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column}
.tier .kind{font-size:14px;line-height:24px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.tier .price{font-family:var(--serif);font-size:40px;line-height:48px;margin:var(--s1) 0 var(--s1)}
.tier .name{font-family:var(--serif);font-size:22px;line-height:28px;margin-bottom:var(--s2)}
.tier .plan{font-size:16px;line-height:24px;color:var(--terracotta);margin-top:auto;padding-top:var(--s2)}

/* quotes */
.quote{background:#fff;border-left:4px solid var(--sand);padding:var(--s4);margin:0}
.quote p{font-family:var(--serif);font-size:20px;line-height:32px;font-style:italic}
.quote footer{margin-top:var(--s2);font-size:16px;line-height:24px;color:var(--slate);font-style:normal}
.band-dark .quote{background:rgba(251,247,240,.06)}

/* itinerary */
.day{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s5);
  padding:var(--s6) 0;border-top:1px solid var(--line)}
.day:last-child{border-bottom:1px solid var(--line)}
.day .when{font-size:16px;line-height:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.day img{margin-top:var(--s3);aspect-ratio:4/3;object-fit:cover;width:100%}
@media(max-width:820px){.day{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0}}

/* team */
.person img{aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:var(--s2)}
.person .role{font-size:15px;line-height:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.person .tag{font-family:var(--serif);font-style:italic;color:var(--slate)}

/* faq */
details{border-top:1px solid var(--line);padding:var(--s3) 0}
details:last-of-type{border-bottom:1px solid var(--line)}
details summary{
  font-family:var(--serif);font-size:22px;line-height:32px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--sand);font-size:24px;line-height:32px}
details[open] summary::after{content:"–"}
details .answer{padding-top:var(--s2);max-width:64ch}

/* ---------- email capture ---------- */
.capture{background:var(--pine-deep);color:var(--cream)}
.capture.light{background:var(--paper);color:var(--ink)}
.capture .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}
@media(max-width:820px){.capture .inner{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}
.capture h2{margin-bottom:var(--s2)}
.capture .sub{font-size:20px;line-height:32px}
.capture.light .sub{color:var(--slate)}

.signup{display:flex;flex-direction:column;gap:var(--s2)}
.signup .row{display:flex;gap:var(--s2)}
@media(max-width:560px){.signup .row{flex-direction:column}}
.signup input{
  flex:1;min-width:0;min-height:56px;padding:var(--s2);
  font-family:var(--sans);font-size:18px;line-height:24px;color:var(--ink);
  background:#fff;border:2px solid transparent;border-radius:2px
}
.signup input::placeholder{color:#8A8F87}
.signup input:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.signup button{
  min-height:56px;padding:var(--s2) var(--s4);border:0;border-radius:2px;cursor:pointer;
  background:var(--terracotta);color:#fff;font-family:var(--sans);font-size:18px;line-height:24px;font-weight:700
}
.signup button:hover{background:#9c5b3d}
.signup button[disabled]{opacity:.6;cursor:default}
.signup .fine{font-size:16px;line-height:24px;color:rgba(251,247,240,.7);margin:0}
.capture.light .signup .fine{color:var(--slate)}
.done,.signup .done{
  font-family:var(--serif);font-size:22px;line-height:32px;margin:0;
  padding:var(--s3);background:rgba(125,143,111,.18);border-left:4px solid var(--sage)
}
.signup .err{font-size:16px;line-height:24px;color:#F0B8A0;margin:0}
.capture.light .signup .err{color:#A32B2B}

/* inline text door */
.text-door{margin-top:var(--s2);font-size:17px;line-height:24px}
.text-door a{color:var(--sand);text-decoration:underline;text-underline-offset:3px}
.capture.light .text-door a,.band-paper .text-door a{color:var(--terracotta)}

/* ---------- quiz ---------- */
.quiz-card{background:#fff;border:1px solid var(--line);padding:var(--s6);max-width:800px;margin:0 auto}
@media(max-width:640px){.quiz-card{padding:var(--s4)}}
.quiz-card h2{margin-bottom:var(--s3)}
.quiz-card .lede{margin-bottom:var(--s3)}
.quiz-card .btn{margin-top:var(--s4)}

.quiz-progress{height:8px;background:var(--paper);margin-bottom:var(--s3)}
.quiz-progress .bar{height:8px;background:var(--sage);transition:width .3s ease}
.quiz-count{font-size:16px;line-height:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--s2)}

.quiz-options{display:flex;flex-direction:column;gap:var(--s2)}
.quiz-option{
  text-align:left;width:100%;min-height:56px;padding:var(--s2) var(--s3);
  font-family:var(--sans);font-size:18px;line-height:28px;color:var(--ink);
  background:var(--cream);border:2px solid var(--line);border-radius:2px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .1s ease
}
.quiz-option:hover{border-color:var(--sage);background:#fff;transform:translateX(4px)}
.quiz-option:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.quiz-back{
  margin-top:var(--s4);background:none;border:0;padding:var(--s1) 0;cursor:pointer;
  font-family:var(--sans);font-size:17px;line-height:24px;color:var(--slate)
}
.quiz-back:hover{color:var(--terracotta)}

.quiz-gate .signup{margin-top:var(--s4)}
.quiz-gate .signup .fine,.quiz-gate .signup .err{color:var(--slate)}
.quiz-gate .signup input{border:1px solid var(--line)}

.quiz-sent{font-size:clamp(32px,4.4vw,48px);line-height:1.12;color:var(--pine);margin-bottom:var(--s1)}
.quiz-line{font-family:var(--serif);font-style:italic;font-size:24px;line-height:32px;color:var(--terracotta);margin-bottom:var(--s2)}

/* result reveal */
.reveal-strength{
  font-size:16px;line-height:24px;color:var(--slate);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3)
}
.reveal-block{background:var(--paper);border-left:4px solid var(--sand);padding:var(--s3);margin:0 0 var(--s3)}
.reveal-block.sol{border-left-color:var(--sage)}
.reveal-block.cost{border-left-color:var(--terracotta)}
.reveal-block.cost .reveal-label{color:var(--terracotta)}
.reveal-block ul.ticks{margin-top:var(--s2)}
.reveal-block ul.ticks li{font-size:18px;line-height:28px}
.reveal-turn{
  font-family:var(--serif);font-size:21px;line-height:32px;color:var(--pine);
  padding:var(--s2) 0 var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line)
}
.reveal-close{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,28px);line-height:1.4;
  color:var(--terracotta);text-align:center;padding:var(--s4) var(--s2);margin:0 0 var(--s3)
}
.draft-flag{
  margin-top:var(--s3);padding:var(--s2) var(--s3);font-size:16px;line-height:24px;
  background:rgba(176,106,74,.12);border-left:4px solid var(--terracotta);color:var(--ink)
}
.reveal-block p:last-child{margin-bottom:0}
.reveal-label{
  font-size:14px;line-height:24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s1)
}
.reveal-block.sol .reveal-label{color:var(--sage)}

/* slide-in */
.slidein{
  position:fixed;right:var(--s3);bottom:var(--s3);z-index:60;width:min(400px,calc(100vw - 48px));
  background:var(--cream);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(28,30,27,.32);padding:var(--s4);
  transform:translateY(24px);opacity:0;transition:transform .28s ease,opacity .28s ease
}
.slidein[hidden]{display:none}
.slidein.in{transform:translateY(0);opacity:1}
.slidein h3{margin-bottom:var(--s1)}
.slidein p{font-size:17px;line-height:24px;margin-bottom:var(--s2)}
.slidein .close{
  position:absolute;top:var(--s1);right:var(--s1);width:40px;height:40px;
  border:0;background:transparent;cursor:pointer;font-size:24px;line-height:40px;color:var(--slate)
}
.slidein .signup input{border:1px solid var(--line)}
@media(max-width:720px){
  .slidein{right:var(--s1);left:var(--s1);bottom:80px;width:auto;padding:var(--s3)}
}

/* sticky mobile CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  gap:var(--s1);padding:var(--s1);background:rgba(34,46,38,.97);
  box-shadow:0 -2px 16px rgba(28,30,27,.28)
}
.sticky-cta .btn{flex:1;min-height:48px;padding:var(--s1) var(--s2);font-size:16px}
@media(max-width:720px){.sticky-cta{display:flex}body{padding-bottom:72px}}
.sticky-cta[hidden]{display:none}

/* footer */
footer.site{background:var(--pine-deep);color:rgba(251,247,240,.8);padding:var(--s8) 0}
footer.site a{color:rgba(251,247,240,.8)}
footer.site .brand{font-family:var(--serif);font-size:22px;line-height:32px;color:var(--cream);margin-bottom:var(--s2)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}