@import url("site-base.css?v=2");

/* Hide the legacy text mark until locale branding is resolved. */
.brand-mark:not(.brand-mark-fallback){opacity:0!important}
.brand-mark.brand-mark-fallback{opacity:1!important}

/* The order action is part of the collapsed mobile navigation only. */
.mobile-nav-order{display:none}

/* The old hero demo is no longer part of the public homepage. */
.story-hero-copy .hero-actions [data-open-demo="hero"]{display:none!important}

/* Do not show the legacy static hero image while the matching coloured
   fallback for the randomly selected video is being resolved. */
.hero-poster>img{opacity:0}
.hero-poster.hero-backup-ready>img{opacity:1}
.hero-poster.has-rotating-video>img{opacity:0!important}

/* Keep the expanded desktop navigation compact enough for longer locales. */
@media (min-width:981px){
  .main-nav{gap:16px;font-size:.86rem}
  .main-nav a,.header-cta{white-space:nowrap}
  .header-inner{gap:12px}
}

@media (max-width:980px){
  .main-nav .mobile-nav-order{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin-top:4px;
    padding:10px 16px;
    border-radius:999px;
    background:var(--copper);
    color:#fff;
    font-weight:850;
  }
  .main-nav .mobile-nav-order:hover{
    background:var(--copper-dark);
    color:#fff;
  }

  /* Keep the summary/payment reassurance below the form on mobile. */
  .order-shell .order-summary{order:0}
}

/* On phones each guide step reads vertically: illustration first, copy below. */
@media (max-width:620px){
  .photo-guide .photo-guide-card{
    display:flex!important;
    flex-direction:column!important;
  }
  .photo-guide .photo-guide-card img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1.08!important;
    object-fit:cover!important;
  }
  .photo-guide .photo-guide-card figcaption{
    width:100%;
  }
}