/* ============================================================
   Digital Experts - 2026 brand extension
   Loaded after de-site.css, so everything here can rely on the
   design tokens declared there (--de-green, --de-gold, etc.).

   Three additions, all drawn from the 2026 art direction:

   1. .de-section-white - a pure white ground with the brand green
      carrying the type. The site leans heavily on cream; this is
      the counterweight. Use it once or twice per page, not as the
      default, or it stops being a change of pace.

   2. .de-framed - a thin double rule inset from the section edge,
      the "certificate" frame from the brand work. Deliberately
      restrained: one, at most two, per page. Applied to every
      section it becomes wallpaper and loses all its authority.

   3. A rebuild of .de-quote. The old treatment set testimonials in
      body copy inside a plain rounded box, which read as a form
      field rather than as the words of a customer. They are now
      editorial pull quotes: display serif, the brand frame, and a
      large ghosted quote mark behind the opening line.

   Plus two page-level utilities at the end, added for the /home-v2
   comparison page: a preview bar and a live expert embed.
   ============================================================ */

/* --- White section, green type ------------------------------ */

.de-section-white {
  background: var(--de-white);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.de-section-white h1,
.de-section-white h2,
.de-section-white h3,
.de-section-white h4 { color: var(--de-green); }

/* The gold eyebrow reads weakly on white - step it to a mid green
   so the label still recedes behind the heading without vanishing. */
.de-section-white .de-eyebrow { color: var(--de-green-mid); }

.de-section-white p { color: var(--text-body); }
.de-section-white a:not(.de-btn) { color: var(--de-green); }

/* .de-btn-outline was tuned for dark grounds: cream type on a cream
   hairline. On white it would all but disappear, so the secondary
   button inside a white section is restated in green. */
.de-section-white .de-btn-outline {
  color: var(--de-green);
  border-color: rgba(21, 71, 52, 0.45);
}

.de-section-white .de-btn-outline:hover { background: var(--de-green-soft); }

/* Cards sit on white, so they need a green-tinted hairline rather
   than the warm one that was tuned for the cream ground. */
.de-section-white .de-card,
.de-section-white .de-icon-card,
.de-section-white .de-mini-card,
.de-section-white .de-faq-item { border-color: rgba(21, 71, 52, 0.16); }

.de-section-white .de-card,
.de-section-white .de-icon-card,
.de-section-white .de-mini-card { background: #FBFAF8; }

.de-section-white .de-icon-circle {
  background: var(--de-green-soft);
  color: var(--de-green);
}

.de-section-white .de-numbered { color: var(--de-green-mid); }

/* Dark components living inside a white section keep their own
   light-on-dark palette. .de-solution-card is a photographic tile
   with a near-black scrim over it, so the green type rules above
   would leave it close to unreadable. Anything else that is dark
   by nature belongs in this list too. */
.de-section-white .de-solution-card h1,
.de-section-white .de-solution-card h2,
.de-section-white .de-solution-card h3,
.de-section-white .de-solution-card h4 { color: var(--de-cream); }

.de-section-white .de-solution-card .de-eyebrow { color: rgba(238, 232, 222, 0.9); }
.de-section-white .de-solution-card p { color: rgba(238, 232, 222, 0.88); }
.de-section-white .de-solution-card span.de-link,
.de-section-white .de-solution-card a:not(.de-btn) { color: var(--de-gold-light); }

/* --- Decorative frame --------------------------------------- */

.de-framed { position: relative; }

/* Only the content wrapper is lifted above the frame. Targeting the
   wrapper rather than every child matters: .de-bg-video sits at
   z-index -1 on purpose, and promoting it would pull the background
   video in front of its own tint. */
.de-framed > .de-wrap { position: relative; z-index: 2; }

/* One pseudo-element draws both rules - border for the inner line,
   outline with an offset for the outer. .de-photo-section already
   spends ::before on its tint, so the frame uses ::after. */
.de-framed::after {
  content: "";
  position: absolute;
  inset: clamp(16px, 2.6vw, 38px);
  border: 1px solid rgba(218, 170, 0, 0.55);
  outline: 1px solid rgba(218, 170, 0, 0.26);
  outline-offset: 5px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

/* Green rules for frames on light grounds. */
.de-framed-green::after {
  border-color: rgba(21, 71, 52, 0.38);
  outline-color: rgba(21, 71, 52, 0.18);
}

/* Cream rules for frames over photography where gold would fight
   the image. */
.de-framed-cream::after {
  border-color: rgba(238, 232, 222, 0.5);
  outline-color: rgba(238, 232, 222, 0.24);
}

@media (max-width: 860px) {
  .de-framed::after {
    inset: 12px;
    outline-offset: 4px;
  }
}

/* --- Pull quotes -------------------------------------------- */

/* Light ground (the default). The card keeps the same double-rule
   language as .de-framed so quotes read as part of one system. */
.de-quote {
  position: relative;
  border: 1px solid rgba(21, 71, 52, 0.20);
  border-radius: 4px;
  padding: 54px 44px 38px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.de-quote::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(21, 71, 52, 0.10);
  border-radius: 2px;
  pointer-events: none;
}

/* The mark is a watermark, not a bullet: large, ghosted, sitting
   behind the opening words. Because it is behind the text rather
   than overlapping the frame, it needs no background knock-out and
   so works on every ground without a per-section variant. */
.de-quote .de-quote-mark {
  position: absolute;
  top: 10px;
  left: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 112px;
  line-height: 1;
  color: var(--de-green);
  opacity: 0.11;
  margin: 0;
  z-index: 0;
  user-select: none;
}

.de-quote blockquote,
.de-quote figcaption { position: relative; z-index: 1; }

/* Display serif at pull-quote size is the single biggest change:
   it stops the testimonial reading as another paragraph of body
   copy and gives the customer's words their own voice. */
.de-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.5;
  color: var(--de-green-deep);
  margin: 0 0 26px;
}

.de-quote figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

.de-quote figcaption::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--de-gold);
}

.de-section-white .de-quote {
  background: #FBFAF8;
  border-color: rgba(21, 71, 52, 0.18);
}

/* Dark grounds - photo sections and the solid colour sections.
   Rules and mark switch to cream and gold so the frame stays
   legible over imagery. */
.de-photo-section .de-quote,
.de-section-navy .de-quote,
.de-section-green .de-quote,
.de-section-burgundy .de-quote {
  border-color: rgba(238, 232, 222, 0.30);
  background: rgba(10, 8, 5, 0.20);
}

.de-photo-section .de-quote::after,
.de-section-navy .de-quote::after,
.de-section-green .de-quote::after,
.de-section-burgundy .de-quote::after { border-color: rgba(238, 232, 222, 0.14); }

.de-photo-section .de-quote .de-quote-mark,
.de-section-navy .de-quote .de-quote-mark,
.de-section-green .de-quote .de-quote-mark,
.de-section-burgundy .de-quote .de-quote-mark {
  color: var(--de-gold-light);
  opacity: 0.26;
}

.de-photo-section .de-quote blockquote,
.de-section-navy .de-quote blockquote,
.de-section-green .de-quote blockquote,
.de-section-burgundy .de-quote blockquote { color: var(--de-cream); }

.de-photo-section .de-quote figcaption,
.de-section-navy .de-quote figcaption,
.de-section-green .de-quote figcaption,
.de-section-burgundy .de-quote figcaption { color: rgba(238, 232, 222, 0.78); }

.de-photo-section .de-quote figcaption::before,
.de-section-navy .de-quote figcaption::before,
.de-section-green .de-quote figcaption::before,
.de-section-burgundy .de-quote figcaption::before { background: var(--de-gold-light); }

@media (max-width: 860px) {
  .de-quote { padding: 46px 26px 32px; }
  .de-quote .de-quote-mark { font-size: 88px; left: 16px; }
}

/* --- Comparison preview bar --------------------------------- */

/* Used only on alternate/comparison pages such as /home-v2, so a
   reviewer always knows which version they are looking at and can
   jump to the live one. The site header is fixed, so the bar
   carries its own top offset to clear it. */
.de-preview-bar {
  background: var(--de-green-deep);
  color: var(--de-cream);
  margin-top: 150px;
  padding: 12px 0;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.de-preview-bar .de-wrap {
  display: flex;
  gap: 8px 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.de-preview-bar a { color: var(--de-gold-light); }

@media (max-width: 860px) {
  .de-preview-bar { margin-top: 84px; padding: 10px 0; }
}

/* --- Live expert embed -------------------------------------- */

/* The real conversational product, embedded in the page rather than
   mocked up. scroll-margin-top keeps the fixed header from covering
   it when an "Ask one now" link jumps here. */
.de-expert-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--de-green-deep);
  border: 1px solid rgba(21, 71, 52, 0.22);
  box-shadow: var(--shadow-md);
  scroll-margin-top: 170px;
}

.de-expert-embed iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

.de-expert-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 14px 2px 0;
}

@media (max-width: 860px) {
  .de-expert-embed { scroll-margin-top: 100px; }
  .de-expert-embed iframe { height: 520px; }
}

/* --- Instrument Serif headlines (sitewide) --------------------

   2026 refresh: swaps EVERY headline (h1-h4) SITEWIDE from the
   original display serif (Bitter) to Instrument Serif, already
   loaded via Google Fonts in custom_head alongside Bitter/Work
   Sans, so no template change was needed to turn this on.

   This started scoped to a page-level class (.de-instrument-page,
   trialled first on Retail and Sport & Community Clubs) rather than
   changing --font-display, specifically so it would not also touch
   the many OTHER places --font-display drives: quote marks, stat
   numbers, price amounts, the .de-symbol-flow/.de-loop node labels,
   etc. That reasoning still holds, so this rule targets h1-h4
   directly instead of touching --font-display itself - every page's
   headings now pick up Instrument Serif, while those accent elements
   keep using Bitter exactly as before. A handful of headings inside
   specific components (.de-solution-card.de-tile h3, .de-ui-title,
   .de-rep-card h4) carry their own explicit font-family and are
   unaffected either way, which is correct - those are card labels,
   not page headings. Labels, quotes and meta text (de-chat-label,
   de-msg-card, de-notif-card, etc.) use <p>/<span> rather than
   heading tags, so they correctly stay in the body font. The <em>
   emphasis words inside headings pick up the italic file
   automatically, since browsers default <em> to font-style: italic.
   The .de-instrument-page class is now a harmless no-op left on the
   pages that originally carried it. */

h1, h2, h3, h4 {
  font-family: 'Instrument Serif', var(--font-display);
}

/* Retail and Sport & Community Clubs originally bumped their FAQ
   heading (.de-faq-item h3, otherwise 17px from de-site.css) to
   20px to compensate for Instrument Serif reading lighter than
   Bitter at small sizes. Applied sitewide now, for the same reason,
   since every FAQ heading is in Instrument Serif too. */
.de-faq-item h3 { font-size: 20px; }

/* --- 2026.2 simplification kit -------------------------------
   Two small components for the radically-simplified Retail and
   Sport & Community Clubs pages: a photo with real questions
   floating over it ("show it, don't explain it"), and a three-word
   knowledge flow that is deliberately typographic rather than an
   infographic - three objects and two arrows, nothing connected by
   boxes. Neither replaces .de-ui, which already exists for the
   Insights moment and is reused as-is. --------------------------- */

.de-showcase {
  position: relative;
  border-radius: 6px;
  min-height: 480px;
  padding: 28px;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.de-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(10, 8, 5, 0.10) 0%, rgba(10, 8, 5, 0.38) 100%);
  z-index: 0;
}

/* 2026.3: reworked so the card reads unmistakably as a customer
   quote rather than an ambiguous floating label. A small gold
   quotation glyph sits above the line and a tiny uppercase "Asked"
   caption sits below it - both added here in CSS, so no per-page
   markup change was needed. A hairline border plus a soft white
   outer ring keep the edge visible over both very light and very
   dark photos, where the drop shadow alone can disappear. */
.de-float-q {
  position: absolute;
  z-index: 1;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(21, 71, 52, 0.12);
  border-radius: 8px;
  padding: 18px 18px 14px;
  box-shadow: 0 16px 34px rgba(10, 8, 5, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.de-float-q::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.5;
  color: var(--de-gold);
  opacity: 0.8;
  margin: 0 0 7px;
}

.de-float-q p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--de-green-deep);
}

.de-float-q::after {
  content: "Asked";
  display: block;
  margin-top: 9px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

.de-float-q.q1 { left: 5%; top: 8%; }
.de-float-q.q2 { right: 5%; top: 38%; }
.de-float-q.q3 { left: 8%; bottom: 8%; }

/* Below 720px there is no room to float a card over a face or a
   headline without covering something that matters, so the three
   cards drop out of absolute position and stack at the foot of the
   same photograph instead - the image still shows above them. */
@media (max-width: 720px) {
  .de-showcase {
    min-height: 320px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
  }
  .de-float-q {
    position: static;
    max-width: none;
    width: 100%;
    box-shadow: 0 10px 22px rgba(10, 8, 5, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.5);
  }
}

/* --- Knowledge flow: three symbols, not a diagram ------------- */

.de-symbol-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.de-symbol-node {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.2;
  max-width: 210px;
  text-align: center;
}

.de-symbol-arrow {
  flex: none;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--de-gold-light);
}

.de-symbol-caption {
  text-align: center;
  max-width: 46ch;
  margin: 32px auto 0;
}

@media (max-width: 640px) {
  .de-symbol-flow { flex-direction: column; gap: 16px; }
  .de-symbol-arrow { transform: rotate(90deg); }
}

/* --- Chat suggestion chips ------------------------------------
   Two small illustrative follow-on prompts under a .de-chat demo -
   not real buttons (nothing on the page is a live conversation), so
   they are spans, not <button>, matching the "illustrative" honesty
   already used elsewhere (.de-ui-foot, .de-msg-flag). ------------ */

.de-chat-suggest {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.de-chat-chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--de-green);
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.22);
  border-radius: 999px;
  padding: 9px 16px;
}

/* --- Ghosted background photo ----------------------------------
   A section carries a photograph behind it, knocked back under a
   dark scrim so it reads as texture rather than a photo section -
   present, not competing with the content sitting on top (the chat
   demo, in the "Just ask" moment). Type reverses to cream, the same
   way it does on .de-photo-section / .de-section-green, since the
   ground is now dark rather than light. -------------------------- */

.de-ghost-section {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.de-ghost-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 20, 0.84);
  z-index: 0;
}

.de-ghost-section > .de-wrap {
  position: relative;
  z-index: 1;
}

.de-ghost-section h1,
.de-ghost-section h2,
.de-ghost-section h3,
.de-ghost-section h4 { color: var(--de-cream); }

.de-ghost-section > .de-wrap > p,
.de-ghost-section .de-symbol-caption { color: rgba(238, 232, 222, 0.82); }

.de-ghost-section .de-chat {
  background: rgba(238, 232, 222, 0.08);
  border-color: rgba(238, 232, 222, 0.18);
}

.de-ghost-section .de-chat-label,
.de-ghost-section .de-chat-note { color: rgba(238, 232, 222, 0.7); }

/* --- Signal chain: one question becoming one useful answer -----
   A compact horizontal beat (LEARN moment on the homepage): a big
   stat, a short read on what it means, and the answer itself, tied
   together with small arrows. Kept to a handful of words per node
   on purpose - this is meant to be scanned, not read. ------------ */

.de-signal-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
}

.de-signal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.de-signal-num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 52px);
  line-height: 1;
  color: var(--de-green-deep);
  margin: 0;
}

.de-signal-num-label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.de-signal-step {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  color: var(--text-body);
  max-width: 20ch;
}

.de-signal-step.is-answer { color: var(--de-green-deep); }

.de-signal-arrow {
  flex: none;
  color: var(--de-gold);
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 640px) {
  .de-signal-chain { flex-direction: column; }
  .de-signal-arrow { transform: rotate(90deg); }
}

/* --- Loop diagram: three nodes on a continuous circular path ---
   Purpose-built for the homepage Flywheel moment (Know / Answer /
   Learn, looping back into itself) - not a replacement for
   .de-symbol-flow above, which stays as the straight, one-way
   version used for the Know section and on Retail/Sport. This one
   earns the circular treatment because its own message is
   literally a loop.

   Three short arcs rather than one continuous ring, each ending in
   an arrowhead, so it reads as three handoffs around a cycle
   rather than a single closed shape. Node dots mark the exact
   handoff points on the circle; the word labels sit further out on
   the same radius so they never collide with the stroke. Labels
   are HTML, not SVG text, so they inherit the page's own type and
   colour (cream, inherited from .de-section-green) rather than
   needing their own font/colour rules. */

.de-loop {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.de-loop-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.de-loop-arc {
  fill: none;
  stroke: var(--de-gold-light);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.de-loop-arrowhead { fill: var(--de-gold-light); }

.de-loop-dot { fill: var(--de-cream); }

.de-loop-label {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .de-loop { max-width: 260px; }
  .de-loop-label { font-size: 16px; }
}