:root {
  --green: #72aa4a;
  --lime: #72aa4a;
  --forest: #0a0a0a;
  --ink: #000;
  --paper: #fff;
  --line: rgba(0, 0, 0, .16);
  --shell: 1640px;
  --pad: clamp(22px, 5vw, 84px);
  --radius: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Gordita", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 11px 16px; color: #fff; background: #111; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.detail-shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--pad); }
main { padding-top: 119px; }

/* Navigation */
.detail-header { position: fixed; inset: 0 0 auto; z-index: 50; color: #323232; background: rgba(255,255,255,.95); box-shadow: 0 2px 12px rgba(164,168,192,.12); backdrop-filter: blur(16px); transition: transform .3s cubic-bezier(.65,0,.35,1); }
.detail-header.is-hidden { transform: translateY(-100%); transition-delay: .15s; }
.detail-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 119px; gap: 40px; }
.detail-brand { display: block; width: clamp(230px, 27vw, 485px); padding: 0; }
.detail-brand img { width: 100%; height: auto; }
.detail-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; }
.detail-nav > a, .detail-nav__group > a { position: relative; display: block; padding: 49px 0; }
.detail-nav > a::after, .detail-nav__group > a::after { content: ""; position: absolute; right: 0; bottom: 42px; left: 0; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .3s, opacity .3s; }
.detail-nav > a:hover::after, .detail-nav__group > a:hover::after, .detail-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.detail-nav a[aria-current="page"] { color: #73a94a; }
.detail-nav__group { position: relative; }
.detail-nav__chevron { display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
.detail-nav__group:hover .detail-nav__chevron { transform: translateY(3px) rotate(225deg); }
.detail-submenu { position: absolute; top: 96px; left: 50%; display: grid; width: 415px; padding: 30px; color: var(--ink); background: #fff; border-radius: 20px; box-shadow: 0 1px 6px rgba(34,190,13,.6); opacity: 0; transform: translate(-50%, -8px); visibility: hidden; transition: .35s cubic-bezier(.645,.045,.355,1); }
.detail-submenu a { padding: 7px 0; font-size: 15px; line-height: 18px; }
.detail-submenu a:hover { color: #73a94a; }
.detail-nav__group:hover .detail-submenu, .detail-nav__group:focus-within .detail-submenu { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
.detail-menu-toggle { display: none; width: 30px; height: 25px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.detail-menu-toggle span:not(.sr-only) { position: absolute; left: 0; display: block; width: 30px; height: 2px; margin: 0; background: #111; transition: transform .25s, opacity .25s; }
.detail-menu-toggle span:nth-of-type(2) { top: 2px; }.detail-menu-toggle span:nth-of-type(3) { top: 11px; }.detail-menu-toggle span:nth-of-type(4) { top: 20px; }

/* Hero */
.detail-hero { position: relative; min-height: max(680px, calc(100svh - 119px)); overflow: hidden; color: #fff; background: #050505; isolation: isolate; }
.detail-hero__media, .detail-hero__veil { position: absolute; inset: 0; }
.detail-hero__media { inset: -9% 0; transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.03); will-change: transform; }
.detail-hero__media img, .detail-hero__media video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); }
.detail-hero__veil { z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.33) 64%, rgba(0,0,0,.5)); }
/* 19.7 client PDFs: solution heroes drop the imagery for a plain black
   backdrop. The heading tiers keep the sitewide format (small green Space
   Grotesk eyebrow, large white Helvetica title, Gordita sub text), and the
   hero compacts now there is no image to frame. */
.detail-page--solution .detail-hero { min-height: 0; background: #000; }
.detail-page--solution .detail-hero__content { align-items: flex-start; min-height: 0; padding-top: clamp(64px, 8vh, 110px); padding-bottom: clamp(56px, 7vh, 96px); }
.detail-hero__content { position: relative; z-index: 3; display: flex; align-items: flex-end; min-height: max(680px, calc(100svh - 119px)); padding-top: 140px; padding-bottom: clamp(68px, 9vh, 122px); }
.detail-hero__copy { width: min(100%, 1190px); }
/* Sized to match the home hero eyebrow. The small optical inset compensates
   for Space Grotesk's uppercase side bearing so it aligns with the H1 ink. */
.detail-hero__eyebrow { margin: 0 0 20px; padding-inline-start: clamp(1px, .2vw, .25em); color: var(--lime); font-family: "Space Grotesk", sans-serif; font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.detail-hero h1 { max-width: 1180px; margin: 0; font-family: "HelveticaW01", Helvetica, Arial, sans-serif; font-size: clamp(52px, 5.5vw, 88px); font-weight: 300; letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
.detail-hero__strapline { max-width: 730px; margin: 35px 0; color: rgba(255,255,255,.8); font-size: clamp(18px, 1.65vw, 26px); line-height: 1.45; }
.detail-action { display: inline-flex; align-items: center; padding: 15px 0; transition: color .2s, gap .2s; }
.detail-action:hover { color: var(--lime); }
.detail-action span { margin-left: 10px; transition: transform .2s; }.detail-action:hover span { transform: translate(4px, 4px); }

/* Progress rail */
.section-progress { position: fixed; top: 50%; left: 20px; z-index: 35; display: grid; gap: 12px; transform: translateY(-50%); mix-blend-mode: difference; }
.section-progress__line { position: absolute; top: 7px; bottom: 7px; left: 3px; width: 1px; background: rgba(255,255,255,.35); }
.section-progress__line i { display: block; width: 1px; height: var(--page-progress, 0%); background: #fff; }
.section-progress a { position: relative; z-index: 1; display: grid; place-items: center; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: #111; }
.section-progress a.is-active { background: #fff; transform: scale(1.45); }

/* Shared section system */
.detail-section { position: relative; padding-block: clamp(64px, 7vw, 110px); overflow: clip; }
.detail-section__heading { max-width: 1120px; margin-bottom: clamp(36px, 5vw, 68px); }
.detail-section h2, .detail-cta h2 { margin: 0; font-family: "HelveticaW01", Helvetica, Arial, sans-serif; font-size: clamp(44px, 4.3vw, 69px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }

.detail-overview { color: #fff; background: #0a0a0a; }
.detail-overview--black { background: #000; }
.detail-overview__layout { display: grid; grid-template-columns: minmax(380px,1fr) minmax(270px,.72fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.detail-overview__layout--text { grid-template-columns: minmax(0,900px); align-items: start; }
.detail-overview__layout--text .detail-overview__copy { max-width: 900px; }
.detail-overview__layout--wide { grid-template-columns: minmax(0, 900px); align-items: start; }
.detail-overview__layout--wide .detail-overview__copy { max-width: 900px; }
.detail-overview__layout--wide .detail-media-card { grid-column: 1 / -1; width: 100%; margin-top: clamp(10px, 2vw, 28px); }
.detail-overview__copy h2 { margin-bottom: 36px; }
.detail-overview__copy p { margin: 0; color: rgba(255, 255, 255, .75); font-size: clamp(17px, 1.34vw, 21px); line-height: 1.7; }
.detail-overview__copy p + p { margin-top: 20px; }
.detail-media-card { position: relative; margin: 0; transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }
.detail-media-card img { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 35px 90px rgba(0, 0, 0, .28); }
.detail-media-card figcaption { display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: #595959; font-family: "Space Grotesk", sans-serif; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
/* 19.7 client feedback: the approval panel sits below the image (never
   over it, so the forklift stays visible), and the image column widens
   when a panel is present. */
.detail-media-card__overlay { padding: clamp(16px, 1.8vw, 24px); color: var(--ink); background: #fff; }
.detail-overview__layout--feature { grid-template-columns: minmax(360px, 1fr) minmax(320px, .95fr); }
.detail-media-card__overlay small { display: block; margin-bottom: 8px; color: #5c5c5c; font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.detail-media-card__overlay h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(22px, 1.9vw, 30px); font-weight: 400; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
.detail-media-card__overlay h3::after { content: ""; display: block; width: 58px; height: 3px; margin-top: 12px; background: var(--green); }
.detail-media-card__overlay p { margin: 14px 0 0; color: #222; font-size: 13px; line-height: 1.6; }

/* 19.7 client PDFs: white overview variant so light product imagery sits
   on a matching background (marine). */
.detail-overview--light { color: var(--ink); background: #fff; }
.detail-overview--light .detail-overview__copy p { color: #333; }
.detail-overview--light .detail-media-card img { box-shadow: 0 22px 60px rgba(0, 0, 0, .12); }

.detail-challenges { background: #fff; }
/* 18.7 notes: hairline lives on the cards (not the grid) so extra
   challenges can wrap onto further rows without breaking the ruling. */
.detail-challenges__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.detail-challenge { position: relative; min-height: 210px; padding: 28px 28px 42px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); overflow: hidden; }
.detail-challenge:last-child { border-right: 0; }
/* 18.7 notes: the numbering leads (Space Grotesk, well above the label),
   the label itself drops to Gordita. */
.detail-challenge > span { display: block; color: var(--green); font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 2.9vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.detail-challenge h3 { max-width: 265px; margin: 30px 0 0; font-family: "Gordita", Arial, sans-serif; font-size: clamp(20px, 1.7vw, 27px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }

.detail-system { color: #fff; background: var(--forest); }
.detail-system__layout { position: relative; display: grid; grid-template-columns: minmax(340px,.72fr) minmax(520px,1.28fr); gap: clamp(48px, 6vw, 110px); align-items: center; }
/* 18.7 notes: copy under the header reads white, list top-aligns with the heading. */
.detail-system__copy > p { max-width: 650px; margin: 26px 0 0; color: #fff; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.65; }
.system-configuration { align-self: start; padding-top: .35em; }
.system-configuration ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.28); }
.system-configuration li { display: grid; grid-template-columns: 52px 1fr; align-items: center; min-height: 60px; border-bottom: 1px solid rgba(255,255,255,.28); }
.system-configuration li span { color: var(--lime); font-family: "Space Grotesk", sans-serif; font-size: 16px; }
.system-configuration li strong { font-size: clamp(16px,1.25vw,20px); font-weight: 500; }

.detail-capabilities { background: #fff; }
.detail-capabilities__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid rgba(17,22,18,.17); background: rgba(17,22,18,.17); }
.detail-capabilities__grid--4 { grid-template-columns: repeat(2,1fr); }
.detail-capability { min-height: 212px; padding: clamp(22px, 2.2vw, 34px); background: #fff; }
.detail-capability > div { color: var(--green); font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 2.9vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.detail-capability h3 { margin: 26px 0 14px; font-family: "Gordita", Arial, sans-serif; font-size: clamp(20px, 1.7vw, 27px); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; }
.detail-capability p { margin: 0; color: #333; line-height: 1.65; }

.detail-outcomes { background: #fff; }
.detail-outcomes__inner article { max-width: 1000px; }
.detail-outcomes h2 { margin-bottom: 32px; }
.detail-outcomes ol, .detail-outcomes ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.detail-outcomes li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); }
.detail-outcomes li span { color: var(--green); font-family: "Space Grotesk", sans-serif; font-size: 16px; }
.detail-outcomes li strong { font-family: "Gordita", Arial, sans-serif; font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; line-height: 1.4; }

/* 18.7 notes: numbered rows lead with the numeral, so the counter column
   widens to match. The "Where it adds value" list uses ↗ glyphs, not
   numbers, so it keeps the original compact column. */
.detail-outcomes ol li { grid-template-columns: clamp(58px, 5vw, 86px) 1fr; min-height: 78px; }
.detail-outcomes ol li span { font-size: clamp(30px, 2.9vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }

/* 18.7 notes: Key benefits goes black so the closing sections alternate
   black / white down the page. */
.detail-outcomes--dark { color: #fff; background: var(--forest); }
.detail-outcomes .detail-action { margin-top: 26px; }
.detail-outcomes--dark li span { color: var(--lime); }
.detail-outcomes--dark li strong { font-size: clamp(20px, 1.7vw, 27px); }
.detail-outcomes--dark ol, .detail-outcomes--dark ul { border-top-color: rgba(255,255,255,.28); }
.detail-outcomes--dark li { border-bottom-color: rgba(255,255,255,.28); }

.detail-cta { position: relative; z-index: 10; padding-block: clamp(84px, 10vw, 155px); color: #fff; background: #0a0a0a; }
/* 19.7 feedback: no dead viewport between the last card and the closing
   sentence on solution pages — the final card hugs its content and the
   closing section pulls in tighter. */
.detail-page--solution .detail-stack > .detail-section:last-child { min-height: 0; }
.detail-page--solution .detail-cta { padding-block: clamp(24px, 3vw, 48px) clamp(84px, 10vw, 155px); }
.detail-cta__inner { display: block; }
.detail-cta h2 { max-width: 1120px; }
/* 18.7 notes: no rule under the link; it goes to the enquiries page.
   19.7 feedback: the arrow sits right after the text, not across a box. */
.detail-cta a { display: inline-flex; align-items: center; margin-top: 38px; padding: 18px 0; }.detail-cta a:hover { color: var(--lime); }
.detail-cta a span { margin-left: 10px; transition: transform .2s; }.detail-cta a:hover span { transform: translate(4px, -4px); }
.detail-cta .cta-word { display: inline-block; opacity: 0; transform: translateY(.55em); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--w) * 55ms); }
.detail-cta .reveal.is-visible .cta-word { opacity: 1; transform: none; }

/* Footer mirrors the captured-page footer's actual flex layout. Keeping the
   same gutters, child padding and shrink behaviour makes every column land
   at the same coordinate instead of approximating it with grid ratios. */
.detail-footer { color: #fff; background: #000; }
.detail-footer .detail-shell { display: flex; width: min(calc(100% - 20px), 1832px); padding: 106px 80px; }
.detail-footer__grid > * { flex: 0 1 auto; width: 100%; min-width: 0; padding: 10px; }
.detail-footer__grid > :nth-child(2) { padding-left: 5px; }
.detail-footer__brand img { width: 202px; height: auto; }

/* The home footer's G icon spins (17.7 notes, mobile-polish.css); without
   this the detail footer was the one static footer on the site. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gg-logo-spin {
    from { transform: perspective(600px) rotateY(0deg); }
    to { transform: perspective(600px) rotateY(360deg); }
  }
  .detail-footer__brand img { animation: gg-logo-spin 7s linear infinite; }
}
.detail-footer h2 { margin: 0 0 28px; color: #73A94A; font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 1px; line-height: 1; text-transform: uppercase; }
/* break-word so the enquiries address wraps inside its column instead of
   pushing the grid wider than the page on narrow screens; it only breaks
   when the word genuinely cannot fit, so desktop is unaffected. */
.detail-footer a { display: block; margin: 0 0 8px; font-size: 16px; line-height: 24px; overflow-wrap: break-word; }.detail-footer a:hover { color: #73A94A; }
.detail-footer p { margin: 0; font-size: 16px; line-height: 24px; }
.detail-footer__menu-row { display: flex; align-items: center; margin-bottom: 8px; }
.detail-footer__menu-row > a { display: inline-block; width: auto; margin: 0; }
.detail-footer__menu-row button { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 3px; padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; }
.detail-footer__chevron { display: block; width: 11px; height: 11px; transition: transform .3s ease; }
.detail-footer__chevron svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.detail-footer__menu-row button[aria-expanded="true"] .detail-footer__chevron { transform: rotate(180deg); }
.detail-footer__menu:is(:hover, .is-open) .detail-footer__menu-row > a,
.detail-footer__menu:is(:hover, .is-open) .detail-footer__menu-row > button { color: #73A94A; }
.detail-footer__submenu { display: grid; width: 286px; max-width: calc(100vw - 40px); max-height: 0; margin: 0; padding: 0 16px; border-radius: 10px; background: #787878; opacity: 0; overflow: hidden; visibility: hidden; transform: translateY(-4px) scaleY(.98); transform-origin: top; pointer-events: none; transition: max-height .3s ease, margin .3s ease, padding .3s ease, opacity .2s ease, transform .3s ease, visibility 0s linear .3s; }
.detail-footer__menu.is-open .detail-footer__submenu { max-height: 260px; margin: -2px 0 8px; padding: 10px 16px 7px; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.detail-footer__submenu a { margin: 0 0 7px; color: #fff; font-size: 15px; letter-spacing: -.5px; line-height: 1.3; }
.detail-footer__submenu a:last-child { margin-bottom: 4px; }
.detail-footer__submenu a:is(:hover, [aria-current="page"]) { color: #73A94A; }

/* Footer responsive steps track the home footer's own breakpoints
   (post-40.css) rather than the detail page's, so the two stay in step. */
@media (min-width: 1441px) and (max-width: 1599px) {
  .detail-footer__brand img { width: 160px; }
}
@media (max-width: 1440px) {
  .detail-footer .detail-shell { width: 100%; padding-block: 65px 80px; }
  .detail-footer__brand img { width: 130px; }
  .detail-footer h2 { margin-bottom: 20px; }
}
@media (max-width: 1199px) {
  .detail-footer__brand img { width: 110px; }
  .detail-footer h2 { font-size: 18px; }
  .detail-footer a, .detail-footer p { font-size: 15px; }
}
@media (max-width: 1024px) {
  .detail-footer .detail-shell { flex-wrap: wrap; padding: 50px 10px; }
  .detail-footer__grid > * { flex: 0 0 33.333%; }
  .detail-footer__grid > :nth-child(2) { padding-left: 10px; }
  .detail-footer__brand, .detail-footer__grid > :nth-child(2), .detail-footer__grid > :nth-child(3) { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .detail-footer__grid > * { flex-basis: 50%; padding: 0 10px; }
  .detail-footer__brand { order: 1; flex-basis: 100%; margin: 0; padding: 0 0 30px; text-align: center; }
  .detail-footer__brand img { margin-inline: auto; }
  .detail-footer__grid > :nth-child(2) { order: 2; }
  .detail-footer__grid > :nth-child(3) { order: 4; text-align: right; }
  .detail-footer__grid > :nth-child(4) { order: 3; }
  .detail-footer__grid > :nth-child(5) { order: 2; text-align: right; }
  .detail-footer h2 { margin-bottom: 15px; }
  .detail-footer__grid > :nth-child(3) h2, .detail-footer__grid > :nth-child(4) h2 { margin-top: 10px; }
  .detail-footer a, .detail-footer p { font-size: 14px; line-height: 21px; }
  .detail-footer__grid > :nth-child(2) a { font-size: 16px; line-height: 24px; }
  .detail-footer__grid > :nth-child(2) .detail-footer__submenu a { font-size: 14px; line-height: normal; }
  .detail-footer__grid > :nth-child(3) a:last-child, .detail-footer__grid > :nth-child(4) a:last-child { margin-bottom: 0; }
  .detail-footer__grid > :nth-child(5) a { margin-bottom: 14px; font-size: 12px; line-height: 18px; letter-spacing: -.1px; }
}

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 65ms); }.reveal.is-visible { opacity: 1; transform: none; }

/* Section stack — each card pins at the top, the next slides over it */
.detail-stack { position: relative; }
.detail-stack > .detail-section {
  position: sticky;
  /* Cards taller than the viewport pin with a negative top (set by
     detail-pages.js) so they scroll fully into view before the next card
     slides over — otherwise their lower content is never reachable. */
  top: var(--stack-top, 0px);
  z-index: var(--card, 1);
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(48px, 5vw, 76px);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .25);
}
.detail-stack > .detail-section:nth-child(1) { --card: 1; }
.detail-stack > .detail-section:nth-child(2) { --card: 2; }
.detail-stack > .detail-section:nth-child(3) { --card: 3; }
.detail-stack > .detail-section:nth-child(4) { --card: 4; }
.detail-stack > .detail-section:nth-child(5) { --card: 5; }
.detail-stack > .detail-challenges, .detail-stack > .detail-capabilities, .detail-stack > .detail-outcomes:not(.detail-outcomes--dark) { border-top: 1px solid rgba(0, 0, 0, .07); }

/* Keep stacking active at every viewport size. Reduced-motion is the only
   opt-out, so phones and tablets retain the same section handoff as desktop. */
@media (prefers-reduced-motion: reduce) {
  .detail-stack > .detail-section { position: static; display: block; min-height: 0; border-radius: 0; box-shadow: none; }
}

@media (max-width: 1180px) {
  .detail-overview__layout { grid-template-columns: 180px 1fr; }.detail-media-card { grid-column: 2; width: min(100%,540px); }
  .detail-overview__layout--feature .detail-media-card { width: min(100%, 640px); }
  .detail-system__layout { grid-template-columns: 1fr; }.system-configuration { width: min(100%,760px); }
  .detail-capabilities__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  :root { --pad: 24px; }
  main { padding-top: 60px; }
  .detail-page.is-menu-open .detail-header { height: 100svh; background: #fff; backdrop-filter: none; }
  .detail-header__inner { min-height: 60px; }
  .detail-brand { width: 160px; }
  .detail-menu-toggle { display: block; position: relative; z-index: 3; }
  .detail-page.is-menu-open .detail-menu-toggle { position: fixed; top: 17px; right: 24px; }
  .detail-menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(9px) rotate(45deg); }.detail-menu-toggle[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }.detail-menu-toggle[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-9px) rotate(-45deg); }
  .detail-nav { position: fixed; z-index: 2; inset: 0; display: block; padding: 92px 26px 35px; color: var(--ink); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }.detail-nav.is-open { transform: none; }
  .detail-nav > a, .detail-nav__group > a { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 20px; }.detail-nav a[aria-current="page"]::after { display: none; }
  .detail-submenu { position: static; width: 100%; padding: 5px 0 10px 16px; background: transparent; border: 0; box-shadow: none; opacity: 1; transform: none; visibility: visible; }.detail-submenu a { font-size: 12px; }
  .detail-hero h1 { font-size: clamp(44px,8vw,68px); }
  .section-progress { display: none; }
  .detail-overview__layout { grid-template-columns: 1fr; }.detail-media-card { grid-column: 1; width: 100%; margin-top: 15px; }.detail-media-card img { aspect-ratio: auto; }
  .detail-challenges__grid { grid-template-columns: repeat(2,1fr); }.detail-challenge:nth-child(2) { border-right: 0; }
}

@media (max-width: 620px) {
  .detail-hero, .detail-hero__content { min-height: calc(100svh - 60px); }.detail-hero__content { padding-top: 95px; padding-bottom: 58px; }.detail-hero h1 { font-size: clamp(36px,9.4vw,48px); line-height: 1.05; }.detail-hero__strapline { margin-block: 28px; font-size: 16px; }
  .detail-section { padding-block: 76px; }.detail-section h2, .detail-cta h2 { font-size: 42px; }.detail-overview__copy h2 { font-size: 40px; }
  .detail-challenges__grid { grid-template-columns: 1fr; }.detail-challenge, .detail-challenge:nth-child(2) { min-height: 185px; border-right: 0; }.detail-challenge h3 { margin-top: 45px; }
  .system-configuration li { grid-template-columns: 42px 1fr; min-height: 62px; }
  .detail-capabilities__grid { grid-template-columns: 1fr; }.detail-capability { min-height: 200px; }.detail-capability h3 { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }.detail-hero__media,.detail-media-card { transform: none !important; }
}