/* ==========================================================================
   Henry Hyams — Stage 1 homepage + global header/footer
   Scoped styles layered on top of app.css / Bootstrap 4.
   ========================================================================== */

:root {
  --hh-teal-deep:  #0b7e88;   /* logo, dark sections, buttons */
  --hh-teal-dark:  #0a5a62;   /* darkest band (testimonials/footer) */
  --hh-teal-darkest: #003D42; /* logo / hamburger / Make a Payment pill */
  --hh-blue-deep:   #0E363A;  /* PDF dark blue — testimonials band */
  --hh-teal-light: #24b0b6;   /* existing accent */
  --hh-nav:        #003d42;   /* primary nav band */
  --hh-teal-pale:  #d2eaec;   /* PDF mint — "Make an Enquiry" band */
  --hh-cyan:       #1abec2;   /* bright brand cyan — section headings / tagline */
  --hh-green:      #5cb85c;   /* sticky enquiry tab */
  --hh-ink:        #2b3a3c;   /* body text on light */
  --hh-radius:     8px;
}

/* Homepage sections own their vertical rhythm — drop the default main padding. */
body.home main.py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Smooth scroll to the enquiry section from the sticky tab. */
html { scroll-behavior: smooth; }

/* ----------------------------------------------------------------------- */
/* Top bar (white): logo + contact details + Make a Payment                 */
/* ----------------------------------------------------------------------- */
/* Header + hero share a wider container so content lines up edge-to-edge. */
.hh-topbar > .container,
.hh-navbar > .container,
.hh-hero > .container {
  max-width: 1320px;
  width: 92%;
}
.hh-topbar { background: #fff; }
.hh-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
/* Nudge the logo down a touch so the gap above/below it reads as equal. */
.hh-logo img { height: 52px; width: auto; display: block; position: relative; top: 2px; }

.hh-topbar-info {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--hh-ink);
  text-align: center;
  /* Vertically centre the address line within the bar so the tel number and
     address sit on the same optical line as the Make a Payment button.
     The 2px nudge matches the logo's nudge so all three read as centred. */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 2px;
}
.hh-topbar-address { margin: 0; display: inline-flex; align-items: center; }
.hh-topbar-address .hh-highlight { color: var(--hh-teal-deep); font-weight: 500; margin-right: 0.5rem; }
.hh-topbar-address a {
  color: var(--hh-ink);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Phone icon increased by 50% (16px → 24px). */
.hh-topbar-address a img { height: 24px; width: auto; }
.hh-topbar-icons { display: none; margin: 0; }
.hh-topbar-icons a { margin-right: 1rem; display: inline-flex; align-items: center; }
.hh-topbar-icons a img { height: 20px; width: auto; }

.hh-topbar-actions { display: flex; align-items: center; gap: 0.75rem; position: relative; top: 2px; }
.hh-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--hh-teal-darkest);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.45rem 1.2rem 0.45rem 0.5rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.hh-pay-btn:hover { background: var(--hh-teal-deep); text-decoration: none; }
.hh-pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--hh-teal-darkest);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.hh-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 32px;
  height: 26px;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* Suppress the persistent blue focus ring iOS Safari leaves after a tap,
   but keep a visible outline for keyboard users. */
.hh-nav-toggle:focus { outline: none; }
.hh-nav-toggle:focus-visible {
  outline: 2px solid var(--hh-teal-darkest);
  outline-offset: 3px;
}

/* Same iOS Safari treatment for the other redesign controls: kill the sticky
   blue focus ring left after a tap, keep a visible outline for keyboard users. */
.hh-pay-btn,
.hh-btn,
.hh-dot,
.hh-enquiry-tab,
.hh-skeleton-btn {
  -webkit-tap-highlight-color: transparent;
}
.hh-pay-btn:focus,
.hh-btn:focus,
.hh-dot:focus,
.hh-enquiry-tab:focus,
.hh-skeleton-btn:focus { outline: none; }
.hh-pay-btn:focus-visible,
.hh-btn:focus-visible,
.hh-dot:focus-visible,
.hh-enquiry-tab:focus-visible,
.hh-skeleton-btn:focus-visible {
  outline: 2px solid var(--hh-teal-darkest);
  outline-offset: 3px;
}

/* Hamburger bars: the span is the middle bar; ::before/::after are the
   top and bottom bars. They morph into an X when aria-expanded="true". */
.hh-nav-toggle__bars,
.hh-nav-toggle__bars::before,
.hh-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--hh-teal-darkest);
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.hh-nav-toggle__bars        { top: 50%; transform: translateY(-50%); }
.hh-nav-toggle__bars::before { top: -9px; }
.hh-nav-toggle__bars::after  { top: 9px; }
/* Open state -> X */
.hh-nav-toggle[aria-expanded="true"] .hh-nav-toggle__bars        { background: transparent; }
.hh-nav-toggle[aria-expanded="true"] .hh-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.hh-nav-toggle[aria-expanded="true"] .hh-nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ----------------------------------------------------------------------- */
/* Primary nav band (dark teal)                                             */
/* ----------------------------------------------------------------------- */
/* min-height keeps the bar visible even if the menu returns no items. */
.hh-navbar { background: var(--hh-nav); min-height: 52px; }
.hh-primary-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.hh-primary-nav .nav-item { position: relative; }
.hh-primary-nav a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  display: block;
  padding: 0.95rem 0.25rem;
  white-space: nowrap;
}
.hh-primary-nav a:hover,
.hh-primary-nav .current-menu-item > a { color: #17afb2; }
/* Dropdown (Bootstrap markup from menu.twig) */
.hh-primary-nav .dropdown-menu {
  background: var(--hh-nav);
  border: 0;
  border-radius: 0 0 var(--hh-radius) var(--hh-radius);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  padding: 0.5rem 0;
}
.hh-primary-nav .dropdown-item {
  color: #fff;
  font-weight: 500;
  padding: 0.45rem 1.2rem;
}
.hh-primary-nav .dropdown-item:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ----------------------------------------------------------------------- */
/* Hero                                                                     */
/* ----------------------------------------------------------------------- */
.hh-hero {
  position: relative;
  /* The supplied banner is a complete composition (teal field + angled
     cityscape + people icon). Match its aspect ratio so it shows uncropped. */
  background: var(--hh-teal-deep) var(--hh-hero-desktop, url('../images/banners/Hero-Image.jpg')) center center / cover no-repeat;
  aspect-ratio: 1920 / 575;
  color: #fff;
  display: flex;
  align-items: center;
}
.hh-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.hh-hero h1 {
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 10px rgba(7,40,44,0.35);
}
.hh-hero .hh-hero-tagline {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #1ABEC2;
  margin: 0;
  text-shadow: 0 1px 8px rgba(7,40,44,0.35);
}
/* Inner-page breadcrumbs, overlaid near the bottom of the hero but lifted off
   the bottom edge so they don't crowd it. */
.hh-hero-breadcrumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.75rem;
  z-index: 1;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
}
.hh-hero-breadcrumbs a { color: #fff; text-decoration: none; }
.hh-hero-breadcrumbs a:hover { color: #17afb2; }

/* Sticky enquiry tab */
.hh-enquiry-tab {
  display: none;   /* hidden on all breakpoints */
  position: fixed;
  right: 0;
  top: 62%;
  z-index: 1030;
  background: #08AA4E;            /* match ReviewSolicitors tab green */
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 1.5rem 1.25rem;        /* chunkier, like the reviews tab */
  border-radius: 0 10px 10px 0;   /* rotate(180deg) flips these to the visible left edge */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
}
.hh-enquiry-tab:hover { background: #0abf58; }

/* ----------------------------------------------------------------------- */
/* Welcome                                                                  */
/* ----------------------------------------------------------------------- */
.hh-welcome {
  text-align: center;
  padding: 3rem 0;        /* match the white space below the text to the gap above the heading */
}
.hh-welcome h2 {
  color: var(--hh-teal-deep);
  font-weight: 500;
  font-size: 2.4rem;        /* +20% on the Bootstrap 2rem h2 */
  margin-bottom: 3rem;      /* match the 3rem gap above the header */
}
.hh-welcome .hh-welcome-text {
  max-width: 820px;
  margin: 0 auto;
  color: var(--hh-ink);
  line-height: 1.5;         /* slightly tighter */
}
/* Links in the intro text inherit the body ink colour — no teal, no hover colour. */
.hh-welcome .hh-welcome-text a,
.hh-welcome .hh-welcome-text a:hover,
.hh-welcome .hh-welcome-text a:focus {
  color: inherit;
}

/* ----------------------------------------------------------------------- */
/* Service cards                                                            */
/* ----------------------------------------------------------------------- */
.hh-services { padding: 2rem 0 3.5rem; }
/* Gaps between the cards increased ~50% (gutters 30px → 45px, row gap to match). */
.hh-services .row { margin-left: -22.5px; margin-right: -22.5px; }
.hh-services .row > [class*="col-"] { padding-left: 22.5px; padding-right: 22.5px; }
.hh-services .row > .mb-4 { margin-bottom: 2.25rem !important; }
.hh-card {
  background: #fff;
  border-radius: var(--hh-radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Card header: photo with a teal overlay that reveals the image through a
   diagonal cut in the top-right corner; the title sits over the teal. */
.hh-card-head {
  position: relative;
  aspect-ratio: 16 / 6;     /* image height reduced ~25% (was 16/8) */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Teal panel over the LEFT of the photo; the diagonal edge starts at the top
   (~58%) and angles down to the left (~45%), leaving the photo clear on the
   right. A faint photo shows through the teal. */
.hh-card-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #027077;
  opacity: 0.9;
  clip-path: polygon(0 0, 72% 0, 48% 100%, 0 100%);
}
.hh-card-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 500;
  padding: 0 1.1rem;
  margin: 0;
  max-width: 60%;            /* keep the title within the teal, before the angle */
  font-size: 1.5rem;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(7,40,44,0.45);
}
.hh-card-body {
  padding: 1rem;
  color: var(--hh-ink);
  font-size: 0.92rem;
  flex: 1 1 auto;
}
.hh-card-foot { padding: 0 1rem 1.1rem; }
.hh-btn {
  display: inline-block;
  background: var(--hh-teal-deep);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hh-btn:hover { background: var(--hh-teal-dark); text-decoration: none; }
.hh-btn--ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff !important;
}
.hh-btn--ghost:hover { background: rgba(255,255,255,0.15); }
/* Solid white rounded pill (testimonials "Read all Testimonials"). */
.hh-btn--white {
  background: #fff;
  color: var(--hh-blue-deep) !important;
  border-radius: 999px;
  padding: 0.7rem 2rem;
}
.hh-btn--white:hover { background: #e9f3f3; color: #17afb2 !important; text-decoration: none; }
/* Dark-teal rounded pill used on the service cards. */
.hh-btn--pill {
  background: var(--hh-teal-darkest);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
}
.hh-btn--pill:hover { background: var(--hh-teal-deep); }

/* ----------------------------------------------------------------------- */
/* Testimonials                                                             */
/* ----------------------------------------------------------------------- */
.hh-testimonials {
  background: var(--hh-blue-deep);
  color: #fff;
  text-align: center;
  padding: 3.5rem 0;
}
.hh-testimonials h2 { font-weight: 500; font-size: 2.4rem; margin-bottom: 1.5rem; }
/* All slides share a single grid cell so they stack for the crossfade while the
   track still grows to the TALLEST slide — long testimonials no longer overflow
   onto the dots / into the enquiry section below (was a fixed 220px min-height
   with absolutely-positioned slides). */
.hh-testimonial-track {
  position: relative;
  display: grid;
}
/* Slides are stacked so the outgoing one fades out while the incoming one
   fades in (true crossfade). */
.hh-testimonial {
  grid-area: 1 / 1;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.hh-testimonial.is-visible { opacity: 1; pointer-events: auto; }
.hh-testimonial p { line-height: 1.7; font-size: 1.25rem; }  /* white text +25% */
.hh-testimonial .hh-testimonial-attr { font-weight: 700; margin-top: 1rem; }
.hh-testimonial-dots { margin: 1.5rem 0; }
.hh-testimonials .hh-btn--white { margin-top: 2.5rem; }
.hh-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--hh-teal-light);
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hh-dot.is-active { background: var(--hh-teal-light); }

/* ----------------------------------------------------------------------- */
/* Make an Enquiry                                                          */
/* ----------------------------------------------------------------------- */
.hh-enquiry {
  background: var(--hh-teal-pale);
  padding: 3.5rem 0;
}
.hh-enquiry h2 {
  text-align: center;
  color: var(--hh-cyan);
  font-weight: 500;
  font-size: 2.4rem;        /* +20% */
  margin-bottom: 3.5rem;    /* match the section padding above the title */
}
.hh-enquiry input[type="text"],
.hh-enquiry input[type="email"],
.hh-enquiry input[type="tel"],
.hh-enquiry select,
.hh-enquiry textarea,
.hh-enquiry .wpcf7-form-control:not([type="submit"]):not(textarea) {
  width: 100%;
  border: 1px solid #e1e8e8;
  border-radius: 4px;
  padding: 0.85rem;
  margin-bottom: 1rem;
  background: #f3f3f3;
  color: var(--hh-ink);
}
.hh-enquiry textarea { min-height: 140px; }
/* The "General Enquiry" strip is the legal-area <select>; match the text fields' height. */
.hh-enquiry select,
.hh-enquiry #legal-area-select {
  height: calc(0.85rem * 2 + 1.5em + 2px);
  line-height: 1.5;
  /* Custom dropdown arrow so we can inset it from the right edge (the native
     arrow sat tight against the field border). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555555' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 2.5rem;
}
.hh-enquiry .hh-btn,
.hh-enquiry input[type="submit"],
.hh-enquiry button[type="submit"] {
  display: block;
  width: fit-content !important;   /* override bootstrap .w-100 on the CF7 submit */
  margin: 0.6rem auto 0;
  background: var(--hh-teal-darkest);
  color: #fff;
  border: 0;
  border-radius: 999px;
  /* <input type="submit"> doesn't inherit the body font, so without these it
     renders at the browser default size — match the "Read all Testimonials" pill. */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;           /* match the testimonials pill (overrides .btn's 1.2rem) so heights match */
  padding: 0.7rem 2rem;       /* match the other pill buttons (Read all / Make a Payment) */
  cursor: pointer;
  transition: background 0.2s ease;
}
.hh-enquiry input[type="submit"]:hover,
.hh-enquiry button[type="submit"]:hover { background: var(--hh-teal-deep); }

/* ----------------------------------------------------------------------- */
/* Accreditations strip                                                     */
/* ----------------------------------------------------------------------- */
.hh-accreditations {
  background: #fff;
  padding: 2.5rem 0;
}
/* Wider than the default container so the badges spread across the page. */
.hh-accreditations > .container {
  max-width: 1320px;
  width: 92%;
}
.hh-accreditations .hh-accred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.hh-accreditations img { max-height: 150px; width: auto; }
/* 6th logo: SRA digital badge (Yoshki iframe) sized to sit with the other logos. */
.hh-accreditations .hh-accred-badge {
  line-height: 0;
  align-self: center;   /* keep the badge on the row's centre line with the logos */
}
/* Height matches the badge's true rendered ratio (275×162 → 200×118) so it has no
   internal whitespace and the row's align-items:center lines it up with the logos.
   display:block drops the inline baseline gap that pushed it off-centre. */
.hh-accreditations .hh-accred-badge iframe { display: block; width: 200px; height: 118px; border: 0; }

/* ----------------------------------------------------------------------- */
/* Inner-page blocks (supporting content)                                   */
/* ----------------------------------------------------------------------- */
/* Page title (e.g. "About Us") matches the homepage section headings
   (e.g. "Make an Enquiry"): same size and weight. */
main .hh-page-title {
  font-weight: 500;
  font-size: 2.4rem;
}
/* Gap between the sub-services box and the "Meet the Team" box below it. */
main .hh-subpages-block { margin-bottom: 2.5rem; }
/* Breathing room so the last line of links doesn't sit on the box's bottom edge. */
main .hh-subpages-block,
main .hh-meet-the-team { padding-bottom: 40px; }
/* "Meet the Team" box at the bottom of inner pages: new background image,
   white type, and a pill "View Profiles" button matching the homepage cards'
   "Find out more" button. Drop the new image at images/boxes/meet-the-team.jpg.
   The dark overlay keeps the white text legible — adjust/remove as needed. */
main .hh-meet-the-team {
  background:
    linear-gradient(rgba(0, 61, 66, 0.2), rgba(0, 61, 66, 0.3)),
    url(../images/banners/Meet-the-team.jpg) center / cover no-repeat;
}
main .hh-meet-the-team,
main .hh-meet-the-team h2,
main .hh-meet-the-team p,
main .hh-meet-the-team a { color: #fff; }
main .hh-meet-the-team .hh-skeleton-btn {
  display: inline-block;
  background: #2abec1;
  color: #fff;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  transition: background 0.2s ease;
}
main .hh-meet-the-team .hh-skeleton-btn:hover {
  background: var(--hh-teal-deep);
  color: #fff;
  text-decoration: none;
}

/* Our Team: breathing room between the intro copy and the grey team grid. */
main .hh-grey-block-container { margin-top: 2.5rem; }

/* ----------------------------------------------------------------------- */
/* Footer additions                                                         */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* Footer                                                                   */
/* ----------------------------------------------------------------------- */
footer {
  background: #1a6b6f;
  color: #fff;
}
.hh-footer-inner {
  max-width: 1320px;
  width: 92%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.hh-footer-inner > .row { align-items: center; }
.hh-footer-links h5 {
  color: var(--hh-cyan);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.hh-footer-links ul { list-style: none; margin: 0; padding: 0; }
.hh-footer-links li { margin-bottom: 0; line-height: 1.4; }
.hh-footer-links a { color: #fff; text-decoration: none; }
.hh-footer-links a:hover { color: var(--hh-cyan); }

.hh-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-footer-hicon { height: 124px; width: auto; }

/* Social media circles */
.hh-social-icons { margin: 0 0 1.3rem; }
.hh-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  margin-right: 0.6rem;
  transition: opacity 0.2s ease;
}
.hh-social-icons a:hover { opacity: 0.85; }
.hh-social-icons img { width: 18px; height: 18px; }

.hh-footer-right .hh-copyright {
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 0.9rem;
}
.hh-footer-right .hh-site-by a {
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}
.hh-footer-right .hh-site-by a:hover { color: #17afb2; }

/* ----------------------------------------------------------------------- */
/* Responsive                                                               */
/* ----------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Mobile header — two rows, matching the design:
       Row 1:  contact icons (left)  |  Make a Payment (right)
       Row 2:  HenryHyams logo (left) |  hamburger (right)
     Built with flex-wrap + a forced break so each row sizes independently
     (a shared grid column would let the wide logo / pay button collide). */
  .hh-topbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.9rem;
    column-gap: 0.75rem;
  }
  /* Expose the nested wrappers so their children become direct flex items. */
  .hh-topbar-info,
  .hh-topbar-actions { display: contents; }

  .hh-topbar-address { display: none; }
  .hh-topbar-icons { display: flex; order: 1; margin: 0; }
  /* Contact (phone/@) icons enlarged 60% on mobile (20px → 32px). */
  .hh-topbar-icons a img { height: 32px; }
  .hh-pay-btn      { order: 2; margin-left: auto; }
  .hh-logo         { order: 4; }
  .hh-logo img     { height: 46px; }
  /* Hamburger menu icon enlarged 60% on mobile (1.7rem → 2.72rem). */
  .hh-nav-toggle   { display: block; order: 5; margin-left: auto; font-size: 2.72rem; }

  /* Forced row break that doubles as the full-bleed divider line. It takes a
     whole flex line (basis 100vw) so icons+pay stay above, logo+toggle below. */
  .hh-topbar .container::before {
    content: "";
    order: 3;
    width: 100vw;
    flex: 0 0 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background: #e5e5e6;
  }

  /* The teal band collapses to zero height while the menu is hidden — the
     desktop min-height safeguard must not force an empty bar on mobile. */
  .hh-navbar { min-height: 0; }
  .hh-primary-nav { display: none; }
  .hh-primary-nav.is-open {
    display: block;
    background: var(--hh-nav);
    padding: 0.5rem 0;
  }
  .hh-primary-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
  /* Line spacing tightened 30% (0.75rem → 0.525rem vertical) on menu + dropdown. */
  .hh-primary-nav.is-open a { padding: 0.525rem 1rem; }
  /* Top-level menu text a touch bigger; keep the dropdown items at base size so
     the hierarchy still reads. */
  .hh-primary-nav.is-open .nav-link { font-size: 1.2rem; }
  .hh-primary-nav.is-open .dropdown-item { font-size: 1rem; }
  /* Force the submenu to flow inline (push the menu taller) instead of floating.
     !important overrides the inline position/transform Popper.js applies on tap. */
  .hh-primary-nav.is-open .dropdown-menu {
    position: static !important;
    transform: none !important;
    float: none;
    width: 100%;
    box-shadow: none;
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* Mobile hero (per design): cityscape + people-icon image on top, with an
     inset white card holding the headline that POPS UP and overlaps the bottom
     of the image (teal / cityscape shows on either side of the card). */
  .hh-hero {
    display: block;
    background: none;
    aspect-ratio: auto;
    color: var(--hh-teal-darkest);
    text-align: center;
    padding-bottom: 0;
    position: relative;
  }
  /* Tighten the gap so the welcome section sits up close under the hero.
     Gaps above and below the "Welcome to Henry Hyams" heading reduced ~30% on mobile. */
  .hh-welcome { padding-top: 0.35rem; }
  .hh-welcome h2 { margin-bottom: 2.1rem; }   /* gap below heading: 3rem → 2.1rem (-30%) */
  /* Mobile hero is a stacked card; the overlaid breadcrumb would collide. */
  .hh-hero-breadcrumbs { display: none; }
  .hh-hero::before {
    content: "";
    display: block;
    background: var(--hh-teal-deep) var(--hh-hero-mobile, url('../images/hero/hero-mobile.jpg')) center center / cover no-repeat;
    aspect-ratio: 876 / 716;
  }
  .hh-hero > .container { width: 100%; }
  .hh-hero-inner {
    position: relative;
    z-index: 1;
    background: #fff;
    max-width: 86%;
    /* Overlap reduced (-5rem → -3rem) so more of the H/people icon shows above
       the card, and less white sits at the top of the card. */
    margin: -3rem auto 0;
    padding: 1rem 1.1rem 0.25rem;
  }
  .hh-hero h1 {
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--hh-teal-darkest);
    text-shadow: none;
  }
  .hh-hero .hh-hero-tagline {
    color: var(--hh-teal-light);
    text-shadow: none;
    margin-top: 0.25rem;        /* pull "Since 1930" up closer — gap halved (0.5rem → 0.25rem) */
  }
  /* Thin divider under the tagline, matching the design. */
  .hh-hero-inner::after {
    content: "";
    display: block;
    width: 60%;
    max-width: 280px;
    height: 1px;
    margin: 1.25rem auto 0;
    background: #d9dede;
  }

  /* Accreditation logos: lock to 3 columns with tighter gaps so the strip isn't
     a long single-file run on mobile. */
  .hh-accreditations .hh-accred-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    align-items: center;
    justify-items: center;
  }
  .hh-accreditations img {
    max-height: none;
    max-width: 100%;
    height: auto;
  }
  /* SRA badge iframe (fixed 200×118) scales to its column while keeping ratio. */
  .hh-accreditations .hh-accred-badge { width: 100%; }
  .hh-accreditations .hh-accred-badge iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 118;
  }

  /* Footer: lift the H logo up beside Quick links (top-right) and drop the
     regulatory text full-width beneath, which pushes the bottom info up. */
  .hh-footer-inner > .row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "links logo"
      "right right";
    align-items: center;
    column-gap: 1rem;
  }
  .hh-footer-links { grid-area: links; }
  .hh-footer-logo  { grid-area: logo; }
  .hh-footer-right { grid-area: right; margin-top: 1.5rem; }
  .hh-footer-hicon { height: 96px; }
}

/* ----------------------------------------------------------------------- */
/* Mobile: dock the enquiry tab to the bottom of the screen as a button     */
/* ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hh-enquiry-tab {
    top: auto;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    writing-mode: horizontal-tb;
    transform: none;
    text-align: center;
    font-size: 1rem;
    padding: 0.95rem 0.5rem;
    border-radius: 8px;
    /* 10px white, semi-transparent "tray" filling the margin around the button */
    box-shadow: 0 0 0 10px rgba(255,255,255,0.6);
  }
}

/* ----------------------------------------------------------------------- */
/* Single team member: match the team grid card (pills + colours)          */
/* ----------------------------------------------------------------------- */
main .hh-team-member-container h2 { color: #24b0b6; }       /* name -> grid teal */
main .hh-team-member-container h3.hh-position {
  color: #212529;                                           /* position -> grid dark */
  font-size: 16px;
  font-weight: 500;
}
.hh-team-member-container .hh-tm-pills {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;            /* page layout is centred */
}
.hh-team-member-container .hh-tm-pill {
  background-color: #2c7a7e;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
}