/* ============================================================
   WELL BEING SANCTUARY INSTITUTE, wbsinstitute.com
   Built from the Grechko-layout mock-up of 2026-09-25, locked to
   the choices Laura made on her 2026-09-25 call with BLT: the Clay
   palette, the Warm button (Clay's own soft peach, dark text), and
   date tile A (soft). The other palettes, tiles and button colours
   were review toggles and are not carried.
   ============================================================ */

:root{
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --radius:14px;
  --wrap:1120px;
}

/* ---------- Clay: linen, dusty rose clay, soft peach button ---------- */
:root{
  --paper:#FFFFFF;
  --soft:#FCF7F2;
  --band:#F8ECE3;
  --band-2:#F6E7E2;
  --topbar:#F3E3DC;
  --topbar-ink:#4A3040;
  --ink:#3B2A36;
  --ink-soft:#6D5864;
  --rule:#ECDDD5;
  --accent:#EFAE8A;
  --accent-hover:#E89E77;
  --accent-ink:#3B2A36;
  --accent-2:#A55D55;
  --tint:#FBF1EB;
  --tint-rule:#EBCFC4;
  --foot:#F6E7E2;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;overflow-wrap:anywhere;}
img{max-width:100%;display:block;}
a{color:var(--accent-2);text-underline-offset:3px;}
a:hover{color:var(--ink);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin:0 auto;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.15;margin:0;}

/* ---------- the slim top bar (Grechko: contact details above the nav) ---------- */
.topbar{background:var(--topbar);color:var(--topbar-ink);font-size:13.5px;line-height:1.5;}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 22px;padding-top:9px;padding-bottom:9px;}
.topbar__contact{display:flex;flex-wrap:wrap;gap:4px 20px;}
.topbar .wrap{max-width:1240px;}
.topbar a{color:var(--topbar-ink);text-decoration:none;overflow-wrap:anywhere;}
.topbar a:hover{text-decoration:underline;}
.topbar__back{font-weight:600;}

/* ---------- white header and nav ---------- */
.header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;padding-bottom:16px;}
.lockup{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1;}
.lockup .l0{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--lock-0,var(--accent-2));}
.lockup .l1{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;color:var(--lock-1,var(--ink));}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-size:15px;}
.nav a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;}
.nav a:hover{border-bottom-color:var(--accent);}
.nav a[aria-current="page"]{border-bottom-color:var(--accent-2);font-weight:700;}
.nav .btn{border-bottom:0;padding:9px 18px;}

/* ---------- buttons: one soft accent ---------- */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;line-height:1.3;}
.btn:hover{background:var(--accent-hover);color:var(--accent-ink);}
.btn--quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-soft);}
.btn--quiet:hover{background:var(--tint);color:var(--ink);}
.btn-price{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-price .price{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);}


/* ---------- home hero: Laura's headshot beside the words ---------- */
.hero{background:linear-gradient(180deg,var(--band) 0%,var(--band-2) 100%);}
.hero__inner{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:64px;}
.hero__photo{position:relative;margin:0;}
.hero__photo .frame{background:var(--paper);border:1px solid var(--tint-rule);border-radius:26px;padding:10px;box-shadow:0 10px 30px rgba(46,42,79,.08);}
.hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;}
.hero__photo figcaption{margin-top:14px;padding-left:4px;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.hero__photo figcaption b{color:var(--ink);font-weight:700;}
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px;}
.hero h1{font-size:clamp(38px,5vw,58px);}
.hero .lead{font-size:19px;line-height:1.7;color:var(--ink-soft);margin:22px 0 28px;max-width:600px;}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---------- course page band: pale, centred (Grechko course page) ---------- */
.band{background:linear-gradient(180deg,var(--band) 0%,var(--band-2) 100%);text-align:center;}
.band__inner{padding-top:60px;padding-bottom:56px;max-width:860px;}
.band h1{font-size:clamp(38px,5.4vw,60px);}
.band .sub{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-soft);margin:12px 0 0;}
.band .with{font-size:17px;margin:18px 0 4px;color:var(--ink);font-weight:600;}
.band .when{font-size:16px;color:var(--ink-soft);margin:0 0 26px;}
.band .btn-price{justify-content:center;}
.band--short .band__inner{padding-top:48px;padding-bottom:44px;}
.band .lead{font-size:18px;color:var(--ink-soft);margin:16px auto 0;max-width:640px;}

/* ---------- the centred note block (Grechko's approval and how-it-works note) ---------- */
.note{background:var(--tint);border:1px solid var(--tint-rule);border-radius:var(--radius);padding:30px 34px;text-align:center;max-width:860px;margin:0 auto;}
.note p{margin:0 0 12px;font-size:16px;line-height:1.7;}
.note p:last-child{margin-bottom:0;}
.note .approval{font-size:16.5px;color:var(--ink);}
.note .approval b{font-weight:800;}
.note hr{border:0;border-top:1px solid var(--tint-rule);margin:18px auto;max-width:120px;}
.note .facts-line{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:15px;color:var(--ink-soft);}
.note .facts-line span b{color:var(--ink);font-weight:700;}

/* ---------- sections ---------- */
.section{padding:64px 0;}
.section--soft{background:var(--soft);}
.section--tight{padding:44px 0;}
.section-head{text-align:center;margin-bottom:34px;}
.section-head h2{font-size:clamp(32px,4vw,42px);}
.section-head p{color:var(--ink-soft);margin:10px auto 0;max-width:620px;}
.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px;}
.h2{font-size:32px;margin-bottom:14px;}
.prose p{margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose .big{font-family:var(--serif);font-size:30px;line-height:1.25;font-weight:600;color:var(--ink);margin-bottom:18px;}
.prose .fine,.fine{font-size:14.5px;color:var(--ink-soft);line-height:1.65;}
.block{padding:40px 0;border-top:1px solid var(--rule);}
.block:first-child{border-top:0;padding-top:0;}

/* ---------- date cards, stacked (Grechko's trainings list) ---------- */
.cards{display:flex;flex-direction:column;gap:22px;max-width:980px;margin:0 auto;}
.card{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(46,42,79,.05);}
.card__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 14px;min-height:190px;color:var(--ink);border-right:1px solid var(--rule);}
.card__tile .leaf{display:flex;flex-direction:column;align-items:center;}
.card__tile .dow{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);}
.card__tile .day{font-family:var(--serif);font-size:64px;font-weight:600;line-height:1;margin:6px 0 2px;}
.card__tile .mon{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.card__tile .mon--sm{font-size:15px;letter-spacing:.1em;padding:8px 10px 0;}
.card__tile .yr{font-size:13px;letter-spacing:.14em;margin-top:6px;color:var(--ink-soft);}

/* Tile A, soft: the same quiet shade as the price panel */
.card__tile{background:var(--soft);}

.card__body{padding:24px 28px;}
.card__body h3{font-size:28px;}
.card__body .sub{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-soft);margin:2px 0 4px;}
.card__body .with{font-weight:700;font-size:15.5px;margin:0 0 12px;}
.card__body dl{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:0;font-size:15px;}
.card__body dt{color:var(--ink-soft);}
.card__body dd{margin:0;}
.card__buy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:24px 24px;border-left:1px solid var(--rule);background:var(--soft);}
.card__buy .price{font-family:var(--serif);font-size:36px;font-weight:600;line-height:1;}
.card__buy .price small{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:6px;letter-spacing:.02em;}
.card__buy .more{font-size:14.5px;font-weight:700;}
.more-dates{text-align:center;color:var(--ink-soft);font-size:16px;margin:26px auto 0;max-width:620px;}

/* ---------- two columns: who it is for, what it is not ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:30px 32px;}
.panel h3{font-size:26px;margin-bottom:10px;}
.panel p{margin:0 0 12px;font-size:16px;}
.panel p:last-child{margin-bottom:0;}
.panel--tint{background:var(--tint);border-color:var(--tint-rule);}

/* ---------- presenter ---------- */
.bio{display:grid;grid-template-columns:200px minmax(0,1fr);gap:34px;align-items:start;}
.bio img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;}
.bio h3{font-size:30px;}
.bio .license{font-size:14.5px;color:var(--ink-soft);margin:4px 0 14px;}
.bio p{margin:0 0 14px;}

/* ---------- objectives, agenda ---------- */
.objectives{margin:0;padding:0;list-style:none;counter-reset:obj;display:flex;flex-direction:column;gap:12px;}
.objectives li{counter-increment:obj;position:relative;padding-left:48px;line-height:1.65;}
.objectives li::before{content:counter(obj);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--tint);border:1px solid var(--tint-rule);color:var(--accent-2);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.agenda{display:grid;grid-template-columns:92px minmax(0,1fr);border-top:1px solid var(--rule);}
.agenda .t,.agenda .b{padding:15px 0;border-bottom:1px solid var(--rule);}
.agenda .t{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.1;}
.agenda .t small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-top:4px;}
.agenda .b h4{font-family:var(--sans);font-size:16.5px;font-weight:800;margin:2px 0 4px;}
.agenda .b p{margin:0;font-size:15.5px;color:var(--ink-soft);}
.agenda .break{background:var(--soft);}
.agenda .t.break{padding-left:10px;}

/* ---------- facts strip on the course page ---------- */
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper);}
.facts > div{padding:16px 16px;border-left:1px solid var(--rule);}
.facts > div:first-child{border-left:0;}
.facts .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);}
.facts .v{display:block;font-weight:700;font-size:15.5px;line-height:1.4;margin-top:4px;}
.facts .s{display:block;font-size:13px;color:var(--ink-soft);line-height:1.45;margin-top:2px;}

/* ---------- questions, answered on the page ---------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:860px;margin:0 auto;}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:0 22px;}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:16.5px;padding:17px 30px 17px 0;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:24px;font-weight:400;color:var(--accent-2);}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:0 0 16px;font-size:16px;color:var(--ink-soft);}

/* ---------- other dates list on the course page ---------- */
.dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.dates li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px;}
.dates li b{font-weight:800;}
.dates li span{color:var(--ink-soft);}

/* ---------- register block (Grechko's ticket block, with the price shown) ---------- */
.register{border-radius:20px;overflow:hidden;border:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.register__side{padding:36px 36px;background:var(--tint);}
.register__side h2{font-size:34px;margin-bottom:6px;}
.register__side .price{font-family:var(--serif);font-size:48px;font-weight:600;line-height:1;margin:14px 0 4px;}
.register__side dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:18px 0 0;font-size:15.5px;}
.register__side dt{color:var(--ink-soft);}
.register__side dd{margin:0;}
.register__form{padding:36px 36px;background:var(--paper);}
.register__form h3{font-size:26px;margin-bottom:8px;}
.register__form p{font-size:15.5px;margin:0 0 14px;color:var(--ink-soft);}
.field{display:block;margin-bottom:12px;}
.field span{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px;}
.field input{width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--soft);color:var(--ink);}

/* ---------- provider and contact ---------- */
.provider{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 28px;}
.provider .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:3px;}
.provider > div{font-size:15.5px;line-height:1.55;}

/* ---------- policies page ---------- */
.policy{padding:26px 0;border-top:1px solid var(--rule);}
.policy:first-child{border-top:0;padding-top:0;}
.policy h3{font-size:26px;margin-bottom:8px;}
.policy p{margin:0 0 12px;}
.policy p:last-child{margin-bottom:0;}

/* ---------- registered page ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:18px;}
.steps li{counter-increment:st;display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:24px 26px;}
.steps li::before{content:counter(st);width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--serif);font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.steps h3{font-size:24px;margin-bottom:6px;}
.steps p{margin:0 0 10px;font-size:16px;}
.steps p:last-child{margin-bottom:0;}

/* ---------- footer ---------- */
.footer{background:var(--foot);padding:52px 0 26px;font-size:15px;margin-top:0;}
.footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;}
.footer .name{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 8px;}
.footer .lbl{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:0 0 10px;}
.footer p{margin:0 0 8px;color:var(--ink-soft);}
.footer .links{display:flex;flex-direction:column;gap:6px;}
.footer .links a{color:var(--ink);text-decoration:none;}
.footer .links a:hover{text-decoration:underline;}
.footer__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--rule);margin-top:34px;padding-top:18px;font-size:13.5px;color:var(--ink-soft);}
.footer__approval{font-size:13.5px;color:var(--ink-soft);margin-top:26px;max-width:760px;line-height:1.6;}

/* ---------- phone width ---------- */
@media (max-width:980px){
  .card{grid-template-columns:170px minmax(0,1fr);}
  .card__buy{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .facts > div:nth-child(4){border-left:0;}
  .facts > div:nth-child(n+4){border-top:1px solid var(--rule);}
}
@media (max-width:760px){
  body{font-size:16.5px;}
  .header{position:static;}
  .header__inner{flex-direction:column;align-items:center;gap:12px;}
  .lockup{align-items:center;}
  .nav{justify-content:center;gap:4px 18px;font-size:14.5px;}
  .topbar__inner{justify-content:center;text-align:center;}
  .topbar__contact{justify-content:center;}
  .topbar .addr{display:none;}
  .hero__inner{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:44px;}
  .hero__photo{max-width:230px;margin:0 auto;}
  .hero .copy{text-align:center;}
  .hero .actions{justify-content:center;}
  .hero .lead{margin-left:auto;margin-right:auto;}
  .section{padding:46px 0;}
  .note{padding:24px 20px;}
  .card{grid-template-columns:minmax(0,1fr);}
  .card__tile{min-height:0;padding:16px;border-right:0;border-bottom:1px solid var(--rule);}
  .card__tile .leaf{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 12px;}
  .card__tile .day{font-size:40px;margin:0;}
  .card__body{padding:20px 20px;}
  .card__buy{padding:18px 20px;}
  .pair{grid-template-columns:1fr;}
  .panel{padding:24px 22px;}
  .bio{grid-template-columns:1fr;}
  .bio img{max-width:200px;}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .facts > div{border-left:0;}
  .facts > div:nth-child(even){border-left:1px solid var(--rule);}
  .facts > div:nth-child(n+3){border-top:1px solid var(--rule);}
  .agenda{grid-template-columns:70px minmax(0,1fr);}
  .agenda .t{font-size:20px;}
  .register{grid-template-columns:1fr;}
  .register__side,.register__form{padding:26px 22px;}
  .footer__cols{grid-template-columns:1fr;}
  .steps li{grid-template-columns:1fr;padding:20px;}
}

/* ---------- the notify-me form ---------- */
.register__form form{margin:0;}
.register__form button.btn{font-family:var(--sans);}
.register__form button.btn:disabled{opacity:.7;cursor:default;}
.form-status{font-size:14.5px;margin:12px 0 0;min-height:1.2em;}
.form-status.is-error{color:#A11B1B;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- placeholders ----------
   Anything not yet confirmed carries this marker, on the live site too,
   until the person named in institute-site/README.md resolves it. Amber
   is in no part of the Clay palette, so a placeholder never reads as
   design. The label comes from the element's data-ph attribute. */
.ph{background:rgba(212,131,10,.14);border-bottom:2px dashed #D4830A;padding:0 5px;border-radius:3px 3px 0 0;}
.ph::after{content:"to confirm";margin-left:7px;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9A5E06;vertical-align:middle;white-space:nowrap;}
.ph[data-ph]::after{content:attr(data-ph);}

[hidden]{display:none !important;}
.nowrap{white-space:nowrap;}