/*
Theme Name: Access Towers Services
Theme URI: https://accesstowersgroup.co.uk
Author: Access Towers Services
Author URI: https://accesstowersgroup.co.uk
Description: Custom theme for Access Towers Services — scaffold tower hire, sales and training, South London.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: access-towers
*/

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --red: #E31E24;
  --redd: #C01A1F;
  --navy: #2D3A4A;
  --navyl: #3a4d62;
  --navyd: #1E2B38;
  --white: #fff;
  --off: #F7F8FA;
  --border: #E2E6EA;
  --text: #1a2332;
  --mid: #4A5568;
  --light: #718096;
  --ssm: 0 1px 4px rgba(0,0,0,.08);
  --smd: 0 4px 20px rgba(0,0,0,.10);
  --slg: 0 12px 48px rgba(0,0,0,.16);
  --r: 10px;
  --rl: 18px;
  --t: all .2s ease;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
section { padding: 68px 0; }

/* ── TOP BAR ────────────────────────────────────────────────── */
.topbar { background: var(--navyd); color: rgba(255,255,255,.75); font-size: 13px; padding: 9px 0; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.topbar a { color: rgba(255,255,255,.75); transition: var(--t); }
.topbar a:hover { color: var(--red); }
.tbg { display: flex; align-items: center; gap: 20px; }
.topbar i { color: var(--red); margin-right: 5px; }

/* ── HEADER & NAV ───────────────────────────────────────────── */
.hdr { background: var(--white); border-bottom: 3px solid var(--red); position: sticky; top: 0; z-index: 900; box-shadow: var(--ssm); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.hdr-logo img { height: 52px; width: auto; }
.hdr-logo-mark { display: none; }
@media (max-width: 640px) {
  .hdr-logo-full { display: none; }
  .hdr-logo-mark { display: block; height: 44px; }
}
nav.main { display: flex; align-items: center; gap: 2px; }
nav.main .nav-item { position: relative; }
nav.main .nav-link {
  font-size: 14px; font-weight: 600; color: var(--mid);
  padding: 7px 13px; border-radius: 7px; transition: var(--t);
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
nav.main .nav-link:hover,
nav.main .nav-link.active { color: var(--navy); background: var(--off); }
nav.main .nav-caret { font-size: 10px; color: var(--light); transition: transform .2s; }
nav.main .nav-item.has-dropdown:hover .nav-caret { transform: rotate(180deg); }
nav.main .nav-item.has-dropdown:hover > .dropdown { display: block; }
.dropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--white); min-width: 280px; box-shadow: var(--smd);
  border: 1px solid var(--border); border-radius: var(--r); padding: 8px; z-index: 1000;
}
.dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
nav.main .dropdown a {
  display: flex !important; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; background: transparent; font-weight: 600;
}
nav.main .dropdown a:hover { background: var(--off); }
nav.main .dropdown a i { color: var(--red); font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.dd-t { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 2px; }
.dd-s { font-size: 11px; font-weight: 500; color: var(--light); line-height: 1.3; }
nav.main .dropdown a:hover .dd-t { color: var(--red); }
.hdr-acts { display: flex; align-items: center; gap: 8px; }
.hbg { display: none; background: none; border: none; font-size: 24px; color: var(--navy); cursor: pointer; padding: 4px; }

/* Mobile nav */
.mob-nav { display: none; flex-direction: column; background: var(--white); border-top: 1px solid var(--border); padding: 14px 20px; gap: 4px; }
/* The header is position:sticky, so an open menu taller than the screen has its
   bottom half pinned off-screen with nothing to scroll. Cap it to the viewport
   below the 68px header bar and let the menu itself scroll. dvh (where
   supported) accounts for mobile browser chrome; the vh line is the fallback. */
.mob-nav.open {
  display: flex;
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mob-nav .mob-link { font-size: 15px; font-weight: 600; color: var(--mid); padding: 11px 14px; border-radius: 8px; transition: var(--t); display: block; }
.mob-nav .mob-link:hover,
.mob-nav .mob-link.active { color: var(--navy); background: var(--off); }
.mob-section { display: flex; flex-direction: column; }
.mob-section-tog {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; font-size: 15px; font-weight: 600; color: var(--mid);
  padding: 11px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; text-align: left;
}
.mob-section-tog i { font-size: 11px; transition: transform .2s; color: var(--light); }
/* Direct-child selectors only: sections nest, and a descendant selector here
   would open every sub-level as soon as its parent opened. */
.mob-section.open > .mob-section-tog { color: var(--navy); background: var(--off); }
.mob-section.open > .mob-section-tog i { transform: rotate(180deg); color: var(--red); }
.mob-section-body { display: none; flex-direction: column; padding: 4px 0 8px 16px; gap: 2px; }
.mob-section.open > .mob-section-body { display: flex; }
.mob-section-body a { font-size: 14px; padding: 9px 14px; color: var(--mid); border-radius: 6px; font-weight: 600; display: block; }
.mob-section-body a:hover,
.mob-section-body a.active { color: var(--red); background: var(--off); }
/* Nested section headers sit at sub-link scale, not top-level scale. */
.mob-section-body .mob-section-tog { font-size: 14px; padding: 9px 14px; }
/* "View all <Title>" — the parent page, since the parent row is now a button.
   The arrow is CSS so it stays out of the anchor text. */
.mob-section-body .mob-sec-all { color: var(--red); font-weight: 700; }
.mob-section-body .mob-sec-all::after { content: ' \2192'; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-weight: 700;
  border-radius: var(--r); cursor: pointer; transition: var(--t);
  white-space: nowrap; border: 2px solid transparent; text-decoration: none;
}
.btn-sm  { font-size: 13px; padding: 7px 15px; }
.btn-md  { font-size: 14px; padding: 10px 20px; }
.btn-lg  { font-size: 15px; padding: 13px 28px; }
.btn-xl  { font-size: 16px; font-weight: 800; padding: 16px 34px; border-radius: 12px; }
/* Two-line button: main label + lighter sub-text, same height alignment */
.btn-stack { padding-top: 8px; padding-bottom: 8px; align-items: center; }
.btn-stack-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn-stack-main { font-size: 15px; font-weight: 700; }
.btn-stack-sub { font-size: 12px; font-weight: 500; opacity: .8; }
.btn-red   { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--redd); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(227,30,36,.35); }
.btn-navy  { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navyl); transform: translateY(-1px); }
.btn-blue  { background: #2563EB; color: #fff; }
.btn-blue:hover { background: #1D4ED8; transform: translateY(-1px); }
.btn-out   { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-out:hover { border-color: var(--navy); }
.btn-outw  { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outw:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── TRUST BAR ──────────────────────────────────────────────── */
.trust { background: #FFF5F5; border-bottom: 1px solid #FFD0D0; padding: 14px 0; }
.trust .wrap { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 12px; }
.ti { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
.ti i { color: var(--red); font-size: 16px; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.bc { background: var(--off); border-bottom: 1px solid var(--border); padding: 12px 0; }
.bc .wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--light); }
.bc a { color: var(--mid); }
.bc a:hover { color: var(--red); }
.bc .sep { font-size: 10px; }

/* ── SHARED SECTION STYLES ──────────────────────────────────── */
.eye {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--red); margin-bottom: 10px;
}
.eye::before { content: ''; width: 16px; height: 3px; background: var(--red); border-radius: 2px; }
h2.st {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 900;
  color: var(--navy); line-height: 1.1; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 14px;
}
.si { font-size: 16px; color: var(--light); max-width: 580px; line-height: 1.75; }

/* ── STATS ──────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--navy); border-radius: var(--rl); overflow: hidden; margin-top: 44px; }
.stat { padding: 26px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.07); }
.stat:last-child { border: none; }
.stn { font-family: 'Inter', sans-serif; font-size: 38px; font-weight: 900; color: var(--red); line-height: 1; margin-bottom: 6px; }
.stl { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; }

/* ── CTA BAND ───────────────────────────────────────────────── */
.ctaband { background: var(--red); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.ctaband::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 0, transparent 50%);
  background-size: 16px 16px;
}
.ctaband .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.ctaband h2 { font-family: 'Inter', sans-serif; font-size: clamp(24px, 3.5vw, 40px); font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.ctaband p { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.6; }
.cta-r { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0; }
/* Centred CTA band variant (used on training pages) */
.ctaband-center .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.ctaband-center .ctaband-c-txt { max-width: 680px; }
.ctaband-center .ctaband-c-txt h2 { font-family: 'Inter', sans-serif; font-size: clamp(24px, 3.5vw, 40px); font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.ctaband-center .ctaband-c-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-tel { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.cta-contact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1EBE57; color: #fff; transform: translateY(-1px); }
.btn-whatsapp i { font-size: 18px; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #f0f2f5; color: var(--navy); transform: translateY(-1px); }

/* ── HERO (homepage) ────────────────────────────────────────── */
.hero {
  background: linear-gradient(90deg, rgba(30,43,56,.93) 0%, rgba(45,58,74,.78) 70%, rgba(45,58,74,.65) 100%),
    url('<?php echo get_template_directory_uri(); ?>/images/hero-bg.jpg') center/cover no-repeat;
  color: #fff; padding: 80px 0 100px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
}
.hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); }
.hero .wrap { display: grid; grid-template-columns: 1fr 400px; gap: 52px; align-items: center; position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(227,30,36,.15); border: 1px solid rgba(227,30,36,.4);
  color: #FFB3B5; font-size: 12px; font-weight: 700; padding: 5px 13px;
  border-radius: 30px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .08em;
}
.hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px); font-weight: 900;
  line-height: 1.0; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .01em;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero-sub { font-size: 17px; color: rgba(255,255,255,.75); margin-bottom: 28px; line-height: 1.7; max-width: 520px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
}
.pill i { color: var(--red); font-size: 11px; }
.hctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero card */
.hero-card { background: #fff; border-radius: var(--rl); padding: 28px; box-shadow: var(--slg); position: relative; z-index: 2; color: var(--text); }
.hc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--light); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.hc-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hc-row:last-of-type { border: none; }
.hc-ico { width: 38px; height: 38px; border-radius: 9px; background: #FFF0F0; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.hc-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--light); margin-bottom: 2px; }
.hc-v { font-size: 14px; font-weight: 700; color: var(--text); }
.hc-acts { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.hc-acts .btn { justify-content: center; }
.hc-phone {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--navy);
  border: 2px solid var(--border); border-radius: var(--r); padding: 11px; transition: var(--t);
}
.hc-phone i { color: var(--red); }
.hc-phone:hover { border-color: var(--red); color: var(--red); }

/* ── SMALL HERO (inner pages) ───────────────────────────────── */
.hero-sm { background: var(--navy); color: #fff; padding: 52px 0 68px; position: relative; overflow: hidden; }
.hero-sm::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
}
.hero-sm::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); }
.hero-sm .wrap { position: relative; z-index: 2; }
.hero-sm h1 { font-family: 'Inter', sans-serif; font-size: clamp(32px, 5vw, 56px); font-weight: 900; text-transform: uppercase; margin-bottom: 10px; line-height: 1; }
.hero-sm h1 em { color: var(--red); font-style: normal; }
.hero-sm p { font-size: 17px; color: rgba(255,255,255,.75); max-width: 520px; line-height: 1.7; }
.hero-sm-wave { position: absolute; bottom: -1px; left: 0; right: 0; }

/* ── SERVICES GRID ──────────────────────────────────────────── */
.svc-sec { background: var(--off); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.svc-card { background: #fff; border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--ssm); transition: var(--t); display: flex; flex-direction: column; }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--smd); border-color: var(--red); }
.svc-head { padding: 28px 26px; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start; background-size: cover; background-position: center; }
/* Solid colour layer. Fully opaque by default (no photo) so it looks unchanged. */
.svc-head-color { position: absolute; inset: 0; z-index: 0; }
/* When a photo is set, the colour layer becomes a translucent tint over it. */
.svc-head.has-bg .svc-head-color { opacity: .88; }
.svc-head::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 0, transparent 50%);
  background-size: 12px 12px;
}
.svc-ico { width: 56px; height: 56px; border-radius: 15px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; margin-bottom: 16px; position: relative; z-index: 2; }
.svc-head h3 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .03em; position: relative; z-index: 2; }
.svc-head p { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.6; margin-top: 6px; position: relative; z-index: 2; }
.svc-body { padding: 20px 26px; flex: 1 1 auto; }
.svc-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mid); padding: 6px 0; border-bottom: 1px solid var(--border); }
.svc-list li:last-child { border: none; }
.svc-list li i { color: var(--red); font-size: 12px; }
.svc-foot { padding: 16px 26px 22px; display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* TRAINING LANDING — 3-across course grid + helper cards */
.svc-grid-courses { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
.svc-grid-courses .svc-head { min-height: 210px; }
.trl-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.trl-help-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 24px 22px; box-shadow: var(--ssm); }
.trl-help-card i { color: var(--red); font-size: 26px; margin-bottom: 12px; display: block; }
.trl-help-card h4 { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.trl-help-card p { font-size: 13.5px; line-height: 1.6; color: var(--mid); margin: 0; }
.trl-help-card strong { color: var(--navy); }

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; position: relative; }
.how-grid::before { content: ''; position: absolute; top: 32px; left: calc(12.5%); right: calc(12.5%); height: 2px; background: var(--border); z-index: 0; }
.how-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.how-num { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--navy); }
.how-step.active .how-num { background: var(--red); box-shadow: 0 0 0 2px var(--red); }
.how-step h4 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--navy); text-transform: uppercase; margin-bottom: 8px; }
.how-step p { font-size: 13px; color: var(--light); line-height: 1.65; }

/* ── WHY CHOOSE US ──────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
.why-list li { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.why-ico { width: 46px; height: 46px; border-radius: 12px; background: #FFF0F0; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.why-txt strong { display: block; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.why-txt p { font-size: 14px; color: var(--light); line-height: 1.65; }
.why-img-block { background: var(--navy); border-radius: var(--rl); padding: 36px; position: relative; overflow: hidden; }
.why-img-block::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 0, transparent 50%); background-size: 16px 16px; }
.why-img-block::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); }
.wib-inner { position: relative; z-index: 1; }
.wib-inner h3 { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 900; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.wib-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.wib-row:last-child { border: none; }
.wib-row i { color: var(--red); font-size: 18px; width: 24px; }
.wib-row span { font-size: 14px; color: rgba(255,255,255,.8); font-weight: 600; }

/* ── TRAINING STRIP ─────────────────────────────────────────── */
.train-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: stretch; }
.train-card { background: var(--off); border-radius: var(--rl); padding: 24px 20px; border: 1px solid var(--border); transition: var(--t); text-align: center; display: flex; flex-direction: column; }
.train-card:hover { transform: translateY(-4px); box-shadow: var(--smd); border-color: var(--red); background: #fff; }
.train-ico { width: 52px; height: 52px; border-radius: 14px; background: #FFF0F0; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px; }
.train-logo { height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.train-logo img { max-height: 52px; max-width: 140px; width: auto; height: auto; object-fit: contain; display: block; }
.train-card h4 { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800; color: var(--navy); text-transform: uppercase; margin-bottom: 6px; }
.train-card p { font-size: 13px; color: var(--light); line-height: 1.6; margin-bottom: 14px; flex: 1 1 auto; }
.train-card .btn { width: 100%; justify-content: center; font-size: 13px; margin-top: auto; }

/* ── INDUSTRIES ─────────────────────────────────────────────── */
.ind-sec { background: var(--navy); color: #fff; }
.ind-sec .si { color: rgba(255,255,255,.65); }
.ind-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 44px; }
.ind-tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r); padding: 18px 12px; text-align: center; transition: var(--t); }
.ind-tile:hover { background: rgba(227,30,36,.12); border-color: var(--red); }
.ind-tile i { font-size: 24px; color: var(--red); margin-bottom: 10px; display: block; }
.ind-tile span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); line-height: 1.4; display: block; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.test-card { background: #fff; border-radius: var(--rl); padding: 26px; border: 1px solid var(--border); box-shadow: var(--ssm); }
.test-stars { color: #F59E0B; font-size: 14px; margin-bottom: 12px; }
.test-q { font-size: 14px; color: var(--mid); line-height: 1.75; margin-bottom: 16px; font-style: italic; }
.test-who { display: flex; align-items: center; gap: 10px; }
.test-av { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.test-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.test-role { font-size: 12px; color: var(--light); }

/* ── CONTACT PAGE ───────────────────────────────────────────── */
.cm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cm-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 24px 20px; text-align: center; transition: var(--t); display: block; }
.cm-card:hover { border-color: var(--red); box-shadow: var(--smd); }
.cm-ico { width: 52px; height: 52px; background: #FFF0F0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 20px; color: var(--red); }
.cm-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--light); margin-bottom: 4px; }
.cm-val { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900; color: var(--navy); }
.cm-sub { font-size: 12px; color: var(--light); margin-top: 4px; }
.contact-layout { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 36px; box-shadow: var(--ssm); }
.form-card h3 { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 900; color: var(--navy); text-transform: uppercase; margin-bottom: 6px; }
/* .pav-form-card included: the course enquiry templates and the reusable
   at_render_enquiry_form() both use .form-sub inside .pav-form-card, where
   the .form-card-scoped rule never applied and the intro line rendered
   unstyled. */
.form-card .form-sub,
.pav-form-card .form-sub { font-size: 14px; color: var(--light); margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.form-group input,
.form-group select,
.form-group textarea { border: 1.5px solid var(--border); border-radius: var(--r); padding: 11px 14px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text); background: var(--white); transition: var(--t); width: 100%; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(227,30,36,.1); }
.form-group textarea { min-height: 120px; resize: vertical; }
.info-card { background: var(--navy); border-radius: var(--rl); padding: 28px; color: #fff; margin-bottom: 20px; }
.info-card h4 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.info-row { display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start; }
.info-row i { color: var(--red); width: 18px; margin-top: 4px; flex-shrink: 0; }
.info-row-content strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.info-row-content span { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; }
.info-row-content a { color: rgba(255,255,255,.8); transition: var(--t); }
.info-row-content a:hover { color: var(--red); }
.hours-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 24px; margin-bottom: 20px; }
.hours-card h4 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 900; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.hours-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.hours-row:last-of-type { border: none; }
.hours-row .day { color: var(--mid); font-weight: 500; }
.hours-row .time { font-weight: 700; color: var(--text); }
.hours-row .closed { color: var(--light); }
.today-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.map-wrap { height: 420px; background: var(--off); border-radius: var(--rl); overflow: hidden; margin-top: 48px; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }
.success-msg { display: none; background: #F0FFF4; border: 1px solid #86EFAC; border-radius: var(--r); padding: 16px 20px; color: #166534; font-weight: 600; align-items: center; gap: 10px; margin-bottom: 16px; }
.success-msg.show { display: flex; }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer { background: var(--navyd); color: rgba(255,255,255,.7); padding: 52px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.foot-logo { margin-bottom: 12px; }
.foot-logo img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.foot-brand p { font-size: 13px; line-height: 1.75; margin-top: 10px; }
.foot-accred { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.accred-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }
.foot-col h4 { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.foot-col ul li { margin-bottom: 8px; }
.foot-col ul li a { font-size: 13px; color: rgba(255,255,255,.55); transition: var(--t); }
.foot-col ul li a:hover { color: var(--red); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }

/* ── WORDPRESS CONTENT OVERRIDES ────────────────────────────── */
.entry-content h1, .entry-content h2, .entry-content h3 { font-family: 'Inter', sans-serif; font-weight: 900; color: var(--navy); text-transform: uppercase; margin-bottom: 14px; }
.entry-content p { margin-bottom: 16px; color: var(--mid); line-height: 1.75; }
.wp-block-button__link { font-family: 'Inter', sans-serif; font-weight: 700; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-grid-courses { grid-template-columns: 1fr 1fr; }
  .trl-help { grid-template-columns: 1fr 1fr; }
  .train-grid { grid-template-columns: 1fr 1fr; }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .how-grid::before { display: none; }
  .cm-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  nav.main { display: none !important; }
  .hbg { display: block !important; }
  .hdr-acts .btn { padding: 8px 12px; font-size: 12px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid-courses { grid-template-columns: 1fr; }
  .trl-help { grid-template-columns: 1fr; }
  .train-grid { grid-template-columns: 1fr 1fr; }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .ctaband .wrap { grid-template-columns: 1fr; }
  .cta-r { align-items: flex-start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .test-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tbg:last-child { display: none; }
  .train-grid, .ind-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .cm-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 48px 0; }
}

/* ── TOWER SALES (BUY) PRODUCT GRID ─────────────────────────── */
.ts-sec { background: #fff; }
.ts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.ts-card { background: #fff; border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--ssm); transition: var(--t); display: flex; flex-direction: column; }
.ts-card:hover { transform: translateY(-5px); box-shadow: var(--smd); border-color: var(--red); }
/* Header with image + dark gradient for text legibility */
.ts-head { position: relative; min-height: 340px; background: var(--navy); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; overflow: hidden; }
/* Default (no photo): navy with full gradient so the fallback looks deliberate. */
.ts-head-tint { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30,43,56,.35) 0%, rgba(30,43,56,.55) 55%, rgba(30,43,56,.88) 100%); }
/* With a photo: keep the top ~60% clean (product shows true), only darken a band
   at the bottom behind the title text. No murky full-image tint. */
.ts-head.has-bg { background-color: #fff; }
.ts-head.has-bg .ts-head-tint { background: linear-gradient(180deg, rgba(30,43,56,0) 0%, rgba(30,43,56,0) 48%, rgba(30,43,56,.45) 72%, rgba(30,43,56,.86) 100%); }
/* Cards whose artwork is a logo rather than a photo: show it whole and
   undistorted on white, centred above the title, with the tint pushed below it. */
.ts-head.is-logo { background-size: 58% auto; background-repeat: no-repeat; background-position: center 34%; background-color: #fff; }
.ts-head.is-logo .ts-head-tint { background: linear-gradient(180deg, rgba(30,43,56,0) 0%, rgba(30,43,56,0) 58%, rgba(30,43,56,.5) 78%, rgba(30,43,56,.9) 100%); }
.ts-ico { position: absolute; top: 18px; left: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 12px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ts-head-text { position: relative; z-index: 2; }
.ts-title { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.ts-subtitle { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.ts-body { padding: 20px; flex: 1 1 auto; }
.ts-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-spec { background: var(--off); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.ts-spec-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 2px; }
.ts-spec-v { font-size: 14px; font-weight: 700; color: var(--text); }
.ts-foot { padding: 0 20px 20px; display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
/* IPAF course card footer — full-width centred button, badge centred below */
.ipaf-course-grid .ts-body { display: flex; flex-direction: column; }
.ipaf-course-grid .ts-specs { margin-bottom: 4px; }
.ipaf-course-grid .ts-spec { display: flex; flex-direction: column; justify-content: center; min-height: 64px; box-sizing: border-box; }
.ipaf-course-grid .ts-spec-v { line-height: 1.25; }
.ipaf-course-foot { padding: 16px 20px 20px; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ipaf-course-btn { width: 100%; justify-content: center; }
.ipaf-course-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; background: #FFF0F0; color: var(--red); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
/* Empty badge slot keeps its height so the button stays in a fixed position across all cards */
.ipaf-course-badge.is-empty { background: transparent; padding: 5px 0; }
.ts-badge { display: inline-block; background: #FFF0F0; color: var(--red); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1000px) { .ts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ts-grid { grid-template-columns: 1fr; } }

/* ── BUY PAGE HERO (image bg, red baseline, no wave) ────────── */
.hero-buy { background-size: cover; background-position: center; border-bottom: 4px solid var(--red); padding: 80px 0 88px; }
.hero-buy h1 { font-size: clamp(40px, 6vw, 64px); }
.hero-buy p { max-width: 600px; }
.hero-buy-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-acts { margin-top: 30px; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.hero-acts-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.hero-acts-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.hero-acts .btn { width: 100%; justify-content: center; }
.hero-acts-bottom .btn { padding-left: 10px; padding-right: 10px; }
.btn-livechat { background: #F5821F; color: #fff; }
.btn-livechat:hover { background: #E0730F; color: #fff; transform: translateY(-1px); }
/* Onsite tab — bordered box with centred intro + 2x2 contact buttons */
.ipaf-onsite-box { background:#fff; border:1px solid var(--border); border-radius: var(--rl); padding:40px 32px; text-align:center; }
.ipaf-onsite-box .ipaf-onsite-lead { font-size:15px; line-height:1.65; color:var(--mid); max-width:620px; margin:0 auto 26px; }
.ipaf-onsite-acts { max-width: 560px; margin:0 auto; display: flex; flex-direction: column; gap: 12px; }
.ipaf-onsite-acts .hero-acts-top, .ipaf-onsite-acts .hero-acts-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ipaf-onsite-acts .btn { width: 100%; justify-content: center; }
@media (max-width: 600px) {
  .hero-acts { max-width: 100%; }
  .hero-acts-top, .hero-acts-bottom { grid-template-columns: 1fr; }
  .ipaf-onsite-acts { max-width: 100%; }
  .ipaf-onsite-acts .hero-acts-top, .ipaf-onsite-acts .hero-acts-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .hero-buy-acts { flex-direction: column; } .hero-buy-acts .btn { width: 100%; justify-content: center; } }

/* ── PRODUCT PAGE (PDP) ─────────────────────────────────────── */
.pdp-hero { background: #fff; padding-top: 48px; }
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pdp-media { background: var(--off); border: 1px solid var(--border); border-radius: var(--rl); padding: 24px; display: flex; align-items: center; justify-content: center; }
.pdp-media img { max-width: 100%; height: auto; border-radius: 8px; }
.pdp-media-fallback { aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--border); font-size: 64px; }
.pdp-media-col { display: flex; flex-direction: column; gap: 14px; }
.pdp-manual-btn { width: 100%; justify-content: center; }
.pdp-title { font-family: 'Inter', sans-serif; font-size: clamp(32px, 4.5vw, 52px); font-weight: 900; color: var(--navy); text-transform: uppercase; line-height: 1.02; margin-bottom: 8px; }
.pdp-subtitle { font-size: 13px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.pdp-intro { font-size: 16px; color: var(--mid); line-height: 1.75; margin-bottom: 24px; }
.pdp-keyspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.pdp-ks { background: var(--off); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.pdp-ks-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 3px; }
.pdp-ks-v { font-size: 16px; font-weight: 800; color: var(--navy); font-family: 'Inter', sans-serif; }
.pdp-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pdp-reassure { font-size: 13px; color: var(--light); display: flex; align-items: center; gap: 8px; }
.pdp-reassure i { color: #16A34A; }

.pdp-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.pdp-feature { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 26px 22px; }
.pdp-feature-ico { width: 52px; height: 52px; border-radius: 14px; background: #FFF0F0; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.pdp-feature h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: var(--navy); text-transform: uppercase; margin-bottom: 8px; line-height: 1.1; }
.pdp-feature p { font-size: 14px; color: var(--mid); line-height: 1.6; }

.pdp-spectable-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rl); }
.pdp-spectable { width: 100%; border-collapse: collapse; }
.pdp-spectable th { background: var(--navy); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 16px 20px; text-align: left; }
.pdp-spectable th span { font-weight: 500; opacity: .7; font-size: 12px; }
.pdp-spectable td { padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.pdp-spectable tbody tr:nth-child(even) { background: var(--off); }
.pdp-spectable tbody tr:last-child td { border-bottom: none; }
.pdp-spec-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--light); margin-top: 16px; line-height: 1.6; }
.pdp-spec-note i { color: var(--red); margin-top: 3px; flex-shrink: 0; }

.pdp-pasma { background: var(--navy); padding: 44px 0; }
.pdp-pasma-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.pdp-pasma h3 { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 900; color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.pdp-pasma p { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.65; max-width: 640px; }

.pdp-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.pdp-quote-contact { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.pdp-qc { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; transition: var(--t); }
.pdp-qc:hover { border-color: var(--red); }
.pdp-qc i { color: var(--red); font-size: 20px; width: 24px; text-align: center; }
.pdp-qc span { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; color: var(--navy); }
.pdp-qc strong { font-size: 11px; font-weight: 700; color: var(--light); text-transform: uppercase; letter-spacing: .06em; }

.pdp-faqs { max-width: none; margin-top: 32px; }
.faq-i { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; background: #fff; }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 22px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-q i { color: var(--red); transition: transform .2s; flex-shrink: 0; }
.faq-i.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; padding: 0 22px; }
.faq-i.open .faq-a { max-height: 400px; padding: 0 22px 18px; }
.faq-a p { font-size: 15px; color: var(--mid); line-height: 1.7; }
.faq-a a { color: var(--red); font-weight: 600; text-decoration: underline; }

@media (max-width: 1000px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-features { grid-template-columns: 1fr 1fr; }
  .pdp-quote { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pdp-features { grid-template-columns: 1fr; }
  .pdp-keyspecs { grid-template-columns: 1fr 1fr; }
  .pdp-acts .btn { width: 100%; justify-content: center; }
  .pdp-pasma-inner { flex-direction: column; align-items: flex-start; }
}

/* ── QUOTE TABLE + FILTER ───────────────────────────────────── */
.qt-toggle { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.qt-tab { flex: 1; min-width: 200px; text-align: left; background: #fff; border: 2px solid var(--border); border-radius: var(--r); padding: 14px 18px; cursor: pointer; transition: var(--t); display: flex; flex-direction: column; gap: 3px; font-family: 'Inter', sans-serif; }
.qt-tab strong { font-size: 16px; font-weight: 800; color: var(--navy); text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: .02em; }
.qt-tab span { font-size: 13px; color: var(--light); }
.qt-tab.active { border-color: var(--red); background: #FFF8F8; }
.qt-tab.active strong { color: var(--red); }
.qt-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rl); background: #fff; }
.qt-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.qt-table th { background: var(--navy); color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 14px 18px; text-align: left; }
.qt-table td { padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; }
.qt-table tbody tr:last-child td { border-bottom: none; }
.qt-table tbody tr:hover { background: var(--off); }
.qt-table td:last-child { text-align: right; }
.qt-add { white-space: nowrap; }

/* Floating quote basket */
.qt-basket { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: var(--navy); box-shadow: 0 -6px 24px rgba(0,0,0,.2); border-top: 3px solid var(--red); }
.qt-basket-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.qt-basket-summary { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; }
.qt-basket-summary i { color: var(--red); font-size: 20px; }
.qt-basket-summary strong { font-size: 18px; font-family: 'Inter', sans-serif; }
.qt-basket-view { background: none; border: none; color: rgba(255,255,255,.7); text-decoration: underline; cursor: pointer; font-size: 13px; font-family: inherit; }
.qt-basket-view:hover { color: #fff; }
.qt-basket-list { max-height: 200px; overflow-y: auto; background: var(--navyd); padding: 12px 24px; }
.qt-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); font-size: 14px; }
.qt-li:last-child { border-bottom: none; }
.qt-remove { background: none; border: none; color: var(--red); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; }
body { padding-bottom: 0; }
@media (max-width: 600px) {
  .qt-basket-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .qt-basket-summary { justify-content: center; }
  .qt-basket-inner .btn { width: 100%; justify-content: center; }
}

/* ── HIRE CONFIGURATOR ──────────────────────────────────────── */
.hire-config { max-width: 100%; }
.hire-row { background: #fff; border: 2px solid var(--red); border-radius: var(--rl); padding: 22px; margin-bottom: 16px; }
.hire-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hire-row-title { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; }
.hire-row-remove { background: none; border: none; color: var(--red); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.hire-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hire-field { display: flex; flex-direction: column; gap: 6px; }
.hire-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mid); }
.hire-field select, .hire-field input { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); font-size: 15px; font-family: inherit; background: #fff; color: var(--text); }
.hire-field select:focus, .hire-field input:focus { outline: none; border-color: var(--red); }
.hire-field input[readonly] { background: var(--off); color: var(--mid); }
.hire-row-novar { font-size: 14px; color: var(--mid); background: var(--off); border-radius: var(--r); padding: 14px 16px; }
#hire-add-row { margin-bottom: 22px; }
.hire-delivery { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 24px; margin: 8px 0 20px; }
.hire-delivery h3 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); text-transform: uppercase; margin-bottom: 16px; }
.hire-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Open Account prompt — sits under the hire quote form */
.open-acc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 28px; padding: 24px 28px; background: var(--off); border: 1px solid var(--border);
  border-left: 4px solid var(--red); border-radius: var(--r); }
.open-acc-cta-text { flex: 1 1 320px; }
.open-acc-cta h3 { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 5px; }
.open-acc-cta p { font-size: 14.5px; color: var(--mid); line-height: 1.6; margin: 0; }
.open-acc-cta .btn { flex: 0 0 auto; }

@media (max-width: 600px) {
  .hire-row-fields { grid-template-columns: 1fr; }
  .hire-actions .btn { width: 100%; justify-content: center; }
  .open-acc-cta { padding: 20px; }
  .open-acc-cta .btn { width: 100%; justify-content: center; }
}

/* ── PASMA TRAINING CTA BAND (sleek thin bar) ───────────────── */
.pasma-cta { background: var(--red); padding: 18px 0; }
.pasma-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pasma-cta-left { display: flex; align-items: center; gap: 18px; }
.pasma-cta-logo { height: 44px; width: auto; background: #fff; padding: 7px 12px; border-radius: 8px; flex-shrink: 0; }
.pasma-cta-icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; }
.pasma-cta-text { display: flex; flex-direction: column; line-height: 1.25; }
.pasma-cta-text strong { font-family: 'Inter', sans-serif; font-size: 21px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.pasma-cta-text span { font-size: 13px; color: rgba(255,255,255,.82); font-weight: 500; }
.pasma-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-blue { background: #2563EB; color: #fff; }
.btn-blue:hover { background: #1d4ed8; color: #fff; }
.btn-wb { background: #fff; color: #111; }
.btn-wb i { color: #111; }
.btn-wb:hover { background: var(--off); color: #111; }
@media (max-width: 760px) {
  .pasma-cta-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pasma-cta-btns { width: 100%; }
  .pasma-cta-btns .btn { flex: 1; justify-content: center; }
}

/* ── SEO INTRO + TERMINOLOGY ───────────────────────────────────── */
.hire-seo-intro { padding: 48px 0 8px; }
.hire-seo-intro .seo-intro-body p { font-size: 17px; line-height: 1.7; color: var(--mid); max-width: none; margin: 0 0 16px; }
.hire-seo-intro .seo-terms { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--light); background: var(--off); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 16px; margin-top: 6px; }
.hire-seo-intro .seo-terms i { color: var(--red); }

/* ── APPLICATIONS / IDEAL FOR ──────────────────────────────────── */
.hire-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .hire-apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hire-apps { grid-template-columns: 1fr; } }
.hire-app { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; font-weight: 600; color: var(--navy); }
.hire-app i { color: var(--red); font-size: 18px; width: 22px; text-align: center; flex: none; }
/* IPAF "Why Us" — fixed-size cards regardless of text length (8-up) */
.ipaf-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ipaf-why-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 22px 16px; min-height: 150px; box-sizing: border-box; font-weight: 600; color: var(--navy); line-height: 1.4; }
.ipaf-why-card i { color: var(--red); font-size: 28px; flex: none; }
.ipaf-why-card span { font-size: 14px; }
@media (max-width: 900px) { .ipaf-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ipaf-why { grid-template-columns: 1fr; } .ipaf-why-card { min-height: 0; flex-direction: row; text-align: left; } }

/* ── SPEC / HEIGHTS TABLE ──────────────────────────────────────── */
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rl); background: #fff; }
.spec-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.spec-table th { text-align: left; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; color: #fff; background: var(--navy); padding: 14px 18px; }
.spec-table td { padding: 13px 18px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text); }
.spec-table tbody tr:nth-child(even) td { background: var(--off); }
.spec-avail { display: inline-flex; align-items: center; gap: 7px; color: #16794a; font-weight: 600; font-size: 14px; }
.spec-avail i { color: #16794a; }

/* ── HOW HIRE WORKS (3 steps) ──────────────────────────────────── */
.hire-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hire-step { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 28px 24px; position: relative; }
.hire-step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hire-step h3 { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: 19px; color: var(--navy); margin: 0 0 8px; }
.hire-step p { font-size: 15px; line-height: 1.6; color: var(--mid); margin: 0; }
@media (max-width: 860px) {
  .hire-steps { grid-template-columns: 1fr; }
}

/* ── HIRE LANDING: "Which do I need?" helper ───────────────────── */
.hl-help { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hl-help-row { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 16px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.hl-help-row:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.hl-help-row > i { color: var(--red); font-size: 20px; width: 26px; text-align: center; flex: none; }
.hl-help-need { font-weight: 600; color: var(--navy); flex: 1; }
.hl-help-go { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--red); font-size: 14px; white-space: nowrap; }
.hl-help-go i { margin-left: 6px; }
@media (max-width: 720px) { .hl-help { grid-template-columns: 1fr; } }

/* ── IPAF BOOKING CALENDAR (Dante slot + fallback) ─────────────── */
.ipaf-book { padding: 56px 0; }
.ipaf-book-head { margin-bottom: 14px; }
.ipaf-book-head.has-logo { position: relative; min-height: 90px; }
.ipaf-book-head-txt { max-width: calc(100% - 240px); }
.ipaf-book-head-logo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.ipaf-book-head-logo img { width: 200px; max-width: 28vw; height: auto; display: block; }
/* Mobile: logo stays top-right, text wraps clear of it */
@media (max-width: 768px) { .ipaf-book-head-txt { max-width: calc(100% - 130px); } .ipaf-book-head-logo img { width: 110px; max-width: 34vw; } }
@media (max-width: 380px) { .ipaf-book-head-logo img { width: 88px; } }
.ipaf-filter { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:22px; }
.ipaf-filter-btn { font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size:15px; line-height:1.2; color:var(--navy); background:#fff; border:2px solid var(--border); border-radius:var(--r); padding:11px 20px; cursor:pointer; transition:all .15s; }
.ipaf-filter-btn:hover { border-color:var(--navy); }
.ipaf-filter-btn.active { background:var(--red); border-color:var(--red); color:#fff; }

/* Per-course calendar selector — a third filter button beside the tabs.
   Inherits .ipaf-filter-btn for the button look; only the select-specific
   bits (native chrome removed, room for the chevron) are set here. */
.ipaf-filter-select { appearance:none; -webkit-appearance:none;
  padding-right:42px; max-width:340px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232D3A4A'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:16px; }
.ipaf-filter-select[hidden] { display:none; }
.ipaf-filter-select:focus-visible { outline:none; border-color:var(--red); }
/* Active (a course is chosen) — matches .ipaf-filter-btn.active, with a
   white chevron so it stays visible on red. */
.ipaf-filter-select.active { background-color:var(--red); border-color:var(--red); color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E"); }
/* The dropdown list itself always renders dark-on-white, whatever the button state. */
.ipaf-filter-select option { background:#fff; color:var(--navy); text-transform:none; font-weight:600; }

/* Loading state while a course calendar is fetched */
.ipaf-cal-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:56px 20px; background:#fff; border:1px solid var(--border); border-radius:var(--rl); }
.ipaf-cal-loading p { font-size:15px; font-weight:600; color:var(--mid); margin:0; }
.ipaf-cal-loading .di_spinner { width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--red); border-radius:50%; display:block; animation:at-spin .7s linear infinite; }
@keyframes at-spin { to { transform:rotate(360deg); } }

@media (max-width: 760px) {
  .ipaf-filter-select { max-width:none; width:100%; }
}
/* Onsite tab — always blue to stand out from the calendar tabs */
.ipaf-filter-onsite { background:#2563EB; border-color:#2563EB; color:#fff; padding-left:38px; padding-right:38px; }
.ipaf-filter-onsite:hover { border-color:#1D4ED8; background:#1D4ED8; }
.ipaf-filter-onsite.active { background:#1D4ED8; border-color:#1D4ED8; color:#fff; }
.ipaf-filter-onsite .ipaf-filter-sub { font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; opacity:.9; line-height:1; margin-top:1px; }
.ipaf-cal { background:#fff; border:1px solid var(--border); border-radius: var(--rl); overflow:hidden; min-height:200px; }
.ipaf-cal-pane { display:none; }
.ipaf-cal-pane.active { display:block; }
.ipaf-howto { display:none; font-size:14px; line-height:1.55; color:var(--mid); background:#fff; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:var(--r); padding:12px 16px; margin:0 0 16px; }
.ipaf-howto.active { display:block; }
.ipaf-howto strong { color:var(--navy); font-weight:700; }
.ipaf-cal-placeholder { background:#fff; border:2px dashed var(--border); border-radius: var(--rl); padding:48px 32px; text-align:center; }
.ipaf-cal-placeholder > i { font-size:42px; color:var(--red); margin-bottom:16px; }
.ipaf-cal-placeholder h3 { font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:.02em; font-size:22px; color:var(--navy); margin:0 0 10px; }
.ipaf-cal-placeholder p { font-size:15px; line-height:1.6; color:var(--mid); max-width:520px; margin:0 auto 22px; }
/* Weekend-on-request variant: a deliberate offer, not a calendar that failed to load. */
.ipaf-cal-request { border-style: solid; background: var(--off); }
.ipaf-cal-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── IPAF HERO ACCREDITATION CHIP ──────────────────────────────── */
.hero-acc-chip { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); border-radius:9px; padding:9px 16px; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,.18); max-width:560px; box-sizing:border-box; }
.hero-acc-chip img { height:30px; width:auto; display:block; }
.hero-acc-chip span { font-size:12px; font-weight:700; color:var(--navy); letter-spacing:.02em; line-height:1.2; }
@media (max-width:600px){ .hero-acc-chip span { font-size:11px; } .hero-acc-chip img { height:26px; } }

/* ── COURSE DETAIL PAGE ─────────────────────────────────────────── */
.course-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.course-spec { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.course-spec-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 3px; }
.course-spec-v { font-size: 15px; font-weight: 700; color: var(--text); }
.course-overview { display: grid; grid-template-columns: 1fr 420px; gap: 36px; align-items: stretch; }
.course-overview-main .seo-intro-body p { margin-bottom: 14px; line-height: 1.7; }
.seo-intro-body h3 { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin: 24px 0 10px; }
.seo-intro-body a, .course-glance-who a { color: var(--red); font-weight: 600; text-decoration: underline; }
.course-subhead { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 20px; color: var(--navy); margin: 24px 0 8px; }
.course-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.course-aside-logo { text-align: center; }
.course-aside-logo img { max-width: 220px; width: 100%; height: auto; display: inline-block; }
.course-aside-img { border-radius: var(--rl); overflow: hidden; line-height: 0; text-align: center; }
.course-aside-img img { max-width: 100%; height: auto; display: inline-block; }
/* Overview sidebar image carousel */
.course-slider { position: relative; border-radius: var(--rl); overflow: hidden; }
.course-slider-track { display: flex; transition: transform .6s ease; }
.course-slide { flex: 0 0 100%; min-width: 100%; line-height: 0; text-align: center; }
.course-slide img { width: 100%; height: auto; display: block; object-fit: contain; }
.course-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.course-slider-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, transform .2s; }
.course-slider-dot:hover { background: var(--mid); }
.course-slider-dot.active { background: var(--red); transform: scale(1.15); }
.course-who-box { background: var(--off); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px 24px; }
.course-who-box h3 { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 20px; color: var(--navy); margin: 0 0 8px; }
.course-who-box p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; }
/* Full-width Course Highlights (above the spec cards) */
.course-highlights-full h3 { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 22px; color: var(--navy); margin: 0 0 16px; }
.course-highlights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.course-highlight { display: flex; gap: 12px; align-items: flex-start; background: var(--off); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; font-size: 14px; line-height: 1.45; color: var(--text); font-weight: 600; }
.course-highlight i { color: var(--red); font-size: 18px; margin-top: 1px; flex: none; width: 22px; text-align: center; }

/* AT A GLANCE — 50/50 buying panel (blended cards + price/CTA | image) */
.course-glance { display: grid; grid-template-columns: 1fr 420px; gap: 36px; align-items: start; }
.course-glance-main .course-highlights-grid { grid-template-columns: 1fr 1fr; }
.course-glance-main .course-highlight span strong { color: var(--navy); font-weight: 700; }
.course-glance-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.course-glance-who { display: flex; gap: 12px; align-items: flex-start; background: var(--off); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--text); }
.course-glance-who i { color: var(--red); font-size: 18px; margin-top: 2px; flex: none; }
.course-glance-who .cg-who-l { display: block; font-family: 'Inter', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.course-glance-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding-top: 4px; }
.course-glance-price { display: flex; flex-direction: column; line-height: 1; }
.course-glance-price .cg-price-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 4px; }
.course-glance-price .cg-price-v { font-family: 'Inter', sans-serif; font-size: 38px; font-weight: 700; color: var(--red); }
.course-glance-price .cg-price-suffix { font-size: 14px; font-weight: 600; color: var(--mid); margin-top: 5px; white-space: nowrap; }
.course-glance-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.course-glance-aside { display: flex; flex-direction: column; gap: 18px; }
/* .course-about inherits .wrap (max-width:1160px) to match sections above/below */

/* PAV / no-calendar enquiry section: 3 contact buttons in a row + embedded form */
.pav-contact-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; }
.pav-contact-acts .btn { width: 100%; justify-content: center; }
.pav-form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 36px; box-shadow: var(--ssm); }
.pav-form-card h3 { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 900; color: var(--navy); text-transform: uppercase; margin-bottom: 6px; }
@media (max-width: 600px) {
  .pav-contact-acts { grid-template-columns: 1fr; max-width: 100%; }
  .pav-form-card { padding: 24px; }
}@media (max-width: 900px) {
  .course-overview { grid-template-columns: 1fr; gap: 24px; }
  .course-aside { position: static; }
  .course-highlights-grid { grid-template-columns: 1fr; }
  .course-specs { grid-template-columns: repeat(2, 1fr); }
  .course-glance { grid-template-columns: 1fr; gap: 24px; }
  .course-glance-aside { order: -1; }
  .course-glance-main .course-highlights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .course-specs { grid-template-columns: 1fr; }
  .course-glance-facts { grid-template-columns: 1fr; }
  .course-glance-cta { gap: 14px; }
  .course-glance-actions { width: 100%; }
  .course-glance-actions .btn { flex: 1; justify-content: center; }
}

/* ── Inter heading refinement ──────────────────────────────
   Inter is a wider face, so large uppercase headings read heavier. A touch of
   negative letter-spacing keeps them tighter and more display-like. Remove this
   block to revert to default Inter spacing. */
.hero-sm h1,
.ctaband h2,
.st, .stn,
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* ── ONSITE / GROUP TRAINING BAND (under the calendar) ────────── */
.onsite-band { background: var(--navy); color: #fff; padding: 44px 0; }
.onsite-band-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.onsite-band .eye-light { color: #7FB2FF; }
.onsite-band h2 { font-family: 'Inter', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin: 6px 0 14px; color: #fff; }
.onsite-band p { color: #C9D2DC; font-size: 15px; line-height: 1.65; margin: 0 0 18px; max-width: 560px; }
.onsite-band-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.onsite-band-ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #fff; }
.onsite-band-ticks i { color: #4ADE80; font-size: 14px; flex: none; }
.onsite-band-min { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; font-weight: 600; color: #9FB0C2; }
.onsite-band-min i { color: #7FB2FF; font-size: 13px; }
.onsite-band-cta { display: flex; flex-direction: column; gap: 12px; }
.onsite-band-cta .btn { width: 100%; justify-content: center; }
.onsite-band-btn { font-size: 17px; padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 860px) {
  .onsite-band-inner { grid-template-columns: 1fr; gap: 28px; }
  .onsite-band-ticks { grid-template-columns: 1fr; }
}

/* ── NAV: WP-menu dropdown + third-level flyout ──────────────── */
.dropdown .dd-item { position: relative; }
.dropdown .dd-item > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; text-decoration: none; }
.dropdown .dd-item > a:hover { background: var(--off); }
.dropdown .dd-item > a:hover .dd-t { color: var(--red); }
.dd-caret { color: var(--light); font-size: 11px; flex-shrink: 0; }
.dropdown .dd-item .dd-txt { flex: 1; }

/* Third-level flyout: opens to the right of ITS OWN parent dd-item only.
   Direct-child selector (>) keeps each parent's flyout scoped to itself so
   PASMA and IPAF submenus never merge or stack. !important overrides the base
   .dropdown top/left positioning. */
.dropdown .dd-item > .dropdown.flyout {
  display: none;
  position: absolute;
  top: -8px !important;   /* align to its parent row (offset the dropdown's 8px padding) */
  left: 100% !important;
  margin-left: 1px;
  z-index: 1100;          /* above the parent dropdown (z-index 1000) */
}
.dropdown .dd-item.has-flyout:hover > .dropdown.flyout { display: block; }
.dropdown .dd-item.has-flyout:hover > a { background: var(--off); }
.dropdown .dd-item.has-flyout:hover > a .dd-t { color: var(--red); }
/* Hover bridge so the cursor can cross the gap into the flyout */
.dropdown .dd-item > .dropdown.flyout::before { content: ''; position: absolute; top: 0; left: -6px; width: 8px; height: 100%; }

/* Flip left if a flyout would run off the right edge */
.dropdown .dd-item.flyout-left > .dropdown.flyout { left: auto; right: 100%; margin-left: 0; margin-right: 1px; }

/* ── CONTENT PAGE (flexible template) ────────────────────────── */
.cp-sec { padding: 56px 0; }
.cp-narrow { max-width: 820px; }
.cp-rich { font-size: 16px; line-height: 1.75; color: var(--mid); }
.cp-rich h2 { font-size: 24px; color: var(--navy); margin: 28px 0 12px; letter-spacing: -0.02em; }
.cp-rich h3 { font-size: 19px; color: var(--navy); margin: 24px 0 10px; }
.cp-rich h4 { font-size: 16px; color: var(--navy); margin: 20px 0 8px; }
.cp-rich p { margin: 0 0 16px; }
.cp-rich ul, .cp-rich ol { margin: 0 0 16px; padding-left: 22px; }
.cp-rich li { margin-bottom: 8px; }
.cp-rich a { color: var(--red); text-decoration: underline; }
.cp-rich strong { color: var(--navy); }
.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .cp-cols { grid-template-columns: 1fr; gap: 8px; } }

.cp-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .cp-contact { grid-template-columns: 1fr; gap: 28px; } }
.cp-ci { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--mid); line-height: 1.5; }
.cp-ci i { color: var(--red); font-size: 18px; width: 26px; text-align: center; margin-top: 3px; flex-shrink: 0; }
.cp-ci strong { color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.cp-ci a { color: var(--mid); }
.cp-ci a:hover { color: var(--red); }
.cp-contact-btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.cp-contact-map { border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); min-height: 340px; }

/* ── BOOKING SECTION: full width when there's no accreditation logo ──
   .ipaf-book-head only gets .has-logo when a logo is actually set, so when it's
   absent we reclaim the 240px that was reserved for the logo, and let the
   enquiry form / buttons use the full container width. */
.ipaf-book-head:not(.has-logo) .ipaf-book-head-txt { max-width: 100%; }
/* .ipaf-book-no-logo width overrides removed — .pav-form-card and
   .pav-contact-acts are now content-width on every enquiry template. */

/* ── RELATED / OTHER TRAINING COURSES (internal linking cards) ── */
.related-courses { padding: 56px 0; background: var(--white); border-top: 1px solid var(--border); }
.related-courses .rc-block + .rc-block { margin-top: 40px; }
.related-courses .eye { margin-bottom: 18px; }
.rc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rc-card { display: flex; flex-direction: column; justify-content: center; gap: 3px; position: relative; background: var(--off); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 44px 18px 20px; text-decoration: none; transition: all .18s ease; min-height: 72px; }
.rc-card:hover { border-color: var(--red); background: #fff; box-shadow: var(--ssm); transform: translateY(-2px); }
.rc-card-t { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; color: var(--navy); line-height: 1.25; letter-spacing: -0.01em; }
.rc-card-sub { font-size: 12.5px; color: var(--mid); font-weight: 500; }
.rc-card-arr { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--red); font-size: 13px; opacity: 0; transition: opacity .18s ease, right .18s ease; }
.rc-card:hover .rc-card-arr { opacity: 1; right: 15px; }
@media (max-width: 1000px) { .rc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .rc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .rc-grid { grid-template-columns: 1fr; } }

/* ── NEWS / BLOG ─────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.news-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; box-shadow: var(--ssm); transition: var(--t); display: flex; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--smd); border-color: var(--red); }
.news-card-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; }
.news-card-media { position: relative; min-height: 200px; background: var(--navy); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-size: 44px; }
.news-card-media.has-bg { background-color: var(--off); }
.news-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.news-card-date { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; }
.news-card-title { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.28; margin-bottom: 9px; }
.news-card-excerpt { font-size: 14.5px; color: var(--mid); line-height: 1.65; margin-bottom: 16px; flex: 1 1 auto; }
.news-card-more { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--red); margin-top: auto; }
.news-card:hover .news-card-more { gap: 11px; }

.news-empty { text-align: center; padding: 72px 20px; }
.news-empty i { font-size: 52px; color: var(--border); margin-bottom: 18px; display: block; }
.news-empty h2 { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 900; color: var(--navy); text-transform: uppercase; margin-bottom: 10px; }
.news-empty p { font-size: 16px; color: var(--mid); line-height: 1.7; max-width: 480px; margin: 0 auto 24px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px;
  justify-content: center; border: 1px solid var(--border); border-radius: var(--r); background: #fff; color: var(--navy);
  font-weight: 700; font-size: 14px; text-decoration: none; transition: var(--t); }
.pagination .page-numbers:hover { border-color: var(--red); color: var(--red); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }

/* Single post */
.news-single { padding: 48px 0 8px; background: #fff; }
.news-single-wrap { max-width: 820px; }
.news-single-head { margin-bottom: 26px; }
.news-single-title { font-family: 'Inter', sans-serif; font-size: clamp(30px, 4.2vw, 46px); font-weight: 900; color: var(--navy);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.06; margin-top: 6px; }
.news-single-media { margin-bottom: 30px; }
.news-single-media img { width: 100%; height: auto; border-radius: var(--rl); }
.news-single-body { font-size: 16.5px; color: var(--mid); line-height: 1.8; }
.news-single-body > * + * { margin-top: 18px; }
.news-single-body h2 { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin-top: 34px; }
.news-single-body h3 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin-top: 28px; }
.news-single-body a { color: var(--red); text-decoration: underline; }
.news-single-body ul, .news-single-body ol { padding-left: 22px; }
.news-single-body li + li { margin-top: 7px; }
.news-single-body img { max-width: 100%; height: auto; border-radius: var(--r); }
.news-single-body blockquote { border-left: 4px solid var(--red); padding: 4px 0 4px 20px; color: var(--navy); font-weight: 600; }

.news-single-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 44px 0 8px; padding-top: 26px; border-top: 1px solid var(--border); }
.news-nav-link { display: inline-flex; align-items: center; gap: 9px; max-width: 240px; font-size: 14px; font-weight: 700;
  color: var(--navy); text-decoration: none; transition: var(--t); }
.news-nav-link:hover { color: var(--red); }
.news-nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-nav-next { margin-left: auto; text-align: right; }

@media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
  .news-grid { grid-template-columns: 1fr; }
  .news-single-nav { flex-direction: column; align-items: stretch; }
  .news-nav-link, .news-nav-next { max-width: none; margin-left: 0; text-align: left; }
}

/* ── DANTE CALENDAR: BOOK BUTTONS ────────────────────────────────
   The plugin ships these black (.api-book-now in course-grid.css).
   Restyled to the brand red here rather than by editing the plugin,
   so it survives plugin updates. Scoped to .dantewp and given enough
   specificity to win regardless of stylesheet load order — the plugin's
   own hover rule is button.api-book-now:hover.
   Sold-out rows render plain "Full" text with no button, so nothing
   disabled is ever coloured red. */
.dantewp button.api-book-now {
  background-color: var(--red);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  border: unset;
  border-radius: 6px;
  transition: background-color .15s ease;
}
.dantewp button.api-book-now:hover,
.dantewp button.api-book-now:focus {
  background-color: var(--redd);
  color: #fff;
  border: unset;
  cursor: pointer;
}
.dantewp button.api-book-now:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}


/* ── HIRE LOCATION PAGES (page-hire-location.php) ─────────────
   Local landing pages at /hire/scaffold-tower-hire-{area}/.
   Only the panel, notes and training band are new — the equipment
   grid reuses .ts-grid/.ts-card and the FAQs reuse .faq-i. */

.hero-loc { background-size: cover; background-position: center; }

/* Two-column body: prose left, sticky coverage panel right. */
.loc-main { padding: 52px 0 44px; }
.loc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }

.loc-body > :first-child { margin-top: 0; }
.loc-body p { font-size: 17px; line-height: 1.75; color: var(--mid); margin: 0 0 18px; }
.loc-body h3 {
  font-family: 'Inter', sans-serif; font-size: 21px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; margin: 32px 0 12px;
}
.loc-body h4 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 24px 0 10px; }
.loc-body a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.loc-body a:hover { color: var(--redd); }
.loc-body ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.loc-body ul li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 16px; line-height: 1.7; color: var(--mid);
}
.loc-body ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
}
.loc-body ol { margin: 0 0 18px 20px; }
.loc-body ol li { font-size: 16px; line-height: 1.7; color: var(--mid); margin-bottom: 10px; }

/* Coverage panel */
.loc-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.loc-panel {
  background: var(--off); border: 1px solid var(--border); border-radius: var(--rl);
  padding: 24px; box-shadow: var(--ssm);
}
.loc-panel-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--navy);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--red);
}
.loc-panel-head i { color: var(--red); font-size: 17px; }
.loc-pc { margin-bottom: 18px; }
.loc-pc-l {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--light); margin-bottom: 6px;
}
.loc-pc-v { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.loc-covers { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.loc-covers li { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--mid); line-height: 1.45; }
.loc-covers li i { color: var(--red); font-size: 10px; margin-top: 4px; flex-shrink: 0; }
.loc-panel-note { font-size: 13px; color: var(--light); line-height: 1.6; margin: 16px 0 0; }
.loc-panel-btn { width: 100%; justify-content: center; margin-top: 14px; }
.loc-panel-yard p { font-size: 14.5px; color: var(--mid); line-height: 1.65; margin: 0; }

/* Equipment grid tweaks — the card body carries a reason, not a spec table. */
.loc-kit { background: var(--off); }
.loc-why {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.6; color: var(--mid); margin: 0;
}
.loc-why i { color: var(--red); font-size: 13px; margin-top: 3px; flex-shrink: 0; }
.loc-kit-all { margin-top: 26px; font-size: 15px; color: var(--mid); }
.loc-kit-all a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Delivery & access notes */
.loc-notes-sec { padding: 56px 0; }
.loc-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.loc-note {
  background: #fff; border: 1px solid var(--border); border-radius: var(--rl);
  padding: 26px 24px; transition: var(--t);
}
.loc-note:hover { box-shadow: var(--smd); transform: translateY(-2px); }
.loc-note-ico {
  width: 46px; height: 46px; border-radius: 12px; background: #FFF5F5;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.loc-note-ico i { color: var(--red); font-size: 19px; }
.loc-note h3 {
  font-family: 'Inter', sans-serif; font-size: 16.5px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.01em; margin: 0 0 9px; line-height: 1.35;
}
.loc-note p { font-size: 14.5px; line-height: 1.65; color: var(--mid); margin: 0; }

/* Training cross-link band */
.loc-train { background: var(--navy); color: #fff; padding: 44px 0; }
.loc-train .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.loc-train-l { display: flex; align-items: flex-start; gap: 20px; flex: 1 1 460px; }
.loc-train-ico {
  width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.loc-train-ico i { color: var(--red); font-size: 23px; }
.loc-train h2 {
  font-family: 'Inter', sans-serif; font-size: 23px; font-weight: 800; color: #fff;
  letter-spacing: -0.02em; margin: 0 0 9px; line-height: 1.25;
}
.loc-train p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; max-width: 620px; }
.loc-train-btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.loc-train-btns .btn { justify-content: center; white-space: nowrap; }

/* FAQs */
.loc-faq-sec { padding: 56px 0; background: var(--off); }
.loc-faqs { max-width: 860px; }

@media (max-width: 980px) {
  .loc-cols { grid-template-columns: 1fr; gap: 34px; }
  .loc-side { position: static; }
  .loc-covers { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .loc-train .wrap { flex-direction: column; align-items: flex-start; }
  .loc-train-btns { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

@media (max-width: 560px) {
  .loc-main { padding: 34px 0 30px; }
  .loc-body p { font-size: 16px; }
  .loc-body h3 { font-size: 19px; margin-top: 26px; }
  .loc-notes-sec, .loc-faq-sec { padding: 40px 0; }
  .loc-train-btns { flex-direction: column; }
  .loc-train-btns .btn { width: 100%; }
}

/* ── AREAS WE COVER (on /hire/, links the location pages) ───── */
.areas-sec { padding: 56px 0; }
.areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-top: 28px; }
.area-card {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: var(--r); padding: 16px 18px; text-decoration: none; transition: var(--t);
}
.area-card:hover { box-shadow: var(--smd); transform: translateY(-2px); border-color: var(--red); }
.area-card > i { color: var(--red); font-size: 14px; margin-bottom: 4px; }
.area-name { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.area-pc { font-size: 12.5px; color: var(--light); line-height: 1.45; }
.areas-note { margin-top: 22px; font-size: 15px; color: var(--mid); }
.areas-note a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .areas-sec { padding: 40px 0; }
  .areas-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .area-card { padding: 13px 14px; }
  .area-name { font-size: 14.5px; }
}

/* ── FOOTER LEGAL LINKS ──────────────────────────────────────── */
.foot-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  padding: 18px 0 0; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.foot-legal a { font-size: 13px; color: rgba(255,255,255,.62); text-decoration: none; transition: var(--t); }
.foot-legal a:hover { color: #fff; text-decoration: underline; }
.foot-legal-sep { color: rgba(255,255,255,.28); margin: 0 10px; font-size: 12px; }

@media (max-width: 560px) {
  .foot-legal { gap: 6px 0; }
  .foot-legal-sep { margin: 0 8px; }
}

/* ── COOKIE CONSENT BANNER ───────────────────────────────────── */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--navy); color: #fff;
  border-top: 3px solid var(--red);
  box-shadow: 0 -8px 32px rgba(0,0,0,.28);
  animation: cc-up .28s ease-out;
}
.cc-banner[hidden] { display: none; }
@keyframes cc-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cc-inner {
  max-width: 1160px; margin: 0 auto; padding: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.cc-text { flex: 1 1 460px; }
.cc-text strong {
  display: block; font-family: 'Inter', sans-serif; font-size: 16px;
  font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px;
}
.cc-text p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }
.cc-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cc-text a:hover { color: var(--red); }

.cc-acts { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
/* Reject must be as prominent as accept — a hidden or greyed-out reject is
   not a free choice, and regulators treat it as invalid consent. */
.cc-acts .btn { white-space: nowrap; }
.cc-reject {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55);
}
.cc-reject:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

@media (max-width: 700px) {
  /* Keep the banner to a strip at the bottom of the screen. Stacking the two
     full-width buttons on top of the paragraph pushed it to roughly half the
     viewport on a phone, which buried the page behind the consent notice.
     Capping the height and scrolling the contents guarantees the buttons stay
     reachable no matter how the text wraps. */
  .cc-inner {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    gap: 12px; flex-direction: column; align-items: stretch;
    max-height: 42vh; max-height: 42dvh;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .cc-text strong { font-size: 15px; margin-bottom: 3px; }
  .cc-text p { font-size: 13px; line-height: 1.5; }
  /* Side by side at equal width — half the height of a stacked pair, and it
     keeps reject exactly as prominent as accept, which is the point. The
     labels wrap rather than being shortened: "Reject non-essential" says what
     it actually does, and a bare "Reject" would imply essential cookies go
     too. .btn sets white-space:nowrap globally, hence the override. */
  .cc-acts { flex-direction: row; gap: 8px; }
  .cc-acts .btn {
    flex: 1 1 0; width: auto; min-width: 0; justify-content: center;
    white-space: normal; text-align: center; font-size: 13px; padding: 10px 10px;
  }
}
/* Accept uses .btn .btn-red; this hook exists so the pair can be restyled
   together without touching the button system. */
.cc-accept { min-width: 140px; }
/* Reopen link lives in the footer legal row and inherits .foot-legal a. */
.cc-reopen { cursor: pointer; }