/* Wealth Foundations Canada, v3 design system.
   Plain CSS, no frameworks, no external fonts, no trackers.
   Palette: Foundation Navy #26292D, cream #F7F3EC, Maple Signal #A05224,
   Foundation Gold #AE6C2C (hairlines and earned accents only).
   Display type: Georgia serif stack. Body type: system sans stack. */

:root {
  --navy: #26292D;
  --navy-deep: #15171A;
  --navy-soft: #34383D;
  --navy-mist: #4A5058;
  --ink: #22303E;
  --muted: #48596B;
  --cream: #F7F3EC;
  --cream-2: #EFE7D7;
  --cream-3: #E9DFC9;
  --paper: #FFFFFF;
  --line: #D8CFB8;
  --line-soft: #E6DECC;
  --red: #A05224;
  --red-dark: #83411B;
  --red-bright: #B25F2C;
  --red-tint: #CE8B54;
  --gold: #AE6C2C;
  --gold-soft: #D3A05F;
  --focus: #A05224;
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 70rem;
  --shadow-card: 0 1px 2px rgba(38, 41, 45, 0.05), 0 4px 10px rgba(38, 41, 45, 0.06), 0 16px 38px rgba(38, 41, 45, 0.08);
  --shadow-lift: 0 2px 4px rgba(38, 41, 45, 0.06), 0 10px 22px rgba(38, 41, 45, 0.10), 0 28px 54px rgba(38, 41, 45, 0.14);
  --shadow-btn: 0 2px 6px rgba(143, 45, 33, 0.28), 0 12px 26px rgba(179, 58, 43, 0.30);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 50% -180px, rgba(174, 108, 44, 0.07), rgba(174, 108, 44, 0) 70%),
    linear-gradient(180deg, #FBF8F1 0%, var(--cream) 340px);
  background-color: var(--cream);
  font-family: var(--sans);
  font-size: 1.075rem;
  line-height: 1.68;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.has-sticky-cta { padding-bottom: 0; }

::selection { background: rgba(174, 108, 44, 0.38); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-deep);
  color: #fff;
  padding: 0.7rem 1.1rem;
  z-index: 60;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.doorway-hero :focus-visible,
.consent :focus-visible,
.sticky-cta :focus-visible {
  outline-color: var(--gold-soft);
}

/* ---------- Header ---------- */

.site-header {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 58%, #101215 100%);
  color: #fff;
  position: relative;
  border-bottom: 1px solid rgba(174, 108, 44, 0.55);
  box-shadow: 0 1px 0 rgba(11, 23, 48, 0.6), 0 10px 30px rgba(12, 26, 52, 0.28);
}
.site-header .bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.95rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}
.brand {
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.15;
}
.brand::before {
  content: "WF";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--navy-mist), var(--navy-deep));
  border: 1px solid rgba(174, 108, 44, 0.75);
  box-shadow: inset 0 1px 0 rgba(247, 243, 236, 0.22), 0 4px 10px rgba(11, 23, 48, 0.4);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--cream);
}
a.brand:hover { text-decoration: underline; text-decoration-color: var(--gold-soft); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
}
.site-nav a {
  color: #E9EEF6;
  text-decoration: none;
  font-size: 0.99rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: rgba(247, 243, 236, 0.14); color: #fff; }
.site-nav a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  background: rgba(247, 243, 236, 0.10);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* ---------- Layout and type ---------- */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.8vw, 3.45rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0.6rem 0 1.15rem;
  max-width: 22em;
}
main > h1::before,
.hero h1::before,
.doorway-hero h1::before {
  content: "";
  display: block;
  width: 3.8rem;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 62%, var(--gold) 62%, var(--gold) 100%);
  margin-bottom: 1.2rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--navy);
  margin: 3rem 0 0.75rem;
}
h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 62%, var(--gold) 62%, var(--gold) 100%);
  margin-top: 0.6rem;
}
h3 {
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.3;
  color: var(--navy);
  margin: 1.6rem 0 0.45rem;
}
p { margin: 0.7rem 0; }
ul, ol { margin: 0.7rem 0 0.7rem 1.4rem; padding: 0; }
li { margin: 0.38rem 0; }

.lede { font-size: 1.24rem; line-height: 1.62; color: #33475C; }
.small { font-size: 0.95rem; }
[hidden] { display: none !important; }

.closing-line {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.45;
  text-align: center;
  color: var(--navy);
  margin: 3.2rem auto 0.5rem;
  max-width: 36rem;
}

/* Full bleed band inside the centred main column. */
.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(1.25rem, calc(50vw - 35rem));
  padding-right: max(1.25rem, calc(50vw - 35rem));
}
.band-paper {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-top: 3rem;
  padding-bottom: 3.2rem;
  margin-top: 3rem;
}
.band-tint {
  background: linear-gradient(180deg, var(--cream-2) 0%, #F3ECDC 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-top: 3rem;
  padding-bottom: 3.2rem;
  margin-top: 3rem;
}
.band-paper > h2:first-child,
.band-tint > h2:first-child { margin-top: 0; }
.band-paper > p:last-child,
.band-tint > p:last-child { margin-bottom: 0; }

/* ---------- Hero (home) and doorway heroes ---------- */

.hero,
.doorway-hero {
  background:
    radial-gradient(rgba(247, 243, 236, 0.055) 1px, rgba(247, 243, 236, 0) 1.7px),
    radial-gradient(1000px 520px at 88% -12%, rgba(174, 108, 44, 0.17), rgba(174, 108, 44, 0) 62%),
    radial-gradient(880px 520px at -12% 112%, rgba(217, 108, 87, 0.15), rgba(217, 108, 87, 0) 58%),
    linear-gradient(158deg, var(--navy-mist) 0%, var(--navy) 44%, var(--navy-deep) 100%);
  background-size: 22px 22px, auto, auto, auto;
  color: var(--cream);
  border-bottom: 6px solid var(--red);
  box-shadow: inset 0 1px 0 rgba(174, 108, 44, 0.35), 0 24px 48px rgba(12, 26, 52, 0.20);
}
.hero {
  margin-top: -2rem;
  padding-top: 4.4rem;
  padding-bottom: 4.6rem;
}
.hero h1 { color: #fff; font-size: clamp(2.75rem, 7.2vw, 4.35rem); line-height: 1.06; max-width: 14.5em; }
.hero h1::before { background: linear-gradient(90deg, var(--red-tint) 0%, var(--red-tint) 62%, var(--gold) 62%, var(--gold) 100%); }
.hero .lede { color: #EDE5D3; max-width: 45rem; font-size: 1.28rem; }
.hero p { max-width: 45rem; }
.hero a { color: #F3C6BB; }
.hero .steps { margin-top: 1.9rem; max-width: none; }
.hero .btn { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 52%, var(--red-dark) 130%);
  color: #fff;
  border: 1.5px solid var(--red-dark);
  border-radius: 999px;
  padding: 0.88rem 1.85rem;
  min-height: 54px;
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  margin: 1rem 0;
  box-shadow: var(--shadow-btn);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  background: linear-gradient(180deg, #B25F2C 0%, var(--red-dark) 130%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(143, 45, 33, 0.26), 0 16px 32px rgba(179, 58, 43, 0.34);
  text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-btn); }
.btn-secondary {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 2px 6px rgba(38, 41, 45, 0.10);
}
.btn-secondary:hover { background: var(--cream-2); border-color: var(--navy); color: var(--navy); box-shadow: 0 4px 10px rgba(38, 41, 45, 0.12); }

/* ---------- Panels and cards ---------- */

.panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.35rem 1.55rem;
  margin: 1.3rem 0;
  box-shadow: var(--shadow-card);
}

.callout {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EE 100%);
  border: 1px solid var(--line-soft);
  border-top: 5px solid var(--navy);
  border-radius: var(--radius);
  padding: 0.6rem 1.6rem 1.4rem;
  margin: 2.6rem 0;
  box-shadow: var(--shadow-card);
}
.callout h2 { margin-top: 1.3rem; }

/* ---------- Foundations Five step cards ---------- */

.steps {
  list-style: none;
  margin-left: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.05rem;
}
.steps li {
  counter-increment: step;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 130%);
  color: var(--navy);
  border: 1px solid rgba(247, 243, 236, 0.6);
  border-radius: var(--radius);
  padding: 1.35rem 1.2rem 1.45rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.26rem;
  line-height: 1.3;
  box-shadow: 0 14px 30px rgba(11, 23, 48, 0.35);
  margin: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.steps li:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(11, 23, 48, 0.42); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 2.55rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: 0.65rem;
}

/* Home: plain language detail cards. */
.step-details {
  counter-reset: sd;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.15rem;
  margin: 1.5rem 0 0.6rem;
}
.step-detail {
  counter-increment: sd;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--shadow-card);
  margin: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.step-detail:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.step-detail h3 { margin-top: 0; font-size: 1.32rem; }
.step-detail h3::before {
  content: counter(sd, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(174, 108, 44, 0.55);
  max-width: 3.4rem;
}
.step-detail p { margin-bottom: 0.2rem; }

/* Class page: one card per step, lead paragraph plus teaching depth. */
.learn-steps { counter-reset: ls; margin-top: 1.3rem; }
.step-card {
  counter-increment: ls;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.3rem 5.6rem;
  margin: 1.15rem 0;
  box-shadow: var(--shadow-card);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.step-card::before {
  content: counter(ls, decimal-leading-zero);
  position: absolute;
  left: 1.5rem;
  top: 1.45rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--red);
}
.step-card::after {
  content: "";
  position: absolute;
  left: 4.55rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(174, 108, 44, 0.65), rgba(174, 108, 44, 0.08));
}
.step-card p:first-child { margin-top: 0.1rem; }
.step-card p:first-child strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--navy);
}
.step-card p:last-child { margin-bottom: 0.3rem; }
@media (max-width: 34rem) {
  .step-card { padding: 1.35rem 1.25rem 1.1rem; }
  .step-card::before { position: static; display: block; margin-bottom: 0.5rem; }
  .step-card::after { display: none; }
}

/* How it works numbered list (home). */
.how-steps { list-style: none; margin-left: 0; counter-reset: hs; max-width: 47rem; }
.how-steps li {
  counter-increment: hs;
  position: relative;
  padding-left: 4.3rem;
  margin: 1.15rem 0;
  min-height: 3.1rem;
}
.how-steps li::before {
  content: counter(hs);
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy-soft), var(--navy-deep));
  color: var(--cream);
  border: 1px solid rgba(174, 108, 44, 0.6);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

/* ---------- Session lists and cards ---------- */

.session-list { list-style: none; margin-left: 0; display: grid; gap: 0.85rem; max-width: 47rem; }
/* While app.js fills a session list, reserve the height its three
   cards will take, so the content below never jumps (layout shift).
   The reservation disappears on its own once the list has children.
   Heights measured from the filled list: the card text wraps to
   more lines on narrow screens, so the reservation steps up. */
.session-list[data-session-list]:empty,
.session-list[data-ep-list]:empty { min-height: 19.5rem; }
@media (max-width: 33rem) {
  .session-list[data-session-list]:empty,
  .session-list[data-ep-list]:empty { min-height: 23.4rem; }
}
@media (max-width: 27.5rem) {
  .session-list[data-session-list]:empty,
  .session-list[data-ep-list]:empty { min-height: 30.1rem; }
}
.session-list li {
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.25rem;
  margin: 0;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.session-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.session-list .local {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--navy);
}
.session-list .eastern { display: block; font-size: 0.95rem; color: var(--muted); margin-top: 0.15rem; }

/* "Times shown in your time zone" label beside each session list.
   Filled by JavaScript from the visitor's Intl time zone. */
.zone-label { font-size: 0.92rem; color: var(--muted); margin-top: 0.6rem; }

/* Alternate session list styling kept from the shared style sheet.
   Same structure as the class list, set as navy cards. */
.session-list.ep-list li {
  background: linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-color: var(--navy-deep);
  border-left-color: var(--red-tint);
  box-shadow: var(--shadow-card);
}
.session-list.ep-list .local { color: #fff; }
.session-list.ep-list .eastern { color: #E7DFCE; }

.session-cards {
  list-style: none;
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.05rem;
  max-width: 54rem;
}
.session-cards li {
  background: linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--cream);
  border: 1px solid rgba(174, 108, 44, 0.35);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem 1.4rem;
  margin: 0;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--gold);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.session-cards li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.session-cards .session-day {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.55rem;
  color: #fff;
  line-height: 1.2;
}
.session-cards .session-time { display: block; margin-top: 0.35rem; color: #E7DFCE; }

/* ---------- Doorway pages ---------- */

.doorway-hero {
  margin-top: -2rem;
  padding-top: 3.6rem;
  padding-bottom: 3.8rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.6rem;
  align-items: center;
}
.doorway-hero h1 { color: #fff; font-size: clamp(2.5rem, 6.2vw, 3.8rem); }
.doorway-hero h1::before { background: linear-gradient(90deg, var(--red-tint) 0%, var(--red-tint) 62%, var(--gold) 62%, var(--gold) 100%); }
.doorway-hero .lede { color: #EDE5D3; }
.doorway-hero .btn { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38); }
@media (max-width: 46rem) {
  .doorway-hero { grid-template-columns: 1fr; gap: 1.7rem; }
}

.inviter-photo {
  margin: 0;
  background: linear-gradient(180deg, #FFFFFF, var(--cream));
  border: 1px solid rgba(174, 108, 44, 0.45);
  border-radius: 22px;
  padding: 0.6rem;
  box-shadow: var(--shadow-lift);
}
.inviter-photo picture { display: block; }
.inviter-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.doorway-hero .inviter-photo { transform: rotate(1.2deg); }
.doorway-hero .inviter-photo img {
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(1.06) contrast(1.02);
}
/* Sean's supplied headshot is a tight square crop with the face
   centred, so it is framed from the centre, and on small screens it
   keeps a taller frame so the face is never cropped. */
.doorway-hero .inviter-photo-sean img { object-position: center center; }
@media (max-width: 46rem) {
  .doorway-hero .inviter-photo { transform: none; max-width: 24rem; }
  .doorway-hero .inviter-photo img { aspect-ratio: 16 / 11; object-position: center 22%; }
  .doorway-hero .inviter-photo-sean img { aspect-ratio: 4 / 3.1; object-position: center 6%; }
}

/* ---------- Forms ---------- */

form { max-width: 45rem; }
.form-panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.7rem 0.8rem;
  margin: 1.4rem 0;
}
.form-panel .field:first-child { margin-top: 0.2rem; }
.form-panel fieldset { border: none; padding: 0; margin: 0.2rem 0 0.8rem; }
.field { margin: 1.2rem 0; }
label, legend { font-weight: 700; color: var(--navy); font-size: 1.03rem; }
label.inline { font-weight: 400; color: var(--ink); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.85rem 0.95rem;
  min-height: 54px;
  font: inherit;
  color: var(--ink);
  background: #FDFCF9;
  border: 1.5px solid #8CA0B4;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover,
select:hover, textarea:hover { border-color: var(--navy); }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
select:focus, textarea:focus {
  border-color: var(--navy);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 41, 45, 0.16), 0 0 0 5.5px rgba(179, 58, 43, 0.22);
}
fieldset {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem 1.1rem;
  margin: 1.15rem 0;
  background: var(--paper);
}
fieldset label {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.55rem 0;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
  background: #FDFCF9;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
fieldset label:hover { background: var(--cream); border-color: var(--line); }
fieldset label:has(input:checked) {
  border-color: var(--navy);
  background: var(--cream);
  box-shadow: inset 3px 0 0 var(--red);
}
fieldset input[type="radio"], fieldset input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--red);
}
fieldset .hint { flex-basis: 100%; margin-left: 1.95rem; }
.hint { font-size: 0.95rem; color: var(--muted); margin-top: 0.35rem; font-weight: 400; }
.consent {
  background:
    radial-gradient(700px 300px at 90% -30%, rgba(174, 108, 44, 0.14), rgba(174, 108, 44, 0) 60%),
    linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--cream);
  border: 1px solid var(--navy-deep);
  border-radius: var(--radius);
  padding: 1.45rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.consent label { font-weight: 400; color: var(--cream); display: block; line-height: 1.62; }
.consent a { color: #fff; }
.consent .small { color: #D8DEE9; }
.consent input {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.55rem;
  vertical-align: -0.3rem;
  accent-color: var(--red-tint);
}
form > .btn, form .btn[type="submit"] { padding-left: 2.3rem; padding-right: 2.3rem; }

/* ---------- FAQ accordions ---------- */

details.faq-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin: 0.75rem 0;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(38, 41, 45, 0.06);
  overflow: hidden;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
details.faq-item:hover { border-color: var(--line); box-shadow: var(--shadow-card); }
details.faq-item[open] { box-shadow: var(--shadow-card); border-color: var(--line); }
details.faq-item summary {
  position: relative;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.4rem 1.15rem 1.4rem;
  min-height: 56px;
  transition: background 0.15s ease;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
details.faq-item[open] summary { border-bottom: 1px solid var(--line-soft); }
details.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details.faq-item summary:hover { background: var(--cream); }
details.faq-item > p { padding: 1rem 1.4rem 1.25rem; margin: 0; max-width: 47rem; }

/* ---------- Quiz ---------- */

#quiz-app {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border: 1px solid var(--line-soft);
  border-top: 6px solid var(--red);
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  padding: 1.9rem 1.8rem 1.7rem;
  margin-top: 1.7rem;
  max-width: 47rem;
}
.quiz-progress { margin: 0 0 0.4rem; }
.quiz-progress-text { font-weight: 700; color: var(--navy); margin: 0 0 0.5rem; }
.quiz-progress-bar {
  background: var(--cream-2);
  border: none;
  border-radius: 999px;
  height: 0.95rem;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(38, 41, 45, 0.14);
}
.quiz-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-tint));
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quiz-step {
  color: var(--red-dark);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.2rem 0 0;
}
#quiz-fieldset { border: none; padding: 0; margin: 0.4rem 0 0; background: transparent; }
#quiz-question {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.42rem, 3.6vw, 1.78rem);
  line-height: 1.3;
  color: var(--navy);
  padding: 0;
  margin-bottom: 1.15rem;
  float: none;
  width: 100%;
}
.quiz-option {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.7rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  min-height: 58px;
  margin: 0.6rem 0;
  background: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.quiz-option:hover { border-color: var(--navy); box-shadow: 0 3px 10px rgba(38, 41, 45, 0.08); }
.quiz-option input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  flex: none;
  accent-color: var(--red);
}
.quiz-option input:focus-visible { outline: none; }
.quiz-option:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.quiz-option:has(input:checked) { border-color: var(--red); background: var(--cream); box-shadow: inset 3px 0 0 var(--red); }
.quiz-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; }
.quiz-nav .btn { margin: 0; flex: 1 1 auto; }
.quiz-nav .btn-secondary { flex: 0 1 auto; }
.quiz-hint { color: #7C3F00; font-weight: 700; }
.quiz-quote {
  border-left: 5px solid var(--red);
  margin: 0.9rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--navy);
}
.quiz-snapshot { list-style: none; margin-left: 0; display: grid; gap: 0.7rem; }
.quiz-snapshot li {
  border: 1px solid var(--line-soft);
  border-left: 6px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin: 0;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(38, 41, 45, 0.06);
}
.quiz-snapshot strong { display: block; font-family: var(--serif); color: var(--navy); font-size: 1.08rem; }
.quiz-snapshot span { display: block; }
.staging-note {
  border: 1.5px dashed var(--focus);
  background: #FDF6EC;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.quiz-textbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--red-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Sticky mobile call to action bar ---------- */

.sticky-cta { display: none; }
@media (max-width: 48rem) {
  body.has-sticky-cta { padding-bottom: 0; }
  .sticky-cta {
    display: none;
    align-items: stretch;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: rgba(247, 243, 236, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 26px rgba(12, 26, 52, 0.18);
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  }
  .sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    line-height: 1.25;
  }
  .sticky-link {
    flex: 0 1 38%;
    background: var(--paper);
    color: var(--navy);
    border: 2px solid var(--navy);
  }
  .sticky-btn {
    flex: 1 1 auto;
    background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 55%, var(--red-dark) 135%);
    color: #fff;
    border: 2px solid var(--red-dark);
    box-shadow: 0 6px 16px rgba(179, 58, 43, 0.32);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background:
    radial-gradient(900px 340px at 85% -40%, rgba(174, 108, 44, 0.10), rgba(174, 108, 44, 0) 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #D8DEE9;
  margin-top: 3.5rem;
  border-top: 5px solid var(--red);
  box-shadow: inset 0 1px 0 rgba(174, 108, 44, 0.45);
}
.site-footer .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.6rem 1.25rem 2.4rem;
  font-size: 0.95rem;
}
.site-footer a { color: #fff; }
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
}
.site-footer ul a {
  text-decoration: none;
  font-weight: 600;
  padding: 0.3rem 0;
  display: inline-block;
}
.site-footer ul a:hover { text-decoration: underline; text-decoration-color: var(--gold-soft); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site-footer .inner > p { color: #B7C2D2; max-width: 54rem; margin-bottom: 0; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(247, 243, 236, 0.16);
}
.footer-top ul { margin-left: auto; }
.footer-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.32rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.15;
}
.footer-brand::before {
  content: "WF";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--navy-mist), var(--navy-deep));
  border: 1px solid rgba(174, 108, 44, 0.75);
  box-shadow: inset 0 1px 0 rgba(247, 243, 236, 0.22);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--cream);
}

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
  body { font-size: 1.02rem; }
  main { padding: 1.4rem 1rem 3.2rem; }
  .hero { margin-top: -1.4rem; padding-top: 2.9rem; padding-bottom: 3.1rem; }
  .doorway-hero { margin-top: -1.4rem; padding-top: 2.5rem; padding-bottom: 2.8rem; }
  .band-paper, .band-tint { padding-top: 2.2rem; padding-bottom: 2.4rem; margin-top: 2.2rem; }
  .btn { width: 100%; text-align: center; }
  .hero .btn, .doorway-hero .btn { width: auto; }
  .quiz-nav .btn { width: auto; }
  #quiz-app { padding: 1.35rem 1.1rem 1.25rem; }
  .form-panel { padding: 1.2rem 1.05rem 0.5rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li { font-size: 1.13rem; padding: 1.1rem 1rem 1.2rem; }
  .steps li::before { font-size: 2.05rem; }
  .site-header .bar { padding: 0.8rem 1rem; }
  .site-nav a { padding: 0.45rem 0.55rem; }
  .footer-top ul { margin-left: 0; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Website assistant (chat bot) ---------- */
/* Built by chatbot.js and injected at the end of the body on every
   page. Foundation Navy panel header, cream card, Maple Signal
   accents, Georgia serif title, matching the site design system. */

.wfc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wfc-chat-launcher {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  color: var(--cream);
  border: 1.5px solid rgba(174, 108, 44, 0.6);
  border-radius: 999px;
  padding: 0.8rem 1.25rem;
  min-height: 54px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: background 0.15s ease, transform 0.15s ease;
}
.wfc-chat-launcher:hover { background: var(--navy-soft); transform: translateY(-1px); }
.wfc-chat-launcher .wfc-chat-icon { width: 1.35rem; height: 1.35rem; flex: none; }

.wfc-chat-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 5.6rem;
  z-index: 70;
  width: min(24.5rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100vh - 7.5rem));
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.wfc-chat-panel[hidden] { display: none; }

.wfc-chat-header {
  background:
    radial-gradient(500px 220px at 90% -30%, rgba(174, 108, 44, 0.16), rgba(174, 108, 44, 0) 60%),
    linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--cream);
  border-bottom: 5px solid var(--red);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.wfc-chat-header-text { margin-right: auto; }
.wfc-chat-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
.wfc-chat-title::after { content: none; }
.wfc-chat-subtitle { margin: 0.2rem 0 0; font-size: 0.88rem; color: #E7DFCE; }
.wfc-chat-close {
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.wfc-chat-close:hover { background: rgba(247, 243, 236, 0.16); }

.wfc-chat-log {
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1 1 auto;
}
.wfc-msg {
  max-width: 88%;
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  font-size: 0.99rem;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(38, 41, 45, 0.08);
}
.wfc-msg p { margin: 0.3rem 0; }
.wfc-msg p:first-child { margin-top: 0; }
.wfc-msg p:last-child { margin-bottom: 0; }
.wfc-msg-bot {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--navy);
  align-self: flex-start;
  color: var(--ink);
}
.wfc-msg-user {
  background: var(--navy);
  color: var(--cream);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.wfc-msg-links a { color: var(--red-dark); font-weight: 700; }
.wfc-msg-user .wfc-msg-links a { color: #F3C6BB; }

.wfc-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1rem 0.6rem;
}
.wfc-chat-chips[hidden] { display: none; }
.wfc-chip {
  background: var(--paper);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  min-height: 42px;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
}
.wfc-chip:hover { background: var(--cream-2); }

.wfc-chat-picker {
  padding: 0 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.wfc-chat-picker[hidden] { display: none; }
.wfc-chat-select {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  min-height: 50px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #7C8DA0;
  border-radius: var(--radius-sm);
}
.wfc-chat-pick-btn, .wfc-chat-session-btn {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  font-size: 0.99rem;
  cursor: pointer;
  text-align: center;
}
.wfc-chat-pick-btn:hover, .wfc-chat-session-btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.wfc-chat-session-btn {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--navy);
  text-align: left;
}
.wfc-chat-session-btn:hover { background: var(--cream-2); border-color: var(--navy); color: var(--navy); }
.wfc-consent-decline {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--navy);
}
.wfc-consent-decline:hover { background: var(--cream-2); border-color: var(--navy); color: var(--navy); }

.wfc-chat-form {
  display: flex;
  gap: 0.55rem;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--cream);
  max-width: none;
}
.wfc-chat-form[hidden] { display: none; }
.wfc-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  min-height: 50px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #7C8DA0;
  border-radius: 999px;
}
.wfc-chat-input:focus {
  border-color: var(--navy);
  outline: 3px solid rgba(179, 58, 43, 0.35);
  outline-offset: 1px;
}
.wfc-chat-send {
  background: var(--navy);
  color: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  min-height: 50px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wfc-chat-send:hover { background: var(--navy-soft); }

/* Keep the launcher and panel clear of the mobile sticky bar. */
@media (max-width: 48rem) {
  body.has-sticky-cta .wfc-chat-launcher { bottom: 6.4rem; }
  body.has-sticky-cta .wfc-chat-panel { bottom: 11rem; }
  .wfc-chat-panel { max-height: calc(100vh - 13rem); }
}

/* Shaun Bisson site addendum, added for the shaunbisson.ca build.
   Brand name slot, signature phrase section, contact and
   confirmation components, and tap target sizing. */
.brand-lockup { display: flex; flex-direction: column; line-height: 1.15; }
.brand-lockup .brand-team { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; }
.hero-support { font-size: 1.22rem; font-weight: 600; max-width: 42rem; }
.stops { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.25rem 0; }
.stops .step-card { margin: 0; }
.done-panel { border: 2px solid var(--gold, #AE6C2C); border-radius: 12px; padding: 1.25rem 1.4rem; background: #fff; }
.done-panel:focus { outline: 3px solid var(--navy, #26292D); outline-offset: 2px; }
.contact-card { border: 1px solid var(--line, #D8D2C4); border-radius: 12px; padding: 1.25rem 1.4rem; background: #fff; margin: 1rem 0; }
.btn, .sticky-btn { min-height: 48px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; }
input, select, textarea { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.brand-lockup .brand-name { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); }
.hero-brand { font-size: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 0.35rem; }