/* ==========================================================================
   Coasties - site layer: the homepage's look for every other page.

   Loaded after css/styles.css (and any page stylesheet). It restyles the
   existing markup only: no page's words, links or structure change here.
   Values match css/home.css (bright paper grounds, navy ink, one blue
   accent, Outfit, pill buttons, soft cards) so moving between the homepage
   and any other page reads as one site.
   ========================================================================== */

:root {
  --s-canvas: #F7F9FC;
  --s-surface: #FFFFFF;
  --s-ink: #0F1E36;
  --s-ink-soft: #4A5B78;
  --s-accent: #1D63C9;
  --s-accent-hover: #1855AE;
  --s-mist: #E8F1FB;
  --s-line: #D9E2EE;
  --s-foot: #EEF3F9;
  --s-r-sm: 8px; --s-r-md: 12px; --s-r-lg: 20px; --s-r-pill: 999px;
  --s-e1: 0 1px 2px rgba(20, 40, 75, 0.06), 0 2px 8px -2px rgba(20, 40, 75, 0.08);
  --s-e2: 0 2px 4px rgba(20, 40, 75, 0.06), 0 12px 28px -8px rgba(20, 40, 75, 0.16);
  --s-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --s-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --s-section: clamp(4rem, 8vw, 8rem);
  --s-bar-h: 72px;
  /* The old palette names, pointed at the new values, so rules in
     styles.css that use them fall into line without being restated. */
  --navy-900: #0F1E36; --navy-800: #0F1E36; --navy-700: #1B2A4A;
  --blue-500: #1D63C9; --blue-400: #1855AE; --blue-100: #E8F1FB;
  --color-heading: #0F1E36; --color-text: #4A5B78; --color-secondary: #1D63C9;
  --primary: #1D63C9; /* the pricing page's own accent */
}
@media (max-width: 991px) { :root { --s-bar-h: 60px; } }

html { scroll-padding-top: calc(var(--s-bar-h) + 16px); }
body { background: var(--s-surface); color: var(--s-ink-soft); font-family: Outfit, system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { color: var(--s-ink); letter-spacing: -0.015em; }
a { color: var(--s-accent); }
a:hover { color: var(--s-accent-hover); }
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; border-radius: 6px; }
.container { max-width: 82rem; padding-inline: var(--s-gutter); }

/* ---------- buttons: pills, sentence case ---------- */
.btn {
  min-height: 48px; padding: 0 1.5rem; border-radius: var(--s-r-pill); border-width: 1px;
  font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; line-height: 1.1;
  transition: transform 160ms var(--s-ease), background-color 160ms var(--s-ease), color 160ms var(--s-ease), border-color 160ms var(--s-ease), box-shadow 160ms var(--s-ease);
}
.btn:hover { transform: none; }
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 56px; padding: 0 2rem; font-size: 1.05rem; }
.btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: 0.95rem; }
.btn--primary { background: var(--s-accent); border-color: var(--s-accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(29, 99, 201, 0.55); }
.btn--primary:hover { background: var(--s-accent-hover); border-color: var(--s-accent-hover); color: #fff; box-shadow: 0 10px 24px -8px rgba(29, 99, 201, 0.6); }
.btn--outline, .btn--secondary, .btn--outline-light { background: #fff; color: var(--s-ink); border-color: var(--s-line); box-shadow: none; }
.btn--outline:hover, .btn--secondary:hover, .btn--outline-light:hover { background: var(--s-mist); color: var(--s-ink); border-color: #BFD0E6; box-shadow: none; }
.btn--ghost { color: var(--s-accent); }

/* ---------- header bar (same look as the homepage) ---------- */
.navbar, .navbar.navbar--scrolled, .navbar.scrolled {
  height: var(--s-bar-h); padding: 0; display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid var(--s-line); box-shadow: none;
}
.navbar.navbar--scrolled, .navbar.scrolled { box-shadow: 0 6px 20px -12px rgba(20, 40, 75, 0.25); }
.navbar__container { width: 100%; max-width: 90rem; padding-inline: clamp(1rem, 3vw, 2.5rem); gap: 1rem; }
/* The logo image stands in for the brand text; the text stays for screen readers. */
.navbar__logo img.navbar__logo-img { display: block; height: 40px; width: auto; }
.navbar__logo .navbar__logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.navbar__menu { margin-left: auto; }
.navbar__link { color: var(--s-ink); font-size: 0.95rem; padding: 10px 12px; border-radius: var(--s-r-sm); }
.navbar__link:hover { color: var(--s-ink); background: var(--s-mist); }
.navbar__link--active, .navbar__link--active:hover { color: var(--s-accent); background: transparent; }
.navbar__link i { font-size: 0.7em; }
.navbar__dropdown { top: calc(100% + 6px); border: 1px solid var(--s-line); border-radius: var(--s-r-md); box-shadow: var(--s-e2); }
.navbar__dropdown a { color: var(--s-ink); font-size: 0.93rem; padding: 8px 12px; }
.navbar__dropdown a:hover { background: var(--s-mist); color: var(--s-ink); }
.navbar__dropdown li:first-child a { font-weight: 600; }
.navbar__phone { color: var(--s-ink); font-weight: 600; }
.navbar__phone:hover { color: var(--s-accent); }
.navbar__phone i { color: var(--s-accent); }
.navbar__cta { min-height: 44px; font-size: 0.95rem; }
@media (max-width: 1180px) and (min-width: 992px) { .navbar__phone { display: none; } }
@media (max-width: 1180px) and (min-width: 992px) { .navbar__link { padding: 10px 7px; } .navbar__container { gap: 0.5rem; } }
.navbar__hamburger {
  min-height: 44px; min-width: 44px; align-items: center; justify-content: center; padding: 0 12px;
  border: 1px solid var(--s-line); border-radius: var(--s-r-pill); background: #fff;
}
.navbar__hamburger span { background: var(--s-ink); width: 20px; }
/* Phone menu: a white sheet under the bar, not a navy overlay. */
.navbar__menu.navbar__menu--open {
  top: var(--s-bar-h); background: #fff; padding: 1rem clamp(1rem, 5vw, 2rem) 3rem;
}
.navbar__menu.navbar__menu--open .navbar__item { border-bottom: 1px solid var(--s-line); }
.navbar__menu.navbar__menu--open .navbar__link { color: var(--s-ink); font-weight: 500; font-size: 1.15rem; padding: 14px 0; }
.navbar__menu.navbar__menu--open .navbar__link--active { color: var(--s-accent); }
.navbar__menu.navbar__menu--open .navbar__dropdown { background: var(--s-canvas); border: 0; }
.navbar__menu.navbar__menu--open .navbar__dropdown a { color: var(--s-ink-soft); font-size: 1rem; }
/* Submenus fold shut in the phone menu; js/site.js opens them on tap. */
.navbar__menu.navbar__menu--open .navbar__item--dropdown:not(.is-open) .navbar__dropdown { display: none; }
.navbar__menu.navbar__menu--open .navbar__item--dropdown .navbar__link i { transition: transform 200ms var(--s-ease); }
.navbar__menu.navbar__menu--open .navbar__item--dropdown.is-open .navbar__link i { transform: rotate(180deg); }
.navbar__menu.navbar__menu--open .navbar__cta { min-height: 52px; border-radius: var(--s-r-pill); color: #fff; font-size: 1.05rem; }

/* ---------- page hero: bright paper, not navy ---------- */
.hero--page {
  min-height: 0; display: block; overflow: hidden; isolation: isolate;
  padding: calc(var(--s-bar-h) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(2.75rem, 6vw, 4.5rem);
  background: radial-gradient(80% 120% at 85% 0%, #FFFFFF 0%, #F2F7FD 55%, #E6F0FB 100%);
  border-bottom: 1px solid var(--s-line);
}
/* A slow squeegee sheen crosses the hero once on arrival: the homepage's
   wipe, told in one gesture. Decorative, and off under reduced motion. */
.hero--page::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-12deg); animation: s-sheen 1600ms 250ms var(--s-ease) both;
}
@keyframes s-sheen { to { transform: translateX(320%) skewX(-12deg); } }
.hero--page .hero__overlay { display: none; }
.hero--page .hero__content { position: relative; z-index: 1; text-align: left; padding-top: 0; }
.hero--page .hero__title, .hero--page h1 {
  color: var(--s-ink); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.03em; max-width: 22ch; margin: 0; text-wrap: balance; text-shadow: none;
}
.hero--page .hero__subtitle, .hero--page p {
  color: var(--s-ink-soft); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; max-width: 52ch;
  margin: 1rem 0 0; text-align: left; opacity: 1;
}
.hero--page .btn { margin-top: 0.5rem; }
.breadcrumb { margin-bottom: 1.25rem; }
.breadcrumb__list { justify-content: flex-start; flex-wrap: wrap; font-size: 0.9rem; }
.breadcrumb__item, .breadcrumb__item--active { color: var(--s-ink-soft); }
.breadcrumb__item + .breadcrumb__item::before { color: #9AAAC2; }
.breadcrumb__link { color: var(--s-accent); font-weight: 500; }
.breadcrumb__link:hover { color: var(--s-accent-hover); }
.hero--page .trust-bar--hero, .hero--page .trust-bar { justify-content: flex-start; margin-top: 1.75rem; }

/* ---------- sections and grounds ---------- */
.section { padding-block: var(--s-section); }
.bg-light, .section--light { background: var(--s-canvas); }
.section-header { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-header h2, .section h2 {
  font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance;
}
.section h3 { letter-spacing: -0.01em; }
.section-header p, .section p { color: var(--s-ink-soft); }
.section-header h2::after, .section-title::after { display: none; }
.overline, .section-header .overline, .section__label { color: var(--s-accent); letter-spacing: 0.08em; font-weight: 600; }
.lead { color: var(--s-ink-soft); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); }
.text-center p { margin-inline: auto; }

/* Dark bands become the homepage's mist ground: bright throughout, with
   navy text. Every child that was set white for the dark band follows. */
.bg-dark, .section--dark, .section--cta, .section--why-choose, .cta-band {
  background: radial-gradient(90% 90% at 50% 30%, #FFFFFF 0%, #F2F7FD 60%, #E6F0FB 100%);
  color: var(--s-ink-soft); border-block: 1px solid var(--s-line);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--cta h2, .section--cta h3, .section--why-choose h2, .section--why-choose h3,
.cta-band h2, .cta-band h3, .cta-band__title { color: var(--s-ink); }
.bg-dark p, .bg-dark li, .bg-dark span:not(.sr-only), .section--dark p, .section--dark li,
.section--cta p, .section--why-choose p, .section--why-choose li, .cta-band p, .cta-band__subtitle { color: var(--s-ink-soft); }
.bg-dark strong, .section--dark strong, .cta-band strong { color: var(--s-ink); }
.bg-dark a:not(.btn), .section--dark a:not(.btn), .cta-band a:not(.btn) { color: var(--s-accent); }
.cta-band .container { max-width: 52rem; }
.cta-band__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.cta-band__subtitle { font-size: clamp(1.02rem, 1rem + 0.25vw, 1.2rem); max-width: 46ch; margin-inline: auto; }
.cta-band__buttons { gap: 0.75rem; margin-top: 2rem; }

/* ---------- cards: white, hairline, soft lift ---------- */
.card, .svc-card, .cp-option, .pricing-card, .sidebar__card, .service-areas__block, .process__step,
.trust-bar__item, .blog-card, .related-services .card, .founders-spotlight, .contact-form-container, .cp-form, .cp-sidebar > div {
  background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-r-lg); box-shadow: var(--s-e1); color: var(--s-ink-soft);
}
.card, .svc-card, .cp-option, .pricing-card, .service-areas__block, .blog-card {
  transition: transform 240ms var(--s-ease), box-shadow 240ms var(--s-ease), border-color 240ms var(--s-ease), opacity 700ms var(--s-ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .svc-card:hover, .cp-option:hover, .pricing-card:hover, .service-areas__block:hover, .blog-card:hover {
    transform: translateY(-3px); box-shadow: var(--s-e2); border-color: #BFD0E6;
  }
}
.card h3, .svc-card h3, .cp-option h3, .pricing-card h3, .service-areas__block h3, .process__step h3, .trust-bar__item h3,
.card__title, .svc-card__title, .cp-option__title { color: var(--s-ink); }
.card p, .svc-card p, .card__text, .svc-card__text { color: var(--s-ink-soft); }
.card__image img, .svc-card__img img { border-radius: 0; }
.svc-card, .card { overflow: hidden; }
.svc-card__overlay { background: linear-gradient(180deg, rgba(15, 30, 54, 0) 55%, rgba(15, 30, 54, 0.25) 100%); }
/* The featured quote option was a navy tile; it becomes the mist tile. */
.cp-option--featured { background: var(--s-mist); border-color: transparent; }
.cp-option--featured h3, .cp-option--featured p, .cp-option--featured span { color: var(--s-ink); }
.sidebar__card--cta { background: var(--s-mist); border-color: transparent; }
.sidebar__card--cta h3, .sidebar__card--cta h4, .sidebar__card--cta p { color: var(--s-ink); }

/* Icon badges: mist circles with the accent icon, one treatment everywhere. */
.card__icon, .card__icon--light, .service-areas__icon, .cp-option__icon, .trust-bar__icon {
  background: var(--s-mist); color: var(--s-accent); border: 0; box-shadow: none;
}
.card__icon i, .service-areas__icon i, .cp-option__icon i, .trust-bar__item i { color: var(--s-accent); }
.process__number { background: var(--s-accent); color: #fff; box-shadow: none; }
.badge { background: var(--s-mist); color: var(--s-accent); border-radius: var(--s-r-pill); font-weight: 600; letter-spacing: 0.02em; }
.fa-circle-check, .fa-check-circle { color: var(--s-accent); }

/* ---------- trust bar ---------- */
.trust-bar-section { background: #fff; border-bottom: 1px solid var(--s-line); }
.trust-bar__item { box-shadow: none; }
.trust-bar__item, .trust-bar__item span, .trust-bar__item p { color: var(--s-ink); }
.trust-bar--hero .trust-bar__item { background: rgba(255, 255, 255, 0.8); }

/* ---------- service detail (two columns of copy and photo) ---------- */
.service-detail__image img, .founders-story-image img, .founders-spotlight__image img, .grid__col img {
  border-radius: var(--s-r-lg); box-shadow: var(--s-e2);
}
.service-detail__content h2, .service-detail__content h3 { color: var(--s-ink); }
.service-detail__content ul li, .checklist li { color: var(--s-ink-soft); }

/* ---------- FAQ accordion: a plain ledger, as on the homepage ---------- */
.accordion { border-top: 1px solid var(--s-line); }
.accordion__item { background: transparent; border: 0; border-bottom: 1px solid var(--s-line); border-radius: 0; box-shadow: none; margin: 0; }
.accordion__trigger, .accordion__header {
  background: transparent; color: var(--s-ink); font-weight: 500; font-size: clamp(1.02rem, 1rem + 0.25vw, 1.2rem);
  padding: 1.25rem 0; min-height: 56px;
}
.accordion__trigger:hover { color: var(--s-accent); background: transparent; }
.accordion__trigger i, .accordion__icon { color: var(--s-accent); }
.accordion__content, .accordion__body { color: var(--s-ink-soft); }
.accordion__content p { color: var(--s-ink-soft); }

/* ---------- blog ---------- */
.blog-post__content, .blog-post article { color: #33456A; font-size: 1.075rem; line-height: 1.7; }
.blog-post__content h2, .blog-post__content h3, .blog-post article h2, .blog-post article h3 { color: var(--s-ink); letter-spacing: -0.02em; }
.blog-post__content a, .blog-post article a { color: var(--s-accent); text-decoration: underline; text-underline-offset: 3px; }
.card__meta, .blog-post__meta { color: var(--s-ink-soft); }
.blog-filters .btn, .shop-filters .btn, .filter-bar .btn { background: #fff; color: var(--s-ink); border-color: var(--s-line); box-shadow: none; }
.blog-filters .btn--active, .shop-filters .btn--active, .filter-bar .btn--active { background: var(--s-ink); color: #fff; border-color: var(--s-ink); }

/* ---------- pricing ---------- */
.pricing-card__price, .pricing-card .price { color: var(--s-accent); }
.pricing-disclaimer, .pricing-cta-box { border-radius: var(--s-r-lg); border-color: var(--s-line); }

/* ---------- forms ---------- */
.form__input, .form__select, .form__textarea, .form-control,
.contact-form input:not([type="checkbox"]):not([type="radio"]), .contact-form select, .contact-form textarea,
.cp-form input:not([type="checkbox"]):not([type="radio"]), .cp-form select, .cp-form textarea {
  border: 1px solid var(--s-line); border-radius: var(--s-r-md); background: #fff; color: var(--s-ink); min-height: 48px; font-family: inherit;
}
.form__input:focus, .form__select:focus, .form__textarea:focus, .form-control:focus,
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.cp-form input:focus, .cp-form select:focus, .cp-form textarea:focus {
  outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 4px rgba(29, 99, 201, 0.15);
}
.form__label, .contact-form label, .cp-form label { color: var(--s-ink); font-weight: 500; }

/* ---------- footer: the homepage's light footer ---------- */
.footer { background: var(--s-foot); color: var(--s-ink-soft); border-top: 1px solid var(--s-line); padding-top: clamp(4rem, 7vw, 6rem); }
.footer h3, .footer h4, .footer__title, .footer__heading { color: var(--s-ink); font-weight: 700; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.footer p, .footer li, .footer__tagline, .footer span { color: var(--s-ink-soft); }
.footer a { color: var(--s-ink-soft); }
.footer a:hover { color: var(--s-accent); }
.footer i { color: var(--s-accent); }
/* The logo PNG was whitened for the navy footer; show it in its own colours. */
.footer img, .footer__logo img, img.footer__logo { filter: none; }
/* It sat in a small white box to show on navy; on the light footer it stands alone. */
.footer .footer__logo img, .footer img.footer__logo { height: auto; width: 190px; max-width: 60vw; padding: 0; background: none; box-shadow: none; border-radius: 0; mix-blend-mode: multiply; }
.footer__social a { background: #fff; border: 1px solid var(--s-line); color: var(--s-ink); }
.footer__social a:hover { background: var(--s-mist); }
.footer__social a i { color: var(--s-ink); }
.footer__trust, .footer__bottom { border-color: var(--s-line); }
.footer__trust-item, .footer__trust-item span, .footer__bottom, .footer__bottom p { color: var(--s-ink-soft); }

/* ---------- phone quick bar ---------- */
.mobile-cta { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--s-line); box-shadow: none; padding: 8px 12px; gap: 8px; }
.mobile-cta__call, .mobile-cta__quote {
  min-height: 46px; padding: 0 12px; border-radius: var(--s-r-pill); text-transform: none; letter-spacing: 0; font-size: 0.98rem; font-weight: 600;
}
.mobile-cta__call { background: #fff; color: var(--s-ink); border: 1px solid var(--s-line); }
.mobile-cta__call i { color: var(--s-accent); }
.mobile-cta__quote { background: var(--s-accent); color: #fff; flex: 1.4; }

/* ---------- scroll reveal (main.js adds .fade-in-up, then .visible) ----------
   A short rise and fade with the homepage's easing. js/site.js clears the
   stagger delay once an element has arrived, so later hovers stay instant. */
.fade-in-up { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--s-ease), transform 560ms var(--s-ease); }
.fade-in-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { opacity: 1; transform: none; transition: none; }
  .hero--page::after { animation: none; display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- bands and tiles the old stylesheet painted navy ---------- */
.service-areas { background: var(--s-canvas); color: var(--s-ink-soft); }
.service-areas.bg-light { background: var(--s-canvas); }
.service-areas .section__title, .service-areas h2, .service-areas h3 { color: var(--s-ink); }
.service-areas .section__subtitle, .service-areas p { color: var(--s-ink-soft); }
a.service-areas__block .service-areas__arrow { color: var(--s-accent); font-weight: 600; }
.card--area { background: #fff; border-color: var(--s-line); }
.card--area:hover { background: #fff; border-color: #BFD0E6; transform: translateY(-3px); }
.card--area .card__title, .card--area h3 { color: var(--s-ink); }
.card--area .card__text, .card--area p { color: var(--s-ink-soft); }
.card--area .card__icon { background: var(--s-mist); color: var(--s-accent); }
.cp-option--featured .cp-option__title { color: var(--s-ink); }
.cp-option--featured .cp-option__text { color: var(--s-ink-soft); }
.cp-option--featured .cp-option__action { color: var(--s-accent); }
.cp-option--featured .cp-option__icon { background: #fff; color: var(--s-accent); }
.cp-option--featured:hover { border-color: #BFD0E6; box-shadow: var(--s-e2); }
.cp-sidebar__areas { background: var(--s-mist); color: var(--s-ink); }
.cp-sidebar__areas-heading { color: var(--s-ink); }
.cp-sidebar__areas-heading i { color: var(--s-accent); }
.cp-sidebar__areas-list li { color: var(--s-ink-soft); }
.cp-sidebar__areas-list li::before { background: var(--s-accent); }
/* A link written with an inline white colour for the old navy band. */
.cta-band a[style*="color: #fff"], .cta-band a[style*="color:#fff"] { color: var(--s-accent) !important; }
.cta-band p[style*="opacity"] { opacity: 1 !important; }

/* ---------- long-form reading: articles and legal pages ----------
   ".section h2" above is for section titles; inside an article the
   headings are reading headings, and they should not fade in mid-read. */
.blog-post__content h2, .legal-content h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.2; margin-top: 2.25rem; }
.blog-post__content h3, .legal-content h3 { font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem); line-height: 1.3; }
.blog-post__content .fade-in-up, .legal-content .fade-in-up, .footer .fade-in-up { opacity: 1; transform: none; transition: none; }
@media (min-width: 992px) { .blog-post__sidebar { position: sticky; top: calc(var(--s-bar-h) + 24px); align-self: start; } }

/* ---------- shop ---------- */
/* The grid rule sits on the outer section; the cards live one level in. */
.shop-grid.section { display: block; padding-top: 1.5rem; }
.shop-filters.section { padding-bottom: 0; }
.shop-grid__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.filter-bar__btn {
  min-height: 44px; padding: 0 1.1rem; border-radius: var(--s-r-pill); border: 1px solid var(--s-line); background: #fff;
  color: var(--s-ink); font: 500 0.95rem/1 Outfit, system-ui, sans-serif; cursor: pointer;
}
.filter-bar__btn:hover { background: var(--s-mist); }
.filter-bar__btn--active, .filter-bar__btn--active:hover { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }

/* ---------- FAQ icons ----------
   Where the icon is a Font Awesome <i>, the old "+" pseudo-element drew in
   the icon font as a missing-glyph box. The <i> already has its chevron. */
i.accordion__icon::before { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.9rem; }
.accordion__trigger[aria-expanded="true"] i.accordion__icon { transform: rotate(180deg); }

/* ---------- smaller pieces ---------- */
.checklist__item::before { display: none; }                 /* the <i> tick is the tick */
/* Tick lists whose items mix a link and plain text: as flex rows each run
   became its own column. Flow the text normally, with the tick hung left. */
.service-detail__checklist li, .checklist__item { display: block; position: relative; padding-left: 30px; line-height: 1.5; }
.service-detail__checklist li > i:first-child, .checklist__item > i:first-child { position: absolute; left: 0; top: 0.2em; }
.checklist__icon { color: var(--s-accent); }
.booking__header { background: var(--s-mist); color: var(--s-ink); }
.booking__header h2, .booking__header h3, .booking__header p { color: var(--s-ink); }
.booking__phone-link { color: var(--s-accent); font-weight: 600; }
.booking__phone-link:hover { color: var(--s-accent-hover); }
.booking__step-indicator { color: var(--s-ink-soft); }
.booking__step-indicator--active { color: var(--s-ink); }
.booking__step-indicator--completed { color: var(--s-accent); }
.booking__step-number { border-color: #AFC3DD; color: var(--s-ink-soft); }
.booking__step-indicator--completed .booking__step-number { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }
.booking__step-line { background: #C9D6E8; }
.booking__step-indicator--completed + .booking__step-line { background: var(--s-accent); }
.booking__nav-next, .booking__confirm-submit { text-transform: none; letter-spacing: 0; border-radius: var(--s-r-pill); }
/* The widget moves focus to each step's heading (tabindex="-1") so screen
   readers announce it; that is not keyboard focus and needs no ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.booking__error, .booking__area-status { display: block; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; color: var(--s-ink); font-weight: 500; margin-bottom: 0.5rem; }
.ba-slider__label { line-height: 1.2; padding: 6px 12px; border-radius: var(--s-r-pill); }
.pricing-card__range, .pricing-card .price { color: var(--s-accent); }
.pricing-card__icon { color: var(--s-accent); background: none; }
.pricing-card { border: 1px solid var(--s-line); border-top: 3px solid var(--s-accent); border-radius: var(--s-r-lg); }
.footer__trust-item { padding-inline: 12px; }
/* Four-column grids holding three cards: share the row instead of leaving a gap. */
.grid--4col { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- small text that was too faint to read ---------- */
.card__date, .sidebar__post-date, .cp-sidebar__detail, .card__price-note, .last-updated { color: #5E6F8C; }
.legal-content a { color: var(--s-accent); }
.required, .form__group .form__label .required { color: #C62828; }
.svc-card .svc-card__cta, a.svc-card .svc-card__cta { color: var(--s-accent); font-weight: 600; border-radius: var(--s-r-pill); }
.svc-card:active .svc-card__cta { color: #fff; background: var(--s-accent); }
.legal-content .last-updated { color: #5E6F8C; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .section { padding-block: clamp(3.25rem, 12vw, 4.5rem); }
  .hero--page { padding-top: calc(var(--s-bar-h) + 2.25rem); padding-bottom: 2.5rem; }
  .cta-band__buttons { flex-direction: column; align-items: stretch; }
  .cta-band__buttons .btn { width: 100%; }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .navbar__logo img.navbar__logo-img { height: 34px; }
}

/* ---------- phones: the chat button, the cookie banner, long addresses ----------
   The Ask Dusty pill (injected by greenshootsmedia.com.au) covered forms, lists
   and buttons on phones; there it becomes a round button above the quick bar and
   its suggestion bubbles stay hidden. The cookie banner is a compact strip at the
   very bottom, and the quick bar and chat button wait until it is answered.
   Region cards simply appear on phones: a sideways wipe caught mid-way showed
   chopped words. */
.cookie-consent { z-index: 10000; }
/* Long addresses may break anywhere only on narrow screens; on desktop the
   contact column is wide enough to keep "...com.au" whole. */
@media (max-width: 991px) { a[href^="mailto:"] { overflow-wrap: anywhere; } }
@media (min-width: 992px) { .footer__grid { grid-template-columns: 1.3fr 1fr 0.9fr 1.4fr; } }
@media (max-width: 860px) {
  .gs-chatbot__chips { display: none !important; }
  .gs-chatbot__trigger--prominent {
    width: 52px !important; height: 52px !important; min-height: 0 !important; padding: 0 !important;
    justify-content: center !important; border-radius: 50% !important;
  }
  .gs-chatbot__trigger--prominent .gs-chatbot__trigger-text { display: none !important; }
  .gs-chatbot__trigger--prominent .gs-chatbot__trigger-dot { left: 34px; bottom: 5px; }
  .cookie-consent { bottom: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  .cookie-consent__inner { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px !important; }
  .cookie-consent__text { font-size: 0.8rem !important; line-height: 1.4 !important; }
  .cookie-consent__actions { flex-direction: column; gap: 6px !important; }
  .cookie-consent__btn { min-height: 40px; padding: 0 16px !important; }
  body:has(.cookie-consent--visible) .mobile-cta,
  body:has(.cookie-consent--visible) .gs-chatbot { visibility: hidden; }
  .sc-reveal-cover { display: none; }
}

/* ---------- 6 Oct 2026 review fixes ----------
   Footer contact rows: the old flex rule styled the link and span, but the
   markup is li > i + a, so each icon sat on its own line. */
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer__contact li > i { flex: 0 0 1.1em; margin-top: 0.4em; text-align: center; }
.footer__contact li > a, .footer__contact li > span { min-width: 0; }

/* Ask Dusty: the suggestion bubbles covered lists, cards and FAQ arrows on
   desktop too, so they stay hidden at every width; and the chat waits for
   the cookie strip at every width, as it already did on phones. */
.gs-chatbot__chips { display: none !important; }
body:has(.cookie-consent--visible) .gs-chatbot { visibility: hidden; }
/* Phones: the round chat button docks in the right end of the quick bar
   instead of floating over headings and buttons. */
@media (max-width: 767px) {
  .mobile-cta { padding-right: 76px; }
  body:has(.mobile-cta) .gs-chatbot__trigger { right: 12px !important; bottom: calc(5px + env(safe-area-inset-bottom)) !important; }
}

/* Card grids: a short last row is centred instead of leaving empty cells,
   and five or six cards make rows of three rather than four and a stray. */
@media (min-width: 992px) {
  .service-areas__grid, .services__grid, .related-services__grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .service-areas__grid > * { flex: 0 1 calc((100% - 3 * 24px) / 4); }
  .service-areas__grid:has(> :nth-child(5):last-child) > *,
  .service-areas__grid:has(> :nth-child(6):last-child) > * { flex-basis: calc((100% - 2 * 24px) / 3); }
  .services__grid > *, .related-services__grid > * { flex: 0 1 calc((100% - 2 * 32px) / 3); }
}
/* One before/after slider on its own sits centred, not in a half-empty row. */
.before-after__grid:has(> :only-child) { grid-template-columns: minmax(0, 56rem); justify-content: center; }

/* Reduced motion: wipe reveals show their content straight away (the engine
   runs reveals regardless, so the page settles it here). */
@media (prefers-reduced-motion: reduce) {
  .sc-reveal-cover { display: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
}