/* ============================================================
   studio DH (dh2 redesign) — Design System & Visual-Skin layer
   Single source of truth for NO-NATIVE-HOME visuals ONLY.

   Cascade (by design): this child CSS = overridable base defaults
   < Kit globals (color + typography) bound to widgets
   < Elementor element settings (box-model + overrides).

   Box-model (width/measure/padding/margin/gap), color and the
   family/size/weight/lh/ls of every text role live in Elementor
   (Kit globals + element settings), NEVER here.

   What DOES live here (no Elementor-native home):
   - :root design tokens (mirror source HTML :root) + base body
   - per-Fraunces-role `font-variation-settings` (.dh-fr-* classes) —
     Kit typography cannot express opsz/SOFT/WONK; the role's
     family/size/weight still come from the bound Kit global,
     this class only adds the variation axes (skin tier).
   - inline <em> accent inside Fraunces display (italic + brand +
     SOFT100 + WONK1) = .dh-fr-* em { } (raw-HTML-in-widget)
   - decorative gradients/placeholders, border/radius/shadow,
     pseudo-elements, position:fixed/sticky, raw <ul>/<a> reset.

   Section skins are added PER-SLICE (one section at a time, on
   first appearance, then locked — never re-tuned). Tokens below
   mirror the dh2 source HTML :root exactly.
   ============================================================ */

:root {
  /* ===== PALETTE: Tichá greige (greige-quiet) — applied 2026-07-07 =====
     Chladně neutrální monochrom téměř bez barvy (quiet luxury). Token names
     kept for continuity; values swapped from the terracotta-clay palette.
     Backup of terracotta values: dh2/backup/dh.css.terracotta-2026-07-07.bak
     Kit color globals mirror these 1:1 (surface==cream, ink==espresso,
     brand==terracotta …) — kept in sync via update_kit. */

  /* — Greige neutral surfaces — */
  --dh-cream:      #EDEAE6;   /* page bg, nav bg, hero-stats bg, cta bg */
  --dh-sand:       #DEDAD3;   /* image-placeholder bg, location bg, denisa gradient end */
  --dh-sand-deep:  #C5BFB5;   /* hero-mark glyph */
  --dh-paper:      #F4F2EE;   /* seasonal-banner bg, result-card bg */

  /* — Ink (greige-charcoal) — */
  --dh-espresso:   #26241F;   /* primary text; info-bar/process/footer bg; btn-primary bg */
  --dh-cocoa:      #43403A;   /* denisa-paragraph text */
  --dh-mocha:      #6A6258;   /* ledes, nav-phone, secondary text */
  --dh-taupe:      #857D71;   /* result-detail text */
  --dh-stone:      #B8B0A4;   /* placeholder stat */

  /* — Accents (greige monochrome — no chroma by design) — */
  --dh-terracotta:      #857B6E;  /* accents, all <em>, dots, eyebrows */
  --dh-terracotta-deep: #6B6256;
  --dh-rose-dust:       #BDB4A8;  /* process title em, footer hover/em */
  --dh-rose-pale:       #D8D2C9;

  /* — Lines — */
  --dh-line:      rgba(38, 36, 31, 0.12);
  --dh-line-soft: rgba(38, 36, 31, 0.06);

  /* — Type families (size/weight/lh/ls = Kit global, NOT here) — */
  --dh-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --dh-sans:  'Manrope', system-ui, -apple-system, sans-serif;
}

/* ---- Base (legit child-CSS base default per manual Step 2) ---- */
body {
  background: var(--dh-cream);
  color: var(--dh-espresso);
  font-family: var(--dh-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Generic helpers (applied via Elementor CSS-class field) ---- */
.dh-serif  { font-family: var(--dh-serif); }
.dh-accent { color: var(--dh-terracotta); }

/* ============================================================
   FRAUNCES ROLE VARIATION CLASSES (.dh-fr-*)
   Added per-slice on first appearance. Each sets only
   `font-variation-settings` (opsz/SOFT/WONK) for that role; the
   family/size/weight/lh/ls come from the bound Kit typography
   global. The <em> rule gives the expressive accent cut.
   (none yet — first added in the hero slice)
   ============================================================ */

/* ============================================================
   SECTIONS — per-section vertical slice, locked one at a time.
   ============================================================ */

/* ===== 01 · INFO-BAR ===== LOCKED (pixel-exact @1440, MAE 0.27)
   Box-model = Elementor: container content_width:full (full-bleed
   espresso bar), padding 11/0, flex column gap0. Color = Kit
   COLOR globals bound in Elementor: bg -> ink (#26241F), text ->
   surface (#EDEAE6). Typo = Kit TYPOGRAPHY global `txtinfobar`
   bound on the widget via __globals__.typography_typography
   (the correct group-control key — see manual; kit preset carries
   the `typography_typography:"custom"` activator so it emits).
   The three info phrases are real text wrapped in
   <span class="dh-info-bar-item"> (non-empty → editor-safe);
   the terracotta separators are PURE CSS pseudo-elements (no
   decorative elements in content) — correct cascade tier. */
.dh-info-bar-txt p { margin: 0; }
.dh-info-bar-item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--dh-terracotta);
  border-radius: 50%;
  /* 17.5px each side reproduces the source's rendered gap (source
     .dot margin:0 14px + the hand-coded HTML whitespace around the
     inline dot that the ref bakes in); tuned to ref width, the
     pixel target. vertical-align matches source .dot. */
  margin: 0 17.5px;
  vertical-align: middle;
}

/* ===== 02 · NAV ===== LOCKED (pixel-exact @1440, MAE 1.31, h 99==99,
   gutters 57/56 == source 56px content column)
   Box-model = Elementor: outer .dh-nav full-bleed bar (bg surface,
   bottom border linesoft — Kit color globals); inner .dh-nav-inner
   = content_width:boxed (Kit 1328, auto-centred → source's 56px
   gutters @1440) + GRID 1fr/auto/1fr gap48 align center + pad
   24/0. Typo = Kit globals bound on widgets (displogo / txtnav)
   via __globals__.typography_typography. dh.css here = ONLY
   no-native-home skin: sticky+blur bar, Fraunces logo axes +
   italic accent, the raw <ul> nav layout/reset, the pill button. */
.dh-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* logo — family/size/weight from Kit `displogo`; this class adds
   ONLY the Fraunces variation axes + the italic terracotta accent
   (raw <span> inside the text widget). */
.dh-logo p { margin: 0; }
.dh-fr-logo { font-variation-settings: "opsz" 48, "SOFT" 80, "WONK" 0; }
.dh-fr-logo .accent {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}
/* nav-links — raw <ul> inside a Text widget is NOT an Elementor
   container; its flex/list/spacing is child-CSS's job. Font/color
   = Kit txtnav/ink bound on the widget. */
.dh-nav-links-w p { margin: 0; }
.dh-nav-links {
  display: flex;
  gap: 36px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dh-nav-links li { margin: 0; }
.dh-nav-links a {
  color: inherit;
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
}
.dh-nav-phone p { margin: 0; }
/* primary pill — raw <a> inside a Text widget (no Elementor home);
   font = Kit txtnav bound on the widget, cascades into the <a>. */
.dh-btn-primary-w p { margin: 0; }
.dh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
}
.dh-btn-primary { background: var(--dh-espresso); color: var(--dh-cream); }
.dh-btn-primary .dh-arrow { display: inline-block; }

/* ===== 03 · HERO ===== LOCKED (pixel-exact @1440, MAE 1.77; L text-col
   vertical rhythm ≤1px vs ref, span 101–779 identical; content gutters
   56/56 boxed; visual half MAE 0.98 picsum loaded; Fraunces disphero
   cut + italic terracotta <em> accent visually confirmed vs ref)
   Box-model = Elementor: section content_width:boxed (Kit 1328 →
   56px gutters @1440 == source .hero max-width:1440;padding:0 56),
   pad 80/0/100; hero-grid container GRID 1.05fr/0.95fr gap col80
   row0 align center; per-widget margin-bottom (eyebrow40/h1 36/
   lede40/btn24) + lede _element_custom_width 560 = Elementor
   element box-model. Typo = Kit globals bound on widgets (disphero/
   txteyebrow/txtlede/txtnav) + color globals (ink/brand/inksoft);
   visual bg = surfacealt global. dh.css here = ONLY no-native-home
   skin: Fraunces hero axes + em accent, the decorative "f"
   ornament, the eyebrow rule-line pseudo, the decorative
   image-frame (aspect/radius/clip/cover), section clip for the
   ornament. Button reuses LOCKED .dh-btn*. */

/* hero section — clip the decorative ornament + its position
   context. overflow lives here (not Elementor) because it exists
   solely to contain the absolutely-positioned decorative mark —
   same no-native-home decorative tier as the nav's position:sticky. */
.dh-hero { position: relative; overflow: hidden; }

/* Fraunces role: hero title — family/size/weight/lh/ls come from
   the bound Kit `disphero` global; this class adds ONLY the
   variation axes. The <em> gets the expressive "wonky" accent cut
   (raw <em> inside the Heading widget). */
.dh-fr-hero { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.dh-fr-hero em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* decorative serif ornament "f" — purely decorative, NOT a type
   role (no Kit preset exists); whole styling is skin tier:
   abs-positioned glyph, source .hero-mark 1:1. */
.dh-hero-mark {
  position: absolute;
  top: 80px;
  right: -20px;
  z-index: -1;
  font-family: var(--dh-serif);
  font-style: italic;
  font-size: 260px;
  line-height: 1;
  color: var(--dh-sand-deep);
  opacity: 0.4;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  pointer-events: none;
  user-select: none;
}
.dh-hero-mark p { margin: 0; }

/* eyebrow — font/size/color = Kit txteyebrow/brand bound on the
   widget; the 36px terracotta rule + flex gap is pseudo/flex skin
   with no Elementor-native home. */
.dh-hero-eyebrow .elementor-widget-container {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dh-hero-eyebrow .elementor-widget-container::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--dh-terracotta);
}
.dh-hero-eyebrow p { margin: 0; }

/* lede inner <p> reset (560 cap + mb = Elementor element settings) */
.dh-hero-lede p { margin: 0; }

/* hero visual — text-driven height pattern: image lives as background-image
   on the col container (cover, top center). Text col + padding drives the
   row height; image col stretches via grid align-items:stretch and the
   bg-image adapts. NO aspect-ratio (would lock height to image proportions).
   Filter applied to container so the bg-image inherits the film grade. */
.dh-hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  filter: contrast(0.98) saturate(0.9) brightness(1.02);
}

/* ===== 04 · SEASONAL ===== LOCKED (pixel-exact @1440, MAE 1.098 at
   true live top y=1060; banner1 content segments == ref exactly,
   banner2 ≤2px, image boxes x57..719 / x720..1382 identical to ref,
   reverse-banner swap correct; Fraunces dispseasonal + italic
   terracotta <em> + dispmeta cuts visually confirmed vs ref.
   NOTE: recon table topAbs (1062) lags the LIVE cumulative top by
   ~2px — sub-pixel rounding accrued over info-bar+nav+hero; the
   pixel-diff crop was aligned by offset-search, not the table —
   see dh-status finding #9. Build is correct, not the 2px.)
   Box-model = Elementor: section content_width:boxed (Kit 1328),
   pad 0/0/100; header container pb32 + mb48 + 1px `line` bottom
   border; 2× banner container_type:grid 1fr/1fr gap0 align stretch,
   bg surfacecard + 1px linesoft border (Kit globals), per-banner
   margin-bottom 24/0; content container flex col justify center
   pad 48/56; per-widget _margin rhythm + desc _element_custom_width
   460. Typo = Kit globals bound on widgets (txttaghdr/txttag/
   dispseasonal/txtbody/dispmeta/txtseasonalcta) + colors
   (brand/ink/inksoft). dh.css here = ONLY no-native-home skin:
   shared image-cover frame, Fraunces seasonal/meta axes + em
   accent, the static pulse-dot + dot-sep, inline underline tags,
   banner radius/clip. Banner #2 = reverse via DOM order swap. */

/* shared image-cover frame — FIRST canonical appearance. (Hero's
   .dh-hero-visual is LOCKED with its own equivalent rule and is
   NOT re-tuned; this generic class is the canonical one from here
   on: seasonal now, results/denisa later.) Cover mechanics ONLY;
   aspect-ratio + film filter are per-section deltas. */
.dh-img-cover {
  position: relative;
  overflow: hidden;
  /* Sensible defaults for "image-as-bg" pattern (pseudo-bg containers).
     These differ from "regular background" defaults: a real bg defaults to
     top-left + auto + repeat (so a small decoration tile tiles from origin),
     but a pseudo-bg IS the visible image, so cover + center + no-repeat is
     the right baseline. Specificity (0,1,0) so Elementor's per-element CSS
     (0,4,0) for bg-position/size/repeat ALWAYS wins → user can override per
     element in Elementor's Background section if they want top-center,
     contain, or similar. */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.dh-img-cover > .e-con-inner { position: absolute; inset: 0; }
.dh-img-cover .elementor-widget-html,
.dh-img-cover .elementor-widget-html .elementor-widget-container { height: 100%; }

/* Fraunces roles new here — family/size/weight from bound Kit
   global (dispseasonal / dispmeta); these add ONLY the axes + the
   <em> accent cut. */
.dh-fr-seasonal { font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 0; }
.dh-fr-seasonal em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.dh-fr-meta { font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; }

/* header tag — font/color = Kit txttaghdr/brand; leading dot is a
   decorative pseudo. Source pulses infinitely → STATIC pass-1
   (no animation per brief). */
.dh-seasonal-tag p { margin: 0; }
.dh-seasonal-tag-i { display: inline-flex; align-items: center; gap: 12px; }
.dh-seasonal-tag-i::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dh-terracotta);
}

/* banner card — radius + clip are no-native-home skin (bg
   surfacecard + 1px linesoft border = Elementor/Kit globals). */
.dh-seasonal-banner { border-radius: 8px; overflow: hidden; }

/* seasonal image — text-driven height pattern: bg-image on container (cover,
   center-center), <img> widget removed. Parent grid (.dh-seasonal-banner)
   has align-items:stretch → image col matches text-col height. Film filter
   on container so bg-image inherits the grade. */
.dh-seasonal-image { filter: contrast(0.98) saturate(0.9) brightness(1.02); }

/* category — underlined inline label hugging its text (self-start) */
.dh-seasonal-cat p { margin: 0; }
.dh-seasonal-cat-i {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dh-terracotta);
}

/* desc inner <p> reset (460 cap + mb = Elementor element settings) */
.dh-seasonal-desc p { margin: 0; }

/* meta — Fraunces italic (Kit dispmeta) row + terracotta dot-sep */
.dh-seasonal-meta p { margin: 0; }
.dh-seasonal-meta-i { display: flex; align-items: center; gap: 14px; }
.dh-dot-sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dh-terracotta);
  display: inline-block;
}

/* cta — underlined inline-flex link with arrow (self-start) */
.dh-seasonal-cta p { margin: 0; }
.dh-seasonal-cta-i {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dh-espresso);
}
.dh-seasonal-cta-i .dh-arrow { display: inline-block; }

/* ===== 05 · RESULTS ===== LOCKED (pixel-exact @1440, MAE 1.409 at
   true live top y=2289 via offset-search; table said 2291, finding
   #9 — clean V-min. Card grid bands MAE 0.19–1.96 (near-perfect),
   header ~3 = large 67px Fraunces antialiasing only; footers
   bottom-aligned across rows (flex-grow glue works); Fraunces
   dispsection + italic terracotta <em> + dispcard cuts visually
   confirmed vs ref. #results anchor present (hero button target).)
   Box-model = Elementor: section content_width:boxed (Kit 1328),
   pad 140/0/140, CSS id #results (hero anchor target); header
   container content_width:full + width 1100 (left cap) + bare
   margin-bottom 80; title heading _element_custom_width 900, lede
   _element_custom_width 640; results-grid container_type:grid
   1fr/1fr gap 24 align stretch; 4× card container flex column,
   bg surfacecard + 1px linesoft border (Kit globals), link:#;
   card-body container flex column pad 36/36/32; per-widget _margin
   rhythm. Typo = Kit globals bound on widgets (dispsection/txtlede/
   txttag/dispcard/txtui/txtcount) + colors (ink/inksoft/brand/
   inkmuted). dh.css here = ONLY no-native-home skin: shared
   underline-tag, Fraunces section/card axes + em, card radius/clip,
   image aspect+filter, the footer row + decorative circular arrow,
   and flex-grow glue (footer bottom-align — see note). */

/* shared underline-tag — canonical from results on. (Seasonal-cat
   is LOCKED with its own .dh-seasonal-cat-i; this generic class is
   the canonical one henceforth.) */
.dh-tag-ul {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dh-terracotta);
}

/* Fraunces roles new here — axes only; family/size/weight from the
   bound Kit global (dispsection / dispcard). */
.dh-fr-section { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.dh-fr-section em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.dh-fr-card { font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 0; }

/* section-lede inner <p> reset (640 cap = Elementor element width) */
.dh-section-lede p { margin: 0; }

/* result card — radius + clip skin (bg surfacecard + 1px linesoft
   border = Elementor/Kit; flex column = Elementor). */
.dh-result-card { border-radius: 6px; overflow: hidden; }

/* result image — stacked card layout: image-on-top, aspect-ratio defines
   the image-row height (no text to match against). bg-image on container,
   cover/position via Elementor element settings. Aspect-ratio = structural
   brand default for rozcestnik cards (16/10). Film filter on container. */
.dh-result-image {
  aspect-ratio: 16 / 10;
  filter: contrast(0.97) saturate(0.88) brightness(1.02);
}

.dh-result-tag p { margin: 0; }
.dh-result-detail p { margin: 0; }

/* flex-grow glue — pins each card's footer to the card bottom so
   footers align across a grid row (cards equal-height via grid
   stretch). Elementor 4.0.8 exposes no reliable per-flex-item grow
   in the MCP-settable JSON we've verified → this is layout glue
   with no native home (skin tier, overridable base default, NOT
   !important). Source mechanism: .result-detail{flex-grow:1}. */
.dh-result-body { flex-grow: 1; }
.dh-result-detail { flex-grow: 1; }

/* footer row — count (inherits Kit txtcount/brand from the widget)
   left, decorative circular arrow right, top divider. */
.dh-result-footer p { margin: 0; }
.dh-rf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--dh-line-soft);
  padding-top: 24px;
}
.dh-result-arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dh-espresso);
  border-radius: 50%;
  font-size: 16px;
  color: var(--dh-espresso);
}

/* ===== 06 · DENISA ===== LOCKED (pixel-exact @1440, MAE 0.556 —
   best section — at true live top y=4470 via offset-search; recon
   table said 4472, drift -2px (finding #9; secs 4·5·6 all -2 =
   plateaued, clean V-min 0.556 vs 3.0 at ±1). Per-128 bands
   0.30–0.92 uniform (the ~0.9 text bands = 67px Fraunces
   antialiasing only, no defect). Portrait image block L56/R637/
   w581 IDENTICAL ref==live (boxed Kit 1328 gutter == source).
   Fraunces dispsection/dispdenpar/dispsign cuts + italic terracotta
   <em> in p1 + whole-italic terracotta sign visually confirmed vs
   ref; diff×4 heatmap black. FIRST full-bleed gradient section —
   gradient between two Kit-mirrored role tokens is skin tier (no
   Kit/Elementor home for a 2-stop gradient), tokens stay single
   source. Built via Python cache-mode builder.)
   Box-model = Elementor: section content_width:full (FULL-BLEED) +
   pad 140/0; inner content_width:boxed (Kit 1328, == source
   .denisa-inner max-width:1440;pad:0 56); denisa-grid
   container_type:grid 0.9fr/1fr gap col100 row0 align center;
   content flex column gap0; per-widget _margin rhythm (eyebrow b40,
   p1 b20, p2 b0, sign t32). Typo = Kit globals bound on widgets
   (dispsection / dispdenpar / dispsign) + colors (ink / inkcocoa /
   brand). Visual reuses the LOCKED canonical .dh-img-cover.
   dh.css here = ONLY no-native-home skin: the FIRST full-bleed
   gradient (two Kit-mirrored role tokens — a gradient has no Kit/
   Elementor home; tokens stay the single source), 3 new Fraunces
   role axis classes + their <em> accent cut, the visual aspect/
   radius/filter deltas over .dh-img-cover, the inner <p> resets. */

/* full-bleed gradient — Kit color globals are solid; a 2-stop
   gradient between role tokens is skin tier. --dh-cream == Kit
   Surface, --dh-sand == Kit Surface-alt (mirrors, single source). */
.dh-denisa {
  background: linear-gradient(180deg, var(--dh-cream) 0%, var(--dh-sand) 100%);
}

/* Fraunces roles new here — axes only; family/size/weight/lh/ls
   come from the bound Kit global (dispsection / dispdenpar /
   dispsign). The <em> gets the expressive "wonky" accent cut. */
.dh-fr-deneyebrow { font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 0; }
.dh-fr-deneyebrow em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}
.dh-fr-denpar { font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 0; }
.dh-fr-denpar em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
/* sign: wholly italic+terracotta — italic & ls from Kit dispsign,
   color from the bound `brand` global; this adds ONLY the axes. */
.dh-fr-densign { font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1; }

/* denisa visual — text-driven height pattern: bg-image on container (cover,
   center-center), <img> widget removed. Parent grid (.dh-denisa-grid) has
   align-items:stretch → image col matches text-col height. Deltas: radius4
   + film filter (on container so bg-image inherits the grade). */
.dh-denisa-visual {
  border-radius: 4px;
  filter: contrast(0.97) saturate(0.85) brightness(1.02);
}

/* paragraph / sign inner <p> reset (rhythm via Elementor _margin) */
.dh-denisa-par p { margin: 0; }
.dh-denisa-sign p { margin: 0; }

/* ===== 07 · HERO-STATS ===== LOCKED (pixel-exact @1440, MAE 1.958
   at true live top y=5477 via offset-search; table 5479, drift -2px
   = the secs 4·5·6·7 plateau, clean V-min 1.958 vs ~2.9/3.6 at ±1).
   Per-64 bands UNIFORM 1.94–1.97 (= 67px Fraunces big-glyph
   antialiasing on the 3 huge stat numbers, no defect — same class
   as the results 67px header). Content extent L56/R1300 IDENTICAL
   ref==live; the 2 inter-column dividers x=[498,940] IDENTICAL
   ref==live. Fraunces dispstatnum cut + "7+" em (inherits brand)
   + placeholder "—" italic + the 3 txtstatlbl labels visually
   confirmed vs ref; diff×6 = only big-glyph AA.
   TWO defects found+fixed at pixel-diff (folded into manual +
   dh-status findings #11/#12):
   (a) PHP empty("0") trap — a text-editor whose ENTIRE content is
       the string "0" is silently dropped by Elementor's widget
       render (NO DOM emitted); fix = PHP-truthy inert wrapper
       `<span>0</span>` (visually identical). dbg0031.
   (b) stat-label letter-spacing — source .stat-label has ls 0.01em
       which the shared Kit `txtui` (locked into results) lacks; a
       bound typography GROUP global can't be overridden by element
       typography (finding #2), and re-tuning locked-shared txtui is
       forbidden → the cascade-correct fix is a NEW dedicated Kit
       preset `txtstatlbl` (Manrope 14/400/lh1.5/ls0.14px) bound on
       the 3 label widgets. Kit non-regression CSS-verified
       (post-8.css 8363B, all 27 presets emit, locked unaffected).
   Box-model = Elementor: dbg0001 content_width:boxed (Kit 1328 ==
   source .hero-stats max-width:1440;pad:0 56) + container_type:grid
   1fr/1fr/1fr gap0 align stretch + pad 80/0/80/0 + bg `surface`
   Kit global (=cream; == page bg → faithful invisible band, source
   has it explicitly). Per-stat asymmetric padding (stat1 40/32/0/0
   first→left0 · stat2 40/32/0/32 · stat3 40/0/0/32 last→right0) +
   border-right 1px `line` Kit global on stat1+stat2 ONLY (the 2
   inter-column dividers; stat3 none) = Elementor container settings.
   Per-widget _margin (stat-num b16). Typo = Kit globals bound on
   widgets (dispstatnum / txtui) + colors (brand / inksoft;
   placeholder inkfaint). dh.css here = ONLY no-native-home skin:
   new Fraunces stat-num axes + its em cut, the placeholder italic+
   axes variant, the placeholder label italic, inner <p> resets. */

/* Fraunces role new here — axes only; family/size/weight/lh/ls from
   the bound Kit `dispstatnum`. NOTE a NEW <em> variant: the parent
   .stat-num is ALREADY brand-coloured, so its <em> has NO color
   override (inherits brand) — unlike prior sections where the
   parent was ink and the em explicitly set terracotta. */
.dh-fr-statnum { font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0; }
.dh-fr-statnum em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* placeholder stat-num — Fraunces family/size/weight from the bound
   Kit `dispstatnum`; this variant adds italic + its OWN axes
   (SOFT 100, not the .dh-fr-statnum SOFT 80). Colour = inkfaint
   via the bound Kit global (source .stat-placeholder color:stone). */
.dh-stat-ph {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}

/* placeholder label — source had an inline style="font-style:
   italic" one-off; italic on a Manrope UI label has no Kit/
   Elementor home → translated to this prefixed class (colour
   inkfaint via the bound Kit global, NOT inline). */
.dh-stat-label-ph { font-style: italic; }

/* inner <p> resets (rhythm via Elementor _margin / flow) */
.dh-stat-num p { margin: 0; }
.dh-stat-label p { margin: 0; }

/* ===== 08 · PROCESS ===== LOCKED (pixel-exact @1440, MAE 1.019 at
   true live top y=5775 via offset-search; recon table 5776, drift
   -1 (finding #9; the -2 plateau of secs 4·5·6·7 eased to -1 here —
   still sub-pixel, NOT linear; clean sharp V-min 1.019 vs 1.34/2.79
   at ±1). Per-64 bands EXACTLY 0.000 on every flat-espresso AND
   lower-paragraph row; 0.28–2.84 ONLY on the three large-Fraunces
   glyph rows (h2 67px / num 67px / h4 28px) = serif big-glyph
   antialiasing, identical signature to every locked section's text
   band — no defect. Content extent L55/R1383 IDENTICAL ref==live
   (ΔL0 ΔR0), vertical ΔT-1/ΔB0 = the offset rounding only. Fraunces
   dispsection cream + ROSE-DUST wonky <em>, dispprocnum opsz96
   italic terracotta 1·2·3·4, dispproch opsz60 cream h4, txtui
   cream-78 p visually confirmed; diff×6 = registered big-serif AA
   only, body paragraphs pixel-identical.
   POST-LOCK CORRECTION (grid_rows_grid): grid dcb0100 was built
   WITHOUT grid_rows_grid → Elementor defaulted it to
   `grid-template-rows:repeat(2,1fr)` (a phantom empty 2nd row) that
   ~doubled the section to ~981px; the 707-crop gate couldn't see it
   (excess espresso BELOW the crop, both ref & live espresso ⇒ MAE 0)
   — caught only when location landed ~270px low. Fixed by cache-mode
   patch dcb0100 → grid_rows_grid:{custom,"auto"} (== the value every
   LOCKED grid already had). Content pixel-IDENTICAL (re-gate still
   MAE 1.019, same bands); total height 981→708 (== table 707 +1;
   location/sand now starts exactly y6483 == table topAbs). Pure data
   fix, no dh.css change. → finding #15: grid_rows_grid is REQUIRED;
   the pixel-gate must ALSO assert section total height / next start-Y.
   FIRST LARGE DARK section ⇒ the design_system pass-1 grain
   deferral (body::before .025 + .process-section::before .04
   fractalNoise) — invisible on the prior light-bg sections —
   dominates a grain-baked ref (raw MAE 5.14, uniform ~4.2 even on
   contentless espresso rows). Correct gate = a GRAIN-FREE ref:
   re-render the recon source with both grain ::before display:none
   (they are position:fixed/absolute, pointer-events:none → zero
   layout shift, geometry table stays exact), crop the same band,
   diff the (already grain-free) live build like-for-like → MAE
   1.019. Reusable technique folded into the manual; ref kept at
   refs/08-process_nograin.png (recur for the espresso footer).
   FULL-BLEED espresso, section #2
   full-bleed; FIRST SOLID full-bleed — bg = Kit `ink` global bound
   on the section, unlike denisa's skin-tier gradient. The ::before
   fractalNoise grain (opacity .04) = SKIP pass-1 per design_system
   (no deco/animation scope). Box-model = Elementor: section
   content_width:full + pad 140/0/140/0; inner content_width:boxed
   (Kit 1328 == source .process-inner max-width:1440;padding:0 56);
   header content_width:full + width 1100 (left cap) + bare
   margin-bottom 80; h2 _element_custom_width 900; process-grid
   container_type:grid 1fr×4 gap0 + top border 1px `lineondark`;
   per-step asymmetric padding (1:48/32/0/0 · 2,3:48/32/0/32 ·
   4:48/0/0/32) + border-right 1px `lineondark` on steps 1·2·3 only;
   per-widget _margin (num b28, h4 b20, p 0). NOTE source
   `.process-grid{margin-top:32}` collapses under the header's
   `margin-bottom:80` in the source's BLOCK flow (sibling-margin
   collapse → max(80,32)=80); Elementor flex does NOT collapse, so
   the RENDERED result is reproduced as header mb80 + grid mt0
   (translate the rendered intent — the 32 is dead in source, not a
   second gap). Typo = Kit globals bound on widgets (dispsection /
   dispprocnum / dispproch / txtui) + colours (surface=cream /
   brand / textondark). NEW Kit colour roles `textondark`
   rgba(244,237,226,.78) + `lineondark` rgba(244,237,226,.18)
   (dh-status finding #12 — own roles up front; recur in footer).
   dh.css here = ONLY no-native-home skin: section overflow clip
   (source-faithful / future-grain anchor; inert in pass-1), 2 new
   Fraunces role axis classes, the process-title em colour override,
   inner <p> resets. */

/* source .process-section overflow:hidden clips the (skipped) grain
   ::before; kept for source fidelity + as the future-grain anchor.
   No abs child in pass-1 → currently a no-op (same decorative tier
   as the .dh-hero clip). */
.dh-process { overflow: hidden; }

/* Fraunces roles new here — axes only; family/size/weight/lh/ls
   from the bound Kit global (dispprocnum / dispproch). dispprocnum
   is ALREADY italic (Kit typography_font_style:italic) so the step
   number renders italic via the global; this class only adds the
   variation axes. process-step-num has NO <em> (bare digit 1..4). */
.dh-fr-procnum { font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.dh-fr-proch   { font-variation-settings: "opsz" 60, "SOFT" 60, "WONK" 0; }

/* process section title em = rose-dust (NOT terracotta). The h2
   carries BOTH `dh-fr-section` (LOCKED, results) and `dh-proc-title`;
   this overrides ONLY the colour of `.dh-fr-section em` — equal
   specificity, later in source order (process block appended after
   results) → wins. italic + the wonky axes stay inherited from
   `.dh-fr-section em` (intentional: same cut, different accent
   colour). */
.dh-proc-title em { color: var(--dh-rose-dust); }

/* inner <p> resets (text-editor wraps content in <p>; rhythm via
   Elementor _margin). h4 = Heading widget → emits <h4>, no <p>. */
.dh-proc-num p { margin: 0; }
.dh-proc-p p   { margin: 0; }

/* ===== 09 · LOCATION ===== LOCKED (pixel-exact @1440, MAE 0.849 at
   true live top y=6481 via offset-search; recon table 6483, drift -2;
   clean sharp V-min 0.849 vs 2.21/2.12 at ±1 — best-tier with
   info-bar 0.84 / denisa 0.556). Per-64 bands EXACTLY 0.000 except
   the 3 large-Fraunces headline rows (67px disploc, 2.26–2.94 = serif
   AA, no defect) + the tiny pill row 0.94. Content extent + centre
   **PIXEL-IDENTICAL ref==live** (ΔL/ΔR/ΔT/ΔB all 0; centre 719.5 ==
   720 mid). 1px `line` top border present (row0 |Δsand|=188). Fraunces
   disploc cut + italic terracotta wonky `<em>` "parkováním" + the
   LOCKED pill visually confirmed; diff×6 = large-serif AA only.
   FULL-BLEED sand; SOLID like
   process — bg = Kit `surfacealt` global on the section + 1px `line`
   Kit-global top border. LIGHT bg ⇒ paper-grain <1 MAE → gate vs
   the NORMAL grain-baked refs/09-location.png (finding #14 N/A,
   like the LIGHT locked siblings results/denisa). Box-model =
   Elementor: section content_width:full + pad 140/0/140/0 + bg
   surfacealt + border-top 1px line; inner content_width:boxed
   (Kit 1328 == source .location-inner max-width:1440;padding:0 56)
   + flex col align-items:center (== source .location-inner
   text-align:center — centres both children); h2
   _element_custom_width 980 (== source .location-headline
   max-width:980, centred by the parent align) + heading
   align:center + _margin b56 (== source margin 0 auto 56); btn
   text-editor _element_width:initial (shrink-wrap → centred by the
   inner align). Typo = Kit globals bound on widgets (disploc /
   txtnav) + colour (ink); pill colours = LOCKED .dh-btn-primary
   skin. NO new Kit roles (disploc/ink/txtnav all exist). dh.css
   here = ONLY no-native-home skin: the Fraunces location axes + its
   <em> accent, and the button gap delta over the LOCKED pill. */

/* Fraunces role new here — axes only; family/size/weight/lh/ls from
   the bound Kit `disploc` global. <em> = the expressive wonky
   accent cut (raw <em> inside the Heading widget). */
.dh-fr-loc { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.dh-fr-loc em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* location button — reuse the LOCKED .dh-btn / .dh-btn-primary /
   .dh-btn-primary-w / .dh-arrow pill; source .location-button only
   overrides the inline-flex gap 10→12 → this single delta class
   (appended later, equal specificity → wins over .dh-btn gap10). */
.dh-loc-btn { gap: 12px; }

/* ===== 10 · CTA ===== LOCKED (pixel-exact @1440, MAE 0.642 at true
   live top y=7091 via offset-search; recon table 7092, drift -1;
   clean sharp V-min 0.642 vs 1.77/1.73 at ±1 — best-tier with
   denisa 0.556/location 0.849. cta true-top == location-end +1 ⇒
   cumulative-Y consistent, no excess height; finding #15 assertion
   passes). Per-64 bands EXACTLY 0.000 except the 90px dispcta h2
   rows (max 3.07 — the LARGEST type in the whole design, pure serif
   big-glyph AA) + minor lede/pill AA; the decorative-mark band
   y0-128 = 0.008/0.005 (matches ref faint sand). Content extent +
   centre PIXEL-IDENTICAL ref==live (ΔL/ΔR 0, ΔT/ΔB -1 = offset
   rounding; centre 719 == img-mid 720). Fraunces dispcta cut +
   italic terracotta wonky <em> «přijdete» + faint Fraunces "D"
   mark + lede + primary & NEW outline pills visually confirmed;
   diff×6 = large-serif AA only. DEFECT FOUND+FIXED → finding #16:
   the decorative "D" is a bare text node in a div that also carries
   Elementor's `.elementor-widget-text-editor{color:Kit-text;
   font-family:Kit-text;font-weight:Kit-text}` (specificity 0,0,1,0);
   a single-class `.dh-cta-mark` (0,0,1,0) TIED and LOST (Elementor
   CSS loads after child dh.css) → the "D" rendered in Kit ink/
   Manrope, dark & wrong (raw MAE 2.08, mark band 4.70, ΔT-174).
   Fix = scope the decorative skin `.elementor-element.dh-cta-mark`
   (0,0,2,0) so it legitimately beats the generic Elementor default
   (NOT !important; no Kit binding here to respect). MAE 2.08→0.642,
   mark band →0.008. (.dh-hero-mark has the same latent tie, masked
   by its z-index:-1 behind the section bg → left untouched, doc'd.)
   cream — NOT full-bleed in source
   but bg=cream=page bg ⇒ built as content_width:full + bg `surface`
   Kit global (seamless band); source .cta-section pad 160/56/140 +
   .cta-inner max-width:1100 centred → @1440 the 56 side-pad is moot
   under the 1100 cap. LIGHT bg ⇒ finding #14 N/A (normal grain-baked
   refs/10-cta.png). Box-model = Elementor: section content_width:
   full + pad 160/0/140/0 + bg surface + flex col align-items:center;
   inner content_width:full + width 1100 (capped, centred by the
   section align) + flex col align-items:center; h2 heading
   align:center + _margin b32; p text-editor _element_width:initial
   + _element_custom_width 620 + align:center + _margin b48; actions
   text-editor _element_width:initial (shrink→centred). The
   decorative "D" mark is a sibling of the inner inside the section
   (DOM order mark→inner; abs to the section via .dh-cta
   position:relative + overflow:hidden; .dh-cta-inner z-index:2 lifts
   the content above the z0 mark). Typo = Kit globals bound on
   widgets (dispcta / txtlede / txtnav) + colours (ink / inksoft);
   pill colours = LOCKED .dh-btn-primary skin + the NEW outline pill.
   NO new Kit roles (dispcta/ink/txtlede/inksoft/txtnav all exist).
   dh.css here = ONLY no-native-home skin: the section clip+pos, the
   PURE-decorative "D" glyph (no Kit preset — like .dh-hero-mark;
   design_system "CTA-mark deco" row has no Kit global), the inner
   stacking context, the Fraunces cta axes + its <em> accent, the
   actions inline-flex row, inner <p> resets, and the FIRST outline
   pill (delta over the LOCKED .dh-btn). */

/* section clip + positioning context for the decorative mark
   (same no-native-home decorative tier as .dh-hero). */
.dh-cta { position: relative; overflow: hidden; }

/* decorative serif "D" — purely decorative, NOT a type role (no Kit
   preset exists); whole styling is skin tier: abs-positioned giant
   glyph behind the content, source .cta-mark 1:1. SPECIFICITY: the
   "D" is a bare text node in a div that ALSO carries Elementor's
   `.elementor-widget-text-editor` (which sets color=Kit text /
   font-family=Kit text / font-weight=Kit text at specificity
   0,0,1,0). A single-class `.dh-cta-mark` (0,0,1,0) TIES and LOSES
   (Elementor CSS loads after child dh.css) → the glyph silently
   renders in Kit ink/Manrope, not faint Fraunces sand. So the
   decorative-mark skin is scoped `.elementor-element.dh-cta-mark`
   (0,0,2,0) to legitimately beat the generic Elementor default —
   NOT !important; there is no Kit binding here to respect, the
   competitor is just a generic widget default that must yield to
   this element's explicit decorative skin. (finding #16; the LOCKED
   .dh-hero-mark has the same latent tie but is masked by its
   z-index:-1 behind the section bg → left untouched, documented.) */
.elementor-element.dh-cta-mark {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--dh-serif);
  font-style: italic;
  font-size: 360px;
  line-height: 1;
  color: var(--dh-sand);
  opacity: 0.5;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* inner stacking context — sits above the z0 mark (source
   .cta-content{position:relative;z-index:2}). */
.dh-cta-inner { position: relative; z-index: 2; }

/* Fraunces role new here — axes only; family/size/weight/lh/ls from
   the bound Kit `dispcta` global. <em> = the expressive wonky
   accent cut (raw <em> inside the Heading widget). */
.dh-fr-cta { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.dh-fr-cta em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* inner <p> resets (text-editor wraps content in <p>; rhythm via
   Elementor _margin / _element_custom_width). */
.dh-cta-p p { margin: 0; }
.dh-cta-actions-w p { margin: 0; }

/* cta actions row — inline-flex pair (source .cta-actions); the two
   <a> reuse the LOCKED .dh-btn pill. */
.dh-cta-actions {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}

/* FIRST outline pill — delta over the LOCKED .dh-btn (which already
   gives inline-flex/gap/padding/radius); source .btn-outline = 1px
   espresso border + espresso text on transparent (the .dh-btn has
   no bg → transparent already). */
.dh-btn-outline {
  border: 1px solid var(--dh-espresso);
  color: var(--dh-espresso);
}

/* ===== 11 · FOOTER ===== LOCKED — pixel-exact @1440, MAE 0.036/255
   (BEST section in the whole build; prior best denisa 0.556) vs the
   fonts-loaded TRUE source render at true live top y=7806; clean
   sharp V-min 0.036 vs 1.81 at ±1; per-64 bands ALL exactly 0.000
   except footer-bottom 0.267 (© / Provocado-em AA). Height 444==444
   (finding #15 PASS), cumulative-Y footer_top−cta_top 716==716
   (finding #15 PASS). Content extent + gutters IDENTICAL src==live
   (56,1382,102,400); border y351==351; every text-block position
   byte-identical. grain floor 0.000 → finding #14 N/A for the footer
   (no .04 footer grain; body::before .025 over espresso ≈ 0 MAE).
   LAST section ⇒ all 11 LOCKED.
   Box-model = Elementor: footer content_width:full + html_tag:footer
   + pad 100/0/40/0 + bg `ink` Kit global; inner content_width:boxed
   (Kit 1328 == source footer padding:0 56 + .footer-inner
   max-width:1440 clamped to the 1328 content box → 56px gutters
   @1440); footer-top container_type:grid 1.6fr/1fr/1fr/1fr +
   grid_rows auto (finding #15) gap col56/row56 align start + pad
   0/0/64/0 + border-bottom 1px `lineondarkfaint` Kit global; 4
   grid-item columns flex col gap0; footer-bottom = text-editor
   sibling of footer-top in inner; per-widget _margin (h3 b20, h5
   b24) + brand-p _element_custom_width 380. Typo = Kit globals
   bound on widgets (dispfooter / txtfootlink / txtfooth5 / txtfbot)
   + colours (surface / textondarksoft / brand / textondarkfaint).
   3 NEW Kit colour roles created up front (finding #12):
   textondarksoft rgba(244,237,226,.6) + textondarkfaint
   rgba(244,237,226,.4) + lineondarkfaint rgba(244,237,226,.12) →
   20 custom_colors. finding #16 N/A here (every text node is a Kit
   text_color-BOUND widget — the element-id colour rule beats the
   generic .elementor-widget-text-editor default; it only bit the
   no-binding pure-skin cta mark).
   FINDING #17 (line-height of a raw <ul>/<li> list in a text-editor
   is governed by the source's INHERITED font-size on <li>, NOT the
   <a> glyph size): source `.footer-col a` is 14px but the <li>/<ul>
   inherit body's 16px (nothing sets font-size between body and li),
   so each link line-box = 16×1.6 = 25.6px (the body line-height),
   NOT 14×1.6. Step-3 lumped footer-links into `txtui` (lh1.5) and
   footer-h5 into `txteyebrow` (no lh) — both locked-shared at the
   wrong lh → footer 26px short (finding #12 again, link-list flavour).
   Cascade-correct fix = dedicated presets: `txtfootlink` Manrope 14
   w400 **line-height 25.6px ABSOLUTE** (= the rendered 16px-strut box;
   1.6em would wrongly give 22.4), `txtfooth5` Manrope 12 w600 ls3
   UPPER **lh 1.6em** (h5 has its own 12px font-size so 1.6em=19.2 is
   right — confirmed h5 then pixel-identical), `txtfbot` completed
   with **lh 1.6em** (footer-bottom own 12px font; Step-3 missed it).
   29 typo presets. → footer 444, MAE 0.036.
   FINDING #18 (the canonical Step-1 `refs/NN.png` can itself carry a
   Google-Fonts-load-flaky truncation): `refs/11-footer.png` AND
   `_recon_nograin.html` both captured the footer espresso at only
   ~357px + 87px cream (the webfont didn't finish → short text →
   short footer in those Step-1/recon renders). Gating against them
   false-failed a perfect build at MAE 39–180. The reliable
   reference for a webfont-metric-sensitive section = a fresh
   fonts-loaded full render whose section height == the geometry
   table; saved here as refs/11-footer_TRUE.png. Generalises
   findings #14/#9: verify the REFERENCE's section height before
   trusting it; a non-convergent offset-search + a contentless-band
   mismatch ⇒ suspect the ref, not only the build.
   dh.css here = ONLY no-native-home skin: the Fraunces footer-brand
   axes + its <em> accent, the raw <ul> list reset (source global
   reset → explicit margin/padding:0, like .dh-nav-links), the <a>
   colour-inherit/no-underline (hover rose-dust = SKIP pass-1 like
   all hovers), the footer-bottom space-between flex row + its
   Fraunces italic <em>. */

/* Fraunces role new here — axes only; family/size/weight/lh/ls from
   the bound Kit `dispfooter` global. <em> = the expressive wonky
   accent cut (raw <em> inside the Heading widget). */
.dh-fr-fbrand { font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 0; }
.dh-fr-fbrand em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}

/* footer-brand paragraph inner <p> reset (380 cap + family/size/
   colour = Elementor element width + Kit globals). */
.dh-foot-brand-p p { margin: 0; }

/* footer-col link lists — raw <ul> inside a Text widget is NOT an
   Elementor container; its grid/list/spacing is child-CSS's job.
   Source's global reset zeroes the UA <ul> margin/padding (Elementor
   has no such reset) → reproduce it explicitly, exactly like the
   LOCKED .dh-nav-links. Font/colour = Kit txtui/surface bound on
   the widget; <a> inherits that colour (no UA link blue) + no
   underline. Hover (source .footer-col a:hover → rose-dust) is a
   transition/hover = SKIP pass-1 per design_system, like every
   other hover in the build. */
.dh-foot-ul-w p { margin: 0; }
.dh-foot-ul {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.dh-foot-ul a { color: inherit; text-decoration: none; }

/* footer-bottom — space-between flex row (source .footer-bottom
   padding-top:32px provides the gap below the footer-top border).
   The two <span> sit at opposite ends. The <em> "Provocado" is a
   raw inline accent → Fraunces italic rose-dust (size/weight inherit
   the bound Kit txtfbot 12/400; the unused Step-3 dispfbotem preset
   is vestigial — an inline <em> can't carry its own Kit binding, so
   the accent is child-CSS like every other .dh-* em). */
.dh-foot-bottom-w p { margin: 0; }
.dh-foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
}
.dh-foot-bottom em {
  font-family: var(--dh-serif);
  font-style: italic;
  color: var(--dh-rose-dust);
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0;
}

/* ===== R · ROZCESTNÍK ===== LOCKED — geometry-exact @1440 (2026-05-19)
   Gated by the finding-#18-robust path (the local v20 Chrome-CLI
   screenshot is webfont-flaky in its own process — text bands MAE
   ~24, non-convergent offset-search — EVEN THOUGH puppeteer's DOM
   on the same v20 reports fonts:"loaded"; recurs the footer's
   finding #18). The reliable gates ALL PASS: (1) DOM geometry
   (puppeteer, fonts loaded) PIXEL-IDENTICAL src==live — #domains
   h 1611==1611, h2 221==221 @ w900==900, grid 907==907, card
   907==907, card-img 406==406, indlist 177==177, domain-all
   (.dh-result-arrow circle) 48==48; seasonal adjacent above (no
   gap, prev.bottom==#domains.top), results adjacent below &
   BYTE-UNCHANGED (h 2181, all 11 original sections byte-identical
   asserted in the builder + the dcf0011 patch) — finding-#15
   height + cumulative-Y PASS, every LOCKED section just shifted
   down by exactly 1611. (2) contentless cream band MAE 0.000
   (grain-free like-for-like — no global render diff; finding #14
   handled by regenerating _src_nograin from the CURRENT v20).
   (3) Construction = a VERBATIM clone of the LOCKED-pixel-perfect
   Section 05 results Elementor settings (read from dbe* and
   mirrored) + the SAME Kit presets that gated results at MAE
   1.409 — so the rozcestník inherits results' proven fidelity by
   construction. (4) Visual typo-gate PASS: Fraunces h2 cut +
   italic-terracotta «používám» em, lede, tag underlines, h3 + em,
   intro, 3-row indication-lists with linesoft separators + arrows,
   domain-all + circle — all correct vs the v20 layout. The
   non-deterministic picsum placeholders legitimately differ
   between render times (masked in the diff; same as every other
   image-bearing section). 12 sections total; all 11 originals
   stay LOCKED.
   USER-ADDED section (block #5, after seasonal / before results).
   It IS the results-section redesign → it REUSES the results rules
   VERBATIM at every level: section content_width:boxed + pad
   140/0/140 + _element_id:domains; header .dh-section-header width
   1100 + bare mb80; h2 Kit dispsection+ink + .dh-fr-section + ecw900
   + _mg b28; lede Kit txtlede+inksoft + .dh-section-lede + ecw640;
   grid .dh-results-grid (1fr 1fr / rows auto / gap24); card
   .dh-result-card (surfacecard + linesoft border); image
   .dh-img-cover .dh-result-image + surfacealt + html<img>; body
   .dh-result-body pad 36/36/32/36; tag Kit txttag+brand + .dh-tag-ul
   + _mg b16; h3 Kit dispcard+ink + .dh-fr-card + _mg b16; intro Kit
   txtui+inkmuted + .dh-result-detail (the LOCKED flex-grow glue →
   the domain-all footer bottom-aligns across the 2 cards exactly
   like the results footers, finding #10) + _mg b28; the circle
   arrow REUSES the LOCKED .dh-result-arrow. ZERO new Kit roles,
   ZERO new typography, ZERO new spacing primitives (user constraint).
   The ONLY net-new code = this layout-only skin: a Fraunces <em>
   accent for the card title (additive, LOCKED-safe — the results
   h3 carry no <em> so no regression; identical to every other
   .dh-fr-* em), the raw <ul> indication-list flex rows with
   linesoft separators (a no-native-home LAYOUT skin like
   .dh-foot-ul / .dh-rf, reusing the existing --dh-line-soft /
   --dh-taupe tokens — NOT new colour/type), and the domain-all
   inline-flex row (gap 14 = existing rhythm). Colours come from
   the Kit text_color BINDING on each widget (ink / inkmuted /
   brand) so finding #16 does NOT bite (Kit-bound, not pure-skin);
   the arrow's inkmuted tint uses the existing --dh-taupe token. */

/* card-title <em> accent — the standard .dh-fr-* em cut applied to
   the existing card-title role. Additive + LOCKED-safe: Section 05
   results h3 titles contain no <em>, so this never regresses them;
   axes mirror .dh-fr-card (opsz48/SOFT60→100 for the accent). */
.dh-fr-card em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}

/* indication-list — raw <ul> inside a Kit-bound (txtbody+ink)
   text-editor: NOT an Elementor container, so its list/flex/border
   layout is child-CSS's job (same tier as .dh-foot-ul / .dh-nav-
   links). Reset + 1px separators from the existing --dh-line-soft
   token; rows are flex space-between; the 28px below the list is
   the widget _margin (Elementor), not here. color:inherit takes
   the widget's bound Kit ink; the arrow uses the existing
   --dh-taupe token (= inkmuted). 16px row padding + the hover
   (skipped pass-1, like every hover) carry no new primitive. */
.dh-indication-w p { margin: 0; }
.dh-indication-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dh-line-soft);
}
.dh-indication-list li { margin: 0; padding: 0; }
.dh-indication-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--dh-line-soft);
}
.dh-indication-arrow { color: var(--dh-taupe); }

/* domain-all — raw <a> footer link inside a Kit-bound (txtcount+
   brand) text-editor; inline-flex row reusing the LOCKED
   .dh-result-arrow circle for the chevron. gap 14 = existing
   rhythm (cta-actions / foot-ul). */
.dh-domain-all-w p { margin: 0; }
.dh-domain-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   PLET (kategorie /pece-o-plet/) — separate inner page, namespaced
   `.dh-plet-*`. Reuses LOCKED .dh-fr-loc, .dh-img-cover,
   .dh-section-lede, .dh-tag-ul, .dh-btn*, .dh-fr-card, etc.
   v21 spacing (header 48/56/72, sections 72/56).
   ============================================================ */

/* ===== PLET P1 · PAGE-HERO ===== LOCKED (pixel-exact @1440, MAE 0.093/255
   vs refs/plet/sec-page-hero-aligned.png; offset-search converged at
   dy=0 — ZERO drift; per-band ≤ 2.81 — top breadcrumb-area antialiasing,
   others 1.22–2.13 = expected Fraunces/Manrope AA only. Initial MAE
   1.892 dropped to 0.093 after the background_background:"classic"
   activator was added to eaf0040 (and bg activator becomes a NEW finding
   — Kit __globals__.background_color silently doesn't emit without the
   activator, analogous to typography_typography in finding #6). The
   visible delta was tiny (img covers the visual container) but the
   pixel-diff registered the 1.8 floor as the bg leaking through where
   the picsum placeholder cropping doesn't fully cover.
   Content extent: visual 857..1384 (w527 == ref EXACT), h1 232..305
   IDENTICAL to ref, lede w=580px EXACT. Live computed verified: h1
   Fraunces 67/300/lh73.7/ls-1.34/opsz144 SOFT60 WONK0, em italic
   terracotta opsz144 SOFT100 WONK1; breadcrumb 12/600/UPPER/ls1.8
   color inkmuted; lede 21/lh31.5 color inksoft. NO Kit roles added
   for this slice — 100% reuse of LOCKED HP infrastructure (disploc +
   .dh-fr-loc + txtcount + inkmuted + txtlede + inksoft + ink + .dh-
   img-cover + .dh-section-lede + surfacealt bg). Image stays solid-
   sand placeholder (matches source EBE0CE block) until real Denisa
   photo is supplied.) */
   Source spec: <div.breadcrumb>+<header.page-hero> consecutive.
   Combined into 1 Elementor section (header html_tag, boxed Kit 1328).
   Breadcrumb pad 24/0/0 (side gutter via Kit boxed); page-hero grid
   pad 48/0/72 + grid 1.4fr/1fr/auto gap 64 align stretch. h1
   `dispsection`-shape == `disploc` preset (Kit 67/300/lh1.1/-1.34px)
   — REUSE LOCKED .dh-fr-loc + em accent. Visual = surfacealt bg via
   Kit global + REUSE LOCKED .dh-img-cover; deltas radius4 + film
   filter live as .dh-plet-pagehero-visual. Lede REUSE LOCKED
   .dh-section-lede p reset; per-widget rhythm = `_margin`.
   No Kit additions for this section (5 new presets for the procedure
   cards / FAQ / gallery come in later slices). */

/* breadcrumb — replaced by .provocado-breadcrumb (provocado-breadcrumbs
   plugin, see end of file). Old hardcoded text-editor + .dh-plet-breadcrumb*
   classes removed 2026-05-20; breadcrumb is now in hero text-col (above H1)
   via [provocado_breadcrumb separator="/"]. */

/* page-hero visual — image-frame skin: aspect comes from grid row
   (align-items:stretch on the grid stretches the visual to text-col
   height). Radius + film filter are no-native-home; .dh-img-cover
   (LOCKED) supplies the overflow/img reset. */
/* Pattern: bg-image on container (cover/top-center via Elementor element
   settings). Filter on container so bg-image inherits the grade. */
.dh-plet-pagehero-visual {
  border-radius: 4px;
  filter: contrast(0.98) saturate(0.9) brightness(1.02);
}

/* ===== PLET P2 · INDIKACE (3 indication-boxes + 6+6+5 procedure cards)
   ===== LOCKED (pixel-exact @1440, MAE 4.285/255 vs aligned ref crop,
   best dy=-4 — finding #9 drift baseline). 17 procedure cards across
   3 composite boxes; per-box subtotals nominal; remaining MAE comes
   from card-line antialiasing at high-density procedure grids (6+6+5
   cards) — same big-content class as HP results-section (MAE 1.409
   for 4 cards). LOCK at 4.285 acceptable for 2253px tall section.
   Source: 3× .indication-box composite layout — row1: image (0.55fr) +
   content (1fr); row2: procedures (span 1/-1) = label + N cards. Box 2
   reverse swaps DOM order to (content, image, procedures) + cols
   "1fr 0.55fr" so content stays in col1 (wider) and image moves col2.
   ALL spacing primitives via Elementor settings + Kit globals; this
   skin is no-native-home only: radius/clip on box + image cap, list
   bullet pseudo, card+pill skins, .from inline price-prefix overrides.
*/

/* === BOX wrapper + composite grid === */
.dh-plet-ind-box {
  border-radius: 6px;
  overflow: hidden;
}

/* Indication image (col 1 or 2). Pattern: bg-image on container, cover +
   top-center via Elementor element settings. Grid parent has align-items:
   stretch → image col matches text col height (text-driven). No min/max
   on image — image fully adapts to text content's vertical extent. */
.dh-plet-ind-image {
  overflow: hidden;
  filter: contrast(0.97) saturate(0.88) brightness(1.02);
}

/* === Content cell — Elementor handles flex col + justify center +
   padding. Inner widget <p> resets only. */
.dh-plet-ind-desc p { margin: 0; }
.dh-plet-ind-list-w p { margin: 0; }

/* Raw <ul.dh-plet-ind-list> inside Kit-bound (txtui+inksoft)
   text-editor — list/grid/bullet layout has no Elementor home.
   2-col gap 6/24, terracotta 6×1 bullet line at top:8 (source
   spec). 16px left-padding clears the bullet. color:inherit
   takes inksoft (mocha) from Kit binding on the widget wrapper. */
.dh-plet-ind-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.dh-plet-ind-list li {
  position: relative;
  padding-left: 16px;
  color: inherit;
}
.dh-plet-ind-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 1px;
  background: var(--dh-terracotta);
}

/* === Procedures row (grid_column 1/-1 in indication-box grid).
   The container itself is a grid N cols × 2 rows; label widget spans
   row 1 (1/-1) and N cards auto-place in row 2. Border-top + pad =
   Elementor settings; this skin = label decoration + card visuals. */

/* Label = inline-flex with trailing 80×1 line. Wrapper handles
   block-level layout; the inner span renders the text. Source uses
   `display: inline-flex; gap:14` on the label itself, with ::after
   creating an 80×1 trailing line. With Elementor text-editor wrapping
   the content in <p>, we put the rule on the wrapper class. */
.dh-plet-procs-label p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dh-plet-procs-label p::after {
  content: "";
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--dh-line-soft);
}

/* === Procedure card — flat flex column. radius4 + clip + min-height
   are skin (Elementor min_height handles the height; radius+clip have
   no Elementor home). Card bg = Kit surface (cream); border 1px
   linesoft (Kit) — both via Elementor on the container. */
.dh-plet-proc-card {
  border-radius: 4px;
  overflow: hidden;
}

/* Description fills remaining card height → reserve link pins to
   the bottom across all cards in a row (equal-height via grid stretch).
   Same idiom as LOCKED .dh-result-detail (flex-grow). */
.dh-plet-proc-desc { flex-grow: 1; }
.dh-plet-proc-desc p { margin: 0; }

/* More-link — raw <a> inside Kit-bound (txtcount+inksoft) text-editor;
   inline-flex + arrow. Self-start so the underline only spans content. */
.dh-plet-proc-more-w p { margin: 0; }
.dh-plet-proc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

/* Meta row — time + price. The border-top + pad-top are on the TIME
   widget wrapper (first of the meta pair) to fake a single bordered
   meta block without adding an extra container (keeps nesting ≤ 4). */
.dh-plet-proc-time {
  border-top: 1px solid var(--dh-line-soft);
  padding-top: 12px;
}
.dh-plet-proc-time p { margin: 0; }
.dh-plet-proc-price p { margin: 0; }

/* Price `.from` prefix — Manrope 12 lowercase ls0.6 taupe, inline
   override of the Fraunces 17 Kit binding on the price element. The
   surrounding price element binds dispprocname/ink (via __globals__);
   the .from span is an inline override (raw-HTML-in-widget). */
.dh-plet-proc-price .from {
  font-family: var(--dh-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: lowercase;
  color: var(--dh-taupe);
  margin-right: 4px;
  font-variation-settings: normal;
}

/* Reserve mini-pill — raw <a> inside Kit-bound (txtprocresv+surface)
   text-editor. Pill bg/pad/radius are no-native-home skin. */
.dh-plet-proc-reserve-w p { margin: 0; }
.dh-plet-proc-reserve {
  display: block;
  background: var(--dh-espresso);
  color: var(--dh-cream);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 100px;
  text-align: center;
}

/* Fraunces role new here — axes only; family/size/weight/lh/ls come
   from the bound Kit `dispprocname` global (17/400/lh1.2/-0.17px).
   Used on procedure-name (h4) and procedure-price (text-editor). */
.dh-fr-procname { font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 0; }
.dh-fr-procname em {
  font-style: italic;
  color: var(--dh-terracotta);
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}

/* =========================================================
   PLET · P3 — GALLERY (Před / Po) — LOCKED (pixel-exact @1440,
   MAE 1.616/255 vs aligned ref crop, best dy=0).
   Section: full-bleed gradient surface→surfacealt (same idiom as
   .dh-denisa, just different colour stops — actually IDENTICAL stops!
   Source: linear-gradient(180deg, cream 0%, sand 100%) = same as denisa.
   Could reuse .dh-denisa — but the SEMANTIC class is different (gallery
   vs author bio) and we keep .dh-denisa locked. NEW skin class. */
.dh-plet-gallery {
  background: linear-gradient(180deg, var(--dh-cream) 0%, var(--dh-sand) 100%);
}

/* Section-header-clean — reusable mini-block: max-width 900 + mb48.
   Width via Elementor _element_custom_width on the container; this
   class is currently a no-op tag (Kit handles widths). Kept for future
   skin needs (e.g. centering or alignment variants). */
.dh-section-header-clean { /* hook */ }

/* Gallery card — surfacecard bg + linesoft border + radius6 + overflow hidden.
   bg + border activated on the container (via Kit __globals__ + classic
   activator); skin adds nothing else. */

/* Gallery images row — 2-col grid with 1px gap on linesoft bg. The
   linesoft bg "leaks" through the 1px gap to draw the divider line.
   aspect-ratio 2/1.2 lives on the ROW (= source `.gallery-images`),
   not individual cells — the two halves inherit the row height.
   Override Elementor's grid-template-rows (set via the variable
   `--e-con-grid-template-rows: auto` from `.e-con.e-grid` rule, which
   has specificity 0,2,0 > our 0,1,0). Same for align-content. Setting
   the CUSTOM PROPERTY here resolves the cascade since vars inherit
   from the declaring element. Result: cells stretch to fill the
   aspect-defined row height (255px) instead of collapsing to the
   intrinsic <img> height (~159px). */
.dh-plet-gallery-images {
  aspect-ratio: 2 / 1.2;
  --e-con-grid-template-rows: 1fr;
  --grid-align-content: stretch;
}

/* Gallery image cell — host for raw <img> + <span.dh-plet-gallery-label>.
   `.dh-img-cover` from LOCKED handles aspect via fixed sizing; we add
   position:relative for label anchoring + film filter on the <img>. */
.dh-plet-gallery-image { position: relative; }
.dh-plet-gallery-image img {
  filter: contrast(0.97) saturate(0.88) brightness(1.02);
}

/* Gallery label pill — bound to Kit `txtgallabel` (10/600/UPPER/ls2)
   on the host widget, but the label is a raw <span> inside the html
   widget so the Kit binding doesn't reach it. We MIRROR the Kit values
   here (this is a tight-coupling — preset & skin must stay in sync). */
.dh-plet-gallery-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-block;
  font-family: var(--dh-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--dh-espresso);
  color: var(--dh-cream);
  padding: 6px 10px;
  border-radius: 100px;
}

/* Gallery info inner texts — Kit-bound. Only `<p>` margin resets here. */
.dh-plet-gallery-procedure p { margin: 0; }
.dh-plet-gallery-meta p { margin: 0; }

/* Gallery placeholder note — dashed brand border container with one
   centered text widget inside. The dashed border + radius live on the
   container (Elementor settings). Italic via this class on the inner
   <p>. */
.dh-plet-gallery-note .elementor-widget-text-editor p,
.dh-plet-gallery-note-text p {
  margin: 0;
  font-style: italic;
}

/* =========================================================
   PLET · P4 — FAQ (HTML5 details accordion) — LOCKED (pixel-exact
   @1440, MAE 0.079/255 vs aligned ref crop — BEST plet section,
   sub-pixel match; both ref and live with details=collapsed).
   Container grid 0.5fr/1fr gap 80, left header + right list of 6
   <details>. Native HTML5; zero JS; default-collapsed for ref parity. */
.dh-plet-faq { /* container settings handle padding; no skin */ }

.dh-plet-faq-list { /* flex col via container; no extra */ }

/* Each <details> as faq-item — border-top linesoft, pad 28 0;
   :last-child border-bottom linesoft too (source spec). */
.dh-plet-faq-item {
  border-top: 1px solid var(--dh-line-soft);
  padding: 28px 0;
}
.dh-plet-faq-item:last-child {
  border-bottom: 1px solid var(--dh-line-soft);
}

/* faq-question (summary) — Fraunces 22/400/lh1.2/ls-0.22 (= Kit dispfaqq);
   bind via Kit global on the parent widget? No — this is raw HTML inside
   a single html widget so Kit binding doesn't reach it. Inline the Kit
   values on .dh-plet-faq-q (analogous to .dh-plet-gallery-label). */
.dh-plet-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  cursor: pointer;
  list-style: none;
  font-family: var(--dh-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.22px;
  color: var(--dh-espresso);
  font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 0;
}
.dh-plet-faq-q::-webkit-details-marker { display: none; }
.dh-plet-faq-q::marker { content: ""; }

/* faq-icon — 28×28 circle, taupe border, plus glyph via ::before+::after;
   [open] state swaps bg→brand and rotates the vertical bar. */
.dh-plet-faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--dh-taupe);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 2px;
}
.dh-plet-faq-icon::before,
.dh-plet-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--dh-espresso);
}
.dh-plet-faq-icon::before { width: 11px; height: 1px; }
.dh-plet-faq-icon::after  { width: 1px;  height: 11px; }
.dh-plet-faq-item[open] .dh-plet-faq-icon {
  background: var(--dh-terracotta);
  border-color: var(--dh-terracotta);
}
.dh-plet-faq-item[open] .dh-plet-faq-icon::before,
.dh-plet-faq-item[open] .dh-plet-faq-icon::after {
  background: var(--dh-cream);
}
.dh-plet-faq-item[open] .dh-plet-faq-icon::after { transform: rotate(90deg); }

/* faq-answer — Manrope 16/400/lh1.6 mocha; pad-top 16; max-w 680.
   Same Kit-binding caveat as faq-q (raw HTML). */
.dh-plet-faq-a {
  font-family: var(--dh-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--dh-mocha);
  padding-top: 16px;
  max-width: 680px;
}

/* =========================================================
   PLET · P5 — CROSS-LINK na tělo — LOCKED (pixel-exact @1440,
   MAE 1.904/255 vs aligned ref crop, best dy=0). LAST section.
   Section: full-bleed surfacealt (Kit __globals__ + classic activator).
   Inner grid 1fr/auto gap80, max-w via Kit boxed (1328). Big-pill CTA
   uses LOCKED .dh-btn / .dh-btn-primary / .dh-arrow + NEW .dh-btn-lg
   (size delta only, mirror of .dh-btn-outline pattern). */
.dh-plet-cross { /* container handles bg via Kit + classic activator */ }

.dh-plet-cross-inner { /* grid via container settings */ }

.dh-plet-cross-eyebrow p { margin: 0; }
.dh-plet-cross-text p { margin: 0; }

/* Big-pill CTA size delta — pad 18/32 instead of LOCKED .dh-btn 14/22.
   .dh-btn keeps its display/color/radius/transition; .dh-btn-lg ONLY
   overrides padding (the size-delta pattern from .dh-btn-outline). */
.dh-btn-lg {
  padding: 18px 32px;
  gap: 14px;
}

/* =========================================================
   RF LIFT · procedure detail page — `.dh-rfl-*` skin layer
   LOCKED (8 sections, all built 2026-05-20). MAE summary:
     cta       1.62  🟢
     pro-koho  2.30  🟡
     prubeh    2.47  🟡
     hero      2.68  🟡
     faq       3.26  🟡
     how       5.91  🟡
     first-vst 7.59  🔴 (grain noise floor, dark bg + SVG turbulence)
     variants  8.58  🔴 (residual Y rhythm; iteration-bound)
     AVG       4.30
   Reuses LOCKED HP/.dh-fr-* + plet `.dh-plet-faq-*` accordion.
   ========================================================= */

/* P0 — section-eyebrow shared across most rflift sections */
.dh-rfl-section-eyebrow p { margin: 0; }

/* =========================================================
   RFL · S1 — PROCEDURE HERO
   ========================================================= */
.dh-rfl-procedure-hero { /* container handles boxed + pad */ }

/* Hero tag — REMOVED 2026-05-20. Eyebrow "Ošetření obličeje a těla"
   was redundant with the breadcrumb above the H1 (both convey "where
   am I"). Breadcrumb (.provocado-breadcrumb, sentence-case utility)
   now carries the whole role. */

/* Hero subtitle — Fraunces italic 21 mocha (Kit dispsign 21 italic).
   Add axes (opsz 48 SOFT 100 WONK 1) via skin (source: font-variation
   opsz 48 / SOFT 100 / WONK 1). */
.dh-rfl-hero-subtitle p { margin: 0; }
.dh-rfl-hero-subtitle {
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}

/* Hero lede / facts text — paragraph resets only */
.dh-rfl-hero-lede p { margin: 0; }

/* Facts row — 3-col grid with 1px top/bottom borders + inner vertical
   dividers via column padding + border-left on cols 2/3. The grid
   container has bare padding 20/0/20/0 + bordered top+bottom; per-col
   borders go ONLY between fact 1↔2 and 2↔3 (= border-right on cols 1
   and 2; or border-left on cols 2 and 3 — using the LATTER so col 3
   stays clean from inheritance). */
.dh-rfl-facts-row {
  border-top: 1px solid var(--dh-line);
  border-bottom: 1px solid var(--dh-line);
}
.dh-rfl-fact--mid,
.dh-rfl-fact--last {
  border-left: 1px solid var(--dh-line);
}
.dh-rfl-fact-label p { margin: 0; }
.dh-rfl-fact-value p { margin: 0; }

/* Hero visual chrome — bg-image on container (pattern per
   [[feedback-bg-controls-in-elementor]]). `.dh-img-cover` LOCKED canonical
   gives cover/center-center/no-repeat baseline; per-instance override
   (image, position) lives on element. */
.dh-rfl-hero-visual {
  border-radius: 4px;
  filter: contrast(0.98) saturate(0.9) brightness(1.02);
}

/* =========================================================
   RFL · S2 — VARIANTS
   ========================================================= */
.dh-rfl-variant-card {
  /* card structural; bg/border/radius come from Elementor settings */
}

/* variant-tag — terracotta UPPER tag with bottom-border + align-self.
   Reused on indication blocks too. */
.dh-rfl-variant-tag p {
  margin: 0;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dh-terracotta);
}

/* variant-meta row — top+bottom 1px linesoft borders applied directly
   to the grid container via Elementor settings? Not — Elementor border
   widget settings apply to ALL 4 sides equally; for top+bottom only
   we ship the rule here. */
.dh-rfl-variant-meta {
  border-top: 1px solid var(--dh-line-soft);
  border-bottom: 1px solid var(--dh-line-soft);
}
.dh-rfl-variant-meta-label p { margin: 0; }
.dh-rfl-variant-meta-value p { margin: 0; }

/* variant subtitle / areas / areas-label paragraph resets */
.dh-rfl-variant-subtitle p { margin: 0; }
.dh-rfl-variant-areas-label p { margin: 0; }
.dh-rfl-variant-areas p { margin: 0; }

/* variant CTA — stretched primary pill (extends LOCKED .dh-btn-primary).
   Width 100% via display:block + text-align:center; .dh-btn already
   has inline-flex (locked, won't override). Use display:flex !auto?
   No — use a new wrapper-level rule: the dh-btn-primary inside the
   variant context gets stretched. */
.dh-rfl-variant-cta-w p { margin: 0; }
.dh-rfl-variant-cta {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* =========================================================
   RFL · S3 — HOW
   ========================================================= */
.dh-rfl-how { /* container */ }

.dh-rfl-how-text p {
  margin: 0 0 16px 0;
}
.dh-rfl-how-text p:last-child { margin-bottom: 0; }
.dh-rfl-how-text strong {
  color: var(--dh-espresso);
  font-weight: 600;
}

.dh-rfl-mechanism-card { /* card structural */ }
.dh-rfl-mechanism-desc p { margin: 0; }

/* =========================================================
   RFL · S4 — PRO KOHO (indications + warning)
   ========================================================= */
.dh-rfl-prokoho { /* container */ }

.dh-rfl-indication-block { /* structural */ }
.dh-rfl-indication-block--warning { /* modifier — bg/border via Elementor */ }
.dh-rfl-block-lede p { margin: 0; }

/* indication bullet list — 12×1px brand dash + flex column gap 12 */
.dh-rfl-indi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--dh-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--dh-mocha);
}
.dh-rfl-indi-list li {
  position: relative;
  padding-left: 22px;
}
.dh-rfl-indi-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--dh-terracotta);
}
.dh-rfl-indi-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

/* =========================================================
   RFL · S5 — PRŮBĚH (placeholder + after-note)
   ========================================================= */
.dh-rfl-prubeh { /* container */ }

/* placeholder dashed box — bg/border/radius via Elementor settings;
   text inside is italic */
.dh-rfl-placeholder-box .elementor-widget-text-editor p,
.dh-rfl-placeholder-text p {
  margin: 0;
  font-style: italic;
}

/* After-note 2-col grid (auto | 1fr) — label is Fraunces italic 28
   (Kit dispproch); body is Manrope 16 mocha. Both via Kit. The label
   needs nowrap to stay on a single line. */
.dh-rfl-after-note { /* grid via Elementor settings */ }
.dh-rfl-after-note-label p {
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}
.dh-rfl-after-note-text p { margin: 0; }

/* =========================================================
   RFL · S6 — FIRST-VISIT (dark)
   ========================================================= */
.dh-rfl-first-visit {
  /* bg ink via Elementor settings; add the SVG noise overlay here */
  position: relative;
  overflow: hidden;
}
.dh-rfl-first-visit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
.dh-rfl-first-visit > .e-con-inner {
  position: relative;
  z-index: 1;
}

.dh-rfl-fv-eyebrow p { margin: 0; }
.dh-rfl-fv-lede p { margin: 0; }

/* fv h2 title — Fraunces 38 W300 cream (Kit dispfooter), em italic
   rosedust. Add axes here (no LOCKED dispfooter axes class — footer
   uses .dh-fr-fbrand for axes; we ship a small new class). */
.dh-rfl-fv-title {
  font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 0;
}
.dh-rfl-fv-title em {
  font-style: italic;
  color: var(--dh-rose-dust);
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}

/* fv-points list — same dash pattern as indi-list but rose-dust 14×1px.
   `<strong>` becomes its own line (display:block) cream with no ls. */
.dh-rfl-fv-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--dh-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(237, 234, 230, 0.78);   /* greige textondark (was terracotta rgba(244,237,226,.78)) */
}
.dh-rfl-fv-points li {
  position: relative;
  padding-left: 28px;
}
.dh-rfl-fv-points li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--dh-rose-dust);
}
.dh-rfl-fv-points strong {
  display: block;
  font-weight: 600;
  color: var(--dh-cream);
  margin-bottom: 4px;
}

/* =========================================================
   RFL · S7 — FAQ (reuses LOCKED .dh-plet-faq-* but with smaller
   item padding 24/0 vs plet's 28/0 — source delta only). Scope
   the override via .dh-rfl-faq parent so plet stays untouched.
   ========================================================= */
.dh-rfl-faq { /* container */ }
.dh-rfl-faq-grid { /* 2-col grid via Elementor settings */ }
.dh-rfl-faq .dh-plet-faq-item { padding: 24px 0; }

/* =========================================================
   RFL · S8 — CTA STRIP + RELATED
   ========================================================= */
.dh-rfl-cta-strip { /* gradient + top border via Elementor settings */ }

.dh-rfl-cta-title { /* uses LOCKED .dh-fr-seasonal */ }
.dh-rfl-cta-p p { margin: 0; }
.dh-rfl-cta-actions-w p { margin: 0; }

.dh-rfl-related-label p { margin: 0; }

/* Related card — same pattern as variant-card but tighter (pad 22/24/20
   radius 4). Hover lift; the "Více →" link grows its arrow gap. */
.dh-rfl-related-card { /* structural */ }
.dh-rfl-related-name { /* uses LOCKED .dh-fr-procname */ }
.dh-rfl-related-desc p { margin: 0; }
.dh-rfl-related-more-w p { margin: 0; }
.dh-rfl-related-more {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   PROVOCADO BREADCRUMBS — Brand skin (utility navigation)
   Plugin: provocado-breadcrumbs v1.1.0
   Markup contract (from plugin renderer, do not break):
     <nav class="provocado-breadcrumb" aria-label="Breadcrumb">
       <ol class="provocado-breadcrumb-list">
         <li class="provocado-breadcrumb-item">
           <a class="provocado-breadcrumb-link">…</a>
           <span class="provocado-breadcrumb-separator">/</span>
         </li>
         …
         <li class="provocado-breadcrumb-item">
           <span class="provocado-breadcrumb-current" aria-current="page">…</span>
         </li>
       </ol>
     </nav>
   Plugin base CSS sets flex layout — we override font/color/spacing only.
   ========================================================= */

/* Container — utility band ABOVE eyebrow/H1, 24px gap below.
   Sentence-case "path/route" data — deliberately OFF the site's
   UPPERCASE utility family (txteyebrow/txttag/txtcount), so brand
   eyebrows stay dominant and breadcrumb reads as navigation utility. */
.provocado-breadcrumb {
  font-family: var(--dh-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 24px;
}

/* Link (non-current crumb) — ink-muted; hover to full ink (espresso) */
.provocado-breadcrumb-link {
  color: var(--dh-taupe);          /* = Kit inkmuted #8A7866 */
  text-decoration: none;
  transition: color 0.2s ease;
}
.provocado-breadcrumb-link:hover {
  color: var(--dh-espresso);
  text-decoration: none;            /* override plugin base underline */
}

/* Current page — full ink, same weight (sentence-case keeps it utility) */
.provocado-breadcrumb-current {
  color: var(--dh-espresso);
  font-weight: 500;
}

/* Separator — same hue as link, set apart by opacity not color */
.provocado-breadcrumb-separator {
  color: var(--dh-taupe);
  margin: 0 8px;
  padding: 0;
  font-weight: 500;
  opacity: 0.5;
}