@charset "UTF-8";
/* =============================================================================
   Ferrier Wire — main stylesheet
   -----------------------------------------------------------------------------
   Import order matters: base first, then components, then layout, then pages.
   Add every new partial here — nothing is picked up automatically.

   abstracts/ is not imported here on purpose: it emits no CSS. Each partial
   pulls it in itself with `@use '../abstracts' as *;`.
   ============================================================================= */
/* -- base ------------------------------------------------------------------- */
/* =============================================================================
   Self-hosted fonts (latin subset, woff2 only).
   Source files live in src/fonts and are copied to dist/fonts by gulp.
   ============================================================================= */
/* Manrope is a variable font — one file covers weights 200–800. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations"), url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Work Sans is also variable — one file covers weights 100–900. */
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-variable.woff2") format("woff2-variations"), url("../fonts/work-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Lato ships as static weights: 400 and 700, each with an italic. */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700i.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* === Fonts — end ============================================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* Barrel file: every partial does `@use '../abstracts' as *;` to get tokens,
   functions and mixins in one line. */
/* =============================================================================
   Design tokens — the single source of truth for the whole site.
   Values come from the Figma variable collection ("Internal Only Canvas") and
   the 1920px page renders. Change a value here and it changes everywhere.
   ============================================================================= */
/* -- colours ---------------------------------------------------------------- */
/* -- typography ------------------------------------------------------------- */
/* -- layout ----------------------------------------------------------------- */
/* -- breakpoints ------------------------------------------------------------
   The design is desktop-first (1920 down), so mq() is max-width based.
   Use mq-up() on the rare occasion you need min-width.
   -------------------------------------------------------------------------- */
/* -- misc ------------------------------------------------------------------- */
/* -- forms ------------------------------------------------------------------
   Measured from the Contact form (Figma 1073:10919): a 6px-rounded box with a
   1px #C1C1C1 border and 10px padding. Type is Lato, not the kit's IBM Plex Sans.
   -------------------------------------------------------------------------- */
/* -- image boxes -------------------------------------------------------------
   The client wants every thumbnail contained, never cropped, and one ratio per
   component: products and the gallery are square, category tiles keep the
   landscape proportion of the Figma tile (405x262).
   -------------------------------------------------------------------------- */
/* === Design tokens — end ==================================================== */
/* Barrel file: every partial does `@use '../abstracts' as *;` to get tokens,
   functions and mixins in one line. */
/* =============================================================================
   Small helper functions. Kept deliberately few — if you need one more, add it
   here rather than inlining map.get() calls in component files.
   ============================================================================= */
/* Breakpoint lookup: bp(lg) -> 1280px */
/* z-index lookup: z(header) -> 200 */
/* px -> rem, assuming the 16px root set in base/_reset.scss. rem(24) -> 1.5rem */
/* === Functions — end ======================================================== */
/* Barrel file: every partial does `@use '../abstracts' as *;` to get tokens,
   functions and mixins in one line. */
/* =============================================================================
   Mixins — media queries, layout helpers, and one mixin per Figma text style.
   ============================================================================= */
/* -- media queries -----------------------------------------------------------
   mq(lg)          -> up to 1279.98px   (desktop-first, the usual case)
   mq-up(sm)       -> from 768px up
   mq-between(sm, lg)
   -------------------------------------------------------------------------- */
/* -- interaction -------------------------------------------------------------
   Only applies hover styles on devices that actually hover, so tapping a card
   on a phone does not leave it stuck in its hover state.
   -------------------------------------------------------------------------- */
/* Visible focus ring for keyboard users only. */
/* For a control whose real <input> is visually hidden — a file field, a
   checkbox. The input has nothing to draw a ring on, so the wrapper draws it. */
/* -- layout ----------------------------------------------------------------- */
/* Truncate after $lines lines.
   Do NOT put height, min-height or max-height on the same element: any of them
   disables -webkit-line-clamp. If a design calls for a fixed box, set it on
   the parent. */
/* Make a whole card clickable from a link inside it. */
/* Fixed-ratio image box. The image is CONTAINED, never cropped — the client's
   rule for every category, product and gallery thumbnail. $ratio is one of the
   $ratio-* tokens; pass $fit: cover only for decorative photos. */
/* =============================================================================
   Text styles — one mixin per Figma typography token.
   Never hard-code a font-size/line-height pair in a component; use these.
   Letter-spacing values are the rendered px values (Figma stores them as %).
   ============================================================================= */
/* === Mixins — end =========================================================== */
/* === abstracts — end ======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* The browser default is only `display: none` at user-agent weight, so any
   component that sets its own display would quietly ignore the attribute.
   JavaScript in this project hides things with el.hidden, so it has to win. */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  min-height: 100vh;
  background-color: #ffffff;
  color: #333333;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Stop long words breaking layouts. */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Keep an anchored section clear of the sticky header. */
:target {
  scroll-margin-top: 198px;
}
@media (max-width: 1279.98px) {
  :target {
    scroll-margin-top: 90px;
  }
}

/* === Reset — end ============================================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Base typography — the defaults every page inherits.
   Component-specific sizes belong in that component's file, using the text
   mixins from abstracts/_mixins.scss.
   ============================================================================= */
body {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

/* Every page and section title in the design is Headlines/M, so h1 and h2 both
   default to it; the 80px Headlines/L is only the hero title (.h-l). */
h1, h2, h3, h4, h5, h6 {
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

h1, h2 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  h1, h2 {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  h1, h2 {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  h1, h2 {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}

h3 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
}

h4 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  h4 {
    font-size: 17px;
    line-height: 26px;
  }
}
h4 {
  font-weight: 600;
}

h5 {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

h6 {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

/* The two heading sizes as plain classes, for a title that must not be an
   <h1>/<h2> semantically (the hero, a type specimen). */
.h-l {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: -3.2px;
}
@media (max-width: 1439.98px) {
  .h-l {
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -2.4px;
  }
}
@media (max-width: 1279.98px) {
  .h-l {
    font-size: 54px;
  }
}
@media (max-width: 767.98px) {
  .h-l {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
}

.h-m {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .h-m {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .h-m {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .h-m {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}

/* h1/h2 and .h-l step down inside their own mixins; only h3/h4 need it here. */
@media (max-width: 1439.98px) {
  h3 {
    font-size: 28px;
    line-height: 40px;
  }
}
@media (max-width: 1279.98px) {
  h3 {
    font-size: 26px;
    line-height: 36px;
  }
}
@media (max-width: 767.98px) {
  h3 {
    font-size: 22px;
    line-height: 30px;
  }
  h4 {
    font-size: 18px;
    line-height: 26px;
  }
}
/* No global paragraph margin on purpose: `p:not(:last-child)` scores 0-1-1 and
   silently beats component classes (0-1-0). Paragraph rhythm lives in .rte. */
a {
  transition: color 0.25s ease;
}
a:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

small {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  letter-spacing: 0;
}

/* -- rich text --------------------------------------------------------------
   Wrap any CMS-editable block in .rte so raw HTML gets styled without extra
   classes. Body copy in the design is Lato 16/1.5 in black.

   Everything the editor can emit is covered, and the block's own first and
   last margins are stripped, so a section's spacing holds whatever comes back
   from CKEditor — one paragraph, five, a list, a heading first.

     .rte              body copy (the default)
     .rte--lead        the bold intro paragraph
     .rte--l           Content/L, for a larger intro
     .rte--white       on navy and photo bands
   -------------------------------------------------------------------------- */
.rte {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}
.rte > *:not(:last-child) {
  margin-bottom: 1.5em;
}
.rte > *:first-child {
  margin-top: 0;
}
.rte > *:last-child {
  margin-bottom: 0;
}
.rte h2, .rte h3, .rte h4, .rte h5 {
  margin-top: 1.5em;
}
.rte {
  /* The kit's in-content ladder (Figma 902:6393, the industry page): h2 =
     Content/L Emphasis 32/50, h3 = Content/L 20/30 in the primary blue with
     19px to its copy, h4 = the bold body line 4px over its paragraph. */
}
.rte h2 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  letter-spacing: -1px;
}
.rte h3 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .rte h3 {
    font-size: 17px;
    line-height: 26px;
  }
}
.rte h3 {
  color: #01a1f0;
}
.rte h4 {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  line-height: normal;
}
.rte h5 {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  line-height: 1.4;
}
.rte > h3:not(:last-child) {
  margin-bottom: 19px;
}
.rte > h4:not(:last-child) {
  margin-bottom: 4px;
}
@media (max-width: 767.98px) {
  .rte h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }
}
.rte a {
  color: #01a1f0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .rte a:hover {
    color: #0051a1;
  }
}
.rte ul, .rte ol {
  padding-left: 1.25em;
}
.rte ul {
  list-style: disc;
}
.rte ol {
  list-style: decimal;
}
.rte li:not(:last-child) {
  margin-bottom: 0.4em;
}
.rte blockquote {
  padding: 20px 24px;
  background-color: #f0f8ff;
  border-left: 4px solid #01a1f0;
}
.rte img {
  margin-block: 1.5em;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
.rte {
  /* A table the editor pasted still has to survive 320px. */
}
.rte table {
  width: 100%;
  border-collapse: collapse;
}
.rte table th, .rte table td {
  padding: 10px 14px;
  border: 1px solid #dddddd;
  text-align: left;
}
.rte table th {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  background-color: #f6f6f6;
}
.rte--lead {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  line-height: 1.2;
}
.rte--lead > *:not(:last-child) {
  margin-bottom: 1em;
}
.rte--l {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .rte--l {
    font-size: 17px;
    line-height: 26px;
  }
}
.rte {
  /* the product page description: the kit's Gray 2 on a 26px line */
}
.rte--muted {
  color: #4f4f4f;
  line-height: 26px;
}
.rte {
  /* Check-marked lists (the facility page, Figma 866:9896): the editor's plain
     <ul> renders the drawn 24×25 check-in-a-circle in the secondary blue
     instead of a disc, 27px before Manrope Medium 16/30, items 10 apart, 26
     under the paragraph before it. The circle colour is $c-secondary. */
}
.rte--checks ul {
  padding: 0;
  list-style: none;
}
.rte--checks > p + ul {
  margin-top: 26px;
}
.rte--checks ul > li {
  position: relative;
  padding-left: 51px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
}
.rte--checks ul > li:not(:last-child) {
  margin-bottom: 10px;
}
.rte--checks ul > li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 24px;
  height: 25px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 25'%3E%3Crect width='24' height='25' rx='12' fill='%230051a1'/%3E%3Cpath d='M6.75 12.75L10.75 16.25L17.25 8.75' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;
}
.rte--white {
  color: #ffffff;
}
.rte--white :is(h2, h3, h4, h5) {
  color: #ffffff;
}
.rte--white a {
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .rte--white a:hover {
    color: #01a1f0;
  }
}

/* === Base typography — end ================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Global layout primitives and the handful of utility classes worth having.
   Resist adding more utilities here — component styles belong in components/.
   ============================================================================= */
/* -- containers -------------------------------------------------------------
   .container          1680px content area (matches the 120px clear at 1920)
   .container--flush   same width, no side padding (full-bleed children)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 767.98px) {
  .container {
    padding-inline: 16px;
  }
}
.container--flush {
  padding-inline: 0;
}

/* -- page shell -------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  /* The header is position:fixed so it can shrink on scroll without dragging
     the page up with it, so the shell reserves its full height here. */
  padding-top: 178px;
  /* Home: the whole header floats over the hero (Figma puts both bars on top
     of the photo), so nothing is reserved — the hero pads its own copy down. */
}
.page--home {
  padding-top: 0;
}
@media (max-width: 1279.98px) {
  .page {
    padding-top: 70px;
  }
  .page--home {
    padding-top: 70px;
  }
}
.page__main {
  flex: 1 0 auto;
}

/* -- section spacing ---------------------------------------------------------
   Vertical rhythm between page sections. Override per section when Figma says
   something different — this is the default, not a rule.
   -------------------------------------------------------------------------- */
.section {
  padding-block: 100px;
}
@media (max-width: 1279.98px) {
  .section {
    padding-block: 64px;
  }
}
@media (max-width: 767.98px) {
  .section {
    padding-block: 40px;
  }
}
.section--tight {
  padding-block: 48px;
}
@media (max-width: 767.98px) {
  .section--tight {
    padding-block: 32px;
  }
}
.section--flush {
  padding-block: 0;
}
.section--light {
  background-color: #f6f6f6;
}
.section--blue {
  background-color: #f0f8ff;
}
.section--navy {
  background-color: #10233c;
  color: #ffffff;
}
.section--navy :is(h1, h2, h3, h4, h5, h6) {
  color: #ffffff;
}

/* -- section heading --------------------------------------------------------
   The recurring "eyebrow + title + subtext" stack (Figma: Subheader Group,
   Section Header). Eyebrow is Components/Uppercase in the bright blue, title is
   Headlines/M, subtext is Content/L; the centred variant is used on the home
   page bands.
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 860px;
}
.section-head--center {
  margin-inline: auto;
  max-width: 705px;
  text-align: center;
}
.section-head--wide {
  max-width: none;
}
.section-head__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 -13px;
  color: #01a1f0;
}
.section-head__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .section-head__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .section-head__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .section-head__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.section-head__title {
  margin: 0;
}
.section-head__text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .section-head__text {
    font-size: 17px;
    line-height: 26px;
  }
}
.section-head__text {
  margin: 0;
  color: #000000;
}
.section-head {
  /* The title steps down on its own — the h-m mixin carries the sizes. */
}
@media (max-width: 767.98px) {
  .section-head {
    gap: 10px;
  }
  .section-head__eyebrow {
    margin-bottom: -10px;
    font-size: 15px;
    letter-spacing: 1.5px;
  }
}

/* -- image boxes -------------------------------------------------------------
   Every category, product and gallery picture sits in one of these: a fixed
   ratio, the image contained on a plain background, never cropped.
   -------------------------------------------------------------------------- */
.img-box {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #ffffff;
}
.img-box > img,
.img-box > picture > img,
.img-box > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.img-box--category {
  aspect-ratio: 405 / 262;
}
.img-box--light {
  background-color: #f6f6f6;
}
.img-box--rounded {
  border-radius: 8px;
}

/* -- icon sprite -------------------------------------------------------------
   <svg class="icon icon--24"><use href="img/sprite.svg#icon-search"></use></svg>
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--16 {
  font-size: 16px;
}
.icon--20 {
  font-size: 20px;
}
.icon--24 {
  font-size: 24px;
}
.icon--32 {
  font-size: 32px;
}
.icon--48 {
  font-size: 48px;
}

/* -- utilities --------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  background-color: #0051a1;
  color: #ffffff;
  clip-path: none;
}

/* -- scroll reveal -----------------------------------------------------------
   JS adds .is-revealed when the element scrolls into view (js/app/reveal.js).
   Motion lives here, so changing it never means touching JavaScript.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-reveal=fade-up] {
  transform: translateY(32px);
}

.js [data-reveal=fade-down] {
  transform: translateY(-32px);
}

.js [data-reveal=fade-left] {
  transform: translateX(32px);
}

.js [data-reveal=fade-right] {
  transform: translateX(-32px);
}

.js [data-reveal=fade] {
  transform: none;
}

.js [data-reveal=zoom] {
  transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* === Global — end =========================================================== */
/* -- components ------------------------------------------------------------- */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Buttons — measured from the Figma component sets Big-Button / Medium-button /
   Small-button.

     <a class="btn">                         medium, solid dark blue (the default)
     <a class="btn btn--bright">             medium, bright blue
     <a class="btn btn--black">              medium, charcoal
     <a class="btn btn--outline">            medium, black outline
     <a class="btn btn--outline-white">      medium, white outline (dark bands)
     <a class="btn btn--lg">                 big — combine with any colour above
     <a class="btn-link">                    small — uppercase text + arrow, no box
     <a class="btn-link btn-link--blue">
     <a class="btn-link btn-link--bright">   small, bright blue
     <a class="btn-link btn-link--boxed">    small, thin blue border

   Size and colour are independent. Every button shifts its fill on hover and
   nudges its arrow to the right.
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 15px;
  background-color: #0051a1;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #ffffff;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.btn__icon {
  width: 17px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.btn {
  /* A 32px icon before the label (the home FAQ / Knowledge buttons). */
}
.btn__lead {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .btn__lead {
    width: 24px;
    height: 24px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: #01a1f0;
  }
  .btn:hover .btn__icon {
    transform: translateX(4px);
  }
}
.btn:active {
  transform: translateY(1px);
}
.btn {
  /* -- colours ------------------------------------------------------------- */
}
.btn--bright {
  background-color: #01a1f0;
}
@media (hover: hover) and (pointer: fine) {
  .btn--bright:hover {
    background-color: #0051a1;
  }
}
.btn--black {
  background-color: #333333;
}
@media (hover: hover) and (pointer: fine) {
  .btn--black:hover {
    background-color: #000000;
  }
}
.btn--outline {
  background-color: transparent;
  border-color: #000000;
  color: #333333;
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
  }
}
.btn--outline-white {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline-white:hover {
    background-color: #ffffff;
    color: #10233c;
  }
}
.btn {
  /* -- sizes --------------------------------------------------------------- */
}
.btn--lg {
  padding: 24px 25px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.4px;
}
.btn--block {
  width: 100%;
}
.btn {
  /* The product card's Learn more (Figma 866:5319): a 41px box, radius 4. */
}
.btn--sm {
  gap: 8px;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.btn--sm .btn__icon {
  width: 12px;
  height: 8px;
}
.btn {
  /* The orders table's "View details" / "Re-order" (Figma 944:8230): 12px caps in
     a hairline box. Lato ships in 400 and 700 only, so the drawn SemiBold is 700. */
}
.btn--xs {
  gap: 6px;
  padding: 10px;
  background-color: transparent;
  border-color: #9daac1;
  border-radius: 6px;
  color: #3c3c3c;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .btn--xs:hover {
    background-color: #0051a1;
    border-color: #0051a1;
    color: #ffffff;
  }
}
.btn {
  /* …and its filled twin: the one action that wants attention in a table row
     (Checkout on an approved custom order). */
}
.btn--xs-fill {
  background-color: #0051a1;
  border-color: #0051a1;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .btn--xs-fill:hover {
    background-color: #01a1f0;
    border-color: #01a1f0;
  }
}
.btn {
  /* With a 32px lead icon the box would run 2px over the drawn 64. */
}
.btn--icon {
  padding-block: 15px;
}
@media (max-width: 767.98px) {
  .btn--icon {
    padding-block: 12px;
  }
}
.btn {
  /* -- states -------------------------------------------------------------- */
}
.btn:disabled, .btn.is-disabled {
  background-color: #dddddd;
  border-color: transparent;
  color: #979696;
  pointer-events: none;
}
.btn {
  /* Loading — set with FW.setLoading(btn, true) while an ajax request runs.
     The label and arrow stay in the box (so the button keeps its size) but go
     invisible, and a spinner in the current text colour takes their place. */
}
.btn.is-loading {
  position: relative;
  pointer-events: none;
}
.btn.is-loading > span,
.btn.is-loading .btn__icon {
  visibility: hidden;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@media (max-width: 767.98px) {
  .btn {
    padding: 14px 16px;
    font-size: 15px;
  }
  .btn--lg {
    padding: 18px 20px;
    font-size: 18px;
  }
  .btn--sm {
    padding: 10px 16px;
    font-size: 14px;
  }
}
.btn {
  /* Long labels wrap rather than overflow a 320px screen. */
}
@media (max-width: 575.98px) {
  .btn {
    max-width: 100%;
    white-space: normal;
  }
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =============================================================================
   Small button — uppercase text with a small arrow. No box, no padding.
   ============================================================================= */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #3c3c3c;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.btn-link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.btn-link__icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-link:hover {
    color: #0051a1;
  }
  .btn-link:hover .btn-link__icon {
    transform: translateX(4px);
  }
}
.btn-link--blue {
  color: #0051a1;
}
@media (hover: hover) and (pointer: fine) {
  .btn-link--blue:hover {
    color: #01a1f0;
  }
}
.btn-link--bright {
  color: #01a1f0;
}
@media (hover: hover) and (pointer: fine) {
  .btn-link--bright:hover {
    color: #0051a1;
  }
}
.btn-link--white {
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .btn-link--white:hover {
    color: #01a1f0;
  }
}
.btn-link--sm {
  font-size: 12px;
  letter-spacing: 0.24px;
}
.btn-link--boxed {
  padding: 4px;
  border: 1px solid #0051a1;
  color: #0051a1;
  font-size: 14px;
  letter-spacing: 0.28px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-link--boxed:hover {
    background-color: #0051a1;
    color: #ffffff;
  }
}

/* === Buttons — end ========================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Form controls — inputs, textarea, native select, checkbox, radio, file.
   Select2 gets its own theme in components/_select2.scss.

     <div class="field">
       <label class="field__label" for="company">Company</label>
       <input class="field__control" id="company" name="company" type="text">
       <span class="field__error">Message goes here</span>
     </div>

   Add .field--error / .field--success to the wrapper to colour the whole group.
   ============================================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.field__label {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}
.field--required .field__label::after {
  content: " *";
  color: #d64545;
}
.field__control {
  width: 100%;
  padding: 9px 12px;
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
  border-radius: 6px;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  appearance: none;
}
.field__control::placeholder {
  color: #c1c1c1;
  opacity: 1;
}
.field__control:hover:not(:disabled) {
  border-color: #979696;
}
.field__control {
  /* Pointer focus gets the border tint only; keyboard focus also gets a real
     ring, because a 1px border changing colour is not a focus indicator you
     can find with the keyboard. */
}
.field__control:focus {
  border-color: #01a1f0;
  outline: none;
}
.field__control:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 1px;
}
.field__control:disabled, .field__control[readonly] {
  background-color: #eeeeee;
  color: #979696;
  cursor: not-allowed;
}
.field {
  /* textarea */
}
.field textarea.field__control {
  min-height: 140px;
  resize: vertical;
}
.field {
  /* native select — the chevron is a background image so the box matches inputs */
}
.field select.field__control {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333333' fill-rule='evenodd' d='M12.375 5.219 8 8.719 3.625 5.219a1 1 0 0 0-1.25 1.562l5 4a1 1 0 0 0 1.25 0l5-4a1 1 0 0 0-1.25-1.562Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field {
  /* -- messages ------------------------------------------------------------ */
}
.field__hint {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #696767;
}
.field {
  /* just-validate writes one of these under a control only when that control
     is actually wrong, so it never needs hiding. */
}
.field__error {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  display: block;
  color: #d64545;
}
.field__control.is-invalid {
  border-color: #d64545;
}
.field--error .field__control {
  border-color: #d64545;
}
.field--success .field__control {
  border-color: #0a8c4a;
}

/* =============================================================================
   Checkbox and radio — the native control is hidden and re-drawn, so it stays
   keyboard-accessible and works inside a normal form post.
   Figma: 16px box, 5px radius, grey border; 20px radio. The checked state is
   the dark blue at the client's request (the kit draws it grey).
   ============================================================================= */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 15px;
  cursor: pointer;
}
.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.check__box {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid #979696;
  border-radius: 5px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.check__box::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 4.5px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.check__label {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}
.check__input:checked + .check__box {
  background-color: #0051a1;
  border-color: #0051a1;
}
.check__input:checked + .check__box::after {
  transform: rotate(45deg) scale(1);
}
.check__input:focus-visible + .check__box {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.check__input:disabled + .check__box {
  background-color: #eeeeee;
  border-color: #c1c1c1;
}
@media (hover: hover) and (pointer: fine) {
  .check:hover .check__box {
    border-color: #0051a1;
  }
}
.check {
  /* Box only — the visible text sits outside the label (the category tree,
     where the label is a link). Keep a visually-hidden name inside. */
}
.check--bare {
  gap: 0;
}
.check--bare .check__box {
  margin-top: 0;
}
.check {
  /* radio: same markup, round box */
}
.check--radio .check__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
}
.check--radio .check__box::after {
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%) scale(0);
}
.check--radio .check__input:checked + .check__box {
  background-color: #0051a1;
  border-color: #0051a1;
}
.check--radio .check__input:checked + .check__box::after {
  transform: translate(-50%, -50%) scale(1);
}

/* =============================================================================
   File input — native input hidden behind a BROWSE button, filename shown left.
   Requires js-file-field (see src/js/app/forms.js).
   ============================================================================= */
.file-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 5px 0 12px;
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
  border-radius: 6px;
  transition: border-color 0.25s ease;
  /* The input is visually hidden, so the box shows the focus. */
}
.file-field:has(:focus-visible) {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.file-field:focus-within {
  border-color: #01a1f0;
}
.file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.file-field__name {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  flex: 1;
  padding-block: 9px;
  color: #c1c1c1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-field__name.is-filled {
  color: #333333;
}
.file-field__button {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 5px 10px;
  background-color: #dddddd;
  border-radius: 5px;
  color: #000000;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .file-field__button:hover {
    background-color: #0051a1;
    color: #ffffff;
  }
}

/* -- form layout helpers ----------------------------------------------------- */
.form {
  /* The one vertical rhythm: every direct child sits 20px under the last.
     It is first in the block so a modifier below can still override it — they
     have the same specificity, so source order decides. */
}
.form > * + * {
  margin-top: 20px;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 767.98px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}
.form__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023.98px) {
  .form__row--3 {
    grid-template-columns: 1fr;
  }
}
.form__row--full {
  grid-template-columns: 1fr;
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* === Form controls — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Select2 — "ferrier" theme.

   Select2's stock look is nothing like the design, so rather than fighting the
   default stylesheet with overrides we register our own theme name. Everything
   here is scoped to .select2-container--ferrier, so the vendor CSS is untouched
   and upgrading Select2 will not silently change how these look.

   Applied by src/js/app/forms.js to any <select class="js-select-search">.
   ============================================================================= */
.select2-container--ferrier {
  /* Width comes from the `width: '100%'` option in forms.js, which sets it
     inline on the control. Do NOT force it in CSS — Select2 renders the open
     dropdown as a SECOND .select2-container, and a `width: 100% !important`
     here stretches that one across the page and causes horizontal scroll. */
  /* -- the closed control -------------------------------------------------- */
}
.select2-container--ferrier .select2-selection--single {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  padding: 9px 36px 9px 12px;
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
  border-radius: 6px;
  /* Select2 draws its own outline; ours replaces it, and only for keyboard
     focus — the element carries tabindex="0", so it is a real tab stop. */
  outline: none;
  transition: border-color 0.25s ease;
}
.select2-container--ferrier .select2-selection--single:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.select2-container--ferrier .select2-selection__rendered {
  padding: 0;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.select2-container--ferrier .select2-selection__placeholder {
  color: #c1c1c1;
}
.select2-container--ferrier {
  /* chevron — same glyph as the native select */
}
.select2-container--ferrier .select2-selection__arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}
.select2-container--ferrier .select2-selection__arrow b {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23696767' fill-rule='evenodd' d='M12.375 5.219 8 8.719 3.625 5.219a1 1 0 0 0-1.25 1.562l5 4a1 1 0 0 0 1.25 0l5-4a1 1 0 0 0-1.25-1.562Z'/%3E%3C/svg%3E") no-repeat center/16px;
  transition: transform 0.25s ease;
}
.select2-container--ferrier:hover .select2-selection--single {
  border-color: #979696;
}
.select2-container--ferrier {
  /* Select2 sets this while the control holds focus by any means. */
}
.select2-container--ferrier.select2-container--focus .select2-selection--single {
  border-color: #01a1f0;
}
.select2-container--ferrier.select2-container--open .select2-selection--single {
  border-color: #01a1f0;
}
.select2-container--ferrier.select2-container--open .select2-selection__arrow b {
  transform: rotate(180deg);
}
.select2-container--ferrier.select2-container--disabled .select2-selection--single {
  background-color: #eeeeee;
  color: #979696;
}
.select2-container--ferrier {
  /* -- the open dropdown ---------------------------------------------------- */
}
.select2-container--ferrier .select2-dropdown {
  background-color: #ffffff;
  border: 1px solid #01a1f0;
  border-radius: 6px;
}
.select2-container--ferrier .select2-search--dropdown {
  padding: 8px;
  border-bottom: 1px solid #dddddd;
}
.select2-container--ferrier .select2-search__field {
  padding: 8px 10px;
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  outline: none;
}
.select2-container--ferrier .select2-search__field:focus {
  border-color: #01a1f0;
}
.select2-container--ferrier .select2-results__options {
  max-height: 260px;
  overflow-y: auto;
}
.select2-container--ferrier .select2-results__option {
  padding: 10px 12px;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.select2-container--ferrier .select2-results__option--highlighted {
  background-color: #f0f8ff;
  color: #01a1f0;
}
.select2-container--ferrier .select2-results__option--selected {
  background-color: #01a1f0;
  color: #ffffff;
}
.select2-container--ferrier .select2-results__message {
  color: #696767;
  font-style: italic;
}

/* === Select2 theme — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Places — the address suggestions under a street field (js/app/places.js).
   Drawn from the Select2 dropdown (components/_select2.scss): the white box
   with the brand-blue border, 16px Lato options, the light-blue highlight;
   the rest of the address in grey on its own line, Google's attribution
   under the options. The script sets `top` (right under the input, whatever
   error line follows it).

     <div class="field field--places">
       <input class="field__control js-places" role="combobox" …>
       <div class="places">
         <ul class="places__list" role="listbox">
           <li class="places__option is-active" role="option">
             <span class="places__main">100 Queen St W</span>
             <span class="places__more">Toronto, ON, Canada</span>
           </li>
         </ul>
         <p class="places__credit">Google Maps</p>
       </div>
     </div>
   ============================================================================= */
.field--places {
  position: relative;
}

.places {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 300;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #01a1f0;
  border-radius: 6px;
}
.places__list {
  max-height: 300px;
  overflow-y: auto;
}
.places__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.places__option.is-active {
  background-color: #f0f8ff;
  color: #01a1f0;
}
.places__more {
  color: #696767;
  font-size: 14px;
}
.places__credit {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 6px 12px;
  border-top: 1px solid #dddddd;
  color: #696767;
  text-align: right;
}

/* === Places — end =========================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Breadcrumb bar — Figma 854:3677. Sits directly under the header on every
   inner page.
   ============================================================================= */
.breadcrumbs {
  background-color: #f9faf8;
  border-bottom: 1px solid #e7e7eb;
}
.breadcrumbs__list {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  line-height: normal;
  color: #696767;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs__link {
  color: #696767;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumbs__link:hover {
    color: #01a1f0;
  }
}
.breadcrumbs__sep {
  width: 6px;
  height: 10px;
  color: #696767;
}
.breadcrumbs {
  /* a section with no page of its own (About Us): the link colour, no hover */
}
.breadcrumbs__group {
  color: #696767;
}
.breadcrumbs__current {
  color: #333333;
}
@media (max-width: 767.98px) {
  .breadcrumbs__list {
    padding-block: 12px;
  }
}

/* === Breadcrumbs — end ====================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Popup dialogs — Figma Login-popup 810:820 and Request-quote 810:890; the
   Register and Reset password dialogs are built from the same shell.

   988px wide, 12px radius, the blue title centred over the form and the close
   button top right. The narrow shell keeps its form in the drawn 455px column
   (login, reset); `--wide` lets it fill the panel in two columns (request a
   quote, register). Fancybox shows the panel — everything here is ours, its
   own chrome is switched off in js/app/popups.js.
   ============================================================================= */
/* Fancybox 6 moves this element itself into the slide and sets display:flex on
   it inline, so the panel is a flex column rather than a plain block. */
.popup {
  position: relative;
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 988px;
  padding: 48px 88px 64px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}
.popup__close {
  position: absolute;
  top: 25px;
  right: 28px;
  display: flex;
  padding: 6px;
  background: none;
  border: 0;
  color: #979696;
  cursor: pointer;
  transition: color 0.25s ease;
}
.popup__close:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .popup__close:hover {
    color: #0051a1;
  }
}
.popup__close-icon {
  width: 14px;
  height: 14px;
}
.popup__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .popup__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .popup__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .popup__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.popup__title {
  margin: 0 0 40px;
  color: #0051a1;
  text-align: center;
}
.popup {
  /* width: 100% because auto side margins stop a flex item from stretching. */
}
.popup__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  width: 100%;
  max-width: 560px;
  margin: -24px auto 32px;
  color: #333333;
  text-align: center;
}
.popup {
  /* -- the form ------------------------------------------------------------ */
}
.popup__form {
  width: 100%;
  max-width: 455px;
  margin-inline: auto;
}
.popup__form > * + * {
  margin-top: 24px;
}
.popup--wide .popup__form {
  max-width: none;
}
.popup--wide .popup__form .form__row {
  column-gap: 65px;
}
.popup {
  /* "Become a Member" is drawn on a tighter grid than Request a quote. */
}
.popup__form--member .form__row {
  column-gap: 37px;
}
.popup__form--member .form__row--3 {
  column-gap: 22px;
}
.popup {
  /* -- the Terms and Conditions file --------------------------------------- */
}
.popup__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.popup__pdf {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 5px 10px;
  background-color: #f6f7fa;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}
.popup__pdf-icon {
  width: 27px;
  height: 38px;
  flex-shrink: 0;
}
.popup {
  /* -- the Terms tick (the user, 2026-09-23; not in Figma) -----------------
     The site's checkbox; its message sits under the box, in line with the
     label (the 16px box and the 15px gap). */
}
.popup__consent-error {
  margin: 6px 0 0 31px;
}
.popup__consent-error:empty {
  display: none;
}
.popup {
  /* the drawn message box, a touch shorter than the site default */
}
.popup__form textarea.field__control {
  min-height: 117px;
}
.popup__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 6px 0 0;
  color: #696767;
}
.popup__note--right {
  text-align: right;
}
.popup__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .popup__link:hover {
    color: #0051a1;
  }
}
.popup__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  text-align: center;
}
.popup__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #d64545;
}
.popup {
  /* -- the answer ---------------------------------------------------------- */
}
.popup__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 24px 8px;
  text-align: center;
}
.popup__done-icon {
  width: 56px;
  height: 56px;
  padding: 16px;
  background-color: #f0f8ff;
  border-radius: 50%;
  color: #0051a1;
}
.popup__done-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  margin: 0;
  line-height: 1.2;
  color: #000000;
}
.popup__done-text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  max-width: 480px;
  margin: 0;
  color: #333333;
}
@media (max-width: 1023.98px) {
  .popup {
    padding: 40px 40px 48px;
  }
}
@media (max-width: 767.98px) {
  .popup {
    padding: 32px 20px 36px;
    border-radius: 8px;
  }
  .popup__close {
    top: 12px;
    right: 12px;
  }
  .popup__title {
    margin-bottom: 24px;
  }
  .popup__text {
    margin: -12px auto 24px;
  }
  .popup__form > * + * {
    margin-top: 20px;
  }
  .popup__actions {
    margin-top: 24px;
  }
}

/* The dialog backdrop: the navy at 60%, not Fancybox's near-black. */
.fancybox__backdrop {
  background-color: rgba(16, 35, 60, 0.6);
}

/* -- the small dialogs: "Added to your cart", the confirm question -----------
   620px, a summary line and a row of two buttons. Not in Figma — the shell
   with less padding.
   -------------------------------------------------------------------------- */
.popup--sm {
  max-width: 620px;
  padding: 48px 56px 56px;
}
.popup--sm .popup__title {
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  .popup--sm {
    padding: 40px 24px 32px;
  }
}

.popup__summary {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  width: 100%;
  margin: 0 0 32px;
  color: #333333;
  text-align: center;
}
.popup__summary strong {
  color: #000000;
}

.popup__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.popup__buttons .btn {
  flex: 1 1 200px;
}

/* === Popup dialogs — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Category tile — Figma component "Product category" 962:11399 (405x262).

   One link: the contained picture in its 405:262 box, a #252525 gradient
   blended hard-light over it, and the caption (Components/Uppercase Emphasis
   plus the long arrow) 19px in from the bottom-left. The caption box always
   reserves two lines and grows upwards past that, so a short title starts on
   the same line as a two-line one (as drawn) and a long one never runs off
   the tile. Hover = Variant2 967:11407: the gradient climbs and the caption
   shadow deepens; the arrow nudges right. The picture itself never moves —
   it is contained in its box and must never be cropped.

   The gradient stop is a LENGTH, not the drawn percentage: 150px is exactly
   57.252% of the 262px tile, and keeping it absolute means the shade still
   covers the caption on the smaller tiles the grid makes below 1700px, where
   a long title wraps to three lines.
   ============================================================================= */
/* Registered so the gradient stop can transition; the var() below carries the
   same value as a fallback for browsers without @property. */
@property --cat-tile-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 150px;
}
.cat-tile {
  position: relative;
  display: block;
  isolation: isolate;
  color: #ffffff;
}
.cat-tile:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.cat-tile__media {
  display: block;
}
.cat-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, #252525 0%, rgba(0, 0, 0, 0) var(--cat-tile-fade, 150px));
  mix-blend-mode: hard-light;
  transition: --cat-tile-fade 0.45s ease;
  pointer-events: none;
}
.cat-tile__caption {
  position: absolute;
  inset: auto 25px 19px 19px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  column-gap: 23px;
  min-height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: filter 0.25s ease;
}
.cat-tile__title {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.cat-tile__arrow {
  width: 29px;
  height: 14.73px;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover .cat-tile__media::after {
    --cat-tile-fade: 214px;
  }
  .cat-tile:hover .cat-tile__caption {
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.5));
  }
  .cat-tile:hover .cat-tile__arrow {
    transform: translateX(4px);
  }
}
@media (max-width: 767.98px) {
  .cat-tile__caption {
    inset: auto 16px 14px 14px;
    column-gap: 16px;
    min-height: 44px;
  }
  .cat-tile__title {
    font-size: 16px;
    line-height: 22px;
  }
  .cat-tile__arrow {
    width: 24px;
    height: 12.19px;
  }
}

/* === Category tile — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Project card — Figma 854:2885 / 854:2887 / 854:2889.

   One link: the photo fills the card (cropped on purpose, like the hero) and
   a 60% black bar across the bottom carries the name, the arrow and two lines
   of description. The card's proportion comes from its modifier — `--main`
   simply fills the two-row cell of the home mosaic.
   ============================================================================= */
.project-card {
  position: relative;
  display: block;
  aspect-ratio: 405/330;
  overflow: hidden;
  color: #ffffff;
}
.project-card:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.project-card--wide {
  aspect-ratio: 830/330;
}
.project-card--main {
  aspect-ratio: auto;
  height: 100%;
}
.project-card {
  /* the listing card (Figma 889:12644): 548:452, the bar's copy 25px in and
     32px from the right edge */
}
.project-card--grid {
  aspect-ratio: 548/452;
}
@media (min-width: 1280px) {
  .project-card--grid .project-card__body {
    padding: 30px 32px 22px 25px;
  }
}
.project-card__media {
  position: absolute;
  inset: 0;
}
.project-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card {
  /* 136px as drawn: 30 top + 24 title + 14 gap + 46 text + 22 bottom. The
     min-height keeps every bar the same depth whether the description runs to
     one line or two — it cannot go on the description itself, which is
     line-clamped. */
}
.project-card__body {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 136px;
  padding: 30px 38px 22px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.25s ease;
}
.project-card {
  /* 16px, not the drawn 24: the longest name ("CF Toronto Eaton Centre") is
     1px wider than the drawn text box and would otherwise ellipsise. */
}
.project-card__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.project-card__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.project-card__arrow {
  width: 16px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.project-card__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  color: #dddddd;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card__media > img {
    transform: scale(1.04);
  }
  .project-card:hover .project-card__body {
    background-color: rgba(0, 0, 0, 0.75);
  }
  .project-card:hover .project-card__arrow {
    transform: translateX(4px);
  }
}
@media (max-width: 1279.98px) {
  .project-card__body {
    min-height: 125px;
    padding: 22px 24px 20px;
  }
  .project-card__line {
    gap: 16px;
  }
  .project-card__title {
    font-size: 17px;
    letter-spacing: 1.5px;
  }
}
@media (max-width: 767.98px) {
  .project-card__body {
    gap: 8px;
    min-height: 84px;
    padding: 16px;
  }
  .project-card__title {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .project-card {
    /* One line on a phone: the bar would otherwise swallow half the card. */
  }
  .project-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__media > img {
    transition: none;
  }
}
/* === Project card — end ===================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   News card — Figma component News 866:4050.

   Thumbnail (cover, like every editorial photo), the date with its calendar
   icon, the title, a three-line excerpt and "Read more". The whole card is
   one link, so the arrow and title react to a hover anywhere on it.
   ============================================================================= */
.news-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: #000000;
}
.news-card:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.news-card__media {
  position: relative;
  aspect-ratio: 394 / 306;
  overflow: hidden;
  background-color: #f6f6f6;
}
.news-card__media > img,
.news-card__media > picture > img,
.news-card__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card__media {
  display: block;
  width: 100%;
}
.news-card__media > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card__date {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #979696;
}
.news-card__calendar {
  width: 20px;
  height: 20px;
}
.news-card {
  /* 23px from the date, as drawn — the card's own gap is 20. */
}
.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 3px;
}
.news-card__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .news-card__title {
    font-size: 17px;
    line-height: 26px;
  }
}
.news-card__title {
  color: #000000;
  transition: color 0.25s ease;
}
.news-card__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #000000;
}
@media (hover: hover) and (pointer: fine) {
  .news-card:hover .news-card__media > img {
    transform: scale(1.04);
  }
  .news-card:hover .news-card__title {
    color: #0051a1;
  }
  .news-card:hover .btn-link__icon {
    transform: translateX(4px);
  }
}
@media (max-width: 767.98px) {
  .news-card {
    gap: 16px;
  }
  .news-card__title {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card__media > img {
    transition: none;
  }
}
/* === News card — end ======================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Catalog sidebar — Figma 866:5924 on the Products page: the "Product
   Categories" tree (Categories 889:12027 / Left menu 889:11343 / Sub category
   854:3913), the Filters groups (866:5920) and Clear all.

   Three collapsible things live here and all fold the same way:
   grid-template-rows 0fr → 1fr on a wrapper whose direct child has
   overflow:hidden and no padding (the spacing sits one level further in).

   Below 1280px the aside is the shared slide-in drawer
   (components/_drawer.scss + js/app/drawer.js); only the desktop spacing of
   the Clear all row is the catalog's own.
   ============================================================================= */
/* -- the aside: Clear all under the filters on desktop (the drawer's sticky
      foot below 1280px, components/_drawer.scss) --------------------------------- */
@media (min-width: 1280px) {
  .catalog-aside__foot {
    margin-top: 35px;
  }
}

/* -- the form: two collapsible blocks ----------------------------------------- */
.catalog-nav__section + .catalog-nav__section {
  margin-top: 57px;
}
.catalog-nav__title {
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid #dddddd;
}
.catalog-nav__head {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  color: #01a1f0;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-nav__head:hover {
    color: #0051a1;
  }
}
.catalog-nav__head:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.catalog-nav {
  /* open = chevron up, folded = chevron down, as the two Figma variants draw it */
}
.catalog-nav__chevron {
  width: 12px;
  height: 7px;
  flex-shrink: 0;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.catalog-nav__section:not(.is-open) .catalog-nav__chevron {
  transform: none;
}
.catalog-nav__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}
.catalog-nav__body > div {
  overflow: hidden;
}
.catalog-nav__section:not(.is-open) .catalog-nav__body {
  grid-template-rows: 0fr;
}
.catalog-nav__inner {
  padding-top: 14px;
}

/* -- the category tree ---------------------------------------------------------- */
.tree {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.tree {
  /* 13px slot; the chevron only renders on a category with children */
}
.tree__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  color: #01a1f0;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tree__toggle:hover {
    color: #0051a1;
  }
}
.tree__toggle:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.tree__toggle--empty {
  cursor: default;
}
.tree__chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.3s ease;
}
.tree__item.is-open > .tree__row .tree__chevron {
  transform: rotate(90deg);
}
.tree__check {
  margin-top: 1.5px;
}
.tree {
  /* Figma draws the checked row Lato Medium 18 and every other row Lato Bold
     16 — a slip in the file. The user's call (2026-09-16): every row regular
     16, and only the current category bold, as the industries sidebar marks
     its active item. */
}
.tree__link {
  flex: 1 1 auto;
  min-width: 0;
  color: #000000;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  overflow-wrap: anywhere;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tree__link:hover {
    color: #0051a1;
  }
}
.tree__link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.tree__row--current .tree__link {
  font-weight: 700;
}
.tree {
  /* subcategories fold under their parent */
}
.tree__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.tree__sub > div {
  overflow: hidden;
}
.tree__item.is-open > .tree__sub {
  grid-template-rows: 1fr;
}
.tree__list--sub {
  gap: 0;
  padding-top: 9px;
}
.tree__list--sub .tree__row {
  padding-block: 5px;
}
.tree {
  /* Close all / Open all — block, or the inline button rides a taller line box */
}
.tree__all {
  display: block;
  margin-top: 14px;
  padding-left: 20px;
  color: #979696;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 19px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tree__all:hover {
    color: #0051a1;
  }
}
.tree__all:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}

/* -- the filter groups ------------------------------------------------------------ */
.filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .filter-group__head:hover {
    color: #0051a1;
  }
}
.filter-group__head:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.filter-group__chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #01a1f0;
  transition: transform 0.3s ease;
}
.filter-group.is-open .filter-group__chevron {
  transform: rotate(90deg);
}
.filter-group__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.filter-group__body > div {
  overflow: hidden;
}
.filter-group.is-open .filter-group__body {
  grid-template-rows: 1fr;
}
.filter-group__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
}
.filter-group {
  /* .check rows: Lato 16/1.5 = the drawn 24px rows, checkbox 15px from the label */
}
.filter-group__option {
  display: flex;
}

/* === Catalog sidebar — end ================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Drawer — the off-canvas panel a sidebar becomes below 1280px (no Figma
   frame — our adaptation, the mirror image of the mobile nav on the right).
   The catalog sidebar on the products page and the industries list on an
   industry page share it; js/app/drawer.js opens and closes it.

     <button class="drawer-trigger js-drawer-open" aria-controls="…">   below 1280px only
     <aside class="… drawer js-drawer" id="…">
       <div class="drawer__head">  <p class="drawer__title">  <button class="drawer__close js-drawer-close">
       <div class="drawer__body">  …the sidebar as it is on desktop…
       <div class="drawer__foot">  optional sticky buttons (Clear all / Done)

   On desktop the head, the foot's Done button and the trigger do not exist;
   the body is just a wrapper.
   ============================================================================= */
.drawer__head, .drawer__done {
  display: none;
}
@media (max-width: 1279.98px) {
  .drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    width: min(360px, 100%);
    background-color: #ffffff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
  }
  .drawer.is-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .drawer__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 70px;
    padding: 0 12px 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
  }
  .drawer__title {
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    color: #01a1f0;
  }
  .drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #333333;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.3s ease;
  }
}
@media (max-width: 1279.98px) and (hover: hover) and (pointer: fine) {
  .drawer__close:hover {
    color: #01a1f0;
    transform: rotate(90deg);
  }
}
@media (max-width: 1279.98px) {
  .drawer__close:focus-visible {
    outline: 2px solid #01a1f0;
    outline-offset: -2px;
  }
  .drawer__body {
    padding: 24px 20px 28px;
  }
  .drawer__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding: 16px 20px;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;
  }
  .drawer__foot .btn {
    flex: 1 1 0;
  }
  .drawer__done {
    display: inline-flex;
  }
}

/* -- the trigger (below 1280px only) --------------------------------------------
   An outlined pill with an icon, the label and an optional count badge
   (the catalog's active filters). */
.drawer-trigger {
  display: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-bottom: 24px;
  padding: 0 18px;
  border: 1px solid #0051a1;
  border-radius: 12px;
  color: #0051a1;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .drawer-trigger:hover {
    background-color: #0051a1;
    color: #ffffff;
  }
  .drawer-trigger:hover .drawer-trigger__count {
    background-color: #ffffff;
    color: #0051a1;
  }
}
.drawer-trigger:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.drawer-trigger__icon {
  width: 18px;
  height: 18px;
}
.drawer-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background-color: #01a1f0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.drawer-trigger__count.is-empty {
  display: none;
}
@media (max-width: 1279.98px) {
  .drawer-trigger {
    display: inline-flex;
  }
}

/* === Drawer — end =========================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Product thumbnail — Figma "Product-Thumb" 866:5298 (336×584).
   A white card with a #DDD hairline and 8px corners: the picture in the square
   .img-box (contained — the client's rule; the drawn panel crops a 316×281
   photo, so the card runs ~35px taller than drawn), the code, the "Category:"
   link, the grey spec box with ruled rows, an optional file row and the
   compact "Learn more". Cards in a grid row keep their buttons level: the
   card fills its cell and the button takes the spare room above it.
   ============================================================================= */
.product-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-thumb:hover {
    border-color: #01a1f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  }
  .product-thumb:hover .product-thumb__title a {
    color: #0051a1;
  }
}
.product-thumb {
  /* 9px + the border = the drawn 10px inset; the box is square, not the drawn 316×281 */
}
.product-thumb__media {
  display: block;
  margin: 12px 9px 0;
}
.product-thumb__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  padding: 13px 20px 20px;
}
.product-thumb__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.product-thumb {
  /* the product code — one line, ellipsis if it ever runs long, as drawn */
}
.product-thumb__title {
  margin: 0;
  overflow: hidden;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-thumb__title a {
  color: #173453;
  transition: color 0.25s ease;
}
.product-thumb__title a:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.product-thumb__cat {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #0051a1;
  line-height: 24px;
  letter-spacing: 0;
}
.product-thumb__cat a {
  color: inherit;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .product-thumb__cat a:hover {
    text-decoration: underline;
  }
}
.product-thumb__cat a:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.product-thumb {
  /* the spec box: 12px padding, 6px around each rule */
}
.product-thumb__specs {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px;
  background-color: #f6f6f6;
  border-radius: 4px;
}
.product-thumb__spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 6px 0;
  border-top: 1px solid #dddddd;
}
.product-thumb__spec:first-child {
  padding-top: 0;
  border-top: 0;
}
.product-thumb__spec:last-child {
  padding-bottom: 0;
}
.product-thumb__spec dt {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #696767;
  line-height: 18px;
}
.product-thumb__spec dd {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  margin: 0 0 0 auto;
  color: #333333;
  text-align: right;
}
.product-thumb {
  /* the file row — only when the product has a file (not in Figma, the user's addition) */
}
.product-thumb__file {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: #0051a1;
  line-height: 18px;
  letter-spacing: 0;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-thumb__file:hover {
    color: #01a1f0;
  }
}
.product-thumb__file:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.product-thumb__file-icon {
  width: 16px;
  height: 16px;
}
.product-thumb__btn {
  margin-top: auto;
}
.product-thumb {
  /* The grid hands out cards under 300px between 1280 and 1440 and on small
     phones; the spec pairs need ~225px, so the card tightens its own padding
     there instead of dropping values under their labels. */
  container-type: inline-size;
}
@container (max-width: 310px) {
  .product-thumb .product-thumb__body {
    padding-inline: 14px;
  }
  .product-thumb .product-thumb__specs {
    padding: 10px;
  }
  .product-thumb .product-thumb__spec {
    gap: 2px 8px;
  }
}
.product-thumb {
  /* Narrower still (two columns on a 600px phone, anything under 300px) the
     pairs cannot share a line, so every row stacks label over value — one
     shape for the whole box rather than a mix of wrapped and unwrapped rows. */
}
@container (max-width: 282px) {
  .product-thumb .product-thumb__spec {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .product-thumb .product-thumb__spec dd {
    margin-left: 0;
    text-align: left;
  }
}

/* === Product thumbnail — end ================================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Read more — Figma 994:12128. A CKEditor block clipped to N lines (the
   `--readmore-lines` custom property on the wrapper, default 3) with the
   Content/S "Read more" link under it. js/app/readmore.js measures the real
   height for the animation, refines the clip to the copy's line height
   (`--readmore-h`) and hides the toggle when the copy is short. Without
   JavaScript nothing is clipped — the .js root class gates the max-height.
   ============================================================================= */
.readmore__body {
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.js .readmore:not(.is-open):not(.is-short) .readmore__body {
  max-height: var(--readmore-h, calc(var(--readmore-lines, 3) * 1.5em));
}
.readmore__toggle {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  color: #0051a1;
  line-height: 17px;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .readmore__toggle:hover {
    color: #01a1f0;
  }
}
.readmore__toggle:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.readmore__chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.readmore__toggle[aria-expanded=true] .readmore__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .readmore__body {
    transition: none;
  }
}

/* === Read more — end ======================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Section sub-navigation — Figma "second-menu" 866:7087 (the About Us pages:
   History / Our Facility). Uppercase tabs, 8/16 padding, 21px apart, centred;
   the current one is Manrope Bold in navy with a 3px bright underline, the
   others Medium in the kit's Gray 2.
   ============================================================================= */
.subnav {
  display: flex;
  justify-content: center;
}
.subnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 21px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subnav__link {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  padding: 8px 16px;
  border-bottom: 3px solid transparent;
  color: #4f4f4f;
  transition: color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .subnav__link:hover {
    color: #10233c;
  }
}
.subnav__link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.subnav__link.is-active {
  border-bottom-color: #01a1f0;
  color: #10233c;
  font-weight: 700;
  letter-spacing: 3px;
}
@media (max-width: 767.98px) {
  .subnav__list {
    gap: 4px;
  }
  .subnav__link {
    padding: 8px 10px;
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  .subnav__link.is-active {
    letter-spacing: 2px;
  }
}

/* === Sub-navigation — end =================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Strip — a row of free-width cards that runs off the right edge of the page
   (Related Projects on the product page, the facility photos on About Us).
   A Swiper (js/app/sliders.js → initStrips) with two round arrows that sit
   in the block's head; Swiper dims the arrow at each end and hides both when
   every card already fits.

     <div class="… js-strip-root">
       <div class="strip-nav"> two .strip-arrow buttons (js-strip-prev / -next) </div>
       <div class="strip swiper js-strip" data-gap="26" data-gap-sm="16">
         <ul class="strip__list swiper-wrapper"> <li class="strip__slide swiper-slide"> …

   The slide width belongs to the block that uses the strip (409 for project
   cards, 292 for the facility photos).
   ============================================================================= */
/* visible overflow so the row bleeds right — the page clips it at the viewport
   — and a clip on the left only, so cards that have gone past never show in
   the page margin */
.strip {
  overflow: visible;
  clip-path: inset(0 -100vw 0 0);
}
.strip__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip__slide {
  height: auto;
}

.strip-nav {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding-bottom: 4px;
}
.strip-nav .swiper-button-lock {
  display: none;
}

.strip-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #0051a1;
  border-radius: 50%;
  color: #0051a1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .strip-arrow:hover {
    background-color: #0051a1;
    color: #ffffff;
  }
}
.strip-arrow:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.strip-arrow.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.strip-arrow__icon {
  width: 13px;
  height: 13px;
}
.strip-arrow--prev .strip-arrow__icon {
  transform: rotate(180deg);
}

/* === Strip — end ============================================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Paragraph — the admin's reusable copy + picture block (Figma 888:9921 /
   866:9846 on About → Our Facility): a 681px column (eyebrow + title, 26, the
   CKEditor copy with its check-marked list) centred on an 869×606 cover photo
   88px away. The admin places the picture:

     .paragraph--media-right    copy | picture (the drawing)
     .paragraph--media-left     picture | copy
     .paragraph--media-center   the picture above the copy, both centred
     .paragraph--media-none     copy only
     .paragraph--cols           copy only, the text in two columns (36 apart)
     .paragraph--sub            the sub-section version inside a content
                                column (the industry page, Figma 866:8495):
                                32/50 heading, 630px picture 66px from 696px
                                of copy

   Several paragraphs in a row sit 68px apart (the industry page's rhythm),
   two copy-only ones 40px.
   ============================================================================= */
.paragraph {
  display: flex;
  align-items: center;
  gap: 88px;
}
.paragraph + .paragraph {
  margin-top: 68px;
}
.paragraph--media-none + .paragraph--media-none {
  margin-top: 40px;
}
.paragraph__info {
  display: flex;
  flex: 1 1 681px;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.paragraph {
  /* the copy and its check list are one CKEditor block (.rte.rte--checks) */
}
.paragraph__text {
  margin: 0;
}
.paragraph {
  /* an editorial photo, cropped to the drawn 869:606 like the industries panel */
}
.paragraph__media {
  position: relative;
  aspect-ratio: 869 / 606;
  overflow: hidden;
  background-color: #f6f6f6;
}
.paragraph__media > img,
.paragraph__media > picture > img,
.paragraph__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paragraph__media {
  flex: 0 1 869px;
  min-width: 0;
}
.paragraph--media-left {
  flex-direction: row-reverse;
}
.paragraph {
  /* centred: one 869px column, the picture first */
}
.paragraph--media-center {
  flex-direction: column-reverse;
  align-items: center;
  gap: 48px;
}
.paragraph--media-center .paragraph__info,
.paragraph--media-center .paragraph__media {
  flex-basis: auto;
  width: 100%;
  max-width: 869px;
}
.paragraph {
  /* copy only: the whole column */
}
.paragraph--media-none .paragraph__info {
  flex-basis: auto;
}
.paragraph {
  /* two text columns (Figma 902:6390: 653 | 36 | 651) — the editor's blocks
     never split across the gap and a sub-heading keeps its first paragraph */
}
.paragraph--cols .paragraph__text {
  columns: 2;
  column-gap: 36px;
}
.paragraph--cols .paragraph__text > * {
  break-inside: avoid;
}
.paragraph--cols .paragraph__text > h2, .paragraph--cols .paragraph__text > h3, .paragraph--cols .paragraph__text > h4 {
  break-after: avoid;
}
.paragraph {
  /* the sub-section version: a smaller heading and the drawn 630 / 66 / 696 */
}
.paragraph--sub {
  gap: 66px;
}
.paragraph--sub .section-head__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  letter-spacing: -1px;
}
.paragraph--sub .paragraph__info {
  flex-basis: 696px;
}
.paragraph--sub .paragraph__media {
  flex-basis: 630px;
}
@media (max-width: 1439.98px) {
  .paragraph {
    gap: 48px;
  }
  .paragraph__media {
    flex-basis: 50%;
  }
  .paragraph--sub {
    gap: 40px;
  }
  .paragraph--sub .paragraph__media {
    flex-basis: 45%;
  }
}
.paragraph {
  /* one column: the picture first, then the copy */
}
@media (max-width: 1279.98px) {
  .paragraph + .paragraph {
    margin-top: 56px;
  }
  .paragraph--media-none + .paragraph--media-none {
    margin-top: 36px;
  }
}
@media (max-width: 1023.98px) {
  .paragraph {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
    /* in a column the basis would become a HEIGHT — the --sub pair has to be
       reset at its own specificity or the copy sits in a 696px-tall box */
  }
  .paragraph__info, .paragraph__media, .paragraph--sub .paragraph__info, .paragraph--sub .paragraph__media {
    flex-basis: auto;
  }
  .paragraph--media-center {
    align-items: stretch;
  }
  .paragraph--cols .paragraph__text {
    columns: 1;
  }
}
@media (max-width: 767.98px) {
  .paragraph + .paragraph {
    margin-top: 40px;
  }
  .paragraph--media-none + .paragraph--media-none {
    margin-top: 28px;
  }
  .paragraph--sub .section-head__title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }
}

/* === Paragraph — end ======================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Side navigation — Figma 888:10125 (the Industries list beside an industry
   page): the uppercase blue title over a hairline, 35px, then the links
   16px apart, each with a 10px blue square in front of Lato 18 — the current
   one bold. Any section with sibling pages can reuse it.

     <aside class="side-nav">
       <h2 class="side-nav__title">Industries</h2>
       <ul class="side-nav__list">
         <li class="side-nav__item is-current"><a class="side-nav__link" href="…">…</a></li>

   Below 1280px the aside is the shared drawer (components/_drawer.scss): the
   drawer's head carries the title, so the list's own title steps aside and
   the links keep their column.
   ============================================================================= */
.side-nav__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  max-width: 258px;
  margin: 0 0 35px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dddddd;
  color: #01a1f0;
}
.side-nav__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 233px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-nav__item {
  position: relative;
  padding-left: 21px;
  /* the square sits on the first line of the label */
}
.side-nav__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #01a1f0;
}
.side-nav__link {
  color: #000000;
  font-size: 18px;
  line-height: normal;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .side-nav__link:hover {
    color: #01a1f0;
  }
}
.side-nav__link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.side-nav__item.is-current .side-nav__link {
  font-weight: 700;
}
.side-nav {
  /* inside the drawer the head already says "Industries" */
}
@media (max-width: 1279.98px) {
  .side-nav.drawer .side-nav__title {
    display: none;
  }
}

/* === Side navigation — end ================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Subcategory tile — Figma 902:6144 (450×308) on the Product Category page.
   One link: the photo fills the 450:308 box (cover) and a 60% black bar, 64px
   deep with 20px padding, carries the uppercase name and the arrow. Hover:
   the photo eases in, the bar darkens, the arrow nudges right — the project
   card's manners.
   ============================================================================= */
.sub-tile {
  position: relative;
  display: block;
  color: #ffffff;
}
.sub-tile:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.sub-tile__media {
  position: relative;
  aspect-ratio: 450 / 308;
  overflow: hidden;
  background-color: #f6f6f6;
}
.sub-tile__media > img,
.sub-tile__media > picture > img,
.sub-tile__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-tile__media {
  display: block;
}
.sub-tile__media > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sub-tile__bar {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.25s ease;
}
.sub-tile__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sub-tile__arrow {
  width: 16px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sub-tile:hover .sub-tile__media > img {
    transform: scale(1.04);
  }
  .sub-tile:hover .sub-tile__bar {
    background-color: rgba(0, 0, 0, 0.75);
  }
  .sub-tile:hover .sub-tile__arrow {
    transform: translateX(4px);
  }
}
@media (max-width: 767.98px) {
  .sub-tile__bar {
    min-height: 52px;
    padding: 14px 16px;
  }
  .sub-tile__title {
    font-size: 15px;
    letter-spacing: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-tile__media > img {
    transition: none;
  }
}
/* === Subcategory tile — end ================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Accordion — Figma component "faq" 854:2077 / its open Variant2, on the FAQ
   page and the Knowledge glossary. Two 809px columns 51 apart, items 20 apart.

   An item is a white card with a 1px hairline and 12px corners: the question
   row (Lato 20, 15/20 padding) with the +/− glyph, and the answer panel
   (Lato 16/1.3, 10/20 padding, 20 below) that folds with grid-template-rows —
   the collapsing element has overflow:hidden and no padding, the spacing sits
   one level in. One item is open at a time (js/app/accordion.js).
   ============================================================================= */
.accordion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 51px;
  align-items: start;
}
.accordion__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.accordion__item {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 12px;
  transition: border-color 0.25s ease;
}
.accordion__item.is-open {
  border-color: #c1c1c1;
}
.accordion__q {
  margin: 0;
}
.accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  color: #000000;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .accordion__toggle:hover {
    color: #0051a1;
  }
}
.accordion__toggle:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: -2px;
}
.accordion__question {
  flex: 1 1 auto;
}
.accordion {
  /* the +: two 18px bars; the vertical one fades away when open */
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__item.is-open .accordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion__panel > div {
  overflow: hidden;
}
.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}
.accordion__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px 20px;
}
.accordion__answer {
  line-height: 1.3;
}
.accordion__answer > *:not(:last-child) {
  margin-bottom: 1.3em;
}
.accordion__less {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #01a1f0;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .accordion__less:hover {
    color: #0051a1;
  }
}
.accordion__less:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (max-width: 1279.98px) {
  .accordion {
    gap: 16px 24px;
  }
  .accordion__col {
    gap: 16px;
  }
}
.accordion {
  /* one column: the second half follows the first */
}
@media (max-width: 1023.98px) {
  .accordion {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767.98px) {
  .accordion__toggle {
    gap: 14px;
    padding: 13px 16px;
    font-size: 17px;
  }
  .accordion__body {
    padding: 6px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel,
  .accordion__icon::before,
  .accordion__icon::after {
    transition: none;
  }
}
/* === Accordion — end ======================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Knowledge calculator — spec §6 / §21.5, no Figma frame (Plan 2 decision 4):
   the legacy "two inputs, Calculate, a result line" inside a glossary answer,
   built from the site's own pieces — the form fields (components/_form.scss),
   the small button (.btn--sm) and the product page's light-blue price box
   (layout/_product.scss, .purchase__box): the result's label in Content/S
   Emphasis, its value in bold Manrope. A wrong value gets the field's own red
   border and error line (js/app/calculator.js).

     .calc           the box, as wide as the answer, 20 inside (16 on a phone)
     .calc__fields   A over B, 360 wide at most (the whole box on a phone)
     .calc__foot     Calculate beside the result line; the line wraps under it
     .calc__result   the label and the value (<output>)
   ============================================================================= */
.calc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
  padding: 20px;
  background-color: #f0f8ff;
  border-radius: 8px;
}
.calc__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}
.calc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.calc__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  margin: 0;
}
.calc__label {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}
.calc__value {
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .calc {
    padding: 16px;
  }
  .calc__fields {
    max-width: none;
  }
}

/* === Knowledge calculator — end ============================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Download card — Figma 900:14957 (Knowledge page, 247 wide): the 249:166
   picture (cover) with a 42×38 primary badge holding the download arrow in
   its bottom-right corner, 21px, the uppercase Lato 20 name. Hover: the
   picture eases in, the badge goes secondary, the name goes primary.
   ============================================================================= */
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 21px;
  color: #000000;
}
.dl-card:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.dl-card__media {
  position: relative;
  aspect-ratio: 249 / 166;
  overflow: hidden;
  background-color: #f6f6f6;
}
.dl-card__media > img,
.dl-card__media > picture > img,
.dl-card__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dl-card__media {
  display: block;
}
.dl-card__media > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-card__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  background-color: #01a1f0;
  color: #ffffff;
  transition: background-color 0.25s ease;
}
.dl-card__icon {
  width: 20px;
  height: 20px;
}
.dl-card__title {
  font-size: 20px;
  line-height: normal;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dl-card:hover .dl-card__media > img {
    transform: scale(1.04);
  }
  .dl-card:hover .dl-card__badge {
    background-color: #0051a1;
  }
  .dl-card:hover .dl-card__title {
    color: #01a1f0;
  }
}
@media (max-width: 767.98px) {
  .dl-card {
    gap: 14px;
  }
  .dl-card__title {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-card__media > img {
    transition: none;
  }
}
/* === Download card — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Quantity stepper — the drawn "− 2 +" (Figma 944:8799, cart rows): 178×36,
   a #DDE1EE frame with 6px corners, a hairline between the three cells, the
   value in Work Sans 16. Shrinks with its cell (the buttons give first, the
   value keeps its room). Used by the cart; the quote cart and checkout reuse it.
   ============================================================================= */
.qty {
  display: inline-flex;
  align-items: stretch;
  width: 178px;
  max-width: 100%;
  height: 36px;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #dde1ee;
  border-radius: 6px;
  vertical-align: middle;
}
.qty__btn {
  flex: 0 1 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: #000000;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .qty__btn:hover {
    background-color: #f6f6f6;
  }
}
.qty__btn:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: -3px;
}
.qty__btn:disabled {
  background: none;
  color: #c1c1c1;
  cursor: default;
}
.qty__input {
  flex: 1 1 40px;
  min-width: 0;
  width: 100%;
  padding: 0 4px;
  background: none;
  border: 0;
  border-inline: 1px solid #dde1ee;
  border-radius: 0;
  color: #000000;
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.qty__input:focus {
  background-color: #f0f8ff;
  outline: none;
}
.qty__input {
  /* inside the frame: the stepper clips whatever is drawn outside it */
}
.qty__input:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: -2px;
}
.qty {
  /* while its line is being saved (FW.setLoading, js/app/cart.js): the value greys, the buttons stay usable */
}
.qty.is-loading {
  cursor: progress;
}
.qty.is-loading .qty__input {
  color: #c1c1c1;
}

/* === Quantity stepper — end ================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Checkout steps — Cart › Shipping › Payment (components/steps.njk). Not in
   the Figma file; drawn from the kit: a 28px numbered disc and a Manrope
   label per step, a hairline between steps. Done = the secondary-blue ring
   with a check, and a link; current = the filled disc and a black label;
   to come = grey. One line down to 320.
   ============================================================================= */
.steps__list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item {
  display: flex;
  align-items: center;
  color: #696767;
  /* the hairline that leads into a step */
}
.steps__item + .steps__item::before {
  content: "";
  width: 56px;
  height: 1px;
  margin-inline: 16px;
  background-color: #c1c1c1;
}
.steps__item.is-done + .steps__item::before, .steps__item.is-done::before {
  background-color: #0051a1;
}
.steps__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.steps__mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #c1c1c1;
  border-radius: 50%;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.steps__check {
  width: 12px;
  height: 12px;
}
.steps__label {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  transition: color 0.25s ease;
}
.steps__item.is-current {
  color: #000000;
}
.steps__item.is-current .steps__mark {
  background-color: #0051a1;
  border-color: #0051a1;
  color: #ffffff;
}
.steps__item.is-current .steps__label {
  font-weight: 700;
}
.steps__item.is-done {
  color: #0051a1;
}
.steps__item.is-done .steps__mark {
  border-color: #0051a1;
}
.steps__item.is-done a.steps__step:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .steps__item.is-done a.steps__step:hover {
    color: #01a1f0;
  }
  .steps__item.is-done a.steps__step:hover .steps__mark {
    border-color: #01a1f0;
  }
}
@media (max-width: 575.98px) {
  .steps__item + .steps__item::before {
    width: 20px;
    margin-inline: 8px;
  }
  .steps__step {
    gap: 6px;
  }
  .steps__mark {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .steps__label {
    font-size: 14px;
  }
  .steps {
    /* "Custom Order › Shipping › Payment" does not fit a phone: only the step
       you are on keeps its name, the others stay as their discs */
  }
  .steps__item:not(.is-current) .steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* === Checkout steps — end =================================================== */
/* -- layout ----------------------------------------------------------------- */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Header — Figma 854:2775.
   45px utility bar (#0B2F5C) over a 133px main bar. The main bar is solid navy
   on inner pages and transparent over the hero on the home page
   (.header--home); once the page is scrolled both variants compact to the same
   90px navy bar (.is-compact, set by js/app/header.js).
   ============================================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  color: #ffffff;
  transition: box-shadow 0.3s ease;
  /* -- utility bar -------------------------------------------------------- */
  /* overflow stays visible so the Account menu can hang below the bar; it is
     only clipped while the bar folds away in the compact state. */
}
.header__top {
  height: 45px;
  background-color: #0b2f5c;
  transition: height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0s;
}
.header__top-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 42px;
  height: 45px;
}
.header__contact, .header__cart {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  white-space: nowrap;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .header__contact:hover, .header__cart:hover {
    color: #01a1f0;
  }
}
.header__contact:focus-visible, .header__cart:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.header__contact-icon {
  width: 20px;
  height: 20px;
}
.header__contact-icon--mail {
  width: 24px;
  height: 17px;
}
.header__contact-icon--lg {
  width: 24px;
  height: 24px;
}
.header {
  /* Account: a click-to-open menu instead of a plain link. */
}
.header__account {
  position: relative;
}
.header__account-toggle {
  padding: 0;
}
.header__account-chevron {
  width: 10px;
  height: 6px;
  margin-left: -2px;
  transition: transform 0.3s ease;
}
.header__account.is-open .header__account-chevron {
  transform: rotate(180deg);
}
.header__cart {
  gap: 13px;
}
.header__cart-icon {
  position: relative;
  width: 28px;
  height: 28px;
}
.header__cart-icon .icon {
  width: 100%;
  height: 100%;
}
.header {
  /* Count bubble on the cart and quote icons. Hidden while the count is 0
     (js/app/header.js keeps the class in step). */
}
.header__badge {
  position: absolute;
  top: -3px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background-color: #01a1f0;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.header__badge.is-empty {
  display: none;
}
.header {
  /* -- main bar ----------------------------------------------------------- */
}
.header__main {
  background-color: #10233c;
  transition: background-color 0.3s ease;
}
.header__bar {
  display: flex;
  align-items: center;
  height: 133px;
  transition: height 0.3s ease;
}
.header__logo {
  display: block;
  flex-shrink: 0;
  width: 304px;
  height: 115px;
  transition: width 0.3s ease, height 0.3s ease;
}
.header__logo img {
  width: 100%;
  height: 100%;
}
.header__logo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.header {
  /* The nav floats in the middle of whatever space is left between the logo
     and the buttons, with a minimum breathing room on each side. */
}
.header__nav {
  min-width: 0;
  margin-inline: auto;
  padding-inline: 24px;
}
.header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
}
.header {
  /* Account / cart / quote shortcuts. Hidden on desktop until the header is
     compact (the utility bar has folded away by then); always on below 1280. */
}
.header__tools {
  display: none;
  align-items: center;
  gap: 6px;
}
.header__tool {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  transition: color 0.25s ease;
}
.header__tool .icon {
  width: 26px;
  height: 26px;
}
.header__tool .header__badge {
  top: 2px;
  right: 0;
}
@media (hover: hover) and (pointer: fine) {
  .header__tool:hover {
    color: #01a1f0;
  }
}
.header__tool:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.header__tool.is-open {
  color: #01a1f0;
}
.header__tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
}
.header__tool-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.header__burger {
  display: none;
}
.header {
  /* -- home: transparent over the hero, with a soft veil so the white nav
        stays readable on a bright photo ----------------------------------- */
}
.header--home .header__main {
  background: linear-gradient(180deg, rgba(16, 35, 60, 0.6) 0%, rgba(16, 35, 60, 0) 100%);
}
.header {
  /* -- compact ------------------------------------------------------------ */
}
.header.is-compact {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  /* visibility, not just height/opacity: a folded bar that keeps its links
     focusable puts five invisible stops in the tab order and makes a screen
     reader announce Account / Cart / Quote twice. */
}
.header.is-compact .header__top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
}
.header.is-compact .header__bar {
  height: 90px;
}
.header.is-compact .header__logo {
  width: 238px;
  height: 90px;
}
.header.is-compact .header__main {
  background: #10233c;
}
.header.is-compact .header__tools {
  display: flex;
  animation: header-tools-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.header {
  /* -- narrower desktops: tighten the spacing step by step so the bar never
        outgrows the viewport, even with the compact-state icons in place ---- */
}
@media (max-width: 1699.98px) {
  .header__actions {
    gap: 16px;
  }
  .header__tool {
    width: 36px;
  }
  .header.is-compact .header__logo {
    width: 210px;
    height: 80px;
  }
}
@media (max-width: 1439.98px) {
  .header__nav {
    padding-inline: 16px;
  }
  .header__logo {
    width: 250px;
    height: 95px;
  }
  .header__top-inner {
    gap: 28px;
  }
  .header__actions {
    gap: 12px;
  }
  .header__tool {
    width: 34px;
  }
  .header__quote {
    padding: 14px 12px;
    font-size: 15px;
  }
  .header.is-compact .header__logo {
    width: 200px;
    height: 76px;
  }
}
.header {
  /* -- tablet and phone: 70px bar, burger, drawer -------------------------- */
}
@media (max-width: 1279.98px) {
  .header__top {
    display: none;
  }
  .header__bar {
    height: 70px;
    gap: 12px;
  }
  .header__logo, .header.is-compact .header__logo {
    width: 150px;
    height: 57px;
  }
  .header__nav, .header__quote {
    display: none;
  }
  .header__actions {
    gap: 4px;
    margin-left: auto;
  }
  .header__tools, .header.is-compact .header__tools {
    display: flex;
    animation: none;
  }
  .header__burger {
    display: flex;
  }
  .header--home .header__main, .header.is-compact .header__main {
    background: #10233c;
  }
  .header.is-compact .header__bar {
    height: 70px;
  }
}
.header {
  /* Small phones: the logo and the two gaps give back the pixels the icon row
     needs, so the burger stays whole on screen well below 320px. The logo keeps
     its drawn proportion instead of a second fixed height. */
}
@media (max-width: 374.98px) {
  .header__bar {
    gap: 8px;
  }
  .header__logo, .header.is-compact .header__logo {
    width: clamp(92px, 33vw, 124px);
    height: auto;
    aspect-ratio: 304/115;
  }
  .header__tools {
    gap: 2px;
  }
}

@keyframes header-tools-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* =============================================================================
   Main navigation
   ============================================================================= */
.nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav__link {
  position: relative;
  display: block;
  padding: 10px;
  color: #ffffff;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  transition: color 0.25s ease;
  /* underline grows in from the left */
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background-color: #01a1f0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    color: #01a1f0;
  }
  .nav__link:hover::after {
    transform: scaleX(1);
  }
}
.nav__link.is-active {
  color: #01a1f0;
}
.nav__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}
.nav__item--has-menu > .nav__link {
  padding-right: 0;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  color: #ffffff;
  transition: transform 0.3s ease, color 0.25s ease;
}
.nav__toggle .icon {
  width: 12px;
  height: 7px;
}
.nav__toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.nav__item:hover .nav__toggle, .nav__item.is-open .nav__toggle {
  color: #01a1f0;
}
.nav__item.is-open .nav__toggle {
  transform: rotate(180deg);
}
@media (max-width: 1699.98px) {
  .nav__list {
    gap: 8px;
  }
  .nav__link {
    padding: 10px 8px;
    font-size: 15px;
  }
  .nav__link::after {
    left: 8px;
    right: 8px;
  }
}
@media (max-width: 1439.98px) {
  .nav__list {
    gap: 2px;
  }
  .nav__link {
    padding: 10px 6px;
    font-size: 14px;
  }
  .nav__link::after {
    left: 6px;
    right: 6px;
  }
  .nav__toggle {
    width: 22px;
  }
}

/* -- dropdown panel — Figma 889:11288 / 889:11242 / 889:11281 -------------- */
.dropdown {
  position: absolute;
  top: 100%;
  left: -40px;
  z-index: 300;
  display: flex;
  gap: 13px;
  padding: 30px 40px 45px;
  background-color: #0b2f5c;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
  /* invisible bridge so the pointer can travel from the link to the panel */
}
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.dropdown__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 211px;
}
.dropdown--single .dropdown__col {
  width: 190px;
}
.dropdown {
  /* Hover (Figma drop-down-menu-item / Variant2): a 3px bright-blue bar on the
     left and the text stepping in from 10px to 23px. The text moves with a
     transform, so its box keeps its width and the words never re-wrap; the
     columns are fixed-width, so the neighbouring column never moves either. */
}
.dropdown__link {
  position: relative;
  display: block;
  padding: 3px 10px;
  color: #ffffff;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: normal;
}
.dropdown__link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: #01a1f0;
  transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown__link span {
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .dropdown__link:hover::before {
    transform: scaleY(1);
  }
  .dropdown__link:hover span {
    transform: translateX(13px);
  }
}
.dropdown__link:focus-visible {
  outline: none;
}
.dropdown__link:focus-visible::before {
  transform: scaleY(1);
}
.dropdown__link:focus-visible span {
  transform: translateX(13px);
}

/* -- account menu -------------------------------------------------------------
   The same navy panel and hover as the nav dropdowns, hanging under the
   Account toggle. Both lists are in the markup; the `is-logged-in` class on
   <body> decides which one shows. ------------------------------------------- */
.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 300;
  min-width: 220px;
  padding: 22px 30px 26px;
  background-color: #0b2f5c;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
}
.is-open > .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.menu__list--in {
  display: none;
}
.menu__link {
  position: relative;
  display: block;
  padding: 3px 10px;
  color: #ffffff;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}
.menu__link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: #01a1f0;
  transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu__link span {
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover::before {
    transform: scaleY(1);
  }
  .menu__link:hover span {
    transform: translateX(13px);
  }
}
.menu__link:focus-visible {
  outline: none;
}
.menu__link:focus-visible::before {
  transform: scaleY(1);
}
.menu__link:focus-visible span {
  transform: translateX(13px);
}

body.is-logged-in .menu__list--out {
  display: none;
}

body.is-logged-in .menu__list--in {
  display: flex;
}

/* =============================================================================
   Burger, overlay and the mobile drawer (no Figma frame — our adaptation)
   ============================================================================= */
.burger {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: #ffffff;
}
.burger span {
  display: block;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-active span:nth-child(2) {
  opacity: 0;
}
.burger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.burger:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgba(16, 35, 60, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background-color: #10233c;
  color: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}
.mobile-nav.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 70px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav__logo {
  display: block;
  width: 150px;
  height: 57px;
}
.mobile-nav__logo img {
  width: 100%;
  height: 100%;
}
.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  transition: color 0.25s ease, transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav__close:hover {
    color: #01a1f0;
    transform: rotate(90deg);
  }
}
.mobile-nav__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.mobile-nav__list {
  padding: 8px 0;
}
.mobile-nav__row {
  display: flex;
  align-items: center;
}
.mobile-nav__link {
  flex: 1;
  display: block;
  padding: 14px 24px;
  color: #ffffff;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: color 0.25s ease;
}
.mobile-nav__link.is-active {
  color: #01a1f0;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav__link:hover {
    color: #01a1f0;
  }
}
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #ffffff;
}
.mobile-nav__toggle .icon {
  width: 14px;
  height: 8px;
  transition: transform 0.3s ease;
}
.mobile-nav__item.is-open .mobile-nav__toggle .icon {
  transform: rotate(180deg);
}
.mobile-nav {
  /* The collapsing element carries overflow:hidden and no padding — the
     spacing lives on the list inside it. */
}
.mobile-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.mobile-nav__panel > div {
  overflow: hidden;
}
.mobile-nav__item.is-open .mobile-nav__panel {
  grid-template-rows: 1fr;
}
.mobile-nav__sub {
  padding: 4px 0 12px;
  background-color: rgba(0, 0, 0, 0.2);
}
.mobile-nav__sublink {
  display: block;
  padding: 10px 24px 10px 40px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav__sublink:hover {
    color: #01a1f0;
    padding-left: 46px;
  }
}
.mobile-nav__cta {
  padding: 16px 24px 20px;
}
.mobile-nav {
  /* Account rows — the same two lists as the header menu. */
}
.mobile-nav__account {
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px 8px;
  color: #01a1f0;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mobile-nav__sub--in {
  display: none;
}
body.is-logged-in .mobile-nav__sub--out {
  display: none;
}
body.is-logged-in .mobile-nav__sub--in {
  display: block;
}
.mobile-nav__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 24px 28px;
  margin-top: auto;
}
.mobile-nav__meta a {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  transition: color 0.25s ease;
}
.mobile-nav__meta a .icon {
  color: #01a1f0;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav__meta a:hover {
    color: #01a1f0;
  }
}

/* === Header — end =========================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Site notice — the slim band under the header (General Settings → Site
   notice, spec §4.1: the holiday closings and the "ordering unavailable" line
   both old sites carried). No Figma frame: Content/S Emphasis in navy on the
   light blue, centred, 10px above and below, a hairline under it; the text
   wraps on a phone.

   Inner pages: the band sits in the flow right under the fixed header (the
   shell already reserves the header's height). Home: from 1280px up the whole
   header floats over the hero, so the band hangs just under it, over the top
   of the hero, and scrolls away with the page; below 1280px the home header is
   solid too and the band sits in the flow like everywhere else.
   ============================================================================= */
.notice {
  position: relative;
  z-index: 100;
  background-color: #f0f8ff;
  border-bottom: 1px solid #e7e7eb;
  color: #10233c;
}
.notice__inner {
  padding-block: 10px;
  text-align: center;
}
.notice__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

.page--home .notice {
  position: absolute;
  top: 178px;
  right: 0;
  left: 0;
}
@media (max-width: 1279.98px) {
  .page--home .notice {
    position: relative;
    top: auto;
  }
}

/* === Site notice — end ====================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Home hero — Figma 974:11635 (1920x754).

   Layers, bottom to top:
     .hero__media   the slide's video or still, with the design's colour tint
                    plus a navy veil on the left so the white copy stays legible
     .hero__inner   eyebrow, title, lead and button (per slide)
     .hero__arrow   the two thin chevrons at the edges
     .hero__dots    the dash pagination, bottom right

   On desktop the whole 178px header floats over the top of the band (as in
   Figma), so the copy is padded down by that much. Below 1280px the header is
   solid and sits above the band instead.
   ============================================================================= */
.hero {
  position: relative;
  height: 754px;
  background-color: #10233c;
  color: #ffffff;
}
@media (max-width: 1439.98px) {
  .hero {
    height: 640px;
  }
}
@media (max-width: 1279.98px) {
  .hero {
    height: 560px;
  }
}
@media (max-width: 1023.98px) {
  .hero {
    height: 520px;
  }
}
@media (max-width: 767.98px) {
  .hero {
    height: auto;
    min-height: 480px;
  }
}
.hero {
  /* -- slide media --------------------------------------------------------- */
}
.hero__slide {
  position: relative;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .hero__slide {
    height: auto;
    min-height: 480px;
  }
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Figma's tint (three 20% colour stops) under a navy veil that fades out
     to the right, so the copy reads on any photo. */
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 35, 60, 0.62) 0%, rgba(16, 35, 60, 0.3) 48%, rgba(16, 35, 60, 0.08) 100%), linear-gradient(-65deg, rgba(1, 129, 224, 0.2) 22%, rgba(216, 123, 17, 0.2) 45%, rgba(17, 56, 102, 0.2) 61%);
  pointer-events: none;
}
.hero__img, .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero {
  /* Slow drift on the stills while their slide is showing. */
}
.hero__img {
  transform: scale(1);
  transition: transform 9s linear;
}
.swiper-slide-active .hero__img {
  transform: scale(1.06);
}
.hero {
  /* -- copy ----------------------------------------------------------------
     Figma starts the copy 127px in at 1920 (6.61%), clear of the arrows. The
     clamp keeps that clearance at every width the arrows are shown; once they
     hide (below 768px) the copy drops to the normal page gutter.
     ---------------------------------------------------------------------- */
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 178px clamp(80px, 6.61vw, 127px) 0;
}
@media (max-width: 1279.98px) {
  .hero__inner {
    padding-top: 0;
  }
}
@media (max-width: 767.98px) {
  .hero__inner {
    padding: 56px 16px 96px;
  }
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 792px;
}
.hero__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}
.hero__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: -3.2px;
}
@media (max-width: 1439.98px) {
  .hero__title {
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -2.4px;
  }
}
@media (max-width: 1279.98px) {
  .hero__title {
    font-size: 54px;
  }
}
@media (max-width: 767.98px) {
  .hero__title {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
}
.hero__title {
  margin: 0;
  color: #ffffff;
}
.hero__text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .hero__text {
    font-size: 17px;
    line-height: 26px;
  }
}
.hero__text {
  max-width: 754px;
  margin: 28px 0 0;
}
@media (max-width: 767.98px) {
  .hero__text {
    margin-top: 18px;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 767.98px) {
  .hero__actions {
    margin-top: 28px;
  }
}
.hero {
  /* Entrance: once Swiper is running, the active slide's copy rises in with a
     small stagger; inactive slides keep theirs hidden for the next change. */
}
.swiper-initialized .hero__content > * {
  opacity: 0;
}
.swiper-initialized .swiper-slide-active .hero__content > * {
  animation: hero-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.swiper-initialized .swiper-slide-active .hero__content > *:nth-child(2) {
  animation-delay: 0.12s;
}
.swiper-initialized .swiper-slide-active .hero__content > *:nth-child(3) {
  animation-delay: 0.24s;
}
.swiper-initialized .swiper-slide-active .hero__content > *:nth-child(4) {
  animation-delay: 0.36s;
}
.hero {
  /* -- arrows -------------------------------------------------------------- */
}
.hero__arrow {
  position: absolute;
  top: 44%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 78px;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.hero__arrow .icon {
  width: 36px;
  height: 78px;
}
.hero__arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .hero__arrow:hover {
    opacity: 1;
    color: #01a1f0;
  }
}
.hero__arrow--prev {
  left: 2.71%;
}
@media (hover: hover) and (pointer: fine) {
  .hero__arrow--prev:hover {
    transform: translateX(-4px);
  }
}
.hero__arrow--next {
  right: 4.9%;
}
.hero__arrow--next .icon {
  transform: scaleX(-1);
}
@media (hover: hover) and (pointer: fine) {
  .hero__arrow--next:hover {
    transform: translateX(4px);
  }
}
@media (max-width: 1023.98px) {
  .hero__arrow {
    width: 28px;
    height: 60px;
  }
  .hero__arrow .icon {
    width: 28px;
    height: 60px;
  }
}
@media (max-width: 767.98px) {
  .hero__arrow {
    display: none;
  }
}
.hero {
  /* -- pagination dashes ---------------------------------------------------
     Figma: 27px active dash in bright blue, 14px white idle dashes, 5px tall
     with round ends, 15px apart, 177px from the right edge and 131px up. The
     .hero prefix keeps Swiper's own bullets rule (0-2-0) from forcing
     left:0 / width:100% / bottom:8px onto these.
     ---------------------------------------------------------------------- */
}
.hero .hero__dots {
  position: absolute;
  left: auto;
  right: 9.2%;
  bottom: 131px;
  z-index: 3;
  display: flex;
  align-items: center;
  width: auto;
  gap: 15px;
}
.hero .hero__dots .swiper-pagination-bullet {
  width: 14px;
  height: 5px;
  margin: 0;
  background-color: #ffffff;
  border-radius: 3px;
  opacity: 0.9;
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
.hero .hero__dots .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 6px;
}
.hero .hero__dots .swiper-pagination-bullet-active {
  width: 27px;
  background-color: #01a1f0;
  opacity: 1;
}
@media (max-width: 1023.98px) {
  .hero .hero__dots {
    right: 6%;
    bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .hero .hero__dots {
    left: 0;
    right: 0;
    bottom: 28px;
    width: 100%;
    justify-content: center;
  }
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* === Hero — end ============================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Material search band — Figma 825:1464 (the 852px column under the hero).

   Title, "Search product by:" with two text tabs, then one white box that
   holds either the keyword input or the three dependent selects, with the
   Search button flush to its right end. The tabs, the select cascade and the
   loading state are driven by js/app/search.js; the box itself is a plain
   GET form. Only the keyword state is drawn in Figma — the specification
   state reuses the same box with hairlines between the selects.
   ============================================================================= */
.search-band {
  padding: 40px 0 56px;
  background-color: #ffffff;
}
@media (max-width: 767.98px) {
  .search-band {
    padding: 32px 0 40px;
  }
}
.search-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 852px;
  margin-inline: auto;
  text-align: center;
}
.search-band__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .search-band__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .search-band__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .search-band__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.search-band__title {
  margin: 0;
}
.search-band__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.search-band {
  /* -- "Search product by:" and the tabs ----------------------------------- */
}
.search-band__by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.search-band__label {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .search-band__label {
    font-size: 17px;
    line-height: 26px;
  }
}
.search-band__label {
  margin: 0;
}
.search-band__tabs {
  display: flex;
  justify-content: center;
  gap: 21px;
}
.search-band__tab {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  position: relative;
  padding: 0 0 1px;
  background: none;
  border: 0;
  color: #696767;
  cursor: pointer;
  transition: color 0.25s ease;
}
.search-band__tab:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.search-band__tab {
  /* Figma's 1px underline. It grows in from the left on the tab that
     becomes active and leaves to the right on the one that loses it. */
}
.search-band__tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background-color: #01a1f0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .search-band__tab:hover {
    color: #01a1f0;
  }
}
.search-band__tab.is-active {
  color: #01a1f0;
}
.search-band__tab.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.search-band {
  /* -- the box --------------------------------------------------------------
     White, 12px radius, the soft shadow from Figma. The button is the last
     flex item and stretches to the box height, so it sits flush at the right
     end exactly as drawn (111px wide at the medium size).
     ---------------------------------------------------------------------- */
}
.search-band__box {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 54px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease;
  /* The controls inside have no border of their own, so keyboard focus on
     any of them rings the whole box instead. */
}
.search-band__box:has(.search-band__input:focus-visible, .search-band__control:focus-visible) {
  box-shadow: 0 0 0 2px #01a1f0, 0 0 10px rgba(0, 0, 0, 0.2);
}
.search-band__box {
  /* Both controls clear their own outline for that ring. Without :has() the
     ring can never fire, so give the outline back rather than lose focus. */
}
@supports not selector(:has(*)) {
  .search-band__box .search-band__input:focus-visible,
  .search-band__box .search-band__control:focus-visible {
    outline: 2px solid #01a1f0;
    outline-offset: -2px;
  }
}
.search-band__box {
  /* search.js adds this for a submit with nothing filled in */
}
.search-band__box.is-shaking {
  animation: search-shake 0.4s ease;
}
.search-band__panel {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  animation: search-panel-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.search-band {
  /* keyword: the magnifier, then the input */
}
.search-band__panel--keyword {
  padding: 5px 0 5px 20px;
}
.search-band__icon {
  width: 24px;
  height: 24px;
  color: #979696;
  transition: color 0.25s ease;
}
.search-band__panel:focus-within .search-band__icon {
  color: #01a1f0;
}
.search-band__input {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  color: #333333;
  outline: none;
}
.search-band__input::placeholder {
  color: #c1c1c1;
  opacity: 1;
}
.search-band__input {
  /* WebKit's own clear button does not match the design */
}
.search-band__input::-webkit-search-cancel-button, .search-band__input::-webkit-search-decoration {
  appearance: none;
}
.search-band {
  /* specification: three selects in a row with hairlines between them */
}
.search-band__select {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.search-band__select + .search-band__select {
  border-left: 1px solid #dddddd;
}
.search-band__select {
  /* the chevron — a mask, so it can fade when disabled and turn into the
     spinner while the next options load */
}
.search-band__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: #696767;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.375 5.219 8 8.719 3.625 5.219a1 1 0 0 0-1.25 1.562l5 4a1 1 0 0 0 1.25 0l5-4a1 1 0 0 0-1.25-1.562Z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  pointer-events: none;
  transition: background-color 0.25s ease;
}
.search-band__select:has(select:disabled)::after {
  background-color: #c1c1c1;
}
.search-band__select.is-loading::after {
  background: none;
  mask: none;
  border: 2px solid #dddddd;
  border-right-color: #01a1f0;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.search-band__control {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  width: 100%;
  height: 54px;
  padding: 0 38px 0 20px;
  background: none;
  border: 0;
  color: #333333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: color 0.25s ease;
  /* reads as a placeholder until something is chosen */
}
.search-band__control:has(option[value=""]:checked) {
  color: #c1c1c1;
}
.search-band__control {
  /* ...but the open list must not inherit that grey: the browser paints the
     options in the select's own colour unless they set their own. */
}
.search-band__control option {
  color: #333333;
}
.search-band__control:disabled {
  color: #c1c1c1;
  cursor: not-allowed;
}
.search-band__btn {
  flex: 0 0 auto;
  align-self: stretch;
  padding-block: 15px;
}
.search-band {
  /* -- phones: the box becomes a stack ------------------------------------- */
}
@media (max-width: 767.98px) {
  .search-band__box {
    flex-direction: column;
    padding: 6px;
  }
  .search-band__panel--keyword {
    min-height: 48px;
    padding: 0 8px 0 14px;
  }
  .search-band__input {
    height: 48px;
  }
  .search-band__panel--spec {
    flex-direction: column;
    align-items: stretch;
  }
  .search-band__select {
    flex: 0 0 auto;
  }
  .search-band__select + .search-band__select {
    border-left: 0;
    border-top: 1px solid #dddddd;
  }
  .search-band__control {
    height: 48px;
    padding-left: 14px;
  }
  .search-band__btn {
    margin-top: 6px;
    border-radius: 8px;
  }
}

@keyframes search-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes search-shake {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-6px);
  }
  40%, 60% {
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-band__panel,
  .search-band__box.is-shaking {
    animation: none;
  }
}
/* === Material search band — end ============================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Category grid "Engineered materials for every application" — Figma 854:2882
   on the #F6F6F6 band 825:1465.

   Desktop: the 395px intro card, centred against a 3-column grid of 405x262
   tiles with 20px gutters, 32px between the two. The last grid cell is the
   bordered "View all products" card. The intro narrows and its title steps
   down with the viewport, then moves above the grid below 1280px; the grid
   goes to two columns below 1024px and to one below 576px, where the "View
   all" card turns into a full-width bar.
   ============================================================================= */
.categories {
  padding: 45px 0 34px;
  background-color: #f6f6f6;
}
@media (max-width: 1279.98px) {
  .categories {
    padding-block: 56px;
  }
}
@media (max-width: 767.98px) {
  .categories {
    padding-block: 40px;
  }
}
.categories__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
.categories {
  /* -- intro card ---------------------------------------------------------- */
}
.categories__intro {
  display: flex;
  flex: 0 0 clamp(300px, 23.51%, 395px);
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  container-type: inline-size;
}
.categories {
  /* Manrope Medium 52/60 uppercase: drawn for this card only, not a Figma
     text style, so it lives here rather than in the mixins. 13.16cqw is the
     drawn 52/395 ratio, so the four-line break holds at every width. */
}
.categories__title {
  margin: 0;
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 52px;
  font-size: clamp(38px, 13.16cqw, 52px);
  font-weight: 500;
  line-height: 1.154;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.categories__text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .categories__text {
    font-size: 17px;
    line-height: 26px;
  }
}
.categories__text {
  margin: 0;
  color: #000000;
}
.categories {
  /* -- grid ---------------------------------------------------------------- */
}
.categories__grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Column stagger for the scroll reveal. It lives here rather than on
     data-reveal-delay because the delay has to follow the column count. */
}
@media (min-width: 576px) and (max-width: 1023.98px) {
  .categories__grid > li:nth-child(2n) {
    transition-delay: 0.08s;
  }
}
@media (min-width: 1024px) {
  .categories__grid > li:nth-child(3n+2) {
    transition-delay: 0.08s;
  }
  .categories__grid > li:nth-child(3n+3) {
    transition-delay: 0.16s;
  }
}
.categories__more {
  display: flex;
}
.categories__all {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid #019dd8;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.categories__all:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .categories__all:hover {
    background-color: #ffffff;
  }
  .categories__all:hover .btn-link {
    color: #0051a1;
  }
  .categories__all:hover .btn-link__icon {
    transform: translateX(4px);
  }
}
.categories {
  /* -- below 1280: intro on top -------------------------------------------- */
}
@media (max-width: 1279.98px) {
  .categories__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .categories__intro {
    flex: none;
    max-width: 705px;
    gap: 20px;
  }
  .categories {
    /* Deliberately NOT the h-m ladder: full width here, the card has room, so
       it skips h-m's 36px step and holds 40 all the way down to 768. */
  }
  .categories__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1023.98px) {
  .categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .categories__more {
    grid-column: 1/-1;
  }
  .categories__all {
    min-height: 96px;
  }
}
@media (max-width: 767.98px) {
  .categories__inner {
    gap: 28px;
  }
  .categories__intro {
    gap: 16px;
  }
  .categories__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
  .categories__grid {
    gap: 12px;
  }
  .categories__all {
    min-height: 72px;
  }
}
@media (max-width: 575.98px) {
  .categories__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Category grid — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   "Solutions Across Industries" — Figma 854:2883 (header 836:1698, panel
   836:1835, 1680x712).

   A #F0F8FF panel in three columns: the 255px industry list, the 557x636
   photo and the copy (eyebrow, Headlines/M title, body, Learn more + Request
   a Quote). Picking an industry swaps photo and copy with a short fade
   (js/app/industries.js only toggles [hidden] — the motion is here).

   Below 1280px the list moves above the content as a three-column grid, two
   columns below 768px, where the photo also stacks over the copy and turns
   landscape. The panel's inner padding is the drawn 120 left / 141 right, so
   the photo and copy land on their drawn widths at 1920.
   ============================================================================= */
.industries {
  padding: 64px 0 56px;
}
@media (max-width: 1279.98px) {
  .industries {
    padding-block: 56px 48px;
  }
}
@media (max-width: 767.98px) {
  .industries {
    padding-block: 40px;
  }
}
.industries__panel {
  display: flex;
  align-items: center;
  gap: 39px;
  margin-top: 60px;
  padding: 40px clamp(16px, 8.39%, 141px) 36px clamp(16px, 7.14%, 120px);
  background-color: #f0f8ff;
}
.industries {
  /* -- industry list ------------------------------------------------------- */
}
.industries__tabs {
  display: flex;
  flex: 0 0 255px;
  flex-direction: column;
  gap: 23px;
}
.industries__label {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  color: #000000;
}
.industries__list {
  display: flex;
  flex-direction: column;
}
.industries__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid #979696;
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
.industries__tab:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .industries__tab:hover {
    color: #0051a1;
  }
  .industries__tab:hover .industries__tab-chevron {
    transform: rotate(-90deg) translateY(3px);
  }
}
.industries__tab.is-active {
  color: #0051a1;
  font-weight: 600;
}
.industries {
  /* The same glyph as the nav dropdowns, turned to point right. */
}
.industries__tab-chevron {
  width: 10px;
  height: 5.92px;
  transform: rotate(-90deg);
  transition: transform 0.25s ease;
}
.industries {
  /* -- photo + copy -------------------------------------------------------- */
}
.industries__content {
  flex: 1 1 auto;
  min-width: 0;
}
.industries {
  /* stretch, not center: past 1440 the copy runs taller than the drawn photo,
     and a stretched photo keeps the two columns level (the copy centres
     itself inside its column, as drawn). */
}
.industries__view {
  display: flex;
  align-items: stretch;
  gap: 51px;
  animation: industry-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.industries__media {
  position: relative;
  aspect-ratio: 557 / 636;
  overflow: hidden;
  background-color: #f0f8ff;
}
.industries__media > img,
.industries__media > picture > img,
.industries__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.industries__media {
  flex: 0 0 49.5%;
}
.industries__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.industries__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .industries__eyebrow {
    font-size: 17px;
    line-height: 26px;
  }
}
.industries__eyebrow {
  margin: 0 0 10px;
  color: #0051a1;
}
.industries {
  /* Headlines/M, scaled down with the column so it never runs to five lines. */
}
.industries__title {
  margin: 0 0 40px;
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 2.4vw, 46px);
  font-weight: 700;
  line-height: 1.087;
  letter-spacing: -0.03em;
}
.industries__text {
  margin: 0 0 40px;
}
.industries__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.industries {
  /* -- 1440 down: the three columns need the room back --------------------- */
}
@media (max-width: 1439.98px) {
  .industries__tabs {
    flex: 0 0 220px;
  }
  .industries__view {
    gap: 32px;
  }
  .industries__media {
    flex: 0 0 45%;
  }
  .industries__title {
    margin-bottom: 24px;
  }
  .industries__text {
    margin-bottom: 28px;
  }
  .industries__actions {
    gap: 20px;
  }
}
.industries {
  /* -- below 1280: the list moves above the content ------------------------ */
}
@media (max-width: 1279.98px) {
  .industries__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-top: 40px;
    padding: 32px clamp(16px, 4%, 48px);
  }
  .industries__tabs {
    flex: none;
  }
  .industries__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  .industries__tab {
    font-size: 18px;
  }
  .industries__media {
    flex: 0 0 42%;
  }
}
@media (max-width: 767.98px) {
  .industries__panel {
    gap: 24px;
    margin-top: 28px;
    padding: 20px 16px 24px;
  }
  .industries__tabs {
    gap: 14px;
  }
  .industries__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .industries__tab {
    gap: 8px;
    padding: 7px 2px;
    font-size: 15px;
  }
  .industries__view {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .industries__media {
    flex: none;
    aspect-ratio: 4/3;
  }
  .industries__title {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 1.2;
  }
  .industries {
    /* A phone screen cannot carry the whole teaser — six lines, and the rest
       is one tap away on the industry page. Drop this rule to show it all. */
  }
  .industries__text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .industries__actions {
    gap: 10px;
    width: 100%;
  }
  .industries__actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 374.98px) {
  .industries__media {
    aspect-ratio: 16/10;
  }
  .industries__title {
    font-size: 24px;
  }
}

@keyframes industry-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .industries__view {
    animation: none;
  }
}
/* === Solutions Across Industries — end ====================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   "Featured Projects" — Figma 854:2895 (header 854:1943, mosaic 854:2894).

   Header with the "View all" small button pinned to its baseline, then a
   four-cell mosaic on a four-column grid: the tall card spans two columns and
   both rows, the banner spans two columns, the last two take one each.
   Below 1024px it becomes two columns (tall and banner full width), below
   768px a single column. Card styling lives in components/_project-card.scss.
   ============================================================================= */
.projects {
  padding: 57px 0 59px;
}
@media (max-width: 1279.98px) {
  .projects {
    padding-block: 48px;
  }
}
@media (max-width: 767.98px) {
  .projects {
    padding-block: 40px;
  }
}
.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.projects__all {
  flex-shrink: 0;
  margin-bottom: 4px;
}
.projects__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.projects__cell--main {
  grid-column: span 2;
  grid-row: span 2;
}
.projects__cell--wide {
  grid-column: span 2;
}
@media (max-width: 1023.98px) {
  .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projects__cell--main, .projects__cell--wide {
    grid-column: 1/-1;
  }
  .projects__cell--main {
    grid-row: auto;
  }
  .projects .project-card--main {
    height: auto;
    aspect-ratio: 16/10;
  }
}
@media (max-width: 767.98px) {
  .projects__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }
  .projects__all {
    margin-bottom: 0;
  }
  .projects__grid {
    gap: 12px;
  }
}
@media (max-width: 575.98px) {
  .projects__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .projects .project-card,
  .projects .project-card--wide {
    aspect-ratio: 3/2;
  }
  .projects .project-card--main {
    aspect-ratio: 4/3;
  }
}

/* === Featured Projects — end ================================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   "Who we are" — Figma 1074:12140 (Info Section 854:1946, 1605x546).

   The 830x546 photo on the left, a 705px story column on the right with 70px
   between them; inside the column everything sits 28px apart (eyebrow and
   title are the shared .section-head, so the eyebrow keeps sitting straight
   on the title). The four facts are a 118px-wide stack each, 73px apart, and
   the icon slot is 70px tall so every label lines up — the fourth fact is a
   picture, not an icon, and is 6px taller than the rest.

   Below 1280 the facts wrap two-by-two; below 768 the photo moves above the
   story.
   ============================================================================= */
.who {
  padding: 59px 0 101px;
}
@media (max-width: 1279.98px) {
  .who {
    padding-block: 48px 64px;
  }
}
@media (max-width: 767.98px) {
  .who {
    padding-block: 40px;
  }
}
.who__inner {
  display: flex;
  align-items: flex-start;
  gap: 70px;
}
.who {
  /* Both columns shrink together, so the drawn proportion holds at any width. */
}
.who__media {
  position: relative;
  aspect-ratio: 830 / 546;
  overflow: hidden;
  background-color: #f6f6f6;
}
.who__media > img,
.who__media > picture > img,
.who__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.who__media {
  flex: 0 1 830px;
  min-width: 0;
}
.who__info {
  display: flex;
  flex: 0 1 705px;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}
.who {
  /* Both are CKEditor blocks — .rte / .rte--lead carry the type. */
}
.who__lead {
  margin: 0;
}
.who__text {
  margin: 0;
}
.who {
  /* -- the four facts ------------------------------------------------------ */
}
.who__features {
  display: flex;
  justify-content: center;
  gap: 73px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.who__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 118px;
  text-align: center;
}
.who {
  /* 70px tall, the height of the tallest fact picture: the 64px glyph centres
     itself inside it and every label starts on the same line. */
}
.who__icon {
  width: 64px;
  height: 70px;
  color: #000000;
}
.who__pic {
  width: 80px;
  height: 70px;
  object-fit: contain;
}
.who__feature-label {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  line-height: 1.2;
}
@media (max-width: 1279.98px) {
  .who__inner {
    gap: 40px;
  }
  .who__info {
    gap: 20px;
  }
  .who__features {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
}
.who {
  /* Below 1024 the story column would be narrower than the photo, so the
     photo moves on top and both take the full width. */
}
@media (max-width: 1023.98px) {
  .who__inner {
    flex-direction: column;
    gap: 28px;
  }
  .who__media, .who__info {
    flex: none;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .who__inner {
    gap: 24px;
  }
  .who__features {
    gap: 20px 24px;
  }
}

/* === Who we are — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   "Why Choose Ferrier" — Figma 1074:12141 (band 1920x528, content 854:2900).

   A #F6F6F6 band: the centred head, 40px, then four white 390x262 cards 40px
   apart — a 72px blue line icon, an 18px gap, then the title and one line of
   copy 16px apart. Two columns below 1280, one below 576.
   ============================================================================= */
.why {
  padding: 64px 0 69px;
  background-color: #f6f6f6;
}
@media (max-width: 1279.98px) {
  .why {
    padding-block: 56px;
  }
}
@media (max-width: 767.98px) {
  .why {
    padding-block: 40px;
  }
}
.why__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.why__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 262px;
  padding: 40px 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.why__icon {
  width: 72px;
  height: 72px;
  color: #01a1f0;
}
.why__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why__title {
  margin: 0;
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
.why__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000000;
}
@media (max-width: 1279.98px) {
  .why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
  }
  .why__card {
    min-height: 0;
  }
}
@media (max-width: 767.98px) {
  .why__list {
    gap: 16px;
    margin-top: 24px;
  }
  .why__card {
    gap: 14px;
    padding: 28px 20px;
  }
  .why__icon {
    width: 56px;
    height: 56px;
  }
  .why__body {
    gap: 10px;
  }
  .why__title {
    font-size: 18px;
    line-height: 24px;
  }
  .why__text {
    font-size: 15px;
  }
}
@media (max-width: 575.98px) {
  .why__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Why Choose Ferrier — end =============================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   "Everything You Need to Know" + "News and Updates" — Figma 1074:12138.

   One row, 24px apart: the 826x642 knowledge card (a mesh photo with the copy
   over its pale left half) and the news column — heading with "View all" and
   two news cards 28px apart. The card's copy sits 155px down and 64px in, as
   drawn, so the card keeps its height without a fixed one.

   Below 1280 the two halves stack; below 768 the news cards do too. The news
   block is its own small block (.news) — the news listing page will reuse it.
   ============================================================================= */
.knowledge {
  padding: 68px 0 61px;
}
@media (max-width: 1279.98px) {
  .knowledge {
    padding-block: 56px;
  }
}
@media (max-width: 767.98px) {
  .knowledge {
    padding-block: 40px;
  }
}
.knowledge__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.knowledge {
  /* -- knowledge card ------------------------------------------------------ */
}
.knowledge__card {
  position: relative;
  flex: 0 1 826px;
  min-width: 0;
  padding: 155px 64px 245px;
  overflow: hidden;
}
.knowledge__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.knowledge {
  /* 660, not the drawn 636: our two buttons sit 6px wider than the drawn pair
     and would otherwise wrap to a second row. Title and copy keep the drawn
     widths, so nothing moves. */
}
.knowledge__content {
  position: relative;
  max-width: 660px;
}
.knowledge__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .knowledge__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .knowledge__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .knowledge__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.knowledge__title {
  max-width: 636px;
  margin: 0 0 40px;
  color: #000000;
}
.knowledge__text {
  max-width: 613px;
  margin: 0 0 40px;
}
.knowledge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
}
.knowledge {
  /* The drawn 817 as the basis, so the two halves shrink together instead of
     the news column absorbing every pixel the card does not need. */
}
.knowledge__news {
  flex: 1 1 817px;
}
@media (max-width: 1279.98px) {
  .knowledge__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .knowledge__card {
    flex: none;
    padding: 64px 48px;
  }
  .knowledge__title {
    margin-bottom: 24px;
  }
  .knowledge__text {
    margin-bottom: 28px;
  }
  .knowledge__news {
    flex: none;
  }
}
@media (max-width: 767.98px) {
  .knowledge__inner {
    gap: 32px;
  }
  .knowledge__card {
    padding: 32px 20px;
  }
  .knowledge__actions {
    gap: 12px;
  }
}

/* =============================================================================
   News block — the heading row and the card grid.
   ============================================================================= */
.news {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.news__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .news__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .news__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .news__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.news__title {
  margin: 0;
  color: #000000;
}
.news__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1279.98px) {
  .news {
    gap: 28px;
  }
}
@media (max-width: 767.98px) {
  .news {
    gap: 20px;
    /* "View all" beside a two-line heading wraps at phone widths — same
       stacked head as Featured Projects. */
  }
  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .news__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* === Knowledge + news — end ================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   CTA banner — Figma 888:11147 (1681x310).

   A navy gradient band, copy 152px in and 66px down, and the mesh photo cut
   in along a diagonal on the right with a bright edge over the seam. Both
   diagonals are clip-paths in percentages, so they keep their shape as the
   band changes width; the photo is already cropped to the slice the band
   shows (.tmp/cta/prep.js).

   The band is reusable — data/site.json carries the copy, so any page can
   include partials/cta.njk. The knowledge row above it carries the 61px gap;
   this section carries the 65px below.
   ============================================================================= */
.cta {
  padding-bottom: 65px;
}
@media (max-width: 767.98px) {
  .cta {
    padding-bottom: 40px;
  }
}
.cta__band {
  position: relative;
  overflow: hidden;
  padding: 66px 152px;
  background-image: linear-gradient(93.59deg, #10233c 10.04%, #31567e 99.43%);
  color: #ffffff;
}
.cta {
  /* left 55.1% / width 45.8% of the band = the drawn 926..1695 of 1681 */
}
.cta__media {
  position: absolute;
  inset: 0 auto 0 55.1%;
  width: 45.8%;
  clip-path: polygon(48.5% 0, 100% 0, 100% 100%, 1.35% 100%);
}
.cta__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta__edge {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(233deg, #1b4f85 0%, #83afdd 43.5%, #427bb4 100%);
  clip-path: polygon(75.4% 0, 77.2% 0, 55.7% 100%, 53.5% 100%);
}
.cta {
  /* The drawn 839, but never past the point where the photo's diagonal
     starts (77.3% of the band). The percentage resolves against the band's
     content box (band − 304 of padding), so 77.3% of that plus 83 is the
     diagonal's distance from the copy's left edge — in a 1392 column (the
     industry page) the title still gets its 839 and one line. */
}
.cta__content {
  position: relative;
  max-width: min(839px, 77.3% + 83px);
}
.cta__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .cta__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .cta__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .cta__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.cta__title {
  margin: 0 0 8px;
  color: #ffffff;
}
.cta__text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .cta__text {
    font-size: 17px;
    line-height: 26px;
  }
}
.cta__text {
  margin: 0 0 36px;
  color: #ffffff;
}
@media (max-width: 1279.98px) {
  .cta__band {
    padding: 48px 56px;
  }
  .cta__content {
    max-width: 60%;
  }
}
.cta {
  /* Below 1024 the photo would sit under the copy — the gradient carries the
     band on its own. */
}
@media (max-width: 1023.98px) {
  .cta__media, .cta__edge {
    display: none;
  }
  .cta__content {
    max-width: none;
  }
}
@media (max-width: 767.98px) {
  .cta__band {
    padding: 32px 20px;
  }
  .cta__text {
    margin-bottom: 24px;
  }
}
.cta {
  /* -- the light variant (Figma 898:14834, the project page) ------------------
     A #F0F8FF band, black copy 92px in under a blue eyebrow, the photo along
     the right edge darkening into the band (mix-blend-mode, the drawn
     "darken"), no diagonal. The band is 441 tall as drawn; the page around it
     carries the spacing, so no padding below. */
}
.cta--light {
  padding-bottom: 0;
}
.cta--light .cta__band {
  min-height: 441px;
  padding: 66px 92px;
  background-image: none;
  background-color: #f0f8ff;
  color: #000000;
}
.cta--light {
  /* the drawn 776 of 1390, fading in from the left so the copy stays legible */
}
.cta--light .cta__media {
  inset: 0 0 0 auto;
  width: 55.8%;
  clip-path: none;
  mask-image: linear-gradient(to right, transparent, #000 40%);
}
.cta--light .cta__media > img {
  mix-blend-mode: darken;
}
.cta--light .cta__content {
  max-width: 606px;
}
.cta--light .cta__title,
.cta--light .cta__text {
  color: #000000;
}
@media (max-width: 1279.98px) {
  .cta--light .cta__band {
    padding: 48px 40px;
  }
}
.cta--light {
  /* the photo is gone below 1024 (the base rule), so the height goes with it */
}
@media (max-width: 1023.98px) {
  .cta--light .cta__band {
    min-height: 0;
  }
}
@media (max-width: 767.98px) {
  .cta--light .cta__band {
    padding: 32px 20px;
  }
}
.cta__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #01a1f0;
}

/* === CTA banner — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Catalog layout — the products listing (Figma 854:2902): the 268px sidebar,
   20px, then the listing column, 28px under the breadcrumb bar and 40px above
   the newsletter band. Below 1280px the sidebar leaves the flow (it is the
   shared drawer, components/_drawer.scss) and a Filters button opens it.
   ============================================================================= */
.catalog {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 28px 40px;
}
.catalog__aside {
  flex: 0 0 268px;
}
.catalog__main {
  flex: 1 1 auto;
  min-width: 0;
}
.catalog {
  /* the Filters button (below 1280px only) is the shared .drawer-trigger,
     components/_drawer.scss */
  /* -- results block ------------------------------------------------------------
     Dimmed with a spinner while a filter request runs; the old cards stay in
     place, so nothing jumps. */
}
.catalog__results {
  position: relative;
  min-height: 120px;
  transition: opacity 0.2s ease;
}
.catalog__results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}
.catalog__results.is-loading::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 3px solid rgba(0, 81, 161, 0.2);
  border-top-color: #0051a1;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.catalog__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid #d64545;
  border-radius: 6px;
  color: #d64545;
}
.catalog__error a {
  color: inherit;
  text-decoration: underline;
}
.catalog {
  /* the CKEditor intro with Read more; the drawn 40px to the grid */
}
.catalog__intro {
  margin-bottom: 40px;
}
.catalog {
  /* Four 336px cards at the drawn 1392 with 16px gutters. Auto-fill from a
     270px minimum steps 4 → 3 → 2 → 1 with no breakpoint, and a card is never
     narrower than its spec rows need — down to 320px and below. */
}
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog {
  /* Load more under the grid — no Figma frame: the projects listing's centred
     outline button. It sits inside the results block, so a filter swap brings
     the new state's button; the server prints it while another page exists. */
}
.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.catalog {
  /* the products outro or a category's bottom text (spec 21.1): the intro's
     rich text under the grid, outside the block a filter swap replaces */
}
.catalog__outro {
  margin-top: 40px;
}
.catalog {
  /* nothing matched — the server renders this instead of the grid */
}
.catalog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px;
  border: 1px dashed #c1c1c1;
  border-radius: 8px;
  text-align: center;
}
.catalog__empty p {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .catalog__empty p {
    font-size: 17px;
    line-height: 26px;
  }
}
.catalog__empty p {
  margin: 0;
  color: #696767;
}
@media (max-width: 1279.98px) {
  .catalog {
    display: block;
    padding-block: 24px 40px;
  }
}
@media (max-width: 767.98px) {
  .catalog__more, .catalog__outro {
    margin-top: 32px;
  }
}

/* === Catalog layout — end =================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Product Category page — Figma 900:15115. The catalog layout (sidebar | 20 |
   column) with the category's own blocks in the column:
     head        46/50 title + 13 + 20/30 subtitle, 30 to the intro
     intro       the CKEditor copy clipped to six lines (.catalog__intro, 40 below)
     subs        "Subcategories:" label, 24, 450:308 tiles three across 20 apart,
                 52 to the products
     products    "Products:" label, 24, the catalog grid
   The page ends 88px above the newsletter (the listing's 40 is the catalog's).
   ============================================================================= */
.catalog--category {
  padding-bottom: 88px;
}
@media (max-width: 1279.98px) {
  .catalog--category {
    padding-bottom: 64px;
  }
}
@media (max-width: 767.98px) {
  .catalog--category {
    padding-bottom: 40px;
  }
}

.category__head {
  margin-bottom: 30px;
}
.category__label {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #01a1f0;
}
.category__subs {
  margin-bottom: 52px;
}
.category__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1279.98px) {
  .category__head {
    margin-bottom: 24px;
  }
  .category__subs {
    margin-bottom: 40px;
  }
}
@media (max-width: 1023.98px) {
  .category__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .category__label {
    margin-bottom: 16px;
  }
  .category__subs {
    margin-bottom: 32px;
  }
  .category__tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* === Product Category page — end ============================================ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Product single — Figma 866:6327 (logged out) / 1014:13351 (logged in).
   75px under the breadcrumb bar: the 600px gallery column, 80px, then the
   info column (title 42/48, the "Category:" eyebrow, 40, the description
   with Read more, 40, the details table, 40, the action blocks). The gallery
   is square and contained, like every product picture; the thumbnails sit
   16px under it, three to the row.
   ============================================================================= */
.product {
  padding-block: 75px 100px;
}
.product__top {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.product {
  /* min-width: 0 — Swiper sizes its slides in px, and a flex item's automatic
     minimum would otherwise let those widths push the info column off the row.
     Sticky beside the long info column, under the compact fixed header. */
}
.product__gallery {
  flex: 0 0 600px;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .product__gallery {
    position: sticky;
    top: 110px;
  }
}
.product__info {
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
}
.product__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product__title {
  margin: 0;
  color: #173453;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 48px;
  overflow-wrap: anywhere;
}
.product {
  /* the product's own title when it differs from its code (the heading stays code — pattern) */
}
.product__subtitle {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .product__subtitle {
    font-size: 17px;
    line-height: 26px;
  }
}
.product__subtitle {
  margin: 0;
  color: #173453;
  overflow-wrap: anywhere;
}
.product__category {
  margin: 0;
  color: #01a1f0;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.product__category a {
  color: inherit;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product__category a:hover {
    color: #0051a1;
  }
}
.product__category a:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.product__desc, .product__details {
  margin-top: 40px;
}
@media (max-width: 1439.98px) {
  .product__top {
    gap: 60px;
  }
  .product__gallery {
    flex-basis: 480px;
  }
  .product__title {
    font-size: 36px;
    line-height: 42px;
  }
}
@media (max-width: 1279.98px) {
  .product {
    padding-block: 48px 64px;
  }
  .product__top {
    gap: 48px;
  }
  .product__gallery {
    flex-basis: 400px;
  }
}
.product {
  /* one column: the gallery keeps its drawn size, left-aligned, the info follows */
}
@media (max-width: 1023.98px) {
  .product__top {
    flex-direction: column;
    gap: 40px;
  }
  .product__gallery {
    flex-basis: auto;
    width: min(100%, 600px);
  }
  .product__info {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .product {
    padding-block: 32px 40px;
  }
  .product__title {
    font-size: 30px;
    line-height: 36px;
  }
  .product__desc, .product__details {
    margin-top: 28px;
  }
}

/* -- gallery ------------------------------------------------------------------
   Swiper main + thumbs (js/app/product.js). The frames are square .img-box
   containers, so a portrait or landscape photo is letterboxed, never cropped.
   Active thumb = the drawn 2px bright ring, as an inset shadow so nothing
   moves when it changes.
   -------------------------------------------------------------------------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gallery__main, .gallery__thumbs {
  width: 100%;
  min-width: 0;
}
.gallery__frame {
  display: block;
  border: 1px solid #e7e7eb;
  border-radius: 8px;
  cursor: zoom-in;
}
.gallery__frame:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.gallery__thumb {
  width: calc((100% - 24px) / 3);
  padding: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #e7e7eb;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.gallery__thumb > img {
  transition: opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery__thumb:hover {
    box-shadow: inset 0 0 0 1px #01a1f0;
  }
}
.gallery__thumb:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.gallery__thumb.swiper-slide-thumb-active {
  box-shadow: inset 0 0 0 2px #01a1f0;
}
.gallery {
  /* prev / next on the big picture: a white disc at each edge; Swiper adds
     swiper-button-lock when one picture needs no arrows */
}
.gallery__nav, .gallery__thumb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: #0051a1;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery__nav:hover, .gallery__thumb-nav:hover {
    background-color: #01a1f0;
    color: #ffffff;
  }
}
.gallery__nav:focus-visible, .gallery__thumb-nav:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.gallery__nav.swiper-button-disabled, .gallery__thumb-nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.gallery__nav.swiper-button-lock, .gallery__thumb-nav.swiper-button-lock {
  display: none;
}
.gallery__nav {
  width: 40px;
  height: 40px;
}
.gallery__nav--prev {
  left: 16px;
}
.gallery__nav--next {
  right: 16px;
}
.gallery__nav-icon {
  width: 13px;
  height: 13px;
}
.gallery__nav--prev .gallery__nav-icon {
  transform: rotate(180deg);
}
.gallery {
  /* the same on the thumb strip, smaller — only when more thumbs than fit */
}
.gallery__thumb-nav {
  width: 28px;
  height: 28px;
}
.gallery__thumb-nav--prev {
  left: 6px;
}
.gallery__thumb-nav--next {
  right: 6px;
}
.gallery__thumb-nav-icon {
  width: 10px;
  height: 10px;
}
.gallery__thumb-nav--prev .gallery__thumb-nav-icon {
  transform: rotate(180deg);
}

/* -- details table --------------------------------------------------------------
   Two lists side by side between two rules; every row is 160px of bold label,
   33px, the value, on alternating #F6F6F6 stripes with a 1px gap.
   -------------------------------------------------------------------------- */
.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 49px;
  padding-block: 20px;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
}
.details__col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
}
.details__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 33px;
  padding: 8px;
}
.details__row:nth-child(odd) {
  background-color: #f6f6f6;
}
.details__row dt {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 2px 0 0;
  color: #000000;
  line-height: 19px;
}
.details__row dd {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000000;
  overflow-wrap: anywhere;
}
.details__row dd a {
  color: #01a1f0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .details__row dd a:hover {
    color: #0051a1;
  }
}
.details {
  /* two lists need ~380px each; narrower than that the info column gets one */
}
@container (max-width: 820px) {
  .details {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}
@media (max-width: 575.98px) {
  .details__row {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
}

/* -- logged out: Add to Quote Cart + the sign-in note ------------------------
   Figma 917:6560: the medium button with the 24px cart, 80px, a 36px info
   bubble and two lines of Content/S whose second line is the login link.
   -------------------------------------------------------------------------- */
.product__actions {
  margin-top: 40px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 80px;
}
.actions__form {
  flex-shrink: 0;
}
.actions__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 685px;
  margin: 0;
  color: #696767;
  line-height: 18px;
}
.actions__note-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: #0051a1;
}
.actions__note-link {
  color: #0051a1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .actions__note-link:hover {
    color: #01a1f0;
  }
}
.actions__note-link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}

/* the button's cart glyph is the drawn 24px, not the 17×11 arrow; a 24px line
   would grow the box to 58, so the padding gives back the 2px */
.btn--cart {
  padding-block: 15px;
}
.btn--cart .btn__icon {
  width: 24px;
  height: 24px;
}

.product__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 8px 0 0;
  color: #d64545;
  line-height: 18px;
}

/* -- logged in: options, price box, buttons ---------------------------------
   Figma 1014:13426: two selects 16px apart (plus the quantity the user asked
   for), 34px, the light-blue box: price | rule | stock | the two buttons.
   -------------------------------------------------------------------------- */
.product__purchase {
  margin-top: 40px;
}

.purchase {
  /* start-aligned: a field that grows an error line keeps the others where they were */
}
.purchase__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
  gap: 16px;
  align-items: start;
}
.purchase__box {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4cqw, 60px);
  margin-top: 34px;
  padding: 20px;
  background-color: #f0f8ff;
}
.purchase__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.purchase__price-label {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  color: #000000;
  letter-spacing: 0;
  line-height: 18px;
}
.purchase__price-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #000000;
}
.purchase__price-value strong {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -1px;
}
.purchase__price-value small {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  line-height: 19px;
}
.purchase {
  /* the drawn 118px rule is the box's inner height: stretch, not a fixed line */
}
.purchase__stock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-self: stretch;
  min-height: 118px;
  padding-left: clamp(24px, 4cqw, 60px);
  border-left: 1px solid #c1c1c1;
}
.purchase__stock-status {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0a8c4a;
  line-height: 19px;
}
.purchase__stock-icon {
  width: 24px;
  height: 25px;
  flex-shrink: 0;
}
.purchase__stock-note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #000000;
  line-height: 19px;
}
.purchase__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 274px;
  margin-left: auto;
}
.purchase__buttons .btn {
  width: 100%;
}

/* -- logged in: Request a Custom Size -------------------------------------------
   Figma 1014:13460: a rule, the title + copy beside the bordered "Need help"
   column, a row of fields between two rules with Add + and a trash can, then
   Submit beside the note. The user asked for Width and Height in place of
   the drawn single "Custom Size" field.
   -------------------------------------------------------------------------- */
.product__custom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #c1c1c1;
}

.custom__head {
  display: flex;
  align-items: center;
  gap: 72px;
}
.custom__intro {
  flex: 0 1 550px;
  min-width: 0;
}
.custom__title {
  margin: 0 0 10px;
  color: #000000;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.custom__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000000;
  line-height: 26px;
}
.custom__help {
  display: flex;
  flex: 0 0 349px;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
  border-left: 1px solid #c1c1c1;
}
.custom__help-title {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #000000;
  line-height: 19px;
}
.custom__help-text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #000000;
  line-height: 17px;
}
.custom__help-link {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #01a1f0;
  line-height: 19px;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .custom__help-link:hover {
    color: #0051a1;
  }
  .custom__help-link:hover .custom__help-arrow {
    transform: translateX(4px);
  }
}
.custom__help-link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.custom__help-arrow {
  width: 16px;
  height: 11px;
  transition: transform 0.25s ease;
}
.custom__form {
  margin-top: 20px;
}
.custom__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #c1c1c1;
}
.custom {
  /* Width | Height | Material | Description | Qty | Add + trash. Start-aligned so
     an error line under one field never lifts its neighbours; the actions sit
     level with the controls through a top margin the size of a label row. */
}
.custom__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.8fr) auto;
  gap: 16px 20px;
  align-items: start;
}
.custom__row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 41px;
  margin-top: 24px;
}
.custom__row:not(:last-child) .custom__add {
  visibility: hidden;
}
.custom__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #0051a1;
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .custom__remove:hover {
    background-color: rgba(214, 69, 69, 0.08);
    color: #d64545;
  }
}
.custom__remove:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.custom__remove:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.custom__remove-icon {
  width: 20px;
  height: 20px;
}
.custom__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  margin-top: 20px;
}
.custom__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  flex: 1 1 320px;
  max-width: 685px;
  margin: 0;
  color: #696767;
  line-height: 17px;
}
.custom {
  /* the "thank you" panel forms.js swaps in for the form */
}
.custom__done {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 24px;
  background-color: #f0f8ff;
  border-radius: 8px;
}
.custom__done-icon {
  width: 40px;
  height: 42px;
  flex-shrink: 0;
  color: #0a8c4a;
}
.custom__done-title {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #000000;
  line-height: 1.3;
}
.custom__done-text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 4px 0 0;
  color: #696767;
  line-height: 18px;
}

/* -- the action blocks follow the info column's width, not the viewport ------ */
@container (max-width: 900px) {
  .custom__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .custom__row-actions {
    justify-self: end;
  }
}
@container (max-width: 760px) {
  .actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .purchase__box {
    flex-wrap: wrap;
    gap: 24px;
  }
  .purchase__stock {
    min-height: 0;
    padding-left: 24px;
  }
  .purchase__buttons {
    flex-direction: row;
    width: 100%;
    margin-left: 0;
  }
  .purchase__buttons .btn {
    flex: 1 1 0;
  }
  .custom__head {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .custom__intro {
    flex-basis: auto;
  }
  .custom__help {
    flex-basis: auto;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid #c1c1c1;
  }
}
@container (max-width: 640px) {
  .purchase__options {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .purchase__qty {
    max-width: 160px;
  }
  .purchase__stock {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }
  .custom__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 400px) {
  .purchase__options,
  .custom__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .purchase__buttons {
    flex-direction: column;
  }
  .custom__row-actions {
    justify-self: start;
  }
}
/* -- Related Projects ----------------------------------------------------------
   Figma 1014:13497: the section head (705 wide) 63px under the top block, 49px,
   then the home project cards 409 wide and 26 apart, running off the right
   edge of the page — the shared strip (components/_strip.scss) with its
   arrows on the head's baseline.
   -------------------------------------------------------------------------- */
.product__related {
  margin-top: 63px;
}

.related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 49px;
}
.related__title {
  max-width: 705px;
}
.related__slide {
  width: 409px;
}
@media (max-width: 1279.98px) {
  .related__slide {
    width: 360px;
  }
}
@media (max-width: 767.98px) {
  .related__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
  }
  .related__slide {
    width: min(300px, 78vw);
  }
}

@media (max-width: 767.98px) {
  .product__related {
    margin-top: 48px;
  }
}

/* === Product single — end =================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   About Us — History (Figma 866:8054) and Our Facility (866:9470).
   Both pages: the sub-nav 44px under the breadcrumb bar, then 100px to the
   content. History = the two-column intro and the timeline; Our Facility =
   the admin paragraphs (components/_paragraph.scss) and the photo band.
   ============================================================================= */
.about {
  padding-block: 44px 100px;
}
.about .subnav {
  margin-bottom: 100px;
}
@media (max-width: 1279.98px) {
  .about {
    padding-block: 32px 64px;
  }
  .about .subnav {
    margin-bottom: 56px;
  }
}
@media (max-width: 767.98px) {
  .about {
    padding-block: 24px 40px;
  }
  .about .subnav {
    margin-bottom: 40px;
  }
}

/* -- intro: eyebrow + title + bold lead | paragraph ------------------------------
   864 + 24 + 768 as drawn, the paragraph centred on the left block.
   -------------------------------------------------------------------------- */
.history__head {
  display: flex;
  align-items: center;
  gap: 24px;
}
.history__intro {
  display: flex;
  flex: 0 1 864px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.history__text {
  flex: 1 1 768px;
  min-width: 0;
}
.history__lead, .history__text {
  margin: 0;
}
@media (max-width: 1279.98px) {
  .history__head {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .history__intro, .history__text {
    flex-basis: auto;
  }
}

/* -- timeline ---------------------------------------------------------------------
   Figma 866:9467: 80px under the intro, right-aligned to a 1378px block: a
   558px photo column, 54px, then each event — a 21px ring on a vertical
   hairline, 29px, year / title / copy 716 wide. An era's photo sits beside its
   own event (the drawing spaces three photos loosely against four events);
   an event without a photo simply has none.
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 558px minmax(0, 1fr);
  column-gap: 54px;
  row-gap: 64px;
  max-width: 1378px;
  margin: 80px 0 0 auto;
  padding: 0;
  list-style: none;
  /* the hairline runs from the first ring to the end of the list, behind the rings */
}
.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: calc(558px + 54px + 10.5px);
  width: 1px;
  background-color: #979696;
}
.timeline__event {
  display: grid;
  grid-template-columns: 558px minmax(0, 1fr);
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  column-gap: 54px;
  align-items: start;
}
.timeline {
  /* editorial photos, cropped to the drawn 2:1 like the hero and the projects */
}
.timeline__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: #f6f6f6;
}
.timeline__media > img,
.timeline__media > picture > img,
.timeline__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.timeline__media {
  grid-column: 1;
  margin: 0;
}
.timeline__body {
  position: relative;
  grid-column: 2;
  padding-left: 50px;
  /* the ring: white centre, a 6px secondary-blue stroke, centred on the year line */
}
.timeline__body::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 21px;
  height: 21px;
  background-color: #ffffff;
  border: 6px solid #0051a1;
  border-radius: 50%;
}
.timeline__year {
  margin: 0 0 11px;
  color: #01a1f0;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 30px;
}
.timeline__title {
  margin: 0 0 8px;
  color: #10233c;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
.timeline__text {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  max-width: 716px;
  margin: 0;
  color: #000000;
}
@media (max-width: 1439.98px) {
  .timeline {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    max-width: none;
    margin-left: 0;
  }
  .timeline::before {
    left: calc(40% + 54px + 10.5px);
  }
  .timeline__event {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-columns: subgrid;
  }
}
.timeline {
  /* one column: the photo above its event, both indented past the line */
}
@media (max-width: 1023.98px) {
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    margin-top: 48px;
  }
  .timeline::before {
    left: 10.5px;
  }
  .timeline__event {
    grid-template-columns: minmax(0, 1fr);
    grid-template-columns: subgrid;
  }
  .timeline__media {
    grid-column: 1;
    max-width: 560px;
    margin: 0 0 20px 50px;
  }
  .timeline__body {
    grid-column: 1;
  }
}
@media (max-width: 767.98px) {
  .timeline {
    row-gap: 40px;
  }
  .timeline__media {
    margin-left: 36px;
  }
  .timeline__body {
    padding-left: 36px;
  }
  .timeline__title {
    font-size: 20px;
    line-height: 26px;
  }
}

/* -- Our Facility: the admin paragraphs (components/_paragraph.scss) ------------
   Figma 888:9921 / 866:9846: the capabilities copy beside the big photo is one
   .paragraph (picture right). The page's band follows 123px down, so this
   page's section ends there.
   -------------------------------------------------------------------------- */
.about--facility {
  padding-bottom: 123px;
}
@media (max-width: 1279.98px) {
  .about--facility {
    padding-bottom: 64px;
  }
}
@media (max-width: 767.98px) {
  .about--facility {
    padding-bottom: 40px;
  }
}

/* -- Our Facility: the photo band --------------------------------------------------
   Figma 994:12121: a full-width #F0F8FF band, 51px padding, the 46/50 title,
   41px, then 292×181 photos 21px apart running off the right edge (the
   shared strip), 95px under them. Each photo opens the Fancybox gallery.
   -------------------------------------------------------------------------- */
.facility-band {
  padding: 51px 0 95px;
  background-color: #f0f8ff;
}
.facility-band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 41px;
}
.facility-band__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .facility-band__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .facility-band__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .facility-band__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.facility-band__title {
  margin: 0;
}
.facility-band__slide {
  width: 292px;
}
.facility-band__pic {
  position: relative;
  aspect-ratio: 292 / 181;
  overflow: hidden;
  background-color: #ffffff;
}
.facility-band__pic > img,
.facility-band__pic > picture > img,
.facility-band__pic > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facility-band__pic {
  display: block;
  cursor: zoom-in;
}
.facility-band__pic > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .facility-band__pic:hover > img {
    transform: scale(1.04);
  }
}
.facility-band__pic:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
@media (max-width: 1279.98px) {
  .facility-band {
    padding: 40px 0 64px;
  }
  .facility-band__head {
    margin-bottom: 28px;
  }
}
@media (max-width: 767.98px) {
  .facility-band {
    padding: 32px 0 40px;
  }
  .facility-band__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }
  .facility-band__slide {
    width: min(260px, 70vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .facility-band__pic > img {
    transition: none;
  }
}
/* === About Us — end ========================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Industry page layout — Figma 866:8495: the 268px side navigation, 20px,
   then the content column (the drawn 1395), 32px under the breadcrumb bar.
   The column: eyebrow + title, 60, the paragraphs (68 apart, 40 between two
   copy-only ones — components/_paragraph.scss), 60, the CTA band, which
   carries its own 65px to the newsletter. Below 1280px the side navigation
   leaves the flow and becomes the shared drawer (components/_drawer.scss),
   opened by the "All industries" trigger at the top of the column — the
   same pattern as the filters on the products page.
   ============================================================================= */
.industry {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 32px;
}
.industry__aside {
  flex: 0 0 268px;
}
.industry__main {
  flex: 1 1 auto;
  min-width: 0;
}
.industry__head {
  margin-bottom: 60px;
}
.industry .cta {
  margin-top: 60px;
}
@media (max-width: 1279.98px) {
  .industry__head {
    margin-bottom: 40px;
  }
  .industry .cta {
    margin-top: 48px;
  }
}
@media (max-width: 767.98px) {
  .industry {
    gap: 32px;
    padding-top: 24px;
  }
  .industry__head {
    margin-bottom: 32px;
  }
  .industry .cta {
    margin-top: 40px;
  }
}

/* === Industry page — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Projects listing — Figma 866:8780: the section head 53px under the
   breadcrumb bar (852 wide as drawn — the shared .section-head's 860), 60px,
   then the cards three across on a 20px grid, 127px above the newsletter.
   The card itself is components/_project-card.scss (`--grid`).
   ============================================================================= */
.project-list {
  padding-block: 53px 127px;
}
.project-list__head {
  margin-bottom: 60px;
}
.project-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.project-list {
  /* the Load more button, centred under the grid; hidden by the script once
     the server says there is no next page */
}
.project-list__more {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
@media (max-width: 1279.98px) {
  .project-list {
    padding-block: 40px 64px;
  }
  .project-list__head {
    margin-bottom: 40px;
  }
  .project-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-list__more {
    margin-top: 40px;
  }
}
@media (max-width: 767.98px) {
  .project-list {
    padding-block: 24px 40px;
  }
  .project-list__head {
    margin-bottom: 32px;
  }
  .project-list__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .project-list__more {
    margin-top: 32px;
  }
}

/* === Projects listing — end ================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Project page layout — Figma 866:9065: the 268px side navigation, 20px, the
   content column (the drawn 1392), 32px under the breadcrumb bar; the column
   stacks its blocks 53px apart and the page ends 53px under the CTA band.

     head      eyebrow + 46/50 title + 20 + bold lead (613) | 30 | the CKEditor
               description (687)
     gallery   a 3-column mosaic, 16px rows / 20px columns: the first photo
               spans two columns (920:415), the others are 451:415; every cell
               opens the Fancybox gallery
     related   "Related Products" head with the strip arrows, 17px, product
               thumbs 336 wide 16 apart running off the right edge
   ============================================================================= */
.project-single {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 32px 53px;
}
.project-single__aside {
  flex: 0 0 268px;
}
.project-single__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 53px;
  min-width: 0;
}
.project-single {
  /* the trigger is a flex child too — its own margin would double the gap */
}
.project-single .drawer-trigger {
  margin-bottom: -29px;
}
.project-single {
  /* one column at every width — the eyebrow, the title and the lead, then the text under them (the user, 2026-09-25:
     the drawn 613 | 687 row left the title's column empty beside a long real description); the copy keeps the news
     article's 1193 measure */
}
.project-single__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.project-single__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 1193px;
}
.project-single__text {
  min-width: 0;
  max-width: 1193px;
}
.project-single__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin: -2px 0 0;
  padding: 0;
  list-style: none;
}
.project-single__cell--wide {
  grid-column: span 2;
}
.project-single__pic {
  position: relative;
  aspect-ratio: 451 / 415;
  overflow: hidden;
  background-color: #f6f6f6;
}
.project-single__pic > img,
.project-single__pic > picture > img,
.project-single__pic > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-single__pic {
  display: block;
  cursor: zoom-in;
}
.project-single__pic > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .project-single__pic:hover > img {
    transform: scale(1.04);
  }
}
.project-single__pic:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.project-single__pic--wide {
  aspect-ratio: 920/415;
}
@media (max-width: 1279.98px) {
  .project-single {
    padding-block: 24px 48px;
  }
  .project-single__main {
    gap: 40px;
  }
  .project-single .drawer-trigger {
    margin-bottom: -16px;
  }
}
.project-single {
  /* two columns of photos */
}
@media (max-width: 1023.98px) {
  .project-single__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .project-single {
    padding-block: 24px 40px;
  }
  .project-single__main {
    gap: 32px;
  }
  .project-single__gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .project-single__cell--wide {
    grid-column: auto;
  }
  .project-single__pic--wide {
    aspect-ratio: 451/415;
  }
}

/* -- Related Products: the strip of product thumbs ---------------------------- */
.related-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 17px;
}
.related-products__head .section-head {
  max-width: 705px;
}
.related-products__slide {
  width: 336px;
}
@media (max-width: 767.98px) {
  .related-products__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .related-products__slide {
    width: min(300px, 82vw);
  }
}

/* === Project page — end ===================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   FAQ page — Figma 889:12959. 70px under the breadcrumb bar the centred head
   (eyebrow on the 46/50 title, 20, the bold lead, 877 wide), 60, then the
   questions — the shared accordion (components/_accordion.scss).
   ============================================================================= */
.faq {
  padding-block: 70px 100px;
}
.faq__head {
  gap: 20px;
  max-width: 877px;
  margin-bottom: 60px;
}
.faq {
  /* the drawn lead is the bold body line, not Content/L */
}
.faq__lead {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #000000;
  line-height: normal;
}
@media (max-width: 1279.98px) {
  .faq {
    padding-block: 48px 64px;
  }
  .faq__head {
    margin-bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .faq {
    padding-block: 32px 40px;
  }
  .faq__head {
    margin-bottom: 32px;
  }
}

/* === FAQ page — end ========================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Text pages — Terms and Conditions, Privacy Policy, Metals appearance +
   finishing (public_html/tpl/pages/policy.tpl), the 404 page
   (public_html/tpl/404.tpl) and the member dialogs' own pages (Login, Become a
   Member, Reset password: partials/member-page.njk,
   public_html/tpl/member/dialog.tpl). No Figma frame (Plan 2 decision 5, Plan
   3a decision 15): the FAQ page's frame without its accordion — 70px under
   the breadcrumb bar the centred head (eyebrow, the 46/50 title, the bold
   lead; 877 wide), 60, then one CKEditor block in an 877px column (a policy),
   the row of section links (the 404) or the button that opens the dialog,
   100 above the newsletter.
   ============================================================================= */
.text-page {
  padding-block: 70px 100px;
}
.text-page__head {
  gap: 20px;
  max-width: 877px;
  margin-bottom: 60px;
}
.text-page {
  /* the FAQ's lead: the bold body line */
}
.text-page__lead {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #000000;
  line-height: normal;
}
.text-page {
  /* a pasted address or a long URL wraps instead of widening a phone's page */
}
.text-page__body {
  max-width: 877px;
  margin-inline: auto;
  overflow-wrap: break-word;
}
.text-page {
  /* the 404's way back: the home page and the main sections, centred — one
     row from 1024px up, wrapping below */
}
.text-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.text-page {
  /* a member dialog's page: the button that opens the dialog, centred */
}
.text-page__actions {
  display: flex;
  justify-content: center;
}
@media (max-width: 1279.98px) {
  .text-page {
    padding-block: 48px 64px;
  }
  .text-page__head {
    margin-bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .text-page {
    padding-block: 32px 40px;
  }
  .text-page__head {
    margin-bottom: 32px;
  }
  .text-page__links {
    gap: 14px 20px;
  }
}

/* === Text pages — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Knowledge page — Figma 889:13315. 76px under the breadcrumb bar the head
   (eyebrow on the 46/50 title), 60, the row: the intro column (809 — the bold
   lead, 24, the CKEditor copy 768 wide) | 52 | "Files for download:" (781 —
   the uppercase label, 28, three 247px download cards 20 apart), 60, then the
   glossary (the shared accordion), 100 above the newsletter.
   ============================================================================= */
.kb {
  padding-block: 76px 100px;
}
.kb__head {
  margin-bottom: 60px;
}
.kb__row {
  display: flex;
  align-items: flex-start;
  gap: 52px;
  margin-bottom: 60px;
}
.kb__intro {
  display: flex;
  flex: 0 1 809px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.kb__text {
  max-width: 768px;
}
.kb__files {
  flex: 0 1 781px;
  min-width: 0;
}
.kb__label {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: #01a1f0;
}
.kb__downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 247px));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1279.98px) {
  .kb {
    padding-block: 48px 64px;
  }
  .kb__head {
    margin-bottom: 40px;
  }
  .kb__row {
    gap: 40px;
    margin-bottom: 48px;
  }
  .kb__downloads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kb {
  /* one column: the intro, then the files */
}
@media (max-width: 1023.98px) {
  .kb__row {
    flex-direction: column;
  }
  .kb__intro, .kb__files {
    flex-basis: auto;
  }
  .kb__files {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .kb {
    padding-block: 32px 40px;
  }
  .kb__head {
    margin-bottom: 32px;
  }
  .kb__row {
    gap: 32px;
    margin-bottom: 40px;
  }
  .kb__label {
    margin-bottom: 16px;
  }
  .kb__downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* === Knowledge page — end =================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   News pages.

   Listing — Figma 889:13600: 46px under the breadcrumb bar the centred head
   (46/50 title + 13 + the 20/30 intro, 1193 wide), 60, then the home's news
   cards four across — 392 wide, 20 apart, rows 56 apart, the 1628 grid
   centred — and the Load more button.

   Article — Figma 889:13885: 43px under the crumb bar the "Back" link (the
   nav chevron turned left, Lato 12 upper-case Gray 2) 12 over the 46/50
   title (1193 wide), 40, the date (calendar 20 + Content/S Gray 3), 14, the
   lead paragraph, 54, then the picture beside the copy — the admin Paragraph
   with the picture left at 800×520 | 52 | the 808 copy, centred on it.
   ============================================================================= */
/* -- listing --------------------------------------------------------------- */
.news-list {
  padding-block: 46px 100px;
}
.news-list__head {
  max-width: 1193px;
  margin-bottom: 60px;
}
.news-list__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 20px;
  max-width: 1628px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.news-list__more {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
@media (max-width: 1279.98px) {
  .news-list {
    padding-block: 40px 64px;
  }
  .news-list__head {
    margin-bottom: 40px;
  }
  .news-list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
  }
  .news-list__more {
    margin-top: 40px;
  }
}
@media (max-width: 1023.98px) {
  .news-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .news-list {
    padding-block: 24px 40px;
  }
  .news-list__head {
    margin-bottom: 32px;
  }
  .news-list__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .news-list__more {
    margin-top: 32px;
  }
}

/* -- article --------------------------------------------------------------- */
.article {
  padding-block: 43px 77px;
}
.article__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 1193px;
  margin-bottom: 40px;
}
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #696767;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: normal;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .article__back:hover {
    color: #01a1f0;
  }
}
.article__back:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.article__back-icon {
  width: 10px;
  height: 10px;
  transform: rotate(90deg);
}
.article__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.38px;
}
@media (max-width: 1439.98px) {
  .article__title {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1279.98px) {
  .article__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }
}
@media (max-width: 767.98px) {
  .article__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.9px;
  }
}
.article__title {
  margin: 0;
  color: #000000;
}
.article__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.article__date {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #979696;
}
.article__calendar {
  width: 20px;
  height: 20px;
}
.article__lead {
  max-width: 1636px;
  margin: 0 0 40px;
  line-height: 1.3;
}
.article {
  /* the drawn picture: 800 wide at 800:520, 52 from the 808 copy */
}
.article .paragraph--article {
  gap: 52px;
}
.article .paragraph--article .paragraph__media {
  flex-basis: 800px;
  aspect-ratio: 800/520;
}
.article .paragraph--article .paragraph__info {
  flex: 0 1 808px;
}
@media (max-width: 1279.98px) {
  .article {
    padding-block: 32px 64px;
  }
  .article__head {
    margin-bottom: 32px;
  }
  .article__lead {
    margin-bottom: 24px;
  }
  .article .paragraph--article {
    gap: 40px;
  }
  .article .paragraph--article .paragraph__media {
    flex-basis: 50%;
  }
}
@media (max-width: 1023.98px) {
  .article .paragraph--article .paragraph__media,
  .article .paragraph--article .paragraph__info {
    flex-basis: auto;
  }
}
@media (max-width: 767.98px) {
  .article {
    padding-block: 24px 40px;
  }
  .article__head {
    gap: 10px;
    margin-bottom: 24px;
  }
}

/* === News pages — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Contact page — Figma 889:14170.

   43px under the breadcrumb bar the centred head (46/50 + 13 + 20/30, 1193
   wide), a hairline 50 above / 50 below, then two columns: "Get in Touch"
   (666 — the 32/50 title, 6, the copy 364 wide, 61, the details grid 575
   wide: 36px blue line icons 24 from bold labels over Lato 16/1.5 values,
   two per row, rows 50 apart, 61, the admin text block) | 123 | the form
   (841 — the 32/50 title, 49, fields two per row 65 apart, 27 between rows,
   the Comments textarea and the file field, 47, Submit). 103 to the map.

   The map — the design's "Group 973", the marker baked in — is one link to
   Google Maps, full width at the drawn 1917:686; the white "Find us" card
   (349 wide, 12px corners, the drawn shadow) sits 84px down over its left
   edge with the logo, the address and Get Directions.
   ============================================================================= */
.contact {
  padding-block: 43px 103px;
}
.contact__head {
  max-width: 1193px;
}
.contact__rule {
  height: 1px;
  margin: 50px 10px;
  border: 0;
  background-color: #dddddd;
}
.contact__row {
  display: flex;
  align-items: flex-start;
  gap: 123px;
}
.contact__info {
  display: flex;
  flex: 0 1 666px;
  flex-direction: column;
  gap: 61px;
  min-width: 0;
}
.contact {
  /* the drawn 841 — the row does not fill the container, as drawn */
}
.contact__form-col {
  display: flex;
  flex: 0 1 841px;
  flex-direction: column;
  gap: 49px;
  min-width: 0;
}
.contact__subtitle {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  margin: 0;
  color: #000000;
  letter-spacing: -1px;
}
.contact__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 364px;
}
.contact__lead {
  margin: 0;
}
.contact {
  /* -- the details grid ---------------------------------------------------- */
}
.contact__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 24px;
  max-width: 575px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact__detail {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.contact__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: #01a1f0;
}
.contact__icon--mail {
  height: 26px;
  margin-top: 4px;
}
.contact__label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  line-height: normal;
}
.contact__value {
  margin: 0;
}
.contact__link {
  color: #000000;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .contact__link:hover {
    color: #01a1f0;
  }
}
.contact__hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.contact__hours li {
  display: flex;
  flex-direction: column;
}
.contact__time {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  line-height: normal;
}
.contact__extra .contact__label {
  margin-bottom: 4px;
}
.contact {
  /* -- the form -------------------------------------------------------------- */
}
.contact__form-wrap {
  position: relative;
}
.contact {
  /* the kit's rhythm (.form > * + * = 20) at the drawn 27; Submit 47 under the last field */
}
.contact__form > * + * {
  margin-top: 27px;
}
.contact__fields {
  column-gap: 65px;
  row-gap: 27px;
}
.contact__comments .field__control {
  min-height: 140px;
}
.contact__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #d64545;
  line-height: 1.4;
}
.contact__actions {
  margin-top: 47px;
}
.contact__done {
  padding: 32px 36px;
  background-color: #f0f8ff;
  border-radius: 12px;
}
.contact__done p {
  margin: 0;
}
.contact__done p + p {
  margin-top: 8px;
}
.contact__done-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .contact__done-title {
    font-size: 17px;
    line-height: 26px;
  }
}
.contact__done-title {
  color: #000000;
}
@media (max-width: 1439.98px) {
  .contact__row {
    gap: 64px;
  }
  .contact__info {
    flex-basis: 45%;
  }
}
@media (max-width: 1279.98px) {
  .contact {
    padding-block: 32px 64px;
  }
  .contact__rule {
    margin-block: 40px;
  }
  .contact__row {
    gap: 48px;
  }
  .contact__info, .contact__form-col {
    gap: 40px;
  }
  .contact__fields {
    column-gap: 24px;
  }
}
.contact {
  /* one column: the details, then the form */
}
@media (max-width: 1023.98px) {
  .contact__row {
    flex-direction: column;
  }
  .contact__info, .contact__form-col {
    flex-basis: auto;
  }
  .contact__form-col {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .contact {
    padding-block: 24px 40px;
  }
  .contact__rule {
    margin: 32px 0;
  }
  .contact__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .contact__info, .contact__form-col {
    gap: 32px;
  }
  .contact__form > * + * {
    margin-top: 20px;
  }
  .contact__fields {
    row-gap: 20px;
  }
  .contact__actions {
    margin-top: 32px;
  }
}

/* -- the map --------------------------------------------------------------- */
.contact-map {
  position: relative;
}
.contact-map__link {
  display: block;
  aspect-ratio: 1917/686;
  overflow: hidden;
  background-color: #f6f6f6;
}
.contact-map__link > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .contact-map__link:hover > img {
    transform: scale(1.02);
  }
}
.contact-map__link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: -4px;
}
.contact-map {
  /* the card rides the container grid so its left edge lines up with the page */
}
.contact-map__overlay {
  position: absolute;
  top: 84px;
  left: 0;
  right: 0;
  pointer-events: none;
}
.contact-map__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 349px;
  padding: 48px 48px 48px 57px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  color: #000000;
  pointer-events: auto;
}
.contact-map__title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  margin: 0;
  letter-spacing: -1px;
}
.contact-map__text {
  margin: 0 0 46px;
}
.contact-map__logo {
  display: block;
  width: 203px;
  height: auto;
  margin-bottom: 10px;
}
.contact-map__address {
  margin: 0 0 10px;
}
.contact-map__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #01a1f0;
  font-weight: 700;
  line-height: normal;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .contact-map__directions:hover {
    color: #0051a1;
  }
  .contact-map__directions:hover .contact-map__arrow {
    transform: translateX(4px);
  }
}
.contact-map__directions:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.contact-map__arrow {
  width: 16px;
  height: 11px;
  transition: transform 0.25s ease;
}
@media (max-width: 1279.98px) {
  .contact-map__overlay {
    top: 40px;
  }
  .contact-map__card {
    padding: 32px 32px 32px 36px;
  }
  .contact-map__text {
    margin-bottom: 28px;
  }
}
.contact-map {
  /* the card drops under the map and the map gets some height back */
}
@media (max-width: 1023.98px) {
  .contact-map__link {
    aspect-ratio: 16/9;
  }
  .contact-map__overlay {
    position: static;
    padding-block: 24px 40px;
    pointer-events: auto;
  }
  .contact-map__card {
    width: 100%;
    max-width: 520px;
    box-shadow: none;
    border: 1px solid #dddddd;
  }
}
@media (max-width: 767.98px) {
  .contact-map__link {
    aspect-ratio: 4/3;
  }
  .contact-map__card {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-map__link > img {
    transition: none;
  }
}
/* === Contact page — end ===================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   My Account — Figma 944:7353 (schematic). 46px under the breadcrumb bar
   the centred head (1193), 40, the account sub-nav, 40, then the panels 1205
   wide and 40 apart: a #DDDDDD hairline box with 8px corners and 20/40
   padding, the Manrope SemiBold 20/30 title in the secondary blue.

   Inside: the shared form kit; the address book (two cards per row); the
   saved-card rows (brand, name, Default tag, expiry, actions — the drawn
   row); the "+ Add new …" block button (the drawn #F6F6F6 bar); the
   add-card form with the Bambora hosted fields, which get the field
   component's box so the iframes look like every other input. Plan 3a adds
   the profile-incomplete notice above the panels, the refusal line under a
   list, the link buttons' loading state and the forms' error line
   (.form__error: the answer's message).
   ============================================================================= */
.account {
  padding-block: 46px 100px;
}
.account__head {
  max-width: 1193px;
  margin-bottom: 40px;
}
.account .subnav {
  margin-bottom: 40px;
}
.account__panels {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1205px;
  margin: 0 auto;
}
.account {
  /* the revealed forms: a shaded inset under the list they belong to */
}
.account__fold {
  margin-top: 24px;
  padding: 24px 28px 28px;
  background-color: #f6f6f6;
  border-radius: 12px;
}
.account__fold-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .account__fold-title {
    font-size: 17px;
    line-height: 26px;
  }
}
.account__fold-title {
  margin: 0 0 20px;
  color: #000000;
}
.account {
  /* "+ Add new address" / "+ Add new card" — the drawn #F6F6F6 bar */
}
.account__add {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 23px 20px;
  background-color: #f6f6f6;
  border: 1px solid #dddddd;
  border-radius: 12px;
  color: #0051a1;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .account__add:hover {
    background-color: #f0f8ff;
    border-color: #0051a1;
  }
}
.account__add:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.account__add[aria-expanded=true] {
  display: none;
}
.account {
  /* the profile-incomplete prompt (a WordPress member's first visit, spec 4.4):
     the payment panel's promise as a box of its own above the panels, with the
     account section's text (CKEditor); account.js hides it once the profile
     is saved */
}
.account__notice {
  padding: 18px 24px;
  background-color: #f0f8ff;
  border-left: 3px solid #01a1f0;
  border-radius: 0 8px 8px 0;
  color: #333333;
  font-weight: 700;
}
.account {
  /* a refused Set as default / Remove, under its list */
}
.account__list-error {
  margin-top: 12px;
}
@media (max-width: 1279.98px) {
  .account {
    padding-block: 32px 64px;
  }
  .account__head,
  .account .subnav {
    margin-bottom: 32px;
  }
  .account__panels {
    gap: 28px;
  }
}
@media (max-width: 767.98px) {
  .account {
    padding-block: 24px 40px;
  }
  .account__fold {
    padding: 20px 16px;
  }
  .account__add {
    padding: 18px 16px;
  }
}

/* -- a panel ------------------------------------------------------------------- */
.panel {
  padding: 20px 40px 40px;
  border: 1px solid #dddddd;
  border-radius: 8px;
}
.panel__head {
  margin-bottom: 25px;
}
.panel__title {
  margin: 0;
  color: #0051a1;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.panel__text {
  margin: 2px 0 0;
  color: #696767;
}
.panel__label {
  margin: 0 0 20px;
  font-weight: 700;
  line-height: normal;
}
.panel__divider {
  height: 1px;
  margin: 32px 0 24px;
  background-color: #dddddd;
}
.panel {
  /* the payment panel's promise: what happens to card data */
}
.panel__security {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background-color: #f0f8ff;
  border-left: 3px solid #01a1f0;
  color: #333333;
  line-height: 1.5;
}
@media (max-width: 767.98px) {
  .panel {
    padding: 20px 16px 24px;
  }
}

/* -- shared small pieces ---------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background-color: #eeeeee;
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 0.28px;
  line-height: normal;
  white-space: nowrap;
}

.link-btn {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  color: #0051a1;
  line-height: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .link-btn:hover {
    color: #01a1f0;
  }
}
.link-btn:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.link-btn--muted {
  color: #696767;
}
@media (hover: hover) and (pointer: fine) {
  .link-btn--muted:hover {
    color: #d64545;
  }
}
.link-btn {
  /* Set as default / Remove while the request runs (FW.setLoading): the label
     gives way to a small spinner, clicks are ignored */
}
.link-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.link-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #0051a1;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.form__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  color: #0a8c4a;
  font-weight: 700;
  line-height: normal;
}

/* a refused post's message (forms.js writes the answer's `message` into the
   form's .js-form-error) and a refused row action (account.js) */
.form__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  color: #d64545;
  line-height: 1.4;
}

.field__hint {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 6px 0 0;
  color: #696767;
  line-height: 1.4;
}

/* -- the password row ----------------------------------------------------------- */
.password__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.password__label {
  font-weight: 700;
}
.password__masked {
  letter-spacing: 2px;
  color: #696767;
}

/* -- the address book ------------------------------------------------------------ */
.address-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) {
  .address-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.address-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  transition: border-color 0.25s ease;
}
.address-card.is-default {
  border-color: #01a1f0;
}
.address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.address-card__tag {
  display: none;
}
.address-card.is-default .address-card__tag {
  display: inline-flex;
}
.address-card__body {
  margin: 0;
  font-style: normal;
  line-height: 1.5;
}
.address-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
}
.address-card {
  /* the default address has nothing to set */
}
.address-card.is-default .js-set-default {
  display: none;
}

/* -- the saved cards ------------------------------------------------------------- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px;
  border: 1px solid #dddddd;
  border-radius: 6px;
}
.card-row__brand {
  width: 77px;
  height: 49px;
  flex-shrink: 0;
  object-fit: contain;
}
.card-row__name {
  flex: 1 1 auto;
}
.card-row__tag {
  display: none;
}
.card-row.is-default .card-row__tag {
  display: inline-flex;
}
.card-row__expiry {
  color: #696767;
}
.card-row__actions {
  display: flex;
  gap: 20px;
  margin-left: 21px;
}
.card-row.is-default .js-set-default {
  display: none;
}
@media (max-width: 767.98px) {
  .card-row {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .card-row__name {
    flex-basis: calc(100% - 93px);
  }
  .card-row__actions {
    width: 100%;
    margin-left: 0;
  }
}

/* -- the add-card form ----------------------------------------------------------- */
.card-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.card-form__head .account__fold-title {
  margin: 0;
}
.card-form__brands {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-form__brands > img {
  width: 64px;
  height: 41px;
  object-fit: contain;
}
.card-form__head .link-btn {
  margin-left: auto;
}
.card-form {
  /* card number | expiry + cvv, as drawn; the boxes align to the bottom of
     the row, so a label that wraps ("Expiry (MM / YY) *" at 320px) grows
     upwards and never lowers its box beside the others */
}
.card-form__card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 315px);
  gap: 20px 25px;
  align-items: end;
}
@media (max-width: 767.98px) {
  .card-form__card {
    grid-template-columns: minmax(0, 1fr);
  }
}
.card-form__small {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px 25px;
  margin: 0;
  align-items: end;
}
.card-form__subtitle {
  margin: 8px 0 0;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.card-form__billing {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-form {
  /* the two checks stack — .check is inline-flex and they would share a line while the billing block is hidden */
}
.card-form .check {
  display: flex;
  width: fit-content;
}
.card-form__hosted-error {
  display: block;
  margin-top: -8px;
}

/* the three hosted-field boxes: the input's frame, the provider's iframe inside */
.field__control--hosted {
  display: flex;
  align-items: center;
  height: 41px;
  padding: 0 12px;
}
.field__control--hosted > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.field__control--hosted.is-focus {
  border-color: #01a1f0;
}
.field__control--hosted.is-error {
  border-color: #d64545;
}
.field__control--hosted.is-complete {
  border-color: #0a8c4a;
}
.field__control--hosted {
  /* fake mode (GATEWAY_MODE=fake, the local site): js/app/cardfields.js puts a
     plain local input where the provider's iframe goes, drawn like its text */
}
.field__control--hosted > input {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
}
.field__control--hosted > input::placeholder {
  color: #c1c1c1;
  opacity: 1;
}
.field__control--hosted > input:disabled {
  cursor: not-allowed;
}
.field__control--hosted:has(> input:focus-visible) {
  outline: 2px solid #01a1f0;
  outline-offset: 1px;
}
.field__control--hosted.is-unavailable {
  background-color: #f6f6f6;
  cursor: not-allowed;
}

/* === My Account — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Shopping Cart — Figma 944:8799. 46px under the breadcrumb bar the centred
   head (46/50 + 13 + 20/30, 1193 wide), 60 below it the table on the full
   container: the #0051A1 header bar (62 high, white Lato 16), 10, then rows
   of 150 with a #DDE1EE hairline under each — the code, the 154×116 picture
   box, the description, the unit price, the stepper, the line total and the
   18×18 "x" box. Under the table, flush right: Subtotal (Work Sans Medium 20)
   26 below, the button 26 below that.

   The columns are the drawn x-positions on the 1680 container as shares of
   its width (190 / 191 / 516 / 144 / 235 / 227 / 177), re-weighted a little
   under 1280 so the prices never wrap. Below md the table turns into cards:
   picture + code / description on top, the "x" top right, then unit price /
   quantity / total as labelled lines (the header labels come back through
   data-label).

   The states the server adds (Plan 3b, no frame; cart-pickup.html and
   cart-closed.html): "(Pickup Only)" after a line's description in the
   secondary blue, the pick-up band under the table (the account notice's
   light blue with a 3px bar), each packed line's dimensions note in small
   grey, a line no longer available (muted, a red tag, its quantity as plain
   text), the Remove "x" spinning while it posts, the refusal line, and the
   ordering-closed notice in the empty state's centred panel.
   ============================================================================= */
.cart {
  padding-block: 46px 120px;
}
.cart__head {
  max-width: 1193px;
  margin-bottom: 60px;
}
.cart__form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
}
.cart__subtotal {
  display: flex;
  gap: 10px;
  margin: 0;
  color: #000000;
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}
.cart {
  /* a refused Remove, under the table */
}
.cart__error {
  align-self: stretch;
  margin: 0;
}
.cart {
  /* one pick-up-only line makes the whole order a pick-up (spec 8, 21.4) */
}
.cart__pickup {
  align-self: stretch;
  margin: 0;
  padding: 14px 20px;
  background-color: #f0f8ff;
  border-left: 3px solid #01a1f0;
  border-radius: 0 8px 8px 0;
  color: #333333;
  font-weight: 700;
}
.cart {
  /* no rows left */
}
.cart__empty {
  max-width: 705px;
  margin: 0 auto;
  padding: 24px 0 8px;
  text-align: center;
}
.cart__empty-title {
  margin: 0 0 12px;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
}
.cart__empty-text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .cart__empty-text {
    font-size: 17px;
    line-height: 26px;
  }
}
.cart__empty-text {
  margin: 0 0 28px;
  color: #696767;
}
.cart {
  /* online ordering switched off: the notice as the administrator wrote it */
}
.cart__closed-text {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .cart__closed-text {
    font-size: 17px;
    line-height: 26px;
  }
}
.cart__closed-text {
  margin: 0 0 28px;
  color: #696767;
}
@media (max-width: 767.98px) {
  .cart {
    padding-block: 32px 80px;
  }
  .cart__head {
    margin-bottom: 40px;
  }
  .cart__form {
    align-items: stretch;
  }
  .cart__subtotal {
    justify-content: space-between;
  }
  .cart__pickup {
    padding: 12px 16px;
  }
  .cart__actions, .cart__actions .btn {
    width: 100%;
  }
  .cart__empty-title {
    font-size: 24px;
  }
}

/* -- the table ------------------------------------------------------------------ */
.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* the header bar is painted once, here: a background per header cell leaves
     hairline seams where the percentage columns meet on a fraction of a pixel */
  background: linear-gradient(#0051a1, #0051a1) top/100% 62px no-repeat;
  color: #000000;
  font-size: 16px;
  line-height: 1.5;
}
.cart-table th,
.cart-table td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
}
.cart-table th {
  height: 72px;
  border-bottom: 10px solid transparent;
  color: #ffffff;
  font-weight: 400;
  white-space: nowrap;
}
.cart-table td {
  height: 150px;
  border-bottom: 1px solid #dde1ee;
}
.cart-table {
  /* the drawn column starts, as shares of the container */
}
.cart-table .cart-table__code {
  width: 11.31%;
  padding-left: clamp(16px, 2.2%, 37px);
}
.cart-table .cart-table__image {
  width: 11.37%;
}
.cart-table .cart-table__desc {
  width: 30.71%;
  padding-right: 20px;
}
.cart-table .cart-table__unit {
  width: 8.57%;
  white-space: nowrap;
}
.cart-table .cart-table__qty {
  width: 13.99%;
}
.cart-table .cart-table__total {
  width: 13.51%;
  white-space: nowrap;
}
.cart-table .cart-table__delete {
  width: 10.54%;
}
.cart-table {
  /* the QTY label sits over the stepper's middle */
}
.cart-table__qty-head {
  display: inline-block;
  width: 178px;
  max-width: 100%;
  text-align: center;
}
.cart-table__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cart-table__link:hover {
    color: #01a1f0;
  }
}
.cart-table {
  /* the picture: 154×116 as drawn, contained, never cropped */
}
.cart-table__media {
  position: relative;
  aspect-ratio: 154 / 116;
  overflow: hidden;
  background-color: #ffffff;
}
.cart-table__media > img,
.cart-table__media > picture > img,
.cart-table__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-table__media {
  display: block;
  width: 154px;
  max-width: 100%;
}
.cart-table {
  /* the drawn 18×18 "x" box, with a 40×40 hit area around it */
}
.cart-table__remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 11px;
  padding: 0;
  background-color: #f9f9f9;
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  color: #828282;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.cart-table__remove::before {
  content: "";
  position: absolute;
  inset: -11px;
}
@media (hover: hover) and (pointer: fine) {
  .cart-table__remove:hover {
    background-color: #ffffff;
    border-color: #d64545;
    color: #d64545;
  }
}
.cart-table__remove:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 3px;
}
.cart-table__remove:disabled {
  opacity: 0.4;
  cursor: default;
}
.cart-table__remove {
  /* while its request runs (FW.setLoading): a small spinner in the box */
}
.cart-table__remove.is-loading {
  pointer-events: none;
}
.cart-table__remove.is-loading .cart-table__remove-icon {
  visibility: hidden;
}
.cart-table__remove.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.cart-table__remove-icon {
  width: 8px;
  height: 8px;
}
.cart-table__row {
  transition: opacity 0.25s ease;
}
.cart-table__row.is-removing {
  opacity: 0;
}
.cart-table {
  /* "(Pickup Only)" after the description */
}
.cart-table__pickup {
  color: #0051a1;
  font-weight: 700;
  white-space: nowrap;
}
.cart-table {
  /* the packed size and weight of a piece, while the order is a pick-up */
}
.cart-table__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: block;
  margin-top: 8px;
  color: #696767;
  line-height: 1.4;
}
.cart-table {
  /* a line no longer available: muted, tagged, its quantity as plain text */
}
.cart-table__row--gone td {
  color: #696767;
}
.cart-table__row--gone .cart-table__media {
  opacity: 0.5;
}
.cart-table__gone {
  display: flex;
  width: fit-content;
  margin-top: 8px;
  background-color: #fdecec;
  color: #d64545;
  font-weight: 700;
}
.cart-table__qty-value {
  display: inline-block;
  width: 178px;
  max-width: 100%;
  text-align: center;
}
.cart-table {
  /* 1024–1279: the same columns, re-weighted so the labels and prices keep one line */
}
@media (max-width: 1279.98px) {
  .cart-table .cart-table__code {
    width: 13%;
  }
  .cart-table .cart-table__image {
    width: 11%;
  }
  .cart-table .cart-table__desc {
    width: 24%;
  }
  .cart-table .cart-table__unit {
    width: 11.5%;
  }
  .cart-table .cart-table__qty {
    width: 16%;
  }
  .cart-table .cart-table__total {
    width: 14.5%;
  }
  .cart-table .cart-table__delete {
    width: 10%;
  }
}
.cart-table {
  /* cards */
}
@media (max-width: 1023.98px) {
  .cart-table {
    display: block;
    background: none;
  }
  .cart-table thead {
    display: none;
  }
  .cart-table tbody {
    display: block;
  }
  .cart-table .cart-table__row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 40px;
    grid-template-areas: "image code  delete" "image desc  desc" "unit  unit  unit" "qty   qty   qty" "total total total";
    align-items: start;
    gap: 6px 20px;
    padding: 20px 0;
    border-bottom: 1px solid #dde1ee;
  }
  .cart-table td {
    display: block;
    height: auto;
    border: 0;
  }
  .cart-table {
    /* every column rule above is reset here, at the same specificity */
  }
  .cart-table .cart-table__code,
  .cart-table .cart-table__image,
  .cart-table .cart-table__desc,
  .cart-table .cart-table__unit,
  .cart-table .cart-table__qty,
  .cart-table .cart-table__total,
  .cart-table .cart-table__delete {
    width: auto;
    padding: 0;
    white-space: normal;
  }
  .cart-table .cart-table__image {
    grid-area: image;
  }
  .cart-table .cart-table__code {
    grid-area: code;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .cart-table .cart-table__desc {
    grid-area: desc;
  }
  .cart-table .cart-table__delete {
    grid-area: delete;
    justify-self: end;
  }
  .cart-table .cart-table__unit {
    grid-area: unit;
    margin-top: 10px;
  }
  .cart-table .cart-table__qty {
    grid-area: qty;
  }
  .cart-table .cart-table__total {
    grid-area: total;
    font-weight: 700;
  }
  .cart-table {
    /* the header labels come back as the lead-in of each priced line */
  }
  .cart-table .cart-table__unit,
  .cart-table .cart-table__qty,
  .cart-table .cart-table__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .cart-table .cart-table__unit::before,
  .cart-table .cart-table__qty::before,
  .cart-table .cart-table__total::before {
    content: attr(data-label);
    color: #696767;
    font-size: 14px;
    font-weight: 400;
  }
  .cart-table .cart-table__media {
    width: 120px;
  }
  .cart-table .cart-table__remove {
    margin-left: 0;
  }
  .cart-table .cart-table__qty-value {
    width: auto;
  }
  .cart-table .qty {
    width: 150px;
  }
}
@media (max-width: 575.98px) {
  .cart-table .cart-table__row {
    grid-template-columns: 96px minmax(0, 1fr) 40px;
  }
  .cart-table .cart-table__media {
    width: 96px;
  }
}

/* === Shopping Cart — end ==================================================== */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Quote Cart — Figma 944:10197. The cart page's shell (46 under the crumbs the
   centred head, 60, the table on the full container) with the quote columns:
   code, picture, description, the stepper, a Comment textarea per line (the
   kit's field, 583×117 as drawn) and the "x"; rows 180 high. 60 under the
   table the Request Information Form: the uppercase eyebrow in the secondary
   blue, 40, the fields 841 wide in the kit's two-column rows (65 apart; City /
   Country and Postal Code / Province as nested pairs), Comments (117) and
   Attach file with visible labels, then Submit centred 39 below. The done
   panel, which the form kit swaps in for the whole form, is the contact
   page's blue box. Column shares: 190 / 191 / 255 / 239 / 628 / 177 of 1680.

   Plan 3b, not drawn: a custom size line ("Custom size" over the product's
   code, its details as grey lines in the description cell), the line under
   the table a refused Remove is printed in, and the two small grey notes of
   the form — the homeowner's under the business select, the freight note
   under the address. A line no longer available wears the shopping cart's
   state (layout/_cart.scss: cart-table__row--gone, cart-table__gone).
   ============================================================================= */
.quote__body {
  position: relative;
}
.quote__request {
  max-width: 841px;
  margin: 60px auto 0;
}
.quote__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 40px;
  color: #0051a1;
  text-align: center;
}
.quote__fields > * + * {
  margin-top: 20px;
}
.quote__row {
  column-gap: 65px;
}
.quote__pair {
  column-gap: 32px;
}
.quote__comments textarea.field__control {
  min-height: 117px;
}
.quote {
  /* the homeowner note (js/app/quote-cart.js shows it for Homeowner) and the freight note */
}
.quote__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #696767;
  line-height: 18px;
}
.quote__fields > .quote__note {
  margin-top: 10px;
}
.quote {
  /* a custom size line: "Custom size" over the product's code, the size, material and description in grey lines */
}
.quote__custom {
  display: block;
}
.quote__sub {
  display: block;
  margin-top: 4px;
  color: #696767;
  font-size: 14px;
  line-height: 1.4;
}
.quote {
  /* a refused Remove (js/app/cart.js), under the table */
}
.quote__error {
  margin: 16px 0 0;
}
.quote__actions {
  justify-content: center;
  margin-top: 39px;
}
.quote {
  /* after a successful post */
}
.quote__done {
  max-width: 841px;
  margin: 0 auto;
  padding: 32px 36px;
  background-color: #f0f8ff;
  border-radius: 12px;
}
.quote__done p {
  margin: 0;
}
.quote__done p + p {
  margin-top: 8px;
}
.quote__done-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .quote__done-title {
    font-size: 17px;
    line-height: 26px;
  }
}
.quote__done-title {
  color: #000000;
}
@media (max-width: 1023.98px) {
  .quote__row {
    column-gap: 32px;
  }
}
@media (max-width: 767.98px) {
  .quote__request {
    margin-top: 40px;
  }
  .quote__eyebrow {
    margin-bottom: 28px;
  }
  .quote__actions {
    margin-top: 28px;
  }
  .quote__actions .btn {
    width: 100%;
  }
}

/* -- the quote columns on the shared cart table ---------------------------------- */
@media (min-width: 1024px) {
  .cart-table--quote td {
    height: 180px;
  }
  .cart-table--quote .cart-table__code {
    width: 11.31%;
  }
  .cart-table--quote .cart-table__image {
    width: 11.37%;
  }
  .cart-table--quote .cart-table__desc {
    width: 15.18%;
  }
  .cart-table--quote .cart-table__qty {
    width: 14.23%;
  }
  .cart-table--quote .cart-table__comment {
    width: 37.37%;
    padding-right: 20px;
  }
  .cart-table--quote .cart-table__delete {
    width: 10.54%;
  }
}
.cart-table--quote {
  /* 1024–1279: re-weighted like the cart, the comment gives */
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cart-table--quote .cart-table__code {
    width: 13%;
  }
  .cart-table--quote .cart-table__image {
    width: 11%;
  }
  .cart-table--quote .cart-table__desc {
    width: 14%;
  }
  .cart-table--quote .cart-table__qty {
    width: 16%;
  }
  .cart-table--quote .cart-table__comment {
    width: 36%;
  }
  .cart-table--quote .cart-table__delete {
    width: 10%;
  }
}
.cart-table--quote {
  /* the per-line comment: the kit's textarea at the drawn 583×117 */
}
.cart-table--quote .cart-table__textarea {
  display: block;
  width: 100%;
  max-width: 583px;
  min-height: 117px;
  resize: vertical;
  /* while its line is being saved (FW.setLoading, js/app/cart.js): the text greys, typing goes on */
}
.cart-table--quote .cart-table__textarea.is-loading {
  color: #696767;
  cursor: progress;
}
.cart-table--quote {
  /* cards: the comment takes a full line under the stepper, its label above */
}
@media (max-width: 1023.98px) {
  .cart-table--quote .cart-table__row {
    grid-template-areas: "image   code    delete" "image   desc    desc" "qty     qty     qty" "comment comment comment";
  }
  .cart-table--quote .cart-table__comment {
    grid-area: comment;
    width: auto;
    padding: 0;
    margin-top: 8px;
  }
  .cart-table--quote .cart-table__comment::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: #696767;
    font-size: 14px;
  }
  .cart-table--quote .cart-table__textarea {
    max-width: none;
  }
}

/* === Quote Cart — end ======================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Checkout — two steps since 2026-09-18 (Cart › Shipping › Payment), both from
   this file. Figma 944:9198 "Cart-info" draws it as one page; step 1
   (checkout-shipping.html) took the personal fields and the delivery
   addresses, step 2 (checkout.html) kept the order, the shipping methods —
   printed by the server for the address it now knows — the payment, the
   terms and the totals, and gained a recap of step 1. Added for
   the split: the steps under the head (components/_steps.scss), the recap,
   step 1's "Continue" row. The measurements below are the frame's.

   Checkout — Figma 944:9198 "Cart-info". The cart pages' shell: 46 under the
   breadcrumb bar the centred head, 60, "‹ Back to Shopping Cart" (Lato 16,
   #696767), 26, then the form — a column with 38 between its parts:

     Personal Information   the uppercase eyebrow in the secondary blue, 39,
                            four inline-label fields in a row (51 high, as
                            drawn; two per row under 1440, stacked under 768)
     the order              the shared cart table with the summary columns
                            (190 / 191 / 516 / 338 / 252 / 193 of 1680)
     a hairline             1633 of the 1677 container
     Shipping Information   a 40-padded block: eyebrow + line, 33, the
                            delivery addresses (added — the frame has none),
                            the method options two per row (734 + 20 + 734,
                            61 high, 12px corners, #F6F6F6 when chosen)
     Payment Method         the same block, 20 under its head the 872-wide
                            column: Saved Cards, the rows, "+ Add new card"
     terms | the totals (313), Submit — 381 wide, right

   The card rows, the add bar, the fold and the card form are My Account's
   (layout/_account.scss); here they only gain the radio variant.
   ============================================================================= */
.checkout {
  padding-block: 46px 120px;
  /* head, 36, the steps, 36, the back link (the frame: head, 60, back link) */
}
.checkout__head {
  max-width: 1193px;
  margin-bottom: 36px;
}
.checkout .steps {
  margin-bottom: 36px;
}
.checkout__back {
  margin: 0 0 26px;
  line-height: 1.5;
  text-align: center;
}
.checkout__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #696767;
  text-decoration: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .checkout__back-link:hover {
    color: #0051a1;
  }
}
.checkout__back-link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.checkout__back-icon {
  width: 6px;
  height: 10px;
  transform: rotate(180deg);
}
.checkout__body {
  position: relative;
}
.checkout__form {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.checkout {
  /* -- a block: eyebrow (+ line), then its content, centred ------------------- */
}
.checkout__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  min-width: 0;
  padding: 40px;
}
.checkout__block--personal {
  gap: 39px;
  padding: 0;
}
.checkout__block--payment {
  gap: 20px;
}
.checkout__block-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
.checkout__eyebrow {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  color: #0051a1;
  text-align: center;
}
.checkout__lead {
  margin: 0;
  color: #000000;
  line-height: 1.5;
}
.checkout__sub {
  margin: 0;
  padding: 0;
  color: #000000;
  font-weight: 700;
  line-height: normal;
}
.checkout__rule {
  width: calc(100% - 44px);
  height: 1px;
  margin: 0 auto;
  background-color: #dddddd;
  border: 0;
}
.checkout {
  /* -- personal information: label beside a 51px field ----------------------- */
}
.checkout__personal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 32px;
  width: 100%;
}
.checkout__personal .field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.checkout__personal .field__label {
  flex-shrink: 0;
  color: #222222;
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}
.checkout__personal .field__control {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 14px 20px;
  color: #4f4f4f;
}
.checkout__personal .field__error {
  flex-basis: 100%;
  text-align: right;
}
.checkout {
  /* -- delivery address -------------------------------------------------------- */
}
.checkout__addresses {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1488px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.checkout__addresses[hidden] {
  display: none;
}
.checkout__addresses {
  /* a rendered legend is not a flex item, so the column gap never reaches it */
}
.checkout__addresses > legend {
  margin-bottom: 14px;
}
.checkout {
  /* step 1: the saved addresses, or — "+ Use another address" — the address
     fields in their place (the payment step's cards / new card, again) */
}
.checkout__address {
  width: 100%;
  max-width: 1488px;
  min-width: 0;
}
.checkout__address .account__add {
  margin-top: 16px;
}
.checkout__address-box {
  max-width: 872px;
  margin: 0 auto;
}
.checkout__address-fields > * + * {
  margin-top: 20px;
}
.checkout {
  /* the tick and, while it is on, the name for the saved address */
}
.checkout__address-save {
  align-items: end;
  /* level with the name field's input (41), not with its label + input */
}
.checkout__address-save .check {
  width: fit-content;
  margin-bottom: 8px;
}
@media (max-width: 767.98px) {
  .checkout__address-save .check {
    margin-bottom: 0;
  }
}
.checkout__pickup {
  width: 100%;
  max-width: 1488px;
  margin: 0;
  padding: 14px 18px;
  background-color: #f0f8ff;
  border-left: 3px solid #01a1f0;
  line-height: 1.5;
}
.checkout {
  /* -- step 2: the shipping methods and, for Pickup, the note under them --------- */
}
.checkout__methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1488px;
}
.checkout__methods .ship-options {
  max-width: none;
}
.checkout {
  /* -- step 2: what was chosen on step 1 --------------------------------------- */
}
.checkout__recap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 8px;
}
.checkout {
  /* step 1 ends with its button, flush right like the drawn Submit; the server's refusal and the wait line above it */
}
.checkout__next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.checkout {
  /* "Please wait. We are getting shipping options." while step 2 and its courier rates load */
}
.checkout__wait {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #696767;
  text-align: right;
}
.checkout {
  /* the payment intro (the checkout section's text: the cards accepted, eTransfer by phone) */
}
.checkout__intro {
  margin-bottom: 28px;
  color: #696767;
}
.checkout__intro p {
  margin: 0;
}
.checkout__intro p + p {
  margin-top: 8px;
}
.checkout {
  /* the one field added to the drawn page (spec 20.6), above the totals */
}
.checkout__po {
  width: 313px;
  max-width: 100%;
}
.checkout {
  /* -- payment ------------------------------------------------------------------ */
}
.checkout__payment {
  width: 100%;
  max-width: 872px;
}
.checkout__payment .card-list,
.checkout__payment .account__add {
  margin-top: 28px;
}
.checkout__payment .card-list > li {
  display: block;
}
.checkout__card-fields > * + * {
  margin-top: 20px;
}
.checkout__security {
  margin: 24px 0 0;
}
.checkout {
  /* -- terms | totals, submit ----------------------------------------------- */
}
.checkout__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 381px;
  grid-template-areas: "terms side" "terms submit";
  gap: 48px 40px;
  margin-top: 4px;
}
.checkout__terms {
  grid-area: terms;
}
.checkout__terms-link {
  color: #0051a1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .checkout__terms-link:hover {
    color: #01a1f0;
  }
}
.checkout__terms-error {
  margin: 6px 0 0 31px;
}
.checkout__terms-error:empty {
  display: none;
}
.checkout__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 48px;
  min-width: 0;
}
.checkout__summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 313px;
  max-width: 100%;
  margin: 0;
}
.checkout__sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #000000;
}
.checkout__sum-row dt {
  font-weight: 700;
  line-height: normal;
}
.checkout__sum-row dd {
  margin: 0;
  line-height: 1.5;
  text-align: right;
}
.checkout__sum-row--total {
  margin-top: 11px;
  font-size: 26px;
}
.checkout__sum-row--total dd {
  color: #0051a1;
  font-weight: 500;
}
.checkout__submit {
  grid-area: submit;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.checkout__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 0;
  color: #d64545;
  text-align: right;
}
.checkout {
  /* after a successful post */
}
.checkout__done {
  max-width: 841px;
  margin: 0 auto;
  padding: 32px 36px;
  background-color: #f0f8ff;
  border-radius: 12px;
}
.checkout__done p {
  margin: 0;
}
.checkout__done p + p {
  margin-top: 8px;
}
.checkout__done-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .checkout__done-title {
    font-size: 17px;
    line-height: 26px;
  }
}
.checkout__done-title {
  color: #000000;
}
@media (max-width: 1439.98px) {
  .checkout__personal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .checkout__recap {
    grid-auto-flow: row;
  }
}
@media (max-width: 1023.98px) {
  .checkout__block {
    padding: 24px 0;
  }
  .checkout__block--personal {
    padding: 0;
  }
  .checkout__rule {
    width: 100%;
  }
  .checkout__bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "terms" "submit";
    row-gap: 28px;
  }
  .checkout {
    /* tablets keep the totals a compact column on the right; phones take the full width */
  }
  .checkout__side {
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
  }
  .checkout__summary, .checkout__po {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .checkout {
    padding-block: 32px 80px;
  }
  .checkout__head,
  .checkout .steps {
    margin-bottom: 28px;
  }
  .checkout__form {
    gap: 28px;
  }
  .checkout__personal {
    grid-template-columns: minmax(0, 1fr);
  }
  .checkout__personal .field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .checkout__personal .field__error {
    text-align: left;
  }
  .checkout__side {
    max-width: none;
  }
  .checkout__submit, .checkout__next {
    align-items: stretch;
  }
  .checkout__submit .btn, .checkout__next .btn {
    width: 100%;
  }
  .checkout__wait, .checkout__error {
    text-align: left;
  }
  .checkout__sum-row--total {
    font-size: 22px;
  }
  .checkout__done {
    padding: 24px 20px;
  }
}

/* -- the order: the shared cart table with the summary columns -------------------- */
@media (min-width: 1024px) {
  .cart-table--summary .cart-table__code {
    width: 11.31%;
  }
  .cart-table--summary .cart-table__image {
    width: 11.37%;
  }
  .cart-table--summary .cart-table__desc {
    width: 30.71%;
  }
  .cart-table--summary .cart-table__unit {
    width: 20.12%;
  }
  .cart-table--summary .cart-table__qty {
    width: 15%;
  }
  .cart-table--summary .cart-table__total {
    width: 11.49%;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cart-table--summary .cart-table__code {
    width: 13%;
  }
  .cart-table--summary .cart-table__image {
    width: 11%;
  }
  .cart-table--summary .cart-table__desc {
    width: 27%;
  }
  .cart-table--summary .cart-table__unit {
    width: 17%;
  }
  .cart-table--summary .cart-table__qty {
    width: 13%;
  }
  .cart-table--summary .cart-table__total {
    width: 19%;
  }
}

/* -- one column of the recap: title, lines, "Change" -------------------------------- */
.recap-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 24px 32px;
}
.recap-item + .recap-item {
  border-left: 1px solid #dddddd;
}
.recap-item__title {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  margin: 0;
  color: #696767;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}
.recap-item__body {
  margin: 0;
  color: #000000;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.recap-item__change {
  margin-top: auto;
}
@media (max-width: 767.98px) {
  .recap-item {
    padding: 20px;
  }
  .recap-item + .recap-item {
    border-top: 1px solid #dddddd;
    border-left: 0;
  }
}

/* the quantity sits under the middle of its "QTY" label */
.cart-table__num {
  display: inline-block;
  min-width: 44px;
  text-align: center;
}
@media (max-width: 1023.98px) {
  .cart-table__num {
    min-width: 0;
  }
}

/* -- a selectable address (the account's card, with a radio) -------------------- */
.address-card--select {
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.address-card--select .address-card__pick {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.address-card--select .address-card__tag {
  display: inline-flex;
}
.address-card--select .address-card__body {
  display: block;
}
.address-card--select:has(:checked) {
  background-color: #f6f6f6;
  border-color: #01a1f0;
}

/* -- a selectable saved card ------------------------------------------------------- */
.card-row--select {
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.card-row--select .check__box {
  margin-top: 0;
}
.card-row--select:has(:checked) {
  background-color: #f6f6f6;
  border-color: #01a1f0;
}

/* -- the shipping methods ----------------------------------------------------------- */
.ship-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1488px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (max-width: 1023.98px) {
  .ship-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a method: radio, the carrier's logo in a fixed column, the service name taking the free width with the time under
   it, the price on the right; on phones the logo and the price share the first row and the name and the time take the
   full width below (server names are long: "UPS Express Saver") */
.ship-option {
  display: grid;
  grid-template-columns: 20px 114px minmax(0, 1fr) auto;
  grid-template-areas: "radio logo name price" "radio logo eta  price";
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
  min-height: 61px;
  padding: 10px 15px;
  border: 1px solid #c1c1c1;
  border-radius: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  /* no logo (Pickup, or a carrier the design has no logo for): the name follows the radio */
}
.ship-option--plain {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "radio name price" "radio eta  price";
}
.ship-option .check__box {
  grid-area: radio;
  margin-top: 0;
}
.ship-option__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  height: 39px;
  /* the width attribute sizes each logo as drawn (72 / 110 / 33); the column only caps it */
}
.ship-option__logo > img {
  max-width: 114px;
  height: auto;
  max-height: 39px;
}
.ship-option__name {
  grid-area: name;
  min-width: 0;
  color: #000000;
  overflow-wrap: anywhere;
}
.ship-option__eta {
  grid-area: eta;
  min-width: 0;
  color: #979696;
  font-size: 14px;
}
.ship-option__price {
  grid-area: price;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .ship-option:hover {
    border-color: #979696;
  }
}
.ship-option:has(:checked) {
  background-color: #f6f6f6;
}
@media (max-width: 575.98px) {
  .ship-option {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "radio logo price" "radio name name" "radio eta  eta";
    column-gap: 12px;
  }
  .ship-option.ship-option--plain {
    grid-template-areas: "radio name price" "radio eta  eta";
  }
  .ship-option {
    /* the logo gives way to the price at 280 and narrower */
  }
  .ship-option .ship-option__logo {
    min-width: 0;
    height: 32px;
  }
  .ship-option .ship-option__logo > img {
    max-width: min(96px, 100%);
    max-height: 32px;
  }
}

/* -- 3-D Secure: the card issuer's check, printed as the gateway sends it (the local fake: two buttons) -- */
.checkout-3ds {
  max-width: 841px;
  margin-inline: auto;
}
.checkout-3ds__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 32px 36px;
  background-color: #f0f8ff;
  border-radius: 12px;
}
.checkout-3ds__form p {
  flex-basis: 100%;
  margin: 0;
}
@media (max-width: 767.98px) {
  .checkout-3ds__form {
    padding: 24px 20px;
  }
}
.checkout-3ds iframe {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 0;
}

/* === Checkout — end ========================================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   My Account — Orders (Figma 944:7856) and one order (Figma 944:8316); the
   Custom Orders pages reuse both layouts. Under the account head and the
   sub-navigation, a 1240 column:

     the list    the shared cart table with the order columns: the #0051A1
                 bar 62 high, 2 under it rows of 79 with a #DDD hairline; the
                 columns at the drawn x (26 / 163 / 270 / 578 / 699 / 860 /
                 986 / 1130 of 1240); "View details" and "Re-order" are the
                 small hairline buttons (.btn--xs). Below md: cards.
     one order   "‹ Back to Orders", 8, the number (Manrope SemiBold 20/30,
                 secondary blue) with the outlined Reorder beside it, 8, the
                 label / value lines (values at 162), 40, "Order details:",
                 20, the items table (rows of 137, the
                 total in bold), 35, the totals flush right.
   ============================================================================= */
.orders {
  max-width: 1240px;
  margin: 0 auto;
}
.orders__error {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  margin: 12px 0 0;
  color: #d64545;
}

/* -- "‹ Back to …" (the checkout draws the same link, centred) ------------------ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #696767;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .back-link:hover {
    color: #0051a1;
  }
}
.back-link:focus-visible {
  outline: 2px solid #01a1f0;
  outline-offset: 2px;
}
.back-link__icon {
  width: 6px;
  height: 10px;
  transform: rotate(180deg);
}

/* -- the orders list on the shared cart table -------------------------------------- */
.cart-table--orders th {
  height: 64px;
  border-bottom-width: 2px;
}
.cart-table--orders td {
  border-bottom-color: #dddddd;
}
.cart-table--orders td.cart-table__desc {
  color: #333333;
}
@media (min-width: 1024px) {
  .cart-table--orders td {
    height: 79px;
  }
  .cart-table--orders .cart-table__number {
    width: 13.15%;
    padding-left: clamp(14px, 2.1%, 26px);
  }
  .cart-table--orders .cart-table__date {
    width: 8.63%;
    white-space: nowrap;
  }
  .cart-table--orders .cart-table__desc {
    width: 24.84%;
    padding-right: 16px;
  }
  .cart-table--orders .cart-table__quantity {
    width: 9.76%;
  }
  .cart-table--orders .cart-table__status {
    width: 12.98%;
  }
  .cart-table--orders .cart-table__total {
    width: 10.16%;
  }
  .cart-table--orders .cart-table__details {
    width: 11.61%;
  }
  .cart-table--orders .cart-table__action {
    width: 8.87%;
  }
  .cart-table--orders {
    /* no Re-order column (Custom Orders): the description takes its share */
  }
  .cart-table--orders.cart-table--orders-plain .cart-table__desc {
    width: 33.71%;
  }
}
.cart-table--orders {
  /* 1024–1279: the date and the two buttons need their room, the description gives */
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cart-table--orders .cart-table__number {
    width: 15.5%;
  }
  .cart-table--orders .cart-table__date {
    width: 10.5%;
  }
  .cart-table--orders .cart-table__desc {
    width: 15%;
  }
  .cart-table--orders .cart-table__quantity {
    width: 8.5%;
  }
  .cart-table--orders .cart-table__status {
    width: 11%;
  }
  .cart-table--orders .cart-table__total {
    width: 13%;
  }
  .cart-table--orders .cart-table__details {
    width: 14%;
  }
  .cart-table--orders .cart-table__action {
    width: 12.5%;
  }
  .cart-table--orders.cart-table--orders-plain .cart-table__desc {
    width: 27.5%;
  }
}
.cart-table--orders {
  /* cards: number and date on top, the description, the labelled lines, the buttons */
}
@media (max-width: 1023.98px) {
  .cart-table--orders .cart-table__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "number   date" "desc     desc" "quantity quantity" "status   status" "total    total" "details  action";
    gap: 8px 16px;
  }
  .cart-table--orders .cart-table__number {
    grid-area: number;
    font-weight: 700;
  }
  .cart-table--orders .cart-table__date {
    grid-area: date;
    color: #696767;
    text-align: right;
  }
  .cart-table--orders .cart-table__quantity {
    grid-area: quantity;
  }
  .cart-table--orders .cart-table__status {
    grid-area: status;
  }
  .cart-table--orders .cart-table__details {
    grid-area: details;
    margin-top: 8px;
  }
  .cart-table--orders .cart-table__action {
    grid-area: action;
    margin-top: 8px;
    text-align: right;
  }
  .cart-table--orders {
    /* the two buttons stay as tall as each other when one label wraps (View details at 320) */
  }
  .cart-table--orders .cart-table__details,
  .cart-table--orders .cart-table__action {
    display: flex;
    align-self: stretch;
  }
  .cart-table--orders .cart-table__action {
    justify-content: flex-end;
  }
  .cart-table--orders .cart-table__quantity,
  .cart-table--orders .cart-table__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .cart-table--orders .cart-table__quantity::before,
  .cart-table--orders .cart-table__status::before {
    content: attr(data-label);
    color: #696767;
    font-size: 14px;
  }
  .cart-table--orders.cart-table--orders-plain .cart-table__details {
    grid-column: 1/-1;
  }
}
@media (max-width: 575.98px) {
  .cart-table--orders .cart-table__details .btn,
  .cart-table--orders .cart-table__action .btn {
    width: 100%;
  }
}

/* -- one order --------------------------------------------------------------------------- */
.order__back {
  margin: 0 0 8px;
}
.order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.order__number {
  margin: 0;
  color: #0051a1;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.order__number > span {
  margin-left: 6px;
  white-space: nowrap;
}
.order {
  /* the thanks band after placing (?placed=1): first, above the order */
}
.order__placed {
  margin: 0 0 24px;
}
.order__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  color: #000000;
}
.order__info-row {
  display: grid;
  grid-template-columns: 162px minmax(0, 1fr);
}
.order__info-row dt {
  font-weight: 700;
  line-height: 1.5;
}
.order__info-row dd {
  margin: 0;
  line-height: 1.5;
}
.order__note-link {
  color: #0051a1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .order__note-link:hover {
    color: #01a1f0;
  }
}
.order__note {
  max-width: 900px;
  margin: 24px 0 0;
  padding: 14px 18px;
  background-color: #f0f8ff;
  border-left: 3px solid #01a1f0;
  line-height: 1.5;
}
.order__details-title {
  margin: 40px 0 20px;
  color: #000000;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.order__summary {
  margin: 35px 0 0 auto;
}
.order__summary .checkout__sum-row:last-child {
  margin-top: 0;
}
@media (max-width: 767.98px) {
  .order__head {
    flex-direction: column;
    align-items: stretch;
  }
  .order__info-row {
    grid-template-columns: 130px minmax(0, 1fr);
  }
  .order__details-title {
    margin-top: 32px;
  }
  .order__summary {
    width: 100%;
  }
}

/* the order's items: the summary table on the 1240 column, rows of 137, a bold total */
.cart-table--order td {
  border-bottom-color: #dddddd;
}
.cart-table--order td.cart-table__total {
  font-weight: 700;
}
@media (min-width: 1024px) {
  .cart-table--order td {
    height: 137px;
  }
  .cart-table--order .cart-table__code {
    width: 15.27%;
    padding-left: clamp(16px, 3%, 37px);
  }
  .cart-table--order .cart-table__image {
    width: 15.35%;
  }
  .cart-table--order .cart-table__desc {
    width: 33.6%;
  }
  .cart-table--order .cart-table__unit {
    width: 13.5%;
  }
  .cart-table--order .cart-table__qty {
    width: 9.73%;
  }
  .cart-table--order .cart-table__total {
    width: 12.55%;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cart-table--order .cart-table__code {
    width: 15%;
  }
  .cart-table--order .cart-table__image {
    width: 13%;
  }
  .cart-table--order .cart-table__desc {
    width: 29%;
  }
  .cart-table--order .cart-table__unit {
    width: 15%;
  }
  .cart-table--order .cart-table__qty {
    width: 10%;
  }
  .cart-table--order .cart-table__total {
    width: 18%;
  }
}

/* === My Account — Orders — end ============================================= */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Newsletter band (Figma 866:5570) and footer (Figma 854:2244).
   ============================================================================= */
.newsletter {
  padding-block: 43px;
  background-color: #01a1f0;
  color: #ffffff;
}
.newsletter__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.newsletter__text {
  flex: 1 1 auto;
  max-width: 660px;
}
.newsletter__title {
  margin: 0;
  color: #ffffff;
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0;
}
.newsletter__lead {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.newsletter__form {
  position: relative;
  display: flex;
  gap: 14px;
  flex: 0 0 auto;
  width: 800px;
  max-width: 50%;
  margin-left: auto;
}
.newsletter {
  /* the thank-you takes the form's place */
}
.newsletter__done {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .newsletter__done {
    font-size: 17px;
    line-height: 26px;
  }
}
.newsletter__done {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 800px;
  max-width: 50%;
  min-height: 56px;
  margin: 0 0 0 auto;
  color: #ffffff;
}
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  background-color: #ffffff;
  border: 0;
  border-radius: 12px;
  color: #333333;
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
}
.newsletter__input::placeholder {
  color: #c1c1c1;
  opacity: 1;
}
.newsletter__input:focus {
  outline: 2px solid #0051a1;
  outline-offset: 2px;
}
.newsletter__input.is-invalid {
  box-shadow: inset 0 0 0 2px #d64545;
}
.newsletter {
  /* just-validate's message and the server's hang under the row, out of the
     flow: inside the row they squeezed the input, and the band must not jump.
     Stacked on a phone they take their place in the column. */
}
.newsletter .field__error, .newsletter__error {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 8px 0 0;
  color: #ffffff;
}
.newsletter__btn {
  flex-shrink: 0;
}
@media (max-width: 1279.98px) {
  .newsletter__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .newsletter__form, .newsletter__done {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}
@media (max-width: 767.98px) {
  .newsletter {
    padding-block: 32px;
  }
  .newsletter__title {
    font-size: 28px;
    line-height: 36px;
  }
  .newsletter__form {
    flex-direction: column;
  }
  .newsletter__btn {
    width: 100%;
  }
  .newsletter {
    /* just-validate appends its message at the end of the form; stacked, it
       belongs under the input, above the button */
  }
  .newsletter .field__error, .newsletter__error {
    position: static;
    margin: -4px 0 0;
  }
  .newsletter .field__error {
    order: 1;
  }
  .newsletter__btn {
    order: 2;
  }
  .newsletter__error {
    order: 3;
  }
  .newsletter__done {
    min-height: 0;
  }
}

.footer {
  background-color: #10233c;
  color: #ffffff;
  /* Column proportions from the 1680px design (brand 400, then 193 / 203 /
     203 / 230) so the grid scales instead of squeezing the brand column. */
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 400fr) 193fr 203fr 203fr 230fr;
  column-gap: 109px;
  padding: 60px 0 44px;
}
.footer {
  /* -- brand column ------------------------------------------------------- */
}
.footer__logo {
  display: block;
  width: 257px;
  height: 97px;
  margin-bottom: 96px;
}
.footer__logo img {
  width: 100%;
  height: 100%;
}
.footer__desc {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  max-width: 268px;
  margin: 0 0 30px;
  line-height: 1.3;
}
.footer__rule {
  display: block;
  width: 75px;
  height: 3px;
  margin-bottom: 28px;
  background-color: #01a1f0;
}
.footer__social {
  display: flex;
  gap: 11px;
}
.footer__social a {
  display: block;
  width: 28px;
  height: 28px;
  color: #979696;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__social a .icon {
  width: 100%;
  height: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover {
    color: #01a1f0;
    transform: translateY(-3px);
  }
}
.footer__social a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.footer {
  /* -- link columns ------------------------------------------------------- */
}
.footer__col-title {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 21px;
  color: #01a1f0;
}
.footer__col--contact .footer__col-title {
  margin-bottom: 30px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__links a {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  display: inline-block;
  color: #ffffff;
  line-height: 1.3;
  transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover {
    color: #01a1f0;
    transform: translateX(3px);
  }
}
.footer__links a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.footer__contact-row {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: normal;
}
.footer__contact-row .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #01a1f0;
}
.footer__contact-row a {
  color: #ffffff;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__contact-row a:hover {
    color: #01a1f0;
  }
}
.footer__phones {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 4px;
}
.footer {
  /* -- bottom row --------------------------------------------------------- */
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer {
  /* 14px, between Content/XS and Content/S — drawn for this line only. */
}
.footer__copy {
  margin: 0;
  color: #c1c1c1;
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.footer__credit {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #c1c1c1;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__credit:hover {
    color: #ffffff;
  }
}
.footer {
  /* -- responsive --------------------------------------------------------- */
}
@media (max-width: 1439.98px) {
  .footer__top {
    column-gap: 48px;
  }
  .footer__logo {
    margin-bottom: 48px;
  }
}
@media (max-width: 1279.98px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
    padding-top: 48px;
  }
  .footer__brand {
    grid-column: 1/-1;
  }
  .footer__logo {
    margin-bottom: 28px;
  }
}
@media (max-width: 767.98px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-top: 40px;
  }
  .footer__logo {
    width: 200px;
    height: 75px;
  }
  .footer__col-title {
    margin-bottom: 14px;
  }
  .footer__col--contact .footer__col-title {
    margin-bottom: 18px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* === Footer — end =========================================================== */
/* -- pages ------------------------------------------------------------------ */
/* =============================================================================
   Reset — modern, minimal. Anything opinionated about how text looks belongs in
   base/_typography.scss, not here.
   ============================================================================= */
/* =============================================================================
   Styleguide / UI kit page.
   Reference material only — none of this ships on a real page, so it is kept
   in one file and can be deleted wholesale at the end of the project.
   ============================================================================= */
.sg {
  padding-block: 60px 100px;
  background-color: #f6f6f6;
}
.sg__head {
  max-width: 760px;
  margin-bottom: 64px;
}
.sg__kicker {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #01a1f0;
}
.sg__lead {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .sg__lead {
    font-size: 17px;
    line-height: 26px;
  }
}
.sg__lead {
  margin-top: 16px;
  color: #696767;
}
.sg__block {
  padding: 40px;
  margin-bottom: 32px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
}
@media (max-width: 767.98px) {
  .sg__block {
    padding: 24px 20px;
  }
}
.sg__title {
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 2px solid #01a1f0;
}
.sg__sub {
  margin: 32px 0 16px;
  color: #696767;
  font-size: 16px;
  line-height: 1.3;
}
.sg__sub:first-of-type {
  margin-top: 0;
}
.sg__sub code {
  margin-left: 8px;
}
.sg__note {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  max-width: 760px;
  margin-bottom: 24px;
  color: #696767;
}
.sg__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.sg__row--dark {
  padding: 20px;
  margin-top: 16px;
  background-color: #10233c;
  border-radius: 8px;
}
.sg__form {
  max-width: 900px;
}
.sg__rte {
  max-width: 760px;
}
.sg code {
  padding: 2px 6px;
  background-color: #f0f8ff;
  border-radius: 4px;
  color: #0051a1;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.sg {
  /* -- colours -------------------------------------------------------------- */
}
.sg__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}
.sg {
  /* -- typography ----------------------------------------------------------- */
}
.sg__type {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sg {
  /* -- section heads -------------------------------------------------------- */
}
.sg__heads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 1023.98px) {
  .sg__heads {
    grid-template-columns: 1fr;
  }
}
.sg {
  /* -- icons ---------------------------------------------------------------- */
}
.sg__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.sg {
  /* -- image boxes ---------------------------------------------------------- */
}
.sg__boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-swatch__chip {
  height: 64px;
  margin-bottom: 8px;
  border: 1px solid #dddddd;
  border-radius: 5px;
}
.sg-swatch b {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #333333;
}
.sg-swatch code {
  align-self: flex-start;
}

.sg-type {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dddddd;
}
.sg-type > code {
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .sg-type {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.sg-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #0051a1;
}

.sg-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-box .img-box {
  border: 1px solid #dddddd;
}

/* account menu demos: the panel inline, one list forced per copy */
.sg .menu--static {
  position: static;
  display: inline-block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sg .menu--show-out .menu__list--out,
.sg .menu--show-in .menu__list--in {
  display: flex;
}

.sg .menu--show-out .menu__list--in,
.sg .menu--show-in .menu__list--out {
  display: none;
}

/* text-style demos — the only place these one-off classes exist */
.sg-t-h-s {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
}

.sg-t-l {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: 767.98px) {
  .sg-t-l {
    font-size: 17px;
    line-height: 26px;
  }
}

.sg-t-l-em {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
}

.sg-t-body {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

.sg-t-body-em {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.sg-t-s {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
}

.sg-t-s-em {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.sg-t-xs {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.sg-t-xs-em {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

.sg-t-upper {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sg-t-upper-em {
  font-family: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
}

/* the product thumb demo: two cards at the drawn 336px */
.sg__boxes--thumbs > .product-thumb {
  width: 336px;
  max-width: 100%;
}

/* === Styleguide — end ======================================================= */
/* === main.scss — end ======================================================== */