/* Maison site refresh (Nov 2026). Loads after each page's own styles.
   Remove the <link> to this file from a page to get its old look back. */

:root {
  --navy: #0b2b30;
  --deep: #0b2b30;
  --sun: #ffc72c;
  --sun-dark: #f2b200;
  --sun-pale: #fff4cf;
  --accent: #ffc72c;
  --accent-light: #fff4cf;
  --blue-light: #fff4cf;
  --off-white: #faf6ee;
  --gray-50: #faf6ee;
  --gray-100: #f1ebdf;
  --gray-200: #e4dccc;
  --radius: 10px;
  --radius-sm: 7px;
  --heading: 'Bricolage Grotesque', 'DM Sans', sans-serif;
}

/* ---------- Headings ---------- */
h1, h2, h3, .section-title, .nav-brand, .footer-brand,
.hero-stat-num, .step-number, .cta-phone {
  font-family: var(--heading);
}
h1, h2, .section-title { letter-spacing: -0.02em; }

/* The one-italic-word look is gone: a marker swipe on light backgrounds,
   a hand-drawn underline on dark ones. */
.serif {
  font-family: inherit;
  font-style: normal !important;
  font-weight: inherit !important;
}
.section-title .serif {
  color: inherit !important;
  background: linear-gradient(transparent 60%, var(--sun) 60%, var(--sun) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 4px;
}
.hero h1 .serif, .page-hero h1 .serif, .service-hero h1 .serif, .error-section h1 .serif {
  color: var(--sun) !important;
  padding-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7c30-5 62-6 96-4 34 1 66 1 100-1' fill='none' stroke='%23ffc72c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 10px no-repeat;
}

.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: 0;
  font-size: 15px; font-weight: 700; color: var(--navy);
}
.section-label::before { content: ''; width: 28px; height: 4px; background: var(--sun); border-radius: 2px; flex-shrink: 0; }
.pm-box .section-label { color: #fff !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); transition: transform .12s, box-shadow .12s, background .12s; }
.btn-primary, .form-btn, .sidebar-btn-primary, .mobile-sticky-cta a, .mobile-menu-cta, .nav-cta {
  background: var(--sun) !important;
  color: var(--navy) !important;
  box-shadow: 0 3px 0 var(--sun-dark);
  font-weight: 800;
}
.btn-primary:hover, .form-btn:hover, .sidebar-btn-primary:hover, .nav-cta:hover {
  background: #ffd24f !important;
  color: var(--navy) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--sun-dark);
}
.btn-primary:active, .form-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-dark); }
.service-main ol > li::before { color: var(--navy) !important; }

/* Simple line icons where the phone and mail emojis used to be */
.i-ico { width: 1.05em; height: 1.05em; flex-shrink: 0; vertical-align: -0.15em; }

/* Light-coloured outline button on light backgrounds */
.home-faq .btn-outline { color: var(--navy); border-color: var(--navy); }
.home-faq .btn-outline:hover { background: var(--navy); color: #fff; }

/* ---------- Top of the page ---------- */
.hero, .page-hero, .service-hero, .pm-box { background: var(--deep) !important; }
.hero::before, .hero::after, .page-hero::before, .service-hero::before, .pm-box::before, .cta::before { display: none; }
.hero-badge { background: none; border: 0; padding: 0; color: #fff; font-size: 15px; }
.hero-badge-dot { background: var(--sun); }
.hero h1 { font-size: 56px; line-height: 1.06; }
.hero-sub { color: rgba(255,255,255,.85); }
.hero-card { border-radius: 12px; box-shadow: 10px 10px 0 var(--sun); }
.page-hero-sub, .service-hero-sub { color: rgba(255,255,255,.85); }
.service-hero-icon { display: none; }
.hero:has(+ .real-jobs), .page-hero:has(+ .real-jobs) { padding-bottom: 130px; }

/* ---------- Real job photos ---------- */
.real-jobs { background: var(--off-white); padding-bottom: 56px; }
.real-jobs-row {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 22px; align-items: center;
  margin-top: -84px; position: relative; z-index: 2;
}
.real-jobs figure {
  background: #fff; padding: 8px; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(11,43,48,.2);
  transition: transform .2s;
}
.real-jobs figure:nth-child(1) { transform: rotate(-1.8deg); }
.real-jobs figure:nth-child(2) { transform: rotate(.6deg); z-index: 1; }
.real-jobs figure:nth-child(3) { transform: rotate(1.6deg); }
.real-jobs figure:hover { transform: rotate(0) scale(1.02); z-index: 2; }
.real-jobs img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 3px; }

/* ---------- Trust strip ---------- */
.trust-bar { background: var(--sun); border: 0; padding: 18px 0; }
.trust-bar .container { justify-content: space-between; gap: 12px 28px; }
.trust-item { color: var(--navy); font-weight: 700; }
.trust-icon { display: none; }
.trust-item::before {
  content: ''; width: 16px; height: 9px; margin-top: -4px; flex-shrink: 0;
  border-left: 3px solid var(--navy); border-bottom: 3px solid var(--navy);
  transform: rotate(-45deg) scale(.8);
}

/* ---------- Section headers sit left, not centred ---------- */
.services-header, .how-header, .reviews-header, .compare-header, .pests-header,
.home-faq-header, .areas-header, .guides-strip-header { text-align: left; }
.services-header .section-sub, .how-header .section-sub, .reviews-header .section-sub,
.compare-header .section-sub, .pests-header .section-sub, .areas-header .section-sub,
.guides-strip-header .section-sub, .home-faq-header .section-sub { margin-left: 0; margin-right: 0; }
.section-title { font-size: 40px; line-height: 1.12; }
.section-sub { color: var(--gray-700); }

/* ---------- Services: a ruled list, not a wall of matching cards ---------- */
.services-grid { grid-template-columns: 1fr 1fr; gap: 0 56px; }
.service-card {
  background: none; border: 0; border-top: 2px solid var(--navy); border-radius: 0;
  padding: 22px 0 26px; position: relative;
}
.service-card:hover { border-color: var(--navy); box-shadow: none; transform: none; }
.service-card:hover h3 { background: linear-gradient(transparent 62%, var(--sun) 62%); }
.service-icon { display: none; }
.service-card h3 { font-size: 21px; display: inline; }
.service-card p { font-size: 15px; color: var(--gray-700); margin-top: 8px; padding-right: 84px; }
.service-arrow { color: var(--navy); margin-top: 10px; transition: transform .15s; }
.service-card:hover .service-arrow { transform: translateX(4px); }

/* ---------- Three steps ---------- */
.steps-grid { gap: 36px; justify-content: space-between; }
.step-card { background: none; border: 0; border-top: 2px solid var(--navy); border-radius: 0; text-align: left; padding: 22px 0 0; max-width: none; }
.step-number {
  background: none; color: var(--navy); margin: 0 0 6px; width: auto; height: auto;
  justify-content: flex-start; font-size: 68px; font-weight: 800; line-height: 1;
  -webkit-text-stroke: 0; text-shadow: 4px 4px 0 var(--sun);
}
.step-card h3 { font-size: 20px; }
.step-card p { font-size: 15px; color: var(--gray-700); }
.step-connector { display: none; }

/* ---------- Why us ---------- */
.why { background: var(--off-white); }
.why .container > div:first-child { position: sticky; top: 110px; }
.why-features { gap: 0; }
.why-feature { background: none; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; padding: 20px 0; }
.why-feature:first-child { border-top: 2px solid var(--navy); }
.why-feature-icon { display: none; }
.why-feature h3, .why-feature h4 { font-size: 19px; }
.why-feature p { font-size: 15px; color: var(--gray-700); }

/* ---------- Reviews ---------- */
.reviews { background: #fff; }
.reviews-grid { align-items: start; }
.review-card { border-radius: 10px; background: var(--off-white); border: 0; }
.review-text { font-style: normal; font-size: 16px; color: var(--navy); }
.review-source { color: var(--gray-600); }
.reviews-grid .review-card:nth-child(3n+2) { background: var(--deep); margin-top: 28px; }
.reviews-grid .review-card:nth-child(3n+2) .review-text,
.reviews-grid .review-card:nth-child(3n+2) .review-author { color: #fff; }
.reviews-grid .review-card:nth-child(3n+2) .review-source { color: rgba(255,255,255,.75); }
.review-stars { color: var(--sun-dark); }
.reviews-grid .review-card:nth-child(3n+2) .review-stars { color: var(--sun); }

/* ---------- Comparison table ---------- */
.compare-table-wrap { max-width: none; }
.compare-table { border-color: var(--gray-200); box-shadow: none; }
.compare-table th:nth-child(2) { background: var(--sun); color: var(--navy); }
.compare-table td:nth-child(2) { background: var(--sun-pale) !important; color: var(--navy); font-weight: 600; }

/* ---------- Common pests ---------- */
.pests-grid { max-width: none; margin: 0; }
.pest-card { text-align: left; background: var(--off-white); border: 0; border-radius: 8px; padding: 18px 18px 20px; }
.pest-card:hover { background: var(--sun); box-shadow: none; }
.pest-card:hover .pest-card-sub { color: var(--navy); }
.pest-card-icon { display: none; }
.pest-card-title { font-family: var(--heading); font-size: 17px; }
.pest-card-sub { font-size: 13px; color: var(--gray-700); }

/* ---------- Home page questions ---------- */
.home-faq .container { display: grid; grid-template-columns: 1fr 1.7fr; gap: 12px 56px; align-items: start; }
.home-faq-header { margin-bottom: 0; grid-column: 1; grid-row: 1; }
.home-faq-list { max-width: none; margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.home-faq-cta { text-align: left; margin-top: 12px; grid-column: 1; grid-row: 2; }
.home-faq-item { border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; background: none; margin: 0; }
.home-faq-item:first-child { border-top: 2px solid var(--navy); }
.home-faq-item summary { padding: 18px 0; }
.home-faq-a { padding: 0 0 18px; }
.home-faq-a p, .home-faq-a li { font-size: 15px; }
.home-faq-item summary:hover .home-faq-q, .home-faq-item[open] .home-faq-q { color: var(--navy); }
.home-faq-icon::before, .home-faq-icon::after { background: var(--navy); }

/* ---------- Areas ---------- */
.areas-list { justify-content: flex-start; max-width: none; margin: 0; }
.area-tag { background: var(--off-white); border: 0; border-radius: 6px; color: var(--navy); }
.area-tag:hover { background: var(--sun); color: var(--navy); }

/* ---------- Guides ---------- */
.guide-card { border-radius: 10px; border: 0; border-top: 4px solid var(--sun); }
.guide-card:hover { border-color: var(--sun); }
.guide-card .guide-more { color: var(--navy); }

/* ---------- Big call band at the bottom ---------- */
.cta { background: var(--sun) !important; text-align: left; }
.cta h2 { color: var(--navy); font-size: 42px; }
.cta p { color: var(--navy); }
.cta-phone { color: var(--navy); font-size: 60px; line-height: 1.1; letter-spacing: -0.01em; }
.cta p a { color: var(--navy) !important; font-weight: 700; }
.cta-buttons { justify-content: flex-start; }
@media (min-width: 1025px) {
  .cta::after {
    content: ''; position: absolute; top: 50%; right: max(28px, calc(50% - 550px));
    width: 430px; aspect-ratio: 8 / 5; margin-top: -135px;
    background: url('/images/ute-800.webp') center / cover no-repeat;
    border: 8px solid #fff; border-radius: 6px;
    box-shadow: 0 12px 30px rgba(11,43,48,.28);
    transform: rotate(1.6deg);
  }
}
.why .section-title { font-size: 36px; }
.commercial-links { text-align: left !important; }
.cta .btn-primary { background: var(--navy) !important; color: #fff !important; box-shadow: 0 3px 0 #000; }
.cta .btn-primary:hover { background: #123f46 !important; color: #fff !important; box-shadow: 0 4px 0 #000; }
.cta .btn-white { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.cta .btn-white:hover { background: var(--navy); color: #fff; }

/* ---------- Inner pages ---------- */
.page-hero-sub a, .service-hero-sub a { color: var(--sun) !important; }
.breadcrumb, .breadcrumb a { color: rgba(255,255,255,.75); }
.s-icon, .os-icon, .credential-icon, .about-detail-icon, .faq-section-icon,
.value-icon, .gc-icon, .contact-method-icon { display: none !important; }
.sidebar-trust-item span { display: none; }
.qa-facts li { display: block; padding-left: 22px; position: relative; }
.qa-facts li::before {
  content: ''; position: absolute; left: 2px; top: 9px; width: 12px; height: 6px;
  border-left: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: rotate(-45deg);
}
.qa-facts a { color: var(--navy) !important; }
.guide-card, .guide-card * { text-decoration: none !important; }
.sidebar-trust-item { display: flex; gap: 10px; align-items: baseline; }
.sidebar-trust-item::before {
  content: ''; width: 12px; height: 6px; flex-shrink: 0; position: relative; top: -3px;
  border-left: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: rotate(-45deg);
}
.about-image-placeholder, .hours-box, .error-section { background: var(--deep) !important; }
.about-image-placeholder::before, .error-section::before { display: none !important; }
.other-service-link { text-align: left; }
.other-service-link:hover, .suburb-card:hover, .service-link:hover { border-color: var(--navy) !important; background: var(--sun-pale); }
.os-name { font-family: var(--heading); font-size: 15px; }
.info-box, .quick-answer, .service-main .ideal-box, .highlight-box, .price-block {
  background: var(--sun-pale) !important;
  border-color: var(--sun) !important;
}
.related-guides-inner { border-left-color: var(--sun); background: var(--off-white); }
.related-guides h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--navy); }
.service-main ol > li::before { background: var(--sun) !important; }
.guides-strip .container > div[style*="center"] { text-align: left !important; }
/* Wide tables scroll inside their column on phones instead of stretching the page */
.service-main { min-width: 0; }
@media (max-width: 768px) {
  .service-main > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
}
@media (min-width: 769px) {
  .section-title:has(+ .other-services-grid), .other-services > .container > .section-title { text-align: left; }
}

/* ---------- Thank-you page ---------- */
.card { border-radius: 12px; border: 0; box-shadow: 10px 10px 0 var(--sun); }
.card h1 { font-family: var(--heading) !important; font-weight: 800 !important; }
.tick { background: var(--sun); box-shadow: none; }
.tick svg { stroke: var(--navy); }
.call { background: var(--sun); color: var(--navy); border-radius: var(--radius-sm); box-shadow: 0 3px 0 var(--sun-dark); font-weight: 800; }
.call svg { stroke: var(--navy); }
.trust .star { color: var(--sun-dark); }
.home-link { color: var(--navy); }
.home-link:hover { border-color: var(--navy); }
body:has(> .wrap > .card) { background: var(--off-white); }
body:has(> .wrap > .card) > footer { background: var(--deep); color: rgba(255,255,255,.75); border: 0; }
body:has(> .wrap > .card) > footer b { color: #fff; }
@media (max-width: 768px) { .card { box-shadow: 6px 6px 0 var(--sun); } }

/* ---------- Footer ---------- */
.footer { background: var(--deep); }
.footer-brand span { color: var(--sun); }
.footer a:hover { color: var(--sun); }

/* ---------- Offer pop-up matches ---------- */
.mpc-promo-head { background: var(--deep) !important; }
.mpc-promo-badge, .mpc-promo-btn { background: var(--sun) !important; color: var(--navy) !important; }
.mpc-promo-btn:hover { background: #ffd24f !important; }
.mpc-promo-head h2 span { color: var(--sun) !important; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 46px; }
  .home-faq .container { grid-template-columns: 1fr; }
  .home-faq-list, .home-faq-header, .home-faq-cta { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: 38px; }
  .section-title { font-size: 30px; }
  .hero-card { box-shadow: 6px 6px 0 var(--sun); margin-right: 6px; }

  .hero:has(+ .real-jobs), .page-hero:has(+ .real-jobs) { padding-bottom: 88px; }
  .real-jobs { padding-bottom: 36px; overflow: hidden; }
  .real-jobs-row { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: -56px; }
  .real-jobs figure { padding: 5px; }
  .real-jobs figure:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }

  .trust-bar .container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .trust-item { white-space: normal; font-size: 13px; line-height: 1.3; }

  .services-grid { grid-template-columns: 1fr; gap: 0; }
  .service-card { display: block; padding: 18px 0 20px; }
  .service-card p { padding-right: 0; }

  .steps-grid { gap: 22px; }
  .step-card { display: flex; gap: 16px; padding: 18px 0 0; }
  .step-number { font-size: 50px; width: 44px; height: auto; margin: 0; }

  .why .container > div:first-child { position: static; }

  .reviews-grid .review-card:nth-child(3n+2) { margin-top: 0; }

  .home-faq-item { padding: 0; }

  .cta h2 { font-size: 30px; }
  .cta-phone { font-size: 40px; }
  .cta-buttons { align-items: stretch; }
  .cta-buttons .btn { max-width: none; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }
  .section-title { font-size: 27px; }
  .cta-phone { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .real-jobs figure { transition: none; }
}