/* ============================================================
   Bloom Room: theme. Rose quartz, aubergine ink and one emerald.
   Bodoni Moda for the voice (with its italic), Manrope to read.
   Soft arches and pill shapes; the hair colour scale is the one
   bit of real colour in the page apart from the photos.
   ============================================================ */
@layer theme {
:root{
  --canvas:#F3E7EC; --surface:#FAF3F6; --ink:#2A1420; --muted:#6B5260; --line:#E2CBD5; --line-strong:#B896A6;
  --primary:#2A1420; --primary-hover:#43233A; --on-primary:#FAF3F6;
  --accent:#11795A; --accent-hover:#0E6B4F; --on-accent:#FAF3F6; --accent-text:#0E6B4F; --accent-on-dark:#8FE0C2;
  --focus:#0E6B4F; --focus-ring:rgb(14 107 79/.2); --error:#A3201B; --ph-bg:#E6D2DB;
  --header-bg:#F3E7EC; --footer-bg:#2A1420; --on-footer:#EBDCE3; --callbar-bg:#2A1420;
  --font-display:'Bodoni Moda',Didot,Georgia,serif; --font-body:'Manrope',system-ui,sans-serif;
  --radius:14px; --radius-sm:10px; --radius-lg:24px; --radius-btn:999px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1420' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:500;letter-spacing:-.015em}
h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02}
h3{font-size:1.5rem}
em{font-style:italic}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem}
.btn{font-weight:700}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:500;font-size:1.55rem}
.brand em{color:var(--accent-text)}
.brand-mark{background:var(--ink);color:var(--canvas);border-radius:50%}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .nav-mobile-cta{display:none} }

/* ---------- hero with its rotating word ---------- */
.hero{padding-block:clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.hero-copy{display:grid;gap:1.5rem;justify-items:start}
.hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.95}
.rotor{display:inline-grid;vertical-align:top;overflow:hidden;padding:0 .08em .12em;color:var(--accent-text)}
.rotor > *,.rotor-words > span{grid-area:1/1}
.rotor-words{display:none}
@media (prefers-reduced-motion:no-preference){
  .rotor-still{visibility:hidden}
  .rotor-words{display:grid}
  .rotor-words span{transform:translateY(110%);animation:rotor 9s var(--ease-out) infinite;animation-delay:calc(var(--i) * 3s)}
}
@keyframes rotor{0%{transform:translateY(110%)}6%,30%{transform:translateY(0)}36%,100%{transform:translateY(-110%)}}
.hero-lede{font-size:1.15rem;color:var(--muted);max-width:30rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-photos{display:grid;grid-template-columns:1fr .55fr;gap:1rem;align-items:end}
.hp-1{border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
.hp-2{border-radius:var(--radius-lg) var(--radius-lg) 999px 999px;margin-bottom:3rem}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem} }

/* ---------- prices ---------- */
.prices{background:var(--surface);border-block:1px solid var(--line)}
.prices-grid{display:grid;gap:2rem}
.prices-grid > *{min-width:0}
.prices-head{display:grid;gap:.9rem;align-content:start}
.prices-head > p{color:var(--muted);font-size:1.08rem}
.prices-head > .late{color:var(--canvas)}
.late{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;padding:.45rem .9rem;border-radius:999px;background:var(--ink);color:var(--canvas);font-weight:700;font-size:.9rem}
.tab{border-color:var(--line-strong)}
.tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.panels{display:grid;gap:2rem}
.tabs-on .panels{gap:0}
.tab-panel h3,.tab-panel h2{font-size:1.7rem;margin:1.25rem 0 .5rem}
.tabs-on .tab-panel h3,.tabs-on .tab-panel h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.price-list li{padding:1.05rem 0;border-bottom:1px solid var(--line)}
.pl-top{display:flex;align-items:baseline;gap:.6rem}
.pl-name{font-family:var(--font-display);font-size:1.3rem}
.pl-dots{flex:1;border-bottom:1.5px dotted var(--line-strong);transform:translateY(-.3em)}
.pl-price{font-weight:800;white-space:nowrap}
.price-list p{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.15rem;color:var(--muted);font-size:.95rem}
.pl-mins{font-weight:700;color:var(--accent-text)}
@media (min-width:900px){ .prices-grid{grid-template-columns:.75fr 1.25fr;gap:4rem} .prices-head{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- shade finder ---------- */
.shade-head{display:grid;gap:.8rem;max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.shade-head p{font-size:1.1rem;color:var(--muted)}
.shade-grid{display:grid;gap:2rem;align-items:start}
.shade-form{display:grid;gap:1.5rem}
.shade-form fieldset{border:0;padding:0}
.shade-form legend{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.7rem}
.lvls{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.lvl{position:relative}
.lvl input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.lvl span{display:grid;justify-items:center;gap:.3rem;padding:.4rem .2rem .55rem;border-radius:var(--radius);border:1.5px solid transparent;
  transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.lvl span::before{content:"";width:100%;max-width:3.2rem;aspect-ratio:2/3;border-radius:999px 999px 8px 8px;
  background:linear-gradient(100deg,var(--c) 0 30%,color-mix(in srgb,var(--c) 75%,var(--surface)) 45%,var(--c) 60%);box-shadow:inset 0 0 0 1px rgb(42 20 32/.15)}
.lvl b{font-weight:800;font-size:.95rem}
.lvl i{font-style:normal;font-size:.7rem;line-height:1.15;text-align:center;color:var(--muted)}
@media (hover:hover){ .lvl:hover span{background:var(--surface)} }
.lvl input:checked + span{border-color:var(--ink);background:var(--surface)}
.lvl input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.lvl input:active + span{transform:scale(.96)}
.shade-out{display:grid;gap:.9rem;justify-items:start;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--ink);color:var(--on-primary)}
.journey{display:flex;align-items:center;gap:.75rem;width:100%}
.j-now,.j-want{flex:1;height:5.5rem;border-radius:999px 999px 14px 14px;background:var(--c,#553A28);transition:background-color var(--dur-slow) linear;
  box-shadow:inset 0 0 0 2px rgb(250 243 246/.15)}
.j-arrow .ico{width:1.6rem;height:1.6rem}
.shade-lift{font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05}
.shade-svc{font-size:1.15rem}
.shade-svc strong{margin-left:.35rem;color:var(--accent-on-dark)}
.shade-why{opacity:.85;max-width:34rem}
.shade-extras{display:grid;gap:.45rem}
.shade-extras li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem}
.shade-extras li::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.45rem;border-radius:50%;background:var(--accent-on-dark)}
.shade-note{font-size:.85rem;opacity:.7}
.shade-out .btn--accent{background:var(--canvas);color:var(--ink)}
@media (min-width:1000px){ .shade-grid{grid-template-columns:1.1fr .9fr;gap:3rem} .shade-out{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- brunette to balayage ---------- */
.colour{background:var(--surface);border-block:1px solid var(--line)}
.colour-grid{display:grid;gap:2.5rem;align-items:center}
.colour-copy{display:grid;gap:1rem}
.colour-copy p{font-size:1.1rem;color:var(--muted);max-width:30rem}
.ba{aspect-ratio:1/1;max-width:30rem;border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
.ba > .ba-layer,.ba-before{height:100%}
.strands{width:100%;height:100%}
.strand-bg{fill:var(--ph-bg)}
.strand{fill:none;stroke-width:var(--w);stroke-linecap:round}
.ba-line{width:2px;margin-left:-1px;background:var(--surface)}
.ba-knob{position:absolute;top:50%;left:var(--pos);display:grid;place-items:center;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);pointer-events:none;box-shadow:0 6px 18px rgb(42 20 32/.3)}
.ba-range:focus-visible ~ .ba-knob{outline:3px solid var(--focus);outline-offset:3px}
.ba-tag{bottom:1rem;border-radius:999px;background:var(--surface);color:var(--ink)}
.ba-tag--before{left:1rem}
.ba-tag--after{right:1rem}
.ba-figure figcaption{margin-top:.75rem;color:var(--muted);font-size:.9rem}
@media (min-width:900px){ .colour-grid{grid-template-columns:.9fr 1.1fr;gap:4rem} .ba-figure{justify-self:center;width:100%;max-width:30rem} }

/* ---------- team flip cards ---------- */
.flips{display:grid;gap:1.25rem}
.flip{perspective:1400px}
.flip-inner{position:relative;display:grid}
.flip-front,.flip-back{grid-area:1/1;border-radius:var(--radius-lg);overflow:hidden}
.flip-front{position:relative;background:var(--surface)}
.flip-front .ph{border-radius:0}
.flip-cap{padding:1rem 1.25rem 1.25rem}
.flip-cap h3,.flip-cap h2{font-size:1.6rem}
.flip-cap p{color:var(--muted)}
.flip-btn{position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  transition:transform var(--dur-fast) var(--ease-out)}
.flip-btn:active{transform:scale(.92)}
.flip-back{display:grid;gap:1rem;align-content:center;justify-items:start;padding:2rem;background:var(--ink);color:var(--on-primary)}
.fb-title{font-family:var(--font-display);font-size:1.6rem}
.flip-back ul{display:grid;gap:.5rem}
.flip-back li{font-size:1.1rem;font-weight:600}
.flip-back li::before{content:"\2726";margin-right:.6rem;color:var(--accent-on-dark)}
.flip-back-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;opacity:.85}
.flip-back-btn .ico{width:1rem;height:1rem}
/* without the script both sides are simply shown */
.flip-back{margin-top:0}
.js .flip-front,.js .flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.js .flip-back{transform:rotateY(180deg);visibility:hidden}
.js .flip-inner{transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.js .flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.js .flip.is-flipped .flip-back{visibility:visible}
.js .flip.is-flipped .flip-front .flip-btn{visibility:hidden}
html:not(.js) .flip-inner{gap:.75rem}
html:not(.js) .flip-back{grid-area:auto}
html:not(.js) .flip-btn,html:not(.js) .flip-back-btn{display:none}
@media (prefers-reduced-motion:reduce){ .js .flip-inner{transition:none} }
@media (min-width:760px){ .flips{grid-template-columns:repeat(3,1fr)} .flip:nth-child(2){margin-top:2.5rem} }

/* ---------- reviews ---------- */
.reviews{border-top:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.75rem;background:var(--surface);border-radius:var(--radius-lg)}
.rv-card blockquote p{font-family:var(--font-display);font-size:1.25rem;line-height:1.35}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink)}

/* ---------- the one emerald band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.12;max-width:54rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-accent)}

/* ---------- booking ---------- */
.book{background:var(--surface);border-top:1px solid var(--line)}
.book-grid{display:grid;gap:2rem;align-items:start}
.book-lede{margin:.6rem 0 1.5rem;color:var(--muted);font-size:1.1rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border-radius:var(--radius-lg)}
.form-row{display:grid;gap:1.25rem}
.bk-step{border:0;padding:0;display:grid;gap:1rem}
.bk-step legend{display:grid;font-family:var(--font-display);font-size:1.6rem;margin-bottom:.5rem}
.bk-step legend small{font-family:var(--font-body);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.stepped .bk-step.enter{animation:step-in .45s var(--ease-out)}
@media (prefers-reduced-motion:reduce){ .stepped .bk-step.enter{animation:none} }
@keyframes step-in{from{transform:translateX(16px)}}
.bk-step:focus{outline:none}
.bk-opts{display:grid;gap:.5rem}
.bk-opt{position:relative}
.bk-opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.bk-opt span{display:grid;grid-template-columns:1fr auto;gap:0 1rem;align-items:center;min-height:56px;padding:.7rem 1rem;border-radius:var(--radius);border:1.5px solid var(--line-strong);background:var(--surface);
  transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.bk-opt small{grid-column:1;color:var(--muted)}
.bk-opt em{grid-column:2;grid-row:1 / span 2;font-style:normal;font-weight:800}
.bk-opt--who span{grid-template-columns:auto 1fr}
.bk-opt--who i{grid-row:span 2;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink);color:var(--canvas);font-style:normal;font-weight:800}
.bk-opt--who small{grid-column:2}
@media (hover:hover){ .bk-opt:hover span{border-color:var(--ink)} }
.bk-opt input:checked + span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}
.bk-opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.bk-opt input:active + span{transform:scale(.99)}
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bk-progress{height:6px;border-radius:999px;background:var(--line)}
.bk-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,.25));transition:transform var(--dur-mid) var(--ease-out)}
.bk-nav{display:flex;justify-content:space-between;gap:.75rem}
.hint{margin-top:-.6rem;font-size:.9rem;color:var(--muted)}
.bk-summary{padding:1.5rem;border-radius:var(--radius-lg);background:var(--ink);color:var(--on-primary)}
.bk-sum-title{font-family:var(--font-display);font-size:1.5rem;margin-bottom:1rem}
.bk-summary dl{display:grid;gap:.8rem}
.bk-summary dt{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bk-summary dd{margin:0;font-weight:600}
.bk-total{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgb(250 243 246/.2);display:flex;justify-content:space-between;align-items:baseline}
.bk-total strong{font-family:var(--font-display);font-size:2rem}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} .bk-opts{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .book-grid{grid-template-columns:1.4fr .6fr;gap:3rem} .bk-summary{position:sticky;top:calc(var(--header-h) + 2rem);margin-top:6rem} }

/* ---------- vouchers ---------- */
.vouchers{padding-block:clamp(3.5rem,8vw,5.5rem);background:var(--ink);color:var(--on-primary)}
.vouchers h2{color:var(--on-primary)}
.v-inner{display:grid;gap:2rem;align-items:center}
.v-inner p{margin:.75rem 0 1.25rem;opacity:.85;font-size:1.1rem;max-width:30rem}
.vouchers .btn--ghost{color:var(--on-primary)}
@media (hover:hover){ .vouchers .btn--ghost:hover{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)} }
.v-card{display:grid;align-content:space-between;width:min(100%,20rem);aspect-ratio:1.6;padding:1.25rem 1.4rem;border-radius:18px;background:linear-gradient(135deg,var(--canvas),var(--line-strong));color:var(--ink);
  transform:rotate(-4deg);box-shadow:0 24px 40px -18px rgb(0 0 0/.6)}
.v-card span{font-family:var(--font-display);font-size:1.8rem}
.v-card em{color:var(--accent-text)}
.v-card small{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
@media (min-width:800px){ .v-inner{grid-template-columns:auto 1fr;gap:4rem} }

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- visit ---------- */
.visit{border-top:1px solid var(--line)}
.visit-grid{display:grid;gap:2.5rem}
.visit-copy{display:grid;gap:1.5rem;align-content:start}
.hours{width:100%}
.hours th,.hours td{padding:.85rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.hours td{text-align:right;font-weight:700}
.hours tr.is-today th,.hours tr.is-today td{color:var(--accent-text);font-weight:800}
.today-tag{display:inline-flex;margin-left:.4rem;padding:.1rem .55rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:800;vertical-align:.1em}
.contact-list{display:grid;gap:.8rem}
.contact-list li{display:flex;gap:.6rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.visit-side{display:grid;gap:1rem}
.visit-side .ph{border-radius:var(--radius-lg)}
.map-block{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line-strong);min-height:16rem}
.map-face{min-height:16rem}
.map-title{display:grid;gap:.25rem;max-width:26rem}
.map-title strong{font-family:var(--font-display);font-weight:500;font-size:1.5rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.map-note{font-size:.88rem;color:var(--muted)}
@media (min-width:900px){ .visit-grid{grid-template-columns:.8fr 1.2fr;gap:4rem} }

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{font-family:var(--font-display);font-size:1.8rem;margin-bottom:.5rem}
.foot-mark em{color:var(--accent-on-dark)}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .alt{color:var(--on-primary)}
}