/*
Theme Name: Bowtec
Theme URI: https://www.bowtec.co.uk
Author: Bowtec Training Services
Description: Bespoke WordPress theme for Bowtec Training Services — accredited training in lifting operations, mechanical joint integrity and workplace safety. Includes a Courses custom post type with category and accreditation taxonomies, a filterable course register, a "Find a course" search, and a built-in quote enquiry form that emails and stores submissions.
Version: 4.23.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bowtec
Tags: business, custom-logo, custom-menu, dark-mode-support, translation-ready
*/

/* ============================================================
   BOWTEC — brand tokens
   Primary green sampled directly from the Bowtec logo: #1A975F
   ============================================================ */
:root {
  --brand:      #1A975F;
  --brand-deep: #147A4C;
  --brand-dark: #0F5C39;
  --brand-wash: #E6F4ED;
  --ground:     #F4F7F5;
  --paper:      #FFFFFF;
  --panel:      #EAEFEB;
  --ink:        #16211C;
  --ink-2:      #4C5B54;
  --ink-3:      #78877F;
  --line:       #DDE5E0;
  --line-hard:  #C2CEC7;
  --navy:       #16211C;
  --amber:      #96600C;
  --amber-wash: #F8EEDA;
  --red:        #A32219;
  --red-wash:   #F9E6E4;
  --on-brand:   #FFFFFF;

  --font-head: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-data: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace;

  --wrap: 1200px;
  --r: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:#35C081; --brand-deep:#5BD09A; --brand-dark:#7FDCB2; --brand-wash:#10281C;
    --ground:#0E1512; --paper:#16201B; --panel:#1D2822;
    --ink:#E8EFEA; --ink-2:#9AAAA1; --ink-3:#76857C;
    --line:#253029; --line-hard:#364439; --navy:#0A100D;
    --amber:#DDA33F; --amber-wash:#302408;
    --red:#E8776B; --red-wash:#351815;
    --on-brand:#08140E;
  }
}
:root[data-theme="dark"] {
  --brand:#35C081; --brand-deep:#5BD09A; --brand-dark:#7FDCB2; --brand-wash:#10281C;
  --ground:#0E1512; --paper:#16201B; --panel:#1D2822;
  --ink:#E8EFEA; --ink-2:#9AAAA1; --ink-3:#76857C;
  --line:#253029; --line-hard:#364439; --navy:#0A100D;
  --amber:#DDA33F; --amber-wash:#302408;
  --red:#E8776B; --red-wash:#351815;
  --on-brand:#08140E;
}
:root[data-theme="light"] {
  --brand:#1A975F; --brand-deep:#147A4C; --brand-dark:#0F5C39; --brand-wash:#E6F4ED;
  --ground:#F4F7F5; --paper:#FFFFFF; --panel:#EAEFEB;
  --ink:#16211C; --ink-2:#4C5B54; --ink-3:#78877F;
  --line:#DDE5E0; --line-hard:#C2CEC7; --navy:#16211C;
  --amber:#96600C; --amber-wash:#F8EEDA;
  --red:#A32219; --red-wash:#F9E6E4;
  --on-brand:#FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.14rem; letter-spacing: -0.012em; }
h4 { font-size: 0.98rem; }
p  { margin: 0; }
a  { color: var(--brand-deep); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: var(--brand); color: var(--on-brand);
  padding: 12px 18px; font-family: var(--font-data); font-size: 0.8rem;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.prose { max-width: 64ch; }
.section { padding-block: clamp(44px, 6.5vw, 80px); }
.section.tight { padding-block: clamp(28px, 4vw, 48px); }
.section + .section { border-top: 1px solid var(--line); }
.section.paper { background: var(--paper); }

/* ---------- atoms ---------- */
.eyebrow {
  font-family: var(--font-data);
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brand-deep); font-weight: 600;
}
.code {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 0.78rem; letter-spacing: 0.02em; color: var(--brand-deep); font-weight: 600;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  padding: 13px 24px; border: 2px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost { border-color: var(--line-hard); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
.btn-white { background: #fff; color: #16211C; }
.btn-white:hover { background: var(--brand-wash); }
.btn-outline-white { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* PayPal instalments. PayPal's own blue, so it reads as a payment option and
   not as another Bowtec button — but no PayPal logo, which we are not
   licensed to redraw. */
.brand { display: grid; align-content: center; }

/* Talk to us + WhatsApp, right of the menu. Below 1080px the phone button
   drops — the floating Call us / WhatsApp pills already cover that, and two
   buttons plus a seven-item menu will not fit. */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .btn { padding: 11px 16px; font-size: 0.86rem; white-space: nowrap; }
.header-wa { gap: 7px; }
@media (max-width: 1080px) { .header-actions .btn:not(.header-wa) { display: none; } }
@media (max-width: 980px) { .header-actions { display: none; } }

.btn-paypal { background: #003087; color: #fff; }
.btn-paypal:hover { background: #001C5A; }
/* Checkout buttons. PayPal renders its own markup into .bowtec-paypal-buttons,
   so this only spaces the block and styles the messages around it. */
.bowtec-paypal { display: grid; gap: 10px; margin-bottom: 16px; }
.bowtec-paypal-message:empty { display: none; }
.bowtec-paypal-message { font-size: 0.86rem; line-height: 1.5; border-radius: var(--r); padding: 11px 13px; }
.bowtec-paypal-message.is-done { background: var(--brand-wash); color: var(--brand-deep); border-left: 3px solid var(--brand); }
.bowtec-paypal-message.is-error { background: var(--red-wash); color: var(--red); border-left: 3px solid var(--red); }
.bowtec-paypal-test { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--amber); margin: 0; }

/* Prices are net everywhere on the site and labelled "+VAT", so the gross
   figure has to be stated before the buyer commits. */
.bowtec-paypal-total { display: grid; gap: 2px; margin: 0; font-size: 0.9rem; }
.bowtec-paypal-total .net { color: var(--ink-2); }
.bowtec-paypal-total .plus { color: var(--ink-3); font-size: 0.84rem; }
.bowtec-paypal-total .gross { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.bowtec-paypal-terms { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--ink-3); }

/* Payment is hidden until the booking form is valid. Hidden rather than
   greyed out: a disabled PayPal button still opens PayPal in some browsers,
   and a half-available payment option invites people to try. */
.bowtec-paypal.is-locked .bowtec-paypal-buttons,
.bowtec-paypal.is-locked .bowtec-paypal-total,
.bowtec-paypal.is-locked .bowtec-paypal-terms { display: none; }
/* The chosen date, fixed. Shown instead of a course dropdown and a free-text
   "preferred dates" box whenever a specific scheduled date was clicked. */
.booking-locked {
  border: 1px solid var(--line-hard); border-left: 3px solid var(--brand);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 18px;
  background: var(--paper);
}
.booking-locked-course { font-weight: 700; margin-top: 8px; }
.booking-locked-when { color: var(--ink-2); margin-top: 4px; font-size: 0.94rem; }
.booking-locked-change { margin-top: 10px; font-size: 0.82rem; }

.booking-pay-locked {
  margin: 0 0 4px; font-size: 0.88rem; line-height: 1.5;
  color: var(--amber); background: var(--amber-wash);
  border-left: 3px solid var(--amber); border-radius: var(--r); padding: 11px 13px;
}

/* Booking page: pay-now block, then a rule, then the enquiry form. Only
   courses with a price show the first two — see the note in booking.php. */
.booking-pay { margin-bottom: 26px; }
.booking-pay .sub { color: var(--ink-2); margin: 10px 0 18px; max-width: 52ch; }
.booking-or { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 22px; }
.booking-or h3 { margin-bottom: 8px; }
.booking-or p { color: var(--ink-2); max-width: 52ch; font-size: 0.94rem; }

.paypal-instalments { display: grid; gap: 7px; }
.paypal-instalments p { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--ink-3); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: 0.66rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r); white-space: nowrap; text-decoration: none;
}
.tag-brand { background: var(--brand-wash); color: var(--brand-deep); }
.tag-amber { background: var(--amber-wash); color: var(--amber); }
.tag-line  { border: 1px solid var(--line-hard); color: var(--ink-3); }

.notice { border-left: 3px solid var(--brand); background: var(--brand-wash); color: var(--brand-deep); padding: 13px 16px; font-size: 0.9rem; border-radius: var(--r); }
.notice-error { border-color: var(--red); background: var(--red-wash); color: var(--red); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.util { background: var(--navy); color: #C9D4CD; font-size: 0.76rem; }
.util .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-block: 8px; }
.util .accs { margin-right: auto; color: #8B9A92; font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.07em; }
.util a { color: #E8EFEA; text-decoration: none; font-weight: 600; }
.util a:hover { color: var(--brand); }
@media (max-width: 760px) { .util .accs { display: none; } }

.bar { display: flex; align-items: center; gap: 20px; padding-block: 13px; }
.brand-link { display: block; flex: none; text-decoration: none; }
.brand-link img { height: 46px; width: auto; display: block; }
.brand-link .logo-dark { display: none; }
.brand-text { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); }
.brand-text span { color: var(--brand); }

.nav-toggle {
  margin-left: auto; display: none;
  font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.1em;
  background: none; border: 1px solid var(--line-hard); color: var(--ink);
  padding: 9px 13px; border-radius: var(--r); cursor: pointer;
}
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a {
  display: block; font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: 9px 12px; border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--ink); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-post-ancestor > a { color: var(--ink); border-bottom-color: var(--brand); }
/* Parent items that open a dropdown get a caret. */
.main-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.main-nav .menu-item-has-children:hover > a::after,
.main-nav .menu-item-has-children:focus-within > a::after { transform: translateY(1px) rotate(-135deg); }

.main-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 262px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px; z-index: 70; list-style: none; margin: 0;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.45);
}
/* Opening on hover/focus is a pointer behaviour and belongs to the desktop
   layout only — see the min-width block below. Left unscoped it also beats
   the phone accordion on specificity: tapping the toggle button puts focus
   inside the item, :focus-within forces the sub-menu open, and the button
   can never close it again. */

/* A long category list splits into two columns rather than running off the
   bottom of the screen — Training Courses has eleven. */
.main-nav .sub-menu:has(> li:nth-child(9)) {
  column-count: 2; column-gap: 14px; width: min(580px, calc(100vw - 44px));
}
.main-nav .sub-menu > li { break-inside: avoid; }

.main-nav .sub-menu a {
  padding: 9px 12px; border-bottom: 0; border-radius: var(--r);
  font-size: 0.87rem; white-space: normal;
}
.main-nav .sub-menu a:hover { background: var(--brand-wash); color: var(--brand-deep); }
.main-nav .sub-menu .current-menu-item > a { color: var(--brand-deep); font-weight: 600; }

/* Keep the right-hand dropdowns on screen. */
.main-nav > ul > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }

/* The phone accordion button. Hover opens the dropdowns above 980px, so it is
   only ever needed below that — the script adds it at every width and CSS
   decides where it is used. */
.sub-toggle { display: none; }

.header-cta { flex: none; }
@media (max-width: 1080px) { .header-cta { display: none; } }

/* Centred navigation. A three-column grid rather than an auto margin, so the
   menu sits in the middle of the bar itself and does not drift right when the
   quote button is hidden below 1080px. The outer columns are equal fractions;
   both are sized by their content, so neither the logo nor the button is
   squashed. */
@media (min-width: 981px) {
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand-link { justify-self: start; }
  .main-nav { margin-left: 0; }
  .header-cta { justify-self: end; }

  /* Dropdowns open on hover, and on keyboard focus for anyone tabbing. */
  .main-nav li:hover > .sub-menu,
  .main-nav li:focus-within > .sub-menu { display: block; }
}

/* Just above the mobile breakpoint there is barely room for seven items
   between the logo and the edge. Tighten them rather than let the row wrap. */
@media (min-width: 981px) and (max-width: 1200px) {
  .main-nav a { padding-inline: 8px; font-size: 0.86rem; }
}

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; flex-basis: 100%; order: 3; margin-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  /* The header is sticky, so an open menu longer than the screen has to
     scroll inside itself rather than run off the bottom of it. */
  .main-nav.is-open {
    display: block;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px); /* browser chrome, on the phones that support it */
    overflow-y: auto; overscroll-behavior: contain;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 12px 2px; border-bottom: 1px solid var(--line); }

  /* Link on the left, its accordion button on the right, the sub-menu on a
     row of its own underneath. */
  .main-nav .menu-item-has-children {
    display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  }
  .main-nav .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
  /* The caret belongs on the button now, not on the link. */
  .main-nav .menu-item-has-children > a::after { content: none; }

  .sub-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 48px; min-height: 44px; padding: 0;
    background: none; border: 0; border-bottom: 1px solid var(--line);
    color: var(--ink-2); cursor: pointer;
  }
  .sub-toggle span {
    display: block; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .15s;
  }
  .sub-toggle[aria-expanded="true"] span { transform: translateY(2px) rotate(-135deg); }
  .sub-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

  /* Stacked and open by default. This is the fallback when the script has
     not run — an expanded menu is long, but every link is reachable. */
  .main-nav .sub-menu {
    position: static; border: 0; border-left: 3px solid var(--brand);
    border-radius: 0; box-shadow: none; padding: 4px 0 4px 12px; display: block;
    width: auto !important; column-count: 1 !important; min-width: 0;
  }
  .main-nav .sub-menu a { padding: 10px 8px; }

  /* Collapsed only once the script has built the buttons and said so. Hiding
     a sub-menu the visitor has no way to open is worse than a long menu. */
  .main-nav.has-accordion .sub-menu { display: none; }
  .main-nav.has-accordion .is-expanded > .sub-menu { display: block; }

  /* Call, WhatsApp and the assistant are fixed to the bottom of the screen,
     which is exactly where the bottom of an open menu is. Take them out of
     the way while it is open — they come straight back when it closes. */
  body.bowtec-nav-open .bowtec-fabs,
  body.bowtec-nav-open .chat-fab { display: none; }
}

.theme-btn {
  font-family: var(--font-data); font-size: 0.65rem; letter-spacing: 0.08em;
  background: none; border: 1px solid var(--line-hard); color: var(--ink-3);
  padding: 6px 9px; border-radius: var(--r); cursor: pointer; margin-left: 6px;
}
.theme-btn:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22,33,28,.94) 0%, rgba(22,33,28,.80) 48%, rgba(26,151,95,.30) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(50px, 7vw, 88px); }
.hero h1 { color: #fff; max-width: 26ch; }
.hero .eyebrow { color: var(--brand); }
.hero .lede { color: #C6D3CC; max-width: 52ch; margin-top: 20px; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.hero-top { margin-bottom: 34px; }

/* find-a-course */
.finder {
  background: var(--paper); border-radius: var(--r); border-top: 4px solid var(--brand);
  padding: 22px 24px 24px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.55);
}
.finder h2 { font-size: 1.15rem; }
.finder-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px; margin-top: 16px; align-items: end; }
@media (max-width: 900px) { .finder-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .finder-grid { grid-template-columns: 1fr; } }
.finder label { display: block; font-family: var(--font-data); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.finder input, .finder select {
  font: inherit; font-size: 0.92rem; width: 100%; padding: 11px 12px;
  border: 1px solid var(--line-hard); background: var(--paper); color: var(--ink); border-radius: var(--r);
}
.finder .btn { padding-inline: 26px; height: 44px; }
.finder-hint { margin-top: 13px; font-size: 0.8rem; color: var(--ink-3); }
.finder-hint b { color: var(--brand-deep); font-variant-numeric: tabular-nums; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: rgba(255,255,255,.14); margin-top: 40px; border: 1px solid rgba(255,255,255,.14); }
.stats > div { background: var(--navy); padding: 18px; }
.stats b { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.stats span { display: block; margin-top: 8px; font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: #93A29A; }

/* ---------- accreditation strip ---------- */
.accred { background: var(--paper); border-bottom: 1px solid var(--line); }
.accred .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; padding-block: 24px; }
.accred .label { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); max-width: 130px; line-height: 1.5; }
.accred .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 34px; }
/* 62px rather than 54: the ECITB and LEEA marks are lockups with a second
   line of type under them, and that line stops being readable much below
   this. */
.accred .badges img { height: 62px; width: auto; }
.accred .badges .txt { font-weight: 700; font-size: 0.95rem; color: var(--ink-2); }

/* Third-party logos are supplied for a light background and must not be
   recoloured, so in dark mode they sit on a white plate rather than being
   inverted or filtered. This is also what lets the LEEA and CCNSG marks —
   which come as artwork on white — sit in the strip without showing as a
   pale rectangle against the dark paper. */
@media (prefers-color-scheme: dark) {
  .accred .badges img { background: #fff; padding: 7px 9px; border-radius: var(--r); }
}
:root[data-theme="dark"] .accred .badges img { background: #fff; padding: 7px 9px; border-radius: var(--r); }
:root[data-theme="light"] .accred .badges img { background: none; padding: 0; }

/* ---------- section heads ---------- */
.sec-head p.sub { color: var(--ink-2); margin-top: 12px; max-width: 58ch; }

/* ---------- category cards ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px,1fr)); gap: 16px; margin-top: 30px; }
.cat {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: var(--r); padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.cat:hover { border-color: var(--line-hard); border-top-color: var(--brand); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(0,0,0,.4); }
.cat.has-photo { padding-top: 0; overflow: hidden; }
.cat.has-photo > img {
  width: calc(100% + 44px);
  margin: 0 -22px 14px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.cat .n { font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.cat p { color: var(--ink-2); font-size: 0.9rem; }
.cat .go { margin-top: auto; font-weight: 600; font-size: 0.85rem; color: var(--brand-deep); }

/* ---------- register ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 24px 16px; }
.filters input[type="search"] {
  font: inherit; font-size: 0.9rem; padding: 10px 13px;
  border: 1px solid var(--line-hard); background: var(--paper); color: var(--ink);
  border-radius: var(--r); min-width: 210px; flex: 1 1 210px;
}
.chip {
  font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 13px; border: 1px solid var(--line-hard);
  background: var(--paper); color: var(--ink-2); border-radius: var(--r); cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.register-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
table.register { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9rem; }
table.register thead th {
  text-align: left; font-family: var(--font-data);
  font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400;
  padding: 12px 16px; border-bottom: 1px solid var(--line-hard);
  background: var(--panel); white-space: nowrap;
}
table.register td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.register tbody tr:last-child td { border-bottom: 0; }
table.register tbody tr:hover { background: var(--brand-wash); }
table.register .t-code { width: 1%; white-space: nowrap; }
table.register .t-name a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
table.register .t-name a:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
.register-empty { padding: 32px 16px; color: var(--ink-3); font-family: var(--font-data); font-size: 0.84rem; }
.register-count { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.07em; color: var(--ink-3); margin-top: 11px; font-variant-numeric: tabular-nums; }
tr[hidden] { display: none; }

/* ---------- why / split / facts ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 40px; align-items: start; }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 26px; margin-top: 32px; }
.why > div { display: flex; flex-direction: column; gap: 9px; }
.why .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-deep); display: grid; place-items: center; font-weight: 700; font-family: var(--font-data); font-size: 0.8rem; }
.why p { color: var(--ink-2); font-size: 0.92rem; }

.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts li { background: var(--paper); padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; }
.facts .k { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 36%; }
.facts .v { font-size: 0.92rem; }

.quote-block { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r); padding: 26px 28px; }
.quote-block blockquote { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.quote-block cite { display: block; margin-top: 15px; font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.stars { color: var(--brand); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: 10px; }

/* ---------- CTA ---------- */
.cta-band { background: var(--brand); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: rgba(255,255,255,.75); }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 14px; max-width: 52ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- page head / breadcrumb ---------- */
.breadcrumb { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ink-3); padding-block: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--brand-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-head { background: var(--paper); padding-block: 34px 42px; border-bottom: 1px solid var(--line); }
.page-head .lede { color: var(--ink-2); margin-top: 16px; max-width: 60ch; font-size: 1.05rem; }

/* Course header with a photograph behind it. The overlay is dark enough that
   white text stays legible whichever image the category supplies. */
.page-head.has-photo { position: relative; background: var(--navy); border-bottom: 0; padding-block: 66px 56px; overflow: hidden; }
.page-head.has-photo .wrap { position: relative; z-index: 2; }
.page-head.has-photo h1 { color: #fff; }
.page-head.has-photo .lede { color: rgba(255,255,255,.82); }
.page-head.has-photo .code { color: #7FDCB2; }
.page-head-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .38;
}
.page-head.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,16,13,.86) 0%, rgba(10,16,13,.62) 55%, rgba(10,16,13,.42) 100%);
}
.page-head.has-photo .tag-line { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.9); }
@media (max-width: 700px) { .page-head.has-photo { padding-block: 44px 38px; } }

/* ---------- course detail ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(258px,1fr); gap: 42px; align-items: start; }
@media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } }
.spec { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); position: sticky; top: 132px; overflow: hidden; }
.spec h3 { font-size: 0.68rem; font-family: var(--font-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel); font-weight: 400; }
.spec dl { margin: 0; }
.spec .row { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec dt { font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 42%; margin: 0; }
.spec dd { margin: 0; font-size: 0.89rem; flex: 1; }
.spec .foot { padding: 18px; display: grid; gap: 10px; }

.course-body h3 { margin-top: 32px; margin-bottom: 11px; }
.course-body p + p { margin-top: 13px; }
.course-body ul { margin: 11px 0 0; padding-left: 20px; color: var(--ink-2); }
.course-body li { margin-bottom: 7px; }

/* ---------- editor content ---------- */
.entry-content > * + * { margin-top: 18px; }
.entry-content h2 { margin-top: 38px; }
.entry-content h3 { margin-top: 30px; }
.entry-content ul, .entry-content ol { padding-left: 20px; color: var(--ink-2); }
.entry-content li + li { margin-top: 7px; }
.entry-content img { border-radius: var(--r); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--brand); color: var(--ink-2); font-size: 1.06rem; }
.entry-content .wp-block-table { overflow-x: auto; }

/* ---------- editable homepage ----------
   The homepage is page content since 4.11.0, so it mixes two kinds of child:
   ordinary blocks typed in the editor, which need the same 1200px column as
   .wrap, and the shortcode blocks, which render their own full-bleed band and
   must not be indented inside a second one. Constrain by default, then let the
   known bands out again. Anything new that is full-bleed goes on that list. */
.home-content > * { max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.home-content > * + * { margin-top: 26px; }
.home-content > .section,
.home-content > .accred,
.home-content > .partner-strip,
.home-content > .cta-band,
.home-content > .alignfull { max-width: none; padding-inline: 0; margin-top: 0; }

/* A .section already carries its own vertical rhythm. */
.home-content > .section + .section { margin-top: 0; }

/* First block sits directly under the hero, which has its own bottom edge. */
.home-content > *:first-child { margin-top: 0; }

/* Images dropped straight into the homepage should behave like the cards. */
.home-content > figure img,
.home-content > .wp-block-image img { width: 100%; height: auto; border-radius: var(--r); }

/* Typography for blocks typed in the editor. Scoped to direct children on
   purpose: .entry-content styles every descendant, which would reach inside
   the shortcode blocks and pull the Why grid and the news cards out of shape. */
.home-content > h2 { margin-top: 38px; }
.home-content > h3 { margin-top: 30px; }
.home-content > ul, .home-content > ol { padding-left: 42px; color: var(--ink-2); }
.home-content > ul li + li, .home-content > ol li + li { margin-top: 7px; }
.home-content > blockquote { padding-left: 20px; border-left: 3px solid var(--brand); color: var(--ink-2); font-size: 1.06rem; }

/* ---------- forms ---------- */
.quote-form { display: grid; gap: 17px; max-width: 620px; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-data); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.93rem; padding: 11px 13px;
  border: 1px solid var(--line-hard); background: var(--paper); color: var(--ink);
  border-radius: var(--r); width: 100%;
}
.field textarea { min-height: 115px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.87rem; color: var(--ink-2); }
.consent input { margin-top: 4px; flex: none; width: auto; }
.hp-wrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- cards / pagination ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-top: 30px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.card:hover { border-color: var(--brand); }
.card p { color: var(--ink-2); font-size: 0.9rem; }

.pagination { margin-top: 34px; display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--font-data); font-size: 0.8rem; }
.pagination .page-numbers { padding: 9px 14px; border: 1px solid var(--line-hard); color: var(--ink-2); text-decoration: none; border-radius: var(--r); }
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #8B9A92; padding-block: 46px 28px; font-size: 0.88rem; }
/* An explicit count, not auto-fit. `repeat(auto-fit, …)` may not be combined
   with an fr track in the same list — the browser discards the whole
   declaration, the grid collapses to one column and the four footer blocks
   stack down the left with the right half of the footer empty. It had done
   that on every page since the footer was written. There are exactly four
   blocks (brand, Courses, Company, Contact), so name them. */
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(160px,1fr)); gap: 34px; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer img.flogo { height: 44px; width: auto; margin-bottom: 16px; display: block; }
.site-footer h4 { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; font-weight: 400; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: #8B9A92; text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.colophon { margin-top: 36px; padding-top: 20px; border-top: 1px solid #2A3830; display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.05em; }

/* ---------- small button ---------- */
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }

/* ---------- accreditation badges ---------- */
.badge-item { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.badge-item a { display: block; line-height: 0; }
.badge-item.is-soon img { filter: grayscale(1); opacity: .55; }
.soon-flag {
  font-family: var(--font-data); font-size: 0.58rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--amber);
  background: var(--amber-wash); padding: 2px 7px; border-radius: var(--r);
}

/* ---------- course dates ---------- */
table.dates-table { min-width: 620px; }
.dates-empty {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  background: var(--paper); border-radius: var(--r); padding: 22px 24px;
}
.dates-empty p { color: var(--ink-2); }

/* ---------- register category select ---------- */
.filters .register-cat {
  font-family: var(--font-data); font-size: 0.72rem;
  padding: 9px 12px; border: 1px solid var(--line-hard);
  background: var(--paper); color: var(--ink-2); border-radius: var(--r); cursor: pointer;
}
.filters .register-cat:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ---------- programme (Rigging Upskill) ---------- */
.programme-hero .stats > div { background: rgba(10,16,13,.55); }
.programme-banner {
  width: 100%; max-width: 900px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.programme-weeks { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 28px; }
.programme-week { background: var(--paper); display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 22px; padding: 22px; }
.pw-num { display: grid; place-content: start center; text-align: center; background: var(--brand-wash); border-radius: var(--r); padding: 12px 8px; height: fit-content; }
.pw-label { font-family: var(--font-data); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); display: block; }
.pw-n { font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--brand-deep); display: block; margin-top: 2px; }
.pw-body h3 { font-size: 1.05rem; }
.pw-standards { font-family: var(--font-data); font-size: .76rem; letter-spacing: .04em; color: var(--brand-deep); margin-top: 6px; }
.pw-note { font-size: .84rem; color: var(--amber); background: var(--amber-wash); border-left: 3px solid var(--amber); padding: 8px 12px; margin-top: 12px; }
.pw-milestones { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: .9rem; }
.pw-milestones li + li { margin-top: 5px; }
@media (max-width: 640px) {
  .programme-week { grid-template-columns: 1fr; gap: 14px; }
  .pw-num { display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; width: fit-content; padding: 6px 12px; }
  .pw-n { font-size: 1.3rem; margin-top: 0; }
}

/* homepage partnership strip */
.partner-strip { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partner-strip .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); gap: 40px; align-items: center; padding-block: 34px; }
@media (max-width: 860px) { .partner-strip .wrap { grid-template-columns: 1fr; } }
.partner-strip img { width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

/* ---------- on-site & consultancy ---------- */
/* One logo asset works on both grounds: the wordmark is brand green and
   "HEAVY LIFT" sits in black on a filled green block. */
.image-band { width: 100%; max-height: 340px; overflow: hidden; }
.image-band img { width: 100%; height: 340px; object-fit: cover; display: block; }
@media (max-width: 700px) { .image-band, .image-band img { height: 200px; max-height: 200px; } }

.hl-logo { display: block; height: auto; max-width: 100%; }
.hl-logo-hero { width: 190px; margin-bottom: 22px; }
.hl-logo-head { width: 150px; margin-bottom: 6px; }
.hl-logo-teaser { width: 140px; }
.hl-logo-link { display: block; flex: none; }
@media (max-width: 700px) { .hl-logo-hero { width: 140px; } .hl-logo-teaser { width: 110px; } }


.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 28px; }
.service-card { background: var(--paper); padding: 26px 24px; display: flex; flex-direction: column; }
.service-card h3 { font-size: 1.08rem; line-height: 1.3; }
.service-card h3 a { color: inherit; text-decoration: none; }
.service-card h3 a:hover { color: var(--brand-deep); }
.service-lede { color: var(--ink-2); font-size: 0.92rem; margin-top: 10px; }
.service-points { list-style: none; margin: 16px 0 0; padding: 0; font-size: 0.86rem; color: var(--ink-2); }
.service-points li { padding-left: 16px; position: relative; }
.service-points li + li { margin-top: 5px; }
.service-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.service-more { margin-top: auto; padding-top: 18px; font-family: var(--font-data); font-size: 0.76rem; }
.service-more a { color: var(--brand-deep); text-decoration: none; }
.service-more a:hover { text-decoration: underline; }

.service-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.service-chips a { display: inline-block; font-family: var(--font-data); font-size: 0.76rem; padding: 8px 14px;
  border: 1px solid var(--line-hard); border-radius: var(--r); color: var(--ink-2); text-decoration: none; background: var(--paper); }
.service-chips a:hover { border-color: var(--brand); color: var(--brand-deep); }

.sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 26px; margin-top: 28px; }
.sector { border-top: 2px solid var(--brand); padding-top: 18px; }
.sector h3 { font-size: 1rem; }
.sector p { color: var(--ink-2); font-size: 0.9rem; margin-top: 8px; }
.sector ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 0.86rem; }
.sector li + li { margin-top: 5px; }

.panel-quiet { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.panel-quiet h3 { font-size: 1rem; }
.panel-quiet p { color: var(--ink-2); font-size: 0.92rem; margin-top: 10px; }
.panel-quiet ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 0.9rem; }
.panel-quiet li + li { margin-top: 6px; }

.ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.ticks li { padding-left: 26px; position: relative; color: var(--ink-2); }
.ticks li + li { margin-top: 10px; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 6px; height: 11px;
  border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.entity-note { margin-top: 22px; padding: 14px 16px; border-left: 3px solid var(--line-hard);
  background: var(--panel); color: var(--ink-3); font-size: 0.82rem; line-height: 1.6; border-radius: 0 var(--r) var(--r) 0; }
.entity-note a { color: var(--brand-deep); }

/* ---------- news ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { margin-top: 10px; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.news-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.news-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-date { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-deep); }
.news-card h3 { font-size: 1.08rem; line-height: 1.3; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: var(--brand-deep); }
.news-excerpt { color: var(--ink-2); font-size: 0.92rem; }
.news-more { margin-top: auto; font-family: var(--font-data); font-size: 0.78rem; }
.news-more a { color: var(--brand-deep); text-decoration: none; }
.news-more a:hover { text-decoration: underline; }

.news-figure { margin: 30px 0; }
.news-figure img { width: 100%; border-radius: var(--r); display: block; }
.news-figure figcaption { margin-top: 10px; font-size: 0.82rem; color: var(--ink-2); font-style: italic; }

.empty { color: var(--ink-2); }

/* ---------- course calendar ---------- */
.cal-month-head {
  font-size: 1.1rem; margin-top: 34px; padding-bottom: 10px;
  border-bottom: 2px solid var(--brand);
}
.cal-month-head:first-of-type { margin-top: 22px; }
.cal-month-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 0; }
.cal-row {
  background: var(--paper);
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) auto auto auto;
  gap: 18px; align-items: center; padding: 16px 18px;
}
.cal-row:hover { background: var(--brand-wash); }
.cal-date {
  display: grid; place-items: center; text-align: center;
  background: var(--panel); border-radius: var(--r); padding: 8px 4px; line-height: 1.1;
}
.cal-day { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-mon { font-family: var(--font-data); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.cal-dow { font-family: var(--font-data); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cal-main h3 { font-size: 1rem; }
.cal-main h3 a { color: var(--ink); text-decoration: none; }
.cal-main h3 a:hover { color: var(--brand-deep); }
.cal-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.cal-where { font-size: .85rem; color: var(--ink-2); margin-top: 6px; }
.cal-price { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.cal-action { white-space: nowrap; }
.cal-none { padding: 30px 4px; color: var(--ink-3); font-family: var(--font-data); font-size: .85rem; }
.cal-row[hidden], .cal-month-head[hidden] { display: none; }

@media (max-width: 900px) {
  .cal-row { grid-template-columns: 62px minmax(0,1fr); gap: 14px; }
  .cal-places, .cal-price, .cal-action { grid-column: 2; }
  .cal-price { margin-top: -6px; }
}

/* ---------- map ---------- */
.bowtec-map {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-top: 28px;
}
@media (max-width: 820px) { .bowtec-map { grid-template-columns: 1fr; } }
.map-list { display: grid; gap: 1px; background: var(--line); align-content: start; }
.map-item {
  background: var(--paper); border: 0; border-left: 4px solid transparent;
  padding: 18px 20px; text-align: left; font: inherit; color: inherit;
  cursor: pointer; display: grid; gap: 5px;
}
.map-item:hover { background: var(--panel); }
.map-item.is-active { border-left-color: var(--brand); background: var(--brand-wash); }
.map-name { font-weight: 700; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.map-addr { font-size: 0.88rem; color: var(--ink-2); }
.map-note { font-size: 0.83rem; color: var(--ink-3); }
.map-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.map-dirs { font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); text-decoration: none; }
.map-dirs:hover { text-decoration: underline; }
.map-frame { background: var(--panel); min-height: 380px; }
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; margin-top: 30px; }
.team-card { display: grid; gap: 10px; }
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); display: block; }
.team-placeholder {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r);
  background: var(--brand-wash); color: var(--brand-deep);
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 700;
}
.team-role { font-size: 0.86rem; color: var(--ink-2); }

/* ---------- social follow ---------- */
.social-follow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-hard); color: var(--ink-2);
  text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.social-btn:hover {
  background: var(--brand-social, var(--brand));
  border-color: var(--brand-social, var(--brand));
  color: #fff; transform: translateY(-2px);
}
/* Labelled variant: pill instead of circle. */
.social-follow.is-labelled .social-btn {
  width: auto; height: auto; border-radius: 30px; padding: 10px 18px;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
}
/* On the dark footer. */
.social-follow.is-dark .social-btn { border-color: #2A3830; color: #8B9A92; }
.social-follow.is-dark .social-btn:hover { color: #fff; }

/* ---------- LinkedIn ---------- */
.linkedin-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--brand); border-radius: var(--r); padding: 24px;
}
.linkedin-embed { border-radius: var(--r); overflow: hidden; }
.linkedin-embed iframe { width: 100%; border: 1px solid var(--line); border-radius: var(--r); display: block; background: var(--paper); }
.linkedin-embed.is-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.linkedin-embed.is-grid iframe { min-height: 420px; }
.trustpilot-widget { margin-top: 20px; }

/* ---------- WhatsApp floating button ---------- */
/* Call and WhatsApp, stacked bottom-right. Both keep a visible label — an
   unlabelled icon leaves people guessing, and a phone is exactly where
   someone wants to ring rather than fill in a form. */
.bowtec-fabs {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.fab {
  height: 50px; border-radius: 25px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  color: #fff; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
  transition: transform .15s, background .15s;
}
.fab:hover { transform: translateY(-2px); }
.fab svg { flex: none; }
.fab-call { background: var(--brand); color: var(--on-brand); }
.fab-call:hover { background: var(--brand-deep); }
.fab-whatsapp { background: #25D366; }
.fab-whatsapp:hover { background: #1FBE59; }

@media (max-width: 600px) {
  .bowtec-fabs { right: 12px; bottom: 12px; gap: 8px; }
  .fab { height: 44px; padding: 0 15px; font-size: 0.84rem; gap: 8px; }
  .fab svg { width: 19px; height: 19px; }
}

/* ---------- AI assistant ---------- */
.chat-fab {
  position: fixed; right: 20px; bottom: 86px; z-index: 80;
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem;
  background: var(--brand); color: var(--on-brand);
  border: 0; border-radius: 30px; padding: 12px 20px; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
}
.chat-fab:hover { background: var(--brand-deep); }
.chat-fab[hidden] { display: none; }

.bowtec-chat {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: min(380px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 40px));
  background: var(--paper); border: 1px solid var(--line-hard);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 48px -18px rgba(0,0,0,.55);
}
.bowtec-chat[hidden] { display: none; }
.chat-head {
  background: var(--brand); color: #fff;
  padding: 13px 16px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 0.92rem;
}
.chat-close { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.chat-msg { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
.chat-msg a { color: inherit; }
.chat-msg.is-user { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 3px; }
.chat-msg.is-bot { align-self: flex-start; background: var(--panel); color: var(--ink); border-bottom-left-radius: 3px; }
.chat-msg.is-typing { color: var(--ink-3); font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; font: inherit; font-size: 0.9rem; padding: 10px 12px;
  border: 1px solid var(--line-hard); background: var(--paper); color: var(--ink); border-radius: var(--r);
}
.chat-form .btn { padding: 10px 16px; font-size: 0.84rem; }
.chat-foot { padding: 0 12px 12px; font-size: 0.7rem; color: var(--ink-3); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- booking page ---------- */
.booking-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } .booking-summary { order: -1; } }
.booking-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.booking-card-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.booking-card-body { padding: 20px 22px; }
.booking-card h3 { font-size: 1.05rem; margin-top: 8px; }
.booking-card h3 a { color: inherit; text-decoration: none; }
.booking-card h3 a:hover { color: var(--brand-deep); }
.booking-step { font-size: 1.05rem; margin-top: 34px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
.booking-step:first-of-type { margin-top: 0; }
.booking-note { color: var(--ink-2); font-size: 0.9rem; margin-top: 12px; max-width: 62ch; }
.booking-choice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.booking-choice label { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-hard);
  border-radius: var(--r); padding: 12px 16px; cursor: pointer; background: var(--paper); font-size: 0.93rem; }
.booking-choice label:has(input:checked) { border-color: var(--brand); color: var(--brand-deep); }
.bowtec-delegate-group { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-top: 14px; }
.bowtec-delegate-group legend { font-weight: 600; padding: 0 8px; font-size: 0.88rem; color: var(--brand-deep); }