/* AI: Shared spacing and corner treatment connect the main site with its article layouts. */
:root { --site-radius: 1rem; --site-control-radius: .5rem; --site-header-height: 96px; }
html { overflow-x: clip !important; }
body { display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow-x: clip; line-height: 1.7; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
p { margin-bottom: 1.25rem; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 4px; }
.site-header { padding: 0; background: var(--site-background); border-bottom: 1px solid var(--site-border); box-shadow: 0 3px 16px rgba(18,45,67,.06); }
.site-header .site-header-bar { height: var(--site-header-height); align-items: center; gap: 1rem; }
.site-header .site-header-control, .site-header .site-header-action { flex: 1; min-width: 0; align-items: center; }
.site-header .site-header-action { justify-content: flex-end; }
.site-header .site-header-brand { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.site-header .site-header-brand a { display: flex; align-items: center; }
.site-header .site-header-brand img { width: auto; height: 68px; max-width: 260px; object-fit: contain; }
.site-header .hamburger, .site-header .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; padding: .75rem; margin-left: -.75rem; min-height: 48px; }
body .btn, body .btn-link, body input[type=submit] { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.75rem; border-radius: var(--site-control-radius); font-size: 1rem; line-height: 1.25; text-align: center; }
body .btn-link:where(:not(:hover):not(:focus-visible):not(:active)) { background: #fff; }
body .form-control, body :where(input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea) { border-radius: var(--site-control-radius); }
.blog-card, .blog-enquiry, .blog-hero, .blog-empty { border-radius: var(--site-radius); }
.blog-refresh { --blog-sticky-offset: 120px; }
.site-footer { border-top: 1px solid var(--site-border); padding: 3rem 0 1.5rem; font-size: .9rem; line-height: 1.7; }
.site-footer p:last-child { margin-bottom: 0; }
body #main-footer a[href] { color: var(--site-accent); text-decoration: none; transition: color .2s ease; }
body #main-footer a[href]:hover, body #main-footer a[href]:focus-visible { color: #fff; text-decoration: none; }
body a[href^="mailto:"], body a[href^="tel:"] { color: var(--site-accent); text-underline-offset: .2em; }
body a[href^="mailto:"]:hover, body a[href^="tel:"]:hover { color: var(--site-accent); text-decoration: underline; }
@media (max-width: 767px) {
    :root { --site-header-height: 76px; }
    .site-header .site-header-bar { gap: .5rem; }
    .site-header .site-header-brand img { height: 48px; max-width: 180px; }
    .site-header .site-header-action .btn, .site-header .site-header-action .btn-link { min-height: 42px; padding: .6rem .8rem; font-size: .9rem; }
    .site-footer > .container-xxl > .d-flex, .site-footer > .container > .d-flex { gap: 1.5rem; }
    .blog-refresh { --blog-sticky-offset: 96px; }
}

:root { --site-accent: #0c8d9e; --site-background: #fff; --site-border: #dce3e5; }
body { padding-top: var(--site-header-height); }
#main-header, #main-header.animate { padding: 0; box-shadow: 0 3px 16px rgba(18,45,67,.06) !important; }
.home #main-header:not(.animate) { box-shadow: none !important; border-bottom-color: transparent; }
#main-header.hamburger-open { background: #122d43 !important; border-bottom-color: transparent; box-shadow: none !important; }
#main-header .site-header-brand { flex: 0 0 auto; }
#index-overlay { margin-top: calc(-1 * var(--site-header-height)); height: 100dvh; min-height: 640px; }
#index-overlay .intro-brand { width: 240px; max-width: 65vw; }
#index-overlay .intro-content { width: 100%; max-width: 780px; padding: 0 1.5rem; }
#index-overlay .intro-copy { width: 100%; max-width: 64ch; }
#index-overlay p { margin: 2rem auto 0; font-size: 1rem; line-height: 1.7; color: #122d43 !important; }
#main-content .builder p { max-width: 70ch; }
#main-footer > .container-xxl { gap: 2rem; }
@media (max-width: 767px) {
    #main-header .site-header-action .btn { display: inline-flex; }
    #index-overlay { min-height: 560px; }
    #index-overlay .intro-brand { width: 200px; }
    #index-overlay p { font-size: 1rem; }
}

.b-blocks .block > a { border-radius: var(--site-radius); overflow: hidden; }
.b-team .text-center > img { border-radius: var(--site-radius); }
.b-team p { line-height: 1.8; }

.footer-layout { gap: 2rem; }
.site-footer .footer-details { flex: 1 1 0; min-width: 0; }
.site-footer .footer-details p { max-width: 60ch; margin-bottom: .75rem; }
.site-footer .footer-links { flex: 1 1 0; min-width: 0; margin: 0; text-align: right; }
.site-footer .footer-links ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-links a { display: block; }
.site-footer .footer-links .footer-social-links { align-items: flex-end; margin-bottom: 1.5rem; }
.site-footer .footer-brands { flex: 1 1 0; min-width: 0; gap: 1.5rem; justify-content: center; align-self: center; }
.site-footer .footer-partner img { width: 150px; max-height: 72px; object-fit: contain; }
.site-footer .footer-layout { padding-bottom: 2rem; }
#main-footer { padding-bottom: 0; }
@media (max-width: 767px) {
    .site-footer .footer-details { flex-basis: 100%; }
    .site-footer .footer-links { margin-left: 0; }
    .site-footer .footer-brands { margin-left: 0; flex-wrap: wrap; }
}

.b-subscribe .wpcf7 input:not([type=hidden]), #mailing .wpcf7 input:not([type=hidden]) { box-sizing: border-box; height: 48px; border-radius: var(--site-control-radius); margin: 0; padding: .75rem 1rem; line-height: 1.25; }
.b-subscribe .wpcf7 .row, #mailing .wpcf7 .row { align-items: flex-start; row-gap: 1rem; }
.b-subscribe .wpcf7-form-control-wrap, #mailing .wpcf7-form-control-wrap { display: block; }
.b-subscribe .wpcf7-spinner, #mailing .wpcf7-spinner { display: none; }
.b-subscribe .submitting .wpcf7-spinner, #mailing .submitting .wpcf7-spinner { display: inline-block; }

#main-header.hamburger-open .site-header-brand, #main-header.hamburger-open .site-header-brand img { visibility: hidden !important; }

/* AI: Match the contact layout across the three local sites using their existing forms. */
.contact-heading { margin: 2rem 0 3rem; }
.contact-layout { gap: 3rem; align-items: flex-start; padding-bottom: 3rem; }
.contact-location, .contact-enquiry { flex: 1 1 0; min-width: 0; width: 100%; }
.contact-location { padding: 1.25rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: #fafbfc; }
.contact-map { display: block; width: 100%; height: 300px; border: 0; border-radius: var(--site-radius); }
.contact-location-details { padding: 1.5rem 0 0; }
.contact-location-details h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.contact-details-columns { gap: 1.5rem; }
.contact-details-columns > div { flex: 1 1 0; min-width: 0; }
.contact-details-columns address { margin: 0; }
.contact-details-columns a { overflow-wrap: anywhere; }
.contact-location-actions p { margin-bottom: 1.25rem; }
.contact-layout .btn-link { border: 1px solid var(--site-accent); background: #fff; color: var(--site-accent); }
.contact-layout .btn-link:hover { border-color: var(--site-accent); background: var(--site-accent); color: #fff; }
.contact-enquiry form { width: 100%; margin: 0; }
.contact-enquiry form label { display: block; width: 100%; font-size: .95rem; }
.contact-enquiry form .row { row-gap: 1.25rem; margin-bottom: 1.25rem; }
.contact-enquiry form p { margin: 0; }
.contact-enquiry form input:not([type=submit]):not([type=hidden]), .contact-enquiry form textarea { width: 100%; padding: .75rem 1rem; margin: .5rem 0 0; border: 1px solid #cbd5d9; background: #fff; color: inherit; border-radius: var(--site-control-radius); line-height: 1.5; }
.contact-enquiry form input:not([type=submit]):not([type=hidden]) { min-height: 48px; }
.contact-enquiry form textarea { min-height: 180px; }
.contact-enquiry .wpcf7-spinner { display: none; }
.contact-enquiry .submitting .wpcf7-spinner { display: inline-block; }
@media (max-width: 575px) { .contact-layout { gap: 2rem; } }

.b-content:has(.contact-heading) { padding-bottom: 0; }
.b-content:has(.contact-heading) + .b-content:has(.contact-layout) { padding-top: 0; }

.contact-location-actions { display: flex; flex-direction: column; align-items: flex-end; }
.contact-location-actions > p { align-self: stretch; text-align: right; }
.contact-location-actions > .btn-link { margin-top: auto; }

/* AI: Keep descriptions visible on image-backed services and give article sections clear contrast. */
#index-overlay footer { padding: 0 0 clamp(3rem, 6vh, 5rem); }
#index-overlay .intro-continue img { width: 20px; height: 20px; }
.intro-continue { display: inline-flex; padding: .75rem; animation: intro-cue-bounce 2.5s ease-in-out infinite; }
@keyframes intro-cue-bounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(6px); } 90% { transform: translateY(0); } }
.b-blocks .service-block { flex-grow: 1; }
.b-blocks .service-card { flex: 1; position: relative; overflow: hidden; background-position: center; background-size: cover; border-radius: var(--site-radius); text-decoration: none; }
.service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,45,67,.55), rgba(18,45,67,.95)); transition: opacity .25s; }
.service-card:hover::before, .service-card:focus-visible::before { opacity: .85; }
.service-card-body { position: relative; justify-content: flex-end; padding: 2rem; color: #fff; }
.service-card-body h3 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 1rem; color: #fff; }
.service-card-body p { max-width: 58ch; margin-bottom: 1.25rem; line-height: 1.7; }
.service-more > span { display: inline-block; transition: transform .2s; }
.service-card:hover .service-more > span, .service-card:focus-visible .service-more > span { transform: translateX(4px); }
.blog-latest { background: #e9edf0; }
.blog-latest .blog-card { background: #fff; }
.blog-section-heading { padding-inline: 10px; }
.b-team { padding: 3rem 0; background: #e9edf0; }
.team-cards { gap: 1.5rem; align-items: stretch; }
.team-card { flex: 0 0 calc((100% - 4.5rem) / 4); min-width: 0; padding: 1.25rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: #fff; }
.team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .75rem; margin-bottom: 1.5rem; }
.team-card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.team-role { color: var(--site-accent); margin-bottom: 1.25rem; }
.team-bio p { font-size: .95rem; line-height: 1.75; margin-bottom: 1rem; }
.team-bio p:last-child { margin-bottom: 0; }
#main-footer { border-top: 0; }
#main-footer .footer-links { align-self: stretch; }
#main-footer .footer-links #weird-wolf-logo { flex: 0 0 auto; width: 42px; margin: auto 0 0; padding-top: 1.5rem; }
#main-footer .footer-links #weird-wolf-logo img { display: block; }
#main-footer .footer-details p:last-child { margin-bottom: 0; }
@media (max-width: 1199px) { .team-card { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575px) { .team-card { flex-basis: 100%; } .service-card-body { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .intro-continue { animation: none; } .service-card::before, .service-more > span { transition: none; } }

#main-content { scroll-margin-top: var(--site-header-height); }

.contact-location-actions > .contact-directions { margin-top: auto; }
.contact-directions p { margin: 0; }

/* AI: Keep overlay navigation compact and distinguish service links from the main pages. */
body #overlay { overflow-y: auto; }
body #overlay #menu-hamburger { margin: calc(var(--site-header-height) + .75rem) 0 0; padding: 0 0 2rem; list-style: none; }
body #overlay #menu-hamburger li { margin: 0; padding: 0; }
body #overlay #menu-hamburger a { display: block; padding: .3rem 0; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.3; }
body #overlay #menu-hamburger ul { list-style: none; margin: .4rem 0 .6rem; padding: 0 0 0 1.25rem; }
body #overlay #menu-hamburger ul a { padding: .25rem 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.4; }

#main-header .site-header-action .btn { background: #fff !important; }
#main-header .site-header-action .btn:hover, #main-header .site-header-action .btn:focus-visible, #main-header .site-header-action .btn:active { background: #122d43 !important; border-color: #122d43; color: #fff; }
.b-subscribe .wpcf7 input[type=submit] { background: #fff; border-color: #fff; color: #122d43; }
.b-subscribe .wpcf7 input[type=submit]:hover, .b-subscribe .wpcf7 input[type=submit]:focus-visible { background: #122d43; border-color: #122d43; color: #fff; }

.page-not-found .btn-link { border: 1px solid var(--site-accent); background: #fff; color: var(--site-accent); text-decoration: none; }
.page-not-found .btn-link:hover, .page-not-found .btn-link:focus-visible { border-color: var(--site-accent); background: var(--site-accent); color: #fff; text-decoration: none; }

.service-hero { position: relative; display: flex; align-items: center; min-height: clamp(320px, 40vw, 480px); padding: 3rem 0; background-size: cover; background-position: center; color: #fff; }
.service-hero::before { content: ''; position: absolute; inset: 0; background: rgba(18,45,67,.75); }
.service-hero > .container-xxl { position: relative; }
.service-hero h1 { margin: 0 0 1.25rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.service-hero p { max-width: 58ch; margin: 0 auto; font-size: 1.1rem; line-height: 1.65; }
.single-services .b-content .col { flex: 0 1 100%; width: 100%; max-width: 70ch; font-size: 1.05rem; line-height: 1.75; }
.single-services .b-content h2 { margin: 2rem 0 1rem; font-size: 1.65rem; line-height: 1.3; }
.single-services .b-content h2:first-child { margin-top: 0; }
.single-services .b-content li + li { margin-top: .4rem; }
.single-services .b-content p:last-child { margin-bottom: 0; }
.single-services .b-blocks { padding: 2rem 0 3rem; background: #fff; }
.single-services .b-blocks > .container-xxl > h2 { color: #122d43; }
@media (max-width: 767px) { .single-services .b-blocks .service-block { width: 100% !important; min-height: 300px !important; } }

.thank-you-page { min-height: 45vh; }
.thank-you-page h1 { margin-bottom: 1.5rem; }
.thank-you-copy { max-width: 58ch; margin-bottom: 2rem; }
.thank-you-page .btn-link { background: #fff; border: 1px solid var(--site-accent); color: var(--site-accent); text-decoration: none; }
.thank-you-page .btn-link:hover, .thank-you-page .btn-link:focus-visible { background: var(--site-accent); border-color: var(--site-accent); color: #fff; text-decoration: none; }

body > #main-content { flex: 1 0 auto; }
body > .site-footer, body > #mailing { flex-shrink: 0; }