@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Libre+Baskerville:wght@400&display=swap');

:root{
  --bg:#F4EFE7;
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.84);
  --text:#2E2E2E;
  --muted:#4A4A4A;
  --subtle:#6B655E;
  --gold:#C8A96A;
  --gold-deep:#B88C3E;
  --line:rgba(46,46,46,.08);
  --shadow:0 18px 40px rgba(46,46,46,.08);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--muted);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.8), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)),
    var(--bg);
  line-height:1.72;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.022;
  background-image:linear-gradient(0deg, transparent 0 23px, rgba(46,46,46,.11) 24px, transparent 25px);
  background-size:100% 26px;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
p{margin:0 0 1rem}
ul{margin:.35rem 0 0;padding-left:1.1rem}
li{margin:.35rem 0}

h1,h2,h3,strong{
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 1rem;
}

.hero-copy h1,
.page-hero.compact h1{
  font-size:clamp(1.9rem,2.15vw,2.05rem);
  line-height:1.1;
}

.section-heading h2,
.quote,
.feature-band h3,
.cta h2,
.about .section-title,
section.alt .section-title,
.section-title{
  font-size:clamp(1.72rem,1.9vw,1.84rem);
  line-height:1.16;
}

.focus-card h3,
.post-card h2,
.post-card h3,
.card h2,
.card h3,
.contact-card h2,
.service-card-title{
  font-size:clamp(1.04rem,1vw,1.1rem);
  line-height:1.22;
}

.serif-copy{font-family:Inter,system-ui,sans-serif; line-height:1.72}

.container{width:min(calc(100% - 2rem), var(--max)); margin:auto}
.text-narrow{max-width:860px}
.page-wrap{min-height:100vh; display:flex; flex-direction:column}

.small-caps{
  display:block;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.76rem;
  color:var(--subtle);
  font-weight:500;
  margin:0;
}

.gold-divider{
  width:106px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 12%, var(--gold) 88%, transparent 100%);
  margin:1rem auto 1.25rem auto;
}
.gold-divider.left{margin:1rem 0 1.25rem 0}

.title-divider{
  width:48px;
  height:1px;
  background:var(--gold);
  margin:.55rem 0 1rem;
}

.sep{
  color:var(--gold);
  font-size:.56em;
  vertical-align:middle;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(244,239,231,.9);
  border-bottom:1px solid rgba(46,46,46,.04);
}
.header-inner{
  min-height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.8rem}
.brand img{width:42px; height:42px; object-fit:contain}
.brand-text{display:flex; flex-direction:column; gap:.05rem}
.brand-text strong{font-size:1.08rem; margin:0}
.brand-text span{font-size:.75rem; color:var(--subtle)}
.site-nav{display:flex; align-items:center; gap:1.25rem; font-size:.93rem}
.site-nav a{position:relative; color:var(--subtle)}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-.28rem; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
.site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1)}
.nav-toggle{
  display:none;
  border:1px solid rgba(200,169,106,.76);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  border-radius:999px;
  padding:.68rem .98rem;
  color:var(--text);
  font-weight:500;
  font-family:inherit;
}

/* Hero / page hero */
.hero{padding:3.4rem 0 3rem}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.82fr);
  gap:1.8rem;
  align-items:center;
}
.hero-kicker-block{display:block; margin-bottom:1rem}
.hero-copy p{max-width:720px}
.hero-card{
  justify-self:end; width:100%; max-width:380px;
  border-radius:32px; overflow:hidden;
  border:1px solid rgba(200,169,106,.22);
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.22));
}
.hero-card img{width:100%; aspect-ratio:4/4.75; object-fit:cover; object-position:center 10%}
.hero-badge{
  padding:1rem;
  background:rgba(244,239,231,.95);
  border-top:1px solid rgba(46,46,46,.05);
}
.hero-badge p{margin:0}

.page-hero.compact{padding:3.2rem 0 1.1rem}
.page-hero.compact .gold-divider{margin:1rem 0 1.25rem}
.page-hero.compact p{max-width:860px}

/* Buttons */
.button-row{display:flex; flex-wrap:wrap; gap:.82rem; margin-top:1.25rem}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:45px; padding:.78rem 1.18rem;
  border-radius:999px;
  border:1px solid rgba(200,169,106,.76);
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70));
  font-weight:500;
  box-shadow:0 8px 20px rgba(46,46,46,.05);
  color:var(--text);
}
.button.primary{
  background:linear-gradient(180deg, rgba(200,169,106,.22), rgba(200,169,106,.11));
}
.button:hover{color:var(--gold-deep); border-color:var(--gold-deep)}
.text-link{display:inline-flex; align-items:center; gap:.45rem; font-weight:500; color:var(--text)}
.text-link::after{content:"→"; color:var(--gold-deep)}
.hero-buttons{flex-wrap:nowrap}
.hero-buttons .button{white-space:nowrap; font-size:.88rem; padding:.72rem .96rem}

/* Stats */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.72rem;
  margin-top:1.35rem;
  align-items:stretch;
}
.stat{
  padding:.9rem;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border:1px solid rgba(200,169,106,.18);
  box-shadow:0 8px 18px rgba(46,46,46,.05);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.stat strong{
  color:var(--gold);
  font-family:Inter,system-ui,sans-serif;
  font-size:1.04rem;
  line-height:1.2;
  min-height:1.28em;
  display:block;
  margin:0 0 .18rem;
}
.stat span{display:block; margin-top:0; font-size:.84rem; color:var(--muted)}

/* Sections / cards */
.section{padding:3.7rem 0}
.section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-top:1px solid rgba(46,46,46,.04);
  border-bottom:1px solid rgba(46,46,46,.04);
}
.section-heading{
  max-width:820px;
  margin:0 auto 2rem;
  text-align:center;
}
.section-heading p{max-width:760px; margin-left:auto; margin-right:auto}
.section-heading.text-left-copy p,
.section-heading.text-left-copy .text-narrow{ text-align:left }

.card,.focus-card,.post-card,.contact-card,.article-card,.feature-band{
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.54));
  border:1px solid rgba(46,46,46,.05);
  box-shadow:var(--shadow);
  border-radius:26px;
  padding:1.45rem;
}
.focus-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.focus-card{
  position:relative; overflow:hidden;
}
.focus-card::before{content:none}
.focus-card::after{
  content:""; position:absolute; inset:auto -30px -42px auto; width:110px; height:110px;
  background:radial-gradient(circle, rgba(200,169,106,.14), transparent 70%);
}
.focus-card h3,.service-card-title{margin-bottom:0}
.focus-card .title-divider,.services-grid-secondary .title-divider{margin:.55rem 0 1rem}

.quote-panel{
  position:relative; overflow:hidden;
  border-radius:32px;
  padding:2.1rem 1.4rem;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.34));
  border:1px solid rgba(200,169,106,.22);
  box-shadow:var(--shadow);
}
.quote-panel::before{content:none}
.quote-panel p{max-width:760px; margin:0 auto}

.feature-band{position:relative; overflow:hidden}
.feature-band::before{content:none}
.feature-band.left-content{text-align:left}
.feature-band.left-content h3,.feature-band.left-content p{text-align:left; max-width:none}

.post-list,.insights-grid{display:grid; gap:1rem}
.insights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-card{display:flex; flex-direction:column; justify-content:flex-start}
.kicker{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  color:var(--subtle);
  font-weight:500;
}
.kicker.with-line::after{
  content:"";
  display:block;
  width:48px;
  height:1px;
  background:var(--gold);
  margin:.55rem 0 1rem;
}
.post-card h2,.post-card h3{margin-top:0}

/* Layout helpers */
.two-col,.contact-grid{display:grid; gap:1rem}
.two-col{grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)}
.two-col.balanced-top{
  align-items:start;
  grid-template-columns:minmax(0,.95fr) minmax(320px,.8fr);
}
.image-frame{
  position:relative; overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(200,169,106,.18);
  box-shadow:var(--shadow);
  background:var(--surface);
}
.image-frame img{width:100%; height:100%}
.image-frame.conversation{min-height:430px; max-height:430px}
.image-frame.conversation img{height:430px; object-fit:cover; object-position:center}
.image-frame.studio img{aspect-ratio:4/3; object-fit:cover; object-position:center 16%}
.image-frame.watermarked::after{
  content:""; position:absolute; inset:0;
  background:url('assets/watermark-post.png') center/64% auto no-repeat;
  opacity:.05;
}

.core-strengths-card{
  padding:1.35rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:430px;
  max-height:430px;
  text-align:center;
}
.core-strengths-card .gold-divider{margin:1rem auto 1.1rem}
.core-strengths-card ul{margin:0}
.core-strengths-list{
  display:block;
  text-align:left;
  margin:.15rem 0 0;
  padding-left:1.05rem;
}
.core-strengths-list li{margin:.3rem 0}
.core-strengths-list li:last-child{margin-bottom:0}

.contact-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  align-items:start;
}
.contact-grid.swapped > .contact-card:first-child{order:2}
.contact-grid.swapped > .contact-card:last-child{order:1}
.contact-card.compact-info{min-height:auto; align-self:start}
.contact-list{list-style:none; padding:0; margin:1rem 0 0}
.contact-list li{padding:.85rem 0; border-top:1px solid var(--line)}
.contact-card form{margin-top:.15rem}

.form-grid{display:grid; gap:.95rem}
label{display:grid; gap:.42rem; font-size:.94rem; font-weight:500; color:var(--text)}
input,textarea{
  width:100%; padding:.9rem 1rem;
  border-radius:14px;
  border:1px solid rgba(46,46,46,.12);
  background:rgba(255,255,255,.92);
  font:inherit;
  color:var(--text);
}
textarea{min-height:180px; resize:vertical}
.hidden{position:absolute !important; left:-9999px !important}

.cta{text-align:center; padding:3rem 0 3.4rem}
.cta p{max-width:760px; margin:0 auto 1.2rem}
.cta h2{margin-bottom:16px}

/* policy */
.policy-page .page-hero.compact{padding-bottom:.55rem}
.policy-page .page-hero.compact + .section{padding-top:.9rem}
.policy-page .article-body,.policy-page .article-body p,.policy-page .article-body .serif-copy{
  font-family:Inter,system-ui,sans-serif;
  line-height:1.72;
}

/* footer */
.site-footer{
  margin-top:auto;
  background:linear-gradient(180deg, rgba(236,229,218,.96), rgba(232,224,213,.98));
  border-top:1px solid rgba(46,46,46,.05);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(180px,.72fr));
  gap:1rem;
  padding:2.2rem 0 1.4rem;
}
.footer-title{font-size:1rem; margin-bottom:.68rem}
.footer-links{display:grid; gap:.55rem}
.footer-links a,.footer-links span{color:var(--subtle)}
.footer-links a:hover{color:var(--gold-deep)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.7rem;
  padding:1rem 0 1.4rem;
  border-top:1px solid rgba(46,46,46,.05);
  font-size:.83rem;
  color:var(--subtle);
}

@media (max-width:1024px){
  .hero-grid,.footer-grid{grid-template-columns:1fr}
  .hero-card{justify-self:start; max-width:360px}
  .hero-buttons{flex-wrap:wrap}
}

@media (max-width:900px){
  .focus-grid,.insights-grid,.two-col,.contact-grid,.hero-stats{grid-template-columns:1fr}
  .two-col.balanced-top .image-frame.conversation,
  .two-col.balanced-top .core-strengths-card{
    min-height:auto;
    max-height:none;
  }
  .two-col.balanced-top .image-frame.conversation img{
    height:auto;
    aspect-ratio:4/3;
  }
  .contact-grid.swapped > .contact-card:first-child,
  .contact-grid.swapped > .contact-card:last-child{order:initial}
}

@media (max-width:760px){
  .container{width:min(calc(100% - 1.35rem), var(--max))}
  .header-inner{min-height:72px}
  .brand-text span{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav{
    display:none;
    position:absolute;
    top:72px; left:.7rem; right:.7rem;
    flex-direction:column;
    align-items:flex-start;
    gap:.9rem;
    padding:1rem;
    background:rgba(244,239,231,.98);
    border:1px solid rgba(46,46,46,.06);
    border-radius:18px;
    box-shadow:0 8px 18px rgba(46,46,46,.05);
  }
  .site-nav.open{display:flex}
  .button-row{flex-direction:column; align-items:stretch}
  .button{width:100%}
  .card,.focus-card,.post-card,.contact-card,.article-card,.feature-band{padding:1.12rem}
  .quote-panel{padding:1.55rem .95rem}
  .section{padding:3rem 0}
  .cta{padding:2.4rem 0 2.9rem}
  .nav-toggle{color:var(--text)}
}


/* ===== v12 targeted home/about fixes ===== */

/* Home: make Signature Perspective title match main section-title system exactly */
.quote-panel .quote{
  color:#2E2E2E !important;
  font-family:Inter, system-ui, sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
  font-size:clamp(1.72rem, 1.9vw, 1.84rem) !important;
  line-height:1.16 !important;
  margin:0 0 16px 0 !important;
}

/* Home: ensure explicit divider appears between label and title in What sits behind the work */
.feature-band .gold-divider.left{
  display:block !important;
  width:106px !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 12%, var(--gold) 88%, transparent 100%) !important;
  margin:1rem 0 1.25rem 0 !important;
}
.feature-band .small-caps.with-line::after{
  display:none !important;
  content:none !important;
}

/* About: centre only this title, keep divider centered under it, body left aligned */
.centered-about-title{
  text-align:center !important;
}
section.alt .card > .gold-divider{
  margin:1rem auto 1.25rem auto !important;
}
section.alt .card p{
  text-align:left !important;
}


/* ===== v13: center 'What sits behind the work' sections (home + about only) ===== */
.centered-feature{
  text-align:center !important;
}
.centered-feature .small-caps{
  text-align:center !important;
}
.centered-feature .gold-divider{
  margin:1rem auto 1.25rem auto !important;
}
.centered-feature h2,
.centered-feature .section-title{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.centered-feature p{
  text-align:center !important;
}


/* ===== v14 FINAL HOME FIX ===== */
.force-center{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.force-center-divider{
  margin-left:auto !important;
  margin-right:auto !important;
}


/* ===== v15 mobile-only refinements ===== */
@media (max-width:900px){
  /* Contact page: form first, contact details second on mobile only */
  .contact-grid.swapped > .contact-card:first-child{order:2 !important;}
  .contact-grid.swapped > .contact-card:last-child{order:1 !important;}

  /* About page: remove tiny floating image on mobile */
  .two-col.balanced-top .image-frame.conversation{
    display:none !important;
  }
  .two-col.balanced-top{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  /* Mobile title scale */
  .hero-copy h1,
  .page-hero.compact h1{
    font-size:clamp(1.45rem, 7.2vw, 1.8rem) !important;
    line-height:1.08 !important;
  }

  .section-heading h2,
  .quote,
  .feature-band h3,
  .cta h2,
  .about .section-title,
  section.alt .section-title,
  .section-title{
    font-size:clamp(1.28rem, 5.6vw, 1.52rem) !important;
    line-height:1.14 !important;
  }

  .focus-card h3,
  .post-card h2,
  .post-card h3,
  .card h2,
  .card h3,
  .contact-card h2,
  .service-card-title{
    font-size:clamp(0.98rem, 4.5vw, 1.06rem) !important;
    line-height:1.22 !important;
  }

  .small-caps,
  .kicker{
    font-size:.7rem !important;
    letter-spacing:.16em !important;
  }
}


/* ===== v16 targeted fixes ===== */

/* Home page "What sits behind the work" section: fully centered */
.feature-band.centered-feature{
  text-align:center !important;
}
.feature-band.centered-feature .small-caps{
  text-align:center !important;
}
.feature-band.centered-feature .gold-divider{
  display:block !important;
  margin:1rem auto 1.25rem auto !important;
}
.feature-band.centered-feature h2,
.feature-band.centered-feature h3{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.feature-band.centered-feature p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:900px !important;
}

/* Mobile only: contact form first, details second */
@media (max-width:900px){
  .contact-grid.swapped > .contact-card:first-child{order:2 !important;}
  .contact-grid.swapped > .contact-card:last-child{order:1 !important;}

  /* About page mobile: keep image visible and stack normally above core strengths */
  .two-col.balanced-top{
    grid-template-columns:1fr !important;
  }
  .two-col.balanced-top .image-frame.conversation{
    display:block !important;
    min-height:auto !important;
    max-height:none !important;
    margin-bottom:1rem !important;
  }
  .two-col.balanced-top .image-frame.conversation img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:4/3 !important;
    object-fit:cover !important;
  }
}

/* Mobile titles remain slightly reduced only */
@media (max-width:760px){
  .hero-copy h1,
  .page-hero.compact h1{
    font-size:clamp(1.45rem, 7.2vw, 1.8rem) !important;
    line-height:1.08 !important;
  }

  .section-heading h2,
  .quote,
  .feature-band h3,
  .cta h2,
  .about .section-title,
  section.alt .section-title,
  .section-title{
    font-size:clamp(1.28rem, 5.6vw, 1.52rem) !important;
    line-height:1.14 !important;
  }

  .focus-card h3,
  .post-card h2,
  .post-card h3,
  .card h2,
  .card h3,
  .contact-card h2,
  .service-card-title{
    font-size:clamp(0.98rem, 4.5vw, 1.06rem) !important;
    line-height:1.22 !important;
  }
}


/* ===== v18 targeted updates ===== */

/* 1. Title system: align hero and section titles consistently */
.hero-copy h1,
.page-hero.compact h1,
.section-heading h2,
.quote,
.feature-band h3,
.cta h2,
.about .section-title,
section.alt .section-title,
.section-title{
  font-size:clamp(1.72rem, 1.9vw, 1.84rem) !important;
  line-height:1.16 !important;
}

/* 2. Home feature heading centered and clean two-line treatment */
.feature-band{
  text-align:center !important;
}
.feature-band .small-caps{
  text-align:center !important;
}
.feature-band .gold-divider,
.feature-band .title-divider{
  margin:1rem auto 1.25rem auto !important;
}
.feature-band h3{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:1000px !important;
}
.feature-band p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:920px !important;
}

/* 3. Desktop hero: align image card height with left content block */
@media (min-width:901px){
  .hero-grid{
    align-items:stretch !important;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.82fr) !important;
  }
  .hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .hero-card{
    height:100% !important;
    max-width:380px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .hero-card img{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }
  .hero-badge{
    margin-top:auto !important;
  }
}

/* 4. Contact page: image moved under contact details and aligned with form height */
.contact-grid{
  align-items:stretch !important;
}
.contact-card{
  display:flex;
  flex-direction:column;
}
.contact-card.compact-info{
  min-height:100%;
}
.contact-shot{
  margin-top:1rem;
  flex:1 1 auto;
  min-height:320px;
}
.contact-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* 5. About page after image removal: strengths card full width and centered */
.text-narrow .core-strengths-card{
  max-width:860px;
  margin:0 auto;
}
.text-narrow .core-strengths-list{
  max-width:720px;
  margin:0 auto;
}

/* 6. Mobile-only: title scaling tidied but not oversized */
@media (max-width:760px){
  .hero-copy h1,
  .page-hero.compact h1,
  .section-heading h2,
  .quote,
  .feature-band h3,
  .cta h2,
  .about .section-title,
  section.alt .section-title,
  .section-title{
    font-size:clamp(1.34rem, 5.8vw, 1.56rem) !important;
    line-height:1.14 !important;
  }

  .focus-card h3,
  .post-card h2,
  .post-card h3,
  .card h2,
  .card h3,
  .contact-card h2,
  .service-card-title{
    font-size:clamp(0.98rem, 4.2vw, 1.05rem) !important;
  }
}

/* 7. Mobile contact/about image flow */
@media (max-width:900px){
  .contact-grid.swapped > .contact-card:first-child{order:2 !important;}
  .contact-grid.swapped > .contact-card:last-child{order:1 !important;}

  .contact-shot{
    min-height:220px;
  }
}


/* ===== v20 targeted batch updates from v18 ===== */

/* 1) Home hero desktop: align image card top and bottom with left content block */
@media (min-width: 901px) {
  .hero-grid {
    align-items: stretch !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .hero-buttons {
    margin-top: auto !important;
  }

  .hero-card {
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    height: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  .hero-card img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    display: block !important;
  }

  .hero-badge {
    margin-top: 0 !important;
  }
}

/* 2) Home page: keep titles/dividers centered, but left-align body text in the two centred statement sections */
.quote-panel,
.feature-band.centered-feature {
  text-align: center !important;
}
.quote-panel .small-caps,
.quote-panel .gold-divider,
.feature-band.centered-feature .small-caps,
.feature-band.centered-feature .gold-divider {
  text-align: center !important;
}
.quote-panel .quote,
.feature-band.centered-feature h3 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.quote-panel p,
.feature-band.centered-feature p {
  text-align: left !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* 3) About page desktop: how/core side-by-side, equal heights */
.about-dual-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.about-how-card,
.about-core-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.about-how-card {
  text-align: center !important;
}
.about-how-card h2 {
  text-align: center !important;
}
.about-how-card .gold-divider {
  margin: 1rem auto 1.25rem auto !important;
}
.about-how-card p {
  text-align: left !important;
}
.about-core-card {
  text-align: center !important;
}
.about-core-card .gold-divider {
  margin: 1rem auto 1.1rem auto !important;
}
.about-core-card .core-strengths-card,
.about-how-card .section-title-force {
  min-height: auto !important;
  max-height: none !important;
}
.about-core-card .core-strengths-list {
  text-align: left !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  .about-dual-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 4) About page statement section: centred heading/divider, left-aligned body */
.about-page .feature-band p,
body.about-page .feature-band p {
  text-align: left !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* 5) Contact page desktop: reduce right section height and align both columns top/bottom more neatly */
.contact-grid {
  align-items: stretch !important;
}
.contact-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.contact-card form {
  margin-bottom: 0 !important;
}
.contact-card textarea {
  min-height: 170px !important;
}
.contact-card.compact-info {
  justify-content: flex-start !important;
}
.contact-shot {
  margin-top: 1rem !important;
  flex: 1 1 auto !important;
  min-height: 200px !important;
  max-height: 270px !important;
}
.contact-shot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 900px) {
  .contact-card,
  .contact-card.compact-info {
    height: auto !important;
  }
  .contact-shot {
    min-height: 220px !important;
    max-height: none !important;
  }
}


/* ===== v21 proper targeted fixes ===== */

/* HOME HERO: keep left block unchanged, reduce right block only so bottom aligns closer to buttons */
@media (min-width: 901px) {
  .home-page .hero-grid {
    align-items: start !important;
  }

  .home-page .hero-copy {
    display: block !important;
    height: auto !important;
  }

  .home-page .hero-card {
    align-self: start !important;
    height: auto !important;
    max-width: 350px !important;
    display: block !important;
  }

  .home-page .hero-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 4.7 !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    display: block !important;
  }

  .home-page .hero-badge {
    padding: .82rem .92rem !important;
  }
}

/* HOME STATEMENT PANELS: centered small caps/title/divider, left-aligned body copy */
.home-page .quote-panel .quote,
.home-page .feature-band.centered-feature h3 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 760px !important;
}

.home-page .quote-panel p,
.home-page .feature-band.centered-feature p {
  text-align: left !important;
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* ABOUT: side-by-side cards equal height and visually balanced */
@media (min-width: 901px) {
  .about-page .about-dual-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  .about-page .about-how-card,
  .about-page .about-core-card {
    min-height: 400px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* ABOUT: "How I am often brought in" to match Core Strengths style */
.about-page .about-how-card h2 {
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--subtle) !important;
  margin: 0 !important;
  text-align: center !important;
}

.about-page .about-how-card .gold-divider,
.about-page .about-core-card .gold-divider {
  margin: 1rem auto 1.15rem auto !important;
}

.about-page .about-how-card p,
.about-page .about-core-card .core-strengths-list {
  text-align: left !important;
}

.about-page .about-core-card .core-strengths-list {
  max-width: 720px !important;
  margin: auto 0 !important;
  padding-left: 1.05rem !important;
}

.about-page .about-core-card {
  text-align: center !important;
}

/* ABOUT feature block: centered heading/divider, left-aligned body */
.about-page .feature-band h3 {
  text-align: center !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.about-page .feature-band p {
  text-align: left !important;
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* CONTACT desktop only: reduce right block height and remove excess white space */
@media (min-width: 901px) {
  .contact-page .contact-grid {
    align-items: start !important;
  }

  .contact-page .contact-card {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  .contact-page .contact-card textarea {
    min-height: 155px !important;
  }

  .contact-page .contact-shot {
    min-height: 220px !important;
    max-height: 250px !important;
    margin-top: .9rem !important;
  }

  .contact-page .contact-shot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* MOBILE: keep these statement bodies left aligned too */
@media (max-width: 900px) {
  .home-page .quote-panel p,
  .home-page .feature-band.centered-feature p,
  .about-page .feature-band p {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    text-align: left !important;
    margin: 0 auto !important;
  }

  .about-page .about-dual-grid {
    grid-template-columns: 1fr !important;
  }

  .about-page .about-how-card,
  .about-page .about-core-card {
    min-height: auto !important;
    height: auto !important;
  }
}


/* ===== v22 requested refinements ===== */

/* Home hero: keep left side unchanged, reduce only right card height */
@media (min-width: 901px) {
  .home-page .hero-grid {
    align-items: start !important;
  }

  .home-page .hero-copy {
    display: block !important;
    height: auto !important;
  }

  .home-page .hero-card {
    align-self: start !important;
    height: auto !important;
    max-width: 340px !important;
    display: block !important;
  }

  .home-page .hero-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 4.45 !important;
    object-fit: cover !important;
    object-position: center 10% !important;
  }

  .home-page .hero-badge {
    padding: 0.75rem 0.9rem !important;
  }
}

/* Home: add more gap between stat blocks and buttons */
.home-page .hero-buttons {
  margin-top: 1.2rem !important;
}

/* Home statement panels: centered title/divider, left-aligned body copy */
.home-page .quote-panel .quote,
.home-page .feature-band.centered-feature h3 {
  text-align: center !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-page .quote-panel p,
.home-page .feature-band.centered-feature p {
  text-align: left !important;
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  margin: 0 auto !important;
}

/* About dual cards: equal visual height and balanced vertical placement */
@media (min-width: 901px) {
  .about-page .about-dual-grid {
    align-items: stretch !important;
  }

  .about-page .about-how-card,
  .about-page .about-core-card {
    min-height: 390px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* About: make "How I am often brought in" match Core Strengths style */
.about-page .about-how-card h2 {
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--subtle) !important;
  text-align: center !important;
  margin: 0 !important;
}

.about-page .about-how-card .gold-divider,
.about-page .about-core-card .gold-divider {
  margin: 1rem auto 1.1rem auto !important;
}

.about-page .about-how-card p {
  text-align: left !important;
}

.about-page .about-core-card {
  text-align: center !important;
}

.about-page .about-core-card .core-strengths-list {
  text-align: left !important;
  max-width: 720px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding-left: 1.05rem !important;
}

/* About feature panel: centered title/divider, left-aligned body */
.about-page .feature-band h3 {
  text-align: center !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.about-page .feature-band p {
  text-align: left !important;
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  margin: 0 auto !important;
}

/* Mobile: keep statement bodies left aligned and controlled width */
@media (max-width: 900px) {
  .home-page .quote-panel p,
  .home-page .feature-band.centered-feature p,
  .about-page .feature-band p {
    text-align: left !important;
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
  }

  .about-page .about-how-card,
  .about-page .about-core-card {
    min-height: auto !important;
    height: auto !important;
  }
}


/* ===== v23 about accordion + subtle site texture ===== */

/* subtle parchment texture, slightly richer but still restrained */
body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    var(--bg) !important;
}
body::before{
  opacity:.032 !important;
  background-image:
    linear-gradient(0deg, transparent 0 23px, rgba(46,46,46,.09) 24px, transparent 25px),
    linear-gradient(90deg, rgba(200,169,106,.018), rgba(200,169,106,0) 28%, rgba(200,169,106,.014) 54%, rgba(200,169,106,0) 78%);
  background-size:100% 26px, 100% 100%;
}

/* about core strengths as grouped accordion */
.about-page .about-core-card{
  position:relative;
  overflow:hidden;
}
.about-page .section-watermark::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/watermark-post.png') center 58%/72% auto no-repeat;
  opacity:.05;
  pointer-events:none;
}
.about-page .core-accordion-card{
  justify-content:center !important;
}
.about-page .core-accordion{
  position:relative;
  z-index:1;
  width:min(100%, 720px);
  margin:auto 0;
}
.about-page .strength-group{
  border-top:1px solid rgba(46,46,46,.08);
}
.about-page .strength-group:first-child{
  border-top:0;
}
.about-page .strength-group summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  padding:.9rem 0;
  color:var(--text);
}
.about-page .strength-group summary::-webkit-details-marker{
  display:none;
}
.about-page .strength-title{
  font-size:.98rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--text);
}
.about-page .strength-marker{
  font-size:1.1rem;
  line-height:1;
  color:var(--gold-deep);
  min-width:1rem;
  text-align:center;
}
.about-page .strength-group[open] .strength-marker{
  content:"–";
}
.about-page .strength-group[open] .strength-marker::before{
  content:"–";
}
.about-page .strength-group[open] .strength-marker{
  color:var(--gold-deep);
}
.about-page .strength-group[open] summary .strength-marker{
  font-size:1.1rem;
}
.about-page .strength-group summary .strength-marker{
  position:relative;
}
.about-page .strength-group summary .strength-marker{
  color:var(--gold-deep);
}
.about-page .strength-group[open] summary .strength-marker{
  color:var(--gold-deep);
}
.about-page .strength-group[open] summary .strength-marker{
  visibility:hidden;
}
.about-page .strength-group[open] summary .strength-marker::before{
  visibility:visible;
  position:absolute;
  inset:0;
}
.about-page .strength-items{
  margin:0 0 .8rem 0;
  padding:0 0 0 1.05rem;
}
.about-page .strength-items li{
  margin:.35rem 0;
}

/* keep about paired cards aligned and balanced */
@media (min-width:901px){
  .about-page .about-dual-grid{
    align-items:stretch !important;
  }
  .about-page .about-how-card,
  .about-page .about-core-card{
    min-height:410px !important;
  }
}

/* optional small-caps look retained on left heading only if desired elsewhere */
.about-page .about-how-card h2{
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-size:.76rem !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  color:var(--subtle) !important;
  text-align:center !important;
  margin:0 !important;
}

/* ===== v23 redo fixes ===== */

/* Subtle global parchment texture only.  No repeated image background. */
body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)),
    var(--bg) !important;
}

body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.028 !important;
  background-image:
    linear-gradient(0deg, transparent 0 24px, rgba(46,46,46,.075) 25px, transparent 26px),
    linear-gradient(90deg, rgba(200,169,106,.025), rgba(200,169,106,0) 32%, rgba(200,169,106,.018) 66%, rgba(200,169,106,0) 100%);
  background-size:100% 27px, 100% 100% !important;
}

.page-wrap, .site-header, main, footer{
  position:relative;
  z-index:1;
}

/* About page phoenix watermark: present but very faint and contained */
.about-page .section-watermark{
  position:relative;
  overflow:hidden;
}

.about-page .section-watermark::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url('assets/watermark-post.png') center 58% / 62% auto no-repeat !important;
  opacity:.055 !important;
  z-index:0;
}

.about-page .core-accordion,
.about-page .about-core-card > .small-caps,
.about-page .about-core-card > .gold-divider{
  position:relative;
  z-index:1;
}

/* Accordion: all closed by default, tidy spacing and bullet alignment */
.about-page .core-accordion{
  width:min(100%, 720px);
  margin:auto 0;
}

.about-page .strength-group{
  border-top:1px solid rgba(46,46,46,.08);
  padding:0;
}

.about-page .strength-group:first-child{
  border-top:0;
}

.about-page .strength-group summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  padding:.88rem 0;
  margin:0 !important;
}

.about-page .strength-group summary::-webkit-details-marker{
  display:none;
}

.about-page .strength-title{
  font-size:.98rem;
  font-weight:500;
  color:var(--text);
}

.about-page .strength-marker{
  position:relative;
  min-width:1rem;
  text-align:center;
  font-size:1.05rem;
  line-height:1;
  color:var(--gold-deep);
}

.about-page .strength-group[open] .strength-marker{
  color:transparent;
}

.about-page .strength-group[open] .strength-marker::before{
  content:"–";
  position:absolute;
  inset:0;
  color:var(--gold-deep);
}

.about-page .strength-group[open] summary{
  padding-bottom:.4rem;
}

.about-page .strength-items{
  margin:.1rem 0 .9rem 0 !important;
  padding:0 0 0 1.25rem !important;
  list-style:disc outside !important;
}

.about-page .strength-items li{
  margin:.32rem 0 !important;
  line-height:1.58 !important;
  padding-left:0 !important;
}

@media (max-width: 900px){
  .about-page .section-watermark::before{
    background-size:74% auto !important;
    opacity:.05 !important;
  }
}


/* ===== v31 proper about/services accordion + about watermark ===== */

/* ABOUT PAGE watermark behind the page content area, not inside cards */
.about-page main{
  position: relative;
  isolation: isolate;
}
.about-page .about-page-watermark{
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 88vw);
  height: 1300px;
  pointer-events: none;
  z-index: 0;
  background: url('assets/phoenix-watermark-clean.png') center 120px / 76% auto no-repeat;
  opacity: .12;
}
.about-page main > *:not(.about-page-watermark){
  position: relative;
  z-index: 1;
}
/* Ensure no internal card watermark remains */
.about-page .about-core-card.section-watermark::before{
  content: none !important;
}

/* ABOUT core strengths accordion: clean rows, no browser bullets at all */
.about-page .core-accordion{
  width:min(100%, 720px);
  margin:auto 0;
}
.about-page .strength-group{
  border-top:1px solid rgba(46,46,46,.08);
  padding:0;
}
.about-page .strength-group:first-child{
  border-top:0;
}
.about-page .strength-group summary{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1rem;
  cursor:pointer;
  padding:.88rem 0;
  margin:0 !important;
}
.about-page .strength-group summary::-webkit-details-marker{
  display:none;
}
.about-page .strength-title{
  font-size:.98rem;
  font-weight:500;
  color:var(--text);
  line-height:1.35;
  text-align:left;
  margin:0;
}
.about-page .strength-marker{
  position:relative;
  min-width:1rem;
  text-align:center;
  font-size:1.05rem;
  line-height:1;
  color:var(--gold-deep);
}
.about-page .strength-group[open] .strength-marker{
  color:transparent;
}
.about-page .strength-group[open] .strength-marker::before{
  content:"–";
  position:absolute;
  inset:0;
  color:var(--gold-deep);
}
.about-page .strength-group[open] summary{
  padding-bottom:.42rem;
}
.about-page .strength-rows{
  margin:.08rem 0 .92rem 0;
  display:grid;
  row-gap:.34rem;
}
.about-page .strength-row{
  display:block;
  margin:0;
  padding:0;
}
.about-page .strength-copy{
  display:block;
  line-height:1.58;
  color:var(--muted);
  text-align:left;
  margin:0;
  padding:0;
}

/* SERVICES "What you can expect" accordion */
.services-bullets .service-accordion{
  margin-top:.25rem;
}
.services-bullets .service-strength-group{
  border-top:1px solid rgba(46,46,46,.08);
  padding:0;
}
.services-bullets .service-strength-group:first-child{
  border-top:0;
}
.services-bullets .service-strength-group summary{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1rem;
  cursor:pointer;
  padding:.88rem 0;
  margin:0 !important;
}
.services-bullets .service-strength-group summary::-webkit-details-marker{
  display:none;
}
.services-bullets .service-strength-title{
  font-size:.98rem;
  font-weight:500;
  color:var(--text);
  line-height:1.35;
}
.services-bullets .service-strength-marker{
  position:relative;
  min-width:1rem;
  text-align:center;
  font-size:1.05rem;
  line-height:1;
  color:var(--gold-deep);
}
.services-bullets .service-strength-group[open] .service-strength-marker{
  color:transparent;
}
.services-bullets .service-strength-group[open] .service-strength-marker::before{
  content:"–";
  position:absolute;
  inset:0;
  color:var(--gold-deep);
}
.services-bullets .service-strength-group[open] summary{
  padding-bottom:.42rem;
}
.services-bullets .service-strength-rows{
  margin:.08rem 0 .92rem 0;
  display:grid;
  row-gap:.34rem;
}
.services-bullets .service-strength-copy{
  display:block;
  line-height:1.58;
  color:var(--muted);
}

/* Mobile: keep watermark softer */
@media (max-width:900px){
  .about-page .about-page-watermark{
    top: 90px;
    width: 96vw;
    height: 1100px;
    background-size: 92% auto;
    background-position: center 90px;
    opacity: .085;
  }
}


/* ===== v35 about phoenix from logo + mobile menu fix ===== */

/* About page watermark: clean logo-derived phoenix behind the page content area */
.about-page main{
  position: relative !important;
  isolation: isolate !important;
}

.about-page .about-page-watermark{
  position: absolute !important;
  top: 90px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(980px, 86vw) !important;
  height: 1200px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: url('assets/phoenix-watermark-logo.png') center 130px / 78% auto no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

.about-page main > *:not(.about-page-watermark){
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure no internal card watermark remains */
.about-page .about-core-card.section-watermark::before{
  content: none !important;
  background: none !important;
}

/* Mobile header/menu: reliable open state and cleaner button */
.header-inner{
  position: relative !important;
}
.nav-toggle{
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  touch-action: manipulation !important;
  line-height: 1 !important;
}

@media (max-width: 760px){
  .nav-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    min-width: 92px !important;
    padding: .82rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
    position: relative !important;
    z-index: 120 !important;
  }

  .site-nav{
    display: none !important;
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: .65rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: .45rem 0 !important;
    background: rgba(244,239,231,.992) !important;
    border: 1px solid rgba(46,46,46,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(46,46,46,.12) !important;
    z-index: 119 !important;
  }

  .site-nav.open{
    display: flex !important;
  }

  .site-nav a{
    width: 100% !important;
    padding: .9rem 1rem !important;
  }

  .site-nav a::after{
    display: none !important;
  }

  .site-nav a + a{
    border-top: 1px solid rgba(46,46,46,.06) !important;
  }

  .brand{
    min-width: 0 !important;
  }

  .brand-text strong{
    font-size: clamp(1rem, 5vw, 1.18rem) !important;
  }

  .brand-text span{
    display: none !important;
  }
}

/* Mobile watermark softer */
@media (max-width: 900px){
  .about-page .about-page-watermark{
    top: 78px !important;
    width: 96vw !important;
    height: 950px !important;
    background-size: 95% auto !important;
    background-position: center 80px !important;
    opacity: .78 !important;
  }
}


/* ===== v37 actual mobile menu fix ===== */
/* The menu issue was not just CSS overrides. Phones were likely double-firing touch/click.
   This block simplifies mobile nav styling and uses a wider breakpoint for consistency. */

.header-inner{
  position: relative !important;
}

.nav-toggle{
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

@media (max-width: 900px){
  .brand{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .brand-text strong{
    font-size: clamp(1rem, 5vw, 1.16rem) !important;
  }

  .brand-text span{
    display: none !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    min-height: 46px !important;
    padding: .8rem 1rem !important;
    border-radius: 999px !important;
    position: relative !important;
    z-index: 320 !important;
    border: 1px solid rgba(200,169,106,.76) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }

  .site-nav{
    display: none !important;
    position: absolute !important;
    top: calc(100% - 2px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: .55rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: .45rem 0 !important;
    background: rgba(244,239,231,.995) !important;
    border: 1px solid rgba(46,46,46,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(46,46,46,.12) !important;
    z-index: 319 !important;
  }

  .site-nav.open,
  body.menu-open .site-nav{
    display: flex !important;
  }

  .site-nav a{
    width: 100% !important;
    padding: .9rem 1rem !important;
  }

  .site-nav a::after{
    display: none !important;
  }

  .site-nav a + a{
    border-top: 1px solid rgba(46,46,46,.06) !important;
  }
}

@media (min-width: 901px){
  .nav-toggle{
    display: none !important;
  }
  .site-nav{
    display: flex !important;
    position: static !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }
}


/* ===== v38 true mobile menu overlay fix ===== */
/* The problem is stacking and positioning.  Make the mobile nav a fixed overlay panel
   under the sticky header so page content cannot sit on top of it or intercept taps. */

.site-header{
  overflow: visible !important;
}

@media (max-width: 900px){
  .site-header{
    z-index: 1000 !important;
  }

  .header-inner{
    position: relative !important;
    z-index: 1001 !important;
  }

  .nav-toggle{
    position: relative !important;
    z-index: 1003 !important;
  }

  .site-nav{
    display: none !important;
    position: fixed !important;
    top: 86px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 110px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: .45rem 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(244,239,231,.998) !important;
    border: 1px solid rgba(46,46,46,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(46,46,46,.16) !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
  }

  .site-nav.open,
  body.menu-open .site-nav{
    display: flex !important;
  }

  .site-nav a{
    display: block !important;
    width: 100% !important;
    padding: .95rem 1rem !important;
    position: relative !important;
    z-index: 1003 !important;
  }

  .site-nav a + a{
    border-top: 1px solid rgba(46,46,46,.06) !important;
  }

  .site-nav a::after{
    display: none !important;
  }

  /* ensure page content never stacks above open menu */
  body.menu-open main,
  body.menu-open footer{
    position: relative !important;
    z-index: 1 !important;
  }
}