/* ============================================================
   Erisse — /decorative-language page-specific styles
   Owns ONLY this file + pages/decorative-language/ + decorative-language-* assets.
   Does NOT modify styles.css or templates/ — everything here is an override
   or an addition scoped to this page's document.
   Coordinate system: desktop reproduces the 1440px Figma layout absolutely;
   ≤809px re-flows to the mobile variant.
   Reference widths: desktop 1440, mobile 390. Content column 1128 (centered).
   ============================================================ */

/* The shared ornament strip's pattern does not match this page's linework;
   this page paints its own faint linework via the backdrop SVG over the lower
   region, so suppress the shared strip here (verified: lower diff without it). */
.page > .ornament { display: none !important; }

/* ============ HERO (title only, in a 900px hero) ============ */
.hero { height: 900px; }
.hero .hero-content { padding-top: 0; }   /* nav sits ~40px higher here than home */
.hero .site-nav { margin-bottom: 0; }
/* on this page the hero nav spans the full width (home confines it to 1128) */
.hero .hero-frame { height: 100%; width: 100%; }
/* the language selector (nav "EN") IS shown on this page — it is a runtime
   component that only mounts against the JSON-patched mirror. */
.hero .hero-copy {
  width: 744px; max-width: 100%;
  margin: 258px auto 0;      /* places the title at the published y (~354) */
  padding: 0 10px;
  align-self: center;
  text-align: center;
  gap: 0;
}
.dl-hero-title {
  font-family: var(--serif-regular);
  font-size: 64px; line-height: 76.8px; font-weight: 400;
  color: var(--cream);
}
/* warm tint: rgb(123,109,88) laid over image+scrim with difference blend */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(123, 109, 88); mix-blend-mode: difference;
  pointer-events: none;
}

/* Shared footer nests footer-cta + footer-main; the Figma page separates them
   as two sections with a 100px gap. Restore that gap for this page only.
   (Template concern — flag for the merge session.) */
.site-footer { gap: 100px; }

/* ============ CONTENT WRAPPER ============ */
/* One flex child of .page. .page gap is 167px; the Figma page uses 100px
   gaps around this block, so pull the top/bottom in by 67px. */
.dl {
  position: relative;
  width: 100%;
  height: 9553px;                 /* patched: page y 1000 → 10553 */
  margin-top: -67px;              /* hero→content gap 167 → 100 */
  margin-bottom: -67px;           /* content→footer gap 167 → 100 */
  z-index: 1;
  transform: translate(0, 0);
}

/* Grayscale-AA lever (per project doc): headless Chromium only reproduces the
   mirror's grayscale text AA when each text element is on its own compositing
   layer. The wrapper transform is not enough for small glyphs — put every text
   element on a layer with translateZ(0). (NOT on images — that regresses their
   GPU downscale.) */
.dl-pill, .dl-p16, .dl-p24, .dl-col > p, .dl-lead24, .dl-body24,
.dl-item h3, .dl-item p, .dl-car-cap, .dl-car-pill p,
.dl-stp-title, .dl-stp-body, .dl-stp-num span, .dl-hero-title,
.dl .btn, .site-nav a, .nav-menu a, .lang-btn, .site-footer p,
.site-footer a, .footer-col-title, .news-note, .copyright, .credit {
  transform: translateZ(0);
}
.dl * { box-sizing: border-box; }

/* faint linework backdrop over the lower region (rules + tan + case) */
.dl-backdrop {
  position: absolute; top: 3578px; left: 50%; margin-left: -1519px;  /* page x = -799 */
  width: 3000px; height: 4766px;
  z-index: 1; pointer-events: none;
}

/* every piece of real content sits above the backdrop */
.dl-el { position: absolute; z-index: 2; }

/* all headings on this page are regular weight (the mirror uses weight 400;
   h2/h3 default to bold, which rendered ~1.5x too heavy) */
.dl-ctx-head, .dl-rules-head, .dl-deep-head, .dl-case-head, .dl-intro-head,
.dl-stp-title { font-weight: 400; }

/* ---- pills ---- */
.dl-pill {
  display: inline-flex; justify-content: center; align-items: center;
  background: var(--pill-bg);
  padding: 2px 8px; height: 26px;
  font-family: var(--sans-bold); font-size: 16px; line-height: 22.4px;
  text-transform: uppercase; color: var(--pill-fg); white-space: nowrap;
}
.dl-pill-c { left: 50%; transform: translateX(-50%); }   /* centred pills */

/* ---- shared text styles on this page ---- */
.dl-p16 { font-family: var(--serif-light); font-size: 16px; line-height: 19.2px; color: var(--cream); }
.dl-p24 { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; color: var(--cream); }
.dl-col { display: flex; flex-direction: column; }
.dl-col > p { margin: 0; }

/* ============ BLOCK 1 — INTRO ============ */
.dl-pill-dl   { top: 150px; }
.dl-intro-head {
  top: 200px; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 728px; text-align: center;
  font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; color: var(--cream);
}
.dl-intro-img { top: 554px; left: 206px; width: 489px; height: 814px; } /* live 19 Jul: block sits 178px lower than the 13 Jul build */
.dl-intro-img img { width: 100%; height: 100%; object-fit: cover; }
.dl-intro-col { top: 673px; left: 745px; width: 489px; gap: 0; }
.dl-intro-col p { white-space: pre-wrap; }

/* ---- CONTEXT ---- */
.dl-pill-ctx  { top: 1567px; } /* live 19 Jul: 2px higher */
.dl-ctx-head {
  top: 1618px; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 1028px; text-align: center;
  font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; color: var(--cream);
}
.dl-ctx1-text { top: 2355px; left: 206px; width: 469px; }
.dl-ctx1-img  { top: 2221px; left: 765px; width: 469px; height: 469px; overflow: hidden; }
.dl-ctx1-img .dl-src-img { position: absolute; width: 1774px; height: 2365px; left: -146px; top: -1981px; max-width: none; }
/* baked mobile images: the mirror's exact rendered pixels, shown 1:1 */
.dl-baked { display: block; width: 100%; height: 100%; object-fit: cover; }
.dl-ctx2-img  { top: 2834px; left: 206px; width: 469px; height: 469px; }
.dl-ctx2-img img { width: 100%; height: 100%; object-fit: cover; }
.dl-ctx2-text { top: 2881px; left: 765px; width: 469px; gap: 28.8px; }
.dl-ctx3-text { top: 3566px; left: 206px; width: 469px; }
.dl-ctx3-img  { top: 3447px; left: 765px; width: 469px; height: 469px; }
.dl-ctx3-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============ BLOCK 2 — RULES ============ */
.dl-pill-rules { top: 4216px; } /* live 19 Jul: 2px higher */
.dl-rules-head {
  top: 4267px; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 720px; text-align: center;
  font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; color: var(--cream);
}
/* rules carousel (static state = slide 1 of 3) */
/* ---- rules image carousel (runtime component replica) ----
   Geometry measured on the mounted live component at 1440/390.
   Container 1128x544 (mobile 390x306); centre slide 729x409 (293x164),
   side slides 432x244 (150x84) blurred 3px and dimmed 40%; gap 133 (46);
   captions Reckless Light 24 (16), side captions scaled 432/729 (150/293)
   at opacity .6; settled track x -365.5px (-147.5px). Transitions 400ms
   cubic-bezier(.4,0,.2,1); track x is spring-driven in JS. */
.dl-carousel { top: 4759px; left: 50%; margin-left: -564px; width: 1128px; height: 544px; overflow: hidden; }
.dl-car-track { position: absolute; top: 0; left: 0; display: flex; gap: 133px; transform: translateX(-365.5px); will-change: transform; }
.dl-car-item { flex-shrink: 0; width: 432px; transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.dl-car-item figure { position: relative; overflow: hidden; height: 244px; transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.dl-car-item figure img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transition: filter 400ms ease; }
.dl-car-dim { position: absolute; inset: 0; background: #000; opacity: 0.4; pointer-events: none; transition: opacity 400ms ease; }
.dl-car-capwrap {
  margin-top: 19px; width: 729px; padding: 0 39px;
  transform: scale(0.59259); transform-origin: top left; opacity: 0.6;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
}
.dl-car-cap { font-family: var(--serif-light); font-size: 24px; line-height: 1.2; text-align: center; color: var(--cream); }
.dl-car-item.is-center { width: 729px; }
.dl-car-item.is-center figure { height: 409px; }
.dl-car-item.is-center figure img { filter: none; }
.dl-car-item.is-center .dl-car-dim { opacity: 0; }
.dl-car-item.is-center .dl-car-capwrap { width: 100%; transform: scale(1); opacity: 1; }
.dl-car-arrow {
  position: absolute; z-index: 20; width: 48px; height: 48px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  display: flex; align-items: center; justify-content: center;
  top: 204.5px; transform: translateY(-50%);
  transition: background 150ms ease;
}
.dl-car-arrow svg { transition: transform 150ms ease; }
.dl-car-arrow:hover { background: rgb(255, 255, 255); }
.dl-car-arrow:hover svg { transform: scale(1.1); }
.dl-car-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.dl-car-prev { left: 32px; }
.dl-car-next { right: 32px; }
.dl-car-pill {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 20;
  padding: 8px 16px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dl-car-pill p { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; }
.dl-cta { top: 5357px; }
.dl-cta.dl-cta-ghost { left: 461.7px; }
.dl-cta.dl-cta-solid { left: 722.2px; }
a.dl-cta { font-size: 16px; line-height: 22.4px; padding: 6px 20px; }

/* ============ BLOCK 3 — TAN "DEEP ROOTS" PANEL ============ */
.dl-tan-fill {
  position: absolute; z-index: 0;
  top: 5600px; left: 156px; width: 1128px; height: 2593px;
  background: rgb(214, 187, 146);
}
/* the published tan panel carries a ~10% dark wash (rendered flat ≈ 192 not 214) */
.dl-tan-fill::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.10);
}
.dl-pill-deep { top: 5700px; }
.dl-deep-head {
  top: 5750px; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 744px; text-align: center;
  font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px;
  color: rgb(77, 66, 51);
}
.dl-tan-dark { color: rgb(77, 66, 51); }

/* neuroscience / psychology two-column groups */
/* live renders NEUROSCIENCE / PSYCHOLOGY as bare tan labels on the panel -
   no pill box (verified on the live DOM: transparent bg, no padding, h22) */
.dl-pill-neuro { top: 6226px; left: 239px; }
.dl-pill-psych { top: 7372px; left: 239px; }
.dl-pill-neuro, .dl-pill-psych { background: none; padding: 0; height: 22px; }
.dl-group-left  { width: 452px; }
.dl-group-right { width: 453px; }
.dl-neuro-left  { top: 6275px; left: 231px; }
.dl-neuro-right { top: 6275px; left: 757px; }
.dl-psych-left  { top: 7421px; left: 231px; }
.dl-psych-right { top: 7421px; left: 757px; }

.dl-lead24 { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: rgb(77,66,51); margin: 0; }
.dl-body24 { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; color: rgb(77,66,51); margin: 0; }
.dl-col > .dl-gap-h { margin-top: 24px; }        /* heading → first paragraph */
.dl-col > .dl-gap-p { margin-top: 28.8px; }      /* paragraph → paragraph (one line) */

/* list on the right of each tan group — items sit on a fixed 174px pitch */
.dl-list { display: flex; flex-direction: column; }
.dl-item { position: relative; padding-left: 46px; height: 174px; }
.dl-item .dl-ic { position: absolute; left: 0; top: 4px; width: 22px; height: 22px; }
.dl-item .dl-ic img { width: 100%; height: 100%; object-fit: contain; }
.dl-item h3 { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: rgb(77,66,51); margin: 0; font-weight: 400; }
.dl-item p  { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(77,66,51); margin: 25px 0 0; }

/* ============ BLOCK 4 — CASE STUDY ============ */
.dl-pill-case { top: 8392px; }
.dl-case-head {
  top: 8443px; left: 50%; transform: translateX(-50%) translateZ(0);
  width: 600px; text-align: center;
  font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px;
  color: var(--cream);
}
.dl-case-img { top: 8674px; left: 281px; width: 439px; height: 680px; }
.dl-case-img img { width: 100%; height: 100%; object-fit: cover; }
/* case-study step panel (runtime component; static = step 01 active) */
/* ---- case-study 01-07 stepper (runtime component replica) ----
   Root 439x878 (mobile 340x431); text column masked (50px fade top+bottom),
   right rail 50px (35px) bordered #74654E with up/down chevrons + numbered
   buttons (active bg #74654E); active step centred, neighbours +/-250px
   (mobile +/-107.75px) at opacity .4 blur(2px); 0.7s cubic-bezier(.25,.1,.25,1). */
.dl-stepper { top: 8575px; left: 720px; width: 439px; height: 878px; }
.dl-stp-mask {
  position: absolute; top: 0; bottom: 0; left: 0; right: 66px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%);
}
.dl-stp-item {
  position: absolute; left: 50%; top: 50%; width: 100%; max-width: 400px;
  padding: 0 25px; box-sizing: border-box; pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; visibility: hidden; filter: blur(4px);
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              filter 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s 0.7s;
}
.dl-stp-item.is-active { opacity: 1; visibility: visible; filter: blur(0); transition-delay: 0s; }
.dl-stp-item.is-prev { transform: translate(-50%, calc(-50% - 250px)); opacity: 0.4; visibility: visible; filter: blur(2px); transition-delay: 0s; }
.dl-stp-item.is-next { transform: translate(-50%, calc(-50% + 250px)); opacity: 0.4; visibility: visible; filter: blur(2px); transition-delay: 0s; }
.dl-stp-item.is-above { transform: translate(-50%, calc(-50% - 500px)); }
.dl-stp-item.is-below { transform: translate(-50%, calc(-50% + 500px)); }
/* live uses the BASE family "Reckless Neue TRIAL" (registered w300 = the Light
   face) for BOTH stepper title and body - the title is NOT the Regular face */
.dl-stp-title { font-family: "Reckless Neue TRIAL", sans-serif; font-size: 28px; line-height: 33.6px; font-weight: 400; color: var(--cream); margin: 0 0 12px; }
.dl-stp-body  { font-family: "Reckless Neue TRIAL", sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--cream); margin: 0; }
.dl-stp-rail {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 50px; border: 1px solid #74654E; background: transparent;
  display: flex; flex-direction: column;
}
.dl-stp-up, .dl-stp-down {
  width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dl-stp-up { border-bottom: 1px solid #74654E; }
.dl-stp-down { border-top: 1px solid #74654E; }
.dl-stp-up:disabled, .dl-stp-down:disabled { opacity: 0.3; cursor: not-allowed; }
.dl-stp-nums { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }
.dl-stp-num {
  height: 28px; margin: 4px 0; display: flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer; transition: all 300ms;
}
.dl-stp-num span { font-family: var(--sans-bold); font-size: 12px; color: #F8F4EE; }
.dl-stp-num.is-on { background: #74654E; }
/* live: fixed 150x40 cream box, 16px label centred (both breakpoints) */
.dl-case-more { top: 9413.5px; left: 720px; }
.dl-case-more.btn { width: 150px; height: 40px; padding: 0; font-size: 16px; line-height: 19px; }

/* ============================================================
   MOBILE (≤809px) — stacked single-column layout (390px reference).
   Reproduces the published mobile order: PSYCHOLOGY before NEUROSCIENCE,
   list items reordered, images full-width above their text.
   dl-origin (page y) = 875; element tops = mobile_page_y − 875.
   ============================================================ */
@media (max-width: 809px) {

  /* live mobile pills are 12px/16.8 in 21px boxes (measured 19 Jul) */
  .dl-pill { font-size: 12px; line-height: 16.8px; height: 21px; padding: 2px 8px; }
  .dl-pill-neuro, .dl-pill-psych { height: 17px; padding: 0; }
  /* DECORATIVE LANGUAGE pill exists on mobile too (missing pre-19 Jul) */
  .dl-pill-dl { display: inline-flex; top: 0px; }
  /* live mobile intro heading is 24px (not 36) */
  .dl-intro-head { font-size: 24px; line-height: 28.8px; }
  /* hero */
  .hero { height: 800px; }
  .hero .hero-copy { width: 100%; margin: 158px auto 0; padding: 0 25px; }
  .dl-hero-title { font-size: 48px; line-height: 57.6px; margin: 0 -55px; } /* live: title spans the full 390px */
  /* live 19 Jul: DL mobile nav is inset 30px (home is 25px) */
  .hero-content { padding-left: 30px; padding-right: 30px; }

  /* content wrapper (patched): mobile .page gap 91 → page uses 75 → pull in 16 */
  .dl { height: 10038px; margin-top: -16px; margin-bottom: -16px; }
        .site-footer { gap: 75px; }

  /* full-page linework backdrop on mobile */
  .dl-backdrop-m {
    top: -875px; left: 50%; margin-left: -1501px;   /* live page x = -1306 (measured) */
    width: 3000px; height: 13037px;
  }

  /* tan fill spans full width on mobile (patched shift +1612) */
  .dl-tan-fill { top: 5813px; left: 0; width: 390px; height: 2984px; }

  /* generic: text columns full width */
  .dl-p16 { font-size: 14px; line-height: 16.8px; }
  .dl-p24 { font-size: 18px; line-height: 21.6px; }

  /* ---- INTRO (mobile has an extra animated heading before the artwork) ---- */
  .dl-pill-dl   { top: 0; }
  .dl-intro-head { top: 45px; left: 25px; width: 340px; transform: translateZ(0); text-align: center; font-size: 24px; line-height: 28.8px; color: var(--cream); } /* live: 24px */
  .dl-intro-img { top: 346px; left: 29px; width: 333px; height: 333px; }
  .dl-intro-col { top: 766.4px; left: 25px; width: 340px; gap: 0; }

  /* ---- CONTEXT (context heading, then image-above-text rows) ---- */
  .dl-pill-ctx  { top: 1546px; }
  .dl-ctx-head  { top: 1591px; left: 25px; width: 340px; transform: translateZ(0); text-align: center; font-size: 36px; line-height: 43.2px; }
  .dl-ctx1-img  { top: 2518px; left: 25px; width: 340px; height: 338px; }
  .dl-ctx1-img .dl-src-img { width: 1286px; height: 1702px; left: -106px; top: -1425px; }
  .dl-ctx1-text { top: 2906px; left: 25px; width: 340px; }
  .dl-ctx2-img  { top: 3132px; left: 25px; width: 340px; height: 338px; }
  .dl-ctx2-text { top: 3446.6px; left: 25px; width: 340px; gap: 21.6px; }
  .dl-ctx3-img  { top: 3730px; left: 25px; width: 340px; height: 340px; }
  .dl-ctx3-text { top: 4119.5px; left: 25px; width: 340px; }

  /* ---- RULES: heading + carousel + stacked buttons ---- */
  .dl-pill-rules { top: 4489px; }
  .dl-rules-head { top: 4533.7px; left: 50px; width: 290px; transform: translateZ(0); text-align: center; font-size: 36px; line-height: 43.2px; } /* live: 290px col */
  .dl-carousel { top: 5228px; left: 0; width: 390px; height: 306px; margin-left: 0; }
  .dl-car-track { gap: 46px; transform: translateX(-147.5px); }
  .dl-car-item { width: 150px; }
  .dl-car-item figure { height: 84px; }
  .dl-car-capwrap { margin-top: 7px; width: 293px; padding: 0 4px; transform: scale(0.51194); }
  .dl-car-cap { font-size: 16px; }
  .dl-car-item.is-center { width: 293px; }
  .dl-car-item.is-center figure { height: 164px; }
  .dl-car-arrow { top: 82px; }
  .dl-cta { top: auto; }
  .dl-cta.dl-cta-ghost { top: 5611.4px; left: 97px; line-height: 21px; }
  .dl-cta.dl-cta-solid { top: 5659.4px; left: 101.9px; }
  a.dl-cta { font-size: 12px; line-height: 16.8px; padding: 6px 12px; }

  /* ---- TAN: DEEP ROOTS (patched +1612) ---- */
  .dl-pill-deep { top: 5913px; }
  .dl-deep-head { top: 5958px; left: 25px; width: 340px; transform: translateZ(0); text-align: center; font-size: 36px; line-height: 43.2px; }

  .dl-lead24 { font-size: 20px; line-height: 24px; }
  .dl-body24 { font-size: 18px; line-height: 21.6px; }
  .dl-col > .dl-gap-p { margin-top: 21.6px; }

  /* PSYCHOLOGY (first on mobile) */
  .dl-pill-psych { top: 6466.9px; left: 33px; }
  .dl-psych-left { top: 6510.7px; left: 25px; width: 340px; }
  .dl-psych-right, .dl-neuro-right { position: static; }
  .dl-list { display: contents; }
  .dl-item { position: absolute; z-index: 2; left: 25px; width: 340px; height: auto; padding-left: 0; }
  .dl-item .dl-ic { left: 0; top: 2px; }
  .dl-item h3 { font-size: 20px; line-height: 24px; padding-left: 45px; }
  .dl-item p  { font-size: 14px; line-height: 16.8px; margin-top: 25px; }
  /* live mobile: the 2nd+3rd item bodies of each list are indented 45px */
  .dl-i-archetypes p, .dl-i-personal p, .dl-i-cognitive p, .dl-i-neural p { padding-left: 45px; }
  .dl-i-cultural   { top: 7000.8px; }
  .dl-i-archetypes { top: 7148.7px; }
  .dl-i-personal   { top: 7296.5px; }
  .dl-i-evolving   { top: 7443.9px; }

  /* NEUROSCIENCE (second on mobile) */
  .dl-pill-neuro { top: 7620.3px; left: 33px; }
  .dl-pill-neuro, .dl-pill-psych { height: 17px; }
  .dl-neuro-left { top: 7664.3px; left: 25px; width: 340px; }
  .dl-i-early     { top: 8154.2px; }
  .dl-i-cognitive { top: 8302.1px; }
  .dl-i-neural    { top: 8450px; }
  .dl-i-timeless  { top: 8597.4px; }

  /* ---- CASE STUDY (patched +1612 + stacked step panel) ---- */
  .dl-pill-case { top: 8946.8px; }
  .dl-case-head { top: 8991.6px; left: 25px; width: 340px; transform: translateZ(0); text-align: center; font-size: 24px; line-height: 28.8px; }
  .dl-case-img  { top: 9082px; left: 0; width: 390px; height: 375px; }
  .dl-stepper { top: 9532px; left: 25px; width: 340px; height: 431px; }
  .dl-stp-mask { right: 45px; }
  .dl-stp-item { padding: 0 15px; }
  .dl-stp-item.is-prev { transform: translate(-50%, calc(-50% - 150px)); }
  .dl-stp-item.is-next { transform: translate(-50%, calc(-50% + 150px)); }
  .dl-stp-item.is-above { transform: translate(-50%, calc(-50% - 300px)); }
  .dl-stp-item.is-below { transform: translate(-50%, calc(-50% + 300px)); }
  .dl-stp-title { font-size: 18px; line-height: 21.6px; margin-bottom: 8px; }
  .dl-stp-body { font-size: 13px; line-height: 1.3; }
  .dl-stp-rail { width: 35px; }
  .dl-stp-up, .dl-stp-down { width: 35px; height: 35px; }
  .dl-stp-up svg, .dl-stp-down svg { width: 8px; height: 5px; }
  .dl-stp-nums { padding: 16px 0; }
  .dl-stp-num { height: 20px; margin: 4px 0; }
  .dl-stp-num span { font-size: 10px; }
  .dl-case-more { top: 9922.7px; left: 25px; }
  .dl-case-more.btn { width: 150px; height: 40px; padding: 0; font-size: 16px; line-height: 19px; }
}