/* The Love Trumpet - Courses & Research banners. Link this file or paste into your page CSS. */
.tlt-hero{box-sizing:border-box;position:relative;min-height:440px;background:radial-gradient(ellipse at 50% 0%,#14406a 0%,#0a1d30 64%);color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 40px 110px;overflow:hidden}
.tlt-hero>*{position:relative;z-index:2}
.tlt-hero .tlt-eyebrow{font:500 13px Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#d7c28a;margin:0 0 18px}
.tlt-hero h1{font:500 60px/1.05 'Cormorant Garamond',Georgia,serif;margin:0 0 16px;color:#fff}
.tlt-hero h1 em{font-style:italic;color:#e9cf8a}
.tlt-hero .tlt-sub{font:italic 400 24px/1.4 'Cormorant Garamond',Georgia,serif;color:#e8e2d2;max-width:640px;margin:0}
.tlt-hero .tlt-bg{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.tlt-hero.top{justify-content:flex-start;padding-top:62px;padding-bottom:40px}
.tlt-hero.top .tlt-sub{max-width:820px}
.tlt-hero .tlt-bg.bottom{top:0;height:100%}
.tlt-pulse{animation:tltPulse 4s ease-in-out infinite}
.tlt-twinkle{animation:tltTwinkle 3s ease-in-out infinite}
@keyframes tltPulse{50%{opacity:.45}}
@keyframes tltTwinkle{0%,100%{opacity:.15}50%{opacity:1}}
@media (max-width:760px){
.tlt-hero{min-height:400px;padding:56px 22px 90px}
.tlt-hero.top{padding-top:46px;padding-bottom:40px}
.tlt-hero .tlt-bg.bottom{top:auto;height:140px;width:150%;left:-25%}
.tlt-hero h1{font-size:40px}.tlt-hero .tlt-sub{font-size:20px}.tlt-hero .tlt-eyebrow{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.tlt-pulse,.tlt-twinkle{animation:none}.tlt-twinkle{opacity:.7}}

/* TLT-BANNERS: clear the fixed site header */
.tlt-hero{padding-top:clamp(130px,12vw,150px)}
.tlt-hero.top{padding-top:clamp(108px,9.5vw,120px)}

/* TLT-BANNERS-2: eyebrow size matches Insights (.97rem); subtitle pure white +1pt; Courses banner has no node graphic so it is shorter */
.tlt-hero .tlt-eyebrow{font-size:.97rem}
.tlt-hero .tlt-sub{color:#fff;font-size:calc(24px + 1pt)}
.tlt-hero.top{min-height:0;padding-bottom:clamp(56px,6vw,76px)}
@media (max-width:760px){.tlt-hero .tlt-eyebrow{font-size:.97rem}.tlt-hero .tlt-sub{font-size:calc(20px + 1pt)}}
.tlt-hero.top{padding-top:clamp(124px,10.5vw,134px)}

/* TLT-BANNERS-3: same size/position for both banners (full height, centred); colours and tagline match the Heart Coherence hero */
.tlt-hero .tlt-eyebrow{font-weight:600;color:#c9a84c}
.tlt-hero .tlt-sub{font:italic 500 clamp(24px,2.6vw,32px)/1.3 'Cormorant Garamond',Georgia,serif;color:#fff;max-width:820px}
@media (max-width:760px){.tlt-hero .tlt-sub{font-size:24px}}
.tlt-hero{height:440px}
.tlt-hero .tlt-sub{max-width:940px}
@media (max-width:760px){.tlt-hero{height:auto;min-height:400px}}

/* TLT-BANNERS-4: top and bottom padding +15% (440px to 479px tall) */
.tlt-hero{padding-top:clamp(150px,13.8vw,172.5px);padding-bottom:126.5px;height:479px}
@media (max-width:760px){.tlt-hero{height:auto;min-height:400px;padding-bottom:103.5px}}
