/* ==========================================================================
   FibrePro Pro - design system
   Every colour below is derived from the logo. Nothing invented.
   Lime #C5D82C | Cyan #36C7F3 | Charcoal #3A3A3C | Ink #151517
   ========================================================================== */

:root {
  /* Brand, sampled from the logo file */
  --fp-lime: #C5D82C;
  --fp-lime-600: #AFC024;
  --fp-lime-100: #F4F8DA;
  --fp-cyan: #36C7F3;
  --fp-cyan-600: #14A7D6;
  --fp-cyan-700: #0E86AD;
  --fp-cyan-100: #E3F6FD;

  /* Neutrals, tuned to the logo charcoal rather than pure grey */
  --fp-ink: #151517;
  --fp-body: #3A3A3C;
  --fp-muted: #6B6B70;
  --fp-line: #E5E7EA;
  --fp-surface: #FFFFFF;
  --fp-surface-2: #F7F8F9;

  /* Type scale - 1.25 ratio, clamped so it works on phones without media queries */
  --fp-h1: clamp(2rem, 1.30rem + 3.0vw, 3.25rem);
  --fp-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  --fp-h3: clamp(1.20rem, 1.05rem + 0.7vw, 1.5rem);
  --fp-body-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fp-small: 0.9375rem;

  /* Spacing - 4px base */
  --fp-1: 0.25rem;  --fp-2: 0.5rem;   --fp-3: 0.75rem;
  --fp-4: 1rem;     --fp-5: 1.5rem;   --fp-6: 2rem;
  --fp-7: 3rem;     --fp-8: 4rem;     --fp-9: 6rem;

  --fp-radius: 14px;
  --fp-radius-lg: 20px;
  --fp-radius-pill: 999px;

  --fp-shadow-sm: 0 1px 2px rgba(21,21,23,.05);
  --fp-shadow: 0 4px 16px rgba(21,21,23,.07);
  --fp-shadow-lg: 0 12px 32px rgba(21,21,23,.10);

  --fp-measure: 68ch;
  --fp-ease: cubic-bezier(.4,0,.2,1);
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Typography
   The single biggest lift. Consistent scale, comfortable measure, tighter
   heading tracking so the site reads as considered rather than default.
   ========================================================================== */

body {
  font-size: var(--fp-body-size);
  line-height: 1.65;
  color: var(--fp-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--fp-ink);
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin-top: 0;
}

h1 { font-size: var(--fp-h1); margin-bottom: var(--fp-4); }
h2 { font-size: var(--fp-h2); margin-bottom: var(--fp-4); }
h3 { font-size: var(--fp-h3); line-height: 1.3; margin-bottom: var(--fp-3); }

p { margin: 0 0 var(--fp-4); max-width: var(--fp-measure); }
p:last-child { margin-bottom: 0; }

/* Long-form copy gets a readable measure. Centred blocks stay centred. */
.rich-text p, .rich-text li { max-width: var(--fp-measure); }

a { color: var(--fp-cyan-700); text-underline-offset: 3px; }
a:hover { color: var(--fp-cyan-600); }

/* Eyebrow labels above headings - small caps, never shouty */
.subtitle, .section-subtitle {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fp-cyan-700);
}

.subtitle-icon svg { vertical-align: middle; }

/* ==========================================================================
   Buttons - lime is the action colour, taken from the logo
   ========================================================================== */

.primary-button, .secondary-button, .w-button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-2);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.75rem;
  border-radius: var(--fp-radius-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--fp-ease), box-shadow .18s var(--fp-ease), background-color .18s var(--fp-ease);
  min-height: 48px;   /* comfortable tap target on phones */
}

.primary-button, input[type="submit"] {
  background: var(--fp-lime);
  color: var(--fp-ink);
  box-shadow: var(--fp-shadow-sm);
}
.primary-button:hover, input[type="submit"]:hover {
  background: var(--fp-lime-600);
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow);
}

.secondary-button {
  background: var(--fp-cyan);
  color: #fff;
}
.secondary-button:hover {
  background: var(--fp-cyan-600);
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow);
}

/* Keyboard users must always see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--fp-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   Cards - equal height, bottom-aligned actions, restrained shadow
   ========================================================================== */

.blog-card, .service-card, .location-card {
  display: flex;
  flex-direction: column;
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
  transition: transform .2s var(--fp-ease), box-shadow .2s var(--fp-ease), border-color .2s var(--fp-ease);
}
.blog-card:hover, .service-card:hover, .location-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fp-shadow-lg);
  border-color: transparent;
}

.blog-card-content, .service-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--fp-5);
  gap: var(--fp-2);
}
.blog-card-content > .secondary-button,
.service-card-content > .secondary-button {
  margin-top: auto;
  align-self: flex-start;
}

/* Images must reserve their space so nothing jumps while loading. */
.blog-card-image img, .service-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* ==========================================================================
   Forms - the money path. Bigger targets, clearer focus, no iOS zoom.
   ========================================================================== */

input[type="text"], input[type="tel"], input[type="email"],
select, textarea, .w-input, .w-select {
  width: 100%;
  font-size: 16px;              /* under 16px iOS zooms the page on focus */
  padding: 0.9rem 1.1rem;
  min-height: 52px;
  border-radius: var(--fp-radius);
  border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.14);
  color: #fff;
  transition: border-color .18s var(--fp-ease), background-color .18s var(--fp-ease);
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.75); }
input:focus, select:focus, textarea:focus {
  border-color: var(--fp-lime);
  background: rgba(255,255,255,.22);
}
textarea { min-height: 130px; resize: vertical; }

/* Honeypot stays invisible but reachable for bots. Never show it. */
.fibrepro-hp { position: absolute !important; left: -9999px !important; }

/* ==========================================================================
   Rhythm - consistent vertical spacing was the main "amateur" tell
   ========================================================================== */

section, .section { padding-block: clamp(var(--fp-7), 6vw, var(--fp-9)); }
.section-header { margin-bottom: var(--fp-6); }

/* ==========================================================================
   Mobile - most enquiries arrive from a phone
   ========================================================================== */

@media (max-width: 767px) {
  h1 { letter-spacing: -0.015em; }
  p, li { font-size: 1.0625rem; }

  /* Stop the sticky call bar covering the last of the content. */
  body { padding-bottom: 88px; }

  .primary-button, .secondary-button, .w-button { width: 100%; }
}

/* Sticky call bar - solid, readable, above everything */
.sticky-cta, .mobile-cta {
  box-shadow: 0 -4px 20px rgba(21,21,23,.12);
  backdrop-filter: saturate(140%) blur(6px);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link:focus {
  position: fixed; top: var(--fp-3); left: var(--fp-3); z-index: 9999;
  background: var(--fp-ink); color: #fff;
  padding: var(--fp-3) var(--fp-4); border-radius: var(--fp-radius);
}

/* Lists in rich text were previously brand-blue and hard to read. */
.rich-text li { color: var(--fp-body); }
.rich-text li::marker { color: var(--fp-cyan); }

/* ==========================================================================
   Layout container - consistent gutters, sensible max width
   ========================================================================== */

.container, .w-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section-regular { padding-block: clamp(3rem, 6vw, 6rem); }

/* Alternate bands so long pages have rhythm instead of one flat wall. */
.section-regular:nth-of-type(even) { background: var(--fp-surface-2); }

/* ==========================================================================
   Hero
   ========================================================================== */

.banner-section {
  padding-block: clamp(3rem, 7vw, 6.5rem);
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(54,199,243,.10), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(197,216,44,.12), transparent 62%),
    var(--fp-surface);
}

.banner-title {
  font-size: var(--fp-h1);
  letter-spacing: -0.028em;
  line-height: 1.08;
}

/* The eyebrow becomes a proper pill instead of loose floating text. */
.subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-2);
  background: var(--fp-cyan-100);
  border: 1px solid rgba(54,199,243,.28);
  padding: 0.4rem 0.9rem;
  border-radius: var(--fp-radius-pill);
  margin-bottom: var(--fp-4);
}
.subtitle .subtitle-icon { display: flex; }
.subtitle .subtitle-icon svg { width: 16px; height: 16px; }

.inner-container-1000 { max-width: 1000px; margin-inline: auto; }

/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */

.sticky-btn {
  border-radius: var(--fp-radius-pill);
  font-weight: 650;
  min-height: 52px;
  box-shadow: var(--fp-shadow-lg);
}

/* ==========================================================================
   Eyebrow on dark panels
   The quote form sits on a saturated blue panel, where the light pill
   used on white sections washes out. Invert it there instead.
   ========================================================================== */

.quote-form .subtitle {
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  font-weight: 700;
  opacity: .95;
}
.quote-form .subtitle .subtitle-icon svg path { fill: var(--fp-lime); }
.quote-form h2, .quote-form h3 { color: #fff; }
.quote-form-wrap, .quote-form { border-radius: var(--fp-radius-lg); }

/* ==========================================================================
   REBUILT COMPONENTS  (fp- prefix = new structure, not the inherited Webflow)
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.fp-hero {
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  background:
    radial-gradient(900px 420px at 8% -15%, rgba(54,199,243,.13), transparent 62%),
    radial-gradient(760px 380px at 96% 4%, rgba(197,216,44,.15), transparent 64%),
    var(--fp-surface);
}

.fp-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.fp-hero__title {
  font-size: clamp(2.25rem, 1.30rem + 4.0vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin-bottom: var(--fp-4);
}

.fp-hero__text {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--fp-muted);
  max-width: 54ch;
  margin-bottom: var(--fp-5);
}

.fp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-3);
  margin-bottom: var(--fp-6);
}

/* --- Eyebrow ------------------------------------------------------------- */

.fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fp-cyan-700);
  background: var(--fp-cyan-100);
  border: 1px solid rgba(54,199,243,.26);
  padding: 0.42rem 0.85rem;
  border-radius: var(--fp-radius-pill);
  margin: 0 0 var(--fp-4);
}
.fp-eyebrow--center { margin-inline: auto; }
.fp-eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fp-lime);
  box-shadow: 0 0 0 3px rgba(197,216,44,.28);
}

/* --- Buttons ------------------------------------------------------------- */

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-2);
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  border-radius: var(--fp-radius-pill);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s var(--fp-ease), box-shadow .18s var(--fp-ease), background-color .18s var(--fp-ease);
}
.fp-btn--primary {
  background: var(--fp-lime);
  color: var(--fp-ink);
  box-shadow: 0 2px 10px rgba(197,216,44,.35);
}
.fp-btn--primary:hover { background: var(--fp-lime-600); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(197,216,44,.42); }
.fp-btn--ghost {
  background: transparent;
  color: var(--fp-ink);
  border-color: var(--fp-line);
}
.fp-btn--ghost:hover { border-color: var(--fp-cyan); color: var(--fp-cyan-700); }

/* --- Trust strip --------------------------------------------------------- */

.fp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-4) var(--fp-5);
  margin: 0;
  padding: var(--fp-4) 0 0;
  border-top: 1px solid var(--fp-line);
  list-style: none;
}
.fp-trust__item {
  display: flex;
  align-items: center;
  gap: var(--fp-2);
  font-size: var(--fp-small);
  color: var(--fp-muted);
}
.fp-trust__item strong { color: var(--fp-ink); }
.fp-trust__stars { color: #F5A623; letter-spacing: 1px; }

/* --- Sections ------------------------------------------------------------ */

.fp-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.fp-section--services { background: var(--fp-surface-2); }
.fp-section__head { text-align: center; max-width: 760px; margin: 0 auto var(--fp-6); }
.fp-section__title {
  font-size: var(--fp-h2);
  letter-spacing: -0.025em;
  margin: 0;
}
.fp-section__foot { text-align: center; margin: var(--fp-6) 0 0; }

/* --- Service cards ------------------------------------------------------- */

.fp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--fp-5);
}

.fp-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  transition: transform .2s var(--fp-ease), box-shadow .2s var(--fp-ease), border-color .2s var(--fp-ease);
}
.fp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fp-shadow-lg);
  border-color: transparent;
}

/* Whole card is the link, so the tap target is the card not just the text. */
.fp-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.fp-card__media { overflow: hidden; }
.fp-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .4s var(--fp-ease);
}
.fp-card:hover .fp-card__media img { transform: scale(1.04); }

.fp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--fp-2);
  padding: var(--fp-5);
}
.fp-card__title { font-size: 1.1875rem; margin: 0; }
.fp-card__text { color: var(--fp-muted); font-size: var(--fp-small); margin: 0; }

/* Pushed to the bottom so every card ends on the same line. */
.fp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--fp-2);
  font-weight: 650;
  font-size: var(--fp-small);
  color: var(--fp-cyan-700);
}
.fp-card:hover .fp-card__cta svg { transform: translateX(3px); }
.fp-card__cta svg { transition: transform .2s var(--fp-ease); }

/* --- Prose --------------------------------------------------------------- */

.fp-prose { max-width: 760px; margin-inline: auto; }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 900px) {
  .fp-hero__grid { grid-template-columns: 1fr; }
  .fp-hero__form { order: 2; }
}

@media (max-width: 560px) {
  .fp-hero__actions { flex-direction: column; align-items: stretch; }
  .fp-btn { width: 100%; }
  .fp-trust { gap: var(--fp-3); }
  .fp-trust__item { flex: 1 1 100%; }
}

/* ==========================================================================
   HEADER  - was the plain Webflow navbar. Now sticky, with weight and a CTA.
   ========================================================================== */

.navbar.w-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(21,21,23,.07);
  padding-block: 0.55rem;
  transition: box-shadow .25s var(--fp-ease), background-color .25s var(--fp-ease);
}

/* Lifts once the page scrolls, so the header feels anchored rather than floating. */
.navbar.w-nav.is-stuck {
  box-shadow: 0 6px 22px rgba(21,21,23,.09);
  background: rgba(255,255,255,.96);
}

.nav-link, .nav-link.w-nav-link {
  position: relative;
  font-weight: 550;
  font-size: 0.9688rem;
  color: var(--fp-ink);
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  transition: color .18s var(--fp-ease), background-color .18s var(--fp-ease);
}
.nav-link:hover { color: var(--fp-cyan-700); background: rgba(54,199,243,.08); }

/* Current page gets a lime underline rather than only a colour change. */
.nav-link.w--current { color: var(--fp-ink); }
.nav-link.w--current::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--fp-lime);
}

/* Logo breathing room */
.navbar .brand, .navbar .w-nav-brand { padding-block: 0.2rem; }
.navbar img { max-height: 52px; width: auto; }

/* ==========================================================================
   FAQ - the box had a border but zero padding, so text sat on the edge.
   Rebuilt as a proper accordion with dividers and a chevron.
   ========================================================================== */

.faq-wrap {
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-surface);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
  max-width: 860px;
  margin-inline: auto;
}

.faq-item { border-bottom: 1px solid var(--fp-line); }
.faq-item:last-child { border-bottom: 0; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-4);
  padding: 1.25rem clamp(1.15rem, 3vw, 1.75rem);
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--fp-ink);
  cursor: pointer;
  list-style: none;
  transition: background-color .18s var(--fp-ease);
}
.faq-question:hover { background: var(--fp-surface-2); }
.faq-question::-webkit-details-marker { display: none; }

/* Chevron built in CSS so there is no image to go missing. */
.faq-question::after {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--fp-cyan);
  border-bottom: 2px solid var(--fp-cyan);
  transform: rotate(45deg);
  transition: transform .22s var(--fp-ease);
  margin-top: -4px;
}
.faq-item[open] .faq-question::after { transform: rotate(-135deg); margin-top: 2px; }
.faq-item[open] .faq-question { background: var(--fp-surface-2); }

/* The answer needed the padding most - this is what was cutting into the box. */
.faq-item > *:not(.faq-question) {
  padding: 0 clamp(1.15rem, 3vw, 1.75rem) 1.35rem;
  margin: 0;
  color: var(--fp-body);
  max-width: 68ch;
}
.faq-answer, .faq-item p { margin: 0; }

/* ==========================================================================
   Services section - centre the heading block and the trailing button
   ========================================================================== */

.fp-section__head { text-align: center; }
.fp-section__head .fp-eyebrow { display: inline-flex; }
.fp-section__foot { display: flex; justify-content: center; }

/* Inherited Webflow section headers get the same treatment. */
.align-center { text-align: center; }
.align-center .subtitle { margin-inline: auto; }

/* --- Header call button -------------------------------------------------- */

.fp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0.75rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-lime);
  color: var(--fp-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--fp-ease), transform .18s var(--fp-ease);
}
.fp-nav-cta:hover { background: var(--fp-lime-600); transform: translateY(-1px); color: var(--fp-ink); }

/* The sticky bottom bar already covers phones, so hide the duplicate there. */
@media (max-width: 991px) { .fp-nav-cta { display: none; } }

/* Nav must never wrap onto two lines - it reads as broken. */
.nav-menu, .w-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-wrap: nowrap;
}
.nav-link, .nav-link.w-nav-link { white-space: nowrap; }

/* Tighten progressively rather than wrapping. */
@media (max-width: 1240px) {
  .nav-link, .nav-link.w-nav-link { padding-inline: 0.62rem; font-size: 0.9375rem; }
  .fp-nav-cta { margin-left: 0.4rem; padding-inline: 0.95rem; }
}
@media (max-width: 1100px) {
  .nav-link, .nav-link.w-nav-link { padding-inline: 0.45rem; font-size: 0.9062rem; }
  .fp-nav-cta span { display: none; }   /* icon-only call button */
  .fp-nav-cta { padding: 0.65rem 0.85rem; }
}

/* ==========================================================================
   SERVICE PAGES
   Body copy beside a sticky quote form, so the enquiry path is always visible.
   ========================================================================== */

.fp-svc-hero {
  padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(760px 340px at 6% -20%, rgba(54,199,243,.12), transparent 62%),
    var(--fp-surface);
  border-bottom: 1px solid var(--fp-line);
}

.fp-svc-hero__title {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.15rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 var(--fp-5);
  max-width: 20ch;
}

.fp-svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fp-3); }

/* Breadcrumbs - orientation plus a second internal link path for crawlers. */
.fp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--fp-muted);
  margin-bottom: var(--fp-4);
}
.fp-crumbs a { color: var(--fp-muted); text-decoration: none; }
.fp-crumbs a:hover { color: var(--fp-cyan-700); text-decoration: underline; }
.fp-crumbs span[aria-current] { color: var(--fp-ink); font-weight: 600; }

/* --- Two column body ----------------------------------------------------- */

.fp-svc-body { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.fp-svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.fp-svc-figure { margin: 0 0 var(--fp-6); }
.fp-svc-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--fp-radius-lg);
}

/* Left-aligned prose with a comfortable measure. */
.fp-prose-left { max-width: 68ch; }
.fp-prose-left h2 { margin-top: var(--fp-7); }
.fp-prose-left h2:first-child { margin-top: 0; }
.fp-prose-left h3 { margin-top: var(--fp-6); }
.fp-prose-left ul, .fp-prose-left ol { margin: 0 0 var(--fp-4); padding-left: 1.35rem; }
.fp-prose-left li { margin-bottom: var(--fp-2); }

/* --- Sticky aside -------------------------------------------------------- */

.fp-svc-sticky { position: sticky; top: 96px; }

.fp-assure {
  list-style: none;
  margin: var(--fp-4) 0 0;
  padding: var(--fp-4) var(--fp-5);
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius);
  font-size: var(--fp-small);
}
.fp-assure li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--fp-2);
  color: var(--fp-body);
}
.fp-assure li:last-child { margin-bottom: 0; }
.fp-assure li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 7px; height: 12px;
  border-right: 2.5px solid var(--fp-lime-600);
  border-bottom: 2.5px solid var(--fp-lime-600);
  transform: rotate(45deg);
}

/* --- Stack on smaller screens -------------------------------------------- */

@media (max-width: 1024px) {
  .fp-svc-grid { grid-template-columns: 1fr; }
  .fp-svc-sticky { position: static; }
  .fp-svc-aside { order: 2; }
}

/* ==========================================================================
   Chips - service and suburb links.
   Suburb pages previously linked nowhere; these give both a service route
   and a neighbour route without needing images for every combination.
   ========================================================================== */

.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-3);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.7rem 1.15rem;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  color: var(--fp-ink);
  font-weight: 550;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color .18s var(--fp-ease), background-color .18s var(--fp-ease), transform .18s var(--fp-ease);
}
.fp-chip:hover {
  border-color: var(--fp-cyan);
  background: var(--fp-cyan-100);
  color: var(--fp-cyan-700);
  transform: translateY(-1px);
}

/* On the shaded services band the chips need to lift off the background. */
.fp-section--services .fp-chip { background: var(--fp-surface); }

@media (max-width: 560px) {
  .fp-chips { justify-content: flex-start; gap: var(--fp-2); }
  .fp-chip { font-size: 0.9062rem; padding: 0.6rem 0.95rem; }
}

/* ==========================================================================
   Blog post
   ========================================================================== */

.fp-post__head { padding-block: clamp(1.75rem, 4vw, 3rem) var(--fp-5); }

.fp-post__title {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 22ch;
  margin: 0;
}

.fp-post__meta {
  font-size: var(--fp-small);
  color: var(--fp-muted);
  margin: 0 0 var(--fp-2);
}

.fp-post__figure { margin: 0 0 var(--fp-6); }
.fp-post__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--fp-radius-lg);
}

/* Article copy gets a genuinely readable measure and generous leading. */
.fp-post__body {
  max-width: 70ch;
  margin: 0 auto var(--fp-8);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem);
  line-height: 1.75;
}
.fp-post__body h2 { margin-top: var(--fp-7); }
.fp-post__body h3 { margin-top: var(--fp-6); }
.fp-post__body ul, .fp-post__body ol { padding-left: 1.4rem; margin-bottom: var(--fp-4); }
.fp-post__body li { margin-bottom: var(--fp-2); }
.fp-post__body img { max-width: 100%; height: auto; border-radius: var(--fp-radius); }
.fp-post__body blockquote {
  margin: var(--fp-6) 0;
  padding: var(--fp-2) 0 var(--fp-2) var(--fp-5);
  border-left: 3px solid var(--fp-lime);
  color: var(--fp-ink);
  font-size: 1.15em;
}

.fp-card__meta { font-size: 0.8125rem; color: var(--fp-muted); margin: 0; }

/* Generic page prose stays centred and readable. */
.fp-prose { max-width: 74ch; margin-inline: auto; }

/* ==========================================================================
   Mobile tap targets
   Most enquiries arrive from a phone. Anything tappable needs to clear 44px,
   which the footer and nav links did not.
   ========================================================================== */

@media (max-width: 991px) {

  .footer-link,
  .footer-contact-link,
  .nav-link,
  .nav-link.w-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.5rem;
  }

  /* Footer columns get room to breathe once links are taller. */
  .footer-section .container { padding-block: var(--fp-6); }

  /* Social icons need a real hit area, not just the glyph. */
  .footer-section a[href*="instagram"],
  .footer-section a[href*="facebook"],
  .footer-section a[href*="tiktok"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Breadcrumbs stay tappable without becoming a wall of chips. */
  .fp-crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* Chips and cards are already 46px+, but be explicit so future edits keep it. */
.fp-chip, .fp-btn, .sticky-btn { min-height: 46px; }

/* Never let a long service name force sideways scrolling on a phone. */
@media (max-width: 560px) {
  .fp-chip { max-width: 100%; }
  .fp-card__title, .fp-svc-hero__title, .fp-post__title { overflow-wrap: break-word; }
}


/* ---------------------------------------------------------------
   Mobile navigation panel.
   Webflow's stylesheet hides .w-nav-menu below 991px and expects
   Webflow's own JS to reveal it. That JS is not loaded on this site,
   so the panel is opened by the .fp-nav-open class set in pro.js.
   .navbar is position:sticky, which makes it the containing block for
   the absolutely positioned panel. Graphinxt, 10 Sep 2026.
---------------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar .nav-menu {
    display: none;
  }

  .navbar.fp-nav-open .nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 120;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar.fp-nav-open .nav-menu .nav-link {
    display: block;
    width: 100%;
    min-height: 44px;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .navbar .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* The header call button is hidden at this width. Surface it inside the
     open menu instead - on a phone, calling is the likeliest next action. */
  .navbar.fp-nav-open .nav-menu .fp-nav-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin: 0.75rem 0 0;
  }

  /* The desktop rules hide the label below 1100px to save room in the bar.
     Inside the open menu there is plenty of room, and a bare handset icon
     is a poor call-to-action - put the number back. */
  .navbar.fp-nav-open .nav-menu .fp-nav-cta span {
    display: inline;
  }
}