/* Shifty Shamrocks brand layer, from the studio's mood board.
   Loaded after a design's own styles. The palette itself was folded into the
   light conversions, so this sheet carries what the mood board adds on top.

   It applies in parts, which the build writes onto <html> as data-brand:
     full      the seal and the brass booking button, plus the slogan pieces
     slogan    the slogan pieces alone, leaving the design's own buttons be
     shimmer   a sheen that crosses the brass every few seconds
   The .ss-* rules are unscoped because they only bite where the markup is. */
:root{
  --ss-emerald:#064e3b;
  --ss-brass:#b08d57;
  --ss-brass-lift:#c29e66;
  --ss-brass-glow:#d8b87d;
  --ss-brass-ink:#12241c;
  --ss-stone:#c9d0c7;
  --ss-brass-face:linear-gradient(100deg,#a8834c 0%,#c8a771 30%,#b08d57 58%,#9c7b45 100%);
  --ss-brass-face-lift:linear-gradient(100deg,#b8925a 0%,#d8b87d 30%,#c29e66 58%,#ac8a51 100%);
  /* the sheen rides along as a first background layer that is `none` unless the
     shimmer part is switched on, so there is only ever one background-image
     declaration and nothing for the cascade to get wrong */
  --ss-sheen:none;
  --ss-sheen-size:0 0;
}
[data-brand~="shimmer"]{
  --ss-sheen:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%);
  --ss-sheen-size:70% 100%;
}

/* ---------- booking buttons ---------- */
/* Brass carries dark ink rather than white: against #12241c it sits at 5.2:1,
   where white would only reach 3.1:1. Ghost and outline variants stay as they
   are, so brass keeps meaning "this books you in". */
[data-brand~="full"] .service-choices button,
[data-brand~="full"] header [data-book],
[data-brand~="full"] .top [data-book],
[data-brand~="full"] .site-head [data-book],
[data-brand~="full"] button[data-book]:not(.ghost):not(.line):not(.ul),
[data-brand~="full"] a.btn[data-book]:not(.ghost):not(.line),
[data-brand~="full"] .pill[data-book]:not(.ghost),
[data-brand~="full"] .btn[data-book]:not(.ghost):not(.line){
  /* longhands, not the `background` shorthand: a shorthand holding a var() is a
     pending substitution value and does not cascade per longhand */
  background-image:var(--ss-sheen),var(--ss-brass-face);
  background-size:var(--ss-sheen-size),auto;
  background-repeat:no-repeat,repeat;
  background-color:var(--ss-brass);
  color:var(--ss-brass-ink);
  border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 1px 2px rgba(18,36,28,.16);
  text-shadow:none;
}
[data-brand~="full"] .service-choices button:hover,
[data-brand~="full"] header [data-book]:hover,
[data-brand~="full"] .top [data-book]:hover,
[data-brand~="full"] .site-head [data-book]:hover,
[data-brand~="full"] button[data-book]:not(.ghost):not(.line):not(.ul):hover,
[data-brand~="full"] a.btn[data-book]:not(.ghost):not(.line):hover,
[data-brand~="full"] .pill[data-book]:not(.ghost):hover,
[data-brand~="full"] .btn[data-book]:not(.ghost):not(.line):hover{
  background-image:var(--ss-sheen),var(--ss-brass-face-lift);
  background-color:var(--ss-brass-lift);
  color:var(--ss-brass-ink);
  filter:none;
}
/* Text style booking links stay emerald: brass type on a near-white page is
   only 2.9:1. Silent's rule under the word takes the brass instead. */
[data-brand~="full"] .ul[data-book],
[data-brand~="full"] .ul[data-book]:hover,
[data-brand~="full"] a.plain[data-book],
[data-brand~="full"] a.plain[data-book]:hover{
  color:var(--ss-emerald);background:none;box-shadow:none;border:0;
}
[data-brand~="full"] .ul[data-book],
[data-brand~="full"] .ul[data-book]:hover{border-bottom:2px solid var(--ss-brass)}

/* The mood board's arrow belongs on the primary calls only, not on every slot
   button in a board of twenty. */
[data-brand~="full"] .service-choices button::after,
[data-brand~="full"] header nav [data-book]::after,
[data-brand~="full"] .top [data-book]::after,
[data-brand~="full"] .site-head [data-book]::after{content:"\2009\2192";font-weight:inherit}
[data-brand~="full"] .ul[data-book]::after,
[data-brand~="full"] a.plain[data-book]::after{content:none}

/* ---------- the shimmer ---------- */
/* The sheen is a second background layer rather than a pseudo element, so it
   paints behind the label without any stacking to arrange. It crosses, then
   rests: a sheen that never stops reads as a loading state. */
@keyframes ss-shimmer{
  0%{background-position:-260% 0,0 0}
  55%,100%{background-position:380% 0,0 0}
}
[data-brand~="shimmer"][data-brand~="full"] .service-choices button,
[data-brand~="shimmer"][data-brand~="full"] header [data-book]:not(.plain),
[data-brand~="shimmer"][data-brand~="full"] .site-head [data-book]:not(.plain),
[data-brand~="shimmer"][data-brand~="full"] a.btn[data-book]:not(.ghost):not(.line),
[data-brand~="shimmer"][data-brand~="full"] .btn[data-book]:not(.ghost):not(.line){
  animation:ss-shimmer 4.2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  [data-brand~="shimmer"]{--ss-sheen:none;--ss-sheen-size:0 0}
  [data-brand~="shimmer"] .service-choices button,
  [data-brand~="shimmer"] [data-book]{animation:none}
}

/* ---------- the seal ---------- */
/* Imagine already sizes its own wordmark, responsively, so it is left out. */
[data-brand~="full"] .brand img,
[data-brand~="full"] .mark img{
  width:2.7rem;height:2.7rem;object-fit:contain;background:none;border-radius:0;
}
[data-brand~="full"] footer .mark img,
[data-brand~="full"] footer .brand img{width:3.4rem;height:3.4rem}
/* Astra hangs its mark over the hero photograph and used to ring it. The seal
   is already a circle, so the ring goes and a drop shadow does the lifting. */
[data-brand~="full"] .site-head>.wrap>img{
  border-radius:0;box-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

/* ---------- strapline ---------- */
/* p.ss-strap, not .ss-strap: every hero already colours its own `.hero p`
   at the same specificity, and this sheet only wins on document order. */
p.ss-strap{
  margin:.85rem 0 0;
  font-weight:800;font-size:clamp(.68rem,1.35vw,.78rem);line-height:1.6;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ss-emerald);
}
/* Both halves stay emerald: the hero scrims are thin in places and a muted grey
   disappeared into the photograph underneath. */
p.ss-strap b{font-weight:800;color:inherit}
/* Imagine and Astra both set their hero copy over a dark scrim. */
.hero__inner p.ss-strap{color:#ffffff}
.hero__inner p.ss-strap b{color:rgba(255,255,255,.72)}

/* ---------- slogan band ---------- */
.ss-band{
  background:var(--ss-emerald);
  color:#ffffff;
  padding:clamp(2.4rem,6vw,4rem) 1.4rem;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1.1rem,4vw,2.6rem);
  flex-wrap:wrap;
  text-align:left;
  border:0;
}
.ss-band img{width:clamp(84px,13vw,128px);height:auto;flex:0 0 auto}
.ss-band p{
  margin:0;
  font-weight:800;font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-.005em;
  color:#ffffff;
}
.ss-band p span{color:var(--ss-brass-glow)}
@media(max-width:560px){
  .ss-band{flex-direction:column;text-align:center;gap:1.1rem}
  .ss-band p{max-width:none}
}
/* Studio leads with the band instead of closing on it, so it runs shallower
   and the hero photograph still gets the fold. */
.ss-band--top{padding:clamp(1.5rem,3.4vw,2.4rem) 1.4rem}
.ss-band--top img{width:clamp(56px,8vw,82px)}
.ss-band--top p{font-size:clamp(1.15rem,3vw,1.7rem)}

/* ---------- slogan in the header ---------- */
/* Silent carries it here as well as under the hero heading, stacked under the
   wordmark as part of the lockup. Set beside the nav it pushed the links onto a
   second line. */
.ss-lockup{display:flex;flex-direction:column;gap:.3rem;line-height:1}
.ss-lockup .ss-name{white-space:nowrap}
.ss-lockup small{
  font-weight:800;font-size:.52rem;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--ss-emerald);
  white-space:nowrap;
}
.top .wrap:has(.ss-lockup){height:4.4rem}
@media(max-width:520px){.ss-lockup small{display:none}.top .wrap:has(.ss-lockup){height:3.6rem}}