/* Fonts are enqueued from Google Fonts by functions.php in this build.
   To self-host instead, drop the woff2 files into assets/fonts/ and put
   the @font-face block back at the top of this file. */

/* ==========================================================================
   Joyce African Hair Braiding & Beauty — Design System
   Editorial salon aesthetic: warm ivory canvas, garamond display,
   jost sans, hairline wireframe buttons. Brand purple + logo gold kept.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Crop discipline — see .frame img. --crop-zoom trims photo borders and
     bottom props; --crop-y biases the visible window toward the subject. */
  --crop-zoom: 1.08;
  --crop-zoom-hover: 1.14;
  --crop-y: 30%;

  /* Brand (from the existing logo / Astra global colors) */
  --purple:        #7C25C6;
  --purple-light:  #9C48E5;
  --purple-deep:   #43106E;
  --purple-ink:    #2A0845;
  --lilac:         #F3E8FE;
  --lilac-soft:    #FAF4FF;
  --gold:          #C39B44;
  --gold-soft:     #EDDCB6;

  /* Editorial neutrals */
  --ivory:         #FBF9F6;
  --greige:        #F2EEE9;
  --greige-deep:   #E8E1D8;
  --ink:           #171216;
  --ink-soft:      #4A4248;
  --ink-mute:      #6E676C; /* WCAG AA (>=4.66:1) on every background used here */
  --hairline:      rgba(23,18,22,.14);
  --hairline-soft: rgba(23,18,22,.08);
  --white:         #fff;

  /* Type */
  --display: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:  "Parisienne", "Cormorant Garamond", cursive;

  /* Rhythm */
  --gut: clamp(20px, 5vw, 60px);
  --section: clamp(72px, 11vw, 160px);
  --maxw: 1280px;
  --narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .8s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.72;
  letter-spacing:.004em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:500;letter-spacing:.02em;line-height:1.18}
p{margin:0}
::selection{background:var(--purple);color:#fff}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:2px}

/* ---------- 3. Type scale ---------- */
.h-hero{font-size:clamp(2.9rem,7.4vw,6rem);line-height:1.02;letter-spacing:.005em}
.h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.08}
.h2{font-size:clamp(1.95rem,3.9vw,3.1rem);line-height:1.12}
.h3{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.24}
.h4{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.35}

.script{font-family:var(--script);font-weight:400;letter-spacing:0;
  line-height:1.34;padding-bottom:.12em;
  font-size:clamp(1.9rem,4vw,3rem);color:var(--purple-light)}

/* ---------- Metallic gold ----------
   A real leaf-gold look: multi-stop gradient (dark bronze → pale highlight →
   deep amber) clipped to the glyphs, with a slow specular sweep across it. */
.gold,
.section--ink .stat__n,
.infobar__cell .eyebrow,
.reel__cap b{
  --g1:#8A5A18; --g2:#C9962F; --g3:#F7E7A8; --g4:#D8AE45; --g5:#8F6320;
  position:relative;display:inline-block;
  background-image:linear-gradient(
    100deg,
    var(--g1) 0%, var(--g2) 18%, var(--g3) 36%, #FFF8DC 44%,
    var(--g3) 52%, var(--g4) 68%, var(--g2) 84%, var(--g5) 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:goldSweep 7s linear infinite;
  /* background-clip:text crops to the box, so give descenders and italic
     overhangs room — otherwise the Y of "See you soon" loses its tail. */
  padding:.06em .06em .18em;
  margin:-.06em -.06em -.18em;
}
/* On dark grounds, lift the whole ramp so it reads as light-catching metal */
.hero .gold,.banner .gold,.cta-band .gold,.section--ink .gold,
.ftr .gold,.mmenu .gold,.infobar .gold,
.section--ink .stat__n,.infobar__cell .eyebrow,.reel__cap b{
  --g1:#B98A2E; --g2:#E4C46B; --g3:#FFF6D6; --g4:#EBCE86; --g5:#BE9235;
  filter:drop-shadow(0 1px 10px rgba(226,190,106,.28));
}
@keyframes goldSweep{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@media (prefers-reduced-motion:reduce){
  .gold{animation:none;background-position:38% 50%}
}
/* Fallback for engines without background-clip:text */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold,.section--ink .stat__n,.infobar__cell .eyebrow,.reel__cap b{
    background:none;-webkit-text-fill-color:currentColor;color:var(--gold);animation:none}
  .hero .gold,.banner .gold,.cta-band .gold,.section--ink .gold,.ftr .gold,
  .section--ink .stat__n,.infobar__cell .eyebrow,.reel__cap b{color:var(--gold-soft)}
}
/* Hairline gold rule used under gold headings */
.gold-rule{
  width:64px;height:1px;border:0;margin:1.1rem 0 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.center>.gold-rule,.sec-head.center .gold-rule{margin-inline:auto}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--purple);
  display:inline-block;
}
.eyebrow--mute{color:var(--ink-mute)}
.eyebrow--light{color:rgba(255,255,255,.86)}

.lede{font-size:clamp(1.0625rem,1.25vw,1.1875rem);font-weight:400;line-height:1.8;color:var(--ink-soft);max-width:60ch}
.small{font-size:.9375rem;font-weight:400;line-height:1.72;color:var(--ink-soft)}
.tiny{font-size:.8125rem;font-weight:400;line-height:1.66;color:var(--ink-mute)}
.muted{color:var(--ink-mute)}
.ital{font-family:var(--display);font-style:italic}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--narrow)}
.wrap--wide{max-width:1560px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(52px,7vw,96px)}
.section--greige{background:var(--greige)}
.section--lilac{background:var(--lilac-soft)}
.section--ink{background:var(--purple-ink);color:#fff}
.section--ink .lede,.section--ink .small{color:rgba(255,255,255,.7)}

/* ---------- Ambient animated backgrounds ----------
   Every section carries two very soft, slowly drifting colour fields — one
   violet, one gold. They sit on a negative z-index so they paint above the
   section's own background but beneath all content, and they are pure
   transform animations so they run on the compositor (no layout, no repaint).
   `overflow:hidden` keeps them from widening the page. */
.section,.section--tight{position:relative;isolation:isolate;overflow:hidden}
.section::before,.section::after,
.section--tight::before,.section--tight::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  border-radius:50%;will-change:transform;
}
.section::before,.section--tight::before{
  width:min(58vw,720px);aspect-ratio:1;
  left:-14vw;top:-14%;
  background:radial-gradient(circle,rgba(156,72,229,.15) 0%,rgba(156,72,229,.06) 42%,transparent 70%);
  animation:ambDriftA 28s ease-in-out infinite alternate;
}
.section::after,.section--tight::after{
  width:min(50vw,620px);aspect-ratio:1;
  right:-12vw;bottom:-16%;
  background:radial-gradient(circle,rgba(195,155,68,.14) 0%,rgba(195,155,68,.05) 44%,transparent 70%);
  animation:ambDriftB 36s ease-in-out infinite alternate;
}
/* Alternate the drift direction so neighbouring sections never move in sync */
.section:nth-of-type(even)::before{animation-direction:alternate-reverse;animation-duration:33s}
.section:nth-of-type(even)::after{animation-direction:alternate-reverse;animation-duration:25s}
.section:nth-of-type(3n)::before{animation-delay:-8s}
.section:nth-of-type(3n)::after{animation-delay:-14s}

/* Stronger on the dark band so it reads as light in the room */
.section--ink::before{background:radial-gradient(circle,rgba(156,72,229,.42) 0%,rgba(156,72,229,.12) 46%,transparent 72%)}
.section--ink::after{background:radial-gradient(circle,rgba(237,220,182,.20) 0%,rgba(237,220,182,.06) 46%,transparent 72%)}
/* Lighter on the already-tinted lilac band */
.section--lilac::before{background:radial-gradient(circle,rgba(124,37,198,.11) 0%,transparent 68%)}

@keyframes ambDriftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(9vw,5vh,0) scale(1.22)}
}
@keyframes ambDriftB{
  from{transform:translate3d(0,0,0) scale(1.14)}
  to{transform:translate3d(-8vw,-6vh,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .section::before,.section::after,
  .section--tight::before,.section--tight::after{animation:none}
}
/* Flip the drifting fields to the right — used where a left-hand watermark
   would otherwise be washed out by the violet field. */
.section--amb-right::before{left:auto;right:-14vw;top:-10%}
.section--amb-right::after{right:auto;left:-12vw;bottom:-16%;
  background:radial-gradient(circle,rgba(195,155,68,.10) 0%,transparent 66%)}

/* Opt-out for any section that must stay perfectly flat */
.section--flat::before,.section--flat::after{display:none}

.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--s,1.5rem)}
.grid{display:grid;gap:clamp(24px,3.2vw,56px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.rule{height:1px;background:var(--hairline-soft);border:0;margin:0}

.sec-head{max-width:640px}
.sec-head.center{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:1.15rem}
.sec-head .lede{margin-top:1.25rem}

/* Decorative background script watermark */
.watermark{
  position:absolute;font-family:var(--script);
  font-size:clamp(7rem,18vw,17rem);line-height:.9;
  color:#EFE1FD;pointer-events:none;user-select:none;z-index:1;
  white-space:nowrap;padding-bottom:.14em;
}

/* ---------- 5. Buttons (hairline / editorial) ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:52px;padding:0 2.15rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.btn:hover{color:#fff}
.btn:hover::after{transform:scaleY(1)}
/* Icons inside buttons must never win the sizing fight */
.btn svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
.btn--sm svg{width:15px;height:15px}

.btn--solid{--bg:var(--purple);--fg:#fff;--bd:var(--purple)}
.btn--solid::after{background:var(--purple-deep)}
.btn--solid:hover{color:#fff;border-color:var(--purple-deep)}

.btn--purple{--bd:var(--purple);--fg:var(--purple)}
.btn--purple::after{background:var(--purple)}

.btn--light{--bd:rgba(255,255,255,.55);--fg:#fff}
.btn--light::after{background:#fff}
.btn--light:hover{color:var(--ink);border-color:#fff}

.btn--sm{min-height:44px;padding:0 1.5rem;font-size:.72rem;letter-spacing:.14em}
.btn--block{width:100%}

/* Text link with animated underline */
.tlink{
  display:inline-flex;align-items:flex-end;min-height:34px;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.45rem;position:relative;color:var(--ink);
}
@media (pointer:coarse){.tlink{min-height:44px}.cc__toggle{min-height:44px}}
/* Inline inside running text: behave like a normal link, no tap-target box */
p .tlink,li .tlink,.lede .tlink,.small .tlink,.tiny .tlink{
  display:inline;min-height:0;padding-bottom:.1rem;vertical-align:baseline;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform .45s var(--ease);
}
.tlink:hover::after{transform:scaleX(0)}
.tlink--purple{color:var(--purple)}

/* ---------- 6. Header ---------- */
/* Two states. At the top of a page the header sits transparent over the hero
   or banner image — white logo, white menu, white button. As soon as the page
   scrolls it becomes the solid ivory bar: colour logo, ink menu, purple button.
   Every page opens on a dark image, so the light-on-dark state is always
   legible; if that ever changes, add `hdr--solid` to the header. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             backdrop-filter .45s var(--ease),transform .45s var(--ease);
}
/* Solid by default. A frosted bar is only safe where backdrop-filter really
   works and there is room for it: on phones — and in any browser that ignores
   the filter — a translucent bar lets the article text show through above the
   logo, which is exactly what we do not want. */
.hdr.is-scrolled,.hdr.hdr--solid,body.menu-open .hdr{background:var(--ivory)}
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  @media (min-width:861px){
    .hdr.is-scrolled,.hdr.hdr--solid,body.menu-open .hdr{
      background:rgba(251,249,246,.86);
      backdrop-filter:saturate(150%) blur(14px);
      -webkit-backdrop-filter:saturate(150%) blur(14px);
    }
  }
}
.hdr.is-scrolled{border-bottom-color:var(--hairline-soft)}

/* ---- transparent state: light chrome ---- */
.hdr__logo{display:block;position:relative;line-height:0}
.hdr__logo--dark{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
.hdr__logo--light{opacity:1;transition:opacity .4s var(--ease)}
.hdr.is-scrolled .hdr__logo--dark,.hdr.hdr--solid .hdr__logo--dark{opacity:1}
.hdr.is-scrolled .hdr__logo--light,.hdr.hdr--solid .hdr__logo--light{opacity:0}

.hdr:not(.is-scrolled):not(.hdr--solid) .nav a{color:#fff;text-shadow:0 1px 14px rgba(12,6,18,.45)}
.hdr:not(.is-scrolled):not(.hdr--solid) .nav a::after{background:#fff}
.hdr:not(.is-scrolled):not(.hdr--solid) .nav a[aria-current="page"]{color:#fff}
.hdr:not(.is-scrolled):not(.hdr--solid) .nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr:not(.is-scrolled):not(.hdr--solid) .btn--solid{
  --bg:#fff;--fg:var(--purple);--bd:#fff;
}
.hdr:not(.is-scrolled):not(.hdr--solid) .btn--solid::after{background:var(--purple)}
.hdr:not(.is-scrolled):not(.hdr--solid) .btn--solid:hover{color:#fff;border-color:#fff}
.hdr:not(.is-scrolled):not(.hdr--solid) .burger span{
  background:#fff;box-shadow:0 1px 10px rgba(12,6,18,.35);
}
/* The open mobile menu owns the screen, so the header goes back to its
   scrolled look underneath the overlay. */
body.menu-open .hdr .hdr__logo--light{opacity:0}
body.menu-open .hdr .hdr__logo--dark{opacity:1}
body.menu-open .hdr .nav a{color:var(--ink);text-shadow:none}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:84px;
}
.hdr__logo img{height:50px;width:auto;max-width:min(300px,52vw);object-fit:contain;
  object-position:left center;transition:height .4s var(--ease)}
.hdr.is-scrolled .hdr__logo img{height:42px}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.1vw,2.1rem)}
.nav a{
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-block:.4rem;white-space:nowrap;color:var(--ink);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--purple);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--purple)}

.hdr__act{display:flex;align-items:center;gap:.9rem}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid transparent;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.icon-btn:hover{border-color:var(--hairline);color:var(--purple)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.35}

/* Burger */
.burger{width:46px;height:46px;display:none;place-items:center;position:relative;z-index:120}
.burger span{
  display:block;width:22px;height:1px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .3s var(--ease),background .3s;
}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 7. Mobile full-screen menu ---------- */
.mmenu{
  position:fixed;inset:0;z-index:110;
  background:var(--purple-ink);color:#fff;
  display:flex;flex-direction:column;
  padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(28px + env(safe-area-inset-bottom));
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .72s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;
}
.mmenu.is-open{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
/* Explicit close control — the burger sits inside the header, which is a lower
   stacking context than this overlay, so it cannot be relied on to show. */
.mmenu__x{
  position:absolute;z-index:5;
  top:calc(18px + env(safe-area-inset-top));right:var(--gut);
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:50%;
  opacity:0;transform:scale(.8) rotate(-45deg);
  transition:opacity .4s .22s var(--ease),transform .5s .22s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease);
}
.mmenu.is-open .mmenu__x{opacity:1;transform:none}
.mmenu__x:hover{background:#fff;color:var(--purple-ink);border-color:#fff}
.mmenu__x svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.mmenu::before{
  content:"Joyce";position:absolute;right:-.15em;bottom:.1em;
  font-family:var(--script);font-size:38vw;line-height:.7;
  color:rgba(255,255,255,.045);pointer-events:none;
}
.mmenu__nav{display:flex;flex-direction:column;gap:.15rem;margin-block:auto}
.mmenu__nav a{
  font-family:var(--display);font-size:clamp(2rem,10.5vw,3.1rem);
  line-height:1.22;letter-spacing:.01em;
  display:flex;align-items:baseline;gap:.75rem;
  padding-block:.22rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s;
}
.mmenu.is-open .mmenu__nav a{opacity:1;transform:none}
.mmenu__nav a:nth-child(1){transition-delay:.18s}
.mmenu__nav a:nth-child(2){transition-delay:.24s}
.mmenu__nav a:nth-child(3){transition-delay:.30s}
.mmenu__nav a:nth-child(4){transition-delay:.36s}
.mmenu__nav a:nth-child(5){transition-delay:.42s}
.mmenu__nav a:nth-child(6){transition-delay:.48s}
.mmenu__nav a:nth-child(7){transition-delay:.54s}
.mmenu__nav a i{
  font-style:normal;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;color:var(--purple-light);
}
.mmenu__nav a:hover,.mmenu__nav a[aria-current="page"]{color:var(--gold-soft)}
.mmenu__foot{
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;
  display:flex;flex-direction:column;gap:1.1rem;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s .58s var(--ease),transform .5s .58s var(--ease);
}
.mmenu.is-open .mmenu__foot{opacity:1;transform:none}
.mmenu__foot a{font-size:.9375rem;font-weight:400;color:rgba(255,255,255,.78)}
.mmenu__foot .row{display:flex;gap:.4rem 1.25rem;flex-wrap:wrap}
.mmenu__foot .row a{display:inline-flex;align-items:center;min-height:44px}
.mmenu__social{display:flex;gap:1rem}
.mmenu__social a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);
}
.mmenu__social svg{width:16px;height:16px;fill:currentColor}
body.menu-open{overflow:hidden}

/* ---------- 8. Mobile action dock ---------- */
.dock{
  position:fixed;z-index:80;display:none;
  left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(440px,calc(100% - 24px));
  background:rgba(42,8,69,.90);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  box-shadow:0 14px 44px -14px rgba(42,8,69,.65);
  padding:7px;
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.dock.is-hidden{transform:translateX(-50%) translateY(150%);opacity:0}
.dock__in{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.dock a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 2px;color:rgba(255,255,255,.7);border-radius:999px;
  font-size:.625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.dock a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4}
.dock a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.dock a.is-cta{
  background:var(--purple);color:#fff;
}
.dock a:hover{color:#fff}

/* ---------- 9. Hero — three portrait columns, each cycling ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;overflow:hidden;background:#1B1420;
}

/* The image wall: 3 equal columns of portrait frames. Because each column is
   only ~1/3 of the viewport, the 1400px-wide source files are displayed at or
   below their native width — so they stay sharp instead of being upscaled. */
.hero__wall{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(3,1fr)}
/* Three portrait columns need width to read as portraits. Below the desktop
   breakpoint we drop to two, then to a single full-bleed frame on phones. */
@media (max-width:1024px){
  .hero__wall{grid-template-columns:repeat(2,1fr)}
  .hero__col:nth-child(3){display:none}
}
@media (max-width:640px){
  .hero__wall{grid-template-columns:1fr}
  .hero__col:nth-child(2){display:none}
}
.hero__col{position:relative;overflow:hidden}
.hero__col+.hero__col{border-left:1px solid rgba(255,255,255,.10)}
.hero__col figure{position:absolute;inset:0;margin:0;opacity:0;z-index:1;
  transition:opacity 1.5s var(--ease)}
.hero__col figure.is-active{opacity:1;z-index:3}
/* The outgoing frame is held fully opaque underneath the incoming one until
   the fade finishes. Cross-fading both at once puts them at ~50% together
   mid-transition, and the dark ground shows through as a visible dip. */
.hero__col figure.is-leaving{opacity:1;z-index:2;transition:none}
.hero__col img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 30%;
  image-rendering:auto;
  transform:scale(1.10);
  transition:transform 8s linear;
}
.hero__col figure.is-active img{transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){
  .hero__col img,.hero__col figure.is-active img{transform:none;transition:none}
}

/* Veil — darker than before so the display type stays legible over any frame */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Tuned against the real photographs, which are already mid-to-dark: enough
     veil to hold the display type, not so much that the braids disappear.
     The type carries its own shadow, so the veil does not have to do all
     the work. */
  background:
    /* A tight pool right behind the headline block — this is what actually
       buys legibility, without flattening the whole photograph. */
    radial-gradient(64% 52% at 50% 56%, rgba(14,7,20,.80) 0%, rgba(14,7,20,.42) 46%, rgba(14,7,20,0) 74%),
    /* Broad wash, weighted to the bottom where the info bar sits. */
    radial-gradient(120% 90% at 50% 74%, rgba(28,8,46,.52) 0%, rgba(28,8,46,0) 66%),
    linear-gradient(to bottom,
      rgba(14,8,18,.66) 0%,
      rgba(14,8,18,.50) 22%,
      rgba(20,9,32,.58) 54%,
      rgba(28,8,48,.86) 100%);
}
/* A second, very soft moving sheen so the hero is never completely static */
.hero__veil::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(38% 30% at 30% 40%, rgba(156,72,229,.20), transparent 70%);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:translate3d(-4%,-2%,0) scale(1)}
  to{transform:translate3d(6%,4%,0) scale(1.16)}
}
@media (prefers-reduced-motion:reduce){.hero__veil::after{animation:none}}

.hero__body{
  position:relative;z-index:2;text-align:center;
  padding:calc(120px + var(--gut)) var(--gut) clamp(56px,8vw,110px);
  margin-top:auto;
}
.hero__body .h-hero{margin-top:.35rem;
  text-shadow:0 2px 40px rgba(10,5,14,.9),0 2px 8px rgba(10,5,14,.7),0 1px 2px rgba(10,5,14,.6)}
.hero__body .lede{color:rgba(255,255,255,.94);margin:1.5rem auto 0;max-width:46ch;
  text-shadow:0 1px 18px rgba(10,5,14,.9),0 1px 4px rgba(10,5,14,.7)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.4rem}

/* Info bar under hero */
.infobar{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.2);
  background:rgba(23,18,22,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.infobar__in{
  display:grid;grid-template-columns:repeat(3,1fr);
  text-align:center;
}
.infobar__cell{padding:1.7rem 1rem;border-left:1px solid rgba(255,255,255,.16)}
.infobar__cell:first-child{border-left:0}
.infobar__cell .eyebrow{margin-bottom:.6rem}
.infobar__cell p{font-size:.9375rem;font-weight:400;color:rgba(255,255,255,.94);line-height:1.62}
.infobar__cell a:hover{color:var(--gold-soft)}

/* Page banner (inner pages) */
.banner{
  position:relative;min-height:clamp(360px,48vh,540px);
  display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;
  padding:calc(120px + var(--gut)) var(--gut) clamp(48px,6vw,80px);
}
.banner__media{position:absolute;inset:0;z-index:0}
.banner__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transform:scale(1.08)}
.banner__media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 58% at 50% 52%,rgba(14,7,20,.74) 0%,rgba(14,7,20,.34) 50%,transparent 76%),
    radial-gradient(110% 80% at 50% 60%,rgba(28,8,46,.40),transparent 68%),
    linear-gradient(to bottom,rgba(20,10,26,.62),rgba(28,8,48,.72))}
/* Same slow sheen as the hero so inner pages feel alive too */
.banner__media::before{
  content:"";position:absolute;inset:-25%;z-index:1;
  background:radial-gradient(36% 32% at 35% 45%,rgba(156,72,229,.24),transparent 70%);
  animation:heroDrift 24s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:reduce){.banner__media::before{animation:none}}
.banner__body{position:relative;z-index:2;max-width:720px}
.banner__body .lede{color:rgba(255,255,255,.92);margin:1.1rem auto 0;
  text-shadow:0 1px 14px rgba(16,10,20,.45)}
.banner__body .h1{text-shadow:0 2px 30px rgba(16,10,20,.5)}
.crumbs{
  display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:1.6rem;
}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- 10. Cards & media ---------- */
.frame{position:relative;overflow:hidden;background:var(--greige)}
.frame img{
  width:100%;height:100%;object-fit:cover;
  object-position:center var(--crop-y);
  /* Always slightly over-scaled so no photo edge, white border or bottom prop
     can creep into the frame. */
  transform:scale(var(--crop-zoom));
  transition:transform 1.1s var(--ease);
}
.frame:hover img{transform:scale(var(--crop-zoom-hover))}
/* Per-image escape hatches where a subject sits high or low in the original */
.frame--top img{--crop-y:16%}
.frame--face img{--crop-y:24%}
.frame--low img{--crop-y:44%}
.frame--tight img{--crop-zoom:1.16;--crop-zoom-hover:1.22}
.ratio-portrait{aspect-ratio:3/4}
.ratio-tall{aspect-ratio:2/3}
.ratio-square{aspect-ratio:1/1}
.ratio-wide{aspect-ratio:4/3}
.ratio-cine{aspect-ratio:16/10}

/* Service card */
.svc{
  background:var(--white);border:1px solid var(--hairline-soft);
  padding:clamp(28px,3vw,44px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;height:100%;
  transition:border-color .45s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.svc::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--purple);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.svc:hover{border-color:var(--hairline);transform:translateY(-5px);
  box-shadow:0 26px 50px -30px rgba(42,8,69,.28)}
.svc:hover::before{transform:scaleX(1)}
.svc__ico{width:34px;height:34px;stroke:var(--purple);fill:none;stroke-width:1.15}
.svc__n{
  font-family:var(--display);font-size:1rem;font-weight:600;color:var(--purple-light);
  letter-spacing:.06em;
}
.svc .h3{font-size:clamp(1.28rem,1.6vw,1.55rem);text-wrap:balance}
.svc ul{display:flex;flex-direction:column;gap:.45rem;margin-top:.35rem}
.svc ul li{
  font-size:.9375rem;font-weight:400;color:var(--ink-soft);padding-left:1.1rem;position:relative;
}
.svc ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--gold);
}
.svc .tlink{margin-top:auto;padding-top:.9rem}

/* Price / service menu */
.menu-tabs{
  display:flex;gap:clamp(1.1rem,3vw,2.6rem);justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--hairline-soft);padding-bottom:0;
}
.menu-tabs button{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);padding:0 .1rem 1rem;position:relative;
  transition:color .35s var(--ease);
}
.menu-tabs button::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--purple);transform:scaleX(0);transition:transform .4s var(--ease);
}
.menu-tabs button[aria-selected="true"]{color:var(--ink)}
.menu-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.menu-tabs button:hover{color:var(--ink)}

.menu-panel{display:none;padding-top:clamp(32px,4vw,56px)}
.menu-panel.is-active{display:block;animation:fadeUp .6s var(--ease) both}
.menu-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,80px)}
.menu-item{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--hairline-soft);
}
.menu-item__h{font-family:var(--sans);font-size:1.0625rem;font-weight:500;letter-spacing:.01em}
.menu-item__p{font-family:var(--display);font-size:1.15rem;color:var(--purple);white-space:nowrap}
.menu-item__d{grid-column:1/-1;font-size:.9063rem;font-weight:400;color:var(--ink-mute);line-height:1.66}
.menu-note{
  margin-top:clamp(28px,3.5vw,44px);padding:1.15rem 1.4rem;
  background:var(--lilac-soft);border-left:2px solid var(--purple-light);
  font-size:.9375rem;font-weight:400;color:var(--ink-soft);
}

/* Split (image + text) */
.split{display:grid;gap:clamp(32px,5vw,86px);align-items:center;grid-template-columns:1fr 1fr}
.split--rev .split__media{order:2}
.split__body{max-width:52ch}
.split__body .h2{margin-top:.7rem}
.split__body .lede{margin-top:1.35rem}
.split__body .btn,.split__body .tlink{margin-top:2rem}
.split__stack{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:14px}
.split__stack>:first-child{grid-row:1/3}

/* Feature row (icon + text) */
.feat{display:flex;gap:1.1rem;align-items:flex-start}
.feat svg{width:26px;height:26px;stroke:var(--purple);fill:none;stroke-width:1.2;flex:0 0 auto;margin-top:.2rem}
.feat h4{margin-bottom:.35rem}
.feat p{font-size:.9688rem;font-weight:400;color:var(--ink-soft);line-height:1.74}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);text-align:center}
.stat__n{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1;color:var(--purple)}

.stat__l{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:.85rem}
.section--ink .stat__l{color:rgba(255,255,255,.6)}

/* Two-column layout with a sidebar */
.layout-aside{grid-template-columns:1.25fr 1fr;align-items:start;gap:clamp(32px,4.5vw,72px)}
.layout-aside--wide{grid-template-columns:1.5fr .85fr;gap:clamp(32px,4vw,64px)}

/* Embedded map — height driven, never aspect-ratio + min-height (that forces overflow) */
.mapbox{
  position:relative;height:clamp(300px,42vw,460px);
  border:1px solid var(--hairline-soft);background:var(--greige);
}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Balanced headline wrapping */
.h-hero,.h1,.h2,.h3,.sec-head .lede{text-wrap:balance}

/* Gallery */
.gal-filter{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center}
.gal-filter button{
  min-height:40px;padding:0 1.15rem;border:1px solid var(--hairline-soft);
  font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  transition:.35s var(--ease);
}
.gal-filter button:hover{border-color:var(--purple);color:var(--purple)}
.gal-filter button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}

.gal{columns:4;column-gap:14px}
.gal__item{margin-bottom:14px;break-inside:avoid;position:relative;cursor:zoom-in;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gal__item.is-out{display:none}
.gal__item .frame::after{
  content:"";position:absolute;inset:0;background:rgba(42,8,69,.28);
  opacity:0;transition:opacity .45s var(--ease);
}
.gal__item:hover .frame::after{opacity:1}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem;
  color:#fff;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:.45s var(--ease);
}
.gal__item:hover .gal__cap{opacity:1;transform:none}

/* Lightbox */
.lbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(19,13,22,.94);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);
}
.lbox.is-open{display:flex;animation:fade .3s var(--ease) both}
.lbox img{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px -30px #000}
.lbox__x,.lbox__nav{
  position:absolute;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);color:#fff;transition:.3s var(--ease);
}
.lbox__x:hover,.lbox__nav:hover{background:#fff;color:var(--ink)}
.lbox__x{top:clamp(14px,3vw,32px);right:clamp(14px,3vw,32px)}
.lbox__nav--prev{left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.lbox__nav--next{right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.lbox__nav svg,.lbox__x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}
.lbox__count{position:absolute;bottom:clamp(14px,3vw,30px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.72);font-size:.78rem;font-weight:500;letter-spacing:.16em}

/* Testimonials */
.quote{
  background:var(--white);border:1px solid var(--hairline-soft);
  padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;gap:1.15rem;height:100%;
}
.quote__stars{display:flex;gap:3px;color:var(--gold)}
.quote__stars svg{width:15px;height:15px;fill:currentColor}
.quote p{font-family:var(--display);font-size:1.12rem;line-height:1.72;font-style:italic;color:var(--ink)}
.quote__who{margin-top:auto;display:flex;align-items:center;gap:.85rem}
.quote__av{width:42px;height:42px;border-radius:50%;background:var(--lilac);
  display:grid;place-items:center;font-family:var(--display);color:var(--purple);font-size:1rem}
.quote__who b{font-weight:500;font-size:.9375rem;display:block}
.quote__who span{font-size:.8125rem;color:var(--ink-mute)}

/* Blog cards */
.post{display:flex;flex-direction:column;gap:1.15rem;height:100%}
.post__meta{display:flex;gap:.7rem;align-items:center;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.post__meta span{color:var(--ink-mute)}
.post h3{transition:color .35s var(--ease)}
.post:hover h3{color:var(--purple)}
.post p{font-size:.9688rem;font-weight:400;color:var(--ink-soft);line-height:1.76}
.post .tlink{margin-top:auto}

/* Article body */
/* Legacy Gutenberg post content (the two 2022 journal posts run through
   single.php). Block markup is left untouched; it just needs to inherit the
   studio's type and button treatment instead of the old theme's. */
.article .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--purple);color:#fff;border-radius:0;
  padding:1.05rem 1.9rem;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .35s var(--ease);
}
.article .wp-block-button__link:hover,
.article .wp-block-button__link:focus-visible{background:var(--purple-deep);color:#fff}
.article .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.25rem}
.article .wp-block-gallery{margin-top:2.25rem}
.article figcaption{
  font-family:var(--sans);font-size:.82rem;font-weight:400;
  color:var(--ink-mute);margin-top:.6rem;text-align:center;
}
.article .wp-block-image img,.article .wp-block-gallery img{border-radius:0}

/* ---------- Article sharing ---------- */
.share{
  margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--hairline-soft);
}
.share__label{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:1rem;
}
.share__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.share__btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 1.05rem;border:1px solid var(--hairline);background:var(--white);
  font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.share__btn svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
.share__btn[data-share="copy"] svg,.share__btn[data-share="native"] svg{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.share__btn:hover{border-color:var(--purple);color:var(--purple);background:var(--lilac-soft)}
.share__btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.share__btn.is-done{border-color:var(--purple);color:var(--purple);background:var(--lilac-soft)}
@media (max-width:520px){
  .share__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .share__btn{padding:0;width:44px;justify-content:center}
  .share__btn[data-share="copy"]{width:auto;padding:0 1.05rem}
  .share__btn[data-share="copy"] span{position:static;width:auto;height:auto;clip-path:none}
}

/* ---------- Comments (legacy posts and the advice articles) ---------- */
.cmts{max-width:74ch;margin:clamp(48px,6vw,80px) auto 0}
.cmts__head{
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hairline-soft);
}
.cmts__head h2{font-size:clamp(1.45rem,2.4vw,1.95rem)}
.cmts__count{font-size:.8125rem;color:var(--ink-mute)}
.cmts__list{list-style:none;padding:0;margin:0}
.cmts__list ul{list-style:none;padding-left:clamp(18px,2.4vw,38px);margin:0}
.cmt{padding:1.5rem 0;border-bottom:1px solid var(--hairline-soft)}
.cmt__top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.cmt__avatar img,.cmt__avatar{border-radius:50%;width:38px;height:38px;flex:0 0 auto}
.cmt__who{font-family:var(--display);font-size:1.02rem;font-weight:500;color:var(--ink)}
.cmt__date{font-size:.75rem;letter-spacing:.06em;color:var(--ink-mute)}
.cmt__body{margin-top:.8rem}
.cmt__body p{font-size:1rem;font-weight:400;line-height:1.8;color:var(--ink-soft)}
.cmt__body p+p{margin-top:.8rem}
.cmt__actions{margin-top:.7rem;display:flex;gap:1rem;align-items:center}
.cmt__actions a{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);
}
.cmt--pending{font-size:.8125rem;color:var(--gold-dark,#8A6725)}
.cmts__form{margin-top:clamp(34px,4vw,52px)}
.cmts__form .comment-reply-title{
  font-family:var(--display);font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.4rem;
}
.cmts__form .comment-notes,.cmts__form .logged-in-as{
  font-size:.875rem;color:var(--ink-mute);margin-bottom:1.4rem;line-height:1.7;
}
.cmts__form .comment-form-cookies-consent{
  display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.875rem;
}
.cmts__form .comment-form-cookies-consent input{margin-top:.35rem}
.cmts__form .form-submit{margin-top:1.6rem}
.cmts__form .submit{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 2.15rem;background:var(--purple);color:#fff;border:1px solid var(--purple);
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;transition:background .35s var(--ease);
}
.cmts__form .submit:hover{background:var(--purple-deep)}
.cmts__closed{
  margin-top:1.4rem;font-size:.9375rem;color:var(--ink-soft);
}

.article{max-width:74ch;margin-inline:auto}
.article>*+*{margin-top:1.5rem}
.article h2{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-top:3rem}
.article h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-top:2.25rem}
.article p{font-size:1.0938rem;font-weight:400;line-height:1.86;color:var(--ink-soft)}
.article ul,.article ol{display:flex;flex-direction:column;gap:.7rem;padding-left:0}
.article ul li,.article ol li{
  font-size:1.0938rem;font-weight:400;line-height:1.84;color:var(--ink-soft);
  padding-left:1.6rem;position:relative;
}
.article ul li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--gold)}
.article ol{counter-reset:n}
.article ol li{counter-increment:n}
.article ol li::before{
  content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--display);color:var(--purple);font-size:.95rem;
}
.article blockquote{
  margin:2.5rem 0;padding:1.6rem 0 1.6rem 1.8rem;border-left:2px solid var(--purple-light);
  font-family:var(--display);font-size:1.3rem;font-style:italic;line-height:1.6;color:var(--ink);
}
.article figure{margin:2.5rem 0}
/* Keep tall portrait photos from swallowing the reading column */
.article figure img{
  width:100%;max-height:min(70vh,620px);object-fit:cover;object-position:center 28%;
  transform:scale(1.04);background:var(--greige);
}
.article figure{overflow:hidden}
.article figcaption{margin-top:.85rem;font-size:.875rem;color:var(--ink-mute);text-align:center}
.article a:not(.btn):not(.tlink){color:var(--purple);border-bottom:1px solid var(--purple-light)}

/* Disclaimer / callout */
.callout{
  border:1px solid var(--hairline-soft);background:var(--lilac-soft);
  padding:clamp(22px,2.6vw,32px);display:flex;gap:1.15rem;align-items:flex-start;
  margin:2.5rem 0;
}
.callout svg{width:24px;height:24px;stroke:var(--purple);fill:none;stroke-width:1.35;flex:0 0 auto;margin-top:.15rem}
.callout h4{margin-bottom:.5rem;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--purple);font-weight:600}
.callout p{font-size:.9688rem;font-weight:400;line-height:1.78;color:var(--ink-soft)}
.callout p+p{margin-top:.7rem}
.callout--gold{background:#FDF9EF;border-color:var(--gold-soft)}
.callout--gold svg{stroke:var(--gold)}
.callout--gold h4{color:#8A6725}

/* Forms */
.field{display:flex;flex-direction:column;gap:.55rem}
.field>label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  background:var(--white);border:1px solid var(--hairline);border-radius:0;
  font-size:1rem;font-weight:400;transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--lilac);
}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23171216' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.hint{font-size:.8438rem;font-weight:400;color:var(--ink-mute)}

/* choice chips (booking) */
/* ---------- Collapsible service groups (booking step 1) ----------
   Forty services on one screen is a long scroll, so each category folds. The
   button is a real <button> inside a heading, the panel is toggled with the
   `hidden` attribute (no measured heights to go stale on resize), and the
   chosen service is echoed in the closed header so nothing is lost from view. */
.svcpick{display:block}
.svcgroup{border:1px solid var(--hairline-soft);background:var(--white);margin-top:10px}
.svcgroup:first-of-type{margin-top:0}
.svcgroup h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.svcgroup__btn{
  width:100%;display:flex;align-items:center;gap:1rem;
  padding:1.15rem clamp(16px,1.6vw,22px);min-height:66px;text-align:left;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.svcgroup__btn:hover{background:var(--lilac-soft)}
.svcgroup__btn:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.svcgroup__t{
  display:flex;flex-direction:column;gap:.2rem;flex:1 1 auto;
  font-family:var(--display);font-size:1.08rem;font-weight:500;color:var(--ink);
}
.svcgroup__t em{
  font-style:normal;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
}
.svcgroup__pick{
  flex:0 1 auto;font-size:.8125rem;font-weight:500;color:var(--purple);
  text-align:right;max-width:46%;
}
.svcgroup__pick:empty{display:none}
.svcgroup__btn i{
  font-style:normal;flex:0 0 auto;width:20px;height:20px;position:relative;
}
.svcgroup__btn i::before,.svcgroup__btn i::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),opacity .25s;
}
.svcgroup__btn i::before{width:12px;height:1px}
.svcgroup__btn i::after{width:1px;height:12px}
.svcgroup__btn[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.svcgroup__body{padding:0 clamp(16px,1.6vw,22px) clamp(18px,2vw,24px)}
.svcgroup__body[hidden]{display:none}
.svcgroup.is-chosen{border-color:var(--purple-light)}
.svcgroup.is-chosen .svcgroup__btn{background:var(--lilac-soft)}
@media (prefers-reduced-motion:no-preference){
  .svcgroup__body:not([hidden]){animation:svcOpen .35s var(--ease) both}
}
@keyframes svcOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .svcgroup__pick{max-width:38%;font-size:.75rem}
  .svcgroup__t{font-size:1rem}
}

/* ---------- Indicative-price notice ----------
   Prices on this site are starting points, and that has to be impossible to
   miss — it appears wherever a figure does. */
.pricenote{
  display:flex;gap:.85rem;align-items:flex-start;
  border:1px solid var(--gold-soft);background:rgba(237,220,182,.16);
  padding:.95rem 1.15rem;
  font-size:.9375rem;font-weight:400;line-height:1.7;color:var(--ink-soft);
}
.pricenote svg{
  width:20px;height:20px;flex:0 0 auto;margin-top:.15rem;
  stroke:var(--gold);fill:none;stroke-width:1.3;
}
.pricenote b{font-weight:600;color:var(--ink)}
.section--ink .pricenote{
  border-color:rgba(237,220,182,.42);background:rgba(237,220,182,.10);
  color:rgba(255,255,255,.82);
}
.section--ink .pricenote b{color:var(--gold-soft)}

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:.6rem 1rem;text-align:center;
  border:1px solid var(--hairline);background:var(--white);
  font-size:.875rem;font-weight:500;letter-spacing:.02em;transition:.3s var(--ease);
}
.chip input:checked+span{border-color:var(--purple);background:var(--lilac-soft);color:var(--purple)}
.chip input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}
.chip span:hover{border-color:var(--purple-light)}

/* Steps */
.steps{display:flex;gap:0;border:1px solid var(--hairline-soft);background:var(--white)}
.steps li{
  flex:1;display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  border-left:1px solid var(--hairline-soft);
}
.steps li:first-child{border-left:0}
.steps li b{
  width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:1px solid currentColor;font-family:var(--display);font-size:.812rem;font-weight:500;
}
.steps li.is-on{color:var(--purple);background:var(--lilac-soft)}
.steps li.is-done{color:var(--ink)}

.fstep{display:none}
.fstep.is-on{display:block;animation:fadeUp .5s var(--ease) both}

/* Accordion */
.acc{border-top:1px solid var(--hairline-soft)}
.acc__item{border-bottom:1px solid var(--hairline-soft)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;text-align:left;font-family:var(--display);font-size:1.15rem;
  transition:color .3s var(--ease);
}
.acc__btn:hover{color:var(--purple)}
.acc__btn i{
  font-style:normal;flex:0 0 auto;width:22px;height:22px;position:relative;
}
.acc__btn i::before,.acc__btn i::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s;
}
.acc__btn i::before{width:13px;height:1px}
.acc__btn i::after{width:1px;height:13px}
.acc__btn[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__body{overflow:hidden;height:0;transition:height .45s var(--ease)}
.acc__body>div{padding-bottom:1.6rem}
.acc__body p{font-size:1rem;font-weight:400;line-height:1.84;color:var(--ink-soft)}

/* ---------- Google reviews ---------- */
.grev__head{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,36px);
  flex-wrap:wrap;text-align:left;
}
.grev__score{display:flex;align-items:center;gap:1rem}
.grev__num{font-family:var(--display);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--ink)}
.grev__meta .quote__stars{margin-bottom:.3rem}
.grev__meta p{font-size:.9375rem;color:var(--ink-mute)}
.grev__logo{display:flex;align-items:center;gap:.6rem;
  padding-left:clamp(16px,2.6vw,36px);border-left:1px solid var(--hairline-soft)}
.grev__logo svg{width:22px;height:22px}
.grev__logo span{font-size:.9375rem;font-weight:500;color:var(--ink-soft)}
@media (max-width:640px){
  .grev__logo{padding-left:0;border-left:0;border-top:1px solid var(--hairline-soft);padding-top:1rem;width:100%;justify-content:center}
  .grev__head{justify-content:center}
}
/* Source line must not inherit the italic serif used for the quote body */
.quote p.quote__src,.quote__src{
  display:flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-family:var(--sans);font-style:normal;font-size:.72rem;font-weight:600;
  line-height:1.4;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:-.45rem;
}
.quote__src svg{width:15px;height:15px;flex:0 0 auto}

/* ---------- Instagram reels row ---------- */
.reels{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:clamp(10px,1.4vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:.6rem;
  scrollbar-width:thin;
}
.reels::-webkit-scrollbar{height:4px}
.reels::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:4px}
.reel{
  position:relative;scroll-snap-align:start;display:block;
  aspect-ratio:9/16;overflow:hidden;background:var(--greige);
  border:1px solid var(--hairline-soft);
}
.reel img,.reel video{width:100%;height:100%;object-fit:cover;
  object-position:center 28%;transform:scale(1.06);
  transition:transform 1.1s var(--ease)}
.reel:hover img,.reel:hover video{transform:scale(1.13)}
.reel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,9,24,.86) 0%,rgba(18,9,24,.34) 38%,rgba(18,9,24,.06) 62%,rgba(18,9,24,.30) 100%);
}
.reel__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,255,255,.28)}
.reel__play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.reel__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.9rem 1rem;
  color:#fff;font-size:.8125rem;font-weight:500;line-height:1.4;
  text-shadow:0 1px 8px rgba(18,9,24,.8);
}
.reel__cap b{display:block;font-weight:600;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:.2rem}
.reel__badge{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:rgba(23,12,30,.5);backdrop-filter:blur(4px);
}
.reel__badge svg{width:15px;height:15px;fill:#fff}

.igbar{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px);
}
.ighandle{display:flex;align-items:center;gap:.8rem}
.ighandle__ring{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;padding:2px;
  background:conic-gradient(from 210deg,#F58529,#DD2A7B,#8134AF,#515BD4,#F58529);
  animation:ringSpin 9s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ighandle__ring{animation:none}}
.ighandle__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:#fff;border:2px solid var(--ivory);padding:4px}
.ighandle b{display:block;font-size:1.0625rem;font-weight:500}
.ighandle span{font-size:.875rem;color:var(--ink-mute)}

/* ---------- Legacy Instagram strip (still used as a photo mosaic) ---------- */
.igstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.igstrip a{position:relative;overflow:hidden}
.igstrip a::after{
  content:"";position:absolute;inset:0;background:rgba(124,37,198,.4);
  opacity:0;transition:opacity .4s var(--ease);
}
.igstrip a:hover::after{opacity:1}

/* CTA band */
.cta-band{position:relative;overflow:hidden;text-align:center;color:#fff}
.cta-band__media{position:absolute;inset:0;z-index:0}
.cta-band__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.08)}
.cta-band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(31,9,52,.86),rgba(23,12,30,.78))}
.cta-band__media::before{
  content:"";position:absolute;inset:-25%;z-index:1;
  background:radial-gradient(34% 30% at 65% 40%,rgba(195,155,68,.20),transparent 70%);
  animation:heroDrift 26s ease-in-out infinite alternate-reverse;
}
@media (prefers-reduced-motion:reduce){.cta-band__media::before{animation:none}}
.cta-band__in{position:relative;z-index:1;padding-block:clamp(72px,10vw,140px)}
.cta-band .lede{color:rgba(255,255,255,.82);margin:1.4rem auto 0;max-width:44ch}

/* ---------- 11. Footer ---------- */
.ftr{background:var(--purple-ink);color:rgba(255,255,255,.72);position:relative;overflow:hidden}
.ftr::before{
  content:"Beauty";position:absolute;left:50%;bottom:-.22em;transform:translateX(-50%);
  font-family:var(--script);font-size:clamp(9rem,26vw,24rem);line-height:.7;
  color:rgba(255,255,255,.035);pointer-events:none;white-space:nowrap;
}
.ftr__in{position:relative;z-index:1;padding-block:clamp(60px,8vw,110px) 0}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,64px)}
.ftr h5{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;font-weight:600;margin-bottom:1.4rem;
}
.ftr__logo img{height:52px;width:auto;max-width:280px;object-fit:contain;
  object-position:left center;margin-bottom:1.4rem}
.ftr ul{display:flex;flex-direction:column;gap:.75rem}
.ftr a{font-size:.9688rem;font-weight:400;transition:color .3s var(--ease)}
/* On the dark footer the muted ink token would be unreadable */
.ftr .tiny,.ftr .small,.ftr .muted{color:rgba(255,255,255,.62)}
.section--ink .tiny,.section--ink .muted{color:rgba(255,255,255,.66)}
/* Teaser cards on a dark ground (404 page, and anywhere else .post is reused
   inside an ink section): the default body colour is near-black. */
.section--ink .post h3{color:#fff}
.section--ink .post p{color:rgba(255,255,255,.74)}
.section--ink .post:hover h3{color:var(--gold-soft)}
.section--ink .tlink,.section--ink .tlink--purple{color:var(--gold-soft)}
.section--ink .tlink::after,.section--ink .tlink--purple::after{background:var(--gold-soft)}
.section--ink .post a,.section--ink p a{color:var(--gold-soft)}
.mmenu .tiny,.mmenu .small{color:rgba(255,255,255,.66)}
.banner .tiny,.banner .small,.hero .tiny,.hero .small,
.cta-band .tiny,.cta-band .small{color:rgba(255,255,255,.75)}
.ftr a:hover{color:#fff}
.ftr p{font-size:.9688rem;font-weight:400;line-height:1.82}
.ftr__social{display:flex;gap:.6rem;margin-top:1.5rem}
.ftr__social a{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);transition:.3s var(--ease)}
.ftr__social a:hover{background:#fff;color:var(--purple-ink);border-color:#fff}
.ftr__social svg{width:16px;height:16px;fill:currentColor}
.ftr__bot{
  margin-top:clamp(44px,5vw,72px);border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  align-items:center;justify-content:space-between;
}
.ftr__bot p,.ftr__bot a{font-size:.8438rem;font-weight:400}
/* Legal links sit left, copyright + credit right */
.ftr__bot{flex-wrap:nowrap;gap:1.5rem}
.ftr__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;flex:0 0 auto}
.ftr__copy{flex:1 1 auto;text-align:center;white-space:nowrap}
.ftr__credit{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35em;
  white-space:nowrap;color:rgba(255,255,255,.6)}
.ftr__credit a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s}
.ftr__credit a:hover{border-bottom-color:#fff}
.ftr__credit .heart{color:#E5527A;font-style:normal;
  display:inline-block;animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.28)}88%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ftr__credit .heart{animation:none}}
/* Stack once three zones no longer fit on one line */
@media (max-width:1100px){
  .ftr__bot{flex-wrap:wrap;justify-content:flex-start}
  .ftr__copy{flex:0 0 auto;text-align:left}
}

/* ---------- 12. Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.08s}
[data-reveal-d="2"]{transition-delay:.16s}
[data-reveal-d="3"]{transition-delay:.24s}
[data-reveal-d="4"]{transition-delay:.32s}
[data-reveal-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .frame:hover img{transform:none}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Scroll cue */
.cue{
  position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);
  z-index:3;display:grid;place-items:center;gap:.7rem;color:rgba(255,255,255,.7);
  font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.cue i{display:block;width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:cueMove 2.2s var(--ease) infinite}
@keyframes cueMove{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* Visually hidden but announced */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* WordPress admin bar offset — only ever visible to logged-in staff */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
}

/* Skip link */
.skip{
  position:absolute;left:1rem;top:-100px;z-index:300;background:var(--purple);color:#fff;
  padding:.85rem 1.25rem;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ---------- 13. Responsive ---------- */
@media (max-width:1180px){
  .gal{columns:3}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:44px}
  .igstrip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1024px){
  .nav,.hdr__act .icon-btn--search{display:none}
  .hdr__act .btn{display:none}
  .burger{display:grid}
  .dock{display:block}
  body{padding-bottom:0}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .menu-list{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .steps{flex-direction:column}
  .steps li{border-left:0;border-top:1px solid var(--hairline-soft)}
  .steps li:first-child{border-top:0}
  .layout-aside,.layout-aside--wide{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--section:clamp(60px,13vw,96px)}
  .hdr__in{min-height:72px}
  .hdr__logo img{height:40px}
  .hdr.is-scrolled .hdr__logo img{height:35px}
  .hero{min-height:92svh}
  .hero__body{padding-top:calc(96px + var(--gut))}
  .infobar__in{grid-template-columns:1fr}
  .infobar__cell{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:1.15rem 1rem}
  .infobar__cell:first-child{border-top:0}
  .gal{columns:2;column-gap:10px}
  .gal__item{margin-bottom:10px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .quote p{font-size:1.05rem}
  .field-row{grid-template-columns:1fr}
  .split__stack{grid-template-columns:1fr 1fr}
  .split__stack>:first-child{grid-row:auto;grid-column:1/-1}
  .igstrip{grid-template-columns:repeat(3,1fr)}
  .ftr__grid{grid-template-columns:1fr;gap:38px}
  .ftr__bot{flex-direction:column;align-items:flex-start;text-align:left}
  .cta-band .hero__cta,.hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  /* leave room for the floating dock */
  .ftr__bot{padding-bottom:calc(1.6rem + 76px)}
}
@media (max-width:420px){
  .menu-tabs{gap:1rem}
  .menu-tabs button{font-size:.656rem;letter-spacing:.14em}
  .dock a{font-size:.5625rem;letter-spacing:.08em}
}

/* Print */
@media print{
  .hdr,.dock,.mmenu,.cta-band,.lbox,.cue{display:none!important}
  body{background:#fff}
  .section{padding-block:24px}
}

/* ---------- Trustindex mount ----------
   The plugin injects .ti-widget (WordPress shortcode) or .trustindex-widget
   (loader.js embed). When either is present, drop our fallback notice. */
.grev__mount:has(.ti-widget) .grev__fallback,
.grev__mount:has(.trustindex-widget) .grev__fallback,
.grev__mount.has-widget .grev__fallback{display:none}
.grev__mount .ti-widget{margin-inline:auto}

/* ---------- Instagram feed mount ----------
   Same contract as the reviews mount: when a feed plugin injects its markup,
   our static cover row steps aside. */
.igfeed__mount:has(.sbi_feed) .igfeed__fallback,
.igfeed__mount:has(.eapps-instagram-feed) .igfeed__fallback,
.igfeed__mount:has([class*="instagram-feed"]) .igfeed__fallback,
.igfeed__mount.has-widget .igfeed__fallback{display:none}

/* ==========================================================================
   Cookie consent
   Bottom sheet, never a full-screen block. Three explicit choices so nobody
   has to accept tracking to read a service menu.
   ========================================================================== */
.cc{
  position:fixed;z-index:210;
  left:50%;transform:translateX(-50%) translateY(140%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(680px,calc(100% - 24px));
  background:rgba(251,249,246,.97);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--hairline);
  box-shadow:0 24px 60px -20px rgba(28,8,48,.42);
  padding:clamp(20px,2.4vw,28px);
  opacity:0;visibility:hidden;
  transition:transform .6s var(--ease),opacity .45s var(--ease),visibility .45s;
}
.cc.is-open{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
/* Sit above the mobile dock rather than on top of it */
@media (max-width:1024px){
  .cc{bottom:calc(88px + env(safe-area-inset-bottom))}
}
.cc__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.cc__head svg{width:20px;height:20px;stroke:var(--purple);fill:none;stroke-width:1.4;flex:0 0 auto}
.cc__head h2{
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--purple);
}
.cc p{font-size:.9375rem;line-height:1.7;color:var(--ink-soft)}
.cc p a{color:var(--purple);border-bottom:1px solid var(--purple-light)}
.cc__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.35rem}
.cc__acts .btn{flex:1 1 auto;min-width:150px}
.cc__detail{
  margin-top:1.1rem;border-top:1px solid var(--hairline-soft);padding-top:1.1rem;
}
.cc__row{
  display:flex;align-items:flex-start;gap:.8rem;padding:.7rem 0;
  border-bottom:1px solid var(--hairline-soft);
}
.cc__row:last-child{border-bottom:0}
.cc__row b{display:block;font-size:.9375rem;font-weight:500}
.cc__row span{font-size:.875rem;color:var(--ink-mute);line-height:1.6}
.cc__row input{
  width:20px;height:20px;flex:0 0 auto;margin-top:.15rem;accent-color:var(--purple);
}
.cc__row input:disabled{opacity:.55}
.cc__toggle{
  background:none;border:0;padding:.35rem 0;margin-top:.9rem;cursor:pointer;
  min-height:38px;display:inline-flex;align-items:center;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);border-bottom:1px solid var(--hairline);
}
.cc__toggle:hover{color:var(--purple);border-bottom-color:var(--purple)}
@media (max-width:520px){
  .cc__acts{flex-direction:column}
  .cc__acts .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cc{transition:opacity .2s}
  .cc,.cc.is-open{transform:translateX(-50%)}
}

/* A small persistent way back into the choice, for the legal pages */
.cc-reopen{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--purple);border-bottom:1px solid var(--purple-light);
  font:inherit;
}

/* ==========================================================================
   Credits blocks (Legal Notice)
   ========================================================================== */
.credit{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,28px);
  align-items:start;
  border:1px solid var(--hairline-soft);background:var(--white);
  padding:clamp(22px,2.6vw,32px);
}
.credit+.credit{margin-top:1.1rem}
.credit__logo{
  width:clamp(64px,8vw,88px);aspect-ratio:1;overflow:hidden;
  border:1px solid var(--hairline-soft);background:var(--greige);
}
.credit__logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.credit__role{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);margin-bottom:.4rem;
}
.credit h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-bottom:.2rem}
.credit__meta{font-size:.875rem;color:var(--ink-mute);margin-bottom:.8rem}
.credit p{font-size:.9688rem;line-height:1.75;color:var(--ink-soft)}
.credit p+p{margin-top:.6rem}
.credit a{color:var(--purple);border-bottom:1px solid var(--purple-light)}
@media (max-width:560px){
  .credit{grid-template-columns:1fr}
}

/* Definition-style rows used for identity blocks */
.deflist{border-top:1px solid var(--hairline-soft)}
.deflist>div{
  display:grid;grid-template-columns:minmax(180px,32%) 1fr;gap:.4rem 1.5rem;
  padding:.95rem 0;border-bottom:1px solid var(--hairline-soft);
}
.deflist dt,.deflist>div>:first-child{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
}
.deflist dd,.deflist>div>:last-child{margin:0;font-size:.9688rem;color:var(--ink)}
.deflist a{color:var(--purple);border-bottom:1px solid var(--purple-light)}
@media (max-width:640px){
  .deflist>div{grid-template-columns:1fr;gap:.25rem}
}

/* ==========================================================================
   Booking — live estimate, recap, WhatsApp preview
   ========================================================================== */
.est{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  border:1px solid var(--purple-light);background:var(--lilac-soft);
  padding:1rem 1.25rem;margin-top:1.4rem;
}
.est__label{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);
}
.est__val{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--ink)}
.est__meta{font-size:.875rem;color:var(--ink-mute)}
.est__note{
  flex:1 0 100%;font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--purple-deep);
}
/* Compact restatement above each price list */
.pricenote--sm{
  font-size:.8125rem;line-height:1.6;padding:.7rem 1rem;align-items:center;
}
.pricenote--sm svg{width:17px;height:17px;margin-top:0}

/* Sticky estimate on mobile so the number follows you down the form */
@media (max-width:1024px){
  .est{position:sticky;top:calc(72px + 8px);z-index:5;
    box-shadow:0 8px 24px -14px rgba(28,8,48,.3)}
}

.chip span small{
  display:block;font-size:.75rem;font-weight:400;color:var(--ink-mute);
  margin-top:.15rem;letter-spacing:0;
}
.chip input:checked+span small{color:var(--purple-light)}
.chip span{flex-direction:column;gap:.1rem;line-height:1.35;padding:.75rem 1rem}

.wa-preview{
  margin-top:1rem;padding:1.15rem 1.35rem;
  background:#0F1A14;color:#E8F5ED;border:1px solid rgba(37,211,102,.35);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow-y:auto;
}
.btn--wa{--bg:#25D366;--fg:#0B2818;--bd:#25D366}
.btn--wa::after{background:#1EBE5A}
.btn--wa:hover{color:#0B2818;border-color:#1EBE5A}

/* Astra prints its own scroll-to-top button on wp_footer. functions.php takes
   it off our templates; this is the safety net in case a plugin re-adds it. */
body.joyce-page #ast-scroll-top,
body.joyce-page .ast-scroll-to-top-right,
body.joyce-page .ast-scroll-top-icon{display:none !important}