/* Shared finish: original brand type, white surfaces, navy and green. */
:root {
  --ease-finish: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 220ms;
  --motion-soft: 460ms;
  --radius-control: 10px;
  --radius-card: 20px;
  --radius-feature: 24px;
  /* Brand green is layered over navy to keep white button labels legible. */
  --button-fill: linear-gradient(110deg, var(--navy) 0%, #20b36599 100%);
  --button-fill-hover: linear-gradient(110deg, var(--navy) 0%, #20b365a3 100%);
  --shadow-rest: 0 2px 5px #042f5f03, 0 16px 48px -24px #042f5f21;
  --shadow-raised: 0 3px 8px #042f5f06, 0 24px 56px -24px #042f5f30;
  --line: #042f5f26;
}
body { font-kerning: normal; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .mega-title, .management-statement { text-wrap: balance; }
p { text-wrap: pretty; }
h1, h2 { letter-spacing: -.03em; }
.eyebrow { letter-spacing: .14em; }
.section { padding-block: clamp(64px, 7.5vw, 104px); }
.section-heading { margin-bottom: clamp(32px, 3.5vw, 48px); }
.products-page { padding-top: 16px; }
.hero h1 { line-height: 1.09; }
.hero-description { line-height: 1.75; }
.page-hero > p:last-child { max-width: 660px; }

/* A light floating header with a quiet, legible white surface. */
.site-header {
  border-color: #ffffffc9;
  box-shadow: 0 2px 6px #042f5f04, 0 12px 36px -20px #042f5f2b;
  transition: box-shadow var(--motion-soft) var(--ease-finish), border-color var(--motion-soft);
}
.site-header.is-scrolled { border-color: #042f5f26; box-shadow: 0 4px 8px #042f5f04, 0 16px 44px -20px #042f5f33; }
@supports (backdrop-filter: blur(20px)) {
  .site-header { background: #fffffff5; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
.mega-menu { border-radius: var(--radius-card); box-shadow: 0 4px 10px #042f5f05, 0 24px 64px -20px #042f5f33; }
.nav-disclosure[open] > .mega-menu { animation: finish-menu-in var(--motion-soft) var(--ease-finish) both; }
.nav-disclosure > summary, .desktop-nav > a { transition: border-color var(--motion-fast), color var(--motion-fast); }
.desktop-nav .mega-link, .desktop-nav .company-menu a { transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.desktop-nav .mega-link:hover, .desktop-nav .company-menu a:hover { box-shadow: 0 3px 12px #042f5f06; }
.nav-chevron { transition: transform var(--motion-soft) var(--ease-finish); }

.button, .menu-toggle, .motion-replay {
  background: var(--button-fill), var(--navy);
  color: var(--white);
}
:is(.button, .menu-toggle, .motion-replay):hover:not(:disabled) {
  background-image: var(--button-fill-hover);
}
.button {
  border-radius: var(--radius-control);
  min-height: 52px;
  padding: 13px 26px;
  transition: transform var(--motion-soft) var(--ease-finish), box-shadow var(--motion-soft) var(--ease-finish), border-color var(--motion-fast), background-color var(--motion-fast);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px #042f5f09, 0 14px 28px -10px #042f5f2b; }
.button:active { transform: translateY(0); box-shadow: 0 2px 5px #042f5f12; }
.button svg, .text-link svg, .people-links svg { transition: transform var(--motion-soft) var(--ease-finish); }
.button:hover svg { transform: translateX(3px); }
.header-cta { min-height: 44px; padding: 10px 22px; }
.menu-toggle { border-radius: var(--radius-control); }
.text-link { text-decoration-thickness: 1px; text-underline-offset: 6px; }

.brand-reveal-scene { border-radius: var(--radius-feature); box-shadow: 0 4px 12px #042f5f08, 0 28px 64px -24px #042f5f55; }
.hero-surface .brand-reveal-caption { margin-top: 20px; }
.service-explorer, .timeline, .enquiry-panel { border-radius: var(--radius-card); box-shadow: var(--shadow-rest); }
.service-card, .product-card, .principles-grid article, .management-card { border-radius: var(--radius-card); }
.spotlight-card, .management-card { box-shadow: var(--shadow-rest); }
.spotlight-card, .service-card, .product-card {
  transition: border-color var(--motion-soft), box-shadow var(--motion-soft) var(--ease-finish), transform var(--motion-soft) var(--ease-finish);
}
.spotlight-card:hover, .spotlight-card:focus-within, .service-card:hover { box-shadow: var(--shadow-raised); border-color: var(--navy); }
.service-card:hover { transform: translateY(-3px); }
.service-icon { border-radius: var(--radius-control); }
.service-tabs a, .stage-tabs a { border-radius: var(--radius-control); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.service-tabs a[aria-selected=true], .stage-tabs a[aria-selected=true] { background: var(--button-fill), var(--navy); box-shadow: 0 5px 12px -6px #042f5f55; }
.is-enhanced .tab-panel:not([hidden]) { animation: finish-panel-in var(--motion-soft) var(--ease-finish) both; }
.principles { background: linear-gradient(125deg, var(--navy) 0%, var(--navy) 64%, #20b36533 100%), var(--navy); }
.principles-grid article { padding: 30px 32px; border-color: #ffffff24; background: #ffffff08; }
.principles-grid p { line-height: 1.7; }
.cta { border-radius: var(--radius-feature); box-shadow: var(--shadow-rest); padding-block: clamp(48px, 6vw, 76px); }
.people-story { padding-top: 24px; }
.people-photo, .company-photo img { box-shadow: var(--shadow-rest); }
.photo-caption { box-shadow: 0 8px 32px -12px #042f5f26; }
.photo-caption, .field input, .field textarea, .field select { border-radius: var(--radius-control); }
.field input, .field textarea, .field select { min-height: 48px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--navy); }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 4px #042f5f08; }
.faq-item summary { transition: color var(--motion-fast); }
.faq-item summary:hover { color: var(--navy); }
.faq-item[open] .faq-answer { animation: finish-panel-in var(--motion-soft) var(--ease-finish) both; }

/* Fade at the edge of both uninterrupted logo loops. */
.carousel-ready .logo-track {
  mask-image: linear-gradient(to right, transparent, #fff 24px, #fff calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #fff 24px, #fff calc(100% - 24px), transparent);
}
.logo-track:focus-within { mask-image: none; -webkit-mask-image: none; }
.partner-logo { transition: transform var(--motion-soft) var(--ease-finish); }
.footer-links a, .footer-enquiry > a { transition: color var(--motion-fast), text-decoration-color var(--motion-fast); }
.finish-reveal { animation: finish-section-in 700ms var(--ease-finish) both; }
@keyframes finish-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes finish-panel-in { from { opacity: 1; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes finish-section-in { from { opacity: 1; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 901px) {
  .hero { gap: 44px; padding-block: 80px 92px; }
  .hero-description { max-width: 480px; }
}
@media (max-width: 900px) {
  .principles-grid article { padding: 26px; }
}
@media (max-width: 600px) {
  :root { --radius-card: 16px; --radius-feature: 20px; }
  .section { padding-block: 56px; }
  .section-heading { margin-bottom: 30px; }
  .people-story { padding-top: 12px; }
  .products-page { padding-top: 0; }
  .button { min-height: 50px; }
  .hero .actions { gap: 18px; }
  .hero .actions .button { padding-inline: 18px; }
  .principles-grid article { padding: 22px 18px; }
  .principles-grid h3 { font-size: 21px; }
  .brand-reveal-scene { box-shadow: 0 12px 36px -18px #042f5f55; }
  .hero-surface .brand-reveal-caption { margin-top: 16px; }
  .cta-section { padding-block: 48px; }
  .carousel-ready .logo-track { mask-image: linear-gradient(to right, transparent, #fff 12px, #fff calc(100% - 12px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #fff 12px, #fff calc(100% - 12px), transparent); }
  .logo-track:focus-within { mask-image: none; -webkit-mask-image: none; }
}
@media (hover: none) {
  .button:hover, .service-card:hover, .product-card:hover, .partner-logo:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .finish-reveal, .nav-disclosure[open] > .mega-menu, .is-enhanced .tab-panel:not([hidden]), .faq-item[open] .faq-answer { animation: none; }
  .button:hover, .button:hover svg { transform: none; }
}