@charset "utf-8";

/*
Theme Name: Ferrona - Steel & Metal Fabrication HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Press Bend & Spec Plate
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Tabs & Arrows
   7.3 Review Badge & Newsletter
   7.4 Post, Product & Team Cards
   7.5 Voices
   7.6 Figures
8. Sections
   8.1 Hero Sliders
   8.2 Overlap Panels
   8.3 Video Band
   8.4 History & Locations
9. Steel Cards
   9.1 Capability Cards
   9.2 Project Cards & Mosaic
   9.3 Certificate Plates
   9.4 Certificate Cards
   9.5 Sector Cards & Columns
   9.6 Plant Bars
   9.7 Material Rows
   9.8 Job Rows
10. Home One
   10.1 Quick Price
   10.2 Coil Band
   10.3 Output & Certificates
11. Home Two
   11.1 Giant Hero
   11.2 History & Questions
   11.3 Bend Band
   11.4 Capability Rows
   11.5 Workshop Mosaic
12. Home Three
   12.1 Light Hero
   12.2 Info Strip
   12.3 Plants, Tubes & Needs
   12.4 Director
13. Inner Pages
   13.1 Sidebar & Widgets
   13.2 Rows, Choices & Pages
   13.3 Quantity Stepper
14. Feature Pages
   14.1 Quote Builder
   14.2 Capability Details
   14.3 Materials, Projects & Careers Toolbars
   14.4 Process & Photo Bands
   14.5 Plants & Quality
   14.6 Project & Career Details
15. House Pages
   15.1 Account Dashboard
   15.2 Blog Extras
   15.3 Contact
   15.4 About, Profile & Timeline
   15.5 The Cut Plate
16. Stock Shop
   16.1 Shop Grid
   16.2 Product Page
   16.3 Bag, Checkout & Wishlist
   16.4 Toast
17. Blog & Account
   17.1 Blog List
   17.2 Blog Details
   17.3 Account Pages
   17.4 Coming Soon & 404
18. Subheader
19. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --fe-white: #FFFFFF;
  --fe-red: #E30D08;
  --fe-red-rgb: 227, 13, 8;
  --fe-red-deep: #B80A06;
  --fe-red-soft: #FF6A5E;
  --fe-ink: #101010;
  --fe-ink-rgb: 16, 16, 16;
  --fe-steel: #555D66;
  --fe-steel-rgb: 85, 93, 102;
  --fe-steel-light: #A7AFB7;
  --fe-night: #111214;
  --fe-night-rgb: 17, 18, 20;
  --fe-night-2: #0A0B0C;
  --fe-night-3: #1B1D20;
  /* semantic: the cool grey ground with white panels is the default; [data-theme="dark"] is the plant at night */
  --fe-bg: #F1F3F5;
  --fe-bg-rgb: 241, 243, 245;
  --fe-surface: #FFFFFF;
  --fe-surface-rgb: 255, 255, 255;
  --fe-alt: #FFFFFF;
  --fe-alt-rgb: 255, 255, 255;
  --fe-alt-2: #E7EAED;
  --fe-heading: #101010;
  --fe-heading-rgb: 16, 16, 16;
  --fe-text: #5E636A;
  --fe-muted: #656B72;
  --fe-line: #E1E4E8;
  --fe-line-2: #C9CED4;
  --fe-field: #F1F3F5;
  --fe-primary: #E30D08;
  --fe-on-primary: #FFFFFF;
  --fe-accent-text: #C80B07;
  --fe-steel-text: #555D66;
  --fe-ok: #1E8A4C;
  --fe-ok-text: #1A7A42;
  --fe-warn: #D98A0B;
  --fe-warn-text: #9A5600;
  --fe-error: #C80B07;
  --fe-error-text: #B00A06;
  --fe-shadow: 0 16px 40px rgba(16, 24, 32, 0.08);
  --fe-shadow-lg: 0 28px 64px rgba(16, 24, 32, 0.14);
  --fe-ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  /* type */
  --fe-ff-display: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --fe-ff-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --fe-fs-h1: clamp(40px, 4.3vw, 74px);
  --fe-fs-h2: clamp(30px, 2.9vw, 46px);
  --fe-fs-h3: clamp(21px, 1.55vw, 26px);
  --fe-fs-h4: 21px;
  --fe-fs-h5: 19px;
  --fe-fs-h6: 17px;
  /* WebGL colours (per section below): ground, pipe steel, the red valve runs, strength */
  --gl-1: #F1F3F5;
  --gl-2: #8A939C;
  --gl-3: #E30D08;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --fe-bg: #0E0F11;
  --fe-bg-rgb: 14, 15, 17;
  --fe-surface: #17191C;
  --fe-surface-rgb: 23, 25, 28;
  --fe-alt: #131518;
  --fe-alt-rgb: 19, 21, 24;
  --fe-alt-2: #1F2226;
  --fe-heading: #F2F3F5;
  --fe-heading-rgb: 242, 243, 245;
  --fe-text: #A9AEB4;
  --fe-muted: #969CA3;
  --fe-line: rgba(242, 243, 245, 0.1);
  --fe-line-2: rgba(242, 243, 245, 0.2);
  --fe-field: #1F2226;
  --fe-accent-text: #FF6A5E;
  --fe-steel-text: #A7AFB7;
  --fe-ok-text: #6FD49A;
  --fe-warn-text: #F2B45A;
  --fe-error-text: #FF7C70;
  --fe-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
  --fe-shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.5);
  --gl-1: #0E0F11;
  --gl-2: #6E7780;
  --gl-alpha: 0.42;
}
/* bands that stay dark in both themes: the footer, the top bar, the night bands */
.is-night {
  --fe-heading: #F2F3F5;
  --fe-heading-rgb: 242, 243, 245;
  --fe-text: rgba(242, 243, 245, 0.76);
  --fe-muted: rgba(242, 243, 245, 0.66);
  --fe-line: rgba(242, 243, 245, 0.12);
  --fe-line-2: rgba(242, 243, 245, 0.24);
  --fe-accent-text: #FF6A5E;
  --fe-steel-text: #B8C0C8;
  --fe-ok-text: #6FD49A;
  --fe-warn-text: #F2B45A;
  --fe-surface: #1B1D20;
  --fe-surface-rgb: 27, 29, 32;
  --fe-alt: #1B1D20;
  --fe-field: rgba(242, 243, 245, 0.07);
  --gl-1: #111214;
  --gl-2: #6E7780;
  --gl-alpha: 0.4;
  background-color: var(--fe-night);
  color: var(--fe-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--fe-bg);
  color: var(--fe-text);
  font-family: var(--fe-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--fe-ease), background-color 0.3s var(--fe-ease);
}
a:hover {
  color: var(--fe-accent-text);
}
::selection {
  background: var(--fe-red);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--fe-red);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Muli (Mulish) semibold headings, tight and plain, over Roboto */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--fe-fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fe-fs-h2);
  line-height: 1.12;
}
h3 {
  font-size: var(--fe-fs-h3);
  line-height: 1.25;
}
h4 {
  font-size: var(--fe-fs-h4);
  line-height: 1.3;
}
h5 {
  font-size: var(--fe-fs-h5);
  line-height: 1.34;
}
h6 {
  font-size: var(--fe-fs-h6);
  line-height: 1.4;
}
/* a heading at its outline level that looks like another level */
.fe-h1 {
  font-size: var(--fe-fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.fe-h2 {
  font-size: var(--fe-fs-h2);
  line-height: 1.12;
}
.fe-h3 {
  font-size: var(--fe-fs-h3);
  line-height: 1.25;
}
.fe-h4 {
  font-size: var(--fe-fs-h4);
  line-height: 1.3;
}
.fe-h5 {
  font-size: var(--fe-fs-h5);
  line-height: 1.34;
}
.fe-h6 {
  font-size: var(--fe-fs-h6);
  line-height: 1.4;
}
/* an accent word in a title: the signal red */
h1 em,
h2 em,
h3 em,
.fe-h2 em {
  font-style: normal;
  color: var(--fe-accent-text);
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.fe-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fe-text);
}
.fe-caps {
  font-family: var(--fe-ff-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fe-num {
  font-family: var(--fe-ff-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.fe-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* word masks for the R3 title rise: padded on every side so no letter is cut */
.fe-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.2em;
  margin: -0.14em -0.08em -0.2em;
  vertical-align: top;
}
.fe-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.fe-bg-alt {
  background-color: var(--fe-alt);
}
.fe-bg-alt-2 {
  background-color: var(--fe-alt-2);
}
/* the faint shop drawing under a light ground: a flat pattern with its bend lines and dimensions */
.fe-drawing {
  position: relative;
  isolation: isolate;
}
.fe-drawing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../img/decor/drawing.png) right -60px top 40px / 860px auto no-repeat;
  opacity: 0.7;
  pointer-events: none;
}
.fe-drawing.is-left::before {
  background-position: left -80px bottom 20px;
}
[data-theme="dark"] .fe-drawing::before {
  background-image: url(../img/decor/drawing-light.png);
  opacity: 0.35;
}
/* a white working panel: forms, summaries, wizards */
.fe-panel {
  padding: 44px 46px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow);
}
.fe-panel.is-night {
  background: var(--fe-night-3);
  box-shadow: none;
}
.fe-panel h2,
.fe-panel h3 {
  margin-bottom: 20px;
}
/* photo band: one style everywhere (cover photo under a night wash from the copy side, light copy) */
.fe-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--fe-night);
  --fe-heading: #F2F3F5;
  --fe-text: rgba(242, 243, 245, 0.86);
  --fe-muted: rgba(242, 243, 245, 0.72);
  --fe-accent-text: #FF6A5E;
  --fe-line: rgba(242, 243, 245, 0.18);
  --fe-line-2: rgba(242, 243, 245, 0.3);
  color: var(--fe-text);
}
.fe-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 12, 0.92) 0%, rgba(10, 11, 12, 0.72) 48%, rgba(10, 11, 12, 0.28) 100%);
}
.fe-photo-band.is-centre::after {
  background: rgba(10, 11, 12, 0.6);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a small red label set on its side beside the title, the title indented next to it */
.fe-title {
  margin-bottom: 60px;
}
/* the label stands in the head's first column: a label longer than its title makes the head as tall as the label */
.title-head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 14px;
}
.title-head > :not(.fe-eyebrow) {
  grid-column: 2;
}
.fe-eyebrow {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.fe-title h2,
.fe-title .fe-h2 {
  max-width: 880px;
}
.fe-title .fe-lead {
  max-width: 620px;
  margin: 22px 0 0 32px;
}
/* centred titles carry the label above, flat, after a red square */
.fe-title.text-center .title-head {
  display: block;
}
.fe-title.text-center .fe-eyebrow {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin-bottom: 14px;
  writing-mode: horizontal-tb;
  transform: none;
}
.fe-title.text-center .fe-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--fe-red);
}
.fe-title.text-center h2,
.fe-title.text-center .fe-h2,
.fe-title.text-center .fe-lead {
  margin-left: auto;
  margin-right: auto;
}
.fe-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.fe-title.is-split .fe-lead {
  max-width: 480px;
  margin: 0;
}
/* the red square marker before a small label */
.fe-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.fe-mark::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: var(--fe-red);
}

/*----- 1.4 Buttons & Links -----*/
/* the base's square red button with a long thin arrow; house physics: a lift, the arrow runs out and comes back */
.fe-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 58px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: var(--fe-primary);
  color: var(--fe-on-primary);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--fe-ease), color 0.35s var(--fe-ease), box-shadow 0.35s var(--fe-ease), transform 0.35s var(--fe-ease);
}
.fe-btn:hover {
  background: var(--fe-ink);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(16, 16, 16, 0.2);
  transform: translateY(-2px);
}
[data-theme="dark"] .fe-btn:hover,
.is-night .fe-btn:hover,
.fe-photo-band .fe-btn:hover {
  background: #FFFFFF;
  color: var(--fe-ink);
}
/* the long arrow: a hairline with one barb */
.fe-arr {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 30px;
  height: 1px;
  background: currentColor;
}
.fe-arr::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  height: 1px;
  background: currentColor;
  transform: rotate(35deg);
  transform-origin: 100% 50%;
}
.fe-btn:hover .fe-arr,
.fe-more:hover .fe-arr,
.fe-link:hover .fe-arr {
  animation: fe-arrow-run 0.6s var(--fe-ease);
}
@keyframes fe-arrow-run {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(26px);
    opacity: 0;
  }
  46% {
    transform: translateX(-26px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* dark: an ink face */
.fe-btn.is-dark {
  background: var(--fe-ink);
}
.fe-btn.is-dark:hover {
  background: var(--fe-red);
  color: #FFFFFF;
}
[data-theme="dark"] .fe-btn.is-dark {
  background: #2A2D31;
}
/* tonal: a white face on the grey ground (grey on white panels), ink text, a red arrow */
.fe-btn.is-tonal {
  background: var(--fe-surface);
  color: var(--fe-heading);
}
.fe-btn.is-tonal .fe-arr {
  color: var(--fe-red);
}
.fe-bg-alt .fe-btn.is-tonal,
.fe-panel .fe-btn.is-tonal {
  background: var(--fe-field);
}
.fe-btn.is-tonal:hover {
  background: var(--fe-red);
  color: #FFFFFF;
}
.fe-btn.is-tonal:hover .fe-arr {
  color: #FFFFFF;
}
.is-night .fe-btn.is-tonal,
.fe-photo-band .fe-btn.is-tonal {
  background: rgba(242, 243, 245, 0.1);
  color: #F2F3F5;
}
.is-night .fe-btn.is-tonal:hover,
.fe-photo-band .fe-btn.is-tonal:hover {
  background: #FFFFFF;
  color: var(--fe-ink);
}
.fe-btn.is-sm {
  height: 46px;
  padding: 0 20px;
  font-size: 14px;
}
.fe-btn.is-block {
  width: 100%;
}
.fe-btn i.fas,
.fe-btn i.far {
  font-size: 13px;
}
/* "read more": the base's small ink words and the long arrow after them */
.fe-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.fe-more .fe-arr {
  color: var(--fe-red);
}
.fe-more:hover {
  color: var(--fe-accent-text);
}
.fe-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14px;
  font-weight: 700;
}
.fe-link i {
  color: var(--fe-red);
  font-size: 12px;
  transition: transform 0.35s var(--fe-ease);
}
.fe-link:hover i {
  transform: translateX(5px);
}
.fe-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
/* the base's square slider arrows: an ink square and a red square, a long arrow in each */
.fe-sq-arrows {
  display: inline-flex;
}
.fe-sq-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: var(--fe-ink);
  color: #FFFFFF;
  transition: background-color 0.3s ease;
}
.fe-sq-arrow + .fe-sq-arrow {
  background: var(--fe-red);
}
.fe-sq-arrow:hover {
  background: var(--fe-red-deep);
}
.fe-sq-arrow.is-prev .fe-arr {
  transform: scaleX(-1);
}
.fe-sq-arrow.is-prev:hover .fe-arr {
  animation: none;
}
.fe-sq-arrow.swiper-button-disabled {
  opacity: 0.45;
  cursor: default;
}

/*----- 1.5 Forms -----*/
.fe-field {
  position: relative;
  margin-bottom: 20px;
}
.fe-field label,
.fe-flabel {
  display: block;
  margin-bottom: 8px;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14px;
  font-weight: 700;
}
/* tonal fields: a grey face on white (a white face on the grey ground), no outline; focus draws a red line under them */
.fe-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.on-ground .fe-input,
.fe-bg-ground .fe-input {
  background: var(--fe-surface);
}
textarea.fe-input {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}
.fe-input::placeholder {
  color: var(--fe-muted);
}
.fe-input:focus {
  border-bottom-color: var(--fe-red);
  box-shadow: 0 8px 20px rgba(var(--fe-red-rgb), 0.08);
  outline: 0;
}
.fe-input.is-invalid {
  border-bottom-color: var(--fe-error);
  box-shadow: inset 0 -1px 0 var(--fe-error);
}
.fe-input[type="date"],
.fe-input[type="number"] {
  color-scheme: light;
}
[data-theme="dark"] .fe-input[type="date"],
[data-theme="dark"] .fe-input[type="number"],
.is-night .fe-input[type="date"] {
  color-scheme: dark;
}
.fe-field > i {
  position: absolute;
  right: 18px;
  top: 50px;
  color: var(--fe-red);
  font-size: 14px;
  pointer-events: none;
}
.fe-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--fe-muted);
}
.form-status.is-ok {
  color: var(--fe-ok-text);
}
.form-status.is-error {
  color: var(--fe-error-text);
}
.fe-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  cursor: pointer;
}
.fe-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--fe-red);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* the base's red social squares */
.fe-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fe-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-size: 14px;
  transition: background-color 0.3s ease, transform 0.3s var(--fe-ease);
}
.fe-social a:hover {
  background: #FFFFFF;
  color: var(--fe-ink);
  transform: translateY(-3px);
}
/* a round portrait beside a name (people are always round) */
.fe-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces + a count */
.fe-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.fe-avatars .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 14.5px;
}
.fe-avatars .txt b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 16px;
  font-weight: 700;
}
.fe-faces {
  display: inline-flex;
  align-items: center;
}
.fe-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--fe-surface);
  border-radius: 50%;
  object-fit: cover;
}
.fe-faces img:first-child {
  margin-left: 0;
}
.fe-faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--fe-surface);
  border-radius: 50%;
  background: var(--fe-red);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}
.is-night .fe-faces img,
.is-night .fe-faces .more,
.fe-photo-band .fe-faces img,
.fe-photo-band .fe-faces .more {
  border-color: var(--fe-night);
}
/* the base's square play button */
.fe-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  background: var(--fe-ink);
  color: #FFFFFF;
  font-size: 20px;
  transition: transform 0.4s var(--fe-ease), background-color 0.4s ease;
}
.fe-play i {
  margin-left: 4px;
}
.fe-play:hover {
  background: var(--fe-red);
  color: #FFFFFF;
  transform: scale(1.06);
}
/* progress bar (throughput, slots, places): filled by the engines */
.fe-meter {
  position: relative;
  height: 6px;
  background: var(--fe-alt-2);
}
.is-night .fe-meter {
  background: rgba(242, 243, 245, 0.12);
}
.fe-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--fe-red);
  transition: width 1.2s var(--fe-ease);
}
.fe-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--fe-red);
  font-size: 12px;
}
/* a small tag (In Stock, Renewal Due, Running) */
.fe-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fe-tag.is-ok {
  color: var(--fe-ok-text);
}
.fe-tag.is-warn {
  color: var(--fe-warn-text);
}
.fe-tag.is-steel {
  color: var(--fe-steel-text);
}
/* a status dot before "running" and "open" lines */
.fe-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--fe-muted);
  vertical-align: middle;
}
.is-open .fe-dot,
.fe-dot.is-open {
  background: var(--fe-ok);
  box-shadow: 0 0 0 4px rgba(30, 138, 76, 0.16);
}
.is-closed .fe-dot {
  background: var(--fe-warn);
  box-shadow: 0 0 0 4px rgba(217, 138, 11, 0.16);
}
.fe-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--fe-ink);
  color: #F2F3F5;
  font-size: 15.5px;
  box-shadow: var(--fe-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--fe-ease);
}
.fe-toast i {
  color: var(--fe-red-soft);
}
.fe-toast.is-shown {
  transform: translate(-50%, 0);
}
.fe-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--fe-red);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--fe-ease), background-color 0.3s ease;
}
.fe-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fe-back-top:hover {
  background: var(--fe-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.fe-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.fe-gl.is-on {
  opacity: 1;
}
/* illustrated icons in two inks: red lines on the light grounds, a lighter red on dark */
.fe-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.fe-ico img {
  width: 100%;
  height: 100%;
}
.fe-ico .ico-night,
[data-theme="dark"] .fe-ico .ico-day,
.is-night .fe-ico .ico-day,
.fe-photo-band .fe-ico .ico-day {
  display: none;
}
[data-theme="dark"] .fe-ico .ico-night,
.is-night .fe-ico .ico-night,
.fe-photo-band .fe-ico .ico-night {
  display: block;
}
/* label / value rows (tolerances, capacities, facts) */
.fe-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fe-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fe-line);
}
.fe-rows li > span {
  color: var(--fe-text);
}
.fe-rows li > b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-weight: 700;
  text-align: right;
}
.fe-rows li.is-today > span,
.fe-rows li.is-today > b {
  color: var(--fe-accent-text);
}
/* a small product beside its name and price (sidebars, the article) */
.product-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fe-line);
  color: var(--fe-heading);
}
.product-mini img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #F2F3F5;
}
.product-mini > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.product-mini small {
  color: var(--fe-accent-text);
  font-size: 13px;
}
.product-mini b {
  font-family: var(--fe-ff-display);
  font-size: 16px;
  font-weight: 700;
}
.product-mini em {
  font-style: normal;
  font-size: 15px;
}

/*----- 1.7 Press Bend & Spec Plate -----*/
/* Press Bend: cards fold down from upright along their top edge (main.js); the fold is a transform only */
.fe-bend {
  backface-visibility: hidden;
}
/* the spec plate: a small brushed-steel plate with two rivets slides in on hover with the grade and thickness */
.fe-specd {
  position: relative;
}
.fe-spec {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 118px;
  padding: 10px 26px 10px 14px;
  background:
    radial-gradient(circle at calc(100% - 11px) 9px, #6B737C 0 2px, rgba(255, 255, 255, 0.7) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 9px), #6B737C 0 2px, rgba(255, 255, 255, 0.7) 2.5px, transparent 3.5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(0, 0, 0, 0.04) 1px 3px),
    linear-gradient(160deg, #E4E7EA 0%, #B9C0C7 48%, #D8DCE0 100%);
  box-shadow: 0 10px 22px rgba(16, 24, 32, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #1B1E21;
  font-family: var(--fe-ff-body);
  line-height: 1.2;
  clip-path: inset(0 0 0 100%);
  transform: translateX(18px);
  transition: clip-path 0.5s var(--fe-ease), transform 0.5s var(--fe-ease);
  pointer-events: none;
}
.fe-spec b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fe-spec i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: #3D434A;
  letter-spacing: 0.04em;
}
.fe-specd:hover .fe-spec,
.fe-specd:focus-within .fe-spec {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/*======================
2. Preloader
========================*/
/* Laser Cut: a brushed steel sheet fills the screen; a laser head traces the Fe tile out of it (canvas, main.js),
   the cut piece drops out of the sheet, the red tile shows through the hole, then the sheet lifts away */
.fe-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: #2B3036;
}
html:not(.js) .fe-preloader {
  display: none;
}
.fe-preloader canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* the readout under the cut: the job card, typed as the head runs */
.pre-readout {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  display: flex;
  gap: 26px;
  color: rgba(242, 243, 245, 0.8);
  font-family: var(--fe-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pre-readout b {
  color: #FF6A5E;
  font-weight: 700;
}

/*======================
3. Header
========================*/
/* Ferrona's header, in two moods from the base: "over" lies on the first dark band (the heroes and the photo title
   bands) with light ink and the red plate flush in its corner; "solid" is the white bar. Both turn into the white
   bar once the page scrolls. */
.fe-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--fe-surface);
  --hd-ink: var(--fe-heading);
  --hd-hover: var(--fe-accent-text);
  --hd-icon: var(--fe-field);
  --hd-line: var(--fe-line);
}
.fe-header .wide {
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
}
.fe-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.fe-logo img {
  height: 48px;
  width: auto;
}
.fe-logo .logo-light,
[data-theme="dark"] .fe-logo .logo-main {
  display: none;
}
[data-theme="dark"] .fe-logo .logo-light {
  display: block;
}
/* over the dark band the logo is always the light one */
.header-style-over:not(.is-sticky) .fe-logo .logo-main {
  display: none;
}
.header-style-over:not(.is-sticky) .fe-logo .logo-light {
  display: block;
}
.header-style-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-over:not(.is-sticky) {
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-hover: #FF6A5E;
  --hd-icon: rgba(255, 255, 255, 0.12);
  --hd-line: rgba(255, 255, 255, 0.14);
}

/*----- 3.1 Top Bar -----*/
/* the oil home's black strip: the sales desk, the phone, the mail; links, currency and language on the right */
.header-top {
  height: 42px;
  background: var(--fe-night-2);
  color: rgba(242, 243, 245, 0.78);
  font-size: 13.5px;
  overflow: visible;
  transition: height 0.4s var(--fe-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
  padding-right: 40px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: #FF6A5E;
}
.header-top i {
  margin-right: 8px;
  color: #FF6A5E;
  font-size: 12px;
}
.fe-open {
  display: inline-flex;
  align-items: center;
}
.header-top .fe-dot {
  background: rgba(242, 243, 245, 0.5);
}
.header-top .is-open .fe-dot {
  background: #3FC77A;
  box-shadow: 0 0 0 4px rgba(63, 199, 122, 0.2);
}
.header-top .is-closed .fe-dot {
  background: #F2B45A;
  box-shadow: 0 0 0 4px rgba(242, 180, 90, 0.2);
}
.header-top .top-right > a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 12px;
  background: rgba(242, 243, 245, 0.24);
  transform: translateY(-50%);
}
/* the currency switch: three codes, the current one red */
.fe-currency {
  display: inline-flex;
  align-items: center;
  height: 26px;
  background: rgba(255, 255, 255, 0.08);
}
.fe-currency button {
  height: 100%;
  padding: 0 9px;
  color: rgba(242, 243, 245, 0.78);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-currency button:hover {
  color: #FFFFFF;
}
.fe-currency button[aria-pressed="true"] {
  background: var(--fe-red);
  color: #FFFFFF;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 96px;
  gap: 44px;
}
.header-right {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--fe-red);
  color: #FFFFFF;
}
.header-icon .count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.fe-theme-toggle .ti-sun,
[data-theme="dark"] .fe-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .fe-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 10px;
}
/* the base's red square flush to the bar's right edge: the menu of every page */
.fe-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 7px;
  width: 96px;
  margin-left: 14px;
  padding: 0;
  border: 0;
  background: var(--fe-red);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.fe-menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: #FFFFFF;
  transition: width 0.3s var(--fe-ease);
}
.fe-menu-toggle span:nth-child(2) {
  width: 18px;
  margin-left: 10px;
}
.fe-menu-toggle:hover {
  background: var(--fe-ink);
}
.fe-menu-toggle:hover span {
  width: 28px;
  margin-left: 0;
}

/*----- 3.3 Main Menu -----*/
.fe-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fe-nav li {
  position: relative;
}
.fe-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 37px 0;
  color: var(--hd-ink);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
}
.fe-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--fe-ease);
}
.fe-nav > ul > li:hover > a,
.fe-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.fe-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.fe-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--fe-ease), transform 0.35s var(--fe-ease), visibility 0.3s;
}
.fe-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--fe-red);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.fe-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.fe-nav li:hover > .sub-menu,
.fe-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fe-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 28px;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15.5px;
  font-weight: 600;
  transition: color 0.3s var(--fe-ease), padding 0.35s var(--fe-ease);
}
.fe-nav .sub-menu a i {
  font-size: 9px;
  color: var(--fe-muted);
}
.fe-nav .sub-menu li:hover > a,
.fe-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--fe-accent-text);
}
.fe-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.fe-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.fe-nav .has-mega {
  position: static;
}
.fe-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--fe-ease), transform 0.35s var(--fe-ease), visibility 0.3s;
}
.fe-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.fe-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--fe-red);
}
.fe-nav .has-mega:hover > .mega-menu,
.fe-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--fe-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--fe-field);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--fe-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.mega-meta b {
  font-family: var(--fe-ff-display);
  font-size: 17px;
  font-weight: 700;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--fe-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.fe-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: fe-header-in 0.6s var(--fe-ease) both;
}
.fe-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.fe-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(16, 24, 32, 0.12);
}
.fe-header.is-sticky .header-main .wide {
  height: 78px;
}
.fe-header.is-sticky .fe-nav > ul > li > a {
  padding: 28px 0;
}
.fe-header-spacer {
  display: none;
}
.fe-header-spacer.is-on {
  display: block;
}
@keyframes fe-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.fe-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--fe-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--fe-ease), box-shadow 0.6s var(--fe-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.fe-offcanvas.open {
  box-shadow: var(--fe-shadow-lg);
  transform: none;
}
.fe-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 11, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.fe-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--fe-line);
}
.offcanvas-head .fe-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--fe-ease);
}
.offcanvas-close:hover {
  background: var(--fe-red);
  color: var(--fe-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--fe-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--fe-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--fe-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--fe-line);
  color: var(--fe-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--fe-red);
  color: var(--fe-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(242, 243, 245, 0.82);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 26px;
}
.oc-mail {
  color: var(--fe-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.fe-select {
  position: relative;
}
.fe-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.fe-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--fe-line-2);
  background: var(--fe-surface);
  font-size: 15px;
  text-align: left;
  color: var(--fe-heading);
  transition: border-color 0.3s var(--fe-ease);
}
.fe-select.is-open .select-button,
.fe-select .select-button:hover {
  border-color: var(--fe-red);
}
.fe-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fe-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--fe-accent-text);
  transition: transform 0.35s var(--fe-ease);
}
.fe-select.is-open .select-button i {
  transform: rotate(180deg);
}
.fe-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--fe-surface);
  border-top: 2px solid var(--fe-red);
  box-shadow: var(--fe-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--fe-ease), transform 0.3s var(--fe-ease), visibility 0.3s;
}
.fe-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--fe-red);
  transform: translateY(-10px);
}
.fe-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fe-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--fe-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--fe-ease), color 0.2s var(--fe-ease);
}
.fe-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-accent-text);
}
.fe-select .select-option .option-meta.is-none {
  color: var(--fe-muted);
}
.fe-select .select-option.is-focused,
.fe-select .select-option:hover {
  background-color: var(--fe-field);
}
.fe-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.fe-select .select-option.is-selected {
  color: var(--fe-accent-text);
}
.fe-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--fe-accent-text);
}
.fe-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--fe-field);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.fe-lang {
  position: relative;
  flex-shrink: 0;
}
.fe-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--fe-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-lang .lang-btn:hover,
.fe-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--fe-night);
}
.fe-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.fe-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.fe-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.fe-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--fe-field);
  color: var(--fe-heading);
}
.fe-lang.is-icon .lang-btn:hover,
.fe-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--fe-night);
  color: #FFFFFF;
}
.fe-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
  font-family: var(--fe-ff-body);
  text-align: start;
  white-space: normal;
}
.fe-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.fe-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.fe-lang .lang-menu[hidden] {
  display: none;
}
.fe-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fe-muted);
}
.fe-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fe-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--fe-line);
}
.fe-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.fe-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fe-muted);
}
.fe-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--fe-accent-text);
  opacity: 0;
}
.fe-lang .lang-item:hover,
.fe-lang .lang-item[aria-pressed="true"] {
  background: var(--fe-field);
}
.fe-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.fe-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.fe-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--fe-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fe-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
/* the base's FAQ: hairline rows, a small ink square that turns into a red bar when the row opens */
.fe-accordion .acc-item {
  border-bottom: 1px solid var(--fe-line);
}
.fe-accordion .acc-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.fe-accordion .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.fe-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--fe-heading);
  font-size: 0;
  transition: width 0.35s var(--fe-ease), height 0.35s var(--fe-ease), background-color 0.3s ease;
}
.fe-accordion .acc-head:hover,
.fe-accordion .acc-item.is-open .acc-head {
  color: var(--fe-accent-text);
}
.fe-accordion .acc-item.is-open .acc-head i {
  width: 12px;
  height: 2px;
  background: var(--fe-red);
}
.fe-accordion .acc-body {
  padding: 0 40px 24px 0;
  font-size: 15.5px;
}

/*----- 7.2 Tabs & Arrows -----*/
/* tonal square tabs: a white face on the grey ground, red when chosen */
.fe-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}
.fe-filter-tabs button {
  height: 48px;
  padding: 0 22px;
  background: var(--fe-surface);
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14.5px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-bg-alt .fe-filter-tabs button,
.fe-panel .fe-filter-tabs button {
  background: var(--fe-field);
}
.fe-filter-tabs button:hover {
  color: var(--fe-accent-text);
}
.fe-filter-tabs button.is-active {
  background: var(--fe-red);
  color: #FFFFFF;
}
.fe-filter-tabs button span {
  margin-left: 6px;
  opacity: 0.7;
  font-weight: 500;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.rail-head .fe-title {
  margin-bottom: 0;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: var(--fe-line-2);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--fe-red);
}

/*----- 7.3 Review Badge & Newsletter -----*/
.fe-review {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow);
}
.fe-review > i {
  color: var(--fe-heading);
  font-size: 20px;
}
.fe-review .rv-score {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.fe-review .rv-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.fe-review small {
  font-size: 12.5px;
  color: var(--fe-muted);
}
.is-night .fe-review,
.fe-photo-band .fe-review {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
/* newsletter: a white field with the red square button at its end */
.fe-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.fe-newsletter label {
  flex: 1 1 auto;
}
.fe-newsletter input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  color: #101010;
  font-family: var(--fe-ff-body);
  font-size: 15.5px;
}
.fe-newsletter input::placeholder {
  color: #656B72;
}
.fe-newsletter input:focus {
  outline: 2px solid var(--fe-red);
  outline-offset: -2px;
}
.fe-newsletter button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 26px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.3s ease;
}
.fe-newsletter button:hover {
  background: var(--fe-red-deep);
}
.fe-newsletter .form-status {
  flex-basis: 100%;
  margin-top: 10px;
}

/*----- 7.4 Post, Product & Team Cards -----*/
/* the base's news card: the photo, then a white body with the date, the title and Read More */
.post-card {
  height: 100%;
  background: var(--fe-surface);
  transition: box-shadow 0.45s var(--fe-ease), transform 0.45s var(--fe-ease);
}
.post-card:hover {
  box-shadow: var(--fe-shadow-lg);
  transform: translateY(-6px);
}
.pcd-img {
  display: block;
  overflow: hidden;
}
.pcd-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--fe-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.06);
}
.pcd-body {
  padding: 28px 30px 32px;
}
.pcd-date {
  display: block;
  margin-bottom: 12px;
  color: var(--fe-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcd-body h3 {
  margin-bottom: 20px;
}
.pcd-body h3 a:hover {
  color: var(--fe-accent-text);
}
/* a stock product: the packshot on its pale plate, the spec plate on hover, a red square to the bag */
.product-card {
  height: 100%;
  background: var(--fe-surface);
  transition: box-shadow 0.45s var(--fe-ease);
}
.product-card:hover {
  box-shadow: var(--fe-shadow-lg);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: #F2F3F5;
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s var(--fe-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 6px 10px;
  background: var(--fe-ink);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-badge.is-sale {
  background: var(--fe-red);
}
.pc-wish {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #FFFFFF;
  color: #101010;
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--fe-red);
  color: #FFFFFF;
}
.pc-add {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 13.5px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--fe-ease), transform 0.35s var(--fe-ease), background-color 0.3s ease;
}
.product-card:hover .pc-add,
.pc-add:focus-visible {
  opacity: 1;
  transform: none;
}
.pc-add:hover {
  background: var(--fe-ink);
}
.pc-body {
  padding: 22px 24px 26px;
}
.pc-body h3 {
  margin-bottom: 8px;
}
.pc-note {
  display: block;
  margin-bottom: 10px;
  color: var(--fe-muted);
  font-size: 14px;
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pc-price {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 18px;
  font-weight: 800;
}
.pc-price del {
  margin-left: 8px;
  color: var(--fe-muted);
  font-size: 14px;
  font-weight: 500;
}
/* the base's team portrait: square on white, a small red square with an info mark in its corner */
.team-card {
  height: 100%;
  background: var(--fe-surface);
}
.tc-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: #E9ECEF;
}
.tc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 413 / 470;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--fe-ease);
  transform-origin: center top;
}
.tc-img::after {
  content: "\f129";
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
}
.team-card:hover .tc-img img {
  transform: scale(1.05);
}
.tc-body {
  padding: 22px 24px 24px;
}
.tc-body h3 {
  margin-bottom: 4px;
}
.tc-body span {
  color: var(--fe-accent-text);
  font-size: 14px;
  font-weight: 500;
}

/*----- 7.5 Voices -----*/
/* the base's testimonial: a white panel laid over a photograph; a square portrait above the ink and red arrows,
   the words beside it, a big pale quote mark */
.voices-band {
  position: relative;
  isolation: isolate;
}
.voices-photo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 72%;
  overflow: hidden;
}
.voices-band.sec-pb-130 .voices-photo {
  bottom: 130px;
}
.voices-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voices-panel {
  position: relative;
  margin: 90px 0 90px auto;
  padding: 70px 80px;
  max-width: 760px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.voices-panel::before {
  content: "\201D";
  position: absolute;
  right: 50px;
  top: 30px;
  color: var(--fe-alt-2);
  font-family: var(--fe-ff-display);
  font-size: 200px;
  font-weight: 800;
  line-height: 1;
}
.voices-panel .voices-grid {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 36px;
}
/* a swiper in a grid track grows without end unless the track may shrink */
.voices-grid > .swiper {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.voices-side .voices-faces {
  position: relative;
  width: 124px;
  height: 124px;
  overflow: hidden;
  background: #E9ECEF;
}
.voices-faces img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.voices-faces img.is-on {
  opacity: 1;
}
.voices-side .fe-sq-arrow {
  width: 62px;
}
.voice blockquote {
  margin: 0;
}
.voice blockquote p {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
.voice figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}
.voice figcaption small {
  color: var(--fe-accent-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.voice figcaption b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 19px;
  font-weight: 700;
}

/*----- 7.6 Figures -----*/
/* a figure with its label: big Mulish digits, a red unit */
.fe-figure {
  display: flex;
  flex-direction: column;
}
.fe-figure b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: clamp(38px, 3.2vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fe-figure b small {
  margin-left: 4px;
  color: var(--fe-accent-text);
  font-size: 0.5em;
  font-weight: 800;
}
.fe-figure > span {
  margin-top: 10px;
  font-size: 14.5px;
}
/* the base's percentage ring, worked from the data */
.fe-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fe-ring .ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: conic-gradient(var(--fe-red) calc(var(--p, 0) * 1%), var(--fe-alt-2) 0);
}
.fe-ring .ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--fe-bg);
}
.fe-bg-alt .fe-ring .ring::before {
  background: var(--fe-alt);
}
.fe-ring .ring b {
  position: relative;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 24px;
  font-weight: 800;
}
.fe-ring span {
  margin-top: 16px;
  font-size: 14.5px;
}

/*======================
8. Sections
========================*/
/* the container's width as a token, so a photograph can bleed from the content edge to the window's edge */
:root {
  --fe-cw: 1320px;
}

/*----- 8.1 Hero Sliders -----*/
/* the base's hero: a full photograph, the title set left beside its side label, the square ink and red arrows
   flush to the hero's sides */
.fe-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--fe-night);
}
.fe-hero .hero-swiper {
  height: 100%;
}
.fe-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.fe-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 12, 0.86) 0%, rgba(10, 11, 12, 0.6) 46%, rgba(10, 11, 12, 0.18) 100%);
}
.fe-hero .container {
  position: relative;
  z-index: 2;
}
.fe-hero > .fe-gl {
  z-index: 1;
  --gl-alpha: 0.3;
}
.hero-copy {
  max-width: 780px;
  color: rgba(242, 243, 245, 0.88);
}
.hero-copy .title-head {
  column-gap: 22px;
}
.hero-copy .fe-eyebrow {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
}
.hero-title {
  color: #FFFFFF;
  font-size: clamp(44px, 5.2vw, 88px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero-lead {
  max-width: 540px;
  margin: 26px 0 38px 40px;
  font-size: 18px;
  line-height: 1.65;
}
.hero-copy .fe-btns {
  margin-left: 40px;
}
.hero-count {
  position: absolute;
  left: 92px;
  bottom: 54px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 600;
}
.hero-count b {
  color: #FFFFFF;
  font-size: 20px;
}
.fe-hero .hero-prev,
.fe-hero .hero-next {
  position: absolute;
  bottom: 32px;
  z-index: 3;
}
.fe-hero .hero-prev {
  left: 0;
}
.fe-hero .hero-next {
  right: 0;
}
/* Home 01: the full window, the copy below the header */
.fe-hero.is-one {
  height: min(100vh, 980px);
  min-height: 760px;
}
.fe-hero.is-one .swiper-slide {
  padding-top: 120px;
}

/*----- 8.2 Overlap Panels -----*/
/* the base's white panel laid over a photograph that bleeds to the window's edge */
.fe-overlap {
  position: relative;
  isolation: isolate;
}
.fe-overlap .ov-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
}
.fe-overlap.is-right .ov-photo {
  left: calc(50% - var(--fe-cw) / 2 + var(--fe-cw) * 0.22);
  right: 0;
}
.fe-overlap.is-left .ov-photo {
  left: 0;
  right: calc(50% - var(--fe-cw) / 2 + var(--fe-cw) * 0.22);
}
.fe-overlap .ov-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-overlap.sec-pb-130 .ov-photo {
  bottom: 130px;
}
.ov-panel {
  position: relative;
  width: 58%;
  margin: 90px 0;
  padding: 72px 80px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.fe-overlap.is-left .ov-panel {
  margin-left: auto;
}
.ov-panel .fe-title {
  margin-bottom: 26px;
}
.ov-panel > p {
  max-width: 560px;
  margin-left: 32px;
}
.ov-panel .fe-btn,
.ov-panel .fe-btns {
  margin-left: 32px;
}
.ov-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 50px;
  margin: 34px 0 40px 32px;
}

/*----- 8.3 Video Band -----*/
/* the base's film strip: a wide photograph, a square play button in the middle */
.fe-video-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
  overflow: clip;
  background: var(--fe-night);
}
.fe-video-band .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 11, 12, 0.28);
}

/*----- 8.4 History & Locations -----*/
.history-row .hist-card {
  height: 100%;
  padding: 50px 46px;
  background: var(--fe-surface);
}
.hist-card h3 {
  margin-bottom: 16px;
}
.hist-card .fe-mark {
  margin-bottom: 14px;
}
.hist-card p {
  margin-bottom: 26px;
}
.hist-photo {
  height: 100%;
  min-height: 300px;
  overflow: hidden;
}
.hist-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-locations .loc-panel {
  height: 100%;
  padding: 64px 60px;
  background: var(--fe-surface);
}
.loc-panel h2 {
  margin-bottom: 14px;
}
.loc-panel > p {
  max-width: 460px;
  margin-bottom: 30px;
}
.loc-list {
  display: grid;
  gap: 22px;
  margin-bottom: 30px;
}
.loc-row {
  display: flex;
  gap: 16px;
}
.loc-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--fe-red);
  position: relative;
}
.loc-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
}
.loc-row h3 {
  margin-bottom: 4px;
}
.loc-row p {
  margin: 0 0 4px;
  font-size: 15px;
}
.loc-row .fe-open {
  font-size: 14px;
  color: var(--fe-heading);
}
.loc-photo {
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}
.loc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================
9. Steel Cards
========================*/
/* a white band turns its white cards grey (the base's rule: a card always stands off its ground) */
:root {
  --fe-card-on-alt: #F1F3F5;
}
[data-theme="dark"] {
  --fe-card-on-alt: #1B1E22;
}
.fe-bg-alt .cap-card,
.fe-bg-alt .project-card,
.fe-bg-alt .post-card,
.fe-bg-alt .product-card,
.fe-bg-alt .team-card,
.fe-bg-alt .cert-plate,
.fe-bg-alt .cert-card,
.fe-bg-alt .sector-card,
.fe-bg-alt .mat-row,
.fe-bg-alt .job-row,
.fe-bg-alt .plant-bar,
.fe-bg-alt .mile,
.fe-bg-alt .cd-block,
.fe-bg-alt .price-card,
.fe-bg-alt .perk,
.fe-bg-alt .hist-card,
.fe-bg-alt .cc-card,
.fe-bg-alt .tl-row {
  background-color: var(--fe-card-on-alt);
}
.fe-bg-alt .pc-media {
  background: #E9ECEF;
}

/*----- 9.1 Capability Cards -----*/
/* the base's service card: a red line icon on white, the name, a line, two tolerance rows; a red edge grows on hover */
.cap-card {
  position: relative;
  height: 100%;
  padding: 46px 42px 40px;
  background: var(--fe-surface);
  transition: box-shadow 0.45s var(--fe-ease), transform 0.45s var(--fe-ease);
}
.cap-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--fe-red);
  transition: width 0.5s var(--fe-ease);
}
.cap-card:hover {
  box-shadow: var(--fe-shadow-lg);
  transform: translateY(-6px);
}
.cap-card:hover::before {
  width: 100%;
}
.cap-card h3 {
  margin: 26px 0 12px;
}
.cap-card h3 a:hover {
  color: var(--fe-accent-text);
}
.cap-card > p {
  font-size: 15.5px;
}
.cap-card .fe-rows {
  margin-bottom: 26px;
  font-size: 14.5px;
}
.cap-card .fe-rows li {
  padding: 9px 0;
}
.caps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 60px;
}
.caps-head .fe-title {
  margin-bottom: 0;
}
.caps-head .fe-title.is-split {
  display: block;
}
.caps-head .fe-title.is-split .fe-lead {
  margin: 22px 0 0 32px;
}

/*----- 9.2 Project Cards & Mosaic -----*/
.project-card {
  position: relative;
  height: 100%;
  background: var(--fe-surface);
  transition: box-shadow 0.45s var(--fe-ease);
}
.project-card:hover {
  box-shadow: var(--fe-shadow-lg);
}
.pj-img {
  display: block;
  overflow: hidden;
}
.pj-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--fe-ease);
}
.project-card:hover .pj-img img {
  transform: scale(1.06);
}
.pj-body {
  padding: 26px 28px 30px;
}
.pj-body h3,
.pj-body .fe-h4 {
  margin: 10px 0 8px;
}
.pj-body a:hover {
  color: var(--fe-accent-text);
}
.pj-meta {
  font-size: 14.5px;
}
/* the base's photo mosaic, each picture a project; the caption rises on hover */
.mosaic-wrap {
  padding: 0 10px;
}
.pj-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 320px 320px;
  gap: 10px;
}
.mosaic-item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--fe-night);
}
.mosaic-item.m1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.mosaic-item.m3 {
  grid-column: 4 / 6;
}
.mosaic-item.m4 {
  grid-column: 3 / 5;
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--fe-ease);
}
.mosaic-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 11, 12, 0.82) 0%, rgba(10, 11, 12, 0) 55%);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.mosaic-item:hover img {
  transform: scale(1.06);
}
.mosaic-item:hover::after {
  opacity: 1;
}
.mz-cap {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  transform: translateY(10px);
  transition: transform 0.45s var(--fe-ease);
}
.mosaic-item:hover .mz-cap {
  transform: none;
}
.mz-cap small {
  color: #FF6A5E;
  font-size: 13px;
  font-weight: 500;
}
.mz-cap b {
  font-family: var(--fe-ff-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

/*----- 9.3 Certificate Plates -----*/
/* a white plate with four rivets: the code stamped big, the name, the validity worked from today */
.cert-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  background:
    radial-gradient(circle at 10px 10px, var(--fe-line-2) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--fe-line-2) 0 2.5px, transparent 3px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--fe-line-2) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--fe-line-2) 0 2.5px, transparent 3px),
    var(--fe-surface);
  transition: box-shadow 0.4s var(--fe-ease), transform 0.4s var(--fe-ease);
}
.cert-plate:hover {
  box-shadow: var(--fe-shadow);
  transform: translateY(-4px);
}
.cp-code {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.cp-name {
  margin: 6px 0 16px;
  font-size: 14px;
  line-height: 1.4;
}
.cp-valid {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--fe-heading);
  font-size: 13px;
  font-weight: 500;
}

/*----- 9.4 Certificate Cards -----*/
.cert-card {
  height: 100%;
  padding: 44px 44px 36px;
  background: var(--fe-surface);
}
.cc-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 20px;
}
.cc-head .fe-tag {
  margin-left: auto;
  white-space: nowrap;
}
.cc-code {
  display: block;
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 800;
}
.cert-card > p {
  font-size: 15.5px;
}
.cert-card .fe-rows {
  margin: 10px 0 28px;
  font-size: 15px;
}
.cc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cc-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}
.cc-left b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

/*----- 9.5 Sector Cards & Columns -----*/
.sector-card {
  height: 100%;
  padding: 44px 40px 36px;
  background: var(--fe-surface);
  transition: box-shadow 0.4s var(--fe-ease), transform 0.4s var(--fe-ease);
}
.sector-card:hover {
  box-shadow: var(--fe-shadow-lg);
  transform: translateY(-6px);
}
.sector-card h3 {
  margin: 24px 0 10px;
}
.sector-card > p {
  font-size: 15.5px;
}
.sc-share {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  margin: 20px 0 22px;
}
.sc-share b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 22px;
  font-weight: 800;
}
.sc-share small {
  grid-column: 1 / -1;
  font-size: 13px;
}
.sc-links li + li {
  margin-top: 8px;
}
.sc-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fe-line);
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
}
.sc-links a i {
  color: var(--fe-red);
  font-size: 10px;
}
.sc-links a:hover {
  color: var(--fe-accent-text);
}
/* the base's four columns of arrow rows */
.sector-col h3 {
  margin-bottom: 18px;
}
.arrow-rows li {
  border-bottom: 1px solid var(--fe-line);
}
.arrow-rows a {
  position: relative;
  display: block;
  padding: 12px 26px 12px 0;
  font-size: 15px;
  transition: color 0.3s ease, padding 0.35s var(--fe-ease);
}
.arrow-rows a::after {
  content: "\f054";
  position: absolute;
  right: 4px;
  top: 50%;
  color: var(--fe-heading);
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 900;
  transform: translateY(-50%);
  transition: color 0.3s ease, right 0.35s var(--fe-ease);
}
.arrow-rows a:hover {
  padding-left: 8px;
  color: var(--fe-accent-text);
}
.arrow-rows a:hover::after {
  right: 0;
  color: var(--fe-red);
}

/*----- 9.6 Plant Bars -----*/
/* the plants' throughput: a track the length of the capacity, the shipped tonnes filling it as the section scrolls */
.plant-bars {
  display: grid;
  gap: 34px;
}
.plant-bar {
  padding: 36px 40px 30px;
  background: var(--fe-surface);
}
.pb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin-bottom: 22px;
}
.pb-role {
  font-size: 15px;
}
.pb-head .fe-open {
  margin-left: auto;
  color: var(--fe-heading);
  font-size: 14px;
  font-weight: 500;
}
.pb-track {
  position: relative;
  height: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--fe-surface) calc(10% - 1px) 10%),
    var(--fe-alt-2);
}
.pb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.5) calc(10% - 1px) 10%),
    linear-gradient(90deg, var(--fe-red-deep), var(--fe-red));
}
.pb-mark {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 2px;
  background: var(--fe-heading);
  opacity: 0;
}
.pb-figs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.pb-figs li {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}
.pb-figs b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 22px;
  font-weight: 800;
}

/*----- 9.7 Material Rows -----*/
/* a grade on one row: its name, two columns of label / value rows, its price a kilo and the way into the quote */
.mat-list {
  display: grid;
  gap: 16px;
}
.mat-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.2fr 0.9fr;
  gap: 36px;
  align-items: start;
  padding: 36px 40px;
  background: var(--fe-surface);
  transition: box-shadow 0.4s var(--fe-ease);
}
.mat-row:hover {
  box-shadow: var(--fe-shadow-lg);
}
.mat-row .fe-spec {
  top: auto;
  bottom: 18px;
}
.mr-grade h3 {
  margin: 10px 0 2px;
}
.mr-name {
  display: block;
  color: var(--fe-heading);
  font-size: 15px;
  font-weight: 500;
}
.mr-use {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.mr-specs {
  font-size: 14px;
}
.mr-specs li {
  padding: 8px 0;
}
.mr-list {
  max-width: 150px;
  font-size: 13px;
  line-height: 1.5;
}
.mr-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mr-price > b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.mr-price small {
  margin: 6px 0 18px;
  font-size: 13.5px;
}

/*----- 9.8 Job Rows -----*/
.job-list {
  display: grid;
  gap: 12px;
}
.job-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 34px;
  background: var(--fe-surface);
  transition: box-shadow 0.4s var(--fe-ease), transform 0.4s var(--fe-ease);
}
.job-row:hover {
  box-shadow: var(--fe-shadow);
  transform: translateX(6px);
}
.jr-main h3 a:hover {
  color: var(--fe-accent-text);
}
.jr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: 14px;
}
.jr-meta span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 12px;
  background: var(--fe-red);
  vertical-align: middle;
}
.jr-pay {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15.5px;
  font-weight: 700;
}
.jr-when {
  font-size: 14px;
}

/*======================
10. Home One
========================*/
/*----- 10.1 Quick Price -----*/
/* a white bar docked on the hero's foot (lifted 32px, on the next section's grey): grade, thickness, quantity, the price */
.quick-price {
  position: relative;
  z-index: 5;
  margin-top: -32px;
}
.qp-card {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 28px 30px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.qp-head {
  flex: 0 0 200px;
  align-self: center;
}
.qp-head h2 {
  margin-top: 8px;
}
.qp-field {
  flex: 1.5 1 0;
  min-width: 0;
}
.qp-field.is-thk {
  flex: 0.8 1 0;
}
.qp-field.is-qty {
  flex: 0.6 1 0;
}
.qp-field .fe-flabel {
  font-size: 13px;
}
.qp-sel {
  position: relative;
}
.qp-card .select-button,
.qp-card .fe-input {
  height: 52px;
  border: 0;
  background: var(--fe-field);
}
.qp-card .fe-input {
  padding-right: 12px;
}
.qp-out {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding-left: 22px;
  border-left: 1px solid var(--fe-line);
}
.qp-out > span {
  font-size: 13px;
}
.qp-out > b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}
.qp-out small {
  font-size: 13px;
  white-space: nowrap;
}
.qp-card .fe-btn {
  flex: 0 0 auto;
  height: 52px;
}

/*----- 10.2 Coil Band -----*/
/* the scroll moment: a coil rolls out across the night band, leaving the flat strip behind it, sheared into sheets */
.coil-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 130px 0 0;
}
.coil-band .fe-gl {
  z-index: 0;
  --gl-alpha: 0.26;
}
.coil-band .container {
  position: relative;
  z-index: 1;
}
.coil-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.coil-head .fe-title {
  margin-bottom: 0;
}
.coil-read {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  padding-bottom: 6px;
}
.coil-read li {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}
.coil-read b {
  min-width: 110px;
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.coil-stage {
  position: relative;
  z-index: 1;
  height: 460px;
  margin-top: 30px;
}
.coil-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/*----- 10.3 Output & Certificates -----*/
.out-chart {
  position: relative;
  margin: 0 0 0 32px;
  padding: 30px 30px 24px;
  background: var(--fe-surface);
}
.out-chart canvas {
  display: block;
  width: 100%;
  height: 300px;
}
.out-legend {
  display: flex;
  gap: 26px;
  margin-top: 14px;
  font-size: 13.5px;
}
.out-legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
}
.out-legend .is-a::before {
  background: var(--fe-red);
}
.out-legend .is-b::before {
  background: var(--fe-steel);
}
.out-note {
  max-width: 560px;
  margin: 26px 0 0 32px;
}
.out-form h2 {
  margin-bottom: 10px;
}
.out-form > p {
  margin-bottom: 26px;
}
.fe-projects-home .rail-head,
.fe-certs-home .rail-head {
  margin-bottom: 50px;
}

/*======================
11. Home Two
========================*/
/*----- 11.1 Giant Hero -----*/
/* the metallurgy home's hero: the words set huge in the middle of the photograph, a red line running under it while
   the slide plays, the square arrows paired at the bottom right */
.fe-hero.is-two {
  height: min(100vh, 960px);
  min-height: 720px;
}
.fe-hero.is-two .swiper-slide {
  padding-top: 100px;
  text-align: center;
}
.fe-hero.is-two .swiper-slide::after {
  background: radial-gradient(ellipse at center, rgba(10, 11, 12, 0.5) 0%, rgba(10, 11, 12, 0.78) 100%);
}
.hero-copy.is-centre {
  max-width: 1000px;
  margin: 0 auto;
}
.hero-est {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-est::before,
.hero-est::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.hero-title.is-giant {
  font-size: clamp(56px, 9vw, 150px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.hero-copy.is-centre .hero-lead {
  margin: 28px auto 36px;
}
.hero-copy.is-centre .fe-btns {
  justify-content: center;
  margin-left: 0;
}
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}
.hero-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fe-red);
}
.hero-progress span.is-run {
  animation: fe-progress 7s linear forwards;
}
@keyframes fe-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.fe-hero .hero-arrows {
  position: absolute;
  right: 0;
  bottom: 4px;
  z-index: 3;
}
.fe-hero .hero-arrows .fe-sq-arrow {
  position: static;
}

/*----- 11.2 History & Questions -----*/
.fi-photo {
  position: relative;
  margin: 10px 0 0 32px;
}
.fi-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.fi-figs {
  display: flex;
  gap: 40px;
  padding: 28px 30px;
  background: var(--fe-field);
}
.fi-faq .acc-item:first-child {
  border-top: 1px solid var(--fe-line);
}
.fi-more {
  margin-top: 28px;
}

/*----- 11.3 Bend Band -----*/
.bend-stage {
  position: relative;
  height: 100%;
  min-height: 460px;
  background: var(--fe-surface);
}
.bend-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.bend-side {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 36px;
  background: var(--fe-surface);
}
.bend-steps {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}
.bend-steps li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--fe-field);
  color: var(--fe-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.bs-n {
  color: var(--fe-muted);
  font-family: var(--fe-ff-display);
  font-size: 13px;
  font-weight: 800;
}
.bs-name {
  font-family: var(--fe-ff-display);
  font-weight: 700;
}
.bend-steps b {
  font-family: var(--fe-ff-display);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bend-steps li.is-active {
  background: var(--fe-red);
  color: #FFFFFF;
}
.bend-steps li.is-active .bs-n {
  color: rgba(255, 255, 255, 0.8);
}
.bend-steps li.is-done b {
  color: var(--fe-accent-text);
}
.bend-rows {
  margin-bottom: 28px;
  font-size: 14.5px;
}
.bend-side .fe-btn {
  margin-top: auto;
  align-self: flex-start;
}

/*----- 11.4 Capability Rows -----*/
/* the strategy list made real: six numbered rows beside one photograph and its tolerance card */
.cpt-list li + li {
  margin-top: 6px;
}
.cpt-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 30px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 22px;
  background: var(--fe-field);
  color: var(--fe-heading);
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease, padding 0.35s var(--fe-ease);
}
.cpt-n {
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-display);
  font-size: 14px;
  font-weight: 800;
}
.cpt-name {
  font-family: var(--fe-ff-display);
  font-size: 19px;
  font-weight: 700;
}
.cpt-plant {
  color: var(--fe-muted);
  font-size: 13.5px;
}
.cpt-row .fe-arr {
  color: var(--fe-red);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cpt-row:hover,
.cpt-row.is-active {
  padding-left: 30px;
}
.cpt-row.is-active {
  background: var(--fe-ink);
  color: #FFFFFF;
}
[data-theme="dark"] .cpt-row.is-active {
  background: #2A2D31;
}
.cpt-row.is-active .cpt-plant {
  color: rgba(255, 255, 255, 0.7);
}
.cpt-row.is-active .cpt-n {
  color: #FF6A5E;
}
.cpt-row.is-active .fe-arr {
  opacity: 1;
}
.cpt-panes {
  position: relative;
}
.cpt-pane {
  position: relative;
}
.cpt-pane img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cpt-card {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: min(380px, 70%);
  padding: 28px 30px 22px;
  background: var(--fe-surface);
}
.cpt-card h3 {
  margin-bottom: 8px;
}
.cpt-card .fe-rows {
  font-size: 14.5px;
}
.cpt-card .fe-rows li {
  padding: 9px 0;
}

/*----- 11.5 Workshop Mosaic -----*/
.ws-mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  grid-template-rows: 300px 300px;
  gap: 10px;
}
.ws-item {
  display: block;
  overflow: hidden;
  background: var(--fe-night);
}
.ws-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--fe-ease);
}
.ws-item:hover img {
  transform: scale(1.06);
}
.ws-item.w1 {
  grid-row: 1 / 3;
}
.ws-item.w2 {
  grid-column: 2 / 4;
}
.ws-item.w6 {
  grid-column: 4;
  grid-row: 1 / 3;
}
.ws-item.w3 {
  grid-column: 2;
  grid-row: 2;
}
.ws-item.w4 {
  grid-column: 3;
  grid-row: 2;
}
.ws-item.w5 {
  display: none;
}

/*======================
12. Home Three
========================*/
/*----- 12.1 Light Hero -----*/
/* the industry home's light hero: the copy on the grey ground and its shop drawing, a tall photo slider beside it with
   the square arrows at its foot and the order desk's card cut into its edge */
.fe-hero.is-three {
  padding: 90px 0 110px;
  background: var(--fe-bg);
  overflow: visible;
}
.h3-copy .title-head {
  column-gap: 18px;
}
.h3-title {
  font-size: clamp(42px, 4.4vw, 76px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.h3-copy .fe-lead {
  max-width: 540px;
  margin: 26px 0 36px 36px;
}
.h3-copy .fe-btns {
  margin-left: 36px;
}
.h3-proof {
  margin: 44px 0 0 36px;
}
.h3-media {
  position: relative;
  padding-left: 60px;
}
.h3-swiper {
  width: 100%;
  margin: 0;
}
.h3-swiper img {
  display: block;
  width: 100%;
  height: 640px;
  object-fit: cover;
}
.h3-arrows {
  position: absolute;
  left: 60px;
  bottom: 0;
  z-index: 3;
}
.h3-card {
  position: absolute;
  left: 0;
  top: 60px;
  z-index: 3;
  width: 260px;
  padding: 28px 26px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.h3-card p {
  margin: 12px 0 6px;
  font-size: 14.5px;
}
.h3-phone {
  display: block;
  margin-bottom: 12px;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 19px;
  font-weight: 800;
}
.h3-card .fe-open {
  font-size: 13.5px;
  color: var(--fe-heading);
}

/*----- 12.2 Info Strip -----*/
.info-strip {
  position: relative;
  z-index: 2;
  margin-top: -40px;
}
.strip-bar {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 40px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow);
}
.strip-bar h2 {
  flex-shrink: 0;
}
.strip-bar p {
  margin: 0;
  font-size: 15px;
}
.strip-phone {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-display);
  font-size: 20px;
  font-weight: 800;
}
.strip-phone i {
  margin-right: 10px;
  font-size: 15px;
}

/*----- 12.3 Plants, Tubes & Needs -----*/
.ph-total {
  flex-shrink: 0;
  text-align: right;
}
.tb-photo {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
}
.tb-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tb-plate {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(460px, 86%);
  padding: 34px 36px;
  background: var(--fe-surface);
}
.tb-plate h2 {
  margin: 10px 0 18px;
}
.tb-side {
  height: 100%;
  padding: 36px 30px;
  background: var(--fe-bg);
}
.tb-side h2 {
  margin-bottom: 20px;
}
.tb-side .cert-plate {
  padding: 18px 16px 16px;
}
.tb-side .cp-code {
  font-size: 15.5px;
}
.nd-text {
  max-width: 560px;
  margin: -20px 0 34px 32px;
}
.nd-rows {
  margin-left: 20px;
}
.nd-rows .fe-mark {
  margin-bottom: 8px;
}
.nd-rows .fe-rows {
  font-size: 14.5px;
}
.nd-photos {
  position: relative;
  height: 560px;
}
.nd-photos img {
  position: absolute;
  object-fit: cover;
}
.np-a {
  right: 0;
  top: 0;
  width: 72%;
  height: 82%;
}
.np-b {
  left: 0;
  bottom: 0;
  width: 46%;
  height: 52%;
  border: 10px solid var(--fe-bg);
}

/*----- 12.4 Director -----*/
/* the oil home's chief: a portrait with a white panel laid across its right edge */
.dr-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
}
.dr-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: center top;
}
.dr-panel {
  position: relative;
  margin-left: -80px;
  padding: 64px 70px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.dr-panel .title-head {
  margin-bottom: 22px;
}
.dr-panel blockquote {
  margin: 0 0 30px 32px;
}
.dr-panel blockquote p {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
}
.dr-panel .fe-btn {
  margin-left: 32px;
}

/*======================
13. Inner Pages
========================*/
/*----- 13.1 Sidebar & Widgets -----*/
/* Ferrona's sidebar is quiet: a small heading, a coral stroke, plain lists. Ferrona sets each widget on linen */
.fe-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.fe-sidebar .widget {
  padding: 34px 32px;
  background: var(--fe-field);
}
.fe-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.fe-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--fe-red);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-bottom-color: var(--fe-red);
}
.widget-search .fs-ico {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--fe-accent-text);
  pointer-events: none;
}
.faq-group + .faq-group {
  margin-top: 64px;
}
.faq-group .fe-accordion {
  margin-top: 26px;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--fe-red);
  color: var(--fe-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--fe-night);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--fe-line-2);
  color: var(--fe-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--fe-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--fe-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--fe-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--fe-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--fe-surface);
  color: var(--fe-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--fe-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--fe-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--fe-night);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fe-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--fe-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts li > div {
  flex: 1 1 auto;
  min-width: 0;
}
.side-posts h3 a {
  color: var(--fe-heading);
}
.side-posts h3 a:hover {
  color: var(--fe-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--fe-text);
}
.widget-tags a:hover {
  color: var(--fe-accent-text);
}
.fe-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--fe-night);
  text-align: center;
}
.widget-cta .fe-script {
  display: block;
  color: var(--fe-red-soft);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fe-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .fe-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--fe-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--fe-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--fe-accent-text);
}

/*----- 13.2 Rows, Choices & Pages -----*/
.fe-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--fe-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 700;
}
.fe-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fe-line);
}
.fe-kv li:first-child {
  border-top: 1px solid var(--fe-line);
}
.fe-kv li b {
  color: var(--fe-heading);
  font-weight: 500;
  text-align: end;
}
.fe-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--fe-field);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.fe-bg-cream .choice-card,
.fe-bg-cream-2 .choice-card {
  background: var(--fe-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--fe-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--fe-red-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--fe-alt-2);
  box-shadow: inset 3px 0 0 var(--fe-red);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-field);
  color: var(--fe-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--fe-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--fe-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--fe-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--fe-red);
  box-shadow: none;
  color: var(--fe-night);
}
.fe-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.fe-pagination a,
.fe-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-pagination a i {
  color: var(--fe-accent-text);
  font-size: 13px;
}
.fe-pagination .is-current,
.fe-pagination a:hover,
.fe-pagination a:hover i {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.fe-zoom {
  display: block;
  overflow: hidden;
}
.fe-zoom img {
  width: 100%;
  transition: transform 0.9s var(--fe-ease);
}
.fe-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--fe-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.fe-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--fe-line-2);
  accent-color: var(--fe-red-deep);
  appearance: none;
  -webkit-appearance: none;
}
.fe-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--fe-surface);
  border-radius: 50%;
  background: var(--fe-red);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.fe-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--fe-surface);
  border-radius: 50%;
  background: var(--fe-red);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--fe-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 0;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-panel .chip-choice > span {
  background: var(--fe-field);
}
.chip-choice:hover > span {
  background: var(--fe-alt-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--fe-red-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.chip-choice > span small {
  color: var(--fe-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 13.3 Quantity Stepper -----*/
.fe-qty {
  display: inline-flex;
  align-items: center;
  background: var(--fe-field);
}
.fe-bg-cream .fe-qty {
  background: var(--fe-surface);
}
.fe-qty button {
  width: 46px;
  height: 54px;
  color: var(--fe-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fe-qty button:hover {
  background: var(--fe-alt-2);
  color: var(--fe-accent-text);
}
.fe-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--fe-line);
  background: transparent;
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.fe-qty input::-webkit-outer-spin-button,
.fe-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.fe-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.fe-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
14. Feature Pages
========================*/
/*----- 14.1 Quote Builder -----*/
.qb-title {
  margin-bottom: 26px;
}
.qb-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 34px;
}
.qb-nav button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border-top: 3px solid var(--fe-line-2);
  background: var(--fe-field);
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.qb-nav button span {
  color: var(--fe-muted);
  font-size: 12px;
  font-weight: 800;
}
.qb-nav button.is-done {
  border-color: var(--fe-ink);
}
[data-theme="dark"] .qb-nav button.is-done {
  border-color: #F2F3F5;
}
.qb-nav button.is-active {
  border-color: var(--fe-red);
  background: var(--fe-ink);
  color: #FFFFFF;
}
.qb-nav button.is-active span {
  color: #FF6A5E;
}
.qb-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.qb-step legend {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  font-family: var(--fe-ff-display);
  font-weight: 700;
}
.qb-step legend + * {
  clear: both;
}
.qb-sel {
  position: relative;
}
.qb-grade {
  margin: 6px 0 10px;
  font-size: 15px;
}
.qb-note,
.qb-hint {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 14px 18px;
  background: var(--fe-field);
  font-size: 14.5px;
}
.qb-note i,
.qb-hint i {
  margin-top: 4px;
  color: var(--fe-red);
}
.qb-note.is-error {
  color: var(--fe-error-text);
}
.qb-finishes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.qb-finishes .choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border: 0;
  border-top: 3px solid transparent;
  background: var(--fe-field);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}
.qb-finishes .choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qb-finishes .choice-card.is-checked {
  border-color: var(--fe-red);
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow);
}
.qb-finishes .choice-card.is-off {
  opacity: 0.4;
  cursor: not-allowed;
}
.cc-name {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15.5px;
  font-weight: 700;
}
.cc-note {
  font-size: 13.5px;
  line-height: 1.45;
}
.cc-meta {
  margin-top: 6px;
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.qb-express {
  height: 100%;
  align-items: center;
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--fe-field);
}
.fe-input.is-file {
  height: auto;
  padding: 14px 18px;
}
.qb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--fe-line);
}
.qb-actions [data-step-next],
.qb-actions [data-step-submit] {
  margin-left: auto;
}
.qb-summary {
  position: sticky;
  top: 110px;
}
.qb-summary h2 {
  margin: 10px 0 22px;
}
.qs-total {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  padding: 22px 24px;
  background: var(--fe-red);
  color: #FFFFFF;
}
.qs-total > span {
  font-size: 14px;
}
.qs-total > b {
  font-family: var(--fe-ff-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.qs-total > small {
  font-size: 13.5px;
  opacity: 0.9;
}
.qb-summary .fe-rows {
  font-size: 14.5px;
}
.qb-summary .fe-rows li {
  padding: 9px 0;
}
.qb-summary .fe-rows li.is-sub > span,
.qb-summary .fe-rows li.is-sub > b {
  color: #FFFFFF;
}
.qs-dates {
  display: grid;
  gap: 8px;
  margin: 22px 0;
}
.qs-dates li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(242, 243, 245, 0.06);
  font-size: 14.5px;
}
.qs-dates i {
  color: #FF6A5E;
}
.qs-dates b {
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-weight: 700;
}
.qs-ref {
  margin: 18px 0 0;
  font-size: 14px;
}
.qs-ref b {
  color: #FFFFFF;
}
.qb-summary.is-sent .qs-ref b {
  color: #6FD49A;
}
.price-card {
  height: 100%;
  padding: 40px 38px 34px;
  background: var(--fe-surface);
}
.price-card h3 {
  margin: 22px 0 14px;
}
.price-card .fe-rows {
  font-size: 14.5px;
}
.pc-foot-note {
  margin: 18px 0 0;
  font-size: 14px;
}

/*----- 14.2 Capability Details -----*/
.step-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin: 0 0 44px;
}
.step-strip li {
  position: relative;
  padding: 34px 26px 30px;
  background: rgba(242, 243, 245, 0.05);
}
.step-strip h3 {
  margin: 18px 0 6px;
}
.step-strip p {
  margin: 0;
  font-size: 14.5px;
}
.ss-n {
  position: absolute;
  right: 18px;
  top: 16px;
  color: #FF6A5E;
  font-family: var(--fe-ff-display);
  font-size: 13px;
  font-weight: 800;
}
.fe-steps-strip {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.fe-steps-strip .fe-gl {
  z-index: -1;
}
.cd-photo,
.pjd-photo {
  position: relative;
  margin-bottom: 44px;
  overflow: hidden;
}
.cd-photo img,
.pjd-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cd-main h2,
.pjd-main h2 {
  margin-bottom: 20px;
}
.cd-blocks,
.pjd-blocks,
.cr-blocks {
  margin: 30px 0 50px;
}
.cd-block {
  height: 100%;
  padding: 34px 32px 26px;
  background: var(--fe-surface);
}
.cd-block h3,
.cd-block .fe-mark {
  margin-bottom: 12px;
}
.cd-block .fe-rows {
  font-size: 14.5px;
}
.cd-block p {
  margin: 0;
  font-size: 15px;
}
.cd-sub {
  margin-bottom: 22px;
}
.laser-grades {
  display: grid;
  gap: 4px;
  margin-bottom: 44px;
}
.lg-row {
  display: grid;
  grid-template-columns: 220px 1fr 70px;
  align-items: center;
  gap: 22px;
  padding: 12px 20px;
  background: var(--fe-surface);
}
.lg-grade {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.35;
}
.lg-grade b {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
}
.lg-max {
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-weight: 800;
  text-align: right;
}
.cd-gallery,
.pjd-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cd-gallery a,
.pjd-gallery a {
  display: block;
  overflow: hidden;
}
.cd-gallery img,
.pjd-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s var(--fe-ease);
}
.cd-gallery a:hover img,
.pjd-gallery a:hover img {
  transform: scale(1.06);
}
.widget-files li + li {
  margin-top: 10px;
}
.widget-files a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--fe-field);
  color: var(--fe-heading);
}
.widget-files i {
  color: var(--fe-red);
  font-size: 22px;
}
.widget-files span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.widget-files small {
  color: var(--fe-muted);
  font-size: 13px;
}
.widget-files a:hover b {
  color: var(--fe-accent-text);
}

/*----- 14.3 Materials, Projects & Careers Toolbars -----*/
.mat-toolbar,
.pj-toolbar,
.jobs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 36px;
}
.mat-toolbar .fe-filter-tabs,
.pj-toolbar .fe-filter-tabs {
  margin-bottom: 0;
}
.mat-tools,
.jt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mat-search {
  position: relative;
  width: 280px;
}
.mat-search .fe-input {
  height: 48px;
  background: var(--fe-surface);
}
.fe-bg-alt .mat-search .fe-input {
  background: var(--fe-field);
}
.mat-search > i {
  position: absolute;
  right: 16px;
  top: 17px;
  color: var(--fe-red);
  font-size: 13px;
  pointer-events: none;
}
.mat-sort,
.jt-field {
  position: relative;
  width: 230px;
}
.mat-sort .select-button,
.jt-field .select-button {
  height: 48px;
  border: 0;
}
.fe-bg-alt .jt-field .select-button {
  background: var(--fe-field);
}
.ci-faces {
  margin: 0 0 0 32px;
}
.perk {
  height: 100%;
  padding: 32px 28px 26px;
  background: var(--fe-surface);
}
.perk h3 {
  margin: 16px 0 6px;
}
.perk p {
  margin: 0;
  font-size: 14.5px;
}

/*----- 14.4 Process & Photo Bands -----*/
.pr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.pr-row.is-flip .pr-photo {
  order: 2;
}
.pr-photo {
  position: relative;
  overflow: hidden;
}
.pr-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 90px max(60px, calc((100vw - var(--fe-cw)) / 2 + 12px)) 90px 90px;
  background: var(--fe-surface);
}
.pr-row.is-flip .pr-copy {
  padding: 90px 90px 90px max(60px, calc((100vw - var(--fe-cw)) / 2 + 12px));
  background: var(--fe-bg);
}
.pr-copy .title-head {
  margin-bottom: 18px;
}
.pr-copy p {
  max-width: 520px;
  margin: 0 0 28px 32px;
}
.pr-copy .fe-btn {
  margin-left: 32px;
}
.pr-chart {
  width: 100%;
  max-width: 560px;
  margin: 0 0 0 32px;
  padding: 20px;
  background: var(--fe-surface);
}
.pr-chart canvas {
  display: block;
  width: 100%;
  height: 220px;
}
.pb-copy {
  max-width: 720px;
}
.pb-copy .fe-lead {
  margin: 22px 0 30px 32px;
}
.pb-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 50px;
  margin: 0 0 36px 32px;
}
.pb-copy .fe-btn {
  margin-left: 32px;
}

/*----- 14.5 Plants & Quality -----*/
.pl-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
}
.pl-wrap.is-flip {
  grid-template-columns: 7fr 5fr;
}
.pl-wrap.is-flip .pl-photo {
  order: 2;
}
.pl-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.pl-panel {
  position: relative;
  z-index: 2;
  margin-left: -90px;
  padding: 60px 64px;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.pl-wrap.is-flip .pl-panel {
  margin: 0 -90px 0 0;
}
.pl-role {
  margin: 14px 0 10px 32px;
  font-size: 15px;
}
.pl-panel > .fe-open {
  margin-left: 32px;
  color: var(--fe-heading);
  font-size: 14.5px;
}
.pl-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 46px;
  margin: 28px 0 32px 32px;
}
.pl-panel .row {
  margin-left: 20px;
}
.pl-panel h3 {
  margin-bottom: 8px;
}
.pl-panel .fe-rows {
  font-size: 14px;
}
.pl-shifts li {
  padding: 8px 0;
}
.pl-shifts b {
  font-size: 13px;
}
.plant-tour {
  margin-top: 26px;
}
.certs-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 44px;
}
.certs-intro .fe-lead {
  max-width: 720px;
  margin: 0;
}
.ql-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.ql-text,
.ql-rows {
  max-width: 560px;
  margin: -20px 0 28px 32px;
}
.ql-rows {
  margin-top: 0;
}
.ql-btn {
  margin-left: 32px;
}

/*----- 14.6 Project & Career Details -----*/
.pjd-photo .fe-spec {
  right: 24px;
  top: 24px;
}
.pjd-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--fe-line);
}
.pjd-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--fe-heading);
}
.pjd-nav i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--fe-ink);
  color: #FFFFFF;
  transition: background-color 0.3s ease;
}
.pjd-nav a:hover i {
  background: var(--fe-red);
}
.pjd-nav span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.pjd-next span {
  text-align: right;
}
.pjd-nav small {
  color: var(--fe-muted);
  font-size: 13px;
}
.pjd-nav b {
  font-family: var(--fe-ff-display);
  font-size: 17px;
  font-weight: 700;
}
.cr-head {
  margin-bottom: 26px;
}
.cr-head h2 {
  margin: 12px 0 8px;
}
.cr-when {
  margin: 0;
  color: var(--fe-muted);
  font-size: 14.5px;
}
.cr-shifts {
  margin-bottom: 50px;
}
.cr-apply h3 {
  margin-bottom: 24px;
}

/*======================
15. House Pages
========================*/
/*----- 15.1 Account Dashboard -----*/
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--fe-muted);
  font-size: 14.5px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .fe-ico {
  width: 36px;
  height: 36px;
}
.dash-tabs button.is-active {
  background: var(--fe-ink);
  color: #FFFFFF;
}
[data-theme="dark"] .dash-tabs button.is-active {
  background: #2A2D31;
}
.dash-tabs button.is-active .ico-day {
  display: none;
}
.dash-tabs button.is-active .ico-night {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 18px;
}
.dash-btns {
  margin-top: 28px;
}
.table-wrap {
  margin-bottom: 30px;
}
.fe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.fe-table th {
  padding: 12px 14px;
  background: var(--fe-ink);
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}
.fe-table td {
  padding: 14px;
  border-bottom: 1px solid var(--fe-line);
  vertical-align: top;
}
.fe-table td:first-child {
  color: var(--fe-heading);
  font-weight: 700;
  white-space: nowrap;
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}
/* the trade card: a brushed steel plate with the red tile in its corner */
.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
  margin-bottom: 30px;
  padding: 30px 32px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    linear-gradient(135deg, #2D3136, #15171A);
  box-shadow: inset 0 3px 0 var(--fe-red), var(--fe-shadow);
}
.member-card img {
  width: 170px;
  height: auto;
  margin-bottom: 30px;
}
.mc-tier {
  color: #FF6A5E;
  font-family: var(--fe-ff-display);
  font-size: 22px;
  font-weight: 800;
}
.mc-name {
  color: #F2F3F5;
}
.mc-no {
  color: rgba(242, 243, 245, 0.7);
  font-size: 14.5px;
  letter-spacing: 0.12em;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  background: var(--fe-red);
  color: #FFFFFF;
  font-size: 26px;
}
.cart-head {
  margin-bottom: 20px;
}
.sum-hint {
  margin: 16px 0 0;
  font-size: 14px;
}
.sum-hint b {
  color: var(--fe-heading);
}
.member-check {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--fe-field);
  font-size: 15px;
}
.pc-cat {
  display: block;
  margin-bottom: 10px;
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.pd-by {
  display: block;
  margin: 8px 0 14px;
  font-size: 15px;
}
.pd-rows {
  margin: 22px 0 28px;
  font-size: 15px;
}
.as-title {
  margin: 10px 0 12px;
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

/*----- 15.2 Blog Extras -----*/
.post-audio {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(17, 18, 20, 0.86);
  color: #FFFFFF;
}
.pa-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--fe-red);
  color: #FFFFFF;
}
.pa-bar {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
}
.pa-bar span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34%;
  background: var(--fe-red);
}
.pa-time {
  font-size: 13px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 34px 0;
}
.article-buy .product-mini {
  border-bottom: 0;
}

/*----- 15.3 Contact -----*/
.cc-card {
  height: 100%;
  padding: 38px 32px 32px;
  background: var(--fe-surface);
}
.cc-card.is-desk {
  box-shadow: inset 0 3px 0 var(--fe-red);
}
.cc-card h3 {
  margin: 20px 0 10px;
}
.cc-card p {
  margin: 0 0 6px;
  font-size: 15px;
}
.cc-line {
  color: var(--fe-heading);
}
.cc-card .fe-open {
  margin-top: 10px;
  color: var(--fe-heading);
  font-size: 14px;
}
.contact-rows {
  max-width: 460px;
  margin: -20px 0 30px 32px;
}
.contact-proof {
  margin-left: 32px;
}
.map-area .fe-map {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(0.4);
}

/*----- 15.4 About, Profile & Timeline -----*/
.ab-text {
  max-width: 560px;
  margin: -20px 0 30px 32px;
}
.ab-btn {
  margin-left: 32px;
}
.ab-locations h2 {
  margin-bottom: 24px;
}
.fe-figures {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.fe-figures .fe-gl {
  z-index: -1;
}
.fig-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.fig-strip .fe-figure b {
  color: #FFFFFF;
}
.fe-timeline {
  position: relative;
  display: grid;
  gap: 4px;
  margin-left: 32px;
}
.tl-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  gap: 30px;
  padding: 26px 30px;
  background: var(--fe-surface);
}
.tl-year {
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.tl-row h3 {
  margin-bottom: 4px;
}
.tl-row p {
  margin: 0;
  font-size: 15px;
}
.profile-photo {
  margin: 0;
}
.profile-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: center top;
}
.profile-lead,
.profile-text,
.profile-rows,
.profile-social {
  margin-left: 32px;
}
.profile-lead {
  margin-top: 22px;
}
.profile-rows {
  margin-bottom: 28px;
}
.mile {
  height: 100%;
  padding: 34px 30px 28px;
  background: var(--fe-surface);
}
.mile > b {
  display: block;
  margin-bottom: 14px;
  color: var(--fe-accent-text);
  font-family: var(--fe-ff-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.mile h3 {
  margin-bottom: 6px;
}
.mile p {
  margin: 0;
  font-size: 15px;
}
.faq-group .title-head {
  margin-bottom: 20px;
}
.faq-group + .faq-group {
  margin-top: 54px;
}
.bare-social {
  margin-top: 30px;
}

/*----- 15.5 The Cut Plate -----*/
/* 404: a brushed plate with the number cut through it, the dark bed showing in the cut, its spec plate riveted on */
.err-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(circle at 22px 22px, #6B737C 0 4px, rgba(255, 255, 255, 0.6) 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 22px) 22px, #6B737C 0 4px, rgba(255, 255, 255, 0.6) 5px, transparent 6px),
    radial-gradient(circle at 22px calc(100% - 22px), #6B737C 0 4px, rgba(255, 255, 255, 0.6) 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px), #6B737C 0 4px, rgba(255, 255, 255, 0.6) 5px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.04) 1px 3px),
    linear-gradient(160deg, #DADEE2 0%, #A9B1B9 50%, #CFD4D9 100%);
  box-shadow: var(--fe-shadow-lg);
}
.ep-code {
  color: #15171A;
  font-family: var(--fe-ff-display);
  font-size: clamp(110px, 14vw, 220px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.6);
}
.ep-tag {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  background: var(--fe-red);
  color: #FFFFFF;
  line-height: 1.3;
}
.ep-tag b {
  font-family: var(--fe-ff-display);
  font-size: 16px;
  font-weight: 800;
}
.ep-tag i {
  font-style: normal;
  font-size: 13px;
}
.err-lead {
  max-width: 540px;
  margin: 22px 0 32px 32px;
}
.err-btns {
  margin-left: 32px;
}

/*======================
16. Stock Shop
========================*/
/*----- 16.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--fe-shelf);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--fe-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fe-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--fe-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/*----- 16.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--fe-shelf);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--fe-shelf);
  box-shadow: inset 0 0 0 1px var(--fe-line-2);
  transition: box-shadow 0.3s var(--fe-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--fe-red);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--fe-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--fe-muted);
}
.pd-info .fe-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .fe-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--fe-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--fe-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--fe-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--fe-red);
  transform: scaleX(0);
  transition: transform 0.4s var(--fe-ease);
}
.pd-tablist button.is-active {
  color: var(--fe-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--fe-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--fe-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 16.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--fe-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--fe-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--fe-shelf);
  box-shadow: inset 0 0 0 1px var(--fe-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fe-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--fe-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--fe-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--fe-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fe-field);
  color: var(--fe-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--fe-ease), color 0.3s var(--fe-ease);
}
.bl-remove:hover {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--fe-line-2);
  background: var(--fe-surface);
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--fe-red);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--fe-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fe-red);
  transition: width 0.8s var(--fe-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--fe-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fe-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--fe-shelf);
  box-shadow: inset 0 0 0 1px var(--fe-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fe-red);
  color: var(--fe-ink);
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--fe-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--fe-heading);
}
.order-summary .fe-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--fe-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--fe-accent-text);
}

/*----- 16.4 Toast -----*/
.fe-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--fe-night);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--fe-surface);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--fe-ease), transform 0.4s var(--fe-ease), visibility 0.4s;
}
.fe-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fe-red);
  color: var(--fe-ink);
  font-size: 11px;
}
.fe-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*======================
17. Blog & Account
========================*/
/*----- 17.1 Blog List -----*/
/* Ferrona's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--fe-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--fe-red);
  color: var(--fe-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .fe-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--fe-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .fe-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--fe-accent-text);
}
.bp-body h3 a {
  color: var(--fe-heading);
}
.bp-body h3 a:hover {
  color: var(--fe-accent-text);
}
.bp-body .fe-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--fe-night);
  --fe-heading: #EEF0F2;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--fe-red-soft);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEF0F2;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEF0F2;
}
.blog-post.is-quote h3 a:hover {
  color: var(--fe-red-soft);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 240, 242, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 240, 242, 0.1);
  font-size: 120px;
}

/*----- 17.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .fe-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--fe-alt-2);
  border-inline-start: 4px solid var(--fe-red);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--fe-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--fe-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fe-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--fe-line);
}
.article-rows dt {
  color: var(--fe-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--fe-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fe-red);
  color: var(--fe-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--fe-night);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--fe-field);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .fe-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--fe-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--fe-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fe-field);
  color: var(--fe-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.post-nav .pn-all {
  color: var(--fe-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--fe-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--fe-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--fe-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 17.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--fe-surface);
  box-shadow: var(--fe-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--fe-night);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .fe-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .fe-script {
  color: var(--fe-red);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .fe-avatars .faces img,
.as-copy .fe-avatars .more {
  border-color: var(--fe-night);
}
.account-form {
  padding: 56px 54px;
}
.account-form .fe-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--fe-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--fe-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--fe-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fe-chilli);
  transition: width 0.4s var(--fe-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--fe-red);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--fe-ok);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--fe-muted);
  font-size: 13px;
}

/*----- 17.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Ferrona's split, with the seal turning on the seam */
.fe-bare-page {
  min-height: 100vh;
  background: var(--fe-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .fe-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .fe-rule {
  margin: 24px 0;
}
.bare-inner .fe-lead {
  max-width: 560px;
}
.bare-inner .fe-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--fe-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .fe-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--fe-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--fe-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--fe-surface);
  color: var(--fe-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold {
  background: var(--fe-red);
  color: var(--fe-ink);
}
.launch-count b {
  font-family: var(--fe-ff-body);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--fe-surface);
  color: var(--fe-heading);
  font-family: var(--fe-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--fe-red);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--fe-surface);
  color: var(--fe-ink);
}

/*======================
18. Subheader
========================*/
/* the base's page title: a wide photograph under a night wash, the header lying over it, the title set left in white
   beside its red side label; the crumbs sit in a white strip cut into the band's foot (the oil home's info strip).
   The plain variant is the same title on the grey ground, for the pages with a solid header. */
.fe-subheader {
  position: relative;
  isolation: isolate;
}
.fe-subheader.is-photo {
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  padding: 200px 0 0;
  background: var(--fe-night);
  --fe-heading: #FFFFFF;
  --fe-text: rgba(242, 243, 245, 0.86);
  --fe-muted: rgba(242, 243, 245, 0.72);
  --fe-accent-text: #FF6A5E;
  --gl-1: #111214;
  --gl-alpha: 0.3;
}
.fe-subheader .sub-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.fe-subheader .sub-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.fe-subheader.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 12, 0.86) 0%, rgba(10, 11, 12, 0.55) 55%, rgba(10, 11, 12, 0.3) 100%);
}
.fe-subheader .fe-gl {
  z-index: 0;
}
.fe-subheader .container {
  position: relative;
  z-index: 1;
}
.sub-copy {
  max-width: 900px;
  padding-bottom: 80px;
}
.fe-subheader h1 {
  font-size: clamp(38px, 3.8vw, 64px);
}
.fe-subheader .title-head {
  column-gap: 16px;
}
.fe-subheader .fe-eyebrow {
  font-size: 13px;
}
.sub-copy .fe-lead {
  max-width: 620px;
  margin: 20px 0 0 34px;
}
/* the white strip at the foot: the crumbs and the page's own figure */
.sub-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 900px;
  min-height: 74px;
  padding: 0 36px;
  background: var(--fe-surface);
  --fe-heading: var(--fe-ink);
  --fe-muted: #656B72;
  --fe-accent-text: #C80B07;
  box-shadow: var(--fe-shadow);
}
[data-theme="dark"] .sub-strip {
  --fe-heading: #F2F3F5;
  --fe-muted: #969CA3;
  --fe-accent-text: #FF6A5E;
}
.fe-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--fe-muted);
  font-size: 14px;
  font-weight: 500;
}
.fe-crumbs a {
  color: var(--fe-heading);
}
.fe-crumbs a:hover {
  color: var(--fe-accent-text);
}
.fe-crumbs i {
  color: var(--fe-red);
  font-size: 8px;
}
.fe-crumbs span {
  color: var(--fe-accent-text);
}
.sub-strip .strip-note {
  display: inline-flex;
  align-items: center;
  color: var(--fe-heading);
  font-family: var(--fe-ff-display);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}
.fe-subheader.is-plain {
  padding: 90px 0 10px;
}
.fe-subheader.is-plain .sub-copy {
  padding-bottom: 40px;
}
.fe-subheader.is-plain .sub-strip {
  box-shadow: none;
}

/*======================
19. Footer
========================*/
/* the base's black footer: the brand and a welcome line, three columns of links and contacts, red social squares at
   the foot; the newsletter strip over a photograph on its top edge; the coil spring (WebGL) is the footer's object */
.fe-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.footer-news {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 34px 0;
  background: var(--fe-night-2);
}
.footer-news > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-news::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 11, 12, 0.78);
}
.footer-news .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.footer-news .news-label {
  color: #FFFFFF;
  font-family: var(--fe-ff-display);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.footer-news .fe-newsletter {
  flex: 0 1 560px;
}
.footer-main {
  padding: 100px 0 60px;
}
.footer-brand .fe-logo img {
  height: 50px;
}
.footer-brand p {
  max-width: 300px;
  margin: 26px 0 22px;
  font-size: 15px;
}
.footer-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.footer-status .fe-open {
  color: var(--fe-text);
}
.fe-footer .widget h2 {
  margin-bottom: 26px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
}
.footer-links li + li {
  margin-top: 12px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.footer-links a::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--fe-red);
  transition: width 0.3s var(--fe-ease);
}
.footer-links a:hover::before {
  width: 14px;
}
.footer-contact li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
}
.footer-contact li + li {
  margin-top: 16px;
}
.footer-contact i {
  margin-top: 4px;
  color: #FF6A5E;
}
/* the coil spring: a lit helix pressed by a plate and let go, again and again */
.footer-spring {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 300px;
  margin-left: auto;
}
.footer-spring .fe-gl {
  z-index: 0;
}
.footer-spring figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  color: var(--fe-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--fe-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: #FF6A5E;
}