/* ═══════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MONTSERRAT — SELF-HOSTED

   Was loaded from fonts.googleapis.com, which sent every visitor's IP
   to Google on every page view for a typeface. Now served from this
   theme, so the site makes no third-party request at all.

   These are the SAME two files Google was serving: Montserrat v31
   variable woff2, latin and latin-ext subsets. Google declares one
   @font-face per weight all pointing at one variable file; the
   `font-weight: 400 800` range below is the equivalent and the browser
   instantiates the same weights off the same axis.

   The unicode-range values are copied from Google's own stylesheet, so
   a browser still downloads latin-ext only if the page needs it.

   Montserrat is licensed under the SIL Open Font License 1.1, which
   permits self-hosting.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bn-orange:      #E67E22;
  --bn-orange-dk:   #C96A16;
  /* Orange as LARGE text (>=24px, or >=18.7px bold). Brand orange is
     2.85:1 on white, which fails even the 3:1 large threshold. This
     clears 3:1 on white AND on the light band, and is four points of
     lightness from the brand colour. Fills, buttons and bands keep
     --bn-orange unchanged. */
  --bn-orange-lg:   #DA7318;
  /* Orange as SMALL text (under 24px, or under 18.7px bold) on a WHITE or
     LIGHT background. Brand orange is 2.85:1 there; this is 4.88:1 on white
     and 4.50:1 on light, at the same hue and saturation — lightness 52% -> 38%.
     On NAVY the brand orange already passes at 4.84:1 and is left alone. */
  --bn-orange-tx:   #AE5B13;
  --bn-orange-soft: #FDF3E8;
  --bn-navy:        #002C5E;
  --bn-navy-dp:     #00203F;
  --bn-grey:        #343A40;
  --bn-soft:        #607386;   /* was #667A8E — 4.43:1 on white, 4.09:1 on light, both under AA */
  --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: #452D08; }   /* was #52350A — 3.94:1 on the orange band */

/* 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-tx) !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-lg); }
.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: #452D08; }

.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-lg) !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-tx) !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); }

/* ═══════════════════════════════════════════════════════════════
   QUOTE FORM  —  [binny_quote_form], includes/quote-form.php
   ═══════════════════════════════════════════════════════════════ */

.binny .bn-form { display: grid; gap: 16px; margin-top: 20px; }
.binny .bn-form__row { display: grid; gap: 6px; }
.binny .bn-form label { font-weight: 600; color: var(--bn-navy); font-size: 15px; }
.binny .bn-form__opt { font-weight: 400; color: var(--bn-soft); }

.binny .bn-form input[type="text"],
.binny .bn-form input[type="tel"],
.binny .bn-form input[type="email"],
.binny .bn-form input[type="date"],
.binny .bn-form select,
.binny .bn-form textarea {
  width: 100%;
  min-height: 48px;          /* comfortable touch target */
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;           /* 16px stops iOS zooming into the field on focus */
  color: var(--bn-grey);
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  border-radius: 6px;
  box-sizing: border-box;
}
.binny .bn-form textarea { min-height: 110px; resize: vertical; }

.binny .bn-form input:focus-visible,
.binny .bn-form select:focus-visible,
.binny .bn-form textarea:focus-visible {
  outline: 3px solid var(--bn-orange);
  outline-offset: 1px;
  border-color: var(--bn-navy);
}

/* Qualified by element: `input[type="text"]` above out-specifies a bare
   attribute selector, which left text inputs with no red border while the
   selects had one. */
.binny .bn-form :is(input, select, textarea)[aria-invalid="true"] { border-color: #B42318; border-width: 2px; }
.binny .bn-form__err { color: #B42318; font-size: 14px; }
.binny .bn-form__fatal {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #B42318;
  background: #FEF3F2;
  color: #7A271A;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.binny .bn-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.binny .bn-form__submit {
  justify-self: start;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: 6px;
  background: var(--bn-orange);
  color: var(--bn-navy);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.binny .bn-form__submit:hover { background: var(--bn-navy); color: var(--bn-white); }  /* white on orange-dk is 3.8:1 — fails */
.binny .bn-form__submit:focus-visible { outline: 3px solid var(--bn-navy); outline-offset: 3px; }
.binny .bn-form__note { margin: 0; font-size: 14px; color: var(--bn-soft); }

/* Terms acceptance row. The checkbox sits INSIDE its label so the whole line
   — including the "booking terms" link — is the hit target, which matters on
   a phone. grid-template-columns rather than flex so a wrapped second line
   aligns under the text and not under the box. */
.binny .bn-form__row--check > label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.binny .bn-form__row--check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--bn-orange);
  flex: none;
}
.binny .bn-form__row--check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--bn-navy);
  outline-offset: 2px;
}
.binny .bn-form__row--check input[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 2px; }
.binny .bn-form__row--check a { color: var(--bn-orange-tx); text-underline-offset: 2px; }

.binny .bn-form__sent {
  margin-top: 20px;
  padding: 20px;
  border-left: 4px solid var(--bn-orange);
  background: var(--bn-white);
}
.binny .bn-form__sent h3 { margin: 0 0 8px; color: var(--bn-navy); }
.binny .bn-form__sent p { margin: 0; }

@media (max-width: 600px) {
  .binny .bn-form__submit { justify-self: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
   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; }
  /* `flex: 1 1 340px` above is a WIDTH in the row layout. Once the main axis
     becomes the block direction the same basis becomes a HEIGHT, forcing a
     128px block of text to be 340px tall and leaving ~212px of blank orange
     between the copy and the buttons. Reset the basis with the direction. */
  .binny .bn-cta-in > .wp-block-group { flex: 0 1 auto; }
}

/* 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; }
}

/* ═══════════════════════════════════════════════════════════════
   THEME CHROME  —  header, nav, footer, blog
   Added when the custom theme replaced Astra. Everything above this
   line is unchanged; the Astra-targeting rules further up are inert
   under this theme and are kept only so reactivating Astra restores
   the old look in one command.
   ═══════════════════════════════════════════════════════════════ */

/* --- skip link ------------------------------------------------- */
.binny .bn-skip {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  padding: 12px 18px; background: var(--bn-navy); color: var(--bn-white);
  text-decoration: none; font-weight: 700;
}
.binny .bn-skip:focus { left: 8px; top: 8px; }

/* --- header ----------------------------------------------------
   IN NORMAL FLOW. It occupies space, so page content begins below
   it and cannot be covered at load. Astra's transparent header used
   position:absolute here and cut the hero H1 in half on every phone
   and tablet.
   -------------------------------------------------------------- */
.binny .bn-header { position: relative; z-index: 100; background: var(--bn-white); }

.binny .bn-topbar { background: var(--bn-navy); color: #C7D6E5; }
.binny .bn-topbar__in {
  max-width: var(--bn-max); margin: 0 auto;
  padding: 9px var(--bn-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.binny .bn-topbar p { margin: 0; font-size: 14px; line-height: 1.45; }
.binny .bn-topbar a { color: var(--bn-white); text-decoration: none; font-weight: 600; }
.binny .bn-topbar a:hover { text-decoration: underline; }

.binny .bn-header__bar { border-bottom: 1px solid var(--bn-line); }
.binny .bn-header__in {
  max-width: var(--bn-max); margin: 0 auto;
  padding: 0 var(--bn-pad);
  min-height: 80px;                        /* Astra hb-header-height, mobile */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.binny .bn-brand { display: flex; align-items: center; }
.binny .bn-brand img,
.binny .custom-logo { display: block; width: auto; max-width: 150px; height: auto; }
.binny .bn-brand__text { font-weight: 800; color: var(--bn-navy); text-decoration: none; font-size: 20px; }

/* --- menu toggle ------------------------------------------------ */
.binny .menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;               /* full touch target */
  padding: 0; border: 0; border-radius: 6px;
  background: var(--bn-orange); color: var(--bn-navy); cursor: pointer;
}
.binny .menu-toggle:focus-visible { outline: 3px solid var(--bn-navy); outline-offset: 2px; }
.binny .menu-toggle__bars { display: block; width: 22px; }
.binny .menu-toggle__bars span {
  display: block; height: 2.5px; margin: 4px 0; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.binny .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.binny .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.binny .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- navigation -------------------------------------------------
   ONE <nav>. Below 922px it becomes a panel under the header; above
   it, a row. The markup never changes, so the mobile menu is the
   desktop menu and menu-parity is structural rather than checked.
   -------------------------------------------------------------- */
.binny .bn-nav__list { list-style: none; margin: 0; padding: 0; }
.binny .bn-nav__list a {
  display: block; text-decoration: none; font-weight: 600; font-size: 15px;
  color: var(--bn-navy);
}
.binny .bn-nav__list a:hover,
.binny .bn-nav__list .current-menu-item > a { color: var(--bn-orange-tx); }
.binny .bn-nav__list a:focus-visible { outline: 3px solid var(--bn-orange); outline-offset: 2px; }
.binny .bn-nav__cta {
  display: inline-block; padding: 13px 22px; border-radius: 6px;
  background: var(--bn-orange); color: var(--bn-navy);
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.binny .bn-nav__cta:hover { background: var(--bn-navy); color: var(--bn-white); }
.binny .bn-nav__cta:focus-visible { outline: 3px solid var(--bn-navy); outline-offset: 3px; }

/* Two calls to action, and they must not compete. Book is solid orange and
   reads first; the quote is outlined, so it is plainly the quieter of the
   two without being hidden. Both keep the same height and padding, so the
   pair sits on one baseline instead of looking like a mistake. */
.binny .bn-nav__ctas { display: flex; align-items: center; gap: 10px; }
.binny .bn-nav__cta--quote {
  background: transparent; color: var(--bn-navy);
  box-shadow: inset 0 0 0 2px var(--bn-navy);
}
.binny .bn-nav__cta--quote:hover { background: var(--bn-navy); color: var(--bn-white); }

@media (max-width: 921.98px) {
  .binny .bn-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    padding: 8px var(--bn-pad) 20px;
    background: var(--bn-white);
    border-bottom: 1px solid var(--bn-line);
    box-shadow: 0 14px 22px rgba(0, 32, 63, .10);
    max-height: calc(100vh - 100%); overflow-y: auto;
  }
  .binny .bn-nav--open { display: block; }
  .binny .bn-nav__list li { border-bottom: 1px solid var(--bn-line); }
  .binny .bn-nav__list a { padding: 14px 2px; font-size: 16px; }
  .binny .bn-nav__list .sub-menu { list-style: none; margin: 0; padding: 0 0 6px 14px; }
  .binny .bn-nav__list .sub-menu a { padding: 11px 2px; font-weight: 500; font-size: 15px; }
  .binny .bn-nav__list .sub-menu li:last-child { border-bottom: 0; }
  /* In the mobile panel they stack full width. Side by side at 390px they
     would each be about 160px wide, which is not enough for "Get a free
     quote" without it wrapping to two lines. */
  .binny .bn-nav__ctas { display: block; margin-top: 16px; }
  .binny .bn-nav__cta { display: block; text-align: center; }
  .binny .bn-nav__cta--quote { margin-top: 10px; }
  .binny.bn-nav-open { overflow: hidden; }   /* stop the page scrolling behind the panel */
}

@media (min-width: 922px) {
  .binny .menu-toggle { display: none; }
  .binny .bn-header__in { min-height: 100px; }
  .binny .bn-nav { display: flex; align-items: center; gap: 22px; }
  .binny .bn-nav__list { display: flex; align-items: center; gap: 22px; }
  .binny .bn-nav__list > li { position: relative; }
  .binny .bn-nav__list .sub-menu {
    position: absolute; left: 0; top: 100%; z-index: 120;
    min-width: 230px; margin: 0; padding: 8px 0; list-style: none;
    background: var(--bn-white); border: 1px solid var(--bn-line);
    border-radius: 8px; box-shadow: 0 14px 26px rgba(0, 32, 63, .12);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .binny .bn-nav__list > li:hover > .sub-menu,
  .binny .bn-nav__list > li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .binny .bn-nav__list .sub-menu a { padding: 9px 16px; font-weight: 500; }
  .binny .custom-logo { max-width: 180px; }   /* Astra ast-header-responsive-logo-width */
}

@media (min-width: 1200px) {
  .binny .bn-header__in { min-height: 137px; }  /* Astra hb-header-height, desktop */
}

/* Below 600px the top bar carries one item, so it is CENTRED rather
   than pushed into a right-hand slot with an empty one beside it. */
@media (max-width: 600px) {
  .binny .bn-topbar__in { justify-content: center; text-align: center; }
  .binny .bn-topbar__phone { display: none; }   /* the fixed call bar carries it */
  .binny .bn-topbar p { font-size: 13px; }
}

/* --- footer -----------------------------------------------------
   Astra's footer produced three defects at once: no side padding, a
   1.42:1 copyright colour, and an 80px min-height with top alignment
   that left a band of dead navy under the text.
   -------------------------------------------------------------- */
.binny .bn-footer { background: var(--bn-navy-dp); color: #C7D6E5; }
.binny .bn-footer__in {
  max-width: var(--bn-max); margin: 0 auto;
  padding: 26px var(--bn-pad);              /* real side padding at every width */
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.binny .bn-footer__copy { margin: 0; font-size: 14px; line-height: 1.6; color: #C7D6E5; }
/* On phones the WhatsApp button floats over the bottom-right corner, which at
   maximum scroll is the footer. Narrow the copy so its last line cannot run
   under the button; the text stays centred. */
@media (max-width: 767px) {
  .binny .bn-footer__copy { max-width: 17em; }
  .binny .bn-footer__in { padding-bottom: 34px; }
  /* Keep the narrow measure from breaking the credit mid-name
     ("Atlantic / IT Services"). */
  .binny .bn-footer .binny-credit { white-space: nowrap; }
}
.binny .bn-footer__sep { padding: 0 6px; color: #7E97AE; }
.binny .bn-footer a { color: var(--bn-white); }
.binny .bn-footer .binny-credit { color: var(--bn-white); border-bottom-color: rgba(255,255,255,.4); }
.binny .bn-footer .binny-credit:hover { color: var(--bn-orange); border-bottom-color: var(--bn-orange); }
.binny .bn-footer__social { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.binny .bn-footer__social a { font-weight: 600; font-size: 14px; }

/* --- back to top ------------------------------------------------
   Clear of the fixed call bar. Astra's sat 30px from the bottom at
   z-index 99 with the bar at 300, burying 25 of its 31px (R-015).
   -------------------------------------------------------------- */
.binny .binny-totop {
  position: fixed; right: 14px; bottom: 130px; z-index: 305;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bn-navy); color: var(--bn-white);
  box-shadow: 0 6px 16px rgba(0, 32, 63, .28);
}
.binny .binny-totop[hidden] { display: none; }
.binny .binny-totop svg { width: 22px; height: 22px; }
.binny .binny-totop:focus-visible { outline: 3px solid var(--bn-orange); outline-offset: 3px; }
/* Above the call-bar breakpoint the bar is gone, but the WhatsApp button is
   not — and it keeps the same corner. Measured: at 1280px WhatsApp occupies
   824..880 and a 24px offset put this button at 832..876, directly on top of
   it. The two now stack with a gap instead of sharing a corner. */
@media (min-width: 768px) {
  .binny .binny-totop { bottom: 88px; }
}

/* --- blog -------------------------------------------------------
   Pages are bands; posts are a measured column.
   -------------------------------------------------------------- */
.binny .bn-article {
  max-width: 760px; margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--bn-pad);
}
.binny .bn-archive { max-width: var(--bn-max); }
.binny .bn-article__img img { width: 100%; height: auto; border-radius: 10px; }
.binny .bn-article__head { margin-bottom: 22px; }
.binny .bn-meta { margin: 6px 0 0; font-size: 14px; color: var(--bn-soft); }
.binny .bn-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }

.binny .bn-cards { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .binny .bn-cards { grid-template-columns: 1fr 1fr; } }
.binny .bn-card {
  padding: 22px; background: var(--bn-white);
  border: 1px solid var(--bn-line); border-radius: 10px;
  border-top: 3px solid var(--bn-orange);
}
.binny .bn-card__img img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 12px; }
.binny .bn-card__title { margin: 0 0 4px; font-size: 20px; }
.binny .bn-card__title a { color: var(--bn-navy); text-decoration: none; }
.binny .bn-card__title a:hover { color: var(--bn-orange-dk); }
.binny .bn-card__excerpt { margin: 10px 0 14px; }
.binny .bn-card__more { font-weight: 700; color: var(--bn-navy); }

.binny .bn-pagination, .binny .pagination { margin-top: 34px; }
.binny .pagination .page-numbers {
  display: inline-block; padding: 8px 13px; margin: 0 3px;
  border: 1px solid var(--bn-line); border-radius: 6px;
  text-decoration: none; color: var(--bn-navy);
}
.binny .pagination .page-numbers.current { background: var(--bn-navy); color: var(--bn-white); border-color: var(--bn-navy); }

/* --- search ------------------------------------------------------ */
.binny .bn-search { display: flex; gap: 8px; margin-top: 16px; }
.binny .bn-search__field {
  flex: 1 1 auto; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--bn-line); border-radius: 6px;
}
.binny .bn-search__submit {
  min-height: 48px; padding: 10px 18px; border: 0; border-radius: 6px;
  background: var(--bn-navy); color: var(--bn-white); font: inherit; font-weight: 700; cursor: pointer;
}

/* --- comments ---------------------------------------------------- */
.binny .bn-comments { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--bn-line); }
.binny .bn-comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.binny .bn-comments__list .children { list-style: none; padding-left: 20px; }

/* --- no-JS fallback ----------------------------------------------
   If nav.js never runs, the panel would be permanently hidden and the
   site would have no navigation at all. Reveal it instead.
   ------------------------------------------------------------------ */
@media (max-width: 921.98px) {
  .binny.no-js .bn-nav { display: block; position: static; box-shadow: none; }
  .binny.no-js .menu-toggle { display: none; }
}