/* ============================================================
   Raza Immigration Services — main stylesheet
   Single-theme by design: the firm's navy/gold identity.
   Every colour painted explicitly; nothing inherited.
   ============================================================ */

:root{
  --navy:#16212f;
  --navy-deep:#0e1720;
  --navy-soft:#22303f;
  --gold:#cba557;
  --gold-deep:#8d6f28;
  --gold-wash:#f5eeda;
  --paper:#f2f4f7;
  --surface:#ffffff;
  --surface-2:#e8ecf1;
  --ink:#16212f;
  --ink-2:#4a5a6d;
  --ink-3:#7b8b9d;
  --rule:#d7dde5;
  --rule-dark:#2c3a4a;
  --on-navy:#e9edf2;
  --on-navy-2:#a9b8c8;
  --measure:66ch;
  --shadow-s:0 1px 2px rgba(22,33,47,.05),0 6px 18px -10px rgba(22,33,47,.16);
  --shadow-m:0 2px 4px rgba(22,33,47,.06),0 18px 40px -22px rgba(22,33,47,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:Newsreader,Georgia,"Times New Roman",serif;text-wrap:balance;margin:0;font-weight:500}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{max-width:76rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,3rem)}
.measure{max-width:var(--measure)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:var(--navy-deep);padding:.7rem 1.2rem;font-size:.85rem;
}
.skip-link:focus{left:1rem;top:1rem}

/* ---------- shared ---------- */
.eyebrow{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--gold);flex:none}
.eyebrow.on-dark{color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:Poppins,sans-serif;
  font-size:.87rem;font-weight:500;letter-spacing:.01em;padding:.78rem 1.4rem;
  border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.btn-gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.btn-gold:hover{background:#b9924a;border-color:#b9924a}
.btn-line{border-color:var(--rule-dark);color:var(--on-navy)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-line-dark{border-color:var(--ink);color:var(--ink)}
.btn-line-dark:hover{background:var(--ink);color:var(--surface)}
.btn-navy{background:var(--navy-deep);color:var(--gold);border-color:var(--navy-deep)}
.btn-navy:hover{background:var(--navy);border-color:var(--navy)}
.btn-ghost-navy{border-color:rgba(22,33,47,.35);color:var(--navy-deep)}
.btn-ghost-navy:hover{background:rgba(22,33,47,.08)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}

section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:clamp(1.85rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.015em}
.sec-head p{color:var(--ink-2);margin-top:.9rem;max-width:58ch}

/* ---------- utility bar ---------- */
.util{background:var(--navy-deep);color:var(--on-navy-2);font-size:.78rem}
.util .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;align-items:center;padding-block:.55rem}
.util a{display:inline-flex;align-items:center;gap:.45rem;color:var(--on-navy-2);transition:color .18s}
.util a:hover{color:var(--gold)}
.util .reg{margin-left:auto;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.util svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.util .reg-short{display:none}

/* Tablet and below: phone and email keep the first row, the registration
   drops to its own row behind a hairline so the rows read as deliberate
   rather than merely wrapped. */
@media (max-width:760px){
  .util{font-size:.75rem}
  .util .wrap{gap:0;padding-block:0}
  .util a{padding-block:.5rem}
  .util .util-email{
    min-width:0;
    /* A 33-character address must be allowed to shrink, not push the row wide. */
    overflow:hidden;
  }
  .util .util-email::after{content:none}
  .util .reg{
    margin-left:0;flex-basis:100%;
    padding-block:.5rem;
    border-top:1px solid rgba(233,237,242,.08);
  }
}

/* Phones: one tidy row — tap-to-call at the left, the regulator badge at the
   right. The email is one tap away in the menu and again in the footer, so it
   earns its place there rather than crowding this bar. */
@media (max-width:560px){
  .util{font-size:.72rem}
  .util .wrap{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.75rem}
  .util .util-email{display:none}
  .util .reg{
    flex-basis:auto;border-top:0;padding-block:.5rem;
    text-align:right;
  }
  .util .reg-long{display:none}
  .util .reg-short{display:inline}
}

/* ---------- header ---------- */
.masthead{background:var(--navy);position:sticky;top:var(--admin-bar,0px);z-index:60;border-bottom:1px solid var(--rule-dark)}
.masthead .wrap{display:flex;align-items:center;gap:2rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.8rem;flex:none}
.brand .mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--gold);
  color:var(--gold);font-family:Newsreader,serif;font-size:1.15rem;letter-spacing:.02em;
}
.brand .txt{display:flex;flex-direction:column;line-height:1.15}
.brand .n{font-family:Newsreader,serif;font-size:1.12rem;color:var(--surface);letter-spacing:.01em}
.brand .s{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-2)}

.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem;list-style:none;margin-block:0;padding:0}
.nav > li{position:relative}
/* The mega panel is anchored to the masthead, not to this item, so it can
   span the content container without overflowing the viewport edge. */
.nav > li.has-mega{position:static}
.nav .top{
  display:flex;align-items:center;gap:.35rem;padding:.6rem .85rem;font-size:.86rem;
  color:var(--on-navy);background:none;border:0;font-family:Poppins,sans-serif;cursor:pointer;
  transition:color .18s;
}
.nav .top:hover,.nav .top[aria-expanded="true"],.nav .current-menu-item > .top{color:var(--gold)}
.nav .chev{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s}
.nav .top[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav .nav-cta{margin-left:.8rem}

.mega{
  /* Anchored to .masthead (position:sticky is a positioning context), then
     capped and centred so it lines up with .wrap instead of spilling left. */
  position:absolute;top:100%;left:0;right:0;
  width:min(76rem,100%);margin-inline:auto;
  background:var(--surface);border:1px solid var(--rule);border-top:0;
  box-shadow:var(--shadow-m);
  /* Horizontal padding matches .wrap so the columns align with the logo. */
  padding:1.9rem clamp(1.1rem,4vw,3rem) 2.1rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
  list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s linear;
}
.mega[data-open="true"]{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
.mega > li{min-width:0}
.mega h3,.mega .col-title{
  font-family:Poppins,sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);padding-bottom:.6rem;margin:0 0 .7rem;border-bottom:1px solid var(--rule);
}
.mega ul{list-style:none;margin:0;padding:0}
.mega a{display:block;font-size:.83rem;color:var(--ink-2);padding:.32rem 0;transition:color .16s,padding-left .16s}
.mega a:hover{color:var(--ink);padding-left:.3rem}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-dark);color:var(--on-navy);
  padding:.55rem .8rem;font-size:.8rem;font-family:Poppins,sans-serif;cursor:pointer;align-items:center;gap:.5rem;
}
@media (max-width:1080px){
  .nav{display:none}
  /* Match the specificity of .mega[data-open] so the panel cannot be
     revealed at mobile widths, where the accordion nav takes over. */
  .mega,.mega[data-open="true"]{display:none}
  .burger{display:inline-flex}
}

/* ---------- mobile drawer ----------
   Slides in from the left. visibility is toggled alongside the transform so
   the off-screen panel never holds keyboard focus. */
.nav-backdrop{
  position:fixed;inset:var(--admin-bar,0px) 0 0 0;z-index:110;background:rgba(6,11,17,.55);
  opacity:0;visibility:hidden;
  transition:opacity .34s ease,visibility .34s linear;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}

.mnav{
  position:fixed;top:var(--admin-bar,0px);bottom:0;left:0;z-index:120;
  width:min(21rem,86vw);
  background:var(--navy-deep);border-right:1px solid var(--rule-dark);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s linear;
  box-shadow:none;
}
.mnav[data-open="true"]{
  transform:none;visibility:visible;
  box-shadow:0 0 60px rgba(0,0,0,.5);
  transition:transform .34s cubic-bezier(.16,1,.3,1),visibility 0s,box-shadow .34s ease;
}
body.nav-open{overflow:hidden}

.mnav-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.35rem;border-bottom:1px solid var(--rule-dark);flex:none;
}
.mnav-head .n{font-family:Newsreader,serif;font-size:1.02rem;color:var(--surface)}
.mnav-head .s{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-2);display:block}
.mnav-close{
  width:36px;height:36px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--rule-dark);color:var(--on-navy);
  font-size:1.15rem;line-height:1;transition:border-color .18s,color .18s;
}
.mnav-close:hover{border-color:var(--gold);color:var(--gold)}

.mnav-body{padding:.4rem 1.35rem 1.5rem}
.mnav details{border-bottom:1px solid var(--rule-dark)}
.mnav summary{padding:.85rem 0;color:var(--on-navy);font-size:.9rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";color:var(--gold);font-size:1.05rem;line-height:1.2}
.mnav details[open] summary::after{content:"\2013"}
.mnav details[open] summary{color:var(--gold)}
.mnav .sub{list-style:none;margin:0;padding:0 0 .5rem}
.mnav .sub a{display:block;padding:.42rem 0 .42rem .9rem;font-size:.83rem;color:var(--on-navy-2);transition:color .16s,padding-left .16s}
.mnav .sub a:hover{color:var(--gold);padding-left:1.15rem}
.mnav .flat{display:block;padding:.85rem 0;color:var(--on-navy);font-size:.9rem;border-bottom:1px solid var(--rule-dark);transition:color .16s}
.mnav .flat:hover{color:var(--gold)}
.mnav-foot{margin-top:1.4rem;display:grid;gap:.75rem}
.mnav-foot a.tel{color:var(--surface);font-family:Newsreader,serif;font-size:1.05rem}
.mnav-foot .em{font-size:.8rem;color:var(--on-navy-2);word-break:break-all}

/* The drawer is a small-screen device only. */
@media (min-width:1081px){
  .mnav,.mnav[data-open="true"],.nav-backdrop,.nav-backdrop[data-open="true"]{display:none}
}

/* ---------- scroll reveal ----------
   Guarded behind html.js so a JS failure can never leave content invisible. */
html.js [data-reveal]{opacity:0;transform:translateY(22px)}
html.js [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal].is-in{opacity:1;transform:none;transition:none}
}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:var(--on-navy);padding-block:clamp(3rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -10% -40% 55%;height:70%;
  background:radial-gradient(60% 60% at 50% 50%,rgba(203,165,87,.13),transparent 70%);pointer-events:none;
}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;position:relative;z-index:1}
@media (max-width:940px){.hero .grid{grid-template-columns:1fr;gap:2.5rem}}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.06;letter-spacing:-.02em;color:var(--surface)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{margin-top:1.3rem;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--on-navy-2);max-width:46ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.trust{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule-dark);list-style:none;padding-left:0}
.trust li{display:flex;flex-direction:column;gap:.15rem}
.trust .k{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.trust .v{font-size:.88rem;color:var(--on-navy)}

/* route finder */
.finder{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-m);border-top:3px solid var(--gold)}
.finder .fh{padding:1.35rem 1.5rem 1.1rem;border-bottom:1px solid var(--rule)}
.finder .fh p{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.finder .fh h2{font-family:Newsreader,serif;font-size:1.3rem;margin-top:.35rem;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:1.1rem 1.5rem}
.chip{
  font-family:Poppins,sans-serif;font-size:.78rem;padding:.42rem .8rem;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);border-radius:2px;cursor:pointer;transition:all .16s;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.routes{padding:0 1.5rem 1.5rem}
.route[hidden]{display:none}
.route a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.72rem .2rem;border-bottom:1px solid var(--rule);font-size:.87rem;color:var(--ink);transition:padding-left .16s;
}
.route a:last-child{border-bottom:0}
.route a:hover{padding-left:.35rem;color:var(--gold-deep)}
.route .arw{color:var(--gold);flex:none}

/* ---------- stats ---------- */
.stats{background:var(--navy-deep);color:var(--on-navy);padding-block:clamp(2.25rem,4vw,3rem)}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none;margin:0;padding:0}
@media (max-width:760px){.stats ul{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
.stats li{border-left:1px solid var(--rule-dark);padding-left:1.2rem}
.stats .n{font-family:Newsreader,serif;font-size:clamp(2rem,4vw,2.8rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stats .l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-2);margin-top:.5rem}

/* ---------- services grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc{background:var(--surface);padding:1.75rem 1.6rem;display:flex;flex-direction:column;transition:background .18s}
.svc:hover{background:var(--gold-wash)}
.svc .num{font-family:Newsreader,serif;font-size:.85rem;color:var(--gold-deep);letter-spacing:.05em}
.svc h3{font-size:1.22rem;margin:.5rem 0 .55rem;letter-spacing:-.01em}
.svc > p{font-size:.87rem;color:var(--ink-2);flex:1}
.svc ul{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule);list-style:none;padding-left:0}
.svc ul a{display:block;font-size:.82rem;color:var(--ink-2);padding:.24rem 0;transition:color .16s,padding-left .16s}
.svc ul a:hover{color:var(--gold-deep);padding-left:.25rem}
.svc .more{margin-top:.9rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}

/* ---------- founder ---------- */
.founder{background:var(--surface)}
.founder .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.founder .grid{grid-template-columns:1fr}}
.portrait{
  aspect-ratio:4/5;background:linear-gradient(155deg,var(--navy) 0%,var(--navy-soft) 100%);
  display:grid;place-items:center;position:relative;margin:0;
}
.portrait::before{content:"";position:absolute;inset:12px;border:1px solid rgba(203,165,87,.3)}
.portrait .mono{font-family:Newsreader,serif;font-size:clamp(3rem,7vw,4.6rem);color:var(--gold);letter-spacing:.04em}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--navy-deep);padding:.9rem 1.1rem;text-align:left}
.portrait .fn{font-family:Newsreader,serif;color:var(--surface);font-size:1rem}
.portrait .fr{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:.2rem}
.founder blockquote{margin:0;font-family:Newsreader,serif;font-size:clamp(1.3rem,2.6vw,1.72rem);line-height:1.35;letter-spacing:-.01em}
.founder .body{margin-top:1.4rem;color:var(--ink-2);font-size:.94rem}
.founder .body p + p{margin-top:.9rem}
.creds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;list-style:none;padding:0}
.cred{font-size:.72rem;letter-spacing:.04em;padding:.38rem .7rem;background:var(--surface-2);color:var(--ink-2);border-radius:2px}
.cred b{color:var(--ink);font-weight:600}

/* ---------- why ---------- */
.why{background:var(--paper)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.75rem 2.25rem;margin-top:2.5rem;list-style:none;padding:0}
.why-grid li{padding-top:1.1rem;border-top:1px solid var(--rule)}
.why-grid h3{font-family:Poppins,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.why-grid p{font-size:.86rem;color:var(--ink-2);margin-top:.35rem}

/* ---------- process ---------- */
.process{background:var(--navy);color:var(--on-navy)}
.process .sec-head h2{color:var(--surface)}
.process .sec-head p{color:var(--on-navy-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);list-style:none;margin:0;padding:0}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--navy);padding:1.9rem 1.6rem}
.steps .n{font-family:Newsreader,serif;font-size:2.1rem;color:var(--gold);line-height:1}
.steps h3{color:var(--surface);font-size:1.15rem;margin:.65rem 0 .5rem}
.steps p{font-size:.87rem;color:var(--on-navy-2)}

/* ---------- journal ---------- */
.journal{background:var(--surface)}
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.75rem}
.post{display:flex;flex-direction:column;border-top:2px solid var(--navy);padding-top:1.1rem}
.post time{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.post h3{font-size:1.16rem;margin:.55rem 0 .5rem;line-height:1.25;letter-spacing:-.01em}
.post h3 a:hover{color:var(--gold-deep)}
.post p{font-size:.86rem;color:var(--ink-2);flex:1}
.post .rm{margin-top:1rem;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;display:inline-flex;gap:.4rem;align-items:center}

/* ---------- cta band ---------- */
.cta{background:var(--gold);color:var(--navy-deep)}
.cta .grid{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(1.7rem,3.5vw,2.5rem);line-height:1.15;letter-spacing:-.015em;max-width:22ch}
.cta p{margin-top:.7rem;font-size:.94rem;color:#4a3c14;max-width:44ch}
.cta .acts{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- inner pages ---------- */
.page-hero{background:var(--navy);color:var(--on-navy);padding-block:clamp(2.75rem,6vw,4.5rem)}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--surface);max-width:20ch}
.page-hero .standfirst{margin-top:1rem;font-size:clamp(1rem,1.5vw,1.1rem);color:var(--gold);max-width:48ch;font-family:Newsreader,serif}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.74rem;color:var(--on-navy-2);margin-bottom:1.1rem;list-style:none;padding:0}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--ink-3)}
.crumbs li:last-child::after{content:""}
.crumbs a:hover{color:var(--gold)}

.page-body{background:var(--surface)}
.page-body .layout{display:grid;grid-template-columns:1fr 19rem;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:940px){.page-body .layout{grid-template-columns:1fr}}

.prose{max-width:var(--measure);color:var(--ink-2);font-size:.96rem}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink);margin-top:2.4rem;letter-spacing:-.01em}
.prose h3{font-size:1.18rem;color:var(--ink);margin-top:1.8rem}
.prose h4{font-family:Poppins,sans-serif;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);margin-top:1.8rem;font-weight:600}
.prose ul,.prose ol{padding-left:1.2rem;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-block:.4rem}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{border-left:2px solid var(--gold);padding-left:1.2rem;font-family:Newsreader,serif;font-size:1.2rem;color:var(--ink)}
.prose img{margin-block:1.6rem}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem}
.prose th,.prose td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--rule)}
.prose th{background:var(--paper);color:var(--ink);font-weight:600}

.aside{position:sticky;top:calc(100px + var(--admin-bar,0px));display:grid;gap:1.25rem}
.aside .box{border:1px solid var(--rule);padding:1.35rem 1.4rem;background:var(--paper)}
.aside .box h2{font-family:Poppins,sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.85rem}
.aside .box ul{list-style:none;padding:0;margin:0}
.aside .box li a{display:block;font-size:.84rem;color:var(--ink-2);padding:.3rem 0;border-bottom:1px solid var(--rule);transition:color .16s,padding-left .16s}
.aside .box li:last-child a{border-bottom:0}
.aside .box li a:hover{color:var(--gold-deep);padding-left:.25rem}
.aside .box.dark{background:var(--navy);border-color:var(--navy);color:var(--on-navy-2)}
.aside .box.dark h2{color:var(--gold)}
.aside .box.dark p{font-size:.86rem;margin-bottom:1rem}
.aside .box.dark a.tel{color:var(--surface);font-size:1rem;font-family:Newsreader,serif}

/* archive */
.archive-list{display:grid;gap:0}
.archive-item{display:grid;grid-template-columns:9rem 1fr;gap:2rem;padding-block:2rem;border-bottom:1px solid var(--rule)}
@media (max-width:700px){.archive-item{grid-template-columns:1fr;gap:.5rem}}
.archive-item time{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:.4rem}
.archive-item h2{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.01em}
.archive-item h2 a:hover{color:var(--gold-deep)}
.archive-item p{color:var(--ink-2);font-size:.9rem;margin-top:.5rem;max-width:60ch}

.pager{display:flex;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap}
.pager .page-numbers{
  display:inline-grid;place-items:center;min-width:2.4rem;height:2.4rem;padding-inline:.6rem;
  border:1px solid var(--rule);font-size:.85rem;color:var(--ink-2);transition:all .16s;
}
.pager .page-numbers:hover{border-color:var(--ink-3);color:var(--ink)}
.pager .page-numbers.current{background:var(--navy);border-color:var(--navy);color:var(--gold)}

/* 404 */
.err{background:var(--surface);text-align:center;padding-block:clamp(4rem,10vw,7rem)}
.err .code{font-family:Newsreader,serif;font-size:clamp(4rem,12vw,8rem);color:var(--gold);line-height:1}
.err h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-top:.5rem}
.err p{color:var(--ink-2);margin:1rem auto 2rem;max-width:44ch}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-navy-2);padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.86rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.site-footer h2,.site-footer h3{font-family:Poppins,sans-serif;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--surface);font-weight:600;margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:block;padding:.26rem 0;transition:color .16s}
.site-footer li a:hover{color:var(--gold)}
.site-footer address{font-style:normal;line-height:1.8}
.site-footer address a:hover{color:var(--gold)}
.socials{display:flex;gap:.5rem;margin-top:1.2rem}
.socials a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule-dark);color:var(--on-navy-2);transition:all .18s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.socials svg{width:15px;height:15px;fill:currentColor}
.fbrand .n{font-family:Newsreader,serif;font-size:1.2rem;color:var(--surface)}
.fbrand p{margin-top:.7rem;max-width:34ch;font-size:.85rem}
.legal{margin-top:3rem;padding-block:1.4rem;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;font-size:.76rem;color:var(--ink-3)}
.legal .r{margin-left:auto}
.legal a:hover{color:var(--gold)}
@media (max-width:700px){.legal .r{margin-left:0}}

/* WP core alignment classes */
.alignleft{float:left;margin:.4rem 1.5rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:.78rem;color:var(--ink-3);margin-top:.4rem}

/* Second heading inside a mega column needs breathing room above it. */
.mega .col-title--more{margin-top:1.5rem}

/* ---------- services index ---------- */
.svc-index-nav{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:1.5rem}
.svc-index-nav .jump-label{
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:.9rem;
}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.jump a{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.83rem;
  padding:.5rem .85rem;border:1px solid var(--rule);color:var(--ink-2);
  transition:border-color .18s,color .18s,background .18s;
}
.jump a:hover{border-color:var(--navy);background:var(--navy);color:var(--gold)}
.jump .c{
  font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--gold-deep);
  background:var(--gold-wash);padding:.05rem .38rem;border-radius:2px;
}
.jump a:hover .c{background:rgba(203,165,87,.2);color:var(--gold)}

.svc-group{background:var(--surface);scroll-margin-top:calc(96px + var(--admin-bar,0px))}
.svc-group.alt{background:var(--paper)}
.svc-group .sec-head{margin-bottom:2rem}

.svc-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);list-style:none;padding:0;margin:0;
}
.svc-item{background:var(--surface)}
.svc-group.alt .svc-item{background:var(--paper)}
.svc-item > a{
  display:flex;flex-direction:column;gap:.5rem;height:100%;
  padding:1.35rem 1.4rem;transition:background .18s;
}
.svc-item > a:hover{background:var(--gold-wash)}
.svc-item .head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.svc-item .t{
  font-family:Newsreader,serif;font-size:1.14rem;color:var(--ink);
  letter-spacing:-.01em;line-height:1.25;
}
.svc-item .arw{color:var(--gold);flex:none;transition:transform .18s}
.svc-item > a:hover .arw{transform:translateX(4px)}
.svc-item .d{font-size:.85rem;color:var(--ink-2);line-height:1.55}

/* ---------- shared service commitments ---------- */
.promise{
  margin-top:2.75rem;padding:1.6rem 1.75rem;
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold);
}
.promise h2{
  font-family:Poppins,sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin:0 0 .9rem;
}
.promise ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.promise li{
  position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--ink-2);line-height:1.5;
}
.promise li::before{
  content:"";position:absolute;left:0;top:.55rem;
  width:7px;height:7px;background:var(--gold);
}

/* ---------- WordPress admin bar offset ----------
   WP pushes <html> down by the bar's height, but position:sticky/fixed still
   pin to the viewport top. This variable keeps the sticky header, drawer and
   anchor offsets clear of it — for logged-in users only.
   Heights follow WP's own admin-bar.css: 32px on desktop, 46px below 782px,
   and at 600px and under the bar turns position:absolute and scrolls away,
   so no offset is needed there. */
:root{--admin-bar:0px}
body.admin-bar{--admin-bar:32px}
@media screen and (max-width:782px){
  body.admin-bar{--admin-bar:46px}
}
@media screen and (max-width:600px){
  body.admin-bar{--admin-bar:0px}
}

/* ---------- CTA band tones ----------
   The gold band is the default; navy is for pages that already sit on a
   light ground so two gold blocks never stack. */
.cta--navy{background:var(--navy);color:var(--on-navy)}
.cta--navy h2{color:var(--surface)}
.cta--navy p{color:var(--on-navy-2)}

/* ---------- global footer CTA strip ---------- */
.foot-cta{background:var(--navy-soft);border-top:1px solid var(--rule-dark);padding-block:2.25rem}
.foot-cta .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between}
.foot-cta h2{font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--surface);letter-spacing:-.01em}
.foot-cta p{margin-top:.4rem;color:var(--on-navy-2);font-size:.9rem;max-width:46ch}
.fc-acts{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- persistent mobile action bar ----------
   Most of this audience arrives on a phone, where a tap-to-call and a booking
   link should never be more than a thumb away. Hidden on desktop, where the
   header CTA is always visible anyway. */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{
    display:grid;grid-template-columns:auto 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:var(--rule-dark);
    border-top:1px solid var(--rule-dark);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mobile-cta a{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.95rem 1.1rem;font-size:.87rem;font-weight:500;
  }
  .mc-call{background:var(--navy-deep);color:var(--on-navy)}
  .mc-call svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
  .mc-book{background:var(--gold);color:var(--navy-deep)}
  /* Clear the bar so it never covers the last line of the footer. */
  body{padding-bottom:3.5rem}
  /* The drawer and its backdrop sit above it. */
  body.nav-open .mobile-cta{display:none}
}

/* ---------- contact page ---------- */
.contact{background:var(--surface)}
.contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-form h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.015em}
.contact-form .intro{color:var(--ink-2);margin-top:.7rem;max-width:52ch}

.contact-side{display:grid;gap:1rem}
.c-card{border:1px solid var(--rule);background:var(--paper);padding:1.35rem 1.4rem}
.c-card h2{
  font-family:Poppins,sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin-bottom:.85rem;
}
.c-tel{display:block;font-family:Newsreader,serif;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em}
.c-tel:hover{color:var(--gold-deep)}
.c-email{display:block;margin-top:.5rem;font-size:.86rem;color:var(--ink-2);word-break:break-all}
.c-email:hover{color:var(--gold-deep)}
.c-card address{font-style:normal;font-size:.9rem;color:var(--ink-2);line-height:1.7}
.c-map{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);
}
.c-map:hover .arw{transform:translateX(3px)}
.c-map .arw{transition:transform .18s}
.c-hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.87rem}
.c-hours dt{color:var(--ink-2)}
.c-hours dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.c-card--dark{background:var(--navy);border-color:var(--navy)}
.c-card--dark h2{color:var(--gold)}
.c-reg{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.c-reg li{display:flex;justify-content:space-between;gap:1rem;font-size:.84rem;align-items:baseline}
.c-reg span{color:var(--on-navy-2)}
.c-reg strong{color:var(--surface);font-weight:500;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem}

.next-steps{background:var(--navy);color:var(--on-navy)}
.next-steps .sec-head h2{color:var(--surface)}
.next-steps .eyebrow{color:var(--gold)}

/* ---------- Contact Form 7 ---------- */
.wpcf7{margin-top:1.9rem}
.wpcf7 form > p{margin:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.f-field{margin-bottom:1rem !important}
.f-field label{display:block;font-size:.8rem;font-weight:500;color:var(--ink);letter-spacing:.01em}
.f-field .req{color:var(--gold-deep)}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea{
  display:block;width:100%;margin-top:.4rem;
  font-family:Poppins,sans-serif;font-size:.9rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:.7rem .85rem;transition:border-color .18s,box-shadow .18s;
}
.wpcf7 textarea{resize:vertical;min-height:7rem;line-height:1.6}
.wpcf7 select{cursor:pointer}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(203,165,87,.18);
}
.wpcf7 ::placeholder{color:var(--ink-3)}

.f-note{
  font-size:.8rem;color:var(--ink-2);background:var(--paper);
  border-left:3px solid var(--gold);padding:.8rem 1rem;margin:.5rem 0 1.25rem !important;
}
.f-consent{margin-bottom:1.25rem !important;font-size:.85rem;color:var(--ink-2)}
.f-consent .wpcf7-list-item{margin:0}
.f-consent input[type="checkbox"]{margin-right:.5rem;accent-color:var(--gold-deep)}
.f-submit{margin:0 !important}
.wpcf7 .btn{border:0;font-family:Poppins,sans-serif}
.wpcf7-spinner{margin-left:.6rem}

/* CF7 validation and response messages */
.wpcf7 .wpcf7-not-valid{border-color:var(--cut,#a03a2f)}
.wpcf7-not-valid-tip{
  display:block;margin-top:.35rem;font-size:.76rem;color:#a03a2f;
}
.wpcf7 form .wpcf7-response-output{
  margin:1.25rem 0 0;padding:.85rem 1.1rem;border:1px solid var(--rule);
  border-left:3px solid var(--gold);background:var(--paper);
  font-size:.87rem;color:var(--ink-2);border-radius:0;
}
.wpcf7 form.sent .wpcf7-response-output{border-left-color:#2c6a4a;background:#e9f2ec;color:#1f4a34}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-left-color:#a03a2f;background:#f9eae7;color:#7a2b23}

/* ---------- imagery ----------
   The firm's own logo replaces the lettermark once one is uploaded. */
.brand--logo{gap:0}
.brand-logo{height:44px;width:auto;max-width:220px;object-fit:contain}
@media (max-width:560px){.brand-logo{height:36px;max-width:170px}}

/* Service cards on the homepage */
.svc--img{padding:0}
.svc-media{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.svc-media .svc-img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.svc--img:hover .svc-media .svc-img{transform:scale(1.04)}
.svc--img > .num{display:block;padding:1.5rem 1.6rem 0}
.svc--img > h3,.svc--img > p,.svc--img > ul,.svc--img > .more{margin-inline:1.6rem}
.svc--img > ul{margin-top:1.1rem}
.svc--img > .more{display:inline-block;margin-bottom:1.75rem}

/* Blog cards */
.post--img{border-top:0;padding-top:0}
.post-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);margin-bottom:1.1rem}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.post--img:hover .post-media img{transform:scale(1.04)}

/* Blog index rows */
.archive-item--img{grid-template-columns:14rem 1fr;align-items:start}
@media (max-width:700px){.archive-item--img{grid-template-columns:1fr}}
.archive-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.archive-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.archive-item--img:hover .archive-media img{transform:scale(1.03)}

/* Post hero */
.post-hero{margin:0 0 2rem}
.post-hero img{width:100%;height:auto;max-height:26rem;object-fit:cover}

/* ---------- founder portrait with a real photograph ---------- */
.portrait--photo{background:var(--navy-deep)}
.portrait--photo::before{z-index:2;pointer-events:none}
.portrait--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.portrait--photo figcaption{z-index:3;background:linear-gradient(to top,rgba(14,23,32,.96),rgba(14,23,32,.72))}

/* ---------- team grid ---------- */
.team{background:var(--paper)}
.team-grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.member{
  background:var(--surface);display:grid;grid-template-columns:13rem 1fr;
  gap:0;align-items:stretch;
}
@media (max-width:760px){.member{grid-template-columns:1fr}}
.m-photo{position:relative;background:var(--navy);overflow:hidden;min-height:15rem}
@media (max-width:760px){.m-photo{aspect-ratio:4/3;min-height:0}}
.m-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.member:hover .m-photo img{transform:scale(1.04)}
.m-initials{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:Newsreader,serif;font-size:2.4rem;color:var(--gold);letter-spacing:.05em;
}
.m-body{padding:1.6rem 1.7rem}
.m-body h3{font-size:1.3rem;letter-spacing:-.01em}
.m-role{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-top:.3rem;
}
.m-meta{
  list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;
}
.m-meta li{
  font-size:.7rem;letter-spacing:.03em;color:var(--ink-2);
  background:var(--surface-2);padding:.28rem .6rem;border-radius:2px;
}
.m-bio{margin-top:1rem;font-size:.89rem;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* ---------- accreditations strip ---------- */
.certs{background:var(--surface);padding-block:clamp(2.5rem,5vw,3.5rem)}
.certs .certs-img{width:100%;max-width:56rem;height:auto;margin-top:.4rem;opacity:.9}

/* ---------- blog: filter bar ---------- */
.blog-filter{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:1.5rem}
.blog-filter .jump a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.blog-filter .jump a[aria-current="page"] .c{background:rgba(203,165,87,.2);color:var(--gold)}

/* ---------- blog: post meta line ---------- */
.p-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.p-cat{
  color:var(--gold-deep);font-weight:600;letter-spacing:.1em;
  border-bottom:1px solid transparent;transition:border-color .18s;
}
.p-cat:hover{border-bottom-color:var(--gold)}
.p-read{color:var(--ink-3)}
.p-read::before{content:"·";margin-right:.5rem}
.p-meta--article{margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--rule)}

/* ---------- blog: lead article ---------- */
.blog-list{background:var(--surface)}
.lead{display:grid;gap:clamp(1.5rem,4vw,3rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.lead--img{grid-template-columns:1.1fr .9fr;align-items:center}
@media (max-width:860px){.lead--img{grid-template-columns:1fr}}
.lead-media{display:block;overflow:hidden;background:var(--surface-2);aspect-ratio:16/11}
.lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.lead:hover .lead-media img{transform:scale(1.03)}
.lead-body h2{
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.14;letter-spacing:-.02em;margin:.9rem 0 0;
}
.lead-body h2 a:hover{color:var(--gold-deep)}
.lead-ex{margin:.9rem 0 1.5rem;color:var(--ink-2);font-size:.98rem;max-width:52ch}

/* ---------- blog: grid ---------- */
.blog-grid{border-top:1px solid var(--rule);padding-top:clamp(2rem,4vw,3rem)}
.blog-grid .post .p-meta{margin-bottom:.5rem}
.blog-grid .post h3{margin-top:.2rem}

/* ---------- blog: terms, prev/next ---------- */
.p-terms{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.p-terms a{
  font-size:.75rem;letter-spacing:.04em;padding:.35rem .7rem;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink-2);transition:all .18s;
}
.p-terms a:hover{border-color:var(--navy);background:var(--navy);color:var(--gold)}
.p-terms a.is-tag{background:transparent}

.p-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:2.5rem;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:640px){.p-nav{grid-template-columns:1fr}}
.pn{display:block;padding:1.1rem 1.3rem;background:var(--surface);transition:background .18s}
.pn:hover{background:var(--gold-wash)}
.pn .k{
  display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:.35rem;
}
.pn .t{display:block;font-family:Newsreader,serif;font-size:1.02rem;color:var(--ink);line-height:1.3}
.pn--next{text-align:right}
@media (max-width:640px){.pn--next{text-align:left}}

/* ---------- blog: empty state ---------- */
.empty{text-align:center;padding-block:3rem}
.empty h2{font-size:1.6rem}
.empty p{color:var(--ink-2);margin-top:.6rem}

/* ---------- active nav state ----------
   A gold underline marks the section you are in. The mega-menu trigger
   already turns gold while open, so the rule targets the rail only. */
.nav .top[aria-current="page"]{color:var(--gold);position:relative}
.nav .top[aria-current="page"]::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.15rem;
  height:1px;background:var(--gold);
}
.mnav .flat[aria-current="page"]{color:var(--gold)}
.mnav .flat[aria-current="page"]::before{
  content:"";display:inline-block;width:3px;height:.85em;background:var(--gold);
  margin-right:.6rem;vertical-align:-.05em;
}

/* ---------- inline section CTA ---------- */
.sec-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
.sec-cta--dark{border-top-color:var(--rule-dark)}
.sec-cta--center{justify-content:center;text-align:center}
.sec-cta-text{
  font-family:Newsreader,serif;font-size:1.08rem;color:var(--ink);
  letter-spacing:-.01em;margin:0;
}
.sec-cta--dark .sec-cta-text{color:var(--surface)}
.sec-cta-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-left:auto}
.sec-cta--center .sec-cta-acts{margin-left:0}
@media (max-width:640px){
  .sec-cta{gap:.9rem}
  .sec-cta-acts{margin-left:0;width:100%}
  .sec-cta-acts .btn{flex:1 1 auto;justify-content:center}
}

/* Founder section keeps two buttons side by side. */
.founder-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.75rem}

/* ---------- booking modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)}
.modal[hidden]{display:none}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(6,11,17,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s ease;
}
.modal[data-open="true"] .modal-backdrop{opacity:1}
.modal-panel{
  position:relative;width:min(46rem,100%);
  /* Definite height, not max-height: the iframe below resolves 100% against
     it, and Google's form is far taller than the panel either way. */
  height:min(94vh,56rem);
  display:flex;flex-direction:column;
  background:var(--surface);border-top:3px solid var(--gold);
  box-shadow:0 24px 70px -20px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .26s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.modal[data-open="true"] .modal-panel{opacity:1;transform:none}
body.modal-open{overflow:hidden}

.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.5rem 1.1rem;border-bottom:1px solid var(--rule);flex:none;
}
.modal-eyebrow{
  font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin:0 0 .3rem;
}
.modal-head h2{font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:-.015em}
.modal-close{
  width:36px;height:36px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  font-size:1.3rem;line-height:1;transition:all .18s;
}
.modal-close:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}

.modal-body{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--surface-2)}
.modal-frame{
  display:block;width:100%;height:100%;min-height:20rem;border:0;background:var(--surface);
}
.modal-fallback{padding:1.5rem;text-align:center}
.modal-fallback a{color:var(--gold-deep);font-weight:600}

.modal-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;
  padding:.95rem 1.5rem;border-top:1px solid var(--rule);flex:none;font-size:.84rem;color:var(--ink-2);
}
.modal-foot p{margin:0}
.modal-foot a{color:var(--gold-deep);font-weight:500}
.modal-skip{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.modal-skip:hover .arw{transform:translateX(3px)}
.modal-skip .arw{transition:transform .18s}

/* Confirmation state while the redirect is pending. */
.modal[data-submitted="true"] .modal-foot::before{
  content:"Thank you — taking you to our contact page…";
  display:block;width:100%;color:var(--have,#2c6a4a);font-weight:600;
}
