/* 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 { background: #fff; 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, #indexOverlay header .hamburger, #overlay .hamburger { 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 .site-footer a[href] { color: var(--site-accent); text-decoration: none; transition: color .2s ease; }
body .site-footer a[href]:hover, body .site-footer a[href]:focus-visible { color: #0d0e1a; 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: #009bb0; --site-background: #fafafa; --site-border: #e3e8eb; }
#mainHeader { box-shadow: 0 3px 16px rgba(18,45,67,.06); }
#mainHeader .site-header-brand { flex: 0 0 auto; }
#indexOverlay { min-height: 560px; height: 100dvh !important; margin-bottom: 0; }
#indexOverlay header { padding-top: 0; height: var(--site-header-height); align-items: center; }
#indexOverlay > div img { width: 340px; height: auto; }
#indexOverlay footer { padding: 1.5rem 0; }
#overlay { overflow-y: auto; }
#overlay .site-menu-bar { height: var(--site-header-height); }
#overlay .hamburger { position: static; top: auto; }
#overlay .navbar-nav { margin-top: .75rem; padding-bottom: 2rem; }
#intro { padding: 4rem 0; }
#intro h1 { max-width: 30ch; margin: 0 auto 1.5rem; font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.2; }
#intro p { max-width: 64ch; margin: 0 auto 1.25rem; padding: 0; font-size: 1rem; line-height: 1.65; }
#serviceSlider { padding: 3rem 0; }
.service { border-radius: var(--site-radius); }
#about > .container-xxl { max-width: 1000px; }
#service p, #about p { line-height: 1.8; }
#team .member > div > img { border-radius: var(--site-radius); }
#mailing { padding: 2.5rem 1rem; }
#mailing h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.site-footer > .container-xxl:first-child { gap: 2rem; }
@media (max-width: 767px) {
    #mainHeader .site-header-action .btn { display: inline-flex; }
    #indexOverlay > div img { width: 260px; }
    #intro { padding: 3rem 0; }
}

#serviceSlider h2 { padding: 0; margin-bottom: 2rem; font-size: 2rem; }
#services .service > a, #serviceSlider .service { border-radius: var(--site-radius); overflow: hidden; }
#about > .container-xxl p, #philosophy p { max-width: 65ch; width: 100%; margin-left: auto; margin-right: auto; }
#intro { scroll-margin-top: calc(var(--site-header-height) + 1rem); }

.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-details p:last-child { margin-bottom: 0; }
.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-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; }
.site-footer { padding-bottom: 0; }
.footer-social-links { flex-direction: column; align-items: flex-end; gap: 0; margin-bottom: 1.5rem; }
@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; }

/* AI: Match MBall's half-second header transition as the opening screen scrolls away. */
.site-header { transition: background-color .5s ease-in-out, border-color .5s ease-in-out, box-shadow .5s ease-in-out; }
.site-header .site-header-brand { transition: opacity .5s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .site-header, .site-header .site-header-brand { transition: none; }
}

.home #mainHeader { position: fixed; top: 0; width: 100%; z-index: 1045; background: transparent; border-bottom-color: transparent; box-shadow: none; }
.home #mainHeader .site-header-brand { opacity: 0; pointer-events: none; }
.home #mainHeader.header-revealed { background: var(--site-background); border-bottom-color: var(--site-border); box-shadow: 0 3px 16px rgba(18,45,67,.06); }
.home #mainHeader.header-revealed .site-header-brand { opacity: 1; pointer-events: auto; }
#indexOverlay > header { visibility: hidden; }

/* AI: Keep service cards and enquiry sections consistent with the refreshed article layout. */
#indexOverlay .homepage-intro { max-width: 58ch; margin: 2rem auto 0; font-size: 1.05rem; }
#indexOverlay footer { padding: 0 0 clamp(3rem, 6vh, 5rem); }
.homepage-continue { display: inline-flex; padding: .75rem; animation: continue-bounce 2.5s ease-in-out infinite; }
@keyframes continue-bounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(6px); } 90% { transform: translateY(0); } }
.services-cards { gap: 1.5rem; }
.service-tile { flex: 1 1 calc((100% - 4.5rem) / 4); padding: 1.25rem; background: #fff; border: 1px solid var(--site-border); border-radius: var(--site-radius); color: #10111b; text-align: left; text-decoration: none; transition: border-color .2s, transform .2s; }
.service-tile h3 { font-size: 1.4rem; margin: 0 0 .75rem; }
.service-tile .service-summary { margin: 0 0 1rem; font-size: .95rem; line-height: 1.65; color: #10111b; }
.service-tile span { color: var(--site-accent); font-size: .9rem; }
.service-tile:hover { border-color: var(--site-accent); transform: translateY(-3px); }
#services .services-cards { margin-bottom: 3rem; }
#service { padding: 3rem 0 4rem; }
#service .service-heading h1 { font-size: clamp(2.25rem, 4vw, 3rem); margin: .75rem 0 3rem; }
#service .service-content .wp-block-columns { gap: 3rem; align-items: flex-start; margin-bottom: 0; }
#service figure { margin: 0; }
#service figure img { width: 100%; height: auto; border-radius: var(--site-radius); }
#service .service-content ul { padding-left: 1.25rem; }
#service .service-content li { padding-left: .25rem; margin-bottom: .65rem; }
#testimonials { border: 0; margin-bottom: 3rem; }
#testimonials .testimonial-card { flex-direction: column; padding: 2.5rem 2rem; background: #f0f3f4; border-radius: var(--site-radius); }
#testimonials .comment { max-width: 70ch; margin: 0 auto 1.5rem; text-align: center; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.65; }
#testimonials .testimonial-author { margin: 0; text-align: center; font-size: .95rem; }
#service-cta { padding: 2rem 0; }
#service-cta h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .75rem; }
#service-cta p { max-width: 60ch; margin: 0 auto 1.25rem; }
#service-cta .btn-link { background: #fff; border-color: #fff; color: var(--site-accent); }
#service-cta .btn-link:hover, #service-cta .btn-link:focus-visible, #service-cta .btn-link:active { background: #0d0e1a; border-color: #0d0e1a; color: #fff; }
.site-footer .footer-details p { max-width: 420px; }
.site-footer .footer-links { align-self: stretch; }
.site-footer .footer-links #weird-wolf-logo { flex: 0 0 auto; width: 42px; margin: auto 0 0; padding-top: 1.5rem; }
.site-footer .footer-links #weird-wolf-logo img { display: block; }
@media (max-width: 991px) { .service-tile { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 767px) { #service .service-content .wp-block-columns { gap: 2rem; } #indexOverlay .homepage-intro { font-size: 1rem; } #indexOverlay > div > div { padding: 0 1.5rem !important; } }
@media (max-width: 479px) { .service-tile { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .homepage-continue { animation: none; } .service-tile { transition: none; } }

/* AI: Share service navigation and spacing across the main pages and article templates. */
.services-related { padding-top: 3rem; padding-bottom: 3rem; background: #fff; }
.blog-section-heading { padding-left: 10px; padding-right: 10px; }
.service-more > span { display: inline-block; transition: transform .2s ease; }
.service-tile:hover .service-more > span, .service-tile:focus-visible .service-more > span { transform: translateX(4px); }
#about #team { background: #f0f3f4; color: #10111b; margin: 0; }
#about .team-cards { gap: 1.5rem; align-items: stretch; text-align: left; }
#about .member { flex: 0 0 calc((100% - 4.5rem) / 4); min-width: 0; }
#about .team-card { padding: 1.25rem; background: #fff; border-radius: var(--site-radius); }
#about .team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0 0 1.5rem; border-radius: .75rem; }
#about .team-links { gap: .75rem; margin: 1rem 0; }
#about .team-links img { filter: brightness(0); width: 24px; height: 24px; object-fit: contain; margin: 0 !important; }
#about .member .bio { font-size: .95rem; line-height: 1.75; }
#about .member .bio p { margin-bottom: 1rem; }
#about .member .bio p:last-child { margin-bottom: 0; }
#about #team .job { color: var(--site-accent); font-size: 1rem; }
#resources { padding-bottom: 1.5rem; }
#resources dl { border: 1px solid var(--site-border); border-radius: var(--site-radius); padding: 1.75rem; background: #f2f5f5; }
#resources dl dt { margin-bottom: 1.5rem; font-size: 1.6rem; }
#resources dl dd { margin-bottom: .75rem; }
#resources dl dd:last-child { margin-bottom: 0; }
#resources dl a { text-decoration: underline; text-underline-offset: .2em; }
#contact > div:first-child { padding: 3rem 1rem 2rem; }
#contact > div:first-child h1 { margin-bottom: 3rem; }
#contact > div:first-child p { max-width: 65ch; margin: 0 auto; }
.contact-layout { gap: 3rem; margin-bottom: 1rem; align-items: flex-start; }
.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-bottom: 1rem; }
#contact form { width: 100%; margin: 0; }
#contact form label { display: block; width: 100%; font-size: .95rem; }
#contact form .row { row-gap: 1.25rem; margin-bottom: 1.25rem; }
#contact form p { margin: 0; }
#contact form input:not([type=submit]):not([type=hidden]), #contact form textarea { width: 100%; padding: .75rem 1rem; margin: .5rem 0 0; border: 1px solid #cbd5d9; background: #fff; color: #10111b; border-radius: var(--site-control-radius); line-height: 1.5; }
#contact form input:not([type=submit]):not([type=hidden]) { min-height: 48px; }
#contact form textarea { min-height: 180px; }
#contact form .wpcf7-spinner { display: none; }
#contact form.submitting .wpcf7-spinner { display: inline-block; }
@media (max-width: 1199px) { #about .member { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575px) { #about .member { flex-basis: 100%; } .contact-layout { gap: 2rem; } }
@media (prefers-reduced-motion: reduce) { .service-more > span { transition: none; } }

.services-related-other { padding-bottom: 3rem; }
@media (min-width: 992px) { .services-related-other .service-tile { flex-basis: calc((100% - 3rem) / 3); } }

/* AI: Keep service imagery beside long copy without following it into the next section. */
@media (min-width: 992px) {
    #service .service-content .wp-block-column:first-child { position: sticky; top: calc(var(--site-header-height) + 1.5rem); align-self: flex-start; }
    #service .service-content .wp-block-column:first-child img { display: block; max-height: calc(100dvh - var(--site-header-height) - 3rem); object-fit: contain; }
}

.contact-details-columns { gap: 1.5rem; }
.contact-details-columns > div { flex: 1 1 0; min-width: 0; }
.contact-details-columns address { margin: 0; }
.contact-location-actions p { margin-bottom: 1.25rem; }
.contact-details-columns a { overflow-wrap: anywhere; }


.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 overlay navigation compact and distinguish service links from the main pages. */
body #overlay { overflow-y: auto; }
body #overlay .navbar-nav { margin: .75rem 0 0; padding: 0 0 2rem; list-style: none; }
body #overlay .navbar-nav li { margin: 0; padding: 0; }
body #overlay .navbar-nav a { display: block; padding: .3rem 0; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.3; }
body #overlay .navbar-nav ul { list-style: none; margin: .4rem 0 .6rem; padding: 0 0 0 1.25rem; }
body #overlay .navbar-nav ul a { padding: .25rem 0; font-size: 1.1rem; line-height: 1.4; }

.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 { flex: 1 0 auto; }
body > .site-footer, body > #mailing { flex-shrink: 0; }