/* ============================================================
   HHCC redesign (Fleet-Street-inspired) - layered on top of main.css.
   main.css still provides :root tokens, nav, buttons, footer.
   Stock media are placeholders; .no-media body class swaps them for
   gradient fallbacks so the layout can be judged with/without photos.
   ============================================================ */

/* ---------- VIDEO/IMAGE HERO ---------- */
.v2-hero {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  overflow: hidden; color: var(--white);
}
.v2-hero-media { position: absolute; inset: 0; z-index: 0; }
.v2-hero-media img, .v2-hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.v2-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(13,25,33,0.94) 0%, rgba(20,40,52,0.88) 55%, rgba(31,90,114,0.5) 100%);
}
/* no-media fallback: rich navy gradient instead of a photo */
body.no-media .v2-hero-media { display: none; }
body.no-media .v2-hero {
  background: radial-gradient(circle at 75% 25%, rgba(100,160,182,0.25) 0%, transparent 55%),
              linear-gradient(125deg, var(--navy) 0%, var(--navy-mid) 60%, var(--teal-deeper) 130%);
}
/* Same flex-item shrink as .hero (see main.css): without this the homepage hero
   copy floats to ~380px from the left while the nav sits at 40px. */
.v2-hero > .container { width: 100%; }
/* The 760px limit sits on the text, not on the block, so the seal above the heading
   is centred on the screen (it used to sit over the middle of the 760px text column). */
.v2-hero-inner { position: relative; z-index: 2; padding: 36px 0; }
.v2-hero-inner > h1, .v2-hero-pairs { max-width: 760px; }
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: #9dd3e8; margin-bottom: 20px;
}
.v2-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.v2-hero h1 {
  font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-weight: 600;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.05; margin: 0 0 22px; color: #fff;
}
.v2-hero h1 .accent { color: var(--teal); font-style: italic; }
.v2-hero-sub { font-size: clamp(16px, 2vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 600px; margin-bottom: 34px; }
.v2-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.v2-hero-trust { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 56px; align-items: flex-start; max-width: 560px; }
.v2-hero-trust .tr { display: flex; flex-direction: column; align-items: center; }
.v2-hero-trust .tr b { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.v2-hero-trust .tr span { font-size: 12px; color: rgba(255,255,255,0.9); margin-top: 4px; }
/* hero CTA + stat pairs: each stat centred under its button */
.v2-hero-pairs { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 40px; }
.v2-pair { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v2-pair .btn { width: 100%; justify-content: center; }
.v2-pair .tr { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v2-pair .tr b { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.05; }
.v2-pair .tr span { font-size: 12px; color: rgba(255,255,255,0.9); margin-top: 5px; max-width: 170px; }
.v2-hero-scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.85); font-size: 12px; letter-spacing: 1px; }

/* ---------- LOGO TRUST BAR ---------- */
.v2-logobar { background: var(--white); border-bottom: 1px solid var(--border); }
.v2-logobar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; padding: 22px 0; }
.v2-logobar-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-mid); }
.v2-logobar-item svg { color: var(--teal); flex-shrink: 0; }
.v2-logobar-rating b { color: var(--navy); }

/* ---------- SECTION HEADERS ---------- */
.v2-sec { padding: 92px 0; }
.v2-sec.alt { background: var(--teal-pale); }
.v2-sec-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.v2-sec-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-deeper); margin-bottom: 12px; }
.v2-sec-head h2 { font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-weight: 600; font-size: clamp(28px, 4vw, 40px); color: var(--navy); line-height: 1.15; margin: 0 0 14px; }
.v2-sec-head p { font-size: 16px; color: var(--text-mid); line-height: 1.7; }

/* ---------- FEATURED SERVICES GRID ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column; text-decoration: none;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* overflow stays visible so the icon badge can straddle the bottom edge (it was being clipped to its top half).
   The card itself clips the rounded corners.  If real photos are added back, they will spill by ~5px on hover zoom. */
.svc-card-media { height: 180px; position: relative; overflow: visible; background: linear-gradient(135deg, var(--navy), var(--teal-deeper)); }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.svc-card:hover .svc-card-media img { transform: scale(1.06); }
.svc-card-icon {
  position: absolute; left: 18px; bottom: -22px; width: 48px; height: 48px; border-radius: 12px;
  background: var(--white); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  color: var(--teal-deeper);
}
.svc-card-body { padding: 34px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.svc-card-body h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.svc-card-body p { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.svc-card-link { font-size: 14px; font-weight: 600; color: var(--teal-deeper); }

/* ---------- SPLIT / WHY-US ---------- */
.v2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.v2-split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy), var(--teal-deeper)); }
.v2-split-media img { width: 100%; height: 100%; object-fit: cover; }
body.no-media .v2-split-media img { display: none; }
.v2-why-list { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.v2-why-item { display: flex; gap: 16px; }
.v2-why-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--teal-light); color: var(--teal-deeper); display: flex; align-items: center; justify-content: center; }
.v2-why-item h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.v2-why-item p { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin: 0; }

/* ---------- TEAM ---------- */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.team-card { text-align: center; text-decoration: none; color: inherit; display: block; transition: transform .25s ease; }
a.team-card:hover { transform: translateY(-4px); }
a.team-card:hover h3 { color: var(--teal-deeper); }
a.team-card:hover .team-ph { box-shadow: var(--shadow-lg); }
.team-ph { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--teal-light); transition: box-shadow .25s ease; }
.team-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .4s ease; }
a.team-card:hover .team-ph img { transform: scale(1.05); }
body.no-media .team-ph img { display: none; }
.team-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 14px 0 2px; }
.team-card .role { font-size: 13px; color: var(--teal-deeper); font-weight: 600; }
.team-card .partner { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); background: var(--teal-deeper); padding: 2px 10px; border-radius: var(--radius-pill); }

/* ---------- MEMBERSHIP / CTA BAND ---------- */
.v2-band { position: relative; overflow: hidden; background: linear-gradient(125deg, var(--navy) 0%, var(--navy-mid) 60%, var(--teal-deeper) 130%); color: var(--white); padding: 84px 0; }
.v2-band::before { content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(100,160,182,0.18) 0%, transparent 70%); }
.v2-band-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.v2-band-inner .v2-hero-actions { justify-content: center; }
.v2-band h2 { font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-weight: 600; font-size: clamp(28px,4vw,40px); margin: 0 0 16px; color: #fff; }
.v2-band p { font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.7; margin: 0 0 28px; }

/* ---------- STATS ---------- */
.v2-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.v2-stat .n { font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-size: 44px; font-weight: 600; color: var(--teal-deeper); line-height: 1; }
.v2-stat .l { font-size: 13px; color: var(--text-mid); margin-top: 8px; }

/* ---------- CQC footer badge ---------- */
/* CQC "rated Good" stamp (recreation - swap for official CQC asset when available) */
.cqc-badge { display: inline-flex; align-items: stretch; margin-top: 16px; border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.28); width: fit-content; }
.cqc-badge .cqc-mark { display: flex; flex-direction: column; justify-content: center; padding: 8px 13px; background: #fff; }
.cqc-badge .cqc-mark b { color: #000; font-weight: 800; font-size: 17px; letter-spacing: 0.5px; line-height: 1; }
.cqc-badge .cqc-mark small { color: #5b5b5b; font-size: 7.5px; letter-spacing: 0.4px; text-transform: uppercase; margin-top: 3px; }
.cqc-badge .cqc-good { display: flex; align-items: center; gap: 8px; background: #00a499; color: #fff; padding: 8px 16px; font-weight: 700; font-size: 13px; }
.cqc-badge .cqc-good .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; flex-shrink: 0; }

/* ---------- media query ---------- */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .v2-split { grid-template-columns: 1fr; gap: 36px; }
  .v2-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .v2-hero { min-height: 86vh; }
}

/* ===== High-contrast nav (desktop only; home-v2 only). White utility row,
   dark navy nav bar with bold UPPERCASE links, white dropdown panels. ===== */
@media (min-width: 881px) { .logo-wrap img { height: 60px; } }
/* Starts at 1366px, where the hamburger stops (main.css): below that the open
   mobile menu is white, and these white link colours made it look empty. */
@media (min-width: 1366px) {
  .top-bar-nav { background: var(--navy); border-bottom: none; padding: 2px 0; }
  .nav-links { gap: 30px; }
  /* "Poppins Menu Fallback" (main.css) keeps this row on one line before Poppins has loaded */
  .nav-links > li > a { font-family: "Poppins", "Poppins Menu Fallback", system-ui, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 1.3px; text-transform: uppercase; color: #fff; padding: 16px 0; }
  .nav-links > li > a:hover { color: var(--teal); }
  .nav-links > li > a::after { bottom: 6px; height: 3px; }
  .nav-links .caret { opacity: 0.85; }
  .nav-links .dropdown { background: #fff; box-shadow: 0 18px 50px rgba(15,28,37,0.28); }
  .nav-links .dropdown a { color: var(--navy); font-weight: 600; }
  .nav-links .dropdown a:hover, .nav-links .dropdown a:focus { background: var(--navy); color: #fff; }
  /* book button pops on the white utility row */
  .top-bar-book { font-weight: 700; }
}

/* ===== Rotating "40+ years" seal (hero) ===== */
.years-seal { width: 138px; height: 138px; margin: 0 auto 24px; z-index: 3; }
.years-seal svg { width: 100%; height: 100%; }
.years-seal .ring { animation: sealSpin 18s linear infinite; transform-origin: 60px 60px; }
.years-seal .ring text { fill: rgba(255,255,255,0.85); font-size: 8.2px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.years-seal .seal-num { fill: var(--teal); font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-size: 30px; font-weight: 700; }
.years-seal .seal-lbl { fill: #fff; font-size: 9px; font-weight: 700; letter-spacing: 3px; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (max-width: 880px) { .years-seal { width: 104px; height: 104px; margin: 0 auto 18px; } }

/* ===== Scrolling services reel (below hero) ===== */
.svc-reel { background: var(--navy); overflow: hidden; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.svc-reel-track { display: flex; width: max-content; animation: reelScroll 38s linear infinite; }
.svc-reel:hover .svc-reel-track,
.svc-reel:focus-within .svc-reel-track { animation-play-state: paused; }
.svc-reel-item { display: inline-flex; align-items: center; white-space: nowrap; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 0 26px; text-decoration: none; transition: color .2s; }
.svc-reel-item:hover { color: var(--teal); }
.svc-reel-item::after { content: "✦"; color: var(--teal); margin-left: 26px; font-size: 11px; }
@keyframes reelScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .svc-reel-track, .years-seal .ring { animation: none; } }
/* Touch devices (no hover): stop the auto-scroll and let users swipe the strip instead (WCAG 2.2.2) */
@media (hover: none) { .svc-reel { overflow-x: auto; -webkit-overflow-scrolling: touch; } .svc-reel-track { animation: none; } }

/* ===== Team bios (About page) ===== */
.team-bios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.team-bio { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px 26px; box-shadow: var(--shadow-sm); text-align: center; transition: box-shadow .3s ease, transform .3s ease; }
.team-bio:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.team-bio .bio-photo, .team-bio .bio-ph-fallback { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 16px; display: block; }
.team-bio .bio-photo { object-fit: cover; object-position: center top; box-shadow: var(--shadow-sm); }
.team-bio .bio-ph-fallback { display: flex; align-items: center; justify-content: center; background: var(--teal-light); color: var(--teal-deeper); font-size: 34px; font-weight: 800; }
.team-bio h3 { font-size: 17px; color: var(--navy); margin: 0 0 3px; }
.team-bio .role { font-size: 13px; font-weight: 600; color: var(--teal-deeper); margin: 0 0 12px; }
.team-bio .partner-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--teal-deeper); padding: 1px 8px; border-radius: var(--radius-pill); vertical-align: middle; }
.team-bio .bio { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; margin: 0; text-align: left; }
.team-bio .bio-more { margin-top: 12px; text-align: left; }
.team-bio .bio-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal-deeper); }
.team-bio .bio-more > summary::-webkit-details-marker { display: none; }
.team-bio .bio-more > summary::after { content: "\25BE"; font-size: 11px; transition: transform .25s ease; }
.team-bio .bio-more[open] > summary::after { transform: rotate(180deg); }
.team-bio .bio-more .more-hide { display: none; }
.team-bio .bio-more[open] .more-show { display: none; }
.team-bio .bio-more[open] .more-hide { display: inline; }
.team-bio .bio-full { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.team-bio .bio-full p { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin: 0 0 12px; text-align: left; }
.team-bio .bio-full p:last-child { margin-bottom: 0; }
@media (max-width: 980px) { .team-bios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-bios { grid-template-columns: 1fr; } }

/* ============================================================
   INNER-PAGE CONSISTENCY WITH THE V2 HOMEPAGE
   v2.css is linked on every page, so these overrides bring the
   shared main.css building blocks (hero, headings, eyebrow) into
   line with the homepage look across the whole site.
   ============================================================ */

/* Elegant Playfair headlines, matching the homepage hero + section heads */
.hero h1 { font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-weight: 600; letter-spacing: -0.5px; line-height: 1.08; }
.hero h1 .accent { color: var(--teal); font-style: italic; }
.section-title { font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif; font-weight: 600; }

/* Hero eyebrow/badge -> homepage v2-eyebrow style (teal dot, no pill) */
.hero-badge {
  background: none; border: none; padding: 0; margin-bottom: 20px;
  color: #9dd3e8; font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.hero-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }

/* Hero gradient: add the homepage's soft teal highlight + a touch more depth */
.hero {
  background: radial-gradient(circle at 75% 22%, rgba(100,160,182,0.25) 0%, transparent 55%),
              linear-gradient(125deg, var(--navy) 0%, var(--navy-mid) 60%, var(--teal-deeper) 130%);
}

/* Glass hero card -> match the homepage card treatment */
.hero-card {
  background: rgba(255,255,255,0.07); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
}

/* Section intros that should read as centred (only those explicitly opted in) keep their own rules;
   default inner sections stay left-aligned to preserve existing layouts. */

/* The hero photo sits inside a <picture> (WebP with a JPEG fallback); make the
   wrapper fill the media box so the img's 100% width/height still resolve. */
.v2-hero-media picture { display: block; width: 100%; height: 100%; }

/* Featured services artwork: a Lucide line icon (ISC licence, see index.html) in a
   soft medallion on the gradient panel, in place of the old placeholder photos. */
.svc-card-media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 80% 18%, rgba(100,160,182,0.35) 0%, transparent 55%),
              radial-gradient(circle at 10% 100%, rgba(157,211,232,0.16) 0%, transparent 45%);
}
.svc-card-art {
  position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 14px rgba(255,255,255,0.045), 0 0 0 30px rgba(255,255,255,0.025);
  transition: transform .4s ease;
}
.svc-card-art svg { width: 50px; height: 50px; }
.svc-card:hover .svc-card-art { transform: scale(1.06); }
.svc-card-body { padding-top: 24px; }