/* =====================================================================
   Fit With Shruti - 3.4.0 "Forms & UI consistency" layer. Loads LAST.
   Delete this file (+ forms-v34.js and the two enqueues in functions.php)
   to revert.

   Why this exists: form controls were styled by five overlapping layers
   (two global input rules, three separate field systems, duplicated
   media queries), so inputs, selects, textareas and checkboxes rendered
   differently from page to page. This file is the single source of truth
   for every form on the site and is scoped to ANY <form> plus the
   containers the Core plugin renders without a <form> tag (booking
   details, BMI), so it keeps working if the plugin's markup changes.

   1 Tokens + global fixes      6 Status / validation messages
   2 Text controls + select     7 Contact page
   3 Labels + checkbox/radio    8 Assessment + program application
   4 Grids                      9 Booking
   5 Buttons + step nav        10 BMI, resource access, misc components
                               11 Typography consistency, mobile CTA, a11y
   ===================================================================== */

:root{
  --fv-h:52px;                 /* one height for every input + select */
  --fv-radius:14px;
  --fv-border:#BDB59C;         /* ~2.2:1 on white: visible, still soft */
  --fv-border-hover:#9C9378;
  --fv-bg:#fff;
  --fv-text:var(--ink,#12241C);
  --fv-placeholder:#7B8880;
  --fv-focus:var(--lime2,#B0863F);
  --fv-focus-ring:0 0 0 4px rgba(201,161,90,.26);
  --fv-error:#B5473A;
  --fv-error-ring:0 0 0 4px rgba(181,71,58,.14);
  --fv-ok:#1D6B3F;
  --fv-gap-x:18px;
  --fv-gap-y:20px;
  --fv-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F3826' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --fv-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6C98B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   1. GLOBAL FIXES
   --------------------------------------------------------------------- */
/* `.btn{display:inline-flex}` was beating the UA [hidden] rule, so buttons the
   JS "hides" (e.g. Access resource) stayed on screen next to their form. */
[hidden]{display:none!important}

/* In-page anchors and focused fields were landing underneath the sticky header. */
html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
@media(max-width:960px){html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}}

/* ---------------------------------------------------------------------
   2. TEXT CONTROLS, SELECT, TEXTAREA
      Scope list is repeated in each selector on purpose: it keeps the
      specificity above the five older layers without using !important.
   --------------------------------------------------------------------- */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(
  input:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=submit],[type=button],[type=file],[type=image]):not([data-hcx]),
  select,
  textarea){
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:var(--fv-h);
  min-height:var(--fv-h);
  margin:0;
  padding:0 16px;
  font:500 16px/1.4 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* 16px stops iOS zooming on focus */
  letter-spacing:0;
  color:var(--fv-text);
  background-color:var(--fv-bg);
  background-image:none;
  border:1.5px solid var(--fv-border);
  border-radius:var(--fv-radius);
  box-shadow:inset 0 1px 2px rgba(11,35,24,.05);
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
  scroll-margin-top:120px;
}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) textarea:not([hidden]):not([data-hcx]){
  height:auto;
  min-height:132px;
  padding:14px 16px;
  line-height:1.55;
  resize:vertical;
}
/* Custom chevron: native arrows differ per browser and sat tight against the edge. */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) select:not([multiple]):not([hidden]){
  padding-right:48px;
  background-image:var(--fv-chevron);
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:20px;
  cursor:pointer;
  text-overflow:ellipsis;
}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) select:invalid{color:var(--fv-placeholder)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) select option{color:var(--fv-text);font-weight:500}

html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(input,textarea)::placeholder{color:var(--fv-placeholder);font-weight:400;opacity:1}

/* date / time pickers: same height, no oversized native chrome on iOS */
html body :is(form,.fx-card,.fx-booking,.hc-bmi-card) input:is([type=date],[type=time],[type=datetime-local],[type=month]){
  line-height:calc(var(--fv-h) - 3px);padding-top:0;padding-bottom:0}
/* number spinners crowd the value; mobile keyboards make them redundant */
html body :is(form,.fx-card,.fx-booking,.hc-bmi-card) input[type=number]{-moz-appearance:textfield;appearance:textfield}
html body :is(form,.fx-card,.fx-booking,.hc-bmi-card) input[type=number]::-webkit-outer-spin-button,
html body :is(form,.fx-card,.fx-booking,.hc-bmi-card) input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* states */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(input,select,textarea):not([data-hcx]):hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(input,select,textarea):not([data-hcx]):focus{
  border-color:var(--fv-focus);box-shadow:var(--fv-focus-ring);background-color:#fff;outline:none}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(input,select,textarea):not([data-hcx]):is(:user-invalid,[aria-invalid=true]){
  border-color:var(--fv-error);box-shadow:var(--fv-error-ring)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) :is(input,select,textarea):not([data-hcx]):disabled{
  background-color:var(--paper2,#EFEADB);color:#7B8880;cursor:not-allowed;opacity:.85}
/* Chrome/Safari autofill paints a yellow/blue box over the field */
html body :is(form,.fx-card,.fx-booking,.hc-bmi-card) input:-webkit-autofill{
  -webkit-text-fill-color:var(--fv-text);-webkit-box-shadow:0 0 0 100px #fff inset;caret-color:var(--fv-text)}

/* ---------------------------------------------------------------------
   3. LABELS + CHECKBOX / RADIO
      Labels were `display:flex; flex-direction:column`, which turned the
      "(optional)" hint into its own line. Block labels keep hint text
      inline and let every control sit on one consistent 8px offset.
   --------------------------------------------------------------------- */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) label:not(:has(> input[type=checkbox])):not(:has(> input[type=radio])):not(.fx-check){
  display:block;
  min-width:0;
  margin:0 0 var(--fv-gap-y);
  font:600 13.5px/1.35 "Inter",system-ui,sans-serif;
  letter-spacing:.005em;
  color:var(--forest,#0B2318);
}
/* label hints: "(optional)", <small>, <span> */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) label > :is(span,small,em):not([class]){
  display:inline;font-weight:400;color:var(--muted,#5B6A61);font-style:normal}
/* control inside a label sits 8px under the label text */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application,.bmi-fields) label :is(input:not([type=checkbox]):not([type=radio]),select,textarea){margin-top:8px}
/* labels that live inside a grid cell: the grid owns the spacing */
html body :is(.fx-grid,.hc-bmi-form-grid,.hc-resource-form-grid,.bmi-fields,.booking-details-grid) > label:not(:has(> input[type=checkbox])):not(:has(> input[type=radio])):not(.fx-check):not(.hcx){margin-bottom:0}
html body :is(.fx-field):not(label){display:flex;flex-direction:column;gap:8px;margin:0;min-width:0}

/* Choice rows: checkbox / radio + text, aligned to the first line of text */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-assessment-form,.hc-program-form,.hc-program-application) :is(label.fx-check,label:has(> input[type=checkbox]),label:has(> input[type=radio])){
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:8px 0;               /* 22px box + padding = comfortable 38px+ touch row */
  font:400 14.5px/1.5 "Inter",system-ui,sans-serif;
  color:var(--muted,#5B6A61);
  cursor:pointer;
}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-assessment-form,.hc-program-form,.hc-program-application) :is(label.fx-check,label:has(> input[type=checkbox]),label:has(> input[type=radio])) a{color:var(--forest2,#0F3826);text-decoration:underline;text-underline-offset:2px}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input:is([type=checkbox],[type=radio]){
  -webkit-appearance:none;appearance:none;
  flex:0 0 22px;
  display:inline-grid;place-content:center;
  width:22px;height:22px;min-width:22px;min-height:22px;
  margin:1px 0 0;padding:0;
  background:#fff center/14px no-repeat;
  border:1.5px solid var(--fv-border);
  border-radius:7px;
  box-shadow:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input[type=radio]{border-radius:50%}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input[type=checkbox]:checked{
  background-color:var(--forest2,#0F3826);background-image:var(--fv-check);border-color:var(--forest2,#0F3826)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input[type=radio]:checked{
  border-color:var(--forest2,#0F3826);
  background:radial-gradient(circle,var(--lime,#C9A15A) 0 4.5px,var(--forest2,#0F3826) 5.5px)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input:is([type=checkbox],[type=radio]):hover:not(:checked):not(:disabled){border-color:var(--fv-border-hover)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input:is([type=checkbox],[type=radio]):focus-visible{
  box-shadow:var(--fv-focus-ring);border-color:var(--fv-focus);outline:none}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input:is([type=checkbox],[type=radio]):is(:user-invalid,[aria-invalid=true]){
  border-color:var(--fv-error);box-shadow:var(--fv-error-ring)}
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.contact-form,.hc-resource-form,.hc-assessment-form,.hc-program-form,.hc-program-application) input:is([type=checkbox],[type=radio]):disabled{opacity:.5;cursor:not-allowed}

/* fieldset / legend (radio groups, if the plugin uses them) */
html body :is(form,.fx-card) fieldset{border:0;margin:0 0 var(--fv-gap-y);padding:0;min-width:0}
html body :is(form,.fx-card) legend{padding:0;margin:0 0 8px;font:600 13.5px/1.35 "Inter",system-ui,sans-serif;color:var(--forest,#0B2318)}

/* ---------------------------------------------------------------------
   4. GRIDS: one definition for every multi-field layout
   --------------------------------------------------------------------- */
html body :is(.fx-grid,.hc-bmi-form-grid,.hc-resource-form-grid,.bmi-fields,.booking-details-grid){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--fv-gap-y) var(--fv-gap-x);
  align-items:start;           /* stops a taller neighbour stretching its sibling */
  margin:0 0 var(--fv-gap-y);
}
html body :is(.fx-grid,.hc-bmi-form-grid,.hc-resource-form-grid,.bmi-fields,.booking-details-grid) > :is(.full,.fx-check,textarea,.hc-form-result,.fx-consent-note,fieldset){grid-column:1/-1}
/* an orphaned last field (odd count) should span instead of leaving a hole */
html body :is(.hc-bmi-form-grid,.hc-resource-form-grid,.bmi-fields) > :last-child:nth-child(odd){grid-column:1/-1}
/* the booking panel is narrow: go single column earlier there */
@media(max-width:1100px){html body .fx-slot-panel :is(.fx-grid,.booking-details-grid){grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  html body :is(.fx-grid,.hc-bmi-form-grid,.hc-resource-form-grid,.bmi-fields,.booking-details-grid){grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ---------------------------------------------------------------------
   5. BUTTONS IN FORMS + STEP NAVIGATION
   --------------------------------------------------------------------- */
html body :is(form,.fx-card,.fx-booking,.fx-slot-panel,.hc-bmi-card,.hc-booking-app,.hc-resource-form) :is(button[type=submit],.btn,#hc-bmi-calc,#hc-book-pay){
  min-height:54px;padding-inline:28px;font-size:15.5px;font-weight:700}
/* primary single actions: full width, anchored under the fields */
html body :is(form.hc-ajax-form button[type=submit],.hc-resource-form .btn,.hc-bmi-card #hc-bmi-calc,#hc-book-pay,.booking-pay-btn){width:100%;margin-top:6px}
html body :is(form button,.btn):disabled,html body :is(form button,.btn)[aria-disabled=true]{opacity:.6;cursor:not-allowed;transform:none;filter:saturate(.7)}

/* Step navigation: Back left, Continue right; stacked + full-width on phones */
html body .fx-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:clamp(22px,3vw,32px);padding-top:clamp(18px,2.5vw,24px);border-top:1px solid var(--line,#E1DCCB)}
html body .fx-nav > :only-child{margin-left:auto}
html body .fx-nav .btn,html body .fx-nav button{min-width:150px}
@media(max-width:640px){
  html body .fx-nav{flex-direction:column-reverse;align-items:stretch}
  html body .fx-nav > :only-child{margin-left:0}
  html body .fx-nav .btn,html body .fx-nav button{width:100%;min-width:0}
}

/* ---------------------------------------------------------------------
   6. STATUS / VALIDATION MESSAGES  (.hc-form-result, #hc-book-result)
      forms-v34.js sets data-state = loading | success | error.
   --------------------------------------------------------------------- */
html body .hc-form-result{margin:16px 0 0;font:600 14.5px/1.5 "Inter",system-ui,sans-serif;color:var(--forest,#0B2318)}
html body .hc-form-result:empty{display:none;margin:0;padding:0;border:0}
html body .hc-form-result:not(:empty){
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:12px;
  background:#F6F1E2;border:1px solid #E7DDBC;
}
html body .hc-form-result:not(:empty)::before{content:"";flex:0 0 8px;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--lime,#C9A15A)}
html body .hc-form-result[data-state=success]{background:#EAF4EC;border-color:#BCDDC5;color:#17512F}
html body .hc-form-result[data-state=success]::before{background:var(--fv-ok)}
html body .hc-form-result[data-state=error]{background:#FBEDEA;border-color:#EDC6BE;color:#8A3225}
html body .hc-form-result[data-state=error]::before{background:var(--fv-error)}
html body .hc-form-result[data-state=loading]::before{animation:hcv34-pulse 1s ease-in-out infinite}
@keyframes hcv34-pulse{50%{transform:scale(1.6);opacity:.45}}

/* ---------------------------------------------------------------------
   7. CONTACT PAGE
   --------------------------------------------------------------------- */
/* three cards: equal height, buttons share one baseline whatever the copy length */
html body .contact-grid{align-items:stretch}
html body .ccard{display:flex;flex-direction:column;align-items:flex-start;height:100%}
html body .ccard > p{margin-bottom:22px}
html body .ccard > .btn{margin-top:auto}
html body .ccard > .btn,html body .ccard > a.btn{min-height:50px}
/* form card: intro stays in view while the long form scrolls */
html body .contact-form{align-items:start;gap:clamp(24px,4vw,56px)}
html body .contact-form-intro{position:sticky;top:112px}
html body .contact-form-intro .contact-form-title{font-weight:500;text-wrap:balance}
html body .contact-form form,html body .contact-form .hc-ajax-form{margin:0;min-width:0}
html body .contact-form .hc-ajax-form > label:last-of-type{margin-bottom:6px}
@media(max-width:960px){
  html body .contact-form{padding:clamp(20px,5vw,36px)}
  html body .contact-form-intro{position:static}
}
@media(max-width:640px){html body .ccard{height:auto}}

/* ---------------------------------------------------------------------
   8. ASSESSMENT + PROGRAM APPLICATION
   --------------------------------------------------------------------- */
/* The program application form was drawn straight on the section background
   (no surface). Give any stand-alone assessment/program form the same card
   as the Assessment page. */
html body .hc-assessment-form:not(.fx-card):not(.fx-card .hc-assessment-form),
html body .hc-program-form:not(.fx-card):not(.fx-card .hc-program-form){
  background:#fff;
  border:1px solid rgba(11,35,24,.1);
  border-radius:var(--r-l,26px);
  box-shadow:0 1px 0 #fff inset,0 2px 6px rgba(11,35,24,.04),0 26px 50px -30px rgba(11,35,24,.3);
  padding:clamp(22px,4vw,42px);
  max-width:100%;
  min-width:0;
}
html body .program-application-section .section-head{margin-bottom:clamp(22px,3vw,34px)}
html body .fx-card{padding:clamp(22px,4vw,42px)}
html body .fx-step > h2{font-weight:500;font-size:clamp(22px,2.6vw,28px);margin:0 0 clamp(18px,2.4vw,26px);text-wrap:balance}
html body .fx-consent-note{margin:0 0 var(--fv-gap-y);padding:16px 18px;border-radius:14px;line-height:1.55}
/* progress */
html body .fx-progress-track{height:8px;margin:20px 0 10px;background:#E9E3D1}
html body .fx-progress-fill{border-radius:99px;background:linear-gradient(90deg,var(--lime2,#B0863F),var(--lime,#C9A15A) 60%,#E6C98B)}
html body .fx-progress-label{margin:0 0 20px;font-weight:600;color:var(--muted,#5B6A61)}

/* ---------------------------------------------------------------------
   9. BOOKING
   --------------------------------------------------------------------- */
/* Hero copy was a centred 720px column above a 1180px card: the two left edges
   did not line up. Both now share the container's edge. */
html body .flow-hero .flow-wrap-narrow{max-width:1180px}
html body .flow-hero .flow-wrap-narrow > p{max-width:56ch}
html body .flow-hero .flow-wrap-narrow > h1{max-width:26ch;text-wrap:balance}
/* 38px month arrows were under the 44px touch minimum */
html body .fx-cal-btn{width:44px;height:44px;min-width:44px;min-height:44px}
/* details panel: the form is part of the panel, so give it room to breathe */
html body .booking-details-form{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--line,#E1DCCB)}
html body .booking-details-form .fx-payment-summary{margin:4px 0 16px}
@media(max-width:700px){
  html body .booking-container-wide{padding-inline:0}
}

/* ---------------------------------------------------------------------
   10. BMI, RESOURCE ACCESS, SMALL COMPONENTS
   --------------------------------------------------------------------- */
html body .hc-bmi-card{padding:clamp(20px,4vw,34px)}
html body .hc-bmi-card .hc-bmi-form-grid{margin-bottom:var(--fv-gap-y)}
html body .hc-bmi-result:not([hidden]){margin-top:clamp(18px,3vw,28px)}
/* resource access: form appears in place of the button */
html body .hc-resource-result:empty{display:none}
html body .hc-resource-result:not(:empty){margin-top:18px;padding-top:18px;border-top:1px solid var(--line,#E1DCCB)}
html body .hc-resource-form{display:block}
html body .hc-resource-form .hc-resource-form-grid{margin-bottom:var(--fv-gap-y)}
html body .hc-resource-result > p{margin:14px 0 0;font-weight:600;color:var(--forest,#0B2318)}
/* program page: price pill was stretching to 600px */
html body .price-block{width:fit-content;max-width:100%}
/* carousel dots: 9px visual, 44px touch area */
html body .hc-car-dot{position:relative}
html body .hc-car-dot::after{content:"";position:absolute;inset:-18px -7px}

/* ---------------------------------------------------------------------
   11. TYPOGRAPHY CONSISTENCY, MOBILE CTA, ACCESSIBILITY
   --------------------------------------------------------------------- */
/* Heading weights were 700 / 600 / 500 depending on which section you were
   in, and the home H1 was heavier than every inner-page H1. One scale now. */
html body :is(.hero,.page-hero,.flow-hero,.post-hero) h1{font-weight:500}
html body :is(.section-head,.story-copy,.coach-copy,.who-copy,.section-subtitle) :is(h2),
html body h2.section-subtitle,
html body .story-copy h2,html body .coach-copy h2{font-weight:600}
/* Article / program body headings used Space Grotesk 700 while the rest of the
   site uses Fraunces. */
html body .post-body :is(h2,h3){font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
html body .post-body h2{font-size:clamp(24px,2.7vw,32px);line-height:1.2;margin:clamp(28px,4vw,44px) 0 14px}
html body .post-body h3{font-size:clamp(20px,2.1vw,24px);line-height:1.25;margin:28px 0 10px}

/* The floating "Start Health Assessment" bar sat on top of the fields it was
   telling people to fill in. It now steps aside on form pages and while typing. */
html .mobile-sticky{transition:transform .28s ease,opacity .2s ease}
html.hc-form-page .mobile-sticky,html.hc-typing .mobile-sticky{transform:translateY(130%);opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  html body :is(form,.fx-card,.fx-booking) *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------------------------------------------------------------------
   12. BRAND: NO BOTANICAL MOTIFS
       This is a health-coaching practice, not a natural-products brand.
       Removes the leaf in every pill tag, the vine illustrations behind
       hero / dark sections / footer, and the sprout icon.
   --------------------------------------------------------------------- */
:root{--sprig:none}   /* the vine artwork is one variable; every use of it now draws nothing */
html body :is(.hero,.section-dark,.page-hero,.site-footer)::after{content:none;background:none}
html body .cta-band::after{background:var(--grain-dark)}     /* keep the subtle texture, drop the vine */
/* pill tags: leaf -> small solid dot */
html body .tag>i,html body .tag.on-dark>i,html body .post-hero-copy>.tag i{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  -webkit-mask:none;mask:none;background:var(--lime2,#B0863F)}
html body .tag.on-dark>i{background:var(--lime,#C9A15A)}
/* hero floating card badge: vine -> check */
body .hero .hero-media .hero-float:not(.hero-float-name)::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5C1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.3 4.3 8.7-9.3'/%3E%3C/svg%3E") center/58% no-repeat,linear-gradient(145deg,#F8EFD9,#EAD6A8)}
/* 4th pillar icon: sprout -> upward trend (progress) */
html body .pillar:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5C1E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 16 5-5 4 4 7-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E"),linear-gradient(145deg,#FBF3DF,#F1E2BF)}

/* ---------------------------------------------------------------------
   13. CLIENT STORY CARD: "View story" must never wrap
       It shared one row with avatar + name + programme, and a long programme
       name squeezed the link until the arrow dropped under the text.
   --------------------------------------------------------------------- */
html body .hcp-tm-who{display:flex;align-items:center;gap:12px;min-width:0}
html body .hcp-tm-who > div{flex:1 1 auto;min-width:0}
html body .hcp-tm-who small{display:block;overflow-wrap:anywhere}
html body .hcp-tm-story-link{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;white-space:nowrap}
html body .hcp-tm-story-link .hc-btn-icon{flex:0 0 auto}

/* ---------------------------------------------------------------------
   14. FREE RESOURCES CAROUSEL (home page) - same engine as programs
   --------------------------------------------------------------------- */
.hc-resources{position:relative}
.hc-resources-row{display:block!important}
.hc-resources-track{
  --hc-gap:clamp(14px,2vw,24px);--pv:3;
  display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;
  align-items:stretch!important;gap:var(--hc-gap)!important;
  overflow-x:auto!important;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:16px 6px 30px!important;margin:-16px -6px 0!important;width:auto!important;
}
.hc-resources-track::-webkit-scrollbar{display:none}
.hc-resources-track:focus-visible{outline:2px solid var(--pu-gold-deep,#8A6A2C);outline-offset:4px;border-radius:20px}
.hc-resources-track>*{
  flex:0 0 calc((100% - (var(--pv) - 1)*var(--hc-gap))/var(--pv))!important;
  width:auto!important;max-width:none!important;min-width:0!important;
  scroll-snap-align:start;
}
.hc-resources-track>.resource-card{display:flex;flex-direction:column;height:auto}
.hc-resources-track>.resource-card .hc-resource-access,.hc-resources-track>.resource-card .pcard-link{margin-top:auto}
@media(max-width:960px){.hc-resources-track{--pv:2}}
@media(max-width:620px){.hc-resources-track{--pv:1.12}}
@media(prefers-reduced-motion:reduce){.hc-resources-track{scroll-behavior:auto}}

html body .hc-resources-track>.resource-card>p{margin-bottom:18px}