/* Shared base for joannahortonmcpherson.com and trueinfluencemethod.com. Palette: Branding Kit Scheme #5.
   Older note: palette and type from TIM brand standards (TIM Product Plan, Jul 2026): Navy #0F203D, Gold #B8924A, Light Gold #D4B478, Cream #F8F4EC; type per Branding Kit Mar 2025 (Playfair Display, Montserrat, Cormorant Garamond).
   True Influence Method site preview v2 — Meet-Matt-style layout on brand kit draft one.
   Layout: full-bleed photo heroes with overlaid uppercase titles, alternating photo/text story rows,
   praise cards, opt-in bands, press strip, rich footer. */
:root{
  --navy:#1F2A44; --navy-deep:#161F35; --gold:#C9A876; --gold-light:#E2CFA6; --linen:#F8F4EC; --espresso:#3A2A1E; --apricot:#E2CFA6; --stone:#5E656B; --sage:#A3B5A5; --blush:#E8D4C4; --slate:#5E656B;
  --bg:#F8F4EC; --fg:#1F2A44; --muted:#5E656B; --line:#DED5C7; --plate:#F0E8DC; --card:#FFFDF8;
  --display:"Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --body:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script:"Allura", "Brush Script MT", cursive;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.7}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:1140px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.narrow{max-width:760px}

/* Matt-style headings: bold, uppercase, tracked sans; serif kept for quotes */
.h-xl{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;font-size:clamp(38px,6.6vw,78px)}
.h-lg{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1.15;font-size:clamp(26px,3.6vw,40px)}
.h-md{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;font-size:clamp(18px,2vw,22px)}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.sub-caps{font-size:clamp(14px,1.6vw,18px);letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.lead{font-size:18px;line-height:1.7}
.muted{color:var(--muted)}
.serif-q{font-family:var(--display);font-style:italic;font-weight:400}

.preview-flag{background:var(--gold);color:var(--navy);font-size:12px;text-align:center;padding:6px 16px;letter-spacing:.04em}

/* header */
.site-head{background:var(--navy);color:var(--linen);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.wordmark{font-weight:500;letter-spacing:.3em;font-size:11px;line-height:1.45;text-transform:uppercase;text-decoration:none;color:var(--linen)}
.wordmark i{display:block;width:22px;height:2px;background:var(--gold);margin-top:6px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.nav a{text-decoration:none;color:var(--linen);padding-block:4px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--gold)}
.nav .nav-cta{border:1.5px solid var(--gold);padding:7px 12px;color:var(--gold);background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}

/* buttons */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border:2px solid var(--navy);text-decoration:none;cursor:pointer;background:none;color:var(--fg);text-align:center}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-apricot{background:var(--apricot);border-color:var(--apricot);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--linen)}
.btn-ghost-light{border-color:var(--linen);color:var(--linen)}
.btn-block{display:block;width:100%}
.btn:focus-visible,.nav a:focus-visible,.nav .nav-cta:focus-visible,.chip:focus-visible,.q-opt:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* full-bleed photo hero with overlay */
.photo-hero{position:relative;min-height:clamp(440px,72vh,720px);display:flex;align-items:flex-end;color:var(--linen);overflow:hidden}
.photo-hero .ph-img{position:absolute;inset:0;background:var(--hero-img,linear-gradient(150deg,#D4B478 0%,#B8924A 30%,#3A2A1E 65%,#0F203D 100%))}
.photo-hero .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,32,61,.05) 30%,rgba(15,32,61,.88) 100%)}
.photo-hero .ph-label{position:absolute;top:18px;right:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px dashed rgba(245,240,230,.6);padding:6px 10px;color:var(--linen)}
.photo-hero .wrap{position:relative;width:100%;padding-block:clamp(40px,7vw,80px);display:grid;gap:16px}
.photo-hero p{max-width:60ch;color:#E6E1D6}

/* sections */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:12px;margin-bottom:36px;justify-items:center;text-align:center}
.sec-head p{max-width:62ch;color:var(--muted)}
.dark{background:var(--navy);color:var(--linen)}
.dark .muted,.dark p{color:#C9CCD6}
.plate{background:var(--plate)}
.espresso{background:var(--espresso);color:var(--linen)}
.espresso p{color:#E8DCCB}

/* photo placeholder blocks */
.photo{background:linear-gradient(160deg,#D4B478 0%,#B8924A 40%,#3A2A1E 100%);aspect-ratio:4/5;max-width:100%;display:flex;align-items:flex-end;padding:16px;color:#F8F4EC;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.photo.wide{aspect-ratio:4/3}
.photo.cool{background:linear-gradient(160deg,#6E7076 0%,#0F203D 100%)}
.photo.warm{background:linear-gradient(160deg,#F8F4EC 0%,#B8924A 55%,#3A2A1E 100%)}

/* split + alternating story rows */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,72px);align-items:center}
.split .copy{display:grid;gap:18px;min-width:0}
.story{display:grid;gap:clamp(56px,8vw,96px)}
.story .split:nth-child(even) .photo{order:2}
@media (max-width:780px){.split{grid-template-columns:1fr}.story .split:nth-child(even) .photo{order:0}}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* signature divider */
.signature{font-family:var(--script);font-size:clamp(46px,7vw,72px);color:var(--gold);text-align:center;line-height:1;padding-block:8px}

/* praise */
.praise{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.pcard{background:var(--card);border:1px solid var(--line);padding:28px;display:grid;gap:16px;align-content:start}
.pcard q{font-weight:600;font-size:17px;line-height:1.5;quotes:"“" "”"}
.who{display:flex;gap:12px;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.who b{display:block;font-weight:600;font-size:14px}
.who span{font-size:12.5px;color:var(--muted)}

/* opt-in bands */
.optin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.optin .copy{display:grid;gap:14px;min-width:0}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.form input[type=text],.form input[type=email]{font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.form .check{display:flex;gap:8px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:300;font-size:13px}
.form .done{font-weight:500;color:var(--gold)}
@media (max-width:780px){.optin{grid-template-columns:1fr}}
@media (max-width:420px){.form .two{grid-template-columns:1fr}}

/* press strip */
.press{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px;align-items:center}
.press span{font-family:var(--display);font-size:clamp(17px,2vw,22px);opacity:.85;white-space:nowrap}
.press span.sans{font-family:var(--body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(13px,1.5vw,16px)}

/* offer cards */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.offer{background:var(--card);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;min-width:0}
.offer .photo{aspect-ratio:16/10}
.offer .body{padding:22px;display:grid;gap:10px;align-content:start}
.offer .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.offer .price{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.offer p{font-size:14.5px;color:var(--muted)}
.offer .btn{justify-self:start;margin-top:6px}
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:center}
@media (max-width:780px){.band{grid-template-columns:1fr}}

/* quiz banner card */
.quiz-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;border:2px solid var(--gold);padding:22px 26px;background:var(--card)}
.quiz-card b{font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* footer */
.site-foot{background:var(--navy);color:#C9CCD6;font-size:13.5px}
.site-foot .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding-block:56px 32px}
.site-foot b{color:var(--linen);font-weight:600;display:block;margin-bottom:8px;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.site-foot a{display:block;text-decoration:none;color:#C9CCD6;padding-block:2px}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:36px;height:36px;border:1px solid #33415E;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.04em}
.site-foot .rel{border-top:1px solid #26314A;padding-block:22px;font-family:var(--display);font-style:italic;color:var(--linen)}
.site-foot .legal{border-top:1px solid #26314A;padding-block:16px;font-size:12px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ebook covers */
.cover{aspect-ratio:2/3;max-width:100%;display:grid;grid-template-rows:auto 1fr auto;padding:16px 14px;gap:10px;position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:8px;border:1px solid currentColor;opacity:.25;pointer-events:none}
.cover .series{font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.85}
.cover .t{font-family:var(--display);font-size:clamp(17px,2vw,21px);line-height:1.15;align-self:center}
.cover .by{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cover .rule{display:block;width:26px;height:2px;background:var(--gold);margin-top:10px}
.c-char{background:var(--linen);color:var(--navy)}
.c-conn{background:var(--espresso);color:var(--linen)}
.c-cont{background:var(--navy);color:var(--linen)}
.c-full{background:linear-gradient(165deg,#D4B478 0%,#B8924A 38%,#3A2A1E 72%,#0F203D 100%);color:var(--linen)}

/* quiz modal */
.qm{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(8,16,32,.62)}
.qm-box{background:var(--bg);color:var(--fg);width:min(640px,100%);max-height:calc(100% - 32px);overflow:auto;display:grid;grid-template-rows:auto 1fr;border-top:5px solid var(--gold)}
.qm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.qm-top .eyebrow{color:var(--muted)}
.qm-x{font:inherit;font-size:22px;line-height:1;background:none;border:none;color:var(--fg);cursor:pointer;padding:4px 8px}
.qm-body{padding:26px 22px 28px;display:grid;gap:18px}
.qm-progress{height:3px;background:var(--line)}
.qm-progress i{display:block;height:100%;background:var(--gold);transition:width .3s ease}
.q-opts{display:grid;gap:10px}
.q-opt{font:inherit;text-align:left;padding:14px 16px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-size:15px;line-height:1.45}
.q-opt:hover{border-color:var(--gold)}
.q-result{display:grid;gap:14px}
.q-phase{display:inline-block;border:1px solid var(--gold);justify-self:start;padding:6px 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.q-recs{display:grid;gap:10px}
.q-rec{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px;border:1px solid var(--line);background:var(--card);align-items:baseline}
.q-rec .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);grid-row:span 2}
.q-rec a{font-weight:600;text-decoration:none}
.q-rec span{font-size:13.5px;color:var(--muted)}
@media (max-width:480px){.q-rec{grid-template-columns:1fr}.q-rec .k{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.qm-progress i{transition:none}}

/* keep outline buttons visible on dark surfaces and in dark mode */
.dark .btn:not(.btn-gold):not(.btn-apricot):not(.btn-ghost-light),.espresso .btn:not(.btn-gold):not(.btn-apricot){border-color:var(--gold);color:var(--linen)}
.tile-note{font-size:12.5px;color:var(--muted)}

/* real photos */
.photo.img{background:var(--img) var(--pos,center)/cover no-repeat,var(--plate);font-size:0;padding:0}
.dark .offer{color:var(--fg)}.dark .offer p{color:var(--muted)}
.photo-hero .ph-img::after{background:linear-gradient(180deg,rgba(15,32,61,.15) 0%,rgba(15,32,61,.35) 40%,rgba(15,32,61,.9) 100%)}

/* Brand type, per the Women of Influence Branding Kit (March 2025):
   Primary  Playfair Display   headers, taglines (wordmark in Playfair Display SC)
   Secondary Montserrat        body text, subheadings, navigation, buttons
   Accent   Cormorant Garamond quotes and emotional moments */
:root{--heading:"Playfair Display",Georgia,"Times New Roman",serif;--heading-sc:"Playfair Display SC","Playfair Display",Georgia,serif;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;--display:"Cormorant Garamond",Garamond,Georgia,serif}
:root main :is(h1,h2,h3){font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.2}
:root .h-xl{font-family:var(--heading-sc);font-weight:400;text-transform:none;letter-spacing:.03em;line-height:1.05}
:root .h-lg{font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.2}
:root .h-md{font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3;font-size:clamp(19px,2.1vw,23px)}
.wordmark{font-family:var(--heading-sc);font-weight:400;letter-spacing:.14em;font-size:15px;line-height:1.25;text-transform:none}
.stat b{font-family:var(--heading)}
.cover .t{font-family:var(--heading)}
.serif-q,blockquote,.site-foot .rel{font-family:var(--display)}
.serif-q,blockquote{font-size:1.08em}
.lead{font-weight:300}
.photo-hero .eyebrow{color:var(--gold-light);text-shadow:0 1px 8px rgba(15,32,61,.6)}

/* ---- Companion-site components ---- */
.site-head .wrap{align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--linen)}
.brand img{width:46px;height:auto;display:block}
.brand .bn{display:grid;gap:2px}
.brand .bn b{font-family:var(--heading-sc);font-weight:400;font-size:17px;letter-spacing:.08em;line-height:1.15}
.brand .bn small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.nav a.ext::after{content:" ↗";font-size:.9em;color:var(--gold)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--gold);color:var(--gold);font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;cursor:pointer}
@media (max-width:900px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}
.foot-brands{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;padding-top:40px}
.foot-brands a{display:flex !important;align-items:center;gap:10px;color:var(--linen) !important}
.foot-brands img{width:38px}
.foot-brands b{font-family:var(--heading-sc);font-weight:400;font-size:16px;letter-spacing:.06em;margin:0 !important;color:inherit !important;text-transform:none !important}
.cross{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center}
.cross .copy{display:grid;gap:16px;min-width:0}
@media (max-width:780px){.cross{grid-template-columns:1fr}}
.cross .roundel{width:min(260px,70%);justify-self:center}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;opacity:.9}

/* header: keep one row on laptops, menu button below 1100px */
.nav{gap:6px 16px;font-size:11.5px}
@media (max-width:1100px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}

/* ---- trueinfluencemethod.com: navy ground, cream type, gold roundel; one cream "Created by Joanna" band ---- */
:root{--bg:#1F2A44; --fg:#F8F4EC; --muted:#C3C8D4; --line:#3A4560; --plate:#253252; --card:#253252; color-scheme:dark}
.site-head{background:var(--navy-deep);border-bottom:1px solid var(--line)}
.dark{background:var(--navy-deep)}
.site-foot{background:var(--navy-deep)}
.btn{border-color:var(--linen);color:var(--linen)}
.btn-navy{background:var(--linen);border-color:var(--linen);color:var(--navy)}
.btn-gold{color:var(--navy)}
.tile{background:var(--plate)} .tile:hover{background:#2C3A5E}
.c-cont{box-shadow:inset 0 0 0 1px var(--gold)}
.form input[type=text],.form input[type=email]{background:#18213A;border-color:var(--line)}
.quiz-card{border-color:var(--gold)}
.offer{border-color:var(--line)}
.photo:not(.img){background:linear-gradient(160deg,#2C3A5E 0%,#1F2A44 60%,#161F35 100%);border:1px solid var(--line)}
.creamband{background:var(--linen);color:var(--navy)}
.creamband .muted,.creamband p{color:var(--slate)}
.creamband .btn{border-color:var(--navy);color:var(--navy)}
.creamband .btn-navy{background:var(--navy);color:var(--linen)}
.creamband .eyebrow{color:#9C7F45}
.creamband .bn-sc{font-family:var(--heading-sc);font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:.03em}
.phases{border:1px solid var(--line)}
.hero-roundel{width:clamp(70px,9vw,104px);height:auto}
.qm-box{background:var(--plate)}
.q-opt,.q-rec{background:#1B2540}

/* ---- Wordmarks matched to the logo files ----
   Joanna: Playfair Display caps, JOANNA semibold over HORTON MCPHERSON regular, both widely tracked (JHM logo files).
   TIM: Marcellus caps in the roundel's gold, the closest web face to the roundel lettering. */
:root{--logo-gold:#F2A93B}
.wm-jhm{display:inline-grid;justify-items:center;gap:7px;line-height:1;font-family:"Playfair Display",Georgia,serif;text-transform:uppercase;color:var(--linen);text-decoration:none}
.wm-jhm .a{font-weight:600;font-size:21px;letter-spacing:.3em;margin-right:-.3em}
.wm-jhm .b{font-weight:400;font-size:10.5px;letter-spacing:.34em;margin-right:-.34em}
.wm-tim{font-family:"Marcellus","Cinzel",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.16em;color:var(--logo-gold);font-size:15px;line-height:1.15}
.brand .bn small{font-family:var(--body)}
.foot-brands .wm-jhm .a{font-size:17px}.foot-brands .wm-jhm .b{font-size:9px}
.foot-brands .wm-tim{font-size:14px}
.foot-brands a.wm-jhm{display:inline-grid !important;gap:6px}
/* one-row header on wide screens; menu button below 1200px */
@media (min-width:1201px){
 .site-head .wrap{flex-wrap:nowrap}
 .nav{flex-wrap:nowrap;white-space:nowrap;letter-spacing:.08em;font-size:11px;gap:18px}
}
@media (max-width:1200px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}
.site-head .wm-jhm,.site-head .brand{flex:none}.wm-jhm span,.wm-tim{white-space:nowrap}

/* ---- front-door links ---- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.door{background:var(--plate);padding:26px 22px 28px;display:grid;gap:8px;align-content:start;text-decoration:none;min-width:0}
.door:hover{background:#2C3A5E}
.door h3{font-family:var(--heading);font-weight:700;font-size:21px}
.door p{font-size:14.5px;color:var(--muted)}
.door .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:4px;color:var(--gold-light)}
.site-foot .cols{display:none}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:40px}
.voices figure{margin:0;border-top:2px solid var(--gold);padding-top:18px;display:grid;gap:12px;align-content:start}
.voices blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:21px;line-height:1.35}
.cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.note{font-size:14px;color:var(--muted);text-align:center}
.doors{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:760px){.doors{grid-template-columns:1fr}}

/* five phases: inset, punchy track */
.ptrack{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:none}
.pc{background:var(--plate);border-top:4px solid var(--pc);padding:22px 18px 24px;display:grid;gap:14px;align-content:start;min-width:0;transition:transform .2s ease}
.pc:hover{transform:translateY(-3px)}
.pn{font-family:var(--heading);font-weight:700;font-size:clamp(40px,4.4vw,56px);line-height:.9;color:var(--pc)}
.pc h3{font-family:var(--heading);font-weight:700;font-size:19px;line-height:1.2;color:var(--linen)}
.pc p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px}
@media (max-width:900px){
 .ptrack{grid-template-columns:1fr;gap:8px;max-width:560px}
 .pc{grid-template-columns:64px minmax(0,1fr);align-items:center;border-top:0;border-left:4px solid var(--pc);padding:16px 18px;gap:14px}
 .pn{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.pc{transition:none}.pc:hover{transform:none}}

/* client stories */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.vgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vgrid{grid-template-columns:1fr}}
.vstory{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#2C3A5E 0%,#1F2A44 55%,#161F35 100%);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;text-decoration:none;color:var(--linen);overflow:hidden;min-width:0}
.vstory:hover{border-color:var(--gold)}
.vstory .play{position:absolute;top:50%;left:50%;width:62px;height:62px;margin:-46px 0 0 -31px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center}
.vstory .play::after{content:"";border-left:16px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.vstory .vn{font-family:var(--heading);font-weight:700;font-size:20px}
.vstory .vr{font-size:12.5px;color:var(--muted);line-height:1.4}
.vstory .go{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-light);margin-top:6px}

/* three ways to begin: gold band with photo cards */
.ways{background:var(--gold);color:var(--navy)}
.ways .eyebrow{color:var(--navy);opacity:.75}
.ways .h-lg{color:var(--navy)}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.wgrid{grid-template-columns:1fr;max-width:480px;margin-inline:auto;width:100%}}
.way{background:var(--linen);color:var(--navy);text-decoration:none;display:grid;grid-template-rows:auto 1fr;box-shadow:0 18px 40px -22px rgba(22,31,53,.55);transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.way:hover{transform:translateY(-4px);box-shadow:0 26px 48px -22px rgba(22,31,53,.7)}
.wimg{display:block;aspect-ratio:4/3;background-size:cover;background-position:center}
.wb{display:grid;gap:10px;padding:22px 22px 24px;align-content:start}
.wk{font-family:var(--heading);font-weight:700;font-size:23px;line-height:1.15}
.wt{font-size:14.5px;color:var(--slate)}
.way .btn{justify-self:start;margin-top:6px;padding:12px 18px;font-size:11px;background:var(--navy);color:var(--linen);border-color:var(--navy)}
@media (prefers-reduced-motion:reduce){.way{transition:none}.way:hover{transform:none}}

/* phase cards: one teal progression, white (Phase 1) to dark teal (Phase 5) */
.pc{background:var(--pc);border-left:0;border-top:0;box-shadow:inset 0 0 0 1px rgba(248,244,236,.12)}
.pc .pn,.pc h3{color:var(--pt,var(--navy))}
.pc p{color:var(--pt,var(--navy));opacity:.82}
[hidden]{display:none!important}.qm[hidden]{display:none!important}

/* client stories: always a trio on desktop, faces in frame */
.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.vgrid{grid-template-columns:1fr}}
.vstory.hasimg{aspect-ratio:auto;padding:0;justify-content:flex-start;gap:0}
.vstory .vimg{position:relative;display:block;aspect-ratio:4/3;background-size:cover;background-position:center 30%}
.vstory.hasimg .play{top:auto;left:auto;right:14px;bottom:14px;margin:0;width:50px;height:50px;background:rgba(22,31,53,.65)}
.vstory .vtext{display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px}

/* ==========================================================================
   LAYOUT SYSTEM (both sites)
   1. Rule of thirds: two-column sections divide the width into thirds.
      An image or form takes one third, the words take two thirds, and
      hero text sits inside the left two thirds of the photo.
   2. Alignment: cards in a row share the same internal rows (subgrid), so
      eyebrows, titles, descriptions, prices and buttons line up across the
      row no matter how long each card's text is. A missing line keeps its
      slot, so nothing shifts.
   ========================================================================== */

/* ---------- 0. Headings use the full width of their column ----------
   Balanced wrapping split headings into two short equal lines, which looked
   narrow on wide screens. Pretty wrapping fills the line and only avoids a
   lonely last word. */
h1,h2,h3{text-wrap:pretty}

/* ---------- 1. Rule of thirds (laptop, tablet and wide phone; stacks below 640px) ---------- */
@media (min-width:641px){
  .story .split:nth-child(even) .photo{order:2}
  /* image or cover first: image one third, words two thirds */
  .split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
  /* image last (or alternated to the right): words two thirds, image one third */
  .split:has(> .photo:last-child),
  .split:has(> .cover:last-child),
  .story .split:nth-child(even){grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important}
  /* main offer plus a side note: main two thirds, note one third */
  .split:has(> #subscribe){grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important}
  /* media kit: bio one third, approved photos two thirds */
  .split:has(> .kit){grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
  /* sign-up blocks: invitation one third, form two thirds */
  .optin{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* emblem one third, words two thirds */
  .cross{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* hero copy sits inside the left two thirds of the photo */
  .photo-hero .wrap > *{max-width:66.666%}
  .photo-hero .wrap .row{max-width:none}
}

/* ---------- 2. Aligned cards ---------- */
@supports (grid-template-rows:subgrid){

  /* Shop: workbooks (cover / flag / title / description / price+button / phase) */
  .shelf{align-items:start;row-gap:0!important}
  .shelf > .book{margin-bottom:36px}
  .shelf > .book{grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:stretch}
  .shelf > .book > .wbc,.shelf > .book > .gp-cover{margin-bottom:16px}
  .shelf > .book > .wbc,.shelf > .book > .gp-cover{grid-row:1}
  .shelf > .book > .info{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
  .shelf > .book > .info > .flag{margin-bottom:8px}
  .shelf > .book > .info > .sub{margin-top:8px}
  .shelf > .book > .info > .buy{margin-top:12px}
  .shelf > .book > .info > .ph{margin-top:8px}
  .shelf > .book > .info > .flag{grid-row:1;align-self:end}
  .shelf > .book > .info > h3{grid-row:2}
  .shelf > .book > .info > .sub{grid-row:3}
  .shelf > .book > .info > .buy{grid-row:4;align-self:start}
  .shelf > .book > .info > .ph{grid-row:5}

  /* Shop: merch (photo / name / description / price+button) */
  .mgrid > .prod{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .mgrid > .prod > .pimg{grid-row:1}
  .mgrid > .prod > .pb{grid-row:2 / span 3;display:grid;grid-template-rows:subgrid;row-gap:8px}
  .mgrid > .prod > .pb > h3{grid-row:1}
  .mgrid > .prod > .pb > p{grid-row:2}
  .mgrid > .prod > .pb > .buy{grid-row:3;align-self:end;margin-top:0}

  /* Programs and advising (photo / kind / title / price / description / button) */
  .offers > .offer{grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .offers > .offer > .photo{grid-row:1}
  .offers > .offer > .body{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
  .offers > .offer > .body > h3{margin-top:10px}
  .offers > .offer > .body > .price{margin-top:10px}
  .offers > .offer > .body > p{margin-top:10px}
  .offers > .offer > .body > .kind{grid-row:1}
  .offers > .offer > .body > h3{grid-row:2}
  .offers > .offer > .body > .price{grid-row:3}
  .offers > .offer > .body > p{grid-row:4}
  .offers > .offer > .body > .btn{grid-row:5;align-self:end;margin-top:14px}

  /* Doors (eyebrow / title / description / link) */
  .doors > .door{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .doors > .door > .eyebrow{margin-bottom:8px}
  .doors > .door > p{margin-top:8px}
  .doors > .door > .go{margin-top:12px}
  .doors > .door > .eyebrow{grid-row:1}
  .doors > .door > h3{grid-row:2}
  .doors > .door > p{grid-row:3}
  .doors > .door > .go{grid-row:4;align-self:end}

  /* Pillars and book parts (label / title / description) */
  .pillars > .pillar{grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}

  /* Client quotes (quote / name) */
  .voices > figure{grid-row:span 2;grid-template-rows:subgrid;row-gap:12px}
  .voices > figure > figcaption{align-self:end}

  /* Plans and contact cards: action sits on one line across the row */
  .plans > .plan,.two-up > .contact-card,.two-up > .panel{align-content:stretch}
  .plans > .plan > .btn,.plans > .plan > .form,.two-up > .contact-card > .btn,.two-up > .panel > .btn{align-self:end}
}

/* Five phases (number / title / line), on wide screens where they sit in a row */
@media (min-width:861px){
  @supports (grid-template-rows:subgrid){
    .ptrack > .pc{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}
    .ptrack > .pc > div{grid-row:2 / span 2;display:grid;grid-template-rows:subgrid;row-gap:6px}
    .ptrack > .pc > div > p{margin-top:0}
  }
}

/* Client story cards: the "Watch" link sits on the same line in every card */
.vgrid{align-items:stretch}
.vgrid > .vstory:not(.hasimg){aspect-ratio:auto;min-height:clamp(200px,24vw,270px)}
.vstory.hasimg{height:100%}
.vstory.hasimg .vtext{flex:1}
.vstory .vtext .go{margin-top:auto}
.vgrid > .vstory:not(.hasimg){justify-content:flex-end}

/* Library rows: download buttons line up */
.lib{align-items:stretch}
.lib > .lib-item .meta{height:100%;grid-template-rows:auto auto 1fr}
.lib > .lib-item .meta .btn{align-self:end}
.vids{align-items:stretch}
.vids > .vid{grid-template-rows:auto 1fr}
.vids > .vid .meta{grid-template-rows:auto auto 1fr auto}

/* ---------- 3. Tablet and narrow laptop (641-1000px): grids divide evenly ---------- */
@media (min-width:641px) and (max-width:1000px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .offers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Inquiry and speaking forms */
.qm-box.inq{max-width:640px;max-height:min(92vh,880px);overflow:auto}
.inq .qm-body{display:grid;gap:14px}
.inq-note{font-size:14.5px;color:var(--muted)}
.inq-form{display:grid;gap:14px}
.inq-form textarea,.inq-form select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);background:var(--card,#fff);color:inherit}
.yn{border:0;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 18px;align-items:center}
.yn legend{float:left;font-size:14.5px;line-height:1.45;padding:0}
.yn label{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;cursor:pointer}
.yn input{width:18px;height:18px;accent-color:var(--gold)}
.inq-err{font-size:13px;color:#B5452F}
@media (max-width:640px){.yn{grid-template-columns:auto auto 1fr}.yn legend{grid-column:1/-1;width:100%}}
.inq-form input:not([type=radio]),.inq-form select,.inq-form textarea{font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--line);background:#18213A;color:var(--fg);width:100%;min-height:48px;border-radius:0}
.inq-form input[type=date]{color-scheme:dark}
.inq-form label{display:grid;gap:6px}
.inq-form .yn label{display:flex;align-items:center;gap:8px;grid-template-columns:none}

/* Distinct footers: each site leads with its own brand; the companion site is a small link */
.site-foot .foot-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:44px;padding-bottom:28px}
.site-foot .foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.site-foot .foot-links a{display:inline;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.site-foot .legal .companion{display:inline-flex;align-items:center;gap:8px}
.site-foot .legal a{display:inline}
.site-foot .legal .companion img{width:22px}
.foot-jhm{background:#EFE7DA;color:#3D4660}
.foot-jhm .wm-jhm{color:#1F2A44}
.foot-jhm .wm-jhm .a{font-size:24px}.foot-jhm .wm-jhm .b{font-size:11px}
.foot-jhm a{color:#1F2A44}
.foot-jhm .rel{border-top:1px solid #D8CDBB;color:#1F2A44}
.foot-jhm .legal{border-top:1px solid #D8CDBB;color:#5A6378}
.foot-jhm .legal .companion a{color:#8A6D35;font-weight:600}
.foot-tim .foot-emblem{display:inline-flex!important;align-items:center;gap:14px;text-decoration:none}
.foot-tim .foot-emblem img{width:58px}
.foot-tim .foot-emblem .wm-tim{font-size:17px}
.foot-tim .legal .companion a{color:var(--gold-light,#E9D9B8);font-weight:600}
@media (max-width:640px){.site-foot .foot-main{flex-direction:column;align-items:flex-start}}

/* Client video cards and YouTube player */
button.vstory{font:inherit;text-align:left;cursor:pointer;width:100%;color:var(--linen)}
.vstory.soon{cursor:default}
.vstory.soon .play{opacity:.35}
.vstory.soon .go{color:var(--muted)}
.yv .yv-box{width:min(960px,94vw);background:var(--navy-deep,#161F35);border-top:3px solid var(--gold)}
.yv .qm-top{padding:14px 18px}
.yv-frame{position:relative;aspect-ratio:16/9;background:#000}
.yv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* quote cards */
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.qcard{margin:0;background:var(--card,#26324F);border:1px solid var(--line);border-top:3px solid var(--gold);padding:28px 26px 24px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-width:0}
@supports (grid-template-rows:subgrid){.qgrid{grid-auto-rows:auto 1fr auto;row-gap:0}.qcard{grid-row:span 3;grid-template-rows:subgrid;row-gap:14px;margin-bottom:22px}}
.qcard .qmark{display:block;font-family:var(--display);font-size:64px;line-height:.6;color:var(--gold);height:30px}
.qcard blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,21px);line-height:1.45;color:var(--linen)}
.qcard figcaption{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;border-top:1px solid rgba(201,168,118,.25);padding-top:16px;min-height:72px}
.qa{width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center 25%;display:grid;place-items:center}
.qa.ini{background:#2C3A5E;border:1px solid var(--gold);font-family:var(--heading);font-size:18px;color:var(--gold);letter-spacing:.04em}
.qw{display:grid;gap:3px;min-width:0}
.qn{font-family:var(--heading);font-weight:700;font-size:17px;color:var(--linen)}
.qr{font-size:12.5px;line-height:1.4;color:var(--muted)}

@media (max-width:760px){.qgrid{grid-template-columns:1fr}.qcard{grid-row:auto;grid-template-rows:auto auto auto;margin-bottom:0}.qgrid{row-gap:18px}}
.qcard.qwide{grid-column:1/-1;grid-row:span 3}.qcard.qwide blockquote{font-size:clamp(21px,2.2vw,27px)}@media (min-width:761px){.qcard.qwide{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,56px);padding:36px 40px}.qcard.qwide .qmark{grid-column:1}.qcard.qwide blockquote{grid-column:1;grid-row:2}.qcard.qwide figcaption{grid-column:2;grid-row:2;align-self:end;border-top:0;border-left:1px solid rgba(201,168,118,.25);padding:0 0 0 24px}}
.qcard blockquote::after{content:"\201D"}