/*
 * Deep-SEO enhancements added by the Next.js rebuild — the original stylesheets
 * are untouched. Loaded after style.css and semantic-fix.css (see layout).
 *
 * Currently: the visible breadcrumb bar. It sits between the inner-page banner
 * and the content, in the site's `.wrap` container (max-width 1200px), styled
 * to match the site's teal accent (#34bdc4) and neutral greys.
 */
.crumbNav {
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.crumbNav .crumbList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #999;
}

.crumbNav .crumbItem {
  display: inline-flex;
  align-items: center;
}

/* Separator between crumbs, drawn with a pseudo-element so it isn't selectable. */
.crumbNav .crumbItem:not(:first-child)::before {
  content: "/";
  margin: 0 8px;
  color: #ccc;
}

.crumbNav .crumbItem a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.crumbNav .crumbItem a:hover {
  color: #34bdc4;
}

/* Current page: muted, not a link. */
.crumbNav .crumbItem [aria-current="page"] {
  color: #999;
  /* Long product/article titles shouldn't blow out the bar on one line. */
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .crumbNav .crumbList {
    padding: 9px 0;
    font-size: 12px;
  }
  .crumbNav .crumbItem [aria-current="page"] {
    max-width: 45vw;
  }
}

/* ==========================================================================
   Editorial layout for inner pages
   Structure and restraint borrowed from a reference B2B site; the palette is
   this site's own (#34bdc4 teal, #333/#666/#999 text, #eee rules, #f5f5f5
   wash) and the type stack is unchanged.

   The idea: no cards, no shadows, no fills. Hierarchy comes from scale, weight
   and whitespace, and sections are separated by a single hairline. Headings run
   at regular weight rather than bold — at 34px+ a 400 weight reads considered,
   where 700 reads loud.
   ========================================================================== */
.ed {
  --ed-teal: #34bdc4;
  --ed-ink: #333;
  --ed-muted: #666;
  --ed-faint: #999;
  --ed-line: #eee;
  --ed-wash: #f5f5f5;
  color: var(--ed-ink);
}

/* -- Page opening ---------------------------------------------------------- */
.ed-hero {
  padding: 72px 0 60px;
  max-width: 780px;
}
.ed-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ed-teal);
  margin-bottom: 22px;
}
.ed-hero h1 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--ed-ink);
}
.ed-hero p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ed-muted);
  margin: 0;
}

/* -- Section ---------------------------------------------------------------- */
.ed-section {
  padding: 56px 0;
  border-top: 1px solid var(--ed-line);
}
.ed-section-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ed-faint);
  margin: 0 0 26px;
  font-weight: 400;
}
.ed-h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 18px;
}
.ed-lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ed-muted);
  max-width: 760px;
  margin: 0 0 8px;
}

/* -- Question list: hairline rules only, no container ----------------------- */
.ed-qa {
  border-top: 1px solid var(--ed-line);
}
.ed-q {
  border-bottom: 1px solid var(--ed-line);
}
.ed-q > summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 26px 52px 26px 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ed-ink);
  transition: color 0.2s ease;
}
.ed-q > summary::-webkit-details-marker {
  display: none;
}
.ed-q > summary:hover {
  color: var(--ed-teal);
}
/* Plus that becomes a minus, drawn as two hairlines */
.ed-q > summary::before,
.ed-q > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--ed-teal);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.ed-q > summary::before {
  width: 13px;
  height: 1px;
  transform: translateY(-50%);
}
.ed-q > summary::after {
  width: 1px;
  height: 13px;
  right: 10px;
  transform: translateY(-50%);
}
.ed-q[open] > summary {
  color: var(--ed-teal);
}
.ed-q[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}
.ed-a {
  padding: 0 52px 30px 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ed-muted);
  max-width: 820px;
}

/* -- Text link list (the long-form guides) --------------------------------- */
.ed-links {
  border-top: 1px solid var(--ed-line);
}
.ed-link {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--ed-line);
  text-decoration: none;
  color: inherit;
}
.ed-link h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--ed-ink);
  transition: color 0.2s ease;
}
.ed-link:hover h3 {
  color: var(--ed-teal);
}
.ed-link p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ed-muted);
  margin: 0 0 10px;
  max-width: 820px;
}
.ed-link .ed-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ed-faint);
}

/* -- Closing prompt --------------------------------------------------------- */
.ed-close {
  /* Generous breathing room top and bottom — this closing CTA sits directly
     above the dark footer, so a tight bottom made it feel cramped. */
  padding: 88px 0 96px;
  margin-top: 16px;
  border-top: 1px solid var(--ed-line);
  text-align: center;
}
.ed-close h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 14px;
}
.ed-close p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ed-muted);
  max-width: 560px;
  margin: 0 auto 32px;
}
.ed-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 48px;
  padding: 0 30px;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--ed-teal);
  background: var(--ed-teal);
  color: #fff;
  transition: opacity 0.2s ease;
}
.ed-btn:hover {
  opacity: 0.85;
  color: #fff;
}
.ed-btn--ghost {
  background: transparent;
  color: var(--ed-teal);
}
.ed-btn--ghost:hover {
  background: var(--ed-teal);
  color: #fff;
  opacity: 1;
}

/*
 * The buttons are always links, and style.css line 7 sets `background: none` on
 * `a, a:hover, a:active, a:visited, a:link, a:focus`. A selector list is scored
 * per-selector, so `a:link` counts as (0,1,1) — which out-specifies the single
 * class `.ed-btn` (0,1,0). The fills declared above therefore never reached a
 * rendered button: every `.ed-btn` on every editorial page was painting white
 * text onto a transparent box, legible only by its teal border.
 *
 * Restating the three fills one level deeper clears that bar ((0,2,0) and
 * (0,3,0) both beat (0,1,1)) without touching the original stylesheet. The
 * declarations above are left in place as the readable definition; these only
 * re-assert them.
 */
.ed .ed-btn {
  background: var(--ed-teal);
}
.ed .ed-btn--ghost {
  background: transparent;
}
.ed .ed-btn--ghost:hover {
  background: var(--ed-teal);
}

@media (max-width: 768px) {
  .ed-hero {
    padding: 48px 0 40px;
  }
  .ed-hero h1 {
    font-size: 28px;
  }
  .ed-hero p {
    font-size: 16px;
  }
  .ed-section {
    padding: 40px 0;
  }
  .ed-h2,
  .ed-close h2 {
    font-size: 23px;
  }
  .ed-q > summary {
    font-size: 16px;
    padding: 22px 40px 22px 0;
  }
  .ed-a {
    padding-right: 0;
    padding-bottom: 24px;
  }
  .ed-close {
    padding-top: 48px;
  }
  .ed-actions {
    flex-direction: column;
  }
  .ed-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Editorial: supporting blocks
   Used by About and the other inner pages. Same rules as `.ed`: no card fills,
   no shadows, hairlines and whitespace only.
   -------------------------------------------------------------------------- */

/* Numbered process steps, laid out as a row of columns divided by hairlines */
.ed-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ed-line);
}
.ed-step {
  padding: 30px 22px 34px 0;
}
.ed-step .n {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ed-teal);
  margin-bottom: 16px;
}
.ed-step h3 {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 10px;
  color: var(--ed-ink);
}
.ed-step p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ed-muted);
  margin: 0;
}

/* Two columns of capability points */
.ed-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
}
.ed-col h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ed-line);
  color: var(--ed-ink);
}
.ed-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-points li {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ed-muted);
}
.ed-points li:last-child {
  padding-bottom: 0;
}
.ed-points strong {
  display: block;
  font-weight: 400;
  color: var(--ed-ink);
  margin-bottom: 4px;
}

/* Trust statements, three across */
.ed-tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
  border-top: 1px solid var(--ed-line);
  padding-top: 34px;
}
.ed-tri h3 {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--ed-ink);
}
.ed-tri p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ed-muted);
  margin: 0;
}

/* Capability figures */
.ed-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ed-line);
}
.ed-figure {
  padding: 36px 20px 40px 0;
}
.ed-figure .num {
  display: block;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  color: var(--ed-ink);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.ed-figure .lbl {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ed-muted);
}

/* Full-bleed-ish lead image */
.ed-figure-img {
  margin: 44px 0 0;
}
.ed-figure-img img {
  width: 100%;
  height: auto;
  display: block;
}
.ed-figure-img figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ed-faint);
}

/* Standalone meta line (date / byline). Same treatment as the one inside
   `.ed-link`, promoted out of that scope so the article header can use it. */
.ed-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ed-faint);
}

/* --------------------------------------------------------------------------
   Editorial: product blocks
   Added for the two product pages (`?catid=N` listing, `?id=N` detail). Same
   rules as everything above: no card fills, no shadows, no radius — hairlines
   and whitespace only, headings at weight 400, colours from the `.ed` vars.
   -------------------------------------------------------------------------- */

/* Filter row above the listing grid: category links left, search right.
   Replaces the original's white rounded sidebar card. */
.ed-filter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.ed-filter-links {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0 32px;
}
.ed-filter-links a {
  display: inline-block;
  padding-bottom: 6px;
  font-size: 15px;
  color: var(--ed-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ed-filter-links a:hover {
  color: var(--ed-teal);
}
.ed-filter-links li.on a {
  color: var(--ed-ink);
  border-bottom-color: var(--ed-teal);
}

/* The original search form, kept on its GET contract, restyled to one rule. */
.ed-search form {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ed-line);
  transition: border-color 0.2s ease;
}
.ed-search form:focus-within {
  border-bottom-color: var(--ed-teal);
}
.ed-search input {
  width: 240px;
  max-width: 100%;
  padding: 8px 32px 8px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ed-ink);
}
.ed-search input:focus {
  outline: none;
}
.ed-search button {
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ed-search button img {
  width: 15px;
}

/* Product listing grid. Columns divided by whitespace, rows by a hairline —
   the same construction as `.ed-figures`, so the two read as one system. */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ed-line);
}
.ed-item {
  display: block;
  padding: 30px 32px 34px 0;
  border-bottom: 1px solid var(--ed-line);
  text-decoration: none;
  color: inherit;
}
.ed-item-img {
  position: relative;
  padding-top: 77.7%;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--ed-line);
}
.ed-item-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
}
.ed-item h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
  color: var(--ed-ink);
  transition: color 0.2s ease;
}
.ed-item:hover h2 {
  color: var(--ed-teal);
}

/* Product detail: the gallery keeps the original's `.productDetailDiv .bdDiv
   .brDiv .hd .hlDiv` chain, because style.css sizes the sliders and positions
   the magnifier's `.my-container` through exactly that chain. Only the outer
   spacing and the frame colour are restated here — the internals are untouched.
   The selectors match the originals' length so they win on order, not weight. */
.ed .productDetailDiv {
  padding: 0;
}
.ed .productDetailDiv .bdDiv {
  margin-top: 0;
}
.ed .productDetailDiv .bdDiv .brDiv .hd .hlDiv .swiper-slide .pic .imgDiv {
  border-color: var(--ed-line);
}
.ed .productDetailDiv .bdDiv .brDiv .hd .hrDiv {
  justify-content: flex-start;
}

/* The column beside the gallery: jump links to the sections, then the CTA. */
.ed-jump {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--ed-line);
}
.ed-jump li {
  border-bottom: 1px solid var(--ed-line);
}
.ed-jump a {
  display: block;
  padding: 18px 0;
  font-size: 16px;
  color: var(--ed-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ed-jump a:hover {
  color: var(--ed-teal);
}
.ed-actions--start {
  justify-content: flex-start;
}

/* Transcribed CMS bodies (`components/product/RichText`). The copy carries its
   own inline styles from the original paste and those still win — this only
   sets what the paste left unspecified. */
.ed-rich {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ed-muted);
  max-width: 860px;
}
.ed-rich p {
  margin: 0 0 18px;
}
.ed-rich h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ed-ink);
  margin: 32px 0 14px;
}
.ed-rich ul {
  margin: 0 0 20px;
  padding-left: 20px;
}
.ed-rich li {
  margin-bottom: 10px;
}
.ed-rich blockquote {
  margin: 0 0 20px;
  padding-left: 22px;
  border-left: 1px solid var(--ed-line);
}
.ed-rich hr {
  border: 0;
  border-top: 1px solid var(--ed-line);
  margin: 32px 0;
}
.ed-rich img {
  max-width: 100%;
  height: auto;
}
.ed-rich > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .ed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ed-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .ed-tri,
  .ed-figures {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }
  .ed-cols {
    gap: 0 40px;
  }
}

@media (max-width: 768px) {
  .ed-steps,
  .ed-cols,
  .ed-tri,
  .ed-figures {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ed-col + .ed-col {
    margin-top: 40px;
  }
  .ed-tri > div + div {
    margin-top: 30px;
  }
  .ed-step,
  .ed-figure {
    padding-right: 0;
  }
  /* Stacked on mobile, each step needs a rule to separate it from the next.
     On wider layouts the steps sit in a single row and take only the grid's
     top border, matching .ed-figures / .ed-tri (no doubled closing rule). */
  .ed-step {
    border-bottom: 1px solid var(--ed-line);
  }
  .ed-figure {
    padding: 26px 0 30px;
    border-bottom: 1px solid var(--ed-line);
  }
  .ed-figure .num {
    font-size: 34px;
  }
  .ed-item {
    padding-right: 20px;
  }
  .ed-filter {
    align-items: stretch;
    flex-direction: column;
  }
  .ed-search input {
    width: 100%;
  }
  /* The gallery column stacks above the rail at this width (style.css turns
     `.hd` into a block), so the rail's own top margin would double up. */
  .ed-jump {
    margin-bottom: 26px;
  }
}

@media (max-width: 576px) {
  .ed-grid {
    grid-template-columns: 1fr;
  }
  .ed-item {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Editorial: long-form article body (`.ed-article`)
   Wraps the news article bodies, which are transcribed verbatim from the old
   CMS and therefore arrive carrying its inline `font-family`/`font-size`
   declarations (Calibri at 16px, 宋体 at 32px, Symbol bullets at 13px, and a
   scattering of 9px spacer spans). The copy is not ours to touch, so the
   presentation is reclaimed in CSS: the one `!important` pair below folds every
   inline type declaration back into the reading measure, and everything else
   then cascades normally.
   -------------------------------------------------------------------------- */
.ed-article {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ed-muted);
}

/* The only override of the CMS's inline styles: type is set by this
   stylesheet, everything else the attribute carries (weights, alignment) is
   left to render as the original did. */
.ed-article [style] {
  font-family: inherit !important;
  font-size: inherit !important;
}

.ed-article p {
  margin: 0 0 20px;
}
.ed-article > :first-child {
  margin-top: 0;
}

/* Headings run at regular weight, like the rest of the system. The bodies wrap
   most heading text in <strong>, which has to be unwound for that to hold. */
.ed-article h2,
.ed-article h3 {
  font-weight: 400;
  color: var(--ed-ink);
}
.ed-article h2 strong,
.ed-article h3 strong {
  font-weight: 400;
}
.ed-article h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 56px 0 20px;
}
.ed-article h3 {
  font-size: 18px;
  line-height: 1.55;
  margin: 38px 0 14px;
}
/* The CMS marked several bullet runs up as consecutive headings. Collapsing the
   space between siblings lets those read as the list they were meant to be
   instead of a stack of section titles. */
.ed-article h2 + h2,
.ed-article h3 + h3 {
  margin-top: 0;
}

.ed-article a {
  color: var(--ed-teal);
  text-decoration: none;
}
.ed-article a:hover {
  text-decoration: underline;
}

.ed-article hr {
  height: 0;
  border: 0 !important;
  border-top: 1px solid var(--ed-line) !important;
  margin: 44px 0 !important;
}

.ed-article ul,
.ed-article ol {
  margin: 0 0 22px !important;
  padding-left: 22px !important;
}
.ed-article li {
  margin-bottom: 10px;
}
.ed-article li p {
  margin: 0;
}

.ed-article blockquote {
  margin: 28px 0;
  padding-left: 24px;
  border-left: 1px solid var(--ed-teal);
  color: var(--ed-ink);
}
.ed-article pre {
  margin: 28px 0;
  padding: 20px;
  overflow-x: auto;
  background: var(--ed-wash);
  font-size: 14px;
  line-height: 1.7;
}
.ed-article code {
  font-size: 14px;
}

.ed-article img {
  max-width: 100%;
  height: auto;
}

/* Tables scroll inside their own container so the page never scrolls sideways.
   The inline `border: none` on every cell is what the `!important` undoes. */
.ed-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0;
}
.ed-article table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  border-top: 1px solid var(--ed-line) !important;
}
.ed-article td,
.ed-article th {
  padding: 14px 24px 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ed-line) !important;
  text-align: left !important;
  vertical-align: top;
}
.ed-article td:last-child,
.ed-article th:last-child {
  padding-right: 0 !important;
}
.ed-article td p,
.ed-article th p {
  margin: 0;
  text-align: left !important;
}
.ed-article .firstRow td {
  color: var(--ed-ink);
}

/* Previous / next article */
.ed-prevnext {
  border-top: 1px solid var(--ed-line);
  padding: 34px 0 0;
  margin-top: 56px;
}
.ed-prevnext p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ed-faint);
}
.ed-prevnext p:empty {
  display: none;
}
.ed-prevnext p:last-child {
  margin-bottom: 0;
}
.ed-prevnext a {
  color: var(--ed-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ed-prevnext a:hover {
  color: var(--ed-teal);
}

/* Three of the five FAQ guides are wrapped end-to-end in a <blockquote> the CMS
   editor used purely as an indent — nothing inside them is quoted. Drawing the
   quotation rule down a whole article would be wrong, and would appear on three
   pages and not the other two, so the wrapper is neutralised where it is
   explicitly marked as one. A genuine nested quote still gets the rule. */
.ed-article .ed-wrapquote {
  margin: 0 !important;
  padding-left: 0;
  border-left: 0;
  color: inherit;
}

/* The empty editor headings the CMS left inside two FAQ bodies (see
   `EmptyEditorHeading` in FaqDetailPage). They carry no copy — their font-size
   *is* their content, since it is the only thing giving them height. That puts
   them outside the `[style]` type override above, so the box is declared here
   instead of inline and the original vertical gap survives. */
.ed-editor-gap {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 500;
}

/* A stack of plain lines divided by hairlines. Used for the contact details,
   where each line has to render exactly as the CMS stored it (including its
   punctuation quirks), so it cannot be split into a label/value pair. */
.ed-rows {
  border-top: 1px solid var(--ed-line);
  max-width: 760px;
}
.ed-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--ed-line);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ed-ink);
  word-break: break-word;
}

@media (max-width: 768px) {
  .ed-article h2 {
    font-size: 22px;
    margin-top: 44px;
  }
  .ed-article h3 {
    font-size: 17px;
  }
  .ed-article hr {
    margin: 34px 0 !important;
  }
  .ed-row {
    font-size: 15px;
  }
}

/* ==========================================================================
   Guard: style.css styles the BARE element selector `header`
   (position:fixed; top:0; z-index:9999) to lay out the site chrome. That
   matches ANY <header> in the document, so a semantic page-level <header>
   used as a hero turns into a floating overlay. The hero blocks are <section>
   elements for that reason; this is belt-and-braces in case one comes back.
   ========================================================================== */
.ed header,
.ed-hero {
  position: static;
  z-index: auto;
}

/* ==========================================================================
   FAQ: centred column
   The question set reads better as a centred measure than flush left across a
   1200px container — it keeps the eye on one axis and matches the hero.
   ========================================================================== */
.ed--center .ed-hero {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ed--center .ed-hero p {
  margin-left: auto;
  margin-right: auto;
}
.ed--center .ed-section,
.ed--center .ed-close {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.ed--center .ed-section-label {
  text-align: center;
}
/* Answers stay left-aligned: centred body copy is hard to read. */
.ed--center .ed-a,
.ed--center .ed-lead {
  text-align: left;
}
.ed--center .ed-lead {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   Masthead — 1920x600 banner, copy set against the left edge
   Also load-bearing, not decoration: style.css keeps the nav white until
   body.on-fixed lands on scroll, so an inner page with a plain white top left
   the navigation invisible. The scrim restores that contrast.
   ========================================================================== */
.ed-masthead {
  position: relative;
  aspect-ratio: 1920 / 600;
  /* Never shorter than the fixed header plus room to breathe, and never so tall
     on ultrawide screens that the copy drifts away from the content below. */
  min-height: 340px;
  max-height: 600px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 72px;
  overflow: hidden;
}

/* Horizontal scrim: dense behind the copy on the left, clearing to almost
   nothing on the right so the photograph is still legible as an image. */
.ed-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(17, 20, 22, 0.86) 0%,
    rgba(17, 20, 22, 0.74) 32%,
    rgba(17, 20, 22, 0.34) 62%,
    rgba(17, 20, 22, 0.12) 100%
  );
}
/* A second pass down the top edge, so the white nav has contrast across the
   full width rather than only over the copy. */
/* Top scrim, full width, so the white nav is legible right across the header
   even where the photo is bright on the right. Denser and taller than before —
   the earlier 0.55/190px let the nav wash out over a light banner. */
.ed-masthead::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  background: linear-gradient(
    180deg,
    rgba(17, 20, 22, 0.72) 0%,
    rgba(17, 20, 22, 0.5) 34%,
    rgba(17, 20, 22, 0) 100%
  );
}

.ed-masthead > .wrap {
  position: relative;
  z-index: 2;
  /* Clears the 80px fixed header without pushing the block off-centre. */
  padding-top: 56px;
}

.ed-masthead-inner {
  max-width: 620px;
}

.ed-masthead .ed-eyebrow {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 20px;
}
.ed-masthead h1 {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 20px;
}
.ed-masthead p {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 540px;
}

/* Breadcrumb sits on the image, above the eyebrow */
.ed-masthead .crumbNav {
  background: transparent;
  border: 0;
  margin: 0 0 26px;
}
.ed-masthead .crumbNav .crumbList {
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
}
.ed-masthead .crumbNav .crumbItem a {
  color: rgba(255, 255, 255, 0.72);
}
.ed-masthead .crumbNav .crumbItem a:hover {
  color: #fff;
}
.ed-masthead .crumbNav .crumbItem [aria-current="page"] {
  color: rgba(255, 255, 255, 0.5);
}
.ed-masthead .crumbNav .crumbItem:not(:first-child)::before {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Question groups
   A hairline frame and a restrained lift on hover — no icons, no fills. The
   group name is a small tracked label rather than a heading that competes with
   the questions inside it.
   ========================================================================== */
.ed-group {
  border: 1px solid var(--ed-line);
  padding: 6px 38px 0;
  margin-bottom: 22px;
  background: #fff;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.ed-group:hover {
  border-color: #dfe4e5;
  box-shadow: 0 10px 30px rgba(17, 20, 22, 0.06);
}
.ed-group-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ed-faint);
  font-weight: 400;
  margin: 0;
  padding: 26px 0 4px;
}
.ed-group .ed-qa {
  border-top: 0;
}
.ed-group .ed-q:last-child {
  border-bottom: 0;
}

@media (max-width: 991px) {
  .ed-masthead {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    padding: 104px 0 46px;
    margin-bottom: 48px;
  }
  .ed-masthead > .wrap {
    padding-top: 0;
  }
  .ed-masthead::before {
    background: linear-gradient(
      90deg,
      rgba(17, 20, 22, 0.88) 0%,
      rgba(17, 20, 22, 0.74) 55%,
      rgba(17, 20, 22, 0.5) 100%
    );
  }
  .ed-masthead h1 {
    font-size: 30px;
  }
  .ed-masthead-inner {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .ed-masthead {
    padding: 92px 0 40px;
  }
  .ed-masthead h1 {
    font-size: 25px;
  }
  .ed-masthead p {
    font-size: 15px;
  }
  .ed-group {
    padding: 4px 22px 0;
  }
}

/* ==========================================================================
   Nav safety net
   style.css sets the nav to #fff until body.on-fixed lands on scroll, on the
   assumption that the header always floats over a dark banner. Inner pages that
   open on light content broke that assumption and rendered the nav invisible.
   Every inner page now leads with a dark .ed-masthead, but this is the backstop
   so a page that forgets one can never hide its own navigation again: when the
   body is NOT scrolled and NOT sitting under a masthead-led page, force the
   resting nav dark. `body.on-fixed` (scrolled) and the masthead case both keep
   their own colours because this only applies at rest without a masthead.
   ========================================================================== */
/* Keyed off `:has(.ed-masthead)`, which is true in the server-rendered HTML the
   instant a masthead page loads — no JavaScript, no hydration wait, so the nav
   is never briefly wrong. (`:has()` is baseline in every current browser.)

   "Dark banner behind the nav" means either an inner-page masthead OR the
   homepage's full-screen photo hero (.index-banner). Both give the white nav a
   dark top to sit on; both get a soft shadow below so a bright patch of the
   photo can't swallow a letter.

   Rest state, page WITHOUT either: force the nav dark. style.css leaves it
   white until scroll, assuming a dark banner behind it; a plain white page top
   would otherwise hide it. */
body:not(.on-fixed):not(:has(.ed-masthead)):not(:has(.index-banner)) header .rightDiv .menu > ul > li > a {
  color: #333;
}
body:not(.on-fixed):not(:has(.ed-masthead)):not(:has(.index-banner)) header .searchDiv .searchBtn {
  fill: #333;
}
body:not(.on-fixed):not(:has(.ed-masthead)):not(:has(.index-banner)) header .lang-switch > summary,
body:not(.on-fixed):not(:has(.ed-masthead)):not(:has(.index-banner)) header .lang-switch-trigger {
  color: #333;
}

/* Rest state, page WITH a dark banner: nav stays white (style.css's default),
   plus a soft shadow so a bright patch of the photo — a lit lamp, a white wall —
   can't swallow a letter. Removed on scroll, where the header is solid white
   and dark text needs no shadow. */
body:not(.on-fixed):has(.ed-masthead) header .rightDiv .menu > ul > li > a {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* The homepage banner is a brighter photo than the fixed masthead image, so its
   nav gets a stronger two-layer shadow — a tight dark edge plus a wider halo —
   to stay legible even over a lit patch of the scene. */
body:not(.on-fixed):has(.index-banner) header .rightDiv .menu > ul > li > a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 13px rgba(0, 0, 0, 0.55);
}
/* Language switcher — sits outside .menu so it doesn't inherit the nav-link
   colour. Match the same white + shadow treatment the nav links get. */
body:not(.on-fixed):has(.ed-masthead) header .lang-switch > summary,
body:not(.on-fixed):has(.index-banner) header .lang-switch > summary,
body:not(.on-fixed):has(.ed-masthead) header .lang-switch-trigger,
body:not(.on-fixed):has(.index-banner) header .lang-switch-trigger {
  color: #fff;
}
body:not(.on-fixed):has(.ed-masthead) header .lang-switch > summary,
body:not(.on-fixed):has(.ed-masthead) header .lang-switch-trigger {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
body:not(.on-fixed):has(.index-banner) header .lang-switch > summary,
body:not(.on-fixed):has(.index-banner) header .lang-switch-trigger {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 13px rgba(0, 0, 0, 0.55);
}
body:not(.on-fixed):has(.ed-masthead) header .logo img,
body:not(.on-fixed):has(.index-banner) header .logo img {
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.4));
}

/* ==========================================================================
   Certification badges
   Text badges, NOT official CE/FCC/ISO logos: the certificates are still in
   progress, so reproducing the real marks would misrepresent status (and those
   marks are regulated). A small line seal icon plus the standard's name reads
   as "we test/certify to this" without claiming a certificate we don't hold.
   Wording in the JSX makes the in-progress status explicit.
   ========================================================================== */
.ed-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.ed-cert {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--ed-line);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ed-cert:hover {
  border-color: rgba(52, 189, 196, 0.5);
  box-shadow: 0 6px 18px rgba(17, 20, 22, 0.05);
}
.ed-cert svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--ed-teal);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ed-cert .name {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ed-ink);
  white-space: nowrap;
}
/* "in progress" note under the row */
.ed-certs-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ed-faint);
}

@media (max-width: 768px) {
  .ed-cert {
    padding: 9px 14px 9px 11px;
  }
  .ed-cert .name {
    font-size: 13px;
  }
}

/* ==========================================================================
   Homepage banner — top scrim for nav legibility
   The homepage keeps its own full-screen photo hero (not the masthead), and the
   nav is white over it. On a bright slide (the lit smart-home wall) the white
   nav washed out. This adds the SAME top gradient the masthead uses — a scrim
   over just the top band so the nav is legible on every slide, without dimming
   the banner body. Sits above the slides but below the arrows/pagination.
   ========================================================================== */
.index-banner {
  position: relative;
}
.index-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  z-index: 5;
  pointer-events: none;
  /* Deeper than the masthead's scrim (0.72/0.5) and held across the whole nav
     band, because the homepage banner is a brighter photo than the fixed
     masthead image. 0-90px (the 80px header + margin) stays at 0.72-0.85, then
     falls away fast so it doesn't muddy the banner body. */
  background: linear-gradient(
    180deg,
    rgba(17, 20, 22, 0.85) 0%,
    rgba(17, 20, 22, 0.72) 34%,
    rgba(17, 20, 22, 0.3) 66%,
    rgba(17, 20, 22, 0) 100%
  );
}
/* Keep the arrows and pagination clickable above the scrim. */
.index-banner .swiper-button-next,
.index-banner .swiper-button-prev,
.index-banner .swiper-pagination {
  z-index: 6;
}

@media (max-width: 991px) {
  .index-banner::before {
    height: 150px;
  }
}

/* ==========================================================================
   Blog — Topic Authority Hub
   Built on the .ed editorial system (same palette, hairlines, weight-400
   headings). Adds the article furniture: TL;DR box, byline, TOC, print button,
   code-rendered compare table + flow diagram, and print styles.
   ========================================================================== */
.blog-article {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 8px;
}

/* Head row: byline left, print button right */
.blog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 0 26px;
  border-bottom: 1px solid var(--ed-line);
  flex-wrap: wrap;
}
.blog-byline-name {
  display: block;
  font-size: 15px;
  color: var(--ed-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.blog-byline-name:hover {
  color: var(--ed-teal);
}
.blog-byline-role {
  display: block;
  font-size: 13px;
  color: var(--ed-teal);
  margin-top: 2px;
}
.blog-byline-credential {
  display: block;
  font-size: 12.5px;
  color: var(--ed-muted);
  margin-top: 5px;
  max-width: 46ch;
  line-height: 1.5;
}
.blog-byline-meta {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ed-faint);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--ed-muted);
  background: #fff;
  border: 1px solid var(--ed-line);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.blog-print:hover {
  border-color: var(--ed-teal);
  color: var(--ed-teal);
}
.blog-print svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TL;DR direct-answer box */
.blog-tldr {
  margin: 30px 0;
  padding: 22px 26px;
  background: var(--ed-wash);
  border-left: 3px solid var(--ed-teal);
}
.blog-tldr-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ed-teal);
  margin-bottom: 8px;
}
.blog-tldr p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ed-ink);
}

/* TOC */
.blog-toc {
  margin: 30px 0;
  border: 1px solid var(--ed-line);
  padding: 4px 22px;
}
.blog-toc summary {
  cursor: pointer;
  padding: 16px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-faint);
  list-style: none;
}
.blog-toc summary::-webkit-details-marker {
  display: none;
}
.blog-toc ol {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
}
.blog-toc li {
  margin: 8px 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.blog-toc a {
  color: var(--ed-muted);
  text-decoration: none;
}
.blog-toc a:hover {
  color: var(--ed-teal);
}

/* Article body scroll-margin so anchor jumps clear the fixed header */
.blog-body h2,
.blog-body h3,
.blog-faq {
  scroll-margin-top: 96px;
}
.blog-body > p:first-child {
  margin-top: 0;
}

/* Code-rendered compare table */
.blog-table-wrap {
  overflow-x: auto;
  margin: 28px 0;
}
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
  min-width: 460px;
}
.blog-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--ed-faint);
  padding-bottom: 12px;
}
.blog-table th,
.blog-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ed-line);
  vertical-align: top;
}
.blog-table thead th {
  color: var(--ed-ink);
  font-weight: 400;
  border-bottom: 1.5px solid #ddd;
}
.blog-table tbody th {
  color: var(--ed-ink);
  font-weight: 400;
}
.blog-table td {
  color: var(--ed-muted);
}
.blog-table .is-hl {
  background: rgba(52, 189, 196, 0.06);
  color: var(--ed-ink);
}

/* Code-rendered flow diagram */
.blog-flow {
  margin: 30px 0;
}
.blog-flow ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.blog-flow li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--ed-line);
  position: relative;
}
.blog-flow-n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ed-teal);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-flow-title {
  display: block;
  font-size: 15px;
  color: var(--ed-ink);
}
.blog-flow-detail {
  display: block;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ed-muted);
  margin-top: 3px;
}
.blog-flow figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ed-faint);
}

.blog-faq {
  margin-top: 44px;
  padding-top: 8px;
}
.blog-related {
  margin-top: 44px;
}

@media (max-width: 768px) {
  .blog-head {
    padding: 28px 0 20px;
  }
  .blog-tldr {
    padding: 18px 20px;
  }
}

/* --- Print / PDF -----------------------------------------------------------
   Strip the site chrome and controls; keep the article, tables and diagrams. */
@media print {
  header,
  footer,
  .ed-masthead,
  .crumbNav,
  .blog-toc,
  .blog-print,
  .ed-close,
  .blog-related {
    display: none !important;
  }
  .main,
  .wrap,
  .blog-article {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  .blog-body,
  .blog-table {
    color: #000 !important;
  }
  .blog-table-wrap {
    overflow: visible !important;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  .blog-tldr {
    border-left: 3px solid #000 !important;
    background: #f2f2f2 !important;
  }
}

/* ==========================================================================
   Blog listing — count + search bar, topic filter chips, cover-card grid
   ========================================================================== */
.blog-index-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.blog-index-count {
  font-size: 14px;
  color: var(--ed-faint);
}
.blog-search {
  position: relative;
  flex: 0 1 320px;
}
.blog-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--ed-faint);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}
.blog-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 40px;
  font: inherit;
  font-size: 14px;
  color: var(--ed-ink);
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.blog-search input:focus {
  border-color: var(--ed-teal);
}

/* Filter chips */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--ed-line);
}
.blog-chip {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 16px;
  color: var(--ed-muted);
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.blog-chip:hover {
  border-color: var(--ed-teal);
  color: var(--ed-teal);
}
.blog-chip.is-active {
  background: var(--ed-teal);
  border-color: var(--ed-teal);
  color: #fff;
}
.blog-chip-n {
  opacity: 0.65;
  font-size: 12px;
}

/* Card grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ed-line);
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
  border-color: rgba(52, 189, 196, 0.45);
  box-shadow: 0 12px 30px rgba(17, 20, 22, 0.07);
  transform: translateY(-3px);
}
.blog-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ed-wash);
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.04);
}
.blog-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-topic {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-teal);
  margin-bottom: 12px;
}
.blog-card-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--ed-ink);
  transition: color 0.2s ease;
}
.blog-card:hover .blog-card-title {
  color: var(--ed-teal);
}
.blog-card-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ed-muted);
  margin: 0 0 16px;
  /* Clamp to keep cards even. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--ed-faint);
}

.blog-empty {
  padding: 40px 0;
  font-size: 15px;
  color: var(--ed-muted);
}
.blog-linkbtn {
  font: inherit;
  color: var(--ed-teal);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-search {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Editorial: text-and-image split, and capability cards with imagery
   Adds the visuals the About page was missing, without loud icons.
   ========================================================================== */
.ed-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ed-split.is-reverse .ed-split-media {
  order: -1;
}
.ed-split-media img {
  width: 100%;
  height: auto;
  display: block;
}
.ed-split-body > :first-child {
  margin-top: 0;
}

/* Two capability cards, each led by a product photo */
.ed-capcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.ed-capcard {
  border: 1px solid var(--ed-line);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ed-capcard-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ed-wash);
}
.ed-capcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-capcard-body {
  padding: 26px 28px 28px;
}
.ed-capcard-body h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ed-line);
  color: var(--ed-ink);
}

@media (max-width: 900px) {
  .ed-split,
  .ed-capcards {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ed-split.is-reverse .ed-split-media {
    order: 0;
  }
}

/* ==========================================================================
   Editorial: centred section header, 2x2 proof-image grid, dark stat band
   The About page's clarity rework — a clearer top-to-bottom hierarchy:
   identity + proof imagery, a dark stat anchor, then a centred process.
   Same palette (teal / #333 / greys), no new colours, no shadows.
   ========================================================================== */

/* A section whose header (label / h2 / lead) is centred, while any grid of
   body content underneath stays left-aligned for readability. */
.ed-section.is-centered {
  text-align: center;
}
.ed-section.is-centered .ed-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}
.ed-section.is-centered .ed-steps,
.ed-section.is-centered .ed-capcards,
.ed-section.is-centered .ed-tri {
  text-align: left;
}

/* Align the Who-We-Are split to the top so a tall text column and the image
   grid start on the same line. */
.ed-split.is-top {
  align-items: start;
}

/* 2x2 grid of product photos, each carrying a small overlaid tag — the
   "here's what we actually make" proof cluster from the reference layout. */
.ed-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ed-grid2 figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ed-line);
  background: var(--ed-wash);
}
.ed-grid2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-grid2 figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ed-ink);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* Dark stat band — the reference's anchoring strip. Numbers in teal so it
   still reads as this site, labels in a muted light grey. */
.ed-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #2c2c2c;
  margin: 4px 0;
}
.ed-band-item {
  padding: 40px 26px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.ed-band-item:first-child {
  border-left: 0;
}
.ed-band-item .num {
  display: block;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ed-teal);
  margin-bottom: 14px;
}
.ed-band-item .lbl {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b8b8b8;
}

@media (max-width: 900px) {
  .ed-band {
    grid-template-columns: 1fr 1fr;
  }
  .ed-band-item:nth-child(3) {
    border-left: 0;
  }
  .ed-band-item:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}
@media (max-width: 560px) {
  .ed-band {
    grid-template-columns: 1fr;
  }
  .ed-band-item {
    border-left: 0;
    padding: 30px 26px;
  }
  .ed-band-item + .ed-band-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ==========================================================================
   Social + contact affordances (2026-07-27)
   - Footer "Follow us" icons: real brand SVGs replacing the sprite (one of
     which rendered as WeChat). Base 32x32 comes from style.css `.shareDiv a`.
   - Nav "Social Media" dropdown items: brand glyph + label.
   - Floating contact rail (bottom-right) + its modal enquiry form.
   Brand colours: Facebook #1877f2, WhatsApp #25d366, LinkedIn #0a66c2.
   ========================================================================== */

/* -- Footer social icons --------------------------------------------------- */
.footerDiv .hdDiv .shareDiv a.soc {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #444;
  color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footerDiv .hdDiv .shareDiv a.soc:first-child {
  margin-left: 0;
}
.footerDiv .hdDiv .shareDiv a.soc:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.footerDiv .hdDiv .shareDiv a.soc svg {
  width: 18px;
  height: 18px;
}
.footerDiv .hdDiv .shareDiv a.soc-fb {
  background: #1877f2;
}
.footerDiv .hdDiv .shareDiv a.soc-wa {
  background: #25d366;
}
.footerDiv .hdDiv .shareDiv a.soc-li {
  background: #0a66c2;
}

/* -- Nav Social Media dropdown items --------------------------------------- */
.menu ul ul li > a.nav-soc-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-soc-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ed-teal);
}
.menu ul ul li > a.nav-soc-link:hover .nav-soc-ico {
  color: #34bdc4;
}

/* -- Floating contact rail ------------------------------------------------- */
.fab-rail {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  position: relative;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}
.fab-ico {
  width: 24px;
  height: 24px;
}
/* All three share the logo's main teal (#35bcc2, sampled from the wordmark in
   logo.png) so the rail reads as one brand element rather than three colours.
   Written as `.fab-rail .fab` (0,2,0): the phone and WhatsApp buttons are <a>,
   and style.css line 7 sets `a:link{background:none}` (0,1,1) — a single class
   like `.fab-wa` (0,1,0) loses to it, which left those two circles unfilled.
   The descendant pair clears that bar. (Same trap as `.ed-btn`, see above.) */
.fab-rail .fab {
  background: #35bcc2;
}
/* Hover label sliding out to the left of each button. */
.fab-label {
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fab:hover .fab-label,
.fab:focus-visible .fab-label {
  opacity: 1;
}

/* -- Modal enquiry form ---------------------------------------------------- */
.fcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fcm-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 8px;
  padding: 32px 28px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.fcm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ed-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.fcm-close:hover {
  background: var(--ed-wash);
  color: var(--ed-ink);
}
.fcm-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--ed-ink);
  margin: 0 0 8px;
}
.fcm-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ed-muted);
  margin: 0 0 20px;
}
.fcm-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fcm-form input,
.fcm-form textarea {
  width: 100%;
  border: 1px solid var(--ed-line);
  border-radius: 4px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--ed-ink);
  background: #fff;
  font-family: inherit;
}
.fcm-form input:focus,
.fcm-form textarea:focus {
  outline: none;
  border-color: var(--ed-teal);
}
.fcm-form textarea {
  resize: vertical;
}
.fcm-submit {
  border: 0;
  background: var(--ed-teal);
  color: #fff;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.fcm-submit:hover {
  opacity: 0.92;
}
.fcm-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.fcm-err {
  color: #c0392b;
  font-size: 13px;
  margin: 0;
}
.fcm-ok {
  color: var(--ed-ink);
  font-size: 15px;
  line-height: 1.7;
  background: var(--ed-wash);
  border-left: 3px solid var(--ed-teal);
  padding: 16px 18px;
  margin: 0;
}

@media (max-width: 768px) {
  .fab {
    width: 46px;
    height: 46px;
  }
  .fab-ico {
    width: 21px;
    height: 21px;
  }
  .fab-rail {
    right: 12px;
    bottom: 16px;
  }
}

/* ---- Language switcher (header) ------------------------------------------ */
/* A <details> dropdown sitting in the header nav. Inherits the nav's current
   text colour (white over the banner, #333 once body.on-fixed lands). */
.lang-switch {
  position: relative;
  margin: 0 16px 0 0;
  list-style: none;
}
.lang-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  line-height: 70px;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}

.lang-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 70px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.lang-switch-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.lang-switch > summary::-webkit-details-marker,
.lang-switch > summary::marker {
  display: none;
  content: "";
}
.lang-switch-globe {
  font-size: 14px;
  opacity: 0.85;
}
.lang-switch > ul {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 156px;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  z-index: 60;
}
.lang-switch > ul li {
  padding: 0;
  margin: 0;
}
.lang-switch > ul a {
  display: block;
  padding: 9px 20px;
  color: #333;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch > ul a:hover {
  background: #f6f6f6;
  color: #34bdc4;
}
.lang-switch > ul a.on {
  color: #34bdc4;
  font-weight: 500;
}

/* ---- Desktop header: one unbroken navigation row ------------------------
   The legacy header uses three floated blocks. As translated labels become
   longer, the menu float drops below the logo; that creates the two-row header
   shown on product pages. Keep the same DOM but make the desktop shell a flex
   row: logo | menu | language | search. The mobile menu keeps its original
   layout below 992px. */
@media (min-width: 992px) {
  header .header-container > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    max-width: 1720px;
  }
  header .header-container > .wrap::after {
    display: none;
  }
  header .logo {
    float: none;
    flex: 0 0 180px;
  }
  header .rightDiv {
    float: none;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
  header .rightDiv .menu {
    order: 1;
    float: none;
    min-width: 0;
  }
  header .rightDiv .menu > ul {
    display: flex !important;
    flex-wrap: nowrap;
  }
  header .rightDiv .menu > ul > li {
    float: none;
    flex: 0 0 auto;
  }
  header .lang-switch {
    order: 2;
    float: none;
    margin: 0 16px;
    color: #fff;
  }
  header .lang-switch > summary,
  header .lang-switch-trigger {
    color: currentColor;
    font-size: 16px;
  }
  header .searchDiv {
    order: 3;
    float: none;
    flex: 0 0 auto;
    margin-left: 8px;
  }
  .on-fixed header .lang-switch {
    color: #333;
  }
}

/* Every parent that owns a submenu carries the same visible affordance. */
header .nav-caret {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s ease;
}
header .rightDiv .menu > ul > li:hover > a .nav-caret,
header .submenu-button.submenu-opened ~ a .nav-caret {
  transform: rotate(180deg);
}

/* Header sizing contract: all seven fixed top-level destinations remain
   visible. The wrapper is wider than content wrappers, similar destinations
   are grouped under Resources, and labels are never ellipsized. */
@media (min-width: 992px) {
  header .header-container > .wrap {
    gap: clamp(10px, 1.5vw, 28px);
  }
  header .logo {
    flex: 0 1 170px;
    min-width: 130px;
  }
  header .logo img {
    width: 100%;
    height: auto;
  }
  header .rightDiv {
    gap: clamp(7px, 0.8vw, 16px);
  }
  header .rightDiv .menu {
    flex: 0 1 auto;
    width: auto;
  }
  header .rightDiv .menu > ul {
    width: auto;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: clamp(16px, 1.6vw, 30px);
  }
  header .rightDiv .menu > ul > li {
    flex: 0 1 auto;
    min-width: max-content;
    padding: 0;
  }
  header .rightDiv .menu > ul > li > a {
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    justify-content: center;
    font-size: 16px;
  }
  header .lang-switch {
    flex: 0 0 auto;
    margin: 0;
  }
  header .searchDiv {
    flex: 0 0 auto;
    margin-left: 0;
  }
}

/* Match the 16px fixed-header text at every desktop width. Compact only the
   gaps near the mobile breakpoint so long French and Arabic labels still fit. */
@media (min-width: 992px) and (max-width: 1199px) {
  header .rightDiv {
    gap: 6px;
  }
  header .rightDiv .menu > ul {
    column-gap: 12px;
  }
}