/*
 * WGL Advisory Services website styles (updated)
 * Updated to use a premium blue/grey palette reflecting professionalism and trust.
 * Colours are defined as CSS custom properties for easy reuse.
 */

/* Colour palette */
:root {
  /* Dark navy for headers and CTAs */
  --midnight-navy: #0D3B66;
  /* Charcoal for body text and dark sections */
  --charcoal-slate: #2C3E50;
  /* Medium blue for links and highlights */
  --steel-blue: #1D5A90;
  /* Soft blue for hover states and subtle accents */
  --soft-blue: #4D8BCB;
  /* Light grey tint for alternate section backgrounds */
  --mist-tint: #E0E6ED;
  /* White-ish background for main panels */
  --white: #F5F7FA;
}

/* Global styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background-color: var(--white);
  color: var(--charcoal-slate);
  line-height: 1.6;
}

a {
  color: var(--steel-blue);
  text-decoration: none;
}

a:hover {
  color: var(--soft-blue);
  text-decoration: underline;
}

/* Header styles */
header {
  background-color: var(--midnight-navy);
  color: var(--white);
  padding: 20px;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

header .logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}

header .logo img {
  height: 40px;
  margin-right: 8px;
}

header .logo span {
  display: inline-block;
  vertical-align: middle;
}

/* Navigation */
header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

header nav a {
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

header nav a:hover {
  color: var(--soft-blue);
}

/* Call‑to‑action buttons */
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  margin: 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Primary CTA button */
.cta-primary {
  background-color: var(--midnight-navy);
  color: var(--white);
}

.cta-primary:hover {
  background-color: var(--charcoal-slate);
}

/* Secondary CTA button */
.cta-secondary {
  background-color: transparent;
  color: var(--midnight-navy);
  border: 2px solid var(--midnight-navy);
}

.cta-secondary:hover {
  background-color: var(--midnight-navy);
  color: var(--white);
}

/* Generic link styled for calls to action inside paragraphs */
.cta-link {
  color: var(--steel-blue);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.cta-link:hover {
  color: var(--soft-blue);
}

/* Section containers */
section {
  padding: 40px 20px;
}

section .container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-dark {
  background-color: var(--mist-tint);
}

.section-light {
  background-color: var(--white);
}

section h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--midnight-navy);
}

section p {
  margin-bottom: 1rem;
}

/* Hero section */
.hero {
  background-color: var(--mist-tint);
  padding: 60px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--midnight-navy);
}

.hero p {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  color: var(--charcoal-slate);
}

/* Footer styles */
footer {
  background-color: var(--charcoal-slate);
  color: var(--white);
  padding: 20px;
  text-align: center;
}

footer .container {
  max-width: 1000px;
  margin: 0 auto;
}

footer p {
  margin: 0.5rem 0;
}

/* Responsive design */
@media (max-width: 768px) {
  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero h1 {
    font-size: 1.5rem;
  }
}

/* ======================================================
   Insights page specific styles
   These rules support the more structured Insights page with
   feature cards, topic and industry grids, newsletter forms
   and enquiry forms.  They build on the existing palette and
   layout to maintain consistency with the rest of the site.
   ======================================================
*/

/* Hero area for Insights */
.insights-hero {
  background-color: var(--mist-tint);
  padding: 60px 20px;
  text-align: center;
}
.insights-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--midnight-navy);
}
.insights-hero p {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  color: var(--charcoal-slate);
}

/* Grid layouts for cards and tiles */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.article-card {
  background-color: var(--white);
  border: 1px solid var(--mist-tint);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.article-card h3 {
  margin-top: 0;
  color: var(--midnight-navy);
}
.article-card .tags {
  font-size: 0.8rem;
  color: var(--steel-blue);
  margin-bottom: 0.5rem;
}
.article-card p {
  flex-grow: 1;
  margin-bottom: 1rem;
}
.article-card .cta-button {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Category and industry grids */
.category-grid, .industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.category-tile, .industry-tile {
  background-color: var(--white);
  border: 1px solid var(--mist-tint);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: var(--midnight-navy);
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.category-tile:hover, .industry-tile:hover {
  background-color: var(--mist-tint);
}

/* Forms for newsletter and enquiries */
.newsletter-form, .ask-wgl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}
.newsletter-form input, .ask-wgl-form input, .ask-wgl-form textarea {
  padding: 10px;
  border: 1px solid var(--mist-tint);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}
.newsletter-form button, .ask-wgl-form button {
  align-self: flex-start;
}

/*
 * Professional fee-table styling
 * This class gives tables a polished, blue-chip look with dark headers and alternating row backgrounds.
 * Apply the `fee-table` class to any table element in fees.html to use this styling.
 */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.fee-table thead th {
  background-color: var(--midnight-navy);
  color: var(--white);
  padding: 12px;
  text-align: left;
}

.fee-table th,
.fee-table td {
  border: 1px solid var(--mist-tint);
  padding: 10px 12px;
  vertical-align: top;
}

.fee-table tbody tr:nth-child(odd) {
  background-color: var(--mist-tint);
}

.fee-table tbody tr:hover {
  background-color: var(--soft-blue);
  color: var(--white);
}


/* =========================================================
   WGL global search, section navigation and footer polish
   ========================================================= */
.site-search-nav {
  display: flex;
  align-items: center;
}
.site-search-button,
.site-floating-search,
.site-scroll-controls button {
  border: 1px solid rgba(255,255,255,0.28);
  background: var(--midnight-navy);
  color: var(--white);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.site-search-button:hover,
.site-floating-search:hover,
.site-scroll-controls button:hover {
  background: var(--steel-blue);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.site-search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.site-search-modal.is-open {
  display: block;
}
.site-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 31, 49, 0.72);
  backdrop-filter: blur(4px);
}
.site-search-panel {
  position: relative;
  width: min(920px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  background: var(--white);
  color: var(--charcoal-slate);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.35);
  padding: 28px;
  overflow-y: auto;
}
.site-search-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 1px solid var(--mist-tint);
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.site-search-kicker {
  margin: 0 0 6px;
  color: var(--steel-blue);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
.site-search-header h2 {
  margin: 0;
  color: var(--midnight-navy);
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.site-search-close {
  border: 0;
  background: var(--mist-tint);
  color: var(--midnight-navy);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  cursor: pointer;
}
.site-search-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--midnight-navy);
}
.site-search-input {
  width: 100%;
  border: 1px solid var(--soft-blue);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.site-search-input:focus {
  border-color: var(--steel-blue);
  box-shadow: 0 0 0 4px rgba(27, 83, 122, 0.16);
}
.site-search-help,
.site-search-empty {
  color: var(--charcoal-slate);
  margin: 10px 0 14px;
}
.site-search-results {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.site-search-result {
  display: block;
  text-decoration: none;
  color: var(--charcoal-slate);
  border: 1px solid var(--mist-tint);
  border-left: 5px solid var(--steel-blue);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--white), rgba(245,248,251,0.78));
}
.site-search-result:hover {
  background: var(--mist-tint);
}
.site-search-result-title {
  display: block;
  color: var(--midnight-navy);
  font-weight: 800;
  margin-bottom: 4px;
}
.site-search-result-section {
  display: block;
  color: var(--steel-blue);
  font-weight: 700;
  margin-bottom: 6px;
}
.site-search-result-snippet {
  display: block;
  line-height: 1.5;
  font-size: 0.94rem;
}
.site-scroll-controls {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.site-scroll-controls button {
  background: rgba(9, 31, 49, 0.94);
  min-width: 122px;
  padding: 0.65rem 0.9rem;
  font-size: 0.86rem;
}
.site-scroll-controls .site-floating-search {
  background: var(--steel-blue);
}
footer {
  background: var(--midnight-navy);
  color: var(--white);
}
footer .footer-copyright {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
footer a {
  color: var(--soft-blue);
}
@media (max-width: 768px) {
  .site-scroll-controls {
    right: 12px;
    bottom: 12px;
  }
  .site-scroll-controls button {
    min-width: auto;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
  }
  .site-search-panel {
    margin: 12px auto;
    width: calc(100% - 18px);
    padding: 20px;
  }
}

/* Sticky top navigation ribbon */
html {
  scroll-padding-top: 112px;
}
header {
  position: sticky;
  top: 0;
  z-index: 10000;
  box-shadow: 0 2px 12px rgba(9, 31, 49, 0.10);
}
main section,
main h1,
main h2,
main h3 {
  scroll-margin-top: 112px;
}

/* Floating back control */
.site-scroll-controls .site-go-back {
  background: var(--midnight-navy);
}
.site-scroll-controls .site-go-back::before {
  content: "↩ ";
  font-weight: 700;
}
.site-scroll-controls .site-scroll-up::before {
  content: "↑ ";
  font-weight: 700;
}
.site-scroll-controls .site-scroll-down::before {
  content: "↓ ";
  font-weight: 700;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 150px;
  }
  main section,
  main h1,
  main h2,
  main h3 {
    scroll-margin-top: 150px;
  }
}


/* Fee category quick-enquiry cards */
.fee-category-cta {
  margin: 1rem 0 1.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(97, 155, 191, 0.35);
  border-left: 6px solid var(--steel-blue);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(232, 241, 248, 0.98), rgba(255,255,255,0.96)),
    linear-gradient(135deg, rgba(9,31,49,0.06), rgba(28,83,122,0.02));
  box-shadow: 0 10px 28px rgba(9, 31, 49, 0.08);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.fee-category-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--midnight-navy);
  color: var(--white);
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(9, 31, 49, 0.20);
}
.fee-category-cta-label {
  display: inline-block;
  color: var(--steel-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.fee-category-cta h3 {
  margin: 0 0 0.25rem;
  color: var(--midnight-navy);
  font-size: 1.08rem;
}
.fee-category-cta p {
  margin: 0;
  color: var(--charcoal-slate);
  line-height: 1.5;
}
.fee-category-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  background: var(--steel-blue);
  color: var(--white);
  border: 1px solid var(--steel-blue);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(28, 83, 122, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.fee-category-cta-button:hover {
  background: var(--midnight-navy);
  border-color: var(--midnight-navy);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(9, 31, 49, 0.22);
}
.fee-quick-quote-link {
  background: var(--midnight-navy);
  color: var(--white) !important;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}
@media (max-width: 820px) {
  .fee-category-cta {
    grid-template-columns: auto 1fr;
  }
  .fee-category-cta-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}



/* Clickable fee rows and Contact-page preselection */
.fee-click-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: rgba(232, 241, 248, 0.9);
  border: 1px solid rgba(97, 155, 191, 0.35);
  color: var(--midnight-navy);
  font-weight: 700;
  font-size: 0.92rem;
}
.fee-click-hint::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--steel-blue);
  color: var(--white);
  font-weight: 800;
  font-size: 0.8rem;
}
.fee-table tbody tr.fee-service-row {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.fee-table tbody tr.fee-service-row:hover,
.fee-table tbody tr.fee-service-row:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(9, 31, 49, 0.12);
}
.fee-table tbody tr.fee-service-row:focus {
  outline: 3px solid rgba(97, 155, 191, 0.75);
  outline-offset: -3px;
}
.fee-row-enquire {
  display: inline-flex;
  align-items: center;
  margin-top: 0.45rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--midnight-navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fee-row-enquire::after {
  content: " →";
  margin-left: 0.15rem;
}
.contact-hero {
  background: linear-gradient(135deg, var(--mist-tint), var(--white));
}
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 2rem;
  align-items: start;
}
.contact-form-panel,
.contact-info-card {
  background: var(--white);
  border: 1px solid rgba(97, 155, 191, 0.28);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgba(9, 31, 49, 0.08);
}
.contact-kicker {
  color: var(--steel-blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  margin: 0 0 0.4rem;
}
.contact-form-intro {
  margin-bottom: 1.2rem;
  color: var(--charcoal-slate);
}
.wgl-contact-form label,
.wgl-contact-form legend {
  font-weight: 700;
  color: var(--midnight-navy);
}
.form-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.wgl-contact-form input[type="text"],
.wgl-contact-form input[type="email"],
.wgl-contact-form input[type="tel"],
.wgl-contact-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(97, 155, 191, 0.55);
  border-radius: 12px;
  font: inherit;
  color: var(--midnight-navy);
  background: var(--white);
}
.wgl-contact-form input:focus,
.wgl-contact-form textarea:focus {
  outline: none;
  border-color: var(--steel-blue);
  box-shadow: 0 0 0 4px rgba(28, 83, 122, 0.14);
}
.full-width-field {
  display: block;
  margin-top: 1rem;
}
[data-selected-fee-item].is-prefilled {
  background: rgba(232, 241, 248, 0.78);
  border-color: var(--steel-blue);
  font-weight: 700;
}
.service-checkbox-group {
  margin: 1.15rem 0;
  padding: 1rem;
  border: 1px solid rgba(97, 155, 191, 0.35);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(232, 241, 248, 0.55), rgba(255,255,255,0.92));
  display: grid;
  gap: 0.55rem;
}
.service-checkbox-group legend {
  padding: 0 0.35rem;
}
.service-checkbox-group label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-weight: 600;
  color: var(--charcoal-slate);
}
.service-checkbox-group input {
  margin-top: 0.25rem;
  accent-color: var(--steel-blue);
}
.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.contact-info-card h2,
.contact-info-card h3 {
  color: var(--midnight-navy);
}
.contact-info-card a {
  color: var(--steel-blue);
  font-weight: 700;
}
.contact-info-card hr {
  border: 0;
  border-top: 1px solid rgba(97, 155, 191, 0.3);
  margin: 1.25rem 0;
}
.contact-note {
  background: var(--mist-tint);
  border-left: 4px solid var(--steel-blue);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-weight: 600;
}
@media (max-width: 860px) {
  .contact-page-grid,
  .form-grid-two {
    grid-template-columns: 1fr;
  }
}


/* Priority improvement update: accessibility, conversion and proof components */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 20000;
  background: #091f31;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-weight: 800;
}
.skip-link:focus {
  left: 12px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #8ec4e6;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.priority-hero {
  background:
    radial-gradient(circle at 12% 16%, rgba(97,155,191,0.18), transparent 26%),
    linear-gradient(135deg, #061d2f 0%, #0b2f4d 48%, #174d76 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.priority-hero h1,
.priority-hero h2 {
  color: #ffffff;
}
.priority-hero p {
  color: rgba(255,255,255,0.88);
}
.conversion-strip,
.proof-grid,
.checklist-grid {
  display: grid;
  gap: 1rem;
}
.conversion-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.25rem;
}
.conversion-card,
.proof-card,
.checklist-card {
  background: #ffffff;
  border: 1px solid rgba(97,155,191,0.28);
  border-radius: 20px;
  padding: 1.15rem;
  box-shadow: 0 12px 28px rgba(9,31,49,0.08);
}
.conversion-card h3,
.proof-card h3,
.checklist-card h3 {
  margin-top: 0;
  color: var(--midnight-navy);
}
.conversion-card p,
.proof-card p,
.checklist-card p {
  color: var(--charcoal-slate);
  line-height: 1.58;
}
.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.checklist-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
}
.credibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #e8f1f8;
  color: #091f31;
  font-weight: 800;
  border: 1px solid rgba(97,155,191,0.36);
}
.credibility-badge::before {
  content: "✓";
  color: #1c537a;
  font-weight: 900;
}
@media (max-width: 900px) {
  .conversion-strip,
  .proof-grid,
  .checklist-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WGL mobile responsive layout correction
   Keeps the website presentable and usable on phones/tablets.
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
}

.wgl-mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.68rem 0.9rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

.wgl-mobile-menu-toggle::before {
  content: "☰";
  font-size: 1.1rem;
  line-height: 1;
}

.wgl-mobile-menu-toggle[aria-expanded="true"]::before {
  content: "✕";
}

/* Standard tablet and phone layout */
@media (max-width: 980px) {
  body {
    padding-bottom: 74px;
  }

  .container {
    width: min(100% - 28px, 1180px);
  }

  header {
    position: sticky;
    top: 0;
    z-index: 10000;
  }

  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  header .logo {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  header .logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  header .logo span {
    font-size: clamp(1rem, 4.6vw, 1.28rem);
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .wgl-mobile-menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  header nav {
    flex: 0 0 100%;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  header nav.is-open {
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    padding-top: 0.6rem;
  }

  header nav ul {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    width: 100%;
    padding: 0.5rem 0 0;
    margin: 0;
  }

  header nav li {
    width: 100%;
  }

  header nav a,
  header nav button,
  .site-search-button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 0.9rem !important;
    border-radius: 14px !important;
    text-align: center;
    box-sizing: border-box;
  }

  header nav a {
    background: rgba(255,255,255,0.08);
  }

  header nav a:hover,
  header nav a:focus,
  header nav a.active {
    background: rgba(255,255,255,0.16);
  }

  html {
    scroll-padding-top: 122px;
  }

  main section,
  main h1,
  main h2,
  main h3 {
    scroll-margin-top: 122px;
  }

  section,
  .hero,
  .priority-hero,
  .smme-hero,
  .mining-hero,
  .engineering-hero,
  .legal-hero,
  .public-hero,
  .other-hero,
  .industries-hero,
  .checklists-hero,
  .wgl-contact-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero,
  .priority-hero,
  .smme-hero,
  .mining-hero,
  .engineering-hero,
  .legal-hero,
  .public-hero,
  .other-hero,
  .industries-hero,
  .checklists-hero,
  .wgl-contact-hero {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  h1,
  .hero h1,
  .priority-hero h1,
  .smme-hero h1,
  .mining-hero h1,
  .engineering-hero h1,
  .legal-hero h1,
  .public-hero h1,
  .other-hero h1,
  .industries-hero h1,
  .checklists-hero h1,
  .wgl-contact-hero h1 {
    font-size: clamp(2rem, 8vw, 2.7rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
  }

  h2 {
    font-size: clamp(1.55rem, 6vw, 2.05rem) !important;
    line-height: 1.16 !important;
  }

  h3 {
    line-height: 1.24 !important;
  }

  p,
  li,
  td,
  th,
  label,
  input,
  textarea,
  select,
  button {
    font-size: 1rem;
  }

  .hero p,
  .priority-hero p,
  .smme-hero p,
  .mining-hero p,
  .engineering-hero p,
  .legal-hero p,
  .public-hero p,
  .other-hero p,
  .industries-hero p,
  .checklists-hero p,
  .wgl-contact-hero p,
  .lead-text {
    font-size: 1rem !important;
    line-height: 1.64 !important;
  }

  .hero-actions,
  .button-row,
  .contact-form-actions,
  .wgl-contact-hero-actions,
  .industry-actions,
  .checklist-actions,
  .service-actions,
  .contact-top-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.75rem;
  }

  .cta-button,
  a.cta-button,
  button.cta-button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
  }

  .badge-row {
    justify-content: center;
  }

  .credibility-badge {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .card-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-7,
  .grid-8,
  .proof-grid,
  .conversion-strip,
  .checklist-grid,
  .industry-grid,
  .choose-grid,
  .process-grid,
  .sector-grid,
  .sector-grid.two-col,
  .service-grid,
  .contact-layout,
  .contact-page-grid,
  .form-grid-two,
  .industry-fee-shell,
  .fees-grid,
  .resource-grid,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  .article-card,
  .card,
  .proof-card,
  .conversion-card,
  .checklist-card,
  .industry-card,
  .choose-card,
  .process-card,
  .sector-card,
  .contact-panel,
  .contact-side-card,
  .contact-info-card,
  .hero-card,
  .wgl-contact-hero-badge,
  .industry-fee-intro,
  .industry-fee-links-panel {
    border-radius: 18px !important;
    padding: 1rem !important;
  }

  .contact-side-card {
    position: static !important;
  }

  .table-wrap,
  .fee-table-wrapper,
  .fees-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .fee-table,
  .wgl-table,
  table.fee-table,
  table.wgl-table {
    min-width: 760px;
  }

  .data-list {
    columns: 1 !important;
  }

  .industry-fee-link {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 68px;
  }

  .industry-fee-arrow {
    display: none !important;
  }

  .site-scroll-controls {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
    z-index: 9998;
  }

  .site-scroll-controls button {
    min-width: 0 !important;
    width: 100%;
    padding: 0.55rem 0.35rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1;
    white-space: normal;
    border-radius: 14px !important;
  }

  .site-search-panel {
    margin: 8px auto;
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    padding: 1rem;
    border-radius: 18px;
  }

  .site-search-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-search-results {
    grid-template-columns: 1fr !important;
  }
}

/* Small-phone refinements */
@media (max-width: 520px) {
  .container {
    width: min(100% - 22px, 1180px);
  }

  header .logo img {
    width: 36px;
    height: 36px;
  }

  header .logo span {
    font-size: 1rem;
  }

  .hero,
  .priority-hero,
  .smme-hero,
  .mining-hero,
  .engineering-hero,
  .legal-hero,
  .public-hero,
  .other-hero,
  .industries-hero,
  .checklists-hero,
  .wgl-contact-hero {
    padding-top: 34px !important;
    padding-bottom: 36px !important;
  }

  .site-scroll-controls button {
    font-size: 0.66rem !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }

  .site-scroll-controls .site-scroll-up::before,
  .site-scroll-controls .site-scroll-down::before,
  .site-scroll-controls .site-go-back::before {
    display: block;
    margin: 0 auto 0.1rem;
  }
}

/* End WGL mobile responsive layout correction
   ========================================================= */