/* ============================================================================
   EUROCUTPRECISION — flagship visual system v2 (desktop prototype)
   ----------------------------------------------------------------------------
   Loaded only by the two redesigned templates via body.fx-page.

   v2 is a deliberate reset. v1 was editorial and data-led: a visible 12-column
   grid, mono labels everywhere, hairline dividers, photography sitting inside
   measured frames. Here the product leads.

     - Photography is full-bleed and sized in viewport units, not grid columns.
     - Mono is reserved for SKU, dimensions and status. Everything else is set
       in the sans face, so the page stops reading as a technical console.
     - Sections alternate environment — light, photographic, graphite — rather
       than one continuous white field broken up by rules.
     - Fewer visible components. Almost no borders.
   ========================================================================== */

.fx-page {
  --fx-canvas: #FFFFFF;
  /* Very slightly warm neutral: the studio background in the approved
     photography is warm, and a cool surface made that read as a colour error.
     Nothing is applied to the photographs themselves. */
  --fx-canvas-2: #F4F2F1;
  --fx-graphite: #0C0F14;

  --fx-ink: #0C0F14;
  --fx-ink-2: #444C59;
  /* Muted ink. Was #7A828F, which measures 3.88:1 on white and 3.47:1 on the warm
     panel tone — both below the 4.5:1 WCAG AA threshold for body text, on the notes
     that carry the DATA_REQUIRED statements. Those are the sentences a buyer most needs
     to read. #616875 measures 5.6:1 and 5.2:1. */
  --fx-ink-3: #616875;
  --fx-inv: #FFFFFF;
  --fx-inv-2: #A8B0BC;

  --fx-navy: #0E1A2F;
  --fx-navy-rule: #26374E;
  --fx-graphite-deep: #080B10;
  --fx-rule: #E4E7EC;
  --fx-rule-dark: #242A33;
  --fx-accent: #0B4096;
  --fx-accent-bright: #5B90E8;

  --fx-pad: clamp(1.25rem, 5vw, 6rem);

  background: var(--fx-canvas);
  color: var(--fx-ink);
  -webkit-font-smoothing: antialiased;
}

.fx-shell { width: 100%; max-width: 1720px; margin-inline: auto; padding-inline: var(--fx-pad); }

/* ---------- Typography: sans leads, mono is technical only -------------- */

.fx-page h1, .fx-page h2, .fx-page h3 { color: inherit; text-wrap: balance; margin: 0; }

/* Trimmed ~9% from the previous 5.4vw/5rem. The photograph is the first thing
   the eye should land on; the headline is second, and at the old size it was
   arguing with the tool rather than following it. */
.fx-display { font-size: clamp(2.25rem, 3.05vw, 3.3rem); line-height: 1.14; letter-spacing: -0.028em; font-weight: 700; max-width: 37.5rem; }
.fx-h2 { font-size: clamp(1.9rem, 3vw, 3.125rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.fx-h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.15; letter-spacing: -0.018em; font-weight: 600; }

/* Section label — sans, not mono. Quieter than v1's wide-tracked mono. */
.fx-label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-ink-3); }
.fx-label--onDark { color: var(--fx-inv-2); }

.fx-lead { font-size: clamp(1.0625rem, 1.15vw, 1.3125rem); line-height: 1.5; color: var(--fx-ink-2); max-width: 38ch; }
.fx-body { font-size: 1rem; line-height: 1.6; color: var(--fx-ink-2); max-width: 50ch; }
.fx-body--onDark { color: var(--fx-inv-2); }

/* ---------- Actions ----------------------------------------------------- */

.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 1.15rem 2rem; border: 0; cursor: pointer; text-decoration: none;
  line-height: 1.1; transition: background-color 150ms ease, color 150ms ease;
}
.fx-btn--primary { background: var(--fx-ink); color: var(--fx-inv); }
.fx-btn--primary:hover { background: var(--fx-accent); color: #fff; }
.fx-btn--ghost { background: transparent; color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-ink); }
.fx-btn--ghost:hover { background: var(--fx-ink); color: var(--fx-inv); }
.fx-btn--onDark { background: var(--fx-inv); color: var(--fx-ink); }
.fx-btn--onDark:hover { background: var(--fx-accent-bright); color: var(--fx-ink); }
.fx-btn:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 3px; }

.fx-arrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: 1rem; font-weight: 600; color: var(--fx-ink); text-decoration: none; }
.fx-arrow span { transition: transform 150ms ease; }
.fx-arrow:hover { color: var(--fx-accent); }
.fx-arrow:hover span { transform: translateX(4px); }
.fx-arrow--onDark { color: var(--fx-inv); }
.fx-arrow--onDark:hover { color: var(--fx-accent-bright); }

/* ---------- Header: generous, confident, uncluttered -------------------- */

.fx-page .site-header { background: var(--fx-canvas); border-bottom: 1px solid var(--fx-rule); box-shadow: none; }
.fx-page .site-header .container { max-width: 1720px; padding-inline: var(--fx-pad); }
.fx-page .site-header__inner { height: 92px; gap: clamp(1.5rem, 4vw, 4rem); }
.fx-page .site-header__logo { font-size: 1.4375rem; letter-spacing: -0.022em; gap: 0.85rem; color: var(--fx-ink); font-weight: 700; line-height: 1; }
.fx-page .site-header__logo-mark { height: 44px; }
.fx-page .site-nav { gap: clamp(1rem, 1.9vw, 2.25rem); }
.fx-page .site-nav li { white-space: nowrap; }
.fx-page .site-nav a { color: var(--fx-ink-2); font-size: 0.9375rem; font-weight: 500; padding-bottom: 0.4rem; border-bottom-width: 2px; white-space: nowrap; }
.fx-page .site-nav a:hover { color: var(--fx-ink); }
.fx-page .site-nav a[aria-current="page"] { color: var(--fx-ink); border-bottom-color: var(--fx-accent); }
.fx-page .rfq-indicator { color: var(--fx-ink-2); }
.fx-page .btn {
  border-radius: 0; font-family: inherit; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none; padding: 0.95rem 1.6rem;
  line-height: 1.1; border: 0; box-shadow: none;
}
/* THE COLOUR IS DELIBERATELY NOT OVERRIDDEN. Only the geometry above is.
   `.btn--primary` on these two pages is used by exactly three elements and all three
   are SHARED CHROME: the header button, its counterpart in the mobile menu, and the
   pre-footer band. Painting them --fx-ink made the site's single most important button
   near-black on two pages and brand blue on the other forty-three. The flagship's own
   editorial buttons are `.fx-btn`, which is styled separately and keeps the darker
   treatment — that was the part of this rule that was actually wanted. */

/* ============================================================================
   HOMEPAGE
   ========================================================================== */

/* Hero — full-bleed approved master.
   The photograph carries its own blue environment and metallic light response;
   nothing here touches its pixels. There is deliberately NO filter, NO overlay
   gradient, NO scrim and NO backdrop-filter on .fx-hero or .fx-hero__img.
   The desktop derivative (1672x602) is cut to this band own ratio, so between
   1024px and 2000px object-fit has nothing left to crop and the frame fills
   edge to edge. #010208 is kept as the section ground for the wider viewports
   above 2000px, where cover trims the reflection at the foot of the frame. */
.fx-hero {
  position: relative; width: 100%;
  height: clamp(460px, 36vw, 720px);
  overflow: hidden; background: #010208;
}
.fx-hero__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Top-anchored. The derivative is already framed on the tools, so this only
     bites above 2000px, where it takes the trim off the reflection at the
     bottom of the frame rather than off the cutting geometry. */
  object-position: center bottom;
}
.fx-hero__copy {
  position: absolute; z-index: 2;
  left: var(--fx-pad); top: 50%; transform: translateY(-52%);
  max-width: min(38rem, 50%);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.1rem, 1.5vw, 1.7rem);
  color: var(--fx-inv);
}
/* Headline separation. The composition deliberately runs the tail of line 1
   across the rear tool shank; this is what keeps those glyphs readable there.
   It is a shadow on the H1 glyphs and nothing else — the photograph is not
   touched, there is no box behind the text and no scrim over the frame. */
.fx-hero .fx-display { text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3); }
.fx-hero__rule { width: 64px; height: 3px; flex: none; background: var(--fx-accent-bright); }
.fx-hero__sub { font-size: clamp(0.9375rem, 1vw, 1.0625rem); line-height: 1.55; color: var(--fx-inv-2); max-width: 31rem; margin: 0; }
.fx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin-top: 0.2rem; }
.fx-hero .fx-btn--primary { background: var(--fx-accent); color: var(--fx-inv); }
.fx-hero .fx-btn--primary:hover { background: var(--fx-accent-bright); color: var(--fx-ink); }
.fx-hero__secondary { font-size: 0.9375rem; color: var(--fx-inv); }
.fx-hero__secondary:hover { color: var(--fx-accent-bright); }
/* Plate caption. Labels the photograph the way a printed catalogue labels a
   figure, which is what keeps the hero technical rather than promotional. */
.fx-hero__plate {
  position: absolute; z-index: 2; right: var(--fx-pad); bottom: clamp(1.1rem, 1.8vw, 1.9rem);
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: #7E92AE;
}
.fx-hero__plate::before { content: ""; width: 28px; height: 1px; background: var(--fx-accent-bright); flex: none; }

/* Specification strip. Confirmed values only. Bracketed top and bottom in
   cobalt: without the lower rule it merges into the programme navy and reads
   as part of that block instead of as the hero's closing element. */
.fx-specbar {
  background: var(--fx-navy);
  border-top: 2px solid var(--fx-accent);
  border-bottom: 2px solid var(--fx-accent);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4.5rem);
  padding: clamp(1rem, 1.5vw, 1.35rem) var(--fx-pad);
}
.fx-specbar span {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #C3D2E8; display: flex; align-items: center; gap: 0.85rem;
}
.fx-specbar span::before { content: ""; width: 6px; height: 6px; background: var(--fx-accent-bright); flex: none; }

.fx-btn--outlineLight { background: transparent; color: var(--fx-inv); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); }
.fx-btn--outlineLight:hover { background: var(--fx-inv); color: var(--fx-ink); }

/* Dark environment carrying the flute macro. The macro is almost entirely
   carbide, so it meets the graphite ground without an obvious photo edge. */
.fx-macro { background: var(--fx-graphite); color: var(--fx-inv); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.fx-macro__text { padding: clamp(3rem, 6vw, 6.5rem) clamp(2rem, 4vw, 4.5rem) clamp(3rem, 6vw, 6.5rem) var(--fx-pad); display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: center; }
.fx-macro__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Tool Programme — a programme strip, not a split panel.
   The DC SWISS idea is a centred header over one row of small tools on their
   own studio ground. Adapted here: our tools are horizontal, so each family
   gets a 3:2 plate rather than a tall silhouette, and the row sits on navy
   instead of white so the section stays inside the dark language the rest of
   the page speaks. The plate background is #EFE4E2, sampled from the
   photograph's own edges, so plate and image are one surface with no frame,
   no border and no visible boundary — the same rule the old panel followed,
   applied three times at a quieter scale. */
.fx-prog { background: var(--fx-navy); color: var(--fx-inv); padding-block: clamp(3.5rem, 6vw, 7rem); }
.fx-prog__head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem); }
.fx-prog__eyebrow { color: var(--fx-accent-bright); }
.fx-prog__head .fx-h2 { margin-top: 0.9rem; }
.fx-prog__lead { margin: 1.1rem auto 0; font-size: clamp(1rem, 1.05vw, 1.125rem); line-height: 1.6; color: #A7B7CF; max-width: 40ch; }

/* One row, three equal columns, one shared baseline grid. The plate is fixed
   at 3:2 for every family so the row scans as a set rather than three cards
   that happen to sit together. */
.fx-prog__strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.2vw, 3.5rem);
}
.fx-prog__item { display: flex; flex-direction: column; align-items: flex-start; }
.fx-prog__plate {
  width: 100%; aspect-ratio: 3 / 2; background: #EFE4E2; overflow: hidden;
  margin-bottom: clamp(1.25rem, 1.8vw, 1.75rem);
}
.fx-prog__plate picture { display: block; height: 100%; }
.fx-prog__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Awaiting photography. Same frame at the same ratio, but recessive rather
   than a second light panel: two blank plates at the weight of the real one
   would out-shout the family that actually has a product to show. Stated
   plainly instead of filled with a stand-in tool that is not the product. */
.fx-prog__plate--awaiting {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px var(--fx-navy-rule);
}
.fx-prog__plate--awaiting span {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #6E7F97;
}

/* Label block. A hairline over the meta line gives the three columns one
   horizontal register, which is what stops the row reading as cards. */
.fx-prog__meta {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  width: 100%; padding-top: clamp(0.9rem, 1.2vw, 1.1rem);
  border-top: 1px solid var(--fx-navy-rule);
}
.fx-prog__idx {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--fx-accent-bright); line-height: 1.6;
}
.fx-prog__status { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.fx-prog__status--live { color: var(--fx-accent-bright); }
.fx-prog__status--pending { color: #8B9BB4; }
.fx-prog__name { font-size: clamp(1.15rem, 1.35vw, 1.375rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; margin: 0.7rem 0 0; }
.fx-prog__note { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #A7B7CF; max-width: 34ch; }
.fx-prog__link { margin-top: auto; padding-top: clamp(1rem, 1.4vw, 1.4rem); font-size: 0.9375rem; }
.fx-prog__foot { margin-top: clamp(2.5rem, 4vw, 4rem); text-align: center; }
.fx-prog__foot .fx-arrow { font-size: 0.9375rem; color: var(--fx-inv-2); }
.fx-prog__foot .fx-arrow:hover { color: var(--fx-accent-bright); }

/* One tonal step lighter than the footer, with a hairline beneath, so the
   closing call to action does not merge into the footer as one dark mass. */
.fx-close { background: #12171F; color: var(--fx-inv); padding-block: clamp(3rem, 5.5vw, 5.5rem); border-bottom: 1px solid var(--fx-rule-dark); }
.fx-close__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }

/* ============================================================================
   PRODUCT DETAIL
   ========================================================================== */

.fx-pdp { background: var(--fx-canvas-2); }
/* 1.95fr gave the photograph 917px of a 1440px screen and the specification beside it
   470px — two thirds to a picture of a tool, one third to the dimensions somebody came
   to read. The gallery still leads; it no longer outweighs the panel nearly two to one. */
.fx-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(1.75rem, 2.6vw, 3rem); }

/* Stage first, thumb rail second. The gallery took the left viewport edge when the
   photograph was full-bleed and the widest element on the page; it is a contained plate
   now, and a white plate running off the edge of the screen reads as a mistake rather
   than as a decision. It takes the page's own gutter, mirroring the info column's. */
.fx-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: clamp(0.9rem, 1.2vw, 1.25rem); align-items: center; padding: clamp(1.75rem, 3vw, 3rem) 0 clamp(1.75rem, 3vw, 3rem) var(--fx-pad); }
.fx-gallery__rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
/* Catalogue plates, not shop thumbnails: still no shadow, no radius and no outlined
   card, and the active one is still marked by a single rule. What changed is that the
   plate is now drawn. Contained in an 84px box, the three frames paint 84x56, 32x84 and
   84x83 — so on the bare band tone the portrait crop was a sliver floating in a space
   with no edges, and the rail read as three different sizes. They carry the stage's own
   white plate now: the frames are equal because the plate is equal, and the rail and the
   stage are one surface. The rule is an inset shadow rather than a border so it cannot
   take 2px out of the box and leave the plate 84x82. */
.fx-thumb { display: block; width: 84px; height: 84px; padding: 6px; background: var(--fx-canvas); box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 150ms ease, opacity 150ms ease; opacity: 0.62; }
.fx-thumb picture { display: block; width: 100%; height: 100%; }
.fx-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fx-thumb:hover { opacity: 1; }
.fx-thumb.is-active { opacity: 1; box-shadow: inset 0 -2px 0 var(--fx-ink); }
.fx-thumb:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; }

/* THE STAGE IS THE CONSTANT, THE PHOTOGRAPH IS NOT.
   The three approved frames are 1.50, 0.385 and 1.01. A stage sized by its image —
   width:100%, height:auto — therefore resized the page every time the reader picked a
   thumbnail: 544px tall for the angled frame, 808px for the end face and 2118px for the
   full-length one, on a 900px screen. The frame is fixed here and each photograph is
   contained inside it, so switching changes the picture and nothing else. */
.fx-stage { height: clamp(360px, 34vw, 540px); background: var(--fx-canvas); }
.fx-stage__item { display: none; height: 100%; }
.fx-stage__item:target { display: block; }
.fx-stage:not(:has(.fx-stage__item:target)) .fx-stage__item.is-shown { display: block; }
.fx-gallery.is-enhanced .fx-stage__item { display: none; }
.fx-gallery.is-enhanced .fx-stage__item.is-shown { display: block; }
.fx-stage__item picture { display: block; height: 100%; }
/* CONTAIN, NEVER COVER. A cutting tool is a dimensioned object: a crop that slices the
   corner radius or the end of the shank out of frame misrepresents the thing being sold,
   and a crop that fills the frame with the middle of the flutes is the macro this
   gallery just dropped. The padding is the plate's margin, so no frame touches its edge. */
.fx-stage__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: clamp(0.75rem, 1.6vw, 1.75rem); }

.fx-pdp__info { display: flex; flex-direction: column; gap: 1.05rem; align-items: flex-start; padding-block: clamp(2rem, 4vw, 4rem); padding-right: var(--fx-pad); }
.fx-pdp__ident { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.fx-pdp__ident .fx-pdp__title { margin-top: 0.1rem; }
.fx-pdp__title { font-size: clamp(2.25rem, 3.3vw, 3.375rem); line-height: 1.03; letter-spacing: -0.032em; font-weight: 700; }
.fx-pdp__status { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-accent); }
.fx-pdp__status::before { content: ""; width: 7px; height: 7px; background: var(--fx-accent); }
.fx-pdp__sku { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--fx-ink-2); }
.fx-pdp__sku strong { color: var(--fx-ink); font-weight: 600; }
.fx-pdp__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fx-pdp__note { font-size: 0.875rem; line-height: 1.55; color: var(--fx-ink-3); max-width: 40ch; }

/* Three columns so five values resolve to a tidy 3 + 2, rather than a flex
   wrap that orphaned Flutes on its own row. */
.fx-keydims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.4vw, 1.35rem) clamp(1rem, 1.6vw, 1.5rem); width: 100%; margin-top: 0.25rem; }
.fx-keydim { display: flex; flex-direction: column; gap: 0.25rem; }
.fx-keydim__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-ink-3); }
.fx-keydim__value { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fx-ink); font-variant-numeric: tabular-nums; }

/* Specification — present and complete, but no longer the loudest thing. */
.fx-specwrap { padding-block: clamp(3rem, 5vw, 5.5rem); }
.fx-spec { width: 100%; border-collapse: collapse; max-width: 58rem; }
.fx-spec th, .fx-spec td { padding: 0.9rem 0; border-bottom: 1px solid var(--fx-rule); text-align: left; vertical-align: baseline; }
.fx-spec th { font-size: 0.9375rem; font-weight: 500; color: var(--fx-ink-2); width: 46%; }
.fx-spec td { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--fx-ink); font-variant-numeric: tabular-nums; }

/* Technical drawing — precise and supporting, no longer a giant sheet. */
/* Specification leads; the drawing is an aside beside it rather than a
   full-width section of its own. */
.fx-specgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.fx-drawaside { padding-top: 0.15rem; }
.fx-draw__sheet {
  background: var(--fx-canvas); box-shadow: inset 0 0 0 1px var(--fx-rule);
  padding: clamp(1rem, 1.5vw, 1.5rem);
  background-image: linear-gradient(#F0F1F3 1px, transparent 1px), linear-gradient(90deg, #F0F1F3 1px, transparent 1px);
  background-size: 24px 24px;
}
.fx-draw__sheet svg { display: block; width: 100%; max-width: 400px; height: auto; margin-inline: auto; }

/* Geometry band — full-bleed macro on graphite. */
/* Engineering — the technical register. Deeper than the programme navy so the
   page steps light → navy → near-black rather than repeating a tone. The
   photograph is natively dark (corners sample #000–#090d16, darker than this
   field), so it meets the section with no mask and no visible edge. The image
   is sized explicitly: it is portrait, and height:100% in an auto grid row let
   it drive the section past 1300px. */
.fx-geo {
  background: var(--fx-graphite-deep); color: var(--fx-inv);
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: stretch; border-top: 2px solid var(--fx-accent);
}
.fx-geo__text {
  padding: clamp(3rem, 4.8vw, 5.5rem) clamp(2rem, 4vw, 4.5rem) clamp(3rem, 4.8vw, 5.5rem) var(--fx-pad);
  display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; justify-content: center;
}
.fx-geo__rule { width: 64px; height: 3px; flex: none; background: var(--fx-accent-bright); }
.fx-geo__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 0.4rem; }
.fx-geo__meta span {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #7E92AE; display: flex; align-items: center; gap: 0.7rem;
}
.fx-geo__meta span::before { content: ""; width: 5px; height: 5px; background: var(--fx-accent-bright); flex: none; }
.fx-geo picture { display: block; }
.fx-geo__img { display: block; width: 100%; height: clamp(440px, 36vw, 680px); object-fit: cover; object-position: center 38%; }

/* Cutting-geometry feature (PDP) — the same graphite environment as .fx-geo.
   WEIGHTING REVERSED. It gave 58 columns to the photograph and 42 to the words, on the
   reasoning that the end face was the argument and the copy was a caption. The
   photograph could not carry that: z5-geo-face was a macro of a macro with the tool's
   outline cropped off all four sides, so 1114px of it at 1920 was a soft grey field
   with no geometry in it, painted 1:1 from a source with nothing in reserve.
   The panel leads now, and the image is a CONTROLLED FIELD rather than a column it
   fills — see .fx-face__frame. Still no border, radius, shadow or overlay. */
/* THE PHOTOGRAPH IS z5-geo-head AND IT IS A PORTRAIT — approved 2026-09-16. The field
   was a 5:4 landscape cut for the old end-face macro; it is the new source's own 3:4
   now, so `cover` still performs no crop at any width. A standing tool beside a column
   of stated facts is also the composition this section always wanted: the reader looks
   at the cutting head, and reads the numbers down the panel next to it. */
/* FOUR COLUMNS, TWO OF THEM GUTTERS. Proportional columns put the panel hard against
   the left edge and the photograph hard against the right, and on a 1920 screen that
   left roughly 700px of empty graphite between two things that are supposed to be read
   together. The band still bleeds; its CONTENT is a centred measure — a text column
   that stops at 32rem and an image field that stops at 420px — so the composition is
   the same shape at 1920 as it is at 1280 instead of being pulled apart by the width. */
.fx-face {
  background: var(--fx-graphite); color: var(--fx-inv);
  display: grid;
  grid-template-columns:
    minmax(var(--fx-pad), 1fr)
    minmax(0, 32rem)
    minmax(0, clamp(220px, 28vw, 420px))
    minmax(var(--fx-pad), 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch; min-height: clamp(440px, 34vw, 600px);
}
.fx-face__text {
  grid-column: 2;
  padding-block: clamp(2.5rem, 5vw, 5rem);
  display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; justify-content: center;
}
/* The three facts the heading does not state. A definition list, not a table: it is
   three pairs, and the specification table two sections down is where a table belongs. */
.fx-facefacts { margin: 0.75rem 0 0; display: grid; gap: 0.6rem; width: 100%; max-width: 22rem; }
.fx-facefacts__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fx-facefacts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.fx-facefacts dd { margin: 0; font-family: var(--font-mono); font-size: 1rem; color: var(--fx-inv); }

/* THE CONTROLLED FIELD.
   The frame is the photograph's own 3:4, so `cover` performs no crop at any width and
   the cutting edges are never sliced. The 420px cap is what keeps it sharp: the painted
   width lands near 400px on a desktop, so a 2× screen is served the 1086 derivative at
   about 1:1 and a 1× screen downsamples it 2.7:1. Enlarging this source past its own
   pixels would put the section straight back where it was, which is why the cap is here
   and not a percentage of whatever the viewport happens to be. */
.fx-face__frame {
  grid-column: 3;
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(1.5rem, 3vw, 3.5rem);
}
.fx-face picture { display: block; width: 100%; max-width: 420px; aspect-ratio: 3 / 4; }
.fx-face__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Variant range */
.fx-range { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--fx-rule); }
.fx-range a { background: var(--fx-canvas); padding: 1.1rem 1.25rem 1.25rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.35rem; transition: background-color 150ms ease; }
.fx-range a:hover { background: var(--fx-canvas-2); }
.fx-range a[aria-current="page"] { background: var(--fx-ink); }
.fx-range__d { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; color: var(--fx-ink); }
.fx-range__m { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fx-ink-3); }
.fx-range a[aria-current="page"] .fx-range__d { color: var(--fx-inv); }
.fx-range a[aria-current="page"] .fx-range__m { color: var(--fx-inv-2); }

/* Documentation / resources */
.fx-docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.fx-reslist { list-style: none; margin: 0; padding: 0; }
.fx-reslist li + li { border-top: 1px solid var(--fx-rule); }
.fx-reslist a { display: block; padding: 0.95rem 0; text-decoration: none; color: var(--fx-ink); font-size: 1rem; font-weight: 500; }
.fx-reslist a:hover { color: var(--fx-accent); }

/* ---------- Footer ------------------------------------------------------ */
.fx-page .site-footer { background: var(--fx-graphite); color: var(--fx-inv-2); padding: clamp(3.5rem, 5vw, 5rem) 0 2rem; }
.fx-page .site-footer .container { max-width: 1720px; padding-inline: var(--fx-pad); }
.fx-page .site-footer h3 { font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-inv-2); }
.fx-page .site-footer a { color: var(--fx-inv); font-size: 0.9375rem; line-height: 2; }
.fx-page .site-footer a:hover { color: var(--fx-accent-bright); }
.fx-page .footer-top { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--fx-rule-dark); }
.fx-page .footer-top__tagline { color: var(--fx-inv-2); font-size: 0.9375rem; max-width: 34ch; }
.fx-page .footer-bottom { border-top: 1px solid var(--fx-rule-dark); padding-top: 1.5rem; }
.fx-page .footer-bottom small, .fx-page .footer-bottom a { font-size: 0.8125rem; color: var(--fx-inv-2); }
/* The two rules that were here styled the footer's quotation buttons. The footer no
   longer has any — one pre-footer band replaced all three — so they styled nothing. */

/* ---------- Holding rules for narrow viewports --------------------------
   Mobile is explicitly out of scope for this phase. These rules only keep the
   prototype from breaking horizontally while the desktop direction is judged. */
@media (max-width: 1023px) {
  /* Mobile hero — genuinely recomposed, not the desktop frame squeezed.
     <picture> serves a separate crop, and that crop is shown WHOLE at its own
     ratio: height is auto and object-fit never engages, so on a phone there is
     no crop through the cutting geometry at all. Reading order is image, then
     headline and copy, then the CTAs — nothing sits over the tool. */
  .fx-hero { height: auto; display: block; background: var(--fx-graphite-deep); }
  .fx-hero picture { display: block; }
  .fx-hero__img { height: auto; }
  .fx-hero__copy {
    position: static; transform: none; max-width: none;
    padding: clamp(1.75rem, 6vw, 2.5rem) var(--fx-pad) clamp(2rem, 7vw, 2.75rem);
    gap: 1.05rem;
  }
  .fx-hero .fx-display { font-size: clamp(1.8rem, 7.2vw, 2.2rem); line-height: 1.12; letter-spacing: -0.028em; text-shadow: none; }
  .fx-hero__sub { font-size: 0.9375rem; }
  .fx-hero .fx-btn { padding: 0.9rem 1.4rem; font-size: 0.875rem; }
  .fx-hero__actions { gap: 1rem 1.5rem; }
  .fx-hero__plate { display: none; }
  .fx-specbar { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding-block: 1.15rem; }
  /* One column. The item is capped and centred so a full-width plate never
     becomes the oversized panel this redesign replaced. */
  .fx-prog__strip { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 3.25rem); }
  .fx-prog__item { width: 100%; max-width: 32rem; margin-inline: auto; }
  .fx-prog__head { text-align: left; margin-bottom: clamp(2rem, 7vw, 2.75rem); }
  .fx-prog__lead { margin-inline: 0; }
  .fx-prog__foot { text-align: left; }
  .fx-geo__img { height: clamp(300px, 80vw, 420px); }
}

/* Tablet band. The stacked layout starts at 1023px but <picture> only swaps to
   the re-framed crop below 768px, so 768-1023 still paints the wide master.
   Cap it and anchor to the top, so the crop comes off the shank end and never
   the cutting head. */
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-hero__img { height: clamp(320px, 42vw, 430px); object-fit: cover; object-position: center top; }
  .fx-page .site-header__inner { height: 72px; }
  .fx-page .site-header__logo-mark { height: 32px; }
}

/* THE TWO-COLUMN EDITORIAL GRIDS, STACKED.
 *
 * Every rule below used to live in the 768–1023px band above, which meant the flagship
 * grids collapsed to one column on a TABLET and stayed at two columns on a PHONE. The
 * narrowest screen kept the widest layout.
 *
 * Measured on the homepage at 375px: `.fx-geo` resolved to `165px 210px`, and the
 * paragraph inside the 165px column rendered 113px wide — about fourteen characters a
 * line. It never triggered the overflow check, because two columns inside 375px do not
 * overflow 375px; they just squeeze. The same applied to the flagship product page's
 * gallery, specification grid, documentation block and info column.
 *
 * `max-width: 1023px` now, so the stack applies from the tablet band all the way down.
 */
@media (max-width: 1023px) {
  .fx-geo, .fx-face, .fx-pdp__grid, .fx-specgrid, .fx-docs { grid-template-columns: minmax(0, 1fr); }
  .fx-macro__text, .fx-geo__text, .fx-face__text { padding-inline: var(--fx-pad); }
  /* Stacked, the desktop floor height would stretch the photograph's row; let
     the photograph's own 3:4 set the height instead. */
  .fx-face { min-height: 0; }
  /* Stacked, the four-column measure collapses to one and both children take it, so
     they need the page gutter back and their own grid-column assignments dropped. The
     420px cap carries over and is what stops a PORTRAIT becoming a wall: at 390 the
     field is 350 wide and 467 tall — a little over half a phone screen — instead of the
     920x1227 it would reach if it took the stacked column at a tablet width. The frame
     centres it, so the band does not look like a left-aligned accident on a tablet. */
  .fx-face__text, .fx-face__frame { grid-column: 1; }
  .fx-face__frame { padding: 0 var(--fx-pad) clamp(2.25rem, 7vw, 3rem); }
  .fx-gallery { grid-template-columns: minmax(0, 1fr); padding-inline: var(--fx-pad); }
  /* Stacked, the stage has the full column rather than two thirds of half of it, so
     34vw would make it taller than the phone it is on. Its own band, with a floor that
     keeps the portrait frame legible at 390. */
  .fx-stage { height: clamp(300px, 62vw, 460px); }
  .fx-gallery__rail { flex-direction: row; justify-content: center; }
  .fx-thumb { width: 72px; height: 72px; }
  .fx-pdp__info { padding-inline: var(--fx-pad); }
  .fx-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* At phone width the stacked text blocks take the page's own gutter rather than the
   editorial inset, and the two-up range grid becomes one. */
@media (max-width: 639px) {
  .fx-geo__text, .fx-face__text, .fx-macro__text { padding-block: clamp(2.25rem, 9vw, 3rem); }
  .fx-geo__meta { gap: 0.5rem 1.25rem; }
  .fx-range { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-btn, .fx-thumb, .fx-range a, .fx-arrow span { transition: none; }
}

/* The flagship header, below its comfortable width.
 *
 * WHAT WAS HERE, AND WHY IT IS GONE. A Sprint 2 rule hid `.site-header__actions .btn`
 * at every width below 1440px. On the two flagship pages that meant no Request a
 * Quotation button in the header at 1280px OR at 1440px — the one place on the site that
 * is supposed to keep one. It was written for a SEVEN-item navigation and a wider
 * wordmark; Sprint 3 cut the nav to six and retired the equivalent rule on the standard
 * header, and this one was missed.
 *
 * Removing it on its own is not the fix either: measured at 1024px the flagship header
 * then overflows by 102px, because this template sets a 23px wordmark, a 44px mark and
 * wider nav gaps than the shared header does.
 *
 * So the rule below shrinks the HEADER rather than removing the ACTION. Below 1440px the
 * flagship header steps back to the shared header's own dimensions — which demonstrably
 * fit six items plus the button at 1024px, because that is what the other forty-three
 * pages do. The editorial scale is a wide-screen luxury; the quotation route is not.
 */
@media (max-width: 1439px) {
  .fx-page .site-header__logo { font-size: 1.0625rem; gap: var(--space-3); }
  .fx-page .site-header__logo-mark { height: 32px; }
  .fx-page .site-nav { gap: clamp(0.85rem, 1.5vw, 1.75rem); }
  .fx-page .site-nav a { font-size: var(--type-small-size); }
  .fx-page .btn { font-size: 0.8125rem; padding: 0.8rem 1.1rem; }
}