/* Bridehouse mobile system
   The source page is an editorial desktop export. At phone widths we keep its
   type, palette and generous feel, but replace desktop composition with a
   deliberate single-column reading order. */

html,
body {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  body,
  #dc-root,
  #dc-root > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* All page containers use the viewport as their only available width. */
  #dc-root [style*="max-width: 1360px"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Header: logo in the centre, one calm action on the right. */
  #dc-root > div > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
  }

  #dc-root > div > div:first-child > div {
    height: 72px !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 10px !important;
  }

  #dc-root > div > div:first-child nav {
    display: none !important;
  }

  #dc-root > div > div:first-child > div > a[href="#top"] {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
  }

  #dc-root > div > div:first-child > div > a[href="#top"] > div:first-child {
    font-size: 18px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #dc-root > div > div:first-child > div > a[href="#top"] > div:last-child {
    margin-top: 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.27em !important;
    white-space: nowrap !important;
  }

  #dc-root > div > div:first-child > div > div:last-child {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  #dc-root > div > div:first-child > div > div:last-child > a:not([href="#book"]):not([href="#top"]) {
    display: none !important;
  }

  #dc-root > div > div:first-child a[href="#book"] {
    display: inline-block !important;
    padding: 12px 15px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }

  /* Replace every desktop grid with a readable mobile stack. */
  #dc-root [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 42px !important;
  }

  #dc-root section,
  #dc-root footer {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #dc-root section[style*="padding: 110px 0"],
  #dc-root section[style*="padding: 120px 0"],
  #dc-root section[style*="padding: 130px 0"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* Hero: short intro, then image, then the supporting proof. */
  #dc-root section#top > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #dc-root section#top > div > div:first-child {
    padding: 68px 0 54px !important;
  }

  #dc-root section#top h1 {
    max-width: 9.5em !important;
    margin-bottom: 26px !important;
    font-size: clamp(42px, 11vw, 56px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.02em !important;
  }

  #dc-root section#top p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 30px !important;
  }

  #dc-root section#top > div > div:first-child > div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  #dc-root section#top > div > div:first-child > div[style*="display: flex"] > a {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 18px !important;
    font-size: 10px !important;
  }

  #dc-root section#top > div > div:first-child > div[style*="repeat(3"] {
    margin-top: 42px !important;
    padding-top: 24px !important;
    gap: 24px !important;
  }

  #dc-root section#top > div > div:last-child {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 48px !important;
  }

  /* Image frames get a stable portrait ratio instead of desktop pixel heights. */
  #dc-root div:has(> image-slot) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #dc-root section#top > div > div:last-child > div:has(> image-slot) {
    aspect-ratio: 4 / 5 !important;
  }

  #dc-root image-slot {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Desktop caption cards become normal content below their image. */
  #dc-root section#top > div > div:last-child > div[style*="position: absolute"] {
    position: static !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 18px 0 0 18px !important;
  }

  #dc-root [style*="position: sticky"] {
    position: static !important;
  }

  #dc-root h2 {
    font-size: clamp(36px, 9vw, 50px) !important;
    line-height: 1.02 !important;
  }

  #dc-root p {
    max-width: 100% !important;
  }

  #dc-root table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 600px) {
  #dc-root [style*="max-width: 1360px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #dc-root section[style*="padding: 110px 0"],
  #dc-root section[style*="padding: 120px 0"],
  #dc-root section[style*="padding: 130px 0"] {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  #dc-root section#top > div > div:first-child {
    padding-top: 54px !important;
    padding-bottom: 44px !important;
  }

  #dc-root section#top h1 {
    max-width: 10em !important;
    font-size: clamp(39px, 10.5vw, 50px) !important;
    line-height: 0.98 !important;
  }

  #dc-root section#top > div > div:first-child > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #dc-root [style*="grid-template-columns"] {
    gap: 32px !important;
  }

  #dc-root div:has(> image-slot) {
    aspect-ratio: 4 / 5 !important;
  }

  #dc-root [style*="display: flex"] > a {
    min-width: 0 !important;
  }
}

/* Runtime-rendered root corrections */
@media (max-width: 900px) {
  #dc-root,
  #dc-root > .sc-host,
  #dc-root > .sc-host > div[data-dc-tpl] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* The actual sticky header is the first child of the rendered template. */
  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child {
    height: 72px !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child nav {
    display: none !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > a[href="#top"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > a[href="#top"] > div:first-child {
    font-size: 18px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > a[href="#top"] > div:last-child {
    margin-top: 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.27em !important;
    white-space: nowrap !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > div:last-child > a:not([href="#book"]):not([href="#top"]) {
    display: none !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child a[href="#book"] {
    display: inline-block !important;
    padding: 12px 15px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 600px) {
  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child {
    padding: 0 16px !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child > a[href="#top"] > div:first-child {
    font-size: 16px !important;
  }

  #dc-root > .sc-host > div[data-dc-tpl] > div:first-child a[href="#book"] {
    padding: 11px 13px !important;
    font-size: 9px !important;
  }
}

/* One-page mobile navigation: anchors scroll to sections already on the page. */
.mobile-menu {
  display: none;
}

@media (max-width: 900px) {
  #dc-root .mobile-menu {
    display: block !important;
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    z-index: 80 !important;
  }

  #dc-root .mobile-menu summary {
    display: inline-block !important;
    padding: 10px 8px !important;
    color: #2B2521 !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  #dc-root .mobile-menu nav {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: -8px !important;
    display: grid !important;
    min-width: 190px !important;
    padding: 12px !important;
    background: #FCFAF7 !important;
    border: 1px solid #E8E1D7 !important;
    box-shadow: 0 12px 28px rgba(43, 37, 33, 0.12) !important;
  }

  #dc-root .mobile-menu nav a {
    display: block !important;
    padding: 10px 8px !important;
    color: #5E564D !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 900px) {
  /* There is one brand link on the page; keep it visible in the mobile bar. */
  #dc-root a[href="#top"] {
    display: block !important;
  }

  /* The export's desktop-link rule also catches this brand link; cancel it. */
  #dc-root > div > div:first-child > div > a[href="#top"] {
    display: block !important;
  }

  #dc-root > div > div:first-child > div > div:last-child > a[href="#top"] {
    display: block !important;
  }
}

/* Final header geometry: template > sticky wrapper > inner grid. */
@media (max-width: 900px) {
  #dc-root > .sc-host > div > div:first-child > div:first-child {
    height: 72px !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > nav {
    display: none !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > a[href="#top"] {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > a[href="#top"] > div:first-child {
    font-size: 18px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > a[href="#top"] > div:last-child {
    margin-top: 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.27em !important;
    white-space: nowrap !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > div:last-child > a:not([href="#book"]):not([href="#top"]) {
    display: none !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > div:last-child > a[href="#book"] {
    display: inline-block !important;
    padding: 11px 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 600px) {
  #dc-root > .sc-host > div > div:first-child > div:first-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > a[href="#top"] > div:first-child {
    font-size: 16px !important;
  }
}

@media (max-width: 900px) {
  #dc-root > .sc-host > div > div:first-child > div:first-child {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #dc-root > .sc-host > div > div:first-child > div:first-child > div:last-child {
    grid-column: 3 !important;
  }
}