/* Shared by the homepage (style.css) and the inner pages (site-pages.css): the footer, the cursor,
   FAQ rows and the testimonial carousel. One copy, so every page matches (Christian, Oct 20 review). */

/* Footer: brand on the left, then the header's sections as columns (Oct 20 reviews). */
body .site-footer{box-sizing:border-box;margin:0;padding:64px clamp(24px,6vw,110px) 25px;display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(0,3fr);gap:50px;background:transparent;color:#293e32;font:400 13px/1.6 'Manrope',Arial,sans-serif;align-items:start}
body .site-footer a{color:inherit;text-decoration:none}
body .site-footer .footer-intro>p{font-size:13px;line-height:1.7;margin:22px 0 0;color:#5a695c}
body .site-footer .footer-nav{display:grid;grid-template-columns:repeat(5,minmax(0,auto));justify-content:space-between;gap:30px}
body .site-footer .footer-col{display:flex;flex-direction:column;gap:13px}
body .site-footer .footer-head{font:400 15px 'Manrope',Arial,sans-serif;letter-spacing:-.02em;color:#293e32;margin-bottom:4px}
body .site-footer .footer-col a:not(.footer-head){font-size:13px;color:#5a695c}
body .site-footer a:hover,body .site-footer .footer-cookie:hover{color:#7052f5}
body .site-footer .footer-brand{display:flex;align-items:center;gap:12px}
body .site-footer .footer-mark{display:block;width:27px;height:22px;background:#41794d;mask:url('/assets/mavericks-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/mavericks-mark.svg') center/contain no-repeat}
body .site-footer .footer-brand img{display:block;width:130px;height:auto;filter:brightness(0);opacity:.85}
body .site-footer .footer-bottom{grid-column:1/-1;padding-top:28px;border-top:1px solid #d6ded1;display:flex;align-items:center;gap:30px;justify-content:space-between;color:#5a695c;font-size:11px}
body .site-footer .footer-legal{display:inline-flex;align-items:center;gap:22px}
body .site-footer .footer-cookie{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
body .site-footer .footer-top{display:inline-flex;gap:8px;align-items:center}
@media(max-width:900px){body .site-footer{grid-template-columns:1fr}body .site-footer .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start}}
@media(max-width:760px){body .site-footer{padding:45px 25px 25px;gap:35px}body .site-footer .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}body .site-footer .footer-bottom{flex-wrap:wrap;gap:14px 20px;font-size:10px}body .site-footer .footer-bottom>span:first-child{width:100%}body .site-footer .footer-legal{flex-wrap:wrap;gap:14px 20px}}

/* Tennis-ball cursor (site-shared.js). Every link and control turns the ball purple, and no
   system cursor is drawn over it, including inside the homepage's service section. */
.mavericks-cursor{position:fixed;inset:0;z-index:2147483647;pointer-events:none;opacity:0}
.mavericks-cursor.is-visible{opacity:1}
.cursor-dot{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.cursor-dot svg{position:absolute;width:18px;height:18px;left:-9px;top:-9px;overflow:hidden}
.cursor-ball{transition:fill .22s ease-in-out}
.mavericks-cursor.is-hovering .cursor-ball{fill:#7052f5}
@media(prefers-reduced-motion:reduce){.cursor-ball{transition:none}}
@media(hover:hover) and (pointer:fine){html.mint-cursor-active,html.mint-cursor-active *,html.mint-cursor-active *::before,html.mint-cursor-active *::after{cursor:none!important}html.mint-cursor-active :is(iframe,video,dialog,dialog *){cursor:auto!important}html.mint-cursor-active :is(input,textarea,[contenteditable=true]){cursor:text!important}html.mint-cursor-active select{cursor:auto!important}}

/* FAQ rows: one design everywhere, and the whole row opens the answer. */
.faq-items details,.faq-list details{border:0;border-bottom:1px solid #d6ded1;padding:0;margin:0}
.faq-items details:first-child,.faq-list details:first-child{border-top:1px solid #d6ded1}
.faq-items summary,.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font:400 17px/1.4 'Manrope',Arial,sans-serif;color:#293e32;transition:color .2s}
.faq-items summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}
.faq-items summary:hover,.faq-list summary:hover{color:#7052f5}
.faq-items summary>span,.faq-list summary>span{flex-shrink:0;font-size:23px;line-height:1;transition:transform .2s}
.faq-items details[open] summary>span,.faq-list details[open] summary>span{transform:rotate(45deg)}
.faq-items details>p,.faq-list details>p{margin:0;padding:0 40px 24px 0;font-size:14px;line-height:1.75;color:#5a695c}

/* Numbers that count up when they scroll into view (site-shared.js). */
[data-count]{font-variant-numeric:tabular-nums}

/* Testimonial carousel (site-shared.js): the homepage design, used for every quote section. */
.stories-section{padding:100px clamp(24px,6vw,110px);text-align:left}
.stories-section>.stories-heading{display:block;text-align:left;margin:0 0 40px}
.stories-section .stories-heading h2{margin:0;font-weight:400;font-size:clamp(36px,4vw,60px);line-height:1.08;letter-spacing:-.055em;color:#293e32}
.stories-section .stories-heading h2 em{font-style:normal;color:#8463bd}
.stories-section .stories-carousel{display:block;position:relative}
.stories-section .stories-viewport{display:block;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;user-select:none}
.stories-section .stories-viewport::-webkit-scrollbar{display:none}
.stories-section .stories-viewport.is-dragging{scroll-snap-type:none;cursor:grabbing}
.stories-section .stories-viewport:focus-visible{outline:2px solid #8463bd;outline-offset:4px}
.stories-section .stories-track{display:flex;gap:24px;align-items:stretch}
.stories-section .carousel-story{flex:0 0 calc((100% - 72px)*.3);min-width:0;margin:0;padding:30px;border:1px solid #d5dfd1;border-radius:24px;background:linear-gradient(125deg,#eef2ea,#ece8f2);display:flex;flex-direction:column;text-align:left;scroll-snap-align:start;transition:transform .3s,box-shadow .3s}
.stories-section .carousel-story:hover{transform:translateY(-4px);box-shadow:0 16px 36px #29433214}
.stories-section .carousel-story blockquote{margin:0 0 30px;font-size:clamp(18px,1.4vw,24px);line-height:1.6;letter-spacing:-.025em;color:#293e32}
.stories-section .carousel-story .quote-highlight{font-weight:650;color:#70509c}
.stories-section .carousel-story figcaption{margin-top:auto;display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.5}
.stories-section .carousel-story figcaption div{min-width:0}
.stories-section .carousel-story figcaption strong{display:block;font-weight:600}
.stories-section .carousel-story figcaption span{display:block;font-size:12px;color:#5a695c;margin-top:4px}
.stories-section .carousel-story .story-headshot{width:64px;height:64px;flex-shrink:0;object-fit:cover;border-radius:50%}
.stories-section .carousel-story .story-logo{display:block;height:24px;width:82px;object-fit:contain;object-position:left center;margin-top:7px}
.stories-section .stories-side-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #b9cdb8;background:#f3f6f0f2;color:#354d3d;box-shadow:0 3px 12px #23352718;transition:background .2s,color .2s}
.stories-section .stories-side-arrow.is-prev{left:-24px}.stories-section .stories-side-arrow.is-next{right:-24px}
.stories-section .stories-side-arrow svg{width:24px;height:24px}
.stories-section .stories-side-arrow:hover{background:#7052f5;color:#fff}
@media(max-width:1000px){.stories-section .carousel-story{padding:24px;flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.stories-section{padding:70px 22px}.stories-section .carousel-story{flex-basis:88%;padding:24px}.stories-section .carousel-story blockquote{font-size:18px}.stories-section .stories-side-arrow{width:40px;height:40px}.stories-section .stories-side-arrow.is-prev{left:-14px}.stories-section .stories-side-arrow.is-next{right:-14px}}

/* Illustrative product views (product-views.mjs): laid out at a fixed design width and scaled to fit with
   zoom (site-shared.js), so their layout is identical at every window size and zoom level, and text stays
   sharp. */
.pv-fit{position:relative;width:100%;min-width:0}
.pv-fit>*{box-sizing:border-box}

/* Page transitions (Christian, Oct 20): pages slide left or right by their order in the header, and the four
   service pages slide up from Services and back down. The header and an open Services menu slide with the
   page: a still header tore against the sliding hero (Christian, Oct 20). page-transition.js picks the
   direction. Browsers without cross-document view transitions load pages as usual. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.65,0,.25,1)}
html:active-view-transition-type(forward)::view-transition-old(root){animation-name:mv-out-left}
html:active-view-transition-type(forward)::view-transition-new(root){animation-name:mv-in-right}
html:active-view-transition-type(backward)::view-transition-old(root){animation-name:mv-out-right}
html:active-view-transition-type(backward)::view-transition-new(root){animation-name:mv-in-left}
html:active-view-transition-type(deeper)::view-transition-old(root){animation-name:mv-out-up}
html:active-view-transition-type(deeper)::view-transition-new(root){animation-name:mv-in-up}
html:active-view-transition-type(shallower)::view-transition-old(root){animation-name:mv-out-down}
html:active-view-transition-type(shallower)::view-transition-new(root){animation-name:mv-in-down}
@keyframes mv-out-left{to{transform:translateX(-30%);opacity:0}}
@keyframes mv-in-right{from{transform:translateX(100%)}}
@keyframes mv-out-right{to{transform:translateX(30%);opacity:0}}
@keyframes mv-in-left{from{transform:translateX(-100%)}}
@keyframes mv-out-up{to{transform:translateY(-12%);opacity:0}}
@keyframes mv-in-up{from{transform:translateY(100%)}}
@keyframes mv-out-down{to{transform:translateY(12%);opacity:0}}
@keyframes mv-in-down{from{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Room for a lifted card's shadow inside the scrolling viewport, so it fades out instead of ending in a hard
   line (Christian, Oct 20 meeting). */
body .stories-section .stories-viewport{padding:12px 24px 60px;margin:-12px -24px -60px;scroll-padding-inline:24px;-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
@media(max-width:640px){body .stories-section .stories-viewport{padding-inline:14px;margin-inline:-14px;scroll-padding-inline:14px;-webkit-mask-image:none;mask-image:none}}
/* Condensed footer (Christian, Oct 20 evening). */
body .site-footer{grid-template-columns:minmax(0,1fr) auto;gap:28px 80px;padding-top:56px;padding-bottom:28px}
body .site-footer .footer-nav{grid-template-columns:repeat(3,auto);justify-content:end;gap:72px}
body .site-footer .footer-col{gap:10px}
body .site-footer .footer-head{margin:0 0 4px;font:500 11px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5a695c}
body .site-footer .footer-col a,body .site-footer .footer-col .footer-cookie{font-size:13.5px;color:#293e32;text-decoration:none;text-align:left}
body .site-footer .footer-bottom{border-top:0;padding-top:10px;font-size:11px}
@media(max-width:900px){body .site-footer{grid-template-columns:1fr}body .site-footer .footer-nav{justify-content:start;gap:48px}}
@media(max-width:560px){body .site-footer .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}body .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}}
body .site-footer .footer-col a:not(.footer-head),body .site-footer .footer-col .footer-cookie{color:#566a5b;text-decoration:none;font-size:13.5px}
body .site-footer .footer-col a:not(.footer-head):hover,body .site-footer .footer-col .footer-cookie:hover{color:#7052f5}
body .site-footer .footer-bottom .footer-top{font-size:11px}
body .site-footer .footer-bottom{align-items:baseline}
/* Footer columns evenly spaced: the brand and the three link columns are four equal columns (Oct 20 evening). */
@media(min-width:901px){body .site-footer{grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:0}body .site-footer .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:0}}
/* Footer link columns right-aligned, Company flush right (Christian, Oct 20 evening). */
@media(min-width:901px){body .site-footer .footer-nav{grid-template-columns:repeat(3,auto);justify-content:end;column-gap:clamp(56px,7vw,120px)}body .site-footer .footer-col{align-items:flex-end;text-align:right}body .site-footer .footer-col .footer-cookie{text-align:right}}
body .site-footer .footer-cookie{display:inline-flex;align-items:center;gap:7px}body .site-footer .privacy-icon{width:30px;height:14px;flex:0 0 30px}
/* Footer "Your Privacy Choices" (Oct 20 mobile pass): the icon stays beside the words instead of floating right when they wrap. */
body .site-footer .footer-col .footer-cookie{display:inline-block;align-self:flex-start;white-space:nowrap}body .site-footer .footer-col .footer-cookie .privacy-icon{display:inline-block;vertical-align:-2px;margin-left:7px}
@media(min-width:901px){body .site-footer .footer-col .footer-cookie{align-self:flex-end}}
/* Phone testimonials (Oct 20 mobile pass): the arrows sit in a row under the cards instead of over the quote. */
@media(max-width:760px){body .stories-carousel{margin-bottom:68px}body .stories-carousel .stories-side-arrow{top:auto;bottom:-64px;transform:none;width:48px;height:48px}body .stories-carousel .stories-side-arrow.is-prev{left:calc(50% - 56px);right:auto}body .stories-carousel .stories-side-arrow.is-next{right:calc(50% - 56px);left:auto}}
/* Ultra-wide screens (Christian, Oct 21 review): content stops growing at 1920px and centres, so a 3440px monitor
   shows the desktop design; the page colour fills the sides. */
@media (min-width:1921px){html{background:#f5f4ef}body{max-width:1920px;margin-inline:auto}}
/* Phone footer (Christian, Oct 21 review): Explore and Company side by side, the four services in two columns
   under them, and one line at the foot. About a third shorter than the stacked columns. */
@media(max-width:560px){
body .site-footer{padding:36px 22px 22px;gap:26px}
body .site-footer .footer-intro>p{margin-top:12px;font-size:12.5px}
body .site-footer .footer-intro>p br{display:none}
body .site-footer .footer-nav{grid-template-columns:1fr 1fr;grid-template-areas:"explore services" "company company";gap:26px 20px}
body .site-footer .footer-col{gap:4px}
body .site-footer .footer-col:nth-child(1){grid-area:explore}
body .site-footer .footer-col:nth-child(3){grid-area:company}
body .site-footer .footer-col:nth-child(2){grid-area:services}
body .site-footer .footer-col:nth-child(3){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:column;grid-template-rows:auto auto auto;column-gap:20px}
body .site-footer .footer-col:nth-child(3) .footer-head{grid-column:1/-1}
body .site-footer .footer-col a:not(.footer-head),body .site-footer .footer-col .footer-cookie{min-height:30px;display:flex;align-items:center}
body .site-footer .footer-bottom{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-top:4px;gap:8px 16px}
}
/* Phone client stories (Christian, Oct 21 review): the long quote set every card's height and left the others
   half empty. Smaller quote type on phones brings the cards close to their text. */
@media(max-width:560px){html body .carousel-story blockquote{font-size:17px!important;line-height:1.45!important;margin-bottom:22px!important}html body .carousel-story{padding:20px!important}}
/* Phone footer foot (Christian, Oct 21): Company reads Contact and Blog in one column, the two privacy links in the
   other; a hairline, then the company line and motto on the left and a round back-to-top button on the right. */
@media(max-width:560px){
body .site-footer .footer-col:nth-child(3) .footer-head{grid-row:1}
body .site-footer .footer-col:nth-child(3)>:nth-child(2),body .site-footer .footer-col:nth-child(3)>:nth-child(3){grid-column:1}
body .site-footer .footer-col:nth-child(3)>:nth-child(4),body .site-footer .footer-col:nth-child(3)>:nth-child(5){grid-column:2}
body .site-footer .footer-col:nth-child(3)>:nth-child(2),body .site-footer .footer-col:nth-child(3)>:nth-child(4){grid-row:2}
body .site-footer .footer-col:nth-child(3)>:nth-child(3),body .site-footer .footer-col:nth-child(3)>:nth-child(5){grid-row:3}
body .site-footer .footer-bottom{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between;border-top:1px solid #d6ded1!important;padding-top:18px!important;margin-top:4px}
body .site-footer .footer-copy{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.4}
body .site-footer .footer-sep{display:none}
body .site-footer .footer-motto{color:#41794d}
body .site-footer .footer-top{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #cfdacb;justify-content:center;font-size:16px!important;color:#293e32}
body .site-footer .footer-top-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:560px){body .site-footer .footer-top{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0;font-size:0!important;line-height:1;padding:0!important}body .site-footer .footer-top>[aria-hidden]{font-size:18px}}
/* Arrows in buttons a size down (Christian, Oct 21: "the arrows are kind of big"). One size everywhere. */
html body .button span[aria-hidden],html body a.button span[aria-hidden],html body button.button span[aria-hidden]{font-size:16px!important;line-height:1}
html body .service-orbit span[aria-hidden]{font-size:18px!important}
/* Logo strips sit under the hero's own margin, so their top padding doubled the gap above (Christian, Oct 21:
   "more spacing above the marquee than below"). Top padding now evens the two gaps. */
html body .site-marquee,html body #clients.clients{padding-top:9px!important}
@media(max-width:760px){html body .site-marquee,html body #clients.clients{padding-top:7px!important}}
/* Phone headlines (Christian, Oct 21: "line breaks pop up in random spots"). The desktop breaks set two coloured
   halves side by side; on a phone a break stays only where a sentence ends (site-shared.js), the coloured half runs
   on in the same line, and lines are balanced so none ends with one word. */
@media(max-width:760px){html body :is(main,section) :is(h1,h2){text-wrap:balance}html body :is(main,section) :is(h1,h2) em.phone-inline{display:inline!important}}
@media(max-width:760px){html body :is(main,section) :is(h1,h2) :is(em,span){text-wrap:balance}html body .hero h1 .hero-lead{display:inline!important}}
@media(max-width:760px){html body :is(h1,h2) .phone-line{display:block;text-wrap:balance}html body :is(h1,h2) .phone-line>em{display:inline!important}}
/* Full-screen film player for phones and tablets (site-shared.js). The 16:9 player is shown whole, never cropped. */
.film-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050806;display:none;align-items:center;justify-content:center}
.film-lightbox[open]{display:flex}
.film-lightbox::backdrop{background:#050806}
.film-lightbox-frame{width:100%;aspect-ratio:16/9;max-height:100dvh}
.film-lightbox-frame iframe{width:100%;height:100%;border:0;display:block}
.film-lightbox-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff1a;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.film-lightbox-close:focus-visible{outline:3px solid #c3edc7;outline-offset:2px}
html.film-lightbox-open{overflow:hidden}