/* ===============================================================
   V10.11 — targeted repairs
   Desktop layout remains the approved V10 design.
   =============================================================== */

/* Correct a historic cascade conflict which placed pale text on a pale card. */
.contact-card {
  color: #193a32 !important;
  background: linear-gradient(145deg, #fffdf8, #f1eadf) !important;
  border: 1px solid #d9ccb8 !important;
}

.contact-card > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #d4b46d !important;
  background: #073f34;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(1, 36, 30, .16) !important;
}

.contact-card h3 {
  color: #073f34 !important;
}

.contact-card p {
  color: #3e5049 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.contact-card-note {
  color: #41544c !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

.contact-card .btn,
.contact-card .btn.green {
  color: #fff !important;
  background: #073f34 !important;
}

.contact-card .btn:hover,
.contact-card .btn.green:hover {
  background: #0a5748 !important;
}

.contact-card .aside-phone,
.aside-phone {
  color: #073f34 !important;
}

.about-visual picture {
  display: block;
}

.menu-label,
.menu-close-icon {
  display: none;
}

.menu[aria-expanded="true"] .menu-open-icon {
  display: none;
}

.menu[aria-expanded="true"] .menu-close-icon {
  display: block;
}

/* The mobile drawer is never shown on the approved desktop layout. */
.mobile-nav-shell {
  display: none;
}

@media only screen and (max-width: 760px) {
  html {
    scroll-padding-top: 66px !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .header,
  .header.is-scrolled {
    z-index: 5000 !important;
    background: rgba(251, 250, 246, .99) !important;
    box-shadow: 0 8px 24px rgba(1, 36, 30, .08);
  }

  .header-inner,
  .header.is-scrolled .header-inner {
    width: calc(100% - 24px) !important;
    height: 64px !important;
    gap: 9px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: calc(100% - 90px);
    gap: 8px !important;
  }

  .brand img.brand-mark,
  .header.is-scrolled .brand img.brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    max-width: 185px !important;
    overflow: hidden;
    font-size: 13.5px !important;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-copy small {
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: .2em !important;
  }

  .menu {
    width: auto !important;
    min-width: 76px;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 12px !important;
    color: #fff !important;
    background: #073f34 !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(1, 36, 30, .14);
  }

  .menu:hover,
  .menu:focus-visible,
  .menu[aria-expanded="true"] {
    color: #fff !important;
    background: #0a5748 !important;
  }

  .menu-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
  }

  .menu .icon {
    width: 19px !important;
    height: 19px !important;
  }

  /* The original desktop navigation is intentionally hidden on phones. */
  .header #nav,
  .header.is-scrolled #nav {
    display: none !important;
  }

  .mobile-nav-shell[hidden] {
    display: none !important;
  }

  .mobile-nav-shell:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 4800;
    display: block;
  }

  .mobile-nav-backdrop {
    position: absolute;
    inset: 64px 0 0;
    width: 100%;
    height: calc(100% - 64px);
    padding: 0;
    border: 0;
    background: rgba(0, 31, 26, .58);
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity .2s ease;
  }

  .mobile-nav-panel {
    position: absolute;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(91vw, 382px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 17px 17px calc(92px + env(safe-area-inset-bottom));
    color: #173b33;
    background:
      radial-gradient(circle at 100% 0, rgba(205, 168, 91, .12), transparent 18rem),
      #fbfaf6;
    box-shadow: -24px 0 60px rgba(0, 31, 26, .22);
    transform: translateX(102%);
    transition: transform .22s ease;
  }

  .mobile-nav-shell.is-open .mobile-nav-backdrop {
    opacity: 1;
  }

  .mobile-nav-shell.is-open .mobile-nav-panel {
    transform: translateX(0);
  }

  .mobile-nav-panel-top {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(7, 63, 52, .1);
  }

  .mobile-nav-panel-top strong {
    color: #073f34;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .mobile-nav-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #073f34;
    background: #fff;
    border: 1px solid rgba(7, 63, 52, .12);
    border-radius: 50%;
  }

  .mobile-nav-urgent {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin: 15px 0 12px;
    padding: 13px;
    color: #fff;
    background: #073f34;
    border-radius: 13px;
  }

  .mobile-nav-urgent .icon {
    color: #d4b46d;
  }

  .mobile-nav-urgent span,
  .mobile-nav-urgent strong {
    display: block;
  }

  .mobile-nav-urgent span {
    color: rgba(255,255,255,.76);
    font-size: 9px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .mobile-nav-urgent strong {
    margin-top: 3px;
    color: #fff;
    font-size: 16px;
  }

  .mobile-nav-links {
    display: grid;
  }

  .mobile-nav-links > a {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 3px;
    color: #173b33;
    border-bottom: 1px solid rgba(7, 63, 52, .1);
    font-size: 14px;
    font-weight: 700;
  }

  .mobile-nav-links > a::after {
    content: "›";
    color: #a47d31;
    font-size: 21px;
    font-weight: 400;
  }

  .mobile-nav-links > a.active,
  .mobile-nav-links > a[aria-current="page"] {
    color: #9b742c;
  }

  .mobile-nav-links > a.header-cta {
    min-height: 50px;
    justify-content: center;
    margin-top: 13px;
    padding: 0 14px !important;
    color: #fff !important;
    background: #073f34 !important;
    border: 0;
    border-radius: 9px;
  }

  .mobile-nav-links > a.header-cta::after {
    display: none;
  }

  .mobile-nav-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .mobile-nav-footer a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #073f34;
    background: #fff;
    border: 1px solid rgba(7, 63, 52, .13);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
  }

  /* Preserve the supplied artwork's natural 633:671 ratio. */
  .page-home .about-visual {
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
  }

  .page-home .about-visual::before {
    display: none !important;
  }

  .page-home .about-visual picture {
    width: 100%;
    display: block;
  }

  .page-home .about-visual img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    display: block;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 633 / 671 !important;
    border-radius: 15px !important;
    box-shadow: 0 18px 44px rgba(1, 36, 30, .14) !important;
  }

  .page-home .about-grid {
    gap: 30px !important;
  }

  /* Make the service-page enquiry card clearly readable. */
  .service-aside .contact-card {
    padding: 23px 20px !important;
    border-radius: 16px !important;
  }

  .service-aside .contact-card > span {
    width: 52px;
    height: 52px;
  }

  .service-aside .contact-card h3 {
    margin: 16px 0 10px !important;
    font-size: 30px !important;
  }

  .service-aside .contact-card p {
    margin-bottom: 7px;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .service-aside .contact-card-note {
    padding: 9px 0 17px !important;
    font-size: 13px !important;
  }

  .service-aside .contact-card .btn {
    min-height: 51px !important;
  }

  .service-aside .aside-phone {
    min-height: 48px;
    margin-top: 15px !important;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 63, 52, .12);
  }

  /* A useful two-action bar instead of two links calling the same number. */
  .mobile-action-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .mobile-action-bar a:first-child,
  .mobile-action-bar a.urgent,
  .mobile-action-bar a.mobile-enquire {
    display: flex !important;
    width: 100%;
    color: #073f34 !important;
    background: #fff !important;
    font-size: 10px !important;
  }

  .mobile-action-bar a.mobile-enquire {
    color: #fff !important;
    background: #073f34 !important;
  }

  .mobile-action-bar a.mobile-enquire .icon {
    color: #d4b46d;
  }

  /* Additional mobile resilience found during the audit. */
  .service-layout,
  .profile-layout,
  .article-layout,
  .contact-layout,
  .client-hub-layout,
  .about-introduction-grid,
  .about-clients-grid {
    min-width: 0 !important;
  }

  .contact-card,
  .aside-links,
  .article-prose,
  .client-hub-pane,
  .hero-form,
  .contact-form {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  details > summary {
    min-height: 48px;
  }

  .btn,
  .text-link,
  .aside-phone {
    -webkit-tap-highlight-color: transparent;
  }
}

@media only screen and (max-width: 360px) {
  .brand-copy strong {
    max-width: 155px !important;
    font-size: 12.5px !important;
  }

  .menu {
    min-width: 44px;
    width: 44px !important;
    padding: 0 !important;
  }

  .menu-label {
    display: none;
  }

  .mobile-nav-panel {
    width: 94vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-backdrop,
  .mobile-nav-panel {
    transition: none !important;
  }
}