/* Phase 24N — official logo and cross-device professional alignment */

:root {
  --tn-content-width: 1320px;
  --tn-page-gutter: clamp(22px, 4.5vw, 76px);
}

/* Preserve the supplied logo as one indivisible piece of artwork. */
.site-header .brand {
  display: block;
  flex: 0 1 300px;
  width: clamp(230px, 21vw, 300px);
  min-width: 220px;
  aspect-ratio: 1500 / 560;
  overflow: hidden;
  background: url("../assets/brand/truenorth-official-header.webp") center / contain no-repeat;
}

.site-header .brand-mark,
.site-header .brand-type {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header {
  min-height: 102px;
  padding-inline: var(--tn-page-gutter);
  gap: clamp(18px, 2.2vw, 38px);
  background: rgba(250,240,232,.97);
}

.site-header .site-nav {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: clamp(10px, 1.15vw, 20px);
  font-size: clamp(12px, .92vw, 14px);
}

.site-header .site-nav > a {
  flex: 0 0 auto;
}

.site-header .language-switch-featured {
  padding: 8px 10px;
}

.site-header .language-switch-featured small {
  display: none;
}

.site-header .nav-cta {
  padding: 12px 15px;
}

/* Keep large screens intentional instead of letting cards and copy drift apart. */
main > .section > :where(
  .section-heading,
  .service-grid,
  .conversion-card-grid,
  .process-grid,
  .feedback-heading,
  .feedback-card-grid,
  .feedback-verification,
  .feedback-cta,
  .compliance-grid
) {
  width: min(100%, var(--tn-content-width));
  margin-left: auto;
  margin-right: auto;
}

main > .section.centered > :where(h2, p) {
  margin-left: auto;
  margin-right: auto;
}

.section-heading {
  width: 100%;
}

.service-grid,
.conversion-card-grid,
.process-grid {
  align-items: stretch;
}

.service-card,
.conversion-card,
.process-step,
.feedback-card {
  height: 100%;
}

/* Maintain a strong, readable hero without oversized desktop copy. */
.premium-fullwidth-hero-v20 .hero-content {
  width: min(680px, 48vw);
  margin-left: var(--tn-page-gutter);
}

.premium-fullwidth-hero-v20 h1 {
  font-size: clamp(50px, 4.7vw, 74px);
}

/* The full logo needs more horizontal room than the former icon-and-type lockup. */
@media (max-width: 1260px) {
  body {
    padding-bottom: 76px;
    overflow-x: hidden;
  }

  .site-header {
    min-height: 84px;
    padding: 9px 18px;
  }

  .site-header .brand {
    flex: 0 1 245px;
    width: min(245px, calc(100vw - 92px));
    min-width: 0;
  }

  .mobile-menu-toggle {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(189,138,56,.45);
    border-radius: 10px;
    background: #fffdf8;
    cursor: pointer;
    z-index: 1002;
  }

  .mobile-menu-toggle span {
    width: 21px;
    height: 2px;
    border-radius: 99px;
    background: var(--green-dark);
    transition: transform .25s ease, opacity .25s ease;
  }

  .site-header .site-nav {
    position: fixed;
    inset: 84px 0 auto 0;
    display: none !important;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    padding: 18px 18px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: #fffdf8;
    border-bottom: 1px solid rgba(189,138,56,.28);
    box-shadow: 0 18px 40px rgba(8,42,33,.14);
    z-index: 1001;
  }

  .site-header .site-nav.mobile-open {
    display: flex !important;
  }

  .site-header .site-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 9px;
    font-size: 15px;
  }

  .site-header .site-nav .language-switch {
    order: -1;
    min-height: 54px;
  }

  .site-header .language-switch-featured small {
    display: block;
  }

  .site-header .site-nav .nav-cta {
    display: none !important;
  }

  body.mobile-menu-active .site-nav .nav-cta {
    display: flex !important;
  }

  body.mobile-menu-active .mobile-booking-bar {
    display: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1260px) {
  .mobile-booking-bar {
    position: fixed;
    display: flex;
    left: 18px;
    right: 18px;
    bottom: 12px;
    z-index: 1100;
    height: 58px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--gold);
    border-radius: 14px;
    background: linear-gradient(135deg,var(--green-dark),#155441);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 12px 34px rgba(7,36,28,.34);
  }
}

@media (max-width: 760px) {
  :root {
    --tn-page-gutter: 20px;
  }

  .site-header {
    min-height: 78px;
    padding: 8px 14px;
  }

  .site-header .brand {
    flex-basis: 214px;
    width: min(214px, calc(100vw - 82px));
  }

  .site-header .site-nav {
    inset-block-start: 78px;
    max-height: calc(100vh - 78px);
  }

  .premium-fullwidth-hero-v20 .hero-content {
    width: auto;
    margin: 0;
    padding: 330px 20px 48px;
  }

  .premium-fullwidth-hero-v20 h1 {
    font-size: clamp(40px, 10.8vw, 54px);
  }

  .feedback-card-grid {
    grid-template-columns: 1fr;
  }

  .feedback-card:last-child {
    grid-column: auto;
    max-width: none;
  }
}

@media (max-width: 390px) {
  .site-header .brand {
    flex-basis: 188px;
    width: min(188px, calc(100vw - 78px));
  }
}