/* ==========================================================================
   style.css — Manoharan Income Tax & GST Consultant
   ---------------------------------------------------------------------------
   Single consolidated stylesheet for the site. Rules are kept in their original
   cascade order so the rendered design is unchanged:
     1. base     — design tokens, global elements and shared components
     2. header   — top header strip and primary navigation
     3. sections — hero, about, audience, services, contact and footer
     4. pages    — inner-page layouts kept from earlier versions
   Bootstrap 5.3.8 is loaded from the CDN before this file.
   ========================================================================== */

/* ==========================================================================
   base.css — design tokens, global elements and shared components
   ---------------------------------------------------------------------------
   Palette (client brand): navy blue #0B1F3A . gold #D4AF37 . white #FFFFFF
                           white #FFFFFF · silver #D4AF37 · light grey #F8F5EA
   Bootstrap 5 CSS is loaded from the CDN before this file, so these
   rules layer the brand theme on top of it.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand palette (three primary colors only) */
  --navy-blue: #0b1f3a;
  --white: #ffffff;
  --gold: #d4af37;

  /* Derived shades used for hover, accents and subtle surfaces */
  --navy-dark: #071528;
  --navy-light: #1a3a63;
  --gold-dark: #c49a24;
  --gold-light: #f3e9c8;
  --gold-lighter: #f8f5ea;

  /* Legacy aliases (kept for compatibility, mapped to the new palette) */
  --royal-blue: var(--gold);          /* buttons, icons, accents */
  --royal-blue-600: var(--gold-dark);
  --deep-blue: var(--navy-blue);      /* headings, dark text, dark surfaces */
  --silver: var(--gold);
  --light-grey: var(--gold-lighter);
  --soft-blue: var(--gold-lighter);
  --royal-tint: var(--gold-light);
  --royal-tint-strong: #e2d3a0;
  --navy-blue-legacy: var(--navy-blue);

  /* Supporting neutrals derived from navy */
  --ink: var(--navy-blue); /* primary text */
  --muted: #4a5a72; /* secondary text */
  --heading: var(--navy-blue); /* headings and bold text */
  --line: #e2d3a0; /* hairline borders */
  --line-strong: #d4c08a;

  /* Typography */
  --font-sans: "Aptos", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: "Aptos Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-sm: 0 4px 14px rgba(11, 31, 58, 0.07);
  --shadow-md: 0 14px 34px rgba(11, 31, 58, 0.12);
  --shadow-lg: 0 26px 60px rgba(11, 31, 58, 0.16);

  /* Feed the brand into Bootstrap's own variables */
  --bs-primary: #0b1f3a;
  --bs-primary-rgb: 11, 31, 58;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: #0b1f3a;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-link-color: #0b1f3a;
  --bs-link-color-rgb: 11, 31, 58;
  --bs-link-hover-color: #b8962e;
  --bs-link-hover-color-rgb: 184, 150, 46;
  --bs-border-color: #e2d3a0;
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 16px;
  --bs-focus-ring-color: rgba(212, 175, 55, 0.35);
}

/* ==========================================================================
   2. GLOBAL ELEMENTS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keeps in-page anchors clear of the sticky navigation bar */
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Full-width elements stay edge-to-edge via their own 100% width; no
   negative margins, which caused horizontal overflow / off-center zoom. */
.site-header,
.site-nav,
.hero-new,
.audience-band,
.service-strip-section,
.site-footer {
  margin-left: 0;
  margin-right: 0;
}

address {
  font-style: normal;
  margin-bottom: 0;
}

/* ---- Headings -------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

h4 {
  font-size: 1rem;
}

/* Bootstrap's .h3 helper (used on some sub-headings) */
.h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
}

/* ---- Bold text ------------------------------------------------------- */

/*
 * Bold text takes the heading colour wherever it appears — in prose, cards,
 * checklists, disclaimers and the contact panels. Links, buttons, icons and
 * the brand accents keep their own colours.
 */
b,
strong {
  color: var(--heading);
}

/* ---- Links ----------------------------------------------------------- */

/*
 * Links are never underlined — not in the normal state and not on hover,
 * focus, active or visited. Bootstrap 5's reboot underlines every link
 * (`a { text-decoration: underline }`) and is imported ahead of this file,
 * so this single rule neutralises it site-wide. `.btn-link` is included
 * because a button that looks like a link should behave like the rest of
 * the site's links. Hover feedback is colour / background based, and the
 * keyboard focus ring further down is deliberately left untouched.
 */
a,
a:visited,
a:hover,
a:focus,
a:focus-visible,
a:active,
.btn-link {
  text-decoration: none;
}

a {
  color: var(--royal-blue);
}

a:hover {
  color: var(--royal-blue-600);
}

/* Keyboard focus is always clearly visible */
:focus-visible {
  outline: 3px solid var(--royal-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .back-to-top {
    transition: none !important;
  }

  /* Keep the white outline, but never pulse it for reduced-motion users. */
  .back-to-top::after {
    animation: none !important;
    opacity: 1;
  }
}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* Hidden SVG sprite (its <symbol>s are still referenceable via <use>) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000; /* above the navbar and dropdowns */
  padding: 12px 18px;
  background-color: var(--deep-blue);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-250%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
}

/* Small rounded label used for eyebrows, chips and status tags */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--royal-tint);
  color: var(--royal-blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* Shared button geometry and alignment */
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:focus-visible {
  outline: 3px solid var(--royal-blue);
  outline-offset: 2px;
}

.btn-lg {
  min-height: 44px;
  padding: 0 1.15rem;
  font-size: 0.9rem;
  border-radius: 8px;
}

.btn-icon {
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
}

/* Gold primary actions retain their original brand treatment. */
.btn-brand,
.btn-whatsapp {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--navy-blue);
}

.btn-brand:hover,
.btn-brand:focus-visible,
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy-blue);
}

/* Secondary (outline) - Contact Us and Ask a Question buttons */
.btn-outline-brand {
  background-color: var(--white);
  border-color: var(--navy-blue);
  color: var(--navy-blue);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
  background-color: var(--navy-blue);
  border-color: var(--navy-blue);
  color: var(--white);
}

/* WhatsApp enquiry uses the same gold primary treatment. */
.btn-whatsapp {
  white-space: nowrap;
}

/* Buttons used on the dark CTA band */
.btn-light {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--navy-blue);
}

.btn-light:hover,
.btn-light:focus-visible {
  background-color: var(--light-grey);
  border-color: var(--light-grey);
  color: var(--navy-blue);
}

.btn-outline-light {
  background-color: var(--white);
  border-color: var(--navy-blue);
  color: var(--navy-blue);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background-color: var(--navy-blue);
  border-color: var(--navy-blue);
  color: var(--white);
}

/* ==========================================================================
   4b. SECTION SCAFFOLDING
   ========================================================================== */

/* Roomy row gutters (g-lg-5 = 3rem) need matching container padding, otherwise
   Bootstrap's negative row margins push content past the viewport edge and
   create a horizontal scrollbar right at the lg breakpoint. */
.container,
.container-fluid {
  padding-inline: clamp(0.75rem, 2vw, 1rem);
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-inline: 0.9rem;
  }
}

.section {
  padding-block: clamp(20px, 3.5vw, 36px);
}

.section-alt {
  background-color: #EAF0F8;
}

/* About, Services and Contact sections share the same very light navy background */
#about,
#services,
#contact {
  background-color: #EAF0F8;
}

.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(18px, 3vw, 28px);
  text-align: center;
}

.section-eyebrow {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--royal-blue);
}

.section-title {
  margin-bottom: 14px;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--heading);
}

.section-lead {
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--muted);
}

/* ==========================================================================
   5. PROSE (long-form text blocks)
   ========================================================================== */

.prose {
  color: var(--ink);
}

.prose > *:last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin-top: 0;
  margin-bottom: 0.6em;
}

.prose h3 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.prose h2 + h3,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin-bottom: 1.05em;
  color: var(--ink);
}

.prose a {
  color: var(--royal-blue);
  font-weight: 600;
  border-radius: 3px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.prose a:hover,
.prose a:focus-visible {
  color: var(--deep-blue);
  background-color: var(--royal-tint-strong);
}

.prose ul,
.prose ol {
  margin-bottom: 1.1em;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.5em;
}

/* ==========================================================================
   6. ICON LISTS (checklists and link lists)
   ========================================================================== */

/* Green-free tick list: the check icon is drawn in the brand blue */
.tick-list,
.doc-list,
.side-list,
.related-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tick-list__item,
.tick-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.tick-list__icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--royal-blue);
}

.tick-list--muted .tick-list__icon {
  color: var(--silver);
}

/* ==========================================================================
   7. FORMS
   ========================================================================== */

.form-label {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--heading);
}

.form-control,
.form-select {
  padding: 0.62rem 0.85rem;
  border: 1.5px solid var(--silver);
  border-radius: 8px;
  color: var(--ink);
  background-color: var(--white);
}

.form-control::placeholder {
  color: #7A8AA3;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--royal-blue);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--light-grey);
}

.form-check-input:checked {
  background-color: var(--royal-blue);
  border-color: var(--royal-blue);
}

.invalid-feedback {
  font-size: 0.875rem;
}

.form-demo-note {
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  color: var(--muted);
  background-color: var(--royal-tint);
  border: 1px solid var(--royal-tint-strong);
  border-left: 4px solid var(--royal-blue);
  border-radius: var(--radius-sm);
}

.form-required-note {
  margin-left: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

.form-feedback {
  margin-bottom: 18px;
}

/* ==========================================================================
   8. ACCORDION (FAQ)
   ========================================================================== */

.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-active-color: var(--heading);
  --bs-accordion-active-bg: var(--royal-tint);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  --bs-accordion-btn-padding-y: 1.1rem;
}

.accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: var(--white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.accordion-button {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background-color: var(--deep-blue);
  text-align: left;
}

.accordion-button:not(.collapsed) {
  color: var(--white);
  background-color: var(--deep-blue);
  box-shadow: none;
}

.accordion-button:focus {
  z-index: 3;
}

/* Custom chevron so the control matches the brand */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  padding-top: 0.5rem;
  color: var(--deep-blue);
  background-color: #EAF0F8;
}

/* ==========================================================================
   9. BREADCRUMB
   ========================================================================== */

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--silver);
  --bs-breadcrumb-item-active-color: var(--muted);
  margin-bottom: 18px;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--royal-blue);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--deep-blue);
}

.breadcrumb-item.active {
  color: var(--muted);
}

/* Brand variant (used on every inner page) */
.breadcrumb--brand .breadcrumb-item + .breadcrumb-item::before {
  color: var(--silver);
}

/* ==========================================================================
   10. CONTENT NOTE (educational disclaimer panels)
   ========================================================================== */

.content-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  margin-bottom: 34px;
  background-color: var(--light-grey);
  border: 1px solid var(--line);
  border-left: 4px solid var(--royal-blue);
  border-radius: var(--radius);
}

.content-note__icon {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--royal-blue);
}

.content-note__body strong {
  display: block;
  margin-bottom: 4px;
}

.content-note__body p {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   11. PHOTO PLACEHOLDER
   Replace the whole <figure> with a real <img> when a photograph is ready.
   ========================================================================== */

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 340px;
  margin: 0;
  padding: 26px;
  text-align: center;
  background-color: var(--light-grey);
  border: 2px dashed var(--silver);
  border-radius: var(--radius-lg);
}

.photo-placeholder--short {
  min-height: 280px;
}

.section-alt .photo-placeholder,
.photo-placeholder--on-grey {
  background-color: var(--white);
}

.photo-placeholder__icon {
  width: 52px;
  height: 52px;
  color: var(--silver);
}

.photo-placeholder__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.photo-placeholder__caption strong {
  font-size: 1rem;
}

.photo-placeholder code {
  font-size: 0.85em;
}

/* ==========================================================================
   12. BACK TO TOP
   ---------------------------------------------------------------------------
   Floating "back to top" button. It starts with `d-none` and only appears
   once the page has been scrolled a little, so the bottom of every page is
   never cluttered.
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040; /* above page content, below the skip link (2000) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--deep-blue);
  background-color: var(--royal-blue);
  border: 2px solid var(--deep-blue);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--royal-blue-600);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--royal-blue);
  outline-offset: 3px;
}

/* --- White outline --------------------------------------------------------
   A clean white ring is painted *outside* the blue circle with a ::after
   pseudo-element, so only the outline ever animates - the Royal Blue
   background and the white arrow never move or change. The ring breathes
   gently (opacity + a soft royal-blue glow) to attract attention without
   being distracting, and a faint blue halo keeps the white ring readable
   over the site's white and light-grey backgrounds.
   ------------------------------------------------------------------------ */

.back-to-top::after {
  content: "";
  position: absolute;
  inset: -3px; /* 2px ring + the gap sits flush outside the button border */
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.32),
    0 0 14px rgba(212, 175, 55, 0.26);
  pointer-events: none; /* clicks must always reach the button itself */
  transition: border-width 0.18s ease, box-shadow 0.18s ease;
  animation: back-to-top-ring 2.6s ease-in-out infinite;
}

@keyframes back-to-top-ring {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

/* Hover / keyboard focus: the blue circle and white arrow stay exactly as
   they are - only the white outline gets slightly stronger. */
.back-to-top:hover::after,
.back-to-top:focus-visible::after {
  border-width: 3px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.5),
    0 0 18px rgba(212, 175, 55, 0.45);
}

.back-to-top .icon {
  width: 20px;
  height: 20px;
}

.back-to-top .btn-icon {
  width: 20px;
  height: 20px;
}

.back-to-top:hover .btn-icon {
  transform: none;
}

@media (min-width: 992px) {
  .back-to-top {
    right: 28px;
    bottom: 28px;
  }
}

/* ==========================================================================
   header.css — site header and primary navigation
   ---------------------------------------------------------------------------
   Two rows, both in index.html:
     1. .header-top  — brand (left) + horizontal contact details (right)
     2. .site-nav    — royal-blue navigation bar (sticky), centred menu
   Bootstrap breakpoints: lg = 992px, xl = 1200px, xxl = 1400px.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 1030; /* above page content, below the skip link */
  background-color: var(--white);
}

/* ==========================================================================
   1. BRAND ROW — brand + horizontal contact details
   ---------------------------------------------------------------------------
   One row above the navigation bar, in index.html:
     left  — brand (mark + name + role)
     right — contact details: location · phone · email · an "Enquire Now" pill
   The row is vertically centred and the contact details wrap onto a second
   line on narrower screens instead of overflowing. Below lg the same details
   are also carried by the compact icons and the collapsed menu.
   ========================================================================== */

.header-top {
  background-color: #ffffff;
  border-bottom: 1px solid #e7ebf1;
}

.header-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-block: 10px;
}

/* ---- Contact details (right side) ------------------------------------ */

/* Kept close together in one aligned row; they grow into the space left by
   the brand, sit right-aligned from 740px up, and centre themselves once they
   wrap onto their own line under the brand. */
.header-contacts {
  display: flex;
  /* Basis 0 (not "auto") so the box takes the space left by the brand on the
     same row instead of reserving its full max-content width, which would
     push it onto a line of its own. */
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  min-width: 0;
}

/* Compact horizontal variant of .contact-item: a small icon immediately
   before its value, with no stacked label. */
.header-contacts .contact-item {
  align-items: center;
  gap: 8px;
}

.header-contacts .contact-item__icon {
  width: 18px;
  height: 18px;
  margin-top: 0;
}

.header-contacts .contact-item__value {
  font-size: 0.92rem;
  color: var(--deep-blue);
}

/* ---- Enquire Now button ---------------------------------------------- */

.btn-enquire {
  white-space: nowrap;
}

/* Right-aligned beside the brand once there is room for a side-by-side row.
   (These refinements must follow the base rules above so they win the cascade
   at the same specificity.) */
@media (min-width: 740px) {
  .header-contacts {
    justify-content: flex-end;
  }
}

/* Tablet band: the brand leaves too little room for four items on the same
   line, so the contacts drop to their own full-width line under the brand —
   tidy and left-aligned rather than wrapped into a narrow column. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .header-contacts {
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 10px 18px;
  }
}

/* Between md and lg the row is tight: a slightly smaller gap, text and button
   keep all four contact items on a single line beside the brand. */
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header-contacts {
    gap: 8px 12px;
  }

  .header-contacts .contact-item {
    gap: 6px;
  }

  .header-contacts .contact-item__value {
    font-size: 0.85rem;
  }

}

/* Between md and lg the brand is tightened (tagline hidden, smaller name) so
   the contact details stay on the same row as the brand instead of wrapping
   under it. The tagline returns on lg and wider, where there is room for it. */
@media (max-width: 1199.98px) {
  .header-top__inner .brand__tagline {
    display: none;
  }

  .header-top__inner .brand__name {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   1b. BRAND ROW — narrow screens
   ---------------------------------------------------------------------------
   The brand text may shrink (its lines ellipsis) so the contact details can
   stay next to it and wrap underneath rather than being pushed out of the row.
   ========================================================================== */

/* Let the brand shrink instead of pushing the contact details out of the row */
.header-top__inner > .brand,
.header-top__inner .brand__text {
  min-width: 0;
}

.header-top__inner .brand__name,
.header-top__inner .brand__role,
.header-top__inner .brand__tagline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow screens: tighten the strip so the brand and contact details fit */
@media (max-width: 575.98px) {
  .header-top__inner {
    gap: 12px;
  }

  .brand {
    gap: 10px;
  }

  .brand__mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.32rem;
  }

  .header-contacts {
    gap: 10px 16px;
    justify-content: flex-start;
    /* Take a full line of its own under the brand: with a 0 flex basis the
       box would otherwise shrink to almost nothing and its items would spill
       out of the viewport. */
    flex: 1 1 100%;
  }

  /* The email is the longest item: let it shrink and break onto a second line
     instead of overflowing the viewport on the narrowest phones. */
  .header-contacts .contact-item {
    max-width: 100%;
    min-width: 0;
  }

  .header-contacts .contact-item__value {
    font-size: 0.86rem;
    overflow-wrap: anywhere;
  }

  /* The Enquire Now pill is wider than the phone width once the brand is
     beside it; give it its own full-width line so nothing overflows. */
  .btn-enquire {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Ensure the brand keeps its place and lets the contact details use the rest
   of the row, so the two sit side by side once there is room (740px+). */
.header-top__inner > .brand {
  flex: 0 0 auto;
}

/* ---- Brand ----------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand__mark {
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--deep-blue);
}

.brand__role {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--royal-blue);
}

.brand__divider {
  width: 100%;
  margin: 4px 0;
  height: 2px;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  background: #0B1F3A !important;
  background-color: #0B1F3A !important;
  color: #0B1F3A !important;
  opacity: 1 !important;
}

.brand__divider:hover,
.brand__divider:focus,
.brand__divider:active {
  border: none !important;
  box-shadow: none !important;
  background: #0B1F3A !important;
  background-color: #0B1F3A !important;
  color: #0B1F3A !important;
  opacity: 1 !important;
}

.brand__tagline {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--deep-blue);
}

/* ---- Contact details ------------------------------------------------- */

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-item__icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--royal-blue);
}

.contact-item__body {
  display: flex;
  flex-direction: column;
}

.contact-item__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-item__value {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

a.contact-item__value:hover,
a.contact-item__value:focus-visible {
  color: var(--royal-blue);
}

/* ==========================================================================
   2. NAVIGATION BAR
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-block: 0.35rem;
  background-color: var(--deep-blue);
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.14);
}

.site-nav .navbar-nav {
  gap: 2px;
}

.site-nav .nav-link {
  position: relative;
  padding: 0.72rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background-color: transparent;
  border: 0;
  border-radius: 9px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: var(--royal-blue);
  background-color: rgba(255, 255, 255, 0.14);
}

.site-nav .nav-link.active {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.2);
}

.site-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0.32rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--royal-blue);
}

/* ---- Guarding against Bootstrap's own navbar rules -------------------- */

/*
 * Bootstrap declares these with a HIGHER specificity than `.site-nav .nav-link`
 * above, which is why they had to be counter-acted here:
 *
 *   1. `.navbar-expand-lg .navbar-nav .nav-link` (0,3,0) forces
 *      `padding-inline: var(--bs-navbar-nav-link-padding-x)` (8px), squashing
 *      the intended, roomier spacing between the menu items.
 *   2. `.navbar-nav .nav-link.active` / `.navbar-nav .nav-link.show` (0,3,0)
 *      force `color: var(--bs-navbar-active-color)` (near-black), which is what
 *      turned the current page's link — and an open dropdown toggle — black on
 *      the royal-blue bar.
 *
 * Matching that specificity below (and appearing later in the cascade) keeps
 * the brand colours, the comfortable spacing and the underline-free links in
 * every state — normal, hover, focus, active and open.
 */
@media (min-width: 992px) {
  .site-nav .navbar-nav .nav-link {
    padding: 0.72rem 1.05rem;
  }

  .site-nav .navbar-nav {
    gap: 4px;
  }
}

.site-nav .navbar-nav .nav-link:active,
.site-nav .navbar-nav .nav-link.active,
.site-nav .navbar-nav .nav-link.show {
  color: var(--white);
  text-decoration: none;
}

/* Replace Bootstrap's default blue focus ring with the brand treatment */
.site-nav .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -3px;
  box-shadow: none;
}

/* ---- Dropdowns ------------------------------------------------------- */

.site-nav .dropdown-menu {
  min-width: 290px;
  max-width: calc(100vw - 20px);
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.site-nav .dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  text-decoration: none;
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  background-color: var(--royal-tint);
  color: var(--royal-blue);
}

.site-nav .dropdown-item.active {
  background-color: var(--royal-blue);
  color: var(--deep-blue);
}

/* ---- Mobile toggler -------------------------------------------------- */

.site-nav .navbar-toggler {
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 9px;
}

.site-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   3. COLLAPSED MENU PANEL (below lg)
   ========================================================================== */

.mobile-contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.mobile-contacts__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-contacts .contact-item__label {
  color: rgba(255, 255, 255, 0.7);
}

.mobile-contacts .contact-item__icon {
  color: rgba(255, 255, 255, 0.85);
}

.mobile-contacts .contact-item__value,
.mobile-contacts .contact-item__value a,
.mobile-contacts a {
  color: var(--white);
  text-decoration: none;
}

/* Hover feedback is a colour shift plus a soft highlight. The WhatsApp .btn is
   excluded so it keeps its own button styling. */
.mobile-contacts a:not(.btn):hover,
.mobile-contacts a:not(.btn):focus-visible {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}

@media (min-width: 992px) {
  /* Keep the desktop bar neat and perfectly centred */
  .site-nav .navbar-nav {
    align-items: center;
  }
}

/* ==========================================================================
   3b. RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 991.98px) {
  .brand__mark {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    border-radius: 12px;
  }

  .brand__name {
    font-size: 1.15rem;
  }

  .brand__tagline {
    display: none;
  }

  .header-top__inner {
    padding-block: 12px;
  }
}

@media (max-width: 575.98px) {
  .brand__role {
    font-size: 0.76rem;
  }

  .brand__text {
    max-width: 12rem;
  }

  .site-nav .nav-link {
    padding: 0.6rem 0.85rem;
  }
}


/* Brand mark image used in the reference-style header. */
.header-top__inner .brand__mark {
  display: block;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .header-top__inner .brand__mark {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
}
@media (max-width: 575.98px) {
  .header-top__inner .brand__mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/* ==========================================================================
   HOMEPAGE SECTIONS — hero, about, audience, services, contact, footer
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(44px, 6vw, 84px);
  background: var(--white);
  overflow: hidden;
}

.hero > .container {
  position: relative;
}

.hero__title {
  margin-bottom: 18px;
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--heading);
}

.hero__text {
  max-width: 56ch;
  margin-bottom: 24px;
  font-size: 1.05rem;
  color: var(--muted);
}

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

/* Hero highlight strip: four distinct value pillars in one row on desktop,
   two per row on tablets and one per row on phones. Sits directly below the
   hero buttons, inside the hero section. */
.hero__highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 40px);
}

.hero-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: clamp(16px, 2vw, 24px);
  text-align: center;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
  overflow-wrap: break-word;
}

.hero-highlight:hover {
  border-color: var(--royal-tint-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.hero-highlight__icon-wrap {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background-color: var(--royal-tint);
  color: var(--royal-blue);
  flex: 0 0 auto;
}

.hero-highlight__icon {
  width: 22px;
  height: 22px;
}

.hero-highlight__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading);
  overflow-wrap: break-word;
}

@media (min-width: 576px) {
  .hero__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .hero__highlights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-highlight {
    transition: none;
  }
}

/* Consultant photograph in the right-hand hero column. img-fluid keeps the
   natural aspect ratio; the rounded corners and soft shadow match the card
   language used across the page. */
.hero__photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .hero__photo {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

/* ==========================================================================
   2. ABOUT (two columns: About Manoharan | Why Work With Me)
   ========================================================================== */

/* Left column: the intro paragraph keeps a comfortable reading measure and
   stays flush with the heading above it. The call-to-action below it reuses
   the existing .btn-brand styling. */
.about-prose {
  max-width: 62ch;
}

/* Right column: the shared .why-list already provides the royal-blue tick
   marks with aligned items; this modifier only adds a little more air and
   size to the items for balance against the left column. */
.why-list.about-points li {
  margin-bottom: 16px;
  font-size: 1.02rem;
  color: #000080;
}

.why-list.about-points .why-list__icon {
  color: #000080;
}

.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 0.98rem;
}

.why-list li:last-child {
  margin-bottom: 0;
}

.why-list__icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--royal-blue);
}

/* ==========================================================================
   3. AUDIENCE CARDS (who we serve)
   ========================================================================== */

.serve-card {
  height: 100%;
  padding: clamp(22px, 3vw, 28px);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.serve-card:hover {
  border-color: var(--royal-tint-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.serve-card__icon-wrap {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 15px;
  background-color: var(--royal-tint);
  color: var(--royal-blue);
}

.serve-card__icon {
  width: 26px;
  height: 26px;
}

.serve-card__title {
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.serve-card__text {
  margin-bottom: 0;
  font-size: 0.96rem;
  color: var(--muted);
}

/* ---- Audience feature strip (who we serve) ----------------------------
   The four client groups read as one horizontal feature strip on the solid
   royal-blue band: flat items separated by hairline white dividers (no
   card boxes), white titles and translucent-white body text. Four columns
   on desktop, two per row on tablets, stacked with horizontal dividers on
   phones.
   ---------------------------------------------------------------------- */

.audience-band {
  --strip-line: rgba(255, 255, 255, 0.26);
  background-color: var(--royal-blue);
}

.audience-band .section-eyebrow,
.audience-band .section-title {
  color: var(--white);
}

.audience-band .section-lead {
  color: rgba(255, 255, 255, 0.82);
}

.audience-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.audience-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 22px;
  border-top: 1px solid var(--strip-line);
}

.audience-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.audience-item:last-child {
  padding-bottom: 0;
}

.audience-item__icon-wrap {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.audience-item__icon {
  width: 25px;
  height: 25px;
}

.audience-item__title {
  margin: 0;
  font-size: 1.12rem;
  color: var(--white);
}

.audience-item__text {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Tablets: two items per row — vertical divider between the columns and a
   horizontal divider between the two rows. */
@media (min-width: 576px) {
  .audience-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-item {
    padding: 24px 26px;
    border-top: 1px solid var(--strip-line);
    border-left: 0;
  }

  .audience-item:nth-child(odd) {
    padding-left: 0;
  }

  .audience-item:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--strip-line);
  }

  .audience-item:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
  }

  .audience-item:nth-last-child(-n + 2) {
    padding-bottom: 0;
  }
}

/* Desktop: one horizontal row of four, separated by hairline dividers */
@media (min-width: 992px) {
  .audience-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .audience-item,
  .audience-item:nth-child(odd),
  .audience-item:nth-child(even) {
    padding: 4px 26px;
    border-top: 0;
    border-left: 1px solid var(--strip-line);
  }

  .audience-item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .audience-item:last-child {
    padding-right: 0;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   4. SERVICE CARDS
   ---------------------------------------------------------------------------
   Nine service cards on white surfaces: Royal Blue icons and accents, Dark
   Grey (#333333) titles and copy, subtle Silver borders and a soft hover
   lift. The grid is three columns on desktop, two on tablet and one on
   mobile (see the .service-grid rules below).
   ========================================================================== */

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2vw, 28px);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Subtle lift on hover, with the border picking up the Royal Blue tint. */
.service-card:hover {
  border-color: var(--royal-tint-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.service-card__icon-wrap {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 12px;
  background-color: var(--royal-blue);
  color: var(--white);
}

.service-card__icon {
  width: 24px;
  height: 24px;
}

.service-card__title {
  margin-bottom: 10px;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--deep-blue);
}

.service-card__text {
  margin-bottom: 12px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Compact key-point list closing each card: Royal Blue tick accents on a
   hairline separator, kept to the bottom so cards line up evenly. */
.service-card__points {
  list-style: none;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.service-card__points li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 22px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted);
}

.service-card__points li:last-child {
  margin-bottom: 0;
}

.service-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--deep-blue);
}

/* ---- Services grid -----------------------------------------------------
   Three columns on desktop, two on tablet (768px+) and one on phones, so
   the nine cards always form a tidy, even grid. Cards stretch to the height
   of their row (align-items: stretch) which keeps each row visually even
   without leaving oversized, half-empty boxes.
   ---------------------------------------------------------------------- */

.service-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}

@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   5. CONTACT CARDS / PANELS + CONTACT LIST
   ========================================================================== */

.contact-card,
.contact-panel {
  height: 100%;
  padding: clamp(22px, 3vw, 34px);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-card__title,
.contact-panel__title {
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-list__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--navy-blue);
}

.contact-list__icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--gold);
}

.contact-list a {
  color: var(--navy-blue);
  text-decoration: none;
  font-weight: 600;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: var(--navy-blue);
}

.contact-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contact-panel__note {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---- Enquiry form (home page + contact.html) -------------------------- */

/*
 * The enquiry form is built with Bootstrap's grid (`.row g-3` + `.col-*`), like
 * the rest of the site, so it keeps `.row`'s flex behaviour. Do NOT add
 * `display: flex; flex-direction: column` here: that overrides `.row` and
 * stacks the two-column field layout into a single column.
 */
.contact-form .form-required-note {
  display: inline-block;
  margin-top: 8px;
}

/* ==========================================================================
   6. CTA BAND
   ========================================================================== */

.cta-band {
  padding-block: clamp(40px, 5.5vw, 64px);
  background: var(--royal-blue);
  color: var(--white);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.cta-band__title {
  margin-bottom: 8px;
  color: var(--white);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.cta-band__text {
  max-width: 60ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  color: rgba(255, 255, 255, 0.78);
  background-color: var(--deep-blue);
}

.site-footer > .container {
  padding-block: clamp(44px, 6vw, 68px);
}

.footer-brandline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-brand__logo {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  background-color: var(--white);
  box-sizing: content-box;
  padding: 7px;
  border-radius: 6px;
}

.footer-brandline .footer-brand {
  margin: 0;
}

.footer-brand__text {
  min-width: 0;
}

.footer-brand {
  margin-bottom: 4px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--white);
}

.footer-role {
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--silver);
}

.footer-about {
  max-width: 40ch;
  margin-bottom: 0;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-heading {
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--royal-blue);
}

.footer-contact p {
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.footer-contact a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--royal-blue);
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}

.footer-bottom {
  background-color: rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 18px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
}

/* "Developed by O5 IT Solutions" credit in the footer bar */
.footer-credit a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--royal-blue);
  text-decoration: underline;
}

/* ==========================================================================
   SINGLE-PAGE INFO BLOCK
   Used once on the home page (services section) for the "not sure which
   service you need?" call-out below the service grid.
   ========================================================================== */

.info-block {
  padding: clamp(22px, 3vw, 34px);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.info-block:hover,
.info-block:focus-within {
  border-color: var(--royal-tint-strong);
  box-shadow: var(--shadow-sm);
}

.info-block__body {
  min-width: 0;
}

.info-block__title {
  margin-bottom: 8px;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
}

.info-block__actions {
  margin: 18px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .info-block,
  .hero-service {
    transition: none;
  }
}

/*
 * Hero service highlights: four equal boxes — one row of four on wide
 * desktop, two per row (2x2) on smaller screens. The grid stretches each
 * item, so every box shares the same height, padding, alignment and
 * typography.
 */
.hero__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.hero-service {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: break-word;
  color: var(--heading);
  background-color: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.hero-service:hover {
  color: var(--royal-blue);
  border-color: var(--royal-blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.hero-service__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--royal-blue);
}

/* One row of four on wide desktop, where the halved hero text column still
   leaves each box enough room for the longer labels (Notice & Assessments);
   two per row (2x2) on smaller screens. */
@media (min-width: 1200px) {
  .hero__services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   ADVICE MODAL
   ========================================================================== */

.advice-modal__content {
  background-color: var(--deep-blue);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  font-size: 0.9rem;
}

.advice-modal__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--deep-blue);
}

#adviceModal .modal-title {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
}

  .advice-modal__body {
    background-color: var(--deep-blue);
}

.advice-form__field {
  margin-bottom: 12px;
}

.advice-form__label {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
}

.advice-form__input {
  background-color: #f8f9fa;
  color: var(--ink);
  border: 1px solid var(--silver);
  font-size: 0.9rem;
}

.advice-form__input:focus {
  background-color: var(--white);
  border-color: var(--royal-tint-strong);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.advice-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.advice-form__required {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

#adviceModal .btn-close.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

#adviceModal .invalid-feedback {
  color: #ffdddd;
  font-size: 0.8rem;
}
/* ===========================================================================
   HERO AND ABOUT
   ========================================================================== */

.hero-new {
  position: relative;
  min-height: 330px;
  padding: 0;
  background-color: var(--white);
}

.hero-new__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 330px;
}

.hero-new__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 52%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 22px 0 22px clamp(28px, 3vw, 48px);
}

.hero-new__title {
  max-width: 680px;
  margin: 0 0 8px;
  color: var(--heading);
  font-size: clamp(2.05rem, 2.55vw, 2.45rem);
  font-weight: 700;
  line-height: 1.04;
}

.hero-new__text {
  max-width: 620px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.35;
}

.hero-new__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 14px;
}

.hero-new__service {
  padding: 0 10px;
  color: var(--deep-blue);
  font-size: 0.84rem;
  line-height: 1.25;
  white-space: nowrap;
}

.hero-new__service:first-child {
  padding-left: 0;
}

.hero-new__service + .hero-new__service {
  border-left: 1px solid var(--gold-dark);
}

.hero-new__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-new__visual {
  position: absolute;
  inset: 0 0 0 38%;
  min-width: 0;
}

.hero-new__visual::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.92) 8%, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0) 46%);
  content: "";
  pointer-events: none;
}

.hero-new__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.hero-new__feature-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(22px, 4vw, 58px);
  width: 290px;
  max-width: calc(100% - 36px);
  padding: 14px 16px;
  transform: translateY(-50%);
  border: 1px solid rgba(226, 211, 160, 0.72);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.12);
  backdrop-filter: blur(3px);
}

.hero-new__benefits {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-new__benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: var(--deep-blue);
  font-size: 0.78rem;
  line-height: 1.25;
}

.hero-new__benefit-icon {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--deep-blue);
}

.hero-new__benefit-icon .icon {
  width: 22px;
  height: 22px;
}

.about-new {
  padding: 0;
  background-color: #eaf0f8;
}

.about-new__grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 23fr) minmax(0, 32fr);
  align-items: stretch;
  min-height: 245px;
}

.about-new__left,
.about-new__right {
  min-width: 0;
  padding: 16px clamp(16px, 2vw, 28px);
}

.about-new__left {
  background-color: #eaf2fb;
}

.about-new__right {
  background-color: #fbf3e7;
}

.about-new .section-title {
  margin: 0 0 7px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.about-new__center {
  min-width: 0;
  min-height: 245px;
  overflow: hidden;
}

.about-new__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 245px;
  object-fit: cover;
  object-position: center;
}

.about-new__prose {
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.3;
}

.about-new__prose p {
  margin-bottom: 5px;
}

.about-new__prose ul {
  margin: 0 0 8px;
  padding-left: 17px;
}

.about-new__prose li {
  margin-bottom: 2px;
}

.why-new {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-new li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--deep-blue);
  font-size: 0.84rem;
  line-height: 1.3;
}

.why-new__icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  padding: 2px;
  border-radius: 50%;
  background-color: var(--gold-dark);
  color: var(--white);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-new__title {
    font-size: 2rem;
  }

  .hero-new__service {
    padding-inline: 7px;
    font-size: 0.77rem;
  }

  .hero-new__feature-card {
    right: 22px;
    width: 260px;
  }

  .about-new__left,
  .about-new__right {
    padding-inline: 16px;
  }

  .about-new__prose,
  .why-new li {
    font-size: 0.76rem;
  }
}

@media (max-width: 991.98px) {
  .hero-new__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-new__content {
    min-height: 280px;
    padding: 28px clamp(22px, 5vw, 42px);
  }

  .hero-new__title {
    max-width: 690px;
  }

  .hero-new__visual {
    position: relative;
    inset: auto;
    height: 300px;
  }

  .hero-new__visual::before {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.5) 12%, rgba(255, 255, 255, 0) 35%);
  }

  .about-new__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-new__left {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .hero-new__content {
    min-height: auto;
    padding: 28px 20px 22px;
  }

  .hero-new__title {
    font-size: 2rem;
    line-height: 1.08;
  }

  .hero-new__desktop-break {
    display: none;
  }

  .hero-new__text {
    font-size: 0.95rem;
  }

  .hero-new__services {
    row-gap: 8px;
  }

  .hero-new__service {
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  .hero-new__actions {
    gap: 9px;
  }

  .hero-new__visual {
    height: 260px;
  }

  .hero-new__feature-card {
    right: 14px;
    width: 270px;
    max-width: calc(100% - 28px);
    padding: 12px 14px;
  }

  .about-new__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-new__left {
    grid-column: auto;
  }

  .about-new__left,
  .about-new__right {
    padding: 20px;
  }

  .about-new__center,
  .about-new__photo {
    height: 230px;
    min-height: 230px;
  }
}
/* Service strip */
.service-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.service-strip__item {
  text-align: center;
}

.service-strip__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: var(--white);
}

.service-strip__icon--navy {
  background-color: var(--deep-blue);
}

.service-strip__icon--gold {
  background-color: var(--royal-blue);
}

.service-strip__icon .icon {
  width: 32px;
  height: 32px;
}

.service-strip__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--deep-blue);
  margin-bottom: 6px;
}

.service-strip__text {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .service-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .service-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   HOME PAGE — reference layout refinements (desktop-first, responsive)
   ========================================================================== */

/* Hero: full-width image on the right, with a soft white text-side fade. */
.hero-new {
  min-height: 330px;
  overflow: hidden;
}
.hero-new__inner {
  min-height: 330px;
}
.hero-new__content {
  flex-basis: 52%;
  padding: 22px 0 22px clamp(28px, 3.9vw, 60px);
}
.hero-new__title {
  max-width: 700px;
  margin-bottom: 10px;
  font-size: clamp(2.05rem, 2.9vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero-new__text {
  max-width: 620px;
  margin-bottom: 12px;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.32;
}
.hero-new__services {
  margin-bottom: 16px;
}
.hero-new__service {
  padding-inline: 12px;
  font-size: 0.94rem;
}
.hero-new__visual {
  inset: 0 0 0 43%;
}
.hero-new__visual::before {
  display: none;
}
.hero-new__feature-card {
  right: clamp(20px, 1.6vw, 26px);
  left: auto;
  width: 290px;
  padding: 16px 18px;
}
.hero-new__benefits {
  gap: 10px;
}
.hero-new__benefit {
  min-height: 32px;
  gap: 12px;
  font-size: 0.84rem;
}
.hero-new__benefit-icon {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}
.hero-new__benefit-icon .icon {
  width: 27px;
  height: 27px;
}

/* Six service highlights: circular icon at left, copy at right. */
.service-strip-section > .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(20px, 2.4vw, 38px);
}
.service-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
}
.service-strip__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  padding: 12px;
  align-items: center;
  text-align: left;
  background-color: #ffffff;
}
.service-strip__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  margin: 0;
}
.service-strip__icon .icon {
  width: 31px;
  height: 31px;
}
.service-strip__title {
  grid-column: 2;
  align-self: end;
  margin: 0 0 5px;
  font-size: 0.91rem;
  line-height: 1.2;
}
.service-strip__text {
  grid-column: 2;
  align-self: start;
  font-size: 0.78rem;
  line-height: 1.32;
}

/* About: equal-height 45 / 23 / 32 columns, with the photo flush between panels. */
.about-new__grid {
  grid-template-columns: minmax(0, 45fr) minmax(0, 23fr) minmax(0, 32fr);
  min-height: 245px;
}
.about-new__left,
.about-new__right {
  padding: 16px clamp(18px, 2.2vw, 34px);
}
.about-new__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-new__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-new .section-title {
  margin-bottom: 9px;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  line-height: 1.1;
}
.about-new__center,
.about-new__photo {
  min-height: 245px;
  height: 100%;
}
.about-new__photo {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.about-new__prose {
  font-size: 0.94rem;
  line-height: 1.34;
}
.about-new__prose p {
  margin-bottom: 12px;
}
.about-new__prose ul {
  margin-bottom: 10px;
}
.about-new__action {
  align-self: flex-start;
  margin-top: 16px;
}
.why-new {
  gap: 9px;
}
.why-new li {
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.25;
}
.why-new__icon {
  flex-basis: 21px;
  width: 21px;
  height: 21px;
}

/* Audience band: compact four-column row directly under About. */
.audience-band {
  padding-block: 18px;
  background: #062b50;
}
.audience-band > .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(20px, 2.4vw, 38px);
}
.audience-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.audience-item,
.audience-item:nth-child(odd),
.audience-item:nth-child(even) {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 4px clamp(14px, 2vw, 28px);
  border: 0;
  border-left: 1px solid rgba(255,255,255,.32);
}
.audience-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.audience-item:last-child {
  padding-right: 0;
}
.audience-item__icon-wrap {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
}
.audience-item__icon {
  width: 42px;
  height: 42px;
}
.audience-item__title {
  grid-column: 2;
  align-self: end;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.15;
}
.audience-item__text {
  grid-column: 2;
  align-self: start;
  font-size: 0.82rem;
  line-height: 1.32;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-new__title { font-size: 2.05rem; }
  .hero-new__content { flex-basis: 55%; }
  .hero-new__feature-card { width: 250px; padding: 12px 14px; }
  .hero-new__benefit { font-size: 0.76rem; }
  .service-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .about-new__prose { font-size: 0.82rem; }
  .why-new li { font-size: 0.82rem; }
  .audience-item,
  .audience-item:nth-child(odd),
  .audience-item:nth-child(even) { padding-inline: 14px; }
}

@media (max-width: 991.98px) {
  .hero-new__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-new__content { min-height: 300px; padding: 30px clamp(22px, 5vw, 42px); }
  .hero-new__title { max-width: 700px; }
  .hero-new__visual { position: relative; inset: auto; height: 300px; }
  .hero-new__visual::before {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.4) 18%, rgba(255,255,255,0) 42%);
  }
  .service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-new__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .about-new__left { grid-column: 1 / -1; }
  .about-new__center, .about-new__photo { min-height: 260px; height: 260px; }
  .about-new__right { min-height: 260px; }
  .audience-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .audience-item,
  .audience-item:nth-child(odd),
  .audience-item:nth-child(even) {
    padding: 10px 16px;
    border-left: 0;
  }
  .audience-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.32); }
}

@media (max-width: 575.98px) {
  .hero-new__content { min-height: auto; padding: 28px 20px 22px; }
  .hero-new__title { font-size: 2rem; line-height: 1.08; }
  .hero-new__desktop-break { display: none; }
  .hero-new__text { font-size: .95rem; }
  .hero-new__services { row-gap: 8px; }
  .hero-new__service { padding-inline: 8px; font-size: .76rem; }
  .hero-new__visual { height: 260px; }
  .hero-new__feature-card { right: 14px; left: auto; width: 270px; max-width: calc(100% - 28px); padding: 12px 14px; }
  .service-strip { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .service-strip__item { grid-template-columns: 58px minmax(0, 1fr); }
  .service-strip__icon { width: 54px; height: 54px; }
  .about-new__grid { grid-template-columns: minmax(0, 1fr); }
  .about-new__left { grid-column: auto; }
  .about-new__left, .about-new__right { padding: 22px 20px; }
  .about-new__center, .about-new__photo { height: 230px; min-height: 230px; }
  .about-new__right { min-height: auto; }
  .audience-strip { grid-template-columns: minmax(0, 1fr); }
  .audience-item,
  .audience-item:nth-child(odd),
  .audience-item:nth-child(even) {
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.25);
  }
  .audience-item:first-child { border-top: 0; }
}


/* User-requested refinement: consistent section rhythm and typography. */
.header-top { background-color: #fff; }
.brand__mark { width: 76px; height: 76px; object-fit: contain; background: transparent; box-shadow: none; }
.hero-new__content { padding-left: clamp(24px, 4vw, 60px); }
.hero-new__visual { inset: 0 0 0 43%; }
.hero-new__visual::before { display: none; }
.hero-new__photo {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.2) 8%, #000 25%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.2) 8%, #000 25%);
}
.service-strip-section > .container,
.audience-band > .container {
  padding-inline: clamp(24px, 4vw, 60px);
}
.service-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.service-strip__item {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.service-strip__item:hover .service-strip__title { color: var(--gold-dark); }
.about-new { margin-top: 18px; }
.about-new__left,
.about-new__right { padding-inline: clamp(24px, 4vw, 60px); }
.why-new__icon {
  background: transparent;
  color: var(--gold-dark);
  border: 0;
  padding: 0;
}
@media (max-width: 991.98px) {
  .hero-new__visual { inset: auto; }
  .service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-new { margin-top: 14px; }
  .about-new__left, .about-new__right { padding-inline: clamp(20px, 4vw, 36px); }
}
@media (max-width: 575.98px) {
  .service-strip { grid-template-columns: minmax(0, 1fr); }
  .about-new { margin-top: 12px; }
  .about-new__left, .about-new__right { padding-inline: 20px; }
}

/* Keep the main content edges aligned with the Hero and About panels. */
main > .section > .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(24px, 4vw, 60px);
}

/* ========================================================================== 
   FINAL REFERENCE-MATCH REFINEMENTS
   Compact section rhythm, restored Hero image proportions, and About panels.
   ========================================================================== */

/* Keep the vertical rhythm close to the reference instead of oversized gaps. */
.section {
  padding-block: clamp(16px, 2vw, 24px);
}

.section-head {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.section.service-strip-section {
  padding-block: clamp(28px, 3vw, 40px);
  margin-top: 0;
  background-color: var(--white);
}

.audience-band {
  padding-block: 14px;
}

/* Restore the Hero photograph to a balanced, natural display size. Keep the
   existing project image; use its full visual area without changing assets. */
.hero-new,
.hero-new__inner {
  min-height: 360px;
}

.hero-new__content {
  padding-top: 18px;
  padding-bottom: 18px;
}

.hero-new__visual {
  inset: 0 0 0 43%;
}

.hero-new__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 8%, #000 25%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 8%, #000 25%);
}

/* About panels: compact padding, full-height blue and gold backgrounds. */
.about-new {
  padding: 0;
  margin-top: 16px;
  background-color: #eaf2fb;
}

.about-new__grid {
  grid-template-columns: minmax(0, 45fr) minmax(0, 23fr) minmax(0, 32fr);
  align-items: stretch;
  min-height: 245px;
}

.about-new__left,
.about-new__right {
  min-width: 0;
  min-height: 100%;
  padding: 18px clamp(22px, 2.4vw, 34px);
}

.about-new__left {
  background-color: #eaf2fb;
}

.about-new__right {
  background-color: #f7eddc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-new .section-title {
  margin-bottom: 9px;
}

.about-new__prose {
  font-size: 0.9rem;
  line-height: 1.38;
}

.about-new__prose p {
  margin-bottom: 8px;
}

.about-new__center {
  min-width: 0;
  min-height: 245px;
  overflow: hidden;
}

.about-new__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 245px;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 10%, #000 30%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 10%, #000 30%);
}

/* One single gold circle and one tick per Why Work With Me item. */
.why-new {
  gap: 9px;
  margin: 0;
  padding: 0;
}

.why-new li {
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.3;
}

.why-new__icon {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #c49a24;
}

@media (max-width: 991.98px) {
  .section {
    padding-block: 18px;
  }

  .hero-new,
  .hero-new__inner {
    min-height: 0;
  }

  .hero-new__content {
    padding: 26px clamp(22px, 5vw, 42px);
  }

  .hero-new__visual {
    inset: auto;
    height: 300px;
  }

  .hero-new__photo {
    height: 100%;
    object-fit: cover;
  }

  .about-new__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }

  .about-new__left {
    grid-column: 1 / -1;
  }

  .about-new__left,
  .about-new__right {
    padding: 18px 24px;
  }
}

@media (max-width: 575.98px) {
  .section {
    padding-block: 14px;
  }

  .about-new {
    margin-top: 12px;
  }

  .about-new__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-new__left {
    grid-column: auto;
  }

  .about-new__left,
  .about-new__right {
    padding: 18px 20px;
  }

  .about-new__center,
  .about-new__photo {
    height: 230px;
    min-height: 230px;
  }

  .about-new__photo {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   pages.css — inner-page layouts
   ---------------------------------------------------------------------------
   Page banner, two-column detail layout, sidebar cards, scenario/process
   grids, document checklists, FAQ page grouping and the article reading
   column. Loaded after base/header/sections so it can refine the shared
   components.
   ========================================================================== */

/* ==========================================================================
   1. PAGE BANNER
   ========================================================================== */

/* Centred page banner (kept for the shared layout; the site is a single
   page now, so nothing on index.html uses it). Only the banner *content*
   is centred; the global header, navigation and footer are untouched. */
.page-hero {
  padding-block: clamp(34px, 5vw, 60px);
  background-color: var(--light-grey);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

/* Breadcrumb, eyebrow, title, text and chips all share the centre line,
   with comfortable reading measures so the banner stays balanced when wide. */
.page-hero .breadcrumb {
  justify-content: center;
}

.page-hero .section-eyebrow {
  margin-bottom: 8px;
}

.page-hero__title {
  max-width: 34ch;
  margin-inline: auto;
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 3.8vw, 2.45rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--heading);
}

.page-hero__text {
  max-width: 68ch;
  margin-inline: auto;
  margin-bottom: 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.page-hero__chips {
  justify-content: center;
  margin-top: 22px;
  margin-bottom: 0;
}

/* ==========================================================================
   2. TWO-COLUMN DETAIL LAYOUT (former service detail pages)
   ========================================================================== */

.detail-grid {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
}

.detail-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Even spacing between the stacked content blocks */
.detail-main > * + * {
  margin-top: clamp(26px, 3.4vw, 42px);
}

.detail-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (min-width: 992px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .detail-aside {
    position: sticky;
    top: 100px;
  }
}

/* ---- Sidebar cards --------------------------------------------------- */

.side-card {
  padding: 26px;
  background-color: var(--royal-tint);
  border: 1px solid var(--royal-tint-strong);
  border-radius: var(--radius-lg);
}

.side-card--outline {
  background-color: var(--white);
  border-color: var(--line);
}

.side-card__title {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.side-card p {
  font-size: 0.95rem;
  color: var(--muted);
}

.side-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.side-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.side-list__icon {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--royal-blue);
}

.side-list a {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.side-list a:hover,
.side-list a:focus-visible {
  color: var(--royal-blue);
}

/* ---- Related links --------------------------------------------------- */

.related-links {
  display: grid;
  gap: 10px;
}

.related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-blue);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    color 0.18s ease;
}

.related-links a:hover,
.related-links a:focus-visible {
  color: var(--royal-blue);
  border-color: var(--royal-blue);
  box-shadow: var(--shadow-sm);
}

.related-links .btn-icon {
  width: 18px;
  height: 18px;
  color: var(--royal-blue);
}

.side-card .related-links {
  margin-top: 18px;
  padding-top: 4px;
}

/* ==========================================================================
   3. SCENARIO GRID (who may need this)
   ========================================================================== */

.scenario-grid {
  display: grid;
  gap: 18px;
}

.scenario-card {
  height: 100%;
  padding: 22px;
  background-color: var(--light-grey);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.scenario-card__icon-wrap {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 13px;
  background-color: var(--white);
  border: 1px solid var(--line);
  color: var(--royal-blue);
}

.scenario-card__icon {
  width: 22px;
  height: 22px;
}

.scenario-card h3 {
  margin-bottom: 6px;
  font-size: 1.02rem;
}

.scenario-card p {
  margin-bottom: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

@media (min-width: 640px) {
  .scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .scenario-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   4. PROCESS GRID
   ========================================================================== */

.process-grid {
  display: grid;
  gap: 18px;
}

.process-step {
  position: relative;
  height: 100%;
  padding: 24px 22px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.process-step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background-color: var(--royal-blue);
  color: var(--deep-blue);
  font-weight: 800;
  font-size: 1.05rem;
}

.process-step h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.process-step p {
  margin-bottom: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

@media (min-width: 640px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .process-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   4b. DOCUMENT CHECKLIST
   ========================================================================== */

.doc-list {
  display: grid;
  gap: 12px;
}

.doc-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px 16px 50px;
  background-color: var(--light-grey);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.doc-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: var(--royal-blue);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 8.5l3.2 3.2L13 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.doc-list span {
  font-size: 0.94rem;
  color: var(--muted);
}

/* ==========================================================================
   5. FAQ PAGE (grouped, single-column accordion)
   ========================================================================== */

.faq-single {
  max-width: 920px;
  margin-inline: auto;
}

/* Category heading rows inside the single-column accordion */
.faq-accordion > .faq-group__title {
  margin: 36px 0 18px;
}

.faq-accordion > .faq-group__title:first-child {
  margin-top: 0;
}

.faq-accordion > .accordion-item {
  border-radius: var(--radius);
}

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.faq-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--deep-blue);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease,
    background-color 0.18s ease;
}

.faq-nav a:hover,
.faq-nav a:focus-visible {
  color: var(--deep-blue);
  background-color: var(--royal-blue);
  border-color: var(--royal-blue);
}

.faq-nav .icon {
  width: 16px;
  height: 16px;
  color: var(--royal-blue);
}

.faq-nav a:hover .icon,
.faq-nav a:focus-visible .icon {
  color: var(--deep-blue);
}

.faq-group {
  margin-bottom: clamp(34px, 4.5vw, 52px);
  scroll-margin-top: 110px;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.faq-group__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background-color: var(--royal-tint);
  color: var(--royal-blue);
}

.faq-group__badge .icon {
  width: 22px;
  height: 22px;
}

.faq-group__count {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* ==========================================================================
   6. ARTICLE READING COLUMN
   ========================================================================== */

.article-body {
  max-width: 82ch;
  margin-inline: auto;
}

.article-body > * + * {
  margin-top: clamp(26px, 3.4vw, 42px);
}

/* ==========================================================================
   7. RESPONSIVE TWEAKS
   ========================================================================== */

@media (max-width: 575.98px) {
  .scenario-card,
  .process-step {
    padding: 20px;
  }

  .side-card {
    padding: 22px;
  }
}

/* ==========================================================================
   HERO IMAGE SLIDER
   --------------------------------------------------------------------------
   The hero photograph is now a horizontal track of slides. The wrapper keeps
   the exact size and position of the old single image, and the fade mask that
   used to sit on the image is applied once to the wrapper so it stays fixed
   while the slides move behind it. Only the image area animates.
   ========================================================================== */

.hero-new__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Fixed left-side smoke/fade: transparent at the left edge, opaque from 25%
     inward. The wrapper does not move, so the fade stays put as slides pass. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 8%, #000 25%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 8%, #000 25%);
}

.hero-new__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  /* A real sideways move: the whole track glides left, so the outgoing slide
     exits on the left and the next one enters from the right. */
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.hero-new__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* The fade now lives on the slider wrapper, so each image keeps its full
   bleed inside the track. */
.hero-new__slider .hero-new__photo {
  -webkit-mask-image: none;
  mask-image: none;
}

/* The original hero photograph (and its loop clone) keeps its mirrored
   composition; the added photographs keep their natural orientation. */
.hero-new__slide--natural .hero-new__photo {
  transform: none;
}

/* The site-wide reduced-motion rule shortens every transition to 0.01ms.
   The hero slider must still perform a real horizontal slide (not an instant
   image swap), so keep its duration intact on those machines too. */
@media (prefers-reduced-motion: reduce) {
  .hero-new__track {
    transition-duration: 0.7s !important;
  }
}