/* TJ Loeffler — draft site styles. Mobile-first. Brand: Crimson Text + Open Sans; gold #cbaf6e, ink #1e1f1f, charcoal #3e4141. */
:root{
  --gold:#cbaf6e; --gold-deep:#b7975a; --gold-text:#8a6d33; /* gold-text only for large/decorative use */
  --ink:#1e1f1f; --ink-2:#262727; --text:#3e4141; --muted:#6b6f6f;
  --light:#f6f6f6; --paper:#faf9f6; --white:#fff; --line:#e7e4dd; --line-dark:rgba(255,255,255,.14);
  --serif:"Crimson Text", Georgia, "Times New Roman", serif;
  --sans:"Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap:1160px; --narrow:700px;
  --s-section:84px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--sans); font-size:16.5px; line-height:1.75; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
a{color:var(--ink)}
::selection{background:var(--gold); color:var(--ink)}
h1,h2,h3{text-wrap:balance; font-family:var(--serif); color:var(--ink); font-weight:400; line-height:1.1; margin:0 0 .45em; letter-spacing:-.005em}
h1{font-size:2.6rem}
h2{font-size:2.15rem}
h3{font-family:var(--serif); font-size:1.4rem; font-weight:600; line-height:1.25}
p{margin:0 0 1em}
em{font-style:italic}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.narrow{max-width:var(--narrow)}
.center{text-align:center}
.center .narrow, .narrow.center{margin-left:auto; margin-right:auto}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:12px}
.logo{display:inline-flex; align-items:center; min-height:44px; padding:0}
.logo img{height:15px; width:auto; filter:brightness(0); opacity:.92}
.nav{display:flex; align-items:center; gap:2px}
.nav a{font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding:12px 10px; min-height:44px; display:inline-flex; align-items:center; position:relative}
.nav a:not(.btn)::after{content:""; position:absolute; left:10px; right:10px; bottom:9px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.nav-link{display:none}
.nav .btn{padding:10px 14px; min-height:44px; font-size:.75rem; letter-spacing:.12em; margin-left:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-align:center; background:var(--gold); color:var(--ink); font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:18px 30px; min-height:56px; border-radius:1px; border:1px solid var(--gold); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--ink); color:var(--white); border-color:var(--ink); box-shadow:0 10px 24px -14px rgba(30,31,31,.6)}
.dark .btn:hover,.dark .btn:focus-visible{background:var(--white); color:var(--ink); border-color:var(--white)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.btn-ghost{background:transparent; color:var(--ink); border-color:rgba(30,31,31,.45)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink); color:var(--white); border-color:var(--ink)}
.cta-row{display:flex; flex-direction:column; gap:14px; align-items:stretch; margin-top:34px}
.cta-note{font-size:.86rem; margin:14px 0 0; color:var(--muted)}
.dark .cta-note{color:#a9aaa7}
.fallback{font-size:.9rem; margin:10px 0 0; color:var(--muted)}
.fallback a{white-space:nowrap; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:1px}
.dark .fallback{color:#a9aaa7}
.dark .fallback a{color:var(--white)}

/* ---------- Sections ---------- */
section{padding:var(--s-section) 0}
.light{background:var(--light)}
.dark{background:var(--ink); color:#d6d6d3}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.dark a{color:var(--white)}
.eyebrow{display:inline-flex; align-items:center; gap:14px; font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--text); margin-bottom:20px}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold); flex:none}
.center .eyebrow::after{content:""; width:28px; height:1px; background:var(--gold); flex:none}
@media (max-width:559px){.center .eyebrow::before,.center .eyebrow::after{display:none} .eyebrow{letter-spacing:.2em}}
.dark .eyebrow{color:var(--gold)}
.rule{width:44px; height:1px; background:var(--gold); border:0; margin:0 0 28px}
.center .rule{margin-left:auto; margin-right:auto}
.lead{font-size:1.12rem; line-height:1.7; color:var(--text)}
.dark .lead{color:#d6d6d3}
.placeholder-tag{display:inline-block; font-size:.75rem; letter-spacing:.1em; background:#fff3cd; color:#5c4a00; padding:2px 8px; border-radius:2px; margin-left:4px}

/* ---------- Heroes ---------- */
.hero{padding:72px 0 80px}
.hero h1{font-size:2.75rem; line-height:1.06}
.hero .lead{max-width:600px}
.hero-home{position:relative; overflow:hidden; padding:84px 0 76px;
  background:radial-gradient(120% 80% at 50% -10%, #2c2d2d 0%, var(--ink) 60%)}
.hero-home::after{content:""; position:absolute; left:50%; bottom:0; width:1px; height:44px; background:linear-gradient(var(--gold),transparent); transform:translateX(-50%); opacity:.7}
.hero-home h1{font-size:2.6rem; max-width:900px; margin-left:auto; margin-right:auto}
.hero-home .lead{margin:0 auto; max-width:620px}
.hero-photo{padding:0}
.hero-media{aspect-ratio:4/3.2; overflow:hidden; background:var(--ink)}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-copy{padding:44px 0 64px}

/* ---------- Path choice ---------- */
.choice{display:grid; gap:14px; margin-top:40px; text-align:left}
.choice a.card-btn{position:relative; display:block; text-decoration:none; background:var(--gold); color:var(--ink); padding:26px 60px 26px 26px; border:1px solid var(--gold); border-radius:1px; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.choice a.card-btn.alt{background:var(--ink); border-color:var(--ink); color:var(--white)}
.dark .choice a.card-btn.alt{background:transparent; border-color:rgba(255,255,255,.35)}
.choice a.card-btn:hover{transform:translateY(-2px)}
.choice a.card-btn:not(.alt):hover{background:#d6bd82; border-color:#d6bd82}
.choice a.card-btn.alt:hover{border-color:var(--gold)}
.choice .big{display:block; font-family:var(--serif); font-weight:600; font-size:1.45rem; line-height:1.2}
.choice .small{display:block; font-size:.9rem; margin-top:8px; opacity:.85; line-height:1.5}
.choice .arrow{position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:1.3rem; line-height:1; transition:transform .3s var(--ease)}
.choice a.card-btn:hover .arrow{transform:translate(4px,-50%)}
.creds{display:flex; flex-direction:column; align-items:center; gap:6px; margin:44px 0 0; padding:0; list-style:none; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.dark .creds{color:#9c9d9a}

/* ---------- Lists ---------- */
.checks{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.checks li{position:relative; padding:18px 0 18px 36px; border-bottom:1px solid var(--line); line-height:1.6}
.checks li::before{content:""; position:absolute; left:4px; top:27px; width:12px; height:7px; border-left:1.5px solid var(--gold-deep); border-bottom:1.5px solid var(--gold-deep); transform:rotate(-45deg)}

/* ---------- Grids & cards ---------- */
.grid{display:grid; gap:18px}
.card{position:relative; background:var(--white); padding:30px 28px 28px; border:1px solid var(--line); transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.card::before{content:""; position:absolute; top:-1px; left:28px; width:32px; height:2px; background:var(--gold)}
.card:hover{border-color:#d9d4c8; box-shadow:0 18px 40px -28px rgba(30,31,31,.35)}
.card h3{margin-bottom:.4em}
.card p{font-size:.97rem; line-height:1.65}
.card p:last-child{margin-bottom:0}
.card.soft{background:var(--paper)}
.offer-row{margin-top:18px}

/* MST */
.mst{border-top:1px solid var(--line)}
.mst .step{padding:26px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:start}
.mst .letter{font-family:var(--serif); font-size:3.2rem; line-height:.9; color:var(--gold-deep); font-weight:400}
.mst h3{margin-bottom:.25em}
.mst p{margin:0; font-size:.98rem}
.verse{font-family:var(--serif); font-style:italic; font-size:1.4rem; line-height:1.45; color:var(--ink); border-left:1px solid var(--gold); padding:4px 0 4px 22px; margin:34px 0 0}
.verse cite{display:block; font-style:normal; font-family:var(--sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin-top:12px; color:var(--muted)}

/* Free-call steps (dark) */
.steps{display:grid; gap:0; margin:44px 0 6px; text-align:left; border-top:1px solid var(--line-dark)}
.steps .s{padding:26px 0; border-bottom:1px solid var(--line-dark); display:grid; grid-template-columns:52px 1fr; column-gap:14px}
.steps .num{font-family:var(--serif); font-size:2.1rem; line-height:1; color:var(--gold); grid-row:span 2}
.steps h3{font-size:1.3rem; margin:0 0 4px}
.steps p{margin:0; font-size:.95rem; color:#b9bab7; line-height:1.6}

/* About snippet */
.about-snippet{display:grid; gap:36px; align-items:center}
.about-snippet img{width:100%; aspect-ratio:4/3.4; object-fit:cover}
.photo-frame{position:relative}
.textlink{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--gold); transition:color .2s}
.textlink:hover{color:var(--gold-text)}
.links{display:flex; flex-wrap:wrap; gap:4px 30px; margin-top:8px}

/* Story photo */
.story-photo{width:100%; aspect-ratio:3/2; object-fit:cover; margin:0 0 48px}

/* FAQ */
.faq{border-top:1px solid #d9d6cf; margin-top:30px}
.faq details{border-bottom:1px solid #d9d6cf}
.faq summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:1.3rem; line-height:1.3; color:var(--ink); padding:22px 48px 22px 0; position:relative; min-height:56px; transition:color .2s}
.faq summary:hover{color:#000}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:14px; height:1px; background:var(--ink); transition:transform .3s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.faq details p{margin:0 0 24px; padding-right:48px; color:var(--text)}

/* Newsletter */
.newsletter{padding:64px 0; border-top:1px solid var(--line)}
.newsletter h3{font-size:1.6rem; font-weight:400}
.signup{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.signup input{font:inherit; padding:14px 18px; min-height:56px; border:1px solid #d3cfc6; border-radius:1px; background:#fff; width:100%; transition:border-color .2s}
.signup input:focus{outline:none; border-color:var(--ink)}

/* Final */
.final{position:relative}
.final h2{font-size:2.3rem}
.final .wrap{max-width:860px}

/* Footer */
.site-footer{background:#161717; color:#a3a4a1; font-size:.9rem; border-top:1px solid rgba(203,175,110,.35)}
.site-footer a{color:#e7e7e4; text-decoration:none; transition:color .2s}
.site-footer a:hover{color:var(--gold)}
.f-top{display:grid; gap:34px; padding-top:56px; padding-bottom:40px}
.f-logo{display:inline-flex; align-items:center; min-height:44px}
.f-logo img{height:14px; width:auto}
.f-brand p{margin:18px 0 0; line-height:1.7}
.f-col{display:flex; flex-direction:column; gap:4px}
.f-col a{padding:6px 0}
.f-h{font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--gold); margin-bottom:6px}
.f-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:20px; padding-bottom:24px}
.f-bottom small{font-size:.78rem; color:#7d7e7b; letter-spacing:.04em}

/* Mobile sticky CTA */
.mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line)}
.mobile-cta{transform:translateY(110%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s}
.mobile-cta.show{transform:none; visibility:visible; transition:transform .35s var(--ease)}
.mobile-cta .btn{width:100%}
body.has-mobile-cta{padding-bottom:78px}

/* ---------- Tablet ---------- */
@media (min-width:560px){
  .nav a.nav-link{display:inline-flex}
  .menu{display:none}
  .nav .btn{margin-left:6px; letter-spacing:.16em}
  .logo img{height:17px}
  .cta-row{flex-direction:row; flex-wrap:wrap; align-items:center}
  .signup{flex-direction:row}
  .signup input{flex:1}
  .creds{flex-direction:row; justify-content:center; gap:10px 0}
  .creds li+li::before{content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--gold); margin:0 18px; vertical-align:middle; position:relative; top:-1px}
  .hero-media{aspect-ratio:16/10}
}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  :root{--s-section:128px}
  body{font-size:17.5px}
  h1{font-size:3.8rem}
  h2{font-size:2.85rem}
  .site-header .wrap{min-height:80px}
  .logo img{height:19px}
  .nav{gap:8px}
  .nav a{padding:12px 14px}
  .nav a:not(.btn)::after{left:14px; right:14px}
  .nav .btn{padding:12px 22px; margin-left:12px}

  .hero-home{padding:120px 0 120px}
  .hero-home h1{font-size:4.6rem; max-width:1120px}
  .hero-home .lead{font-size:1.2rem}

  .hero-photo{position:relative; display:flex; align-items:center; min-height:720px}
  .hero-media{position:absolute; top:0; right:0; bottom:0; width:47%; aspect-ratio:auto}
  .hero-photo .wrap{width:100%}
  .hero-copy{width:48%; padding:96px 0}
  .hero-photo h1{font-size:3.6rem}

  .choice{grid-template-columns:1fr 1fr; gap:20px; margin-top:56px}
  .choice a.card-btn{padding:34px 70px 34px 34px}
  .choice .big{font-size:1.6rem}

  .grid{gap:22px}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .two-col{display:grid; grid-template-columns:5fr 6fr; gap:96px; align-items:start}
  .steps{grid-template-columns:repeat(3,1fr); border-top:0; gap:0 40px}
  .steps .s{border-top:1px solid var(--line-dark); border-bottom:0; display:block; padding:30px 0 0}
  .steps .num{display:block; margin-bottom:16px}
  .about-snippet{grid-template-columns:5fr 6fr; gap:96px}
  .about-snippet img{aspect-ratio:4/4.4}
  .final h2{font-size:3.2rem}
  .faq summary{font-size:1.42rem}
  .f-top{grid-template-columns:2fr 1fr 1fr; gap:60px; padding-top:72px; padding-bottom:56px}
  .mobile-cta{display:none}
  body.has-mobile-cta{padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
.hero .support{font-size:.98rem; line-height:1.7; color:var(--muted); max-width:560px; margin:0; padding-left:18px; border-left:1px solid var(--gold)}

/* Mobile menu (CSS-only, <560px) */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.menu{position:static}
.menu summary{list-style:none; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-left:4px; border-radius:1px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.menu .bars,.menu .bars::before,.menu .bars::after{display:block; width:20px; height:1.5px; background:var(--ink); position:relative; transition:transform .25s var(--ease), background .2s}
.menu .bars::before,.menu .bars::after{content:""; position:absolute; left:0}
.menu .bars::before{top:-6px} .menu .bars::after{top:6px}
.menu[open] .bars{background:transparent}
.menu[open] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute; left:0; right:0; top:100%; background:var(--white); border-bottom:1px solid var(--line); box-shadow:0 18px 30px -24px rgba(30,31,31,.4); padding:6px 24px 16px; display:flex; flex-direction:column}
.menu-panel a{font-family:var(--serif); font-size:1.35rem; color:var(--ink); text-decoration:none; padding:12px 0; min-height:52px; display:flex; align-items:center; border-bottom:1px solid var(--line)}
.menu-panel a:last-child{border-bottom:0; font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; justify-content:center; background:var(--gold); margin-top:14px; min-height:52px}
.menu-panel a[aria-current="page"]{color:var(--gold-text)}
.site-header .wrap{position:relative}
.nav .menu-panel a{text-transform:none; letter-spacing:0; font-weight:400; padding:12px 0}
.nav .menu-panel a:last-child{text-transform:uppercase; letter-spacing:.14em; font-weight:700}
.nav .menu-panel a::after{display:none}
/* TJ avatar (LinkedIn photo) */
.avatar{width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--gold); padding:4px; background:transparent; flex:none}
.avatar-sm{width:64px; height:64px; padding:3px}
.talk-tj{display:flex; align-items:center; justify-content:center; gap:16px; margin:34px auto 0}
.talk-tj span{font-family:var(--serif); font-size:1.3rem; color:var(--white); text-align:left; line-height:1.3}
.f-intro{display:flex; align-items:center; gap:16px; margin-top:18px}
.f-intro p{margin:0}
.f-brand > p{display:none}
/* Transformation video hero */
.hero-video{padding:56px 0 72px}
.hero-video h1{max-width:900px; margin-left:auto; margin-right:auto}
.hero-video .lead{margin:0 auto; max-width:680px}
.watch-label{display:inline-flex; align-items:center; gap:12px; margin:34px 0 16px; font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.watch-label::before{content:""; width:0; height:0; border-left:8px solid var(--gold-deep); border-top:5px solid transparent; border-bottom:5px solid transparent}
.video{position:relative; width:100%; max-width:760px; margin:0 auto; aspect-ratio:16/9; background:var(--ink); box-shadow:0 30px 60px -40px rgba(30,31,31,.55); border:1px solid var(--line)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hero-video .cta-row{margin-top:26px}
@media (min-width:900px){ .hero-video{padding:56px 0 96px} .hero-video h1{font-size:3.4rem} .hero-video .lead{font-size:1.08rem} }
@media (max-width:559px){ .hero-video{padding:40px 0 56px} .hero-video .wrap{padding:0 20px} .video{margin:0 -20px; width:calc(100% + 40px); border-left:0; border-right:0} }
.video-poster{position:absolute; inset:0; display:block; overflow:hidden; color:#fff; text-decoration:none; cursor:pointer}
.video-poster img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.video-poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,31,31,.25) 0%, rgba(30,31,31,.55) 55%, rgba(30,31,31,.85) 100%)}
.video-poster:hover img{transform:scale(1.03)}
.video-poster .play{position:absolute; z-index:2; left:50%; top:46%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:var(--gold); box-shadow:0 10px 30px -10px rgba(0,0,0,.6); transition:transform .3s var(--ease), background .3s}
.video-poster .play::before{content:""; position:absolute; left:31px; top:24px; border-left:20px solid var(--ink); border-top:14px solid transparent; border-bottom:14px solid transparent}
.video-poster:hover .play{transform:scale(1.06); background:#d6bd82}
.video-poster:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.video-title{position:absolute; z-index:2; left:24px; right:24px; bottom:20px; font-family:var(--serif); font-size:1.15rem; line-height:1.3; text-align:left; text-shadow:0 1px 8px rgba(0,0,0,.4)}
@media (max-width:559px){ .video-poster .play{width:64px; height:64px; margin:-32px 0 0 -32px} .video-poster .play::before{left:26px; top:20px; border-left-width:17px; border-top-width:12px; border-bottom-width:12px} .video-title{font-size:1rem; left:18px; right:18px; bottom:14px} }
@media (min-width:900px){ .video{max-width:700px} .hero-video h1{font-size:3.2rem} .hero-video{padding-top:48px} .watch-label{margin-top:28px} }
@media (min-width:900px){ .video{max-width:660px} .watch-label{margin:24px 0 14px} .hero-video .cta-row{margin-top:22px} .hero-video{padding-top:44px} }
/* Branded video cover (no photo) */
.video-poster{background:var(--ink)}
.video-poster::after{content:none}
.video-poster .poster-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px 28px; text-align:center;
  background:radial-gradient(90% 80% at 50% 40%, #2a2b2b 0%, var(--ink) 70%)}
.video-poster .poster-inner::before{content:""; position:absolute; inset:14px; border:1px solid rgba(203,175,110,.28); pointer-events:none}
.video-poster .play{position:relative; left:auto; top:auto; margin:0; flex:none}
.video-poster .video-title{position:static; max-width:520px; font-size:1.45rem; line-height:1.25; text-align:center; text-shadow:none; color:#fff}
.video-meta{font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.video-poster:hover .play{transform:scale(1.06)}
@media (max-width:559px){ .video-poster .poster-inner{gap:10px; padding:18px 22px} .video-poster .poster-inner::before{inset:10px} .video-poster .video-title{font-size:1.08rem} .video-poster .play{margin:0} }
/* The M.S.T. Method */
.method-head{max-width:720px; margin:0 auto}
.method-head h2{margin-bottom:.2em}
.method-sub{font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin:0 0 22px}
.method-head .lead{margin:0 auto}
.m-steps{list-style:none; margin:48px 0 0; padding:0; display:grid; gap:0; position:relative}
.m-step{position:relative; padding:0 0 34px 76px; min-height:56px}
.m-step:last-child{padding-bottom:0}
.m-step::before{content:""; position:absolute; left:27px; top:56px; bottom:0; width:1px; background:linear-gradient(var(--gold), rgba(203,175,110,.25))}
.m-step:last-child::before{display:none}
.m-num{position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%; border:1px solid var(--gold); background:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.35rem; color:var(--ink); letter-spacing:.02em}
.light .m-num{background:var(--light)}
.m-step:first-child .m-num{background:var(--gold); border-color:var(--gold)}
.m-step h3{font-size:1.55rem; margin:10px 0 6px}
.m-step p{margin:0; font-size:1rem; line-height:1.6; max-width:420px}
.method-verse{max-width:640px; margin:48px auto 0}
@media (min-width:900px){
  .m-steps{grid-template-columns:repeat(3,1fr); gap:0 48px; margin-top:64px}
  .m-steps::before{content:""; position:absolute; top:28px; left:16.66%; right:16.66%; height:1px; background:var(--gold); opacity:.6}
  .m-step{padding:0; text-align:center}
  .m-step::before{display:none}
  .m-num{position:relative; z-index:1; margin:0 auto 22px; width:56px; height:56px}
  .m-step h3{margin-top:0}
  .m-step p{margin:0 auto}
}
.site-header .btn{white-space:nowrap}
@media (max-width:559px){.site-header .hide-sm{display:none}}
.site-header .show-sm{display:none}@media (max-width:559px){.site-header .show-sm{display:inline}}

/* Transformation: How we work together */
.path-sec h2{margin-bottom:0}
.path{list-style:none;margin:44px auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:1fr;gap:18px;text-align:left;position:relative}
.path-step{display:flex;gap:20px;align-items:flex-start;background:var(--white);border:1px solid var(--line);padding:28px 26px;position:relative}
section.light .path-step{background:var(--white)}
.p-num{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:"Crimson Text",serif;font-size:22px;color:var(--ink,#1e1f1f);background:var(--white)}
.path-step:first-child .p-num{background:var(--gold);border-color:var(--gold)}
.path-step h3{margin:2px 0 2px}
.path-step .p-tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--charcoal,#3e4141);margin:0 0 10px}
.path-step p{margin:0}
.path-step+.path-step::before{content:"";position:absolute;left:49px;top:-19px;width:1.5px;height:18px;background:var(--gold)}
@media (min-width:900px){
  .path{grid-template-columns:1fr 1fr;gap:40px}
  .path-step+.path-step::before{left:-41px;top:50%;width:40px;height:1.5px}
}
.path-step h3{font-size:26px} .path-step .p-tag{letter-spacing:.1em}

/* 404 / thank-you pages */
.simple-page{padding:120px 0 140px}
.simple-page h1{margin:10px 0 14px}
.simple-page .cta-row{flex-wrap:wrap;gap:12px;margin-top:28px}

/* Training thank-you page */
.training-page{padding:72px 0 96px}
.training-page h1{margin:10px 0 14px}
.training-page .video{margin-top:36px;max-width:860px}
.training-next{margin:34px 0 0;font-family:"Crimson Text",serif;font-size:1.35rem;color:var(--ink,#1e1f1f)}
@media (max-width:559px){.training-page{padding:44px 0 64px}.training-page .video{margin-top:26px}}
@media (max-width:559px){.training-page h1{font-size:2rem}}
.training-signup .ts-sub{margin:6px 0 0}
.training-signup .btn{white-space:nowrap}

/* Client stories page */
.story-block .video{margin-top:28px}
.story-quote{margin:24px 0 0; font-size:1.2rem}
.story-block h2{font-size:1.7rem; line-height:1.2}
@media (max-width:640px){.story-block h2{font-size:1.4rem}.story-quote{font-size:1.1rem}}