/* Art direction: the striped mark, technical drawing and physical print.
   This layer keeps the original palette and functional layout intact. */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); }

/* A stronger type scale creates clear, spacious information hierarchy. */
body { font-size:16px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:1.7px; }
h1,h2,h3 { font-weight:700; }
.hero-description { max-width:470px; font-size:18px; line-height:1.6; }
.button,.text-link { font-size:14px; }
.section-heading > div > p { max-width:340px; font-size:16px; line-height:1.65; }
.service-intro > p:not(.eyebrow),.service-list p,.about-grid p:not(.eyebrow),.contact-section > div > p:not(.eyebrow) { font-size:16px; line-height:1.7; }
.service-list h3 { font-weight:700; }
.industries > a { font-weight:700; }
.industries a span { font-size:13px; font-weight:400; }
.contact-details > a:not(.text-link) { font-size:18px; font-weight:700; }
address { font-size:15px; }
.enquiry h3 { font-size:27px; font-weight:700; }
label { font-size:13px; font-weight:700; }
.footer-main p,.footer-main nav { font-size:13px; }

/* A quiet running rule and precise, animated navigation underlines. */
.header::after { content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--red); transform:scaleX(var(--page-progress,0)); transform-origin:left; }
.header { transition:box-shadow .3s; }
.header.is-scrolled { box-shadow:0 8px 24px #20231f08; }
#navigation > a:not(.button) { position:relative; }
#navigation > a:not(.button)::after { content:""; position:absolute; left:0; right:0; bottom:5px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
#navigation > a:hover::after, #navigation > a[aria-current="location"]::after { transform:scaleX(1); }
.button { position:relative; overflow:hidden; }
.button span, .text-link span { transition:transform .3s var(--ease-out); }
.button:hover span, .text-link:hover span { transform:translate(3px,-3px); }
.text-link { border-bottom-color:var(--line); background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat; transition:background-size .4s var(--ease-out),color .2s; }
.text-link:hover { background-size:100% 1px; }
.light { border-bottom-color:#596055; }

/* The hero is a physical assembly: grid, rear plate, photograph, label. */
.hero { grid-template-columns:1.08fr 1fr; gap:48px; padding-top:56px; padding-bottom:68px; }
.hero-copy { padding-top:38px; position:relative; z-index:2; }
.hero h1 { letter-spacing:-.065em; font-size:clamp(56px,6.55vw,96px); }
.hero h1 em { display:inline-block; position:relative; }
.hero h1 em::after { content:""; position:absolute; left:5%; right:1%; bottom:-9px; height:8px; border-top:1px solid var(--red); border-radius:50%; transform:rotate(-3deg); opacity:.55; }
.hero-description { margin-top:34px; }
.hero-foot { border-top:1px solid var(--line); padding-top:20px; margin-top:44px; }
.hero-foot > span { max-width:170px; line-height:1.7; }
.hero-stage { position:relative; min-height:580px; perspective:1300px; isolation:isolate; --rx:0deg; --ry:0deg; --mx:50%; --my:35%; }
.stage-grid { position:absolute; inset:0 -12px 20px -20px; background-image:linear-gradient(#b7bca02b 1px,transparent 1px),linear-gradient(90deg,#b7bca02b 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(135deg,#000,transparent 75%); }
.stage-coordinate { position:absolute; left:0; top:-19px; font-size:8px; letter-spacing:1.6px; color:var(--muted); }
.stage-orbit { position:absolute; width:90%; aspect-ratio:1; border:1px solid #a5ada052; border-radius:50%; top:5%; left:-11%; transform:rotate(-25deg); }
.stage-orbit::before { content:""; position:absolute; inset:18px; border:1px dashed #a5ada060; border-radius:50%; }
.stage-orbit::after { content:"+"; position:absolute; top:16%; left:10%; font-size:28px; font-weight:300; color:var(--red); }
.hero-stage::before { content:""; position:absolute; inset:26px 0 49px 31px; background:#dfe2d7; border:1px solid #c9cebf; transform:rotate(3deg); z-index:-1; }
.hero-stage::after { content:""; position:absolute; width:110px; height:60px; right:-6px; bottom:60px; background:repeating-linear-gradient(0deg,transparent 0 6px,var(--red) 6px 8px); opacity:.6; z-index:-1; }
.hero-image { position:absolute; inset:9px 18px 68px 16px; min-height:0; overflow:hidden; transform:rotate(-2deg) rotateX(var(--rx)) rotateY(var(--ry)); box-shadow:12px 24px 36px -24px #17211d99,0 1px 1px #fff inset; transition:transform .65s var(--ease-out),box-shadow .65s; will-change:transform; }
.hero-image > img { filter:brightness(.76) saturate(.55); transform:scale(1.06); }
.hero-image:hover > img { transform:scale(1.09); }
.hero-image .image-label { inset:21px 19px auto; font-size:7px; line-height:1.6; }
.hero-image .image-label > span:first-child { max-width:165px; }
.hero-image figcaption { left:auto; right:16px; bottom:17px; font-size:8px; max-width:185px; text-align:right; background:#20231f7a; }
.image-light { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at var(--mx) var(--my),#fff4,transparent 58%); mix-blend-mode:soft-light; }
.precision-target { position:absolute; left:41%; top:40%; width:100px; height:100px; border:1px solid #fff7; border-radius:50%; }
.precision-target::before,.precision-target::after { content:""; position:absolute; background:#fff9; }
.precision-target::before { width:1px; height:18px; left:50%; top:-9px; }
.precision-target::after { height:1px; width:18px; top:50%; left:-9px; }
.precision-target span { position:absolute; inset:12px; border:1px dashed #ffffff60; border-radius:50%; }
.hero-plaque { position:absolute; z-index:3; left:-25px; bottom:38px; width:330px; padding:21px 22px; display:flex; align-items:center; gap:18px; background:#f5f4eeeF; border:1px solid #fff; box-shadow:0 12px 30px #17211d16; backdrop-filter:blur(14px); transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(25px); transition:transform .65s var(--ease-out); }
.hero-plaque img { width:43px; height:55px; object-fit:contain; mix-blend-mode:multiply; }
.hero-plaque div > span { font-size:7px; letter-spacing:1px; }
.hero-plaque p { font-size:17px; letter-spacing:-.4px; line-height:1.3; margin-top:8px; }
.hero-plaque em { font-size:18px; letter-spacing:-.5px; color:var(--ink); }
.plaque-plus { color:var(--red); margin-left:auto; align-self:start; font-weight:300; }
.stage-baseline { position:absolute; bottom:0; left:15px; right:0; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:7px; letter-spacing:1.4px; }
.stage-baseline > span:last-child { font-size:26px; color:var(--red); }
.brands { min-height:112px; }
.brands > span { transition:transform .3s; }
.brands > span:hover { transform:translateY(-3px); }

/* A catalog with a lead spread, then a tighter supporting index. */
.section-heading { grid-template-columns:.72fr 2.3fr; }
.section-heading > div { gap:55px; }
.section-heading h2 { font-size:clamp(35px,3.35vw,49px); letter-spacing:-.055em; }
.section-heading > .eyebrow::before { content:""; display:block; width:30px; height:3px; margin-bottom:20px; background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 8px); }
.product-filters { margin-top:48px; }
.product-grid { grid-template-columns:repeat(12,minmax(0,1fr)); border:0; gap:0 28px; }
.product { position:relative; grid-column:span 3; min-height:270px; padding:25px 0 20px; border:0; border-top:1px solid var(--line); background:none; }
.product:hover { background:none; }
.product:nth-child(-n+2) { grid-column:span 6; min-height:280px; margin-bottom:22px; padding:28px 30px; background:#e8e9e0; border-top:1px solid #c3c8bb; overflow:hidden; }
.product:first-child { background:var(--dark); color:var(--paper); }
.product:first-child::before { content:""; position:absolute; width:190px; height:250px; right:-25px; bottom:-50px; border-radius:50% 50% 45% 45%; transform:rotate(30deg); background:repeating-linear-gradient(0deg,transparent 0 11px,#d3ddc212 11px 17px); pointer-events:none; }
.product:first-child p,.product:first-child .product-top { color:#bec5b9; }
.product:first-child .product-top > span:first-child { color:#ec9987; }
.product:nth-child(-n+2) h3 { font-size:32px; letter-spacing:-1px; margin-top:36px; }
.product:not(:nth-child(-n+2)) h3 { margin-top:27px; }
.product-top > span:first-child { font-family:Georgia,serif; font-size:17px; font-style:italic; }
.product-top > span:last-child { padding-top:5px; }
.product-bottom { position:relative; }
.product-bottom a { background:transparent; border:1px solid var(--line); transition:transform .3s,background .3s,color .3s; }
.product:first-child .product-bottom a { border-color:#707968; }
.product:hover .product-bottom a { transform:rotate(-8deg); background:var(--red); border-color:var(--red); color:#fff; }
.product-grid.is-filtered .product { grid-column:span 4; margin-bottom:0; min-height:280px; padding:25px 22px; background:#e8e9e0; }
.product-grid.is-filtered .product:first-child { background:var(--dark); }
.product-grid.is-filtered .product h3 { font-size:24px; }
.range-note { border-top:1px solid var(--line); margin-top:24px; }
.range-note p { font-family:Georgia,serif; font-size:21px; letter-spacing:-.5px; }

/* An offset image and numbered service notes, instead of matching boxes. */
.service-section { position:relative; overflow:hidden; padding-block:105px; }
.service-section::before { content:""; position:absolute; width:42%; height:6px; left:0; top:0; background:var(--red); }
.service-grid { grid-template-columns:1.04fr 1fr; gap:100px; }
.service-intro h2 { font-size:clamp(42px,4.5vw,66px); letter-spacing:-.055em; }
.service-intro figure { position:relative; margin:43px 42px 0 0; }
.service-intro figure::before { content:""; position:absolute; inset:17px -16px 8px 17px; border:1px solid #6e786255; }
.service-intro figure img { position:relative; aspect-ratio:1.4; }
.service-intro figcaption { position:relative; margin-top:20px; }
.service-list { padding-top:81px; }
.service-list article { transition:padding-left .35s var(--ease-out); }
.service-list article:hover { padding-left:9px; }
.service-list article > span { font-family:Georgia,serif; font-size:20px; font-style:italic; padding-top:0; }
.service-list h3 { font-size:25px; }
.industries { counter-reset:industry; column-gap:65px; }
.industries > a { position:relative; counter-increment:industry; padding-left:32px; transition:padding-left .3s,color .3s; }
.industries > a::before { content:counter(industry,decimal-leading-zero); position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:9px; color:#b8827a; }
.industries > a::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.industries > a:hover::after { transform:scaleX(1); }
.industries > a:hover { padding-left:38px; }
.industries b { transition:transform .3s; }
.industries > a:hover b { transform:translate(3px,-3px); }
.about-section { background:linear-gradient(110deg,#e4e5dd 63%,#e9eae2 63%); }
.about-stamp { position:relative; transform:rotate(-4deg); border:1px solid #bfc3b7; padding:43px 18px; background:repeating-linear-gradient(0deg,transparent 0 27px,#bfc3b730 27px 28px); box-shadow:12px 14px 0 -1px #e4e5dd,12px 14px 0 0 #c4c9bd; }
.about-stamp::before,.about-stamp::after { content:"+"; position:absolute; top:9px; font-size:17px; color:#8f9984; }
.about-stamp::before { left:12px; }.about-stamp::after { right:12px; }
.about-stamp strong { font-family:Georgia,serif; font-size:clamp(90px,10vw,145px); letter-spacing:-8px; font-weight:400; }
.about-grid { padding-block:15px; }
.contact-section .enquiry { border-top:1px solid var(--ink); position:relative; padding-top:30px; }
.enquiry::before { content:"↗︎"; position:absolute; top:-26px; right:0; background:var(--paper); padding-left:18px; font-size:39px; color:var(--red); }
input,textarea { transition:border-color .2s; }
input:focus,textarea:focus { border-bottom-color:var(--red); }
.footer-bottom { position:relative; }
.footer-bottom::before { content:""; width:75px; height:3px; background:var(--red); position:absolute; top:-2px; left:0; }

/* Content is visible by default; only JS-observed offscreen sections animate. */
.reveal-pending { opacity:0; transform:translateY(22px); }
.reveal-ready { transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.reveal-ready:not(.reveal-pending) { opacity:1; }

@media(min-width:1600px) { .hero-stage { min-height:610px; } }
@media(max-width:1100px) {
  .hero { gap:28px; }
  .hero-stage { min-height:550px; }
  .hero-plaque { width:285px; left:-12px; gap:12px; padding:18px; }
  .hero-plaque p { font-size:15px; }.hero-plaque em { font-size:16px; }
  .section-heading > div { gap:25px; }
  .product-grid { gap:0 20px; }
  .product { grid-column:span 6; min-height:240px; }
  .product-grid.is-filtered .product { grid-column:span 4; padding:22px 15px; }
  .service-grid { gap:50px; }.service-list { padding-top:65px; }
  .industries { column-gap:32px; }.industries > a { grid-template-columns:1fr 22px; padding-block:19px; }
  .industries a span { grid-column:1; grid-row:2; }.industries b { grid-column:2; grid-row:1/3; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; padding-top:30px; padding-bottom:34px; gap:46px; }
  .hero-copy { padding-top:0; }
  .hero h1 { font-size:clamp(54px,12vw,86px); }
  .hero-description { margin-top:30px; }
  .hero-stage { min-height:450px; margin:0 9px; }
  .hero-stage::before { inset:25px 4px 58px 20px; }
  .hero-image { min-height:0; inset:8px 15px 65px 10px; }
  .hero-image .image-label { font-size:6px; inset:16px 14px auto; }
  .hero-image .image-label > span:first-child { max-width:135px; }
  .hero-image figcaption { right:12px; bottom:16px; font-size:7px; max-width:145px; }
  .hero-plaque { bottom:29px; left:-9px; width:269px; padding:17px; gap:13px; }
  .hero-plaque img { width:33px; height:45px; }
  .hero-plaque div > span { font-size:6px; }
  .hero-plaque p { font-size:15px; }.hero-plaque em { font-size:16px; }
  .stage-baseline { font-size:6px; bottom:-5px; left:0; }.stage-coordinate { font-size:7px; }
  .precision-target { width:78px; height:78px; }
  .section-heading { display:block; }.section-heading h2 { font-size:36px; }
  .section-heading > .eyebrow::before { margin-bottom:15px; }
  .product-filters { margin-top:25px; }
  .product-grid { gap:0 20px; }
  .product:nth-child(-n+2) { grid-column:span 12; min-height:248px; margin-bottom:18px; padding:24px; }
  .product:nth-child(-n+2) h3 { font-size:29px; margin-top:28px; }
  .product { grid-column:span 6; min-height:280px; }
  .product-grid.is-filtered .product { grid-column:span 12; min-height:235px; margin-bottom:18px; padding:24px; }
  .product-top > span:last-child { font-size:7px; letter-spacing:.4px; }
  .range-note p { font-size:20px; }
  .service-section { padding-block:65px; }.service-grid { grid-template-columns:1fr; gap:35px; }
  .service-intro h2 { font-size:46px; }.service-intro figure { margin-right:18px; }
  .service-list { padding-top:0; }.service-list h3 { font-size:23px; }
  .industries > a { grid-template-columns:1fr auto 20px; gap:10px; padding-block:0; }
  .industries a span { grid-column:2; grid-row:1; font-size:9px; }.industries b { grid-column:3; grid-row:1; }
  .about-grid { padding-block:0; gap:52px; }.about-stamp { margin:0 12px; padding:30px 12px; }
  .about-stamp strong { font-size:110px; }
}
@media(max-width:380px) {
  .brands { gap:18px 10px; }.brands > span { font-size:21px; }.brands > span:nth-child(2) { font-size:14px; }
  .hero-stage { min-height:420px; }.hero-plaque { width:245px; }
  .product { grid-column:span 12; min-height:220px; }
  .industries > a { grid-template-columns:1fr 22px; padding-block:16px; }
  .industries a span { grid-column:1; grid-row:2; }.industries b { grid-column:2; grid-row:1/3; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-image { transform:rotate(-2deg); }.hero-plaque { transform:none; }
  .reveal-pending { opacity:1; transform:none; }
  .hero-image,.hero-image > img,.hero-plaque { will-change:auto; }
}

/* Studio composition: an exploded bearing, an editorial index and a cinematic
   transition. Geometry is rendered locally in CSS; no 3D runtime is required. */
.hero { grid-template-columns:.95fr 1.05fr; gap:22px; padding-top:34px; padding-bottom:40px; }
.hero-copy { padding-top:60px; }
.hero h1 { font-size:clamp(64px,7.15vw,104px); line-height:.98; letter-spacing:-.075em; margin-top:40px; }
.hero h1 em { margin-top:6px; }
.hero h1 em::after { display:none; }
.hero-description { max-width:360px; font-size:15px; }
.hero-foot { margin-top:auto; }
.hero-stage { min-height:665px; perspective:1100px; --spread:0; --scroll-turn:0deg; --rx:0deg; --ry:0deg; }
.hero-stage::before,.hero-stage::after { display:none; }
.assembly-halo { position:absolute; width:94%; aspect-ratio:1; top:4%; left:3%; border-radius:50%; background:radial-gradient(circle,#d9dcde 0,#e9e9e6 48%,#f2f1ec00 70%); }
.assembly-halo::before { content:""; position:absolute; inset:8%; border:1px solid #b7bcc180; border-radius:50%; }
.assembly-halo::after { content:""; position:absolute; inset:0; border:1px dashed #aeb3b850; border-radius:50%; }
.assembly-shadow { position:absolute; left:17%; right:4%; height:90px; bottom:112px; background:radial-gradient(ellipse,#181b1f4f,transparent 65%); filter:blur(13px); transform:rotate(-10deg); }
.assembly { position:absolute; width:360px; height:360px; left:50%; top:40%; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(calc(46deg + var(--rx))) rotateY(calc(-8deg + var(--ry))) rotateZ(calc(-12deg + var(--scroll-turn))); transition:transform .3s cubic-bezier(.16,.7,.25,1); }
.assembly-ring { position:absolute; inset:0; border-radius:50%; transform-style:preserve-3d; background:conic-gradient(from 15deg,#f9fafb,#7c8186 9%,#e7e9eb 17%,#a2a7ab 25%,#34383c 34%,#dfe2e4 47%,#fff 52%,#686e73 66%,#d8dcdf 79%,#41464b 90%,#f2f4f5); box-shadow:0 1px 0 2px #fff,0 3px 0 #94999d,0 6px 0 #b7babd,0 10px 0 #73787d,0 14px 0 #91969a,0 18px 0 #555a5e,0 21px 0 #303438,0 35px 30px #171a1d38; }
.assembly-ring::before { content:""; position:absolute; inset:18px; border-radius:50%; border:1px solid #fff; box-shadow:0 0 0 2px #70757a66,inset 0 0 0 10px #24282c20; }
.assembly-ring::after { content:""; position:absolute; inset:78px; border-radius:50%; background:radial-gradient(ellipse at 40% 38%,#fafafa 28%,#adb1b5 58%,#22262a 60%,#62676c 66%,#d9dcdf 73%,#81868b 78%,#fff 81%); box-shadow:inset 0 15px 12px #15181b55,0 0 0 1px #fff; }
.assembly-ring span { position:absolute; inset:35px; border-radius:50%; border:1px dashed #555b6060; }
.ring-back { transform:translateZ(-65px); }
.ring-front { transform:translateZ(calc(108px * var(--spread))); background:conic-gradient(from 120deg,#33373b,#f0f2f3 10%,#b7bcc0 20%,#fff 30%,#858b90 39%,#292d31 50%,#f1f3f4 64%,#aab0b5 76%,#fff 82%,#545a60 95%,#33373b); }
.ring-front::after { background:radial-gradient(ellipse at 40% 38%,#e7e9eb 29%,#777d82 58%,#1b1e21 60%,#4c5257 69%,#b7bcc0 77%,#f7f8f9 81%); }
.bearing-race { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(3px); }
.bearing-race i { position:absolute; width:36px; height:36px; top:calc(50% - 18px); left:calc(50% - 18px); border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff 0,#e4e6e8 15%,#989da1 36%,#3e4348 67%,#202428 80%,#aeb3b7 100%); box-shadow:3px 5px 5px #171a1e70; transform:rotateZ(calc(var(--i) * 20deg)) translateY(-139px) rotateZ(calc(var(--i) * -20deg)) rotateX(-30deg); }
.fluid-layer { position:absolute; inset:7px; border-radius:50%; transform:translateZ(calc(58px * var(--spread))); background:conic-gradient(from 30deg,#a3150b,#ff6c4c,#d8241d,#f1492f,#9d170d,#f4593b,#a3150b); mask-image:radial-gradient(circle,transparent 0 39%,#000 40% 70%,transparent 71%); opacity:.95; filter:drop-shadow(0 3px 2px #97160850); }
.assembly-core { position:absolute; inset:123px; border-radius:50%; transform:translateZ(calc(151px * var(--spread))); background:conic-gradient(#eef0f1,#747a7f,#fff,#42474c,#eef0f1); box-shadow:0 3px 0 #9ea3a7,0 6px 0 #666c71,0 9px 0 #a3a8ac,0 12px 0 #494f54,0 18px 18px #171a1e45; }
.assembly-core::after { content:""; position:absolute; inset:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff,#bfc3c6 50%,#6b7176); border:1px solid #f5f6f7; }
.hero-stage .stage-coordinate { top:5px; left:10%; font-size:8px; }
.assembly-note { position:absolute; z-index:3; }
.assembly-note span { font-size:7px; letter-spacing:1.5px; color:var(--muted); }
.assembly-note p { font-family:Georgia,serif; font-size:19px; font-style:italic; letter-spacing:-.5px; line-height:1.25; margin-top:10px; }
.note-top { top:63px; right:0; }
.note-top::before { content:""; width:70px; height:1px; background:#a2ac97; position:absolute; left:-85px; top:9px; transform:rotate(-18deg); transform-origin:right; }
.note-bottom { bottom:150px; left:1%; }
.note-bottom::before { content:""; position:absolute; width:1px; height:65px; background:var(--red); top:-79px; left:0; }
.note-core { top:48%; right:-2%; text-align:right; transform:translateY(-50%); }
.note-core::before { content:""; position:absolute; width:62px; height:1px; background:#8d9296; right:calc(100% + 14px); top:10px; }
.hero-detail { position:absolute; width:135px; height:167px; right:0; bottom:47px; transform:rotate(5deg); }
.hero-detail img { width:100%; height:100%; object-fit:cover; filter:grayscale(.6); }
.hero-detail figcaption { position:absolute; bottom:8px; left:8px; right:8px; color:white; font-size:7px; background:#16231bcc; padding:6px; }
.hero-stage .stage-baseline { bottom:0; left:0; right:0; border-top:1px solid var(--line); padding-top:16px; }
.hero-stage .stage-baseline span { font-size:7px; letter-spacing:1px; }
.hero-stage .stage-baseline .interaction-hint { color:var(--muted); }

/* The range reads as a contents page, with a fixed editorial margin. */
#products { display:grid; grid-template-columns:.85fr 1.65fr; column-gap:80px; align-items:start; padding-block:115px; }
#products .section-heading { display:block; grid-column:1; grid-row:1/5; position:sticky; top:150px; }
#products .section-heading > div { display:block; }
#products .section-heading h2 { font-size:58px; line-height:1.02; margin-top:45px; }
#products .section-heading > div > p { margin-top:28px; max-width:280px; }
#products .section-heading::after { content:"↘︎"; display:block; font-size:105px; font-weight:300; color:var(--red); margin-top:35px; line-height:1; }
#products .product-filters { grid-column:2; margin:0 0 8px; gap:30px; }
#products .product-grid { grid-column:2; display:block; }
#products .product { display:grid; grid-template-columns:1fr 44px; gap:0 20px; padding:27px 0 25px; min-height:0; background:transparent; color:var(--ink); margin:0; border:0; border-bottom:1px solid var(--line); overflow:visible; transition:padding .3s; }
#products .product[hidden] { display:none; }
#products .product::before { display:none; }
#products .product-top { grid-column:1; justify-content:start; gap:17px; color:var(--muted); }
#products .product-top > span:first-child { color:var(--red); }
#products .product h3 { grid-column:1; margin:13px 0 0; font-size:32px; letter-spacing:-1.25px; }
#products .product p { grid-column:1; font-size:13px; max-width:420px; color:var(--muted); margin-top:10px; }
#products .product-bottom { display:contents; }
#products .product-bottom > span { grid-column:1; margin-top:17px; font-size:8px; color:var(--muted); }
#products .product-bottom a { grid-column:2; grid-row:1/5; align-self:center; border:0; background:transparent; font-size:29px; color:var(--ink); }
#products .product:hover { padding-left:12px; }
#products .product:hover h3 { color:var(--red); }
#products .product:hover .product-bottom a { background:none; color:var(--red); transform:translate(3px,-3px); }
#products .product-note { grid-column:2; }
#products .range-note { grid-column:1/-1; margin-top:55px; padding-top:22px; }
#products .range-note p { font-size:27px; }

/* A full-bleed visual argument bridges the product range and support. */
.protection-story { position:relative; background:var(--dark); color:var(--paper); overflow:hidden; min-height:800px; --story-progress:0; }
.story-image { position:absolute; inset:0 0 0 39%; overflow:hidden; }
.story-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--dark),#242b2720 40%,#242b2740),linear-gradient(0deg,var(--dark),transparent 30%); }
.story-image img { width:100%; height:120%; object-fit:cover; object-position:50% 50%; filter:grayscale(.8) brightness(.6); transform:translateY(calc(var(--story-progress) * -80px)); }
.story-content { position:relative; padding-block:100px 60px; }
.story-content h2 { font-size:clamp(78px,10.4vw,152px); line-height:.92; letter-spacing:-.065em; font-weight:400; margin-top:48px; }
.story-content h2 span,.story-content h2 em { display:block; width:fit-content; }
.story-content h2 span:nth-child(2) { margin-left:12%; transform:translateX(calc(var(--story-progress) * 30px)); }
.story-content h2 em { margin-left:34%; color:#f2f1ec; font-size:1.1em; transform:translateX(calc(var(--story-progress) * -30px)); }
.story-bottom { display:flex; align-items:center; gap:25px; margin-top:65px; }
.story-rule { width:100px; height:4px; background:var(--red); transform:scaleX(calc(.35 + var(--story-progress) * .65)); transform-origin:left; }
.story-bottom p { font-size:13px; color:#c6ccc1; }.story-credit { margin-left:auto; font-size:7px; letter-spacing:1.2px; color:#aab6a5; }
.service-section { padding-top:50px; overflow:visible; }
.service-section::before { display:none; }
.service-section .service-grid { padding-top:75px; border-top:1px solid #616956; }
.service-intro { position:sticky; top:130px; align-self:start; }
.service-list { padding-top:105px; }
.service-list article { padding-block:38px; }
.service-list article > span { font-size:34px; }
.service-list h3 { font-size:30px; }
.service-intro figure { transform:rotate(-3deg); margin-top:45px; }
#industries { padding-top:125px; padding-bottom:125px; }
#industries .section-heading { grid-template-columns:.7fr 2.3fr; }
#industries .section-heading h2 { font-size:57px; }
.industries { display:block; margin-left:25%; }
.industries > a { min-height:92px; grid-template-columns:1fr auto 30px; font-size:27px; letter-spacing:-1px; padding-left:45px; }
.industries > a:nth-last-child(2) { border-bottom:0; }
.industries a span { grid-column:2; grid-row:1; font-size:12px; }.industries b { grid-column:3; grid-row:1; }
.industries > a:hover { padding-left:60px; }
.about-section { position:relative; padding-block:115px; overflow:hidden; }
.about-stamp { border:0; background:none; box-shadow:none; transform:none; align-items:start; padding:0; }
.about-stamp::before,.about-stamp::after { display:none; }
.about-stamp strong { font-family:Arial,Helvetica,sans-serif; font-size:clamp(100px,14vw,200px); line-height:1; letter-spacing:-.09em; margin:15px 0 24px -12px; }
.about-stamp span { z-index:1; }.about-grid { gap:85px; }
.about-section::after { content:""; position:absolute; width:55%; height:180px; bottom:-55px; left:-6%; background:repeating-linear-gradient(0deg,transparent 0 17px,#a9b29f30 17px 23px); transform:rotate(-13deg); pointer-events:none; }
.contact-section h2 { font-size:clamp(65px,7.5vw,105px); line-height:1; }

@media(min-width:1600px) { .hero-stage { min-height:700px; }.assembly { width:390px; height:390px; }.bearing-race i { transform:rotateZ(calc(var(--i) * 20deg)) translateY(-152px) rotateZ(calc(var(--i) * -20deg)) rotateX(-30deg); } }
@media(max-width:1100px) {
  .hero-stage { min-height:645px; }.assembly { width:295px; height:295px; top:43%; }
  .assembly-ring::after { inset:65px; }.assembly-core { inset:100px; }
  .bearing-race i { width:29px; height:29px; top:calc(50% - 14px); left:calc(50% - 14px); transform:rotateZ(calc(var(--i) * 20deg)) translateY(-115px) rotateZ(calc(var(--i) * -20deg)) rotateX(-30deg); }
  .note-top { top:75px; }.note-top::before { width:35px; left:-45px; }
  .note-bottom { bottom:160px; }.hero-detail { width:105px; height:135px; }
  #products { column-gap:40px; grid-template-columns:.9fr 1.6fr; }#products .section-heading h2 { font-size:43px; }
  #products .product-filters { gap:17px; }#products .product-filters button { font-size:10px; }
  #products .product h3 { font-size:27px; }
  .protection-story { min-height:700px; }.story-content h2 { font-size:100px; }
  .service-section .service-grid { gap:45px; }.service-list h3 { font-size:26px; }
  #industries .section-heading h2 { font-size:43px; }.industries { margin-left:12%; }
  .about-grid { gap:55px; }.about-stamp strong { font-size:130px; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; padding-top:28px; gap:20px; padding-bottom:30px; }
  .hero-copy { padding-top:0; }.hero h1 { font-size:clamp(57px,12vw,88px); margin-top:28px; }.hero-description { margin-top:25px; }
  .hero-stage { min-height:550px; margin:0; }.assembly { width:290px; height:290px; top:42%; }
  .hero-stage .stage-coordinate { top:20px; left:0; font-size:7px; }
  .assembly-halo { top:16%; }.assembly-shadow { bottom:125px; left:5%; right:0; }
  .note-top { right:0; top:55px; }.assembly-note span { font-size:6px; }.assembly-note p { font-size:16px; }
  .note-top::before { display:none; }.note-bottom { bottom:100px; left:0; }.note-bottom::before { height:45px; top:-60px; }
  .hero-detail { bottom:48px; right:8px; width:86px; height:108px; }.hero-detail figcaption { font-size:6px; padding:4px; left:4px; right:4px; }
  .hero-stage .stage-baseline span { font-size:6px; letter-spacing:.5px; }.interaction-hint { display:none; }
  #products { display:block; padding-block:65px; }#products .section-heading { position:static; margin-bottom:28px; }
  #products .section-heading h2 { font-size:43px; margin-top:24px; }#products .section-heading > div > p { max-width:340px; margin-top:20px; }
  #products .section-heading::after { display:none; }#products .product-filters { margin-top:30px; gap:20px; }
  #products .product { padding-block:24px; }#products .product h3 { font-size:28px; }
  #products .product p { font-size:13px; }#products .range-note { margin-top:30px; }#products .range-note p { font-size:23px; }
  .protection-story { min-height:620px; }.story-content { padding-block:65px 42px; }
  .story-image { inset:0 0 0 15%; }.story-content h2 { font-size:clamp(64px,15vw,108px); margin-top:55px; }
  .story-content h2 span:nth-child(2) { margin-left:4%; }.story-content h2 em { margin-left:25%; }
  .story-bottom { margin-top:65px; gap:14px; flex-wrap:wrap; }.story-rule { width:45px; }.story-bottom p { font-size:11px; }.story-credit { margin:12px 0 0; width:100%; }
  .service-section { padding-top:0; padding-bottom:60px; }.service-section .service-grid { padding-top:60px; gap:40px; }
  .service-intro { position:static; }.service-intro figure { margin:35px 18px 0 8px; }.service-intro h2 { font-size:44px; }
  .service-list { padding-top:0; }.service-list article { padding-block:27px; }.service-list article > span { font-size:26px; }.service-list h3 { font-size:24px; }
  #industries { padding-block:65px; }#industries .section-heading h2 { font-size:41px; }.industries { margin:0; }
  .industries > a { font-size:21px; min-height:90px; padding-left:31px; padding-block:20px; grid-template-columns:1fr 25px; gap:8px; }
  .industries a span { grid-column:1; grid-row:2; font-size:11px; }.industries b { grid-column:2; grid-row:1/3; }.industries > a:hover { padding-left:35px; }
  .about-section { padding-block:65px; }.about-stamp { margin:0; padding:0 0 25px; border-bottom:1px solid #bbc3b3; }
  .about-stamp strong { font-size:125px; margin-left:-7px; }.about-grid { gap:35px; }.about-grid h2 { font-size:37px; }
  .contact-section h2 { font-size:68px; }
}
@media(max-width:380px) {
  .hero-stage { min-height:510px; }.assembly { width:240px; height:240px; top:44%; }
  .assembly-ring::after { inset:53px; }.assembly-core { inset:82px; }.assembly-core::after { inset:12px; }
  .bearing-race i { width:24px; height:24px; left:calc(50% - 12px); top:calc(50% - 12px); transform:rotateZ(calc(var(--i) * 20deg)) translateY(-93px) rotateZ(calc(var(--i) * -20deg)) rotateX(-30deg); }
  .ring-front { transform:translateZ(calc(90px * var(--spread))); }.assembly-core { transform:translateZ(calc(130px * var(--spread))); }
  .note-bottom { bottom:96px; }.hero-detail { width:76px; height:98px; }
  #products .section-heading h2 { font-size:43px; }#products .product h3 { font-size:28px; }
  .story-content h2 { font-size:65px; }.story-content h2 span:nth-child(2) { margin-left:0; }.story-content h2 em { margin-left:18%; }
}
@media(prefers-reduced-motion:reduce) {
  .assembly { transform:translate(-50%,-50%) rotateX(46deg) rotateY(-8deg) rotateZ(-12deg); }
  .story-image img,.story-content h2 span:nth-child(2),.story-content h2 em { transform:none; }
  .story-rule { transform:none; }
}
/* Separate layer distances and moving highlights respond to the same input. */
.hero-stage { --spread:calc(var(--pointer-spread,0) + var(--scroll-spread,0)); }
.assembly-ring span { background:radial-gradient(ellipse at var(--mx,40%) var(--my,30%),#ffffff65,transparent 60%); mix-blend-mode:soft-light; }
.assembly-ring,.fluid-layer,.assembly-core { transition:transform .7s cubic-bezier(.16,.7,.25,1); }
.section-heading.reveal-pending { opacity:1; transform:none; }
.section-heading.reveal-ready h2 { transition:clip-path .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1); clip-path:inset(0 0 -10% 0); }
.section-heading.reveal-pending h2 { clip-path:inset(0 0 100% 0); transform:translateY(20px); }
.service-intro.reveal-ready figure { transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1); clip-path:inset(-10% -10% -10% -10%); }
.service-intro.reveal-pending figure { clip-path:inset(0 100% 0 0); }
@media(prefers-reduced-motion:reduce) { .hero-stage { --spread:.18; }.section-heading.reveal-pending h2,.service-intro.reveal-pending figure { clip-path:none; transform:none; } }
@media(max-width:760px) {
  .assembly { top:45%; transform:translate(-50%,-50%) rotateX(46deg) rotateY(-8deg) rotateZ(calc(-12deg + var(--scroll-turn))) scale(.84); }
  .note-top { top:53px; }.note-bottom { bottom:90px; }
  .note-core { top:55%; right:0; }
  .note-core::before { width:35px; right:calc(100% + 9px); }
  .hero-stage .stage-baseline .interaction-hint { display:inline; color:var(--red); font-weight:700; }

  .eyebrow { font-size:11px; }
  .hero-description { max-width:390px; font-size:17px; }
  .section-heading > div > p { font-size:16px; }
  .service-intro > p:not(.eyebrow),.service-list p,.about-grid p:not(.eyebrow),.contact-section > div > p:not(.eyebrow) { font-size:16px; }
  .service-list article { padding-block:34px; }
  .service-list h3 { font-size:28px; }
  .industries > a { min-height:108px; font-size:24px; }
  .industries a span { font-size:13px; }
  .about-grid h2 { font-size:45px; line-height:1; }
  .contact-section > div > p:not(.eyebrow) { max-width:390px; }
  .contact-details > a:not(.text-link) { font-size:19px; }
  address { font-size:16px; }
  .enquiry h3 { font-size:29px; }
  label { font-size:14px; }
  .footer-main p,.footer-main nav { font-size:12px; }

  #products { padding-top:78px; }
  #products .section-heading { margin-bottom:38px; }
  #products .section-heading > .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:12px; line-height:1.2; letter-spacing:1.45px; font-weight:700; color:var(--red); }
  #products .section-heading > .eyebrow::after { content:""; flex:1; height:1px; background:var(--line); }
  #products .section-heading h2 { max-width:340px; font-size:clamp(46px,12.5vw,58px); line-height:.98; letter-spacing:-2.3px; margin-top:0; }
  #products .section-heading > div > p { max-width:360px; margin-top:24px; font-size:16px; line-height:1.65; }
  #products .product-filters { margin-top:36px; margin-bottom:8px; gap:8px 24px; }
  #products .product-filters button { font-size:12px; letter-spacing:.3px; }
  #products .product { padding-block:30px; grid-template-columns:1fr 48px; }
  #products .product-top { gap:12px; }
  #products .product-top > span:first-child { font-size:19px; }
  #products .product-top > span:last-child { font-size:9px; line-height:1.3; letter-spacing:.8px; }
  #products .product h3 { margin-top:17px; font-size:31px; line-height:1.04; letter-spacing:-1.2px; }
  #products .product p { margin-top:13px; font-size:15px; line-height:1.55; }
  #products .product-bottom > span { margin-top:20px; font-size:9px; line-height:1.65; letter-spacing:.45px; }
  #products .product-bottom a { font-size:27px; }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  .assembly { transform:translate(-50%,-50%) rotateX(46deg) rotateY(-8deg) rotateZ(-12deg) scale(.84); }
}
@media(min-width:761px) and (max-width:1100px) {
  .assembly { transform:translate(-50%,-50%) rotateX(calc(46deg + var(--rx))) rotateY(calc(-8deg + var(--ry))) rotateZ(calc(-12deg + var(--scroll-turn))) scale(.84); }
}
@media(min-width:761px) and (max-width:1100px) and (prefers-reduced-motion:reduce) {
  .assembly { transform:translate(-50%,-50%) rotateX(46deg) rotateY(-8deg) rotateZ(-12deg) scale(.84); }
}
@media(max-width:760px) { .note-top { top:43px; } }

/* Hero concept: lubricant travels through real machinery as the page moves. */
.flow-stage { --hero-progress:0; min-height:665px; isolation:isolate; }
.flow-stage::before { content:""; display:block; position:absolute; inset:54px -18px 72px 58px; border:1px solid #b8bab7; background:#d9dad6; transform:rotate(2.4deg); z-index:-2; }
.flow-stage::after { content:""; display:block; position:absolute; width:112px; height:112px; top:18px; right:-14px; border:1px solid #adb0ac; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 9px,#a8aba720 10px 11px); z-index:-1; }
.flow-shadow { position:absolute; left:10%; right:-2%; bottom:55px; height:70px; background:radial-gradient(ellipse,#181a1c55,transparent 68%); filter:blur(13px); transform:translateY(calc(var(--hero-progress) * 8px)); }
.flow-machine { position:absolute; inset:28px 24px 74px 18px; overflow:hidden; background:#242729; box-shadow:0 32px 45px -28px #151719aa; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--hero-progress) * -10px)); transition:transform .32s var(--ease-out); }
.flow-machine > img { width:100%; height:100%; object-fit:cover; object-position:50% 49%; filter:grayscale(1) contrast(1.16) brightness(.66); transform:scale(calc(1.07 + var(--hero-progress) * .035)); transition:transform .18s linear; }
.flow-machine::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#17191bd9 0,transparent 42%),linear-gradient(0deg,#111315b8 0,transparent 42%,#181a1d33); pointer-events:none; }
.flow-grid { position:absolute; inset:0; z-index:1; opacity:.22; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(120deg,#000,transparent 62%); }
.oil-flow { position:absolute; inset:-3%; width:106%; height:106%; z-index:2; overflow:visible; filter:saturate(1.08); }
.oil-flow path { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1600px; stroke-dashoffset:calc((1 - var(--hero-progress)) * 1600px); transition:stroke-dashoffset .12s linear; }
.oil-glow { stroke:#e5281e; stroke-width:52; opacity:.38; filter:url(#oil-glow); }
.oil-main { stroke:url(#oil-gradient); stroke-width:25; opacity:.92; }
.oil-highlight { stroke:#ffb2a5; stroke-width:3; opacity:.85; transform:translate(-5px,-4px); }
.flow-sheen { position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at var(--mx,65%) var(--my,28%),#fff5,transparent 28%); mix-blend-mode:screen; }
.flow-machine figcaption { position:absolute; z-index:4; left:18px; bottom:16px; margin:0; color:#d8dad9; font-size:8px; letter-spacing:1.35px; }
.flow-marker { position:absolute; z-index:5; display:grid; grid-template-columns:24px auto; grid-template-rows:auto auto; column-gap:8px; color:#f4f4f1; text-shadow:0 1px 10px #000; transform:translateY(calc((1 - var(--hero-progress)) * 12px)); opacity:calc(.22 + var(--hero-progress) * .78); }
.flow-marker::before { content:""; position:absolute; width:54px; height:1px; right:calc(100% + 11px); top:9px; background:#ef493e; }
.flow-marker span { grid-row:1/3; font-family:Georgia,serif; color:#f15a4d; font-size:18px; font-style:italic; }
.flow-marker b { font-size:9px; letter-spacing:1.4px; }
.flow-marker small { font-size:7px; letter-spacing:1px; color:#c6c8c7; margin-top:4px; }
.marker-heat { top:20%; right:8%; }
.marker-friction { top:47%; right:14%; }
.marker-protection { top:70%; right:5%; }
.flow-statement { position:absolute; z-index:6; left:-20px; bottom:112px; padding:18px 22px 20px; color:#fff; background:#171a1de8; border-left:4px solid var(--red); box-shadow:13px 16px 25px #1114; transform:translateX(calc((1 - var(--hero-progress)) * -14px)); }
.flow-statement > span { display:block; font-size:7px; letter-spacing:1.4px; color:#bbbebb; }
.flow-statement strong { display:block; margin-top:10px; font-size:29px; line-height:.91; letter-spacing:-1.4px; }
.flow-statement em { color:#fff; font-size:1.08em; }
.flow-stage .stage-coordinate { top:3px; left:18px; }
.flow-stage .stage-baseline { left:18px; right:24px; }

@media(max-width:1100px) {
  .flow-stage { min-height:645px; }
  .flow-machine { inset:38px 8px 75px 8px; }
  .flow-statement { left:-5px; }
}
@media(max-width:760px) {
  .flow-stage { min-height:570px; margin-top:10px; }
  .flow-stage::before { inset:49px -7px 68px 22px; }
  .flow-stage::after { width:82px; height:82px; right:-8px; top:17px; }
  .flow-machine { inset:34px 8px 70px 3px; }
  .flow-machine > img { object-position:52% 50%; }
  .flow-grid { background-size:52px 52px; }
  .flow-marker::before { width:30px; right:calc(100% + 7px); }
  .flow-marker b { font-size:8px; }.flow-marker small { font-size:6px; }
  .marker-heat { top:18%; right:6%; }.marker-friction { top:43%; right:7%; }.marker-protection { top:65%; right:4%; }
  .flow-statement { left:-5px; bottom:102px; padding:15px 17px 17px; }
  .flow-statement strong { font-size:25px; }
  .flow-stage .stage-baseline { left:3px; right:8px; }
  .flow-stage .stage-baseline span { font-size:6px; }
}
@media(max-width:380px) {
  .flow-stage { min-height:525px; }
  .flow-marker { display:none; }
  .flow-statement { bottom:92px; }
}
@media(prefers-reduced-motion:reduce) {
  .flow-stage { --hero-progress:1; }
  .flow-machine,.flow-machine > img,.flow-shadow,.flow-marker,.flow-statement { transform:none; }
  .oil-flow path { transition:none; }
}