:root {
      --paper: #f5f5f7;
      --white: #ffffff;
      --ink: #1d1d1f;
      --dark: #1d1f23;
      --orange: #e54718;
      --orange-dark: #ca3b12;
      --muted: #6e6e73;
      --line: rgba(29, 29, 31, 0.16);
      --light-line: rgba(255, 255, 255, 0.2);
      --topbar-h: 28px;
      --header-row-h: 82px;
      /* What the rest of the page measures the header by: the full bar at the
         top of the page, the nav row alone once the orange strip has slid out. */
      --header-h: calc(var(--topbar-h) + var(--header-row-h));
      --gutter: clamp(24px, 5.6vw, 88px);
      --section: clamp(84px, 7vw, 112px);
      --max: 1500px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      /* One eyebrow scale for every kicker, section label and 01/02/03 number,
         taken from the hero eyebrow. Weight is 760 wherever these tokens are used. */
      --eyebrow-size: clamp(0.72rem, 0.9vw, 0.92rem);
      --eyebrow-tracking: 0.16em;
      /* Shared size for the section lede paragraphs. */
      --copy-size: 20px;
      /* Shared size for card, stage and tile headings. */
      --subheading-size: 40px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Any jump scrolls the orange strip away, so only the header row is left
       covering the top of the page. */
    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--header-row-h);
    }

    html,
    body {
      overflow-x: hidden;
      overflow-x: clip;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* Scroll lock while the mobile menu is open — on html, not body. html
       already carries overflow-x: clip, so html's overflow is the one that
       reaches the viewport; overflow: hidden on body would instead turn body
       into a scroll container of its own, and the sticky header would pin to
       body and scroll off the screen, taking the close button with it. */
    html:has(body.menu-open) {
      overflow: hidden;
    }

    img,
    video {
      display: block;
      width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      color: inherit;
      font: inherit;
    }

    h1,
    h2,
    h3,
    p,
    figure {
      margin-top: 0;
    }

    h1,
    h2,
    h3 {
      margin-bottom: 0;
      font-family: "Manrope", Arial, sans-serif;
    }

    h1,
    h2 {
      font-weight: 620;
      letter-spacing: -0.06em;
    }

    h3 {
      font-weight: 620;
      letter-spacing: -0.045em;
    }

    :focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }

    .shell {
      width: min(100%, var(--max));
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .mono {
      font-family: "Manrope", Arial, sans-serif;
      font-size: 16px;
      letter-spacing: -0.025em;
      line-height: 1.4;
    }

    .skip-link {
      position: fixed;
      z-index: 999;
      top: 12px;
      left: 12px;
      padding: 11px 16px;
      background: #fff;
      color: #111;
      transform: translateY(-160%);
      transition: transform 180ms ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    :root:has(.site-header.is-scrolled) {
      --header-h: var(--header-row-h);
    }

    /* The orange strip sits above the header in the normal flow and scrolls
       away with the page; the header is sticky, so it rides up behind the strip
       and pins at the top. Nothing fixed touches the top edge on load, which is
       what lets iOS Safari tint its status bar from the page background
       (#f5f5f7) instead of stretching the orange strip up into it — Safari 26+
       ignores theme-color and colours the bar from whatever fixed or sticky
       element meets the top edge. */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--header-row-h);
      border-bottom: 1px solid var(--line);
      /* Solid, not translucent: the live blur that used to sit behind it cost a
         full-width composite every frame, and without the blur a see-through bar
         just shows the hero video moving through it. */
      background: var(--paper);
      color: var(--ink);
      box-shadow: none;
      will-change: transform;
      transition: transform 300ms var(--ease), background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
    }

    .site-header.is-scrolled {
      border-bottom-color: var(--line);
      box-shadow: 0 10px 34px rgba(18, 18, 20, 0.1);
    }

    /* Listed after .is-scrolled so it wins when both are on. */
    .site-header.is-hidden {
      transform: translateY(-100%);
    }

    .header-topbar {
      height: var(--topbar-h);
      background: var(--orange-dark);
      color: #fff;
    }

    .header-topbar__inner {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: flex-end;
    }

    .header-topbar__phone {
      display: inline-flex;
      height: 100%;
      align-items: center;
      gap: 9px;
      color: #fff;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      transition: color 220ms ease;
    }

    .header-topbar__phone:hover,
    .header-topbar__phone:focus-visible {
      color: rgba(255, 255, 255, 0.72);
    }

    .header-topbar__phone i {
      font-size: 0.8em;
    }

    .header-inner {
      display: flex;
      height: var(--header-row-h);
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .brand {
      --brand-w: 148px;
      position: relative;
      z-index: 102;
      display: flex;
      width: var(--brand-w);
      flex: 0 0 auto;
      flex-direction: column;
      gap: 6px;
    }

    .brand-mark {
      width: 100%;
      height: auto;
    }

    /* The brand always carries a lowercase c, so it has to opt out of the
       uppercase transform the kickers apply. */
    .brandname {
      text-transform: none;
    }

    /* The new brand pack ships the wordmark on its own, so the tagline is live text.
       At 0.15em tracking this string measures 16.7x its font size, so deriving the
       size from --brand-w keeps the tagline flush with the mark at every breakpoint
       without per-breakpoint tuning. */
    .brand-tagline {
      color: currentColor;
      font-family: "Manrope", Arial, sans-serif;
      font-size: calc(var(--brand-w) / 16.7);
      font-weight: 600;
      letter-spacing: 0.15em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .desktop-nav {
      display: flex;
      margin-left: auto;
      align-items: center;
      gap: clamp(22px, 2.7vw, 42px);
    }

    .desktop-nav a {
      position: relative;
      font-family: "Manrope", Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.025em;
    }

    .desktop-nav a::after {
      position: absolute;
      right: 0;
      bottom: -8px;
      left: 0;
      height: 1px;
      background: currentColor;
      content: "";
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 250ms var(--ease);
    }

    .desktop-nav a:hover::after,
    .desktop-nav a:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .header-cta {
      display: inline-flex;
      min-height: 44px;
      padding: 13px 18px;
      align-items: center;
      justify-content: center;
      background: var(--orange);
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.025em;
      transition: background 220ms ease, color 220ms ease;
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      background: var(--orange-dark);
      color: #fff;
    }

    /* Three-line toggle. The bars fold into an X while the menu is open,
       keyed off aria-expanded so the icon can never disagree with the state
       screen readers hear. 44px square: the minimum touch target. The -10px
       margin lines the bars' right edge up with the gutter. */
    .menu-toggle {
      position: relative;
      z-index: 102;
      display: none;
      width: 44px;
      height: 44px;
      margin-right: -10px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
    }

    .menu-toggle__bars {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 16px;
      transform: translate(-50%, -50%);
    }

    .menu-toggle__bars span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      transition: transform 340ms var(--ease), opacity 220ms var(--ease);
    }

    .menu-toggle__bars span:nth-child(1) {
      top: 0;
    }

    .menu-toggle__bars span:nth-child(2) {
      top: 7px;
    }

    .menu-toggle__bars span:nth-child(3) {
      top: 14px;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .menu-toggle:focus-visible {
      outline: 2px solid var(--orange);
      outline-offset: -2px;
      border-radius: 10px;
    }

    .mobile-menu {
      display: none;
    }

    .hero {
      position: relative;
      min-height: calc(max(700px, 100svh) - var(--topbar-h) - var(--header-row-h));
      overflow: hidden;
      background: var(--dark);
      color: #fff;
      isolation: isolate;
    }

    .hero-video,
    .hero-shade {
      position: absolute;
      z-index: -2;
      inset: 0;
      height: 100%;
    }

    .hero-video {
      object-fit: cover;
      object-position: center;
      filter: saturate(0.72) contrast(1.04);
      transform: scale(1.04);
    }

    .hero-shade {
      z-index: -1;
      /* Light overall wash — the weight now comes from the curve below. A second
         layer fades the top of the frame, under the fixed header, to black. */
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 16%, transparent 32%),
        linear-gradient(90deg, rgba(18, 19, 21, 0.3), rgba(24, 25, 28, 0.2) 52%, rgba(38, 40, 44, 0.14), rgba(50, 53, 58, 0.12));
    }

    /* Curved C on each side, mirrored: an ellipse off the edge at mid height and
       one under the bottom corner. */
    .hero-shade::after {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(76% 116% at 6% 52%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.28) 44%, rgba(0, 0, 0, 0.1) 70%, transparent 88%),
        radial-gradient(74% 82% at 22% 106%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.2) 48%, transparent 80%),
        radial-gradient(76% 116% at 94% 52%, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.16) 44%, rgba(0, 0, 0, 0.06) 70%, transparent 88%),
        radial-gradient(74% 82% at 78% 106%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.12) 48%, transparent 80%);
      content: "";
      pointer-events: none;
    }

    /* The hero starts below the strip and the header rather than under them,
       so it is shorter by exactly their height and still ends at the fold. The
       fixed sum, not --header-h, which changes the moment the page scrolls. */
    .hero-inner {
      display: flex;
      min-height: calc(max(700px, 100svh) - var(--topbar-h) - var(--header-row-h));
      padding-top: 40px;
      padding-bottom: 40px;
      align-items: center;
    }

    .hero-content {
      width: min(100%, 1240px);
    }

    .hero h1 {
      max-width: 1240px;
      font-size: 70px;
      line-height: 0.89;
    }

    .hero-line {
      display: block;
      overflow: hidden;
      /* line-height is 0.89, so descenders sit below the line box and the mask
         used to shave ~8px off the "y" tails. The negative margin gives the
         glyphs room without changing the distance between the two lines. */
      padding-bottom: 0.22em;
      margin-bottom: -0.15em;
    }

    .hero-line>span {
      display: block;
    }

    .hero h1 em {
      color: var(--orange);
      font-style: normal;
    }

    .hero-copy {
      max-width: 920px;
      margin: 34px 0 0;
      color: rgba(255, 255, 255, 0.84);
      font-size: var(--copy-size);
      line-height: 1.68;
      letter-spacing: -0.025em;
    }

    .hero-actions {
      display: flex;
      margin-top: 38px;
      flex-wrap: wrap;
      gap: 16px;
    }

    .hero-button {
      display: inline-flex;
      min-height: 62px;
      padding: 17px 28px;
      border: 1px solid rgba(255, 255, 255, 0.88);
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.025em;
      transition: transform 230ms var(--ease), background 230ms ease, color 230ms ease, border-color 230ms ease;
    }

    .hero-button:hover,
    .hero-button:focus-visible {
      transform: translateY(-2px);
    }

    .hero-button--primary {
      border-color: var(--orange);
      background: var(--orange);
      color: #fff;
    }

    .hero-button--primary:hover,
    .hero-button--primary:focus-visible {
      border-color: #fff;
      background: #fff;
      color: var(--orange-dark);
    }

    .hero-button--secondary {
      background: transparent;
    }

    .hero-button--secondary:hover,
    .hero-button--secondary:focus-visible {
      background: #fff;
      color: var(--dark);
    }

    .chapter {
      padding-block: var(--section);
    }

    .chapter-kicker {
      margin-bottom: 22px;
      color: var(--orange);
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      text-transform: uppercase;
    }

    /* About Us Section */
    .about-us {
      background: var(--paper);
    }

    /* Full width, not the shared 1500px container — the media column has to
       reach the real viewport edge. The content column carries its own
       shell-matching inset instead. */
    .about-us__inner {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      gap: 36px;
    }

    @media (min-width: 992px) {
      .about-us__inner {
        grid-template-columns: 1fr 1fr;
        gap: clamp(24px, 3vw, 48px);
        /* Column bottoms line up: the media column runs to the same bottom as
           the description text, so the big image ends exactly level with it. */
        align-items: stretch;
        /* Matches .shell's own left inset so the copy lines up with every
           other section even past the point where the shared container stops
           touching the viewport edge. */
        padding-left: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));
      }
    }

    .about-visual {
      padding: 0 var(--gutter) 44px;
    }

    @media (min-width: 992px) {
      .about-visual {
        /* No right padding — the main image is meant to run out toward the
           viewport edge. Bottom padding mirrors the content column's, so the
           image's bottom edge lands exactly level with the description text. */
        display: flex;
        flex-direction: column;
        padding: var(--section) 0 var(--section) 0;
      }
    }

    /* One wrapper the whole composition is measured against. */
    .about-visual-frame {
      position: relative;
      aspect-ratio: 5 / 4;
      /* Shadows of the front photos fall outside this box. */
      overflow: visible;
    }

    @media (min-width: 992px) {
      .about-visual-frame {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 0;
      }
    }

    .about-main-image {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 30% center;
      /* Oversized on the left pair — clamped to half the box's own height, so
         the whole left edge reads as one continuous curve, pill-style. */
      border-radius: 999px 14px 14px 999px;
      display: block;
    }

    .about-us__content {
      padding: 44px var(--gutter);
    }

    @media (min-width: 992px) {
      .about-us__content {
        padding: var(--section) 0;
      }
    }

    .about-us__heading {
      font-size: clamp(3rem, 4.2vw, 50px);
      font-weight: 620;
      line-height: 1.08;
      letter-spacing: -0.055em;
      color: var(--ink);
      margin-bottom: 28px;
    }

    .highlight-orange {
      color: var(--orange);
    }

    .about-us__text p {
      color: var(--muted);
      font-size: 20px;
      line-height: 1.6;
      letter-spacing: -0.015em;
      margin-bottom: 20px;
    }

    .about-us__text p:last-child {
      margin-bottom: 0;
    }

    .business {
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      min-height: 0;
      background: #0a0b0d;
      color: #fff;
      text-align: center;
      /* Padding comes from .chapter (padding-block: var(--section)) so it stays
         symmetrical. The old shorthand here pinned the bottom to 64px, which left
         the block sitting high in the section. */
    }

    .business > .shell {
      position: relative;
      z-index: 1;
      /* Must not grow, or the flex centring would stretch it past the container. */
      flex: 0 1 auto;
    }

    .business h2 {
      color: #fff;
    }

    /* Words start dim and are brought up to full white one by one on scroll. */
    .business h2 .word {
      display: inline-block;
      color: #fff;
    }

    .applications h2 .word {
      display: inline-block;
    }

    .strengths h2 .word {
      display: inline-block;
    }

    .cpet-process-story__desktop-top h2 .word {
      display: inline-block;
    }

    /* Every heading that takes the ink fade needs its words as inline-block. */
    [data-ink-scroll-text] .word {
      display: inline-block;
    }

    .business h2,
    .applications h2,
    .why h2 {
      max-width: 1120px;
      margin-inline: auto;
      font-size: 50px;
      line-height: 0.95;
    }


    /* Small white eyebrow, so it reads a level below the orange chapter kicker. */
    .business-statements {
      display: grid;
      max-width: 1120px;
      margin: clamp(52px, 5vw, 76px) auto 0;
      gap: clamp(20px, 2.2vw, 32px);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }

    /* Three cards on the dark section: white, orange, white. */
    .business-statement {
      display: flex;
      padding: clamp(28px, 2.6vw, 40px);
      border-radius: 18px;
      flex-direction: column;
      background: var(--white);
      color: var(--ink);
    }

    /* Shared hover lift for the two statement cards and the four value cards.
       easeOutCubic, gentler than the page's --ease: that curve front-loads most
       of the movement, which reads as a snap on the way back down. This one
       decelerates to a stop in both directions, and the exit is the longer of the
       two so releasing the pointer glides rather than cuts. */
    .business-statement,
    .business-value {
      transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
      will-change: transform;
    }

    .business-statement:hover,
    .business-statement:focus-within,
    .business-value:hover,
    .business-value:focus-within {
      transform: scale(1.035);
      transition-duration: 380ms;
    }

    @media (prefers-reduced-motion: reduce) {
      .business-statement,
      .business-value {
        transition: none;
      }

      .business-statement:hover,
      .business-statement:focus-within,
      .business-value:hover,
      .business-value:focus-within {
        transform: none;
      }
    }

    /* --orange-dark, not --orange: white text on #e54718 is only 4.0:1 and the
       copy here is normal-size, which needs 4.5:1. #ca3b12 gives 5.1:1. */
    .business-statement:nth-child(2) {
      background: var(--orange-dark);
      color: #fff;
    }

    .business-statement__label {
      margin: 0 0 16px;
      /* Same reason: the eyebrow is small text on white. */
      color: var(--orange-dark);
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      text-transform: uppercase;
    }

    .business-statement:nth-child(2) .business-statement__label {
      color: #fff;
    }

    .business-statement__copy {
      margin: 0;
      color: var(--muted);
      font-size: var(--copy-size);
      line-height: 1.55;
      letter-spacing: -0.025em;
    }

    .business-statement:nth-child(2) .business-statement__copy {
      color: rgba(255, 255, 255, 0.92);
    }

    /* Core values — its own white section between the dark purpose chapter and
       the production photograph. */
    .values {
      background: var(--white);
      color: var(--ink);
    }

    /* Full shell width — the cards read better wide, and it lines the grid up
       with the section's own gutters instead of an inner 1120px cap. */
    .values-inner {
      text-align: left;
    }

    .values .chapter-kicker {
      /* Small text on white, so the darker brand orange. */
      color: var(--orange-dark);
    }

    .values h2 {
      margin: 0 0 clamp(34px, 3.4vw, 54px);
      font-size: 50px;
      line-height: 0.95;
    }

    .business-values__list {
      display: grid;
      margin: 0;
      padding: 0;
      gap: clamp(16px, 1.6vw, 24px);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      list-style: none;
    }

    .business-value {
      display: flex;
      padding: clamp(22px, 2vw, 30px);
      border-radius: 16px;
      flex-direction: column;
      /* align-items centres the icon tile on the cross axis of the column;
         text-align handles the title and the copy. */
      align-items: center;
      background: var(--orange-dark);
      color: #fff;
      text-align: center;
    }

    /* Icon box: a tinted tile carrying a thin-stroke SVG, same drawing style as
       the why-card icons so the page keeps one icon language. */
    .business-value__icon {
      display: grid;
      width: 52px;
      height: 52px;
      margin-bottom: 22px;
      border-radius: 14px;
      flex: 0 0 auto;
      place-items: center;
      /* Solid white chip with an orange glyph. A translucent white tile with a
         white glyph cannot separate the two — both are light, so the icon
         disappears. Inverting the pair is what makes it legible on orange. */
      background: var(--white);
      color: var(--orange-dark);
    }

    .business-value__icon svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.7;
    }

    .business-value__title {
      margin: 0 0 12px;
      color: #fff;
      font-size: 24px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .business-value p {
      margin: 0;
      color: rgba(255, 255, 255, 0.92);
      font-size: 17px;
      line-height: 1.6;
      letter-spacing: -0.02em;
    }

    /* Cards 2 and 4: #f7f7f7. It is only 1.06:1 against the white section, so the
       edge has to come from the hairline rather than the fill. */
    .business-value:nth-child(even) {
      border: 1px solid var(--line);
      background: #f7f7f7;
      color: var(--ink);
    }

    .business-value:nth-child(even) .business-value__title {
      color: var(--ink);
    }

    .business-value:nth-child(even) p {
      color: var(--muted);
    }

    /* Inverted chip on the light card — a white chip would vanish into #f7f7f7. */
    .business-value:nth-child(even) .business-value__icon {
      background: var(--orange-dark);
      color: #fff;
    }


    @media (max-width: 980px) {
      .business-values__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .business-values__list {
        grid-template-columns: 1fr;
      }
    }




    .production-visual {
      height: 100vh;
      height: 100svh;
      padding: 0;
      /* Shows around the frame while it scales up on scroll, so it stays dark
         and lets the photograph read as a lit object. */
      background: #0a0b0d;
    }

    .production-frame {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 0;
      background: #0a0b0d;
      will-change: transform;
    }

    .production-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .production-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      /* Kept light: just enough at the foot of the frame to hold the caption,
         with only a soft wash across the rest. */
      background:
        linear-gradient(90deg, rgba(10, 11, 13, 0.38) 0%, rgba(10, 11, 13, 0.24) 48%, rgba(10, 11, 13, 0.18) 100%),
        linear-gradient(180deg, rgba(10, 11, 13, 0.08) 0%, rgba(10, 11, 13, 0.04) 42%, rgba(10, 11, 13, 0.34) 100%);
      pointer-events: none;
    }

    .production-message {
      position: absolute;
      z-index: 1;
      right: clamp(28px, 5vw, 80px);
      bottom: clamp(32px, 5.2vw, 78px);
      left: clamp(28px, 5vw, 80px);
      color: #fff;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
    }

    .production-message h3 {
      /* Title case on one line. The font size is capped by the frame width so
         the line never wraps and never runs off the image. */
      max-width: none;
      font-size: min(var(--subheading-size), 3.9vw);
      line-height: 1.06;
      white-space: nowrap;
    }

    .production-message p {
      /* Carries the gap the orange rule used to hold open. */
      margin-top: clamp(18px, 2.4vw, 34px);
      font-size: clamp(0.66rem, 1.25vw, 1.15rem);
      font-weight: 600;
      letter-spacing: 0.24em;
      line-height: 1;
      text-transform: uppercase;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* Our Products — datasheet section. Deliberately the brightest panel on the
       page: it sits between the dark purpose section and the light-grey
       applications stage, and the spec table is the visual anchor rather than
       photography (only one unused product photo exists). */
    .products {
      background: var(--white);
      color: var(--ink);
    }

    .products-heading {
      margin-bottom: clamp(44px, 4.4vw, 68px);
      text-align: center;
    }

    .products-heading h2 {
      max-width: 1120px;
      margin-inline: auto;
      font-size: 50px;
      line-height: 0.95;
    }

    .products-layout {
      display: grid;
      gap: clamp(36px, 4vw, 72px);
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: stretch;
    }

    .products-name {
      margin: 0 0 20px;
      font-size: var(--subheading-size);
      letter-spacing: -0.04em;
      line-height: 1.05;
    }

    .products-copy {
      max-width: 56ch;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: var(--copy-size);
      line-height: 1.6;
      letter-spacing: -0.02em;
    }

    /* The table is the one element that cannot reflow, so on narrow screens it
       scrolls inside its own box instead of forcing the page sideways. */
    .products-spec-scroll {
      margin-top: clamp(28px, 2.6vw, 40px);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .products-spec {
      width: 100%;
      min-width: 420px;
      border-collapse: separate;
      border-spacing: 4px;
      font-size: clamp(0.9rem, 1.05vw, 1rem);
      text-align: center;
    }

    .products-spec thead th {
      padding: 15px 14px;
      background: var(--orange);
      color: #fff;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .products-spec tbody th {
      padding: 15px 14px;
      background: rgba(29, 29, 31, 0.06);
      color: var(--ink);
      font-weight: 620;
      text-align: center;
    }

    .products-spec tbody td {
      padding: 15px 14px;
      background: rgba(29, 29, 31, 0.035);
      color: var(--ink);
      font-weight: 500;
    }

    /* Raw flake in, packed pellets out — two equal frames stacked, so the pair
       always lines up with the height of the table block beside it. */
    .products-visual {
      display: grid;
      gap: 16px;
      grid-template-rows: 1fr 1fr;
      align-self: stretch;
      min-height: 0;
    }

    .products-shot {
      position: relative;
      margin: 0;
      overflow: hidden;
      min-height: 0;
      border-radius: 14px;
    }


    /* Taken out of flow so the photos' intrinsic height does not drive the row —
       the pair should follow the height of the text column, not set it. */
    .products-shot img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    @media (max-width: 980px) {
      /* minmax(0, 1fr), not 1fr: the table carries a min-width, and a plain 1fr
         track would size to it and push the whole column past the viewport. */
      .products-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-visual {
        grid-template-rows: auto;
      }

      .products-shot {
        aspect-ratio: 16 / 9;
      }

    }

    @media (max-width: 700px) {
      .products-heading h2 {
        font-size: clamp(2.35rem, 9.5vw, 50px);
      }

      .products-name {
        font-size: clamp(1.7rem, 7vw, var(--subheading-size));
      }
    }

    .applications {
      position: relative;
      overflow: clip;
      isolation: isolate;
      padding: 89.6px 0 203.6px;
      background-color: #dbdbdd;
      background-image:
        linear-gradient(90deg, #dbdbdd 0%, rgba(219, 219, 221, 0) 11%, rgba(219, 219, 221, 0) 89%, #dbdbdd 100%),
        url("../assets/images/application.png");
      background-position: center, center bottom;
      background-size: 1500px 903px, 1500px 903px;
      background-repeat: no-repeat;
      color: var(--ink);
      text-align: center;
    }

    .applications .chapter-kicker {
      color: var(--orange);
      font-size: 11.52px;
    }

    .applications .shell {
      display: flex;
      width: 1500px;
      max-width: none;
      margin: 0 0 0 calc(50% - 750px);
      padding-inline: 85px;
      flex-direction: column;
    }

    .orbit-stage {
      position: relative;
      width: 100%;
      height: 355.8px;
      margin-top: 60.7px;
    }

    .orbit-carousel {
      position: absolute;
      inset: 0;
      perspective: 1186px;
      perspective-origin: 50% 46%;
      transform-style: preserve-3d;
    }

    .orbit-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 470.6px;
      height: 296.5px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 33.2px;
      background: rgba(32, 33, 36, 0.48);
      color: #fff;
      backface-visibility: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
      filter: drop-shadow(0 24px 24px rgba(15, 17, 20, 0.24));
      transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease), filter 500ms var(--ease);
      will-change: transform;
    }

    .orbit-card img {
      position: absolute;
      inset: 0;
      height: 100%;
      object-fit: cover;
      filter: brightness(1.1) contrast(1.02);
      transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 500ms var(--ease);
    }

    .orbit-card:not(.is-orbit-center) img {
      filter: brightness(0.9) contrast(1.04) saturate(0.78);
    }

    .orbit-card.is-orbit-center {
      border-color: rgba(255, 255, 255, 0.62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
      filter: drop-shadow(0 30px 28px rgba(15, 17, 20, 0.32));
    }

    .orbit-reflection {
      border-color: transparent;
      box-shadow: none;
      filter: none;
      -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.22) 76%, rgba(0, 0, 0, 0.7) 100%);
      mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.22) 76%, rgba(0, 0, 0, 0.7) 100%);
      pointer-events: none;
    }

    .orbit-reflection img {
      filter: blur(6px) brightness(0.86) contrast(0.9) saturate(0.62);
      transform: scale(1.025);
    }

    .orbit-reflection .application-card__content {
      filter: blur(4px);
      opacity: 0.42;
    }

    .orbit-reflection::after {
      box-shadow: none;
    }

    .orbit-card.is-orbit-center:hover img {
      transform: scale(1.06);
    }

    .orbit-card::after {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.015) 32%, transparent 55%),
        linear-gradient(0deg, rgba(7, 9, 12, 0.78) 0%, rgba(7, 9, 12, 0.54) 40%, rgba(7, 9, 12, 0.16) 72%, rgba(7, 9, 12, 0.02) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      content: "";
    }

    .orbit-nav {
      position: absolute;
      z-index: 90;
      top: 50%;
      display: grid;
      width: 61.7px;
      height: 61.7px;
      place-items: center;
      border: 1px solid rgba(20, 22, 25, 0.14);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-50%) scale(0.9);
      transition: opacity 700ms var(--ease), transform 700ms var(--ease), background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
    }

    .orbit-stage.orbit-nav-ready.orbit-in-view .orbit-nav {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
    }

    .orbit-nav svg {
      width: 26.1px;
      height: 26.1px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .orbit-nav--prev {
      left: calc(50% - var(--orbit-radius, 0px) - var(--orbit-card-edge, 150px));
    }

    .orbit-nav--next {
      right: calc(50% - var(--orbit-radius, 0px) - var(--orbit-card-edge, 150px));
    }

    .orbit-nav:hover,
    .orbit-nav:focus-visible {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
      box-shadow: 0 12px 28px rgba(15, 17, 20, 0.24);
    }

    .orbit-nav {
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 14px 32px rgba(15, 17, 20, 0.14);
    }

    .application-card__content {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      padding: 41px;
      text-align: left;
    }


    .application-card h3 {
      max-width: 820px;
      margin: 0;
      font-size: 30px;
      line-height: 0.98;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
    }

    .strengths {
      overflow: clip;
      background: #fff;
      color: var(--ink);
    }


    .strengths-timeline__rail,






    .strengths-step.is-active {
      color: var(--ink);
    }

    .strengths-step.is-active span {
      border-color: var(--orange);
      background: var(--orange);
      color: #fff;
      box-shadow: 0 0 0 7px rgba(232, 71, 25, 0.12);
    }





    .strengths-panel.is-active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .strengths-panel .chapter-kicker {
      margin-bottom: 26px;
    }






    @media (min-width: 981px) {
      .strengths.is-enhanced {
        min-height: 100svh;
      }
    }

    @media (max-width: 980px) {


      .strengths-timeline__rail,




    }

    .strengths {
      overflow: visible;
      background: #090a0c;
      color: #f5f5f3;
    }


    .strengths-heading {
      position: sticky;
      top: clamp(100px, 13vh, 138px);
      align-self: start;
    }

    .strengths-heading .chapter-kicker {
      color: var(--orange);
    }

    .strengths-heading h2 {
      margin: 0;
      color: #fff;
      font-size: 50px;
      letter-spacing: -0.055em;
      line-height: 0.86;
    }

    .strengths-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }

    .strength-card {
      position: relative;
      width: calc((100% - 36px) / 4);
      height: 370px;
      border-radius: 20px;
      perspective: 1200px;
      outline: none;
    }

    .strength-card__flip {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      transform-style: preserve-3d;
      transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform;
    }

    .strength-card:hover .strength-card__flip,
    .strength-card:focus .strength-card__flip {
      transform: rotateY(180deg);
    }

    .strength-card:focus-visible {
      outline: 2px solid var(--orange);
      outline-offset: 4px;
    }

    /* Each face is its own stacking context. Without one, the front's
       z-indexed copy stacks in the flipping parent instead, and Safari
       draws it as a separate plane that the face's backface-visibility
       does not reach: on a flipped card the number and title showed
       through, mirrored, on top of the back. */
    .strength-card__face {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: inherit;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      isolation: isolate;
    }

    .strength-card__front {
      color: #fff;
      background: #161719;
    }

    .strength-card__front::after {
      position: absolute;
      inset: 0;
      content: "";
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.12) 66%, transparent 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 30%, rgba(0, 0, 0, 0.9) 100%);
    }

    .strength-card__front img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .strength-card:hover .strength-card__front img,
    .strength-card:focus .strength-card__front img {
      transform: scale(1.04);
    }

    .strength-card__front-copy {
      position: absolute;
      z-index: 1;
      right: clamp(24px, 2.4vw, 34px);
      bottom: clamp(24px, 2.4vw, 34px);
      left: clamp(24px, 2.4vw, 34px);
    }

    .strength-card__front-copy > div {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .strength-card .strength-card__front-copy h3 {
      margin-top: 2px;
    }

    .strength-card__back {
      position: absolute;
      display: grid;
      box-sizing: border-box;
      padding: clamp(24px, 2.4vw, 34px);
      overflow: hidden;
      background: #161719;
      grid-template-rows: auto 126px 100px;
      transform: rotateY(180deg);
    }

    .strength-card__back::before,
    .strength-card__back::after {
      position: absolute;
      content: "";
      pointer-events: none;
    }

    .strength-card__back::before {
      z-index: 0;
      inset: -22px;
      background: var(--strength-image) center / cover no-repeat;
      filter: blur(15px) saturate(0.7);
      transform: scale(1.08);
    }

    .strength-card__back::after {
      z-index: 0;
      inset: 0;
      background: linear-gradient(145deg, rgba(22, 22, 24, 0.6), rgba(10, 10, 11, 0.8));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px) saturate(1.2);
      -webkit-backdrop-filter: blur(12px) saturate(1.2);
    }

    .strength-card__back > * {
      position: relative;
      z-index: 1;
    }

    .strength-card:nth-child(1) { --strength-image: url("../assets/images/Quality%20Consistency.jpg"); }
    .strength-card:nth-child(2) { --strength-image: url("../assets/images/Reliable%20Supply.jpg"); }
    .strength-card:nth-child(3) { --strength-image: url("../assets/images/Starlinger%20Technology.jpg"); }
    .strength-card:nth-child(4) { --strength-image: url("../assets/images/Strong%20Process%20Control.jpg?v=2"); }
    .strength-card:nth-child(5) { --strength-image: url("../assets/images/Customer-Focused%20Approach.jpg?v=2"); }
    .strength-card:nth-child(6) { --strength-image: url("../assets/images/Food-Grade%20Capability.jpg"); }
    .strength-card:nth-child(7) { --strength-image: url("../assets/images/Sustainability%20Commitment.jpg"); }

    .strength-card .strength-card__back h3 {
      color: #fff;
    }

    .strength-card .strength-card__back p {
      color: rgba(255, 255, 255, 0.78);
    }

    .strength-card__back {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 18px;
      grid-template-rows: auto auto;
    }

    .strength-card__back .strength-card__number {
      position: absolute;
      top: clamp(24px, 2.4vw, 34px);
      left: clamp(24px, 2.4vw, 34px);
    }

    .strength-card .strength-card__back h3,
    .strength-card .strength-card__back p {
      width: 100%;
      margin: 0;
      text-align: center;
    }

    .strength-card__number {
      color: var(--orange);
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
    }

    .strength-card h3 {
      max-width: 320px;
      margin: 30px 0 0;
      color: #fff;
      font-size: 30px;
      letter-spacing: -0.055em;
      line-height: 0.98;
    }

    .strength-card p {
      max-width: 360px;
      margin: 0;
      align-self: start;
      color: rgba(255, 255, 255, 0.65);
      font-size: 16px;
      line-height: 1.5;
    }

    @media (prefers-reduced-motion: reduce) {
      .strength-card__flip,
      .strength-card__front img {
        transition: none;
      }
    }

    @media (max-width: 980px) {

      .strengths-heading {
        position: static;
      }
    }

    @media (max-width: 600px) {
      .strengths-grid {
        grid-template-columns: 1fr;
      }

      .strength-card {
        min-height: 190px;
        height: 340px;
      }
    }

    .strengths-stack {
      display: grid;
      gap: clamp(48px, 5vw, 84px);
    }

    .strengths-stack .strengths-heading {
      position: static;
      text-align: center;
    }

    .strengths-stack .strengths-heading h2 {
      font-size: 50px;
    }

    .strengths-stack .strengths-grid {
      display: grid;
      grid-template-columns: repeat(24, minmax(0, 1fr));
      justify-content: stretch;
    }

    .strengths-stack .strength-card {
      width: auto;
      grid-column: span 6;
    }

    .strengths-stack .strength-card:nth-child(5) {
      grid-column: 4 / span 6;
    }

    @media (max-width: 980px) {
      .strengths-stack .strengths-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .strength-card {
        width: auto;
      }

      .strengths-stack .strength-card {
        grid-column: auto;
      }

      .strengths-stack .strength-card:nth-child(5) {
        grid-column: auto;
      }

    }

    @media (max-width: 600px) {
      .strengths-stack .strengths-heading h2 {
        font-size: clamp(2.7rem, 13vw, 50px);
      }

      .strengths-stack .strengths-grid {
        grid-template-columns: 1fr;
      }

      .strength-card h3 {
        font-size: 30px;
      }

      .strength-card p {
        font-size: 16px;
      }

      .strength-card {
        width: 100%;
      }
    }

    .why {
      position: relative;
      height: 100svh;
      min-height: 100svh;
      overflow: hidden;
      padding-block: 0;
      background: #e8e8ed;
      text-align: left;
      isolation: isolate;
    }

    .why::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      background: url("../assets/images/products-03.jpg") center / cover no-repeat;
      content: "";
      filter: grayscale(1);
      opacity: 0.045;
    }

    .why > .shell {
      display: flex;
      height: 100%;
      min-height: 100svh;
      align-items: center;
    }

    .why-layout {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(300px, 0.82fr) minmax(480px, 1.18fr);
      gap: clamp(56px, 8vw, 132px);
      align-items: center;
    }

    .why-heading {
      position: static;
    }

    .why-heading h2 {
      max-width: 450px;
      margin: 14px 0 0;
    }

    .why-heading__copy {
      max-width: 420px;
      margin: 24px 0 0;
      color: rgba(23, 25, 29, 0.68);
      font-size: 20px;
      letter-spacing: -0.02em;
      line-height: 1.5;
    }

    .why-grid {
      display: grid;
      margin: 0;
      grid-template-columns: 1fr;
      gap: 12px;
      text-align: left;
    }

    .why-card {
      position: relative;
      display: flex;
      height: 88px;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
      padding: 26px 32px 24px clamp(30px, 3vw, 42px);
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--ink);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 14px 32px rgba(31, 34, 38, 0.08);
      -webkit-backdrop-filter: blur(12px) saturate(1.12);
      backdrop-filter: blur(12px) saturate(1.12);
      interpolate-size: allow-keywords;
      transition: height 1150ms cubic-bezier(0.16, 1, 0.3, 1), padding 1050ms cubic-bezier(0.16, 1, 0.3, 1), background 850ms var(--ease), color 850ms var(--ease), box-shadow 850ms var(--ease);
      will-change: height, padding;
    }

    .why-card::before {
      position: absolute;
      z-index: 0;
      inset: 0;
      background: linear-gradient(145deg, rgba(82, 84, 89, 0.74), rgba(20, 21, 24, 0.96));
      content: "";
      opacity: 0;
      pointer-events: none;
      transition: opacity 1050ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .why-card > * {
      position: relative;
      z-index: 1;
    }

    .why-card.is-active {
      height: auto;
      padding: clamp(30px, 3vw, 42px);
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(25, 27, 30, 0.86);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 54px rgba(28, 31, 35, 0.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
    }

    .why-card.is-active::before {
      opacity: 1;
    }


    .why-card__icon {
      display: grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      color: var(--orange);
    }

    .why-card__icon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.7;
    }

    .application-number,
    .strength-number,
    .why-card__number {
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      line-height: 1.5;
    }

    .why-card h3 {
      min-height: 0;
      margin: 0;
      color: inherit;
      /* Kept on one line inside the 88px collapsed row, so the size has to track
         the card width — at a fixed 30px the longest title overflows and is
         clipped once the column drops below roughly 1050px. */
      font-size: clamp(24px, 2.5vw, 30px);
      line-height: 1;
      white-space: nowrap;
    }

    .why-card__body {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 40px;
    }

    /* Closed: icon and heading share one centred row. */
    .why-card:not(.is-active) .why-card__body {
      display: flex;
      min-height: 100%;
      align-items: center;
      gap: 40px;
    }

    .why-card:not(.is-active) .why-card__number,
    .why-card:not(.is-active) h3 {
      display: block;
      visibility: visible;
      opacity: 1;
    }

    /* Open: icon above the heading, heading above the copy. */
    .why-card.is-active .why-card__body {
      display: block;
      margin-top: 0;
    }

    .why-card.is-active .why-card__icon {
      display: block;
      margin-bottom: 40px;
    }

    .why-card.is-active h3 {
      margin: 0 0 40px;
    }

    /* The copy leaves the row the moment the card starts closing, so the heading
       drops straight back into its closed position instead of waiting out the
       fade — and the copy can never be squeezed in beside the nowrap heading. */
    .why.is-accordion .why-card:not(.is-active) p {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      margin: 0;
    }

    .why-card p {
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 13px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 650ms var(--ease), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .why-card.is-active p {
      color: rgba(255, 255, 255, 0.74);
      opacity: 1;
      transform: translateY(0);
    }

    .why-card.is-closing p {
      opacity: 0;
      transform: translateY(-8px) scale(0.96);
      transition-duration: 220ms;
      transition-delay: 0ms;
    }

    .why-card.is-active .why-card__body p:last-child {
      margin-bottom: 0;
    }

    .why-card.is-active p:nth-of-type(1) { transition-delay: 120ms; }
    .why-card.is-active p:nth-of-type(2) { transition-delay: 180ms; }
    .why-card.is-active p:nth-of-type(3) { transition-delay: 240ms; }

    /* Click target only exists while the accordion is on. */
    .why.is-accordion .why-card {
      cursor: pointer;
    }

    .why.is-accordion .why-card:focus-visible {
      outline: 2px solid var(--orange);
      outline-offset: 3px;
    }

    /* No collapsed row outside the accordion, so the body always stacks. Left as
       a flex row it squeezed the copy in beside the heading and clipped it. */
    .why:not(.is-accordion) .why-card__body {
      display: block;
    }



    .why:not(.is-accordion) .why-card {
      height: auto;
      min-height: 320px;
      padding: clamp(28px, 2.8vw, 42px);
      background: #fff;
    }

    .why:not(.is-accordion) .why-card__number {
      position: static;
    }

    .why:not(.is-accordion) .why-card h3 {
      margin: 48px 0 22px;
      /* No collapsed row here — the card grows, so wrapping beats clipping. */
      font-size: clamp(1.6rem, 6.4vw, var(--subheading-size));
      white-space: normal;
    }

    .why:not(.is-accordion) .why-card p {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .why-card,
      .why-card h3,
      .why-card p {
        transition: none;
      }
    }

    /* rPET process story — scoped so it does not alter the other Homepage sections. */
    .cpet-process-story {
      --process-orange: #dd491d;
      --process-dark: #000000;
      --process-header-height: 82px;
      background: var(--process-dark);
      color: #fff;
      overflow: visible;
    }

    .cpet-process-story__fallback {
      padding-block: var(--section);
    }

    .cpet-process-story__eyebrow,
    .cpet-process-story__number,
    .cpet-process-story__meta,
    .cpet-process-story__progress-number {
      margin: 0;
      color: var(--process-orange);
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      line-height: 1.5;
      text-transform: uppercase;
    }

    .cpet-process-story__intro {
      display: grid;
      gap: clamp(18px, 1.8vw, 26px);
      margin-bottom: clamp(44px, 5vw, 72px);
      text-align: center;
    }

    /* Fallback (non-pinned) version of the story — used on tablets and short
       viewports. The cards here grow freely, so this heading wraps rather than
       being held on one line and clipped. */
    .cpet-process-story__intro h2 {
      margin: 14px auto 0;
      color: #fff;
      font-size: clamp(2.4rem, 5vw, 50px);
      letter-spacing: -0.075em;
      line-height: 0.93;
    }

    .cpet-process-story__intro-copy {
      max-width: 100%;
      margin: 0 auto;
      color: #fff;
      font-size: var(--copy-size);
      line-height: 1.55;
    }

    .cpet-process-story__fallback-list {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cpet-process-story__fallback-step {
      display: grid;
      min-height: 335px;
      grid-template-rows: 176px 1fr;
      background: #292c31;
    }

    .cpet-process-story__fallback-image {
      position: relative;
      overflow: hidden;
    }

    .cpet-process-story__fallback-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
    }

    .cpet-process-story__fallback-body {
      padding: 22px 24px 26px;
    }

    .cpet-process-story__fallback-body h3 {
      margin: 18px 0 12px;
      font-size: var(--subheading-size);
      letter-spacing: -0.055em;
      line-height: 1.02;
    }

    /* The stage number is a <p> too, so exclude it or this outranks the shared
       eyebrow scale it is supposed to use. */
    .cpet-process-story__fallback-body p:not(.cpet-process-story__number),
    .cpet-process-story__fallback-body li {
      margin: 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: 16px;
      line-height: 1.5;
    }

    .cpet-process-story__fallback-body ul {
      display: grid;
      gap: 3px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cpet-process-story__desktop {
      display: none;
    }

    .cpet-process-story.is-enhanced .cpet-process-story__fallback {
      display: none;
    }

    .cpet-process-story.is-enhanced .cpet-process-story__desktop {
      display: block;
    }

    .cpet-process-story__pin {
      padding-block: var(--section);
    }

    .cpet-process-story__desktop-frame {
      display: grid;
      width: min(100%, var(--max));
      grid-template-rows: auto auto;
      gap: clamp(64px, 7vw, 96px);
    }

    .cpet-process-story__desktop-top {
      display: grid;
      gap: clamp(16px, 1.6vw, 24px);
      margin-bottom: 0;
      text-align: center;
    }

    .cpet-process-story__desktop-top h2 {
      margin: 13px auto 0;
      /* Held on one line, so the size has to track the frame. Full 50px above
         roughly 1000px wide, shrinking below that instead of being clipped. */
      font-size: clamp(38px, 5vw, 50px);
      letter-spacing: -0.075em;
      line-height: 0.94;
      white-space: nowrap;
    }

    .cpet-process-story__desktop-top p:last-child {
      margin: 0 auto;
      /* A full sentence, not a headline: it stays on one line while it fits and
         wraps below that. Forcing nowrap cut ~38px off the right at 1024px. */
      max-width: 100%;
      color: rgba(255, 255, 255, 0.68);
      font-size: var(--copy-size);
      line-height: 1.5;
    }

    .cpet-process-story__workbench {
      display: grid;
      grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
      gap: clamp(56px, 7vw, 104px);
      align-items: start;
    }

    /* Measured in JS. A stage box is shorter than the pinned visual, so without
       these insets the first stage sits above the visual's centre line and the
       last stage below it. Half the height difference at each end lines them up. */
    .cpet-process-story__steps {
      margin: 0;
      padding: var(--process-stage-inset-start, 0px) 0 var(--process-stage-inset-end, 0px);
      list-style: none;
    }

    .cpet-process-story__scroll-step {
      display: grid;
      min-height: clamp(420px, 58vh, 560px);
      padding: clamp(68px, 10vh, 104px) 0 clamp(68px, 10vh, 104px) clamp(28px, 3vw, 46px);
      border-left: 1px solid rgba(255, 255, 255, 0.15);
      grid-template-columns: 52px minmax(0, 1fr);
      align-content: center;
      opacity: 0.24;
      transition: opacity 420ms var(--ease), border-color 420ms var(--ease);
    }

    .cpet-process-story__scroll-step.is-active {
      border-left: 3px solid var(--process-orange);
      opacity: 1;
    }

    .cpet-process-story__scroll-number {
      margin: 4px 0 0;
      color: var(--process-orange);
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      line-height: 1.5;
    }

    .cpet-process-story__scroll-body h3 {
      margin: 0 0 18px;
      color: #fff;
      font-size: var(--subheading-size);
      letter-spacing: -0.075em;
      line-height: 0.95;
    }

    .cpet-process-story__scroll-body p,
    .cpet-process-story__scroll-body li {
      max-width: 440px;
      margin: 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: 16px;
      line-height: 1.55;
    }

    .cpet-process-story__scroll-body ul {
      display: grid;
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cpet-process-story__visual {
      position: sticky;
      /* The UA figure margin narrowed the frame and released the pin early. The block
         margins are now driven by JS to keep the first and last stage centred. */
      margin-block: var(--process-visual-lead, 0px) var(--process-visual-trail, 0px);
      margin-inline: 0;
      top: var(--process-visual-top, calc(var(--process-header-height) + 28px));
      /* The illustrations are 1448x1086 and several run their subject to the frame
         edge, so the frame carries their ratio and cover crops nothing. */
      aspect-ratio: 1448 / 1086;
      max-height: calc(100svh - var(--process-header-height) - 56px);
      overflow: hidden;
      background: transparent;
    }

    .cpet-process-story__visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.045);
      transition: opacity 520ms var(--ease), transform 780ms var(--ease);
      will-change: opacity, transform;
    }

    .cpet-process-story__visual img.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .cpet-process-story__visual-caption {
      position: absolute;
      z-index: 2;
      right: 18px;
      bottom: 16px;
      color: rgba(255, 255, 255, 0.72);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 0.62rem;
      font-weight: 760;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    /* Desktop cinematic process stage. The title remains above in normal flow;
       only this full-screen workbench is pinned while the eight stages advance. */
    .cpet-process-story__pin {
      padding-bottom: 0;
    }

    .cpet-process-story__desktop-frame {
      display: block;
      width: 100%;
      max-width: none;
      gap: 0;
      padding: 0;
    }

    .cpet-process-story__desktop-top {
      width: min(calc(100% - (var(--gutter) * 2)), var(--max));
      margin-inline: auto;
      padding-bottom: var(--section);
    }

    .cpet-process-story__workbench {
      --process-shell-edge: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter));
      position: relative;
      display: block;
      width: 100%;
      min-height: 100svh;
      overflow: hidden;
      background: #050506;
      isolation: isolate;
    }

    .cpet-process-story__steps {
      position: absolute;
      z-index: 3;
      inset: 0;
      width: min(55vw, 860px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cpet-process-story__scroll-step {
      position: absolute;
      inset: 0;
      display: flex;
      min-height: 0;
      padding: clamp(112px, 18vh, 190px) 4vw clamp(112px, 16vh, 166px) var(--process-shell-edge);
      border: 0;
      grid-template-columns: none;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(24px);
      transition: opacity 620ms var(--ease), transform 820ms var(--ease);
    }

    .cpet-process-story__scroll-step.is-active {
      border: 0;
      opacity: 1;
      transform: translateY(0);
    }

    .cpet-process-story__scroll-number {
      display: flex;
      margin: 0 0 clamp(34px, 4.5vh, 52px);
      align-items: center;
      gap: 18px;
    }

    .cpet-process-story__scroll-number::before {
      content: "STEP";
    }

    .cpet-process-story__scroll-number::after {
      width: 48px;
      height: 1px;
      background: var(--process-orange);
      content: "";
    }

    .cpet-process-story__scroll-body h3 {
      max-width: 720px;
      margin: 0 0 34px;
      font-size: 50px;
      font-weight: 430;
      letter-spacing: -0.065em;
      line-height: 0.94;
    }

    .cpet-process-story__scroll-body p,
    .cpet-process-story__scroll-body li {
      max-width: 590px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;
      line-height: 1.52;
    }

    .cpet-process-story__scroll-body ul {
      display: flex;
      max-width: 610px;
      gap: 8px 24px;
      flex-wrap: wrap;
    }

    .cpet-process-story__scroll-body li::before {
      margin-right: 9px;
      color: var(--process-orange);
      content: "•";
    }

    .cpet-process-story__visual {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      max-height: none;
      aspect-ratio: auto;
      margin: 0;
      background: #050506;
    }

    .cpet-process-story__visual::after {
      position: absolute;
      z-index: 1;
      inset: 0;
      background: linear-gradient(90deg, #050506 0%, #050506 18%, rgba(5, 5, 6, 0.96) 28%, rgba(5, 5, 6, 0.72) 40%, rgba(5, 5, 6, 0.38) 52%, rgba(5, 5, 6, 0.12) 64%, rgba(5, 5, 6, 0) 78%);
      content: "";
      pointer-events: none;
    }

    .cpet-process-story__visual img {
      inset: 0 0 0 auto;
      width: 100%;
      object-fit: contain;
      object-position: right center;
      filter: saturate(0.92) brightness(0.86) contrast(1.04);
      transform: scale(1.04);
      transition: opacity 720ms var(--ease), transform 1200ms var(--ease);
    }

    .cpet-process-story__visual-caption {
      display: none;
    }

    .cpet-process-story__progress {
      position: absolute;
      z-index: 4;
      right: var(--process-shell-edge);
      bottom: 46px;
      left: var(--process-shell-edge);
      height: 1px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.18);
    }

    .cpet-process-story__progress-fill {
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #ff3d22, #ff6a35);
      transform: scaleX(0.125);
      transform-origin: left center;
      will-change: transform;
    }

    .cpet-process-story__progress-count {
      position: absolute;
      z-index: 4;
      right: var(--process-shell-edge);
      bottom: 62px;
      display: flex;
      gap: 8px;
      margin: 0;
      color: rgba(255, 255, 255, 0.42);
      font-family: "Manrope", Arial, sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.15em;
    }

    .cpet-process-story__progress-count span:first-child {
      color: var(--process-orange);
    }

    .compliance {
      background: #fff;
      color: var(--ink);
    }

    .compliance-heading {
      margin-bottom: clamp(48px, 4.8vw, 68px);
      text-align: center;
    }

    .compliance-heading h2 {
      max-width: 980px;
      margin-inline: auto;
      font-size: 50px;
      line-height: 0.93;
    }

    .certification-marquee {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .certification-track {
      display: flex;
      width: max-content;
      animation: certification-loop 26s linear infinite;
      will-change: transform;
    }

    .certification-list {
      display: flex;
      flex: none;
      gap: 12px;
      padding-right: 12px;
    }

    .certification-mark {
      display: flex;
      width: clamp(190px, 19vw, 270px);
      min-height: 160px;
      padding: 18px 20px;
      border-radius: 0;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--ink);
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--subheading-size);
      font-weight: 620;
      letter-spacing: -0.04em;
      text-align: center;
    }

    .certification-mark img {
      display: block;
      width: 100%;
      max-width: 100%;
      max-height: 94px;
      object-fit: contain;
    }

    @keyframes certification-loop {
      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .certification-marquee {
        overflow-x: auto;
        mask-image: none;
      }

      .certification-track {
        animation: none;
      }
    }

    .contact {
      position: relative;
      overflow: hidden;
      padding-top: var(--section);
      padding-bottom: var(--section);
      background: var(--dark);
      color: #fff;
    }

    .contact-layout {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(48px, 6vw, 96px);
    }

    @media (min-width: 992px) {
      .contact-layout {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
      }

      .contact-main {
        transform: translateY(-10%);
      }
    }

    .contact-main {
      min-width: 0;
    }

    .contact-kicker {
      position: relative;
      z-index: 2;
      color: var(--orange);
      font-family: "Manrope", Arial, sans-serif;
      font-size: var(--eyebrow-size);
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      line-height: 1.5;
      text-transform: uppercase;
    }

    .contact-heading {
      position: relative;
      z-index: 2;
      max-width: 720px;
      margin: 20px 0 0;
      font-size: 50px;
      line-height: 0.86;
    }

    .contact-heading em {
      color: var(--orange);
      font-style: normal;
    }

    .contact-bottom {
      position: relative;
      z-index: 2;
      max-width: 560px;
      margin-top: 20px;
    }

    .contact-bottom p {
      max-width: 500px;
      margin: 0;
      color: rgba(255, 255, 255, 0.62);
      font-size: var(--copy-size);
      line-height: 1.55;
    }

    .contact-details {
      display: grid;
      gap: 20px;
      margin-top: 32px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 16px;
      font-style: normal;
      line-height: 1.5;
    }

    .contact-details__label {
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.62);
      font-size: 16px;
      font-weight: 760;
      letter-spacing: var(--eyebrow-tracking);
      line-height: 1;
      text-transform: uppercase;
    }

    .contact-details a {
      width: fit-content;
      color: #fff;
    }

    .contact-details__address {
      max-width: 590px;
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.72);
    }

    .contact-details a:hover,
    .contact-details a:focus-visible {
      color: var(--orange);
    }

    /* Inline enquiry form — dark glass card matching the contact section. */
    .contact-form {
      display: grid;
      gap: 14px;
      padding: clamp(20px, 2.2vw, 26px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.05);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      backdrop-filter: blur(16px) saturate(1.4);
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    }

    .contact-form .dialog-field label {
      color: rgba(255, 255, 255, 0.85);
    }

    .contact-form .dialog-field input,
    .contact-form .dialog-field select,
    .contact-form .dialog-field textarea {
      border-color: rgba(255, 255, 255, 0.16);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
    }

    .contact-form .dialog-field input:focus,
    .contact-form .dialog-field select:focus,
    .contact-form .dialog-field textarea:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 1px var(--orange);
    }

    .contact-form .dialog-field select option {
      color: var(--ink);
      background: #fff;
    }

    .dialog-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
    }

    .dialog-field {
      display: grid;
      gap: 8px;
    }

    .dialog-field--wide {
      grid-column: 1 / -1;
    }

    .dialog-field label {
      font-size: 16px;
      font-weight: 500;
    }

    .dialog-field input,
    .dialog-field select,
    .dialog-field textarea {
      width: 100%;
      min-height: 46px;
      padding: 10px 14px;
      border: 1px solid #bfc1c4;
      border-radius: 0;
      outline: none;
      background: #fff;
      color: var(--ink);
      font: inherit;
    }

    .dialog-field textarea {
      min-height: 96px;
      resize: vertical;
    }

    .dialog-field input:focus,
    .dialog-field select:focus,
    .dialog-field textarea:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 1px var(--orange);
    }

    .dialog-submit {
      width: 100%;
      min-height: 52px;
      margin-top: 14px;
      border: 1px solid var(--orange);
      background: var(--orange);
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.025em;
    }


    /* Contact redesign */
    .contact { position: relative; isolation: isolate; overflow: hidden; min-height: 0; padding: 96px 0; background: #000; color: #fff; }
    .contact-layout { gap: clamp(54px, 7vw, 132px); max-width: 1500px; min-height: 0; }
    /* Two columns only where there is room — this used to be unconditional, which
       squeezed the whole form into a 155px column on a phone. */
    @media (min-width: 992px) {
      .contact-layout { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; }
    }
    .contact-main { position: relative; min-width: 0; transform: none; }
    .contact-main::before { content: none; }
    .contact-heading { max-width: 640px; margin-top: 24px; font-size: 50px; font-weight: 620; letter-spacing: -.07em; line-height: .98; }
    .contact-bottom { max-width: 570px; margin-top: 28px; }
    .contact-bottom p { max-width: 530px; color: rgba(255, 255, 255, .7); font-size: clamp(18px, 1.35vw, 23px); line-height: 1.5; }
    .contact-details { gap: 14px; margin-top: 58px; }
    .contact-details__label { margin-bottom: 12px; color: var(--orange); }
    .contact-detail { display: flex; align-items: center; gap: 16px; min-height: 46px; color: rgba(255, 255, 255, .86); }
    .contact-detail i { display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 116, 55, .56); border-radius: 50%; color: var(--orange); background: rgba(9, 14, 24, .72); box-shadow: 0 0 18px rgba(255, 76, 13, .18), inset 0 0 12px rgba(255, 255, 255, .04); }
    .contact-details__address { max-width: 520px; margin-top: 8px; }
    .contact-form { gap: 14px; padding: clamp(22px, 1.7vw, 29px); border: 1px solid rgba(255, 255, 255, .5); border-radius: 30px; background: rgba(10, 11, 13, .12); -webkit-backdrop-filter: blur(30px) saturate(1.16) brightness(1.08); backdrop-filter: blur(30px) saturate(1.16) brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 0 48px rgba(255, 255, 255, .04), 0 34px 100px rgba(0, 0, 0, .45); }
    .contact-form .dialog-field input, .contact-form .dialog-field select, .contact-form .dialog-field textarea { border-color: rgba(255, 255, 255, .38); border-radius: 13px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
    .dialog-form-grid { gap: 14px 20px; }
    .dialog-field { gap: 7px; }
    .dialog-field label { font-size: 17px; font-weight: 560; }
    .dialog-field input, .dialog-field select, .dialog-field textarea { min-height: 48px; padding: 10px 16px; border-radius: 12px; }
    .dialog-field textarea { min-height: 90px; }
    .dialog-submit { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-top: 0; padding: 0 24px; border-radius: 10px; background: #f24c12; font-size: 16px; font-weight: 650; box-shadow: 0 0 26px rgba(255, 82, 16, .38); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
    .dialog-submit:hover, .dialog-submit:focus-visible { background: #ff6425; box-shadow: 0 0 40px rgba(255, 82, 16, .58); transform: translateY(-2px); }
    .dialog-submit i:first-child { width: 38px; padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .4); }
    .dialog-submit i:last-child { font-size: 19px; }

    .site-footer {
      height: 80px;
      padding: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
      background: var(--orange);
      color: #fff;
    }

    .footer-inner {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .footer-brand {
      --brand-w: 134px;
      display: flex;
      width: var(--brand-w);
      flex: 0 0 auto;
      flex-direction: column;
      gap: 5px;
      color: #fff;
      text-decoration: none;
    }

    .footer-logo {
      display: block;
      width: 100%;
      height: auto;
    }

    .footer-copyright {
      max-width: 760px;
      margin: 0;
      color: #fff;
      font-size: 0.84rem;
      line-height: 1.5;
      text-align: right;
    }

    /* The company number leads; the copyright and credit sit on the line
       below in fine print, 82% of the line above at every breakpoint and
       never under 11px. */
    .footer-copyright__legal {
      display: block;
      font-size: max(11px, 0.82em);
    }

    .footer-copyright a {
      color: inherit;
    }

    @media (max-width: 980px) {

      .desktop-nav,
      .header-cta {
        display: none;
      }

      .menu-toggle {
        display: block;
      }

      .mobile-menu {
        position: fixed;
        z-index: 101;
        inset: var(--menu-top, var(--header-h)) 0 0;
        display: flex;
        padding: 42px var(--gutter) 48px;
        flex-direction: column;
        justify-content: space-between;
        background: var(--paper);
        color: var(--ink);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-14px);
        transition: opacity 320ms var(--ease), transform 320ms var(--ease);
      }

      .mobile-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .mobile-menu nav {
        display: grid;
      }

      .mobile-menu nav a {
        display: flex;
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
        font-size: clamp(1.8rem, 6vw, 3.2rem);
        font-weight: 500;
        letter-spacing: -0.05em;
      }

      .mobile-menu>p {
        max-width: 390px;
        margin: 0;
        color: var(--muted);
      }


      .strengths-heading {
        position: static;
      }

      .certification-list {
        grid-template-columns: repeat(3, 1fr);
      }

      .why-grid {
        grid-template-columns: 1fr;
      }

      .why-card {
        min-height: 340px;
      }

      .why-card h3 {
        margin-top: 54px;
      }
    }

    @media (max-width: 900px) {
      .cpet-process-story.is-enhanced .cpet-process-story__desktop {
        display: none;
      }

      .cpet-process-story.is-enhanced .cpet-process-story__fallback {
        display: block;
      }

      .cpet-process-story__intro {
        gap: 22px;
      }

      .cpet-process-story__intro-copy {
        max-width: 560px;
      }

      .cpet-process-story__fallback-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .business-statements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 600px) {
      .business-statements {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      :root {
        --topbar-h: 24px;
        --header-row-h: 72px;
        --gutter: 22px;
        --section: 78px;
      }

      html {
        scroll-padding-top: var(--header-row-h);
      }

      .brand {
        --brand-w: 124px;
      }

      .footer-brand {
        --brand-w: 118px;
      }

      .header-topbar__phone {
        height: auto;
        padding-block: 10px;
        margin-block: -10px;
      }

      .mobile-menu {
        inset: var(--menu-top, var(--header-h)) 0 0;
      }

      .hero,
      .hero-inner {
        min-height: calc(max(700px, 100svh) - var(--topbar-h) - var(--header-row-h));
      }

      .hero-inner {
        padding-top: 28px;
        padding-bottom: 28px;
      }

      :root {
        --eyebrow-size: 0.63rem;
        --eyebrow-tracking: 0.14em;
      }

      .hero h1 {
        font-size: clamp(2.8rem, 12.5vw, 3.65rem);
        line-height: 0.94;
      }

      .hero-copy {
        margin-top: 26px;
        line-height: 1.58;
      }

      .hero-actions {
        margin-top: 30px;
        align-items: stretch;
        flex-direction: column;
      }

      .hero-button {
        width: 100%;
        min-height: 55px;
        padding-inline: 16px;
        font-size: 16px;
      }

      .business h2,
      .applications h2,
      .why h2 {
        font-size: 50px;
      }

      .values h2 {
        font-size: clamp(2.35rem, 9.5vw, 50px);
      }

      /* The applications section is a fixed 1500px stage for the orbit ring, so
         its heading has to be pulled back to the viewport or it is clipped at
         both ends on a phone. */
      .applications .chapter-kicker,
      .applications h2 {
        width: 100vw;
        max-width: 100vw;
        margin-inline: auto;
        padding-inline: var(--gutter);
      }

      .applications h2 {
        font-size: clamp(2rem, 8.5vw, 50px);
      }


      .production-visual {
        height: 100svh;
      }

      .production-frame {
        height: 100%;
        border-radius: 0;
      }

      .production-message {
        right: 20px;
        bottom: 22px;
        left: 20px;
      }

      /* One line would be ~10px here, so let it wrap to two on phones. */
      .production-message h3 {
        font-size: clamp(1.15rem, 5.5vw, 1.45rem);
        letter-spacing: -0.04em;
        white-space: normal;
      }

      .production-message p {
        margin-top: 20px;
        font-size: 0.55rem;
        letter-spacing: 0.18em;
      }

      .compliance-heading h2 {
        font-size: clamp(2.35rem, 9.5vw, 50px);
      }

      .orbit-card:first-child img {
        object-position: 18% center;
      }

      .orbit-card h3,
      .orbit-card:not(:first-child) h3 {
        font-size: 30px;
      }


      .strengths-heading h2 {
        font-size: clamp(2.35rem, 9.5vw, 50px);
      }


      .why-card {
        min-height: 320px;
        border-radius: 20px;
      }

      .why-card h3 {
        margin-top: 44px;
      }

      .cpet-process-story__intro h2 {
        font-size: clamp(2.4rem, 10vw, 50px);
      }

      .cpet-process-story__fallback-list {
        display: block;
        margin-left: 4px;
        padding: 0 0 0 20px;
        background: transparent;
        border-left: 1px solid rgba(221, 73, 29, 0.75);
      }

      .cpet-process-story__fallback-step {
        min-height: 0;
        grid-template-columns: 92px 1fr;
        grid-template-rows: none;
        gap: 18px;
        padding: 0 0 28px;
        background: transparent;
      }

      .cpet-process-story__fallback-step+.cpet-process-story__fallback-step {
        padding-top: 28px;
      }

      .cpet-process-story__fallback-image {
        min-height: 116px;
      }

      .cpet-process-story__fallback-body {
        padding: 0;
      }

      .cpet-process-story__fallback-body h3 {
        margin: 9px 0 10px;
        font-size: 1.34rem;
      }

      .cpet-process-story__fallback-body p:not(.cpet-process-story__number),
      .cpet-process-story__fallback-body li {
        font-size: 16px;
      }

      .certification-list {
        grid-template-columns: repeat(2, 1fr);
      }

      .certification-mark {
        min-height: 138px;
      }

      .certification-mark:last-child {
        grid-column: 1 / -1;
      }

      .contact-layout {
        min-height: 420px;
      }

      .contact-heading {
        max-width: 340px;
        margin-top: 20px;
        font-size: clamp(2.35rem, 9.5vw, 50px);
      }

      .contact-bottom {
        display: block;
        margin-top: 20px;
      }

      .contact-bottom p {
        margin-bottom: 0;
      }

      .dialog-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .dialog-field--wide {
        grid-column: auto;
      }

      .dialog-field textarea {
        min-height: 96px;
      }

      .site-footer {
        height: 70px;
      }

      .footer-inner {
        align-items: center;
        flex-direction: row;
        gap: 14px;
      }

      .footer-copyright {
        max-width: 220px;
        font-size: 0.56rem;
        line-height: 1.35;
        text-align: right;
      }
    }

    /* Why section overrides live after the global responsive rules. */
    @media (max-width: 980px) {
      .why-layout {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .why-heading {
        position: static;
      }

      .why-card {
        min-height: 0;
      }
    }

    @media (max-width: 600px) {
      .why-card {
        min-height: 0;
        padding: 28px 24px 24px 70px;
      }


      .why-card.is-active {
        height: 430px;
        padding: 30px 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }

      .strengths-heading {
        position: static;
      }
    }

    /* ─────────────────────────────────────────────────────────────────
       PHONES AND TABLETS ≤980px

       Phones and tablets share this block; the tablet-only differences
       (larger type base, two-column card grids, image heights) follow it in
       their own block. Three rules hold for everything here:

       1. One type scale. Every size derives from --m-base, so
          h1 : h2 : h3 : copy : small : kicker stays
          2.10 : 1.66 : 1.30 : 1.00 : 0.88 : 0.62 at every phone width.
       2. One axis. Content centres on the screen. The only exceptions
          are the header (logo left, menu right) and the contact-form
          fields, where centred label and input text reads as broken.
       3. One column. No side-by-side media, no 3D, no fixed section
          heights — every section is exactly as tall as its content.

       Selectors are scoped by section id on purpose. Older rules above
       reach sizes and alignment through class chains like
       .why:not(.is-accordion) .why-card h3, and clamp() floors such as
       1.7rem, which beat a 20px ceiling. One id outranks any number of
       classes, so these win without !important and without having to
       mirror each older selector.
       ───────────────────────────────────────────────────────────────── */
    @media (max-width: 980px) {
      :root {
        --m-base: clamp(14.5px, 4.1vw, 16.5px);   /* copy     ~15.4px */
        --m-h1: calc(var(--m-base) * 2.1);        /* hero     ~32.3px */
        --m-h2: calc(var(--m-base) * 1.66);       /* sections ~25.5px */
        --m-h3: calc(var(--m-base) * 1.3);        /* cards    ~20.0px */
        --m-small: calc(var(--m-base) * 0.88);    /* card copy ~13.5px */
        --m-kicker: calc(var(--m-base) * 0.62);   /* eyebrows  ~9.5px */
        /* Button labels: between small copy and the kicker, floored at 12px
           so a 320px phone still reads them comfortably. */
        --m-button: max(12px, calc(var(--m-base) * 0.82)); /* ~12.6px */
        --m-radius: 16px;

        /* Spacing — see §4. Targets are ink-to-ink; the seam tokens add
           the glyph-box offsets so the visible gap lands on the target. */
        --m-pad: 64px;
        --m-block: 32px;
        --m-gap: 16px;
        --m-card-pad: 24px;
        /* The ink offsets are proportional to the type they belong to, so
           they hold on the larger tablet base too (both ~2px on a phone). */
        --m-ink-title: calc(var(--m-h2) * 0.078);
        --m-ink-copy: calc(var(--m-base) * 0.13);
        --m-seam-kicker: calc(var(--m-gap) + var(--m-ink-title));
        --m-seam-lede: calc(var(--m-gap) + var(--m-ink-title));
        --m-seam-title-content: calc(var(--m-block) + var(--m-ink-title));
        --m-seam-lede-content: calc(var(--m-block) - var(--m-ink-copy));
        --m-seam-para: calc(var(--m-gap) - 1.5 * var(--m-ink-copy));
        --m-seam-copy-block: calc(var(--m-block) - var(--m-ink-copy));
        --m-seam-icon-title: calc(var(--m-gap) + var(--m-ink-title));
        --m-seam-card-title-text: 12px;
        --m-seam-label-text: calc(12px - var(--m-ink-copy));
        --m-card-pad-copy: calc(var(--m-card-pad) - var(--m-ink-copy));
        --m-seam-number-title: calc(8px + var(--m-ink-title));

        --copy-size: var(--m-base);
        --subheading-size: var(--m-h3);
        --eyebrow-size: var(--m-kicker);
        --section: 64px;
      }

      /* ── 1. Type scale ──────────────────────────────────────────────── */

      #top h1 {
        font-size: var(--m-h1);
        line-height: 1.08;
      }

      #about h2,
      #business h2,
      #core-values h2,
      #products h2,
      #applications h2,
      #strengths h2,
      #why-rpet h2,
      #rpet-process h2,
      #compliance h2,
      #contact h2,
      .mobile-menu nav a {
        font-size: var(--m-h2);
        line-height: 1.16;
      }

      #core-values h3,
      #products h3,
      #applications h3,
      #strengths h3,
      #why-rpet h3,
      #rpet-process h3,
      .production-visual h3 {
        font-size: var(--m-h3);
        line-height: 1.22;
      }

      #top .hero-copy,
      #top .hero-button,
      #about .about-us__text p,
      #business .business-statement__copy,
      #products .products-copy,
      #why-rpet .why-heading__copy,
      #rpet-process .cpet-process-story__intro-copy,
      #contact .contact-bottom > p,
      #contact .contact-detail,
      #contact .dialog-submit {
        font-size: var(--m-base);
        line-height: 1.55;
      }

      #core-values .business-value p,
      #strengths .strength-card p,
      #why-rpet .why-card p,
      #rpet-process .cpet-process-story__fallback-body p:not(.cpet-process-story__number),
      #rpet-process .cpet-process-story__fallback-body li,
      #products .products-spec th,
      #products .products-spec td,
      #contact .contact-form label,
      .site-footer .footer-copyright,
      .header-topbar__phone {
        font-size: var(--m-small);
        line-height: 1.5;
      }

      .chapter-kicker,
      #applications .chapter-kicker,
      #business .business-statement__label,
      #strengths .strength-card__number,
      #rpet-process .cpet-process-story__eyebrow,
      #rpet-process .cpet-process-story__number,
      #contact .contact-kicker,
      #contact .contact-details__label,
      .production-visual .production-message p,
      .brand-tagline {
        font-size: var(--m-kicker);
      }

      /* ── 2. One axis ────────────────────────────────────────────────── */

      #main,
      .site-footer {
        text-align: center;
      }

      /* Older rules that hard-code a left edge. */
      .values-inner,
      .why,
      .why-grid,
      .why-card {
        text-align: center;
      }

      /* Width-capped blocks (max-width 320–920px above) stay pinned to the
         left of their column unless their inline margins are auto. */
      #main :is(h1, h2, h3, p, ul, ol),
      .footer-copyright {
        margin-inline: auto;
      }

      /* ── 3. Sections ────────────────────────────────────────────────── */

      /* Hero. .hero-line clips its overflow so the headline can slide out
         of a mask on load; that animation does not run here, and at this
         size the mask was cutting 4.8px off the descenders. */
      .hero-line {
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      /* Both buttons share one row whenever they fit, and wrap to one each
         when they do not (a 320px phone). The labels use the button step:
         at 375 wide the pair then needs about 310px of a 331px column,
         against 356px at copy size. Each button is only as wide as its
         label, so the padding you see is the padding set here; stretching
         them to fill the row added ~8px a side. */
      .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .hero-button {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        min-height: 40px;
        padding: 8px 14px;
        white-space: nowrap;
      }

      #top .hero-button {
        font-size: var(--m-button);
      }

      /* About. The pill-shaped left edge belongs to the desktop layout,
         where the photo runs out to the viewport edge. */
      .about-us__content,
      .about-visual {
        text-align: center;
      }

      .about-visual-frame {
        aspect-ratio: auto;
        width: 100%;
        height: 230px;
      }

      .about-main-image {
        border-radius: var(--m-radius);
      }

      /* Core values. */
      .business-value__icon {
        margin-inline: auto;
      }

      /* Production still: a band, not a second full-screen hero. */
      .production-visual {
        height: auto;
        min-height: 0;
      }

      .production-frame {
        height: 46svh;
        min-height: 260px;
      }

      .production-frame img {
        height: 100%;
        object-fit: cover;
      }

      .production-message h3 {
        white-space: normal;
      }

      /* Products. The spec table had a 420px floor, so on a 331px column
         the unit column hung off the edge behind a horizontal scroll. It
         now fits: fixed layout, tighter cells, labels allowed to wrap. */
      .products-spec-scroll {
        overflow-x: visible;
      }

      .products-spec {
        min-width: 0;
        table-layout: fixed;
        border-spacing: 3px;
      }

      .products-spec col:nth-child(1),
      .products-spec th:nth-child(1) {
        width: 38%;
      }

      .products-spec thead th,
      .products-spec tbody th,
      .products-spec td {
        padding: 11px 6px;
        overflow-wrap: anywhere;
      }

      /* Applications: three cards stacked, all visible at once, instead of
         the 3D orbit. main.js only builds the orbit above 600px. */
      /* On desktop the shell is a fixed 1500px stage pulled left with a
         negative margin so the orbit can swing wide. */
      #applications .shell {
        width: auto;
        margin: 0;
        padding-inline: var(--gutter);
      }

      /* The ≤700px rule above widened the heading to 100vw with its own
         gutter to escape that 1500px stage. The stage is gone, so the
         compensation would push it one gutter past the right edge. */
      #applications .chapter-kicker,
      #applications h2 {
        width: auto;
        max-width: none;
        padding-inline: 0;
      }

      .orbit-stage {
        height: auto;
        margin-top: 32px;
      }

      .orbit-carousel {
        position: static;
        display: grid;
        gap: 14px;
        perspective: none;
        transform-style: flat;
      }

      .orbit-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 180px;
        border-radius: var(--m-radius);
      }

      .orbit-nav,
      .orbit-reflection {
        display: none;
      }

      /* Titles sit left, vertically centred, clear of the product shots —
         every application photo puts its product on the right. */
      .application-card__content {
        justify-content: flex-start;
        padding: var(--m-card-pad);
        text-align: left;
      }

      #applications .application-card__content h3 {
        max-width: none;
        margin-inline: 0;
      }

      /* Two titles are split over two lines with <br> for the desktop cards.
         The cards here are wide enough to keep them on one line; the space
         before each <br> in the markup keeps the words apart once it is
         hidden, and is invisible at the end of a desktop line. */
      #strengths .strength-card h3 br {
        display: none;
      }

      /* Strengths: number and title stacked on one centre line. */
      .strengths-heading,
      .strength-card p {
        align-self: stretch;
      }

      .strength-card,
      .strength-card__flip,
      .strength-card__face {
        height: 240px;
      }

      .strength-card__front img {
        height: 100%;
        object-fit: cover;
      }

      .strength-card__front-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
      }

      .strength-card__front-copy > div {
        justify-content: center;
      }

      #strengths .strength-card h3 {
        margin-top: 0;
      }

      /* The back face is a grid with fixed 126px and 100px rows, sized for
         the 338px desktop card. At 240px that overflowed and the copy was
         clipped, so the rows size to content and the stack centres. */
      /* The back-face number is absolutely pinned to the top-left corner. */
      #strengths .strength-card__back .strength-card__number {
        right: 0;
        left: 0;
        text-align: center;
      }

      .strength-card__back {
        grid-template-rows: auto auto auto;
        align-content: center;
        justify-items: center;
        gap: 10px;
        text-align: center;
      }

      /* Why rPET. The section was locked to 100svh with overflow hidden and
         its content centred in that box, so on a phone 215px was cut off
         above and below. It now grows with its content. */
      .why {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-block: var(--section);
      }

      /* The shell inside is also 100svh with its content centred, so on any
         phone taller than the content (414x896 and up) the section picked
         up extra space above and below. It only showed on tall screens. */
      #why-rpet > .shell {
        min-height: 0;
      }

      .why-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
      }

      /* Card heights above (320px, 430px when active) are sized for the
         desktop accordion. Static here, so each card fits its content. */
      #why-rpet .why-card,
      #why-rpet .why-card.is-active {
        height: auto;
        min-height: 0;
      }

      .why-card__body,
      .why-card.is-active .why-card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }

      .why-card__icon,
      .why-card.is-active .why-card__icon {
        margin: 0 auto;
      }

      .why-card.is-active h3,
      .why-card h3 {
        margin: 0;
      }

      /* Process: one column. The ≤700px layout above put a 92px image
         beside the text on a left rail, so the text centred in the right
         column only (67.5px off the screen axis) and each photo became a
         92px sliver. Image on top, text under it, no rail. */
      /* The ≤980px rule above gives this list two columns; ≤700px hid that
         behind display: block. Back on grid here, so reset the columns. */
      .cpet-process-story__fallback-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin: 0;
        padding: 0;
        border-left: 0;
      }

      /* align-content: start — in a two-column row the shorter card is
         stretched to its neighbour's height, and without this the spare
         height is shared into the photo and text rows. */
      .cpet-process-story__fallback-step,
      .cpet-process-story__fallback-step + .cpet-process-story__fallback-step {
        align-content: start;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 16px;
        padding: 0;
      }

      .cpet-process-story__fallback-image {
        height: 190px;
        min-height: 0;
        border-radius: var(--m-radius);
      }

      .cpet-process-story__fallback-body,
      .cpet-process-story__fallback-body ul {
        padding: 0;
        text-align: center;
        list-style-position: inside;
      }

      /* Contact. The details block — label, phone, address — reads as a
         list, so it keeps a left edge like the form below it instead of
         centring with the heading above. */
      .contact-details {
        justify-items: start;
        text-align: left;
      }

      .contact-detail {
        justify-content: flex-start;
        text-align: left;
      }

      /* Form fields stay left-aligned: centred label text above a
         left-aligned input reads as a mistake, and centred input text is
         hard to type into. */
      .contact-form,
      .contact-form label,
      .contact-form input,
      .contact-form select,
      .contact-form textarea {
        text-align: left;
      }

      /* Footer: stacked so logo and copyright can both sit centred. */
      .site-footer {
        height: auto;
        padding-block: 26px;
      }

      .footer-inner {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
      }

      .footer-brand {
        align-items: center;
        margin-inline: auto;
      }

      .site-footer .footer-copyright {
        text-align: center;
      }

      /* ── 4. Spacing ─────────────────────────────────────────────────────
         Every seam is measured ink to ink — from the visible edge of one
         thing to the visible edge of the next — because that is what the
         eye compares, not the CSS boxes.

           64  section top and bottom
           32  heading block → content, block → block inside content
           16  kicker → title, title → lede, paragraph → paragraph,
               card → card
           24  card padding
           16  icon → card title
           12  card title → card text, label → card text
            8  step / card number → title

         Manrope draws its glyphs in a box ~1.37em tall. On the 1.16
         line-height titles that ink overflows the CSS line box, so a seam
         touching a title needs a slightly larger CSS value than the gap you
         see; body copy at 1.55 sits inside its box and needs a smaller one.
         --m-ink-title and --m-ink-copy carry those offsets, measured at
         375px and checked at 320 and 414.

         Earlier rules above build these seams in seven different ways
         (kicker margin-bottom, title margin-top, wrapper padding, grid
         row-gap …). Each seam below is zeroed at every contributor and
         set in exactly one place.
         ─────────────────────────────────────────────────────────────── */

      /* Section padding. */
      #business,
      #core-values,
      #products,
      #applications,
      #strengths,
      #why-rpet,
      #compliance,
      #contact {
        padding-block: var(--m-pad);
      }

      #rpet-process .cpet-process-story__fallback {
        padding-block: var(--m-pad);
      }

      #about .about-us__content {
        padding: var(--m-pad) var(--gutter) 0;
      }

      #about .about-visual {
        padding: 0 var(--gutter) var(--m-pad);
      }

      /* Kicker → title: the kicker owns the seam, the title has none. */
      #main .chapter-kicker,
      #rpet-process .cpet-process-story__eyebrow,
      #contact .contact-kicker {
        margin-block: 0 var(--m-seam-kicker);
      }

      #main section h2 {
        margin-block: 0;
      }

      /* Title → lede: the lede owns the seam. */
      #about .about-us__text,
      #why-rpet .why-heading__copy,
      #contact .contact-bottom {
        margin-top: var(--m-seam-lede);
      }

      #rpet-process .cpet-process-story__intro {
        row-gap: var(--m-seam-lede);
      }

      #rpet-process .cpet-process-story__intro-copy {
        margin-block: 0;
      }

      /* Heading block → content: the content owns the seam. */
      #about .about-us__inner {
        row-gap: var(--m-seam-lede-content);
      }

      #business .business-statements,
      #core-values .business-values__list,
      #applications .orbit-stage {
        margin-top: var(--m-seam-title-content);
      }

      #compliance .compliance-heading {
        margin-bottom: var(--m-seam-title-content);
      }

      /* Here the content opens with a title too, so both inks overflow. */
      #products .products-heading {
        margin-bottom: calc(var(--m-seam-title-content) + var(--m-ink-title));
      }

      #strengths .strengths-stack {
        row-gap: var(--m-seam-title-content);
      }

      #why-rpet .why-layout {
        row-gap: var(--m-seam-lede-content);
      }

      #rpet-process .cpet-process-story__intro {
        margin-bottom: var(--m-seam-lede-content);
      }

      #contact .contact-details {
        margin-top: var(--m-block);
      }

      /* .contact-bottom is capped at 570px and sits flush left, which pushed
         its centred copy 48px off axis on a tablet. Uncapped, the copy centres
         on its own max-width, and the left-aligned details keep the same left
         edge as the form below. */
      #contact .contact-bottom {
        max-width: none;
      }

      /* Paragraph → paragraph. */
      #about .about-us__text p,
      #products .products-copy {
        margin-block: 0;
      }

      #about .about-us__text p + p,
      #products .products-copy + .products-copy {
        margin-top: var(--m-seam-para);
      }

      /* Products: name → copy → table → photos, photo → photo. */
      #products .products-name {
        margin-block: 0 var(--m-gap);
      }

      #products .products-spec-scroll {
        margin-top: var(--m-seam-copy-block);
      }

      #products .products-layout {
        row-gap: var(--m-block);
      }

      #products .products-visual {
        row-gap: var(--m-gap);
      }

      /* Contact: details → form. */
      #contact .contact-layout {
        row-gap: calc(var(--m-block) - var(--m-ink-copy));
      }

      /* Compliance: a swipeable three-up carousel with dots instead of the
         endless marquee — no autoplay, no loop. The second list only exists
         so the marquee can loop seamlessly, so it goes. main.js builds the
         dots from the snap points defined here. */
      #compliance .certification-marquee {
        width: auto;
        margin-left: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
      }

      #compliance .certification-track {
        display: block;
        width: auto;
        animation: none;
        transform: none;
      }

      #compliance .certification-list[aria-hidden="true"] {
        display: none;
      }

      #compliance .certification-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 2 * var(--m-gap)) / 3);
        grid-template-columns: none;
        gap: var(--m-gap);
        padding: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      #compliance .certification-list::-webkit-scrollbar {
        display: none;
      }

      /* The logo boxes were 138px around a 94px logo, which added 22px of
         empty band above and below the row. */
      #compliance .certification-mark,
      #compliance .certification-mark:last-child {
        width: auto;
        min-height: 0;
        padding: 0;
        grid-column: auto;
        scroll-snap-align: none;
      }

      /* One page is three logos, so logos one and four start a page. The
         second page's snap point lies past the end and is clamped to it, so
         it shows logos three to five rather than two and an empty slot. */
      #compliance .certification-mark:nth-child(3n + 1) {
        scroll-snap-align: start;
      }

      /* Each dot is a 24px tap target around an 8px mark, so 8px of each
         target is empty above and below. The margins take that back out,
         so the visible dots sit 16px under the logos and the section's
         64px bottom padding is measured from the dots, not the targets. */
      .certification-dots {
        display: flex;
        justify-content: center;
        margin-top: calc(var(--m-gap) - 8px);
        margin-bottom: -8px;
      }

      .certification-dot {
        display: grid;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        place-items: center;
        cursor: pointer;
      }

      .certification-dot::before {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: rgba(29, 29, 31, 0.24);
        content: "";
        transition: width 260ms var(--ease), background-color 260ms var(--ease);
      }

      .certification-dot.is-active::before {
        width: 20px;
        background: var(--orange);
      }

      .certification-dot:focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: -2px;
        border-radius: 12px;
      }

      /* Card → card. */
      #business .business-statements,
      #core-values .business-values__list,
      #applications .orbit-carousel,
      #strengths .strengths-grid,
      #why-rpet .why-grid,
      #rpet-process .cpet-process-story__fallback-list {
        gap: var(--m-gap);
      }

      /* Inside cards: 24 padding, 16 icon → title, 12 title → text. Each
         card becomes a plain column so the margins below are the only
         spacing in play. */
      #business .business-statement,
      #core-values .business-value,
      #why-rpet .why-card,
      #why-rpet .why-card.is-active {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: var(--m-card-pad) var(--m-card-pad) var(--m-card-pad-copy);
      }

      #why-rpet .why-card__body,
      #why-rpet .why-card.is-active .why-card__body {
        gap: 0;
      }

      #core-values .business-value__icon,
      #why-rpet .why-card__icon,
      #why-rpet .why-card.is-active .why-card__icon {
        margin: 0 auto var(--m-seam-icon-title);
      }

      #core-values .business-value__title,
      #why-rpet .why-card h3,
      #why-rpet .why-card.is-active h3 {
        margin-block: 0 var(--m-seam-card-title-text);
      }

      #core-values .business-value p,
      #why-rpet .why-card p,
      #business .business-statement__copy {
        margin-block: 0;
      }

      #business .business-statement__label {
        margin-block: 0 var(--m-seam-label-text);
      }

      /* Numbered cards: number → title. */
      #strengths .strength-card__front-copy {
        gap: var(--m-seam-number-title);
      }

      /* Process: each step is an image box — photo flush at the top,
         number, title and text inside the same card. Styled after the
         contact form, the other card on this black ground. */
      #rpet-process .cpet-process-story__fallback-step {
        overflow: hidden;
        gap: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: var(--m-radius);
        background: #121316;
        padding-bottom: var(--m-card-pad-copy);
      }

      #rpet-process .cpet-process-story__fallback-image {
        border-radius: 0;
      }

      #rpet-process .cpet-process-story__fallback-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--m-card-pad) var(--m-card-pad) 0;
      }

      #rpet-process .cpet-process-story__number {
        margin-block: 0 var(--m-seam-number-title);
      }

      #rpet-process .cpet-process-story__fallback-body h3 {
        margin-block: 0 var(--m-seam-card-title-text);
      }

      #rpet-process .cpet-process-story__fallback-body p:not(.cpet-process-story__number),
      #rpet-process .cpet-process-story__fallback-body ul {
        margin-block: 0;
      }

      /* Applications: one flat colour instead of the studio-floor photo.
         #e8e8ed is the Why section's grey and matches the band behind this
         heading in the photo (#eae9eb). */
      #applications {
        background: #e8e8ed;
      }

    }

    /* ─────────────────────────────────────────────────────────────────
       TABLETS 601–980px

       Everything in the block above applies — one type scale, one axis,
       the same seams. Only what differs from the phone layout is here:
       a larger type base (same ratios), more room around sections, and
       the extra width spent on two-column card grids.
       ───────────────────────────────────────────────────────────────── */
    @media (min-width: 601px) and (max-width: 980px) {
      :root {
        /* Same 2.10 : 1.66 : 1.30 : 1.00 ratios on a larger base —
           h1 ~36px, h2 ~29px, copy ~17px at 768 wide. */
        --m-base: clamp(16.5px, 2.25vw, 18px);
        --m-pad: 80px;
        --m-block: 40px;
      }

      /* Two-column card grids. */
      #business .business-statements,
      #core-values .business-values__list,
      #applications .orbit-carousel,
      #strengths .strengths-grid,
      #why-rpet .why-grid,
      #rpet-process .cpet-process-story__fallback-list,
      #products .products-visual {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--m-gap);
      }

      /* An odd card out finishes its grid centred, at the same width as
         the others, rather than stretching across both columns. */
      #applications .orbit-carousel > :last-child:nth-child(odd),
      #strengths .strengths-grid > :last-child:nth-child(odd),
      #why-rpet .why-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--m-gap)) / 2);
      }

      /* Tablets have room for both buttons at copy size, so they keep their
         own widths as a centred pair instead of stretching across the row. */
      .hero-button {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 20px;
      }

      /* Image heights for the wider columns. */
      .about-visual-frame {
        height: 380px;
      }

      .orbit-card {
        height: 200px;
      }

      .strength-card,
      .strength-card__flip,
      .strength-card__face {
        height: 260px;
      }

      /* Compliance: all five logos fit on one row at this width, so there
         is nothing to swipe to — one static row, no carousel, no dots. */
      #compliance .certification-list {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
        scroll-snap-type: none;
      }
    }