/* massamedia site refinements (loaded after the site's own CSS) */

/* keep text at the intended size when phones rotate, and stop sideways scrolling */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* Home hero: the headline was sized from the window width only, so wide-but-short windows
   (and large monitors) pushed "Strategy" off the top and "Messaging" over "Scroll to discover".
   Cap it by height too, at the same proportion as the 1920x1080 design. */
@media (min-width: 1200px) {
  .styles_fontIntro__SuIXm > *,
  .styles_placeHolder__Qli8_ .styles_heroSec_p__elNCR,
  .styles_initIntroPlaceHolder_el__9nF13 { font-size: min(25.3rem, 23.43vh) !important; }
}
/* tablets: start the headline below the logo instead of on top of it */
@media (min-width: 768px) and (max-width: 1199px) {
  .styles_heroSec_container__NeGbA { padding-top: 14rem; }
}
/* phones held sideways / short tablets */
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 600px) {
  .styles_heroSec__b9T0h .styles_heading_260__FoBWx { font-size: min(16rem, 17vh); }
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #ffad5f !important;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  /* Home - client list: long names no longer run under the logo */
  [class*="brandShowcaseSec_title__nOKdw"] { font-size: 30px !important; line-height: 1.1 !important; }
  [class*="brandShowcaseSec_titles__images__ftUwt"],
  [class*="brandShowcaseSec_titles__image__9BIrG"],
  [class*="brandShowcaseSec_titles__image__9BIrG"] img { width: 88px !important; height: 88px !important; }

  /* Services - tighter expertise list */
  [class*="expertiseSection_right__"] { row-gap: 40px !important; }
  [class*="item_content__eOnhx"] { padding-top: 24px !important; }

  /* comfortable tap targets in menus and footers */
  [class*="menuContent_link"], [class*="footer_t__social"] { min-height: 44px; }

  /* footer: copyright on its own centred line under the address */
  .style_footer_b__right__DhjFL { grid-column: 1 / -1; margin-left: auto; margin-right: auto; text-align: center; }
}

/* footer copyright: readable contrast on black */
.style_footer_b__right__DhjFL p { color: #9a9a9a; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Home hero: links to the two service pages (Websites, Business Systems) */
.mm-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; z-index: 20; }
.mm-hero-links a {
  font: 700 15px/1 var(--font-avantt, avantt), Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em;
  color: #fee9ce; text-decoration: none; padding-bottom: 6px;
}
@media (min-width: 1200px) {
  .mm-hero-links { position: absolute; left: 100vw; bottom: 2.962962963vh; transform: translateX(calc(-100% - 4vw)); transition: opacity .6s; }
  /* stay hidden while the intro animation is still playing */
  .styles_heroSec__b9T0h:not(.styles_doneIntro__F6G13):has(.styles_initIntroPlaceHolder__brYX0) .mm-hero-links { opacity: 0; pointer-events: none; }
}
@media (max-width: 1199px) {
  .mm-hero-links { margin: 28px var(--layout-margin, 16px) 0; }
  .mm-hero-links a { font-size: 13px; }
}

/* hero caption in capitals, like the rest of the hero type */
.styles_heroSec_flex__sub__77caW { text-transform: uppercase; letter-spacing: .01em; }

/* Services page: service names link to their pages */
.mm-svc-link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s; }
.mm-svc-link:hover, .mm-svc-link:focus-visible { background-size: 100% 2px; }
/* Our Expertise: linked items get a quiet underline that fills in on hover */
#section-expertise .mm-svc-link { background-image: linear-gradient(rgba(10, 10, 10, .28), rgba(10, 10, 10, .28)), linear-gradient(currentColor, currentColor); background-size: 100% 1px, 0 1px; background-position: 0 100%, 0 100%; padding-bottom: 1px; }
#section-expertise .mm-svc-link:hover, #section-expertise .mm-svc-link:focus-visible { background-size: 100% 1px, 100% 1px; }
/* About > Previous Work: show each project's "Related service" button (the theme hid them) */
.styles_pressMention_botBtns__4v3_F { display: block; }
@media (max-width: 767px) {
  /* phones: the button sits right under the project text, and the text gets room to breathe */
  .styles_pressMention_botBlock__xOHjM { justify-content: flex-start; gap: 1.6rem; }
  .styles_pressMention_botBlockTitle__67sWl { line-height: 1.18; letter-spacing: -0.02em; }
}

/* Home > Brand experience: small honest caption under the client list */
.mm-brand-note { margin-top: 1.6rem; max-width: 34rem; font-size: 14px !important; line-height: 1.45; color: rgba(255, 235, 205, .62); }
/* About > Previous Work (desktop): keep the project headline clear of the next panel sliding in */
@media (min-width: 1200px) {
  .styles_pressMention_botBlockTitle__67sWl { max-width: 120rem; }
}

/* Menu: four items (About, Services, Work, Contact) */
.styles_menu__9VCB2 .styles_menuContent__dUEtc { flex-wrap: wrap; gap: 2.4rem 4rem; }
@media (max-width: 1199px) {
  .styles_menu__9VCB2 .styles_menuContent__dUEtc { display: grid; grid-template-columns: 1fr 1fr; row-gap: 3.2rem; }
  .styles_menu__9VCB2 .styles_menuContent__dUEtc > :nth-child(even) { justify-self: end; }
  .styles_menu__9VCB2 .styles_menuContent__dUEtc > :nth-child(odd) { justify-self: start; }
}
/* Footer: Work / Contact / Privacy next to the address */
.mm-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.mm-foot-links a { font: 600 16px/1.2 var(--font-avantt, avantt), Arial, sans-serif; color: #fee9ce; text-decoration: none; transition: color .3s; }
.mm-foot-links a:hover { color: #ef5143; }
@media (max-width: 767px) {
  .mm-foot-links { justify-content: center; }
  .mm-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Services > "WHY WE DESIGN": keep it on two lines ("WHY WE" / "DESIGN") at the original size */
.styles_getinSection__dq5E8 .styles_getinTitle__H5Mlw .styles_title__bzhXG { width: 3.75em; margin-inline: auto; }

/* ceo3: form first. "Let's have a chat": enquiry + Calendly, then phone + email smaller underneath */
.styles_letConnectSec_links__sMhdR { flex-wrap: wrap; row-gap: 4rem; }
.mm-ci-sub { display: flex; flex-wrap: wrap; gap: 2.4rem 6.4rem; flex-basis: 100%; }
.mm-ci-sm .styles_heading_44__FVOom { font-size: 2.6rem; }
@media (max-width: 1199px) { .mm-ci-sm .styles_heading_44__FVOom { font-size: 2.2rem; } }
@media (max-width: 767px) {
  .styles_letConnectSec_links__sMhdR { row-gap: 3.2rem; }
  .mm-ci-sub { gap: 2.4rem 4rem; }
  .mm-ci-sm .styles_heading_44__FVOom { font-size: 1.8rem; }
}
/* connect v4: LET'S CONNECT modal = original, plus "Send an enquiry" first in the bottom row.
   Desktop/tablet: one row as before. Phones: the original wrap pattern, as an aligned 2x2 grid. */
@media (max-width: 767px) {
  .styles_contactModule_contact__URBMS { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2.4rem 2.4rem; right: var(--layout-margin); }
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM { min-width: 0; }
}

/* logo_2026-11-06: script wordmark in the header (job 2). The wordmark (/svg/massamedia.svg, path pre-scaled to 36px tall,
   _build/logo/wordmark-path-36.txt) is a clip-path window with a backdrop filter: grayscale -> threshold (luma > ~0.8)
   -> invert -> tint, so it renders #000 over light pixels (cream hero letters, sand sections, white photos) and exactly the
   header colour (peach-cream #FFF3E2 / warm-sand #FEE9CE) over blue, black, coral, tan. Pure CSS: follows scroll and
   animation by itself. (A CSS mask or a mix-blend child disables backdrop-filter in Chrome, hence clip-path + the tint
   inside the filter chain.) Without backdrop-filter support it is a solid currentColor wordmark. */
.mm-wm { display: block; width: 109.4px; height: 36px; flex: none; color: inherit; clip-path: path('M4.78 13.12C4.86 12.91 5.28 13.03 5.62 13.37C5.99 13.7 6.2 14.12 6.08 14.37L5.32 15.67C6.62 14.42 7.88 13.37 8.67 13.07C11.27 12.19 10.85 15.04 10.02 17.6C10.14 17.52 10.31 17.43 10.43 17.39C10.81 17.22 11.15 17.1 11.44 17.1C12.11 17.06 12.66 17.39 13.03 18.19C13.24 18.65 13.24 19.36 12.91 20.32C12.87 20.41 17.39 16.68 17.43 16.68C17.6 16.51 17.98 16.05 18.31 16.43C18.69 16.76 18.65 17.01 18.48 17.18C18.44 17.22 8.42 27.78 11.57 19.15C11.61 18.98 11.65 18.86 11.69 18.69L11.52 18.77C10.39 19.36 8.93 20.58 8.63 21.08V21.12C8.51 21.37 8.13 21.29 7.75 20.95C7.38 20.62 7.21 20.16 7.29 19.95C7.29 19.91 9.85 14.46 9.72 14.5C7.46 15.3 1.42 22.67 1.38 22.71C1.26 22.88 0.88 22.76 0.54 22.46C0.21 22.13 0 21.67 0.13 21.46L4.78 13.12ZM24.55 15.84C24.72 16.26 24.59 16.51 24.26 16.43C23.92 16.34 23.5 15.97 23.34 15.59C22.5 14.79 20.45 15.76 19.69 16.39C18.14 17.64 17.26 19.15 16.8 21.08C18.27 20.66 22.08 16.22 22.08 16.22C22.25 16.05 22.62 16.18 23 16.55C23.29 16.89 23.46 17.27 23.34 17.48C23.25 17.68 22.75 18.77 23 19.95C23.17 20.95 28.62 16.39 28.7 16.34C28.87 16.18 29.2 15.97 29.54 16.3C29.87 16.68 29.83 17.01 29.66 17.18C26.9 19.65 25.26 21.12 24.13 21.71C22.21 22.71 20.74 22.13 20.78 20.07C19.27 21.5 17.72 22.8 16.8 22.38C16.46 22.25 16.21 22 15.96 21.75C15.54 21.2 15.37 20.62 15.46 19.99C15.5 19.49 15.67 18.94 15.92 18.4C16.46 17.22 17.43 15.92 18.52 15.04C20.4 13.49 23.84 13.41 24.55 15.84ZM28.65 17.98C28.48 18.15 27.98 18.4 27.64 18.06C27.31 17.68 28.19 16.93 28.35 16.76L31.5 12.95C32.04 12.36 32.46 12.03 32.46 12.03C32.63 11.86 33.05 12.03 33.34 12.4C33.68 12.74 33.84 13.2 33.68 13.37L32.67 14.33C31.79 15.34 30.62 17.14 31.08 19.07C31.33 20.28 31.2 21.25 30.87 21.96C30.66 22.34 30.37 22.63 30.07 22.88C29.78 23.09 29.44 23.26 29.11 23.34C28.52 23.47 27.94 23.38 27.47 23.13C25.09 21.92 26.38 19.57 26.38 19.53C26.51 19.32 26.89 19.4 27.27 19.74C27.64 20.07 27.81 20.53 27.73 20.74C27.73 20.79 27.14 21.83 27.22 21.88C27.39 21.96 27.73 21.96 28.06 21.88C28.35 21.83 28.65 21.71 28.9 21.5C29.15 21.33 29.4 21.04 29.53 20.74C29.82 20.16 29.95 19.4 29.74 18.44C29.74 17.89 29.36 17.85 30.37 16.01L28.65 17.98ZM35.36 17.98C35.19 18.15 34.69 18.4 34.35 18.06C34.02 17.68 34.9 16.93 35.07 16.76L38.21 12.95C38.75 12.36 39.17 12.03 39.17 12.03C39.34 11.86 39.76 12.03 40.05 12.4C40.39 12.74 40.56 13.2 40.39 13.37L39.38 14.33C38.5 15.34 37.33 17.14 37.79 19.07C38.04 20.28 37.92 21.25 37.58 21.96C37.37 22.34 37.08 22.63 36.78 22.88C36.49 23.09 36.16 23.26 35.82 23.34C35.23 23.47 34.65 23.38 34.19 23.13C31.8 21.92 33.1 19.57 33.1 19.53C33.22 19.32 33.6 19.4 33.98 19.74C34.35 20.07 34.52 20.53 34.44 20.74C34.44 20.79 33.85 21.83 33.93 21.88C34.1 21.96 34.44 21.96 34.77 21.88C35.07 21.83 35.36 21.71 35.61 21.5C35.86 21.33 36.11 21.04 36.24 20.74C36.53 20.16 36.66 19.4 36.45 18.44C36.45 17.89 36.07 17.85 37.08 16.01L35.36 17.98ZM48.9 15.84C49.07 16.26 48.94 16.51 48.61 16.43C48.27 16.34 47.85 15.97 47.69 15.59C46.85 14.79 44.8 15.76 44.04 16.39C42.49 17.64 41.61 19.15 41.15 21.08C42.62 20.66 46.43 16.22 46.43 16.22C46.6 16.05 46.97 16.18 47.35 16.55C47.64 16.89 47.81 17.27 47.69 17.48C47.6 17.68 47.1 18.77 47.35 19.95C47.52 20.95 52.97 16.39 53.05 16.34C53.22 16.18 53.55 15.97 53.89 16.3C54.22 16.68 54.18 17.01 54.01 17.18C51.25 19.65 49.61 21.12 48.48 21.71C46.56 22.71 45.09 22.13 45.13 20.07C43.62 21.5 42.07 22.8 41.15 22.38C40.81 22.25 40.56 22 40.31 21.75C39.89 21.2 39.72 20.62 39.81 19.99C39.85 19.49 40.02 18.94 40.27 18.4C40.81 17.22 41.78 15.92 42.87 15.04C44.75 13.49 48.19 13.41 48.9 15.84ZM54.26 13.12C54.34 12.91 54.76 13.03 55.09 13.37C55.47 13.7 55.68 14.12 55.55 14.37L54.8 15.67C56.1 14.42 57.36 13.37 58.15 13.07C60.75 12.19 60.33 15.04 59.49 17.6C59.62 17.52 59.79 17.43 59.91 17.39C60.29 17.22 60.63 17.1 60.92 17.1C61.59 17.06 62.13 17.39 62.51 18.19C62.72 18.65 62.72 19.36 62.39 20.32C62.34 20.41 66.87 16.68 66.91 16.68C67.08 16.51 67.46 16.05 67.79 16.43C68.17 16.76 68.13 17.01 67.96 17.18C67.92 17.22 57.9 27.78 61.04 19.15C61.09 18.98 61.13 18.86 61.17 18.69L61 18.77C59.87 19.36 58.4 20.58 58.11 21.08V21.12C57.99 21.37 57.61 21.29 57.23 20.95C56.85 20.62 56.69 20.16 56.77 19.95C56.77 19.91 59.33 14.46 59.2 14.5C56.94 15.3 50.9 22.67 50.86 22.71C50.74 22.88 50.36 22.76 50.02 22.46C49.69 22.13 49.48 21.67 49.6 21.46L54.26 13.12ZM68.67 16.3C69.25 16.13 69.88 15.88 70.55 15.59C71.43 15.13 72.19 14.25 72.65 13.45C72.73 13.28 72.77 13.16 72.86 12.99C72.4 13.2 71.85 13.54 71.22 14C70.38 14.63 69.42 15.42 68.67 16.3ZM71.64 16.97C69.67 17.98 67.45 18.23 67.32 18.23C64.48 24.35 75.79 19.15 77.09 16.8C77.21 16.55 77.63 16.26 78.01 16.6C78.35 16.93 78.35 17.1 78.22 17.35C77.05 19.4 70.51 23.93 67.62 22.29C66.19 21.5 65.31 19.82 65.65 18.19C65.86 17.14 66.49 16.05 67.32 15.09C68.16 14.16 69.13 13.28 70.05 12.61C71.26 11.78 72.4 11.27 72.86 11.36C73.23 11.44 73.57 11.65 73.86 11.99C74.28 12.45 74.45 12.99 74.37 13.49C74.32 13.87 74.16 14.25 73.95 14.67C73.49 15.55 72.65 16.47 71.64 16.97ZM83.38 18.31C83.34 18.52 83.09 18.56 82.8 18.4L82.76 18.48C81.25 19.78 79.91 20.83 78.86 21.5C77.43 22.38 75.04 22.59 75.17 20.2C75.21 19.57 75.51 18.77 75.97 17.98C76.8 16.6 78.61 14.29 80.37 14.37C82 14.33 82.5 15.17 82.92 15.8C84.47 14.33 86.07 12.61 87.57 10.81C91.01 6.71 93.36 3.31 94.49 1.55L95.37 0.21C95.49 0 95.87 0.08 96.25 0.46C96.58 0.8 96.79 1.22 96.67 1.47C96.67 1.47 96.33 2.01 95.66 3.02C91.56 9.47 76.01 33.99 76.59 35.37C76.76 35.79 76.59 36 76.26 35.91C75.92 35.83 75.51 35.45 75.38 35.03C74.88 33.86 80.45 24.31 85.81 15.46C85.02 16.3 84.22 17.1 83.43 17.81C83.43 18.1 83.38 18.27 83.38 18.31ZM82 16.68C81.92 16.39 81.71 16.05 81.16 16.05C79.65 15.97 77.98 18.02 77.27 19.19C76.93 19.78 76.68 20.32 76.59 20.74C76.85 20.62 77.22 20.41 77.68 20.12C78.73 19.49 80.07 18.44 81.54 17.14L82 16.68ZM92.92 13.28C93.13 13.12 93.55 13.28 93.88 13.66C94.22 14.04 94.34 14.46 94.13 14.63C93.21 15.42 91.7 17.22 90.78 18.98C90.2 20.16 90.24 20.83 90.66 21.04C92.37 21.29 97.03 16.76 97.03 16.72C97.19 16.55 97.49 16.22 97.82 16.6C98.2 16.97 98.03 17.1 97.86 17.27C97.82 17.27 90.87 24.81 89.06 21.67C88.48 20.62 88.77 19.19 89.48 17.77C90.41 15.97 91.96 14.08 92.92 13.28ZM95.52 12.07C95.35 12.28 94.93 12.11 94.6 11.78C94.26 11.4 94.09 10.98 94.26 10.77L96.61 8.09C96.77 7.88 97.15 8.05 97.53 8.38C97.86 8.76 97.99 9.18 97.86 9.39L95.52 12.07ZM104.07 15.84C104.24 16.26 104.11 16.51 103.77 16.43C103.44 16.34 103.02 15.97 102.85 15.59C102.01 14.79 99.96 15.76 99.21 16.39C97.66 17.64 96.78 19.15 96.32 21.08C97.78 20.66 101.6 16.22 101.6 16.22C101.76 16.05 102.14 16.18 102.52 16.55C102.81 16.89 102.98 17.27 102.85 17.48C102.77 17.68 102.27 18.77 102.52 19.95C102.69 20.95 108.13 16.39 108.22 16.34C108.38 16.18 108.72 15.97 109.06 16.3C109.39 16.68 109.35 17.01 109.18 17.18C106.42 19.65 104.78 21.12 103.65 21.71C101.72 22.71 100.25 22.13 100.3 20.07C98.79 21.5 97.24 22.8 96.32 22.38C95.98 22.25 95.73 22 95.48 21.75C95.06 21.2 94.89 20.62 94.97 19.99C95.02 19.49 95.18 18.94 95.44 18.4C95.98 17.22 96.94 15.92 98.03 15.04C99.92 13.49 103.36 13.41 104.07 15.84Z');
  -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); }
.styles_header__I7JDT .mm-wm { -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); }
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) { .mm-wm { background-color: currentColor; } }
.styles_mmLogo__7GLmk .styles_mmLogo_wrap__Y2dpP { rotate: none; width: auto; height: auto; }
.styles_header__I7JDT .styles_header_logo__x8DV4 { rotate: none; width: auto; height: auto; }
/* logo entrance (6 Nov 2026): the wordmark writes itself in left to right. Transform-only wipe (an overflow:hidden window
   slides right while its content counter-slides), because clip-path or mask on an ancestor would switch off the
   backdrop filter above. Starts when React reveals the logo (.isReavel desktop, header .reavel mobile), 1.2s woow. */
.mm-wipe { display: block; overflow: hidden; }
.mm-wipe-in { display: block; }
@keyframes mm-wipe-o { from { transform: translateX(-101%); } }
@keyframes mm-wipe-i { from { transform: translateX(101%); } }
.styles_mmLogo__7GLmk.styles_isReavel__PsBfz .mm-wipe, .styles_header__I7JDT.styles_reavel__YbsXB .mm-wipe { animation: mm-wipe-o 1.2s cubic-bezier(.215, .61, .355, 1) both; }
.styles_mmLogo__7GLmk.styles_isReavel__PsBfz .mm-wipe-in, .styles_header__I7JDT.styles_reavel__YbsXB .mm-wipe-in { animation: mm-wipe-i 1.2s cubic-bezier(.215, .61, .355, 1) both; }
@media (prefers-reduced-motion: reduce) { .mm-wipe, .mm-wipe-in { animation: none !important; } }
/* the fixed logo used to fade in over .6s; with opacity < 1 on an ancestor Chrome gives the backdrop filter an empty
   backdrop (the wordmark showed nothing until the fade ended, then popped in half-written). It now switches on at once
   when React reveals it and the wipe above is the entrance (6 Nov 2026). */
.styles_mmLogo__7GLmk { transition: color .6s var(--primary-ease); }

/* rail (6 Nov 2026): the section list fills the sidebar from the burger cell to the LET'S CONNECT tab, so at 100% the red
   progress line runs into the tab. Inactive items share the height equally; the active item keeps React's own (GSAP) height
   so its rotated label always fits, and never gets less than an equal share. Every item clips its own content. The tab is
   rotated 90deg (visual top ~5.43rem above its layout top): the list stops 5.2rem above it, so the last item tucks ~2px
   under the tab (no hairline). Inactive labels hide at once (no fragment while the item shrinks); the active one fades in. */
@media (min-width: 1200px) {
  .styles_header__I7JDT .styles_header_scrollToList__Zb_0T { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-bottom: 5.2rem; }
  .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6 { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:not(.styles_active__oVA_l) { height: auto !important; }
  .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6.styles_active__oVA_l { flex: 1 0 auto; }
  .styles_header__I7JDT .styles_header_scrollToList__Zb_0T .styles_scrollToItem__cejn6:last-child::after { display: none; }
}
.styles_scrollToItem__cejn6 .styles_scrollToItem_contentText__13Fjw { overflow: hidden; white-space: nowrap; opacity: 0; visibility: hidden; transition: none; }
.styles_scrollToItem__cejn6.styles_active__oVA_l .styles_scrollToItem_contentText__13Fjw { opacity: 1; visibility: visible; transition: opacity .4s cubic-bezier(.25, .46, .45, .94) .1s, visibility 0s; }

/* LET'S CONNECT modal rows (6 Nov 2026): arrow swap (out up-right, in from bottom-left, .6s), label nudges 4px right,
   hairlines 20% -> 40% cream, icon: envelope lifts + tilts, globe turns (first / second row). Composite-only, (hover)+focus. */
.styles_socialModalItem__5Fxtf { position: relative; }
.styles_socialModalItem__5Fxtf .styles_title__gAD4r { transition: transform .5s cubic-bezier(.215, .61, .355, 1); }
.styles_socialModalItem__5Fxtf .styles_lottie__HLs8N { transition: transform .5s cubic-bezier(.215, .61, .355, 1); }
.styles_socialModalItem__5Fxtf .styles_arrow__ZypCA { display: grid; overflow: hidden; }
.styles_socialModalItem__5Fxtf .styles_arrow_el__otet4 { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.styles_socialModalItem__5Fxtf .styles_arrow_el__otet4.styles_two__pOP9I { transform: translate(-100%, 100%); }
.styles_socialModalItem__5Fxtf::before, .styles_socialModalItem__5Fxtf::after { transition: background-color .5s cubic-bezier(.215, .61, .355, 1), border-color .5s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) {
  .styles_socialModalItem__5Fxtf:hover .styles_title__gAD4r { transform: translateX(4px); }
  .styles_socialModalItem__5Fxtf:hover .styles_arrow_el__otet4.styles_one__rIMDJ { transform: translate(100%, -100%); }
  .styles_socialModalItem__5Fxtf:hover .styles_arrow_el__otet4.styles_two__pOP9I { transform: none; }
  .styles_socialModalItem__5Fxtf:nth-child(1):hover .styles_lottie__HLs8N { transform: translateY(-2px) rotate(-8deg); }
  .styles_socialModalItem__5Fxtf:nth-child(2):hover .styles_lottie__HLs8N { transform: rotate(25deg); }
  .styles_socialModalItem__5Fxtf:hover { border-color: rgba(254, 233, 206, .4); }
}
.styles_socialModalItem__5Fxtf:focus-visible .styles_title__gAD4r { transform: translateX(4px); }
.styles_socialModalItem__5Fxtf:focus-visible .styles_arrow_el__otet4.styles_one__rIMDJ { transform: translate(100%, -100%); }
.styles_socialModalItem__5Fxtf:focus-visible .styles_arrow_el__otet4.styles_two__pOP9I { transform: none; }
@media (prefers-reduced-motion: reduce) { .styles_socialModalItem__5Fxtf * { transition: none !important; transform: none !important; } }
/* Home hero links motion (7 Nov 2026, replaces the 6 Nov keyframes): the rise is a GSAP tween in the home chunk (-v2637);
   CSS only animates transform/opacity. Underline = ::after scaleX(0 -> 1) once the link has landed (.mm-hl-on, added by JS);
   hover = a tan ::before line drawn left -> right over it + 3px nudge. 200-250ms ease-out. Reduced motion: static. */
.mm-hero-links a { position: relative; display: inline-block; border-bottom: 0; padding-bottom: 6px; transition: color .2s cubic-bezier(.215, .61, .355, 1); }
.js-heroSec .mm-hero-links a:not(.mm-hl-on) { opacity: 0; }
.mm-hero-links a::before, .mm-hero-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; transform: scaleX(0); pointer-events: none; }
.mm-hero-links a::after { background: #ef5143; transform-origin: left; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
.mm-hero-links a::before { background: #ffad5f; z-index: 1; transform-origin: right; transition: transform .2s cubic-bezier(.215, .61, .355, 1); }
.mm-hero-links a.mm-hl-on::after { transform: scaleX(1); }
.mm-hero-links a.mm-hl-on { transition: color .2s cubic-bezier(.215, .61, .355, 1), transform .2s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) {
  .mm-hero-links a:hover { color: #ffad5f; transform: translateX(3px); }
  .mm-hero-links a:hover::before { transform: scaleX(1); transform-origin: left; }
}
.mm-hero-links a:focus-visible { color: #ffad5f; transform: translateX(3px); outline: 2px solid #ffad5f; outline-offset: 4px; }
.mm-hero-links a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) {
  .mm-hero-links a, .mm-hero-links a::before, .mm-hero-links a::after { transition: none !important; animation: none !important; }
  .mm-hero-links a { transform: none !important; }
  .mm-hero-links a::after { transform: scaleX(1); }
}
/* Let's connect links (6 Nov 2026, CSS only, text unchanged): one 2x2 grid, all four links the same size / weight /
   underline, labels on one left edge per column; calendly.com gets the same arrow as Write me (both leave the page /
   section), phone and email stay plain. Phones: one column. */
.styles_letConnectSec_links__sMhdR { display: grid !important; grid-template-columns: max-content max-content; justify-content: start; column-gap: clamp(96px, 8.5vw, 140px); row-gap: 4.8rem; align-items: start; }
.styles_letConnectSec_links__sMhdR .mm-ci-sub { display: contents !important; }
.styles_letConnectSec_links__sMhdR .styles_connectItem__0kw9i { margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0; }
.styles_letConnectSec_links__sMhdR .styles_heading_44__FVOom { font-size: clamp(22px, 2.35vw, 36px) !important; line-height: 1.15 !important; font-weight: 700; white-space: nowrap; }
.styles_letConnectSec_links__sMhdR .styles_connectItem__0kw9i .styles_heading_44__FVOom a { font-size: inherit !important; }
.styles_letConnectSec_links__sMhdR a[href^="https://calendly.com"]::after { content: " \2197"; }
@media (max-width: 767px) { .styles_letConnectSec_links__sMhdR { grid-template-columns: 1fr; row-gap: 3.2rem; } .styles_letConnectSec_links__sMhdR .styles_heading_44__FVOom { font-size: clamp(22px, 6.4vw, 28px) !important; } }
/* rail hover (6 Nov 2026): an inactive item only brightens its numeral; its label never shows (it could not fit) */
.styles_scrollToItem__cejn6:not(.styles_active__oVA_l):hover .styles_scrollToItem_contentText__13Fjw { opacity: 0 !important; visibility: hidden !important; }
/* rail: the numeral is always visible. React widens an inactive item's label on hover (GSAP inline width), which shifted
   the rotated content and pushed the numeral out of its clipped item; inactive labels stay at width 0. */
.styles_scrollToItem__cejn6:not(.styles_active__oVA_l) .styles_scrollToItem_contentText__13Fjw { width: 0 !important; } /* numeral always */
.styles_scrollToItem__cejn6 .styles_scrollToItem_contentID__3eyBx { opacity: 1 !important; visibility: visible !important; }
/* SplitText line masks (6 Nov 2026, pre-existing on live): side room for glyph overhangs (W, f, t) so the
   overflow:hidden mask no longer slices them; matching negative margins keep the layout exactly where it was. */
.lineParent { padding-left: .1em; padding-right: .1em; margin-left: -.1em; margin-right: -.1em; } /* glyph overhangs (horizontal only: vertical negative margins would collapse between lines) */
/* phone header (6 Nov 2026): the wordmark at ~58% of the bar height (zoom scales the clip path with it) */
@media (max-width: 767px) { .styles_header__I7JDT .mm-wm { zoom: .7; } }
/* phone menu (6 Nov 2026): one left-aligned column (was React's justified 2x2), large type, even steps */
@media (max-width: 767px) {
  .styles_menu__9VCB2 .styles_menuContent__dUEtc { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  .styles_menu__9VCB2 .styles_menuContent__dUEtc .styles_heading_108__nfWJE { font-size: clamp(44px, 13vw, 56px) !important; line-height: 1.08 !important; }
}
/* NEVER MIND on touch (6 Nov 2026, pre-existing on live): React adds .disableHover (pointer-events:none) to the header
   button on click and only removes it on mouseleave, which touch never fires, so NEVER MIND ignored taps. disableHover on touch */
@media (hover: none), (pointer: coarse) { .styles_header_btn___W5Kh.styles_disableHover__FrbpT { pointer-events: auto; } }


/* ---- v2630 (6 Nov 2026) ---- */
/* item 2: Home phones - the hero is content-height and MEET follows it (the empty video block kept 2 x 8rem margins) */
@media (max-width: 768px) {
  .styles_heroSec__b9T0h .styles_videoSec__Z79Aj { margin-block: 0; }
  .styles_heroSec__b9T0h .styles_heroSec_container__NeGbA { padding-bottom: 32px; }
}
/* item 5: founder section - headline ink top = photo top; copy directly under the 4-line headline, same left edge */
@media (min-width: 1200px) {
  .styles_overviewSection_image__title__XZvtv.styles_tabletUp__hmGjU { top: -.06em; }
  .styles_overviewSection_bot__SYXIV { grid-column: 8 / -1; grid-row: 2; align-self: start; max-width: 43.7rem; padding-right: 0;
    margin-top: calc(4 * .95 * 10.8rem + 5.6rem); }
}
/* item 3: About press hover image - the box is 0.85:1 (1280) to 1.27:1 (1920) and was object-fit: fill. The -v2 files are now
   padded to the 1440 box (0.952); contain on sand keeps every other width unstretched with the same sand look. */
.js-pressMentionImage { object-fit: contain; background-color: rgb(254, 233, 206); }


/* ---- v2631 (7 Nov 2026) ---- */
/* "Let's have a chat" (desktop): equal left / right ink margins (sidebar edge vs viewport edge); on short wide screens the
   group rises so CHAT is fully visible with the section at the top of the viewport. Final layout only (Flip animates in). */
@media (min-width: 1200px) {
  .styles_letConnectSec__uxyJN:not(.styles_initPosition__m4vlI) .styles_letConnectSec_char__h3aQ0 { position: relative;
    left: calc(3.042vw - 3.54px); top: min(0px, calc(50vh - 45.95rem)); }
}

/* logofix 7 Nov 2026: the script logo is a plain solid wordmark in the header colour by default (iOS/WebKit rendered the
   backdrop-filter tint magenta). The colour-flip effect (black over cream) runs only on Blink desktop, where it was verified. */
.mm-wm, .styles_header__I7JDT .mm-wm { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: currentColor; }
@supports (-webkit-app-region: drag) and (backdrop-filter: invert(1)) {
  @media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .mm-wm { background-color: transparent; -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-64.2deg) saturate(9.149); }
    .styles_header__I7JDT .mm-wm { background-color: transparent; -webkit-backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); backdrop-filter: grayscale(1) brightness(.625) contrast(40) invert(1) sepia(1) hue-rotate(-65deg) saturate(17.24) brightness(.993); }
  }
}

/* nav 7 Nov 2026 (Danny's ref 01): the burger menu is a numbered vertical list on near-black
   (I. Home, II. Services, III. About, IV. Work, V. Contact). Numerals sit in their own column left of the words,
   on the word's baseline, and ride the same rise-from-mask stagger as the words. The menu video is gone.
   Source for mm-site-v2632.css (React, rem) and _lp/nav-v1.css (static: rem -> var(--mmr), scoped .mmh). */
.styles_menu__9VCB2 { background-color: var(--almost-black, #0a0a0a); }
.styles_menu__9VCB2 .styles_menuVideo__hgSQ4 { display: none; }
.styles_menu__9VCB2 > .layout-grid { display: block !important; width: 100%; margin: 0 !important; padding: 0 0 0 16.9vw !important; }
.styles_menu__9VCB2 .styles_menuContent__dUEtc { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; width: auto; grid-column: auto !important; }
.styles_menu__9VCB2 .styles_menuContent__dUEtc > * { justify-self: auto !important; }
.styles_menu__9VCB2 .styles_menuContent_link__SA0mv { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 0 !important; overflow: visible !important; }
.styles_menu__9VCB2 { --mm-mfs: min(10.8rem, 11.2vh); }
.styles_menu__9VCB2 .styles_menuContent__dUEtc .styles_heading_108__nfWJE { font-size: var(--mm-mfs) !important; line-height: 1.1 !important; clip-path: inset(-.4em -.4em 0 -.4em); }
/* hover underline: 0.08em under the baseline, clear of the next line's capitals (it sat on the box bottom before) */
.styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { bottom: calc(var(--mm-mfs) * .128); }
.mm-menu-num { flex: 0 0 auto; display: inline-block; width: 4.1vw; margin-left: -4.1vw; font-size: 1.8rem; line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--warm-sand, #fee9ce); clip-path: inset(-.4em -.4em 0 -.4em); }
.styles_menu__9VCB2 > .layout-grid { padding-left: 16.9vw !important; }
@media (max-width: 1199px) {
  .styles_menu__9VCB2 { --mm-mfs: min(7.6rem, 9.4vh); }
  .styles_menu__9VCB2 > .layout-grid { padding-left: calc(var(--layout-margin) + 6.4rem) !important; }
  .mm-menu-num { width: 6.4rem; margin-left: -6.4rem; font-size: 1.6rem; }
}
@media (max-width: 767px) {
  .styles_menu__9VCB2 { --mm-mfs: min(clamp(44px, 13vw, 56px), 8.6vh); }
  .styles_menu__9VCB2 > .layout-grid { padding-left: calc(var(--layout-margin) + 4.4rem) !important; }
  .mm-menu-num { width: 4.4rem; margin-left: -4.4rem; font-size: 1.4rem; }
}

/* burger (refs 04/05, measured 7 Nov 2026 at 2x: lines 53 and 38 px long, 2 px thick, 18 px apart top to top, square
   caps, left-aligned, cream #FDF3E3; the X is 37 px across). In CSS px at ~1440: 26.5 / 19 / 1 / 9, X 18.5.
   Ours was 21 / 15 / 1.13 (blurred over two pixel rows) / 7.5: shorter, closer together and soft-edged.
   Lines now 1px, snapped to whole pixels, vertically centred in the cell; the X keeps the .6 s morph. */
.styles_burger__5IS8Z .styles_burger__line__I2Z8_ { height: 1px; }
.styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: 3.55rem; top: calc(50% - .6rem - .5px); top: round(calc(50% - .6rem - .5px), 1px); }
.styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: 2.55rem; top: calc(50% + .6rem - .5px); top: round(calc(50% + .6rem - .5px), 1px); }
.styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0,
.styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { top: calc(50% - .5px); top: round(calc(50% - .5px), 1px); width: 3.55rem !important; }
/* ref 05: the X's left edge lines up with where the lines start (not centred on the line midpoint) */
.styles_burger__5IS8Z { --mm-bl: 3.55rem; }
.styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { transform: translateX(calc(var(--mm-bl) * -.146)) rotate(-45deg); }
.styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { transform: translateX(calc(var(--mm-bl) * -.146)) rotate(45deg); }
@media (min-width: 1200px) { .styles_burger__5IS8Z .styles_burger__line__I2Z8_ { left: -.55rem; } }
@media (max-width: 1199px) {
  .styles_burger__5IS8Z { --mm-bl: 3.4rem; }
  .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: 3.4rem; top: calc(50% - .575rem - .5px); top: round(calc(50% - .575rem - .5px), 1px); }
  .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: 2.45rem; top: calc(50% + .575rem - .5px); top: round(calc(50% + .575rem - .5px), 1px); }
  .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0,
  .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: 3.4rem !important; }
}
@media (max-width: 767px) {
  .styles_burger__5IS8Z { --mm-bl: 2.3rem; }
  .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0 { width: 2.3rem; top: calc(50% - .425rem - .5px); top: round(calc(50% - .425rem - .5px), 1px); }
  .styles_burger__5IS8Z .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: 1.65rem; top: calc(50% + .425rem - .5px); top: round(calc(50% + .425rem - .5px), 1px); }
  .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_top__o3Xi0,
  .styles_burger__5IS8Z.styles_menuOpen__yZ1VI .styles_burger__line__I2Z8_.styles_burger__line_bottom__5dD4i { width: 2.3rem !important; }
}

/* LET'S CONNECT modal (refs 02/03): 2x2 icon grid Write me / Connect / Call me / Follow me.
   The phone icon is an inline SVG (no Lottie for it); hover moves per icon (envelope tilt kept on row 1). */
.styles_socialModalItem__5Fxtf span.styles_lottie__HLs8N { display: block; color: var(--warm-sand, #fee9ce); }
.styles_socialModalItem__5Fxtf .styles_lottie__HLs8N svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .styles_socialModalItem__5Fxtf:nth-child(2):hover .styles_lottie__HLs8N { transform: translateY(-2px); }
  .styles_socialModalItem__5Fxtf:nth-child(3):hover .styles_lottie__HLs8N { transform: rotate(-12deg); }
  .styles_socialModalItem__5Fxtf:nth-child(4):hover .styles_lottie__HLs8N { transform: scale(1.08); }
}

/* About > previous work (7 Nov 2026): the big statement is just the client name; one caption line of facts under it,
   fading in with its block (the block gets .active from React when it is shown). */
.mm-pm-head { display: flex; flex-direction: column; gap: 1.6rem; }
.mm-pm-sub { margin: 0; font-size: max(12px, 1.6rem); font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em; color: var(--almost-black, #0a0a0a); opacity: 0; transform: translateY(.8em); transition: opacity .5s var(--primary-ease), transform .6s var(--primary-ease); }
.styles_active__fUNi6 .mm-pm-sub { opacity: .78; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .mm-pm-sub { transition: none; } }
@media (max-width: 767px) { .mm-pm-head { gap: 6px; } .mm-pm-sub { font-size: 12px; letter-spacing: .03em; } }

/* v2636 (7 Nov 2026) CLS: below 1200px the hero headline (.layout-block) and the Meet Us block (<div><maskpin/></div>)
   mount only after hydration (isDesktop is null in the static HTML). Reserve their exact size until they arrive;
   both rules stop matching the moment React inserts them, so the settled layout is unchanged. */
@media (max-width: 1199px) {
  .js-heroSec > [class*="heroSec_container__"] > .mm-hero-links:first-child { margin-top: calc(28px + 50vw); }
  .js-heroSec + [class*="introduce__"] { margin-top: 100vh; }
}
@media (max-width: 767px) {
  .js-heroSec > [class*="heroSec_container__"] > .mm-hero-links:first-child { margin-top: calc(28px + 48.2562vw); }
}

/* Let's Connect lower links (7 Nov 2026; React mm-site-v2638 + static lp-v8): "Start a project" / "calendly.com" fade in
   after the four rows (same .865s ease, 80ms steps), then the underline draws left -> right (scaleX). Hover (fine pointers):
   the line leaves to the right while a second line draws in from the left. Transform/opacity only. The old GSAP xPercent
   spans are hidden (they showed a stub mid-slide). Reduced motion: static. */
.styles_contactModule_contact__URBMS .styles_textUnderline_line__CGk_L { display: none !important; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH { position: relative; overflow: hidden; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before,
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; pointer-events: none; }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { transform-origin: right; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
.styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before { transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.215, .61, .355, 1); }
@keyframes mm-ci-in { from { opacity: 0; } }
@keyframes mm-ul-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM { animation: mm-ci-in .865s cubic-bezier(.215, .61, .355, 1) 1.02s backwards; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM + .styles_connectItem__cVmWM { animation-delay: 1.1s; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { animation: mm-ul-in .4s cubic-bezier(.215, .61, .355, 1) 1.3s backwards; }
.styles_contactModuleGrid__dD4ts.styles_isOpen__2Eyk8 .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM + .styles_connectItem__cVmWM .styles_textUnderline__V2vlH::after { animation-delay: 1.38s; }
@media (hover: hover) and (pointer: fine) {
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_textUnderline__V2vlH::after { transform: scaleX(0); }
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:hover .styles_textUnderline__V2vlH::before { transform: scaleX(1); transition-delay: .12s; }
}
.styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:focus-visible .styles_textUnderline__V2vlH::after { transform: scaleX(0); }
.styles_contactModule_contact__URBMS .styles_connectItem__cVmWM:focus-visible .styles_textUnderline__V2vlH::before { transform: scaleX(1); transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .styles_contactModule_contact__URBMS .styles_connectItem__cVmWM,
  .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::before,
  .styles_contactModule_contact__URBMS .styles_textUnderline__V2vlH::after { animation: none !important; transition: none !important; }
}

/* Menu rollover (7 Nov 2026, Danny's nav-about refs): nothing shows at rest; on hover / keyboard focus
   a line grows from the numeral to the end of the word (scaleX from the left, .3s ease-out) and shrinks back on leave. */
.styles_menu__9VCB2 { --mm-numw: 4.1vw; }
@media (max-width: 1199px) { .styles_menu__9VCB2 { --mm-numw: 6.4rem; } }
@media (max-width: 767px) { .styles_menu__9VCB2 { --mm-numw: 4.4rem; } }
.styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { left: calc(-1 * var(--mm-numw)); width: calc(100% + var(--mm-numw)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.215, .61, .355, 1); }
.styles_menu__9VCB2 .styles_underlineAlt__gWwv_:hover::before { transform: scaleX(0); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .styles_menu__9VCB2 .styles_underlineAlt__gWwv_:hover::before { transform: scaleX(1); } }
.styles_menu__9VCB2 .styles_underlineAlt__gWwv_:focus-within::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .styles_menu__9VCB2 .styles_underlineAlt__gWwv_::before { transition: none; } }

/* Footer (9 Nov 2026): page links leave out the current page; Privacy is a small quiet link beside the copyright */
.style_footer_b__right__DhjFL { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 20px; row-gap: 4px; }
.mm-foot-legal { font: 500 13px/1.2 var(--font-avantt, avantt), Arial, sans-serif; color: #8c8c8c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(140, 140, 140, .55); transition: color .3s, text-decoration-color .3s; }
.mm-foot-legal:hover, .mm-foot-legal:focus-visible { color: #fee9ce; text-decoration-color: currentColor; }
@media (max-width: 1199px) {
  .style_footer_b__right__DhjFL { justify-content: center; }
}
@media (max-width: 767px) {
  .mm-foot-links { column-gap: 22px; row-gap: 0; max-width: 340px; margin-inline: auto; }
  .style_footer_b__right__DhjFL { flex-direction: column; align-items: center; row-gap: 0; }
  .mm-foot-legal { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; }
}

/* v2643 (10 Nov 2026): iPad Safari, sideways home intro (only when GSAP's pin-spacer is present; the stacked tablet/phone layout is untouched).
   - The pinned box stays at the small viewport height (toolbar showing) so nothing jumps when Safari's toolbar hides or shows.
   - Its sections fill that box (they were 100vh = the tall, toolbar-hidden height in Safari, which pushed BUSINESS SYSTEMS off the bottom).
   - One black everywhere (the flat #050505 backdrop image and svh backdrop showed as boxes against the #0a0a0a panels). */
.pin-spacer > .styles_homeModule__F5grj { height: 100svh !important; max-height: none !important; background-color: var(--almost-black); }
.pin-spacer > .styles_homeModule__F5grj .styles_homeModule_inner__1LaNK > section { height: 100% !important; }
/* v2645: only the flat backdrop inside prefixBg (v2643/v2644 hid every home photo by mistake) */
body:has(.pin-spacer > .styles_homeModule__F5grj) .styles_prefixBg__tcU8i .style_cm_origin__lxP9F { opacity: 0; }

/* v2644 (10 Nov 2026): keep WEBSITES + BUSINESS SYSTEMS side by side on 1200-1439px screens (iPad Pro landscape).
   The links sit at left:100vw inside the hero section, so only ~250px was left and they wrapped into a stack. */
@media (min-width: 1200px) {
  .mm-hero-links { flex-wrap: nowrap; width: max-content; }
}