/* Colour rhythm shared by every page: warm sand bands and a deep bronze
   block between the off-white sections, so no page is one long run of
   off-white. Each page keeps its own --bg, --ink, --accent and so on. */
:root{--sand:#F0E6DA;--bronze-deep:#7B4F2E;--gold:#F1D7B3}

/* A short bronze rule before every eyebrow label, carrying the brand colour
   through each page. currentColor, so it takes the label's own colour
   (bronze on light, gold on dark). */
.kicker::before,.sec-kicker::before{content:"";display:inline-block;width:28px;height:2px;background:currentColor;vertical-align:middle;margin:-2px 12px 0 0}

/* Logo lockup, PATRICK walsh | HAIR DESIGN, shared by every page.
   Two single-colour layers on one viewBox (type, script), painted with
   currentColor through masks, so the logo takes each page's nav colour:
   white over the homepage banner, ink once the nav turns light. The script
   layer sits at reduced opacity to echo the grey "walsh" of the badge.
   The name stays in the link as hidden text for screen readers and search. */
.logo{position:relative;display:block;flex:none;height:var(--logo-h,36px);aspect-ratio:7.4404}
.logo::before,.logo::after{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:url(images/brand/wordmark-type.svg) left center/auto 100% no-repeat;
  mask:url(images/brand/wordmark-type.svg) left center/auto 100% no-repeat}
.logo::after{-webkit-mask-image:url(images/brand/wordmark-script.svg);mask-image:url(images/brand/wordmark-script.svg);opacity:.62}
.logo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* narrower screens: crop to PATRICK walsh (the masks are left-anchored, so
   narrowing the box trims HAIR DESIGN off the right), freeing room for the
   nav links and the call button */
@media(max-width:1160px){.logo{aspect-ratio:4.8063}}

/* Dark footer on every page, closing each one on the badge's ink. The extra
   "body" outranks each page's own footer.site rule. */
body footer.site{background:#211E1C;color:rgba(255,255,255,.72);border-top:0;padding:40px 0}
body footer.site a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
body footer.site a:hover,body footer.site a:focus-visible{border-color:#fff}
@media(max-width:520px){.logo{--logo-h:32px}}