/* HADI editorial surface. Native port of Fluid Functionalism motion tokens.
   Source: https://www.fluidfunctionalism.com/docs/motion (MIT).
   Only this article's template is expanded; site chrome remains native. */
body.postid-62842 { overflow-x: clip; overflow-y: visible; }
body.postid-62842 .elementor-element-980aacb,
body.postid-62842 .elementor-element-d3a1a80,
body.postid-62842 .elementor-element-d246dcd { display: none !important; }
body.postid-62842 .elementor-element-23bcda4 { width: 100% !important; max-width: 100%; }
body.postid-62842 .elementor-element-4ae815b > .e-con-inner { max-width: 1240px; }
body.postid-62842 .elementor-element-58e1999 { gap: 0; }
body.postid-62842 .elementor-widget-theme-post-content { text-align: right; width: 100%; }

#hadi-story {
  --ff-ink: #17252c; --ff-muted: #53656e; --ff-accent: #087f9d;
  --ff-surface: #f0f6f7; --ff-hover: #e2eef1; --ff-line: #d3e1e5;
  --ff-fast: 80ms; --ff-moderate: 160ms; --ff-slow: 240ms;
  --ff-fast-exit: 60ms; --ff-moderate-exit: 120ms;
  --ff-spring: linear(0, 0.5729, 0.8966, 0.9789, 0.996, 1, 1);
  --ff-spring-slow: linear(0, 0.3878, 0.7777, 0.9458, 0.9946, 1.0029, 1.0021, 1);
  --ff-display: clamp(2.2rem, 3.35vw, 3.45rem);
  --ff-title: clamp(1.65rem, 2.1vw, 2.2rem);
  --ff-subtitle: 1.25rem; --ff-body: 1.125rem; --ff-caption: .875rem; --ff-micro: .75rem;
  color: var(--ff-ink); background: #fff; font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: var(--ff-body); line-height: 1.9; text-align: right; margin: 0 auto; padding: 30px 24px 72px;
  width: 100%; max-width: 1240px; isolation: isolate;
}
#hadi-story *, #hadi-story *::before, #hadi-story *::after { box-sizing: border-box; }
#hadi-story ::selection { background: #bce9f1; color: #17252c; }
#hadi-story a { color: var(--ff-accent); text-underline-offset: .22em; }
#hadi-story a:focus-visible, #hadi-story button:focus-visible { outline: 2px solid var(--ff-accent); outline-offset: 5px; border-radius: 4px; }
#hadi-story h1, #hadi-story h2, #hadi-story h3 { font-family: inherit; color: var(--ff-ink); font-weight: 600; margin: 0; padding: 0; text-wrap: balance; }
#hadi-story h1 { font-size: var(--ff-display); line-height: 1.22; font-weight: 700; }
#hadi-story h2 { font-size: var(--ff-title); line-height: 1.4; }
#hadi-story h3 { font-size: var(--ff-subtitle); line-height: 1.55; }
#hadi-story p { font-size: inherit; line-height: inherit; margin: 0 0 1.3em; color: inherit; }
#hadi-story p:last-child { margin-bottom: 0; }
#hadi-story [id] { scroll-margin-top: 110px; }
#hadi-story .ff-reading-track { position: fixed; inset: 0 0 auto; height: 3px; z-index: 9999; pointer-events: none; }
#hadi-story .ff-reading-fill { display: block; width: 100%; height: 100%; background: var(--ff-accent); transform: scaleX(0); transform-origin: right; }
#hadi-story .ff-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 64px; padding-block: 16px 60px; }
#hadi-story .ff-byline { font-size: var(--ff-caption); color: var(--ff-muted); margin-block: 24px; }
#hadi-story .ff-byline span { padding-inline: 10px; }
#hadi-story .ff-lead { font-size: var(--ff-body); line-height: 1.85; }
#hadi-story .ff-start { display: inline-flex; min-height: 44px; align-items: center; margin-top: 25px; font-size: 1rem; font-weight: 600; text-decoration: underline; }
#hadi-story .ff-photo { margin: 24px 0 64px; }
#hadi-story .ff-photo img { width: 100%; display: block; height: auto; border-radius: 14px; }
#hadi-story figcaption { color: var(--ff-muted); font-size: var(--ff-caption); font-style: normal; line-height: 1.65; padding-top: 12px; text-align: right; }
#hadi-story .ff-hero-photo { margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
#hadi-story .ff-hero-photo img { aspect-ratio: 4 / 4.5; object-fit: cover; object-position: 50% 54%; }
#hadi-story .ff-introduction { max-width: 740px; margin: 0 auto 64px; }
#hadi-story .ff-process { background: var(--ff-surface); padding: 38px 44px 24px; border-radius: 16px; margin: 0 0 80px; }
#hadi-story .ff-process-intro { display: flex; gap: 32px; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
#hadi-story .ff-process-intro h2 { font-size: 1.65rem; }
#hadi-story .ff-process-intro > p { color: var(--ff-muted); font-size: .95rem; max-width: 350px; }
#hadi-story .ff-process-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
#hadi-story .ff-process-tabs button { appearance: none; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--ff-muted); font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; padding: 16px 4px; min-height: 64px; display: flex; justify-content: center; align-items: center; gap: 12px; }
#hadi-story .ff-process-tabs button,
#hadi-story .ff-process-tabs button:hover,
#hadi-story .ff-process-tabs button:focus { background: transparent !important; color: var(--ff-muted) !important; box-shadow: none !important; }
#hadi-story .ff-process-tabs button[aria-selected="true"] { color: var(--ff-ink) !important; }
#hadi-story .ff-process-tabs button:hover { color: var(--ff-accent) !important; }
#hadi-story .ff-tab-number { font-size: var(--ff-caption); font-weight: 400; font-variant-numeric: tabular-nums; }
#hadi-story .ff-process-rail { height: 2px; background: var(--ff-line); direction: rtl; }
#hadi-story .ff-process-rail span { display: block; height: 100%; width: 25%; background: var(--ff-accent); transform: translateX(0); transition: transform var(--ff-moderate) var(--ff-spring); }
#hadi-story [data-active-view="design"] .ff-process-rail span { transform: translateX(-100%); }
#hadi-story [data-active-view="prototype"] .ff-process-rail span { transform: translateX(-200%); }
#hadi-story [data-active-view="production"] .ff-process-rail span { transform: translateX(-300%); }
#hadi-story .ff-process-panel { padding-top: 30px; }
#hadi-story .ff-process-panel + .ff-process-panel { margin-top: 20px; border-top: 1px solid var(--ff-line); }
#hadi-story .is-enhanced .ff-process-panels { display: grid; }
#hadi-story .is-enhanced .ff-process-panel { grid-area: 1 / 1; margin: 0; border: 0; }
#hadi-story .is-enhanced [data-view-panel][hidden] { display: block; visibility: hidden; pointer-events: none; }
#hadi-story .is-enhanced .ff-process-panel.is-active { animation: ff-panel-enter var(--ff-moderate) var(--ff-spring) both; }
#hadi-story .ff-panel-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 20px; }
#hadi-story .ff-panel-columns strong { display: block; font-size: var(--ff-caption); color: var(--ff-muted); font-weight: 400; margin-bottom: 5px; }
#hadi-story .ff-panel-columns p { font-size: 1rem; line-height: 1.75; }
#hadi-story .ff-process-note { font-size: var(--ff-caption); color: var(--ff-muted); border-top: 1px solid var(--ff-line); padding-top: 20px; margin-top: 24px; }
#hadi-story .ff-story-grid { display: grid; grid-template-columns: 210px minmax(0, 740px); gap: 64px; justify-content: space-between; align-items: start; }
#hadi-story .ff-chapter-nav { position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 132px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ff-line) transparent; }
#hadi-story .ff-nav-title { font-size: 1.1rem; font-weight: 600; margin: 0 12px 12px; }
#hadi-story .ff-nav-items { position: relative; }
#hadi-story .ff-nav-items a { position: relative; display: flex; gap: 16px; align-items: center; min-height: 44px; padding: 8px 12px; font-size: var(--ff-caption); color: var(--ff-muted); text-decoration: none; font-weight: 400; z-index: 1; }
#hadi-story .ff-nav-items a.is-current { color: var(--ff-accent); }
#hadi-story .ff-nav-number { font-variant-numeric: tabular-nums; font-size: var(--ff-micro); }
#hadi-story .ff-nav-highlight { position: absolute; top: 0; left: 0; border-radius: 8px; background: var(--ff-hover); pointer-events: none; opacity: 0; transition: transform var(--ff-fast) var(--ff-spring), opacity var(--ff-fast-exit) ease-out; }
#hadi-story .ff-nav-highlight[data-ff-visible="true"] { opacity: 1; }
#hadi-story .ff-nav-highlight[data-ff-motion="snap"] { transition-property: opacity; }
#hadi-story .ff-nav-contact { display: block; margin: 22px 12px 0; padding-top: 20px; border-top: 1px solid var(--ff-line); font-size: var(--ff-caption); }
#hadi-story .ff-chapter { margin-bottom: 60px; }
#hadi-story .ff-chapter-heading { border-top: 1px solid var(--ff-line); padding-top: 22px; display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: baseline; margin-bottom: 26px; }
#hadi-story .ff-stage-number { font-size: .95rem; color: var(--ff-accent); font-variant-numeric: tabular-nums; }
#hadi-story .ff-prose { max-width: 74ch; }
#hadi-story .ff-prose p { line-height: 1.95; }
#hadi-story .ff-prose a { text-decoration: underline; }
#hadi-story .ff-pause { margin: 0 0 64px; padding: 40px 40px 40px 0; border-block: 1px solid var(--ff-line); }
#hadi-story .ff-pause p { font-size: 1.75rem; font-weight: 600; line-height: 1.5; max-width: 580px; text-wrap: balance; }
#hadi-story .ff-pause span { font-size: var(--ff-caption); color: var(--ff-muted); }
#hadi-story .ff-photo-cad img { padding: 20px; background: #fff; border: 1px solid var(--ff-line); }
#hadi-story .ff-photo-prototype { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 30px; background: var(--ff-surface); border-radius: 16px; padding: 24px; }
#hadi-story .ff-photo-prototype img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
#hadi-story .ff-photo-prototype figcaption { padding: 0 0 10px; font-size: var(--ff-subtitle); color: var(--ff-ink); line-height: 1.6; }
#hadi-story .ff-photo-system { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
#hadi-story .ff-photo-system img { max-height: 470px; object-fit: cover; }
#hadi-story .ff-photo-system figcaption { font-size: var(--ff-subtitle); color: var(--ff-ink); }
#hadi-story .ff-image-note { font-size: var(--ff-caption); color: var(--ff-muted); padding-top: 24px; border-top: 1px solid var(--ff-line); }
body.postid-62842 #hadi-article-contact { max-width: 1000px; margin-inline: auto; scroll-margin-top: 100px; }
@keyframes ff-panel-enter { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  #hadi-story .ff-hero { gap: 32px; }
  #hadi-story .ff-story-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 800px) {
  #hadi-story { padding: 24px 12px 48px; --ff-body: 1.0625rem; }
  #hadi-story .ff-hero { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding-bottom: 40px; }
  #hadi-story .ff-hero-copy { display: contents; }
  #hadi-story .ff-hero h1 { order: 0; }
  #hadi-story .ff-hero .ff-byline { order: 1; margin: 0; }
  #hadi-story .ff-hero-photo { order: 2; }
  #hadi-story .ff-hero .ff-lead { order: 3; }
  #hadi-story .ff-hero .ff-start { order: 4; margin-top: 0; }
  #hadi-story h1 { max-width: 680px; }
  #hadi-story .ff-hero-photo img { aspect-ratio: 3 / 2; object-position: 50% 47%; }
  #hadi-story .ff-byline { margin-block: 20px; }
  #hadi-story .ff-introduction { margin-bottom: 40px; }
  #hadi-story .ff-process { padding: 28px 24px 22px; margin-bottom: 48px; }
  #hadi-story .ff-process-intro { display: block; margin-bottom: 16px; }
  #hadi-story .ff-process-intro > p { margin-top: 12px; max-width: none; }
  #hadi-story .ff-story-grid { display: block; }
  #hadi-story .ff-chapter-nav { position: static; max-height: none; overflow: visible; margin-bottom: 44px; padding-bottom: 20px; border-bottom: 1px solid var(--ff-line); }
  #hadi-story .ff-nav-items { display: grid; grid-template-columns: 1fr 1fr; }
  #hadi-story .ff-nav-contact { display: none; }
  #hadi-story .ff-nav-title { margin-inline: 0; }
  #hadi-story .ff-chapter { margin-bottom: 44px; }
  #hadi-story .ff-chapter-heading { grid-template-columns: 26px 1fr; gap: 12px; }
  #hadi-story .ff-photo { margin-bottom: 44px; }
  #hadi-story .ff-pause { padding: 28px 16px; margin-bottom: 44px; }
  #hadi-story .ff-pause p { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  #hadi-story { padding-inline: 4px; --ff-display: 2.18rem; --ff-title: 1.6rem; }
  #hadi-story .ff-process { padding: 24px 18px 20px; }
  #hadi-story .ff-process-intro h2 { font-size: 1.5rem; }
  #hadi-story .ff-process-tabs button { flex-direction: column; gap: 3px; font-size: .9rem; padding-block: 14px; }
  #hadi-story .ff-panel-columns { grid-template-columns: 1fr; gap: 16px; }
  #hadi-story .ff-process-panel { padding-top: 24px; }
  #hadi-story .ff-photo-prototype, #hadi-story .ff-photo-system { grid-template-columns: 1fr; gap: 18px; }
  #hadi-story .ff-photo-prototype { padding: 18px; }
  #hadi-story .ff-photo-prototype img { aspect-ratio: 1; object-position: 50% 62%; }
  #hadi-story .ff-photo-prototype figcaption, #hadi-story .ff-photo-system figcaption { font-size: 1rem; padding: 0; }
  #hadi-story .ff-photo-system img { max-height: 450px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.postid-62842) { scroll-behavior: auto !important; }
  #hadi-story *, #hadi-story *::before, #hadi-story *::after { scroll-behavior: auto !important; }
  #hadi-story .ff-process-rail span, #hadi-story .ff-nav-highlight { transition-property: opacity; }
  #hadi-story .is-enhanced .ff-process-panel.is-active { animation: none; }
}
@media print {
  #hadi-story .ff-chapter-nav, #hadi-story .ff-reading-track, #hadi-story .ff-process-tabs, #hadi-story .ff-process-rail { display: none; }
  #hadi-story .ff-story-grid { display: block; }
  #hadi-story .is-enhanced .ff-process-panels { display: block; }
  #hadi-story .is-enhanced [data-view-panel][hidden] { visibility: visible; }
  #hadi-story .ff-chapter, #hadi-story .ff-photo { break-inside: avoid; }
}

/* Retained engineering scene: StageShow annotations/framing, Fluid UI feedback.
   Isolated native port for the existing WordPress page. No global kit styles. */
#hadi-story #hadi-process {
  --hp-travel: 800ms;
  --hp-story-ease: cubic-bezier(.45, 0, .1, 1);
  --hp-paper: #f6f7f7;
  border-block: 1px solid var(--ff-line);
  margin: 0 0 80px; padding: 38px 0 20px;
  color: var(--ff-ink); background: #fff;
}
#hadi-process .hp-heading { display:flex; justify-content:space-between; align-items:baseline; gap:32px; margin-bottom:26px; }
#hadi-story #hadi-process .hp-heading h2 { font-size:clamp(1.75rem,2.7vw,2.6rem); line-height:1.3; }
#hadi-story #hadi-process .hp-heading p { font-size:1rem; color:var(--ff-muted); max-width:300px; margin:0; }
#hadi-process .hp-layout { display:grid; grid-template-columns:minmax(270px, .8fr) minmax(0,1.4fr); gap:60px; align-items:center; }
#hadi-process .hp-controls { min-width:0; }
#hadi-process .hp-steps { position:relative; display:grid; grid-template-columns:1fr; padding:4px; margin-inline:-4px; }
#hadi-story #hadi-process .hp-steps button { position:relative; isolation:isolate; display:grid; grid-template-columns:30px auto 1fr; align-items:center; gap:12px; width:100%; height:54px; padding:10px 12px; margin:0; border:0; background:transparent!important; box-shadow:none!important; color:var(--ff-muted)!important; border-radius:8px; cursor:pointer; font-family:inherit; text-align:right; font-size:1rem; line-height:1.3; font-weight:400; z-index:1; }
#hadi-process .hp-index { font-size:.8rem; font-variant-numeric:tabular-nums; }
#hadi-process .hp-step-label { font-size:1.1rem; font-weight:600; }
#hadi-process .hp-step-description { font-size:.8rem; justify-self:end; }
#hadi-story #hadi-process .hp-steps button[aria-selected="true"] { color:var(--ff-ink)!important; }
#hadi-story #hadi-process .hp-steps button[aria-selected="true"] .hp-index { color:var(--ff-accent); }
#hadi-process .hp-selection, #hadi-process .hp-hover { position:absolute; left:0; top:0; pointer-events:none; border-radius:8px; transform:translate3d(4px,4px,0); height:54px; width:calc(100% - 8px); transition:transform var(--ff-moderate) var(--ff-spring),opacity var(--ff-fast-exit) ease-out; }
#hadi-process .hp-selection { background:transparent; border-inline-end:2px solid var(--ff-accent); border-radius:0; }
#hadi-process .hp-hover { background:var(--ff-hover); opacity:0; transition-duration:var(--ff-fast); }
#hadi-process .hp-hover[data-visible="true"] { opacity:.55; }
#hadi-process .hp-hover[data-snap="true"] { transition-property:opacity; }
#hadi-process .hp-selection[data-snap="true"] { transition-property:opacity; }
#hadi-process .hp-panels { display:grid; margin-top:28px; min-width:0; }
#hadi-process .hp-panel { margin-top:20px; }
#hadi-process.is-enhanced .hp-panel { grid-area:1/1; margin:0; opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity var(--ff-moderate) ease-out,transform var(--ff-moderate) var(--ff-spring),visibility 0s var(--ff-moderate); pointer-events:none; }
#hadi-process.is-enhanced .hp-panel.is-active { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; pointer-events:auto; }
#hadi-story #hadi-process .hp-panel h3 { font-size:1.4rem; line-height:1.5; margin:0 0 12px; }
#hadi-story #hadi-process .hp-panel p { font-size:1rem; line-height:1.8; margin:0; }
#hadi-story #hadi-process .hp-deliverable { margin-top:22px; display:grid; gap:4px; }
#hadi-process .hp-deliverable span { color:var(--ff-muted); font-size:.8rem; }
#hadi-process .hp-deliverable strong { font-weight:600; font-size:1rem; }
#hadi-process .hp-stage { margin:0; min-width:0; }
#hadi-process .hp-canvas { position:relative; width:100%; height:432px; overflow:clip; }
#hadi-process .hp-drawing { display:block; width:100%; height:100%; overflow:visible; transition:transform var(--hp-travel) var(--hp-story-ease); }
#hadi-process .hp-origin, #hadi-process .hp-part, #hadi-process .hp-copy { transform-box:view-box; transform-origin:350px 260px; transition:transform var(--hp-travel) var(--hp-story-ease),opacity var(--ff-slow) ease-out; }
#hadi-process .hp-copy { opacity:0; pointer-events:none; transform:translate(0,0) scale(.78); }
#hadi-process .hp-copy-b { transform:translate(120px,-50px) scale(.67); }
#hadi-process .hp-copy-a { transform:translate(60px,-25px) scale(.8); }
#hadi-process .hp-details { display:none; }
#hadi-process .hp-guides { opacity:0; color:var(--ff-accent); transition:opacity var(--ff-moderate) ease-out; pointer-events:none; }
#hadi-process[data-hp-state="idea"] .hp-part [fill]:not([fill="none"]) { fill:#fff; }
#hadi-process[data-hp-state="idea"] .hp-part [filter] { filter:none; }
#hadi-process[data-hp-state="idea"] .hp-part:not(.hp-arm) [stroke-width] { stroke-width:1.5; }
#hadi-process[data-hp-state="idea"] .hp-arm path:nth-child(2), #hadi-process[data-hp-state="idea"] .hp-arm path:nth-child(4) { stroke:#fff; }
#hadi-process[data-hp-state="idea"] .hp-instrument { transform:translateY(-4px); }
#hadi-process[data-hp-state="design"] .hp-instrument { transform:translate(14px,-34px); }
#hadi-process[data-hp-state="design"] .hp-tray { transform:translate(6px,-14px); }
#hadi-process[data-hp-state="design"] .hp-base { transform:translate(0,18px); }
#hadi-process[data-hp-state="design"] .hp-guides { opacity:.6; }
#hadi-process[data-hp-state="production"] .hp-origin { transform:translate(-110px,20px) scale(.84); }
#hadi-process[data-hp-state="production"] .hp-copy-a { opacity:1; transform:translate(75px,-22px) scale(.64); }
#hadi-process[data-hp-state="production"] .hp-copy-b { opacity:1; transform:translate(218px,-55px) scale(.48); }
#hadi-process .hp-caption { padding:8px 0 0; text-align:center; font-style:normal; }
#hadi-process .hp-notes { display:grid; min-height:28px; }
#hadi-process .hp-notes span { grid-area:1/1; opacity:0; transition:opacity var(--ff-moderate) ease-out; font-size:.9rem; line-height:1.6; color:var(--ff-ink); }
#hadi-process[data-hp-state="idea"] [data-hp-note="idea"], #hadi-process[data-hp-state="design"] [data-hp-note="design"], #hadi-process[data-hp-state="prototype"] [data-hp-note="prototype"], #hadi-process[data-hp-state="production"] [data-hp-note="production"] { opacity:1; }
#hadi-process .hp-illustration-note { display:block; margin-top:8px; color:var(--ff-muted); font-size:.75rem; }
#hadi-process .hp-footer { margin-top:28px; padding-top:18px; border-top:1px solid var(--ff-line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
#hadi-story #hadi-process .hp-footer p { font-size:.875rem; color:var(--ff-muted); margin:0; }
#hadi-story #hadi-process .hp-play { flex:none; padding:10px 18px; min-height:44px; min-width:140px; background:var(--ff-ink)!important; color:#fff!important; font:600 .875rem/1.5 'Noto Sans Hebrew',sans-serif; border:0; border-radius:7px; cursor:pointer; box-shadow:none!important; }
#hadi-story #hadi-process .hp-play:hover { background:#25414c!important; }
#hadi-process .hp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#hadi-process button:focus-visible { outline:2px solid var(--ff-accent)!important; outline-offset:2px; }
@media (max-width:1000px) {
 #hadi-process .hp-layout { gap:32px; grid-template-columns:minmax(260px,1fr) minmax(0,1.2fr); }
 #hadi-process .hp-step-description { display:none; }
 #hadi-story #hadi-process .hp-steps button { grid-template-columns:30px 1fr; }
}
@media (max-width:700px) {
 #hadi-story #hadi-process { padding-top:28px; margin-bottom:48px; }
 #hadi-process .hp-heading { display:block; margin-bottom:20px; }
 #hadi-story #hadi-process .hp-heading h2 { font-size:1.85rem; }
 #hadi-story #hadi-process .hp-heading p { margin-top:12px; max-width:none; font-size:.95rem; }
 #hadi-process .hp-layout { display:flex; flex-direction:column; gap:18px; align-items:stretch; }
 #hadi-process .hp-controls { display:contents; }
 #hadi-process .hp-steps { order:0; grid-template-columns:repeat(4,1fr); margin:0 -4px; }
 #hadi-story #hadi-process .hp-steps button { display:flex; flex-direction:column; gap:5px; justify-content:center; height:62px; padding:8px 2px; text-align:center; }
 #hadi-process .hp-step-label { font-size:.92rem; }
 #hadi-process .hp-index { font-size:.75rem; }
 #hadi-process .hp-stage { order:1; }
 #hadi-process .hp-canvas { height:260px; margin-top:4px; }
 #hadi-process:not([data-hp-state="production"]) .hp-drawing { transform:scale(1.15); transform-origin:50% 50%; }
 #hadi-process .hp-selection { border-inline-end:0; border-bottom:2px solid var(--ff-accent); }
 #hadi-process .hp-panels { order:2; margin-top:10px; }
 #hadi-story #hadi-process .hp-panel h3 { font-size:1.3rem; }
 #hadi-story #hadi-process .hp-deliverable { margin-top:16px; }
 #hadi-process .hp-footer { flex-direction:column; align-items:stretch; gap:16px; margin-top:24px; }
 #hadi-process .hp-play { align-self:start; }
 #hadi-process .hp-notes span { font-size:.8rem; }
 #hadi-process .hp-illustration-note { font-size:.7rem; }
}
@media (prefers-reduced-motion:reduce) {
 #hadi-process .hp-drawing, #hadi-process .hp-origin, #hadi-process .hp-part, #hadi-process .hp-copy, #hadi-process .hp-selection, #hadi-process .hp-hover { transition-property:opacity; }
 #hadi-process.is-enhanced .hp-panel { transform:none; transition-property:opacity,visibility; }
}
@media print {
 #hadi-process .hp-steps, #hadi-process .hp-play { display:none; }
 #hadi-process .hp-panels { display:block; }
 #hadi-process.is-enhanced .hp-panel { visibility:visible; opacity:1; transform:none; margin-block:20px; }
}

/* Explicit RTL correction and editorial pull quote. No new motion system. */
#hadi-process .hp-heading { display:block; margin-bottom:28px; }
#hadi-process .hp-selection { border-inline-end:0; border-inline-start:2px solid var(--ff-accent); border-bottom:0; }

#hadi-story .ff-pullquote {
  display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:18px;
  margin:44px 0 60px; padding:12px 28px 12px 0;
  border:0; border-inline-start:3px solid var(--ff-accent);
  color:var(--ff-ink); text-align:right; background:transparent;
}
#hadi-story .ff-pullquote .ff-quote-mark {
  grid-column:1; grid-row:1 / 3; align-self:start;
  font-family:Georgia,'Times New Roman',serif; font-size:88px; font-weight:400;
  line-height:1; height:68px; color:var(--ff-accent); user-select:none;
}
#hadi-story .ff-pullquote blockquote {
  grid-column:2; margin:0; padding:0; border:0; background:none;
  font-family:inherit; font-style:normal; quotes:none;
}
#hadi-story .ff-pullquote blockquote::before,
#hadi-story .ff-pullquote blockquote::after { content:none; }
#hadi-story .ff-pullquote blockquote p {
  font-size:clamp(1.4rem,2.2vw,1.85rem); font-weight:600;
  line-height:1.65; text-wrap:balance; margin:0;
}
#hadi-story .ff-pullquote figcaption {
  grid-column:2; margin-top:16px; padding:0; font-size:.9rem;
  line-height:1.6; color:var(--ff-muted); text-align:right;
}
@media (max-width:700px) {
  #hadi-process .hp-selection { border-inline-start:2px solid var(--ff-accent); border-bottom:0; }
  #hadi-story .ff-pullquote { grid-template-columns:30px minmax(0,1fr); column-gap:10px; margin:32px 0 44px; padding:8px 16px 8px 0; }
  #hadi-story .ff-pullquote .ff-quote-mark { font-size:62px; height:48px; }
  #hadi-story .ff-pullquote blockquote p { font-size:1.4rem; line-height:1.65; }
  #hadi-story .ff-pullquote figcaption { margin-top:12px; font-size:.85rem; }
}

/* Stage explanation hierarchy: question, explanation, then one outcome sentence. */
#hadi-story #hadi-process .hp-panel h3 {
  margin: 0 0 16px;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

#hadi-story #hadi-process .hp-panel > p:not(.hp-deliverable) {
  font-size: 1rem;
  line-height: 1.85;
  text-wrap: pretty;
}

#hadi-story #hadi-process .hp-panel .hp-deliverable {
  display: block;
  margin: 24px 0 0;
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

#hadi-story #hadi-process .hp-deliverable span {
  display: inline;
  color: var(--ff-muted);
  font-size: inherit;
  font-weight: 400;
}

#hadi-story #hadi-process .hp-deliverable span::after {
  content: ": ";
}

#hadi-story #hadi-process .hp-deliverable strong {
  display: inline;
  color: var(--ff-ink);
  font-size: inherit;
  font-weight: 600;
}

@media (max-width: 700px) {
  #hadi-story #hadi-process .hp-panel h3 {
    font-size: 1.375rem;
    line-height: 1.45;
  }

  #hadi-story #hadi-process .hp-panel .hp-deliverable {
    margin-top: 20px;
  }
}