/* ============================================================================
   DR SOPHIA AI · HOME PAGE LAYER  (home.css)
   ----------------------------------------------------------------------------
   Home-only components and Home’s approved variants of classes that the
   shared elevate/cursor layers do not carry. Loaded ONLY on the home page,
   after cursor.css. Split out of the original inline elevate/cursor blocks
   during the 2026-07 multi-file reconstruction.
   ============================================================================ */

/* --- from the ELEVATE layer (index variant) ------------------------------- */
/* the feature: the certified claim, green-deep filled, copper-lit */
.home-elev .ts-feature{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.7vw,20px);
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--ds-color-copper) 14%, transparent), transparent 50%),
    var(--ds-color-green-deep);
  border:1px solid rgba(255,245,233,.2);border-radius:var(--ds-radius-sm);box-shadow:var(--elev-2);
  padding:clamp(22px,2.4vw,30px)}
.home-elev .ts-feature__ico{width:96px;height:96px;flex:none}
.home-elev .ts-feature__k{display:block;font-family:var(--ds-font-ui);font-size:var(--ds-text-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ds-color-copper-light);margin-bottom:0;padding-right:104px;grid-column:1 / -1}
.home-elev .ts-feature__body p{font-size:var(--ds-text-body-sm);line-height:1.45;color:rgba(255,245,233,.74);margin:0}
/* green card · EHR/API integration specs (two columns, divider, generous title→sub gap) */
.home-elev .ts-feature__specs{display:grid;grid-template-columns:1fr 1fr;width:100%;column-gap:clamp(18px,2.4vw,30px);row-gap:18px;margin-top:clamp(4px,0.6vw,8px)}
.home-elev .ts-feature__specs > .ts-spec + .ts-spec{border-left:1px solid rgba(255,245,233,.18);padding-left:clamp(18px,2.4vw,30px)}
.home-elev .ts-spec b{display:block;font-family:var(--ds-font-display);font-weight:600;font-size:var(--ds-text-feature-title);color:var(--ds-color-bone);letter-spacing:-.012em;line-height:1.18;margin-bottom:12px}
.home-elev .ts-spec span{font-size:var(--ds-text-body-sm);line-height:1.5;color:rgba(255,245,233,.74)}
@media(max-width:480px){
.home-elev .ts-feature__specs{grid-template-columns:1fr;row-gap:0}
.home-elev .ts-feature__specs > .ts-spec + .ts-spec{border-left:none;border-top:1px solid rgba(255,245,233,.18);padding-left:0;padding-top:16px;margin-top:16px}
}
.home-elev .ts-feature__st{position:absolute;top:clamp(22px,2.4vw,30px);right:clamp(22px,2.4vw,30px);display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ds-font-ui);font-size:var(--ds-text-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ds-color-bone);background:rgba(255,245,233,.1);border:1px solid rgba(255,245,233,.28);
  border-radius:var(--ds-radius-pill);padding:6px 13px}
.home-elev .ts-item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,1.6vw,18px);align-items:start;
  padding:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,30px);border-top:var(--hair)}
.home-elev .ts-item__ico{width:38px;height:38px;flex:none}
.home-elev .ts-item__txt span{font-size:14.5px;color:var(--ds-text-secondary);line-height:1.4}
@media(max-width:520px){
.home-elev .ts-feature__st{position:static;grid-column:1 / -1}
.home-elev .ts-feature__k,.home-elev .ts-feature__body h4{padding-right:0}
}
/* instrument column slightly wider than content; the animation itself fills ~75% of its panel */
.home-elev .v3-module{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.5vw,20px);align-items:stretch;padding:8px}
.home-elev .v3-module .hf-mod-anim .mi-stage svg{width:auto;height:100%;max-width:75%;max-height:100%;aspect-ratio:1;margin:auto}
/* mobile: the card stacks — compact instrument on top, body below, full width.
   This rule must live HERE, after the base 2-col rule above, because this
   sheet loads last and was overriding elevate.css's 520px stack (2026-07-06). */
@media(max-width:560px){
  .home-elev .v3-module{grid-template-columns:1fr;gap:10px}
  .home-elev .v3-module .hf-mod-anim.mod-instrument .mi-stage{flex:none;min-height:0;height:172px}
}
/* card description sits one DS level below the section lead (card body tier) */
.home-elev .v3-module__body p{flex:1 1 auto;font-size:calc(var(--ds-text-feature-body) * .85);line-height:1.55;color:var(--ds-color-green)}
.home-elev .pp-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,16px);align-items:start;
  padding:clamp(30px,3.2vw,36px) clamp(32px,3.6vw,44px);border-top:var(--hair);border-left:var(--hair);
  transition:background var(--ds-dur-fast) var(--ease)}
.home-elev .pp-ico{width:clamp(34px,3.7vw,42px);height:clamp(34px,3.7vw,42px);flex:none}
.home-elev .pp-txt h4{display:block;font-family:var(--ds-font-display);font-size:calc(var(--ds-text-h4) * .85);font-weight:600;
  letter-spacing:-.01em;color:var(--ds-color-green-deep);line-height:1.15;margin:5px 0 10px}
.home-elev .pp-txt span{display:block;font-size:calc(var(--ds-text-feature-body) * .85);color:var(--ds-text-secondary);line-height:1.55}
.home-elev .ind-seg__t{font-family:var(--ds-font-display);font-weight:600;font-size:var(--ds-text-h4);
  letter-spacing:-.014em;line-height:1.16;color:var(--ds-color-green-deep);
  margin:20px 0 var(--ds-space-3);
  min-height:2.4em;display:flex;align-items:flex-end;justify-content:center;text-align:center}


/* --- from the CURSOR layer (index variant) -------------------------------- */
.home-cursor-v1 .pf-star{color:var(--ds-color-copper);font-weight:700;font-size:.62em;vertical-align:super;margin-left:1px}
.home-cursor-v1 .pf-stats-note{margin:-1.5rem 0 0;font-family:var(--ds-font-ui);font-size:12px;font-style:italic;color:var(--ds-text-secondary);line-height:1.55;max-width:92ch}
/* ---------------------------------------------------------------------------
   POSTURE · copy + green card top row; cert marks below; lighter accent
   --------------------------------------------------------------------------- */
.home-cursor-v1 .section_posture .post-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42%);
  gap:clamp(28px,4vw,56px);align-items:center;
  margin-bottom:clamp(56px,5.6vw,88px)}
/* mobile/tablet: stack the copy and the certified-claim card vertically (was squeezing to 2 cols) */
@media(max-width:880px){
  .home-cursor-v1 .section_posture .post-hero{grid-template-columns:1fr;align-items:start}
}
.home-cursor-v1 .ed-post__certs{
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(64px,9.2vw,144px);row-gap:0;align-items:start;
  margin-top:clamp(12px,1.2vw,16px);position:relative}
.home-cursor-v1 .ed-post__certs::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--ds-border-strong);transform:translateX(-0.5px)}
@media(max-width:640px){
.home-cursor-v1 .ed-post__certs{grid-template-columns:1fr;column-gap:0}
.home-cursor-v1 .ed-post__certs::before{display:none}
}
/* items flow row-major into the 2-col grid, so the marks and titles align on
   the same x-axis across both columns. top row carries no rule. */
.home-cursor-v1 .ed-post__certs .ed-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(44px,4.8vw,64px) 0;border-top:1px solid var(--ds-border-strong)}
.home-cursor-v1 .ed-post__certs .ed-item:nth-child(1),
.home-cursor-v1 .ed-post__certs .ed-item:nth-child(2){border-top:none;padding-top:0}
@media(max-width:640px){
.home-cursor-v1 .ed-post__certs .ed-item:nth-child(2){border-top:1px solid var(--ds-border-strong);padding-top:clamp(44px,4.8vw,64px)}
}
/* top row: enlarged seal mark left, signature badge pinned top-right */
.home-cursor-v1 .ed-item__row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%}
.home-cursor-v1 .ed-item__mark{
  width:72px;height:72px;flex:none;border:none;background:none;border-radius:0;overflow:visible;display:block}
.home-cursor-v1 .ed-item__mark .ed-seal{width:100%;height:100%;display:block}
.home-cursor-v1 .ed-item__mark .ed-seal .duo-line{stroke-width:1.3}
.home-cursor-v1 .ed-item__mark .ed-seal .duo-accent-line{fill:none;stroke:var(--ds-color-copper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-cursor-v1 .grp-intro__copy{max-width:64ch;min-width:0;margin:clamp(56px,9vw,130px) 0 0}
.home-cursor-v1 .grp-intro__spine{min-width:0;margin-top:0}
@media(max-width:980px){
.home-cursor-v1 .grp-intro__copy{margin-top:0}
.home-cursor-v1 .grp-intro__spine{margin-top:0}
}
/* ===========================================================================
   COST OF DOING NOTHING (.section_problem) — page-specific refinements
   1) Desktop (>=881px): the signature animation sits on the LEFT; the head
      (eyebrow, title, standfirst) sits in the RIGHT column, LEFT-aligned to
      the card grid below. Mobile (<=880px) keeps the existing stacked layout.
   2) A clearer divider between the card body and the solution footer band.
   3) An organic green backdrop behind the solution checkmark (duo-icon green).
   4) Uniform cards: equal height + equal-height footers via row subgrid.
   =========================================================================== */

/* --- 1 · desktop layout: animation left, head in right column (mobile <=880px unchanged) --- */
@media(min-width:881px){
  /* warm bloom + light source follow the animation to the TOP-LEFT */
  .home-cursor-v1 .section_problem{
    background:
      radial-gradient(72% 80% at 0% 0%, rgba(216,108,30,0.14) 0%, rgba(216,108,30,0) 46%),
      radial-gradient(140% 132% at 0% 1%, #0d5a3b 0%, #084d33 30%, #043e29 60%, #022a1c 100%);
  }
  /* the animation: same vertical offset, mirrored to the left edge */
  .home-cursor-v1 .section_problem .prob_bg{
    right:auto;
    left:clamp(-240px,-12vw,-110px);
  }
  /* head sits in the RIGHT column, LEFT-aligned; its left edge lands on the
     card-grid midline (the left edge of the right-hand card pair) */
  .home-cursor-v1 .section_problem .section-head{
    margin-left:50%;
    max-width:none;
    text-align:left;
  }
  .home-cursor-v1 .section_problem .section-head .heading-style-h2,
  .home-cursor-v1 .section_problem .section-head > h2,
  .home-cursor-v1 .section_problem .section-head > p{
    margin-left:0;
    max-width:none;
  }
}
/* --- 2 · clearer body/solution divider (all breakpoints) + roomier sage footer --- */
.home-cursor-v1 .section_problem .prob_fix{
  border-top:1px solid var(--ds-color-green-200);
  padding-top:clamp(24px,2.4vw,32px);
  padding-bottom:clamp(24px,2.4vw,32px);
}
/* prominent vertical separator between the sage footers (hidden on the last card in the 4-up row) */
.home-cursor-v1 .section_problem .prob_cell:not(:last-child) .prob_fix{
  border-right:1px solid var(--ds-color-green-200);
}
/* --- 3 · organic green backdrop behind the solution checkmark --- */
.home-cursor-v1 .section_problem .prob_fix__mk{
  width:24px;height:24px;padding:4px;box-sizing:border-box;
  background:color-mix(in srgb, var(--ds-color-green) 18%, transparent);
  /* near-circular blob with deliberately uneven edges */
  border-radius:63% 37% 46% 54% / 56% 44% 56% 44%;
  margin-top:-1px;
  overflow:visible;
}
/* --- 4 · uniform cards: equal height + equal-height solution footers, aligned
   at any width, via row subgrid (icon | title | body | footer share row lines).
   Scoped to the 4-up single row; at <=980px the panel reflows and the base
   per-row stretch applies. --- */
@media(min-width:981px){
  .home-cursor-v1 .section_problem .prob_panel{
    grid-template-rows:auto auto 1fr auto;   /* icon · title · body(fills) · footer */
  }
  .home-cursor-v1 .section_problem .prob_cell{
    display:grid;
    grid-row:1 / -1;             /* each card spans all four row tracks */
    grid-template-rows:subgrid;  /* children align to the shared row lines */
  }
  .home-cursor-v1 .section_problem .prob_fix{
    margin-top:0;                /* the 1fr body row pins the footer to the bottom */
  }
}
/* --- 5 · PLATFORM instrument: split the status header into a TOP caption
   (label) and a BOTTOM caption (metric), each full-width + centred. Text scales
   with the instrument width (container-query units) so it never clips, and the
   stage flexes so the two bars do not make the card any taller. --- */
.home-cursor-v1 .section_platform .mod-instrument{
  container-type:inline-size;
}
.home-cursor-v1 .section_platform .mi-head{
  display:contents;            /* promote label + metric to instrument-column items */
}
.home-cursor-v1 .section_platform .mi-stage{
  order:1;
  /* trimmed from the original 184-232: low enough that the two bars never enlarge
     the instrument (stacked: 25+164+25 ~= the old 30+184), and on the side-by-side
     layout the instrument still just stretches to the taller text column */
  min-height:164px;
}
.home-cursor-v1 .section_platform .mi-label{
  order:0; width:100%; box-sizing:border-box; display:block;
  text-align:center; white-space:nowrap;
  padding:6px clamp(8px,3cqi,14px);
  background:var(--ds-color-bone); border-bottom:var(--hair);
  font-size:clamp(6.5px,3.9cqi,10.5px);
}
.home-cursor-v1 .section_platform .mi-metric{
  order:2; width:100%; box-sizing:border-box;
  display:flex; justify-content:center; align-items:baseline; gap:5px;
  padding:6px clamp(8px,3cqi,14px);
  background:var(--ds-color-bone); border-top:var(--hair); border-left:0;
  white-space:nowrap;
}
.home-cursor-v1 .section_platform .mi-num,
.home-cursor-v1 .section_platform .mi-unit{
  font-size:clamp(6.5px,3.9cqi,10.5px);
}

/* solo clinician image replacing the 3-orb cluster (client feedback 2026-07-03) */
/* rectangular crop, column-matched to the module cards below (client feedback 2026-07-06) */
/* stacked default: keep an intrinsic aspect ratio; small (2px-ish) corners to
   match the group-heritage image below the timeline (client 2026-07-06) */
.home-v2 .plat-orbs--solo{display:grid;place-items:center;width:100%;height:auto}
.home-v2 .plat-orb--solo{position:static;width:100%;height:auto;aspect-ratio:950/540;left:auto;top:auto;
  border-radius:3px}
.home-v2 .plat-orb--solo::after{border-radius:3px}
/* desktop: the image column matches the left copy's HEIGHT and grows/shrinks
   with it — cover fills the box (no stretch), the eye stays framed via the
   image-slot `position` focal point */
@media(min-width:921px){
  .home-v2 .plat-head{grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);align-items:stretch}
  .home-v2 .plat-orbs--solo{place-items:stretch;height:100%}
  .home-v2 .plat-orb--solo{height:100%;aspect-ratio:auto}
}

/* governance-entry redesign: widget moved up-left, header moved into the grid on
   the right, evidence checklist pulled out as its own full-width 3-col row below
   (client feedback 2026-07-06). Scoped by id so #services on Industries, which
   reuses the same .v3-govern-grid/.v3-evidence classes with different content,
   is untouched. */
#governance-entry .v3-govern-grid{align-items:start}
#governance-entry .v3-evidence{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);margin:clamp(28px,3.4vw,48px) 0 0}
#governance-entry .v3-evidence .e{border-top:none;padding:0;display:flex;flex-direction:column;gap:8px}
/* icon centred against the h4's own line, not the whole card's height (2026-07-06 fix) */
#governance-entry .v3-evidence .e__head{display:flex;align-items:center;gap:14px}
#governance-entry .v3-evidence .e h4{margin:0}
#governance-entry .v3-evidence .e > span{padding-left:40px}
@media(max-width:720px){
  #governance-entry .v3-evidence{grid-template-columns:1fr}
}

/* ============================================================================
   ASCII signature hero card (2026-07-07) — contained in the hero's right column,
   optimised: the animation fills the card and cycles the four products; the
   swapping product info (title + feature labels) sits full-width at the bottom.
   No tabs, no ground switch, no badge. Driven by lab-ascii-hero.js.
   ============================================================================ */
.home-v2 .hf-hero-field.ascii-card{
  display:block; position:relative; width:100%; max-width:none; margin-inline:0;
  height:clamp(520px, 64vh, 700px);
  background:var(--ds-color-green-deep); border-radius:2px; overflow:hidden;
  isolation:isolate;   /* contain the screen-blend of the rim-light to this card */
}
.ascii-card__canvas{ position:absolute; inset:0; }
.ascii-card__canvas canvas{ display:block; width:100%; height:100%; }
.ascii-card__canvas.is-fallback{ background:var(--ds-color-green-deep); }
/* deep-ember rim-light: a dim copper top edge + upper-corner embers bleed a little way inward
   over the dark ground, then dissolve into black well before the middle, so the interior reads
   as a recessed volume with a black core. screen-blended, so it warms the black without dulling
   the bright glyphs; the copper fades through deepened copper-ink into black for a smooth falloff. */
.ascii-card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; mix-blend-mode:screen;
  background:
    linear-gradient(180deg, rgba(213,105,27,.32) 0%, rgba(165,78,13,.12) 10%, rgba(165,78,13,0) 27%),
    radial-gradient(58% 66% at -7% -6%, rgba(213,105,27,.28) 0%, rgba(165,78,13,0) 52%),
    radial-gradient(58% 66% at 107% -6%, rgba(213,105,27,.28) 0%, rgba(165,78,13,0) 52%),
    linear-gradient(90deg, rgba(165,78,13,.26) 0%, rgba(165,78,13,0) 12%),
    linear-gradient(270deg, rgba(165,78,13,.26) 0%, rgba(165,78,13,0) 12%);
  /* the mask fades slower and reaches much further down, so the side edges spread downward
     (the top-centre is already self-limited by its own gradient, so it stays put) */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 8%, rgba(0,0,0,.55) 32%, rgba(0,0,0,.30) 56%, rgba(0,0,0,0) 84%);
          mask-image:linear-gradient(180deg, #000 0%, #000 8%, rgba(0,0,0,.55) 32%, rgba(0,0,0,.30) 56%, rgba(0,0,0,0) 84%);
}
/* bottom green scrim — pulled lower and lighter up top so it backs the caption without
   riding up over the sculpture */
.ascii-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:54%; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(3,69,44,0) 0%, rgba(3,69,44,0) 26%, rgba(2,52,33,.5) 50%, rgba(2,52,33,.92) 70%, #023421 84%);
}
.ascii-card__info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 24px 24px; }
.ascii-card__t{
  margin:0; font:500 clamp(22px,1.8vw,28px)/1.1 var(--ds-font-display, Gantari, sans-serif);
  letter-spacing:-.01em; color:var(--ds-color-bone);
  transition:opacity .3s ease, transform .3s ease;
}
.ascii-card__d{
  margin:8px 0 0; font:400 13.5px/1.55 var(--ds-font-body, "Rethink Sans", sans-serif);
  color:color-mix(in srgb, var(--ds-color-bone) 78%, transparent);
  transition:opacity .3s ease, transform .3s ease;
}
.ascii-card__meta{ margin-top:13px; display:flex; flex-wrap:wrap; gap:7px; transition:opacity .3s ease, transform .3s ease; }
.ascii-card__meta .lab-chip{
  font:500 10.5px/1 var(--ds-font-ui, Onest, sans-serif); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ds-color-copper-light);
  border:1px solid color-mix(in srgb, var(--ds-color-copper-light) 38%, transparent);
  border-radius:2px; padding:6px 9px 5px; white-space:nowrap;
}
.ascii-card__t.is-out, .ascii-card__d.is-out, .ascii-card__meta.is-out{ opacity:0; transform:translateY(6px); }
/* desktop: give the animation more presence — wider column, taller card; the left copy
   stays vertically centred via the grid's align-items:center */
@media(min-width:881px){
  .home-v2 .hf-heroA-grid:has(.ascii-card){ grid-template-columns:1.05fr 1fr; }
}
@media(max-width:880px){
  /* taller card on mobile so the lifted sculpture clears the caption block below it */
  .home-v2 .hf-hero-field.ascii-card{ order:2; height:clamp(450px,64vh,560px); }
}

/* ============================================================================
   ADD 2026-07-09 · POSTURE green card -> two-column (ISO 9001 | benchmark stat)
   Eyebrow removed; ISO info keeps the left column, the promoted MedAgentBench
   fact fills the right. Constellation behind is faded harder over its lower
   half so it never fights the copy. Stacks inside the card on narrow widths
   (container query on the card itself, so it is width-aware, not viewport-only).
   ============================================================================ */
.home-elev .post-hero__card{ container-type:inline-size; }
.home-elev .ed-feature--split{ justify-content:flex-end; }
.home-elev .ed-feature--split .ed-feature__body{ width:100%; }
/* fade the animation's lower half away from the content */
.home-elev .ed-feature--split::after{
  background:linear-gradient(to top,
    rgba(3,69,44,.99) 0%, rgba(3,69,44,.96) 46%, rgba(3,69,44,.64) 74%, rgba(3,69,44,.26) 100%);
}
.home-elev .ef-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,26px); align-items:stretch;
}
/* text bottom-aligns within each column; columns stretch so the divider is full height */
.home-elev .ef-split__col{ min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.home-elev .ef-split .ed-feature__t{ font-size:clamp(26px,3vw,38px); line-height:.98; }
.home-elev .ef-split .ed-feature__lede{ font-size:clamp(15px,1.5vw,18px); line-height:1.14; margin-top:7px; }
.home-elev .ef-split .ed-feature__s{ font-size:var(--ds-text-meta); line-height:1.5; margin-top:12px; max-width:none; }
/* the promoted benchmark fact */
.home-elev .ef-split__stat{
  padding-left:clamp(16px,2vw,26px);
  border-left:1px solid rgba(255,245,233,.18);
}
.home-elev .ef-stat__k{
  display:block; font-family:var(--ds-font-ui); font-size:var(--ds-text-micro);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ds-color-copper-light); margin-bottom:10px;
}
.home-elev .ef-stat__n{
  display:block; font-family:var(--ds-font-display); font-weight:600;
  font-size:clamp(40px,5vw,60px); line-height:.9; letter-spacing:-.03em;
  color:var(--ds-color-bone);
}
.home-elev .ef-stat__l{
  display:block; margin-top:9px; font-family:var(--ds-font-display); font-weight:500;
  font-size:clamp(15px,1.5vw,18px); line-height:1.14; color:rgba(255,245,233,.92);
}
@container (max-width:400px){
  .home-elev .ef-split{ grid-template-columns:1fr; gap:clamp(18px,5vw,24px); }
  .home-elev .ef-split__stat{
    padding-left:0; border-left:0;
    padding-top:clamp(18px,5vw,22px); border-top:1px solid rgba(255,245,233,.18);
  }
}

/* ============================================================================
   ADD 2026-07-09 · GROUP heritage image -> two-column band with CEO quote.
   Left: the heritage photo, dissolving into the deep-green quote panel via the
   signature edge gradient. Right: a large display-type pull quote + attribution.
   Tablet/mobile: stacks to one column, blend runs downward into the quote.
   ============================================================================ */
.home-elev .grp-quote{
  position:relative; z-index:1; margin:clamp(28px,3.2vw,46px) 0 0;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--ds-color-green-deep);
  border:1px solid rgba(255,245,233,.1);
  border-radius:var(--ds-radius-lg); overflow:hidden;
  box-shadow:var(--elev-3);
}
.home-elev .grp-quote__media{ position:relative; min-height:clamp(300px,34vw,440px); }
.home-elev .grp-quote__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 38%;
}
.home-elev .grp-quote__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(3,69,44,0) 44%, rgba(3,69,44,.5) 72%, rgba(3,69,44,.92) 92%, var(--ds-color-green-deep) 100%);
}
.home-elev .grp-quote__aside{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.4vw,54px); color:var(--ds-color-bone);
}
.home-elev .grp-quote__mk{
  font-family:var(--ds-font-display); font-size:clamp(56px,6vw,88px); line-height:.5;
  color:rgba(233,166,107,.44); margin-bottom:clamp(6px,1vw,12px);
}
.home-elev .grp-quote__q{
  margin:0; font-family:var(--ds-font-display); font-weight:500;
  font-size:calc(var(--ds-text-body-lg) * .85); line-height:1.5; letter-spacing:-.005em;
  color:rgba(255,245,233,.82); text-wrap:pretty;
}
/* the opening sentence carries the display size; the remainder reads at section-desc size */
.home-elev .grp-quote__lead{
  display:block; margin-bottom:clamp(12px,1.4vw,18px);
  font-size:clamp(22px,2.4vw,32px); line-height:1.22; letter-spacing:-.02em;
  color:rgba(255,245,233,.97); text-wrap:balance;
}
.home-elev .grp-quote__by{
  margin-top:clamp(18px,2vw,26px); display:flex; flex-direction:column; gap:3px;
  font-family:var(--ds-font-ui);
}
.home-elev .grp-quote__by b{
  font-size:var(--ds-text-body-sm); font-weight:700;
  color:var(--ds-color-bone); letter-spacing:.01em;
}
.home-elev .grp-quote__by span{
  font-size:var(--ds-text-micro); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ds-color-copper-light);
}
@media(max-width:880px){
  .home-elev .grp-quote{ grid-template-columns:1fr; }
  .home-elev .grp-quote__media{ min-height:clamp(220px,42vw,320px); }
  .home-elev .grp-quote__img{ object-position:50% 32%; }
  .home-elev .grp-quote__media::after{
    background:linear-gradient(180deg,
      rgba(3,69,44,0) 48%, rgba(3,69,44,.55) 78%, var(--ds-color-green-deep) 100%);
  }
}

/* ADD 2026-07-09b - value anchors down to the secondary-button text size (icons stay 28px) */
.home-v2 .hero_prop{ font-size:15px; }

/* ADD 2026-07-09c · centre the secondary "Watch our story" CTA under the
   (full-width, per core-v2 @680) primary "Book a demo" on mobile. */
@media(max-width:680px){
  .home-v2 .hero_actions{ justify-content:center; }
}