/* ==========================================================================
   FINDING CLARITY, Deanna Darcel
   Shared brand stylesheet. Link this from every page:
   <link rel="stylesheet" href="brand.css">

   Palette pulled from the webinar deck + the August portraits:
   espresso walls, travertine stone, cream silk, warm brass.
   ========================================================================== */

:root{
  /* Surfaces */
  --ivory:      #FBF8F3;   /* page background */
  --cream:      #F3ECE1;   /* alternating section */
  --travertine: #E7DBCA;   /* cards, stone tone */
  --sand:       #D5C4AF;   /* borders, dividers */

  /* Depth */
  --espresso:   #2C1F18;   /* the wall behind her */
  --cocoa:      #46332A;
  --mocha:      #8C7261;   /* the deck's body slides */
  --taupe:      #A89383;

  /* Ink */
  --ink:        #241A14;
  --ink-soft:   #5C4B40;
  --ink-faint:  #8A7969;
  --on-dark:    #F7F1E8;

  /* Accent */
  --brass:      #A9814B;
  --brass-lite: #C9A063;

  --hair:  rgba(44,31,24,.12);
  --shadow: 0 1px 2px rgba(44,31,24,.05), 0 24px 48px -28px rgba(44,31,24,.38);
  --radius: 10px;
  --maxw: 1080px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html,body{ margin:0 }

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:24px }
.narrow{ max-width:760px; margin-inline:auto }
.tight{ max-width:620px; margin-inline:auto }
section{ padding-block:clamp(52px,8vw,92px) }
.center{ text-align:center }

.band-cream{ background:var(--cream) }
.band-stone{ background:var(--travertine) }
.band-dark{ background:var(--espresso); color:var(--on-dark) }
.band-dark h1,.band-dark h2,.band-dark h3{ color:var(--on-dark) }
.band-dark p{ color:#DCCFC0 }

hr.rule{ height:1px; background:var(--hair); border:0; margin:0 }

/* ---------- Type ---------- */
h1,h2,h3{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
h1{ font-size:clamp(38px,6.6vw,66px) }
h2{ font-size:clamp(28px,4.4vw,44px) }
h3{ font-size:clamp(20px,2.6vw,26px) }

.eyebrow{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:20px;
}
.band-dark .eyebrow{ color:var(--brass-lite) }

.lede{ font-size:clamp(18px,2.2vw,20.5px); color:var(--ink-soft); }
.band-dark .lede{ color:#D7C9B9 }
.small{ font-size:14.5px; color:var(--ink-faint) }
.serif-quote{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(23px,3.4vw,33px);
  line-height:1.32;
  font-weight:500;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  letter-spacing:.005em;
  padding:16px 30px;
  border-radius:var(--radius);
  border:0;
  background:var(--espresso);
  color:var(--on-dark);
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.22) }
.btn:active{ transform:translateY(1px) }
.btn.brass{ background:var(--brass); color:#1E150D }
.btn.brass:hover{ filter:brightness(1.08) }
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--sand);
  font-weight:500;
}
.band-dark .btn.ghost{ color:var(--on-dark); border-color:rgba(247,241,232,.32) }
.btn.wide{ width:100%; padding-block:18px; font-size:17px }
.btn:disabled{ opacity:.42; cursor:not-allowed }

.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }
.center .actions{ justify-content:center }

/* ---------- Nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:22px;
}
.brand{
  font-family:"Playfair Display",Georgia,serif;
  font-size:19px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
}
.nav-links{ display:flex; align-items:center; gap:26px }
.nav-links a{
  font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-soft);
}
.nav-links a:hover{ color:var(--ink) }
/* .nav-links a is more specific than .btn, so restate the button colours here */
.nav-links a.btn{ padding:10px 20px; font-size:14.5px; color:var(--on-dark) }
.nav-links a.btn.brass{ color:#1E150D }
.nav-links a.btn:hover{ color:var(--on-dark) }
@media(max-width:700px){ .nav-links a:not(.btn){ display:none } }

/* ---------- Cards / lists ---------- */
.cards{ display:grid; gap:18px; margin-top:38px }
@media(min-width:760px){ .cards.two{ grid-template-columns:1fr 1fr } }
@media(min-width:860px){ .cards.three{ grid-template-columns:repeat(3,1fr) } }

.card{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:28px 26px;
}
.band-stone .card, .band-cream .card{ background:var(--ivory) }
.card h3{ margin-bottom:10px }
.card p{ margin:0; color:var(--ink-soft); font-size:16px }

.numbered{ list-style:none; padding:0; margin:38px 0 0; counter-reset:n }
.numbered li{
  counter-increment:n;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:22px 0;
  border-top:1px solid var(--hair);
}
.numbered li:last-child{ border-bottom:1px solid var(--hair) }
.numbered li::before{
  content:counter(n,decimal-leading-zero);
  font-family:"Playfair Display",Georgia,serif;
  font-size:19px;
  color:var(--brass);
  padding-top:2px;
}
.numbered b{ display:block; font-size:18px; margin-bottom:5px; font-weight:600 }
.numbered span{ color:var(--ink-soft); font-size:16px }

.ticks{ list-style:none; padding:0; margin:28px 0 0 }
.ticks li{
  position:relative; padding-left:30px; margin-bottom:15px;
  color:var(--ink-soft); font-size:16.5px;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--brass);
}
.band-dark .ticks li{ color:#D7C9B9 }

/* ---------- Portrait ---------- */
.portrait{
  width:100%; border-radius:var(--radius);
  background:var(--travertine); object-fit:cover;
}
.split{ display:grid; gap:40px; align-items:center }
@media(min-width:880px){
  .split{ grid-template-columns:0.85fr 1.15fr; gap:56px }
  .split.flip > :first-child{ order:2 }
}

/* ---------- Forms ---------- */
.field{ margin-bottom:18px }
.field label{
  display:block; font-size:14px; font-weight:600;
  margin-bottom:7px; color:var(--ink);
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%; font-family:inherit; font-size:16px;
  padding:14px 15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--sand);
  border-radius:var(--radius); outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass); box-shadow:0 0 0 3px rgba(169,129,75,.14);
}
.formcard{
  background:#fff; border:1px solid var(--hair);
  border-radius:var(--radius); padding:clamp(24px,4vw,38px);
  box-shadow:var(--shadow);
}
.consent{ display:flex; gap:11px; align-items:flex-start; margin:18px 0 6px }
.consent input{ margin-top:4px; flex:none }
.consent span{ font-size:13px; color:var(--ink-faint); line-height:1.5 }
.formnote{ font-size:13px; color:var(--ink-faint); margin-top:14px; text-align:center }

/* Radio / choice buttons (quiz + application) */
.choices{ display:grid; gap:11px }
.choice{
  display:block; cursor:pointer; position:relative;
  padding:16px 18px; font-size:16px;
  background:#fff; border:1.5px solid var(--sand);
  border-radius:var(--radius);
  transition:border-color .12s ease, background .12s ease;
}
.choice:hover{ border-color:var(--taupe) }
.choice input{ position:absolute; opacity:0; pointer-events:none }
.choice.is-on{ background:var(--espresso); color:var(--on-dark); border-color:var(--espresso) }

/* ---------- Video ---------- */
.videoframe{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--espresso); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.videoframe iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ---------- Progress ---------- */
.progress{ height:3px; background:var(--sand); border-radius:2px; overflow:hidden }
.progress i{ display:block; height:100%; background:var(--brass); width:0; transition:width .25s ease }

/* ---------- Footer ---------- */
footer{
  background:var(--espresso); color:#C6B7A6;
  padding-block:44px; font-size:14px;
}
footer a{ color:#E2D6C6; text-decoration:none; margin-right:22px }
footer a:hover{ color:#fff }
.footrow{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center }

/* ---------- Utility ---------- */
.hidden{ display:none !important }
.stack > * + *{ margin-top:18px }
.mt0{ margin-top:0 }
.disclaimer{
  font-size:12.5px; color:var(--ink-faint);
  border-top:1px solid var(--hair); padding-top:18px; margin-top:34px;
}