/* ═══════════════════════════════════════════════════════════════
   BINNY SKIP BIN — brand stylesheet

   Written mobile-first. Every section is self-contained: it owns its
   own background, padding and inner width, and nothing uses negative
   margins or fixed heights. Sections cannot overlap each other because
   nothing is ever pulled outside its own box.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bn-orange:      #E67E22;
  --bn-orange-dk:   #C96A16;
  --bn-orange-soft: #FDF3E8;
  --bn-navy:        #002C5E;
  --bn-navy-dp:     #00203F;
  --bn-grey:        #343A40;
  --bn-soft:        #667A8E;
  --bn-line:        #DCE3EA;
  --bn-light:       #F4F6F8;
  --bn-white:       #FFFFFF;

  --bn-font: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bn-max: 1180px;
  --bn-pad: clamp(18px, 5vw, 40px);
}

/* ─── Reset and base ───────────────────────────────────────────── */

.binny *,
.binny *::before,
.binny *::after { box-sizing: border-box; }

body.binny {
  font-family: var(--bn-font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--bn-grey);
  background: var(--bn-white);
  overflow-x: hidden;          /* safety net against any stray wide element */
  -webkit-font-smoothing: antialiased;
}

.binny img,
.binny svg,
.binny video,
.binny iframe { max-width: 100%; height: auto; }

.binny h1, .binny h2, .binny h3, .binny h4, .binny h5 {
  font-family: var(--bn-font);
  font-weight: 700;
  line-height: 1.18;
  color: var(--bn-navy);
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
}

.binny p { overflow-wrap: break-word; }

.binny a { color: var(--bn-navy); }
.binny a:hover { color: var(--bn-orange); }

.binny :focus-visible { outline: 3px solid var(--bn-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .binny *, .binny *::before, .binny *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS

   A section is a full-width band. It never uses negative margins, so
   it cannot escape its own box or collide with the one above it.
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-sec {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-top: clamp(44px, 7vw, 84px);
  padding-bottom: clamp(44px, 7vw, 84px);
  clear: both;
}

.binny .bn-sec--tight {
  padding-top: clamp(30px, 4vw, 52px);
  padding-bottom: clamp(30px, 4vw, 52px);
}

/* ─── Full-width bands ─────────────────────────────────────────────
   Astra wraps page content in .ast-container with a max-width. On a
   page built from bands that constraint has to go, or every band stops
   short of the viewport edge while the header and footer run right
   across — which is exactly how it looked.

   The body class is added by the theme when the content contains bands,
   so blog posts keep their reading container. No negative margins, no
   100vw, so nothing can overflow or overlap.
   ─────────────────────────────────────────────────────────────── */

.bn-bands .site-content > .ast-container,
.bn-bands .ast-container > .site-content,
.bn-bands .site-content .ast-container,
.bn-bands .entry-content,
.bn-bands .ast-page-builder-template .site-content > .ast-container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Astra's boxed layouts add their own padding and shadow — not wanted
   on a banded page. */
.bn-bands .ast-separate-container .ast-article-single,
.bn-bands .ast-separate-container .site-main > .ast-row,
.bn-bands .ast-plain-container .site-content > .ast-container {
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: none;
}

.bn-bands .site-content { padding-top: 0; padding-bottom: 0; }
.bn-bands .entry-header { display: none; }

/* .alignfull gets no negative margins — the container is already gone. */
.binny .alignfull,
.binny .bn-sec.alignfull {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}

.binny .bn-wrap {
  width: 100%;
  max-width: var(--bn-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bn-pad);
  padding-right: var(--bn-pad);
}

/* Block editor adds its own margins to groups — remove them so section
   padding is the only thing controlling vertical rhythm. */
.binny .bn-sec.wp-block-group,
.binny .bn-wrap.wp-block-group { margin-top: 0; margin-bottom: 0; }

.binny .bn-wrap > *:first-child { margin-top: 0; }
.binny .bn-wrap > *:last-child { margin-bottom: 0; }

/* ─── Bands ────────────────────────────────────────────────────── */

.binny .bn-white  { background: var(--bn-white); }
.binny .bn-light  { background: var(--bn-light); }
.binny .bn-navy   { background: var(--bn-navy); color: #D6E1EC; }
.binny .bn-orange { background: var(--bn-orange); color: #4A2E08; }

.binny .bn-navy h1, .binny .bn-navy h2,
.binny .bn-navy h3, .binny .bn-navy h4 { color: var(--bn-white); }
.binny .bn-navy a { color: var(--bn-white); }
.binny .bn-navy a:hover { color: var(--bn-orange); }

.binny .bn-orange h1, .binny .bn-orange h2, .binny .bn-orange h3 { color: var(--bn-navy); }
.binny .bn-orange p { color: #52350A; }

/* Texture, contained by overflow so it can never bleed out */
.binny .bn-navy.bn-texture { overflow: hidden; }
.binny .bn-navy.bn-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(230, 126, 34, 0.05) 0 2px, transparent 2px 22px);
}
.binny .bn-navy.bn-texture > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   TYPE
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-eyebrow,
.binny .bn-eyebrow * {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--bn-orange) !important;
  margin: 0 0 14px !important;
}

.binny .bn-navy .bn-eyebrow,
.binny .bn-navy .bn-eyebrow * { color: var(--bn-orange) !important; }
.binny .bn-orange .bn-eyebrow,
.binny .bn-orange .bn-eyebrow * { color: var(--bn-navy) !important; }

.binny .bn-h1, .binny .bn-h1 * {
  font-size: clamp(31px, 5.6vw, 54px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  margin: 0 0 18px !important;
}

.binny .bn-h2, .binny .bn-h2 * {
  font-size: clamp(26px, 4.2vw, 40px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}

.binny .bn-h3, .binny .bn-h3 * {
  font-size: clamp(18.5px, 2.4vw, 23px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}

.binny .bn-h1 em, .binny .bn-h2 em { font-style: normal; color: var(--bn-orange); }
.binny .bn-orange .bn-h2 em { color: var(--bn-white); }

.binny .bn-lede, .binny .bn-lede * {
  font-size: clamp(16.5px, 1.9vw, 19px) !important;
  line-height: 1.65 !important;
  color: var(--bn-grey);
  max-width: 62ch;
  margin: 0 0 18px !important;
}

.binny .bn-navy .bn-lede, .binny .bn-navy .bn-lede * { color: #C7D6E5; }
.binny .bn-orange .bn-lede, .binny .bn-orange .bn-lede * { color: #52350A; }

.binny .bn-head { max-width: 66ch; margin-bottom: clamp(28px, 4vw, 44px); }

/* ═══════════════════════════════════════════════════════════════
   GRIDS

   auto-fit with a min() floor means a card can never be wider than
   its column, so nothing overflows at any screen width.
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-grid-2,
.binny .bn-grid-3,
.binny .bn-grid-4,
.binny .bn-grid-5 {
  display: grid;
  gap: clamp(14px, 2.2vw, 24px);
  width: 100%;
  align-items: stretch;
}

.binny .bn-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.binny .bn-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.binny .bn-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.binny .bn-grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.binny .bn-grid-2 > *,
.binny .bn-grid-3 > *,
.binny .bn-grid-4 > *,
.binny .bn-grid-5 > * {
  margin: 0 !important;
  min-width: 0;                 /* stops long words forcing overflow */
}

/* Core columns block — make it wrap instead of squashing */
.binny .bn-sec .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 48px);
  margin: 0;
  align-items: flex-start;
  width: 100%;
}

.binny .bn-sec .wp-block-column {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
}

.binny .bn-sec .wp-block-columns.bn-grid--hero { align-items: center; }

.binny .bn-sec .wp-block-column > *:first-child { margin-top: 0; }
.binny .bn-sec .wp-block-column > *:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-stat,
.binny .bn-svc,
.binny .bn-step {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border-radius: 8px;
}

.binny .bn-stat {
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  border-top: 3px solid var(--bn-orange);
  padding: 20px 22px;
}

.binny .bn-navy .bn-stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.binny .bn-stat p.bn-stat__num,
.binny .bn-stat .bn-stat__num {
  font-size: clamp(24px, 3.4vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--bn-orange) !important;
  margin: 0 0 6px !important;
  font-variant-numeric: tabular-nums;
}

.binny .bn-stat p:not(.bn-stat__num) {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bn-soft);
}

.binny .bn-navy .bn-stat p:not(.bn-stat__num) { color: #B9C9D9; }

/* Service cards */
.binny .bn-svc {
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  padding: 26px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.binny .bn-svc:hover {
  transform: translateY(-3px);
  border-color: var(--bn-orange);
  box-shadow: 0 10px 26px rgba(0, 44, 94, 0.1);
}

.binny .bn-svc h3 { margin: 0 0 10px !important; }
.binny .bn-svc h3 a { text-decoration: none; color: var(--bn-navy); }
.binny .bn-svc:hover h3 a { color: var(--bn-orange); }

.binny .bn-svc p {
  margin: 0 !important;
  color: var(--bn-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Process steps */
.binny .bn-step {
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  border-top: 3px solid var(--bn-orange);
  padding: 22px 22px;
}

.binny .bn-navy .bn-step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: var(--bn-orange);
}

.binny .bn-step + .bn-step { margin-top: 14px; }
.binny .bn-grid-4 .bn-step + .bn-step { margin-top: 0; }

.binny .bn-step p.bn-step__n {
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bn-orange) !important;
  margin: 0 0 8px !important;
}

.binny .bn-step h3 { font-size: 18px !important; margin: 0 0 8px !important; }
.binny .bn-step p:not(.bn-step__n) {
  color: var(--bn-soft);
  font-size: 15.5px;
  margin: 0 !important;
  line-height: 1.6;
}

.binny .bn-navy .bn-step p:not(.bn-step__n) { color: #B9C9D9; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  width: 100%;
}

.binny .bn-btns.wp-block-buttons { gap: 12px; }
.binny .bn-btns > .wp-block-button { margin: 0; }

.binny .bn-btn .wp-block-button__link,
.binny .bn-btn .elementor-button,
.binny a.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bn-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}

.binny .bn-btn--orange .wp-block-button__link,
.binny a.bn-btn--orange { background: var(--bn-orange); color: var(--bn-navy); }

.binny .bn-btn--orange .wp-block-button__link:hover,
.binny a.bn-btn--orange:hover {
  background: var(--bn-orange-dk); color: var(--bn-white); transform: translateY(-2px);
}

.binny .bn-btn--navy .wp-block-button__link,
.binny a.bn-btn--navy { background: var(--bn-navy); color: var(--bn-white); }

.binny .bn-btn--navy .wp-block-button__link:hover,
.binny a.bn-btn--navy:hover {
  background: var(--bn-navy-dp); color: var(--bn-white); transform: translateY(-2px);
}

.binny .bn-btn--outline .wp-block-button__link,
.binny a.bn-btn--outline {
  background: transparent; border-color: var(--bn-navy); color: var(--bn-navy);
}

.binny .bn-btn--outline .wp-block-button__link:hover,
.binny a.bn-btn--outline:hover { background: var(--bn-navy); color: var(--bn-white); }

.binny .bn-btn--ghost .wp-block-button__link,
.binny a.bn-btn--ghost {
  background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--bn-white);
}

.binny .bn-btn--ghost .wp-block-button__link:hover,
.binny a.bn-btn--ghost:hover { border-color: var(--bn-orange); color: var(--bn-orange); }

/* ═══════════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-facts {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.binny .bn-facts li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bn-line);
  font-size: 16px;
  min-width: 0;
}

.binny .bn-facts li span { color: var(--bn-soft); min-width: 0; }
.binny .bn-facts li strong { font-weight: 700; color: var(--bn-navy); text-align: right; min-width: 0; }

.binny .bn-navy .bn-facts li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.binny .bn-navy .bn-facts li strong { color: var(--bn-white); }

.binny .bn-ticks,
.binny .bn-crosses {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.binny .bn-ticks li,
.binny .bn-crosses li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 16px;
  line-height: 1.55;
}

.binny .bn-ticks li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 7px;
  height: 13px;
  border: solid var(--bn-orange);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.binny .bn-crosses li { color: var(--bn-soft); }
.binny .bn-crosses li::before {
  content: "\00d7";
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 21px;
  font-weight: 700;
  color: #B4423A;
  line-height: 1.4;
}

.binny .bn-suburbs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 4px 18px;
}

.binny .bn-suburbs li { font-size: 15.5px; color: var(--bn-soft); padding: 3px 0; }
.binny .bn-navy .bn-suburbs li { color: #B9C9D9; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.binny .bn-table,
.binny .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 560px;
}

.binny .bn-table th {
  background: var(--bn-navy);
  color: var(--bn-white);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 13px 15px;
  white-space: nowrap;
}

.binny .bn-table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--bn-line);
}

.binny .bn-table tr:nth-child(even) td { background: var(--bn-light); }

/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-acc {
  border-bottom: 1px solid var(--bn-line);
  margin: 0;
  width: 100%;
}

.binny .bn-navy .bn-acc { border-bottom-color: rgba(255, 255, 255, 0.16); }

.binny .bn-acc summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--bn-navy);
  position: relative;
}

.binny .bn-acc summary::-webkit-details-marker { display: none; }

.binny .bn-acc summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--bn-orange);
}

.binny .bn-acc[open] summary::after { content: "\2013"; }
.binny .bn-acc[open] summary { color: var(--bn-orange); }

.binny .bn-acc p {
  margin: 0 0 18px !important;
  color: var(--bn-grey);
  font-size: 16px;
  max-width: 74ch;
}

.binny .bn-navy .bn-acc summary { color: var(--bn-white); }
.binny .bn-navy .bn-acc p { color: #C7D6E5; }

/* ═══════════════════════════════════════════════════════════════
   CTA BAND
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-cta-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
  width: 100%;
  margin: 0;
}

.binny .bn-cta-in > * { margin: 0 !important; min-width: 0; }
.binny .bn-cta-in > .wp-block-group { flex: 1 1 340px; }
.binny .bn-cta-in .bn-btns { margin: 0; flex: 0 1 auto; }

/* ═══════════════════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-hero-img { margin: 0; width: 100%; }
.binny .bn-hero-img img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   HEADER

   Astra's structure matters here:
     .ast-above-header-bar        full viewport width
       .ast-builder-grid-row-container-inner   constrained to container
         .site-above-header-wrap               constrained

   The background has to sit on the OUTER bar. Putting it on an inner
   wrapper is what left white gaps either side of the blue strip.
   ═══════════════════════════════════════════════════════════════ */

.binny .ast-above-header-bar,
.binny .ast-above-header.ast-above-header-bar {
  background-color: var(--bn-navy);
  color: #C7D6E5;
  font-size: 14px;
  font-weight: 500;
}

/* Inner wrappers must stay transparent or they cover the bar edge-to-edge
   colour with their own constrained background. */
.binny .ast-above-header-bar .ast-builder-grid-row-container-inner,
.binny .ast-above-header-bar .ast-builder-grid-row-container,
.binny .ast-above-header-bar .site-above-header-wrap,
.binny .ast-above-header-wrap {
  background: transparent;
}

.binny .ast-above-header-bar a { color: var(--bn-white); text-decoration: none; }
.binny .ast-above-header-bar a:hover { color: var(--bn-orange); }
.binny .ast-above-header-bar p { margin: 0; }

/* An HTML element pasted into the header can end up wrapped in code or
   pre tags by the editor, which renders as a grey monospace box. Strip
   that back so a phone number looks like a phone number. */
.binny .site-header code,
.binny .site-header pre,
.binny .site-header kbd,
.binny .site-header samp,
.binny .ast-above-header-bar code,
.binny .ast-above-header-bar pre,
.binny .ast-above-header-bar kbd,
.binny .ast-above-header-bar samp {
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  white-space: normal;
}

/* ─── Primary bar ──────────────────────────────────────────────── */

.binny .site-header,
.binny .ast-primary-header-bar {
  background-color: var(--bn-white);
  border-bottom: 1px solid var(--bn-line);
}

/* Logo capped so it cannot crowd the menu into a second line. */
.binny .site-logo-img img,
.binny .custom-logo-link img {
  max-width: 190px;
  height: auto;
}

@media (max-width: 1100px) {
  .binny .site-logo-img img,
  .binny .custom-logo-link img { max-width: 160px; }
}

/* ─── Menu, on one line ────────────────────────────────────────────
   Keeping it to one row is a width budget: fewer items, tighter
   padding, no wrapping, and a button that does not sprawl.
   ─────────────────────────────────────────────────────────────── */

.binny .main-header-menu,
.binny .main-header-menu > .menu-item {
  flex-wrap: nowrap;
}

.binny .main-header-menu > .menu-item > .menu-link {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--bn-navy);
  text-transform: none;
  white-space: nowrap;
  padding-left: 13px;
  padding-right: 13px;
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}

@media (min-width: 922px) and (max-width: 1240px) {
  .binny .main-header-menu > .menu-item > .menu-link {
    font-size: 14.5px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.binny .main-header-menu > .menu-item > .menu-link:hover,
.binny .main-header-menu > .current-menu-item > .menu-link,
.binny .main-header-menu > .current-menu-ancestor > .menu-link,
.binny .main-header-menu > .current_page_parent > .menu-link {
  color: var(--bn-orange);
  box-shadow: inset 0 -3px 0 var(--bn-orange);
}

/* Dropdown arrow shouldn't add width */
.binny .main-header-menu .sub-arrow { margin-left: 3px; }

.binny .main-header-menu .sub-menu {
  background: var(--bn-white);
  border-top: 3px solid var(--bn-orange);
  box-shadow: 0 10px 30px rgba(0, 44, 94, 0.14);
  min-width: 230px;
}

.binny .main-header-menu .sub-menu .menu-link {
  color: var(--bn-navy);
  font-weight: 500;
  font-size: 15px;
  white-space: normal;
  box-shadow: none;
  padding: 10px 18px;
}

.binny .main-header-menu .sub-menu .menu-link:hover {
  background: var(--bn-light);
  color: var(--bn-orange);
  box-shadow: none;
}

/* ─── Header button ────────────────────────────────────────────────
   Astra's default is a large pill with left-aligned wrapped text.
   nowrap plus a centred flex box keeps it compact and balanced.
   ─────────────────────────────────────────────────────────────── */

.binny .ast-builder-button-wrap .ast-custom-button,
.binny .ast-header-button-1 .ast-custom-button,
.binny .ast-header-button-2 .ast-custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bn-orange);
  color: var(--bn-navy);
  font-family: var(--bn-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  padding: 12px 22px;
  border: 0;
  border-radius: 5px;
  min-height: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.binny .ast-builder-button-wrap .ast-custom-button:hover,
.binny .ast-header-button-1 .ast-custom-button:hover {
  background-color: var(--bn-orange-dk);
  color: var(--bn-white);
}

@media (min-width: 922px) and (max-width: 1240px) {
  .binny .ast-builder-button-wrap .ast-custom-button {
    font-size: 14px;
    padding: 11px 16px;
  }
}

/* Sticky header, desktop only. Mobile has the call bar instead. */
@media (min-width: 922px) {
  .binny #masthead { position: sticky; top: 0; z-index: 99; }
  .binny.admin-bar #masthead { top: 32px; }
}

.binny .ast-mobile-menu-trigger-fill,
.binny .ast-mobile-menu-trigger-minimal,
.binny .ast-mobile-menu-trigger-outline {
  background: var(--bn-orange);
  color: var(--bn-white);
  border-color: var(--bn-orange);
}

/* Off-canvas / mobile menu */
.binny .ast-mobile-popup-drawer .main-header-menu .menu-link,
.binny .ast-header-break-point .main-header-menu .menu-link {
  white-space: normal;
  box-shadow: none;
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG

   Reading width is set on .entry-content itself with a rem ceiling and
   a 100% floor, so it is wide on a desktop and full-bleed-safe on a
   phone. No fixed pixel widths anywhere.
   ═══════════════════════════════════════════════════════════════ */

/* Reading width on posts. Wide on a desktop, edge-safe on a phone.
   The rem ceiling keeps line length sane; the 100% floor means it never
   overflows a small screen. No fixed pixel widths. */
.binny .single .entry-content {
  max-width: min(100%, 70rem);
  margin-left: auto;
  margin-right: auto;
}

.binny .single .site-content > .ast-container,
.binny .blog .site-content > .ast-container,
.binny .archive .site-content > .ast-container {
  max-width: min(100%, 76rem);
}

.binny .single .entry-content {
  font-size: 17.5px;
  line-height: 1.72;
}

/* Nothing inside gets its own narrower cap — the container decides. */
.binny .entry-content > * { max-width: none; }

.binny .single .entry-header {
  max-width: min(100%, 70rem);
  margin-left: auto;
  margin-right: auto;
}

.binny .single .entry-title {
  font-size: clamp(26px, 4vw, 40px);
  margin: 0 0 12px;
}

.binny .blog .entry-title,
.binny .archive .entry-title { font-size: clamp(20px, 2.6vw, 26px); }
.binny .blog .entry-title a,
.binny .archive .entry-title a { text-decoration: none; }

.binny .entry-content h2 {
  font-size: clamp(21px, 3vw, 28px);
  margin: 40px 0 14px;
}

.binny .entry-content h3 {
  font-size: clamp(18px, 2.2vw, 21px);
  margin: 30px 0 10px;
}

.binny .entry-content p { margin: 0 0 20px; }

.binny .entry-content > ul,
.binny .entry-content > ol { padding-left: 22px; margin: 0 0 22px; }
.binny .entry-content li { margin-bottom: 7px; }

/* Tick and cross lists supply their own spacing — do not double it. */
.binny .entry-content .bn-ticks,
.binny .entry-content .bn-crosses { margin: 0 0 22px; }
.binny .entry-content .bn-ticks li,
.binny .entry-content .bn-crosses li { margin-bottom: 0; }

.binny .entry-content blockquote {
  border-left: 4px solid var(--bn-orange);
  background: var(--bn-light);
  padding: 16px 20px;
  margin: 26px 0;
  font-style: normal;
}

.binny .entry-meta,
.binny .entry-meta a,
.binny .ast-blog-meta-container { color: var(--bn-soft); font-size: 14.5px; }
.binny .entry-meta a:hover { color: var(--bn-orange); }

.binny .read-more a { font-weight: 700; color: var(--bn-orange); }

.binny .ast-pagination .page-numbers {
  border-radius: 5px;
  padding: 8px 13px;
}

.binny .ast-pagination .page-numbers.current {
  background: var(--bn-navy);
  color: var(--bn-white);
}

/* Post cards on the archive */
.binny .blog .ast-article-post,
.binny .archive .ast-article-post {
  border-bottom: 1px solid var(--bn-line);
  padding-bottom: 26px;
  margin-bottom: 26px;
}

.binny .blog .ast-article-post:last-of-type,
.binny .archive .ast-article-post:last-of-type { border-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-form {
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  border-radius: 9px;
  padding: clamp(20px, 4vw, 34px);
  width: 100%;
}

.binny .bn-form label,
.binny .ff-el-input--label label {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bn-navy);
  margin-bottom: 6px;
  display: block;
}

.binny input[type="text"],
.binny input[type="email"],
.binny input[type="tel"],
.binny input[type="date"],
.binny input[type="search"],
.binny select,
.binny textarea {
  width: 100%;
  max-width: 100%;
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  border-radius: 5px;
  padding: 12px 14px;
  font-family: var(--bn-font);
  font-size: 16px;          /* 16px or iOS zooms on focus */
  color: var(--bn-grey);
}

.binny input:focus,
.binny select:focus,
.binny textarea:focus {
  border-color: var(--bn-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.16);
}

.binny .ff-btn-submit,
.binny button[type="submit"],
.binny input[type="submit"] {
  background: var(--bn-orange) !important;
  color: var(--bn-navy) !important;
  border: 0;
  border-radius: 5px;
  font-family: var(--bn-font);
  font-weight: 700;
  font-size: 16.5px;
  padding: 14px 30px;
  cursor: pointer;
}

.binny .ff-btn-submit:hover,
.binny button[type="submit"]:hover {
  background: var(--bn-orange-dk) !important;
  color: var(--bn-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.binny .site-primary-footer-wrap,
.binny .site-above-footer-wrap { background: var(--bn-navy); color: #B9C9D9; }
.binny .site-below-footer-wrap { background: var(--bn-navy-dp); color: #8FA6BC; font-size: 14px; }

.binny .site-footer h2,
.binny .site-footer h3,
.binny .site-footer .widget-title {
  color: var(--bn-white);
  font-weight: 700;
  font-size: 16.5px;
  margin-bottom: 14px;
}

.binny .site-footer a { color: #B9C9D9; text-decoration: none; }
.binny .site-footer a:hover { color: var(--bn-orange); }

.binny .binny-credit {
  color: #8FA6BC;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 166, 188, 0.35);
}
.binny .binny-credit:hover { color: var(--bn-orange); border-bottom-color: var(--bn-orange); }

/* ═══════════════════════════════════════════════════════════════
   FLOATING ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

.binny-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 310;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 44, 94, 0.28);
  transition: transform 0.18s ease;
}

.binny-whatsapp svg { width: 31px; height: 31px; fill: #FFFFFF; }
.binny-whatsapp:hover { transform: scale(1.07); }
.binny-whatsapp:focus-visible { outline: 3px solid var(--bn-navy); outline-offset: 3px; }

.binny-callbar { display: none; }

@media (max-width: 767px) {
  .binny-callbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bn-orange);
    color: var(--bn-navy);
    padding: 14px;
    font-family: var(--bn-font);
    font-weight: 700;
    font-size: 16.5px;
    text-decoration: none;
    box-shadow: 0 -4px 18px rgba(0, 44, 94, 0.22);
  }
  .binny-callbar span { font-weight: 600; }
  .binny-callbar strong { font-weight: 800; }

  body.binny { padding-bottom: 62px; }

  .binny-whatsapp { right: 14px; bottom: 74px; width: 50px; height: 50px; }
  .binny-whatsapp svg { width: 27px; height: 27px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 921px) {
  .binny .bn-hide-mobile { display: none !important; }
}

@media (max-width: 600px) {
  body.binny { font-size: 16px; }

  .binny .bn-btns { gap: 10px; }
  .binny .bn-btn .wp-block-button__link,
  .binny a.bn-btn { width: 100%; }
  .binny .bn-btns > .wp-block-button { width: 100%; }

  .binny .bn-facts li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .binny .bn-facts li strong { text-align: left; }

  .binny .bn-cta-in { flex-direction: column; align-items: stretch; }
}

/* Print — someone will print a quote page eventually */
@media print {
  .binny-callbar, .binny-whatsapp, .site-header, .site-footer { display: none !important; }
  .binny .bn-sec { padding: 12px 0; }
}