/* Tarmak — global mobile responsive overrides */

:root {
  --nav-height: 4.5rem;
}

@media (max-width: 767px) {
  :root {
    --nav-height: 4rem;
  }
}

html {
  overflow-x: clip;
}

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

/* ── Navigation & mobile menu ── */
@media (max-width: 767px) {
  #mobileMenu {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-inner {
    min-height: var(--nav-height);
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .logo-wrap img,
  .logo-img,
  .logo-img--green {
    height: 36px !important;
    max-width: 180px !important;
  }

  .logo-wrap {
    height: 36px !important;
  }

  #menuBtn {
    flex-shrink: 0;
  }
}

/* ── Footer ── */
@media (max-width: 767px) {
  .site-footer__inner {
    padding-top: 3rem;
  }

  .site-footer__top {
    gap: 2rem;
    padding-bottom: 2.5rem;
  }

  .site-footer__brand {
    max-width: none;
  }

  .site-footer__tagline {
    margin-bottom: 1.25rem;
  }

  .site-footer__standards {
    padding: 1.25rem 0;
    gap: 0.5rem 0.75rem;
  }

  .site-footer__bottom {
    padding: 1.25rem 0 1.5rem;
  }

  .site-footer--compact .site-footer__inner {
    padding-top: 2.25rem;
  }

  .site-footer--compact .site-footer__top {
    gap: 1.75rem;
  }
}

/* ── Homepage — section padding (Tailwind py-section-padding) ── */
@media (max-width: 767px) {
  section.py-section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #expertise.py-section-padding,
  #accreditations.py-section-padding,
  #events.py-section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ── Homepage hero ── */
@media (max-width: 767px) {
  .hero-static__inner {
    padding: 5.25rem 0 1.5rem;
    align-items: flex-end;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .hero-trust-pills {
    gap: 0.35rem;
  }

  .hero-trust-pill {
    white-space: normal;
    font-size: 0.5625rem;
    padding: 0.35rem 0.65rem;
    line-height: 1.35;
  }

  .hero-trust-phone {
    justify-content: center;
    width: 100%;
  }

  .hero-desc {
    padding-left: 1rem;
  }

  .hero-headline {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
}

@media (max-width: 479px) {
  .hero-static--video-bg {
    min-height: auto;
  }
}

/* ── Homepage accreditations grid ── */
@media (max-width: 639px) {
  #accreditations .grid {
    grid-template-columns: 1fr;
  }

  #accreditations .grid > div {
    padding: 1.25rem;
  }
}

/* ── About section — visual overlays ── */
@media (max-width: 639px) {
  .about-section__locations {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    font-size: 0.625rem;
    padding: 0.5rem 0.75rem;
    justify-content: center;
  }

  .about-section__badge {
    position: static;
    margin-top: 0.75rem;
    min-width: 0;
    width: 100%;
    padding: 1rem 1.15rem;
  }

  .about-section__badge-num {
    font-size: 2rem;
  }

  .about-section__video-label {
    left: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.625rem;
  }

  .about-section__play {
    width: 3.75rem;
    height: 3.75rem;
  }

  .about-section__play .material-symbols-outlined {
    font-size: 2.25rem;
  }
}

/* ── Stats strip ── */
@media (max-width: 399px) {
  .stats-strip__inner {
    grid-template-columns: 1fr;
  }

  .stats-strip__item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0.75rem;
  }

  .stats-strip__item:last-child {
    border-bottom: none;
  }
}

/* ── Inner page heroes & main content ── */
@media (max-width: 767px) {
  .about-page-hero,
  .contact-page-hero,
  .accred-page-hero,
  .svc-page-hero,
  .gallery-page-hero,
  .events-page-hero,
  .event-detail-page-hero {
    position: relative;
    min-height: auto;
    max-height: none;
    height: auto;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  .about-page-hero__image,
  .contact-page-hero__image,
  .accred-page-hero__image,
  .svc-page-hero__image,
  .gallery-page-hero__image,
  .events-page-hero__image,
  .event-detail-page-hero__image {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    max-height: none;
    height: 100%;
  }

  .about-page-hero__overlay,
  .contact-page-hero__overlay,
  .accred-page-hero__overlay,
  .svc-page-hero__overlay,
  .gallery-page-hero__overlay,
  .events-page-hero__overlay,
  .event-detail-page-hero__overlay {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    align-self: stretch;
    justify-content: flex-end;
    padding: 1.5rem 0 1.75rem;
    min-height: 280px;
    box-sizing: border-box;
  }


  .about-page-hero__overlay {
    padding-left: var(--about-gutter, 20px);
    padding-right: var(--about-gutter, 20px);
  }

  .about-page-hero__title,
  .contact-page-hero__title,
  .accred-page-hero__title,
  .svc-page-hero__title,
  .gallery-page-hero__title,
  .events-page-hero__title,
  .event-detail-page-hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .about-page-hero__lead,
  .accred-page-hero__lead,
  .contact-page-hero__lead,
  .events-page-hero__lead,
  .event-detail-page-hero__lead {
    max-width: 100%;
  }

  .gallery-page {
    padding-top: 4rem;
  }

  .gallery-page__top {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .gallery-page__title {
    font-size: clamp(1.625rem, 6vw, 2rem);
  }

  .gallery-page__grid-wrap {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .svc-page {
    padding-top: 4rem;
  }

  .svc-page .svc-nav--sidebar .svc-nav__btn {
    min-width: 8.5rem;
    max-width: 12rem;
    font-size: 0.75rem;
  }
}

/* ── News & insights ── */
@media (max-width: 639px) {
  #events .flex.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .news-section__featured-title {
    font-size: 1.25rem;
  }

  .news-section__featured-body {
    padding: 1.25rem;
  }
}

/* ── CTAs — full width on small screens ── */
@media (max-width: 639px) {
  .svc-catalog__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-catalog__cta a {
    justify-content: center;
    width: 100%;
  }

  .about-section__cta {
    width: 100%;
    justify-content: center;
  }

  .svc-catalog__header-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Services page — sidebar & tables ── */
@media (max-width: 767px) {
  .svc-detail,
  .svc-panel {
    scroll-margin-top: calc(var(--nav-height) + 0.5rem);
  }

  .svc-table thead {
    display: none;
  }

  .svc-table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
  }

  .svc-table tbody tr:hover td {
    background: transparent;
  }

  .svc-table td {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
    min-width: 0;
    word-break: break-word;
  }

  .svc-table td::before {
    content: attr(data-label);
    display: block;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #016644;
    margin-bottom: 0.2rem;
  }

  .svc-table td + td {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eef2f1;
  }

  .svc-table-wrap {
    overflow-x: visible;
    padding: 0 1rem 1rem;
  }

  .svc-table {
    min-width: 0 !important;
  }

  .svc-catalog--page .svc-detail .svc-table-wrap {
    padding: 0 1rem 1rem;
  }

  .svc-detail__hero-overlay {
    padding: 1rem 1.25rem;
  }

  .svc-detail__title {
    font-size: 1.125rem;
  }

  .svc-detail__hero {
    aspect-ratio: 16 / 9;
    min-height: 140px;
    max-height: 200px;
  }

  .svc-division {
    padding: 1.25rem 1.15rem 1.35rem;
  }

  .svc-division__num {
    font-size: 1.5rem;
  }
}

/* ── Accreditations page ── */
@media (max-width: 767px) {
  .accred-intro,
  .accred-section,
  .accred-standards {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .accred-card {
    padding: 1.5rem 1.25rem;
  }

  .accred-card--reg {
    padding: 1.5rem 1.25rem;
  }

  .accred-cta-band__inner {
    align-items: stretch;
  }

  .accred-cta-band__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── About page ── */
@media (max-width: 767px) {
  .about-split,
  .about-mv,
  .about-page__values,
  .about-team,
  .about-message {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .about-mv__card {
    padding: 1.5rem 1.25rem;
  }

  .about-split__badge {
    bottom: 1rem;
    right: 1rem;
    padding: 1rem 1.15rem;
  }

  .about-split__badge-num {
    font-size: 2rem;
  }

  .about-cta-band__inner {
    align-items: stretch;
  }

  .about-cta-band__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Contact page ── */
@media (max-width: 767px) {
  .contact-form,
  .contact-info-card {
    padding: 1.25rem 1rem;
  }

  .contact-form__submit {
    width: 100%;
  }
}

/* ── Segment cards & what-we-do ── */
@media (max-width: 767px) {
  .wwd-section {
    padding: 4rem 0;
    background-size: 200px auto;
    background-position: right -40px bottom -20px;
  }

  .wwd-wrap {
    width: 100%;
    max-width: 100%;
  }

  .wwd-fade {
    width: 100%;
    max-width: 100%;
  }

  .segment-card {
    min-height: auto;
  }

  .segment-card__readmore a {
    width: 44px;
    height: 44px;
  }
}

/* ── Homepage contact CTA band ── */
@media (max-width: 639px) {
  #contact .flex.flex-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  #contact .flex.flex-wrap a {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }
}

/* ── Gallery (home + page) ── */
@media (max-width: 639px) {
  .gallery-section__head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery-section__link {
    min-height: 44px;
    align-items: center;
  }

  .gallery-section__cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #gallery.gallery-section {
    padding-bottom: 4rem;
  }

  .gallery-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-filters {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .gallery-filters__btn {
    min-height: 44px;
    padding: 0.65rem 1rem;
  }
}

/* ── Events listing toolbar ── */
@media (max-width: 639px) {
  .events-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .events-page__filters {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .events-page__filter {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  .events-page__body,
  .event-detail-page__body {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
}

/* ── About page split overlays ── */
@media (max-width: 639px) {
  .about-split__visual {
    overflow: visible;
    max-height: none;
    aspect-ratio: auto;
  }

  .about-split__visual img {
    aspect-ratio: 4 / 5;
    max-height: 420px;
  }

  .about-split__locations {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    font-size: 0.625rem;
    padding: 0.5rem 0.75rem;
    justify-content: center;
  }

  .about-split__badge {
    position: static;
    margin-top: 0.75rem;
    min-width: 0;
    width: 100%;
    padding: 1rem 1.15rem;
    box-sizing: border-box;
  }
}

/* ── Contact form — avoid iOS zoom + section spacing ── */
@media (max-width: 767px) {
  .contact-main {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea {
    font-size: 1rem;
  }
}

/* ── Services catalog — scroll padding & touch targets ── */
@media (max-width: 991px) {
  .svc-catalog--preview .svc-nav,
  .svc-catalog--page .svc-nav--tabs {
    scroll-padding-inline: 1rem;
    padding-inline: 0.25rem;
  }
}

@media (max-width: 767px) {
  .svc-catalog {
    padding: 3rem 0;
  }

  .svc-preview__link {
    min-height: 44px;
    padding: 0.75rem 1rem;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .svc-catalog__cta .svc-download {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ── Footer social touch targets ── */
@media (max-width: 767px) {
  .site-footer__social a {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ── Homepage about section padding ── */
@media (max-width: 767px) {
  .about-section {
    padding: 4rem 0 2.5rem;
  }
}

/* ── Global mobile safety ── */
@media (max-width: 767px) {
  body {
    overflow-x: clip;
  }

  .px-margin-mobile {
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  }

  main,
  .about-page,
  .contact-page,
  .svc-page,
  .gallery-page,
  .events-page,
  .event-detail-page,
  .accred-page {
    overflow-x: clip;
  }
}