/*
Theme Name: Reform & Vibes
Description: Custom theme for Reform & Vibes Dynamic Reformer Pilates
Author: Deepansh Gupta
Version: 1.0
*/
:root{
  --paper:#fbfaf7;
  --white:#ffffff;
  --ink:#10140f;
  --green:#546e64;
  --green-deep:#42574f;
  --sage:#a1ada3;
  --sage-soft:#dfe4de;
  --mist:#f0f1ec;
  --hairline:rgba(16,20,15,.16);
  --hairline-strong:rgba(16,20,15,.55);
  --serif:"Marcellus",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",-apple-system,sans-serif;
}

/* External physical font files referenced here if base64 are removed */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('./assets/fonts/jost-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/jost-500.woff2') format('woff2')}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:#fff}
img,svg{max-width:100%;display:block;height: auto;}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:.005em}
h1{font-size:clamp(2.8rem,6.5vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:400}
em,.it{font-style:normal}
h1 em,h2 em,h3 em,.giant em{color:var(--green)}
.greenbg h1 em,.greenbg h2 em,.greenbg .giant em,.deepbg h1 em,.deepbg h2 em,.deepbg .giant em{color:var(--sage-soft)}
.num,.idx,.step .n{font-style:normal}
h1 .g,h2 .g{color:var(--green)}
.caps{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase}
.caps-sm{font-family:var(--sans);font-weight:400;font-size:.65rem;letter-spacing:.34em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:1.8rem;color:var(--green-deep)}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:44px;background:var(--hairline-strong)}
.eyebrow.left{justify-content:flex-start}
.on-dark .eyebrow{color:var(--sage-soft)}
.on-dark .eyebrow::before,.on-dark .eyebrow::after{background:rgba(255,255,255,.4)}
.lede{font-size:1.08rem;font-weight:300;max-width:37em;color:rgba(16,20,15,.74);line-height:1.85}
.on-dark .lede{color:rgba(255,255,255,.8)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
@media(max-width:700px){.eyebrow.left{justify-content: center;}}
@media(max-width:700px){.eyebrow::before,.eyebrow::after{display:none;}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;padding:1.25em 2.6em 1.15em;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:all .3s ease;text-align:center}
.btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--green);border-color:var(--green)}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-green:hover{background:transparent;color:var(--green-deep)}
.btn-w{border-color:rgba(255,255,255,.7);color:#fff}
.btn-w:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:2.6rem}
.btn-row.center{justify-content:center}
.tlink{font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;border-bottom:1px solid var(--green);padding-bottom:6px;transition:color .2s}
.tlink:hover{color:var(--green)}
@media(max-width:700px){.btn-row{justify-content:center}}
/* ---------- header ---------- */
.notice-bar{background:var(--green);color:#fff;text-align:center;padding:.75em 1em}
.notice-bar a{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.notice-bar a:hover{border-color:#fff}
header.site{position:relative;top:0;z-index:60;background:rgba(251,250,247,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px}
.logo-link{display:flex;align-items:center}
.logo-link svg,.logo-link img{height:62px;width:auto}
.nav-links{display:flex;gap:34px;list-style:none;align-items:center}
.nav-links a{font-family:var(--sans);font-weight:400;font-size:.67rem;letter-spacing:.3em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent;transition:all .25s;white-space:nowrap}
.nav-links a:hover{color:var(--green-deep);border-bottom-color:var(--sage)}
.nav-links a.active{border-bottom-color:var(--green);color:var(--green-deep)}
.nav-book{white-space:nowrap}
.burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px}
.burger span{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px auto;transition:all .3s}
@media(max-width:1120px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:30px 28px 38px;gap:24px;border-bottom:1px solid var(--hairline)}
  .nav-links.open{display:flex}
  .burger{display:block}
  .nav-book{display:none}
}

/* ---------- rings ---------- */
.ring{border-radius:50%;position:relative}
.ring-outline{border:1px solid var(--hairline-strong);border-radius:50%}
.photo-ring{border-radius:50%;overflow:hidden;position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,var(--sage) 0%,var(--green) 100%);display:flex;align-items:center;justify-content:center}
.photo-ring.sage{background:linear-gradient(150deg,var(--sage-soft) 0%,var(--sage) 100%)}
.photo-ring.deep{background:linear-gradient(150deg,var(--green) 0%,var(--green-deep) 100%)}
.photo-ring .ph{font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.6);border-radius:999px;padding:.9em 1.6em;text-align:center}
.photo-ring img{width:100%;height:100%;object-fit:cover;display:block}
.photo-ring.sage .ph{color:var(--green-deep);border-color:var(--green-deep)}

/* rotating badge */
.badge-spin{position:absolute;width:150px;height:150px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge-spin text{font-family:var(--sans);font-size:9.2px;letter-spacing:.32em;text-transform:uppercase;fill:var(--ink)}
.badge-spin .inner{font-family:var(--serif);font-style:normal}

/* ---------- hero ---------- */
.hero{padding:96px 0 90px;position:relative;overflow:hidden}
.hero .ring-bg{position:absolute;border:1px solid var(--hairline);border-radius:50%;pointer-events:none}
.hero-center{text-align:center;position:relative;z-index:2}
.hero-center h1{margin:0 auto;max-width:11em}
.hero-center .lede{margin:2rem auto 0}
@media(max-width:700px){.hero{padding:64px 0} .ring-bg{display:none}}

/* ---------- sections ---------- */
section{padding:100px 0}
@media(max-width:700px){section{padding:64px 0}}
.hairline-top{border-top:1px solid var(--hairline)}
.mistbg{background:var(--mist)}
.sagebg{background:var(--sage-soft)}
.greenbg{background:var(--green);color:#fff}
.deepbg{background:var(--green-deep);color:#fff}
.inkbg{background:var(--ink);color:var(--paper)}
.greenbg h2,.deepbg h2,.inkbg h2{color:#fff}
.sec-head{margin-bottom:3.6rem}
.num{font-family:var(--serif);font-style:normal;font-weight:400;font-size:1rem;color:var(--green);letter-spacing:.05em}

/* ---------- editorial grid ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline)}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
.trio>div{padding:44px 36px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trio>div:last-child{border-right:none}
@media(max-width:860px){.trio>div{border-right:none}}
.trio .num{display:block;margin-bottom:1.2rem}
.trio h3{margin-bottom:.8rem}
.trio p{font-size:.95rem;color:rgba(16,20,15,.7)}

/* ---------- class list ---------- */
.classlist{border-top:1px solid var(--hairline-strong)}
.classrow{display:grid;grid-template-columns:90px 1.1fr 1.6fr auto;gap:28px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--hairline);transition:background .25s}
.classrow:hover{background:var(--white)}
.classrow .idx{font-family:var(--serif);font-style:normal;font-size:1.05rem;color:var(--green)}
.classrow .cname{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.05}
.classrow p{font-size:.93rem;color:rgba(16,20,15,.68)}
.classrow .cmeta{font-family:var(--sans);font-weight:400;font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;color:var(--green-deep);text-align:right;white-space:nowrap}
@media(max-width:860px){.classrow{grid-template-columns:56px 1fr}.classrow p{grid-column:2}.classrow .cmeta{grid-column:2;text-align:left}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
@media(max-width:800px){.stats{grid-template-columns:1fr 1fr}}
.stat{text-align:center;padding:44px 20px;border-right:1px solid var(--hairline)}
.stat:last-child{border-right:none}
@media(max-width:800px){.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--hairline)}}
.stat .big{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--green-deep)}
.stat .lbl{margin-top:.9rem;color:rgba(16,20,15,.6)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split .art{position:relative;padding:30px}
.split .art .photo-ring{max-width:480px;margin:0 auto}
.split .art .badge-spin{right:0;top:0}

/* ---------- checks ---------- */
.checks{list-style:none;margin-top:2rem;border-top:1px solid var(--hairline)}
.checks li{padding:1em 0 1em 2.4rem;position:relative;border-bottom:1px solid var(--hairline);font-size:.98rem;color:rgba(16,20,15,.78)}
.on-dark .checks li{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.2)}
.checks li::before{content:"○";position:absolute;left:.3rem;color:var(--green);font-size:.8em;top:1.35em}
.on-dark .checks li::before{color:var(--sage-soft)}

/* ---------- offer band ---------- */
.band{text-align:center;padding:110px 0}
.band .logo-mark{margin:0 auto 2.4rem;width:130px;opacity:.95}
.band .giant{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,7.5vw,6rem);line-height:1.02}
.band .giant em{font-style:normal;font-weight:400}
@media(max-width:700px){.band{padding:72px 0}}

/* Option D typography: geometric caps */
h1,h2,h3,.serif,.classrow .cname,.pricerow .what,.pricerow .amt,.faq summary,.band .giant,.stat .big,.cell .big{font-family:var(--sans);text-transform:uppercase}
h1,h2,.band .giant{font-weight:300;letter-spacing:.15em;line-height:1.4}
h1{font-size:clamp(1.7rem,3.8vw,3rem)}
h2{font-size:clamp(1.3rem,2.6vw,2.1rem)}
.band .giant{font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.4}
h3{font-size:.92rem;font-weight:400;letter-spacing:.24em;line-height:1.7}
.classrow .cname{font-size:clamp(.95rem,1.7vw,1.25rem);font-weight:400;letter-spacing:.22em;line-height:1.5}
.stat .big{font-weight:300;letter-spacing:.04em}
.num,.idx,.step .n{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}
.hero-center h1{max-width:none}

/* ==========================================================================
   FOOTER (High Specificity to Override Conflicts)
   ========================================================================== */
footer.site {
    background: var(--green-deep);
    color: var(--white);
    padding: 90px 0 40px;
    text-align: center;
    border: none;
}

footer.site .foot-logo {
    width: 210px;
    margin: 0 auto 3rem;
    display: block;
}

footer.site .foot-nav li {
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

footer.site .foot-nav ul {
	display: flex;
    justify-self: center;
    gap: 32px;
    margin-bottom: 2.6rem;
}

footer.site .foot-nav a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .66rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    border-bottom: 1px solid transparent;
    transition: all .25s ease;
}

footer.site .foot-nav a:hover {
    color: var(--white);
    border-bottom-color: var(--sage);
}

@media only screen and (max-width: 700px) {
footer.site .foot-nav ul {    display: flex;
    justify-self: center;
    gap: 24px;
    margin-bottom: 2.6rem;
    flex-wrap: wrap;
    justify-content: center;}
}
}
/* Fixes ACF WYSIWYG <p> tags breaking layout */
footer.site .foot-contact,
footer.site .foot-contact p {
    color: rgba(255, 255, 255, .75);
    font-weight: 300;
    font-size: .95rem;
    line-height: 2;
    margin: 0 0 1rem 0;
}

footer.site .foot-contact a {
    color: rgba(255, 255, 255, .75);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    transition: color .25s ease;
}

footer.site .foot-contact a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

footer.site .socials {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 2.4rem 0 3rem;
}

footer.site .socials a {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 400;
    font-size: .6rem;
    letter-spacing: .1em;
    color: var(--white);
    transition: all .3s ease;
}

footer.site .socials a:hover {
    background: var(--paper);
    color: var(--green-deep);
    border-color: var(--paper);
}

footer.site .socials a:hover svg {
    fill: var(--green-deep);
}

footer.site .foot-base {
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-weight: 300;
    font-size: .72rem;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .5);
}

footer.site .foot-base a {
    color: rgba(255, 255, 255, .6);
    transition: color .25s ease;
    border: none;
}

footer.site .foot-base a:hover {
    color: var(--white);
}

@media (max-width: 700px) {
    footer.site .foot-base {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- About Page Specific Typography ---------- */
.page-template-page-about h1, 
.page-template-page-about h2, 
.page-template-page-about h3, 
.page-template-page-about .serif, 
.page-template-page-about .classrow .cname, 
.page-template-page-about .pricerow .what, 
.page-template-page-about .pricerow .amt, 
.page-template-page-about .faq summary, 
.page-template-page-about .band .giant, 
.page-template-page-about .stat .big, 
.page-template-page-about .cell .big {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-about h1, 
.page-template-page-about h2, 
.page-template-page-about .band .giant {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-about h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-about h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

.page-template-page-about .band .giant {
    font-size: clamp(1.7rem, 4.2vw, 3.2rem);
    line-height: 1.4;
}

.page-template-page-about h3 {
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .24em;
    line-height: 1.7;
}

.page-template-page-about .classrow .cname {
    font-size: clamp(.95rem, 1.7vw, 1.25rem);
    font-weight: 400;
    letter-spacing: .22em;
    line-height: 1.5;
}

.page-template-page-about .pricerow .what {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-about .pricerow .amt {
    font-weight: 300;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    letter-spacing: .06em;
}

.page-template-page-about .faq summary {
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-about .stat .big {
    font-weight: 300;
    letter-spacing: .04em;
}

.page-template-page-about .num, 
.page-template-page-about .idx, 
.page-template-page-about .step .n {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.page-template-page-about .hero-center h1 {
    max-width: none;
}

/* ---------- About Page Header ---------- */
.page-template-page-about .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-template-page-about .page-hero .lede {
    margin: 1.8rem auto 0;
}
@media (max-width: 700px) {
    .page-template-page-about .page-hero { 
        padding: 56px 0 48px; 
    }
}

/* ---------- About Page: Editorial Grid (Section 03) ---------- */
.page-template-page-about .trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--hairline);
}
.page-template-page-about .trio > div {
    padding: 44px 36px;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.page-template-page-about .trio > div:last-child {
    border-right: none;
}
.page-template-page-about .trio .num {
    display: block;
    margin-bottom: 1.2rem;
}
.page-template-page-about .trio h3 {
    margin-bottom: .8rem;
}
.page-template-page-about .trio p {
    font-size: .95rem;
    color: rgba(16, 20, 15, .7);
}
@media (max-width: 860px) {
    .page-template-page-about .trio { 
        grid-template-columns: 1fr; 
    }
    .page-template-page-about .trio > div { 
        border-right: none; 
    }
}

/* ---------- About Page: Steps (Section 02) ---------- */
.page-template-page-about .steps {
    border-top: 1px solid var(--hairline);
}
.page-template-page-about .step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 30px;
    padding: 36px 8px;
    border-bottom: 1px solid var(--hairline);
    align-items: start;
}
.page-template-page-about .step .n {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    color: var(--green);
}
.page-template-page-about .step h3 {
    margin-bottom: .5rem;
}
.page-template-page-about .step p {
    color: rgba(16, 20, 15, .7);
    font-size: .97rem;
}
@media (max-width: 640px) {
    .page-template-page-about .step { 
        grid-template-columns: 60px 1fr; 
        gap: 18px; 
    }
    .page-template-page-about .step .n { 
        font-size: 1.4rem; 
    }
}

/* ==========================================================================
   CLASSES PAGE SPECIFIC STYLES
   ========================================================================== */

/* ---------- Classes Page Typography (Geometric Caps) ---------- */
.page-template-page-classes h1, 
.page-template-page-classes h2, 
.page-template-page-classes h3, 
.page-template-page-classes .serif, 
.page-template-page-classes .classrow .cname, 
.page-template-page-classes .pricerow .what, 
.page-template-page-classes .pricerow .amt, 
.page-template-page-classes .faq summary, 
.page-template-page-classes .band .giant, 
.page-template-page-classes .stat .big, 
.page-template-page-classes .cell .big {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-classes h1, 
.page-template-page-classes h2, 
.page-template-page-classes .band .giant {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-classes h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-classes h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

.page-template-page-classes .band .giant {
    font-size: clamp(1.7rem, 4.2vw, 3.2rem);
    line-height: 1.4;
}

.page-template-page-classes h3 {
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .24em;
    line-height: 1.7;
}

.page-template-page-classes .classrow .cname {
    font-size: clamp(.95rem, 1.7vw, 1.25rem);
    font-weight: 400;
    letter-spacing: .22em;
    line-height: 1.5;
}

.page-template-page-classes .pricerow .what {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-classes .pricerow .amt {
    font-weight: 300;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    letter-spacing: .06em;
}

.page-template-page-classes .faq summary {
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-classes .stat .big {
    font-weight: 300;
    letter-spacing: .04em;
}

.page-template-page-classes .num, 
.page-template-page-classes .idx, 
.page-template-page-classes .step .n {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.page-template-page-classes .hero-center h1 {
    max-width: none;
}

/* ---------- Classes Page: Header ---------- */
.page-template-page-classes .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-template-page-classes .page-hero .lede {
    margin: 1.8rem auto 0;
}
@media (max-width: 700px) {
    .page-template-page-classes .page-hero { 
        padding: 56px 0 48px; 
    }
}

/* ---------- Classes Page: Anchor Nav ---------- */
.page-template-page-classes .anchor-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.6rem;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.page-template-page-classes .anchor-nav a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 1.2em 1.8em;
    transition: color .2s;
}
.page-template-page-classes .anchor-nav a:hover {
    color: var(--green);
}

/* ---------- Classes Page: Class Directory Grid ---------- */
.page-template-page-classes .classlist {
    border-top: 1px solid var(--hairline-strong);
}
.page-template-page-classes .classrow {
    display: grid;
    grid-template-columns: 90px 1.1fr 1.6fr auto;
    gap: 28px;
    align-items: center;
    padding: 34px 8px;
    border-bottom: 1px solid var(--hairline);
    transition: background .25s;
}
.page-template-page-classes .classrow:hover {
    background: var(--white);
}
.page-template-page-classes .classrow .idx {
    font-family: var(--serif);
    font-style: normal;
    font-size: 1.05rem;
    color: var(--green);
}
.page-template-page-classes .classrow p {
    font-size: .93rem;
    color: rgba(16, 20, 15, .68);
}
.page-template-page-classes .classrow .cmeta {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .63rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--green-deep);
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 860px) {
    .page-template-page-classes .classrow { 
        grid-template-columns: 56px 1fr; 
    }
    .page-template-page-classes .classrow p { 
        grid-column: 2; 
    }
    .page-template-page-classes .classrow .cmeta { 
        grid-column: 2; 
        text-align: left; 
    }
}

/* ---------- Classes Page: Steps (What to expect) ---------- */
.page-template-page-classes .steps {
    border-top: 1px solid var(--hairline);
}
.page-template-page-classes .step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 30px;
    padding: 36px 8px;
    border-bottom: 1px solid var(--hairline);
    align-items: start;
}
.page-template-page-classes .step .n {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    color: var(--green);
}
.page-template-page-classes .step h3 {
    margin-bottom: .5rem;
}
.page-template-page-classes .step p {
    color: rgba(16, 20, 15, .7);
    font-size: .97rem;
}
@media (max-width: 640px) {
    .page-template-page-classes .step { 
        grid-template-columns: 60px 1fr; 
        gap: 18px; 
    }
    .page-template-page-classes .step .n { 
        font-size: 1.4rem; 
    }
}

/* ---------- Classes Page: Timetable Embed ---------- */
.page-template-page-classes .embed-frame {
    border: 1px solid var(--hairline-strong);
    background: var(--white);
    height: 780px;
    position: relative;
}

.page-template-page-classes .embed-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
    z-index: 1;
}

.page-template-page-classes .embed-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 30px;
    z-index: 0;
}

@media (max-width: 700px) {
    .page-template-page-classes .embed-frame {
        height: 640px;
    }
}

/* ==========================================================================
   CONTACT & FAQ PAGE SPECIFIC STYLES
   ========================================================================== */

/* ---------- Contact Page Typography (Geometric Caps) ---------- */
.page-template-page-contact h1, 
.page-template-page-contact h2, 
.page-template-page-contact h3, 
.page-template-page-contact .serif, 
.page-template-page-contact .classrow .cname, 
.page-template-page-contact .pricerow .what, 
.page-template-page-contact .pricerow .amt, 
.page-template-page-contact .faq summary, 
.page-template-page-contact .band .giant, 
.page-template-page-contact .stat .big, 
.page-template-page-contact .cell .big {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-contact h1, 
.page-template-page-contact h2, 
.page-template-page-contact .band .giant {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-contact h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-contact h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

.page-template-page-contact .faq summary {
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-contact .hero-center h1 {
    max-width: none;
}

/* ---------- Contact Page: Header ---------- */
.page-template-page-contact .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-template-page-contact .page-hero .lede {
    margin: 1.8rem auto 0;
}
@media (max-width: 700px) {
    .page-template-page-contact .page-hero { 
        padding: 56px 0 48px; 
    }
}

/* ---------- Contact Page: Info List Grid ---------- */
.page-template-page-contact .info-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--hairline-strong);
}
.page-template-page-contact .info-list .item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 20px 6px;
    border-bottom: 1px solid var(--hairline);
}
.page-template-page-contact .info-list .k {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--green-deep);
    padding-top: .4em;
}
.page-template-page-contact .info-list .v {
    font-weight: 300;
}
.page-template-page-contact .info-list .v a {
    border-bottom: 1px solid var(--sage);
}
.page-template-page-contact .info-list .v a:hover {
    color: var(--green-deep);
}
@media (max-width: 560px) {
    .page-template-page-contact .info-list .item { 
        grid-template-columns: 1fr; 
        gap: 6px; 
    }
}

/* ---------- Contact Page: Forms ---------- */
.page-template-page-contact form.contact {
    display: grid;
    gap: 26px;
}
.page-template-page-contact form.contact .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
@media (max-width: 600px) {
    .page-template-page-contact form.contact .row2 { 
        grid-template-columns: 1fr; 
    }
}
.page-template-page-contact input, 
.page-template-page-contact textarea {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1rem;
    padding: .9em 2px;
    border: none;
    border-bottom: 1px solid var(--hairline-strong);
    background: transparent;
    width: 100%;
    color: var(--ink);
    border-radius: 0;
}
.page-template-page-contact input:focus, 
.page-template-page-contact textarea:focus {
    outline: none;
    border-bottom-color: var(--green);
}
.page-template-page-contact label {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--green-deep);
    display: block;
    margin-bottom: .2em;
}

/* ---------- Contact Page: FAQ Accordion ---------- */
.page-template-page-contact .faq {
    max-width: 860px;
    margin: 0 auto;
    border-top: 1px solid var(--hairline-strong);
}
.page-template-page-contact .faq details {
    border-bottom: 1px solid var(--hairline);
}
.page-template-page-contact .faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 6px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.2rem;
    transition: color .2s;
}
.page-template-page-contact .faq summary:hover {
    color: var(--green-deep);
}
.page-template-page-contact .faq summary::-webkit-details-marker {
    display: none;
}
.page-template-page-contact .faq summary::after {
    content: "+";
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--green);
    flex-shrink: 0;
    transition: transform .3s;
}
.page-template-page-contact .faq details[open] summary::after {
    transform: rotate(45deg);
}
.page-template-page-contact .faq .a {
    padding: 0 6px 28px;
    color: rgba(16, 20, 15, .72);
    max-width: 62em;
    font-weight: 300;
}

/* ---------- Contact Page: Form Success Notice ---------- */
.page-template-page-contact .notice {
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 22px 4px;
    font-size: .9rem;
    color: rgba(16, 20, 15, .65);
    font-weight: 300;
}
/* ==========================================================================
   PRICING PAGE SPECIFIC STYLES
   ========================================================================== */

/* ---------- Pricing Page Typography (Geometric Caps) ---------- */
.page-template-page-pricing h1, 
.page-template-page-pricing h2, 
.page-template-page-pricing h3, 
.page-template-page-pricing .serif, 
.page-template-page-pricing .pricerow .what, 
.page-template-page-pricing .pricerow .amt, 
.page-template-page-pricing .num {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-pricing h1, 
.page-template-page-pricing h2 {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-pricing h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-pricing h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

.page-template-page-pricing h3 {
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .24em;
    line-height: 1.7;
}

.page-template-page-pricing .num {
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: .28em;
}

.page-template-page-pricing .hero-center h1 {
    max-width: none;
}

/* ---------- Pricing Page Header & Anchor Nav ---------- */
.page-template-page-pricing .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-template-page-pricing .page-hero .lede {
    margin: 1.8rem auto 0;
}

@media (max-width: 700px) {
    .page-template-page-pricing .page-hero { 
        padding: 56px 0 48px; 
    }
}

.page-template-page-pricing .anchor-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.6rem;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.page-template-page-pricing .anchor-nav a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 1.2em 1.8em;
    transition: color .2s;
}

.page-template-page-pricing .anchor-nav a:hover {
    color: var(--green);
}

/* ---------- Pricing List Table Grid ---------- */
.page-template-page-pricing .pricelist {
    border-top: 1px solid var(--hairline-strong);
}

.page-template-page-pricing .pricerow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 26px;
    align-items: baseline;
    padding: 26px 8px;
    border-bottom: 1px solid var(--hairline);
    transition: background .25s;
}

.page-template-page-pricing .pricerow:hover {
    background: var(--white);
}

.page-template-page-pricing .pricerow .what {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.page-template-page-pricing .pricerow .sub {
    font-size: .85rem;
    color: rgba(16, 20, 15, .55);
    margin-top: .2rem;
    font-weight: 300;
    text-transform: none;
}

.page-template-page-pricing .pricerow .amt {
    font-weight: 300;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    letter-spacing: .06em;
}

.page-template-page-pricing .pricerow .per {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .63rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--green-deep);
    white-space: nowrap;
}

.page-template-page-pricing .pricerow.hot {
    background: var(--white);
    box-shadow: inset 3px 0 0 var(--green);
}

@media (max-width: 640px) {
    .page-template-page-pricing .pricerow {
        grid-template-columns: 1fr auto;
    }
    .page-template-page-pricing .pricerow .per {
        grid-column: 2;
        text-align: right;
    }
}

/* On Dark Section Styling (Solo Vibes) */
.page-template-page-pricing .on-dark .pricelist {
    border-color: rgba(255, 255, 255, .5);
}

.page-template-page-pricing .on-dark .pricerow {
    border-color: rgba(255, 255, 255, .18);
}

.page-template-page-pricing .on-dark .pricerow:hover {
    background: rgba(255, 255, 255, .05);
}

.page-template-page-pricing .on-dark .pricerow .sub {
    color: rgba(255, 255, 255, .55);
}

.page-template-page-pricing .on-dark .pricerow .per {
    color: var(--sage-soft);
}

/* ---------- Perks Grid (Trio) ---------- */
.page-template-page-pricing .trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--hairline);
}

.page-template-page-pricing .trio > div {
    padding: 44px 36px;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.page-template-page-pricing .trio > div:last-child {
    border-right: none;
}

.page-template-page-pricing .trio .num {
    display: block;
    margin-bottom: 1.2rem;
}

.page-template-page-pricing .trio h3 {
    margin-bottom: .8rem;
}

.page-template-page-pricing .trio p {
    font-size: .95rem;
    color: rgba(16, 20, 15, .7);
}

@media (max-width: 860px) {
    .page-template-page-pricing .trio {
        grid-template-columns: 1fr;
    }
    .page-template-page-pricing .trio > div {
        border-right: none;
    }
}

/* ---------- Bottom Policy Notice ---------- */
.page-template-page-pricing .notice {
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 22px 4px;
    font-size: .9rem;
    color: rgba(16, 20, 15, .65);
    font-weight: 300;
}

.page-template-page-pricing .notice strong {
    font-weight: 500;
}

/* ==========================================================================
   PRIVATE HIRE PAGE SPECIFIC STYLES
   ========================================================================== */

/* ---------- Private Hire Page Typography (Geometric Caps) ---------- */
.page-template-page-private-hire h1, 
.page-template-page-private-hire h2, 
.page-template-page-private-hire h3, 
.page-template-page-private-hire .serif {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-private-hire h1, 
.page-template-page-private-hire h2 {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-private-hire h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-private-hire h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

.page-template-page-private-hire .hero-center h1 {
    max-width: none;
}

/* ---------- Private Hire Page Header & Anchor Nav ---------- */
.page-template-page-private-hire .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-template-page-private-hire .page-hero .lede {
    margin: 1.8rem auto 0;
}

@media (max-width: 700px) {
    .page-template-page-private-hire .page-hero { 
        padding: 56px 0 48px; 
    }
}

.page-template-page-private-hire .anchor-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.6rem;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.page-template-page-private-hire .anchor-nav a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 1.2em 1.8em;
    transition: color .2s;
}

.page-template-page-private-hire .anchor-nav a:hover {
    color: var(--green);
}

/* ==========================================================================
   PRIVATE HIRE PAGE SPECIFIC STYLES
   ========================================================================== */

/* Typography & Headings */
.page-template-page-private-hire h1, 
.page-template-page-private-hire h2, 
.page-template-page-private-hire h3, 
.page-template-page-private-hire .serif {
    font-family: var(--sans);
    text-transform: uppercase;
}

.page-template-page-private-hire h1, 
.page-template-page-private-hire h2 {
    font-weight: 300;
    letter-spacing: .15em;
    line-height: 1.4;
}

.page-template-page-private-hire h1 {
    font-size: clamp(1.7rem, 3.8vw, 3rem);
}

.page-template-page-private-hire h2 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
}

/* Page Hero Header */
.page-template-page-private-hire .page-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-template-page-private-hire .page-hero .lede {
    margin: 1.8rem auto 0;
}

@media (max-width: 700px) {
    .page-template-page-private-hire .page-hero { 
        padding: 56px 0 48px; 
    }
}

/* Anchor Navigation */
.page-template-page-private-hire .anchor-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.6rem;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.page-template-page-private-hire .anchor-nav a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 1.2em 1.8em;
    transition: color .2s;
}

.page-template-page-private-hire .anchor-nav a:hover {
    color: var(--green);
}
/* ==========================================================================
   PRIVATE HIRE INQUIRY BAND (SAGEBG BAND STYLING)
   ========================================================================== */

.page-template-page-private-hire .sagebg.band {
    background-color: var(--sage-soft);
    text-align: center;
    padding: 110px 0;
}

.page-template-page-private-hire .sagebg.band .caps-sm {
    font-family: var(--sans);
    font-weight: 400;
    font-size: .65rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 1.6rem;
}

.page-template-page-private-hire .sagebg.band .giant {
    font-family: var(--sans);
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 4.2vw, 3.2rem);
    line-height: 1.4;
    letter-spacing: .15em;
    color: var(--ink);
}

.page-template-page-private-hire .sagebg.band .giant em.g,
.page-template-page-private-hire .sagebg.band .giant em {
    font-style: normal;
    color: var(--green);
}

.page-template-page-private-hire .sagebg.band .lede {
    font-size: 1.08rem;
    font-weight: 300;
    color: rgba(16, 20, 15, .74);
    line-height: 1.85;
    margin: 2rem auto 0;
    text-align: center;
    max-width: 37em;
}

.page-template-page-private-hire .sagebg.band .btn-row.center {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.6rem;
}

.page-template-page-private-hire .sagebg.band .btn {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: .7rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    padding: 1.25em 2.6em 1.15em;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
    text-decoration: none;
}

.page-template-page-private-hire .sagebg.band .btn:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

@media (max-width: 700px) {
    .page-template-page-private-hire .sagebg.band {
        padding: 72px 0;
    }
}

/* 02: Standardize Divider Lines (Desktop & Mobile) */
.theme-divider {
    width: 100%;
    max-width: 800px; /* Adjust to match the client's exact spec */
    height: 1px;
    background-color: #000; /* Adjust to brand color */
    margin: 20px auto;
}

/* 01: Mobile Overrides */
@media screen and (max-width: 768px) {
    /* Hide design lines */
    .theme-design-line {
        display: none !important;
    }
    
    /* Centre dividers */
    .theme-divider {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Centre buttons */
    .btn-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   BLOG SPECIFIC STYLES
   ========================================================================== */

/* === CSS VARIABLES (Add to your :root if not already present) === */
:root {
  --cream: #fbfaf7;
  --mist: #f0f1ec;
  --sage: #a1ada3;
  --sage-light: #dfe4de;
  --green: #546e64;
  --deep: #42574f;
  --ink: #1a1a1a;
  --white: #ffffff;
}

/* === HERO === */
.blog-hero {
  background: var(--green);
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}

.blog-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -40px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}

.blog-hero h1 {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 42px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

.blog-hero p {
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--sage-light);
  max-width: 540px;
  margin: 0 auto;
}

/* === BLOG GRID === */
.blog-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

/* === BLOG CARD === */
.blog-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.card-image {
  width: 100%;
  height: 220px;
  background: var(--sage-light);
  position: relative;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--green);
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
}

.card-body {
  padding: 28px 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-date {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}

.card-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 14px;
}

.card-excerpt {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

.card-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.blog-card:hover .card-link { gap: 10px; }

.card-link::after {
  content: '\2192';
}

/* === DIVIDER === */
.section-divider {
  width: 60px;
  height: 1px;
  background: var(--sage);
  margin: 0 auto 40px;
}

/* === RESPONSIVE OVERRIDES === */
@media (max-width: 768px) {
  .blog-hero { padding: 56px 24px; }
  .blog-hero h1 { font-size: 28px; letter-spacing: 0.15em; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SINGLE BLOG POST (GUTENBERG BLOCK STYLING)
   ========================================================================== */

/* Constrain the width of the content for readability */
.single-post section .wrap {
    max-width: 800px;
    margin: 0 auto;
}

/* Main Title (H1) */
.single-post h1 {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 42px;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 2.5rem !important;
}

/* Base Typography for Content */
.single-post .wp-block-paragraph,
.single-post .wp-block-list {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 300;
    color: #1a1a1a;
    margin-bottom: 24px;
}

/* Headings */
.single-post .wp-block-heading {
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.05em;
}

.single-post h2.wp-block-heading {
    font-weight: 400;
    font-size: 28px;
    color: #42574f;
    margin: 48px 0 20px;
}

.single-post h3.wp-block-heading {
    font-weight: 400;
    font-size: 22px;
    color: #546e64;
    margin: 32px 0 16px;
}

/* Lists */
.single-post .wp-block-list {
    padding-left: 24px;
}

.single-post .wp-block-list li {
    margin-bottom: 12px;
}

.single-post .wp-block-list strong {
    font-weight: 500;
    color: #42574f;
}

/* Tables (Optimized for your GEO formatting) */
.single-post .wp-block-table {
    margin: 40px 0;
}

.single-post table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.single-post table th,
.single-post table td,
.single-post table thead td { 
    padding: 16px;
    border-bottom: 1px solid #dfe4de;
    text-align: left;
    font-size: 16px;
    font-family: 'Jost', sans-serif;
}

.single-post table thead td,
.single-post table th {
    background: #f0f1ec;
    font-weight: 500;
    color: #42574f;
}

/* Mobile Overrides */
@media screen and (max-width: 768px) {
    .single-post h1 {
        font-size: 32px;
    }
    .single-post h2.wp-block-heading {
        font-size: 24px;
    }
    .single-post .wp-block-table {
        overflow-x: auto;
        display: block;
    }
	.page-template-page-contact .page-hero {
		padding-bottom: 0 !important;
	}
	.page-template-page-contact .wrap > div:first-child {
		order: 2;
		text-align: center;
	}
	.page-template-page-contact .wrap > div:last-child {
		order: 1;
	}
	.page-template-page-contact .wrap > div .btn {
		margin: auto;
	}
}

/* ==========================================================================
   STANDARD DEFAULT PAGES (Legal, Privacy, Generic Text Pages)
   Automatically styles any page that uses the "Default Template"
   ========================================================================== */

/* Constrain the width of the content for readability */
.page-template-default section .wrap {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 80px;
}

/* Main Page Title (H1) */
.page-template-default section .wrap h1 {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    text-align: center;
    margin-bottom: 3rem !important;
    line-height: 1.3;
}

/* Subheadings (H2, H3) */
.page-template-default section .wrap h2,
.page-template-default section .wrap .wp-block-heading {
    font-family: var(--sans);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green-deep);
    margin-top: 3rem;
    margin-bottom: 1.2rem;
}

/* Add a clean brand-colored underline to H2s */
.page-template-default section .wrap h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    border-bottom: 1px solid var(--sage-soft);
    padding-bottom: 0.5rem;
}

.page-template-default section .wrap h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--green);
}

/* Base Typography for Paragraphs */
.page-template-default section .wrap p,
.page-template-default section .wrap .wp-block-paragraph {
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.8;
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

/* Bold Text */
.page-template-default section .wrap strong {
    font-weight: 500;
    color: var(--ink);
}

/* Bulleted & Numbered Lists */
.page-template-default section .wrap .wp-block-list,
.page-template-default section .wrap ul,
.page-template-default section .wrap ol {
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    font-family: var(--sans);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.8;
}

.page-template-default section .wrap .wp-block-list li,
.page-template-default section .wrap ul li,
.page-template-default section .wrap ol li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.page-template-default section .wrap ul li {
    list-style-type: disc;
}

/* Links inside the text */
.page-template-default section .wrap a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--sage);
    transition: all 0.3s ease;
}

.page-template-default section .wrap a:hover {
    color: var(--green-deep);
    text-decoration-color: var(--green-deep);
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
    .page-template-default section .wrap {
        padding-top: 10px;
        padding-bottom: 40px;
    }
}

/* Secondary Notice Bar Variant */
.notice-bar-secondary {
    background: var(--green-deep); /* Uses your darker green tone to separate them */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.notice-bar-secondary a {
    color: var(--sage-soft);
    border-bottom-color: rgba(223, 228, 222, 0.5);
}

.notice-bar-secondary a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

/* Secondary Notice Bar Variant */
.notice-bar-secondary {
    background: var(--green-deep); /* Darker brand green for contrast */
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Clean separator line */
}

/* Softer link color for the secondary bar */
.notice-bar-secondary a {
    color: var(--sage-soft);
    border-bottom-color: rgba(223, 228, 222, 0.5);
}

.notice-bar-secondary a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}
/* Homepage Hero Promo Banner */
.hero-promo-banner {
    background: var(--sage-soft);
    color: var(--green-deep);
    padding: 10px 24px;
    border-radius: 50px;
    display: inline-block;
    margin-top: 1.5rem;
    font-weight: 500;
}

.hero-promo-banner a {
    color: var(--green-deep);
    border-bottom: 1px solid var(--green);
    transition: all 0.2s ease;
}

.hero-promo-banner a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Hide the sticky button wrapper on desktop */
.mobile-sticky-btn-wrap {
    display: none;
}

/* Show and dock the button to the bottom on mobile screens */
@media (max-width: 768px) {
    .mobile-sticky-btn-wrap {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--white, #ffffff); /* Fallback to white if var isn't set */
        padding: 15px 20px;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow above the button */
        z-index: 9999;
        box-sizing: border-box;
    }
    
    .mobile-sticky-btn-wrap .mobile-sticky-btn {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* Add padding to the bottom of the body so the page content isn't 
       hidden behind the sticky button when scrolling to the very bottom */
    body {
        padding-bottom: 80px; 
    }
}

/* Footer menu: centre every row on desktop (requested by Cindy, Sept 2026) */
footer.site .foot-nav ul,
footer.site .foot-nav .footer-menu-list {
    justify-content: center;
    justify-self: stretch;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
}