/* PONGBOT — shared layout, typography and component rules. */
:root {
  font-family: Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: #161616;
  background: #fff;
  --ink: #161616;
  --muted: #666;
  --surface: #fff;
  --surface-soft: #f0f0f0;
  --surface-media: #e4e9eb;
  --line: rgba(0, 0, 0, .1);
  --gutter: 64px;
  --content-max: 1312px;
  --content-width: min(calc(100vw - 2 * var(--gutter)), var(--content-max));
  --section-space: 80px;
  --heading-gap: 40px;
  --grid-gap: 8px;
  --card-padding: 24px;
  --title-size: 24px;
  --product-size: 28px;
  --subheading-size: 18px;
  --body-size: 14px;
  --caption-size: 12px;
  --nav-size: 14px;
  --utility-height: 29px;
  --nav-height: 52px;
  --control-size: 40px;
  --radius: 3px;
  --motion: 180ms ease;
  --button-height: 40px;
  --button-font: 14px;
  --button-padding-x: 20px;
  --ao-navy: #000c3c;
  --ao-royal: #1e2886;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button, input { border-radius: 0; }
button { border: 0; }
h1, h2, h3, p { margin: 0; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #505050;
  outline-offset: 4px;
}
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus { position: fixed; z-index: 50; top: 8px; left: 8px; padding: 12px 16px; background: #fff; }
.products, .media-inner {
  width: var(--content-width); margin-inline: auto;
}
/* Header: measured OPPO desktop dimensions stay fixed through 4K. */
.header-inner { width: calc(100% - 128px); margin-inline: auto; }
.primary .header-inner { justify-content: flex-start; gap: 26px; }
.primary .search { margin-left: auto; }
.site-header { position: sticky; top: calc(-1 * var(--utility-height)); z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.utility { height: var(--utility-height); background: var(--ao-navy); color: #b4b4b4; font-size: 12px; line-height: 1.5; }
.utility .header-inner > div:first-child { display: flex; gap: 24px; }
.utility a { transition: color var(--motion); }

.primary { height: var(--nav-height); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; flex-shrink: 0; width: 120px; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }
.primary nav { display: flex; align-items: center; gap: 0; color: rgba(0,0,0,.55); font-size: var(--nav-size); font-weight: 400; line-height: 1.5; }
.primary nav a { display: flex; align-items: center; min-height: var(--nav-height); padding-inline: 12px; line-height: var(--nav-height); white-space: nowrap; transition: color var(--motion); }

.search { display: grid; place-items: center; width: var(--control-size); height: var(--control-size); flex-shrink: 0; }
.icon { width: 22px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu-button { display: none; }
/* Art panels use bounded SVG viewports, so adjacent source panels never bleed in. */
.visual { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1029 / 218; background: #18100f; }
.visual + .visual { margin-top: var(--grid-gap); }
.artwork { display: block; width: 100%; height: 100%; overflow: hidden; }
.visual .artwork { position: absolute; inset: 0; }
.visual .artwork-compact { display: none; }
 .cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height); height: var(--button-height); padding: 0 var(--button-padding-x); border-radius: 36px; font-size: var(--button-font); font-weight: 400; font-style: normal; line-height: var(--button-height); white-space: nowrap; transition: background var(--motion), color var(--motion); }
.cta--primary { background: var(--ao-navy); color: #fff; }
.cta--inverse { background: #fff; color: var(--ao-navy); }


.hotspot { position: absolute; left: 20.3%; bottom: 8%;  }
/* Product section */
.products { padding-block: var(--section-space); }
.section-heading, .media-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: var(--heading-gap); }
.section-heading h2, .media-heading h2 { font-size: var(--title-size); font-weight: 400; line-height: 1.4; }
.section-heading > a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-size); color: var(--muted); font-size: var(--body-size); line-height: 1.5; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.product-card { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: #e7e7e7; aspect-ratio: 321 / 212; }
.omni-card { grid-column: 1 / -1; aspect-ratio: 646 / 224; }
.product-card .artwork { position: absolute; inset: 0; }
.product-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e7e7e7 0%, #e7e7e7 32%, transparent 49%); pointer-events: none; }
.card-copy { position: absolute; inset: var(--card-padding); z-index: 1; display: flex; align-items: flex-start; flex-direction: column; }
.card-copy strong { font-size: var(--product-size); line-height: 1.2; font-weight: 500; }
.card-copy small { margin-top: 8px; font-size: var(--body-size); color: var(--muted); line-height: 1.6; }
.card-copy em { margin-top: auto; }
.product-card:focus-visible { outline-offset: -3px; }
/* Brand triptych retains the original artwork proportions. */
.brand { display: grid; grid-template-columns: 318fr 381fr 315fr; gap: var(--grid-gap); }
.brand-panel { position: relative; display: block; overflow: hidden; min-width: 0; aspect-ratio: 318 / 255; }
.brand-cta { position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%);  }
.panel-one .brand-cta { left: 39.5%; }
.panel-three .brand-cta { left: 60%; }
.panel-two { aspect-ratio: 381 / 255; }
.panel-three { aspect-ratio: 315 / 255; }
.brand-panel .artwork { transition: filter var(--motion); }
.brand-panel:hover .artwork { filter: brightness(.94); }
.brand-panel:focus-visible { outline-offset: -4px; }
/* Media: one aligned heading and a full-bleed, horizontally scrollable rail. */
.media { padding-block: var(--section-space); background: var(--surface-media); overflow: hidden; }
.media-controls { display: flex; gap: 16px; }
.carousel-control { display: grid; place-items: center; width: var(--control-size); height: var(--control-size); border-radius: 50%; padding: 0 0 3px; background: #d1d8dc; color: #50575a; font-size: 28px; line-height: 1; transition: background var(--motion), opacity var(--motion); }

.carousel-control:disabled { opacity: .35; cursor: default; }
.media-track { display: flex; width: calc((100vw + var(--content-width)) / 2); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px var(--gutter) 4px 0; }
.media-track::-webkit-scrollbar { display: none; }
.news-card { display: flex; flex: 0 0 calc((var(--content-width) - 2 * var(--grid-gap)) / 3); flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start; border-radius: 0 0 var(--radius) var(--radius); background: #fafafa; }
.news-image { display: block; width: 100%; aspect-ratio: 3 / 2; flex-shrink: 0; overflow: hidden; transition: filter var(--motion); }
.news-copy { display: flex; flex: 1; flex-direction: column; padding: var(--card-padding); gap: 16px; }
.news-card strong { font-size: var(--subheading-size); font-weight: 500; line-height: 1.5; }
.news-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.news-card small { font-size: var(--body-size); line-height: 1.6; color: #444; }
.news-card:hover .news-image { filter: brightness(.96); }
.news-card:focus-visible { outline-offset: -3px; }
/* Footer: OPPO uses a centered 1312px block and fixed desktop type. */
footer { --section-space: 48px; --card-padding: 24px; --subheading-size: 16px; --body-size: 14px; --caption-size: 12px; --control-size: 44px; }
.footer-inner { width: min(calc(100% - 2 * var(--gutter)), 1312px); margin-inline: auto; }
footer { background: var(--surface-soft); color: var(--muted); padding-block: var(--section-space) 32px; }
.footer-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding-bottom: 40px; }
.footer-columns h3, .footer-contact h3 { color: var(--ink); font-size: var(--subheading-size); font-weight: 400; line-height: 1.5; margin-bottom: 12px; }
.footer-columns a { display: block; width: fit-content; font-size: var(--body-size); line-height: 22px; padding-block: 3px; transition: color var(--motion); }

.footer-contact { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr) auto; align-items: start; gap: 32px; padding-block: var(--card-padding); border-block: 1px solid var(--line); }
.footer-contact p { font-size: var(--body-size); line-height: 1.6; }
.footer-contact form { display: flex; width: min(100%, 360px); min-height: var(--control-size); }
.footer-contact input { width: 100%; min-width: 0; padding: 8px 12px; font-size: var(--body-size); border: 1px solid #999; background: #fff; }
.footer-contact form button { display: grid; place-items: center; min-width: var(--control-size); background: #777; color: #fff; font-size: 26px; }
.footer-contact #form-message:not(:empty) { padding-top: 8px; }
.company-location address { font-size: 14px; font-style: normal; line-height: 22px; }
.map-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; vertical-align: middle; color: var(--ao-navy); background: transparent; transition: color var(--motion); }
.map-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.social { display: flex; gap: 12px; justify-content: flex-end; padding-top: 24px; }
.social a, .social button { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: #858585; font-size: 12px; transition: background var(--motion); }
.social img { display: block; width: 24px; height: 24px; filter: invert(1); }

.legal { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 24px; font-size: var(--caption-size); line-height: 1.6; }
#back-to-top { position: fixed; z-index: 25; right: var(--gutter); bottom: 24px; width: var(--control-size); height: var(--control-size); border-radius: 50%; background: #222; color: #fff; font-size: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion), visibility var(--motion); }
#back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }
/* Tablet and mobile use the same spacing scale and readable type floor. */
#wechat-dialog { width: min(calc(100vw - 32px), 400px); border: 0; border-radius: 8px; padding: 40px 24px 24px; text-align: center; color: #161616; }
#wechat-dialog::backdrop { background: rgba(0,0,0,.4); }
.dialog-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; background: transparent; font-size: 28px; }
.wechat-mark { display: block; margin: 0 auto 20px; }
#wechat-title { font-size: 22px; font-weight: 400; }
#wechat-name { display: block; width: 100%; margin: 20px 0 12px; padding: 12px; border: 1px solid #ddd; background: #f5f5f5; font-size: 20px; text-align: center; }
#wechat-help, #wechat-status { font-size: 14px; line-height: 1.6; color: #666; }
#copy-wechat { min-height: 44px; margin-top: 24px; padding: 10px 24px; border-radius: 999px; background: var(--ao-navy); color: white; font-size: 14px; }

.footer-contact form button { background: var(--ao-navy); }
#wechat-status:not(:empty) { margin-top: 12px; }
@media (max-width: 1024px) {
  .header-inner { width: calc(100% - 48px); }
  .primary .header-inner { gap: 16px; }
}
@media (max-width: 1023.98px) {
  :root { --utility-height: 0px; --nav-height: 50px; --section-space: 48px; --card-padding: 24px; }
  .utility { display: none; }
  .menu-button { display: flex; order: 3; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; }
  .menu-button span { display: block; width: 100%; height: 1.5px; background: #111; }
  .primary nav { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; align-items: stretch; flex-direction: column; gap: 0; background: #fff; box-shadow: 0 12px 24px #0001; }
  .primary nav.open { display: flex; }
  .primary nav a { padding: 16px var(--gutter); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
  .search { margin-left: auto; }
  .header-inner { width: calc(100% - 2 * var(--gutter)); gap: 12px; }
  .primary .header-inner { gap: 12px; }
  .visual { aspect-ratio: 1029 / 218; }
  .product-card { aspect-ratio: 1.35 / 1; }
  .omni-card { aspect-ratio: 2.5 / 1; }
  .news-card { flex-basis: calc((var(--content-width) - var(--grid-gap)) / 2.2); }
  .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .footer-contact { grid-template-columns: 1fr 1fr; }
  .social { grid-column: 1 / -1; justify-content: flex-start; padding-top: 0; }
}
@media (max-width: 649.98px) {
  :root { --button-height: 32px; --button-font: 12px; --button-padding-x: 16px; }
  .cta { min-width: 90px; }
  :root { --gutter: 16px; --section-space: 40px; --heading-gap: 24px; --card-padding: 20px; --title-size: 22px; --product-size: 24px; }
  .logo { width: 120px; }
  .visual { aspect-ratio: 1.8 / 1; }
  .visual .artwork { display: none; }
  .visual .artwork-compact { display: block; }
  .hotspot { left: 4%; bottom: 5%; min-width: 90px; }
  .section-heading, .media-heading { gap: 16px; }
  .section-heading > a { font-size: 12px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-card, .omni-card { grid-column: auto; aspect-ratio: 1.5 / 1; }
  .omni-card .artwork { inset: auto 0 0 auto; width: 125%; height: auto; aspect-ratio: 646 / 224; }
  .card-copy small { max-width: 48%; font-size: 12px; }
  .brand { grid-template-columns: 1fr; }
  .brand-panel { aspect-ratio: 318 / 255; }
  .panel-two { aspect-ratio: 381 / 255; }
  .panel-three { aspect-ratio: 315 / 255; }
  .media-controls { gap: 8px; }
  .news-card { flex-basis: calc(var(--content-width) * .86); }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-columns a { padding-block: 6px; }
  .footer-contact { grid-template-columns: 1fr; gap: 24px; }
  .legal { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}






/* A shared dark caption floor separates the live CTA from artwork lettering. */
.brand-panel::after { content: ""; position: absolute; inset: 72% 0 0; background: linear-gradient(transparent, #050505 46%); pointer-events: none; }
.brand-cta { z-index: 1; }

.hero::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(transparent, #08050a 48%); pointer-events: none; }
.hero-link { z-index: 1; }

/* OPPO measured responsive tiers: bounded desktop content and compact tablet controls. */
@media (max-width: 1024px) {
 :root { --gutter: 24px; --section-space: 48px; --heading-gap: 20px; --title-size: 18px; --card-padding: 20px; --button-height: 32px; --button-font: 12px; --button-padding-x: 16px; }
 .cta { min-width: 90px; }
}
@media (min-width: 650px) and (max-width: 1023.98px) { .footer-contact { grid-template-columns: 1fr; } }
.footer-toggle { display: none; }
@media (max-width: 767.98px) {
 .footer-columns { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 0 20px; padding-bottom: 24px; }
 .footer-columns h3 { margin: 0; font-size: 14px; }
 .footer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; text-align: left; background: transparent; color: inherit; font-size: inherit; font-weight: 400; }
 .footer-toggle::after { content: "+"; font-size: 18px; margin-left: 8px; }
 .footer-toggle[aria-expanded="true"]::after { content: "−"; }
 .footer-static-title { display: none; }
 .footer-links[hidden] { display: none; }
 .footer-links { padding-bottom: 16px; }
}
@media (max-width: 649.98px) {
 :root { --gutter: 16px; --section-space: 48px; --heading-gap: 20px; --title-size: 18px; }
 .news-copy { padding: 16px; gap: 12px; }
 .news-card strong { font-size: 16px; }
 .footer-contact { grid-template-columns: minmax(0,1fr); }
 .company-location { min-width: 0; }
}


.address-tail { display: inline; white-space: nowrap; }

/* Mobile art direction: OPPO's 720 × 1060 portrait ratio, independently composed. */
.mobile-banner-copy, .mobile-banner-art { display: none; }
@media (max-width: 649.98px) {
 .visual { aspect-ratio: 720 / 1060; isolation: isolate; }
 .visual > .artwork, .visual > .artwork-compact { display: none; }
 .visual::after { display: none; }
 .mobile-banner-copy { display: block; position: absolute; z-index: 2; top: 10%; left: 16px; right: 16px; text-align: center; }
 .mobile-banner-copy h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.5px; }
 .mobile-banner-copy p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
 .mobile-banner-copy small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; opacity: .7; }
 .mobile-banner-art { display: block; position: absolute; width: 100%; height: 63%; top: 27%; left: 0; mask-image: linear-gradient(transparent, #000 12%, #000 84%, transparent); }
 .visual .hotspot { z-index: 3; left: 50%; bottom: 32px; transform: translateX(-50%); }
 .hero { background: #0d0508; color: white; }
 .hero .mobile-banner-art { top: 28%; height: 58%; }
 .omni { background: linear-gradient(#100905, #4d351b); color: white; }
 .omni .mobile-banner-art { top: 28%; height: 63%; }
 .pace { background: linear-gradient(#dfdcd6, #eedcc3 65%, #ac7346); color: #161616; }
 .pace .mobile-banner-art { top: 29%; height: 62%; }
}

/* Trial palette sampled directly from the supplied AO blue swatch. */
:root { --ao-button-blue: #0091d2; }
button, .cta, .cta--primary, .cta--inverse, .carousel-control,
.social a, .social button, .footer-contact form button,
#copy-wechat, #back-to-top, .dialog-close, .menu-button, .footer-toggle {
 background: var(--ao-button-blue); color: #fff;
}
.menu-button span { background: #fff; }

/* Footer: AO navy surface with reversed text and icons. */
footer { background: var(--ao-navy); color: #fff; --ink: #fff; --muted: #fff; --line: rgba(255,255,255,.22); }
footer .footer-columns h3, footer .footer-contact h3, footer .map-link { color: #fff; }
footer .footer-toggle { background: transparent; color: #fff; }
footer .footer-contact input { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
footer .footer-contact input::placeholder { color: rgba(255,255,255,.75); opacity: 1; }
footer a:focus-visible, footer button:focus-visible, footer input:focus-visible { outline-color: #fff; }

/* Footer action buttons retain gray surfaces. */
footer .social a, footer .social button, footer .footer-contact form button { background: #858585; color: #fff; }

/* Equal-width content CTAs, independent of label length. */
.cta { width: 128px; min-width: 128px; padding-inline: 0; text-align: center; align-items: center; justify-content: center; }
@media (max-width: 1024px) { .cta { width: 112px; min-width: 112px; } }

/* Media paging controls use gray, retaining the disabled opacity. */
.carousel-control { background: #858585; color: #fff; }

/* Footer category heading emphasis across desktop and mobile. */
.footer-columns h3, .footer-columns .footer-toggle { font-weight: 700; }
/* Compact desktop composition for 1080p and shorter laptop viewports. */
@media (min-width: 1025px) and (max-width: 1920px) and (max-height: 1080px) {
  .products {
    width: min(calc(100% - 2 * var(--gutter)), 1120px);
    --section-space: 56px;
    --heading-gap: 24px;
    --card-padding: 20px;
    --product-size: 26px;
  }
  .media { --section-space: 64px; }
}
/* Desktop banners: OPPO fixed-height tiers. */
@media (min-width: 1440px) {
  .visual { height: 640px; aspect-ratio: auto; }
  .visual > .artwork { width: 100%; height: 100%; }
  .visual .hotspot { left: max(24px, calc((100% - 1312px) / 2)); bottom: 56px; }
}

@media (min-width: 650px) and (max-width: 1439.98px) {
 .visual { height: 400px; aspect-ratio: auto; }
 .visual .hotspot { bottom: 30px; }
}
@media (min-width: 1024px) and (max-width: 1439.98px) { .visual { height: 440px; } }
/* Keep artwork centered with equal cropping on both sides. */
@media (min-width: 650px) and (max-width: 1919.98px) {
 .visual > .artwork { width: 1888px; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1024px) and (max-width: 1439.98px) { .visual > .artwork { width: 2077px; } }
@media (min-width: 1440px) and (max-width: 1919.98px) { .visual > .artwork { width: 3021px; } }

/* Editable hero text shares the CTA content anchor. */
@media (min-width: 650px) {
 .hero { --hero-copy-left: 20.3%; }
 .hero .hero-editable-copy { display: block; position: absolute; z-index: 2; top: 56px; left: var(--hero-copy-left); right: 24px; color: #fff; text-align: left; }
 .hero-editable-copy h2 { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 700; }
 .hero-editable-copy p { margin-top: 14px; font-size: 20px; line-height: 1.6; }
 .hero .hero-link { left: var(--hero-copy-left); }
}
@media (min-width: 1440px) { .hero { --hero-copy-left: max(24px, calc((100% - 1312px) / 2)); } }
@media (min-width: 650px) and (max-width: 1023.98px) {
 .hero { --hero-copy-left: 24px; }
 .hero-editable-copy h2 { font-size: 32px; }
 .hero-editable-copy p { font-size: 16px; }
}

/* Independent supplied banner assets; no screenshot masks or repair patches. */
.independent-banner { --banner-left: max(24px, calc((100% - 1312px) / 2)); }
.independent-banner::after { display: none; }
.banner-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-copy { position: absolute; top: 56px; left: var(--banner-left); right: 24px; z-index: 2; color: #fff; }
.banner-copy h2 { margin: 0; max-width: 700px; font-size: 40px; font-weight: 700; line-height: 1.3; }
.banner-copy p { margin-top: 14px; font-size: 20px; line-height: 1.6; }
.pace .banner-copy { color: #161616; }
.visual.independent-banner .hotspot { left: var(--banner-left); }
@media (min-width:650px) and (max-width:1023.98px) { .banner-copy h2 { font-size: 32px; } .banner-copy p { font-size: 16px; } }
@media (max-width:649.98px) {
 .independent-banner .banner-image { display:none; }
 .independent-banner .banner-copy { top:10%; left:16px; right:16px; text-align:center; }
 .banner-copy h2 { font-size:28px; line-height:1.2; font-weight:500; }
 .banner-copy p { margin-top:10px; font-size:14px; line-height:1.5; }
 .visual.independent-banner .hotspot { left:50%; }
 .independent-banner .mobile-banner-art { object-fit:cover; object-position:center; }
}
/* Compact news rail on laptop, tablet and phone screens. */
@media (min-width: 1025px) and (max-width: 1920px) {
 .media { --section-space: 48px; --heading-gap: 24px; }
 .media .news-card { flex-basis: min(350px, calc((var(--content-width) - 2 * var(--grid-gap)) / 3)); }
 .media .news-copy { padding: 20px; gap: 12px; }
 .media .news-card strong { font-size: 16px; }
}
@media (min-width: 650px) and (max-width: 1024px) {
 .media { --section-space: 40px; --heading-gap: 20px; }
 .media .news-card { flex-basis: min(300px, calc((var(--content-width) - var(--grid-gap)) / 2)); }
 .media .news-copy { padding: 16px; gap: 10px; }
 .media .news-card strong { font-size: 16px; }
}
@media (max-width: 649.98px) {
 .media { --section-space: 32px; --heading-gap: 16px; }
 .media .news-card { flex-basis: min(280px, calc(var(--content-width) * .8)); }
 .media .news-copy { padding: 14px; gap: 10px; }
 .media .news-card strong { font-size: 15px; }
 .media .news-card small { font-size: 12px; }
}
/* Mobile footer categories: one full-width row per heading. */
@media (max-width: 767.98px) {
 footer .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Footer hierarchy: muted link copy below solid white headings. */
footer .footer-columns .footer-links a { color: rgba(255, 255, 255, .7); }
/* Reserve the bold label width so hover does not move neighboring links. */
.primary nav a { display:grid; justify-items:start; align-content:center; }
.primary nav a::after { content:attr(data-label); font-weight:700; visibility:hidden; grid-area:1 / 1; pointer-events:none; }
.primary nav a .nav-label { grid-area:1 / 1; font-weight:400; }
@media(hover:hover) { .primary nav a:hover .nav-label { font-weight:700; } }
.primary nav a:focus-visible .nav-label { font-weight:700; }
/* Navigation categories */
.nav-group { position:relative; display:flex; align-items:center; }
.primary nav .nav-expand { border:0; background:transparent; color:#777; cursor:pointer; padding:8px 4px; font-size:14px; }
.primary nav .nav-submenu { position:absolute; top:100%; left:0; min-width:220px; padding:12px 0; background:#fff; border-top:1px solid #eee; box-shadow:0 10px 24px #00000012; z-index:30; animation:nav-reveal 160ms ease-out; }
.primary nav .nav-submenu[hidden] { display:none; }
.primary nav .nav-submenu a { display:block; min-height:0; line-height:1.6; padding:12px 24px; font-size:14px; font-weight:400; }
.primary nav .nav-submenu a::after { content:none; }
.primary nav .nav-submenu a:hover,.primary nav .nav-submenu a:focus-visible { font-weight:600; }
@keyframes nav-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1023.98px) { .nav-group { flex-wrap:wrap; width:100%; } .nav-group>a { flex:1; } .primary nav .nav-expand { padding:16px 24px; } .primary nav .nav-submenu { position:static; flex-basis:100%; box-shadow:none; border:0; padding:0 0 12px; background:#f8f8f8; } .primary nav .nav-submenu a { border:0; padding:12px var(--gutter); } }
@media(prefers-reduced-motion:reduce) { .primary nav .nav-submenu { animation:none; } }
/* Submenus use the category label without a visible arrow. */
.primary nav .nav-expand { display:none; }
/* Full-width desktop navigation panel, matching the reference interaction. */
@media(min-width:1024px) {
 .primary nav .nav-submenu { position:fixed; top:var(--dropdown-top,81px); left:0; right:0; width:100%; min-height:128px; display:flex; justify-content:space-evenly; align-items:center; gap:32px; padding:32px max(48px,calc((100vw - 1312px)/2)); border-top:1px solid #eee; box-shadow:none; animation:nav-panel-in 200ms ease-out; }
 .primary nav .nav-submenu a { padding:16px 0; color:#161616; font-size:14px; }
 .nav-group:has(.nav-submenu:not([hidden])) > a { color:#111; }
 .nav-group:has(.nav-submenu:not([hidden])) > a .nav-label { font-weight:600; }
 .nav-group:has(.nav-submenu:not([hidden])) > a::before { content:''; position:absolute; bottom:0; left:12px; right:12px; height:2px; background:#111; }
 .nav-shade { position:fixed; inset:var(--dropdown-top,81px) 0 0; background:#0006; z-index:19; animation:nav-shade-in 180ms ease-out; }
 .site-header { z-index:40; }
}
.nav-shade[hidden] { display:none; }
@media(max-width:1023.98px) { .nav-shade { display:none; } }
@keyframes nav-panel-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes nav-shade-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .nav-shade,.primary nav .nav-submenu { animation:none; } }
.primary nav .nav-group > a[role=button] { cursor:pointer; }
/* Switching categories updates content without replaying the panel entrance. */
@media(min-width:1024px) { .primary nav .nav-submenu { animation:none; } }
/* Slower overlay entrance; category switches keep the panel stationary. */
@media(min-width:1024px) { .nav-shade { animation:nav-shade-in 380ms ease-out; } }
@media(max-width:1023.98px) { .primary nav .nav-submenu { animation:nav-reveal 320ms ease-out; } }
@media(prefers-reduced-motion:reduce) { .nav-shade,.primary nav .nav-submenu { animation:none; } }
/* Keep the service phone available on small screens. */
@media(max-width:1023.98px) {
 :root { --utility-height:29px; }
 .utility { display:block; height:29px; }
 .utility .header-inner { height:29px; justify-content:flex-end; }
 .utility .header-inner > div:first-child { display:none; }
 .utility .header-phone { display:inline-flex; align-items:center; min-height:29px; font-size:12px; }
}
/* Reduce the homepage video triptych height by roughly 15%. */
.brand-panel { aspect-ratio:318 / 217; }
/* Video rail: consistent cards, independent of the number of videos. */
.brand { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; padding-inline:max(24px,calc((100vw - 1312px)/2)); }
.brand::-webkit-scrollbar { display:none; }
.brand-panel { flex:0 0 432px; aspect-ratio:4/3; scroll-snap-align:start; }
.brand-panel .artwork { pointer-events:none; }
.brand .brand-cta { left:50%; bottom:24px; }
.brand.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
@media(max-width:1920px) { .brand-panel { flex-basis:350px; } }
@media(max-width:767px) { .brand { padding-inline:20px; gap:12px; } .brand-panel { flex-basis:82vw; max-width:350px; } .brand .brand-cta { bottom:20px; } }
/* Restore the original three-panel scale, reduced 15% in height. */
.brand { padding-inline:0; gap:var(--grid-gap); }
.brand-panel { flex:0 0 calc((100vw - 2 * var(--grid-gap)) / 3); max-width:none; aspect-ratio:318 / 217; }
@media(max-width:767px) { .brand { padding-inline:20px; gap:12px; } .brand-panel { flex-basis:calc(100vw - 40px); max-width:none; aspect-ratio:318 / 217; } }
/* White subscription field and black submit arrow. */
footer .footer-contact input { background:#fff; color:#111; border-color:#fff; }
footer .footer-contact input::placeholder { color:#777; opacity:1; }
footer .footer-contact form button,footer .footer-contact form button:hover { background:#fff; color:#000; }
.media-track .news-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.6; white-space:normal; }
/* Subscription submit control: black background, white arrow. */
footer .footer-contact form button,footer .footer-contact form button:hover,footer .footer-contact form button:focus { background:#000; color:#fff; }
/* Align summaries by their first line, rather than their bottom edge. */
.media-track .news-copy > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.5; min-height:3em; }
.media-track .news-bottom { margin-top:0; align-items:flex-start; }
.media-track .news-summary { color:rgba(0,0,0,.7); }
/* Restore the original dark gray utility bar. */
.utility { background:#202020; }
/* Homepage announcement remains at the viewport bottom. */
.has-ao-announcement { padding-bottom:72px; }
.ao-announcement { position:fixed; inset:auto 0 0; z-index:45; min-height:72px; padding:18px 24px; display:flex; justify-content:center; align-items:center; background:#8ed8f2; color:#000c3c; box-sizing:border-box; }
.ao-announcement p { margin:0; font-size:20px; font-weight:500; line-height:1.6; text-align:center; }
.has-ao-announcement #back-to-top { bottom:96px; }
@media(max-width:767px) { .has-ao-announcement { padding-bottom:88px; } .ao-announcement { min-height:88px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); } .ao-announcement p { font-size:14px; line-height:1.7; } .has-ao-announcement { padding-bottom:calc(88px + env(safe-area-inset-bottom)); } .has-ao-announcement #back-to-top { bottom:calc(104px + env(safe-area-inset-bottom)); } }
/* Primary action palette: black backgrounds and white labels. */
:root { --ao-button-blue:#000; }
.cta,.cta:hover,.cta:focus { background:#000; color:#fff; }
/* Dark-background actions: transparent fill with a 2px white border. */
.hero-link.cta,.omni-link.cta,.brand-cta.cta,.partner-hero .cta,
.hero-link.cta:hover,.omni-link.cta:hover,.brand-cta.cta:hover,.partner-hero .cta:hover,
.hero-link.cta:focus,.omni-link.cta:focus,.brand-cta.cta:focus,.partner-hero .cta:focus {
 background:transparent; color:#fff; border:1px solid #fff; box-sizing:border-box;
}
/* Footer uses the confirmed Australian Open Process Blue. */
footer { background:#0091D2; color:#fff; --ink:#fff; --muted:#fff; }
footer .footer-links a,footer .legal,footer .legal a,footer .footer-contact,footer .footer-contact a,footer .footer-static-title,footer .footer-toggle { color:#fff; opacity:1; }
/* Dark-background actions retain black fill and white outlines. */
.hero-link.cta,.omni-link.cta,.brand-cta.cta,.partner-hero .cta,
.hero-link.cta:hover,.omni-link.cta:hover,.brand-cta.cta:hover,.partner-hero .cta:hover,
.hero-link.cta:focus,.omni-link.cta:focus,.brand-cta.cta:focus,.partner-hero .cta:focus {
 background:#000; color:#fff; border:1px solid #fff;
}
/* Correct footer and fixed homepage announcement colors. */
footer { background:#000C3C; color:#fff; }
.ao-announcement { background:#0091D2; color:#fff; }
/* Consistent submenu typography and column spacing across categories. */
.primary nav .nav-submenu a { letter-spacing:0; }
@media(min-width:1024px) {
 .primary nav .nav-submenu { justify-content:center; gap:0; }
 .primary nav .nav-submenu a { flex:0 0 280px; text-align:center; }
}
/* AO-inspired fixed ribbon: navy field, angled blue panels and cyan stripes. */
.ao-announcement { background:linear-gradient(115deg,#000C3C 0%,#000C3C 38%,#182478 50%,#000C3C 65%); color:#fff; overflow:hidden; isolation:isolate; }
.ao-announcement::before,.ao-announcement::after { content:''; position:absolute; z-index:-1; top:-22px; width:180px; height:140px; transform:skewX(-26deg); pointer-events:none; background:linear-gradient(#202c87,#202c87) 28px 0/30px 64px no-repeat,linear-gradient(#202c87,#202c87) 60px 44px/38px 72px no-repeat,linear-gradient(#131b66,#131b66) 100px 70px/36px 64px no-repeat,repeating-linear-gradient(90deg,#22d6e5 0 1px,transparent 1px 3px) 0 8px/18px 42px no-repeat,repeating-linear-gradient(90deg,#22d6e5 0 1px,transparent 1px 3px) 144px 74px/18px 42px no-repeat; }
.ao-announcement::before { left:5%; }
.ao-announcement::after { right:5%; transform:skewX(-26deg) rotate(180deg); }
.ao-announcement p { position:relative; max-width:calc(100% - 380px); font-weight:600; letter-spacing:.04em; text-wrap:balance; }
@media(max-width:767px) { .ao-announcement::before { left:-80px; opacity:.7; }.ao-announcement::after { right:-80px; opacity:.7; }.ao-announcement p { max-width:100%; padding-inline:12px; font-size:14px; letter-spacing:0; } }
/* Reverse the fixed ribbon when it overlaps the navy page footer. */
.ao-announcement { transition:background-color 220ms ease,color 220ms ease; }
.ao-announcement.is-over-footer { background:#fff; color:#000C3C; }
@media(prefers-reduced-motion:reduce) { .ao-announcement { transition:none; } }
/* Let the AO geometry rise above the fixed ribbon edge. */
.ao-announcement { overflow:visible; }
.ao-announcement::before,.ao-announcement::after { top:-48px; height:164px; }
@media(max-width:767px) { .ao-announcement::before,.ao-announcement::after { top:-28px; height:140px; width:120px; } .ao-announcement::before { left:0; } .ao-announcement::after { right:0; } }
/* AO-inspired navigation drawer with angled brand accents. */
.ao-sidebar-trigger { position:fixed; right:0; top:45%; z-index:46; display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px 18px 22px; border:0; background:#000C3C; color:#fff; clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 24px); cursor:pointer; font-size:14px; }
.ao-sidebar-trigger::before { content:''; position:absolute; top:0; right:0; width:100%; height:4px; background:#0091D2; }
.ao-sidebar { position:fixed; inset:0 0 0 auto; margin:0; width:min(460px,100%); max-width:100%; height:100dvh; max-height:100dvh; padding:44px 40px; border:0; background:#000C3C; color:#fff; overflow:auto; box-sizing:border-box; }
.ao-sidebar[open] { display:block; animation:ao-drawer-enter 320ms ease-out; }
.ao-sidebar::backdrop { background:#0008; }
.ao-sidebar::before { content:''; position:absolute; width:140px; height:200px; top:-60px; left:10px; transform:skewX(-25deg); background:linear-gradient(90deg,transparent 10%,#0091D2 10% 25%,transparent 25% 32%,#202c87 32% 70%,transparent 70%); opacity:.7; pointer-events:none; }
.ao-sidebar-close { position:absolute; top:14px; right:20px; padding:4px 12px; border:0; background:transparent; color:#fff; font-size:32px; cursor:pointer; z-index:1; }
.ao-sidebar-heading { position:relative; padding:12px 0 28px; border-bottom:1px solid #ffffff35; }
.ao-sidebar-heading img { width:96px; height:56px; object-fit:contain; display:block; margin:0 0 24px auto; }
.ao-sidebar-heading p { font-size:19px; font-weight:600; line-height:1.7; margin:0; }
.ao-sidebar-menu { padding-top:8px; }.ao-sidebar-group { padding:20px 0; border-bottom:1px solid #ffffff26; }.ao-sidebar-group h2,.ao-sidebar-primary { font-size:20px; font-weight:600; margin:0 0 14px; }.ao-sidebar-group a { display:block; color:#ffffffb3; padding:7px 0; font-size:15px; }.ao-sidebar-group .ao-sidebar-primary { color:#fff; font-size:20px; margin:0; }.ao-sidebar a:focus-visible,.ao-sidebar button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@keyframes ao-drawer-enter { from { transform:translateX(100%); } to { transform:translateX(0); } }
@media(max-width:767px) { .ao-sidebar { padding:40px 28px; }.ao-sidebar-trigger { top:auto; bottom:120px; padding:16px 10px 14px 16px; font-size:12px; }.ao-sidebar-heading p { font-size:17px; } }
@media(prefers-reduced-motion:reduce) { .ao-sidebar[open] { animation:none; } }
/* Remove outlines from dark-surface action buttons. */
.hero-link.cta,.omni-link.cta,.brand-cta.cta,.partner-hero .cta,
.hero-link.cta:hover,.omni-link.cta:hover,.brand-cta.cta:hover,.partner-hero .cta:hover,
.hero-link.cta:focus,.omni-link.cta:focus,.brand-cta.cta:focus,.partner-hero .cta:focus { border:0; background:#000; color:#fff; }
/* Always-visible AO navigation ribbon. */
.ao-floating-sidebar { position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:44; width:190px; max-height:calc(100dvh - 220px); padding:20px 18px; box-sizing:border-box; background:linear-gradient(125deg,#000c3c 50%,#182478); color:#fff; overflow-y:auto; scrollbar-width:thin; box-shadow:0 6px 24px #0002; border-top:3px solid #0091d2; }
.ao-floating-sidebar::before { content:''; display:block; position:absolute; top:0; right:0; width:54px; height:60px; background:repeating-linear-gradient(115deg,transparent 0 5px,#22d6e5 5px 6px); opacity:.5; pointer-events:none; }
.ao-floating-sidebar .ao-sidebar-heading { padding:0 0 14px; }
.ao-floating-sidebar .ao-sidebar-heading img { width:60px; height:38px; margin:0 0 12px; }
.ao-floating-sidebar .ao-sidebar-heading p { font-size:12px; line-height:1.6; }
.ao-floating-sidebar .ao-sidebar-group { padding:10px 0; }
.ao-floating-sidebar .ao-sidebar-group h2,.ao-floating-sidebar .ao-sidebar-group .ao-sidebar-primary { font-size:14px; margin:0 0 4px; }
.ao-floating-sidebar .ao-sidebar-group a { font-size:12px; padding:4px 0; }
.ao-floating-sidebar .ao-sidebar-menu { padding-top:4px; }
@media(min-width:2560px) { .ao-floating-sidebar { right:36px; width:240px; padding:24px; }.ao-floating-sidebar .ao-sidebar-heading p { font-size:14px; }.ao-floating-sidebar .ao-sidebar-group h2,.ao-floating-sidebar .ao-sidebar-group .ao-sidebar-primary { font-size:17px; }.ao-floating-sidebar .ao-sidebar-group a { font-size:14px; } }
@media(max-width:767px) { .ao-floating-sidebar { right:6px; width:112px; padding:12px 10px; max-height:calc(100dvh - 230px); }.ao-floating-sidebar .ao-sidebar-heading img { width:42px; height:28px; }.ao-floating-sidebar .ao-sidebar-heading p { font-size:10px; }.ao-floating-sidebar .ao-sidebar-group h2,.ao-floating-sidebar .ao-sidebar-group .ao-sidebar-primary { font-size:12px; }.ao-floating-sidebar .ao-sidebar-group a { font-size:11px; } }

/* Official AO partner artwork retains its original proportions and clear space. */
.primary .ao-nav-partner { display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-left:auto; width:64px; height:50px; }
.primary .ao-nav-partner img { display:block; width:100%; height:100%; object-fit:contain; }
.primary .ao-nav-partner + .search { margin-left:0; }
@media (max-width:1023.98px) {
  .primary .ao-nav-partner { width:58px; height:48px; }
  .primary .header-inner { gap:8px; }
}

/* Navy partner pennant, aligned with the right-hand area of the navigation. */
.primary { position:relative; }
.primary .ao-nav-partner { position:absolute; top:0; right:17%; width:110px; height:100px; margin:0; background:#000C3C; z-index:2; }
.primary .ao-nav-partner img { width:100%; height:100%; object-fit:contain; }
.primary .ao-nav-partner + .search { margin-left:auto; }
@media (min-width:2560px) {
  .primary .ao-nav-partner { width:200px; height:184px; }
}
@media (min-width:1024px) and (max-width:1399.98px) {
  .primary .ao-nav-partner { right:10%; width:90px; height:84px; }
}
@media (max-width:1023.98px) {
  .primary .ao-nav-partner { position:relative; top:auto; right:auto; align-self:flex-start; width:58px; height:64px; margin-left:auto; }
  .primary .ao-nav-partner + .search { margin-left:0; }
}

/* Compact AO floating navigation with angled silhouette and geometric accents. */
.ao-floating-sidebar {
  transform:translateY(-50%) scale(.8);
  transform-origin:right center;
  border-top:0;
  padding-top:30px;
  padding-bottom:30px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 28px),calc(100% - 18px) 100%,0 100%,0 30px);
  background:linear-gradient(122deg,transparent 0 18px,#0091d2 18px 21px,transparent 21px) top left / 100% 32px no-repeat,linear-gradient(125deg,#000c3c 50%,#182478);
}
.ao-floating-sidebar::before {
  top:0; right:0; width:68px; height:76px; opacity:.75;
  background:repeating-linear-gradient(115deg,transparent 0 5px,#22d6e5 5px 6px);
  clip-path:polygon(48% 0,100% 0,100% 55%,72% 55%,48% 100%,0 100%);
}
.ao-floating-sidebar::after {
  content:''; position:absolute; right:0; bottom:0; width:18px; height:100px; pointer-events:none;
  background:linear-gradient(115deg,transparent 0 22%,#303c9c 23% 55%,transparent 56% 65%,#0091d2 66% 71%,transparent 72%);
}
.ao-floating-sidebar a:focus-visible { outline:2px solid #fff; outline-offset:2px; }

@media(min-width:1024px) {
  #main-nav > a { position:relative; }
  #main-nav > a:hover,#main-nav > a:focus-visible { color:#111; }
  #main-nav > a:hover .nav-label,#main-nav > a:focus-visible .nav-label { font-weight:700; }
  #main-nav > a:hover::before,#main-nav > a:focus-visible::before { content:''; position:absolute; bottom:0; left:12px; right:12px; height:2px; background:#111; }
  .primary nav .nav-submenu { clip-path:inset(0); transition:clip-path 380ms ease,display 380ms allow-discrete; }
  .primary nav .nav-submenu[hidden] { clip-path:inset(0 0 100% 0); pointer-events:none; }
}
@media(prefers-reduced-motion:reduce) { .primary nav .nav-submenu { transition:none; } }

/* Reduce the AO navigation badge by 20% while retaining its top-right anchor. */
.primary .ao-nav-partner { width:88px; height:80px; }
@media (min-width:2560px) { .primary .ao-nav-partner { width:160px; height:147.2px; } }
@media (min-width:1024px) and (max-width:1399.98px) { .primary .ao-nav-partner { width:72px; height:67.2px; } }
@media (max-width:1023.98px) { .primary .ao-nav-partner { width:46.4px; height:51.2px; } }

/* Keep the partner badge above the dropdown and reduce its current size by 10%. */
.primary .ao-nav-partner { width:79.2px; height:72px; z-index:50; }
@media (min-width:2560px) { .primary .ao-nav-partner { width:144px; height:132.48px; } }
@media (min-width:1024px) and (max-width:1399.98px) { .primary .ao-nav-partner { width:64.8px; height:60.48px; } }
@media (max-width:1023.98px) { .primary .ao-nav-partner { width:41.76px; height:46.08px; } }

/* Scale the AO badge continuously with the viewport instead of breakpoint jumps. */
.primary .ao-nav-partner {
  width:4.125vw;
  height:auto;
  aspect-ratio:1.1;
}
.primary .ao-nav-partner img { width:100%; height:100%; }
@media (max-width:1023.98px) {
  /* Compact navigation needs a readable mark on narrow phone screens. */
  .primary .ao-nav-partner { width:clamp(36px,10.7vw,64px); aspect-ratio:1.1; }
}

/* Position the partner badge in the requested right-hand navigation area. */
@media (min-width:1024px) {
  .primary .ao-nav-partner { right:12%; }
}

/* Larger joint branding and carefully grouped announcement lines. */
.ao-floating-sidebar { transform:translateY(-50%) scale(.88); }
.ao-floating-sidebar::before { content:none; }
.ao-floating-sidebar .ao-sidebar-heading img { width:100%; height:auto; aspect-ratio:4485 / 1670; object-fit:contain; margin:0 0 16px; }
.ao-floating-sidebar .ao-sidebar-heading p span { display:block; white-space:nowrap; }
@media(max-width:767px) {
 .ao-floating-sidebar .ao-sidebar-heading p span { white-space:normal; text-wrap:balance; word-break:normal; }
}

/* The partner badge must always cover the full navigation bar height. */
.primary .ao-nav-partner { min-height:var(--nav-height); }

/* Hide the floating directory below Full HD width; never squeeze nav artwork. */
@media (max-width:1919.98px) { .ao-floating-sidebar { display:none; } }
.primary .logo,.primary .search,.primary .menu-button,.primary nav,.primary .nav-group { flex-shrink:0; }
.primary .logo img { object-fit:contain; }
/* Keep the badge's shape as well as its minimum navigation-height coverage. */
.primary .ao-nav-partner { min-width:calc(var(--nav-height) * 1.1); }

/* Responsive sidebar entrance and exit without abruptly removing its layout. */
.ao-floating-sidebar {
  display:block;
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0) scale(.88);
  transition:transform 480ms cubic-bezier(.22,.61,.36,1),opacity 380ms ease,visibility 0s;
}
@media(max-width:1439.98px) {
  .ao-floating-sidebar {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-50%) translateX(calc(100% + 48px)) scale(.88);
    transition:transform 480ms cubic-bezier(.22,.61,.36,1),opacity 380ms ease,visibility 0s 480ms;
  }
}
@media(prefers-reduced-motion:reduce) { .ao-floating-sidebar { transition:none; } }

/* AO Process Blue navigation partner badge. */
.primary .ao-nav-partner { background:#0091D2; }

/* Emphasize the partnership announcement beneath the joint logo. */
.ao-floating-sidebar .ao-sidebar-heading p { font-size:13px; line-height:1.65; }
@media(min-width:2560px) { .ao-floating-sidebar .ao-sidebar-heading p { font-size:16px; } }
@media(max-width:767px) { .ao-floating-sidebar .ao-sidebar-heading p { font-size:11px; } }

/* Shared capsule shape for search and directory filters. */
body .support-search,
body .news-toolbar input,
body .career-search input,
body .career-filters select,
body .dealer-filters select,
body input[type="search"] { border-radius:999px; }
body .news-toolbar input,
body .career-search input,
body .career-filters select,
body .dealer-filters select { padding-inline:24px; }

/* Rectangular location filters. */
body .dealer-filters select { border-radius:4px; padding-inline:12px; }

/* Consistent inset dropdown indicators across forms and directory filters. */
body select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 20px center !important;
  background-size:16px 16px !important;
  padding-right:52px !important;
}
body select:disabled { opacity:.6; }

/* Floating directory belongs beneath the navigation dimming overlay. */
.ao-floating-sidebar { z-index:18; }

/* A fine white edge separates black buttons from very dark artwork. */
.hero-link.cta,.omni-link.cta,.brand-cta.cta,.partner-hero .cta,
.hero-link.cta:hover,.omni-link.cta:hover,.brand-cta.cta:hover,.partner-hero .cta:hover,
.hero-link.cta:focus-visible,.omni-link.cta:focus-visible,.brand-cta.cta:focus-visible,.partner-hero .cta:focus-visible {
  border:1px solid #fff;
  background:#000;
  color:#fff;
}

/* Gold artwork is not dark enough to require a white button outline. */
.omni-link.cta,.omni-link.cta:hover,.omni-link.cta:focus-visible {
  border:0;
}

/* Increase contrast outlines on dark-background buttons to two pixels. */
.hero-link.cta,.brand-cta.cta,.partner-hero .cta,
.hero-link.cta:hover,.brand-cta.cta:hover,.partner-hero .cta:hover,
.hero-link.cta:focus-visible,.brand-cta.cta:focus-visible,.partner-hero .cta:focus-visible {
  border:1px solid #fff;
}

/* Concise official-machine title beneath the AO joint mark. */
.ao-floating-sidebar .ao-sidebar-heading p { font-size:19px; line-height:1.5; font-weight:700; white-space:nowrap; }
@media(min-width:2560px) { .ao-floating-sidebar .ao-sidebar-heading p { font-size:23px; } }

/* Joint logo alone leads the floating directory. */
.ao-floating-sidebar .ao-sidebar-heading img {
  width:110%;
  max-width:none;
  margin:0 -5% 8px;
  height:auto;
}

/* Keep the floating directory anchored identically across every page. */
.ao-floating-sidebar {
  top:20vh;
  transform-origin:right top;
  transform:translateX(0) scale(.88);
  max-height:calc((80dvh - 100px) / .88);
  font-family:Arial,"Microsoft YaHei",sans-serif;
  line-height:1.5;
}
.ao-floating-sidebar .ao-sidebar-group h2,
.ao-floating-sidebar .ao-sidebar-group a { line-height:1.5; letter-spacing:0; }
@media(max-width:1439.98px) {
  .ao-floating-sidebar { transform:translateX(calc(100% + 48px)) scale(.88); }
}

.ao-home-hero { width:100%; aspect-ratio:3840 / 541; background:#000c3c; overflow:hidden; }
.ao-home-hero > a { display:block; width:100%; height:100%; }
.ao-home-desktop { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.ao-home-mobile { display:none; }
@media(max-width:767px) {
 .ao-home-hero { aspect-ratio:1.8; }
 .ao-home-desktop { display:none; }
 .ao-home-mobile { display:flex; height:100%; padding:28px 20px; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(115deg,#182478,#000c3c 35%,#000c3c 75%,#182478); color:white; }
 .ao-home-mobile img { width:min(65%,300px); height:auto; }
 .ao-home-mobile h1 { font-size:clamp(20px,5vw,30px); line-height:1.5; text-align:center; margin:12px 0 0; }
}

/* Reserve the same scrollbar space on short and long pages. */
html { overflow-y:scroll; }

.ao-sidebar-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding-top:18px; }
.ao-sidebar-actions a,.ao-sidebar-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:48px; padding:0; border:0; background:transparent; color:#fff; font:inherit; font-size:11px; cursor:pointer; text-decoration:none; }
.ao-sidebar-actions svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ao-sidebar-actions a:hover,.ao-sidebar-actions button:hover { color:#6bd5ff; }
.ao-sidebar-actions button:focus-visible { outline:2px solid white; outline-offset:3px; }
.ao-sidebar-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Site and language entries sit immediately before search. */
.primary .header-site-links { margin-left:auto; display:flex; align-items:center; gap:16px; flex-shrink:0; white-space:nowrap; }
.header-site-links a,.header-site-links button { padding:8px 0; font-size:13px; line-height:20px; color:#555; background:transparent; }
.header-site-links button:disabled { opacity:1; cursor:default; }
.header-site-links a:hover { color:#000; text-decoration:underline; text-underline-offset:5px; }
.primary .header-site-links + .search { margin-left:0; }
@media(min-width:1024px) { .primary .ao-nav-partner { right:max(12%,230px); } }
@media(max-width:1023.98px) { .primary .header-inner { gap:8px; } .primary .header-site-links { margin-left:0; gap:10px; } }
@media(max-width:480px) { .primary .header-inner { width:calc(100% - 16px); gap:6px; } .primary .logo { width:90px; } .primary .header-site-links { gap:8px; } .header-site-links a,.header-site-links button { font-size:12px; } .primary .search { width:30px; } .primary .menu-button { width:32px; padding:7px; } }

@media(min-width:1024px) and (max-width:1399.98px) { .primary .ao-nav-partner { position:relative; right:auto; top:0; margin-left:auto; align-self:flex-start; } .primary .header-site-links { margin-left:0; } .primary .header-inner { gap:16px; } }
html[lang="en"] .ao-floating-sidebar .ao-sidebar-group a { font-size:13px; }
html[lang="en"] .ao-announcement p { text-wrap:balance; }
html[lang="en"] .nav-label { letter-spacing:0; }
@media(min-width:1400px) { .primary .ao-nav-partner { right:max(12%,252px); } }
@media(max-width:359px) { .primary .header-site-links { flex-direction:column; gap:0; } .header-site-links a { font-size:11px; line-height:18px; padding:0; } }
/* Homepage media cards: zoom the image within its fixed crop. */
.media .news-image img { display:block; transform:scale(1); transform-origin:center; transition:transform 420ms cubic-bezier(.2,.65,.3,1); }
@media(hover:hover) { .media .news-card:hover .news-image img { transform:scale(1.05); } }
.media .news-card:focus-visible .news-image img { transform:scale(1.05); }
@media(prefers-reduced-motion:reduce) { .media .news-image img { transition:none; } }
#wechat-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
#wechat-dialog .wechat-qr { display:block; width:min(260px,100%); height:auto; margin:20px auto 0; }
#wechat-dialog #wechat-name { margin:8px 0 12px; border:0; background:transparent; padding:4px; font-weight:600; }
/* Lift the lower video buttons to give them more breathing room. */
.brand .brand-cta { bottom:36px; }
@media(max-width:767px) { .brand .brand-cta { bottom:28px; } }
/* AO Process Blue subscription action. */
footer #subscribe button,
footer #subscribe button:hover,
footer #subscribe button:focus-visible { background:#0091D2; color:#fff; }
/* Tennis cursor: native cursor keeps its position and has no animation lag. */
@media (hover: hover) and (pointer: fine) {
  html:has(.ao-feature), body:has(.ao-feature) { cursor:url("assets/icons/tennis-cursor.svg") 12 12, auto; }
  body:has(.ao-feature) :is(a, button, [role="button"], select, summary, label[for], input[type="checkbox"], input[type="radio"], input[type="submit"]) { cursor:url("assets/icons/tennis-cursor-link.svg") 12 12, pointer !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, [contenteditable="true"] { cursor:text !important; }
  body:has(.ao-feature) :is(button:disabled, input:disabled, select:disabled, [aria-disabled="true"]) { cursor:url("assets/icons/tennis-cursor.svg") 12 12, auto !important; }
}
.tennis-flight-trail { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2147483646; }
#site-search-dialog { margin:auto; width:min(760px,calc(100vw - 32px)); max-height:80vh; border:0; border-radius:16px; padding:36px; background:#fff; color:#000c3c; }
#site-search-dialog::backdrop { background:rgba(0,0,0,.68); }
#site-search-title { font-size:26px; margin:0 0 24px; }
.site-search-close { position:absolute; top:10px; right:14px; background:none; border:0; font-size:28px; color:#000c3c; }
.site-search-form { display:flex; gap:12px; }
.site-search-form input { min-width:0; flex:1; border:1px solid #bbb; padding:12px; font:inherit; border-radius:0; }
.site-search-form button { background:#0091d2; color:white; border:0; padding:12px 24px; font:inherit; }
.site-search-status { font-size:14px; color:#666; margin:20px 0; }
.site-search-result { display:block; padding:18px 0; border-top:1px solid #e3e6eb; text-decoration:none; color:inherit; }
.site-search-result h3 { font-size:18px; margin:0 0 8px; }
.site-search-result p { font-size:14px; line-height:1.7; color:#666; margin:0; }
.site-search-result:hover h3 { color:#0091d2; }
@media(max-width:600px) { #site-search-dialog { padding:28px 20px; } .site-search-form button { padding-inline:16px; } }
.header-search-wrap { position:relative; display:flex; flex-shrink:0; align-items:center; z-index:4; }
.primary .header-search-wrap .search { margin-left:0; position:relative; background:#fff; z-index:2; }
.header-search-expand { position:absolute; right:100%; top:50%; transform:translateY(-50%); width:0; opacity:0; overflow:hidden; pointer-events:none; transition:width .32s ease,opacity .22s ease; background:#fff; }
.header-search-expand input { display:block; width:100%; height:36px; box-sizing:border-box; border:0; border-bottom:1px solid #888; border-radius:0; padding:8px 10px; font:inherit; font-size:13px; background:#fff; color:#161616; }
.primary .header-site-links { transition:opacity .22s ease; }
.search-expanded .header-site-links { opacity:0; pointer-events:none; }
.search-expanded .header-search-expand { width:200px; opacity:1; pointer-events:auto; }
@media(max-width:767px) { .search-expanded .header-search-expand { width:min(180px,calc(100vw - 120px)); } }
@media(prefers-reduced-motion:reduce) { .header-search-expand,.primary .header-site-links { transition:none; } }
.header-search-expand input { border:2px solid #000; border-radius:0; }
.search-expanded .header-search-expand { width:var(--search-field-width,160px); }
/* Expand across the full utility area, with the search icon inside the border. */
.header-search-expand { right:0; height:36px; box-sizing:border-box; border:1px solid #000; }
.header-search-expand input { height:34px; border:0; padding-right:40px; }
.primary .header-search-wrap .search { background:transparent; }
@media (hover:hover) and (pointer:fine) { body:has(.ao-feature) :is(.resource-unavailable, .resource-unavailable:hover, .resource-unavailable:focus) { cursor:url("assets/icons/tennis-cursor.svg") 12 12, auto !important; } }
.header-search-expand { border-radius:18px; }
.ao-sidebar-collapse { position:fixed; z-index:18; width:30px; min-height:70px; border:0; border-radius:6px 0 0 6px; padding:10px 7px; background:#142457; color:#fff; font:12px/1.6 Arial,"Microsoft YaHei",sans-serif; writing-mode:vertical-rl; cursor:pointer; }
.ao-sidebar-collapse[hidden] { display:none; }
.ao-floating-sidebar.is-collapsed .ao-sidebar-menu,.ao-floating-sidebar.is-collapsed .ao-sidebar-actions { display:none; }
.ao-floating-sidebar.is-collapsed .ao-sidebar-heading { border-bottom:0; padding-bottom:0; }
.ao-floating-sidebar.is-collapsed::after { display:none; }
.ao-sidebar-collapse:focus-visible { outline:2px solid #0091d2; outline-offset:2px; }
body:has(.ao-feature) .ao-sidebar-collapse { background:#e0e5ec; color:#000c3c; }
.ao-sidebar-collapse { border-radius:0; background:#000c3c; border-left:2px solid #0091d2; clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 9px); }
.ao-sidebar-collapse.is-expand { writing-mode:horizontal-tb; height:34px; min-height:34px; padding:6px 12px; border-left:0; border-top:1px solid #ffffff26; background:#101b57; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 7px) 100%,0 100%); }
body:has(.ao-feature) .ao-sidebar-collapse { background:#eef0f3; color:#000c3c; }
body:has(.ao-feature) .ao-sidebar-collapse.is-expand { border-top-color:#000c3c22; }
.ao-sidebar-collapse:hover { color:#0091d2; }
.ao-floating-sidebar.is-collapsed { width:170px; padding:20px 18px; } .ao-floating-sidebar.is-collapsed .ao-sidebar-heading img { width:100%; max-width:100%; margin:0; }
.ao-sidebar-collapse { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; writing-mode:horizontal-tb; padding:7px 5px; } .ao-sidebar-collapse>span:last-child { writing-mode:vertical-rl; } .ao-sidebar-collapse .ao-toggle-arrow { writing-mode:horizontal-tb; transform:none; font:20px/1 Arial,sans-serif; } .ao-sidebar-collapse.is-expand { flex-direction:row; } .ao-sidebar-collapse.is-expand>span:last-child { writing-mode:horizontal-tb; }
.ao-sidebar-collapse:not(.is-expand) { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px; } .ao-sidebar-collapse:not(.is-expand) .ao-toggle-arrow { display:block; width:18px; height:18px; flex:0 0 18px; font-size:0; position:relative; } .ao-sidebar-collapse:not(.is-expand) .ao-toggle-arrow::after { content:""; position:absolute; width:6px; height:6px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); left:4px; top:5px; } .ao-sidebar-collapse.is-expand { flex-direction:column-reverse; gap:0; height:40px; min-height:40px; padding:3px 8px; } .ao-sidebar-collapse.is-expand .ao-toggle-arrow { height:12px; font-size:16px; line-height:10px; }

/* Make clickable text recognizable with the tennis cursor. */
a[href]:not([aria-disabled="true"]):hover,
a[href]:not([aria-disabled="true"]):focus-visible { text-decoration-line:underline !important; text-decoration-thickness:1px; text-underline-offset:.2em; }
/* Top-level navigation already has its own underline indicator. */
.primary nav > a[href]:hover,
.primary nav > a[href]:focus-visible,
.primary nav > .nav-group > a:hover,
.primary nav > .nav-group > a:focus-visible { text-decoration:none !important; }
/* One centered AO campaign banner replaces the three product cards. */
.ao-home-banner { display:block; width:100%; aspect-ratio:2.4; overflow:hidden; background:#000522; }
.ao-home-banner img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
@media(max-width:767px) { .ao-home-banner { aspect-ratio:1.25; }.ao-home-banner img { object-position:50% 60%; } }
.ao-home-banner { position:relative; }
.ao-home-banner .ao-banner-cta { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; }
@media(max-width:767px) { .ao-home-banner .ao-banner-cta { bottom:16px; } }
#products .ao-banner-heading { text-align:center; font-size:clamp(24px,2vw,32px); font-weight:500; margin:0 0 32px; }
.ao-home-banner { aspect-ratio:16/9; container-type:inline-size; color:#fff; }
.ao-home-banner .ao-banner-art { object-position:50% 43%; }
.ao-home-banner .ao-banner-brand { position:absolute; left:4%; top:4.5%; width:15%; height:auto; object-fit:contain; filter:brightness(0) invert(1); }
.ao-home-banner .ao-banner-badge { position:absolute; right:4.5%; top:0; width:8.8%; height:auto; object-fit:contain; }
.ao-banner-copy { position:absolute; left:20%; right:20%; top:12.5%; text-align:center; }
.ao-banner-copy strong { display:block; font-size:2.7cqw; line-height:1.3; font-weight:700; }
.ao-banner-copy > span { display:block; margin-top:1.8cqw; font-size:1.7cqw; line-height:1.4; }
.ao-home-banner:hover,.ao-home-banner:focus-visible { text-decoration:none !important; }
@media(max-width:767px) { #products .ao-banner-heading { margin-bottom:20px; }.ao-home-banner { aspect-ratio:16/9; }.ao-home-banner .ao-banner-cta { bottom:8px; padding:5px 14px; font-size:11px; min-height:0; } }
/* Compact centered heading and more room beneath the product reflections. */
#products.products { padding-top:0; }
#products .ao-banner-heading { margin:0; padding:28px 0; line-height:1.4; }
.ao-home-banner { aspect-ratio:3/2; }
.ao-home-banner .ao-banner-art { object-position:50% 60%; }
.ao-banner-copy { top:8%; }
.ao-home-banner .ao-banner-cta { bottom:22px; }
@media(max-width:767px) {
 #products .ao-banner-heading { margin:0; padding:20px 0; }
 .ao-home-banner { aspect-ratio:3/2; }
 .ao-home-banner .ao-banner-cta { bottom:10px; }
}

.ao-home-banner .ao-banner-art { object-position:50% 51%; }
/* Align campaign button bottom spacing with the brand event banners. */
.ao-home-banner .ao-banner-cta { bottom:36px; }
@media(max-width:767px) { .ao-home-banner .ao-banner-cta { bottom:28px; } }
/* Match corner accents to the exact 22:30 diagonal of the panel edge. */
.ao-floating-sidebar,
body:has(.ao-feature) .ao-floating-sidebar {
 clip-path:polygon(22px 0,100% 0,100% calc(100% - 30px),calc(100% - 22px) 100%,0 100%,0 30px);
 background:linear-gradient(125deg,#000c3c 50%,#182478);
}
body:has(.ao-feature) .ao-floating-sidebar { background:#eef0f3; }
.ao-floating-sidebar::before,
body:has(.ao-feature) .ao-floating-sidebar::before {
 content:''; display:block; position:absolute; left:0; top:0; right:auto; width:26px; height:36px; opacity:1;
 background:#0091d2; clip-path:polygon(22px 0,26px 0,0 35.45px,0 30px); pointer-events:none;
}
.ao-floating-sidebar::after,
body:has(.ao-feature) .ao-floating-sidebar::after {
 width:22px; height:100px;
 background:linear-gradient(transparent,transparent);
 background-color:#303c9c;
 clip-path:polygon(100% 0,0 30%,0 70%,100% 40%,100% 64%,0 94%,0 100%,100% 70%);
}
body:has(.ao-feature) .ao-floating-sidebar::after { background-color:#ccd5e3; }

/* Mobile navigation: plain black bars without a button fill. */
.primary .menu-button { background: transparent; color: #000; border: 0; box-shadow: none; }
.primary .menu-button span { background: #000; }

/* Portrait AO composition matches the three mobile main banners. */
@media (max-width:649.98px) {
 .ao-home-banner { aspect-ratio:720 / 1060; background:#000322; isolation:isolate; }
 .ao-home-banner .ao-banner-art { position:absolute; width:130%; max-width:none; height:auto; left:-15%; top:8%; object-fit:contain; object-position:center; mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent 100%); }
 .ao-home-banner .ao-banner-copy { top:9%; left:16px; right:16px; z-index:1; }
 .ao-banner-copy strong { font-size:clamp(20px,5.6cqw,32px); line-height:1.45; }
 .ao-banner-copy > span { margin-top:14px; font-size:clamp(14px,3.8cqw,20px); line-height:1.5; }
 .ao-home-banner .ao-banner-cta { bottom:32px; z-index:2; padding:0 var(--button-padding-x); min-height:var(--button-height); font-size:var(--button-font); }
}

/* Keep the mobile footer announcement blue with the original light treatment. */
@media (max-width:767px) {
 .ao-announcement.is-over-footer {
  background:linear-gradient(115deg,#0091d2 0%,#0091d2 38%,#35afe3 50%,#0091d2 65%);
  color:#fff;
 }
}

/* One joint partnership mark leaves room for mobile navigation controls. */
@media (max-width:1023.98px) {
 .primary .ao-nav-partner { display:none; }
 .primary .logo { width:clamp(120px,32vw,160px); }
 .primary .logo picture { display:block; width:100%; }
 .primary .logo img { display:block; width:100%; height:auto; aspect-ratio:4485 / 1670; object-fit:contain; filter:brightness(0); }
}

.mobile-menu-options { display:none; }
@media(max-width:1023.98px) {
 :root { --nav-height:68px; }
 .primary .header-inner { justify-content:flex-end; }
 .primary .logo { position:absolute; left:50%; transform:translateX(-50%); width:170px; margin:0; }
 .primary .header-site-links,.primary .header-search-wrap { display:none; }
 .primary .menu-button { width:44px; height:44px; padding:10px; margin-left:auto; }
 .primary nav .mobile-menu-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; border-top:1px solid #e5e5e5; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); margin-top:12px; }
 .primary nav .mobile-menu-options a,.primary nav .mobile-menu-options button { display:block; min-width:0; margin:0; padding:12px 4px; text-align:center; border:0; background:transparent; color:#111; font-size:14px; line-height:1.5; }
 .primary nav .mobile-menu-options > * + * { border-left:1px solid #e5e5e5; }
}

/* Navigation remains above tennis effects and floating page controls. */
.site-header { z-index:60; }
.site-header .primary { background:#fff; }
.tennis-flight-trail { z-index:30; }

/* Equal pixel-aligned strokes and reversible mobile menu transitions. */
@media(max-width:1023.98px) {
 .primary .menu-button { gap:6px; }
 .primary .menu-button span { height:2px; flex:0 0 2px; width:24px; transform-origin:center; transition:transform 280ms ease,opacity 180ms ease; }
 .primary .menu-button[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
 .primary .menu-button[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(.4); }
 .primary .menu-button[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
 .primary #main-nav { display:flex; visibility:hidden; pointer-events:none; opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(-8px); transition:clip-path 320ms cubic-bezier(.22,1,.36,1),transform 320ms cubic-bezier(.22,1,.36,1),opacity 200ms ease,visibility 0s linear 320ms; }
 .primary #main-nav.open { visibility:visible; pointer-events:auto; opacity:1; clip-path:inset(0); transform:translateY(0); transition-delay:0s; }
}
@media(max-width:1023.98px) and (prefers-reduced-motion:reduce) {
 .primary #main-nav,.primary .menu-button span { transition:none; }
}

/* Homepage CTAs share sizing; labels determine their widths. */
.home-page #main .cta {
 width:auto; min-width:0; height:var(--button-height); min-height:var(--button-height);
 padding:0 var(--button-padding-x); font-size:var(--button-font); line-height:1;
 font-weight:400; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
}

.home-video-dialog { width:min(960px,calc(100vw - 32px)); max-width:none; max-height:85dvh; padding:40px 0 0; border:0; border-radius:10px; background:#000; color:#fff; margin:auto; overflow:hidden; }
.home-video-dialog::backdrop { background:#000a; }
.home-video-close { position:absolute; top:0; right:4px; width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:28px; }
.home-video-player { aspect-ratio:16/9; max-height:calc(85dvh - 40px); }
.home-video-player video,.home-video-player iframe { display:block; width:100%; height:100%; border:0; object-fit:contain; background:#000; }
.home-video-player video:fullscreen { width:100vw; height:100dvh; max-height:none; }

.mobile-footer-phone { display:none; }
@media(max-width:1023.98px) {
 .site-header .utility { display:none; }
 .mobile-footer-phone { display:flex; flex-direction:column; align-items:center; gap:10px; margin:28px 16px 0; padding:24px 0 8px; border-top:1px solid #ffffff33; color:#fff; }
 .mobile-footer-phone span { font-size:15px; }
 .mobile-footer-phone a { font-size:28px; line-height:1.4; font-weight:600; letter-spacing:1px; }
 .site-header .primary { background:transparent; border-bottom-color:transparent; }
 .site-header.mobile-on-dark .logo img { filter:brightness(0) invert(1); }
 .site-header.mobile-on-dark .menu-button span { background:#fff; }
 .site-header:has(#main-nav.open) .primary { background:#fff; }
 .site-header:has(#main-nav.open) .logo img { filter:brightness(0); }
 .site-header:has(#main-nav.open) .menu-button span { background:#000; }
}

/* Switch the navigation surface itself for contrast with the page beneath. */
@media(max-width:1023.98px) {
 .site-header .primary { background:#000; transition:background-color 220ms ease; }
 .site-header .primary .logo img { filter:brightness(0) invert(1); }
 .site-header .primary .menu-button span { background:#fff; }
 .site-header.mobile-on-dark .primary,
 .site-header:has(#main-nav.open) .primary { background:#fff; }
 .site-header.mobile-on-dark .primary .logo img,
 .site-header:has(#main-nav.open) .primary .logo img { filter:brightness(0); }
 .site-header.mobile-on-dark .primary .menu-button span,
 .site-header:has(#main-nav.open) .primary .menu-button span { background:#000; }
}

/* Mobile header stays fully pinned; unknown backgrounds retain the white default. */
@media(max-width:1023.98px) {
 :root { --utility-height:0px; }
 .site-header { top:0; }
 .site-header .primary { background:#fff; }
 .site-header .primary .logo img { filter:brightness(0); }
 .site-header .primary .menu-button span { background:#000; }
 .site-header:has(#main-nav.open) .primary { background:#fff; }
 .site-header:has(#main-nav.open) .primary .logo img { filter:brightness(0); }
 .site-header:has(#main-nav.open) .primary .menu-button span { background:#000; }
}

/* The expanded mobile menu inherits the current closed-header palette. */
@media(max-width:1023.98px) {
 .site-header { --mobile-menu-bg:#fff; --mobile-menu-ink:#000; --mobile-menu-line:#00000020; }
 .site-header:has(#main-nav.open) .primary,
 .site-header .primary #main-nav,
 .site-header .primary #main-nav .nav-submenu { background:var(--mobile-menu-bg); color:var(--mobile-menu-ink); }
 .site-header:has(#main-nav.open) .primary .menu-button span { background:var(--mobile-menu-ink); }
 .site-header .primary #main-nav a,
 .site-header .primary #main-nav button { color:var(--mobile-menu-ink); border-color:var(--mobile-menu-line); }
 .site-header .primary #main-nav .mobile-menu-options,
 .site-header .primary #main-nav .mobile-menu-options > * + * { border-color:var(--mobile-menu-line); }
}

.primary #main-nav > .mobile-menu-home { display:none; }
@media(max-width:1023.98px) {
 .primary #main-nav > .mobile-menu-home { display:flex; align-items:center; min-height:var(--nav-height); padding:16px var(--gutter); font-size:16px; line-height:1.5; }
 .primary #main-nav > .mobile-menu-home::after { content:none; }
}

.company-map-address { display:inline-block; color:inherit; text-decoration:none; }
@media(max-width:1023.98px) { .company-map-address { min-height:44px; padding-block:8px; } }

.mobile-footer-service { display:none; }
@media(max-width:1023.98px) {
 .mobile-footer-service { display:block; }
 .mobile-footer-service p { margin:0; font-size:14px; line-height:22px; font-weight:400; }
 .mobile-footer-service a { color:inherit; }
}

/* Stacked mobile actions share the natural width of their longest label. */
@media(max-width:767px) {
 #main .career-invitation-actions,
 #main .app-download-links:not([hidden]) { display:grid; grid-template-columns:minmax(0,max-content); width:max-content; max-width:100%; align-items:stretch; }
 #main .career-invitation-actions { margin-inline:auto; }
 #main .career-invitation-actions > .cta,
 #main .app-download-links > .cta { width:100%; min-width:0; max-width:100%; justify-self:stretch; padding-inline:24px; }
}

/* Temporary neutral artwork for the three homepage lead banners. */
.home-page .visual.banner-placeholder { background:#dedede; color:#111; }
.home-page .banner-placeholder .banner-copy { color:#111; }
.home-page .banner-placeholder + .banner-placeholder { border-top:8px solid #fff; }

/* Subtle centered brand mark on the neutral homepage banners. */
.home-page .banner-placeholder .placeholder-brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(192px,27.2vw,544px); max-width:56%; height:auto; object-fit:contain; filter:brightness(0); opacity:.18; pointer-events:none; }
@media(max-width:649.98px) { .home-page .banner-placeholder .placeholder-brand { width:54.4%; max-width:240px; } }

/* Match the homepage gray placeholder banners across the video rail. */
.home-page .brand-panel.brand-placeholder { background:#dedede; }
.home-page .brand-panel.brand-placeholder::after { display:none; }
.home-page .brand-placeholder-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54.4%; max-width:320px; height:auto; object-fit:contain; filter:brightness(0); opacity:.18; pointer-events:none; }

/* Centered event composition for the first two homepage banners. */
.home-page .visual.centered-event-banner { height:auto; aspect-ratio: 2048 / 700; min-height:440px; }
.home-page .centered-event-banner .banner-copy { top:10%; left:24px; right:24px; text-align:center; }
.home-page .centered-event-banner .banner-copy h2 { max-width:none; margin:0 auto; font-size:clamp(30px,2.7vw,64px); line-height:1.25; font-weight:600; }
.home-page .visual.centered-event-banner .hotspot { left:50%; bottom:10%; transform:translateX(-50%); }
.home-page .launch-event-banner { background:#0d0501; border-top:8px solid #fff; }
.home-page .launch-event-banner .banner-copy { color:#fff; }
.home-page .launch-event-banner .banner-image { display:block; object-fit:cover; object-position:50% 62%; }
.home-page .launch-event-banner .cta { border:1px solid #ffffff80; }
@media(max-width:649.98px) {
 .home-page .visual.centered-event-banner { aspect-ratio:720 / 1060; min-height:0; }
 .home-page .centered-event-banner .banner-copy { top:10%; left:24px; right:24px; }
 .home-page .centered-event-banner .banner-copy h2 { font-size:clamp(26px,7vw,38px); line-height:1.35; }
 .home-page .launch-event-banner .banner-image { object-position:70% 50%; }
 .home-page .visual.centered-event-banner .hotspot { bottom:8%; }
}

.home-page .launch-event-banner .launch-subtitle { margin:16px 0 0; font-size:clamp(16px,1.2vw,26px); line-height:1.5; font-weight:400; letter-spacing:.22em; color:#fff; }
@media(max-width:649.98px) { .home-page .launch-event-banner .launch-subtitle { margin-top:12px; font-size:16px; letter-spacing:.16em; } }

/* AO opening banner: independent brand lockup and live responsive text. */
.home-page .visual.ao-partner-hero { background:#051450 url('assets/ao-first-banner-bg-lossless-web-20260924.webp') center / cover no-repeat; color:#fff; }
.home-page .ao-partner-hero .ao-partner-lockup { position:absolute; top:7%; left:50%; transform:translateX(-50%); width:28%; max-width:580px; height:auto; }
.home-page .ao-partner-message { position:absolute; top:47%; left:5%; right:5%; text-align:center; }
.home-page .ao-partner-message h2 { margin:0; font-size:clamp(24px,2.6vw,58px); font-weight:600; line-height:1.4; }
.home-page .ao-partner-message p { margin:20px 0 0; font-size:clamp(16px,1.35vw,28px); line-height:1.6; }
@media(max-width:649.98px){
 .home-page .ao-partner-hero .ao-partner-lockup { top:12%; width:68%; max-width:320px; }
 .home-page .ao-partner-message { top:40%; left:24px; right:24px; }
 .home-page .ao-partner-message h2 { font-size:clamp(23px,6.4vw,34px); line-height:1.5; }
 .home-page .ao-partner-message p { margin-top:18px; font-size:15px; line-height:1.8; }
 html[lang="en"] .home-page .ao-partner-message { top:36%; }
 html[lang="en"] .home-page .ao-partner-message h2 { font-size:22px; line-height:1.35; }
 html[lang="en"] .home-page .ao-partner-message p { font-size:14px; line-height:1.5; }
}

/* Preserve both decorative edges instead of cropping the landscape artwork on phones. */
@media(max-width:649.98px) {
 .home-page .visual.ao-partner-hero { background-image:url("assets/ao-first-banner-mobile.svg"); background-size:100% 100%; background-position:center; }
}

/* IFA: enlarged product on the right, editorial copy on the left. */
.home-page .visual.ifa-banner { background:#00040c; height:auto; min-height:440px; aspect-ratio:2048 / 700; overflow:hidden; border-top:8px solid #fff; }
.home-page .ifa-banner .ifa-art { position:absolute; width:150%; max-width:none; height:auto; left:-14%; top:50%; transform:translateY(-53%); }
.home-page .ifa-banner .banner-copy { top:12%; left:4.2%; right:50%; color:#fff; }
.home-page .ifa-banner .banner-copy h2 { font-size:clamp(28px,2.7vw,58px); line-height:1.3; }
.home-page .ifa-banner .banner-copy p { margin-top:14px; font-size:clamp(16px,1.5vw,28px); line-height:1.5; }
@media(max-width:649.98px){
 .home-page .visual.ifa-banner { min-height:0; aspect-ratio:720 / 1060; }
 .home-page .ifa-banner .banner-copy { top:10%; left:20px; right:20px; text-align:center; }
 .home-page .ifa-banner .banner-copy h2 { font-size:clamp(26px,7vw,36px); }
 .home-page .ifa-banner .banner-copy p { font-size:16px; margin-top:12px; }
 .home-page .ifa-banner .ifa-art { width:260%; left:-88%; top:60%; transform:translateY(-53%); }
}

/* All three opening banners share the first banner's type scale. */
.home-page { --opening-title-size:clamp(24px,2.6vw,58px); --opening-subtitle-size:clamp(16px,1.35vw,28px); }
.home-page :is(#top,#omni,#pace) :is(.ao-partner-message,.banner-copy) h2 { font-size:var(--opening-title-size); }
.home-page :is(#top,#omni,#pace) :is(.ao-partner-message,.banner-copy) p { font-size:var(--opening-subtitle-size); }
@media(max-width:649.98px){
 .home-page { --opening-title-size:clamp(23px,6.4vw,34px); --opening-subtitle-size:15px; }
 html[lang="en"] .home-page { --opening-title-size:22px; --opening-subtitle-size:14px; }
}

/* Consistent dimensions and one shared gutter for the opening three banners. */
.home-page #main > :is(#top,#omni,#pace) { height:auto; min-height:440px; aspect-ratio:2048 / 700; border:0; margin-top:0; }
.home-page #main > :is(#omni,#pace) { margin-top:8px; }
@media(max-width:649.98px){
 .home-page #main > :is(#top,#omni,#pace) { min-height:0; aspect-ratio:720 / 1060; }
}

/* Retain the original desktop navigation footprint after removing EN. */
@media(min-width:1024px) { .primary .header-site-links { min-width:73.0625px; justify-content:flex-end; } }

/* One-pixel contrasting edge where mobile navigation meets the page. */
@media(max-width:1023.98px){.site-header .primary{border-bottom:1px solid #e5e5e5;box-sizing:border-box}.site-header .primary #main-nav.open{border-bottom:1px solid #e5e5e5}}

/* Match the mobile AO palette when the announcement overlaps the footer. */
.ao-announcement.is-over-footer{background:linear-gradient(115deg,#0091d2 0%,#0091d2 38%,#35afe3 50%,#0091d2 65%);color:#fff}