/* Homepage brand trial. Enqueued exclusively by front-page.php. */
:root {
  --brand-primary: #0061AE;
  --brand-dark: #003C6C;
  --brand-gradient: linear-gradient(135deg, #0061AE 0%, #003C6C 100%);
  --bg-light-blue: #F0F6FB;
  --text-main: #333333;
}

body.home {
  --ink: var(--text-main);
  --muted: var(--text-main);
  --paper: #FFFFFF;
  --olive: var(--brand-dark);
  --line: rgba(0, 97, 174, .14);
  background: #FFFFFF;
  color: var(--text-main);
}

body.home ::selection { background: var(--brand-primary); color: #FFFFFF; }
body.home :focus-visible { outline-color: var(--brand-primary); }
body.home main :is(h2, h3) { color: var(--brand-dark); }
body.home main h2 em { color: var(--brand-primary); }
body.home main .eyebrow { color: var(--brand-primary); }
body.home main p { color: var(--text-main); }
body.home :is(.text-link, .text-link.light) { color: var(--brand-primary); border-color: currentColor; }
body.home :is(.text-link, .text-link.light):hover { color: var(--brand-dark); }
body.home .site-header { border-bottom: 0; }
/* Reuse the transparent logo silhouette so the brand colour is exact. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  body.home .site-header .brand { position: relative; }
  body.home .site-header .brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-primary);
    -webkit-mask: url("assets/source-01.png") center / contain no-repeat;
    mask: url("assets/source-01.png") center / contain no-repeat;
    pointer-events: none;
  }
  body.home .site-header .brand img { opacity: 0; }
}
body.home .desktop-nav > a,
body.home .desktop-nav > .nav-disclosure > :is(.nav-section-link, .nav-trigger) { color: var(--brand-dark); }
body.home .desktop-nav > a:hover,
body.home .desktop-nav > .nav-disclosure > :is(.nav-section-link, .nav-trigger):hover { color: var(--brand-primary); }
body.home .product-menu-categories button:hover { background: var(--bg-light-blue); }
body.home .product-menu-categories button[aria-pressed=true] { background: var(--brand-dark); color: #FFFFFF; }
body.home .product-menu-categories button[aria-pressed=true] .menu-index { color: #D4E8F8; }
body.home .mega-menu { box-shadow: 0 16px 32px rgba(0, 60, 108, .09); }

/* Keep the existing content grid while allowing the section colour to reach both edges. */
body.home main > section { border: 0; }
body.home main > section.wrap,
body.home .site-footer.wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100% - 1540px) / 2));
}

/* After the hero: white, ice blue, white, ice blue, in document order. */
body.home :is(.brand-intro, .why-jiamu, .collections, .project-films, .faq) {
  background: #FFFFFF;
  color: var(--text-main);
}
body.home :is(.company-stats, .selected-projects, .whole-home, .project-journey, .contact) {
  background: var(--bg-light-blue);
}
body.home :is(.brand-intro-copy, .brand-intro-body) { background: #FFFFFF; }
body.home .brand-intro-kicker { color: var(--brand-primary); }
body.home .brand-intro-body :is(p, .company-name) { color: var(--text-main); }
body.home .company-stat { border: 0; border-radius: 8px; }
body.home .company-stat strong { color: var(--brand-dark); }
body.home .company-stat span { color: var(--text-main); }

/* Video overlays retain white lettering for contrast over moving imagery. */
body.home :is(.hero, .hero-video, .project-tile) { background-color: var(--brand-dark); }
body.home .hero.service-hero .hero-shade {
  background: linear-gradient(90deg, rgba(0, 35, 65, .72), rgba(0, 35, 65, .23) 74%, rgba(0, 35, 65, .1)),
    linear-gradient(0deg, rgba(0, 35, 65, .54), transparent 65%);
}
body.home .hero :is(h1, h1 em, .eyebrow, .hero-link) { color: #FFFFFF; }
body.home .hero .hero-link { border-color: rgba(255, 255, 255, .65); }
body.home .hero :focus-visible,
body.home .contact-content :focus-visible,
body.home .site-footer :focus-visible { outline-color: #FFFFFF; }

/* All enquiry entry points share the primary button treatment. */
body.home [data-enquiry],
body.home .text-link[data-enquiry],
body.home .site-header .header-enquiry,
body.home .contact .contact-enquiry,
body.home .footer-menu .footer-menu-list > button[data-enquiry],
body.home #enquiry-dialog .quote-submit {
  min-height: 48px;
  padding: 13px 23px;
  border: 0;
  border-radius: 6px;
  background: var(--brand-gradient);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 97, 174, .3);
  font: 500 15px/1.5 var(--sans);
  text-decoration: none;
  transition: box-shadow .2s ease, filter .2s ease;
}
body.home [data-enquiry]:hover,
body.home .text-link[data-enquiry]:hover,
body.home .site-header .header-enquiry:hover,
body.home .contact .contact-enquiry:hover,
body.home .footer-menu .footer-menu-list > button[data-enquiry]:hover,
body.home #enquiry-dialog .quote-submit:hover {
  color: #FFFFFF;
  background: var(--brand-gradient);
  box-shadow: 0 6px 20px rgba(0, 97, 174, .42);
  filter: brightness(1.06);
  text-decoration: none;
}
body.home :is(.header-enquiry, .contact-enquiry)::after { display: none; }
body.home .footer-menu .footer-menu-list > button[data-enquiry] {
  width: fit-content;
  margin-top: 14px;
  padding-inline: 16px;
  justify-content: center;
}

/* A restrained surface treatment; image crops and card order are unchanged. */
body.home :is(.case-card, .collection-card, .why-card, .company-stat, .project-tile) {
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 97, 174, .05);
}
body.home :is(.case-card, .collection-card, .why-card) { background: #FFFFFF; }
body.home :is(.case-card, .collection-card) { overflow: hidden; }
body.home .why-grid { border: 0; gap: 20px; }
body.home .why-card { border: 0; padding: 26px 24px; }
body.home .why-card > span { color: var(--brand-primary); }
body.home .case-card-meta { margin: 20px 22px 0; color: var(--brand-primary); }
body.home .case-card h3 { margin: 8px 22px 24px; }
body.home .case-filter button { color: var(--text-main); }
body.home .case-filter button:hover,
body.home .case-filter button[aria-pressed=true] { color: var(--brand-primary); border-color: var(--brand-primary); }
body.home .collection-caption { border: 0; padding: 22px; }
body.home .collection-caption > span { color: var(--brand-primary); }
body.home .collection-count { color: var(--brand-primary); }
body.home .collection-note p { border-left-color: rgba(0, 97, 174, .18); }
body.home .collections .text-link.light { color: var(--brand-primary); border-color: currentColor; }
body.home .collections .text-link.light:hover { color: var(--brand-dark); }
body.home .collections :focus-visible { outline-color: var(--brand-primary); }
body.home .whole-home figure img,
body.home .journey-photo { border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 97, 174, .05); }
body.home .whole-home figcaption span { color: var(--text-main); }
body.home .journey-meta { border-color: rgba(0, 97, 174, .18); }
body.home .journey-meta > span:first-child { color: var(--brand-primary); }
body.home .project-tile-shade {
  background: linear-gradient(180deg, rgba(0, 35, 65, .12), transparent 35%, rgba(0, 35, 65, .12) 55%, rgba(0, 35, 65, .72));
}
body.home .project-tile-toggle { background: rgba(0, 60, 108, .65); }
body.home .project-tile-toggle:hover { background: var(--brand-dark); }
body.home .faq-list summary { color: var(--brand-dark); }
body.home .faq-list summary i { color: var(--brand-primary); }

/* The final enquiry panel and footer use the brand's dark accent. */
body.home .contact-content { background: var(--brand-gradient); }
body.home .contact-content :is(h2, h2 em, .eyebrow, p) { color: #FFFFFF; }
body.home .contact .contact-enquiry {
  box-shadow: 0 4px 14px rgba(0, 97, 174, .3), 0 0 0 1px rgba(255, 255, 255, .3);
}
body.home .contact .contact-enquiry:hover {
  box-shadow: 0 6px 20px rgba(0, 97, 174, .42), 0 0 0 1px rgba(255, 255, 255, .5);
}
body.home .site-footer { background: var(--brand-dark); color: #FFFFFF; }
body.home .site-footer .footer-logo img { filter: brightness(0) invert(1); }
body.home .footer-grid .footer-menu h2 { color: #FFFFFF; border-bottom: 0; }
body.home .footer-grid .footer-brand { border-color: rgba(255, 255, 255, .18); }
body.home .footer-menu .footer-menu-list > a,
body.home .footer-brand :is(p, .eyebrow),
body.home .footer-legal,
body.home .footer-legal > a { color: #DBEAF5; }
body.home .footer-menu .footer-menu-list > a:hover,
body.home .footer-legal > a:hover { color: #FFFFFF; }
body.home .footer-legal { border-top-color: rgba(255, 255, 255, .18); }

@media (max-width: 600px) {
  body.home .why-card { padding: 24px 20px; }
  body.home .case-card-meta { margin: 18px 20px 0; }
  body.home .case-card h3 { margin-inline: 20px; }
  body.home .collection-caption { padding: 20px; }
  body.home .hero-action-primary { font-size: 14px; }
  body.home .footer-menu .footer-menu-list > button[data-enquiry] { font-size: 14px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home [data-enquiry],
  body.home #enquiry-dialog .quote-submit { transition: none; }
}
