/* ═══════════════════════════════════════════════════════════
   ALTERED BALANCE — booking + contact
   Restyled to match alteredbalance.co.uk exactly. Tokens, type scale and the
   header/footer are lifted from the live site so moving from the site to the
   booking flow doesn't look like landing on a different website.
   Class names are deliberately unchanged from the previous skin, so
   index.html, contact.html and v3.js keep working untouched.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:        #1a1b1b;   /* page */
  --paper:      #edeef0;   /* primary text + primary button */
  --mist:       #a8abaf;   /* secondary text, hairlines on light */
  --bluegrey:   #4a6670;   /* hover / accent */
  --bluegrey-dark:#354c54;
  --panel:      #212223;   /* cards, panels */
  --panel-2:    #1f2021;   /* inputs, pressed states */
  --line:       rgba(237,238,240,.14);
  --serif:      'Playfair Display',Georgia,serif;
  --sans:       Inter,'DM Sans',Arial,sans-serif;
  --stone:      #a8abaf;   /* alias: index.html still uses var(--stone) inline */
  --pad:        max(6vw,1.5rem);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--paper);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 1rem}
h1{font-size:clamp(2.4rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
h3{font-size:1.35rem}
p{margin:0 0 1rem}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.pad{padding:clamp(3.5rem,7vw,6rem) 0}
.narrow{max-width:720px}
.lead{font-size:1.05rem;line-height:1.7;color:rgba(237,238,240,.78)}

/* ── Eyebrows / small caps labels ── */
.ey,.step-label,.nlabel,.v3-foot-col h5{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mist);display:block;margin:0 0 1rem}

/* ── Header — mirrors the site's .site-header ── */
.v3-top{background:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:40}
.v3-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:1.5rem var(--pad) 1.25rem}
.v3-left{justify-self:start}
.member-login{display:inline-flex;align-items:center;gap:.55rem;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.member-login:hover{color:var(--paper)}
.member-login svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.v3-brand{justify-self:center;display:block}
.v3-brand img{height:64px;width:auto}
.v3-actions{justify-self:end;display:flex;align-items:center;gap:1rem}
.v3-pill{display:inline-flex;align-items:center;justify-content:center;background:#c9c6f4;color:#141527;
  border-radius:999px;padding:.85rem 1.6rem;font-size:.78rem;font-weight:700;
  transition:background .2s,transform .2s}
.v3-pill:hover{background:#dbd9f8;transform:translateY(-1px)}
.v3-nav2{border-top:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap;
  gap:2.4rem;padding:1.1rem var(--pad)}
.v3-link{font-size:.86rem;color:rgba(237,238,240,.72);padding-bottom:.3rem;
  border-bottom:1.5px solid transparent}
.v3-link:hover{color:var(--paper)}
.v3-link.active{color:var(--paper);border-bottom-color:var(--paper)}
.v3-ham{display:none;background:none;border:0;color:var(--paper);cursor:pointer}
.v3-links{display:contents}

@media(max-width:860px){
  .v3-inner{grid-template-columns:auto 1fr auto;padding:1rem var(--pad)}
  .member-login span{display:none}
  .v3-brand img{height:46px}
  .v3-pill{padding:.7rem 1.1rem;font-size:.7rem}
  .v3-nav2{gap:1.1rem;justify-content:flex-start;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;padding:.85rem var(--pad)}
  .v3-nav2::-webkit-scrollbar{display:none}
}

/* ── Page hero ── */
.page-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.page-hero h1{margin-bottom:1rem}
.page-hero .lead{max-width:52ch}

/* ── Buttons — matches the site's .button ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3.15rem;padding:.85rem 1.6rem;
  font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:0;border:1px solid var(--paper);
  background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover:not(:disabled){background:var(--bluegrey);color:var(--paper);
  border-color:var(--bluegrey);transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-lg{min-height:3.5rem;padding:1rem 2rem}
.btn-sm{min-height:2.5rem;padding:.55rem 1.1rem;font-size:.7rem}
.btn-outline{background:transparent;color:var(--paper);border-color:var(--mist)}
.btn-outline:hover:not(:disabled){background:var(--paper);color:var(--ink);border-color:var(--paper)}
.arr{width:15px;height:15px}

/* ── Booking layout ── */
.book-2col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem;align-items:start}
@media(max-width:960px){.book-2col{grid-template-columns:1fr;gap:2rem}}

/* Service cards */
.svc-card{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);padding:1.4rem 1.5rem;margin-bottom:.85rem;
  color:var(--paper);font-family:var(--sans);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.svc-card:hover{border-color:var(--mist);transform:translateY(-2px)}
.svc-card.sel{border-color:var(--paper);background:var(--panel-2);
  box-shadow:inset 3px 0 0 0 var(--paper)}
.sc-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sc-name{font-family:var(--serif);font-size:1.28rem;font-weight:500;line-height:1.2}
.sc-price{font-size:.9rem;font-weight:700;white-space:nowrap}
.sc-dur{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-top:.5rem}
.sc-desc{font-size:.92rem;line-height:1.6;color:rgba(237,238,240,.72);margin-top:.7rem}
.paid-note{font-size:.82rem;color:var(--mist);margin-top:1rem;line-height:1.55}

/* Calendar */
.book-cal-panel{background:var(--panel);border:1px solid var(--line);padding:1.6rem}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.cal-nav .m{font-family:var(--serif);font-size:1.15rem}
.cal-nav button{background:transparent;border:1px solid var(--line);color:var(--paper);
  width:2.2rem;height:2.2rem;cursor:pointer;font-size:1rem;line-height:1;
  transition:border-color .2s,background .2s}
.cal-nav button:hover:not(:disabled){border-color:var(--paper);background:rgba(237,238,240,.06)}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
/* .cal-dow is the ROW of seven day labels, not a single cell — it needs the
   same 7-column grid as .cal-grid or the labels run together. */
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin-bottom:.3rem}
.cal-dow span{text-align:center;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);padding:.4rem 0}
/* A day is only bookable when the script marks it .av; .sel is the chosen one.
   Everything else stays dimmed and inert. */
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:rgba(237,238,240,.24);
  font-family:var(--sans);font-size:.9rem;cursor:default;
  transition:background .15s,border-color .15s,color .15s}
.cal-cell.av{color:var(--paper);cursor:pointer;border-color:var(--line)}
.cal-cell.av:hover{border-color:var(--paper);background:rgba(237,238,240,.07)}
.cal-cell.sel{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:700}
.book-divider{height:1px;background:var(--line);margin:1.6rem 0}

/* Time slots */
.nslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.5rem}
.nslot{background:transparent;border:1px solid var(--line);color:var(--paper);
  padding:.7rem .5rem;font-family:var(--sans);font-size:.86rem;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.nslot:hover{border-color:var(--paper);background:rgba(237,238,240,.07)}
.nslot.sel{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:700}

/* ── Forms — booking and contact share these ── */
.nbk-field,.fld{margin-bottom:1.1rem}
.fld2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:640px){.fld2{grid-template-columns:1fr}}
.nbk-field label,.fld label{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
input[type=text],input[type=email],input[type=tel],input:not([type]),select,textarea{
  width:100%;padding:.85rem .95rem;background:var(--panel-2);border:1px solid var(--line);
  border-radius:0;color:var(--paper);font-family:var(--sans);font-size:.95rem;line-height:1.5;
  transition:border-color .2s,background .2s}
input::placeholder,textarea::placeholder{color:rgba(237,238,240,.34)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--paper);background:var(--panel)}
select{appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),
                   linear-gradient(135deg,var(--mist) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{background:var(--panel);color:var(--paper)}
textarea{min-height:8rem;resize:vertical}
.nconsent{display:flex;align-items:flex-start;gap:.65rem;font-size:.86rem;line-height:1.55;
  color:rgba(237,238,240,.74);text-transform:none;letter-spacing:0;font-weight:400;margin:1.2rem 0}
.nconsent input[type=checkbox]{width:1.05rem;height:1.05rem;margin-top:.16rem;flex:none;
  accent-color:var(--paper)}
.nbk-err{color:#f2a09a;font-size:.88rem;margin:.7rem 0;line-height:1.5}
/* The booking confirmation panel. It is revealed with style.display='block'
   once a booking succeeds — without this it renders as an empty box with a
   lone tick sitting under the calendar. The old skin hid it in inline CSS. */
.nbk-ok{display:none;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--bluegrey);padding:1.4rem 1.5rem}
.nbk-ok .tk svg{stroke:var(--paper)}
.tk{font-family:var(--serif);font-size:1.25rem;margin-bottom:.5rem}

/* ── Contact page ── */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3rem;align-items:start}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:2rem}}
.talk-card,.audit-alt{background:var(--panel);border:1px solid var(--line);padding:1.8rem}
.talk-card h3,.audit-alt h3{margin-bottom:.7rem}
.talk-card p,.audit-alt p{font-size:.95rem;color:rgba(237,238,240,.74);line-height:1.65}
.re-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.re-list li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.6;
  color:rgba(237,238,240,.78)}
.re-list li::before{content:"";position:absolute;left:0;top:.65rem;width:8px;height:1.5px;
  background:var(--mist)}

/* ── Reveal on scroll (v3.js toggles .inview) ── */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.09s}
.rev.d2{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .btn:hover,.svc-card:hover,.v3-pill:hover{transform:none}
}

/* ── Toast ── */
/* Hidden until the form handler adds .show — the old skin's hidden state was in
   the inline CSS that got replaced, so without this it sat on screen permanently. */
.toast{display:none;position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:var(--paper);color:var(--ink);padding:.9rem 1.4rem;font-size:.85rem;
  font-weight:600;z-index:90;max-width:min(92vw,34rem);text-align:center}
.toast.show{display:block}

/* ── Footer — mirrors the site's .site-footer ── */
.v3-foot{background:var(--ink);border-top:1px solid var(--line);padding:4rem var(--pad) 2rem;
  margin-top:2rem}
.v3-foot-main{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:2.5rem}
.v3-foot-brand img{height:56px;width:auto;margin-bottom:1rem}
.v3-foot-brand p{font-size:.92rem;color:rgba(237,238,240,.7);max-width:34ch;line-height:1.65}
.v3-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.v3-foot-col a{font-size:.92rem;color:rgba(237,238,240,.78)}
.v3-foot-col a:hover{color:var(--paper)}
.v3-foot-cta{display:contents}
.v3-foot-bottom{max-width:1180px;margin:0 auto;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--mist)}
.v3-foot-bottom a{color:var(--mist)}
.v3-foot-bottom a:hover{color:var(--paper)}
@media(max-width:820px){.v3-foot-main{grid-template-columns:1fr;gap:2rem}}

/* ── Carried over from the previous skin so no element is left unstyled ── */
.btn-primary,.btn-sig{/* same as .btn — kept so existing markup keeps working */}
.inner{max-width:1180px;margin:0 auto}
.cal{width:100%}
.audit-form{background:var(--panel);border:1px solid var(--line);padding:1.8rem}

/* ── Phone ──
   No overflow to fix here, but the tap targets were under the 44px minimum and
   the inputs were 15.2px, which makes iOS zoom the whole page the moment a
   field is focused. 16px is the threshold that stops that. */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px !important; }

  .v3-link, .member-login, .v3-foot-col a, .v3-foot-bottom a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .btn { min-height: 48px; width: 100%; }
  .v3-pill { min-height: 44px; }

  /* Calendar: bigger cells and arrows, so a thumb can hit a date */
  .cal-nav button { width: 44px; height: 44px; font-size: 1.15rem; }
  .cal-cell { font-size: 1rem; }
  .nslots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .nslot { min-height: 44px; }
  .book-cal-panel { padding: 1.1rem; }

  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .ct-grid, .book-2col { grid-template-columns: 1fr; }
  .fld2 { grid-template-columns: 1fr; gap: 0; }
  .talk-card, .audit-alt, .audit-form, .nbk-ok { padding: 1.3rem 1.15rem; }
  body { overflow-x: hidden; }
}