/* ==========================================================================
   editorial.css — "Warm Architectural Editorial"
   Site-wide editorial-polish skin for home-ambient.si (Slovenian premium
   furniture retailer). A TOKEN + OVERRIDE layer over the vendored Inspiro /
   Bootstrap theme — loads AFTER theme.css / custom.css and wins by cascade.
   Plain CSS, no build step, no JS.

   The primary CTA is .ed-cta: a filled brand-gold button with a dark label. The
   render-board fork that used to live here (body.bt-ghost vs body.bt-bronze) was
   settled in favour of the fill; .ed-cta-ghost is the opt-in secondary.

   Accessibility notes baked into the palette (verified, not asserted):
     --ink   on --paper .... 13.8:1   (body/titles)
     --ink-2 on --paper ....  5.2:1   (secondary text — passes AA normal)
     --accent on --paper ...  3.5:1   (FAILS AA text; used as LINE/border ONLY)
     --ink on --btn-fill ...  5.35:1  (primary CTA — brand gold #AD9471 + dark label; passes AA)
   Consequence: brass (--accent) never carries small text; kicker / index /
   NOVO text is set in --ink. Brass appears only as rules, underlines, marks,
   focus ring and active states (all non-text, >=3:1).
   ========================================================================== */

:root {
  /* --- Paper & ink ------------------------------------------------------- */
  --paper:    #F4F1EA;   /* page ground */
  --paper-2:  #EDE8DE;   /* recessed panels / hairline fills */
  --ink:      #26241F;   /* primary text */
  --ink-2:    #6A6459;   /* secondary text */
  --charcoal: #2A2724;   /* warm dark — replaces theme cool slate #404859 */

  /* --- Accent (LINE ONLY) & button fill ---------------------------------- */
  --accent:   #9C7C3C;   /* brass — rules, underlines, marks, active states */
  --btn-fill: #AD9471;   /* brand gold (from the logo) — primary CTA fill; paired with dark --ink label */

  /* --- Hairlines --------------------------------------------------------- */
  --line:     rgba(38, 36, 31, 0.14);    /* on light */
  --line-2:   rgba(38, 36, 31, 0.28);    /* stronger divider */
  --line-inv: rgba(244, 241, 234, 0.20); /* on dark */

  /* --- Type scale -------------------------------------------------------- */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h2:      clamp(1.6rem, 2.6vw, 2.1rem);
  --fs-h3:      clamp(1.02rem, 1.2vw, 1.18rem);
  --fs-kicker:  0.78rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.8125rem;   /* 13px */
  --lh-tight:   1.08;
  --lh-body:    1.5;

  /* --- Spacing scale (4 / 8 based) --------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;      --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* --- Structure --------------------------------------------------------- */
  --maxw:      75rem;                              /* 1200px container */
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 8vw, 8rem);             /* 64 -> 128px */
  --r-img:     0.1875rem;                          /* 3px — crisp, not bubbly */
  --tracked:   0.14em;                             /* signature kicker tracking */
  --dur:       0.28s;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);  /* ease-out */
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.ed-section { padding-block: var(--section-y); }

/* Give repeated sections an alternating warmth without a hard band */
.ed-section + .ed-section { border-top: 1px solid var(--line); }

/* Focus — brass ring (non-text 3.5:1 on light, 3.8:1 on dark) */
a:focus-visible,
.btn:focus-visible {
  outline: 0.14rem solid var(--accent);
  outline-offset: 0.2rem;
  border-radius: 0.06rem;
}

/* ==========================================================================
   SIGNATURE GRAMMAR
   tracked-caps kicker -> oversized LEFT-SET italic-serif title ->
   optional right-offset intro -> full-width brass hairline rule
   ========================================================================== */

/* Kicker: Poppins tracked-caps. Set in --ink-2 (5.2:1), NOT brass. */
.ed-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
}
/* Over dark photography the kicker goes paper */
.ed-eyebrow-inv { color: var(--paper); }

/* Section header block — LEFT-SET, asymmetric (title left / action right),
   closed by a full-width BRASS hairline. Kills the theme's centered :before dash. */
.heading-text.heading-section.ed-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-5);
  text-align: left;
  margin: 0 0 clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--accent);   /* the brass signature rule */
}
.heading-text.heading-section.ed-section-head > .ed-head-main { grid-column: 1; }
.heading-text.heading-section.ed-section-head > .ed-head-action {
  grid-column: 2;
  justify-self: end;
  padding-bottom: 0.2rem;
}

/* Neutralize the theme's centered dash before H2 */
.heading-text.heading-section > h2:before {
  content: none !important;
  display: none !important;
}

/* Big section title — italic Newsreader display, left-set */
.heading-text.heading-section.ed-section-head h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  text-align: left;
}

/* Optional right-offset intro (Poppins, narrow measure, secondary) */
.ed-section-intro {
  max-width: 34ch;
  color: var(--ink-2);
  font-size: var(--fs-body);
  margin: 0;
}

/* ==========================================================================
   HEADER — transparent editorial bar over the hero
   ========================================================================== */
#header.ed-header[data-transparent="true"] {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  background: transparent;
}
.ed-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  gap: var(--sp-6);
}
.ed-logo img { height: 2.5rem; width: auto; display: block; }
.ed-nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  align-items: center;
}
.ed-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
}
/* active / hover — brass underline (line accent) */
.ed-nav a.is-active::after,
.ed-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.11rem;
  background: var(--accent);
}

/* ==========================================================================
   HERO — .inspiro-slider.slider-fullscreen > .slide > .slide-captions
   ========================================================================== */
.ed-hero.inspiro-slider.slider-fullscreen { position: relative; }
.ed-hero .slide {
  position: relative;
  min-height: 88vh;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Legibility scrim — LEFT-weighted (content is left-set). rgba = charcoal
   channels (42,39,36); top band darkens for the transparent nav. */
.ed-hero .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 39, 36, 0.55) 0%, rgba(42, 39, 36, 0) 22%),
    linear-gradient(90deg,
      rgba(42, 39, 36, 0.82) 0%,
      rgba(42, 39, 36, 0.55) 34%,
      rgba(42, 39, 36, 0.18) 66%,
      rgba(42, 39, 36, 0) 100%);
}

.ed-hero .slide-captions {
  position: relative;
  z-index: 2;
  padding-block: clamp(6rem, 12vh, 9rem) var(--sp-9);
  max-width: 46rem;
}
.ed-hero .ed-eyebrow {
  color: var(--paper);
  margin-bottom: var(--sp-5);
}
/* Hero headline — italic Newsreader display.
   Keyed on the class, not `h1.slide-title`: only the first slide is the page <h1>, the
   rest are <p> (see streams/main_header_block.html). */
.ed-hero .slide-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 var(--sp-5);
  text-shadow: 0 0.06rem 1.6rem rgba(42, 39, 36, 0.35);
}
/* Theme parity for the slides that are NOT the page <h1>.

   This does not belong here on aesthetic grounds — it restates the vendored theme's own
   numbers — but the alternative is a hero whose second slide is body text. The theme
   styles the two elements separately and outranks the editorial layer on both:

     style.css:1450  .inspiro-slider .slide .slide-captions h1    (0,3,1)  80px/700
     style.css:1460  .inspiro-slider .slide .slide-captions > p   (0,3,1)  20px/400

   .ed-hero .slide-title is (0,2,0) and loses to each. So when slides 2+ became <p> to
   stop the page emitting one <h1> per slide, they silently dropped to 20px — measured,
   not inferred. Matching the theme's h1 values here keeps every slide identical to the
   hero the render board approved, rather than "fixing" slide 1 into something nobody
   has judged. Both breakpoints, because the theme splits them again below 992px.

   If the theme is ever unvendored, delete this block and let .ed-hero .slide-title win. */
body.ed .ed-hero .slide .slide-captions p.slide-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 80px;
  margin-bottom: 30px;
}
@media (max-width: 991.98px) {
  body.ed .ed-hero .slide .slide-captions p.slide-title {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 14px;
  }
}
.ed-hero .ed-hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  color: var(--paper);
  opacity: 0.92;
  margin: 0 0 var(--sp-7);
  max-width: 34ch;
}

/* Demoted promo — slim editorial footnote strip, NOT a shout banner */
.ed-hero .ed-promo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(42, 39, 36, 0.42);
  border-top: 1px solid var(--line-inv);
  backdrop-filter: saturate(1.1);
}
.ed-hero .ed-promo .ed-promo-mark {
  width: 0.5rem; height: 0.5rem;
  background: var(--accent);   /* brass mark — the one line-accent here */
  flex: none;
}

/* ==========================================================================
   BUTTONS — base + the V1/V2 fork
   Fixes the theme's white-on-gold primary (2.9:1 AA FAIL).
   ========================================================================== */
.btn.ed-cta,
a.btn.ed-cta:not([href]):not([tabindex]) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  text-decoration: none;
}
/* trailing arrow */
.btn.ed-cta::after {
  content: "\2192";   /* → */
  font-size: 1.05em;
  transition: transform var(--dur) var(--ease);
}
.btn.ed-cta:hover::after { transform: translateX(0.2rem); }

/* --- PRIMARY CTA (operator pick: filled brand gold, dark label) ---------
   Applies by DEFAULT — no body class. Brand gold #AD9471 fill + dark ink
   label ≈5.35:1 (white would be 2.9:1, fails AA). Same on light and on the
   dark hero (gold reads well over photography). */
.btn.ed-cta,
a.btn.ed-cta:not([href]):not([tabindex]),
.slide-captions .btn.ed-cta {
  background: var(--btn-fill);
  border-color: var(--btn-fill);
  color: var(--ink);
}
.btn.ed-cta:hover,
.btn.ed-cta:focus,
.slide-captions .btn.ed-cta:hover,
.slide-captions .btn.ed-cta:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- SECONDARY CTA — opt-in ghost/outline via .ed-cta-ghost ------------- */
.btn.ed-cta.ed-cta-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn.ed-cta.ed-cta-ghost:hover,
.btn.ed-cta.ed-cta-ghost:focus {
  background: var(--ink);
  color: var(--paper);
}
.slide-captions .btn.ed-cta.ed-cta-ghost {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.slide-captions .btn.ed-cta.ed-cta-ghost:hover,
.slide-captions .btn.ed-cta.ed-cta-ghost:focus {
  background: var(--paper);
  color: var(--ink);
}

/* Tertiary read-more link (identical in both variants) — brass underline */
.ed-link {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--accent);   /* brass line accent */
}
.ed-link::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease);
}
.ed-link:hover { color: var(--ink-2); }
.ed-link:hover::after { transform: translateX(0.2rem); }

.ed-cta-row { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ==========================================================================
   CATEGORY TILES — .our-services .grid-layout.grid-2-columns > .grid-item
   Repeating set: zero-padded index via counter() (no markup change — the
   number is a ::before on the existing label element).
   ========================================================================== */
.our-services .grid-2-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.our-services .grid-item { margin: 0; }
.our-services .grid-item > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.our-services .grid-item .img-fluid.rounded {
  width: 100%;
  aspect-ratio: 1 / 1;          /* uniform square crop -> tiles align cleanly */
  object-fit: cover;
  border-radius: var(--r-img);
  display: block;
  transition: transform 0.5s var(--ease);
}
.our-services .grid-item:hover .img-fluid.rounded { transform: scale(1.03); }

/* Caption: hairline rule, then the category name (NO index number). */
.our-services .ed-tile-cap {
  display: block;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* Category name — Newsreader ROMAN, left-set */
.our-services .ed-tile-label {
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ink);
}

/* ==========================================================================
   PRODUCT CARDS — SCOPED to the catalog via .ed-products (added to the product
   list grid). This deliberately does NOT touch .reference-grid .product, so the
   references portfolio keeps its own approved design (references.css).
   ========================================================================== */
/* Real catalog markup: .shop > .grid-2-columns > .grid-item > .product.
   3-up inside the 9-col content area (the critic's 2->3 rec; 4-up is cramped
   next to the filter sidebar). */
.ed-products .grid-2-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.ed-products .grid-item { margin: 0; width: auto; }
.ed-products .product { margin: 0; position: relative; }

.ed-products .product .product-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-img);
}
.ed-products .product .product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.ed-products .product:hover .product-image img { transform: scale(1.03); }

/* KILL the theme's cyan/red badges -> warm caps chips over the photo (no cyan). */
.ed-products .product .product-image .product-new,
.ed-products .product .product-image .product-hot,
.ed-products .product .product-image .product-sale,
.ed-products .product .product-image .product-sale-off {
  position: absolute;
  left: 0.75rem;
  background: rgba(38, 36, 31, 0.86);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.32rem 0.5rem;
}
.ed-products .product .product-image .product-new  { top: 0.75rem; }
.ed-products .product .product-image .product-hot  { top: 2rem; }
.ed-products .product .product-image .product-sale { top: 3.25rem; }
.ed-products .product .product-image .product-sale-off {
  top: 0.75rem; left: auto; right: 0.75rem;
  background: var(--accent); color: var(--ink);
}
.ed-products .product .product-overlay { display: none; }   /* drop theme quick-view */

/* Caption block (real wrapper is .product-description) */
.ed-products .product .product-description {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* Manufacturer kicker (NO index number) */
.ed-products .product .product-category {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 1;
  margin: 0 0 var(--sp-2);
}
/* Product title — Newsreader ROMAN */
.ed-products .product .product-title { max-width: 100%; margin: 0; }
.ed-products .product .product-title h3 { margin: 0; }
.ed-products .product .product-title a,
.ed-products .product .product-title h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--ink);
  text-decoration: none;
}
/* Price. The theme right-aligns this (a shop-SKU convention), which on a left-set card put
   the price on the opposite edge from the title it belongs to -- and wrapped the € onto its
   own line on any price over four digits. */
.ed-products .product .product-price {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-align: left;
  /* text-align alone was not enough: the theme also floats this block right, so it kept
     starting ~100px in from the card's left edge with the label left-aligned inside it. */
  float: none;
  display: block;
  width: 100%;
}
.ed-products .product .product-price ins { text-decoration: none; color: var(--ink); }
.ed-products .product .product-price del { color: var(--ink-2); opacity: 0.7; margin-right: 0.4rem; }

/* Flag stack: one flex column pinned to the top-left of the frame. Replaces four
   absolutely-positioned siblings that overlapped whenever a product carried two flags. */
.ed-badge-stack {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.ed-badge-stack > span { position: static; }

/* ==========================================================================
   BREADCRUMB — the way back, which the detail pages did not have
   ========================================================================== */
.ed-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-2);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.ed-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.ed-breadcrumb a:hover { color: var(--ink); border-bottom: 1px solid var(--accent); }
.ed-breadcrumb [aria-current="page"] { color: var(--ink); }
.ed-breadcrumb span[aria-hidden] { opacity: 0.45; }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.ed-product { padding-bottom: var(--section-y); }
.ed-product-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ed-product-gallery .product,
.ed-product-gallery .product-image { margin: 0; position: relative; }
.ed-product-carousel { border-radius: var(--r-img); overflow: hidden; }
.ed-product-carousel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* The information column: kicker -> serif title -> price -> one primary CTA -> facts */
.ed-product-info { padding-top: var(--sp-2); }
.ed-product-brand { margin-bottom: var(--sp-3); }
.ed-product-brand a.ed-eyebrow { text-decoration: none; }
.ed-product-brand a.ed-eyebrow:hover { color: var(--ink); }
.ed-product-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
}
.ed-product-price {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--accent);
}
.ed-product-price ins { text-decoration: none; color: var(--ink); font-weight: 500; }
.ed-product-price del { color: var(--ink-2); opacity: 0.75; margin-right: var(--sp-3); }
/* Most of the catalogue has no price, so a priceless product renders no price row at all
   (operator's call at the render board). The brass rule that closed the price block then has
   to move down, or the CTA loses its divider on exactly those products. */
.ed-product-title + .ed-product-actions {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--accent);
}
.ed-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
/* Facts as a definition list: label above value, hairline-separated rows. */
.ed-product-meta { margin: 0; }
.ed-product-meta-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}
.ed-product-meta-row:last-child { border-bottom: 1px solid var(--line); }
.ed-product-meta dt {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ed-product-meta dd { margin: 0; color: var(--ink); }
.ed-product-meta dd a { color: var(--ink); border-bottom: 1px solid var(--accent); text-decoration: none; }
.ed-product-meta dd a:hover { color: var(--ink-2); }
.ed-product-brand-note {
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--accent);
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.ed-product-brand-note p { margin: 0; }

.ed-product-description,
.ed-product-related { padding-top: var(--section-y); }

@media (max-width: 767.98px) {  /* token-ok: layout breakpoint */
  .ed-product-lead { grid-template-columns: 1fr; }
  .ed-product-meta-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ==========================================================================
   404
   ========================================================================== */
.ed-error { padding-block: var(--section-y); }
.ed-error-inner { max-width: 44ch; }
.ed-error-inner h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.ed-error-inner p { color: var(--ink-2); margin: 0 0 var(--sp-6); }
.ed-error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }

/* ==========================================================================
   PAGE HEAD — the shared hero band (includes/page_head.html)
   Left-set, so it matches the section grammar instead of the theme's centred band.
   ========================================================================== */
/* Every selector here is written against `#page-title` rather than `.ed-page-head` alone:
   the theme styles this band by id, so a plain class selector at (0,1,0)-(0,2,0) loses to
   its (1,0,0)-(1,1,0) regardless of load order. Two things were being silently overridden:
   the band's own background, and text-align.

   The background matters more than it looks. The theme's #page-title is a NEARLY WHITE
   band (#fbfbfb) that the old per-template copies darkened by always emitting
   `<div class="bg-overlay">` -- a dark scrim -- whether or not there was a photo behind it.
   page_head.html only emits the scrim when there is actually an image to scrim, so without
   this rule the white .text-light <h1> landed on #fbfbfb at 1.04:1: the page heading was
   invisible on every template with no banner image set. */
body.ed #page-title.ed-page-head:not(.ed-page-head-photo) {
  background-color: var(--charcoal);
}
body.ed #page-title.ed-page-head {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
body.ed #page-title.ed-page-head .page-title {
  text-align: left;
  padding: 0;
  min-height: 0;
}
body.ed #page-title.ed-page-head .page-title h1 { margin: 0; }
body.ed #page-title.ed-page-head .page-title span.text-light {
  display: block;
  margin-top: var(--sp-4);
  max-width: 42ch;
  opacity: 0.86;
}

/* ==========================================================================
   FORMS — contact, product enquiry, search
   ========================================================================== */
.ed-field { margin-bottom: var(--sp-5); }
.ed-field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
/* The theme's asterisk was .text-danger (#e6335e) -- the loudest colour on the page, spent
   on "this field is required". Brass says the same thing in the palette's own voice. */
.ed-required { color: var(--accent); margin-left: 0.15em; }
.ed-field .form-control {
  border-radius: 1px;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-body);
  padding: 0.8rem 0.9rem;
}
/* help_text was .text-muted, which style.css sets to #6c757d at 4.0:1 on paper -- under the
   4.5:1 AA floor for the one piece of text that explains what to type. */
.ed-field-help {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.ed-field-error {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: #8C2F2F;             /* 6.4:1 on paper; the theme's #e6335e is 3.4:1 */
  font-weight: 500;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ed-contact,
.ed-inquiry,
.ed-thanks,
.ed-generic,
.ed-taxonomy,
.ed-brands,
.ed-brand,
.ed-search { padding-block: var(--section-y); }

.ed-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.ed-contact-intro { margin-bottom: var(--sp-6); color: var(--ink-2); }
.ed-contact-intro p:last-child { margin-bottom: 0; }
.ed-address-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-6);
}
.ed-address { font-style: normal; margin: 0; font-size: var(--fs-small); line-height: 1.65; }
.ed-address-label {
  display: block;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--accent);
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  font-size: var(--fs-kicker);
  color: var(--ink-2);
}
.ed-address p { margin: 0 0 var(--sp-3); }
.ed-map { margin-top: var(--sp-7); border-radius: var(--r-img); overflow: hidden; }

.ed-inquiry-inner,
.ed-thanks-inner { max-width: 38rem; }
.ed-thanks-inner p { font-size: 1.15rem; color: var(--ink); }

@media (max-width: 991.98px) {  /* token-ok: layout breakpoint */
  .ed-contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TAXONOMY — category tiles reuse the homepage .our-services grammar
   ========================================================================== */
.our-services .ed-tile-note {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
/* A category with no image keeps its slot instead of collapsing the tile. */
.ed-tile-placeholder {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-img);
}
.ed-empty { color: var(--ink-2); font-style: italic; }

/* --- Brand grid ---------------------------------------------------------- */
/* The hairline grid is drawn by the tiles, not by painting a background through a 1px
   gap: with fewer brands than columns, auto-fill left empty tracks and that background
   rendered as a bare grey slab across the rest of the row. */
.ed-brand-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.ed-brand-grid > li { margin: 0; }
.ed-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.ed-brand-tile:hover { background: var(--paper-2); border-color: var(--accent); }
/* 4.5rem, not 3.5: plugins.css sets :root{font-size:14px}, so every rem on this site is
   87.5% of what it reads as, and 3.5rem capped these at 49px. */
.ed-brand-tile img { max-width: 100%; height: auto; max-height: 4.5rem; width: auto; }
/* A brand with no logo used to render an empty <li>: the slot was there, the brand was
   not, and there was nothing to click. */
.ed-brand-wordmark {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}

/* --- Brand detail -------------------------------------------------------- */
.ed-brand-lead {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ed-brand-lead:has(.ed-brand-intro:only-child) { grid-template-columns: minmax(0, 1fr); }
.ed-brand-logo { margin-bottom: var(--sp-6); }
.ed-brand-logo img { height: 3rem; width: auto; }
.ed-brand-copy p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.65;
}
.ed-brand-meta { margin-top: var(--sp-6); }
.ed-brand-gallery { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.ed-brand-gallery img { width: 100%; height: auto; border-radius: var(--r-img); display: block; }
.ed-brand-cta { display: flex; justify-content: flex-start; }

@media (max-width: 767.98px) {  /* token-ok: layout breakpoint */
  .ed-brand-lead { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CATALOGUE — layout + the single filter panel
   ========================================================================== */
.ed-catalog { padding-block: var(--section-y); }
.ed-catalog-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.ed-catalog-main { min-width: 0; }

/* Desktop: no disclosure. The summary goes away and the panel is forced open, so the same
   markup that collapses on a phone is a plain sidebar here.
   `details > summary { display: none }` also removes the UA marker, and setting
   `display: block` on the body element overrides the UA's hiding of non-summary children
   -- verified in-page rather than assumed, because the mechanism differs between engines. */
@media (min-width: 992px) {  /* token-ok: layout breakpoint */
  .ed-filters-wrap > summary { display: none; }
  .ed-filters-wrap > .ed-filters-body { display: block; }
  /* Engines hide closed <details> content two different ways: older ones put display:none
     on the slot (which the rule above overrides), newer ones use
     `::details-content { content-visibility: hidden }` (which it does not). Both are
     covered; a browser that does not know this pseudo-element just skips the rule. */
  .ed-filters-wrap::details-content {
    content-visibility: visible;
    display: block;
  }
}

@media (max-width: 991.98px) {  /* token-ok: layout breakpoint */
  .ed-catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .ed-filters-wrap {
    border-block: 1px solid var(--line);
    margin-bottom: var(--sp-6);
  }
  .ed-filters-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--sp-4);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracked);
    text-transform: uppercase;
    color: var(--ink);
    list-style: none;
  }
  .ed-filters-wrap > summary::-webkit-details-marker { display: none; }
  .ed-filters-wrap > summary::after {
    content: "+";
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent);
  }
  .ed-filters-wrap[open] > summary::after { content: "\2212"; }  /* − */
  .ed-filters-wrap > .ed-filters-body { padding-bottom: var(--sp-5); }
}

.ed-filters .widget-title {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--accent);
}
.ed-filters .widget-title:first-of-type { margin-top: var(--sp-6); }
.ed-filters-clear { margin-bottom: var(--sp-5); }
.ed-filters-search label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ed-filters-search .form-control { border-radius: 1px 0 0 1px; background: #fff; }
.ed-filters-search .btn.ed-cta { padding-inline: var(--sp-4); }
.ed-filters-search .btn.ed-cta::after { content: none; }   /* the arrow belongs on links, not on a search submit */

/* A compact variant of the CTA for in-panel controls */
.btn.ed-cta.ed-cta-sm { padding: 0.55rem 0.9rem; font-size: var(--fs-kicker); }
.btn.ed-cta.ed-cta-sm::after { content: none; }

/* Category / outlet filters: a hairline list, not a stack of shadowed pill buttons.
   The theme markup was `.btn.btn-light.btn-shadow.btn-rounded.btn-iconed` per row -- four
   button modifiers deep, and the active state added .active on top of .btn-light, so the
   "selected" filter was a rounded white pill next to identical rounded white pills. */
.ed-filter-list { list-style: none; margin: 0; padding: 0; }
.ed-filter-list > li { margin: 0; border-bottom: 1px solid var(--line); }
.ed-filter-list > li:first-child { border-top: 1px solid var(--line); }
.ed-filter-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
}
.ed-filter-list a:hover { color: var(--ink-2); }
.ed-filter-list a .count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ed-filter-list a.active {
  font-weight: 600;
  box-shadow: inset 0.15rem 0 0 var(--accent);   /* brass edge marks the current filter */
  padding-left: var(--sp-4);
}
.ed-filter-list a.active .count { color: var(--ink); }

.ed-catalog-empty { color: var(--ink-2); }
.ed-catalog-empty p { margin-bottom: var(--sp-4); }
.ed-pagination { margin-top: var(--section-y); }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.ed-search-form { max-width: 34rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ed-search-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ed-search-row { display: flex; gap: var(--sp-3); }
.ed-search-row .form-control { border-radius: 1px; background: #fff; padding: 0.8rem 0.9rem; }
.ed-search-count {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--accent);
}
.ed-search-results { list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.ed-search-results > li { margin: 0; border-bottom: 1px solid var(--line); }
.ed-search-result {
  display: block;
  padding-block: var(--sp-5);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.ed-search-result:hover { background: var(--paper-2); }
.ed-search-result .ed-eyebrow { margin-bottom: var(--sp-2); }
.ed-search-result-title {
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
}
.ed-search-result-desc {
  display: block;
  margin-top: var(--sp-2);
  max-width: 62ch;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.ed-search-empty { max-width: 42ch; }
.ed-search-empty p { color: var(--ink); }
.ed-search-empty-hint { color: var(--ink-2); font-size: var(--fs-small); }
.ed-search-suggestions {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* ==========================================================================
   STREAMFIELD BLOCKS
   Every block used to open its own <section> with its own container and its own ad-hoc
   padding class (p-b-0, p-b-10, m-b-40), so vertical rhythm depended on which blocks an
   editor happened to stack. Blocks are plain .ed-block children of the host page's
   container now, and the rhythm is one rule.
   ========================================================================== */
.ed-block + .ed-block { margin-top: var(--section-y); }
.ed-block:first-child { margin-top: 0; }

/* A block-level band stays inside the host container. Full-bleeding out of a Bootstrap
   .container needs `margin-inline: calc(50% - 50vw)` plus `width: 100vw`, and 100vw counts
   the scrollbar -- which is a horizontal scroll on every desktop browser that shows one.
   Contained, with its own inset, is the version that cannot break the page. */
.ed-block-band {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* Reading measure for rich text */
.ed-prose { max-width: 68ch; }
.ed-prose > :last-child { margin-bottom: 0; }
.ed-prose p { margin-bottom: var(--sp-5); }
.ed-prose h2, .ed-prose h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
}
.ed-lead {
  max-width: 60ch;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.ed-title-text .ed-lead { margin-top: calc(-1 * var(--sp-3)); }

/* --- Cards --------------------------------------------------------------- */
/* Fixed track counts, not `repeat(auto-fit, minmax(...))`. auto-fit stretches two items
   across the full width -- two "cards" a metre wide -- and auto-fill instead leaves empty
   tracks, which showed as bare grid background wherever a grid was painted through its gap.
   An explicit count leaves short rows left-aligned, which is what the grammar wants. */
.ed-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* The theme's .feature-box put every card on a white panel with a drop shadow. On a warm
   paper ground that reads as a floating UI widget, not as editorial content. */
.ed-card > a { display: block; text-decoration: none; color: inherit; }
.ed-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--r-img);
  transition: transform 0.5s var(--ease);
}
.ed-card > a { overflow: hidden; border-radius: var(--r-img); }
.ed-card > a:hover img { transform: scale(1.03); }
.ed-card-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.ed-card-cap h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.ed-card-cap p {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.ed-card-more {
  display: inline-block;
  margin-top: var(--sp-4);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--accent);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Image & text -------------------------------------------------------- */
.ed-image-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ed-image-text-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-img);
}
/* The only difference between the two variants: which column the picture sits in. */
.ed-image-right .ed-image-text-copy { order: 2; }
.ed-image-right .ed-image-text-media { order: 1; }
.ed-image-text:has(.ed-image-text-media:only-child) { grid-template-columns: minmax(0, 1fr); }

/* --- Numbered process ---------------------------------------------------- */
.ed-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
}
.ed-steps > li {
  counter-increment: step;
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  background: var(--paper);
  border-left: 1px solid var(--line);
}
.ed-steps > li:first-child { border-left: 0; }
.ed-steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracked);
  color: var(--accent);
}
.ed-steps h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.ed-steps p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* --- Team / people ------------------------------------------------------- */
.ed-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ed-team-member > a { display: block; text-decoration: none; color: inherit; }
.ed-team-member img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--r-img);
}
.ed-team-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.ed-team-cap .ed-eyebrow { margin-bottom: var(--sp-2); }
.ed-team-cap h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 0;
}
.ed-team-cap p { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ==========================================================================
   REFERENCES — detail page + card typography
   references.css owns the index grid's layout; this brings its type and colour into the
   editorial palette (it was set in the theme's cool greys #8a8f98 / #6a6f78).
   ========================================================================== */
body.ed .reference-grid .product-title h3 a,
body.ed .reference-grid .product-title h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--ink);
  text-decoration: none;
}
body.ed .reference-grid .product-description {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
body.ed .reference-grid .product-category {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body.ed .reference-tagline { color: var(--ink-2); font-size: var(--fs-small); }

.ed-reference { padding-bottom: var(--section-y); }
.ed-reference-lead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ed-reference-copy { max-width: 62ch; }
.ed-reference-copy > :last-child { margin-bottom: 0; }
.ed-reference-meta { padding-top: var(--sp-2); }
.ed-reference-gallery-wrap,
.ed-reference-products { padding-top: var(--section-y); }
.ed-reference-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ed-reference-gallery img { width: 100%; height: auto; display: block; border-radius: var(--r-img); }
.ed-used-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ed-used-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--r-img);
}
.ed-used-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.ed-used-cap .ed-eyebrow { margin-bottom: var(--sp-2); }
.ed-used-cap h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 0;
}
.ed-used-cap p { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-2); }

@media (max-width: 767.98px) {  /* token-ok: layout breakpoint */
  .ed-image-text { grid-template-columns: 1fr; }
  .ed-image-right .ed-image-text-copy,
  .ed-image-right .ed-image-text-media { order: initial; }
  .ed-reference-lead { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {  /* token-ok: layout breakpoint */
  .our-services .grid-2-columns,
  .ed-products .grid-2-columns {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  .ed-nav { display: none; }   /* real theme swaps in the burger menu here */

  .ed-cards,
  .ed-team-grid,
  .ed-used-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* With two columns the left border has to reset on every odd cell, and the rows need a
     rule between them that the single-row desktop layout did not. */
  .ed-steps > li:nth-child(odd) { border-left: 0; }
  .ed-steps > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 575.98px) {  /* token-ok: layout breakpoint */
  .heading-text.heading-section.ed-section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .heading-text.heading-section.ed-section-head > .ed-head-action {
    grid-column: 1;
    justify-self: start;
  }
  .ed-hero .slide { min-height: 92vh; }
  .ed-hero .slide-captions { max-width: 100%; }
  .ed-hero .slide-captions .ed-hero-sub { max-width: none; }

  .ed-cards,
  .ed-reference-gallery,
  .ed-steps { grid-template-columns: minmax(0, 1fr); }
  .ed-steps > li { border-left: 0; }
  .ed-steps > li + li { border-top: 1px solid var(--line); }
  .ed-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep tiles/products two-up (never a lonely one-up scroll) at the small floor */
@media (max-width: 380px) {  /* token-ok: small-phone floor */
  .our-services .grid-2-columns,
  .ed-products .grid-2-columns { gap: var(--sp-4); }
}

/* ==========================================================================
   REDUCED MOTION — show resolved state, never freeze mid-transition
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .our-services .grid-item:hover .img-fluid.rounded,
  .ed-products .product:hover .product-image img { transform: none; }
}

/* ==========================================================================
   REAL-THEME BINDINGS — hero page-title, header/nav, footer
   ========================================================================== */

/* Hero title band (references / generic / product-list) -> italic serif */
#page-title .page-title h1,
#page-title-logoheight .page-title h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
#page-title .page-title span.text-light,
#page-title-logoheight .page-title span.text-light {
  font-family: var(--font-sans);
}

/* --- Header / main menu (theme: #header #mainMenu nav > ul > li > a) ------ */
#header #mainMenu nav > ul > li > a {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* wagtailmenus emits WAGTAILMENUS_ACTIVE_CLASS ("active") and ACTIVE_ANCESTOR_CLASS
   ("ancestor"), NOT the theme's `.current` -- measured in-page. Targeting only .current
   meant neither this layer nor the vendored theme ever marked the current page. */
#header #mainMenu nav > ul > li.active > a,
#header #mainMenu nav > ul > li.ancestor > a,
#header #mainMenu nav > ul > li.current > a,
#header #mainMenu nav > ul > li:hover > a,
#header #mainMenu nav > ul > li:focus > a { color: var(--accent); }
#header #logo img { height: 2.4rem; width: auto; }

/* --- Conversion band (footer CTA) ---------------------------------------- */
/* The band used to carry an inline `background-color:#404859` (the theme's cool slate),
   which this layer overrode via section[style*="404859"]. The markup now sets .ed-band
   instead, so the colour lives here rather than being an attribute-selector hack. */
.ed-band {
  background-color: var(--charcoal);
  color: var(--paper);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.ed-cta-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.ed-cta-band-copy { max-width: 34ch; }
.ed-cta-band-copy h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--accent);   /* the brass signature rule, inverted */
}
.ed-cta-band-copy p {
  margin: var(--sp-4) 0 0;
  color: var(--paper);
  opacity: 0.78;
  font-size: var(--fs-small);
}
.ed-cta-band-action { justify-self: end; }

@media (max-width: 767.98px) {  /* token-ok: layout breakpoint */
  .ed-cta-band-inner { grid-template-columns: 1fr; }
  .ed-cta-band-action { justify-self: start; }
  .ed-cta-band-copy { max-width: none; }
}

/* --- Footer -------------------------------------------------------------- */
#footer, #footer .footer-content { background: var(--paper); color: var(--ink); }
#footer { border-top: 1px solid var(--line); }
#footer a { color: var(--ink); }
#footer .widget-title {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink-2);
}
#footer .copyright-content { border-top: 1px solid var(--line); color: var(--ink-2); }

/* ==========================================================================
   SPECIFICITY REMEDIATION  —  body.ed
   --------------------------------------------------------------------------
   Everything above this line was written assuming it wins on load order. It
   often does not. The vendored theme pads its selectors with :not(), and :not()
   contributes its argument's specificity, so theme rules land at (0,3,0)-(0,3,1)
   against this layer's (0,1,1)-(0,2,1) — and specificity is compared before
   source order. The rules below re-assert the ones that were being silently
   overridden, via the <body class="ed"> hook in base.html.

   Two notes for whoever touches this next:
   - @layer is NOT an option here: unlayered styles beat every layered style, so
     wrapping this file in a layer would make it lose to the entire theme.
   - `html body .btn.ed-cta` does NOT work either — it is (0,2,2), and the class
     column is compared before the element column, so it still loses to (0,3,x).
     The winning shape is to mirror the theme's own :not() chain and add body.ed.
   ========================================================================== */

/* --- Focus visibility (WCAG 2.4.7) --------------------------------------
   style.css:1414  a:not(.btn):not(.badge):focus { outline: none }        (0,3,1)
   style.css:4071  the same for .btn
   Result before this: no link or button on the site had a focus indicator.
   Mirroring the theme's chain gets us to (0,3,2) and wins. */
body.ed a:not(.btn):not(.badge):focus-visible,
body.ed .btn:not(.close):not(.mfp-close):focus-visible,
body.ed button:not(.close):not(.mfp-close):focus-visible,
body.ed input:not([type="hidden"]):focus-visible,
body.ed select:focus-visible,
body.ed textarea:focus-visible,
body.ed [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* --- The paper ground ---------------------------------------------------
   style.css:14 (and again :6802)  section { background-color: #fff }
   painted over body{background:var(--paper)}, so the warm ground never reached
   any content area and --charcoal rendered nowhere on the site.
   .ed-white is the opt-out for full-bleed photography bands, .ed-band for the dark
   conversion band (which sets its own charcoal). */
body.ed section:not(.ed-white):not(.dark):not(.ed-band) {
  background-color: var(--paper);
}
body.ed section.ed-white { background-color: #fff; }

/* --- The bought theme's slate dash --------------------------------------
   The kill at :140 uses `> h2:before`, but the theme's rule is a *descendant*
   selector and the ported markup nests the h2 inside .ed-head-main — so a
   100x2px #404859 dash was still rendering ~10px under the new brass hairline.
   Match by descendant, and reclaim the 60px of bottom margin style.css:4413
   reserved for the dash it no longer draws. */
body.ed .heading-text.heading-section h2:before,
body.ed .heading-text.heading-section h2:after {
  content: none !important;
  display: none !important;
}
body.ed .heading-text.heading-section:not(.ed-section-head) h2 {
  margin-bottom: var(--sp-5);
}

/* --- Homepage service tiles --------------------------------------------
   :404 resets only `margin`, while the catalogue equivalent at :452 correctly
   resets `width` too — so these tiles kept the theme's float/width and rendered
   at half their grid track. */
body.ed .our-services .grid-item {
  margin: 0;
  width: auto;
  float: none;
  position: relative;
}
/* Give the scaling tile a clipping ancestor, as the product card already has,
   so the 1.03 hover does not bleed past the tile's own radius. */
body.ed .our-services .grid-item > a {
  display: block;
  overflow: hidden;
  border-radius: var(--r-img);
}

/* --- Primary CTA -------------------------------------------------------
   theme.css:48 / style.css:4109 reach (0,4,0)-(0,4,1) via :not() padding, so the
   gold fill + WHITE label (2.90:1, an AA failure) survived .ed-cta entirely
   wherever the markup also carried .btn-primary / .btn-light. */
body.ed .btn.ed-cta:not(.close):not(.mfp-close),
body.ed a.btn.ed-cta:not([href]):not([tabindex]) {
  background: var(--btn-fill);
  border-color: var(--btn-fill);
  color: var(--ink);
}
body.ed .btn.ed-cta:not(.close):not(.mfp-close):hover,
body.ed .btn.ed-cta:not(.close):not(.mfp-close):focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* The secondary needs the same treatment for the same reason: the fill rule above is
   (0,5,0), so the plain `.btn.ed-cta.ed-cta-ghost` at (0,3,0) lost and every "secondary"
   button rendered as a second gold primary -- two identical CTAs per view. */
body.ed .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close) {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
body.ed .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close):hover,
body.ed .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close):focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
body.ed .slide-captions .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close) {
  border-color: var(--paper);
  color: var(--paper);
}
body.ed .slide-captions .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close):hover,
body.ed .slide-captions .btn.ed-cta.ed-cta-ghost:not(.close):not(.mfp-close):focus {
  background: var(--paper);
  color: var(--ink);
}

/* --- Footer links ------------------------------------------------------
   style.css:2265  #footer a:not(.btn):not(:hover) { color:#999 }  = 2.53:1.
   This block used to set --paper here, which was written for a dark footer and never
   revisited after the footer went to the paper ground: paper on paper is 1:1, so the
   whole Meni column and both social glyphs rendered invisible. --ink is 13.8:1. */
body.ed #footer a:not(.btn):not(:hover),
body.ed #footer a:not(.btn):not(:hover) i {
  color: var(--ink);
}
body.ed #footer a:not(.btn):hover { color: var(--ink-2); }
body.ed #footer .copyright-content {
  background: var(--paper-2);
  color: var(--ink);
}
body.ed #footer .copyright-content a { color: var(--ink); }

/* --- Interactive boundaries (WCAG 1.4.11) ------------------------------
   The theme's #e4e6ef borders sit at 1.25:1 on white — below the 3:1 required of
   a control boundary. --line/--line-2 cannot do this job either (1.32-1.78:1),
   so this is an opaque edge token: 4.06:1 on white, 3.60:1 on paper. */
body.ed {
  --edge: #8A857A;
}
body.ed .form-control,
body.ed .tags a,
body.ed .pagination .page-link {
  border-color: var(--edge);
}
/* The filter pills are theme buttons, so the winning rule is
   `.btn:not(.close):not(.mfp-close).btn-light` at (0,4,0) -- measured in-page, not
   guessed. Mirroring that chain and adding body.ed reaches (0,5,1). */
body.ed .btn:not(.close):not(.mfp-close).btn-light,
body.ed .btn:not(.close):not(.mfp-close).btn-white,
body.ed button.btn.btn-light,
body.ed a.btn.btn-light:not([href]):not([tabindex]) {
  border-color: var(--edge);
}
body.ed ::placeholder { color: var(--ink-2); opacity: 1; }
/* Manufacturer filters: the theme's .tags are fully-rounded shadowed pills, which next to
   the hairline category list read as two unrelated control systems on one panel. */
body.ed .ed-filters .tags a {
  border-radius: 1px;
  border-color: var(--edge);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  box-shadow: none;
}
body.ed .ed-filters .tags a:hover { border-color: var(--accent); color: var(--ink); }
body.ed .ed-filters .tags a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* The active pagination chip is the only "you are here" signal on the catalogue. */
body.ed .pagination .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- Footer: editorial rhythm -------------------------------------------
   Four columns of settings-driven content that the theme centred on small screens and
   left-set on large, mid-paragraph. Left-set everywhere, on one measure. */
body.ed #footer {
  border-top: 1px solid var(--accent);   /* brass rule closes the page */
}
body.ed #footer .footer-content { padding-block: clamp(2.75rem, 5vw, 4rem); }
body.ed #footer .widget { text-align: left; margin-bottom: var(--sp-5); }
body.ed #footer .widget-title { margin-bottom: var(--sp-4); }
body.ed #footer .widget p,
body.ed #footer .widget div { font-size: var(--fs-small); line-height: 1.65; }
body.ed #footer .widget p:last-child { margin-bottom: 0; }
body.ed .ed-footer-address { display: block; margin-bottom: var(--sp-4); }
body.ed .ed-footer-address:hover { color: var(--ink-2); }
body.ed .ed-footer-nav a { display: block; padding-block: 0.2rem; }
body.ed .ed-footer-nav a:hover { border-bottom: 0; color: var(--ink-2); }
body.ed .ed-footer-logo { display: inline-block; margin-top: var(--sp-5); }
body.ed .ed-footer-logo img { width: 8.75rem; height: auto; }
/* Social: square chips with a real 3:1 boundary instead of the theme's #d7d7d7 (1.28:1) */
body.ed .ed-footer-social ul { margin: 0; padding: 0; }
body.ed .ed-footer-social li a {
  border: 1px solid var(--edge);
  border-radius: 1px;
  color: var(--ink);
}
body.ed .ed-footer-social li a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}
body.ed #footer .copyright-content { padding-block: var(--sp-5); }
body.ed #footer .copyright-text { text-align: center; font-size: var(--fs-small); }
body.ed #footer .copyright-text p { margin: 0; }

/* --- Header: the bar needs a ground on every page that has no hero -------
   includes/header.html hard-codes data-transparent="true", so the theme leaves
   .header-inner at rgba(0,0,0,0) everywhere. That is right on the homepage, where the
   bar sits over the hero photograph -- and wrong on the other twenty-odd templates,
   where a WHITE logo and WHITE nav labels landed on the paper ground at about 1.05:1.
   The site's primary navigation was effectively invisible above the fold on every page
   except the homepage. home_page.html opts into the transparent treatment with
   .ed-has-hero; everything else gets the charcoal bar (white on charcoal = 13.1:1).

   Specificity, measured rather than assumed: the rule that actually wins is
   `#header.dark[data-transparent="true"]:not(.sticky-active) .header-inner` at (1,4,0) --
   a plain `body.ed:not(.ed-has-hero) #header .header-inner` is only (1,3,1) and lost. So
   mirror the theme's whole chain and add the body hook, which lands at (1,6,1).
   :not(.sticky-active) is kept deliberately: once the page scrolls, the theme adds that
   class and paints its own opaque bar, and this should not fight it. */
body.ed:not(.ed-has-hero) #header.dark[data-transparent="true"]:not(.sticky-active) .header-inner,
body.ed:not(.ed-has-hero) #header.dark[data-transparent="true"]:not(.sticky-active) #header-wrap {
  background-color: var(--charcoal);
}

/* --- Header nav: the "you are here" mark --------------------------------
   editorial.css only recoloured li.current > a, and brass text on the dark bar is the
   weakest possible signal -- brass on charcoal is 3.1:1, an AA failure for text. The
   label stays paper and the brass does what brass does everywhere else in this layer:
   it draws a line. */
body.ed #header #mainMenu nav > ul > li > a { position: relative; }
body.ed #header #mainMenu nav > ul > li.active > a,
body.ed #header #mainMenu nav > ul > li.ancestor > a,
body.ed #header #mainMenu nav > ul > li.current > a,
body.ed #header #mainMenu nav > ul > li:hover > a { color: var(--paper); }
body.ed #header #mainMenu nav > ul > li.active > a::after,
body.ed #header #mainMenu nav > ul > li.ancestor > a::after,
body.ed #header #mainMenu nav > ul > li.current > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 0.11rem;
  background: var(--accent);
}

/* --- Product badges ----------------------------------------------------
   style.css:2104 gives these a 42x42 box with line-height:42px, which this layer
   never reset — so tiny labels sat crammed at the top of a dark square and two
   flags on one product overlapped by ~24px. */
body.ed .product .product-new,
body.ed .product .product-hot,
body.ed .product .product-sale,
body.ed .product .product-sale-off {
  width: auto;
  height: auto;
  line-height: 1;
  right: auto;
  padding: 0.35rem 0.6rem;
  font-size: 0.6875rem;
  border-radius: 1px;
  /* The warm chip colours were only ever set under .ed-products, which is the catalogue
     grid scope -- so on the product DETAIL page the same flags kept the theme's cyan and
     crimson (#00c0e4 / #e6335e), the two loudest colours on the site, against a warm
     paper ground. These are the palette-wide defaults; .ed-products still positions them. */
  background: rgba(38, 36, 31, 0.86);
  color: var(--paper);
  border: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
}
body.ed .product .product-sale-off {
  background: var(--accent);
  color: var(--ink);
}

/* --- The hero below 992px ----------------------------------------------
   Two things were wrong on every phone and tablet, and both were invisible from the
   desktop renders the direction was approved on:

   1. style.css:  @media (max-width: 991.98px) { .inspiro-slider .slide .slide-captions
      { text-align: center } }.  The left-set kicker -> serif headline -> CTA is THE
      signature of this direction, and mobile had never once rendered it. Measured, not
      guessed: the caption computed `center` at 390px.

   2. Flickity's prev/next buttons are 78x78 and sit at y 302-380, while the <h1> occupies
      y 322-402 -- the "next" arrow landed on top of the headline's last line, 58px into it.
      The slider keeps its dots and its swipe gesture, so the arrows are the part that goes.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {  /* token-ok: layout breakpoint */
  body.ed .ed-hero.inspiro-slider .slide .slide-captions {
    text-align: left;
  }
  body.ed .ed-hero .flickity-prev-next-button { display: none; }
}

/* --- data-animate failsafe ---------------------------------------------
   style.css:6643 [data-animate]{opacity:0}, and `.visible` is only ever added by
   jQuery Waypoints — which functions.js skips entirely if Waypoint is undefined.
   That gates the <h1> of nine templates, including the homepage hero and its LCP
   element, on third-party JS succeeding. It reliably renders blank in headless
   capture, which is the same failure a real visitor sees if that JS does not load.

   CSS alone cannot fix this: the failure case is "JS ran but Waypoints was absent",
   so an html.no-js hook would already have been removed. The actual guarantee is
   the timeout in base.html, which reveals anything still un-revealed. This block
   only handles reduced-motion, where no reveal animation should run at all.

   Deliberately NOT `opacity:1 !important` — that outranks the animation's own
   declarations and degrades the fade into a translate-only slide. */
@media (prefers-reduced-motion: reduce) {
  body.ed [data-animate] { opacity: 1; }
}