/* ==========================================================================
   Section styles ported verbatim from the approved static build
   (new_html/assets/css/style.css). The static build is the visual source of
   truth; keep the two in step.

   Excluded here because they are already implemented against WordPress markup
   or belong to a later phase: 1 fonts, 6 buttons, 8 utility bar, 9 header, 10 hero, 19 footer, 25 agency credit, 31/32/35/36 form controls (Phase 6).

   `.sb-ref` marks a ported section so the reference margins — not WordPress's
   24px blockGap — own its vertical rhythm. The selector is deliberately kept at
   the same specificity as core's `:root :where(.is-layout-flow) > *` and placed
   before the ported rules: later-but-equal beats core, and the ported rules that
   follow still beat this. A stronger selector here would erase them.

   Sections own their padding, so consecutive sections butt up with no gap —
   exactly as they do in the static build.
   ========================================================================== */

.sb-ref:where(.is-layout-flow) > *,
.sb-ref:where(.is-layout-constrained) > *,
.sb-ref :where(.is-layout-flow) > *,
.sb-ref :where(.is-layout-constrained) > *,
.wp-block-post-content > * {
	margin-block-start: 0;
}

/* Core's blockGap rule also sets `margin-block-end: 0` at (0,1,0), which defeats
   the reference's base `p { margin: 0 0 1em }` at (0,0,1) — every paragraph lost
   its bottom margin. Restored only for paragraphs with no class of their own: a
   classed paragraph is governed by its component rule, and several of them stand
   in for a reference <span> that never had a paragraph margin at all. */
:root :where(.sb-ref p:not([class])) {
	margin-block-end: 1em;
}

:root :where(.sb-ref p:not([class]):last-child) {
	margin-block-end: 0;
}

/* ---------- 2. Tokens (§4.2, §5.2, §6) ----------------------------------- */

:root {
  /* Brand */
  --sb-black: #000000;
  --sb-ink: #0a0c10;
  --sb-navy: #13254c;
  --sb-navy-deep: #0c1830;
  --sb-navy-lt: #233a6e;
  --sb-red: #ce372b;
  --sb-red-deep: #a62a20;
  --sb-red-lt: #e4574a;
  --sb-grey: #adb1b7;
  --sb-steel: #5a6472;
  --sb-white: #ffffff;
  --sb-bone: #f5f5f5;
  --sb-bone-2: #e9eaec;
  --sb-line: #dcdde0;

  /* Semantic — light surfaces */
  --sb-bg: var(--sb-bone);
  --sb-surface: var(--sb-white);
  --sb-text: #1a1e26;
  --sb-text-muted: #3f4854;
  --sb-text-subtle: var(--sb-steel);
  --sb-link: var(--sb-red-deep);
  --sb-link-hover: var(--sb-red);
  --sb-border: var(--sb-line);

  /* Semantic — dark surfaces */
  --sb-bg-dark: var(--sb-ink);
  --sb-bg-dark-alt: var(--sb-navy);
  --sb-text-on-dark: var(--sb-white);
  --sb-muted-on-dark: var(--sb-grey);
  --sb-link-on-dark: var(--sb-red-lt);
  --sb-border-dark: rgba(255, 255, 255, 0.12);

  /* Action */
  --sb-action: var(--sb-red);
  --sb-action-hover: var(--sb-red-deep);
  --sb-focus: var(--sb-red);

  /* Type */
  --ff-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.4rem, 6vw, 4.5rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.3rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-h4: 1rem;
  --fs-eyebrow: 1rem;
  --fs-lede: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-label: 1rem;
  --fs-btn: 1rem;

  /* Layout */
  --maxw: 1440px;
  --maxw-wide: 1680px;
  --maxw-narrow: 820px;
  --gutter: clamp(20px, 4vw, 32px);

  --space-section: clamp(56px, 8vw, 112px);
  --space-section-tight: clamp(40px, 5vw, 64px);
  --space-block: clamp(28px, 4vw, 48px);
  --space-stack: 24px;

  /* Radii / borders / elevation */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-plate: 18px;
  --border: 1px solid var(--sb-line);
  --shadow-sm: 0 1px 2px rgba(10, 12, 16, 0.08), 0 2px 8px rgba(10, 12, 16, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 12, 16, 0.1), 0 14px 34px rgba(10, 12, 16, 0.1);
  --shadow-lg: 0 10px 28px rgba(10, 12, 16, 0.16), 0 28px 64px rgba(10, 12, 16, 0.18);

  /* Chrome heights */
  --h-utility: 34px;
  --h-header: 88px;

  /* Motion (§13) */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- 3. Reset / base --------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 16px);
}

body {
  margin: 0;
  background: var(--sb-bg);
  color: var(--sb-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Buttons are excluded the way WordPress excludes them from its own link element
   styles. The static build relied on `.btn:hover` coming later in the file to
   restore the label colour; here `a:hover` (0,1,1) outranks core's button rule
   (0,1,0), so every filled red button turned red-on-red on hover. */
a:not(.wp-element-button) {
  color: var(--sb-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:not(.wp-element-button):hover {
  color: var(--sb-link-hover);
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sb-navy);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h4,
.t-h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

p,
li {
  font-size: var(--fs-body); /* 18px floor for paragraphs and list items */
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--sb-focus);
  outline-offset: 2px;
}

.sb-on-dark :focus-visible,
.sb-on-red :focus-visible {
  outline-color: var(--sb-white);
}

::selection {
  background: var(--sb-red);
  color: #fff;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 999;
  background: var(--sb-red);
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  transition: top 160ms var(--ease-out);
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

/* ---------- 4. Layout helpers (§6.1) ------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide {
  max-width: var(--maxw-wide);
}

.wrap--narrow {
  max-width: var(--maxw-narrow);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--tight {
  padding-block: var(--space-section-tight);
}

.section--white {
  background: var(--sb-surface);
}

.section--bone2 {
  background: var(--sb-bone-2);
}

.section--dark {
  background: var(--sb-bg-dark);
  color: var(--sb-text-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .t-h4 {
  color: var(--sb-text-on-dark);
}

/* px, not ch — `ch` on a div resolves against the body font, not the heading,
   which collapsed these heads to ~390px and forced three-line H2s. */
.section__head {
  margin-bottom: var(--space-block);
  max-width: 760px;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--sb-text-muted);
  max-width: 58ch;
  margin-top: 18px;
}

.section--dark .section__lede {
  color: var(--sb-muted-on-dark);
}

/* Blueprint grid — faint machinist graph paper on light bands */
.section--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(19, 37, 76, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19, 37, 76, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.section--grid > .wrap {
  position: relative;
}

/* Film grain for dark surfaces — keeps large ink fields from banding */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 5. Motifs (§7) --------------------------------------------- */

/* 7.1 nameplate */
.sb-plate {
  border-radius: var(--radius-plate);
  background: var(--sb-ink);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14),
    inset 0 0 0 6px var(--sb-ink), var(--shadow-md);
}

/* 7.4 flag stripe rule */
.flag-rule {
  height: 4px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    var(--sb-navy) 0 40%,
    var(--sb-red) 40% 60%,
    var(--sb-navy) 60% 100%
  );
}

.flag-rule--short {
  width: 88px;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--sb-red) 0 46%,
    var(--sb-navy) 46% 100%
  );
}

.section--dark .flag-rule--short,
.hero .flag-rule--short {
  background: linear-gradient(
    to right,
    var(--sb-red) 0 46%,
    rgba(255, 255, 255, 0.34) 46% 100%
  );
}

/* 7.5 hazard band — rush messaging only */
.sb-hazard {
  height: 7px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--sb-red) 0 14px,
    var(--sb-black) 14px 28px
  );
}

/* 7.3 blade-edge divider — bevel gradient, full bleed */
.blade-edge {
  height: 12px;
  background: linear-gradient(
    to bottom,
    #b9bec6 0,
    #9298a1 34%,
    #5d646e 58%,
    #262b33 84%,
    var(--sb-ink) 100%
  );
  position: relative;
  z-index: 5;
}

/* 7.3 blade silhouette watermark */
.blade-watermark {
  position: absolute;
  pointer-events: none;
  color: #fff;
  opacity: 0.06;
  width: min(760px, 78%);
  height: auto;
}

/* Eyebrow (§5.2) with chevron ornament (7.2) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-red-deep);
  margin: 0 0 14px;
}

.eyebrow svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--sb-red);
}

.section--dark .eyebrow,
.sb-on-dark .eyebrow,
.hero .eyebrow {
  color: var(--sb-red-lt);
}

.section--dark .eyebrow svg,
.sb-on-dark .eyebrow svg,
.hero .eyebrow svg {
  color: var(--sb-red-lt);
}

.eyebrow--center {
  justify-content: center;
}

/* Machinist corner brackets — reference marks around product imagery */
.brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brackets span {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--sb-red-lt);
  opacity: 0.5;
}

.brackets span:nth-child(1) {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.brackets span:nth-child(2) {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.brackets span:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.brackets span:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

/* ---------- 7. Badge / pill (§8.2) ------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border-left: 4px solid var(--sb-steel);
  background: rgba(90, 100, 114, 0.1);
  font-family: var(--ff-display);
  font-size: 0.75rem; /* exception to the 16px floor — hero badges kept compact */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pill--rush {
  border-left-color: var(--sb-red);
  background: rgba(206, 55, 43, 0.1);
  color: var(--sb-red-deep);
}

.pill--usa {
  border-left-color: var(--sb-navy);
  background: rgba(19, 37, 76, 0.08);
  color: var(--sb-navy);
}

/* on dark grounds, red text must step up to red-lt (§4.3 rule 1) */
.sb-on-dark .pill,
.hero .pill {
  color: var(--sb-white);
  background: rgba(255, 255, 255, 0.07);
}

.sb-on-dark .pill--rush,
.hero .pill--rush {
  border-left-color: var(--sb-red-lt);
  background: rgba(228, 87, 74, 0.14);
  color: var(--sb-red-lt);
}

.sb-on-dark .pill--usa,
.hero .pill--usa {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.pill svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.page-head .pill--rush {
  color: var(--sb-white);
  border-left-color: var(--sb-red-lt);
  background: rgba(228, 87, 74, 0.16);
}

.page-head .pill--rush svg {
  color: var(--sb-red-lt);
}

.page-head .pill--usa {
  color: var(--sb-white);
  border-left-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- 11. Spec strip (§8.5) -------------------------------------- */

.stats {
  background: var(--sb-navy);
  border-top: 3px solid var(--sb-red);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.stats__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stats__item {
  padding: clamp(28px, 4vw, 44px) clamp(14px, 2.4vw, 30px);
  text-align: center;
  position: relative;
}

.stats__item + .stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.stats__num {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.stats__num small {
  font-size: 0.44em;
  letter-spacing: 0.04em;
  margin-left: 0.16em;
}

.stats__label {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-grey);
}

/* ---------- 11b. Capability head + specimen plate ---------------------- */

.cap__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: var(--space-block);
}

.specimen {
  margin: 0;
}

.specimen__plate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  background: var(--sb-ink);
  box-shadow: var(--shadow-md);
}

/* picture must be sized too, or the img's height:100% resolves against auto */
.specimen__plate picture,
.specimen__plate img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
}

.specimen__plate img {
  object-fit: cover;
  object-position: 48% 58%;
  position: relative;
  z-index: 1;
}

.specimen__plate .brackets {
  inset: 16px;
  z-index: 3;
}

.specimen__plate .brackets span {
  width: 24px;
  height: 24px;
}

.specimen__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.specimen__legend span {
  position: relative;
  padding-top: 12px;
  font-family: var(--ff-display);
  font-size: 0.625rem; /* exception to the 16px floor — image legend */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-steel);
  text-align: center;
  border-top: 1px solid var(--sb-line);
}

.specimen__legend span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 2px;
  height: 7px;
  background: var(--sb-red);
  transform: translateX(-50%);
}

.cap__annotation {
  position: relative;
  max-width: 52ch;
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sb-border);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sb-text-subtle);
}

.cap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.cap__annotation span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 42px;
  height: 3px;
  background: var(--sb-red);
}

/* ---------- 12. Cards (§8.3) ------------------------------------------- */

.cards {
  list-style: none;
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-top: 4px solid var(--sb-navy);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    border-top-color 180ms var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--sb-red);
}

.card__icon {
  width: 132px;
  display: grid;
  place-items: start;
  margin-bottom: 24px;
  color: var(--sb-navy);
}

.card__icon svg {
  width: 100%;
  height: auto;
}

.card:hover .card__icon {
  color: var(--sb-red-deep);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  color: var(--sb-text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin: 0;
}

.card__tag {
  display: inline-block;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-steel);
  border-top: 1px solid var(--sb-line);
  width: 100%;
}

/* ---------- 13. Industry tiles (§8.4) ---------------------------------- */

.industries {
  list-style: none;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(4, 1fr);
}

.industry {
  display: flex;
  flex-direction: column;
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-top: 4px solid var(--sb-navy);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    border-top-color 180ms var(--ease-out);
}

.industry:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--sb-red);
}

.industry__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sb-ink);
}

.industry__media picture,
.industry__media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
}

.industry__media img {
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.industry:hover .industry__media img {
  transform: scale(1.05);
}

/* §12.2: the name sits on the photo, so it needs its own ground */
.industry__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 16, 0.9) 0%,
    rgba(10, 12, 16, 0.42) 32%,
    transparent 62%
  );
}

.industry__name {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 15px;
  margin: 0;
  color: var(--sb-white);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.industry > p {
  margin: 0;
  padding: 20px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--sb-text-subtle);
}

/* ---------- 14. Rush band (§8.6) --------------------------------------- */

.rush {
  background: var(--sb-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.rush__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 84px);
  position: relative;
  z-index: 2;
}

.rush h2 {
  color: #fff;
  max-width: 22ch;
}

.rush h2 em {
  font-style: normal;
  color: var(--sb-red-lt);
  display: block;
}

.rush p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--sb-muted-on-dark);
  max-width: 54ch;
}

.rush__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
  width: min(380px, 100%);
}

.rush__product {
  position: relative;
  margin: 0;
}

.rush__product img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

.rush__product .brackets {
  inset: -14px -10px;
}

.rush .blade-watermark {
  left: -6%;
  top: -30%;
  z-index: 1;
  width: min(560px, 62%);
  opacity: 0.055;
}

/* ---------- 15. Split feature (§8.7) ----------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.split__media {
  position: relative;
}

.split__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: radial-gradient(115% 90% at 30% 20%, #1c2230 0%, var(--sb-ink) 70%);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  padding: 8%;
}

.split__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

/* Photo variant: real photography fills the frame, no inset padding.
   16:9 keeps the shop context in a 2.33:1 source that a 4:3 frame would crop away. */
.split__frame--photo {
  padding: 0;
  aspect-ratio: 16 / 9;
  background: var(--sb-ink);
}

.split__frame--photo img,
.split__frame--photo picture {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: 63% 50%;
  filter: none;
}

.split__frame .blade-watermark {
  left: -12%;
  bottom: -22%;
  width: 70%;
  opacity: 0.07;
}

.split__stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  border-radius: 0 var(--radius-sm) 0 var(--radius-md);
  background: var(--sb-red);
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.split__caption {
  margin-top: 16px;
  font-size: 0.875rem; /* photo captions are 14px site-wide, per client direction */
  color: var(--sb-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---------- 16. Checklist (§8.8) --------------------------------------- */

.checklist {
  list-style: none;
  margin: 26px 0 0;
}

.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: var(--fs-body);
  color: var(--sb-text-muted);
}

.checklist li:last-child {
  margin-bottom: 0;
}

.checklist svg {
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 16px;
  height: 16px;
  color: var(--sb-red);
}

.section--dark .checklist li {
  color: rgba(255, 255, 255, 0.86);
}

.section--dark .checklist svg {
  color: var(--sb-red-lt);
}

/* ---------- 17. Process steps (§10.1 §7) ------------------------------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--sb-line);
}

/* dimension-line connector between steps */
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--sb-red);
  transition: width 700ms var(--ease-out);
}

.step.is-visible::before {
  width: 44px;
}

.step__num {
  display: block;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--sb-red-deep);
  margin-bottom: 16px;
}

.step h3 {
  margin-bottom: 10px;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.step p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--sb-text-muted);
}

/* ---------- 18. Closing CTA (§10.1 §8) -------------------------------- */

.cta {
  background: var(--sb-red);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% -10%, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  padding-block: clamp(56px, 7vw, 96px);
}

.cta h2 {
  color: #fff;
}

.cta p {
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  font-size: var(--fs-lede);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* ---------- 20. Mobile sticky action bar (§14) ------------------------- */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  gap: 1px;
  background: var(--sb-navy-deep);
  box-shadow: 0 -6px 20px rgba(10, 12, 16, 0.3);
  transform: translateY(110%);
  transition: transform 220ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar.is-visible {
  transform: translateY(0);
}

.mobile-bar a {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

.mobile-bar a svg {
  width: 16px;
  height: 16px;
}

.mobile-bar__call {
  background: var(--sb-navy);
}

.mobile-bar__quote {
  background: var(--sb-red);
}

/* ---------- 21. Scroll reveal (§13) ----------------------------------- */

/* Gated on .js so content is never hidden if the script fails to run */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------- 22. Responsive (§14) -------------------------------------- */

@media (max-width: 1279px) {
  .industries {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Header only: burger up to 1179px (16px nav type needs more room than §14 assumed) */
@media (max-width: 1179px) {
  .nav,
  .header__cta {
    display: none;
  }

  .burger {
    display: flex;
  }
}

/* Tighten the full nav in the band just above the switch */
@media (min-width: 1180px) and (max-width: 1400px) {
  .brand__mark {
    height: 42px;
  }

  .nav__list {
    gap: 22px;
  }

  .nav__list a {
    letter-spacing: 0.07em;
  }

  .header__cta {
    padding-inline: 18px;
  }
}

@media (max-width: 1023px) {
  :root {
    --h-header: 74px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__product {
    display: none;
  }

  .cards,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .cap__head,
  .split {
    grid-template-columns: 1fr;
  }

  .specimen {
    max-width: 560px;
  }

  .split--flip .split__media {
    order: -1;
  }

  .rush__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .utility__group--hours,
  .utility__claim {
    display: none;
  }

  .utility__inner {
    justify-content: center;
  }
}

@media (max-width: 639px) {
  .stats__list,
  .cards,
  .industries,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__item + .stats__item::before {
    display: none;
  }

  .stats__item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stats__item:nth-child(-n + 2) {
    border-top: 0;
  }

  .stats__item:nth-child(odd) {
    border-left: 0;
  }

  .cards,
  .steps,
  .industries {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .hero__tagline {
    max-width: none;
  }

  .btn {
    width: 100%;
  }

  .hero__actions .btn,
  .cta__actions .btn,
  .rush__cta .btn {
    width: 100%;
  }

  .mobile-bar {
    display: flex;
  }

  body {
    padding-bottom: 0;
  }

  .footer__bottom {
    padding-bottom: 78px;
  }
}

/* 320px is a supported target (§14) — the header lockup must yield to the burger */
@media (max-width: 420px) {
  .header__inner {
    gap: 12px;
  }

  .brand {
    gap: 10px;
  }

  .brand__mark {
    height: 38px;
  }

  /* "SCRAPER BLADES" is nbsp-joined, so this wraps "USA" onto a second line */
  .brand__name {
    font-size: 1rem;
    white-space: normal;
  }

  .brand__desc {
    display: none;
  }
}

/* Below ~360px there is no room for the wordmark beside the mark and the burger.
   The plate mark carries the brand and the hero H1 states the name outright. */
@media (max-width: 359px) {
  .brand__text {
    display: none;
  }
}

/* ---------- 23. Reduced motion (§13, §15) ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* §13: one static frame, no Ken Burns, no cross-fade */
  .hero__slide.is-active img {
    animation: none;
    transform: none;
  }

  .hero__slide {
    transition: none;
  }

  .hero__dots {
    display: none;
  }

  .step::before {
    width: 44px;
  }

  .btn:hover,
  .card:hover,
  .industry:hover {
    transform: none;
  }
}

/* ---------- 24. Print ------------------------------------------------- */

@media print {
  .header,
  .utility,
  .mobile-bar,
  .hero__media,
  .blade-watermark {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- 26. Interior page head (§10.2, §10.3) ---------------------- */

.page-head {
  position: relative;
  background: var(--sb-navy);
  color: var(--sb-text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.page-head__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-head__media picture,
.page-head__media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: cover;
  object-position: 62% 50%;
}

/* The plate is already near-black navy; this only guarantees text contrast
   on the left, where the artwork deliberately leaves room for type. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      92deg,
      rgba(12, 24, 48, 0.9) 0%,
      rgba(12, 24, 48, 0.72) 46%,
      rgba(12, 24, 48, 0.4) 78%,
      rgba(12, 24, 48, 0.28) 100%
    ),
    linear-gradient(to bottom, rgba(10, 12, 16, 0.45) 0%, transparent 30%);
}

.page-head__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(40px, 6vw, 84px);
}

.page-head h1 {
  color: var(--sb-white);
  max-width: 24ch;
}

.page-head__deck {
  margin: 22px 0 0;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 56ch;
}

.page-head__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.page-head .blade-watermark {
  right: -6%;
  bottom: -34%;
  z-index: 2;
  width: min(620px, 62%);
  opacity: 0.06;
}

/* Breadcrumb */
.crumbs {
  margin-bottom: 20px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ff-display);
  font-size: 0.75rem; /* exception to the 16px floor — breadcrumb */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crumbs li {
  font-size: inherit;
  color: var(--sb-grey);
}

.crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--sb-red);
}

.crumbs a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--sb-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 27. Long-form prose (§6.1 narrow measure) ----------------- */

.prose > p {
  max-width: 68ch;
}

.prose > p + p {
  margin-top: 1.1em;
}

.prose__lead {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--sb-text);
}

/* ---------- 28. Pull statement (§10.2) -------------------------------- */

.pull {
  background: var(--sb-bone);
}

.pull__inner {
  padding-block: clamp(36px, 5vw, 64px);
  text-align: center;
}

.pull__text {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-navy);
}
/* ---------- 29. Gallery tiles (§8.12, §10.4) -------------------------- */

.tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--sb-ink);
  box-shadow: var(--shadow-sm);
}

.tile__media picture,
.tile__media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: cover;
}

.tile__media img {
  transition: transform 500ms var(--ease-out);
}

.tile__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile__link:hover .tile__media img,
.tile__link:focus-visible .tile__media img {
  transform: scale(1.05);
}

.tile__link:hover .tile__media {
  box-shadow: var(--shadow-md);
}

/* zoom affordance */
.tile__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(10, 12, 16, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
    background-color 200ms var(--ease-out);
}

.tile__zoom svg {
  width: 18px;
  height: 18px;
  color: var(--sb-white);
}

.tile__link:hover .tile__zoom,
.tile__link:focus-visible .tile__zoom {
  opacity: 1;
  transform: none;
  background: var(--sb-red);
}

.tiles {
  list-style: none;
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(3, 1fr);
}

.tile__caption {
  display: block;
  margin-top: 14px;
  font-size: 0.875rem; /* photo caption */
  line-height: 1.5;
  color: var(--sb-text-subtle);
}

.tile__link:hover .tile__caption {
  color: var(--sb-text-muted);
}

.tiles__note {
  margin: var(--space-block) 0 0;
  max-width: 56ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--sb-text-muted);
}

@media (max-width: 1179px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* ---------- 30. Lightbox (§8.13) -------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: clamp(56px, 8vh, 88px) clamp(12px, 3vw, 32px);
  background: rgba(10, 12, 16, 0.94);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: lbIn 220ms var(--ease-out) both;
}

.lightbox[hidden] {
  display: none;
}

@keyframes lbIn {
  from {
    opacity: 0;
  }
}

.lightbox__figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lightbox__figure img {
  width: auto;
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  border-radius: var(--radius-md);
  background: var(--sb-ink);
}

.lightbox__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 16px;
  max-width: min(1100px, 92vw);
  text-align: center;
  font-size: 0.875rem; /* photo caption */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.lightbox__count {
  font-family: var(--ff-display);
  font-size: 0.75rem; /* exception to the 16px floor — counter */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--sb-red-lt);
  white-space: nowrap;
}

.lightbox__btn {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sb-white);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
}

.lightbox__btn:hover {
  background: var(--sb-red);
  border-color: var(--sb-red);
}

.lightbox__btn:active {
  transform: scale(0.94);
}

.lightbox__prev {
  grid-column: 1;
}

.lightbox__prev svg {
  transform: rotate(180deg);
}

.lightbox__next {
  grid-column: 3;
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 2.4vh, 24px);
  right: clamp(12px, 3vw, 32px);
}

@media (max-width: 639px) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding-inline: 12px;
  }

  .lightbox__figure {
    grid-column: 1;
    grid-row: 1;
  }

  .lightbox__prev,
  .lightbox__next {
    grid-column: 1;
    grid-row: 2;
  }

  .lightbox__prev {
    justify-self: start;
  }

  .lightbox__next {
    justify-self: end;
  }
}

/* ---------- 33. Quote layout + help panel (§10.3) --------------------- */

.quote {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.form-panel {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: clamp(22px, 3.4vw, 42px);
}

.aside {
  position: sticky;
  top: calc(var(--h-header) + 20px);
  display: grid;
  gap: 18px;
}

.panel {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-top: 4px solid var(--sb-navy);
  border-radius: var(--radius-md);
  padding: 24px;
}

.panel--dark {
  background: var(--sb-ink);
  border-color: var(--sb-border-dark);
  border-top-color: var(--sb-red);
  color: var(--sb-text-on-dark);
}

.panel h2,
.panel h3 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.panel--dark h2,
.panel--dark h3 {
  color: var(--sb-white);
}

.panel p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sb-text-muted);
}

.panel--dark p {
  color: var(--sb-muted-on-dark);
}

.panel__phone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sb-navy);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.panel__phone svg {
  width: 20px;
  height: 20px;
  color: var(--sb-red);
  flex: none;
}

.panel__phone:hover {
  color: var(--sb-red-deep);
}

/* numbered micro-timeline */
.timeline {
  list-style: none;
  counter-reset: tl;
  display: grid;
  gap: 14px;
}

.timeline li {
  position: relative;
  padding-left: 38px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sb-text-muted);
  counter-increment: tl;
}

.timeline li::before {
  content: counter(tl);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sb-navy);
  color: var(--sb-white);
  font-family: var(--ff-display);
  font-size: 0.75rem;
  font-weight: 800;
}

.panel--dark .timeline li {
  color: var(--sb-muted-on-dark);
}

.panel--dark .timeline li::before {
  background: var(--sb-red);
}

/* ---------- 34. Worksheet download block ------------------------------ */

.worksheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--sb-ink);
  color: var(--sb-text-on-dark);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.worksheet h2 {
  color: var(--sb-white);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: 10px;
}

.worksheet__steps {
  list-style: none;
  counter-reset: ws;
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
}

.worksheet__steps li {
  position: relative;
  padding-left: 44px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  counter-increment: ws;
}

.worksheet__steps li::before {
  content: counter(ws);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--sb-red);
  color: var(--sb-white);
  font-family: var(--ff-display);
  font-size: 0.875rem;
  font-weight: 800;
}

.worksheet__aside {
  display: grid;
  gap: 14px;
  justify-items: stretch;
  width: min(280px, 100%);
}

.worksheet__doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sb-border-dark);
  border-radius: var(--radius-sm);
}

.worksheet__doc svg {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--sb-red-lt);
}

.worksheet__meta {
  font-family: var(--ff-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-grey);
  line-height: 1.5;
}

.worksheet__meta strong {
  display: block;
  color: var(--sb-white);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.worksheet .blade-watermark {
  right: -8%;
  bottom: -40%;
  width: min(420px, 46%);
  opacity: 0.05;
}

/* ---------- 37. Contact info rows (§8.11) + map facade ---------------- */

.info {
  list-style: none;
  display: grid;
}

.info li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sb-border);
}

.info li:first-child {
  padding-top: 0;
}

.info__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--sb-navy);
  border-bottom: 3px solid var(--sb-red);
}

.info__icon svg {
  width: 19px;
  height: 19px;
  color: var(--sb-white);
}

.info__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ff-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-steel);
}

.info__value {
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--sb-navy);
  font-variant-numeric: tabular-nums;
}

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

.info__value a:hover {
  color: var(--sb-red-deep);
}

.info__value {
  overflow-wrap: anywhere; /* the email address is one unbreakable token at 320px */
}

.info__value--sm {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  font-family: var(--ff-body);
  letter-spacing: 0;
}

.map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--sb-ink);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 38. Simple prose page (privacy, 404, thank you) ---------- */

.center-page {
  text-align: center;
  padding-block: clamp(64px, 10vw, 132px);
}

.center-page__code {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--sb-navy);
}

.center-page p {
  margin-inline: auto;
}

.center-page .cta__actions {
  margin-top: 32px;
}

.legal h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 40px 0 12px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal ul {
  padding-left: 22px;
  margin-bottom: 1em;
}

.legal li {
  margin-bottom: 6px;
  max-width: 68ch;
}

/* ---------- 39. Quote/contact responsive ----------------------------- */

@media (max-width: 1179px) {
  .quote {
    grid-template-columns: 1fr;
  }

  .aside {
    position: static;
  }

  .choices,
  .choices--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .measure {
    grid-template-columns: 1fr;
  }

  .sketch-wrap {
    position: static;
  }

  .worksheet {
    grid-template-columns: 1fr;
  }

  .worksheet__aside {
    width: 100%;
  }
}

@media (max-width: 639px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .choices,
  .choices--3 {
    grid-template-columns: 1fr;
  }

  .choice,
  .choice__body,
  .choice__title,
  .choice__sub {
    min-width: 0;
  }

  .choices,
  .choices--3 {
    gap: 10px;
  }

  .choice__body {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    row-gap: 2px;
    padding: 12px 14px;
  }

  .choice__body svg {
    width: 52px;
    height: 28px;
    grid-row: 1 / span 2;
  }

  .choice__sub {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .choice__title {
    grid-column: 2;
    align-self: end;
  }

  .choice__sub {
    grid-column: 2;
    align-self: start;
  }
}

/* ---------- 40. Rush call-out plate (§10.3) --------------------------- */

.rush-plate {
  overflow: hidden;
  color: var(--sb-text-on-dark);
}

.rush-plate__inner {
  padding: clamp(24px, 3.4vw, 40px);
}

.rush-plate h2 {
  color: var(--sb-white);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  max-width: 30ch;
  margin-bottom: 12px;
}

.rush-plate p {
  color: var(--sb-muted-on-dark);
  max-width: 62ch;
}

.rush-plate .eyebrow {
  color: var(--sb-red-lt);
}

.rush-plate .eyebrow svg {
  color: var(--sb-red-lt);
}

/* ==========================================================================
   Block adaptations
   The reference decorates with inline <svg> and <span> hooks. Editor content is
   block-only, so the same marks are drawn in CSS. Values are unchanged.
   ========================================================================== */

/* eyebrow chevron (was <svg><use href="#i-chevron">) */
.eyebrow::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: var(--sb-red);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path fill='%23fff' d='M1 1h22l-3 4.4H4z'/><path fill='%23fff' d='M5 7.2h14l-2.6 4.3H7.6z'/><path fill='%23fff' d='M8.6 13.2h6.8l-2 3.6h-2.8z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path fill='%23fff' d='M1 1h22l-3 4.4H4z'/><path fill='%23fff' d='M5 7.2h14l-2.6 4.3H7.6z'/><path fill='%23fff' d='M8.6 13.2h6.8l-2 3.6h-2.8z'/></svg>") no-repeat center / contain;
}

.sb-on-dark .eyebrow::before,
.section--dark .eyebrow::before {
	background-color: var(--sb-red-lt);
}

/* blade drawings (were <svg><use href="#i-blade-*">); two-tone, so painted as a
   background rather than a mask, with the hover state as a second image */
.card__icon {
	/* the reference's outer <svg> carries no viewBox, so it falls back to the
	   150px replaced-element default with the drawing centred inside it */
	height: 150px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 132px 62px;
}

.card__icon--hole { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><g fill='none' stroke='%2313254C' stroke-width='2'><circle cx='28' cy='47.4' r='6'/><circle cx='54' cy='44.4' r='6'/><circle cx='80' cy='41.4' r='6'/><circle cx='106' cy='38.3' r='6'/></g></svg>"); }

.card:hover .card__icon--hole { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%23A62A20' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><g fill='none' stroke='%23A62A20' stroke-width='2'><circle cx='28' cy='47.4' r='6'/><circle cx='54' cy='44.4' r='6'/><circle cx='80' cy='41.4' r='6'/><circle cx='106' cy='38.3' r='6'/></g></svg>"); }

.card__icon--slot { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><g fill='none' stroke='%2313254C' stroke-width='2'><rect x='24.5' y='37.4' width='7' height='20' rx='3.5'/><rect x='50.5' y='34.4' width='7' height='20' rx='3.5'/><rect x='76.5' y='31.4' width='7' height='20' rx='3.5'/><rect x='102.5' y='28.3' width='7' height='20' rx='3.5'/></g></svg>"); }

.card:hover .card__icon--slot { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%23A62A20' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><g fill='none' stroke='%23A62A20' stroke-width='2'><rect x='24.5' y='37.4' width='7' height='20' rx='3.5'/><rect x='50.5' y='34.4' width='7' height='20' rx='3.5'/><rect x='76.5' y='31.4' width='7' height='20' rx='3.5'/><rect x='102.5' y='28.3' width='7' height='20' rx='3.5'/></g></svg>"); }

.card__icon--blank { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><path fill='none' stroke='%2313254C' stroke-width='1.5' stroke-dasharray='4 4' d='M6 46 126 32'/><path fill='none' stroke='%2313254C' stroke-width='1.5' d='M6 22v-8M126 8v8M6 18h120'/></svg>"); }

.card:hover .card__icon--blank { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'><path fill='none' stroke='%23A62A20' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/><path fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/><path fill='none' stroke='%23A62A20' stroke-width='1.5' stroke-dasharray='4 4' d='M6 46 126 32'/><path fill='none' stroke='%23A62A20' stroke-width='1.5' d='M6 22v-8M126 8v8M6 18h120'/></svg>"); }

/* stat suffixes: <small> is not a Gutenberg inline format, <em> is */
.stats__num em {
	font-style: normal;
	font-size: 0.44em;
	letter-spacing: 0.04em;
	margin-left: 0.16em;
}

/* legend / list items are Paragraph blocks, not <span>/<li> */
.specimen__legend > * {
	position: relative;
	padding-top: 12px;
	margin: 0;
	font-family: var(--ff-display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sb-steel);
	text-align: center;
	border-top: 1px solid var(--sb-line);
}

/* corner brackets (were four <span> children of a .brackets element) */
.has-brackets::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.5;
	--b: var(--sb-red-lt);
	background-image:
		linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)),
		linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)),
		linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)),
		linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b));
	background-repeat: no-repeat;
	background-size:
		30px 2px, 2px 30px,
		30px 2px, 2px 30px,
		30px 2px, 2px 30px,
		30px 2px, 2px 30px;
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

/* pill rush bolt (was <svg><use href="#i-bolt">) */
.pill--rush::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	--sb-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 2 4 13.6h6.1L9.4 22 20 9.9h-6.4z'/%3E%3C/svg%3E");
	-webkit-mask: var(--sb-bolt) no-repeat center / contain;
	mask: var(--sb-bolt) no-repeat center / contain;
}

/* pills are Paragraph blocks, so the base margin has to be cleared */
.pill {
	margin: 0;
}

/* eyebrow variant carrying the bolt instead of the chevron */
.eyebrow--bolt::before {
	--sb-eyebrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 2 4 13.6h6.1L9.4 22 20 9.9h-6.4z'/%3E%3C/svg%3E");
}

.eyebrow::before {
	--sb-eyebrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23fff' d='M1 1h22l-3 4.4H4z'/%3E%3Cpath fill='%23fff' d='M5 7.2h14l-2.6 4.3H7.6z'/%3E%3Cpath fill='%23fff' d='M8.6 13.2h6.8l-2 3.6h-2.8z'/%3E%3C/svg%3E");
	-webkit-mask-image: var(--sb-eyebrow-glyph);
	mask-image: var(--sb-eyebrow-glyph);
}

/* checklist ticks (were <svg><use href="#i-chevron"> inside each <li>) */
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 16px;
	height: 16px;
	background-color: var(--sb-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23fff' d='M1 1h22l-3 4.4H4z'/%3E%3Cpath fill='%23fff' d='M5 7.2h14l-2.6 4.3H7.6z'/%3E%3Cpath fill='%23fff' d='M8.6 13.2h6.8l-2 3.6h-2.8z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23fff' d='M1 1h22l-3 4.4H4z'/%3E%3Cpath fill='%23fff' d='M5 7.2h14l-2.6 4.3H7.6z'/%3E%3Cpath fill='%23fff' d='M8.6 13.2h6.8l-2 3.6h-2.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.section--dark .checklist li::before,
.sb-on-dark .checklist li::before {
	background-color: var(--sb-red-lt);
}

/* blade silhouette watermark as an empty Group block instead of an inline <svg> */
.blade-watermark {
	aspect-ratio: 800 / 200;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8 70 792 14v116L8 186z M87 89h26v64H87z M217 80h26v64h-26z M347 71h26v64h-26z M477 62h26v64h-26z M607 52h26v64h-26z M727 44h26v64h-26z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8 70 792 14v116L8 186z M87 89h26v64H87z M217 80h26v64h-26z M347 71h26v64h-26z M477 62h26v64h-26z M607 52h26v64h-26z M727 44h26v64h-26z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rush__product.has-brackets::before {
	inset: -14px -10px;
}

/* Image blocks bring a <figure> the reference did not have */
.specimen__plate .wp-block-image,
.rush__product .wp-block-image,
.split__frame .wp-block-image,
.industry__media .wp-block-image,
.page-head__media .wp-block-image,
.tile__media .wp-block-image {
	margin: 0;
	line-height: 0;
}

/* The frame is a grid box with a fixed aspect ratio and the img inside is
   height:100%; the Image block's <figure> sits between them, so it has to fill the
   frame or the img has nothing to resolve against and falls back to its natural
   height, overflowing the frame. */
.split__frame .wp-block-image,
.split__frame--photo .wp-block-image {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

/* the hazard band and watermark are empty Group blocks; nothing should stretch them */
.rush > .sb-hazard {
	position: relative;
	z-index: 3;
}

/* Reveal stagger. The reference sets --reveal-delay with an inline style per
   item, which a block attribute cannot express, so the cadence is declared here
   and applied with one class on the grid. */
.sb-stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.sb-stagger > *:nth-child(2) { --reveal-delay: 80ms; }
.sb-stagger > *:nth-child(3) { --reveal-delay: 160ms; }
.sb-stagger > *:nth-child(4) { --reveal-delay: 240ms; }
.sb-stagger > *:nth-child(5) { --reveal-delay: 320ms; }
.sb-stagger > *:nth-child(6) { --reveal-delay: 400ms; }

/* .steps is an <ol> in the reference. The reset covers `ul` but not `ol`, so the
   list keeps the UA default 40px indent and 1em block margins. */
.steps.steps {
	padding-left: 40px;
	margin-block: 18px;
}

/* the reference sets this button's 32px offset with an inline style on its <p> */
.split__cta {
	margin-top: 32px;
}

/* .step__num is a <span> in the reference, so `.step p` (0,1,1) never reached it.
   As a Paragraph block it does, and outranks `.step__num` (0,1,0). */
.step p.step__num {
	font-size: 1rem;
	color: var(--sb-red-deep);
	margin-bottom: 16px;
}

/* .card__tag is a <span> in the reference, so `.card p` (0,1,1) never reached it.
   margin-top:auto is what pins it to the bottom of the flex card. */
.card p.card__tag {
	margin-top: auto;
	line-height: 1.65;
	color: var(--sb-steel);
}

/* the page-head plate is absolutely positioned, so the Image block's <figure>
   has to fill it rather than sit at its intrinsic height */
.page-head__media .wp-block-image {
	width: 100%;
	height: 100%;
}

/* .flag-rule as a Separator block. Core paints separators as a 2px bottom border
   and caps the default style at 100px wide via
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)` (0,3,0), which is
   why the rule showed as a short dash. Doubling the class ties that specificity
   and wins on order. */
.wp-block-separator.flag-rule.flag-rule {
	border: 0;
	width: auto;
	max-width: none;
	height: 4px;
	margin: 0;
	opacity: 1;
	background: linear-gradient(
		to right,
		var(--sb-navy) 0 40%,
		var(--sb-red) 40% 60%,
		var(--sb-navy) 60% 100%
	);
}

/* ---------- gallery tiles as a core Gallery block ----------
   The reference tile is <li><a><span.tile__media><picture> + <span.tile__caption>.
   Core renders <figure.wp-block-gallery><figure.wp-block-image><img>+<figcaption>,
   sizes the images with flex, and overlays the caption on a gradient. Core's own
   selectors are (0,3,1), so the .tile__* values are restated here at (0,4,1). */

.section .wp-block-gallery.has-nested-images {
	display: grid;
	gap: clamp(18px, 2.4vw, 26px);
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
}

/* core sizes each item with `figure.wp-block-image:not(#individual-image)`, whose
   :not(#id) argument gives it ID-level specificity. The grid tracks own the width
   here, so the override has to carry the same trick to outrank it. */
.section .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: auto;
	max-width: none;
	flex-grow: 0;
	margin: 0;
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	/* height must stay auto: the grid row is sized by image + caption, and a
	   stretched figure would make height:100% swallow the caption's space and push
	   it onto the next row. aspect-ratio does the framing instead. */
	height: auto;
	max-width: none;
	min-width: 0;
	min-height: 0;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	background: var(--sb-ink);
	box-shadow: var(--shadow-sm);
	transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.05);
	box-shadow: var(--shadow-md);
}

/* The caption sits over the image, as the owner set it up — core's overlay, given
   the brand's 14px photo-caption size and a scrim heavy enough to hold white text
   over light machined parts. */
.section .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	box-sizing: border-box;
	padding: 28px 14px 12px;
	background: linear-gradient(to top, rgba(10, 12, 16, 0.88) 0%, rgba(10, 12, 16, 0.55) 55%, rgba(10, 12, 16, 0) 100%);
	color: var(--sb-white);
	font-size: 0.875rem; /* photo caption */
	line-height: 1.45;
	text-align: left;
	text-shadow: none;
	border-bottom-left-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

/* the image and its lightbox trigger share a frame that has to clip the zoom */
.section .wp-block-gallery.has-nested-images figure.wp-block-image > .wp-lightbox-container {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	margin: 0;
}

/* zoom affordance: core's lightbox button restyled as .tile__zoom */
.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger {
	right: 12px;
	bottom: 12px;
	top: auto;
	left: auto;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	border-radius: var(--radius-sm);
	background: rgba(10, 12, 16, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
		background-color 200ms var(--ease-out);
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image:hover button.lightbox-trigger,
.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger:focus-visible {
	opacity: 1;
	transform: none;
	background: var(--sb-red);
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger svg {
	width: 18px;
	height: 18px;
	fill: var(--sb-white);
}

@media (max-width: 1179px) {
	.section .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.section .wp-block-gallery.has-nested-images {
		grid-template-columns: 1fr;
	}
}

/* confirmation mark on the Thank You page (reference §36, which is otherwise
   form-control styling deferred to the Gravity Forms phase) */
.confirm__icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(206, 55, 43, 0.1);
	color: var(--sb-red);
}

.confirm__icon::before {
	content: "";
	width: 30px;
	height: 30px;
	background-color: currentColor;
	--sb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
	-webkit-mask: var(--sb-check) no-repeat center / contain;
	mask: var(--sb-check) no-repeat center / contain;
}

/* the reference centres these action rows with an inline style */
.center-page .cta__actions {
	justify-content: center;
}

/* ==========================================================================
   Quote and Contact adaptations. Reference markup used <ul>/<li>/<span> with
   inline <svg>; these are Group and Paragraph blocks, so the icons are masks.
   ========================================================================== */

/* ---------- contact info rows as core/media-text ----------
   Reference row: .info li is flex with a 46x46 .info__icon plate, 16px gap,
   20px block padding and a hairline under each row. Here each row is a Media &
   Text block whose media slot holds the plate as an SVG, so the icon is a real
   Media Library asset.

   The row is flex, not core's grid, and that is a deliberate exception: the block's
   Media width control is a percentage, and no percentage holds a 46px icon at every
   width. Measured with the control in charge at 5%: the track is 42px at 1440 and 19px
   at 375, so the icon overruns the text on a phone. Flex makes the inline
   `grid-template-columns` inert without !important, and the icon keeps the reference's
   46px at every width. Stack-on-mobile is off in the block itself, which is what keeps
   the icon beside the text below 600px. */

.info {
	display: grid;
}

.info .info__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	margin: 0;
	border-bottom: 1px solid var(--sb-border);
}

.info .info__row:first-child {
	padding-top: 0;
}

/* core pads the media and content cells; the reference uses the gap alone */
.info .info__row > .wp-block-media-text__media {
	flex: none;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.info .info__row > .wp-block-media-text__content {
	flex: 0 1 auto;
	min-width: 0;
	padding: 0;
	margin: 0;
}

.info .info__row > .wp-block-media-text__media img {
	width: 46px;
	height: 46px;
	max-width: none;
	display: block;
	border-radius: 0;
	object-fit: contain;
}

.info p.info__label {
	margin: 0 0 4px;
}

.info p.info__value {
	margin: 0;
}

/* worksheet block */
.worksheet__body {
	min-width: 0;
}

.worksheet p.worksheet__lede {
	color: rgba(255, 255, 255, 0.86);
	max-width: 60ch;
}

.worksheet p.worksheet__meta {
	margin: 0;
}

.worksheet__meta strong {
	display: block;
	font-size: 1rem;
	letter-spacing: 0.14em;
	color: var(--sb-white);
}

/* the reference pairs the meta line with a document glyph */
.worksheet__doc::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	background-color: var(--sb-red-lt);
	--sb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
	-webkit-mask: var(--sb-glyph) no-repeat center / contain;
	mask: var(--sb-glyph) no-repeat center / contain;
}

/* File block: the reference shows a single download button. Core also renders the
   file name as a link, which the button points at with aria-describedby — so it is
   taken out of the layout visually rather than with display:none, which would
   remove it from the accessibility tree and leave that reference dangling. */
.wp-block-file.worksheet__file {
	margin: 0;
	display: flex;
	align-items: center;
}

.wp-block-file.worksheet__file > a:not(.wp-block-file__button) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* panels */
.panel p.panel__phone,
.panel .panel__phone {
	margin-bottom: 12px;
}

.panel__cta {
	margin-top: 14px;
}

.contact__quote-panel {
	margin-top: 26px;
}

.quote .map {
	margin-top: 26px;
}

.map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* the reference offsets this follow-up line with an inline margin-top */
.center-page p.center-page__note {
	margin-top: 14px;
}

/* Classed paragraphs whose reference rule sets only margin-top, leaving the base
   `p { margin: 0 0 1em }` to supply the bottom. */
.sb-ref p.section__lede,
.sb-ref p.center-page__note,
.sb-ref p.center-page__code {
	margin-bottom: 1em;
}

/* ==========================================================================
   core/breadcrumbs mapped onto the reference .crumbs treatment.
   Core renders <nav class="wp-block-breadcrumbs"><ol><li>, separating items with
   `li:not(:last-child)::after { content: var(--separator, "/") }`. The reference
   uses a red 12x2 dash before each item after the first, so the separator is
   replaced rather than restyled.
   ========================================================================== */

.page-head .wp-block-breadcrumbs {
	margin-bottom: 20px;
	font-family: var(--ff-display);
	font-size: 0.75rem; /* exception to the 16px floor — breadcrumb */
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.page-head .wp-block-breadcrumbs ol {
	gap: 10px;
}

.page-head .wp-block-breadcrumbs li {
	font-size: inherit;
	color: var(--sb-grey);
}

/* drop core's "/" and use the reference's dash, before the item rather than after */
.page-head .wp-block-breadcrumbs li:not(:last-child)::after {
	content: "";
	margin: 0;
	opacity: 1;
	display: inline-block;
	width: 12px;
	height: 2px;
	margin-left: 10px;
	vertical-align: middle;
	background: var(--sb-red);
}

.page-head .wp-block-breadcrumbs a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.page-head .wp-block-breadcrumbs a:hover {
	color: var(--sb-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero bottom edge as a class on the hero group itself.

   The section already spends both of its pseudo-elements — ::before on the scrim,
   ::after on .grain — so the edge hangs off .page-head__inner, the section's only
   child. The section reserves the edge's height as bottom padding and the edge is
   pushed into it, which keeps the total height the same as the reference (where
   the edge is a div in flow) without a helper block.

   The section's padding also has to be reset: core gives any group with a
   background `padding: 1.25em 2.375em`, which added 45px here.
   -------------------------------------------------------------------------- */

.page-head {
	padding: 0;
	/* the reference frames the plate with object-position: 62% 50%; the block's
	   background support only writes background-size, so the framing lives here */
	background-position: 62% 50%;
	background-repeat: no-repeat;
}

.page-head.bottom-line {
	--sb-edge-h: 12px;
	padding-bottom: var(--sb-edge-h);
}

.page-head.bottom-hazard {
	--sb-edge-h: 7px;
	padding-bottom: var(--sb-edge-h);
}

.page-head:where(.bottom-line, .bottom-hazard) .page-head__inner::after {
	content: "";
	position: absolute;
	left: calc(-50vw + 50%);
	width: 100vw;
	bottom: calc(-1 * var(--sb-edge-h));
	height: var(--sb-edge-h);
	z-index: 5;
	pointer-events: none;
}

/* bevelled blade edge (reference .blade-edge) */
.page-head.bottom-line .page-head__inner::after {
	background: linear-gradient(
		to bottom,
		#b9bec6 0,
		#9298a1 34%,
		#5d646e 58%,
		#262b33 84%,
		var(--sb-ink) 100%
	);
}

/* red/black hazard band (reference .sb-hazard), used on the Quote page head */
.page-head.bottom-hazard .page-head__inner::after {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--sb-red) 0 14px,
		var(--sb-black) 14px 28px
	);
}

/* Worksheet watermark. The reference puts a .blade-watermark <svg> inside the
   block; the section's ::after is free, so it carries the mark instead. */
.worksheet::after {
	content: "";
	position: absolute;
	left: -6%;
	top: -30%;
	z-index: 0;
	width: min(560px, 62%);
	aspect-ratio: 800 / 200;
	background-color: #fff;
	opacity: 0.055;
	pointer-events: none;
	--sb-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8 70 792 14v116L8 186z M87 89h26v64H87z M217 80h26v64h-26z M347 71h26v64h-26z M477 62h26v64h-26z M607 52h26v64h-26z M727 44h26v64h-26z'/%3E%3C/svg%3E");
	-webkit-mask: var(--sb-mark) no-repeat center / contain;
	mask: var(--sb-mark) no-repeat center / contain;
}

.worksheet > * {
	position: relative;
	z-index: 1;
}

/* the File block's download button is the reference's .btn--primary */
.wp-block-file.worksheet__file .wp-block-file__button {
	margin-left: 0;
}

/* ==========================================================================
   Quote page rows built as Columns blocks.
   The reference carries the two-column geometry on .worksheet and .quote
   themselves; here those rows are core/columns, so the geometry moves onto the
   Columns block and the wrappers go back to being plain containers. Without this
   .worksheet stayed a 2-column grid and turned its own eyebrow and heading into
   grid cells.
   ========================================================================== */

/* Both rows sit directly inside a full-bleed section, so they carry the gutter
   that the reference's .wrap provided: 1440px max including it. */
.worksheet,
.wp-block-columns.quote {
	width: min(100% - var(--gutter) * 2, calc(var(--maxw) - var(--gutter) * 2));
	margin-inline: auto;
}

.worksheet {
	display: block;
}

/* reference .worksheet: minmax(0, 1fr) auto, centred, gap clamp(22px, 3vw, 44px) */
.worksheet .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(22px, 3vw, 44px);
	margin-block: 0;
}

.worksheet .wp-block-columns > .wp-block-column {
	min-width: 0;
}

/* reference .quote: minmax(0, 8fr) minmax(0, 4fr), gap clamp(28px, 4vw, 56px).
   The block's own 66.66/33.33 basis shrinks to exactly that 2:1 split once the gap
   is right, so the flex layout is kept as authored.

   The reference also sets align-items: start; core forces `normal !important` on
   Columns and it is left alone — stretched columns give the sticky aside room to
   travel, and nothing inside them stretches, so the rendered geometry is identical. */
.wp-block-columns.quote {
	gap: clamp(28px, 4vw, 56px);
}

/* Reference breakpoints. Core stacks columns at 781px with !important and forces
   nowrap above it, so matching the reference's 1179px / 1023px needs the same
   weight — this is core's own mechanism, not a specificity workaround. */
@media (max-width: 1179px) {
	.wp-block-columns.quote {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.quote > .wp-block-column {
		flex-basis: 100% !important;
	}

	.aside {
		position: static;
	}
}

@media (max-width: 1023px) {
	.worksheet .wp-block-columns {
		grid-template-columns: 1fr;
	}

	.worksheet__aside {
		width: 100%;
	}
}

/* The rush plate's hazard band is a class on the plate rather than a block inside
   it, matching the page-head treatment. .rush-plate has both pseudo-elements free,
   so the band goes on ::before and the plate reserves its 7px as top padding. */
.rush-plate {
	--sb-band-h: 7px;
	position: relative;
	padding-top: var(--sb-band-h);
}

.rush-plate::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--sb-band-h);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--sb-red) 0 14px,
		var(--sb-black) 14px 28px
	);
}

/* ==========================================================================
   Editor-authored Group / Columns geometry (About page and anything built the
   same way). Core has no control that centres a block once it has a width, and
   on a vertical flex container "Justification: center" is mapped to align-items,
   which centres the children rather than the block itself — so a 800px group sat
   against the left edge. Auto inline margins are inert on a full-width block, so
   this only takes effect where a width was actually set.
   ========================================================================== */

.wp-block-group[style*="width:"],
.wp-block-columns[style*="width:"] {
	margin-inline: auto;
	max-width: 100%;
}

/* Split rows: photo one side, copy the other. Authored as Columns on both Home and
   About, so both carry the `split` class and this one rule owns them. Rows that are
   a direct child of a full-bleed section carry the gutter the reference's .wrap
   provided; where the row already has .wrap, that supplies it instead. */
.wp-block-columns.split:not(.wrap) {
	width: min(100% - var(--gutter) * 2, calc(var(--maxw) - var(--gutter) * 2));
	margin-inline: auto;
}

/* The pull statement's centring lived on .pull__inner, which is gone now that the
   row is a plain Group. .pull__text is still there, so it carries it. */
.pull__text {
	text-align: center;
}

/* ==========================================================================
   Reference rows authored as Columns blocks.

   Each of these rows already carries its geometry on its own class. Core prints its
   block stylesheet on render, which can land after the theme's, so
   `.wp-block-columns { display: flex }` wins the tie against `.industries
   { display: grid }` and the row collapses. Each row therefore re-asserts its
   display and tracks at (0,2,0). Values are the reference's, unchanged.

   Core also inserts a column wrapper between the row and each item and gives it an
   inline flex-basis. The wrapper is reduced to a pass-through so the item fills it;
   in a grid row the inline basis is inert, in the flex row it has to be cleared.
   ========================================================================== */

.wp-block-columns.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 26px);
}

.wp-block-columns.industries {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 22px);
}

.wp-block-columns.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
}

.wp-block-columns.stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.wp-block-columns.cap__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

.wp-block-columns.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.wp-block-columns:where(.cards, .industries, .steps, .stats__list, .cap__head, .split, .rush__inner) {
	margin-block: 0;
	flex-wrap: nowrap;
}

/* The rush band is the reference's flex row: flexible copy, fixed-width side.
   The side needs a definite basis — left to size itself it takes the max-content of
   the product photo (1400px intrinsic) and blows the row out to 3000px. */
.wp-block-columns.rush__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 64px);
}

.wp-block-columns.rush__inner > .wp-block-column:first-child {
	flex: 1 1 auto !important;
	min-width: 0;
}

.wp-block-columns.rush__inner > .wp-block-column:last-child {
	flex: 0 0 min(380px, 100%) !important;
}

.wp-block-columns:where(.cards, .industries, .steps, .stats__list, .cap__head, .split)
	> .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0;
	min-width: 0;
	padding: 0;
}

/* Rows whose items must fill the track — cards and tiles are equal-height plates,
   so the column becomes a flex box and its single child stretches. */
.wp-block-columns:where(.cards, .industries, .steps, .stats__list) > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns:where(.cards, .industries, .steps, .stats__list) > .wp-block-column > * {
	flex: 1 1 auto;
	min-width: 0;
}

/* Content rows stay in normal flow: a flex column would stop adjacent margins
   collapsing, which added 21px to the copy beside the photo. */
.wp-block-columns:where(.cap__head, .split, .rush__inner) > .wp-block-column {
	display: block;
	min-width: 0;
	padding: 0;
}

/* .cap__head keeps the gap the reference puts between it and the card grid, which
   the blanket margin reset above would otherwise remove */
.wp-block-columns.cap__head {
	margin-bottom: var(--space-block);
}

/* Rows the reference centres vertically: the column is a grid item, so it has to
   centre itself rather than stretch, or the copy sits at the top of the taller
   photo column instead of beside its middle. */
.wp-block-columns:where(.cap__head, .split) > .wp-block-column {
	align-self: center;
}

/* Reference breakpoints (§22): .cards/.steps 2-up at 1023 then 1-up at 639,
   .industries 2-up at 1279 then 1-up at 639, .stats__list stays 2-up,
   .cap__head and .split collapse at 1023, .rush__inner stacks at 1023. */
@media (max-width: 1279px) {
	.wp-block-columns.industries {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1023px) {
	.wp-block-columns.cards,
	.wp-block-columns.steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-columns.cap__head,
	.wp-block-columns.split {
		grid-template-columns: 1fr;
	}

	/* reference .rush__inner stacks and left-aligns below 1024 */
	.wp-block-columns.rush__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.wp-block-columns.rush__inner > .wp-block-column:last-child {
		flex: 0 0 auto !important;
	}

}

@media (max-width: 639px) {
	.wp-block-columns.cards,
	.wp-block-columns.steps,
	.wp-block-columns.industries {
		grid-template-columns: 1fr;
	}

	.wp-block-columns.stats__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- stats strip separators, re-expressed for the Columns structure ----------
   The reference draws them with sibling and :nth-child selectors on .stats__item
   (`.stats__item + .stats__item::before` for the vertical hairline, and a 2x2 border
   pattern below 640px). Each item now sits in its own .wp-block-column, so the items
   are no longer siblings and none of those selectors match — the dividers had
   silently disappeared. They are restated against the column instead.

   Below 640px the items stack one per row at the owner's request. The static build
   keeps them 2-up there, where the long labels force the tracks wider than the
   viewport and the strip overflows; stacking removes that. */

.wp-block-columns.stats__list > .wp-block-column + .wp-block-column .stats__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 639px) {
	.wp-block-columns.stats__list {
		grid-template-columns: 1fr;
	}

	/* stacked: the divider becomes a rule above each item after the first */
	.wp-block-columns.stats__list > .wp-block-column + .wp-block-column .stats__item::before {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}
}

/* The ported base `a:not(.wp-element-button):hover` and `.mobile-bar a:hover` are
   both (0,2,1); sections.css loads last, so the override belongs here or the bar's
   labels turn red — red on red on the Get-a-Quote half. */
.mobile-bar a:hover,
.mobile-bar a:focus-visible {
	color: var(--sb-white);
}

/* The base link colour (0,1,1) outranks .mobile-nav__phone (0,1,0), so the shop
   number came out red instead of navy. */
.mobile-nav__contact a.mobile-nav__phone {
	color: var(--sb-navy);
}

.mobile-nav__contact a.mobile-nav__phone:hover strong {
	color: var(--sb-red-deep);
}

/* Lightbox trigger: the reference's .tile__zoom chip. Core positions the button with
   inline styles from its interactivity API and gives it no background, so only the
   placement is left to core; everything else is the reference's. */
.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	border-radius: var(--radius-sm);
	background: rgba(10, 12, 16, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
		background-color 200ms var(--ease-out);
	cursor: pointer;
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image:hover button.lightbox-trigger,
.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger:focus-visible {
	opacity: 1;
	transform: none;
	background: var(--sb-red);
}

.section .wp-block-gallery.has-nested-images figure.wp-block-image button.lightbox-trigger svg {
	width: 18px;
	height: 18px;
	fill: var(--sb-white);
}

/* ---------- FAQ accordion (reference §42) ----------
   core/details renders <details class="wp-block-details"><summary>text</summary>, and a
   summary holds plain text only — so the reference's <span class="faq__sign"> becomes a
   background on the summary, the plus swapped for a minus when the row opens. */

.faq {
	border-top: 1px solid var(--sb-line);
}

.faq .wp-block-details {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--sb-line);
}

.faq .wp-block-details > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--ff-display);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--sb-navy);
	transition: color 160ms var(--ease-out);
}

.faq .wp-block-details > summary::-webkit-details-marker,
.faq .wp-block-details > summary::marker {
	display: none;
	content: "";
}

.faq .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1px solid var(--sb-line);
	border-radius: var(--radius-sm);
	background-color: var(--sb-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23CE372B'%3E%3Crect x='3' y='9' width='14' height='2'/%3E%3Crect x='9' y='3' width='2' height='14'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.faq .wp-block-details > summary:hover,
.faq .wp-block-details[open] > summary {
	color: var(--sb-red-deep);
}

.faq .wp-block-details > summary:hover::after,
.faq .wp-block-details[open] > summary::after {
	border-color: var(--sb-red);
	background-color: rgba(206, 55, 43, 0.06);
}

.faq .wp-block-details[open] > summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='9' width='14' height='2' fill='%23CE372B'/%3E%3C/svg%3E");
}

.faq .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--sb-red);
	outline-offset: 3px;
}

.faq .wp-block-details > :not(summary) {
	max-width: 72ch;
	padding-right: 44px;
	padding-left: 2px;
	color: var(--sb-text-muted);
	line-height: 1.65;
}

.faq .wp-block-details > p {
	margin-block-end: 12px;
}

.faq .wp-block-details > :last-child {
	margin-block-end: 0;
	padding-bottom: 24px;
}