/* ==============================================================
   ptc.css — preview-cut of the PTC design system
   Phase 4 visual direction; loaded ABOVE Bootstrap (no Bootstrap
   in the preview — kept minimal and self-contained).
   ============================================================== */

/* ---------- Font loading ---------- */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

/* ---------- Tokens ---------- */
:root {
  /* Brand
     Colours pixel-sampled from the high-resolution circular PTC badge logo
     (img/ptc-logo-round.png). */
  --ptc-blue: #184586;            /* Brand blue — the badge ring colour itself; primary CTAs, links */
  --ptc-blue-dark: #0E2F5C;       /* Darker variant — body text, dark surfaces */
  --ptc-blue-soft: #DCE7F5;       /* Tinted backgrounds */
  --ptc-cyan: #04A3D7;            /* Cyan accent — the "leaf" element on the ball */
  --ptc-cyan-soft: #D5EEF4;       /* Tinted backgrounds for cyan moments */
  --ptc-yellow: #D8DF20;          /* Tennis-ball lime — the ball's dominant tone */
  --ptc-yellow-bright: #FFE707;   /* Bright highlight yellow — from the ball's brightest spot;
                                     used for highest-attention micro-moments */
  --ptc-yellow-deep: #B0B71F;     /* Yellow's darker variant — interactive states */
  --ptc-yellow-soft: #F2F4C0;     /* Tinted callout backgrounds */

  /* Neutrals */
  --ptc-cream: #FCFBF5;
  --ptc-cream-deep: #F2F0E6;
  --ptc-white: #FFFFFF;
  --ptc-ink: #16213A;
  --ptc-ink-soft: #4B5775;
  --ptc-line: #E4E0D3;

  /* Type */
  --ptc-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ptc-font-heading: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --ptc-radius-md: 10px;
  --ptc-radius-lg: 18px;
  --ptc-radius-pill: 999px;
  --ptc-shadow-sm: 0 1px 2px rgba(22, 33, 58, 0.06);
  --ptc-shadow-md: 0 8px 24px rgba(22, 33, 58, 0.08);
  --ptc-shadow-cta: 0 6px 16px rgba(22, 33, 58, 0.16);

  /* Layout */
  --ptc-container: 1200px;
  --ptc-gutter: 28px;

  /* Tennis-ball SVGs — sourced from SVG Repo (tennis-ball-svgrepo-com.svg)
     and recoloured with the PTC brand palette. Two variants:
       --ptc-tennis-ball-yellow → yellow body with seam shapes CUT OUT (transparent)
       --ptc-tennis-ball-cyan   → cyan body with seam shapes CUT OUT (transparent)
     The ball circle path and the two seam paths are combined into a single
     <path> using fill-rule='evenodd', so the seam areas render as holes
     (whatever is behind the watermark shows through them). Combined with
     a reduced element opacity, the watermark becomes a ghosted, see-through
     tennis ball that blends with the surface beneath. */
  --ptc-tennis-ball-yellow: url("data:image/svg+xml;utf8,<svg viewBox='0 0 69.447 69.447' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-1271.769 -1574.648)'><path fill-rule='evenodd' fill='%23D8DF20' d='M1341.208,1609.372a34.719,34.719,0,1,1-34.72-34.724A34.724,34.724,0,0,1,1341.208,1609.372ZM1311.144,1574.993a35.139,35.139,0,0,0-4.61-.344,41.069,41.069,0,0,1-34.369,29.735,34.3,34.3,0,0,0-.381,4.635l.183-.026a45.921,45.921,0,0,0,39.149-33.881Zm29.721,34.692a45.487,45.487,0,0,0-33.488,34.054l-.071.313a34.54,34.54,0,0,0,4.818-.455,41.218,41.218,0,0,1,28.686-29.194,36.059,36.059,0,0,0,.388-4.8Z'/></g></svg>");
  --ptc-tennis-ball-cyan: url("data:image/svg+xml;utf8,<svg viewBox='0 0 69.447 69.447' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-1271.769 -1574.648)'><path fill-rule='evenodd' fill='%2304A3D7' d='M1341.208,1609.372a34.719,34.719,0,1,1-34.72-34.724A34.724,34.724,0,0,1,1341.208,1609.372ZM1311.144,1574.993a35.139,35.139,0,0,0-4.61-.344,41.069,41.069,0,0,1-34.369,29.735,34.3,34.3,0,0,0-.381,4.635l.183-.026a45.921,45.921,0,0,0,39.149-33.881Zm29.721,34.692a45.487,45.487,0,0,0-33.488,34.054l-.071.313a34.54,34.54,0,0,0,4.818-.455,41.218,41.218,0,0,1,28.686-29.194,36.059,36.059,0,0,0,.388-4.8Z'/></g></svg>");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ptc-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ptc-ink);
  background: var(--ptc-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ptc-blue); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--ptc-blue-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  color: var(--ptc-blue-dark);
  margin: 0 0 0.4em 0;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

p { margin: 0 0 1em 0; }

/* ---------- Typography utilities ---------- */
.ptc-eyebrow {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ptc-blue);
}

.ptc-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ptc-ink-soft);
  font-weight: 300;
}

/* ---------- Layout primitives ---------- */
.ptc-container {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
}

.ptc-section {
  padding: 80px 0;
}

.ptc-section--tinted { background: var(--ptc-cream-deep); }

/* ---------- Navigation ---------- */
.ptc-nav {
  background: var(--ptc-white);
  border-bottom: 1px solid var(--ptc-line);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.ptc-nav__inner {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.ptc-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ptc-nav__logo img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}

.ptc-nav__items {
  display: flex;
  gap: 28px;
  flex: 1;
}

.ptc-nav__items a {
  font-family: var(--ptc-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--ptc-ink);
  padding: 6px 0;
  position: relative;
  letter-spacing: 0.005em;
}

.ptc-nav__items a:hover { color: var(--ptc-blue); }

.ptc-nav__items a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19px;
  height: 3px;
  background: var(--ptc-yellow);
  border-radius: 2px;
}

.ptc-nav__cta {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ---------- Buttons ---------- */
.ptc-btn {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--ptc-radius-pill);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.ptc-btn--primary {
  background: var(--ptc-blue);
  color: var(--ptc-white);
}
.ptc-btn--primary:hover {
  background: var(--ptc-blue-dark);
  color: var(--ptc-white);
  transform: translateY(-1px);
  box-shadow: var(--ptc-shadow-cta);
}

.ptc-btn--yellow {
  background: var(--ptc-yellow);
  color: var(--ptc-blue-dark);
}
.ptc-btn--yellow:hover {
  background: var(--ptc-yellow-deep);
  color: var(--ptc-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--ptc-shadow-cta);
}

.ptc-btn--outline {
  background: transparent;
  color: var(--ptc-blue);
  border-color: var(--ptc-blue);
}
.ptc-btn--outline:hover {
  /* Cyan-tinted hover state — uses the brand's secondary accent for a
     quieter, more delightful affordance than re-using the heavy blue. */
  background: var(--ptc-cyan-soft);
  color: var(--ptc-blue-dark);
  border-color: var(--ptc-cyan);
}

.ptc-btn--outline-white {
  background: transparent;
  color: var(--ptc-white);
  border-color: var(--ptc-white);
}
.ptc-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ptc-white);
}

.ptc-btn--sm {
  font-size: 12px;
  padding: 10px 20px;
  letter-spacing: 0.1em;
}

/* ---------- Hero ---------- */
.ptc-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(14, 47, 92, 0.85) 0%, rgba(14, 47, 92, 0.3) 60%, rgba(14, 47, 92, 0.1) 100%),
    linear-gradient(180deg, #4a7ec0 0%, #2a5a96 50%, #1a4078 100%);
  color: var(--ptc-white);
}

/* Decorative tennis-ball mark in the corner — suggests where photography would sit. */
.ptc-hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ecf254 0%, #c5d017 70%, #92991a 100%);
  opacity: 0.18;
  filter: blur(1px);
}

.ptc-hero::after {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 14px solid rgba(220, 236, 26, 0.18);
}

.ptc-hero__inner {
  max-width: var(--ptc-container);
  width: 100%;
  margin: 0 auto;
  padding: 96px var(--ptc-gutter) 88px;
  position: relative;
  z-index: 1;
}

.ptc-hero__eyebrow {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-yellow);
  margin-bottom: 18px;
}

.ptc-hero__title {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw + 1rem, 64px);
  line-height: 1.06;
  color: var(--ptc-white);
  max-width: 760px;
  margin: 0 0 18px 0;
  letter-spacing: -0.01em;
}

.ptc-hero__subhead {
  font-size: clamp(16px, 1vw + 0.5rem, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
  margin: 0 0 32px 0;
  font-weight: 300;
}

.ptc-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.ptc-hero__dots {
  display: flex;
  gap: 8px;
  margin-top: 48px;
}

.ptc-hero__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

.ptc-hero__dots span.is-active {
  background: var(--ptc-yellow);
  width: 22px;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ---------- Purpose / Vision / Mission band ---------- */
.ptc-purpose {
  background: var(--ptc-cream-deep);
  padding: 64px 0 72px;
  border-top: 1px solid var(--ptc-line);
  border-bottom: 1px solid var(--ptc-line);
}
.ptc-purpose__grid {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .ptc-purpose__grid { grid-template-columns: 1fr; gap: 32px; }
}
.ptc-purpose__item { display: flex; flex-direction: column; }
.ptc-purpose__item .ptc-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  padding-bottom: 12px;
  align-self: flex-start;
}
.ptc-purpose__item .ptc-eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: var(--ptc-yellow);
}
.ptc-purpose__item p {
  font-family: var(--ptc-font-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ptc-blue-dark);
  letter-spacing: -0.005em;
  margin: 0;
}

/* ---------- Drivers (Feature Card row) ---------- */
.ptc-drivers {
  padding: 96px 0;
}

.ptc-drivers__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.ptc-drivers__intro .ptc-eyebrow { margin-bottom: 12px; display: block; }

.ptc-drivers__intro h2 {
  font-size: clamp(28px, 2.6vw + 0.6rem, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}

.ptc-drivers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Column-count modifiers — each collapses responsively on smaller screens.
   Apply alongside .ptc-drivers__grid (e.g. class="ptc-drivers__grid ptc-drivers__grid--4up"). */
.ptc-drivers__grid--2up { grid-template-columns: repeat(2, 1fr); }
.ptc-drivers__grid--3up { grid-template-columns: repeat(3, 1fr); }
.ptc-drivers__grid--4up { grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 1100px) {
  .ptc-drivers__grid--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ptc-drivers__grid,
  .ptc-drivers__grid--2up,
  .ptc-drivers__grid--3up,
  .ptc-drivers__grid--4up { grid-template-columns: 1fr; }
}

/* ---------- Feature Card ---------- */
.ptc-card {
  background: var(--ptc-white);
  border: 1px solid var(--ptc-line);
  border-radius: var(--ptc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ptc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ptc-shadow-md);
  /* Cyan tint on hover — uses the brand's secondary accent rather than re-using
     the heavier blue. Quieter, more delightful. */
  border-color: var(--ptc-cyan);
}

.ptc-card__media {
  aspect-ratio: 16 / 10;
  /* Default placeholder when no hero image is supplied — dark brand-blue
     gradient with an off-centre yellow glow, matching the homepage
     driver cards. Provides a consistent, on-brand fallback across the
     site (program cards, coach cards, future card variants) until real
     photography ships. The .ptc-card--play / --learn / --join modifiers
     below override with their own glow positions for the homepage drivers. */
  background:
    radial-gradient(circle at 70% 30%, rgba(220, 236, 26, 0.4) 0%, transparent 45%),
    linear-gradient(135deg, #2a5a96 0%, #1a4078 70%, #0E2F5C 100%);
  position: relative;
  overflow: hidden;
}

/* Each card gets a subtly different illustrative media block — these stand in
   for hero photography that will be supplied in Phase 5. */
.ptc-card--play .ptc-card__media {
  background:
    radial-gradient(circle at 70% 30%, rgba(220, 236, 26, 0.45) 0%, transparent 40%),
    linear-gradient(135deg, #2a5a96 0%, #1a4078 70%, #0E2F5C 100%);
}
.ptc-card--learn .ptc-card__media {
  background:
    radial-gradient(circle at 25% 70%, rgba(220, 236, 26, 0.35) 0%, transparent 45%),
    linear-gradient(135deg, #1F58A8 0%, #2a5a96 60%, #1a4078 100%);
}
.ptc-card--join .ptc-card__media {
  background:
    radial-gradient(circle at 80% 80%, rgba(220, 236, 26, 0.4) 0%, transparent 45%),
    linear-gradient(135deg, #3a6cb8 0%, #1F58A8 50%, #0E2F5C 100%);
}

.ptc-card__media-mark {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  border-radius: var(--ptc-radius-pill);
  color: var(--ptc-white);
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ptc-card__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ptc-card__body h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px 0;
  color: var(--ptc-blue-dark);
}

.ptc-card__body p {
  color: var(--ptc-ink-soft);
  margin-bottom: 24px;
  font-size: 15.5px;
  line-height: 1.55;
}

.ptc-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- Footer (preview) ---------- */
.ptc-footer {
  background: var(--ptc-blue-dark);
  color: rgba(255, 255, 255, 0.78);
  padding: 56px 0 32px;
  margin-top: 0;
}

.ptc-footer__inner {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
}
/* Top row: brand logo on left, social icons on right (same horizontal row). */
.ptc-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 28px;
}
/* Bottom row: address column (col 1) aligns horizontally with the three
   menu columns. Menu <h5>s sit on the same line as the bolded PTC name
   in the address; menu links sit alongside the address lines. */
.ptc-footer__bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.ptc-footer h5 {
  color: var(--ptc-white);
  font-size: 15px;  /* matches the bolded PTC name in the address column */
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 0 0 12px 0;
}

.ptc-footer a {
  color: var(--ptc-yellow);
  font-size: 14px;
}

.ptc-footer__brand {
  display: block;
}
/* Simple ball+PTC wordmark — wider than the circular badge, white variant
   so it reads on the dark footer band. */
.ptc-footer__brand img {
  height: 36px;
  width: auto;
  display: block;
}
.ptc-footer__address strong {
  font-family: var(--ptc-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ptc-white);
  letter-spacing: 0.01em;
}
.ptc-footer__address {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
/* Social icon row — cyan background by default, slight lift on hover. */
.ptc-footer__social {
  display: flex;
  gap: 10px;
}
.ptc-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ptc-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ptc-white);
  transition: transform 0.18s ease, background 0.18s ease;
}
.ptc-footer__social a:hover {
  background: var(--ptc-cyan);
  transform: translateY(-2px) scale(1.05);
}
.ptc-footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

.ptc-footer__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 36px;
  padding: 20px var(--ptc-gutter) 0;
  max-width: var(--ptc-container);
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 720px) {
  .ptc-nav__inner { gap: 16px; flex-wrap: wrap; }
  .ptc-nav__items { gap: 18px; flex-basis: 100%; order: 3; padding-top: 6px; border-top: 1px solid var(--ptc-line); }
  .ptc-nav__cta { margin-left: auto; }
  .ptc-hero { min-height: 480px; }
  .ptc-hero__inner { padding: 64px var(--ptc-gutter) 56px; }
  .ptc-section, .ptc-drivers { padding: 56px 0; }
  .ptc-footer__bottom { grid-template-columns: 1fr 1fr; }
}


/* ==============================================================
   PHASE 5 / V5-CANONICAL PATTERNS
   Resolved in Phase 4 — see design-system.md §5.1, §5.10–§5.13.
   These supersede the original V1 hero (.ptc-hero) for the Home page
   and any future page that needs the Solid+Photo or Split-with-photo
   patterns. Old .ptc-hero kept above for V1–V4 preview compatibility.
   ============================================================== */

/* ----- Nav: home variant — protruding badge, no separator under nav,
         heavy cyan flush-bottom active-tab indicator. Apply by adding
         .ptc-nav--home to the .ptc-nav element. ----- */
.ptc-nav--home {
  position: relative;
  background: var(--ptc-white);
  border-bottom: none;
  box-shadow: none;
}
.ptc-nav--home .ptc-nav__inner {
  position: relative;
  align-items: center;
  gap: 28px;
  padding-left: calc(var(--ptc-gutter) + 124px);
}
/* Active-tab indicator — thick cyan, no radius, flush with nav bottom */
.ptc-nav--home .ptc-nav__items a.is-active::after {
  background: var(--ptc-cyan);
  height: 14px;
  border-radius: 0;
  bottom: -14px;
  left: 0;
  right: 0;
}

/* ----- Protruding circular badge logo ----- */
.ptc-nav__badge {
  position: absolute;
  top: -8px;
  left: var(--ptc-gutter);
  width: 84px;
  height: 84px;
  z-index: 5;
  display: block;
  margin: 0;
}
.ptc-nav__badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(14, 47, 92, 0.22));
}

/* ----- Home hero — Solid+Photo split with feathered photo pane ----- */
.ptc-home-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--ptc-blue-dark);
  color: var(--ptc-white);
}
.ptc-home-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 75%;
  background-image:
    linear-gradient(90deg,
      rgba(14, 47, 92, 1) 0%,
      rgba(14, 47, 92, 0.7) 12%,
      rgba(14, 47, 92, 0.2) 30%,
      rgba(14, 47, 92, 0) 55%),
    url('../img/ptc-aerial-courts.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Ball watermarks — tennis-ball SVG (body with seam cut-outs) at brand
   colours. Cyan TOP-LEFT, yellow BOTTOM-RIGHT for diagonal framing. */
.ptc-home-hero::before {
  content: "";
  position: absolute;
  left: -90px;
  top: -80px;
  width: 260px;
  height: 260px;
  background: var(--ptc-tennis-ball-cyan) center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.ptc-home-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  background: var(--ptc-tennis-ball-yellow) center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}
.ptc-home-hero__inner {
  max-width: var(--ptc-container);
  width: 100%;
  margin: 0 auto;
  padding: 88px var(--ptc-gutter) 88px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
}
.ptc-home-hero__text { padding-right: 12px; }
.ptc-home-hero__eyebrow {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-yellow);
  margin-bottom: 18px;
}
.ptc-home-hero__title {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw + 0.6rem, 60px);
  line-height: 1.06;
  color: var(--ptc-white);
  margin: 0 0 20px 0;
  letter-spacing: -0.012em;
  max-width: 720px;
}
.ptc-home-hero__subhead {
  font-size: clamp(16px, 1vw + 0.4rem, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 32px 0;
  font-weight: 300;
  max-width: 540px;
}
.ptc-home-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.ptc-home-hero__dots {
  display: flex;
  gap: 8px;
  margin-top: 44px;
}
.ptc-home-hero__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}
.ptc-home-hero__dots span.is-active {
  background: var(--ptc-yellow-bright);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 231, 7, 0.18);
}

/* ----- Purpose / Vision / Mission — Split-with-photo content block ----- */
.ptc-purpose {
  background: var(--ptc-cream-deep);
  padding: 96px 0 110px;
  border-top: 1px solid var(--ptc-line);
  border-bottom: 1px solid var(--ptc-line);
  position: relative;
}
.ptc-purpose__inner {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
}
.ptc-purpose__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.ptc-purpose__text { padding-right: 8px; }
.ptc-purpose__title {
  font-family: var(--ptc-font-heading);
  font-weight: 400;
  font-size: clamp(34px, 5vw + 0.6rem, 60px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ptc-blue-dark);
  margin: 0 0 38px 0;
}
.ptc-purpose__title em {
  font-style: normal;
  color: var(--ptc-cyan);
  font-weight: 700;
}
.ptc-purpose__item { margin-bottom: 26px; }
.ptc-purpose__item:last-child { margin-bottom: 0; }
.ptc-purpose__label {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-blue);
  padding-bottom: 8px;
  margin-bottom: 10px;
  position: relative;
}
.ptc-purpose__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--ptc-cyan);
}
.ptc-purpose__item p {
  font-family: var(--ptc-font-heading);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ptc-blue-dark);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 500px;
}
.ptc-purpose__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 25%, rgba(220, 223, 32, 0.42) 0%, transparent 50%),
    linear-gradient(135deg, #2a5a96 0%, #1a4078 60%, #0E2F5C 100%);
  box-shadow: 0 24px 60px rgba(14, 47, 92, 0.2);
}
.ptc-purpose__photo::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 140px;
  height: 140px;
  background: var(--ptc-tennis-ball-yellow) center / contain no-repeat;
  /* Higher opacity than the hero watermarks — it's a focal accent on the
     photo corner, not a background watermark. Photo still shows through
     the seam cut-outs. */
  opacity: 0.85;
}
.ptc-purpose__photo-caption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  color: var(--ptc-white);
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(4, 163, 215, 0.22);
  border: 1px solid var(--ptc-cyan);
  backdrop-filter: blur(6px);
  padding: 8px 14px;
  border-radius: 999px;
  z-index: 2;
}

/* ----- Photo strip (homepage gallery teaser) -----
   In production this is the Image-Gallery widget with theme=strip. In the
   mockup, six cells use background-position to reveal different portions
   of the aerial-courts photo (placeholder until real photos arrive). */
.ptc-photo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ptc-photo-strip__cell {
  aspect-ratio: 1;
  background-image: url('../img/ptc-aerial-courts.webp');
  background-size: 280% auto;
  background-repeat: no-repeat;
  border-radius: var(--ptc-radius-md);
}
@media (max-width: 900px) {
  .ptc-photo-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 540px) {
  .ptc-photo-strip { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}


/* ----- Event / news list inside a card body ----- */
.ptc-event-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.ptc-event-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ptc-line);
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ptc-event-list li:last-child { border-bottom: none; }
.ptc-event-list li time {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ptc-cyan);
}


/* ----- Inline icons -----
   Bootstrap-Icons-style SVGs used inline in HTML. Sized via .ptc-icon
   so they scale with the surrounding type. Currently used for the
   doc download link; future icons can be inlined the same way.
   For the production CMS rollout — three paths:
     1. Inline each icon SVG in CKEditor source mode (what we do now).
     2. Ask the platform team to load Bootstrap Icons CDN once, page-wide,
        so admins can paste <i class="bi bi-…"></i> markup.
     3. Self-host a small icon set (lighter than the full library).
   See design-plan §3 — same consideration as our two webfonts. */
.ptc-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  fill: currentColor;
  flex-shrink: 0;
}
.ptc-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ptc-blue);
  text-decoration: none;
}
.ptc-doc-link:hover { color: var(--ptc-blue-dark); text-decoration: underline; }
.ptc-doc-link .ptc-icon { color: var(--ptc-cyan); width: 18px; height: 18px; vertical-align: middle; }


/* ----- Lozenge eyebrow pill — bright-yellow background, navy text ----- */
.ptc-eyebrow-pill {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-blue-dark);
  background: var(--ptc-yellow-bright);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

/* ----- Hamburger button (mobile nav toggle) ----- */
.ptc-nav__burger {
  display: none; /* shown only on mobile */
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-left: auto;
  position: relative;
  z-index: 6;
}
.ptc-nav__burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--ptc-blue-dark);
  border-radius: 2px;
  margin: 4px auto;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.ptc-nav.is-open .ptc-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ptc-nav.is-open .ptc-nav__burger span:nth-child(2) { opacity: 0; }
.ptc-nav.is-open .ptc-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ----- Drivers intro: left-aligned variant -----
   Default .ptc-drivers__intro is text-centered with max-width 680px and
   margin: 0 auto — so even with text-align:left applied inline, the block
   itself stays centered (creating a weird left inset against content that
   fills the full container width). This modifier left-aligns the block
   too so it flushes with the container's left edge. */
.ptc-drivers__intro--align-left {
  text-align: left;
  max-width: 880px;
  margin-left: 0;
  margin-right: auto;
}


/* ===== H2 COMPACT HERO (interior pages) ====================
   Dark-blue band + white text — visually consistent with the home
   hero, so every page is bookended by the brand colour at top and
   bottom (footer). Eyebrow in yellow, no separator border below
   (the dark band is its own separator). */
.ptc-page-hero {
  position: relative;
  background: var(--ptc-blue-dark);
  padding: 64px 0 56px;
  overflow: hidden;
  color: var(--ptc-white);
}
/* Yellow tennis-ball watermark, off-frame bottom-right */
.ptc-page-hero::after {
  content: "";
  position: absolute;
  right: -90px; bottom: -90px;
  width: 220px; height: 220px;
  background: var(--ptc-tennis-ball-yellow) center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
/* Cyan tennis-ball watermark on the top-left for brand balance. */
.ptc-page-hero::before {
  content: "";
  position: absolute;
  left: -80px; top: -80px;
  width: 200px; height: 200px;
  background: var(--ptc-tennis-ball-cyan) center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.ptc-page-hero__inner {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
  position: relative;
  z-index: 1;
}
.ptc-page-hero__eyebrow {
  display: inline-block;
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-yellow);
  margin-bottom: 14px;
}
.ptc-page-hero__title {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: clamp(34px, 4vw + 0.6rem, 52px);
  line-height: 1.06;
  color: var(--ptc-white);
  margin: 0 0 14px 0;
  letter-spacing: -0.012em;
  max-width: 880px;
}
.ptc-page-hero__subhead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 300;
  max-width: 680px;
  margin: 0;
}


/* ===== ANCHOR NAV (sticky in-page nav, for About) ===== */
.ptc-anchor-nav {
  background: var(--ptc-cream);
  border-bottom: 1px solid var(--ptc-line);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 40;
  font-size: 13px;
}
.ptc-anchor-nav__inner {
  max-width: var(--ptc-container);
  margin: 0 auto;
  padding: 0 var(--ptc-gutter);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.ptc-anchor-nav a {
  font-family: var(--ptc-font-heading);
  font-weight: 600;
  color: var(--ptc-blue);
  padding: 4px 0;
}
.ptc-anchor-nav a:hover { color: var(--ptc-blue-dark); }


/* ===== CARD VARIANTS  (see design-system §5.2) =====
   All extend .ptc-card. Add the variant class as a modifier. */

/* Tier card (membership pricing) — big price emphasis */
.ptc-card--tier { text-align: left; }
.ptc-card--tier .ptc-card__body { padding: 28px 24px 28px; }
.ptc-card--tier .ptc-card__eyebrow {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-blue);
  display: block;
  margin-bottom: 8px;
}
.ptc-card--tier .ptc-card__price {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--ptc-blue-dark);
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}
.ptc-card--tier .ptc-card__price-suffix {
  font-size: 14px;
  font-weight: 400;
  color: var(--ptc-ink-soft);
  margin-left: 4px;
}
.ptc-card--tier .ptc-card__note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ptc-ink-soft);
  margin: 4px 0 16px 0;
}
.ptc-card--tier .ptc-card__early-bird {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ptc-blue-dark);
  background: var(--ptc-yellow-bright);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* Person card (board, contacts) — circular avatar at top */
.ptc-card--person { text-align: center; }
.ptc-card--person .ptc-card__body { padding: 0 22px 26px; }
.ptc-card--person .ptc-card__avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 28px auto 14px;
  background: var(--ptc-blue-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ptc-font-heading); font-weight: 700; font-size: 36px;
  color: var(--ptc-blue);
}
.ptc-card--person .ptc-card__avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.ptc-card--person h3 { font-size: 18px; margin: 0 0 4px 0; }
.ptc-card--person p { font-size: 14px; color: var(--ptc-ink-soft); margin: 0; }

/* Coach card — image top, name + rates + contact */
/* Coach cards keep the portrait-ish 4:3 ratio but inherit the default
   dark-blue + yellow-glow placeholder so they look on-brand until coach
   portraits ship. Glow position is shifted to lower-left so a row of
   coach cards doesn't read identically when placed next to other
   default-media cards. */
.ptc-card--coach .ptc-card__media {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 75%, rgba(220, 236, 26, 0.4) 0%, transparent 45%),
    linear-gradient(135deg, #2a5a96 0%, #1a4078 70%, #0E2F5C 100%);
}
.ptc-card--coach h3 { font-size: 22px; margin: 0 0 6px 0; }
.ptc-card--coach .ptc-card__meta {
  font-size: 13px; color: var(--ptc-ink-soft); margin: 0 0 4px 0; line-height: 1.45;
}
.ptc-card--coach .ptc-card__cta { margin-top: 16px; }

/* Fact card — small stat panel: eyebrow + big value */
.ptc-card--fact {
  background: var(--ptc-blue-soft);
  border-color: transparent;
  text-align: center;
}
.ptc-card--fact .ptc-card__body { padding: 28px 18px; }
.ptc-card--fact .ptc-card__eyebrow {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ptc-blue);
  display: block;
  margin-bottom: 8px;
}
.ptc-card--fact h3 {
  font-size: 32px;
  line-height: 1;
  color: var(--ptc-blue-dark);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.ptc-card--fact p {
  font-size: 13px; color: var(--ptc-ink-soft); margin: 0;
}

/* Reference card — slim text + arrow link */
.ptc-card--reference {
  min-height: auto;
}
.ptc-card--reference .ptc-card__body { padding: 20px 22px; }
.ptc-card--reference h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.ptc-card--reference h3::after { content: "→"; color: var(--ptc-cyan); }
.ptc-card--reference p {
  font-size: 14px; color: var(--ptc-ink-soft); margin: 0;
}
.ptc-card--reference .ptc-lock-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ptc-white);
  background: var(--ptc-blue-dark);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}


/* ===== ACCORDION (NEW · widget #3) ===== */
.ptc-accordion {
  background: var(--ptc-white);
  border: 1px solid var(--ptc-line);
  border-radius: var(--ptc-radius-lg);
  overflow: hidden;
}
.ptc-accordion__item { border-bottom: 1px solid var(--ptc-line); }
.ptc-accordion__item:last-child { border-bottom: none; }
.ptc-accordion__heading {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 28px;
  font-family: var(--ptc-font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ptc-blue-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
}
.ptc-accordion__heading::before {
  content: "▸";
  color: var(--ptc-cyan);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.ptc-accordion__item.is-open .ptc-accordion__heading::before {
  transform: rotate(90deg);
}
.ptc-accordion__item.is-open .ptc-accordion__heading {
  background: var(--ptc-cyan-soft);
}
.ptc-accordion__step {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ptc-cyan);
  margin-right: 14px;
}
.ptc-accordion__body {
  display: none;
  /* Top padding gives the body content breathing room from the heading,
     especially since the heading gets a cyan-soft background when open. */
  padding: 18px 28px 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ptc-ink-soft);
}
.ptc-accordion__item.is-open .ptc-accordion__body { display: block; }


/* ===== CTA BAND =====
   Mid-tone brand blue (--ptc-blue) so the band reads as distinct from
   the deeper --ptc-blue-dark footer underneath. When sat above the
   footer (e.g. subscribe section on Membership), the colour-value
   step separates the two without needing a hard divider. */
.ptc-cta-band {
  background: var(--ptc-blue);
  color: var(--ptc-white);
  padding: 56px var(--ptc-gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ptc-cta-band::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  background: var(--ptc-tennis-ball-yellow) center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.ptc-cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ptc-cta-band h3 {
  font-family: var(--ptc-font-heading);
  font-size: clamp(24px, 2.4vw + 0.4rem, 32px);
  color: var(--ptc-white);
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.ptc-cta-band p {
  color: rgba(255,255,255,0.92);
  font-size: 17px;
  font-weight: 300;
  margin: 0 0 24px 0;
}


/* ===== CALLOUT (TB3 — Visitor pass note etc.) ===== */
.ptc-callout {
  background: var(--ptc-yellow-soft);
  border-left: 4px solid var(--ptc-yellow);
  padding: 18px 22px;
  border-radius: 0 var(--ptc-radius-md) var(--ptc-radius-md) 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ptc-ink);
}
.ptc-callout strong {
  font-family: var(--ptc-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ptc-blue-dark);
  margin-right: 8px;
}


/* ===== AUDIENCE VISIBILITY UTILITIES =====
   Mirrors the platform's row-level show-for-* attrs. Apply to any
   element. Default page state is "anonymous" (toggle adds .audience-member
   to <body> to flip member-only sections in). */
.is-audience-anon { display: block; }
.is-audience-member { display: none; }
body.audience-member .is-audience-anon { display: none; }
body.audience-member .is-audience-member { display: block; }

/* Inline-context override: inside the nav CTA cluster, audience toggles
   should preserve the inline-flex layout of the .ptc-btn pills rather
   than dropping each one onto its own block-level line. */
.ptc-nav__cta .is-audience-anon,
.ptc-nav__cta .is-audience-member { display: inline-flex; }
.ptc-nav__cta .is-audience-member { display: none; }
body.audience-member .ptc-nav__cta .is-audience-anon { display: none; }
body.audience-member .ptc-nav__cta .is-audience-member { display: inline-flex; }

/* Mobile-only auth links inside the items panel. Hidden on desktop —
   the .ptc-nav__cta pills handle auth there. Shown and styled in the
   mobile @media block below. */
.ptc-nav__items-auth { display: none; }


/* ===== PROPOSED-COPY MARKERS =====
   Wraps body copy that is NOT verified content from the live PTC site,
   so it's easy to spot, audit and replace before shipping. Visually
   neutral by default (client review reads as normal copy). When the
   body has class `show-proposed-copy` (toggled from the chrome bar),
   each marked span picks up a coloured outline + tint, with the colour
   indicating the level of speculation:

     [data-proposed-copy="placeholder"] — fully invented (red)
                                           e.g. dollar amounts or facts
                                           with no source
     [data-proposed-copy="unverified"]  — plausible but unconfirmed (amber)
                                           e.g. paraphrased descriptions
                                           of features we know exist
     [data-proposed-copy="restated"]    — real PTC info, reworded (blue)
                                           e.g. existing copy tightened
                                           for tone/length

   Grep-able via the class name or the data attribute. */
.ptc-proposed-copy { /* invisible in client view */ }
body.show-proposed-copy .ptc-proposed-copy {
  outline: 1.5px dashed #e0a800;
  outline-offset: 2px;
  background: rgba(255, 200, 0, 0.10);
  border-radius: 3px;
  padding: 0 2px;
}
body.show-proposed-copy .ptc-proposed-copy[data-proposed-copy="placeholder"] {
  outline-color: #dc3545;
  background: rgba(220, 53, 69, 0.12);
}
body.show-proposed-copy .ptc-proposed-copy[data-proposed-copy="restated"] {
  outline-color: #04a3d7;
  background: rgba(4, 163, 215, 0.08);
}
/* Block-level wrapper variant — same colours, applied to a whole row/
   card body rather than an inline span. Use when the entire copy block
   is proposed. */
body.show-proposed-copy [data-proposed-copy] { outline-offset: 4px; }


/* ===== Phase 5 responsive (consolidated) ===== */
@media (max-width: 900px) {
  /* Mobile nav: burger shows; nav-inner flex-wraps so the dropdown
     items + CTAs flow naturally onto new rows below the first row
     (badge + burger). No absolute positioning — both panels are real
     flex children with flex-basis: 100% so they each get their own row. */
  .ptc-nav__burger { display: block; margin-left: auto; }
  .ptc-nav__badge { width: 64px; height: 64px; top: 4px; }

  .ptc-nav--home .ptc-nav__inner {
    flex-wrap: wrap;
    padding-left: calc(var(--ptc-gutter) + 84px);
    padding-right: var(--ptc-gutter);
    gap: 0;
    align-items: center;
    min-height: 76px;
  }

  /* Items panel — hidden by default. When the nav is open it becomes
     an absolutely-positioned dropdown that sits directly below the nav,
     spanning the full viewport width (left:0 / right:0 against the nav,
     which itself is 100% viewport width). This bypasses the previous
     flex-wrap + negative-margin approach which left the panel at only
     its flex-basis width (not the full viewport) and risked overlap
     with the badge row. */
  .ptc-nav--home .ptc-nav__items {
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--ptc-white);
    padding: 0;
    border-top: 1px solid var(--ptc-line);
  }
  .ptc-nav--home .ptc-nav__items a {
    padding: 14px var(--ptc-gutter);
    font-size: 16px;
    border-bottom: 1px solid var(--ptc-line);
    color: var(--ptc-ink);
  }
  .ptc-nav--home .ptc-nav__items a:last-of-type { border-bottom: none; }
  .ptc-nav--home .ptc-nav__items a.is-active::after { display: none; }
  .ptc-nav--home .ptc-nav__items a.is-active {
    color: var(--ptc-blue);
    border-left: 4px solid var(--ptc-cyan);
    padding-left: calc(var(--ptc-gutter) - 4px);
  }

  /* Desktop pill-CTAs panel is hidden entirely on mobile. The auth
     links live inside the items panel via the .ptc-nav__items-auth
     block (declared globally below) — that keeps the open burger
     menu as a single flex panel, sidestepping the sibling-flex
     interaction that previously broke the layout. */
  .ptc-nav--home .ptc-nav__cta { display: none; }

  /* Mobile-only auth section at the bottom of the items panel. Brand
     dark-blue background with white text so the auth actions stand
     out unambiguously from the regular navigation items above. */
  .ptc-nav--home .ptc-nav__items-auth {
    display: block;
    background: var(--ptc-blue-dark);
  }
  /* Note: no `display` declaration here — the .is-audience-* utilities
     on each anchor drive visibility (display: block / none with
     body.audience-member flipping them). Setting display here would
     out-specific those utilities and break the audience toggle. */
  .ptc-nav--home .ptc-nav__items-auth a {
    padding: 16px var(--ptc-gutter);
    font-family: var(--ptc-font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--ptc-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ptc-nav--home .ptc-nav__items-auth a:last-child { border-bottom: none; }
  /* Primary action gets the brand-yellow accent for extra hierarchy. */
  .ptc-nav--home .ptc-nav__items-auth a.is-primary { color: var(--ptc-yellow); }

  /* Show items panel when nav is open. Absolute positioning anchors it
     to the nav (which is position: sticky) so it spans full viewport
     width and sits below the burger row — no overlap, no flex-basis
     width problem. */
  .ptc-nav.is-open .ptc-nav__items {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0 12px 24px rgba(14, 47, 92, 0.12);
  }
  .ptc-nav--home .ptc-nav__items a.is-active::after { height: 10px; bottom: -14px; }
  .ptc-home-hero { min-height: 520px; }
  .ptc-home-hero__inner { grid-template-columns: 1fr; padding: 64px var(--ptc-gutter) 56px; }
  .ptc-home-hero__text { padding-right: 0; }
  .ptc-home-hero__photo {
    width: 100%;
    /* Mobile-specific overlay: the photo sits behind the headline on
       mobile (no left solid band), so the gradient needs to be heavier
       than the desktop edge-feather to keep title + subhead legible.
       Desktop keeps its lighter, more atmospheric gradient. */
    background-image:
      linear-gradient(180deg,
        rgba(14, 47, 92, 0.88) 0%,
        rgba(14, 47, 92, 0.72) 55%,
        rgba(14, 47, 92, 0.92) 100%),
      url('../img/ptc-aerial-courts.webp');
    background-size: 100% 100%, cover;
    background-position: 0 0, 45% center;
  }
  .ptc-purpose { padding: 64px 0 76px; }
  .ptc-purpose__grid { grid-template-columns: 1fr; gap: 40px; }
  .ptc-purpose__photo::after { width: 100px; height: 100px; right: -24px; bottom: -24px; }
  .ptc-page-hero { padding: 48px 0 44px; }
  .ptc-anchor-nav { font-size: 12px; }
  .ptc-anchor-nav__inner { gap: 14px; }
  .ptc-footer__bottom { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ptc-cta-band { padding: 44px var(--ptc-gutter); }
}

@media (max-width: 540px) {
  /* Tighter mobile footer — everything stacks (Bootstrap-style order).
     The top row uses column-reverse so the social icons render ABOVE the
     PTC logo on mobile (DOM order is logo→social for desktop; reversed
     visually for mobile). */
  .ptc-footer__bottom { grid-template-columns: 1fr; }
  .ptc-footer__top { flex-direction: column-reverse; align-items: flex-start; }
  .ptc-footer { padding: 40px 0 24px; }
  .ptc-home-hero__inner { padding: 48px var(--ptc-gutter) 44px; }
}