/* ============================================================================
   Euro Textile Spares — brand-blue adaptation of the HP design language
   ========================================================================== */
:root {
    --primary: #2565a5;        /* logo blue */
    --primary-deep: #17426b;   /* pressed / hover-deep */
    --primary-bright: #2f74bb;
    --primary-soft: #d7e8f7;
    --ink: #1a1a1a;
    --charcoal: #3d3d3d;
    --graphite: #636363;
    --navy: #0e2a45;           /* deep-navy slabs / footer */
    --canvas: #ffffff;
    --cloud: #eef3f9;          /* cool blue-tinted section neutral */
    --mist: #f5f8fc;           /* lighter tint for gradient tops / hero */
    --glow: rgba(37,101,165,.10); /* faint brand-blue hero radial accent */
    --fog: #e2e9f2;
    --hairline: #e2e9f2;
    --steel: #c2c2c2;
    --on-dark: #ffffff;

    --r-card: 16px;
    --r-badge: 8px;
    --r-btn: 4px;
    --r-pill: 9999px;
    --shadow-lift: 0 2px 8px rgba(26,26,26,.08);
    --shadow-float: 0 12px 30px rgba(14,42,69,.16);
    --wrap: 1200px;
    --gap-section: 80px;

    --ff: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff);
    color: var(--ink);
    background: var(--canvas);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { line-height: 1.08; font-weight: 700; color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; }

.eyebrow {
    display: inline-block;
    font-size: 13px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--primary);
    margin-bottom: 14px;
}
.eyebrow.light { color: var(--primary-soft); }

/* ---- Buttons -------------------------------------------------------------- */
.btn-primary, .btn-outline, .btn-submit {
    display: inline-block; cursor: pointer; text-align: center;
    font-family: var(--ff); font-weight: 600; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase;
    border-radius: var(--r-btn); padding: 13px 26px;
    transition: all .2s ease; border: 1.5px solid transparent;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 12.5px; }

/* ---- Utility strip -------------------------------------------------------- */
.utility-strip {
    background: var(--navy); color: rgba(255,255,255,.85);
    font-size: 13px;
}
.util-inner { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 20px; }
.util-tagline { letter-spacing: .02em; }
.util-contacts { display: flex; gap: 22px; }
.util-contacts a { color: rgba(255,255,255,.85); }
.util-contacts a:hover { color: #fff; }

/* ---- Navbar --------------------------------------------------------------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow .3s ease, padding .3s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-img { height: 48px; width: auto; display: block; }
.logo-word { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 26px; }
.nav-links > li { position: relative; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: 15px; transition: color .2s; }
.nav-links a:not(.btn-primary):hover { color: var(--primary); }
.nav-cta { color: #fff !important; }
.caret { font-size: 11px; }

/* Products dropdown */
.has-dropdown .dropdown {
    list-style: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-badge);
    box-shadow: var(--shadow-float); padding: 6px; opacity: 0; visibility: hidden; transition: all .18s ease; z-index: 120;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
.dropdown li { display: block; }
.dropdown a { display: block; padding: 9px 14px; border-radius: 4px; font-size: 14.5px; white-space: nowrap; }
.dropdown a:hover { background: var(--primary-soft); color: var(--primary-deep); }

/* Sub-category flyout. .nav-links > li only sets position:relative on its direct children, so
   the flyout's own li needs it too or the panel would anchor to the navbar instead.
   left:100% with no horizontal gap — a gap would let the pointer fall out of :hover on the way
   across and snap the flyout shut. :focus-within mirrors the parent dropdown so tabbing works. */
.dropdown li.has-sub { position: relative; }
.dropdown .caret-sub { float: right; margin-left: 18px; line-height: 1.5; }
.has-sub .subdropdown {
    list-style: none; position: absolute; top: -7px; left: 100%;
    min-width: 210px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-badge);
    box-shadow: var(--shadow-float); padding: 6px; opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease; z-index: 130;
}
.has-sub:hover > .subdropdown, .has-sub:focus-within > .subdropdown { opacity: 1; visibility: visible; }
/* 44x44 is the touch target; the padding keeps the CONTENT box at exactly 34x28 (44-2*5, 44-2*8)
   under the global border-box, so the three bars and the .nav-toggle.open X below — whose
   translateY(9px) values are tuned to that 28px height — are geometrically unchanged. Resize via
   the padding, never the height, or the X stops meeting in the middle. */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; padding: 8px 5px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 3px; border-radius: 2px; background: var(--ink); transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- Hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 90px 0 100px;
    background:
        radial-gradient(1100px 520px at 85% -12%, var(--glow), transparent 60%),
        radial-gradient(760px 460px at -8% 108%, rgba(37,101,165,.06), transparent 62%),
        linear-gradient(180deg, var(--mist) 0%, var(--cloud) 100%);
}
.hero-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.hero h1 { font-size: 54px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 22px; }
.h1-brand  { color: var(--primary); }
.h1-suffix { color: var(--charcoal); font-size: .52em; font-weight: 700; letter-spacing: 0; }
/* Brand lockup: animated mark left, company name right (heroIntro() drives the two beats).
   The mark is sized in `em`, NOT px, on purpose — 1em is the h1's own font-size, which already
   steps 54 -> 44 -> 34px at the 900px and 640px breakpoints, so the mark rescales with the
   headline at every width without a single extra media query. */
.hero-lockup { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.lockup-mark { width: 1.55em; height: auto; flex: none; }
/* The name is a deliberate two-line stack (company name, then suffix beneath), not free-flowing
   text. Left to wrap on its own it breaks wherever the column happens to run out — at 500px that
   split "Pvt." from "Ltd.". Blocking both spans pins the break, and the tight line-height keeps
   the two lines reading as one lockup beside the mark rather than two stray lines. */
.lockup-name { display: block; line-height: 1.04; }
.lockup-name .h1-brand { display: block; }
.lockup-name .h1-suffix { display: block; margin-top: 6px; }
/* Deliberate override of the brand blue: the lockup reads blue mark + near-black wordmark, the
   way the supplied logo animation does. Delete this one rule to get the blue headline back. */
.hero-lockup .h1-brand { color: var(--ink); }
.hero-lead { font-size: 18px; color: var(--charcoal); max-width: 620px; }
.hero-lead strong { color: var(--ink); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
/* hero credentials panel */
.hero-badge {
    background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-lift);
    padding: 8px 28px; border: 1px solid var(--hairline);
}
.cred-item { padding: 18px 0; border-top: 1px solid var(--hairline); }
.cred-item:first-child { border-top: none; }
.cred-num { display: block; font-size: 34px; font-weight: 800; color: var(--primary); line-height: 1.05; }
.cred-label { display: block; margin-top: 5px; font-size: 13.5px; color: var(--charcoal); }

/* brand chevrons echoing the ETS mark */
.chevron { position: absolute; top: 0; height: 100%; width: 220px; background: var(--primary); opacity: .10; z-index: 1; }
.chevron-left { left: -70px; clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%); }
.chevron-right { right: -70px; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); background: var(--primary-bright); }

/* ---- About ---------------------------------------------------------------- */
.about { background: linear-gradient(180deg, var(--mist) 0%, var(--cloud) 34%); }

/* two-column intro */
.about-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; margin-bottom: 40px; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 24px; }
.about-eyebrow i { font-style: normal; opacity: .5; }
.about-cluster { display: flex; align-items: center; gap: 15px; }
.about-flags { display: flex; }
.about-flags .flag { width: 34px; height: 23px; margin-right: -8px; border: 2px solid #fff; border-radius: 4px; box-shadow: var(--shadow-lift); }
.about-cluster-label { font-size: 13.5px; font-weight: 600; color: var(--charcoal); line-height: 1.35; }
.about-intro-right h2 { font-size: 40px; line-height: 1.14; letter-spacing: -.01em; }
.about-intro-right h2 .muted { color: var(--graphite); font-weight: 800; }
.about-lead { margin-top: 18px; color: var(--charcoal); font-size: 16.5px; max-width: 58ch; }
.about-cta { margin-top: 26px; }
.about-cta span { margin-left: 4px; font-weight: 700; }

/* brand hub with orbiting fact cards
   ---------------------------------------------------------------------------
   GEOMETRY CONTRACT — two numbers put each connector on its dot at one end and its card at
   the other. Both are derived, not chosen; the core is centred in the middle column, so 50%
   IS the circle centre on both axes:
     120px = the 45deg dot position, radius 170 * 0.707
     230px = the card's inner edge, 170 (core half-width) + 60 (the column-gap below)
   The connectors are plain bordered boxes anchored with calc(50% +/- ...) rather than an SVG
   overlay: an overlay tracking a flexing container needs preserveAspectRatio="none", and its
   endpoints could only be percentages while the circle's edge is a fixed radius. Borders land
   on both ends exactly, at every width in the desktop range.

   The side columns are minmax(0, 1fr), NOT a px minimum, and that is load-bearing: px minimums
   make the three tracks overflow their container on narrow desktops, which shoves the core off
   centre and makes every connector miss. Collapsing tracks keep the core centred at any width,
   so the 1040px breakpoint below is a readability call about card width, not a geometry rescue. */
.about-hub { position: relative; max-width: 1120px; margin: 0 auto; min-height: 420px;
             display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
             column-gap: 60px; row-gap: 26px; align-items: center; }

/* centre plate */
.hub-core { grid-column: 2; grid-row: 1 / span 2; justify-self: center; position: relative;
            width: 340px; height: 340px; border-radius: 50%; display: grid; place-items: center;
            background: radial-gradient(circle at 50% 42%, #fff 0%, var(--mist) 62%, var(--primary-soft) 100%);
            box-shadow: 0 0 0 12px rgba(37,101,165,.05), 0 10px 26px rgba(14,42,69,.10); }
.hub-mark { width: 52%; height: auto; }

/* the four dots each connector terminates on, at 45deg around the circle */
/* Centred on its coordinate with negative margins, NOT translate(-50%,-50%): aboutHub() tweens
   .hub-dot's scale, and GSAP takes over the transform property without preserving the percentage
   translate — which leaves every dot 4.5px off its point, and the connectors short of it. */
.hub-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
           background: var(--primary); box-shadow: 0 0 0 3.5px #fff, 0 0 0 4.5px var(--fog); }
.hub-dot-tl { left: calc(50% - 120px); top: calc(50% - 120px); }
.hub-dot-bl { left: calc(50% - 120px); top: calc(50% + 120px); }
.hub-dot-tr { left: calc(50% + 120px); top: calc(50% - 120px); }
.hub-dot-br { left: calc(50% + 120px); top: calc(50% + 120px); }

/* Connectors: one short horizontal run from the card's inner edge to the dot on the circle, and
   no further. They used to be elbows continuing past the card to a badge at the hub's outer
   corner, which meant passing behind the card — dropped along with the corner badges. Spanning
   only the column gap, they overlap nothing, so they need no z-index handling. */
.hub-link { position: absolute; height: 0; border-top: 1.5px solid rgba(37,101,165,.28);
            pointer-events: none; }
.hub-link-tl { left: calc(50% - 230px); right: calc(50% + 120px); top: calc(50% - 120px); }
.hub-link-bl { left: calc(50% - 230px); right: calc(50% + 120px); top: calc(50% + 120px); }
.hub-link-tr { right: calc(50% - 230px); left: calc(50% + 120px); top: calc(50% - 120px); }
.hub-link-br { right: calc(50% - 230px); left: calc(50% + 120px); top: calc(50% + 120px); }

/* fact cards */
.hub-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card);
            box-shadow: var(--shadow-lift); padding: 20px 20px 22px; }
.hub-card-tl { grid-column: 1; grid-row: 1; }
.hub-card-bl { grid-column: 1; grid-row: 2; }
.hub-card-tr { grid-column: 3; grid-row: 1; }
.hub-card-br { grid-column: 3; grid-row: 2; }
.hub-title { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.hub-title b { color: var(--primary); }
.hub-text { margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--graphite); }

/* The badge sits in the card's normal flow, above the title, and MUST STAY THERE. It was
   absolutely positioned at .about-hub's outer corners once, which broke the moment the page
   animated: aboutHub() tweens .hub-card with y, GSAP leaves a transform on it, and a transformed
   element becomes the containing block for its absolutely-positioned descendants — so all four
   badges jumped into their own cards' corners, on top of the titles. Same trap as giving a card
   position:relative. Anything added inside a .hub-card must be laid out in the flow. */
.hub-badge { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; display: grid;
             place-items: center; color: var(--primary); background: var(--primary-soft);
             border: 1px solid #fff; box-shadow: var(--shadow-lift); }
.hub-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
                 stroke-linecap: round; stroke-linejoin: round; }

/* The hub needs 880px of its own width to keep ~210px cards (340 core + 60*2 gaps + 210*2
   cards), and .wrap's 24px padding means it only ever gets viewport - 48 — so the side-by-side
   layout fits from a 928px viewport. Flattening at 1040 is a comfort margin on top of that, and
   is why this is not the site's 900px layout breakpoint. Stacked, the connectors and dots have
   nothing to join, so they go; the cards are unchanged, the badge already being in the flow. */
@media (max-width: 1040px) {
    .about-hub { min-height: 0; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 16px; }
    .about-hub > * { grid-column: auto; grid-row: auto; }
    .hub-core { grid-column: 1 / -1; width: min(240px, 62vw); height: auto; aspect-ratio: 1; margin: 0 auto 12px;
                box-shadow: 0 0 0 8px rgba(37,101,165,.06), var(--shadow-lift); }
    .hub-link, .hub-dot { display: none; }
}
@media (max-width: 820px) {
    .about-intro { grid-template-columns: 1fr; gap: 26px; margin-bottom: 30px; }
    .about-intro-right h2 { font-size: 31px; }
}
@media (max-width: 560px) {
    .about-hub { grid-template-columns: 1fr; }
}

/* ---- Section scaffolding -------------------------------------------------- */
section { padding: var(--gap-section) 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: 38px; font-weight: 800; letter-spacing: -.01em; }
.section-subtext { margin-top: 14px; color: var(--charcoal); font-size: 17px; }

.products { background: linear-gradient(180deg, var(--mist) 0%, var(--cloud) 34%); }

/* ---- Category tabs -------------------------------------------------------- */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.cat-tab {
    font-family: var(--ff); font-weight: 600; font-size: 14.5px; cursor: pointer;
    background: #fff; color: var(--ink); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); padding: 10px 20px; transition: all .2s;
}
.cat-tab:hover { border-color: var(--primary); color: var(--primary); }
.cat-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.cat-panel { display: none; }
.cat-panel.is-active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.info-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.info-tags li { font-size: 13px; font-weight: 600; color: var(--primary-deep); background: var(--primary-soft); border-radius: var(--r-badge); padding: 6px 12px; }

/* manufacturer badge + flags */
.mfr-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--graphite); text-transform: uppercase; letter-spacing: .06em; }
.flag { display: inline-block; width: 22px; height: 15px; border-radius: 2px; background: var(--steel); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.flag-de { background: linear-gradient(#000 33.3%, #d00 33.3% 66.6%, #ffce00 66.6%); }
.flag-at { background: linear-gradient(#c8102e 33.3%, #fff 33.3% 66.6%, #c8102e 66.6%); }
.flag-ch { background: #d52b1e; position: relative; }
.flag-ch::after { content: ""; position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; background:
    linear-gradient(#fff,#fff) center/100% 34% no-repeat,
    linear-gradient(#fff,#fff) center/34% 100% no-repeat; }
.flag-tw { background: #fe0000; position: relative; overflow: hidden; }
.flag-tw::after { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 50%;
    background: #000095 radial-gradient(circle at 50% 50%, #fff 0 26%, transparent 27%); }

/* photo-left / copy-right feature layout — machine is never cropped, no dead space beside it */
.panel-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 26px; }
.panel-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--cloud); border-radius: var(--r-card); display: block; }
.panel-intro { margin-bottom: 0; }
.panel-intro h3 { font-size: 26px; margin: 10px 0 10px; }
.panel-intro p { color: var(--charcoal); max-width: 680px; }
/* Only Rotors currently has more than one <p> here (Rotor cup & bearing, then SolidRotor) —
   inert everywhere else. 14px matches .panel-note's bottom margin below. */
.panel-intro p + p { margin-top: 14px; }

/* ---- Spec tables (Rotors order-number lookup) ----------------------------- */
.rotor-tables { margin-top: 28px; }
.rotor-tables .parts-group-title { margin-top: 32px; }
.rotor-tables .parts-group-title:first-child { margin-top: 0; }
.panel-note { color: var(--charcoal); font-size: 14.5px; max-width: 680px; margin: 0 0 14px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-card); background: #fff; margin-bottom: 8px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.spec-table th, .spec-table td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--hairline); }
.spec-table thead th { background: var(--cloud); font-weight: 700; color: var(--ink); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover { background: var(--primary-soft); }

/* ---- Rotor spec-sheet drawing (Complete Rotors panel) --------------------- */
/* Draughting vernacular borrowed from the PhiComp catalogue: concentric geometry,
   a turning index ring, one speed note and a Ø dimension line. Both labels sit on
   the vertical centre line so they can never collide with the ring. */
.rotor-spec { max-width: 420px; margin: 0 auto 30px; text-align: center; }
.rotor-spec-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rotor-spec-svg text { font-family: var(--ff); font-variant-numeric: tabular-nums; }
.rotor-spec img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
/* The two steel-belt drawings (Ring Frame panel) are landscape catalogue pages at roughly
   3:2, not the square rotor SVG or a portrait product photo. At 420px their dimension
   letters and the "(number of hole rows)" annotations are too small to read, so they get
   their own width — .rotor-spec img's sizing above still applies unchanged. */
.rotor-spec.spec-wide { max-width: 980px; }

/* Two product photos side by side above a type list (rotor cup/bearing, SolidRotor).
   The fixed height + object-fit is load-bearing, not tidying: these four photos run from
   462x1200 portrait to 1200x900 landscape, so .rotor-spec img's height:auto would render
   one roughly three times the height of the one beside it and the pair stops reading as a
   pair. Same class of trap as .part-photo{min-height:0}, different mechanism. All four are
   shot on white, so letterboxing against #fff is invisible — keep that background if the
   photos are ever re-shot on a different backdrop. */
.rotor-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 640px; margin: 0 auto 22px; }
.rotor-photo-pair .rotor-spec { max-width: none; margin: 0; }
.rotor-photo-pair .rotor-spec img { height: 260px; object-fit: contain; background: #fff; }
.rotor-photo-pair .rotor-spec-cap { margin-top: 10px; }

/* index ring — the only animated element; one turn per 90s, ambient */
@keyframes rotorIndex { to { transform: rotate(360deg); } }
.rotor-index {
    /* both circles are concentric, so the group's fill-box centre is exactly the
       rotor centre — no need to hardcode 300/210 here */
    transform-box: fill-box; transform-origin: center;
    animation: rotorIndex 90s linear infinite;
}
.rotor-tick { fill: none; stroke: var(--steel); stroke-width: 8; }
/* majors read as *longer* ticks, not fatter ones: stroke-width is the radial length,
   the dash is the tick's width — so keep the dash close to the minors' */
.rotor-tick-major { fill: none; stroke: var(--primary); stroke-width: 16; opacity: .45; }

/* cup body */
.rotor-rim { fill: none; stroke: var(--primary); stroke-width: 2.2; }
.rotor-wall { fill: none; stroke: var(--primary); stroke-width: 1.4; opacity: .5; }
.rotor-groove { fill: none; stroke: var(--primary); stroke-width: 2.6; }
.rotor-cone { fill: none; stroke: var(--steel); stroke-width: 1; }
.rotor-hub { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 1.6; }
.rotor-shaft { fill: #fff; stroke: var(--primary); stroke-width: 1.6; }
.rotor-centre { fill: none; stroke: var(--graphite); stroke-width: .9; opacity: .55; stroke-dasharray: 16 4 3 4; }

/* Ø dimension line */
.dim-ext, .dim-line { fill: none; stroke: var(--graphite); stroke-width: .9; opacity: .45; }
.dim-arrow { fill: var(--graphite); opacity: .7; }
.dim-label { fill: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: .01em; }

/* speed note leader */
.spec-leader { fill: none; stroke: var(--graphite); stroke-width: .9; opacity: .45; }
.spec-note { fill: var(--graphite); font-size: 13px; font-weight: 700; letter-spacing: .08em; }

.rotor-spec-cap { font-size: 13px; line-height: 1.6; color: var(--graphite); max-width: 62ch; margin: 14px auto 0; }

/* ---- Coating key (decodes the D/N suffix used in both rotor tables) -------- */
.coating-key { margin-bottom: 30px; }
.coating-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-top: 14px; }
.coating-list > div { display: flex; align-items: baseline; gap: 12px; }
/* same chip treatment as .info-tags li, so the key reads as part of the same system */
.coating-list dt { flex: none; min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; color: var(--primary-deep); background: var(--primary-soft); border-radius: var(--r-badge); padding: 5px 10px; }
.coating-list dd { color: var(--charcoal); font-size: 14.5px; }
/* footnote carrying the values that are identical on every row of a table */
.spec-foot { font-size: 13px; margin: 10px 0 0; }
/* SolidRotor types — chips reusing .info-tags, since the type is the only varying value */
.rotor-type-list { margin: 0 0 4px; }
.rotor-type-list li { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- Navel photo cards ---------------------------------------------------- */
.navel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
.navel-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.navel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
/* Also a <button> — see the note on .part-photo above. */
.navel-photo { aspect-ratio: 4 / 3; background: #14170f; display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0; border: none; font: inherit; color: inherit; cursor: zoom-in; }
.navel-photo img { width: 100%; height: 100%; object-fit: cover; }
.navel-info { padding: 14px 15px 16px; }
.navel-info .type { font-size: 18px; font-weight: 800; color: var(--primary-deep); }
.navel-info .series { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); margin: 2px 0 12px; }
.navel-spec { font-size: 13.5px; color: var(--charcoal); margin-bottom: 4px; }
.navel-spec b { color: var(--ink); font-weight: 700; }
.navel-benefits { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.navel-benefits li { font-size: 11.5px; font-weight: 600; color: var(--primary-deep); background: var(--primary-soft); border-radius: var(--r-badge); padding: 4px 9px; }
.machines-note { margin-top: 28px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 20px 24px; }
.machines-note ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.machines-note li { font-size: 13.5px; color: var(--charcoal); position: relative; padding-left: 16px; }
.machines-note li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* ---- Parts toolbar + grid ------------------------------------------------- */
.parts-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
/* 16px is a hard floor, not a style choice: iOS Safari auto-zooms the whole page when a focused
   input is under 16px and never zooms back out. .contact-form input/textarea sets it for the same
   reason. Don't shrink this to fit a layout. */
.parts-search { flex: 1 1 320px; min-width: 240px; font-family: var(--ff); font-size: 16px; padding: 12px 16px; border: 1.5px solid var(--steel); border-radius: var(--r-btn); background: #fff; }
.parts-search:focus { outline: none; border-color: var(--primary); }
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.parts-count { font-size: 13px; color: var(--graphite); margin-bottom: 18px; }

.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
/* Twin Discs has only 4 cards, not the dozens Autoconer/Autocoro/Ring Frame render — auto-fill
   at the shared 158px floor leaves them small with empty reserved tracks. auto-fit collapses
   those unused tracks so the 4 real cards stretch to fill the row, and the higher floor further
   enlarges them. Scoped to this one grid, not the shared rule above. */
#twinDiscParts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.part-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-badge); overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; }
.part-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
/* min-height:0 is load-bearing, not tidying. .part-photo is a flex item of the column-flex
   .part-card, so its default min-height:auto resolves to its content's height — a portrait
   crop (e.g. 246x579) then forced the box to 403px and silently overrode aspect-ratio,
   which is what made the Ring Frame grid ragged. Autoconer's crops are all square so it
   never showed. Removing this brings the bug back for any non-square photo. */
/* .part-photo and .navel-photo are <button>s (they open the lightbox, so they must be keyboard
   operable) — hence the border/font reset. Everything else about the box is unchanged. */
.part-photo { aspect-ratio: 1 / 1; min-height: 0; background: #fff; padding: 6px; display: flex; align-items: center; justify-content: center; cursor: zoom-in;
    width: 100%; border: none; font: inherit; color: inherit; }
.part-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.part-fallback { width: 40px; height: 40px; color: var(--steel); }
.part-text { padding: 10px 12px 12px; }
.part-text .code { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--primary); margin-bottom: 2px; }
.part-text .en { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }

/* grouped (Autocoro) */
.parts-group-title { grid-column: 1 / -1; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-deep); margin: 22px 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-soft); }
/* These headings are the Products dropdown's sub-category anchor targets. The navbar is
   position:sticky at 84px, so without this a hash jump lands with the heading under it. */
.parts-group-title, .ring-group-title { scroll-margin-top: 100px; }
.parts-group-title:first-child { margin-top: 0; }
.parts-empty { grid-column: 1 / -1; color: var(--graphite); padding: 24px 0; font-size: 15px; }

/* Ring frame groups */
.ring-group-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 34px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-soft); }
/* Gap goes on every heading, with the first one pulled back in — the panel now has four of
   these and they follow different things (a parts grid, a .spec-foot note, a figure). The
   earlier `:nth-of-type(2), .parts-grid + …` pair keyed off DOM position and silently
   dropped the gap on any heading that wasn't the second h4 or directly after a grid. */
.ring-group-title:first-of-type { margin-top: 8px; }
/* With the .part-photo fix above, the only remaining height variation is name length —
   one line ("Spring") vs three ("Carrier Upper Part (Peg left · Gauge 70 mm)"). 1fr
   implicit rows all resolve to the tallest row in an auto-height grid, so this levels
   them at any breakpoint without a min-height to retune as the columns reflow. Only
   worth it here, where the two ranges sit side by side; Autoconer/Autocoro keep auto
   rows. Never line-clamp these names — the four Rieter carrier parts differ only by
   "(Peg left/right · Gauge 70/75 mm)". */
.ring-grid { margin-bottom: 8px; grid-auto-rows: 1fr; }

/* ---- Manufacturers -------------------------------------------------------- */
.mfr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mfr-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 28px 24px; transition: transform .2s, box-shadow .2s; }
.mfr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.mfr-card h3 { font-size: 19px; margin: 16px 0 2px; }
.mfr-country { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.mfr-card p { color: var(--charcoal); font-size: 14.5px; }
.mfr-logo { height: 48px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ---- Capabilities --------------------------------------------------------- */
.capabilities { background: linear-gradient(180deg, var(--mist) 0%, var(--cloud) 34%); }
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cap-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 34px 30px; }
.cap-num { font-size: 15px; font-weight: 800; color: var(--primary); letter-spacing: .1em; }
.cap-card h3 { font-size: 21px; margin: 12px 0 10px; }
.cap-card p { color: var(--charcoal); }

/* ---- Contact -------------------------------------------------------------- */
.contact { background: var(--navy); color: #fff; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-copy h2 { color: #fff; font-size: 38px; }
.contact-copy p { color: rgba(255,255,255,.78); margin-top: 14px; max-width: 480px; }
.contact-details { list-style: none; margin-top: 28px; }
.contact-details li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; color: rgba(255,255,255,.9); }
.contact-details li span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-soft); margin-bottom: 3px; }
.contact-details a { color: #fff; }
.contact-details address { font-style: normal; line-height: 1.5; }
.contact-form { background: #fff; border-radius: var(--r-card); padding: 38px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-float); }
.contact-form input, .contact-form textarea { width: 100%; font-family: var(--ff); font-size: 16px; padding: 15px 17px; border: 1.5px solid var(--steel); border-radius: var(--r-btn); background: #fff; color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); }
.contact-form textarea { resize: vertical; }
/* Sized here, not in the shared .btn-primary/.btn-outline/.btn-submit rule — that one
   governs every button on the site. Same specificity, later in the file, so it wins. */
.btn-submit { background: var(--primary); color: #fff; border: none; font-size: 15px; padding: 16px 26px; }
.btn-submit:hover { background: var(--primary-deep); }
.form-status { font-size: 14px; font-weight: 600; color: var(--primary-deep); min-height: 1px; }
.form-status.show { padding-top: 4px; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.75); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 32px; padding: 56px 24px 40px; }
.footer-logo { height: 120px; background: #fff; padding: 14px 22px; border-radius: var(--r-badge); margin-bottom: 18px; }
.footer-brand p { font-size: 14px; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { font-size: 14px; padding: 5px 0; }
.footer-col a { color: rgba(255,255,255,.75); }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom .wrap { padding: 18px 24px; }
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,.55); }

/* ---- Lightbox ------------------------------------------------------------- */
/* Single-photo zoom, not a gallery — there is deliberately no prev/next control. */
/* Set on <body> while the lightbox or the mobile menu is open. Without it, dragging over either
   overlay scrolls the page behind it on touch, so closing the lightbox drops you somewhere else.
   (This is the 90% fix; watertight iOS handling needs the position:fixed + scroll-restore dance,
   which is not worth it here.) Safe against the sticky navbar: the page cannot scroll while it is
   applied, and it is removed on close. */
.no-scroll { overflow: hidden; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,20,32,.92); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lb-img { max-width: 88vw; max-height: 86vh; border-radius: 6px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; font-size: 28px; line-height: 1;
    background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb-close:hover { background: rgba(255,255,255,.28); }
.lb-counter { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: 14px; }

/* ---- Scroll-reveal -------------------------------------------------------- */
.reveal-hidden { opacity: 0; transform: translateY(38px); transition: opacity .7s cubic-bezier(.5,0,0,1), transform .7s cubic-bezier(.5,0,0,1); }
.reveal-visible { opacity: 1; transform: translateY(0); }

/* ---- Clients slider -------------------------------------------------------- */
.clients { padding: 72px 0 56px; background: #fff; overflow: hidden; }
.clients-eyebrow { display: block; text-align: center; }
.clients-heading { text-align: center; font-size: 44px; font-weight: 800; color: var(--ink); margin-bottom: 46px; letter-spacing: -.01em; }
.slider-container { position: relative; width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.slider-track { display: flex; width: max-content; animation: scrollTrack 35s linear infinite; }
.client-logo { padding: 0 60px; display: flex; align-items: center; justify-content: center; gap: 14px; white-space: nowrap; cursor: default; }
.client-logo-img { height: 52px; width: auto; object-fit: contain; }
.gimatex-logo { height: 70px; }
.client-logo-name { font-size: 22px; font-weight: 700; color: var(--ink); }
.vardhman-divider { width: 3px; align-self: stretch; background: #f0b323; border-radius: 2px; }
.vardhman-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vardhman-name { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.vardhman-tagline { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
@keyframes scrollTrack { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================================
   Responsive
   ========================================================================== */
/* The logo wordmark widens the brand block enough that the inline nav links stop fitting
   below ~1100px, so the hamburger takes over here rather than at the 900px layout breakpoint. */
@media (max-width: 1100px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--hairline);
        box-shadow: var(--shadow-lift); padding: 8px 0;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    /* 85vh, not a pixel figure: the open menu is 6 categories + 13 sub-items + 5 top-level
       links + the CTA, which runs past 1000px and silently clipped at the old 720px cap.
       Being a viewport fraction plus overflow-y:auto, it absorbs new sub-items on its own —
       but re-check it here whenever the flyouts grow. */
    .nav-links.open { max-height: 85vh; overflow-y: auto; }
    .nav-links li { border-top: 1px solid var(--hairline); }
    .nav-links li:first-child { border-top: none; }
    .nav-links a { display: block; padding: 14px 24px; }
    .nav-cta { margin: 10px 24px; text-align: center; }
    /* Dropdown becomes a static indented list on mobile. The :hover/:focus-within variants are
       repeated here for SPECIFICITY, not style: .has-dropdown:hover .dropdown is (0,3,0) — a
       pseudo-class counts as a class — so a plain (0,2,0) override loses to it no matter that
       it sits later and inside a media query. It then re-applied the desktop
       translateX(-50%), sliding the list half its width out of the menu (which clips it:
       .nav-links.open only overrides overflow-y, so overflow-x stays hidden) and leaving a
       white gap. Don't collapse these three selectors back into one. */
    .has-dropdown .dropdown,
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown {
        position: static; transform: none; opacity: 1; visibility: visible;
        box-shadow: none; border: none; border-radius: 0; padding: 0; min-width: 0;
        background: var(--cloud);
        transition: none;   /* .dropdown sets `transition: all`, which would animate the above */
    }
    .dropdown a { padding: 12px 24px 12px 40px; font-size: 14px; }
    .dropdown li { border-top: 1px solid var(--hairline); }
    .caret { display: none; }
    /* No hover on touch — the flyout flattens into a further-indented static list. Same
       specificity guard as the block above: .has-sub:hover > .subdropdown is (0,3,0). It only
       sets opacity/visibility to values this rule already uses, so it does no harm today —
       but it is the identical trap, so don't leave it armed. Keep the child combinator. */
    .has-sub .subdropdown,
    .has-sub:hover > .subdropdown,
    .has-sub:focus-within > .subdropdown {
        position: static; opacity: 1; visibility: visible;
        box-shadow: none; border: none; border-radius: 0; padding: 0; min-width: 0;
        background: transparent;   /* inherits the dropdown's --cloud tint; the indent is the cue */
    }
    .subdropdown a { padding: 11px 24px 11px 56px; font-size: 13.5px; color: var(--charcoal); }
}

@media (max-width: 1024px) {
    .hero h1 { font-size: 44px; }
    .mfr-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .chevron { width: 150px; }
}

@media (max-width: 900px) {
    :root { --gap-section: 56px; }
    .logo-word { font-size: 15px; }
    .hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .contact-inner { grid-template-columns: 1fr; gap: 34px; }
    .cap-grid { grid-template-columns: 1fr; }
    .chevron { display: none; }
    .panel-feature { grid-template-columns: 1fr; gap: 18px; }
    .coating-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .logo-word { font-size: 12.5px; }
    .nav-logo-img { height: 40px; }
    .hero { padding: 56px 0 64px; }
    .hero h1 { font-size: 34px; }
    .hero-lead { font-size: 16px; }
    .section-head h2, .contact-copy h2 { font-size: 30px; }
    .contact-form { padding: 24px; }
    .cred-num { font-size: 30px; }
    .mfr-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 40px 24px 30px; }
    .parts-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-actions { justify-content: stretch; }
    .toolbar-actions .btn-outline, .toolbar-actions .btn-primary { flex: 1; }
    /* SVG text scales with the viewBox, so it shrinks with the drawing. Sizes here are
       user units — enlarging them makes the labels bigger *relative to* the rotor. The
       figure is only 420px wide now, so it renders near 1:1 on a phone and needs little. */
    .dim-label { font-size: 21px; }
    .spec-note { font-size: 15px; }
    /* Stay two-up rather than stacking — the pair is a comparison, and stacking breaks it. */
    .rotor-photo-pair { gap: 12px; }
    .rotor-photo-pair .rotor-spec img { height: 170px; }
    .client-logo { padding: 0 36px; gap: 10px; }
    .client-logo-img { height: 40px; }
    .gimatex-logo { height: 52px; }
    .vardhman-name { font-size: 16px; }
    .vardhman-tagline { font-size: 9px; }
    .client-logo-name { font-size: 17px; }
    .clients-heading { font-size: 34px; }
    .util-tagline { display: none; }
    .util-inner { justify-content: center; }
    /* Touch targets. .btn-sm carries "Enquire about …" and "Browse Catalogue ↗" — the conversion
       actions inside every product panel — and was ~34px tall; .cat-tab was ~40px. Both to 44px. */
    .btn-sm { padding: 13px 20px; }
    .cat-tab { padding: 12px 20px; }
    /* Scroll affordance for the wide tables (the belt table is 9 columns). Classic scroll-shadow:
       the `local` white covers move with the content, the `scroll` radial shadows are pinned to the
       box — so a shadow is only visible on a side that still has content off-screen, and hides
       itself at either end. Phone-only; on desktop the tables fit and this would be noise.
       The shadow shows through tbody (those cells have no background of their own); the tinted
       thead is opaque and covers it, which is fine — the cue is the row area. */
    .table-scroll {
        background:
            linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left / 34px 100% no-repeat local,
            linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right / 34px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(14,42,69,.15), rgba(14,42,69,0)) left / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(14,42,69,.15), rgba(14,42,69,0)) right / 12px 100% no-repeat scroll;
        background-color: #fff;
    }
}

/* The brand block is the one thing that can overflow a small phone: .logo-word is nowrap, and at
   320px the mark + gap + wordmark (~238px) plus the 44px hamburger leaves no margin inside .wrap's
   24px padding — which would scroll the whole page sideways. Letting it wrap costs nothing: two
   lines at line-height 1.1 is ~26px inside an 84px .nav-inner.
   Do NOT reach for `body { overflow-x: hidden }` instead — .navbar is position:sticky, and
   overflow on an ancestor re-parents a sticky element's scroll container and breaks it. */
@media (max-width: 420px) {
    .logo-word { white-space: normal; font-size: 12px; max-width: 150px; }
}

/* ============================================================================
   Polish pass (taste + UI/UX) — brand tokens only, no new colors/fonts
   ========================================================================== */

/* Consistent hover-lift on the remaining content cards (matches .mfr-card / .part-card) */
.cap-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--primary-soft); }

/* Tighter, more readable long-form line length */
.section-subtext, .cap-card p { max-width: 62ch; }

/* Keyboard-focus visibility (WCAG AA). Mouse focus stays clean via :focus-visible. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible, .btn-outline:focus-visible, .btn-submit:focus-visible,
.cat-tab:focus-visible, .nav-toggle:focus-visible,
.parts-search:focus-visible,
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
    outline: 3px solid var(--primary-bright);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion: stop the marquee and neutralise transitions/reveals. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .slider-track { animation: none !important; transform: none !important; }
    .rotor-index { animation: none !important; transform: none !important; }
    .cat-panel.is-active { animation: none !important; }
    .reveal-hidden { opacity: 1; transform: none; }
}