/* ==========================================================================
   Defence theme — Dark Blue, Light Blue and White.

   The site's colours in one place, loaded after every other stylesheet so it
   re-points the design tokens without touching templates or rebuilding
   Tailwind (the utilities read these variables at run time).

   Balance: roughly 60% blue to 40% white on every page.
     Dark Blue  — heroes, the footer and a few signature bands (results,
                  campus, method): the "uniform" colour, used for weight.
     Light Blue — the alternating content bands: a clear sky tint, not an
                  off-white, so the page reads as blue between the dark bands.
     White      — cards, forms and reading copy, where contrast matters most.
   Gold stays as a small accent (badges, highlights), never a ground.

   Unlayered, so it wins over the layered component and utility rules.
   ========================================================================== */

:root {
  /* Dark Blue — deep navy and academy blue */
  --def-navy-950: #041f36;
  --def-navy-900: #062b49;
  --def-navy-800: #0a3b63;
  --def-navy-700: #0f4a78;
  /* Professional blue: #1687C9 for fills and accents; a deeper shade of it
     for text and links, which need 4.5:1 on white and on ice blue. */
  --def-royal-600: #0f6fa8;
  --def-royal-500: #1687c9;
  /* Light Blue — soft blue white and ice blue */
  --def-sky-50: #f5faff;
  --def-sky-100: #eaf4fb;
  --def-sky-200: #dcecf8;
  --def-sky-300: #b9d7ee;
  /* Text */
  --def-ink: #0b2438;
  --def-ink-2: #4e667a;
  /* #60788A as specified reads 4.1:1 on ice blue; this is the same tone
     nudged to pass 4.5:1 on every light ground. */
  --def-ink-muted: #587083;
  /* Accents: cyan on navy only; muted gold for small details only. */
  --def-cyan: #16d9ff;
  --def-cyan-deep: #1687c9;
  --def-gold: #d6a84f;

  /* Role tokens (read by the Tailwind utilities and components). */
  --color-primary: var(--def-royal-600);
  --color-primary-dark: #0b5a8a;
  --color-primary-light: var(--def-sky-100);
  --color-primary-navy: var(--def-navy-900);
  --color-primary-blue: var(--def-navy-700);
  --color-deep-navy: #0a1f4a;
  --color-dark-blue: var(--def-navy-800);
  --color-ocean-blue: var(--def-navy-700);
  --color-navy: var(--def-navy-900);
  --color-ink: var(--def-navy-900);
  --color-ink-deep: var(--def-navy-950);
  --color-text: var(--def-ink);
  --color-foreground: var(--def-ink);
  --color-blue: var(--def-royal-600);
  --color-cyan: var(--def-cyan-deep);
  --color-bright-cyan: var(--def-cyan);
  --color-cyan-bright: var(--def-cyan);

  --color-soft-blue: var(--def-sky-100);
  --color-lightblue: var(--def-sky-100);
  --color-section: var(--def-sky-100);
  --color-muted: var(--def-sky-100);
  --color-bg-soft: var(--def-sky-100);
  --color-bg-section: var(--def-sky-50);
  --color-ultra-light: var(--def-sky-50);

  --color-text-secondary: var(--def-ink-2);
  --color-text-muted: var(--def-ink-muted);
  --color-muted-foreground: var(--def-ink-2);
  --color-border: #d6e7f4;
  --color-border-strong: #b3d1f1;

  --gradient-navy: linear-gradient(150deg, var(--def-navy-950) 0%, var(--def-navy-800) 55%, var(--def-navy-700) 100%);
  --gradient-blue: linear-gradient(135deg, var(--def-royal-500), var(--def-royal-600));
  --gradient-cyan: linear-gradient(135deg, var(--def-royal-500), var(--def-royal-600));
  --gradient-sky: linear-gradient(180deg, var(--def-sky-50) 0%, var(--def-sky-100) 100%);
  --shadow-glow: 0 1px 1px rgb(11 77 162 / 0.25), 0 12px 28px -8px rgb(20 100 200 / 0.5);
}

::selection { background: rgb(20 100 200 / 0.22); }

/* --------------------------------------------------------------------------
   Dark scope. Extends the existing .tone-dark remap: brand blue and the
   secondary text greys become light, so eyebrows, links and captions written
   for a white page stay legible on navy.
   -------------------------------------------------------------------------- */
.tone-dark,
.bg-navy,
.bg-navy-900,
.bg-navy-700,
.bg-ink {
  --color-primary: #7cc4f5;
  --color-primary-dark: #a9d8fa;
  --color-primary-light: rgb(255 255 255 / 0.08);
  --color-text: #ffffff;
  --color-text-secondary: rgb(234 244 255 / 0.74);
  --color-text-muted: rgb(234 244 255 / 0.6);
  --color-muted-foreground: rgb(234 244 255 / 0.72);
  --color-section: rgb(255 255 255 / 0.06);
  --color-border-strong: rgb(255 255 255 / 0.22);
}

/* Light islands: a white card inside a dark band keeps light-page colours
   for its own contents. */
.tone-dark :is(.bg-white, .bg-background, .bg-section, .bg-cream, .glass-panel, .btn--secondary, .seo-guide,
  .result-tile, .rimc-band, .method-node, .stat-card, .selection-card, .mou-chip, .review-body, .review-badge,
  .filter-chip, .upd-profile, .nav-mega),
.bg-navy :is(.bg-white, .bg-background, .bg-section, .bg-cream, .glass-panel, .btn--secondary,
  .result-tile, .rimc-band, .method-node, .stat-card, .selection-card, .mou-chip, .review-body, .review-badge,
  .filter-chip, .upd-profile, .nav-mega) {
  --color-primary: var(--def-royal-600);
  --color-primary-dark: #0b5a8a;
  --color-primary-light: var(--def-sky-100);
  --color-text: var(--def-ink);
  --color-foreground: var(--def-ink);
  --color-text-secondary: var(--def-ink-2);
  --color-text-muted: var(--def-ink-muted);
  --color-muted-foreground: var(--def-ink-2);
  --color-border: #d6e7f4;
  --color-surface: #ffffff;
  --color-section: var(--def-sky-100);
  --color-lightblue: var(--def-sky-100);
  --color-blue: var(--def-royal-600);
  --color-cyan: var(--def-cyan-deep);
  color-scheme: light;
}
/* On navy, "section" panels read better as white than as sky. */
.tone-dark .bg-section { background-color: #ffffff; }

/* --------------------------------------------------------------------------
   Light Blue bands. The old bands faded from white to an off-white and back;
   these are a clear sky tint edge to edge, in two alternating shades so two
   neighbouring bands still read as two.
   -------------------------------------------------------------------------- */
.band-soft,
.band-sky {
  background:
    radial-gradient(60rem 22rem at 85% 0%, rgb(255 255 255 / 0.45), transparent 70%),
    linear-gradient(180deg, #e1eefb 0%, var(--def-sky-200) 100%);
}
.band-section,
.bg-lightblue {
  background:
    radial-gradient(56rem 20rem at 10% 100%, rgb(255 255 255 / 0.45), transparent 70%),
    linear-gradient(180deg, #d6e8fa 0%, #e5f0fc 100%);
}
.band-soft, .band-sky, .band-section, .bg-lightblue { border-top: 1px solid rgb(179 209 241 / 0.55); }
/* Cards on a blue band lift off it with a crisper edge. */
:is(.band-soft, .band-sky, .band-section, .bg-lightblue) :is(.bg-white, .bg-surface, .glass) {
  border-color: rgb(179 209 241 / 0.7);
}

/* --------------------------------------------------------------------------
   Dark Blue bands: the signature sections. Navy with a soft royal glow and a
   faint parade-ground grid, matching the home hero.
   -------------------------------------------------------------------------- */
.band-navy {
  position: relative;
  color: #fff;
  background:
    radial-gradient(48rem 30rem at 88% 8%, rgb(20 100 200 / 0.35), transparent 65%),
    radial-gradient(40rem 26rem at 6% 96%, rgb(22 217 255 / 0.12), transparent 65%),
    linear-gradient(160deg, var(--def-navy-950) 0%, var(--def-navy-900) 45%, var(--def-navy-800) 100%);
}
.band-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(124 196 245 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(124 196 245 / 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 80%);
}
.band-navy > * { position: relative; }

/* --------------------------------------------------------------------------
   Inner-page hero: the same navy opening as the home page.
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(52rem 34rem at 82% 10%, rgb(20 100 200 / 0.4), transparent 62%),
    radial-gradient(36rem 26rem at 8% 100%, rgb(22 217 255 / 0.14), transparent 62%),
    linear-gradient(158deg, var(--def-navy-950) 0%, var(--def-navy-900) 42%, var(--def-navy-800) 78%, var(--def-navy-700) 100%);
}
.page-hero .mesh-background,
.page-hero .hero-fade { display: none; }
.page-hero .gradient-blob {
  background: radial-gradient(circle, rgb(22 217 255 / 0.2), transparent 68%);
  filter: blur(30px);
}
.page-hero .grid-overlay {
  background-image:
    linear-gradient(to right, rgb(124 196 245 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(124 196 245 / 0.08) 1px, transparent 1px);
}
.page-hero::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(22 217 255 / 0.55), transparent);
}
/* The last headline line: light blue to gold, as on the home hero. */
.page-hero .hero-gold {
  background-image: linear-gradient(90deg, #7cc4f5 0%, #a9dcff 45%, #ffd84d 100%);
}
.page-hero .type-eyebrow.text-primary { color: var(--def-cyan); }

/* --------------------------------------------------------------------------
   Buttons. Royal blue on light grounds; on navy the bright cyan of the home
   hero, which keeps the call to action the brightest thing in view.
   -------------------------------------------------------------------------- */
.btn--primary {
  /* The accent blue, taken one step deeper so white button text keeps at
     least 4.7:1 across the whole gradient; #1687C9 lives in the glow. */
  background: linear-gradient(135deg, #137ab6, var(--def-royal-600));
  box-shadow: 0 1px 1px rgb(6 43 73 / 0.2), 0 14px 30px -12px rgb(22 135 201 / 0.6);
}
.tone-dark .btn--primary,
.bg-navy .btn--primary,
.bg-ink .btn--primary {
  background: linear-gradient(90deg, var(--def-cyan), #149bff);
  box-shadow: 0 14px 32px -12px rgb(22 190 255 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.4);
}
/* The secondary "glass" button becomes a cyan-outlined ghost on navy, as in
   the home hero, instead of a grey smear of white glass. */
.tone-dark .btn--glass,
.bg-navy .btn--glass {
  background: rgb(234 244 255 / 0.05);
  color: #fff;
  border-color: rgb(22 217 255 / 0.55);
  box-shadow: inset 0 0 16px rgb(22 217 255 / 0.08);
}
/* Figures floating over a hero photograph: near-solid, so they read on any
   part of the picture. */
.page-hero .glass-panel { background: rgb(255 255 255 / 0.92); }
@media (hover: hover) {
  .btn--primary:hover { box-shadow: 0 1px 1px rgb(4 22 61 / 0.2), 0 18px 36px -10px rgb(11 77 162 / 0.7); }
  .btn--glass:hover { border-color: rgb(11 77 162 / 0.3); color: var(--def-royal-600); }
  .tone-dark .btn--glass:hover,
  .bg-navy .btn--glass:hover { background: rgb(22 217 255 / 0.12); border-color: var(--def-cyan); color: #fff; }
}

/* Links in running copy. */
.seo-guide-body a { color: var(--def-royal-600); text-decoration-color: rgb(11 77 162 / 0.35); }
.seo-guide-body a:hover { color: #0b5a8a; }
.seo-guide-body li::before { background: var(--def-royal-500); }

/* Footer: the deepest navy, so the page ends on the uniform colour. */
.site-footer.bg-ink,
.site-footer {
  background:
    radial-gradient(50rem 24rem at 90% 0%, rgb(20 100 200 / 0.22), transparent 65%),
    linear-gradient(180deg, var(--def-navy-900) 0%, var(--def-navy-950) 100%);
}

/* Footer legal line: copyright, then the site credit after a hairline. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }
.footer-credit { display: inline-flex; align-items: center; gap: 0.4rem; padding-left: 0.9rem; border-left: 1px solid rgb(255 255 255 / 0.18); }
.footer-credit a {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 250ms ease;
}
.footer-credit a:hover { color: var(--def-cyan); }
.footer-credit a:focus-visible { outline: 2px solid var(--def-cyan); outline-offset: 3px; border-radius: 3px; }
/* Stacked on phones: the credit gets its own line, so no divider. */
@media (max-width: 639px) {
  .footer-credit { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Brochure menu (includes/components.php → brochure_button()). Shown only
   when two or more brochures are published: the button opens a short list,
   each brochure downloadable on its own, plus "Download all".
   -------------------------------------------------------------------------- */
.brochure-menu { position: relative; display: inline-block; }
.brochure-menu > summary { list-style: none; cursor: pointer; }
.brochure-menu > summary::-webkit-details-marker { display: none; }
.brochure-chevron { display: inline-grid; margin-left: 0.15rem; transition: transform 250ms ease; }
.brochure-menu[open] .brochure-chevron { transform: rotate(180deg); }

.brochure-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.6rem);
  left: 0;
  width: min(23rem, calc(100vw - 2.5rem));
  padding: 0.6rem;
  border: 1px solid #d6e7f4;
  border-radius: 18px;
  background: #fff;
  color: var(--def-ink);
  text-align: left;
  box-shadow: 0 24px 50px -18px rgb(6 43 73 / 0.45), 0 2px 6px rgb(6 43 73 / 0.08);
  animation: brochure-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes brochure-in { from { opacity: 0; transform: translateY(-6px); } }
/* Room kept below an opened list when it is scrolled into view. */
.brochure-menu-panel { scroll-margin-bottom: 1.5rem; }
@media (max-width: 1279px) {
  .brochure-menu-panel { scroll-margin-bottom: 6rem; } /* clears the mobile bottom bar */
}
.brochure-menu-head {
  margin: 0.35rem 0.6rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--def-ink-muted);
}
.brochure-menu-list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.brochure-menu-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.6rem;
  border-radius: 12px;
  color: var(--def-ink);
  text-decoration: none;
  transition: background-color 200ms ease;
}
.brochure-menu-item:hover, .brochure-menu-item:focus-visible { background: var(--def-sky-100); outline: none; }
.brochure-menu-file {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  color: var(--def-royal-600);
  background: var(--def-sky-100);
  box-shadow: inset 0 0 0 1px #d6e7f4;
}
.brochure-menu-text { display: grid; min-width: 0; flex: 1; }
.brochure-menu-title { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.brochure-menu-desc { margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.35; color: var(--def-ink-2); }
.brochure-menu-dl { flex: none; color: var(--def-royal-600); }
.brochure-menu-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #137ab6, var(--def-royal-600));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 200ms ease;
}
.brochure-menu-all:hover { filter: brightness(1.08); }
.brochure-menu-all:focus-visible { outline: 2px solid var(--def-royal-500); outline-offset: 2px; }
@media (max-width: 639px) {
  .brochure-menu { display: block; width: 100%; }
  .brochure-menu-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .brochure-menu-panel { animation: none; }
  .brochure-chevron { transition: none; }
}

/* Nine destinations in the compact header (inner pages, and the home page
   once scrolled): on laptop widths the links tighten slightly so the bar
   keeps clear space around the brand and the call buttons. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-nav:is(:not(.is-home), .is-scrolled) [data-navbar-inner] nav .nav-link { padding-inline: 0.62rem; }
  .site-nav:is(:not(.is-home), .is-scrolled) [data-navbar-inner] { gap: 1.25rem; }
}

/* ==========================================================================
   Program cards — one identity per mode (includes/ui.php ui_program_card)

     .pc--online        light, sky and cyan: live classes from home
     .pc--residential   deep navy and gold: the academy campus

   Same structure for both: accent rule, image with a mode badge and index,
   entrance focus, fact chips, summary, "What's included" from the program's
   own list, and a full call to action.
   ========================================================================== */
.pc { --pc-accent: linear-gradient(90deg, #16d9ff, #1687c9); --pc-ink: var(--def-ink); --pc-soft: var(--def-ink-2);
  --pc-chip-bg: #eef7fd; --pc-chip-ink: var(--def-navy-800); --pc-chip-ring: #cfe6f6; --pc-icon: #1687c9;
  --pc-check-bg: #e2f4fd; --pc-check-ink: #0f6fa8; --pc-rule: #e1edf6;
  --pc-cta-bg: linear-gradient(135deg, #1aa6e0, #0f6fa8); --pc-cta-ink: #fff; --pc-cta-glow: rgb(22 135 201 / 0.45);
  border-radius: 24px; isolation: isolate; }
.pc--online {
  background: linear-gradient(180deg, #f3fbff 0%, #ffffff 46%); border-color: #d3e9f7;
  box-shadow: 0 1px 0 #fff inset, 0 24px 50px -32px rgb(15 111 168 / 0.45);
}
.pc--residential {
  --pc-accent: linear-gradient(90deg, #f0cf86, #d6a84f 55%, #b8862f);
  --pc-ink: #ffffff; --pc-soft: rgb(220 236 248 / 0.78);
  --pc-chip-bg: rgb(255 255 255 / 0.07); --pc-chip-ink: #eaf4fb; --pc-chip-ring: rgb(214 168 79 / 0.35); --pc-icon: #f0cf86;
  --pc-check-bg: rgb(214 168 79 / 0.18); --pc-check-ink: #f0cf86; --pc-rule: rgb(255 255 255 / 0.1);
  --pc-cta-bg: linear-gradient(135deg, #f0cf86, #d6a84f); --pc-cta-ink: #041f36; --pc-cta-glow: rgb(214 168 79 / 0.5);
  background:
    radial-gradient(38rem 20rem at 100% 0%, rgb(22 135 201 / 0.28), transparent 60%),
    radial-gradient(26rem 18rem at 0% 100%, rgb(214 168 79 / 0.12), transparent 65%),
    linear-gradient(160deg, #0a3b63 0%, #062b49 55%, #041f36 100%);
  border-color: rgb(214 168 79 / 0.3);
  box-shadow: 0 30px 60px -34px rgb(4 31 54 / 0.85);
}

/* Accent rule along the top edge */
.pc-accent { position: absolute; inset: 0 0 auto; z-index: 2; height: 4px; background: var(--pc-accent); }

/* Image */
.pc-media { margin: 0.6rem 0.6rem 0; }
.pc-shade { position: absolute; inset: 0; pointer-events: none; }
.pc--online .pc-shade { background: linear-gradient(180deg, rgb(4 31 54 / 0) 45%, rgb(15 111 168 / 0.55)); }
.pc--residential .pc-shade { background: linear-gradient(180deg, rgb(4 31 54 / 0.05) 35%, rgb(4 31 54 / 0.78)); }
.pc-badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.8rem 0.42rem 0.65rem; border-radius: 999px; font-size: 0.78rem; line-height: 1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pc-badge strong { font-weight: 800; letter-spacing: 0.02em; }
.pc-badge span { padding-left: 0.45rem; border-left: 1px solid currentColor; opacity: 0.8; font-weight: 500; }
.pc--online .pc-badge { background: rgb(255 255 255 / 0.9); color: #0f6fa8; box-shadow: 0 6px 18px -8px rgb(15 111 168 / 0.6); }
.pc--residential .pc-badge { background: rgb(4 31 54 / 0.72); color: #f0cf86; border: 1px solid rgb(214 168 79 / 0.55); }
.pc-index { right: 1.15rem; bottom: 0.35rem; }
.pc--online .pc-index { color: rgb(255 255 255 / 0.92); text-shadow: 0 10px 30px rgb(15 111 168 / 0.55); }
.pc--residential .pc-index {
  color: transparent; -webkit-text-stroke: 1.5px rgb(240 207 134 / 0.9);
  background: linear-gradient(180deg, rgb(240 207 134 / 0.35), transparent); -webkit-background-clip: text; background-clip: text;
}

/* Body */
.pc-body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.6rem 1.6rem; color: var(--pc-ink); }
@media (min-width: 640px) { .pc-body { padding: 1.75rem 2rem 1.9rem; } }
.pc-eyebrow { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pc-icon); }
.pc-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--pc-ink); }
.pc-title a { color: inherit; text-decoration: none; }
.pc-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pc-facts li {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px;
  background: var(--pc-chip-bg); color: var(--pc-chip-ink); box-shadow: inset 0 0 0 1px var(--pc-chip-ring);
  font-size: 0.78rem; font-weight: 600;
}
.pc-facts svg { color: var(--pc-icon); flex: none; }
.pc-summary { margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.7; color: var(--pc-soft); }
.pc-included { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--pc-rule); }
.pc-included-label { margin: 0 0 0.7rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pc-soft); }
.pc-included ul { display: grid; gap: 0.55rem 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pc-included ul { grid-template-columns: 1fr 1fr; } }
.pc-included li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.45; color: var(--pc-ink); }
.pc--online .pc-included li { color: var(--def-ink); }
.pc-check { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; border-radius: 999px; background: var(--pc-check-bg); color: var(--pc-check-ink); }
.pc-check svg { stroke-width: 3; }

/* Actions */
.pc-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.6rem; }
.pc-cta {
  display: inline-flex; align-items: center; gap: 0.55rem; height: 2.9rem; padding: 0 1.25rem; border-radius: 999px;
  background: var(--pc-cta-bg); color: var(--pc-cta-ink); font-size: 0.9rem; font-weight: 750; white-space: nowrap;
  box-shadow: 0 12px 26px -14px var(--pc-cta-glow); transition: box-shadow 350ms ease, transform 350ms var(--ease-brand, ease);
}
.pc-cta svg { transition: transform 350ms var(--ease-brand, ease); }
.pc-enquire { position: relative; z-index: 2; font-size: 0.9rem; font-weight: 650; color: var(--pc-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 250ms ease, text-decoration-color 250ms ease; }
.pc-enquire:hover, .pc-enquire:focus-visible { color: var(--pc-ink); text-decoration-color: currentColor; }
.pc--online .pc-enquire:hover { color: #0f6fa8; }
.pc--residential .pc-enquire:hover { color: #f0cf86; }
.pc .card-link:focus-visible { outline: none; }
.pc:has(.card-link:focus-visible) { outline: 3px solid var(--pc-icon); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .pc--online:hover { border-color: #9fd3f2; box-shadow: 0 1px 0 #fff inset, 0 36px 64px -30px rgb(15 111 168 / 0.6), 0 0 0 1px rgb(22 217 255 / 0.25); }
  .pc--residential:hover { border-color: rgb(214 168 79 / 0.6); box-shadow: 0 40px 70px -32px rgb(4 31 54 / 0.95), 0 0 0 1px rgb(214 168 79 / 0.35); }
  .pc:hover .pc-cta { box-shadow: 0 18px 34px -14px var(--pc-cta-glow); }
  .pc:hover .pc-cta svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .pc-cta, .pc-cta svg { transition: none; } }
/* Narrow cards: the button takes the full width, Enquire sits beneath it. */
@media (max-width: 520px) {
  .pc-actions { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .pc-cta { justify-content: center; }
  .pc-enquire { align-self: center; }
}