/* ============================================================
   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; }
}