/* West Habercom — Executive Glass concept. Layered over original stylesheet. */
:root {
    --ink:#f7f2eb;
    --muted:#bcb8b7;
    --navy:#0c111b;
    --navy-2:#131c29;
    --panel:#1b2635;
    --cyan:#d7c4a4;
    --blue:#b8a27e;
    --gold:#e7bc7e;
    --line:rgba(234,224,209,.16);
    --display:Georgia,'Times New Roman',serif;
    --sans:'DM Sans',Arial,sans-serif;
    --max:1190px
}

body {
    background:#0b111a;
    color:var(--ink)
}

.site-header {
    background:rgba(13,19,29,.72);
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(24px) saturate(130%);
    -webkit-backdrop-filter:blur(24px) saturate(130%)
}

.wordmark {
    font-family:var(--sans);
    letter-spacing:.12em
}

.wordmark-mark {
    border:1px solid rgba(230,191,134,.55);
    border-radius:50%;
    color:#e8c89a;
    font-family:Georgia,serif;
    font-weight:400
}

.site-nav a:hover,.site-nav a:focus-visible {
    color:#f3d5a9
}

.hero {
    padding:82px 0 95px;
    background:radial-gradient(ellipse at 83% 26%,rgba(194,133,79,.18),transparent 39%),radial-gradient(ellipse at 16% 75%,rgba(67,94,118,.23),transparent 47%),linear-gradient(145deg,#0b121c,#192432 65%,#0b121b)
}

.hero-grid {
    grid-template-columns:.96fr 1.04fr;
    gap:6.5%;
    align-items:center
}

.hero-copy {
    padding:30px 0
}

.hero h1 {
    font-size:clamp(43px,5.1vw,76px);
    font-weight:400;
    letter-spacing:-.045em;
    line-height:1.08
}

.hero h1 span,.section h2 span {
    color:#e8c69b
}

.hero-intro {
    font-size:16px;
    color:#c8c8c7;
    max-width:470px;
    line-height:1.85
}

.eyebrow {
    color:#e7c28c;
    font-size:10px;
    letter-spacing:.22em
}

.eyebrow-line {
    background:#c79f70
}

.button {
    border-radius:3px;
    padding:14px 23px;
    font-size:12px
}

.button-primary {
    background:#e7c69a;
    color:#1a1b20;
    box-shadow:none
}

.button-primary:hover {
    background:#f4dab4
}

.text-link {
    color:#f1e6d7
}

.hero-note {
    color:#bbb5ac
}

.hero-glow,.business-orb {
    display:none
}

.hero-bottom-line {
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,205,161,.65),transparent)
}

.hero-visual {
    max-width:525px;
    padding:0;
    justify-self:end
}

.portrait-frame {
    border-radius:3px;
    border:1px solid rgba(255,236,210,.35);
    background:rgba(240,220,195,.06);
    padding:9px;
    box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04)
}

.portrait-frame:after {
    display:none
}

.portrait-frame img {
    aspect-ratio:2/3;
    object-fit:cover;
    object-position:center center;
    border-radius:1px
}

.intro-strip {
    background:rgba(24,32,43,.98);
    border-color:var(--line)
}

.intro-grid {
    padding:30px 0
}

.stat-number {
    font-family:Georgia,serif;
    font-size:23px;
    font-weight:400;
    color:#f3dfc5
}

.stat-label {
    color:#b7b5b3;
    font-size:11px
}

.section {
    padding:115px 0
}

.section h2,.charmed-heading h2 {
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-.04em;
    line-height:1.14;
    font-size:clamp(37px,4.1vw,58px)
}

.story-section {
    background:linear-gradient(160deg,#101823,#111a26)
}

.story-grid {
    gap:12%
}

.story-copy p,.charmed-copy p,.music-copy>p:not(.eyebrow),.business-lead {
    color:#bcbfc3
}

.story-copy p.lead,.charmed-copy p.lead {
    color:#f1e8de
}

.side-quote {
    border-color:rgba(233,204,164,.24)
}

.side-quote p {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:20px
}

.signature {
    font-family:Georgia,serif;
    font-style:italic;
    font-weight:400;
    font-size:17px
}

.music-section {
    background:linear-gradient(145deg,#1b2733,#111a25)
}

.music-image-wrap img {
    border-radius:2px;
    border:7px solid rgba(234,224,208,.12);
    box-shadow:0 25px 70px rgba(0,0,0,.4)
}

.image-label {
    background:rgba(20,28,39,.78);
    backdrop-filter:blur(18px);
    border:1px solid rgba(239,225,205,.24);
    border-radius:2px
}

.milestone-card {
    background:rgba(232,225,214,.065);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(235,218,196,.19);
    border-radius:3px;
    padding:24px
}

.milestone-icon {
    background:rgba(231,191,137,.12);
    border-radius:50%
}

.milestone-card h3 {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:22px
}

.business-section {
    background:radial-gradient(ellipse at 84% 48%,rgba(158,116,80,.15),transparent 45%),#0d1520
}

.business-grid {
    gap:10%
}

.timeline {
    border-color:rgba(230,194,148,.42)
}

.timeline-item:before {
    background:#e6c292;
    box-shadow:0 0 0 5px rgba(230,194,148,.1)
}

.timeline-year {
    font-family:Georgia,serif;
    color:#e7c38f;
    font-size:15px
}

.timeline-item h3 {
    font-family:Georgia,serif;
    font-size:18px;
    font-weight:400
}

.brand-card {
    background:linear-gradient(135deg,rgba(240,228,210,.14),rgba(194,205,216,.055));
    backdrop-filter:blur(24px) saturate(115%);
    -webkit-backdrop-filter:blur(24px) saturate(115%);
    border:1px solid rgba(246,225,194,.3);
    border-radius:4px;
    box-shadow:0 28px 65px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.1);
    padding:40px
}

.brand-card:before {
    border-color:rgba(255,255,255,.075);
    border-radius:1px
}

.brand-name b {
    font-family:var(--sans);
    letter-spacing:-.05em
}

.brand-signal i {
    background:#e6c292
}

.brand-footer-dot {
    background:#e6c292
}

.station-section {
    background:#192431
}

.station-inner {
    padding:65px 0
}

.station-banner {
    border-radius:2px
}

.station-copy h2 {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:30px
}

.station-visit {
    color:#e8c69b
}

.station-count strong {
    font-family:Georgia,serif;
    font-weight:400
}

.charmed-section {
    background:linear-gradient(140deg,#192330,#111923)
}

.charmed-subtitle {
    color:#c4b4a0
}

.site-footer {
    background:#0a1018
}

.back-top {
    color:#e8c69b
}

@media(max-width:900px) {
    .hero-grid {
        gap:36px
    }

    .hero h1 {
        font-size:clamp(40px,5.3vw,60px)
    }

    .section {
        padding:84px 0
    }

    .brand-card {
        padding:28px
    }

    
}

@media(max-width:680px) {
    .site-nav {
        background:rgba(14,21,31,.97);
        backdrop-filter:blur(22px)
    }

    .hero {
        padding:50px 0 65px
    }

    .hero-grid {
        grid-template-columns:1fr;
        gap:32px
    }

    .hero h1 {
        font-size:clamp(41px,10vw,60px)
    }

    .hero-copy {
        padding:0
    }

    .hero-visual {
        width:min(100%,470px);
        justify-self:center
    }

    .portrait-frame img {
        aspect-ratio:2/3;
        object-position:center center
    }

    .section {
        padding:70px 0
    }

    .section h2,.charmed-heading h2 {
        font-size:clamp(35px,9vw,46px)
    }

    .brand-card {
        padding:25px
    }

    .intro-grid {
        padding:25px 0
    }

    .station-inner {
        padding:40px 0
    }

    
}

/* Final typography system: one display face and one body face. */
:root {
    --display: Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', Arial, sans-serif
}

body,button,a,p,li {
    font-family:var(--sans)
}

h1,h2,h3,.side-quote p,.stat-number,.station-count strong,.timeline-year,.signature {
    font-family:var(--display)
}

.story-copy p,.charmed-copy p,.music-copy>p:not(.eyebrow),.business-lead,.station-copy p:not(.eyebrow) {
    font-size:16px;
    line-height:1.85
}

.story-copy p.lead,.charmed-copy p.lead {
    font-size:18px;
    line-height:1.75
}

.station-copy h2 {
    font-size:clamp(36px,4vw,52px);
    line-height:1.15;
    margin:0 0 16px
}

.station-copy .eyebrow {
    font-size:10px
}

.station-visit {
    font-size:13px;
    margin-top:20px
}

/* The quote is a single text node; no separately positioned marks. */
.side-quote {
    display:block;
    position:static;
    max-width:370px;
    margin:38px 0 0;
    padding:20px 0 0;
    border-top:1px solid var(--line)
}

.side-quote p {
    display:block;
    margin:0;
    padding:0;
    font:400 20px/1.6 Georgia,'Times New Roman',serif;
    color:var(--ink)
}

/* Accessible, clearly visible but understated motion. */
.button,.station-visit,.text-link {
    transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease,color .24s ease
}

.button:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.25)
}

.portrait-frame,.music-image-wrap,.station-banner {
    overflow:hidden
}

.portrait-frame img,.music-image-wrap img,.station-banner img {
    transition:transform .65s cubic-bezier(.2,.7,.2,1)
}

@media(hover:hover) and (pointer:fine) {
    .portrait-frame:hover img,.music-image-wrap:hover img,.station-banner:hover img {
        transform:scale(1.045)
    }

    
}

@keyframes westEnter {
    from {
        opacity:0;
        transform:translateY(30px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }

    
}

@media(prefers-reduced-motion:no-preference) {
    .hero-copy {
        animation:westEnter 1.15s .12s both
    }

    .hero-visual {
        animation:westEnter 1.25s .34s both
    }

    .west-reveal {
        opacity:0;
        transform:translateY(34px);
        transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)
    }

    .west-reveal.west-visible {
        opacity:1;
        transform:translateY(0)
    }

    
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }

    .west-reveal {
        opacity:1!important;
        transform:none!important
    }

    
}

/* Match Classic Hits 109 CTA to the digiSTREAM and Charmed Weddings buttons. */
.station-copy .station-visit.button-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    width:max-content;
    max-width:100%;
    margin-top:20px;
    padding:14px 23px;
    border-radius:3px;
    background:#e7c69a;
    color:#1a1b20;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    
}

.station-copy .station-visit.button-primary:hover,.station-copy .station-visit.button-primary:focus-visible {
    background:#f4dab4;
    color:#1a1b20;
    
}

/* Classic Hits CTA: explicitly set readable text and arrow colors on gold. */
.station-copy a.station-visit.button-primary,
.station-copy a.station-visit.button-primary:visited,
.station-copy a.station-visit.button-primary span {
    color:#171a20 !important;
    
}

.station-copy a.station-visit.button-primary:hover,
.station-copy a.station-visit.button-primary:focus-visible,
.station-copy a.station-visit.button-primary:hover span,
.station-copy a.station-visit.button-primary:focus-visible span {
    color:#171a20 !important;
    
}