/* =====================================================================
   STYLE EXPLORATION SANDBOX  (opt-in, loaded only via ?style=squared)
   - Softer "half-way" corners (10px) instead of pill / sharp
   - Inter font on the nav menu (larger), tagline left untouched
   - Hero subtitle line hidden
   Toggle on : any page + ?style=squared   (remembered as you browse)
   Toggle off: any page + ?style=round
   ===================================================================== */

/* ---- 1. Half-way rounded corners (10px) on the boxy UI ---- */
*, *::before, *::after { border-radius: 10px !important; }

/* keep genuinely circular elements round */
.live-dot,
.pkg-band .live-dot,
.branches__card-dot,
.branches__merge-node,
.branches-mobile__merge-node,
.modal__dot,
.step__number,
.team__photo-wrapper,
.team__photo,
.contact__avatar,
.checklist li::before,
.faq__icon { border-radius: 50% !important; }

/* keep the organic (blob) hero photo mask exactly as designed */
.hero__photo-shape::before { border-radius: 58% 42% 46% 54% / 52% 46% 54% 48% !important; }
.hero__photo-img          { border-radius: 49% 51% 45% 55% / 53% 47% 53% 47% !important; }

/* full-width / structural blocks should stay flush (no rounded notches at the viewport edge) */
html, body, main,
section, header, footer, nav,
.nav, .hero, .hero__video-wrap, .hero__bg-img,
.page-hero, .page-hero__wave,
.services, .testimonials, .testimonials__mosaic, .testimonials__mosaic-overlay,
.how-it-works, .team, .footer,
.pkg-band, .pkg-band__bg, .pkg-band__scrim { border-radius: 0 !important; }

/* ---- 2. Arvo on the nav menu + buttons (bigger); do NOT touch the tagline ---- */
.nav__links a,
.nav__droptoggle {
  font-family: var(--font-display), Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.nav__cta {
  font-family: var(--font-display), Georgia, serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
}
.nav__dropdown .nav__droptext strong {
  font-family: var(--font-display), Georgia, serif !important;
}
/* yellow hover halo above the menu headers (instead of the white one) */
.nav__links a::after { background-image: url('assets/images/halo.png') !important; }
/* make the dropdown caret clearly visible */
.nav__droptoggle .nav__caret {
  font-size: 0.8rem !important;
  opacity: 1 !important;
  margin-left: 7px !important;
  display: inline-block !important;
}
/* remove the little white divider line after the tagline */
.nav__tagline { border-right: none !important; padding-right: 0 !important; margin-right: 0 !important; }
/* persistent yellow halo centred between the tagline and the menu (space-between middle item) */
.nav__halo { display: none; }
@media (min-width: 1025px) {
  .nav__halo {
    display: block !important;
    flex: 0 0 auto !important;
    width: 62px !important;
    height: 42px !important;
    background: url('assets/images/halo.png') no-repeat center / contain !important;
    opacity: 0.95 !important;
  }
}

/* ---- 3. Hide the hero subtitle line ---- */
.hero__subtitle { display: none !important; }

/* ---- 4. "Let us help" button: smaller + centred text, Arvo ---- */
.hero__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 12px 30px !important;
  font-family: var(--font-display), Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ---- 5. Hero hierarchy (per mockup) ----
   order: "Perth's Building Brokers" pill (main line)  ->  cycling word  ->
   "We'll sort it." (yellow highlighter sweep). Button moves to bottom-centre. */
/* paint the hero wallpaper as the hero's own background (was an <img> child),
   so .hero__content can be un-positioned and the button can anchor to the hero */
.hero { background-image: url('assets/images/pb-wallpaper.jpg') !important; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: cover !important; padding-top: 150px !important; padding-bottom: 150px !important; }
@media (max-width: 768px) { .hero { padding-top: 108px !important; padding-bottom: 108px !important; } }
.hero__video-wrap { display: none !important; }
.hero__content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; position: static !important; }
.hero__title { display: contents !important; }              /* dissolve so kw + span can reorder */
/* centre the cycling word too */
.hero--split .hero__rotating-words { justify-content: center !important; }
.hero--split .hero__rotating-word { left: 0 !important; right: 0 !important; text-align: center !important; }

/* MAIN line: big orange pill (jiggle removed) */
.hero__title-kw {
  order: 1 !important;
  display: inline-block !important;
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(1.65rem, 3.2vw, 2.585rem) !important;   /* +10% */
  line-height: 1.12 !important;
  white-space: nowrap !important;             /* keep on one line */
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
  background: var(--orange) !important;
  padding: 7px 22px !important;
  border-radius: 10px !important;
  margin: 0 0 16px !important;
  box-shadow: 0 6px 16px rgba(224, 122, 58, 0.28) !important;   /* subtle depth */
}
.hero__title-kw.jiggle { animation: none !important; }

/* cycling word, second, sized to the mockup */
.hero__rotating { order: 2 !important; margin: 0 0 14px !important; }
.hero--split .hero__rotating { height: clamp(2.78rem, 5.57vw, 4.3rem) !important; }
.hero--split .hero__rotating-word { font-size: clamp(2.15rem, 4.68vw, 3.42rem) !important; }   /* +15% then +10% */

/* "We'll sort it." with a rustic marker-pen highlight that sweeps in */
.hero__title span {
  order: 3 !important;
  position: relative !important;
  display: inline-block !important;
  color: var(--dark) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.83rem, 3.8vw, 2.72rem) !important;   /* +15% then +10% */
  line-height: 1.1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0 0.18em !important;
  background: none !important;
  margin: 0 !important;
  isolation: isolate !important;
}
.hero__title span.jiggle { animation: none !important; }   /* no jiggle */
/* the marker ink: tilted, uneven organic edges, soft ends, revealed by a scaleX sweep */
.hero__title span::before {
  content: '';
  position: absolute;
  left: -6px; right: -8px;
  top: 6%; bottom: 4%;
  background: linear-gradient(101deg,
      rgba(255,222,89,0) 0.5%,
      rgba(255,214,64,0.9) 4%,
      rgba(255,222,89,0.92) 48%,
      rgba(255,210,56,0.88) 93%,
      rgba(255,222,89,0) 99.5%);
  border-radius: 48% 52% 47% 53% / 62% 58% 42% 38%;
  transform: rotate(-1.6deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.hero__title span.hero-swept::before { transform: rotate(-1.6deg) scaleX(1); }

/* move "Let us help" to the bottom-centre of the hero; hide the scroll hint.
   (content is offset left by --side, so centre on the viewport, not the column) */
.hero__selector {
  position: absolute !important;
  left: 50% !important;
  bottom: 30px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
}
.hero__scroll-hint { display: none !important; }

@media (max-width: 1024px) {
  .hero__content { align-items: center !important; }
}
@media (min-width: 1025px) {
  /* centre the text block in the space between the page's left edge and the photo */
  .hero__content {
    align-self: flex-start !important;
    margin: 0 !important;
    width: calc(100vw - var(--side) - min(36vw, 425px) - 24px) !important;
    text-align: center !important;
  }
  .hero__photo-shape { top: 55% !important; }   /* lower the photo a touch */
}

/* ---- 6. "Get Started" tab: uses the supplied PNG (white tab + yellow rim), reaching the screen edge ---- */
@media (min-width: 1025px) {
  .nav__cta {
    position: relative !important;
    margin: 0 !important;
    margin-right: min(-36px, calc(622px - 50vw)) !important;  /* nudge a few px past the right edge */
    width: 200px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px 4px 58px !important;            /* text clears the curved left, minimal white on the right */
    background: url('assets/images/get-started-tab.png') no-repeat left center !important;
    background-size: cover !important;
    color: var(--orange) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
    clip-path: none !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  .nav__cta::before { display: none !important; }
  .nav__cta::after { display: none !important; }  /* no hover halo on the tab */
  .nav__cta:hover { background: url('assets/images/get-started-tab.png') no-repeat left center !important; background-size: cover !important; }
}