/*
  Theme Name:   Oxford Intense Driving School
  Description:  Custom theme for Oxford Intense Driving School
  Author:       Oncotton LTD
  Author URI:   https://oncotton.net
  Version:      1.3.0
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* ============================================================
   CRITICAL (ABOVE THE FOLD)
   - variables
   - base type
   - header/nav (fixed)
   - unified buttons
   - unified Swiper arrows
   ============================================================ */

:root {
  /* ── Non-colour vars (colours live entirely in theme.json) ── */

  /* WhatsApp — external brand, no theme.json slot */
  --wa:      #25D366;
  --wa-dark: #1FAE56;

  /* Layout */
  --header-height: 84px;
  --offcanvas-width: 560px;

  /* Spacing / radius */
  --radius: 14px;
  --r:      14px;
  --pad:    clamp(20px, 4vw, 56px);

  /* Monospace — no WP preset slot */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Burger */
  --burger-line-w: 32px;
  --burger-line-h: 4px;
  --burger-gap: 10px;
  --burger-radius: 999px;
  --burger-offset: calc(var(--burger-gap)/2 + var(--burger-line-h)/2);
}
b, strong {
font-weight: 500 !important;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }

/* ── Headings — single source of truth via theme.json vars ── */
h1, h2, h3, h4, h5, h6 {
  word-break: keep-all;
  overflow-wrap: normal;
  word-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

h1 { font-family: var(--wp--preset--font-family--dm-serif-display); font-size: var(--wp--preset--font-size--xxl); font-weight: 400; line-height: 1.1;  }
h2 { font-family: var(--wp--preset--font-family--dm-serif-display); font-size: var(--wp--preset--font-size--xl);  font-weight: 400; line-height: 1.15; padding: 0; }
h3 { font-family: var(--wp--preset--font-family--dm-serif-display); font-size: var(--wp--preset--font-size--lg);  font-weight: 400; line-height: 1.2;  padding: 20px 0; }
h4 { font-size: var(--wp--preset--font-size--md);  font-weight: 400; padding: 20px 0; }
h5 { font-size: var(--wp--preset--font-size--sm);  font-weight: 400; }
h6 { font-size: var(--wp--preset--font-size--xs);  font-weight: 400; }

.wp-block-post-title.has-medium-font-size { margin: 10px 0 20px !important; }
.product-list .wp-block-post-title.has-medium-font-size { margin: 0 !important; }
.post-edit-link {position: relative; left: 10px; bottom: 10px; background: rgb(121, 25, 25); border-radius: 30px; padding: 5px 10px; color: #FFF; text-decoration: none; font-weight: 700; font-size: 10px;}

.wp-block-cover.sticky {
  position: sticky;
  top: 0;
  z-index: -1
}

.wp-block-cover {
  position: relative;
  z-index: 2
}


/* ----- Fixed Header ----- */
#oxforddrive-content { position: relative; }
body.admin-bar .site-header { top: 32px; }

.gap-20 { gap: 40px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.my-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.max-20 { max-width: 760px; margin: 0 auto; }
.wp-block-columns {gap: 40px}
.height-100 {height: 420px}


.wp-block-buttons {
  margin: 40px 0;
  gap: 12px;
}

/* ── Base reset for ALL block-editor buttons ── */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px !important;
  border: 1.5px solid transparent !important;
  padding: 16px 26px !important;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
  white-space: nowrap;
  box-shadow: none !important;
  outline: none !important;
}

/* ── btn-primary → dark navy + arrow icon ── */
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--wp--preset--color--ink) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--ink) !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--wp--preset--color--navy-deep) !important;
  border-color: var(--wp--preset--color--navy-deep) !important;
  color: rgba(255, 255, 255, 0.631) !important;

  opacity: 1 !important;
}
.wp-block-button.btn-primary .wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
  transition: transform 0.2s ease;
}
.wp-block-button.btn-primary .wp-block-button__link:hover::after {
  transform: translateX(3px);
}

/* ── btn-wa → WhatsApp green + bubble icon ── */
.wp-block-button.btn-wa .wp-block-button__link {
  background: var(--wa) !important;
  color: #fff !important;
  border-color: var(--wa) !important;
}
.wp-block-button.btn-wa .wp-block-button__link:hover {
  background: var(--wa-dark) !important;
  border-color: var(--wa-dark) !important;
  opacity: 1 !important;
}
.wp-block-button.btn-wa .wp-block-button__link::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.7-.9-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.3 2.9 1.2 2.9.8 3.4.8.5 0 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.2-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z'/></svg>");
}

/* ── btn-accent → amber ── */
.wp-block-button.btn-accent .wp-block-button__link {
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--primary) !important;
}
.wp-block-button.btn-accent .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-2) !important;
  border-color: var(--wp--preset--color--accent-2) !important;
  opacity: 1 !important;
}

/* ── btn-ghost / btn-secondary → outline ── */
.wp-block-button.btn-ghost .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--ink) !important;
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 35%, transparent) !important;
}
.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {width: 100%}

.wp-block-button.btn-ghost .wp-block-button__link:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--ink) !important;
  opacity: 1 !important;
}

/* ── Default (no modifier class) → dark navy ── */
.wp-block-button:not([class*="btn-"]) .wp-block-button__link {
  background: var(--wp--preset--color--ink) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--ink) !important;
}
.wp-block-button:not([class*="btn-"]) .wp-block-button__link:hover {
  background: var(--wp--preset--color--navy-deep) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--navy-deep) !important;
  opacity: 1 !important;
}

/* ── Base hover guard — prevents WP global styles (.wp-element-button) injecting blue ── */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  color: inherit !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* ── Dark-section override: ghost buttons on dark bg ── */
.home-cta .wp-block-button.btn-ghost .wp-block-button__link,
.home-areas .wp-block-button.btn-ghost .wp-block-button__link {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.home-cta .wp-block-button.btn-ghost .wp-block-button__link:hover,
.home-areas .wp-block-button.btn-ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}


.is-style-outline .wp-block-button__link, .wp-block-post-excerpt__more-link {
  position: relative;
  padding-right: 1em; /* add space for arrow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  text-decoration: none
}
.is-style-outline .wp-block-button__link::after, .wp-block-post-excerpt__more-link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.6em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
}
.is-style-outline .wp-block-button__link:hover::after, .wp-block-post-excerpt__more-link:after::hover {
  transform: translateX(4px);
  transition: transform .2s ease;
}
.wp-block-post-excerpt__excerpt {padding: 0 0 20px}
.wp-block-separator {border-top: 1px solid;margin:30px 0 0; padding-bottom: 30px}
/* Modern tick-style list */
.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 30px 0 0;
}

.wp-block-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
}

.wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #333
  font-weight: 600;
  font-size: 1.1rem;
}

/* Phone list override */
.wp-block-list.tel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'><path d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011-.24c1.12.37 2.33.57 3.59.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 4a1 1 0 011-1h3.49a1 1 0 011 1c0 1.26.2 2.47.57 3.59a1 1 0 01-.25 1l-2.19 2.2z'/></svg>");
}
.wp-block-list.address-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/></svg>");
}
.wp-block-list.address-list {margin: 40px 0}
body.page-id-26 :where(.wp-block-columns) {margin-bottom: 0}

/* Pill badge shown over featured image */
.oxforddrive-card__pill{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-block;
  padding:4px 10px;
  font-size:0.825rem;
  line-height:1;
  border-radius:999px;
  background: var(--wp--preset--color--dark);
  color:#fff;
  letter-spacing:.3px;
  z-index:2;
}

.oxforddrive-card__pill--news{
  background: var(--wp--preset--color--dark);
}

.oxforddrive-card__pill--project{
  background: var(--wp--preset--color--dark);
}
.oxforddrive-ratio-4-3{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  margin-bottom:12px;
}

.oxforddrive-ratio-4-3 img.oxforddrive-ratio-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* ========================================
   BASE HEADER
======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--wp--preset--color--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s ease;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  padding: 0;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
}

/* Logo and actions never shrink — nav flexes to fill remaining space */
.site-branding  { flex-shrink: 0; }
.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.anim-right {
  will-change: transform;
  transition: transform 0.1s ease-out;
  padding: 10px 80px 10px 10px;
  color: #000000;
  font-weight: 300
}

.anim-right.scroll-out {
  transform: translateX(100vw); /* moves completely off screen to the right */
  opacity: 0;
}

.site-branding svg {fill:var(--wp--preset--color--primary);}


img.custom-logo {
  height: 44px; width: auto; display: block;
  transition: filter 150ms ease;
}

body.scrolled .site-header {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.site-logo svg {
  height: 20px;
  width: auto;
  display: block;
}

/* Text-based fallback logo */
a.site-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.site-logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
}

.logo-line1 {
  display: flex;
  align-items: baseline;
}

.logo-oxford {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  letter-spacing: -.01em;
}

.logo-intensive {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  color: var(--wp--preset--color--primary);
  letter-spacing: -.01em;
  margin-left: 0.35em;
}

.logo-sub {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--wp--preset--color--ink) 50%, transparent);
  text-align: left;
  align-self: flex-start;
  /* letter-spacing adds space after each glyph, shifting the block right — pull it back */
  margin-left: -0.16em;
}

/* Respect oxforddriven prefs */
@media (prefers-reduced-motion: reduce){
  .site-header, .header-container { transition: none; transform: none; }
}

/* ========================================
   NAV & MEGA MENU FIXES
   - Header/nav always above dropdown
   - Dropdown pinned to header bottom (JS sets top)
   - Mobile unaffected (falls back to off-canvas flow)
======================================== */


#site-navigation .menu > li > a { cursor: pointer; }

/* Scroll shadow only — no position/colour change */

/* When user is scrolling down, slide header out of view */
body.nav-hide .site-header {
  transform: translateY(-110%);
}

/* Keep header visible when overlays are open */
body.nav-open .site-header,
body.search-open .site-header {
  transform: translateY(0) !important;
}
body.nav-open #masthead.site-header { left: 0; right: 0; }

/* Lock scroll when mobile nav is open.
   Setting overflow:hidden on html (not body) prevents scroll without any layout
   shift — the page stays exactly where it was, the fixed nav overlays it. */
html.nav-open {
  overflow: hidden;
}

/* Admin bar offset (WP) when fixed */
body.admin-bar .site-header {
  top: 0;
}
body.admin-bar.scrolled .site-header {
  top: 32px; /* WP admin bar height on desktop */
}

/* Respect oxforddriven prefs */
@media (prefers-reduced-motion: reduce){
  .site-header { transition: none; transform: none; }
}



/* ========================================
   NAV CTA BUTTONS
======================================== */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 960px) {
  .nav-cta .btn-wa .lbl { display: none; }
  .nav-cta .btn-wa {
    padding: 9px;
    border-radius: 50%;
    gap: 0;
    aspect-ratio: 1 / 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nav-cta { display: none; }
}

/* ========================================
   SEARCH BUTTON
======================================== */
.floating-search {
  background: transparent;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  color: #fff
}
.floating-search svg {
  width: 20px;
  height: 20px;
  display: block;
}
.no-scroll .floating-search {
  opacity: 0
}

/* Nav font — covers all viewport sizes */
#site-navigation,
#site-navigation ul,
#site-navigation li,
#site-navigation a,
.menu-navigation-container ul {
  font-family: var(--wp--preset--font-family--inter) !important;
}
/* ========================================
   HAMBURGER (mobile only)
======================================== */
.mobile-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 20px; 
  height: 40px;
  border: 0; 
  background: transparent;
  cursor: pointer;
}

.mobile-menu .bar {
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--wp--preset--color--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu[aria-expanded="true"] .bar {
  background: #000;
}

.search-hamburger {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 999;
}

/* When nav is open */
body.nav-open .mobile-menu .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .mobile-menu .bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .mobile-menu .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 1100px){
  .mobile-menu { display: none; }
  .nav-close { display: none; }
}

/* ── Media width normalisation ────────────────────────────────────────
   Every image and cover shares the page's content width and gutter.
   The only exception is a block explicitly set to "Full width" in the
   editor (.alignfull), which is allowed to run edge to edge.

   This replaces a `width: calc(100% - 40px)` hack that used to sit on
   .hero-floor. Because that subtracted from whatever the parent happened
   to be, the same block rendered at different widths in different
   containers — which is how the homepage ended up with several
   inconsistent image widths. Sizing from the container instead keeps
   every block aligned with the text beside it. */
.wp-block-cover.hero-floor {
  width: 100%;
}

/* Top-level media (not nested inside a column/group that already sets a
   narrower width) lines up with the shell. Blocks inside columns keep
   their column's width, which is intended. */
.ap-page > .wp-block-image:not(.alignfull),
.ap-page > .wp-block-cover:not(.alignfull),
.ap-shell > .wp-block-image:not(.alignfull),
.ap-shell > .wp-block-cover:not(.alignfull) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Full width really means full width — no inherited gutter. */
.wp-block-image.alignfull,
.wp-block-cover.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 860px){
.hero-floor .wp-block-column:not(:first-child) {border-left: solid 0px !important; border-top: solid 1px rgba(255, 255, 255, 0.464); padding-top: 15px}
.hero-floor .wp-block-column {padding-left: 20px !important}
#areas {padding-inline: var(--pad);}
}


/* ========================================
   MOBILE OFF-CANVAS NAV
   Active below 1100px — the 8-item menu needs the full row above that.
======================================== */
@media (max-width: 1099px){
  #site-navigation {
    position: fixed;
    inset: 0 0 0 auto;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--wp--preset--color--ink);
    overflow: hidden;
    padding: 0;
    z-index: 200;
    /* Book Online Now sits as a real flex row, not an absolutely-positioned
       overlay guessing its own height — so the scrollable menu above it is
       always sized to leave exactly enough room, on every device, instead
       of a fixed padding estimate that fell short (safe-area insets, long
       expanded submenus) and hid/covered the last accordion items. */
    display: flex;
    flex-direction: column;
  }
  
  #site-navigation.is-open {
    transform: translateX(0);
  }

  /* Close button inside mobile nav panel */
  .nav-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease;
  }
  .nav-close:hover { background: rgba(255,255,255,.2); }
  .nav-close svg { width: 20px; height: 20px; }

  #site-navigation .menu {
    display: block !important;
    margin: 0 !important;
    padding: 96px 0 24px !important;
    list-style: none !important;
    text-align: left;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Accordion submenus — only one open at a time (JS) */
  #site-navigation .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }

  #site-navigation .sub-menu li {
    border: 0;
    padding: 0;
  }

  #site-navigation .sub-menu a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 8px 13px 16px;
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: 1.02rem;
    color: rgba(255,255,255,.82) !important;
    border-left: 2px solid rgba(184,137,58,.45);
    line-height: 1.4;
    transition: color .15s ease, border-color .15s ease;
  }

  #site-navigation .sub-menu a:hover {
    color: var(--wp--preset--color--primary) !important;
    border-left-color: var(--wp--preset--color--primary);
  }

  #site-navigation .sub-menu .submenu-parent-link a {
    font-weight: 600;
    color: #fff !important;
  }

  /* Category headings inside the Lessons submenu */
  #site-navigation .sub-menu .menu-label a {
    pointer-events: none;
    padding-top: 18px;
    padding-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-soft) !important;
    border-left-color: transparent;
  }

  /* Price tag on lesson items */
  #site-navigation .menu-price {
    flex-shrink: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-soft);
  }

  /* Gold booking CTA — a real flex row below the scrollable menu, sized to
     its own content (see #site-navigation flex-column, .menu flex:1 1 auto
     above), so it can never overlap or hide the menu items above it. */
  .nav-mobile-cta {
    flex: none;
    z-index: 10;
    padding: 18px 48px calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--wp--preset--color--ink);
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .nav-mobile-cta .btn-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--ink) !important;
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 8px 24px -8px rgba(184,137,58,.55);
    transition: background .15s ease, transform .12s ease;
  }

  .nav-mobile-cta .btn-book-now:hover { background: var(--wp--preset--color--accent-soft); }
  .nav-mobile-cta .btn-book-now:active { transform: scale(0.985); }
  
  .header-container {
    padding:0 var(--pad) 0;
  }

  #site-navigation .menu > li {
    position: relative;
    margin: 0 48px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  #site-navigation .menu > li > a {
    display: block;
    text-decoration: none;
    padding: 20px 0 !important;
    font-family: var(--wp--preset--font-family--dm-serif-display) !important;
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    font-weight: 400 !important;
    color: #fff !important;
    letter-spacing: -.01em;
    line-height: 1.2;
    transition: color .15s ease;
  }

  #site-navigation .menu > li > a:hover {
    color: var(--wp--preset--color--primary) !important;
  }

/* Submenu accordion toggle — anchored to the parent link row */
  .submenu-toggle{
    position: absolute;
    right: 4px;
    top: calc(20px + 0.62 * clamp(1.6rem, 5vw, 2.2rem));
    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    background: none;
    border: 0;
    padding: 0;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
  }

  .submenu-toggle:focus{
    outline: none;
  }

  .submenu-toggle::after{
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform .25s ease;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23d8b362' stroke-width='2' viewBox='0 0 24 24'>\
    <path d='M6 9l6 6 6-6'/>\
    </svg>");
  }

  #site-navigation .menu > li.submenu-open > .submenu-toggle::after{
    transform: rotate(180deg);
  }

  #masthead.site-header { left: 0; right: 0; }

  .header-container a {
    color: #000; 
    text-decoration: none;
  }

  .header-container li {
    padding: 10px 0;
  }
  
  /* Close button base */
  .mobile-nav-close{
    position: absolute;
    top: 14px;
    right: 14px;
  
    width: 28px;
    height: 28px;
  
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
  
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
  
    cursor: pointer;
    z-index: 9
  }
  
/* Lines */
  .mobile-nav-close::before,
  .mobile-nav-close::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background: currentColor;
  
    transform-origin: center;
    transition: transform .3s ease, opacity .2s ease;
  }
  
  /* Default = minus */
  .mobile-nav-close::before{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  
  .mobile-nav-close::after{
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
  }
  
  /* OPEN STATE — delayed animation */
  #site-navigation.is-open .mobile-nav-close::before{
    transition-delay: .2s;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  #site-navigation.is-open .mobile-nav-close::after{
    transition-delay: .2s;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 1;
  }
  
  /* Remove delay when closing (so it snaps back immediately) */
  #site-navigation:not(.is-open) .mobile-nav-close::before,
  #site-navigation:not(.is-open) .mobile-nav-close::after{
    transition-delay: 0s;
  }
  
}


/* ========================================
   OVERLAY (mobile)
======================================== */
.nav-overlay, 
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 999;
  height: 100vh;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-overlay.is-active, 
.search-overlay.is-active { 
  opacity: 1; 
  pointer-events: auto; 
}

.nav-overlay[hidden] { 
  display:block; 
}


/* ========================================
   DESKTOP NAV + DROPDOWNS
======================================== */

/* 1100px – 1279px: compact desktop nav */
@media (min-width: 1100px){
  #site-navigation {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 16px;
    font-size: 0.8rem;
    font-family: var(--wp--preset--font-family--inter);
  }
  #site-navigation .menu {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: end;
    margin: 7px 0;
    flex-wrap: nowrap;
  }
  #site-navigation .menu > li {
    position: relative;
    list-style: none;
    white-space: nowrap;
  }
  #site-navigation .menu > li > a {
    display: inline-block;
    padding: 10px 2px;
    text-decoration: none;
  }
  /* Icon-only WhatsApp button frees ~90px for menu items */
  .nav-cta .btn-wa .lbl { display: none; }
}

/* 1280px – 1499px: mid nav */
@media (min-width: 1280px){
  #site-navigation { margin: 0 28px; font-size: 0.825rem; }
  #site-navigation .menu { gap: 26px; }
  #site-navigation .menu > li > a { padding: 10px 4px; }
  .nav-cta .btn-wa .lbl { display: inline; }
  .header-container {padding: 0;}
}

/* 1500px+: full desktop nav */
@media (min-width: 1500px){
  #site-navigation { margin: 0 44px; }
  #site-navigation .menu { gap: 30px; }
}

/* Desktop dropdown panels (standard WP .sub-menu) */
@media (min-width: 1100px){

  .nav-mobile-cta { display: none; }

  #site-navigation .menu > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 280px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(20, 30, 60, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 300;
  }

  #site-navigation .menu > li:hover > .sub-menu,
  #site-navigation .menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  #site-navigation .sub-menu li {
    list-style: none;
    white-space: nowrap;
  }

  #site-navigation .sub-menu a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 28px;
    padding: 9px 22px;
    font-size: 0.85rem;
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
  }

  #site-navigation .sub-menu a:hover {
    background: color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent);
    color: var(--wp--preset--color--ink);
  }

  #site-navigation .sub-menu .menu-label a {
    pointer-events: none;
    padding-top: 14px;
    padding-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-2);
  }

  #site-navigation .sub-menu .menu-label:first-child a { padding-top: 4px; }

  #site-navigation .menu-price {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--wp--preset--color--accent-2);
  }

  /* Chevron hint on parents with dropdowns */
  #site-navigation .menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 7px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231a2a4f' stroke-width='2.4' viewBox='0 0 24 24'>\
    <path d='M6 9l6 6 6-6'/>\
    </svg>");
  }
}


/* ========================================
   INTERIOR PAGE BANDS (setup-generated pages)
======================================== */

.entry-content > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-hero,
.page-cta {
  color: #fff;
  padding: clamp(56px, 8vw, 110px) var(--pad, 24px);
  text-align: left;
  margin-top: 0;
}

.page-hero h1,
.page-cta h2 {
  color: #fff;
  max-width: 720px;
}

.page-hero p,
.page-cta p {
  color: rgba(255,255,255,.78);
  max-width: 640px;
  font-size: 1.05rem;
}

.page-cta {
  text-align: center;
}

.page-cta h2,
.page-cta p {
  margin-left: auto;
  margin-right: auto;
}

.page-cta .wp-block-buttons {
  justify-content: center;
  margin-top: 28px;
}

.page-section {
  padding: clamp(48px, 6vw, 88px) var(--pad, 24px);
  margin-top: 0;
}

.page-section h2 { margin-top: 1.6em; }
.page-section h2:first-child { margin-top: 0; }

.mc-signup-form {
  width: 100%;
  box-sizing: border-box;
}

.mc-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.mc-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mc-field label {
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
}

.mc-field input {
  border: none;
  border-bottom: 1px solid #444;
  background: transparent;
  padding: 8px 4px;
  outline: none;
}

.mc-row button {
  background-color: color(display-p3 0.69 0.839 0.722);
  color: white;
  border: none;
  padding: 23px 50px;
  border-radius: 0;
  cursor: pointer;
  align-self: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.mc-row button:hover {
  background-color: #8cb698;
}

@media (max-width: 700px) {
  .mc-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mc-row button {
    width: 100%;
  }
}


/* -----------------------------
   INITIAL STATE
----------------------------- */

/* Hide cover inner container */
.oxforddrive-js .wp-block-cover .wp-block-cover__inner-container {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}

/* Hide ALL columns by default */
.oxforddrive-js .wp-block-columns {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}

/* BUT — do NOT hide columns inside covers */
.oxforddrive-js .wp-block-cover .wp-block-columns {
  opacity: 1;
  transform: none;
}


/* -----------------------------
   VISIBLE STATE
----------------------------- */

.oxforddrive-js .wp-block-cover.is-visible 
.wp-block-cover__inner-container.is-visible {
  opacity: 1;
  transform: none;
}

.oxforddrive-js .wp-block-columns.is-visible {
  opacity: 1;
  transform: none;
}
/* ============================================================
   GUTENBERG BLOCKS
   ============================================================ */
   
   /* Style any Details inside a Group */
   .wp-block-group details.wp-block-details {
     border-top: 1px solid rgba(0,0,0,.15);
   }
   .wp-block-group details.wp-block-details:last-of-type {
     border-bottom: 1px solid rgba(0,0,0,.15);
   }
   
   /* Summary row layout (text left, icon right) */
   .wp-block-group details.wp-block-details > summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: clamp(14px, 2vw, 22px) 0;
     font-size: var(--wp--preset--font-size--medium); font-weight: 300; 
     cursor: pointer;
     list-style: none;  
     outline: none;
   }
   
   /* Remove WebKit marker */
   .wp-block-group details.wp-block-details > summary::-webkit-details-marker { display: none; }
   
   /* Right-side + / – icon */
/* Right-side + / X icon */
   .wp-block-group details.wp-block-details > summary::after {
     content: "+";
     display: inline-block;
     font-weight: 300;
     line-height: 1;
     margin-left: 1rem;
     opacity: .85;
     transition: transform 0.3s ease, opacity 0.3s ease;
     transform-origin: center;
   }
   
   /* When open, rotate the + to form an X */
   .wp-block-group details.wp-block-details[open] > summary::after {
     transform: rotate(45deg); /* 45° makes + look like × */
     opacity: 1;
   }
   /* The JS creates an inner wrapper to animate height */
   .wp-block-group .oxforddrive-acc-panel {
     overflow: hidden;
     height: 0;                 /* will be animated by JS */
     will-change: height;
   }
   .wp-block-group .oxforddrive-acc-panel > .oxforddrive-acc-inner {
     padding: 0 0 clamp(14px, 2vw, 20px) 0;
   }
   
   /* Nice focus ring for keyboard users */
   .wp-block-group details.wp-block-details > summary:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 3px;
   }
   
   .wp-block-group .oxforddrive-acc-inner > *:first-child { margin-top: 0; }
   .wp-block-group .oxforddrive-acc-inner > *:last-child  { margin-bottom: 0; }

.wp-block-cover__inner-container {margin: 20px auto !important}
/* Restrict normal Cover blocks to the global content size */
.wp-block-cover:not(.alignwide):not(.alignfull),
.wp-block-columns:not(.alignwide),
.wp-block-heading:not(.alignwide), .container, .wp-block-gallery:not(.alignwide), .wp-block-cover.alignfull .wp-block-cover__inner-container, .wp-block-query:not(.alignwide):not(.alignfull), .search-results-container, #reviews {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}


/* Grid container */
.search-results-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* Individual result cards */
.search-results-item article {
  width: 100%;
}

/* Tablet breakpoint (optional) */
@media (max-width: 1024px) {
  .search-results-item {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
  .search-results-item {
    grid-template-columns: 1fr;
  }
}

.post-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder styling */
.hero-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      135deg,
      #e7e7e7 0%,
      #e2e2e2 50%,
      #d0d0d0 100%
    );
  color: #ffffff;
  text-align: center;
}



.container + h2 { margin: 0; padding: 0
}
.wp-block-columns.alignfull {
  width: calc(100% - 20px);
  margin: 10px;
  max-width: 100%;
  gap: 10px
}
.wp-block-gallery img {padding: 5px}
.wp-block-columns.alignfull {
  width: calc(100%);
  margin: 10px;
  max-width: 100%;
  gap: 10px
}
.wp-block-columns.alignfull.no-margin {
  margin: 10px 0 !important;
  width: calc(100%)
}

.widget {
  width: var(--wp--style--global--content-size);
  margin: 0 auto;
  max-width: 100%;
  padding-top: 100px
}

.lessons-grid {
  width: var(--wp--style--global--content-size);
  margin: 60px auto 0;
  max-width: 100%;
}


/* Ensure the post item can position children */
.wp-block-post {
  position: relative;
}

/* Anchor the image as the positioning context */
.wp-block-post-featured-image {
  position: relative;
}

/* Date pill styling */
.wp-block-post-date {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;

  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Remove default margins */
.wp-block-post-date time {
  margin: 0;
  display: block;
}

/* Optional: ensure image stays clean */
.wp-block-post-featured-image img {
  display: block;
}


#footer, .footer {
  font-size: 0.825rem; line-height: 1.8rem;
  background: var(--wp--preset--color--dark);
}

.footer-contact .wp-block-columns {margin: 20px 0}
 .footer ul {padding: 0; margin: 0}
 .footer ul li {
   padding: 10px 0;
   list-style: none
 } 
 .footer .wp-block-heading {
   color: var(--wp--preset--color--primary);
 }
 .footer ul li a {
   text-decoration: none
 }

.footer-contact h2 {
  margin-bottom: 40px
}
ul.styled-list {list-style: none; padding: 0}
ul.product-list h4, ul.styled-list li, ul.product-list h2, ul.product-list h3 {
  border-bottom: solid 1px;
  padding: 25px 20px 25px 0;
  margin: 0;

}
.wp-block-query .wp-block-post-template {
  gap: 20px
}
.taxonomy-project_category a {
  text-decoration: none;
  font-size: var(--wp--preset--font-size--extra-small)
}
.wp-block-query .wp-block-post-title {
  margin: 0
}
.product h4, ul.styled-list li {font-size: var(--wp--preset--font-size--medium); font-weight: 300; padding: 0;}
ul.styled-list li {padding: 20px 0}
ul.product-list h4 a, ul.styled-list li a {
  color: rgb(0,0,0) !important;
  transition: color 0.2s ease;
}

ul.product-list h4 a:hover, ul.styled-list li a:hover {
  color: var(--wp--preset--color--primary) !important;
}

ul.product-list li:first-child h4, ul.styled-list li:first-child {
  border-top: solid 1px;
  padding-top: 20px;
}
#search-backdrop.nav-overlay[hidden]{ display:block; } /* keep layout-free when hidden */

/* ===== Overlay shell ===== */

#search-title.sr-only {color: #fff}
.search-overlay{
  position: fixed; inset: 0; z-index: 1003;
  display: grid; place-items: start center;
  padding: clamp(24px, 4vw, 48px);
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s;
  pointer-events: none;
  
}

.search-overlay.is-open{
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .25s ease, visibility 0s;
}

/* Close button (top-right like your mock) */
.search-overlay__close{
  position: fixed; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  color: #fff; background: rgba(0,0,0,.35);
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

/* Center box that holds the form + results */
.search-overlay__box{
  width: min(920px, 92vw);
  margin-top: clamp(8vh, 14vh, 24vh);
  margin-left: auto;
  margin-right: auto
}

/* Big pill input like screenshot */
.search-overlay__form{
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; align-items: center;
  min-height: 76px;
  padding: 0 64px 0 28px;
}

.search-overlay__input{
  appearance: none; border: 0; outline: 0;
  width: 100%;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  background: transparent;
  color: #111;
}

.search-overlay__input::placeholder{ color: #444; opacity: .7; }

.search-overlay__submit{
  position: absolute; right: 18px;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: #111; color: #fff; cursor: pointer;
}

/* Results list */
.search-overlay__results{ margin-top: 18px; }
.search-overlay__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.search-item__link{
  display: grid; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
}
.search-item__link:hover{ background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.search-item__title{ font-weight: 700; }
.search-item__type{ font-size: .85rem; opacity: .6; }
.search-item__excerpt{ opacity: .8; }

.search-overlay__empty{ color: #fff; opacity: .9; padding: 8px 2px; }
.search-overlay__hint{ color:#fff; opacity:.75; margin-top: 8px; font-size: .95rem; }



/* Reduced oxforddriven */
@media (prefers-reduced-motion: reduce){
  .search-overlay,
  .nav-overlay{ transition: none !important; }
}


.search-item__pill {
  position: absolute;
  top: 8px;
  right: 12px;
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.2;
}

.search-item {
  position: relative;
}
.search-overlay__more {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
}
.search-overlay__summary, .search-overlay__summary a{color: #fff}

.search-overlay__list .type-page .search-item__link {background: #dfe6ea; color: #000}
.search-overlay__list .type-page .search-item__pill{background: #5f6b71}



/* Hide the header triggers while the SEARCH overlay is open */
body.search-open .floating-search,
body.search-open .mobile-menu{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity .2s ease, visibility 0s linear .2s, transform .2s ease;
}

.search-open .header-container {display: none}

/* Return to normal when search closes */
body:not(.search-open) .floating-search{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
  background: #fff;
  border-radius: 50%;
  color: #000
}

body:not(.search-open) .mobile-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
  border-radius: 50%;
  color: #000
}

/* Fly up and fade out when body has .scrolling */
.reveal-ready.scrolling .floating-search{
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  animation: floatSearchFlyOut 360ms cubic-bezier(.22,.61,.36,1) forwards;
  pointer-events: none; /* don't grab clicks while hidden */
}

/* When back at the top (no .scrolling), slide back in from top + fade */
.reveal-ready:not(.scrolling) .floating-search{
  will-change: transform, opacity;
  animation: floatSearchFlyIn 300ms cubic-bezier(.22,.61,.36,1) forwards;
  pointer-events: auto;
}

@keyframes floatSearchFlyOut{
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  35%  { opacity: 1; transform: translateY(-10px) scale(0.995); }
  100% { opacity: 0; transform: translateY(calc(-100% - 40px)) scale(0.98); }
  /* -100% = its own height; extra -40px guarantees it clears the top edge */
}

@keyframes floatSearchFlyIn{
  0%   { opacity: 0; transform: translateY(calc(-100% - 40px)) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced oxforddriven: just fade */
@media (prefers-reduced-motion: reduce){
  .reveal-ready.scrolling .floating-search{
    animation: floatSearchFadeOut 200ms ease forwards;
  }
  .reveal-ready:not(.scrolling) .floating-search{
    animation: floatSearchFadeIn 200ms ease forwards;
  }
  @keyframes floatSearchFadeOut{ from{opacity:1} to{opacity:0} }
  @keyframes floatSearchFadeIn { from{opacity:0} to{opacity:1} }
}

.footer-copyright {text-align: center;background: var(--wp--preset--color--dark);padding: 20px; margin: 0;
  color: #fff; border-top: solid 1px #fff;font-size: 0.825rem;display: flex;justify-content: space-between;align-items: center
}
.footer-copyright a {color: #fff; text-decoration: none}



 /* Overlay container */
 .hero-overlay {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: start;
  padding: min(6vw, 72px);
  color: rgb(255, 255, 255);
  z-index: 2;
  flex-direction: column;
  justify-content: center;

 }
.hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* ensures no distortion, fills container */
   object-position: center; /* keeps image centered */
   display: block;
 }
 .hero-image {
   position: relative;
   width: 100%;
   height: 100vh; 
   overflow: hidden;
 }
 
 .hero-icon img {
   height: 100px;
   width: 100px
 }
 /* Title + summary */
 .hero-title {
   font-size: clamp(2.2rem, 6vw, 5rem);
   line-height: 1.05;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 30px;
 }
 
 
 .grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));list-style: none; margin: 0; padding: 0}
 .wp-post-image {max-width: 100%; height: auto}
 
/** RESPONSIVENESS **/
 
 @media (max-width: 1260px) {
 .wp-block-cover:not(.alignwide):not(.alignfull) {
 max-width: var(--wp--style--global--content-size);
 margin-left: 20px;
 margin-right: 20px;
 border-radius: 10px;
 }
  .wp-block-columns .wp-block-cover:not(.alignwide):not(.alignfull), .wp-block-cover.alignfull .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--content-size);
  margin-left: 0;
  margin-right: 0;
  }
}
  
  

  
  @media (max-width: 980px) {
    body:not(.home) .wp-block-columns-is-layout-flex {margin: 0 20px}
  }



    @media (max-width: 860px){
      /* For the LCP element only */
      .reveal-up.lcp-candidate {
        opacity: 1;               /* ensure paint */
        transform: none;          /* avoid transform-delayed paint */
        transition: none;         /* no animation on first view */
        will-change: auto;        /* avoid forcing a new composite layer */
      }
      body.admin-bar .site-header{ top: 46px; }
      .swiper-nav {bottom: -40px; left: 0}
       
       .header-container {
         height: 68px;
       }
       
       .site-branding img.custom-logo {
         height: 35px
       }

       .floating-search svg {width: 30px}
       .footer {margin: 0 20px}
       .footer ul li {padding: 5px 0}


    } 


 /* ===== Minimal Gravity Forms Grid (Theme Framework compatible) ===== */
 .gfield--type-honeypot {position: absolute; top:-100px; opacity: 0;}
 h2.gform_submission_error {font-size: 23px;
   font-weight: 600;}
 .gform_required_legend {display: none}
 .gform_wrapper .gfield_description.gfield_validation_message {color: #b00; font-weight: 600}
 /* 12-col grid for each row container */
 .gform_wrapper .gform-grid-row,
 .gform_wrapper .gform_page .gform_page_fields .gform_fields {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 20px; /* space between fields */
 }
 
 /* Map GF width utility classes to grid spans */
 .gform_wrapper .gfield--width-full        { grid-column: span 12; }
 .gform_wrapper .gfield--width-three-quarter{ grid-column: span 9;  }
 .gform_wrapper .gfield--width-two-thirds  { grid-column: span 8;  }
 .gform_wrapper .gfield--width-half        { grid-column: span 6;  }
 .gform_wrapper .gfield--width-third       { grid-column: span 4;  }
 .gform_wrapper .gfield--width-quarter     { grid-column: span 3;  }
 
 /* Make individual fields grid items */
 .gform_wrapper .gform_fields > .gfield {
   min-width: 0; /* prevent overflow */
 }
 
 /* Complex fields (e.g., Name) use their own grid */
 .gform_wrapper .ginput_complex.gform-grid-row {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 16px;
 }
 
 /* Equal split for complex sub-fields when size is "auto" */
 .gform_wrapper .ginput_complex .gform-grid-col--size-auto { grid-column: span 6; }
 /* If GF outputs explicit sizes, support them too */
 .gform_wrapper .ginput_complex .gform-grid-col--size-1 { grid-column: span 1; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-2 { grid-column: span 2; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-3 { grid-column: span 3; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-4 { grid-column: span 4; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-5 { grid-column: span 5; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-6 { grid-column: span 6; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-7 { grid-column: span 7; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-8 { grid-column: span 8; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-9 { grid-column: span 9; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-10{ grid-column: span 10; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-11{ grid-column: span 11; }
 .gform_wrapper .ginput_complex .gform-grid-col--size-12{ grid-column: span 12; }
 
 /* Page footers/buttons line up under the grid */
 .gform_wrapper .gform-page-footer,
 .gform_wrapper .gform_page_footer {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
   margin-top: 20px;
 }
 
 /* ===== Basic input styling you can customize ===== */
 .gform_wrapper input[type="text"],
 .gform_wrapper input[type="email"],
 .gform_wrapper input[type="url"],
 .gform_wrapper input[type="tel"],
 .gform_wrapper input[type="number"],
 .gform_wrapper input[type="password"],
 .gform_wrapper input[type="date"],
 .gform_wrapper textarea,
 .gform_wrapper select {
   all: unset; 
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #d6d6d6;
   border-radius: 8px;
   font-size: 16px;
   line-height: 1.4;
   box-sizing: border-box;
   background: #fff;

 }
 
 .gform_wrapper select {
padding-right: 2.5em;    /* make room for arrow */
 background: #fff url("data:image/svg+xml;utf8,<svg fill='%23333' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.7em center;
 background-size: 1em;
 
  }
  
 .gform_wrapper .gform_page .gform_page_fields .gform_fields .gfield--type-section {
   grid-column: 1 / -1; /* spans the entire grid */
   width: 100%;         /* ensures full width */
 }
 
 .gfield.number-nights {
   width: 100px
 }
 
 .gfield--width-half.width-sm {
   grid-column: span 3;
   
 }
 
 .gfield--width-half.width-sm.width-sm-last:after {
   grid-column: span 6;
 }
 
 .gform_wrapper input:focus,
 .gform_wrapper textarea:focus,
 .gform_wrapper select:focus {
   outline: none;
   border-color: #003376;              /* match your theme color */
   box-shadow: 0 0 0 3px rgba(0,51,118,.15);
 }
 .ginput_container_number .small {width: 90px !important}
 
 /* Labels & sublabels spacing */
 .gform_wrapper .gfield_label { font-weight: 600; margin-bottom: 6px; display:block; }
 .gform_wrapper .gform-field-label--type-sub { font-size: 12px; color: #666; margin-top: 6px; display:block; }
 
 /* Sections */
 .gform_wrapper .gsection .gsection_title { font-size: 20px; margin: 10px 0; }
 
 /* Datepicker icon alignment */
 .gform_wrapper .ginput_container_date { display: flex; align-items: center; gap: 8px; }
 
 /* Validation/help text */
 .gform_wrapper .gfield_description { font-size: 13px; color: #666; margin-top: 6px; }
 fieldset {
   border: none;
   padding: 0;
   margin: 0
 }
 .gf_progressbar {background: #efefef; border-radius: 15px; margin-bottom: 20px}
 .gform-theme--framework .gf_progressbar .percentbar_blue {
 background: #003376;
 border-radius: 15px;
 color: #fff;
padding: 1px 15px 0; font-size: 0.825rem}
 
 .gsection_title {
   margin: 0;
   padding: 0
 }
 
.gform_next_button, .gform_previous_button, .gform_button  {
   all: unset; /* removes all inherited Gravity Forms button styles */
   display: inline-block;
   cursor: pointer;
   padding: 10px 24px;
   border: 1px solid #000; 
   border-radius: 30px;
   font-size: 16px;
   line-height: 1.2;
   background: transparent;
   color: #000;
   text-align: center;
   transition: all 0.2s ease;
 }
 
 .gform_wrapper input[type="submit"] {
   background: var(--wp--preset--color--primary);
   color: #fff
   
 }
 
 .gsection {width: 100%}
 /* ===== Responsive: stack to 1 column on small screens ===== */
 @media (max-width: 640px) {
   .gform_wrapper .gfield--width-full,
   .gform_wrapper .gfield--width-three-quarter,
   .gform_wrapper .gfield--width-two-thirds,
   .gform_wrapper .gfield--width-half,
   .gform_wrapper .gfield--width-third,
   .gform_wrapper .gfield--width-quarter {
     grid-column: span 12;
   }
 
   .gform_wrapper .ginput_complex .gform-grid-col--size-auto { grid-column: span 12; }
   .gform_wrapper .gform-page-footer,
   .gform_wrapper .gform_page_footer { justify-content: stretch; }
   .gform_wrapper .gform-page-footer .button,
   .gform_wrapper .gform_page_footer .button { width: 100%; }
 }


/* ============================================================
   HOME PAGE
   Targets (WordPress adds this class on the front page).
   ============================================================ */

/* Home page base */
{
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter);
}

.wp-block-group.hero-card {
  margin: 0 !important;
  max-width: 420px !important;
}

.oxforddrive-js .wp-block-columns {
  opacity: 1;
  transform: none;
}

.wp-block-columns {
  gap: clamp(20px, 3vw, 40px);
}

.home-section:not(.home-hero) {
  padding-inline: var(--pad);
}
.home-section > .section-shell,
.home-section > .wp-block-group {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}
/* Section-shells inside padded non-hero sections: parent already provides side spacing */
.home-section:not(.home-hero) > .section-shell {
  width: min(var(--wp--style--global--content-size), 100%);
}

/* --- Shell (centered container) --- */
.hero-shell,
.section-shell {
  width: min(var(--wp--style--global--content-size), 100% - 2 * var(--pad));
  margin-inline: auto;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar {
  background: var(--wp--preset--color--ink);
  color: rgba(255,255,255,.82);
  font-size: 0.78rem;
  letter-spacing: .03em;
  padding: 9px var(--pad);
  overflow: hidden;
}

.announce-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.announce-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

.announce-divider { opacity: .35; }
.announce-phone   { color: inherit; text-decoration: none; font-weight: 500; }
.announce-phone:hover { color: var(--wp--preset--color--primary); }
.announce-text    { color: #fff; font-weight: 500; }


/* ============================================================
   GLOBAL HEADER overrides for home page
   ============================================================ */
+ footer,
~ .site-header { /* already handled globally */ }


/* ============================================================
   HERO
   ============================================================ */
.home-hero {
  padding: clamp(48px, 8vw, 100px) var(--pad) 0;
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--bg);
}

/* Absolutely positioned hero photo — sits behind right column */
.hero-photo {
  position: absolute;
  right: clamp(20px, 3vw, 80px);
  top: clamp(60px, 5vw, 130px);
  width: clamp(360px, 42vw, 580px);
  aspect-ratio: 4 / 5;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--wp--preset--color--bg) 40%, transparent);
}

/* Hero columns (wp:columns.hero-inner) */
.hero-inner {
  max-width: var(--wp--style--global--content-size) !important;
  margin-inline: auto !important;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Right column: image fills full height, cards overlay bottom ── */

/* Column is the stacking context */
.hero-inner > .wp-block-column:not(.hero-copy) {
  position: relative;
}

/* Figure fills the column — removes default block gap below it */
.hero-inner > .wp-block-column:not(.hero-copy) > figure.wp-block-image {
  display: block;
  margin: 0;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  line-height: 0;
}

/* Image stretches to fill, tall portrait ratio */
.hero-inner > .wp-block-column:not(.hero-copy) > figure.wp-block-image img {
  width: 100%;
  height: clamp(380px, 52vw, 640px);
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}

/* Cards hang off the LEFT edge of the image */
.hero-right {
  position: absolute;
  bottom: 16px;
  /* negative left = cards extend beyond the image's left edge */
  left: clamp(-70px, -9%, -10px);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  margin: 0;
}

.hero-h1 {
  font-size: clamp(54px, 9.2vw, 124px);
  letter-spacing: -.02em;
  line-height: 1;
  font-weight: 400;
  font-family: var(--wp--preset--font-family--dm-serif-display);
  margin: 0;
  color: var(--wp--preset--color--ink);
}

/* italic span inside h1 */
.hero-h1 .it,
.it {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-weight: 400;
  color: var(--wp--preset--color--primary);
  font-style: italic;
}

/* em tags inside headings on home → accent colour */
h1 em,
h2 em,
h3 em {
  color: var(--wp--preset--color--primary);
  font-style: italic;
  font-family: var(--wp--preset--font-family--dm-serif-display);
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--wp--preset--color--ink-2);
  max-width: 46ch;
  margin-top: 28px;
  line-height: 1.55;
}

/* CTA row */
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Hero cards — glass style, no top border */
.hero-card {
  background: color-mix(in oklab, var(--wp--preset--color--paper) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.5) inset, 0 24px 60px -28px rgba(20,12,6,.10);
}

/* Pass rate card — top row */
.hero-card .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.hero-card .pct {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 400;
  font-size: 92px;
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--primary);
}

.hero-card .pct sup {
  font-size: 34px;
  vertical-align: top;
  line-height: 1;
  margin-left: -2px;
  font-family: var(--wp--preset--font-family--inter);
}

.hero-card .lbl {
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  max-width: 14ch;
  text-align: right;
}

.hero-card .desc {
  font-size: 14px;
  color: var(--wp--preset--color--ink-2);
  line-height: 1.5;
}

/* Google reviews card */
.hero-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hero-google .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Google "G" mark — conic-gradient circle with G letter */
.g-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 25% 50%, #34A853 50% 75%, #4285F4 75%);
  position: relative;
  flex: none;
}

.g-mark::after {
  content: "G";
  position: absolute;
  inset: 3px;
  background: var(--wp--preset--color--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 800;
  font-size: 12px;
  color: #4285F4;
  letter-spacing: -.02em;
}

.review-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--ink);
  line-height: 1.1;
}

.hero-card .label {
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin-top: 2px;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
  color: #FBBC05;
  margin-top: 3px;
}

.review-stars svg { width: 14px; height: 14px; }

.score-num {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}

/* Stat numbers inside hero cards (wp:paragraph.hero-card__num) */
.hero-card__num {
  font-family: var(--wp--preset--font-family--inter);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  color: var(--wp--preset--color--primary);
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Stat labels inside hero cards (wp:paragraph.hero-card__label) */
.hero-card__label {
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

/* Hero CTA buttons */
.hero-btns {
  margin: 28px 0 0 !important;
}

/* ── Hero strip (landscape image below hero/floor) ── */
.hero-strip {
  overflow: hidden;
  max-width: 100% !important;
  padding: 0;
}

.hero-strip figure.wp-block-image {
  margin: 0;
}

.hero-strip img {
  width: 100%;
  height: clamp(280px, 35vw, 420px);
  object-fit: cover;
  display: block;
  border-radius: 14px;

}

/* Hero floor — full-bleed dark stats bar */
.hero-floor {
  background: var(--wp--preset--color--ink) !important;
  color: #fff;
  width: 100% !important;
  border-radius: 14px !important;
  min-height: unset !important;
  padding: clamp(28px, 3.5vw, 48px) var(--pad) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 30, 60, .35);
  margin-bottom: 80px;
  margin-top: 80px
}


.hero-floor .wp-block-column:not(:first-child) {border-left: solid 1px rgba(255, 255, 255, 0.464); padding-left: 40px}

.hero-floor .wp-block-cover__inner-container {padding: 0 !important}
/* floor-stat__num / __lbl — defined with !important overrides in the reference-design block below */


/* ============================================================
   BUTTONS — matches reference exactly
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--inter);
  line-height: 1;
}

.btn .arrow {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  transition: transform .25s ease;
}

.btn:hover .arrow { transform: translateX(3px); }

/* ── PHP template buttons (a.btn or button.btn only — NOT divs) ── */
a.btn-primary, button.btn-primary {
  background: var(--wp--preset--color--ink);
  color: #fff;
}
a.btn-primary:hover, button.btn-primary:hover {
  background: var(--navy-deep, #142141);
  color: #fff;
}

a.btn-ghost, button.btn-ghost {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 28%, transparent);
}
a.btn-ghost:hover, button.btn-ghost:hover {
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-color: var(--wp--preset--color--ink);
}

a.btn-accent, button.btn-accent { background: var(--wp--preset--color--primary); color: #fff; }
a.btn-accent:hover, button.btn-accent:hover { background: var(--accent-2, #9c7028); }

.btn-sm { padding: 10px 16px; font-size: 13px; }

a.btn-wa, button.btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(37,211,102,.5);
}
a.btn-wa:hover, button.btn-wa:hover { background: var(--wa-dark, #1FAE56); }

a.btn-wa .wa-icon, a.btn-wa svg.wa-icon,
button.btn-wa .wa-icon, button.btn-wa svg.wa-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

a.btn-outline, button.btn-outline {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 28%, transparent);
}
a.btn-outline:hover, button.btn-outline:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* ── Reset the wp-block-button wrapper div — no background, no shape ── */
/* All visual styling must live on the inner <a> (.wp-block-button__link), not this div */
div.wp-block-button {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* WhatsApp floating action button */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: #fff;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 18px 36px -10px rgba(37,211,102,.5), 0 0 0 4px rgba(37,211,102,.18);
  transition: transform .2s ease, background .2s ease;
}

.wa-fab:hover { background: var(--wa-dark, #1FAE56); transform: translateY(-2px); }
.wa-fab svg   { width: 22px; height: 22px; flex: none; }

@media (max-width: 860px) {
  .wa-fab { padding: 14px; right: 16px; bottom: 16px; gap: 0; border-radius: 50%; }
  .wa-fab .lbl { display: none; }
}


/* ============================================================
   SECTION COMMON
   ============================================================ */


/* Hero has its own top padding and NO bottom padding — floor is flush */


.sec-head {
  max-width: 64ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.sec-head h2 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 16px;
  padding: 0;
}

.sec-head p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
  max-width: 58ch;
}

.sec-head--light h2 { color: #fff; }
.sec-head--light p  { color: rgba(255,255,255,.75); }


/* ============================================================
   SERVICES
   ============================================================ */
.home-services { background: var(--wp--preset--color--bg); }

/* Transmission cards */
.trans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

.trans-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.trans-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26,42,79,.08);
}

.trans-card h3.wp-block-heading {
  margin: 0
}

.trans-card--featured {
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-color: transparent;
}

.trans-card--featured p { color: rgba(255,255,255,.78); }

.trans-card h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.trans-card p { font-size: .92rem; line-height: 1.6; color: var(--wp--preset--color--ink-2); margin: 0; }

.trans-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.trans-tag--manual { background: rgba(26,42,79,.08); color: var(--wp--preset--color--ink); }
.trans-tag--auto   { background: rgba(184,137,58,.2); color: var(--wp--preset--color--primary); }

.pop-tag {
  background: var(--wp--preset--color--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .65rem;
  letter-spacing: .04em;
}

.trans-car {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.trans-card--featured .trans-car { border-color: rgba(255,255,255,.12); }
.trans-car svg { width: 64px; flex-shrink: 0; }
.trans-car span { font-size: .78rem; color: var(--wp--preset--color--mute); }
.trans-card--featured .trans-car span { color: rgba(255,255,255,.55); }

.trans-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.price-num {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--wp--preset--color--primary);
}

.price-num small { font-size: .7rem; color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--inter); }

.trans-book {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  border: 1.5px solid var(--wp--preset--color--ink);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.trans-card--featured .trans-book {
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

.trans-book:hover { background: var(--wp--preset--color--ink); color: #fff; }
.trans-card--featured .trans-book:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }

/* ── Section intro heading (2-col wp:columns pattern) ────────────
   Used for section headings: left = h2 serif, right = description p
   Apply class "sec-intro" to the wp:columns block
   ───────────────────────────────────────────────────────────────── */
.sec-intro {
  max-width: var(--wp--style--global--content-size) !important;
  margin: clamp(56px, 7vw, 96px) auto !important;
  align-items: flex-end;
}

.sec-intro h2.wp-block-heading,
.sec-intro h2 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--ink);
  margin: 0;
  padding: 0;
  max-width: 590px
}

.sec-intro h2 em {
  font-style: italic;
  color: var(--wp--preset--color--primary);
}

.sec-intro .wp-block-paragraph,
.sec-intro p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
  padding: 0;
}

/* Dark section heading overrides */
.home-areas .sec-intro h2,
.home-areas .sec-intro h2 em { color: #fff; }
.home-areas .sec-intro p     { color: rgba(255,255,255,.6); }

/* ── Transmission block classes ──────────────────────────────── */
.trans-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Badge row: tag left, descriptor right ── */
.badge-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}

/* The tag pill */
.ttag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 0.6rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1.4;
  margin: 0;
  flex-shrink: 0;
}

.ttag.manual {
  background: var(--wp--preset--color--ink);
  color: #fff;
}

.ttag.auto {
  background: var(--wp--preset--color--primary);
  color: #fff;
}

/* Descriptor text — right side of badge row (both cards) */
.badge-row p:not(.ttag) {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 0.65rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 0;
  margin-left: auto;    /* push to right edge regardless of flex layout */
  text-align: right;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

/* ── Trans card ── */
.trans-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  padding: 28px;
  padding-bottom: 80px;         /* room for absolute button */
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  flex: 1;
}

.trans-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26,42,79,.1);
}

/* Heading: serif, left-aligned */
.trans-card h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem) !important;
  font-weight: 400 !important;
  margin: 0; padding: 0;
  color: var(--wp--preset--color--ink);
  text-align: left !important;
}

.trans-card p {
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
}

/* Car info list: styled as a card */
.trans-card .wp-block-list {
  list-style: none;
  padding: 14px 16px;
  margin: 0 0 30px 0;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 6%, transparent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%
}

.trans-card .wp-block-list li {
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink-2);
  padding: 0;
  margin: 0;
  position: static;
}

.trans-card .wp-block-list li:first-child {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  font-size: 0.88rem;
}

.trans-card .wp-block-list li::before { content: none; }

/* Price: large serif, pushed to bottom */
.trans-card .price-num {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin-top: auto;
  line-height: 1;
  padding: 0;
}

.trans-card .price-num small {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--wp--preset--color--mute);
}

/* Button: text link style, anchored bottom-right */
.trans-card .wp-block-buttons {
  position: absolute !important;
  bottom: 34px;
  right: 28px;
  margin: 0 !important;
}

.trans-card .wp-block-button .wp-block-button__link {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--wp--preset--color--primary) !important;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Text-only arrow — suppress the global btn-primary SVG ::after */
.trans-card .wp-block-button .wp-block-button__link::after {
  content: ' →' !important;
  width: auto !important;
  height: auto !important;
  background-image: none !important;
  margin-left: 4px;
  display: inline !important;
}

/* Price: larger */
.trans-card .price-num {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem) !important;
}

/* ── Auto variant — same card style as manual, just different badge ── */
.trans-card.trans-card--auto {
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--line);
}

/* ── Course cards ──────────────────────────────────────────── */
.course-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-card h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0; padding: 0;
  color: var(--wp--preset--color--ink);
}

.course-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
}

.course-card ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-card li {
  font-size: 0.86rem;
  color: var(--wp--preset--color--ink-2);
  padding-left: 1.4rem;
  position: relative;
  margin: 0;
}

.course-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

.course-card--intensive {
  background: var(--wp--preset--color--ink);
  border-color: transparent;
}

.course-card--intensive h3,
.course-card--intensive p,
.course-card--intensive li { color: rgba(255,255,255,.82); }

.course-card--intensive li::before { color: var(--wp--preset--color--accent-soft); }

.course-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--wp--preset--color--primary);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
}

.course-duration {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 0;
}

.course-card--intensive .course-duration {
  color: rgba(255,255,255,.45);
}

/* Dark card button overrides — secondary shows white on dark bg */
.trans-card--auto .btn-secondary .wp-block-button__link,
.course-card--intensive .btn-secondary .wp-block-button__link {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.trans-card--auto .btn-secondary .wp-block-button__link:hover,
.course-card--intensive .btn-secondary .wp-block-button__link:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ── Courses grid ── */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--wp--style--global--content-size);
  margin: clamp(32px, 4vw, 56px) auto 0 !important;
}

/* ── Approach section ── */

.approach-copy p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
}

.approach-copy .wp-block-list {
  margin-top: 8px;
}

.approach-copy .wp-block-list li {
  font-size: 0.9rem;
  color: var(--wp--preset--color--ink-2);
  margin-bottom: 0.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.stat-item:first-child { border-top: 1px solid var(--wp--preset--color--line); }

.stat-num {
  font-family: var(--wp--preset--font-family--inter);
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 400;
  color: var(--wp--preset--color--primary);
  line-height: 1;
  margin: 0; padding: 0;
}

.stat-label {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink-2);
  margin: 0; padding: 0;
}

/* ── Areas section ── */
.home-areas { background: var(--wp--preset--color--ink); }

.home-areas h2,
.home-areas h3 { color: #fff; }

.home-areas .wp-block-paragraph { color: rgba(255,255,255,.65); }

.home-areas .areas-grid {
  max-width: var(--wp--style--global--content-size);
  margin: clamp(32px,4vw,56px) auto 0 !important;
}

.area-item h3 {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
  margin: 0;
  color: #fff;
}

.area-item p {
  color: rgba(255,255,255,.45);
  font-size: 0.8rem;
  margin: 0;
}

/* ── Reviews section ── */
.home-reviews { background: var(--wp--preset--color--bg); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--wp--style--global--content-size);
  margin: clamp(32px,4vw,56px) auto 0 !important;
}

.review-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-stars {
  color: #FBBC05;
  font-size: 1.05rem;
  margin: 0; padding: 0;
  letter-spacing: 1px;
}

.review-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  font-style: italic;
  margin: 0; padding: 0;
  flex: 1;
}

.review-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wp--preset--color--mute);
  margin: 0; padding: 0;
}

/* ============================================================
   [faq-list] SHORTCODE  –  animated accordion
   ============================================================ */

.faq-sc {
  border-top: 1px solid var(--wp--preset--color--line);
}

/* Grouped FAQ sections ([faq-sections]) */
.faq-sections .faq-sec + .faq-sec {
  margin-top: clamp(36px, 5vw, 64px);
}

.faq-sec__title {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 18px;
  padding: 0;
  color: var(--ap-ink, var(--wp--preset--color--ink));
}

.faq-sc__item {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Question row */
.faq-sc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(20px, 2.8vw, 30px) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-sc__q-text {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* Icon */
.faq-sc__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  position: relative;
}

.faq-sc__plus,
.faq-sc__x {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease;
}

.faq-sc__x { opacity: 0; }

.faq-sc__item.is-open .faq-sc__plus { opacity: 0; }
.faq-sc__item.is-open .faq-sc__x   { opacity: 1; }

/* Animated body — CSS grid trick, no JS height measurement */
.faq-sc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1);
}

.faq-sc__item.is-open .faq-sc__body {
  grid-template-rows: 1fr;
}

.faq-sc__body-inner {
  overflow: hidden;
}

/* Answer text */
.faq-sc__body-inner p {
  margin: 0 0 .7em;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  line-height: 1.75;
  color: var(--wp--preset--color--ink-2);
  max-width: 72ch;
}

.faq-sc__body-inner p:last-child {
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

/* Reduced motion */
/* The homepage FAQ sits in an alignwide group, which is full-bleed on
   narrow screens — heading, intro and questions all ran to the very edge
   (and the +/- icons touched the right edge). Give that section the same
   gutter as the rest of the page so it lines up with everything else. */
@media (max-width: 781px) {
  .wp-block-group.alignwide:has(.faq-sc) {
    padding-inline: var(--pad, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-sc__body { transition: none; }
  .faq-sc__plus, .faq-sc__x { transition: none; }
}


/* ── CTA band ── */
.home-cta-band {
  background: linear-gradient(135deg, var(--wp--preset--color--navy-deep) 0%, var(--wp--preset--color--ink) 100%);
  position: relative;
  overflow: hidden;
}

.home-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 50%, rgba(184,137,58,.14) 0%, transparent 60%);
  pointer-events: none;
}

.home-cta-band h2 {
  color: #fff;
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0; padding: 0;
}

.home-cta-band .wp-block-paragraph {
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.home-cta-band .wp-block-buttons {
  margin: 24px auto 0 !important;
}

/* Service types grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  overflow: hidden;
}

.svc-item {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--wp--preset--color--line);
  transition: background .2s ease;
}

.svc-item:last-child { border-right: none; }
.svc-item:hover { background: var(--wp--preset--color--paper); }

.svc-code {
  font-family: var(--wp--preset--font-family--inter);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--wp--preset--color--mute);
}

.svc-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(184,137,58,.12);
  color: var(--wp--preset--color--primary);
  align-self: flex-start;
}

.svc-tag--dark { background: var(--wp--preset--color--ink); color: #fff; }

.svc-item h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  color: var(--wp--preset--color--ink);
}

.svc-item p {
  font-size: .85rem;
  line-height: 1.58;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
  flex: 1;
}

.svc-price {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.15rem;
  color: var(--wp--preset--color--primary);
  margin-top: auto;
  font-weight: 400;
}

.svc-price small { font-size: .7rem; color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--inter); }


/* ============================================================
   APPROACH
   ============================================================ */

/* ── Approach split — card wrapper, image fills right edge ── */
.approach-split {
  gap: 0 !important;                                   /* no gap — padding is on text column */
  align-items: stretch !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;                         /* clips image corners to card radius */
  background: var(--wp--preset--color--paper) !important;
  padding: 0 !important;
}

.approach-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);                    /* padding only on text side */
}

.approach-copy h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.016em;
  color: var(--wp--preset--color--ink);
  margin: 0;
  padding: 0;
}

.approach-copy p {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-2);
  margin: 0;
}

.approach-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approach-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-2);
}

.approach-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
}

/* ── Image column — cover fills full height, radius on right side ── */
.approach-img {
  display: flex;
  flex-direction: column;
}

/* Cover fills the approach-img column entirely */
.approach-img .wp-block-cover {
  flex: 1;
  min-height: clamp(380px, 55vw, 640px);
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;   /* parent overflow:hidden clips corners */
  overflow: hidden;
}

.approach-img .wp-block-cover .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

/* .img-placeholder, .approach-caption, .approach-caption-big, .approach-location
   removed — no longer used in any page content */


/* ============================================================
   AREAS
   ============================================================ */
.home-areas { background: var(--wp--preset--color--ink); }
.home-areas .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }

.area-aside {
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 108px;
  overflow: hidden;
  /* align-self: flex-start stops the element stretching to fill the column,
     so the parent column is taller than this element — required for sticky */
  align-self: flex-start;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  overflow: hidden;
}

.area-item {
  background: rgba(255,255,255,.03);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .15s ease;
}

.area-item:hover { background: rgba(255,255,255,.07); }

.area-name {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
}

.area-meta {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}


/* ============================================================
   REVIEWS (placeholder)
   ============================================================ */
.home-reviews { background: var(--wp--preset--color--bg); }

.reviews-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.reviews-score-block {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--r);
  padding: 24px 32px;
}

.rp-score {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

.rp-stars {
  display: flex;
  gap: 3px;
  color: #FBBC05;
}

.rp-stars svg { width: 18px; height: 18px; }

.rp-count  { font-size: .82rem; color: var(--wp--preset--color--mute); margin-top: 4px; }
.rp-source { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--mute); }

.reviews-note {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-2);
  max-width: 48ch;
  margin: 0;
}

.reviews-note a { color: var(--wp--preset--color--primary); text-decoration: underline; }


/* ============================================================
   FAQ
   ============================================================ */
.home-faq { background: var(--wp--preset--color--bg); }

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--wp--preset--color--line);
}

.faq-item {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.5vw, 26px) 0;
  font-family: var(--wp--preset--font-family--inter);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-a {
  padding-bottom: clamp(14px, 2vw, 22px);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-2);
}

.faq-a p { margin: 0 0 .75em; }
.faq-a p:last-child { margin-bottom: 0; }


/* ============================================================
   CTA
   ============================================================ */
.home-cta {
  background: linear-gradient(135deg, #142141 0%, #1e3460 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative pattern */
.home-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(184,137,58,.12) 0%, transparent 55%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
}

.cta-inner h2 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: #fff;
  margin: 0;
  padding: 0;
}

.cta-italic { font-style: italic; color: var(--wp--preset--color--primary); }

.cta-inner > p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  margin: 0;
  max-width: 52ch;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* home-cta: override btn-primary to use accent (amber) on dark bg */
.home-cta .wp-block-button.btn-primary .wp-block-button__link {
  background: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary) !important;
}


/* ============================================================
   LOCATIONS LIST  [locations-list]
   ============================================================ */

.locations-list {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.loc-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1.4fr;
  align-items: center;
  padding: clamp( 12px,  .8vw, 24px) 0;
  border-top: 1px solid var(--wp--preset--color--line);
  gap: 0 20px;
}

.loc-name {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

.loc-postcode {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
}

.loc-badge {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  text-align: right;
}

/* mobile: name spans full width, postcode + badge share a row below */
@media (max-width: 620px) {
  .loc-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 6px;
    padding: 20px 0;
  }
  .loc-name {
    grid-column: 1 / -1;
    font-size: clamp(18px, 5vw, 24px);
  }
  .loc-badge {
    text-align: right;
  }
}

/* ============================================================
   LESSONS GRID  [lessons-grid]
   Row 1: 3 wide cards  |  Row 2: 4 narrow cards
   ============================================================ */

.lessons-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Card base ── */
.lg-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--wp--preset--color--paper);
}

/* Size classes — set via shortcode size="wide|narrow" */
.lg-card--wide   { grid-column: span 4; }
.lg-card--narrow { grid-column: span 3; }

/* ── Card header: tag + optional badge ── */
.lg-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  min-height: 24px;
}

.lg-tag {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}

/* ── Badges ── */
.lg-badge {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.lg-badge--popular {
  background: color-mix(in oklab, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--paper));
  color: var(--wp--preset--color--accent-2);
}

.lg-badge--fast {
  background: var(--wp--preset--color--ink);
  color: #fff;
}

/* ── Title ── */
.lg-card__title {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(22px, 1.9vw, 30px) !important;
  font-weight: 400 !important;
  color: var(--wp--preset--color--ink) !important;
  line-height: 1.2 !important;
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0 !important;
  padding: 0 !important;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ── Description ── */
.lg-card__desc {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-2);
  flex: 1;
  margin: 0;
  padding: 0;
}

/* ── Divider ── */
.lg-card__rule {
  border: none;
  border-top: 1px solid var(--wp--preset--color--line);
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(16px, 2vw, 24px);
}

/* ── Footer: price left, CTA right ── */
.lg-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lg-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.lg-price__pre {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

.lg-price__num {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

.lg-price__unit {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  align-self: center;
}

.lg-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  background: none;
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 22%, transparent);
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.lg-cta:hover {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .lessons-grid { grid-template-columns: repeat(2, 1fr); }
  .lg-card--wide,
  .lg-card--narrow { grid-column: span 1; }
  /* Centre a lone last card */
  .lg-card:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 540px) {
  .lessons-grid { grid-template-columns: 1fr; border-radius: 10px; }
  .lg-card--wide,
  .lg-card--narrow,
  .lg-card:last-child { grid-column: span 1; }
}

/* ============================================================
   LG-CARD-GROUP: Gutenberg Group + Columns wrapper for cards
   Admin edits each card in its own Gutenberg column.
   ============================================================ */

.lg-card-group {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  background: var(--wp--preset--color--line); /* 1px gaps between rows become lines */
}

/* Each columns-row: gap + background creates 1px column dividers */
.lg-card-group .wp-block-columns {
  gap: 1px !important;
  background: var(--wp--preset--color--line) !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  align-items: stretch !important;
}

/* Each column becomes a flex column so card fills it */
.lg-card-group .wp-block-column {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card stretches to fill column height */
.lg-card-group .lg-card {
  flex: 1 !important;
}

/* Tablet: 2-col wrap */
@media (max-width: 960px) {
  .lg-card-group .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap;
  }
  .lg-card-group .wp-block-columns.is-not-stacked-on-mobile .wp-block-column {
    flex: 0 0 calc(50% - 1px) !important;
  }
}

/* Mobile: single column */
@media (max-width: 540px) {
  .lg-card-group { border-radius: 10px; }
  .lg-card-group .wp-block-columns.is-not-stacked-on-mobile .wp-block-column {
    flex: 0 0 100% !important;
  }
}

/* ============================================================
   BOOKING WIDGET  [booking]  v2
   Flow: Vehicle Type → Course → Your Details → Stripe deposit
   ============================================================ */

/* ── Outer wrapper ── */
.bk-wrap {
  max-width: var(--wp--style--global--content-size);
  margin: 40px auto 0;
}

/* ── Card shell — no border, no padding (page section provides both) ── */
.bk-box {
  background: var(--wp--preset--color--paper);
  border: none;
  border-radius: 16px;
  padding: 0;
}

/* ── Step wrapper ── */
.bk-step {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Step header ── */
.bk-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
}

.bk-step-title {
  flex: 1;
  min-width: 0;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(1.2rem, 3.5vw, 1.85rem) !important;
  font-weight: 400 !important;
  color: var(--wp--preset--color--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* ── Step progress dots ── */
.bk-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bk-stepper__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  transition: background 0.2s;
}
.bk-stepper__dot.is-active {
  background: var(--wp--preset--color--primary);
  width: 22px;
  border-radius: 4px;
}
.bk-stepper__dot.is-done {
  background: color-mix(in oklab, var(--wp--preset--color--ink) 35%, transparent);
}

/* ── Back button ── */
.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--mute);
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
}
.bk-back svg { width: 14px; height: 14px; }
.bk-back:hover { color: var(--wp--preset--color--ink); }

/* ── Subtitle (e.g. selected category name) ── */
.bk-step-subtitle {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  margin: -16px 0 0;
}

/* ── Initial loading state ── */
.bk-loading-init {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  color: var(--wp--preset--color--mute);
  text-align: center;
  padding: 48px 0;
}

/* ── Empty state ── */
.bk-empty {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.95rem;
  color: var(--wp--preset--color--mute);
  text-align: center;
  padding: 24px 0;
  margin: 0;
}


/* =================================================================
   CARDS — shared base
================================================================= */

.bk-cards {
  display: grid;
  gap: 14px;
}

.bk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--wp--preset--color--paper);
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  outline: none;
}
.bk-card:hover {
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 35%, transparent);
  box-shadow: 0 4px 16px -4px color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
}
.bk-card:focus-visible {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--primary) 25%, transparent);
}
.bk-card:active { transform: scale(0.985); }

.bk-card__title {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}

.bk-card__desc {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  color: var(--wp--preset--color--ink-2);
  line-height: 1.55;
}


/* =================================================================
   STEP 1 — Vehicle Type cards (2-up)
================================================================= */

.bk-cards--type {
  grid-template-columns: repeat(2, 1fr);
}

.bk-card--type {
  /* extra right padding clears the 28px radio circle at right:20px */
  padding: 32px 68px 32px 28px;
  align-items: flex-start;
}

.bk-card--type .bk-card__title {
  font-size: 1.2rem;
}

.bk-card--type::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 18%, transparent);
  transition: border-color 0.15s, background 0.15s;
}
.bk-card--type:hover::after {
  border-color: var(--wp--preset--color--primary);
  background: color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent);
}

/* Transmission not offered by any instructor */
.bk-card--off,
.bk-card--off:hover {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
  box-shadow: none;
  transform: none;
}

/* "Existing students only" badge on approval-gated course types */
.bk-card__gatebadge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  background: color-mix(in oklab, var(--wp--preset--color--primary) 18%, transparent);
}

/* Approval gate failure notice */
.bk-coverage-notice--fail {
  margin-top: 20px;
}

#bk-gate-fail .bk-btn {
  margin-top: 16px;
}


/* =================================================================
   STEP 2 — Course cards (grid, 1–3 columns)
================================================================= */

.bk-cards--course {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bk-card--course {
  padding: 20px 22px 18px;
}

.bk-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.bk-card__price {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

.bk-card__dur {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.75rem;
  color: var(--wp--preset--color--mute);
  font-weight: 400;
}

.bk-card__deposit {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  background: color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
  width: fit-content;
}


/* =================================================================
   STEP 3 — Your Details (form)
================================================================= */

/* ── Summary bar at top of step 3 ── */
.bk-summary-bar {
  display: flex;
  align-items: flex-start;   /* both columns align to top */
  gap: 16px;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.84rem;
}

/* Left breadcrumb — wraps across as many lines as needed */
.bk-summary-bar__left {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 4px;
  min-width: 0;
}

/* Right price — never wraps, always top-right */
.bk-summary-bar__right {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-align: right;
  white-space: nowrap;
}

.bk-summary-bar__chev { color: var(--wp--preset--color--mute); }
.bk-summary-bar__cat  { font-weight: 600; color: var(--wp--preset--color--ink); }
.bk-summary-bar__svc  { color: var(--wp--preset--color--ink-2); }
.bk-summary-bar__time { color: var(--wp--preset--color--ink-2); }

/* ── Form ── */
.bk-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bk-field {
  display: flex;
  flex-direction: column;
}

.bk-label {
  display: block;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin-bottom: 9px;
}
.bk-label span { color: var(--wp--preset--color--primary); }

/* Shared input / select */
.bk-sel-wrap { position: relative; }
.bk-inp-wrap { position: relative; }

.bk-sel,
.bk-inp {
  width: 100%;
  box-sizing: border-box;
  background: var(--wp--preset--color--paper);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 16%, transparent);
  border-radius: 12px;
  padding: 15px 48px 15px 18px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.bk-inp { cursor: text; }
.bk-inp::placeholder { color: var(--wp--preset--color--mute); }
.bk-sel:focus,
.bk-inp:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 40%, transparent);
}

/* Trailing icons */
.bk-chevron,
.bk-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--wp--preset--color--mute);
  pointer-events: none;
}

/* =================================================================
   STEP 3 — Date & Time
================================================================= */

.bk-date-row .bk-field { max-width: 320px; }

/* Times section */
.bk-times-label {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  margin-bottom: 14px;
}

.bk-times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.bk-slot {
  background: var(--wp--preset--color--paper);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  border-radius: 10px;
  padding: 11px 6px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

@media (max-width: 480px) {
  /* auto-fill's 76px minimum only fits 2 per row in the narrow mobile
     widget column (~239px), producing a long, thin double list. Pin to
     3 fixed columns and shrink the pills so more rows fit on screen. */
  .bk-times-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .bk-slot {
    padding: 8px 4px;
    font-size: 0.82rem;
  }
}
.bk-slot--available:hover {
  border-color: color-mix(in oklab, var(--wp--preset--color--ink) 40%, transparent);
}
.bk-slot--selected {
  background: var(--wp--preset--color--ink) !important;
  border-color: var(--wp--preset--color--ink) !important;
  color: #fff !important;
}
.bk-slot--booked,
.bk-slot--past {
  text-decoration: line-through;
  color: var(--wp--preset--color--mute);
  cursor: default;
  opacity: 0.45;
}

.bk-loading,
.bk-no-slots {
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  color: var(--wp--preset--color--mute);
  padding: 16px 0;
  margin: 0;
}

/* ── Deposit note ── */
/* ── Postcode validation ── */
.bk-inp--error {
  border-color: #c0392b !important;
  background: color-mix(in oklab, #c0392b 4%, var(--wp--preset--color--paper)) !important;
}
.bk-inp--ok {
  border-color: #27ae60 !important;
}

.bk-postcode-msg {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.82rem;
  margin-top: 8px;
  min-height: 0;
  line-height: 1.5;
}
.bk-postcode-msg--error {
  color: #c0392b;
}
.bk-postcode-msg--coverage {
  color: var(--wp--preset--color--ink-2);
  background: color-mix(in oklab, #c0392b 5%, transparent);
  border: 1px solid color-mix(in oklab, #c0392b 20%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.875rem;
  line-height: 1.55;
}
.bk-postcode-msg__link {
  display: inline-block;
  margin-top: 4px;
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bk-postcode-msg__link:hover { opacity: 0.7; }

/* ── Deposit note ── */
.bk-deposit-note {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.82rem;
  color: var(--wp--preset--color--ink-2);
  line-height: 1.6;
  margin: 0;
}
.bk-deposit-note strong { color: var(--wp--preset--color--ink); }

/* Terms & Conditions agreement checkbox — customer details step */
.bk-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink-2);
}
.bk-terms input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--wp--preset--color--primary);
  cursor: pointer;
}
.bk-terms a { color: var(--wp--preset--color--ink); text-decoration: underline; }
.bk-terms a:hover { color: var(--wp--preset--color--primary); }

/* "Need to start sooner?" notice on the intensive date step */
.bk-sooner-note {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink-2);
  line-height: 1.6;
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--wp--preset--color--primary);
  background: color-mix(in oklab, var(--wp--preset--color--ink) 4%, transparent);
  border-radius: 0 8px 8px 0;
}

/* ── Footer ── */
.bk-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
}

/* ── CTA ── */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-end;
  background: var(--wp--preset--color--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 36px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  line-height: 1;
}
.bk-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.bk-btn:hover:not(:disabled) { background: color-mix(in oklab, var(--wp--preset--color--ink) 75%, transparent); }
.bk-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Status message ── */
.bk-status {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.84rem;
  color: var(--wp--preset--color--mute);
  min-height: 1.4em;
}
.bk-status--error   { color: #c0392b; }
.bk-status--loading { color: var(--wp--preset--color--ink-2); }


/* =================================================================
   STEP 4 — Confirmation
================================================================= */

.bk-step--confirm { padding: 16px 0; }

.bk-confirm {
  text-align: center;
  padding: 16px 0 8px;
}
.bk-confirm-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  color: var(--wp--preset--color--primary);
}
.bk-confirm-title {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  font-weight: 400 !important;
  color: var(--wp--preset--color--ink) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.bk-confirm-text {
  font-size: 0.95rem;
  color: var(--wp--preset--color--ink-2);
  line-height: 1.7;
  margin: 0;
  max-width: 48ch;
  margin-inline: auto;
}


/* =================================================================
   Calendar picker
================================================================= */

.bk-cal-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.bk-cal-display {
  flex: 1;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown calendar (inline page widget) */
.bk-cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  width: max(100%, 280px);
  background: var(--wp--preset--color--paper);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow:
    0 4px 6px -1px color-mix(in oklab, var(--wp--preset--color--ink) 6%, transparent),
    0 12px 28px -4px color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
}

/* Inline calendar (inside modal — always visible, no shadow) */
.bk-cal--inline {
  position: static;
  width: 100%;
  max-width: 340px;
  box-shadow: none;
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  border-radius: 14px;
  margin-top: 10px;
}

.bk-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bk-cal-heading {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}
.bk-cal-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--wp--preset--color--ink-2);
  transition: background 0.12s;
  flex-shrink: 0;
}
.bk-cal-arrow svg { width: 16px; height: 16px; }
.bk-cal-arrow:hover { background: color-mix(in oklab, var(--wp--preset--color--ink) 8%, transparent); }

.bk-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.bk-cal-dow span {
  text-align: center;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  padding: 4px 0 6px;
}

.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bk-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  padding: 0;
  line-height: 1;
}
.bk-cal-day:not(:disabled):not(.bk-cal-day--sel):hover {
  background: color-mix(in oklab, var(--wp--preset--color--ink) 7%, transparent);
}
.bk-cal-day--sel {
  background: var(--wp--preset--color--ink) !important;
  color: #fff !important;
  font-weight: 500;
}
.bk-cal-day--today:not(.bk-cal-day--sel) {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.bk-cal-day--past {
  color: var(--wp--preset--color--mute);
  opacity: 0.38;
  cursor: default;
}

/* No working hours on this day (e.g. Sunday) — greyed with an X hint */
.bk-cal-day--no-work {
  color: var(--wp--preset--color--mute);
  opacity: 0.28;
  cursor: not-allowed;
  text-decoration: line-through;
}


/* =================================================================
   STEP 0 — Postcode check
================================================================= */

/* Descriptive paragraph (longer instructional text, not the uppercase label) */
.bk-step-desc {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9rem;
  color: var(--wp--preset--color--ink-2);
  margin: -8px 0 0;
  line-height: 1.6;
}

/* Postcode input + Check button side-by-side */
.bk-field--pc { max-width: 480px; }

.bk-pc-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.bk-pc-row .bk-inp {
  flex: 1;
  min-width: 0;
  /* Override the default right-padding from bk-inp (no trailing icon here) */
  padding-right: 18px;
}

/* Inline "Check" button — inherits .bk-btn but narrower */
.bk-btn--check {
  flex-shrink: 0;
  width: auto !important;   /* override the mobile width:100% rule */
  min-width: 100px;
  padding: 0 22px;
  font-size: 0.88rem;
  align-self: stretch;
}


/* =================================================================
   STEP 0b — Not-covered notice + meeting points
================================================================= */

/* Info box shown when postcode is outside coverage */
.bk-coverage-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: color-mix(in oklab, #c0392b 8%, transparent);
  border: 1px solid color-mix(in oklab, #c0392b 22%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
}

.bk-coverage-notice > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #c0392b;
  margin-top: 2px;
}

.bk-coverage-notice > div { flex: 1; }

.bk-coverage-notice p {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  color: var(--wp--preset--color--ink);
  margin: 0 0 5px;
  line-height: 1.5;
}

.bk-coverage-notice p:last-child { margin-bottom: 0; }

/* Inline text link used inside step descriptions */
.bk-txt-link {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent);
  text-underline-offset: 2px;
}
.bk-txt-link:hover {
  text-decoration-color: var(--wp--preset--color--primary);
}

/* Meeting point option cards — compact single-column list */
.bk-cards--meeting {
  grid-template-columns: 1fr;
  gap: 8px;
}

.bk-card--meeting {
  flex-direction: row;
  align-items: center;
  padding: 14px 20px;
  border-radius: 12px;
  gap: 0;
}

.bk-card--meeting .bk-card__title {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.95rem;
  font-weight: 500;
  flex: 1;
}

/* Arrow indicator on right */
.bk-card--meeting::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.8px solid color-mix(in oklab, var(--wp--preset--color--ink) 25%, transparent);
  border-top: 1.8px solid color-mix(in oklab, var(--wp--preset--color--ink) 25%, transparent);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.bk-card--meeting:hover::after {
  border-color: var(--wp--preset--color--primary);
}


/* =================================================================
   Meeting point badge + info (vehicle-type step and details step)
================================================================= */

/* Pill badge shown on vehicle type step when meeting point selected */
.bk-meeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 25%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.8rem;
  color: var(--wp--preset--color--ink-2);
}

.bk-meeting-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
}

.bk-meeting-badge strong { color: var(--wp--preset--color--ink); }

/* Confirmation block shown in details step instead of address input */
.bk-meeting-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
}

.bk-meeting-info > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
  margin-top: 1px;
}

.bk-meeting-info > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bk-meeting-info__label {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}

.bk-meeting-info__value {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}


/* =================================================================
   STEP 2 — Course pricing rows (pill layout)
================================================================= */

/* Override grid: always single column regardless of viewport */
.bk-cards--course {
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* Pill-row card: name left, price right */
.bk-card--course {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--paper));
  border-color: color-mix(in oklab, var(--wp--preset--color--primary) 18%, transparent);
  gap: 16px;
}

.bk-card--course:hover {
  border-color: var(--wp--preset--color--primary);
  background: color-mix(in oklab, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--paper));
  box-shadow: 0 4px 18px -4px color-mix(in oklab, var(--wp--preset--color--primary) 22%, transparent);
}

.bk-card--course:focus-visible {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--primary) 30%, transparent);
}

/* Left: name + duration */
.bk-card__course-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
}

.bk-card__course-left .bk-card__title {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  line-height: 1.3;
}

.bk-card__course-left .bk-card__dur {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  color: var(--wp--preset--color--mute);
}

/* Right: price + deposit note */
.bk-card__course-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.bk-card__course-right .bk-card__price {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

.bk-card__dep-note {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.68rem;
  color: var(--wp--preset--color--mute);
  white-space: nowrap;
}


/* =================================================================
   Course groups — grouped course list (replaces vehicle-type step)
================================================================= */

.bk-course-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bk-course-group__title {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 0 0 10px;
  padding-left: 4px;
}

.bk-course-group__note {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.78rem;
  color: var(--wp--preset--color--mute);
  margin: -4px 0 10px;
  padding-left: 4px;
}

.bk-course-group .bk-cards--course {
  margin: 0;
}


/* =================================================================
   Pickup address block
================================================================= */

.bk-addr {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bk-addr__heading {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 8px 0 -4px;
}


/* =================================================================
   Card payment box (Stripe Elements host)
================================================================= */

.bk-card-box {
  padding: 15px 16px;
  background: #fff;
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 16%, transparent);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bk-card-box:focus-within {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent);
}

.bk-pay { margin-top: 8px; }


/* =================================================================
   Field hint text
================================================================= */

.bk-field__hint {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  color: var(--wp--preset--color--mute);
  margin-top: 7px;
  line-height: 1.4;
}


/* =================================================================
   Responsive overrides
================================================================= */

@media (max-width: 600px) {
  /* Layout grids collapse to single column */
  .bk-cards--type { grid-template-columns: 1fr; }
  .bk-row         { grid-template-columns: 1fr; }

  /* Buttons go full-width on mobile — EXCEPT the inline Check button */
  .bk-btn:not(.bk-btn--check) { width: 100%; align-self: stretch; justify-content: center; }

  /* Vehicle type cards: less padding on mobile */
  .bk-card--type { padding: 20px 60px 20px 18px; }

  /* Step header: allow title to wrap below stepper on very small screens */
  .bk-step-header {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .bk-step-title {
    flex-basis: 100%;     /* title drops to its own row */
    order: 1;
  }
  .bk-stepper { order: 0; }
  .bk-back    { order: 2; margin-left: auto; }

  /* Summary bar: stack vertically so nothing collapses */
  .bk-summary-bar {
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
  }
  .bk-summary-bar__left {
    font-size: 0.82rem;
  }
  .bk-summary-bar__right {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
  }

  /* Course pills: use card radius on mobile, not a full pill */
  .bk-card--course {
    border-radius: 16px;
    padding: 14px 18px;
  }

  /* Postcode row: stack vertically so input gets full width */
  .bk-pc-row {
    flex-direction: column;
    gap: 12px;
  }
  .bk-btn--check {
    width: 100% !important;
    padding: 15px 20px;
    font-size: 0.9rem;
  }

  /* Meeting point cards: full width */
  .bk-cards--meeting { gap: 6px; }
}

@media (min-width: 601px) and (max-width: 860px) {
  .bk-cards--type { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */

/* Scroll lock — body fixed so background can't scroll (iOS + desktop) */
body.bk-modal-open {
  position: fixed;
  width: 100%;
  overflow-y: scroll;  /* keeps scrollbar visible, prevents layout shift */
}

/* display:flex overrides [hidden] — restore it */
.bk-modal[hidden] { display: none !important; }

/* Full-screen overlay */
.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px);
}

/* Backdrop */
.bk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 65%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  animation: bk-fade-in 0.2s ease;
}

/* Dialog window — flex column so topbar + body stack cleanly */
.bk-modal__window {
  position: relative;
  z-index: 1;
  background: var(--wp--preset--color--paper);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 8px 24px -4px color-mix(in oklab, var(--wp--preset--color--ink) 18%, transparent),
    0 32px 64px -8px color-mix(in oklab, var(--wp--preset--color--ink) 24%, transparent);
  animation: bk-slide-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Topbar — close button lives here, never scrolls away */
.bk-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 8%, transparent);
  flex-shrink: 0;
}
.bk-modal__topbar-label {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}

/* Close button — in flow inside topbar */
.bk-modal__close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 7%, transparent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.bk-modal__close svg { width: 15px; height: 15px; color: var(--wp--preset--color--ink); }
.bk-modal__close:hover { background: color-mix(in oklab, var(--wp--preset--color--ink) 13%, transparent); }

/* Scrollable body — sits below the topbar */
.bk-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 4vw, 40px);
  flex: 1;
}

/* Strip the bk-box decoration inside the modal */
.bk-modal__body .bk-box {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Animations */
@keyframes bk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bk-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Mobile — sheet from bottom */
@media (max-width: 480px) {
  .bk-modal { padding: 0; align-items: flex-end; }
  .bk-modal__window {
    max-width: 100%;
    max-height: 96dvh;
    border-radius: 20px 20px 0 0;
    animation: bk-slide-up-mobile 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  @keyframes bk-slide-up-mobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  color: rgba(255,255,255,.75);
  font-size: .875rem;
  line-height: 1.6;
}

/* Brand col is wider; service/page cols share remaining space equally */
.footer-inner {
  width: min(1280px, 100% - 2 * clamp(20px, 4vw, 56px));
  margin-inline: auto;
  padding-block: 56px;
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* ── Brand column ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-brand .site-logo svg { fill: var(--accent, #b8893a); }
.footer-tagline {
  font-size: .83rem;
  color: rgba(255,255,255,.45);
  margin: 0;
  max-width: 26ch;
  line-height: 1.55;
}
.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}
.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: .83rem;
  transition: color .15s ease;
}
.footer-contact-link:hover { color: var(--accent, #b8893a); }

/* ── Nav columns (services + pages) ── */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { padding: 4px 0; }
.footer-col a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: .83rem;
  transition: color .15s ease;
  display: inline-block;
}
.footer-col a:hover { color: var(--accent, #b8893a); }
.footer-col__heading {
  font-family: var(--wp--preset--font-family--inter);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0 0 12px;
  padding: 0;
}

/* ── Bottom bar ── */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  width: min(1280px, 100% - 2 * clamp(20px, 4vw, 56px));
  margin-inline: auto;
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-bottom p { margin: 0; font-size: .75rem; color: rgba(255,255,255,.4); }
.footer-bottom__sep { margin-inline: 8px; opacity: .4; }
.footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; transition: color .15s; }
.footer-bottom a:hover { color: var(--accent, #b8893a); }

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.35) !important;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .15s;
}
.back-top:hover { color: var(--accent, #b8893a) !important; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ≤ 820px — stack hero, single-col services */
@media (max-width: 860px) {

  .announce-bar { display: none; }

  /* Hero: hide absolute photo, stack grid to 1 col */
  .hero-photo { display: none; }

  .home-hero .section-shell {
    grid-template-columns: 1fr;
  }

  .hero-right { position: static; bottom: auto; left: auto; right: auto; margin-top: 12px; }
  .hero-card .pct { font-size: 72px; }

  /* Services */
  .trans-grid         { grid-template-columns: 1fr; }
  .svc-grid           { grid-template-columns: 1fr 1fr; }
  .svc-item:nth-child(2) { border-right: none; }
  .svc-item:nth-child(3),
  .svc-item:nth-child(4) { border-top: 1px solid var(--wp--preset--color--line); }
  .svc-item:nth-child(4) { border-right: none; }
  .svc-item:nth-child(5) { grid-column: span 2; border-top: 1px solid var(--wp--preset--color--line); border-right: none; }

  .approach-split { grid-template-columns: 1fr; gap: 40px; }
  .approach-img-inner { aspect-ratio: 16 / 9; }

  /* Footer: brand full-width on first row, remaining cols wrap */
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ≤ 780px — hero floor 2-col, areas stack */
@media (max-width: 780px) {
  .hero-floor { grid-template-columns: 1fr 1fr; margin: 0 !important}
  .floor-stat + .floor-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trans-grid { grid-template-columns: 1fr; }
}

/* ≤ 600px — mobile */
@media (max-width: 600px) {

  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  .svc-grid   { grid-template-columns: 1fr; }
  .svc-item   { border-right: none !important; border-top: 1px solid var(--wp--preset--color--line); }
  .svc-item:first-child { border-top: none; }
  .svc-item:nth-child(5) { grid-column: span 1; }

  .approach-split { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr 1fr; }

  .cta-inner h2 { font-size: clamp(36px, 10vw, 56px); }
  .cta-buttons  { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { justify-content: center; }

  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 40px; }
  .footer-brand  { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .announce-dot { animation: none; }
  .wa-fab,
  .trans-card,
  .area-item,
  .faq-chevron { transition: none; }
}

 

/* ================================================================
   REFERENCE DESIGN IMPLEMENTATION — Oxford Intensive Driving School
   Applied from design bundle to WordPress HTML classes.
   Background: cold blue (theme.json) — all other styles from ref.
   ================================================================ */

/* ── Announcement bar — mono, uppercase ── */
.announce-bar {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 10px var(--pad) !important;
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.announce-inner span { position: relative; white-space: nowrap; }
.announce-text, .announce-inner span { color: rgba(255,255,255,.82); }


/* ── Header nav links ── */
#site-navigation .menu > li > a {
  font-size: 14px !important;
  font-weight: 400;
  color: var(--wp--preset--color--ink-2);
  transition: color .15s ease;
}
#site-navigation .menu > li > a:hover { color: var(--wp--preset--color--ink); }

/* ── Mobile nav link overrides (must come after the 14px !important rule above) ── */
@media (max-width: 1099px) {
  #site-navigation .menu > li > a {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    color: #fff !important;
    font-weight: 400 !important;
  }
  #site-navigation .menu > li > a:hover {
    color: var(--wp--preset--color--primary) !important;
  }
}

/* ── Compact desktop range: smaller links so all 8 items fit ── */
@media (min-width: 1100px) and (max-width: 1279px) {
  #site-navigation .menu > li > a {
    font-size: 13px !important;
  }
}

/* ── Hero cards — glass morphism ── */
.hero-card {
  background: color-mix(in oklab, var(--wp--preset--color--paper) 55%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.5) inset, 0 24px 60px -28px rgba(20,12,6,.10) !important;
}
.hero-card__num {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(32px, 3.5vw, 42px) !important;
  line-height: .86 !important;
  letter-spacing: -.02em !important;
  color: var(--wp--preset--color--navy-deep) !important;
  font-weight: 400 !important;
  margin: 0 !important; padding: 0 !important;
}
.hero-card__label {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--mute) !important;
  margin: 0 !important; padding: 0 !important;
}



.floor-stat__num {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: clamp(32px, 3.5vw, 42px) !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 !important; padding: 0 !important;
}
.floor-stat__num em {
  color: var(--wp--preset--color--accent-soft) !important;
  font-style: italic !important;
}
.floor-stat__lbl {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, #fff 60%, transparent) !important;
  margin: 0 !important; padding: 0 !important;
}

/* ── Section intro (sec-intro) ── */
.sec-intro {
  margin-bottom: 0 !important;
  align-items: flex-end !important;
}
.sec-intro h2.wp-block-heading {
  font-size: clamp(42px, 5.4vw, 80px) !important;
  letter-spacing: -.015em !important;
  line-height: 1.02 !important;
  font-weight: 400 !important;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
}
.sec-intro p.wp-block-paragraph {
  color: var(--wp--preset--color--ink-2) !important;
  max-width: 52ch !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── Trans-cards — reference exact ── */
.trans-card {
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent) !important;
  transition: border-color .25s, transform .25s, box-shadow .25s !important;
}
.trans-card:hover {
  border-color: var(--wp--preset--color--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 50px -28px rgba(15,22,32,.18) !important;
}
.trans-card h3 {
  font-size: 32px !important;
  letter-spacing: -.01em !important;
}

/* ── Section padding ──────────────────────────────────────────────
   Each section owns its BOTTOM padding only.
   Adjacent sections do NOT double-stack: top padding is removed on
   any .home-section that directly follows another .home-section.
   Sections with a changed background (CTA, etc.) restore their own
   top padding so the colour block is properly framed.
   ───────────────────────────────────────────────────────────────── */

.home-section.home-hero { padding-bottom: 0 !important; }

/* ── Approach split (card container) ── */
.approach-split {
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent) !important;
}
.approach-copy h3.wp-block-heading {
  font-size: clamp(34px, 3.6vw, 52px) !important;
  max-width: 14ch !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  margin: 0; padding: 0;
}
.approach-list li::before {
  width: 9px !important;
  height: 9px !important;
  margin-top: 4px !important;
}

/* ── Area aside ── */
.area-aside h3.wp-block-heading {
  font-size: clamp(28px, 2.8vw, 38px) !important;
  line-height: 1.08 !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
}
.area-aside h3 em { color: var(--wp--preset--color--accent-soft) !important; }
.area-aside p { font-size: 14.5px; line-height: 1.55; color: color-mix(in oklab,#fff 78%,transparent); }
.area-aside h4.wp-block-heading {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  color: #fff !important;
  padding: 0 !important;
  margin: 0 !important
}
.svc-code {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, #fff 60%, transparent) !important;
  margin: 0 !important; padding: 0 !important;
}

/* ── FAQ ── */
.faq-item {
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent) !important;
  padding: 22px 0 !important;
}
.faq-q {
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 1.9vw, 26px) !important;
  letter-spacing: -.01em !important;
  color: var(--wp--preset--color--ink) !important;
}
.faq-a {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--wp--preset--color--ink-2) !important;
  max-width: 72ch !important;
}

/* ── Big CTA section ── */
.home-cta {
  border-radius: var(--radius) !important;
  max-width: calc(var(--wp--style--global--content-size) - 2 * var(--pad)) !important;
  margin-inline: auto !important;
  margin-block: clamp(64px, 9vw, 120px) !important;
  padding: 40px 0
}
.cta-inner h2.wp-block-heading {
  font-size: clamp(48px, 6.4vw, 104px) !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  max-width: 14ch !important;
  font-weight: 400 !important;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
  margin: 0;
}
.cta-inner h2 em.cta-italic {
  color: var(--wp--preset--color--accent-soft) !important;
}
/* CTA section btn-primary: white button on navy */
.home-cta .wp-block-button.btn-primary .wp-block-button__link {
  background: #fff !important;
  color: var(--wp--preset--color--ink) !important;
  border-color: #fff !important;
}
.home-cta .wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
}

.home-cta .wp-block-button.btn-wa .wp-block-button__link:hover {
  background: #fff !important;
  color: var(--wp--preset--color--ink) !important;
  border-color: #fff !important;
}

/* ── Booking section ── */
.booking {
  background: var(--wp--preset--color--paper) !important;
  border-radius: var(--radius) !important;
  padding: clamp(36px, 5vw, 72px) !important;
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent) !important;
  align-items: start !important;
}
.booking h2.wp-block-heading {
  font-size: clamp(34px, 3.6vw, 52px) !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
  font-family: var(--wp--preset--font-family--dm-serif-display) !important;
}
.booking .wp-block-paragraph {
  color: var(--wp--preset--color--ink-2) !important;
  max-width: 42ch !important;
  margin-top: 18px !important;
}

/* ── Footer ── */
.site-footer { padding: 64px 0 0; color: var(--wp--preset--color--ink); }
.footer-inner {
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  justify-content: space-between;
}
/* Brand is the wide first column; nav columns share the rest and may wrap */
.footer-inner .footer-brand { flex: 1 1 260px; max-width: 340px; }
.footer-inner .footer-col   { flex: 1 1 150px; min-width: 130px; }
.footer-tagline {
  color: var(--wp--preset--color--ink-2) !important;
  font-size: 13px !important;
  max-width: 30ch !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
.footer-contact-block { margin-top: 8px; }
.footer-contact-link {
  color: var(--wp--preset--color--ink-2) !important;
  font-size: 13px !important;
}
.footer-contact-link:hover { color: var(--wp--preset--color--primary) !important; }

/* Service & page nav columns */
.footer-col__heading {
  color: color-mix(in oklab, var(--wp--preset--color--ink) 38%, transparent) !important;
  font-size: 0.63rem !important;
}
.footer-col a {
  color: var(--wp--preset--color--ink-2) !important;
  font-size: 13px !important;
}
.footer-col a:hover { color: var(--wp--preset--color--primary) !important; }
.footer-col li { padding: 3px 0; }

.footer-bottom {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 0.68rem !important;
  letter-spacing: .06em !important;
  color: var(--wp--preset--color--ink-2) !important;
  padding-block: 18px !important;
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent) !important;
  margin-top: 0 !important;
}
.footer-bottom p { color: var(--wp--preset--color--ink-2) !important; }
.footer-bottom a { color: var(--wp--preset--color--ink-2) !important; }
.footer-bottom a:hover { color: var(--wp--preset--color--primary) !important; }
.back-top { color: var(--wp--preset--color--ink-2) !important; }
.back-top:hover { color: var(--wp--preset--color--primary) !important; }

/* ── Footer responsive (flex layout — old grid media rules don't apply) ── */
@media (max-width: 860px) {
  .footer-inner { gap: 36px 32px; }
  /* Brand takes a full row; nav columns wrap beneath it */
  .footer-inner .footer-brand { flex: 1 1 100%; max-width: 460px; }
  .footer-inner .footer-col   { flex: 1 1 160px; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 40px; }
  .footer-inner {
    padding-top: 36px;
    padding-bottom: 36px;
    gap: 30px 24px;
  }
  /* Two nav columns per row on phones */
  .footer-inner .footer-col { flex: 1 1 calc(50% - 12px); min-width: 0; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
}
@media (max-width: 380px) {
  /* Single column stack on very small screens */
  .footer-inner .footer-col { flex: 1 1 100%; }
}

/* ── Footer-as-block-pattern corrections ──────────────────────────────
   The footer is now a real Columns block ("Footer Columns" pattern), so
   it inherits editor/content styling that was never meant for it:

   1. .wp-block-list li::before paints a "✓" at left:0 with the li padded
      2rem — inside the narrow footer columns that tick landed on top of
      the first letter of each link.
   2. Content lists/paragraphs carry generous margins, which stretched the
      footer to several screens tall on a phone.
   3. WP core stacks every column to flex-basis:100% !important below
      781px, so the five columns became five full-width rows.

   These rules scope the corrections to .site-footer only, so page content
   keeps its normal list styling. */
.site-footer .footer-col ul,
.site-footer .footer-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-col li {
  position: relative;
  padding: 3px 0 3px 0;
  margin: 0;
  font-size: inherit;
  line-height: 1.45;
}
/* Kill the inherited content-list tick and its indent */
.site-footer .footer-col li::before {
  content: none;
  display: none;
}
.site-footer .footer-col li::marker { content: none; }
/* The shortcode blocks output inside a <p>; strip its content margins.
   (In .footer-brand the browser splits that <p> around the contact
   <div>, leaving empty <p>s — collapse those too.) */
.site-footer .footer-col p { margin: 0; }
.site-footer .footer-col p + p { margin-top: 6px; }
.site-footer .footer-brand p:empty { display: none; }
.site-footer .footer-contact-block { margin-top: 14px; }

/* Columns block splits every column evenly; the brand needs more room
   than a link list for the logo, tagline and contact rows. */
@media (min-width: 782px) {
  .site-footer .wp-block-columns.footer-inner > .wp-block-column.footer-brand {
    flex-basis: 26%;
    flex-grow: 0;
  }
}

@media (max-width: 781px) {
  /* Beat core's flex-basis:100% !important so columns still share rows */
  .site-footer .wp-block-columns.footer-inner > .wp-block-column.footer-col {
    flex-basis: calc(50% - 12px) !important;
    flex-grow: 1;
    min-width: 0;
  }
  .site-footer .wp-block-columns.footer-inner > .wp-block-column.footer-brand {
    flex-basis: 100% !important;
  }
}
/* Only stack to one column on genuinely tiny screens — 375px phones
   (iPhone SE / mini) are common enough that two columns there is still
   the shorter, more usable footer. */
@media (max-width: 340px) {
  .site-footer .wp-block-columns.footer-inner > .wp-block-column.footer-col {
    flex-basis: 100% !important;
  }
}

/* ── Contact strip ────────────────────────────────────────────────────
   The contact links live in their own full-width Columns row in the
   "Footer Columns" pattern. Styled here as a navy band of pill buttons
   so the contact details read as a deliberate call-to-action rather
   than a stray stack of links. Email is the lead pill (gold) — it's the
   channel the client gets most enquiries through.
   Structure-independent: keyed off .footer-contact-block itself, so
   rearranging the pattern in the editor won't break it. */

/* Empty <p>s left by the shortcode blocks add phantom vertical space */
.site-footer p:empty { display: none; }

/* The row wrapping the contact block doesn't need the divider/padding
   that the link-column row above it uses */
.site-footer .footer-inner:has(.footer-contact-block) {
  border-top: 0;
  padding-top: 0;
  padding-bottom: clamp(24px, 3vw, 36px);
}

.site-footer .footer-contact-block {
  display: flex;
  /* Explicit row — the original footer design set flex-direction:column
     on this block and that rule is still live for the old layout */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
  border-radius: 20px;
  background: var(--wp--preset--color--ink);
  background-image:
    radial-gradient(circle at 12% 20%, color-mix(in oklab, var(--wp--preset--color--primary) 30%, transparent), transparent 55%);
}

.site-footer .footer-contact-block .footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff !important;
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.site-footer .footer-contact-block .footer-contact-link svg { flex: none; }

.site-footer .footer-contact-block .footer-contact-link:hover,
.site-footer .footer-contact-block .footer-contact-link:focus-visible {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--ink) !important;
  transform: translateY(-2px);
}

/* Lead pill — the email address */
.site-footer .footer-contact-block .footer-contact-link:first-child {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--ink) !important;
  font-weight: 600;
}
.site-footer .footer-contact-block .footer-contact-link:first-child:hover,
.site-footer .footer-contact-block .footer-contact-link:first-child:focus-visible {
  background: var(--wp--preset--color--accent-soft);
  border-color: var(--wp--preset--color--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-contact-block .footer-contact-link { transition: none; }
  .site-footer .footer-contact-block .footer-contact-link:hover { transform: none; }
}

@media (max-width: 560px) {
  .site-footer .footer-contact-block {
    gap: 8px;
    border-radius: 16px;
  }
  /* Pills go full-width so the tap targets stay comfortable */
  .site-footer .footer-contact-block .footer-contact-link {
    flex: 1 1 100%;
    justify-content: flex-start;
    padding: 13px 16px;
  }
}

/* ── Hero section padding ── */
.home-hero {
  padding-top: clamp(36px, 8vw, 96px) !important;
}

/* ── Nav header ── */
.site-header {
  background: color-mix(in oklab, var(--wp--preset--color--bg) 92%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent) !important;
}


/* ========================================
   GOOGLE REVIEWS
   Shortcode: [google-reviews count="N"]
   Swiper minimal core + component styles.
   No external CSS dependency.
======================================== */

/* ── Swiper minimal core (replaces swiper-bundle.min.css) ─────────── */
.swiper                { overflow: hidden; position: relative; }
.swiper-wrapper        { display: flex; align-items: stretch; box-sizing: content-box; width: 100%; }
.swiper-slide          { flex-shrink: 0; width: 100%; height: auto; box-sizing: border-box; position: relative; }
.swiper-button-disabled{ opacity: .35 !important; cursor: not-allowed !important; pointer-events: none; }

/* ── Wrap ─────────────────────────────────────────────────────────── */
.rev-wrap {
  width: 100%;
  container-type: inline-size;
}

/* ── Header bar ───────────────────────────────────────────────────── */
.rev-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 20px;
}
.rev-header__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rev-header__label {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}
.rev-header__score {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}
.rev-header__total {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.8rem;
  color: color-mix(in oklab, var(--wp--preset--color--ink) 52%, transparent);
}
.rev-header__total strong { font-weight: 600; color: var(--wp--preset--color--ink); }
.rev-header__link {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  white-space: nowrap;
}
.rev-header__link:hover { text-decoration: underline; }

/* ── Google G icon ────────────────────────────────────────────────── */
.rev-g-icon { display: block; flex-shrink: 0; }

/* ── Star row ─────────────────────────────────────────────────────── */
.rev-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--wp--preset--color--primary);
  line-height: 0;
}

/* ── Badge-only modifier (count=1) — header fills full width, no bottom margin ── */
.rev-wrap--badge { display: block; }
.rev-header--badge { margin-bottom: 0; }

/* ── Card link wrapper ────────────────────────────────────────────── */
.rev-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  outline-offset: 3px;
}
.rev-card-link:hover .rev-card {
  box-shadow: 0 2px 4px rgba(0,0,0,.07), 0 10px 28px rgba(0,0,0,.11);
  transform: translateY(-2px);
}

/* ── Card ─────────────────────────────────────────────────────────── */
.rev-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow .2s ease, transform .2s ease;
}
.rev-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.rev-card__text {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-style: italic;
  line-height: 1.58;
  color: var(--wp--preset--color--ink);
  margin: 0 0 auto;
  padding: 0;
  border: none;
  flex: 1;
}
.rev-card__author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 8%, transparent);
}

/* ── Avatar circle with diagonal stripe ──────────────────────────── */
.rev-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,.06) 4px,
    rgba(255,255,255,.06) 8px
  );
  color: rgba(255,255,255,.92);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.rev-author-info { display: flex; flex-direction: column; gap: 3px; }
.rev-author-name {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}
.rev-author-meta {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--wp--preset--color--ink) 44%, transparent);
  line-height: 1.3;
}

/* ── Single-card layout ───────────────────────────────────────────── */
.rev-single {
  max-width: 520px;
}

/* ── Slider: overflow clip wrapper gives shadow room, enables peek ── */
.rev-swiper-clip {
  overflow: hidden;
  margin: -10px -4px;
  padding: 10px 4px;
}
.rev-swiper { overflow: visible; }

/* ── Navigation arrows (count > 3) ───────────────────────────────── */
.rev-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.rev-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--wp--preset--color--ink) 22%, transparent);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wp--preset--color--ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  flex-shrink: 0;
}
.rev-nav-btn:hover {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rev-header { padding: 14px 16px; gap: 10px; }
  .rev-header__score { font-size: 1.25rem; }
  .rev-card { padding: 20px 20px 18px; }
}
@media (max-width: 440px) {
  .rev-header__total { display: none; } /* too cramped on tiny screens */
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper { transition-duration: 0ms !important; }
  .rev-nav-btn    { transition: none; }
}

/* ==========================================================================
   FAQ — Two-column layout  [faq-twocol]
   ========================================================================== */

.faq-tc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-tc__item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px 48px;
  padding: 40px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  align-items: start;
}

.faq-tc__item:last-child {
  border-bottom: none;
}

.faq-tc__q {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  line-height: 1.4;
  margin: 0;
  position: sticky;
  top: 100px; /* keeps Q visible while scrolling through long answers */
}

.faq-tc__a {
  font-size: 1rem;
  color: color-mix(in oklab, var(--wp--preset--color--ink) 75%, transparent);
  line-height: 1.75;
}

.faq-tc__a p {
  margin: 0 0 1em;
}

.faq-tc__a p:last-child {
  margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .faq-tc__item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }

  .faq-tc__q {
    position: static;
    font-size: 1rem;
    color: var(--wp--preset--color--primary);
  }
}

/* ==========================================================================
   APPROACH PAGE — full-width custom layout (page-approach.php)
   All classes prefixed .ap- to avoid collisions with the homepage.
   Token map: --ink→ink, --primary→accent, --ink-2→ink-2, --mute→mute etc.
   ========================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.ap-page {
  /* shorthand aliases so the design tokens map cleanly */
  --ap-ink:    var(--wp--preset--color--ink);
  --ap-ink2:   var(--wp--preset--color--ink-2);
  --ap-mute:   var(--wp--preset--color--mute);
  --ap-accent: var(--wp--preset--color--primary);
  --ap-a2:     var(--wp--preset--color--accent-2);
  --ap-asoft:  var(--wp--preset--color--accent-soft);
  --ap-navy:   var(--wp--preset--color--navy-deep);
  --ap-bg:     var(--wp--preset--color--bg);
  --ap-paper:  var(--wp--preset--color--paper);
  --ap-serif:  var(--wp--preset--font-family--dm-serif-display);
  color: var(--ap-ink);
}

.ap-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* Any top-level block added directly in the editor (not one of the full-width
   section wrappers, which carry their own .ap-shell) gets the SAME container box
   as .ap-shell — so editor-added content lines up with the designed sections and
   we never end up with mismatched widths. Add .alignfull to a block to opt out. */
.ap-page > *:not(.ap-hero):not(.ap-band):not(.ap-section):not(.home-section):not(.home-cta):not(.alignfull):not(.alignwide):not(style) {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* Breathing room when two Columns blocks sit directly after each other
   (e.g. alternating image / text feature rows). */
.ap-page .wp-block-columns + .wp-block-columns {
  margin-top: clamp(40px, 6vw, 88px);
}

/* Replaceable image placeholder for editor-added feature images.
   Shows a soft grey block until an image is uploaded; once replaced in the
   editor the real image keeps the rounded framing. */
.ap-feature-img { margin: 0; }
.ap-feature-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: var(--radius, 14px);
  background: color-mix(in oklab, var(--wp--preset--color--ink) 8%, var(--wp--preset--color--paper));
  object-fit: cover;
}
@media (max-width: 781px) {
  /* stacked on mobile — let images be a touch shorter */
  .ap-feature-img img { aspect-ratio: 3 / 2; }
}

/* Wide landscape media placeholder used as a full-width break between sections */
.ap-media { margin-block: clamp(16px, 4vw, 56px); }
.ap-media img, .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 14px);
  object-fit: cover;
  background: color-mix(in oklab, var(--wp--preset--color--ink) 8%, var(--wp--preset--color--paper));
}


/* ── Hero ───────────────────────────────────────────────────────────────── */
.ap-hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
}

.ap-kicker {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ap-mute);
  margin-bottom: 28px;
}

.ap-kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-accent);
  display: inline-block;
  margin-right: 12px;
  flex: none;
}

/* ap-hero-grid: native WP columns — layout (widths, gap, vertical alignment)
   is controlled per block in the editor, not forced here. */

.ap-page h1.ap-h1 {
  font-family: var(--ap-serif);
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.ap-lead {
  font-size: clamp(16px, 1.45vw, 19px);
  color: var(--ap-ink2);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 6px;
}

/* ── Stats band ─────────────────────────────────────────────────────────── */
.ap-band {
  padding: 0 0 clamp(20px, 4vw, 48px);
}

.ap-floor {
  background: var(--ap-ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 30, 60, .35);
  /* 4-col layout is on .ap-floor .wp-block-columns — see override below */
}

.ap-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, color-mix(in oklab, var(--ap-accent) 30%, transparent), transparent 55%);
  pointer-events: none;
  opacity: .5;
}

.ap-floor::after {
  content: "";
  position: absolute;
  left: 25%; right: 25%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ap-accent) 70%, transparent), transparent);
}

.ap-floor-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ap-floor-stat + .ap-floor-stat {
  border-left: 1px solid color-mix(in oklab, #fff 14%, transparent);
  padding-left: 24px;
}

.ap-floor-stat b {
  font-family: var(--ap-serif);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1;
}

.ap-floor-stat b em {
  color: var(--ap-asoft);
  font-style: italic;
}

.ap-floor-stat span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, #fff 60%, transparent);
}

/* ap-floor mobile is handled by the .ap-floor .wp-block-columns override below */

/* ── Section wrapper ────────────────────────────────────────────────────── */
.ap-section {
  padding: clamp(48px, 6vw, 88px) 0;
}

.ap-section + .ap-section {
  padding-top: 0;
}

/* ── Section header (2-col grid) ────────────────────────────────────────── */
/* ap-sec-head: native WP columns — widths, gap and vertical alignment are
   controlled per block in the editor (Columns > Settings), not forced here. */

.ap-sec-head h2 {
  font-family: var(--ap-serif);
  font-size: clamp(42px, 5.4vw, 80px);
  letter-spacing: -.015em;
  line-height: 1.02;
  font-weight: 400;
  margin: 0;
  padding: 0;
}



/* ── Italic accent ──────────────────────────────────────────────────────── */
.ap-it {
  color: var(--ap-accent);
  font-style: italic;
  font-family: var(--ap-serif);
}

/* ── Tag pill ───────────────────────────────────────────────────────────── */
.ap-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Solid beige rather than a gold/transparent mix: mixing with
     `transparent` in oklab desaturated the fill toward grey over the
     page background, which is what made the gold text hard to read.
     A real beige with a darker brown lifts contrast 2.6:1 → 6.2:1
     (WCAG AA needs 4.5:1) while keeping the same colour family. */
  background: var(--ap-tag-bg, #eee0c4);
  color: var(--ap-tag-ink, #6b4a12);
  width: fit-content;
}

.ap-tag--dark {
  background: var(--ap-ink);
  color: #fff;
}

/* ── Split card (copy | dark-image) ────────────────────────────────────── */
.ap-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid color-mix(in oklab, var(--ap-ink) 12%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ap-paper);
}

.ap-split__copy {
  padding: clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ap-split__copy h3 {
  font-family: var(--ap-serif);
  font-size: clamp(28px, 3.2vw, 48px);
  max-width: 16ch;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
  padding: 0;
}

.ap-split__copy p {
  color: var(--ap-ink2);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.ap-split__copy ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ap-split__copy li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ap-ink);
}

.ap-split__copy li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ap-accent);
  margin-top: 6px;
}

.ap-split__img {
  background: var(--ap-ink);
  color: #fff;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 44px);
}

.ap-split__lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ap-bg) 8%, transparent) 0 1px, transparent 1px 14px);
  pointer-events: none;
}

.ap-split__corner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.ap-split__badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, #fff 65%, transparent);
}

.ap-split__big {
  font-family: var(--ap-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 14ch;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .ap-split { grid-template-columns: 1fr; }
  .ap-split__img { min-height: 280px; }
}

/* ── Feature pair grid ──────────────────────────────────────────────────── */
.ap-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: color-mix(in oklab, var(--ap-ink) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ap-ink) 12%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}

.ap-feature {
  background: var(--ap-bg);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .25s;
}

.ap-feature:hover {
  background: var(--ap-paper);
}

.ap-feature h3 {
  font-family: var(--ap-serif);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -.012em;
  font-weight: 400;
  max-width: 18ch;
  margin: 0;
  padding: 0;
}

.ap-feature p {
  color: var(--ap-ink2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 50ch;
}

.ap-feature__note {
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--ap-ink) 10%, transparent);
  color: var(--ap-ink);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Dark ink background overrides */
.has-ink-background-color p.ap-kicker,
.has-ink-background-color .ap-kicker {
  color: rgba(255, 255, 255, 0.5);
}
.has-ink-background-color .ap-feature p {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 840px) {
  .ap-twocol { grid-template-columns: 1fr; }
}

/* ── Areas section ──────────────────────────────────────────────────────── */
.ap-areas {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.ap-local {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ap-local p {
  margin: 0;
  color: var(--ap-ink2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 50ch;
}

.ap-local strong {
  color: var(--ap-ink);
  font-weight: 600;
}

.ap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.ap-pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-ink2);
  border: 1px solid color-mix(in oklab, var(--ap-ink) 18%, transparent);
  border-radius: 999px;
  padding: 8px 14px;
}

/* ── Aside card (dark, sticky) ──────────────────────────────────────────── */
.ap-aside {
  background: var(--ap-ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 108px;
  overflow: hidden;
  align-self: flex-start;
}

.ap-aside h3 {
  font-family: var(--ap-serif);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 0;
  padding: 0;
  color: #fff;
}

.ap-aside p {
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in oklab, #fff 78%, transparent);
  margin: 0;
}

.ap-aside__routes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, #fff 60%, transparent);
}

.ap-aside__routes b {
  font-family: var(--ap-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
  display: block;
}

a.ap-aside__btn,
.wp-block-button.ap-aside__btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 500;
  background: #fff !important;
  color: var(--ap-ink) !important;
  border: 1px solid transparent;
  text-decoration: none;
  align-self: flex-start;
  transition: background .2s, color .2s;
}

a.ap-aside__btn:hover,
.wp-block-button.ap-aside__btn > .wp-block-button__link:hover {
  background: var(--ap-accent) !important;
  color: #fff !important;
}

.ap-aside .wp-block-buttons { margin: 0; }

@media (max-width: 780px) {
  .ap-areas { grid-template-columns: 1fr; }
  .ap-aside { position: static; }
}

/* ── DVSA trust strip ───────────────────────────────────────────────────── */
.ap-trust-band {
  padding: 0 0 clamp(40px, 6vw, 80px);
}

.ap-trust {
  background: var(--ap-paper);
  border: 1px solid color-mix(in oklab, var(--ap-ink) 10%, transparent);
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 52px);
  /* 3-col layout (mark | body | tags) is on the .wp-block-columns child — see override below */
}

.ap-trust__mark {
  font-family: var(--ap-serif);
  font-size: clamp(36px, 4.5vw, 52px);
  color: #fff;
  background: var(--ap-ink);
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
  flex: none;
  position: relative;
  overflow: hidden;
}

.ap-trust__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, color-mix(in oklab, var(--ap-accent) 40%, transparent), transparent 60%);
}

.ap-trust__body h3 {
  font-family: var(--ap-serif);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 0;
  padding: 0;
}

.ap-trust__body p {
  color: var(--ap-ink2);
  font-size: 15px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 58ch;
}

.ap-trust__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ap-ink2);
}

.ap-trust__tags span {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.ap-trust__tags span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-accent);
  flex: none;
}

@media (max-width: 900px) {
  .ap-trust {
    text-align: left;
  }
  .ap-trust__mark {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }
  .ap-trust__tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
}

/* ── Big CTA ────────────────────────────────────────────────────────────── */
.ap-cta-band {
  padding: 0 0 clamp(48px, 7vw, 96px);
}

.ap-bigcta {
  background: var(--ap-ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  /* 2-column layout (heading | buttons) is on the .wp-block-columns inside the cover's inner container */
}

.ap-bigcta__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--ap-accent) 35%, transparent), transparent 60%);
  pointer-events: none;
  opacity: .7;
}

.ap-bigcta h2 {
  font-family: var(--ap-serif);
  font-size: clamp(42px, 6.4vw, 96px);
  letter-spacing: -.02em;
  line-height: 1;
  max-width: 16ch;
  font-weight: 400;
  margin: 0;
  padding: 0;
  color: #fff;
  position: relative;
  z-index: 1;
}

.ap-bigcta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  align-self: flex-end;
}

a.ap-bigcta__btn,
.wp-block-button.ap-bigcta__btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent !important;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}

a.ap-bigcta__btn--primary,
.wp-block-button.ap-bigcta__btn--primary > .wp-block-button__link {
  background: #fff !important;
  color: var(--ap-ink) !important;
}

a.ap-bigcta__btn--primary:hover,
.wp-block-button.ap-bigcta__btn--primary > .wp-block-button__link:hover {
  background: var(--ap-accent) !important;
  color: #fff !important;
}

a.ap-bigcta__btn--ghost,
.wp-block-button.ap-bigcta__btn--ghost > .wp-block-button__link {
  background: transparent !important;
  color: #fff !important;
  border-color: color-mix(in oklab, #fff 35%, transparent) !important;
}

a.ap-bigcta__btn--ghost:hover,
.wp-block-button.ap-bigcta__btn--ghost > .wp-block-button__link:hover {
  background: #fff !important;
  color: var(--ap-ink) !important;
  border-color: #fff !important;
}

/* (ap-bigcta mobile handled via the inner .wp-block-columns media query below) */

/* ==========================================================================
   CUSTOMER DASHBOARD — page-dashboard.php (.oxd-*)
   ========================================================================== */

.oxd-dash {
  min-height: 60vh;
}

.oxd-shell,
.oxd-login {
  width: min(1280px, 100% - 2 * clamp(20px, 4vw, 56px));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 80px);
}

/* ── Login state ── */
.oxd-login { max-width: 460px; }

.oxd-login__title {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 14px;
}

.oxd-login__sub { color: var(--ap-ink2, #3a4a6e); font-size: .95rem; line-height: 1.6; margin: 0 0 28px; }
#loginform {max-width: 380px}
.oxd-login #loginform p { margin: 0 0 16px; }
.oxd-login #loginform label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-ink2, #3a4a6e); margin-bottom: 6px; }
.oxd-login #loginform input[type="text"],
.oxd-login #loginform input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 16%, transparent);
  border-radius: 12px;
  font-size: 1rem;
  background: #fff;
}
.oxd-login #loginform input:focus { outline: none; border-color: var(--ap-accent, #b8893a); }
.oxd-login .login-remember label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .85rem; }
.oxd-login #wp-submit {
  background: var(--ap-ink, #1a2a4f);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.oxd-login #wp-submit:hover { background: var(--ap-accent, #b8893a); }
.oxd-login__links { margin-top: 22px; font-size: .85rem; display: flex; gap: 10px; flex-wrap: wrap; }
.oxd-login__links a { color: var(--ap-a2, #9c7028); text-decoration: none; }
.oxd-login__links a:hover { text-decoration: underline; }

/* ── Header: avatar + logout ── */
.oxd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.oxd-id { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 28px); }

.oxd-avatar {
  width: clamp(76px, 9vw, 108px);
  height: clamp(76px, 9vw, 108px);
  border-radius: 50%;
  background: var(--ap-ink, #1a2a4f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: .02em;
  flex: none;
  position: relative;
  overflow: hidden;
}

.oxd-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, color-mix(in oklab, var(--ap-accent, #b8893a) 45%, transparent), transparent 60%);
}

.oxd-id__text h1 {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  margin: 4px 0 6px;
  padding: 0;
}

.oxd-edit {
  font-size: .85rem;
  color: var(--ap-a2, #9c7028);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ap-accent, #b8893a) 45%, transparent);
}
.oxd-edit:hover { border-bottom-color: var(--ap-accent, #b8893a); }

.oxd-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 18%, transparent);
  color: var(--ap-ink, #1a2a4f);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  flex: none;
}
.oxd-logout:hover { background: var(--ap-ink, #1a2a4f); color: #fff; border-color: var(--ap-ink, #1a2a4f); }

/* ── Sections ── */
.oxd-section { margin-bottom: clamp(40px, 6vw, 72px); }

.oxd-h2 {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin: 0 0 20px;
  padding: 0;
}

.oxd-sub { color: var(--ap-ink2, #3a4a6e); font-size: .95rem; margin: -8px 0 24px; max-width: 60ch; }

.oxd-empty { color: var(--ap-ink2, #3a4a6e); font-size: .95rem; }
.oxd-empty a { color: var(--ap-a2, #9c7028); }

/* ── Lesson cards ── */
.oxd-cards { display: grid; gap: 16px; }

.oxd-card {
  display: flex;
  gap: clamp(18px, 2.5vw, 32px);
  background: var(--ap-paper, #f5f8fa);
  border: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 12%, transparent);
  border-radius: var(--radius, 18px);
  padding: clamp(20px, 2.6vw, 30px);
}

.oxd-card--past { opacity: .75; }

.oxd-card__date {
  flex: none;
  width: 76px;
  text-align: center;
  align-self: flex-start;
  background: var(--ap-ink, #1a2a4f);
  color: #fff;
  border-radius: 14px;
  padding: 12px 8px;
}
.oxd-card__date b {
  display: block;
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
}
.oxd-card__date span {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-accent-soft, #d8b362);
}

.oxd-card__body { flex: 1; min-width: 0; }

.oxd-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.oxd-card__head h3 {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
}

.oxd-status {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ap-ink, #1a2a4f) 8%, transparent);
  color: var(--ap-ink2, #3a4a6e);
}
.oxd-status--approved  { background: #e5f4e9; color: #1e7a3a; }
.oxd-status--pending   { background: #fdf0e0; color: #9c7028; }
.oxd-status--cancelled { background: #fbe9e7; color: #b3362d; }

.oxd-card__meta { color: var(--ap-ink2, #3a4a6e); font-size: .9rem; margin: 6px 0 0; }
.oxd-paid {
  display: inline-block;
  margin-left: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1e7a3a;
}

/* Custom fields — automatically listed under the lesson */
.oxd-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 24px;
  margin: 16px 0 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 8%, transparent);
  border-radius: 12px;
}
.oxd-fields div { display: flex; flex-direction: column; gap: 1px; }
.oxd-fields dt {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-mute, #6b7793);
}
.oxd-fields dd { margin: 0; font-size: .88rem; color: var(--ap-ink, #1a2a4f); }

.oxd-card__actions { margin-top: 16px; }

.oxd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  /* Reset native <button> chrome — same specificity tier as the variants
     below, so .oxd-btn--primary/--ghost still win via normal source order. */
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.oxd-btn--primary { background: var(--ap-ink, #1a2a4f); color: #fff; }
.oxd-btn--primary:hover { background: var(--ap-accent, #b8893a); color: #fff; }
.oxd-btn--ghost {
  border: 1.5px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 18%, transparent);
  color: var(--ap-ink, #1a2a4f);
}
.oxd-btn--ghost:hover { background: var(--ap-ink, #1a2a4f); color: #fff; }

@media (max-width: 640px) {
  .oxd-top { flex-direction: column; }
  .oxd-logout { align-self: flex-end; order: -1; }
  .oxd-card { flex-direction: column; }
  .oxd-card__date { width: 64px; }
}

/* ── Message banners ── */
.oxd-msg {
  padding: 13px 18px;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.45;
  margin: 0 0 20px;
  border: 1px solid transparent;
}
.oxd-msg--success { background: #e5f4e9; color: #1e7a3a; border-color: color-mix(in oklab, #1e7a3a 25%, transparent); }
.oxd-msg--error   { background: #fbe9e7; color: #b3362d; border-color: color-mix(in oklab, #b3362d 22%, transparent); }
.oxd-msg--info    { background: #f5f8fa; color: var(--ap-ink2, #3a4a6e); border-color: color-mix(in oklab, var(--ap-ink, #1a2a4f) 14%, transparent); }

/* ── Prepaid-hours course cards ── */
.oxd-wallets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.oxd-wallet {
  background: var(--ap-ink, #1a2a4f);
  color: #fff;
  border-radius: var(--radius, 18px);
  padding: clamp(22px, 2.6vw, 30px);
  position: relative;
  overflow: hidden;
}
.oxd-wallet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, color-mix(in oklab, var(--ap-accent, #b8893a) 38%, transparent), transparent 55%);
  pointer-events: none;
}
.oxd-wallet > * { position: relative; z-index: 1; }

.oxd-wallet__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.oxd-wallet__title {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  color: #fff;
}
.oxd-wallet__balance {
  flex-shrink: 0;
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, #fdf0e0 90%, transparent);
  color: #9c7028;
}
.oxd-wallet__balance--paid { background: #e5f4e9; color: #1e7a3a; }

.oxd-wallet__hours {
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}
.oxd-wallet__hours strong {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ap-accent-soft, #d8b362);
}
.oxd-wallet__inst { display: block; font-size: .8rem; color: rgba(255,255,255,.6); margin-top: 2px; }

.oxd-wallet__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  overflow: hidden;
  margin: 16px 0;
}
.oxd-wallet__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ap-accent, #b8893a);
}

.oxd-wallet__payment {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem;
}
.oxd-wallet__payment > div { display: flex; flex-direction: column; gap: 2px; }
.oxd-wallet__payment dt {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.oxd-wallet__payment dd { margin: 0; color: #fff; font-weight: 500; }
.oxd-wallet__due { display: block; font-weight: 400; color: var(--ap-accent-soft, #d8b362); font-size: .78rem; }
.oxd-wallet__paynote {
  flex-basis: 100%;
  font-size: .76rem;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}

.oxd-wallet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.oxd-wallet__actions .oxd-btn--primary { background: var(--ap-accent, #b8893a); }
.oxd-wallet__actions .oxd-btn--primary:hover { background: var(--ap-accent-soft, #d8b362); color: var(--ap-ink, #1a2a4f); }
.oxd-btn--pay {
  background: #fff;
  color: var(--ap-ink, #1a2a4f);
  border: 1px solid transparent;
}
.oxd-btn--pay:hover { background: color-mix(in oklab, #fff 85%, transparent); }
.oxd-wallet__done { font-size: .85rem; color: rgba(255,255,255,.6); }

.oxd-prepaid {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-a2, #9c7028);
}

.oxd-card__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.oxd-cancel-form { margin: 0; }
.oxd-btn--danger {
  border-color: color-mix(in oklab, #b3362d 30%, transparent);
  color: #b3362d;
}
.oxd-btn--danger:hover { background: #b3362d; color: #fff; border-color: #b3362d; }
.oxd-btn--danger-solid { background: #b3362d; color: #fff; }
.oxd-btn--danger-solid:hover { background: #952c25; color: #fff; }

button.oxd-btn:disabled { opacity: .5; cursor: not-allowed; }
button.oxd-btn--ghost:disabled:hover { background: none; color: var(--ap-ink, #1a2a4f); }

.oxd-notice-msg {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ap-mute, #6b7793);
  margin: 0;
  max-width: 46ch;
}

.oxd-resched-panel {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ap-paper, #f5f8fa);
  border: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 10%, transparent);
}
.oxd-resched-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.oxd-resched-row .oxd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oxd-resched-row .oxd-label {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ap-mute, #6b7793);
}
.oxd-resched-row .bk-cal-trigger { min-width: 200px; }
.oxd-resched-slots {
  /* Grid, not flex-wrap: equal-width columns keep every row aligned. With
     flex the pills sized to their content, so a narrow value like "11:45"
     could squeeze in as a ragged 4th item on an otherwise 3-across row. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.oxd-resched-loading {
  grid-column: 1 / -1;   /* status text spans the full grid, never one cell */
  font-size: .85rem;
  color: var(--ap-mute, #6b7793);
}
.oxd-resched-slot {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 18%, transparent);
  background: #fff;
  color: var(--ap-ink, #1a2a4f);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.oxd-resched-slot:hover { border-color: var(--ap-ink, #1a2a4f); }
.oxd-resched-slot.is-selected { background: var(--ap-ink, #1a2a4f); color: #fff; border-color: var(--ap-ink, #1a2a4f); }

/* Phones: pin to exactly three columns so the grid never reflows awkwardly. */
@media (max-width: 560px) {
  .oxd-resched-slots { grid-template-columns: repeat(3, 1fr); }
}
.oxd-resched-msg {
  font-size: .82rem;
  color: var(--ap-mute, #6b7793);
  margin: 10px 0 0;
}
.oxd-resched-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ── Confirmation modal (replaces the browser's native confirm()) ── */
.oxd-confirm[hidden] { display: none !important; }
.oxd-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.oxd-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--ap-ink, #1a2a4f) 65%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  animation: bk-fade-in .2s ease;
}
.oxd-confirm__window {
  position: relative;
  z-index: 1;
  background: var(--wp--preset--color--paper, #fff);
  border-radius: var(--radius, 14px);
  width: 100%;
  max-width: 380px;
  padding: 28px 26px 24px;
  box-shadow:
    0 8px 24px -4px color-mix(in oklab, var(--ap-ink, #1a2a4f) 18%, transparent),
    0 32px 64px -8px color-mix(in oklab, var(--ap-ink, #1a2a4f) 24%, transparent);
  animation: bk-slide-up .22s cubic-bezier(.34,1.56,.64,1);
}
.oxd-confirm__title {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ap-ink, #1a2a4f);
  margin: 0 0 8px;
}
.oxd-confirm__msg {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ap-ink2, #3a4a6e);
  margin: 0 0 22px;
}
.oxd-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* ── Front-end forms (profile + forgot password) ── */
.oxd-section--narrow { max-width: 640px; }

.oxd-form { margin-top: 8px; }

.oxd-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.oxd-field { display: flex; flex-direction: column; }

.oxd-field label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-ink2, #3a4a6e);
  margin-bottom: 7px;
}

.oxd-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 16%, transparent);
  border-radius: 12px;
  font-size: 1rem;
  background: #fff;
  font-family: var(--wp--preset--font-family--inter);
}
.oxd-field input:focus {
  outline: none;
  border-color: var(--ap-accent, #b8893a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ap-accent, #b8893a) 18%, transparent);
}

.oxd-field__hint {
  font-size: .72rem;
  color: var(--ap-mute, #6b7793);
  margin-top: 6px;
}

.oxd-form__sub {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.2rem;
  margin: 30px 0 4px;
  padding-top: 26px;
  border-top: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 10%, transparent);
}

.oxd-form__actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}

/* Forgot-password form sits in the login column (single field) */
.oxd-login .oxd-form .oxd-field { margin-bottom: 16px; }

@media (max-width: 560px) {
  .oxd-form__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   LESSONS PAGE — [lessons-columns] catalogue
   Overview chips + one column per category, ap-* design language.
   ========================================================================== */

.lc-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(28px, 4vw, 48px);
}

.lc-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  border: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 16%, transparent);
  border-radius: 14px;
  background: var(--ap-paper, #f5f8fa);
  text-decoration: none;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.lc-chip:hover {
  border-color: var(--ap-accent, #b8893a);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(20, 30, 60, .35);
}

.lc-chip b {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ap-ink, #1a2a4f);
}

.lc-chip span {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-a2, #9c7028);
}

.lc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Column itself is not a card — only the lessons inside it are */
.lc-col {
  scroll-margin-top: 120px;
}

.lc-col__title {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.1;
  margin: 0 0 10px;
  padding: 0;
  color: var(--ap-ink, #1a2a4f);
}

.lc-col__desc {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ap-ink2, #3a4a6e);
  margin: 0 0 18px;
  min-height: 3.4em;
}

.lc-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lc-col__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ap-ink, #1a2a4f) 9%, transparent);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lc-col__list a:hover {
  border-color: var(--ap-accent, #b8893a);
  box-shadow: 0 6px 18px -10px rgba(20, 30, 60, .3);
}

.lc-svc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lc-svc__name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ap-ink, #1a2a4f);
  line-height: 1.3;
}

.lc-svc__dur {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-mute, #6b7793);
}

.lc-svc__price {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display));
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ap-ink, #1a2a4f);
  flex-shrink: 0;
}

.lc-col__note {
  font-family: var(--mono, var(--wp--preset--font-family--inter));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-mute, #6b7793);
  margin: 14px 0 0;
}

@media (max-width: 700px) {
  .lc-grid { grid-template-columns: 1fr; }
  .lc-col__desc { min-height: 0; }
}


/* ==========================================================================
   APPROACH PAGE — core-block conversions
   The page content now uses paragraphs/lists/buttons instead of custom
   HTML blocks. These rules keep the converted blocks visually identical.
   ========================================================================== */

/* Kicker is a paragraph now — recreate the accent dot */
p.ap-kicker { margin-top: 0; }
.ap-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-accent);
  display: inline-block;
  margin-right: 12px;
  flex: none;
}

/* Tag pills are paragraphs — win over .ap-split__copy p rules */
.ap-page p.ap-tag {
  margin: 32px 0 0;
  font-size: 10px;
  color: var(--ap-tag-ink, #6b4a12); /* keep in step with .ap-tag — see contrast note there */
}
.ap-page p.ap-tag--dark { color: #fff; }

/* Split panel: texture lines moved from a decorative div to ::before */
.ap-split__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ap-bg) 8%, transparent) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
p.ap-split__big { margin: 0; }
.ap-split__big em {
  color: var(--ap-accent);
  font-style: italic;
  font-family: var(--ap-serif);
}

/* Area pills are a list block now */
ul.ap-pills {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 4px 0 0;
}
.ap-pills li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: static;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-ink2);
  border: 1px solid color-mix(in oklab, var(--ap-ink) 18%, transparent);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0;
}
.ap-pills li::before {
  position: static;
  font-size: 0.95em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  flex: none;
}

/* Aside routes are paragraphs in a group now */
.ap-aside__routes p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.ap-aside__routes b,
.ap-aside__routes strong {
  font-family: var(--ap-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
  display: block;
}

/* Trust mark is a paragraph now */
p.ap-trust__mark { margin: 0; }

/* Trust tags are a list block now */
ul.ap-trust__tags {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-trust__tags li {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ap-trust__tags li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-accent);
  flex: none;
}

/* Big CTA grain moved from a decorative div to ::after */
.ap-bigcta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--ap-accent) 35%, transparent), transparent 60%);
  pointer-events: none;
  opacity: .7;
}
.ap-bigcta .wp-block-cover__inner-container { position: relative; z-index: 1; }

/* CTA buttons row (wp-block-buttons) keeps the original flex layout */
.wp-block-buttons.ap-bigcta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  align-self: flex-end;
}

/* ==========================================================================
   APPROACH PAGE — WP block overrides
   Force grid layout on approach columns; WP uses flex by default.
   ========================================================================== */

/* Bordered card grids use custom grid — override WP flex.
   NOTE: ap-hero-grid and ap-sec-head are intentionally NOT here — they stay as
   native WP columns so the block editor's width / gap / vertical-alignment
   controls work normally. */
.ap-split.wp-block-columns,
.ap-twocol.wp-block-columns,
.ap-areas.wp-block-columns {
  display: grid !important;
  flex-wrap: unset !important;
  gap: unset !important; /* let the class gap rules win */
}

/* Make WP columns inside the card grids behave as grid children */
.ap-split.wp-block-columns > .wp-block-column,
.ap-twocol.wp-block-columns > .wp-block-column,
.ap-areas.wp-block-columns > .wp-block-column {
  flex: unset !important;
  width: unset !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* WP cover used as the dark split-card right panel */
.ap-split__img.wp-block-cover {
  border-radius: 0;
}
.wp-block-cover-image.is-position-bottom-center, .wp-block-cover.is-position-bottom-center {
  justify-content: end;
}
.ap-split__img.wp-block-cover .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0;
  max-width: unset;
  width: 100%;
}

/* Navy bg group — needs border-radius + overflow hidden */
.ap-bigcta.wp-block-group,
.ap-floor.wp-block-group {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Trust strip columns — remove WP default column gaps */
.ap-trust.wp-block-group .wp-block-columns {
  gap: clamp(24px, 3vw, 44px) !important;
  align-items: center !important;
}

/* Remove WP paragraph bottom margin inside approach components */
.ap-floor-stat .wp-block-paragraph,
.ap-feature .wp-block-paragraph,
.ap-local .wp-block-paragraph,
.ap-aside .wp-block-paragraph,
.ap-trust__body .wp-block-paragraph {
  margin-bottom: 0;
}

/* List inside split copy */
.ap-split__copy .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 14px;
}

.ap-split__copy .wp-block-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  padding: 0;
}

.ap-split__copy .wp-block-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  margin-top: 6px;
}

/* WP adds ::marker to lists even with list-style:none — kill it */
.ap-split__copy .wp-block-list li::marker {
  content: none;
}

/* Heading resets inside approach sections */
.ap-page .wp-block-heading {
  padding: 0;
  margin: 0;
}

.ap-page h1.wp-block-heading.ap-h1 {
  font-size: clamp(48px, 7.2vw, 104px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em;
}



.ap-feature .wp-block-heading,
.ap-split__copy .wp-block-heading,
.ap-aside .wp-block-heading {
  font-size: clamp(26px, 2.8vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.012em;
}

.ap-trust__body .wp-block-heading {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.06 !important;
}

.ap-bigcta .wp-block-heading {
  font-size: clamp(42px, 6.4vw, 96px) !important;
  letter-spacing: -.02em;
  line-height: 1 !important;
  color: #fff !important;
}

/* ==========================================================================
   APPROACH PAGE — Cover-block inner adjustments
   ========================================================================== */

/* Big CTA: cover inner-container becomes the 2-col grid */
.ap-bigcta.wp-block-cover .wp-block-cover__inner-container {
  max-width: unset !important;
  width: 100%;
  padding: 0;
}

.ap-bigcta.wp-block-cover .wp-block-cover__inner-container > .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 32px !important;
  flex-wrap: unset !important;
  width: 100%;
}

.ap-bigcta.wp-block-cover .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column {
  flex: unset !important;
  width: unset !important;
  min-width: unset !important;
}

@media (max-width: 780px) {
  .ap-bigcta.wp-block-cover .wp-block-cover__inner-container > .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* Floor-stat columns: evenly spaced, no WP flex-wrap */
.ap-floor .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  flex-wrap: unset !important;
  align-items: unset !important;
}

.ap-floor .wp-block-columns > .wp-block-column {
  flex: unset !important;
  width: unset !important;
  min-width: unset !important;
}

@media (max-width: 780px) {
  .ap-floor .wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
  }
  .ap-floor .wp-block-column.ap-floor-stat + .ap-floor-stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

/* Trust strip: 3-col (auto | 1fr | auto) */
.ap-trust > .wp-block-columns {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(24px, 3vw, 44px) !important;
  flex-wrap: unset !important;
}

.ap-trust > .wp-block-columns > .wp-block-column {
  flex: unset !important;
  width: unset !important;
  min-width: unset !important;
}

@media (max-width: 900px) {
  .ap-trust > .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ap-areas: override default WP columns for 1.1fr .9fr */
.ap-areas.wp-block-columns {
  grid-template-columns: 1.1fr .9fr !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: start !important;
}

@media (max-width: 780px) {
  .ap-areas.wp-block-columns { grid-template-columns: 1fr !important; }
}

/* ap-sec-head and ap-hero-grid: left as native WP columns so the block editor's
   column-width, gap and vertical-alignment controls govern them. Set widths,
   gaps and alignment per block in the editor (Columns > Settings). */

/* ap-split: 1fr 1fr, no gap (border-handled) */
.ap-split.wp-block-columns {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

@media (max-width: 900px) {
  .ap-split.wp-block-columns { grid-template-columns: 1fr !important; }
}

/* ap-split used as feature grid (contains ap-feature cells) — bordered 2-col grid.
   Dividers are REAL borders on each cell, not gap-bleed: WP's generated flex
   container kept collapsing the column-gap, so the vertical line never showed.
   Each cell paints its own right + bottom border; the container paints top + left.
   This produces single clean lines for any column count, no background trick. */
.ap-split.wp-block-columns:has(.ap-feature) {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.ap-split.wp-block-columns:has(.ap-feature) > .ap-feature {
  border-right: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
}
/* 1 orphan (4th, 7th… item — starts a new row alone): span all 3 cols.
   Desktop-only (min-width: 601px) — below that the grid is a single column
   and a leftover "span 2/3" here would force the browser to add an implicit
   extra column track, pulling unrelated cards back into a 2-up layout. */
@media (min-width: 601px) {
  .ap-split.wp-block-columns:has(.ap-feature) > .ap-feature:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
  }
  /* 2 orphans (5th, 8th… item — second in the last row): span the remaining 2 cols */
  .ap-split.wp-block-columns:has(.ap-feature) > .ap-feature:last-child:nth-child(3n+2) {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .ap-split.wp-block-columns:has(.ap-feature) {
    grid-template-columns: 1fr !important;
  }
  .ap-split.wp-block-columns:has(.ap-feature) > .ap-feature {
    grid-column: auto !important;
  }
}

/* Editable list rendered as pill tags (Areas page: meeting points, popular areas) */
ul.ap-pill-list {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 18px 0 0;
}
ul.ap-pill-list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: static;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 18%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0;
}
/* Inherited global checkmark is absolute/top-left — make it an inline, centered tick */
ul.ap-pill-list li::before {
  position: static;
  font-size: 0.95em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  flex: none;
}
/* The covered-places line inside each area card */
.ap-feature .ap-places { font-weight: 600; color: var(--wp--preset--color--ink) !important; }

/* Comparison table (lesson pages: automatic vs manual) */
.wp-block-table.ap-compare { margin: 8px 0 0; }
.wp-block-table.ap-compare table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}
.wp-block-table.ap-compare th,
.wp-block-table.ap-compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
}
.wp-block-table.ap-compare th:last-child,
.wp-block-table.ap-compare td:last-child { border-right: 0; }
.wp-block-table.ap-compare tr:last-child td { border-bottom: 0; }
.wp-block-table.ap-compare thead th {
  background: var(--wp--preset--color--ink);
  color: #fff;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wp-block-table.ap-compare tbody td:first-child { font-weight: 600; color: var(--wp--preset--color--ink); }
.wp-block-table.ap-compare tbody td:not(:first-child) { color: var(--wp--preset--color--ink-2); }
@media (max-width: 540px) {
  .wp-block-table.ap-compare th,
  .wp-block-table.ap-compare td { padding: 11px 12px; font-size: 13.5px; }
}

/* ap-twocol: 1fr 1fr with 1px gap */
/* ap-twocol is now PLAIN columns, not a bordered card grid ("cards after cards"
   looked weird). Two columns with a comfortable gap; cells lose card framing. */
.ap-twocol.wp-block-columns {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(36px, 5vw, 72px) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.ap-twocol .ap-feature {
  background: transparent;
  padding: 0;
}
.ap-twocol .ap-feature:hover { background: transparent; }

/* Eyebrow pills inside the plain columns should read as headings, not pills.
   No <h3> in the cell → the tag becomes the heading; with an <h3> → the tag
   stays a small eyebrow above it. (Never a pill acting as the only header.) */
.ap-twocol .ap-feature > .ap-tag {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ap-twocol .ap-feature:not(:has(h3)) > .ap-tag {
  font-family: var(--ap-serif, var(--wp--preset--font-family--dm-serif-display)) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 27px) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  color: var(--ap-ink, #1a2a4f) !important;
}
.ap-twocol .ap-feature:has(h3) > .ap-tag {
  /* These eyebrows sit on the plain page background with no beige fill,
     where the mid-gold only reached 2.8:1. The darker brown keeps the
     same warm accent look and clears AA. */
  color: var(--ap-tag-ink, #6b4a12) !important;
}

/* Standalone sub-headings inside a section (e.g. "Step 1 — …" process steps)
   were rendering as huge serif headings; keep them clearly below the section h2. */
.ap-section .ap-shell > h3.wp-block-heading {
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-top: clamp(22px, 3vw, 40px);
}

@media (max-width: 840px) {
  .ap-twocol.wp-block-columns { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* Flush variant — no top padding (used for sections that directly follow another) */
.ap-section.ap-section--flush {
  padding-top: 0;
}


/* ── Pass Stories grid ─────────────────────────────────────────────── */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
}

.ps-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--wp--preset--color--surface, #f9f9f7);
  border-radius: var(--radius, 12px);
}

.ps-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--brand, #1a3c6e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-card__initials {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.ps-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ps-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.ps-card__badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand, #1a3c6e);
  background: color-mix(in oklab, var(--wp--preset--color--brand, #1a3c6e) 10%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

.ps-card__centre {
  margin: 0;
  font-size: .8rem;
  color: color-mix(in oklab, currentColor 60%, transparent);
}

@media (max-width: 600px) {
  .ps-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
  }
}


/* ── [lesson-list direction="horizontal"] — category overview cards ── */
.ll-cat-grid {
  display: grid;
  /* column count set inline by PHP based on item count */
  gap: 0;
  /* Dividers are real borders on each card (not gap-bleed) so they always show.
     Each card paints right + bottom; the container paints top + left. Works for
     any column count without nth-child rules. */
  border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-radius: 14px;
  overflow: hidden;
}

.ll-cat-grid .ll-cat-card {
  border-right: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 15%, transparent);
}

.ll-cat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 3vw, 44px);
  background: var(--wp--preset--color--paper);
  text-decoration: none;
  transition: background .18s ease;
}

.ll-cat-card:hover {
  background: color-mix(in oklab, var(--wp--preset--color--ink) 4%, var(--wp--preset--color--paper));
}

.ll-cat-card__title {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.15;
  display: block;
}

.ll-cat-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: clamp(28px, 3vw, 44px);
}

.ll-cat-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* reuse .lg-price__pre / .lg-price__num for price text */

.ll-cat-card__arrow {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  flex-shrink: 0;
  transition: transform .18s ease;
}

.ll-cat-card:hover .ll-cat-card__arrow {
  transform: translateX(5px);
}

.ll-cat-card__meta {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  margin: 10px 0 0;
}

/* PHP sets grid-template-columns as an INLINE style on .ll-cat-grid, which beats
   plain selectors — these mobile overrides must use !important to win. */
@media (max-width: 600px) {
  .ll-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ll-cat-card {
    min-height: 150px;
    padding: clamp(18px, 5vw, 28px);
  }
}

@media (max-width: 400px) {
  .ll-cat-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── Booking: saved details card (returning students) ─────────────────
   A logged-in student who has booked before confirms their stored name,
   contact and pickup address instead of retyping the whole form. The
   full form stays in the DOM, prefilled and hidden, so "Change" reveals
   it with everything already filled in. */
.bk-saved {
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--wp--preset--color--primary) 7%, transparent);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.bk-saved__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--ink);
}
.bk-saved__head svg {
  width: 17px; height: 17px; flex: none;
  color: var(--wp--preset--color--primary);
}
.bk-saved__edit {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  cursor: pointer;
}
.bk-saved__edit:hover { color: var(--wp--preset--color--ink); }
.bk-saved__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 12px 0 0;
}
.bk-saved__list > div { display: contents; }
.bk-saved__list dt {
  font-size: 12.5px;
  color: var(--wp--preset--color--ink-2);
}
.bk-saved__list dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--wp--preset--color--ink);
  word-break: break-word;
}
@media (max-width: 480px) {
  .bk-saved__list { grid-template-columns: 1fr; gap: 2px; }
  .bk-saved__list > div { display: block; margin-bottom: 8px; }
}

/* ── Hero floor stats: compact pills on mobile ────────────────────────
   On phones the four trust stats stacked as full-width rows at 32px,
   costing ~550px of vertical space (incl. margins) for four one-line
   facts. Below 781px they become a 2×2 grid of small pills instead —
   same information, a fraction of the height. Desktop is untouched. */
@media (max-width: 781px) {
  .wp-block-cover.hero-floor {
    padding: 14px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    border-radius: 12px !important;
  }

  .hero-floor .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-wrap: unset !important;
  }

  /* Each stat becomes a self-contained pill — the stacked-row borders
     from the wider breakpoint are replaced by the pill outline. */
  .hero-floor .wp-block-column,
  .hero-floor .wp-block-column:not(:first-child) {
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
  }

  .hero-floor .floor-stat__num {
    font-size: 14.5px !important;
    line-height: 1.15 !important;
    letter-spacing: -.005em !important;
  }

  .hero-floor .floor-stat__lbl {
    font-size: 8.5px !important;
    letter-spacing: .1em !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
  }
}

/* Very narrow phones: one pill per row still beats a 32px stack */
@media (max-width: 340px) {
  .hero-floor .wp-block-columns { grid-template-columns: 1fr !important; }
}

/* ── hero-floor width: let margins do the work ────────────────────────
   Covers below 1260px get a 20px side margin from the generic
   .wp-block-cover:not(.alignwide):not(.alignfull) rule. A fixed
   `width: 100%` therefore overflows by exactly those margins, and the
   old `calc(100% - 40px)` was hard-coding a compensation that only
   held while the margin stayed 20px.

   `width: auto` on a block element resolves to the containing block
   minus its own margins, so it stays correct at every breakpoint
   whatever those margins are. */
.wp-block-cover.hero-floor {
  width: auto !important;
  max-width: 100%;
}

/* ── hero-floor on mobile: drop the navy panel, keep navy pills ───────
   The panel background is doubled up: a background on .hero-floor itself
   plus WP's .wp-block-cover__background overlay span. Both have to go,
   or the panel stays painted behind the pills. */
@media (max-width: 781px) {
  .wp-block-cover.hero-floor {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .hero-floor > .wp-block-cover__background,
  .hero-floor .wp-block-cover__background {
    display: none !important;
  }

  /* The pills now carry the colour */
  .hero-floor .wp-block-column,
  .hero-floor .wp-block-column:not(:first-child) {
    background: var(--wp--preset--color--ink) !important;
    border-color: transparent !important;
    padding: 11px 13px !important;
  }
}


/* ------------------------------------------------------------------
   Instructor Dashboard (/instructor-dashboard/) — Amelia's Employee
   Panel widget. Scoped by slug, not post ID: IDs differ per environment.
   Amelia ships this as a small floating card (fixed width, centred
   with huge auto margins, drop shadow) rather than a page element —
   strip that "floating widget" framing so it sits flush in the page.
------------------------------------------------------------------ */
.page-instructor-dashboard .am-cap__wrapper {
  width: 100% !important;
  max-width: var(--wp--style--global--content-size) !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.page-instructor-dashboard .am-fs__main {
  max-width: 100% !important;
  background: transparent !important;
}

.page-instructor-dashboard .am-fs__main-inner {
  background: transparent !important;
}

/* All instructors are UK/London — the per-user timezone filter is
   never needed and Amelia has no setting to remove it, so hide it. */
.page-instructor-dashboard .am-caph .am-select-wrapper {
  display: none !important;
}