/* Site header + footer, shared by every page (markup comes from site-chrome.js).
   Uses the palette tokens each page defines on :root. Edit header/footer styles here only. */
:root{--header-h:108px}

/* ---------- header (transparent over hero, solid on scroll) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s, box-shadow .35s, border-color .35s;border-bottom:1px solid rgba(243,237,226,.14)}
.site-header.solid{background:rgba(247,245,240,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-color:var(--line);box-shadow:0 10px 30px -24px rgba(31,27,22,.5)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);transition:height .35s}
.site-header.solid .nav-row{height:104px}
.brand{display:flex;flex-direction:column;align-items:stretch;text-decoration:none;transition:opacity .3s}
.brand:hover{opacity:.85}
/* wordmark: RAMDHAN ADVISORY LLP on one line in Cinzel caps (bright white over the hero, ink once solid);
   the motto sits centred beneath, gold hairlines running it out to the name's exact width */
.brand-name{font:600 1.7rem/1.1 "Cinzel", var(--serif);letter-spacing:.06em;margin-right:-.06em;text-transform:uppercase;white-space:nowrap;color:#fff;transition:color .35s}
.solid .brand-name{color:var(--ink)}
.brand-motto{display:flex;align-items:center;gap:12px;margin-top:6px;font:500 1rem/1.2 var(--deva);color:var(--gold-soft);white-space:nowrap;transition:color .35s}
.brand-motto::before,.brand-motto::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.solid .brand-motto{color:var(--gold-deep)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font:600 .76rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark);text-decoration:none;position:relative;padding:8px 0;transition:color .35s}
.solid .nav a{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current="true"]::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{padding:0 20px;min-height:44px;color:#fff}
.nav .btn:hover{background:var(--ink);color:#fff}
.solid .nav .btn,.solid .nav .btn:hover{color:#fff}
.nav .btn::after{display:none}
.menu-btn{display:none;width:46px;height:46px;border:1px solid rgba(243,237,226,.45);background:rgba(20,17,13,.35);border-radius:var(--radius);cursor:pointer;align-items:center;justify-content:center}
.solid .menu-btn{border-color:var(--line);background:var(--card)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:1.5px;background:var(--on-dark);position:relative;transition:transform .3s, background .3s}
.solid .menu-btn span,.solid .menu-btn span::before,.solid .menu-btn span::after{background:var(--ink)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent!important}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--on-dark-muted);padding:72px 0 28px;position:relative;z-index:1;font-size:.94rem}
.site-footer .btn-primary:hover{background:var(--gold);color:var(--night)}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:44px;border-bottom:1px solid #3a332a}
.f-brand{display:flex;align-items:center;gap:24px;min-width:0}
.f-logo{display:block;flex:none;line-height:0;border-radius:2px;transition:transform .3s, box-shadow .3s}
.f-logo:hover{transform:translateY(-3px)}
.f-brand img{width:132px;height:auto;border-radius:2px;box-shadow:0 10px 26px -12px rgba(0,0,0,.8)}
.f-brand-text{border-left:1px solid #3a332a;padding-left:24px}
.f-brand-text strong{display:block;font:600 1.55rem/1.15 var(--serif);color:var(--on-dark);letter-spacing:.02em;text-transform:uppercase}
.f-brand-text p{margin:6px 0 0;max-width:42ch}
/* motto sits under the footer logo, justified between the outer edges of the logo's inner border:
   that border runs x 40–355 of the 396px image, i.e. 13.33px in from each side at 132px */
.f-mark{flex:none;width:132px}
.f-mark .f-motto{margin:12px 13.33px 0;font:600 .84rem/1.4 var(--deva);color:var(--gold-soft);white-space:nowrap;text-align:justify;text-align-last:justify}
.f-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px;padding-top:48px}
.site-footer h4{font:600 .72rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px}
.site-footer li{margin-bottom:10px;line-height:1.5}
.site-footer a:not(.btn){color:var(--on-dark);text-decoration:none}
.site-footer a:not(.btn):hover{color:var(--gold-soft)}
.f-contact a{display:inline-flex;align-items:center;gap:12px}
.f-contact svg{width:18px;height:18px;flex:none;color:var(--gold-soft)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid #3a332a;font-size:.84rem}

/* ---------- responsive ---------- */
/* between the mobile-menu breakpoint and ~1150px the 1.7rem name would run into the nav:
   scale it with the viewport (name width ≈ 14.43 × font-size) so it always clears */
@media (min-width:961px) and (max-width:1152px){
  .brand-name{font-size:clamp(1.1rem, calc((100vw - 760px) / 14.43), 1.7rem)}
}
@media (max-width:1080px){
  .nav{gap:20px}
  .f-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:960px){
  :root{--header-h:104px}
  .menu-btn{display:inline-flex}
  .nav{position:fixed;top:104px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;box-shadow:0 30px 40px -30px rgba(31,27,22,.5);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s, transform .25s, visibility .25s;max-height:calc(100vh - 104px);overflow:auto}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink)}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--gold-deep)}
  .nav .btn{margin-top:18px;border-bottom:0;min-height:50px;color:#fff}
  .f-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .site-header.solid .nav-row{height:96px}
  .nav{top:96px;max-height:calc(100vh - 96px)}
  /* keeps wordmark + menu button inside a 320px screen */
  .brand-name{font-size:.9rem}
  .brand-motto{font-size:.82rem;gap:8px;margin-top:4px}
  .f-brand{flex-direction:column;align-items:flex-start;gap:18px}
  .f-brand-text{border-left:0;padding-left:0}
  .f-grid{grid-template-columns:1fr;gap:30px}
}
@media print{
  .site-header{display:none}
}