/* ==========================================================================
   Tony Kosoko Physiotherapy
   Palette: charcoal / white / teal
   ========================================================================== */

:root{
  /* charcoal */
  --charcoal:#1B1F21;
  --charcoal-2:#24292C;
  --near-black:#131617;
  --ink:#1B1F21;
  --ink-soft:#5A6469;
  /* white */
  --white:#FFFFFF;
  --off-white:#F5F7F7;
  --line:#E2E7E7;
  /* teal */
  --teal:#0B6E66;
  --teal-deep:#08514C;
  --teal-bright:#45D6C4;
  --teal-wash:#EAF3F1;

  --radius:999px;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--white);background:var(--charcoal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px;border-radius:6px}

/* ---------------- section token system ---------------- */
.section{
  --sec-bg:var(--charcoal);--sec-ink:#fff;--sec-body:rgba(232,238,238,.72);
  --sec-card:var(--charcoal-2);--sec-border:rgba(255,255,255,.10);--kicker:var(--teal-bright);
  background:var(--sec-bg);color:var(--sec-body);
  padding-block:clamp(64px,9vw,120px);position:relative;scroll-margin-top:96px;
}
.section--light{--sec-bg:var(--off-white);--sec-ink:var(--ink);--sec-body:var(--ink-soft);--sec-card:var(--white);--sec-border:var(--line);--kicker:var(--teal)}
.section--teal{--sec-bg:var(--teal-deep);--sec-ink:#fff;--sec-body:rgba(255,255,255,.9);--sec-border:rgba(255,255,255,.32);--kicker:rgba(255,255,255,.88);padding-block:clamp(40px,6vw,66px)}
.section--cta{--sec-bg:linear-gradient(150deg,#07514B 0%,#0F7E74 45%,#12907F 70%,#08574F 100%);--sec-ink:#fff;--sec-body:rgba(255,255,255,.86);--kicker:rgba(255,255,255,.7);position:relative;overflow:hidden}
/* a soft light from the upper right, and a vignette, so the band has some
   depth to it instead of reading as one flat sweep of colour */
.section--cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.16),transparent 55%),
             radial-gradient(100% 100% at 50% 120%,rgba(0,0,0,.28),transparent 60%)}
.section--cta > *{position:relative;z-index:1}
.section--tight{padding-block:clamp(48px,6vw,80px)}
/* The section directly after the hero sits under the accreditation band, so it
   needs less breathing room above it than a section following a full section. */
.hero + .section{padding-top:clamp(43px,6.12vw,82px)}

.kicker{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--kicker);font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6}
.kicker.center{justify-content:center}
/* centred kickers get a matching rule on the right, otherwise the single
   left-hand line throws the whole thing off axis */
.kicker.center::after{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6}
.h2{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(1.9rem,3.7vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--sec-ink);text-wrap:balance}
.h3{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.15;color:var(--sec-ink)}
.lead{color:var(--sec-body);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;margin:18px 0 0;max-width:60ch}
.section p{color:var(--sec-body)}
.center-col{max-width:70ch;margin-inline:auto;text-align:center}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"Work Sans",sans-serif;font-weight:600;font-size:15px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;white-space:nowrap;padding:13px 26px;transition:transform .15s ease,background .2s,box-shadow .2s,color .2s}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--teal:hover{background:#0d7f75;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(11,110,102,.85)}
.btn--bright{background:var(--teal-bright);color:#0A2320;border-color:var(--teal-bright)}
.btn--bright:hover{background:#5ee2d1;transform:translateY(-1px)}
.btn--dark{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.btn--light{background:#fff;color:var(--teal-deep);border-color:#fff}
.btn--light:hover{background:#EAF3F1;transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.btn--dark:hover{background:#2b3134;transform:translateY(-1px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.18)}
.btn--outline{background:transparent;color:var(--sec-ink);border-color:color-mix(in srgb,var(--sec-ink) 40%,transparent)}
.btn--outline:hover{background:color-mix(in srgb,var(--sec-ink) 8%,transparent)}
.btn--lg{padding:16px 32px;font-size:16px}
.arrowlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--kicker);font-size:15px}
.arrowlink svg{width:16px;height:16px;transition:transform .2s}
.arrowlink:hover svg{transform:translateX(4px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ---------------- floating pill header ---------------- */
.site-header{
  --hd-fg:#fff;--hd-muted:rgba(255,255,255,.88);--hd-accent:var(--teal-bright);
  --hd-pill:rgba(255,255,255,.14);--hd-pill-bd:rgba(255,255,255,.32);
  /* Docked to the top of the page, not floating over it, so hero copy scrolls
     away cleanly instead of sliding underneath a transparent bar. It only
     lifts off and becomes fixed once past the hero, as the white pill. */
  position:absolute;top:0;left:0;right:0;z-index:60;
  padding:14px clamp(12px,3vw,28px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
}
.site-header.is-hidden{opacity:0;transform:translateY(-10px);pointer-events:none}
/* used for one frame while the header switches between docked and floating */
.site-header.no-anim{transition:none}
/* while it is leaving, do not let the pill fade to white behind it: that
   flash of a header appearing as it slides away is what reads as glitchy */
.site-header.is-hidden .header-inner{transition:none}
.site-header.is-solid{position:fixed;--hd-fg:var(--ink);--hd-muted:#5A6469;--hd-accent:var(--teal);--hd-pill:#F1F4F4;--hd-pill-bd:transparent}
.header-inner{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:9px 10px 9px 20px;border-radius:var(--radius);
  background:transparent;box-shadow:none;
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-solid .header-inner{background:var(--white);box-shadow:0 12px 34px -14px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{width:auto;height:36px}
.mark-dark{display:none}
.is-solid .mark-light{display:none}
.is-solid .mark-dark{display:block}
.brand__name{line-height:1;display:flex;flex-direction:column;gap:3px}
.brand__name b{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:19px;letter-spacing:.2px;color:var(--hd-fg);transition:color .3s}
.brand__name span{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--hd-accent);transition:color .3s}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links > a,.nav__links > .has-sub > button{
  font-family:"Work Sans",sans-serif;font-size:15px;color:var(--hd-fg);position:relative;padding-block:6px;
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .3s;
}
.nav__links > a::after,.nav__links > .has-sub > button::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--hd-accent);transition:width .25s}
.nav__links > a:hover::after,.nav__links > .has-sub > button:hover::after,.nav__links > a[aria-current="page"]::after{width:100%}
.nav__links .chev{width:12px;height:12px;opacity:.7;transition:transform .2s}
.has-sub{position:relative}
.has-sub[aria-expanded="true"] .chev,.has-sub:hover .chev{transform:rotate(180deg)}
.subnav{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:310px;background:var(--white);border-radius:18px;padding:10px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%);transition:opacity .22s ease,transform .22s ease,visibility 0s}
.subnav a{display:block;padding:12px 14px;border-radius:12px;color:var(--ink)}
.subnav a:hover{background:var(--teal-wash)}
.subnav strong{display:block;font-weight:600;font-size:14.5px}
.subnav small{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.nav__right{display:flex;align-items:center;gap:10px}
.phone{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--hd-fg);white-space:nowrap;background:var(--hd-pill);border:1px solid var(--hd-pill-bd);padding:9px 17px;border-radius:var(--radius);transition:background .3s,color .3s,border-color .3s}
.phone svg{width:15px;height:15px;opacity:.95}
.header-inner .btn{padding:11px 24px}
.nav__toggle{display:none;width:42px;height:42px;border-radius:var(--radius);background:var(--hd-pill);border:1px solid var(--hd-pill-bd);color:var(--hd-fg);cursor:pointer;align-items:center;justify-content:center;transition:background .3s,color .3s}
.nav__toggle svg{width:20px;height:20px}

/* ---------------- home hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;background:url("../img/hero.jpg") center 34%/cover no-repeat;transform:scale(1.06);animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 30%, rgba(27,31,33,.26), rgba(27,31,33,.68) 72%),
  linear-gradient(180deg, rgba(19,22,23,.84) 0%, rgba(27,31,33,.30) 26%, rgba(27,31,33,.34) 58%, rgba(19,22,23,.66) 100%)}
.hero__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-block:120px 26px}
.eyebrow{display:block;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:22px;line-height:1.5}
.eyebrow .spark{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:9px;color:var(--teal-bright)}
.hero h1{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.01em;margin:0 0 20px;color:#fff;max-width:15ch;text-wrap:balance}
.hero__sub{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.55;color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto}

.booking{margin:38px auto 0;width:min(940px,100%);background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.5);color:var(--ink);border-radius:var(--radius);box-shadow:0 26px 60px -26px rgba(0,0,0,.6);display:flex;align-items:stretch;padding:9px 9px 9px 6px;gap:4px}
.booking__field{flex:1;display:flex;align-items:center;gap:11px;padding:8px 14px;border-radius:var(--radius);position:relative;min-width:0}
.booking__field + .booking__field::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:30px;width:1px;background:rgba(27,31,33,.14)}
.booking__ico{flex:0 0 auto;color:var(--teal)}.booking__ico svg{width:20px;height:20px;display:block}
.booking__field label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(27,31,33,.55);margin-bottom:1px;font-weight:600}
.booking select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-family:"Work Sans",sans-serif;font-size:15.5px;font-weight:600;color:var(--ink);width:100%;padding:0 20px 0 0;cursor:pointer;outline:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B6E66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right center}
.booking .btn{padding:0 30px;font-size:16px;flex:0 0 auto;align-self:stretch}

/* accreditation band: a rounded white panel that overlays the bottom of the
   hero, so the photo stays visible around its top corners. Dark logo variants
   are used here; the white ones are kept for the dark footer. */
.trust{position:relative;z-index:2;background:var(--off-white);border-radius:34px 34px 0 0}
.trust__inner{display:flex;align-items:center;justify-content:center;padding-block:26px 21px}
.trust__logos{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.2vw,48px);flex-wrap:wrap}
.trust__logos img{height:40px;width:auto;opacity:.68;filter:saturate(0)}
.trust__logos img.csp{height:52px}   /* tall marquise seal */
.trust__logos img.bupa{height:34px}  /* wide wordmark, sized to match optically */
.trust__logos img:hover{opacity:1}

/* ---------------- inner page hero ---------------- */
.page-hero{background:var(--charcoal);padding:calc(96px + clamp(40px,6vw,74px)) 0 clamp(40px,6vw,74px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(69,214,196,.14),transparent 68%)}
/* .page-hero__inner shares its element with .wrap. Capping it at 70ch made
   .wrap narrower than 1240px, and .wrap's margin-inline:auto then centred the
   whole block, leaving the text floating mid-screen instead of lining up with
   the copy below. Constrain the text, not the wrapper. */
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{max-width:22ch}
/* Services page: block centred and text centre-aligned. */
.page-hero--centred .page-hero__inner{text-align:center}
.page-hero--centred .crumbs{justify-content:center}
.page-hero--centred h1,
.page-hero--centred .lead{margin-inline:auto}
.page-hero h1{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.page-hero .lead{color:rgba(232,238,238,.76);max-width:62ch}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(232,238,238,.6);margin-bottom:18px;flex-wrap:wrap}
.crumbs a:hover{color:var(--teal-bright)}
.crumbs span{opacity:.5}

/* ---------------- layout helpers ---------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
/* grid/flex children default to min-width:auto, which lets wide content
   (the fees table) push the whole page sideways. Let them shrink instead. */
.split > *,.grid-2 > *,.grid-3 > *{min-width:0}
.split--rev .split__media{order:2}
.split__media img{width:100%;border-radius:22px;object-fit:cover;box-shadow:0 30px 60px -34px rgba(0,0,0,.45)}
.media-4x3{aspect-ratio:4/3}.media-4x5{aspect-ratio:4/5}.media-16x10{aspect-ratio:16/10}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:18px;padding:28px 26px}
.vcard .num{font-family:"Newsreader",serif;font-size:1.1rem;color:var(--kicker);font-weight:600;margin-bottom:12px;display:block}
.vcard h2,.vcard h3,.prose .vcard h2{font-family:"Newsreader",serif;font-weight:500;font-size:1.35rem;color:var(--sec-ink);margin:0 0 10px}
.vcard p{font-size:.98rem;line-height:1.55}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.svc{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s}
.svc:hover{transform:translateY(-4px);border-color:rgba(69,214,196,.55)}
.svc__img{aspect-ratio:4/3;overflow:hidden}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc__img img{transform:scale(1.05)}
.svc__body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.svc__body h2,.svc__body h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.4rem;color:var(--sec-ink);margin-bottom:10px}
.svc__body p{font-size:.97rem;line-height:1.55;flex:1}
.svc__body .arrowlink{margin-top:18px}

.interests{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.pill{border:1px solid var(--sec-border);background:rgba(255,255,255,.12);color:#fff;padding:9px 18px;border-radius:var(--radius);font-size:14.5px;font-weight:500}

/* ---------------- prose ---------------- */
.prose{max-width:68ch}
.prose p{font-size:1.05rem;line-height:1.72;margin:0 0 20px;color:var(--sec-body)}
.prose h2{font-family:"Newsreader",serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--sec-ink);margin:44px 0 14px;line-height:1.15}
.prose h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.3rem;color:var(--sec-ink);margin:32px 0 10px}
.prose strong{color:var(--sec-ink);font-weight:600}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:30px;margin-bottom:11px;line-height:1.6;color:var(--sec-body)}
.prose ul li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--kicker)}
.prose ol{margin:0 0 22px;padding-left:22px}
.prose ol li{margin-bottom:11px;line-height:1.6;color:var(--sec-body);padding-left:6px}
.prose ol li::marker{color:var(--kicker);font-weight:600}
.prose a:not(.btn){color:var(--kicker);text-decoration:underline;text-underline-offset:3px}

/* tick list */
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px}
.ticks li{display:flex;gap:11px;align-items:flex-start;line-height:1.5;color:var(--sec-body)}
.ticks svg{flex:0 0 auto;width:19px;height:19px;color:var(--kicker);margin-top:2px}
.ticks b{color:var(--sec-ink);font-weight:600}

/* numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:var(--sec-card);border:1px solid var(--sec-border);border-radius:16px;padding:24px 26px 24px 74px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:24px;top:24px;width:34px;height:34px;border-radius:50%;background:var(--kicker);color:#08211E;display:grid;place-items:center;font-weight:700;font-size:15px}
.section--light .steps li::before{color:#fff}
.steps h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.2rem;color:var(--sec-ink);margin-bottom:6px}
.steps p{margin:0;font-size:.98rem;line-height:1.55}

/* ---------------- fees table ---------------- */
.fees{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:20px;overflow:hidden}
.fees table{width:100%;border-collapse:collapse}
.fees caption{text-align:left;padding:22px 26px 0;font-weight:600;color:var(--sec-ink)}
.fees th,.fees td{padding:17px 26px;text-align:left;border-bottom:1px solid var(--sec-border);font-size:1rem}
.fees thead th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);font-weight:600}
.fees tbody th{font-weight:500;color:var(--sec-ink)}
.fees td.dur{color:var(--sec-body)}
.fees td.fee{text-align:right;font-weight:600;color:var(--sec-ink);white-space:nowrap;font-size:1.08rem}
.fees tbody tr:last-child th,.fees tbody tr:last-child td{border-bottom:0}
.fees tbody tr.highlight{background:color-mix(in srgb,var(--kicker) 9%,transparent)}
.table-scroll{overflow-x:auto}

/* ---------------- locations / maps ---------------- */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.loc{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.loc__img{aspect-ratio:16/10;overflow:hidden}
.loc__img img{width:100%;height:100%;object-fit:cover}
.loc__body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.loc__tag{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--kicker);font-weight:600}
.loc__body h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.45rem;color:var(--sec-ink);margin:8px 0 6px}
.loc__body address{font-style:normal;font-size:.98rem;line-height:1.5;color:var(--sec-body)}
.loc__body .arrowlink{margin-top:16px}
.hours{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--sec-border)}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--sec-border);font-size:.95rem;color:var(--sec-body)}
.hours li b{color:var(--sec-ink);font-weight:600}
.hours li:last-child{border-bottom:0}

/* click-to-load map */
.map{margin-top:20px;border-radius:16px;overflow:hidden;border:1px solid var(--sec-border);background:var(--sec-bg)}
.map__ph{position:relative;aspect-ratio:16/9;display:grid;place-items:center;gap:10px;text-align:center;padding:22px;background:
  linear-gradient(0deg,rgba(11,110,102,.10),rgba(11,110,102,.10)),
  repeating-linear-gradient(0deg,transparent 0 26px,var(--sec-border) 26px 27px),
  repeating-linear-gradient(90deg,transparent 0 26px,var(--sec-border) 26px 27px)}
.map__ph .pin{width:34px;height:34px;color:var(--kicker)}
.map__ph p{margin:0;font-size:.9rem;color:var(--sec-body)}
.map iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.map-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.map-actions .btn{padding:11px 20px;font-size:14.5px}

/* ---------------- quote ---------------- */
.quote{max-width:900px;margin-inline:auto;text-align:center}
.quote__mark{font-family:"Newsreader",serif;font-size:5rem;line-height:.6;color:var(--teal);opacity:.45}
.quote blockquote{font-family:"Newsreader",serif;font-weight:400;font-style:italic;font-size:clamp(1.4rem,3vw,2.05rem);line-height:1.4;color:var(--sec-ink);margin:8px 0 22px}
.quote figcaption{font-size:.95rem;color:var(--sec-body);font-weight:500}
.quote .conf{font-size:12px;color:var(--teal);display:block;margin-top:8px;font-style:italic}

.section--cta{padding-block:clamp(84px,11vw,150px)}
.cta-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
/* larger and unconstrained, so it sits on one line where it fits rather than
   being forced to wrap by a 20ch cap */
.cta-wrap__title{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.015em;
  color:var(--sec-ink);max-width:22ch;text-wrap:balance;margin:0 0 18px}
.cta-wrap__body{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.6;color:var(--sec-body);
  max-width:52ch;margin:0 0 32px}
.cta-wrap .btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---------------- forms ---------------- */
.form-card{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:22px;padding:clamp(24px,3.4vw,40px)}
.field{margin-bottom:20px}
.field > label,.fieldset > legend{display:block;font-size:13px;font-weight:600;color:var(--sec-ink);margin-bottom:8px;letter-spacing:.01em}
.req{color:var(--teal);margin-left:2px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;font-family:"Work Sans",sans-serif;font-size:15.5px;color:var(--sec-ink);
  background:var(--sec-bg);border:1px solid var(--sec-border);border-radius:12px;padding:13px 15px;transition:border-color .2s,box-shadow .2s;
}
.section--light .field input,.section--light .field select,.section--light .field textarea{background:#fff}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,110,102,.16)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B6E66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.field .hint{font-size:12.5px;color:var(--sec-body);margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:14.5px;line-height:1.5;color:var(--sec-body);cursor:pointer}
.check input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--teal)}
.form-note{font-size:13px;color:var(--sec-body);margin-top:18px}
.form-status{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--teal-wash);color:#0A3F3A;font-size:14.5px;display:none}
.form-status--error{background:#FBEDEA;color:#7A2E1E;border:1px solid rgba(198,83,63,.3)}
.form-status--error a{color:#7A2E1E;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* spam trap: off screen for people, still fillable by a bot */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status.is-visible{display:block}
.section:not(.section--light) .form-status{background:rgba(69,214,196,.14);color:#CFF5EE}
.section:not(.section--light) .form-status--error{background:rgba(198,83,63,.16);color:#F6CFC6;border-color:rgba(198,83,63,.4)}
.section:not(.section--light) .form-status--error a{color:#F6CFC6}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#C6533F;box-shadow:0 0 0 3px rgba(198,83,63,.14)}
.err{display:none;font-size:12.5px;color:#C6533F;margin-top:6px;font-weight:500}
.section:not(.section--light) .err{color:#F0A08E}
.field.has-error .err{display:block}

/* ---------------- footer ---------------- */
.footer{background:var(--near-black);color:rgba(232,238,238,.6);padding-block:56px 30px;border-top:1px solid rgba(255,255,255,.07)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px}
.footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-bright);margin:0 0 16px;font-weight:600}
.footer a{display:block;padding:5px 0;font-size:14.5px;color:rgba(232,238,238,.7)}
.footer a:hover{color:#fff}
.footer__brand p{font-size:14.5px;line-height:1.6;max-width:34ch;margin:14px 0 0}
.footer__mark{display:flex;align-items:center;gap:11px}
.footer__mark img{width:auto;height:34px}
.footer__mark b{font-family:"Newsreader",serif;font-weight:500;font-size:18px;color:#fff}
.footer__logos{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap;margin-top:22px}
.footer__logos img{height:28px;width:auto;opacity:.62;filter:saturate(0)}
.footer__logos img.csp{height:36px}
.footer__logos img.bupa{height:23px}
.footer__bar{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
.footer__bar nav{display:flex;gap:18px;flex-wrap:wrap}
.footer__bar nav a{display:inline;padding:0}

.help-chip{position:fixed;right:22px;bottom:22px;z-index:40;display:inline-flex;align-items:center;gap:9px;background:var(--charcoal-2);color:#fff;border:1px solid rgba(255,255,255,.18);padding:11px 18px;border-radius:var(--radius);font-size:14px;font-weight:500;box-shadow:0 14px 34px -14px rgba(0,0,0,.75)}
.help-chip svg{width:16px;height:16px;color:var(--teal-bright)}
.help-chip:hover{background:var(--teal)}

/* ---------------- mobile drawer ---------------- */
body.no-scroll{overflow:hidden}
.drawer-overlay{position:fixed;inset:0;z-index:70;background:rgba(10,12,13,.58);opacity:0;pointer-events:none;transition:opacity .3s ease}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;z-index:80;height:100dvh;width:min(380px,88vw);
  background:var(--charcoal);color:#fff;display:flex;flex-direction:column;
  transform:translateX(101%);visibility:hidden;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
  transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
}
.drawer.is-open{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer__brand{display:flex;align-items:center;gap:10px}
.drawer__brand img{width:auto;height:32px}
.drawer__brand b{font-family:"Newsreader",serif;font-weight:500;font-size:17px;color:#fff}
.drawer__close{width:42px;height:42px;border-radius:var(--radius);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.drawer__close:hover{background:rgba(255,255,255,.18)}
.drawer__close svg{width:18px;height:18px}
.drawer__links{flex:1;overflow-y:auto;padding:6px 20px}
.drawer__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;font-size:17px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__links a:last-child{border-bottom:0}
.drawer__links a svg{width:16px;height:16px;color:var(--teal-bright);opacity:.85;transition:transform .2s}
.drawer__links a:hover svg{transform:translateX(4px)}
.drawer__links .sub{font-size:15px;padding-left:16px;color:rgba(255,255,255,.82)}
.drawer__group{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-bright);margin:18px 0 2px;font-weight:600}
.drawer__acc{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;padding:11px 0;margin-top:6px;
  font-family:"Work Sans",sans-serif;font-size:17px;font-weight:500;color:#fff;text-align:left}
.drawer__chev{width:14px;height:14px;flex:0 0 auto;color:var(--teal-bright);transition:transform .24s ease}
.drawer__acc[aria-expanded="true"] .drawer__chev{transform:rotate(180deg)}
.drawer__panel[hidden]{display:none}
.drawer__panel{display:flex;flex-direction:column;padding-bottom:6px}
.drawer__foot{padding:18px 20px calc(24px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:11px}
.drawer__foot .btn{width:100%}
.drawer__phone{display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-size:15px;font-weight:500;padding:12px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.28)}
.drawer__phone:hover{background:rgba(255,255,255,.08)}
.drawer__phone svg{width:15px;height:15px;color:var(--teal-bright)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .nav__links{display:none}.phone{display:none}.nav__toggle{display:inline-flex}
  .header-inner{padding:9px 10px 9px 16px}
  .booking{flex-direction:column;border-radius:26px;padding:10px;gap:2px}
  .booking__field{padding:12px 14px}
  .booking__field + .booking__field::before{left:14px;right:14px;top:0;transform:none;width:auto;height:1px}
  .booking .btn{margin-top:6px;padding:15px;width:100%}
  .split{grid-template-columns:1fr;gap:28px}.split--rev .split__media{order:0}
  .grid-2,.grid-3,.svc-grid,.loc-grid{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}
/* On a phone there is not enough width for three columns, and the fee column
   was scrolling out of sight inside .table-scroll, hiding the one thing the
   page exists to tell you. Each row becomes a block instead: appointment and
   duration stacked on the left, fee on the right. The thead is dropped to
   screen-reader only, and the row headers still scope the fees correctly. */
@media (max-width:620px){
  /* Touch targets. An arrow link is 23px tall, which is fine for a mouse and
     too small for a thumb, and these are the main way into the service pages,
     the fee list and Tony's phone number. Padded to roughly 44px. */
  .arrowlink{padding-block:11px}
  .drawer__links .sub{padding-block:12px}
  .check{gap:14px;align-items:center;min-height:44px}
  .check input{width:22px;height:22px;margin-top:0}
}
@media (max-width:620px){
  .table-scroll{overflow-x:visible}
  .fees table,.fees tbody,.fees tbody tr,.fees tbody th,.fees tbody td{display:block;width:auto}
  .fees thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .fees tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:16px;
    padding:16px 18px;border-bottom:1px solid var(--sec-border)}
  .fees tbody tr:last-child{border-bottom:0}
  .fees tbody th,.fees tbody td{border:0;padding:0}
  .fees tbody th{grid-column:1;grid-row:1;font-size:1rem}
  .fees td.dur{grid-column:1;grid-row:2;font-size:.93rem;margin-top:3px}
  .fees td.fee{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
}
@media (max-width:520px){
  .trust__logos img{height:30px}.trust__logos img.csp{height:39px}.trust__logos img.bupa{height:25px}
  .footer__top{grid-template-columns:1fr}
  .fees th,.fees td{padding:14px 16px}
  .steps li{padding:22px 20px 22px 20px}
  .steps li::before{position:static;margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{animation:none;transform:scale(1.02)}
  .tkc-launch::before{animation:none;opacity:0}   /* keep the dot, drop the ping */
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .btn,.svc,.svc__img img,.site-header,.drawer,.drawer-overlay,.subnav{transition:none}
}

/* ==========================================================================
   Chat widget
   Launcher replaces the old .help-chip. Panel is a light card on the right.
   ========================================================================== */
.tkc-launch{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--teal);color:#fff;border:0;cursor:pointer;
  padding:13px 20px;border-radius:var(--radius);
  font-family:"Work Sans",sans-serif;font-size:14.5px;font-weight:600;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.32);
  transition:transform .18s ease,background .2s ease,opacity .2s ease;
}
.tkc-launch:hover{background:#0d7f75;transform:translateY(-2px)}
/* An online dot on the top-right corner, so the launcher reads as someone
   there to answer rather than another button. ::after is the dot itself,
   ::before is the halo that pings out from behind it. */
.tkc-launch::before,
.tkc-launch::after{content:"";position:absolute;top:-3px;right:-3px;
  width:12px;height:12px;border-radius:50%;background:#5BD98A;pointer-events:none}
/* The ping carries the same 2px border as the dot, but transparent, and clips
   its background to the padding box. That makes the green it paints exactly
   the size and position of the dot's green centre, so it radiates from the dot
   rather than starting out wider than it. */
.tkc-launch::before{border:2px solid transparent;background-clip:padding-box;
  animation:tkcPing 2.6s cubic-bezier(0,0,.2,1) infinite}
.tkc-launch::after{border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
@keyframes tkcPing{
  0%   {transform:scale(1);opacity:.65}
  70%  {transform:scale(2.6);opacity:0}
  100% {transform:scale(2.6);opacity:0}
}
.tkc-launch svg{width:17px;height:17px}
.tkc-launch.tkc-hide{opacity:0;pointer-events:none;transform:translateY(8px)}
body.no-scroll .tkc-launch,body.no-scroll .tkc-panel{display:none}
/* On a phone the home hero is the whole screen and the booking bar sits low
   in it, so the launcher is kept out of the way until you scroll past.
   Inner pages have short heroes and keep it. */
@media (max-width:620px){
  html.in-home-hero .tkc-launch{opacity:0;pointer-events:none;transform:translateY(10px)}
}

.tkc-panel{
  overscroll-behavior:contain;
  position:fixed;right:22px;bottom:22px;z-index:91;
  width:min(390px,calc(100vw - 44px));height:min(600px,calc(100dvh - 120px));
  background:var(--off-white);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s;
}
.tkc-panel.tkc-open{opacity:1;visibility:visible;transform:none;transition:opacity .26s ease,transform .26s ease,visibility 0s}

.tkc-head{background:var(--charcoal);color:#fff;padding:16px 16px 14px 20px;display:flex;align-items:flex-start;gap:12px}
.tkc-head__mark{width:auto;height:34px;flex:0 0 auto}
.tkc-head__txt{flex:1;min-width:0}
.tkc-head__txt b{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:16.5px;line-height:1.2}
.tkc-head__txt span{display:block;font-size:11.5px;color:rgba(232,238,238,.66);margin-top:3px;line-height:1.35}
.tkc-close{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;display:grid;place-items:center}
.tkc-close:hover{background:rgba(255,255,255,.22)}
.tkc-close svg{width:15px;height:15px}

.tkc-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px 16px;display:flex;flex-direction:column;gap:12px}
/* min-height:0 is load-bearing. A flex item will not shrink below its own
   content without it, so when the keyboard shortened the panel the messages
   overflowed and sat under the chips instead of scrolling. overscroll-behavior
   stops a scroll at the end of the messages carrying on into the page. */
/* with the keyboard up there is no room for suggested questions, and anyone
   typing has already decided not to use them */
.tkc-panel.tkc-compact .tkc-chips{display:none}
.tkc-msg{display:flex;gap:9px;max-width:100%;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.tkc-msg.tkc-in{opacity:1;transform:none}
.tkc-msg--user{justify-content:flex-end}
.tkc-bubble{
  padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;
  max-width:84%;word-wrap:break-word;
}
.tkc-msg--bot .tkc-bubble{background:var(--white);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
.tkc-msg--user .tkc-bubble{background:var(--teal);color:#fff;border-bottom-right-radius:5px}
.tkc-bubble strong{font-weight:600}
.tkc-bubble a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.tkc-msg--alert .tkc-bubble{background:#FDF3F0;border:1px solid #E8C4B8;color:#7A2E18}
.tkc-msg--alert .tkc-bubble strong{color:#5E2212}

.tkc-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px;max-width:84%}
.tkc-act{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;border-radius:12px;background:var(--white);border:1px solid var(--line);
  color:var(--ink);font-size:14px;font-weight:600;
}
.tkc-act:hover{border-color:var(--teal);background:var(--teal-wash)}
.tkc-act svg{width:15px;height:15px;color:var(--teal);flex:0 0 auto}

.tkc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.tkc-chip{
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  padding:8px 14px;border-radius:var(--radius);font-family:"Work Sans",sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s;
}
.tkc-chip:hover{border-color:var(--teal);background:var(--teal-wash)}

.tkc-typing{display:flex;gap:4px;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;width:fit-content}
.tkc-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.45;animation:tkcBounce 1.3s infinite}
.tkc-typing span:nth-child(2){animation-delay:.16s}
.tkc-typing span:nth-child(3){animation-delay:.32s}
@keyframes tkcBounce{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-5px);opacity:.9}}

.tkc-foot{border-top:1px solid var(--line);background:var(--white);padding:10px 12px;display:flex;gap:8px;align-items:flex-end}
.tkc-input{
  flex:1;border:1px solid var(--line);border-radius:14px;padding:11px 14px;
  font-family:"Work Sans",sans-serif;font-size:14.5px;color:var(--ink);background:var(--off-white);
  resize:none;max-height:96px;line-height:1.4;
}
.tkc-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,110,102,.14)}
.tkc-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--teal);border:0;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s}
.tkc-send:hover{background:#0d7f75}
.tkc-send:disabled{opacity:.4;cursor:not-allowed}
.tkc-send svg{width:17px;height:17px}
.tkc-legal{font-size:10.5px;color:var(--ink-soft);text-align:center;padding:0 16px 10px;background:var(--white);line-height:1.4}
.tkc-legal a{color:var(--teal);text-decoration:underline}

/* consent gate */
.tkc-consent{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.tkc-consent h3{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.2rem;color:var(--ink)}
.tkc-consent p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.tkc-consent p a{color:var(--teal);text-decoration:underline}
.tkc-consent .tkc-btns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tkc-btn{
  padding:13px 18px;border-radius:var(--radius);font-family:"Work Sans",sans-serif;
  font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;text-align:center;
}
.tkc-btn--primary{background:var(--teal);color:#fff}
.tkc-btn--primary:hover{background:#0d7f75}
.tkc-btn--quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.tkc-btn--quiet:hover{background:var(--white)}

@media (max-width:520px){
  .tkc-launch{right:14px;bottom:14px;padding:12px 18px}
  .tkc-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;
    /* a spread shadow in the panel's own colour, so anything outside its box
       is covered too. iOS can shift a fixed element while the keyboard opens,
       and this means such a shift reveals more panel, never the page. */
    box-shadow:0 0 0 100vmax var(--off-white)}
  .tkc-panel.tkc-open{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tkc-panel,.tkc-msg,.tkc-launch{transition:none}
  .tkc-typing span{animation:none}
}

/* ---------------- booking bar: custom dropdowns ----------------
   Progressive enhancement over the native <select>, which stays in the DOM and
   keeps its name and value, so the bar still submits with JavaScript off.
   main.js hides the select and builds this listbox beside it. */
.bk-sel{position:relative;min-width:0}
.bk-sel select{display:none}

.bk-trigger{
  display:flex;align-items:center;gap:8px;width:100%;
  appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;
  font-family:"Work Sans",sans-serif;font-size:15.5px;font-weight:600;
  color:var(--ink);text-align:left;cursor:pointer;
}
.bk-trigger:focus-visible{outline:2px solid var(--teal);outline-offset:5px;border-radius:5px}
.bk-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-trigger.is-placeholder .bk-value{color:var(--ink-soft)}
.bk-chev{flex:0 0 auto;width:12px;height:12px;color:var(--teal);transition:transform .2s ease}
.bk-trigger[aria-expanded="true"] .bk-chev{transform:rotate(180deg)}

.bk-menu{
  position:absolute;z-index:80;left:-10px;
  /* The bar sits low in a hero that clips its overflow, so the menu opens
     upwards by default. main.js flips it down only when there is room. */
  bottom:calc(100% + 18px);
  width:max-content;min-width:264px;max-width:min(340px,calc(100vw - 36px));
  background:var(--white);border-radius:20px;padding:8px;
  box-shadow:0 0 0 1px rgba(27,31,33,.07),0 30px 60px -22px rgba(0,0,0,.42);
  transform-origin:bottom left;transform:translateY(8px) scale(.97);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.32,.72,0,1),visibility 0s .18s;
}
.bk-menu--down{top:calc(100% + 18px);bottom:auto;transform-origin:top left;transform:translateY(-8px) scale(.97)}
.bk-menu.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}

.bk-opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 13px;border-radius:13px;
  font-size:15px;font-weight:500;color:var(--ink);line-height:1.25;
  cursor:pointer;user-select:none;
}
.bk-opt + .bk-opt{margin-top:2px}
/* Mouse gets hover. The keyboard cursor only paints once someone actually
   uses the arrows, otherwise the first row looks pre-selected on open. */
.bk-opt:hover{background:rgba(11,110,102,.08)}
.bk-menu.is-kbd .bk-opt.is-active{background:rgba(11,110,102,.08)}
.bk-radio{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;position:relative;
  border:1.7px solid rgba(27,31,33,.26);transition:border-color .15s ease;
}
.bk-opt[aria-selected="true"]{font-weight:600}
.bk-opt[aria-selected="true"] .bk-radio{border-color:var(--teal)}
.bk-opt[aria-selected="true"] .bk-radio::after{
  content:"";position:absolute;inset:3.3px;border-radius:50%;background:var(--teal);
}

/* Stacked bar: the field is full width, so the menu should be too. Dropping
   position on .bk-sel hands the anchor back to .booking__field, which is
   already relative, so left/right:0 spans the whole field rather than just the
   text column beside the icon. Narrower than that and the longer service names
   wrap onto a second line. */
@media (max-width:920px){
  .bk-sel{position:static}
  .bk-menu{left:0;right:0;width:auto;min-width:0;max-width:none}
  .bk-opt{padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .bk-menu{transition:opacity .01s linear,visibility 0s}
  .bk-menu,.bk-menu--down{transform:none}
  .bk-chev{transition:none}
}

/* ---------------- testimonials ----------------
   One featured pull quote, then a grid of shorter ones. .tcard sits on top of
   .vcard so it inherits the card shell and only overrides what differs. */
.thead{max-width:60ch;margin-inline:auto;text-align:center}
.quote + .tgrid{margin-top:56px}
.thead + .quote{margin-top:44px}
.tcard{display:flex;flex-direction:column;gap:14px;margin:0}
.tcard blockquote{margin:0;font-size:.97rem;line-height:1.6;color:var(--sec-body)}
.tcard blockquote::before{content:"\201C"}
.tcard blockquote::after{content:"\201D"}
/* figcaption is pushed to the bottom so attributions line up across a row
   even when the quotes are different lengths. */
.tcard figcaption{margin-top:auto;font-size:.92rem;font-weight:600;color:var(--sec-ink)}
.tcard .role{display:block;font-weight:500;font-size:.8rem;color:var(--sec-body);margin-top:3px}

/* Single testimonial on an inner page: same component, quieter. */
.quote--sm blockquote{font-size:clamp(1.12rem,2vw,1.45rem);margin:4px 0 18px}
.quote--sm .quote__mark{font-size:3.4rem}
.quote figcaption .role{display:block;font-weight:500;font-size:.82rem;color:var(--sec-body);margin-top:4px}

/* The extra three are in the HTML so search engines and anyone without
   JavaScript get all six. main.js collapses them and adds the button, so a
   failed script leaves six visible reviews rather than three and a dead
   button. */
.tgrid.is-collapsed .tcard--more{display:none}
.tmore{display:flex;justify-content:center;margin-top:34px}

@media (max-width:920px){
  .quote + .tgrid{margin-top:36px}
  .thead + .quote{margin-top:32px}
  .tmore{margin-top:26px}
}

@media (max-width:620px){
  /* iOS Safari zooms the whole page in when you focus a field smaller than
     16px, and does not zoom back out afterwards. Nothing else fixes this: it
     has to be 16px on anything focusable. */
  .field input[type=text],.field input[type=email],.field input[type=tel],
  .field select,.field textarea,.booking select,.tkc-input{font-size:16px}
}