/* ============================================================
   DESIGN SCALE — the binding standard for this site.
   Every new rule must use these tokens. No new literals.

   TYPE — 5 text sizes + 3 display sizes
     --fs-xs 12  micro labels, badges, meta, numbering
     --fs-sm 14  captions, secondary text, small UI
     --fs-md 17  body copy (default)
     --fs-lg 20  lead paragraphs, card titles
     --fs-xl 24  large statements, h3
     --fs-display-3  section titles (h2)
     --fs-display-2  page titles (h1)
     --fs-display-1  hero titles

   SPACING — 4px interval system. Use --sp-* for
   padding / margin / gap. Nothing between the steps.

   BREAKPOINTS — three only:
     980px  desktop -> tablet (grids collapse)
     760px  tablet  -> phone  (nav, single column)
     480px  small phone (rare, type only)
   ============================================================ */
:root{
  /* ---- type scale ---- */
  --fs-xs:12px; --fs-sm:14px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px;
  --fs-display-3:clamp(28px,3.4vw,42px);
  --fs-display-2:clamp(38px,5.2vw,64px);
  --fs-display-1:clamp(46px,6.4vw,86px);

  /* ---- spacing scale ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px; --sp-20:80px;

  /* ---- section rhythm (mobile values overridden at 760px) ---- */
  --sec-open-top:56px; --sec-open-bottom:40px;
  --sec-top:48px; --sec-bottom:48px; --sec-close-bottom:72px;
  --pad-panel:32px; --pad-card:24px; --pad-compact:20px;
  --grid-gap:20px;

  /* ---- colours ---- */
  --bg:#071a2d;
  --panel:#0d2c4a;
  --panel-rgb:13,44,74;
  --text:#f1f6fb;
  --muted:#c2d5e8;
  --muted2:#8da6bf;
  --line:rgba(220,236,249,.42);
  --soft:rgba(220,236,249,.22);
  --orange:#d98a36;
  --orange-soft:#f0a85c;

  /* ---- layout ---- */
  --max:1180px;
  --circle:30px;
  --img-pad:12px; --img-pad-sm:10px; --img-h:430px;
}


*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100dvh;display:flex;flex-direction:column;margin:0;direction:rtl;font-family:Heebo,Assistant,system-ui,sans-serif;color:var(--text);background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(180deg,var(--bg),#061424);background-size:24px 24px,24px 24px,auto;line-height:1.65}body:before,body:after{content:"";position:fixed;top:96px;bottom:80px;width:46px;pointer-events:none;opacity:.28;z-index:-1;color:rgba(220,236,249,.5);background:repeating-linear-gradient(to bottom,transparent 0 17px,rgba(220,236,249,.48) 18px,transparent 19px);border-inline:1px solid rgba(220,236,249,.22)}body:before{right:10px}body:after{left:10px}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.header{position:sticky;top:0;z-index:50;background:rgba(7,26,45,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--soft)}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;gap:12px;align-items:center;min-width:0}.brand>span:last-child{min-width:0}.brand-logo{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto}.brand-logo-image img{width:50px;height:50px;object-fit:contain;mix-blend-mode:normal}.brand-title{display:block;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.brand-sub{display:block;font-size:var(--fs-xs);color:var(--muted2);direction:ltr}.links{display:flex;gap:18px;color:var(--muted);font-size:var(--fs-sm)}.links a{padding:24px 0 20px;border-bottom:2px solid transparent}.links a.active,.links a:hover{color:#fff;border-color:var(--orange)}
.btn{min-height:44px;padding:11px 18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--soft);background:transparent;color:var(--text);font-weight:800}.btn.primary{background:transparent;border-color:rgba(217,138,54,.7);color:var(--orange-soft)}.btn.primary:hover,.btn:hover{border-color:var(--orange-soft);color:#fff}.nav-cta{padding:10px 14px}.menu-btn{display:none;border:1px solid var(--soft);background:transparent;color:var(--text);width:42px;height:42px}
.lang-switch{display:inline-flex;align-items:center;gap:5px;min-height:0;padding:5px 9px;border:1px solid rgba(182,207,228,.3);color:var(--text);font-weight:700;font-size:var(--fs-xs);letter-spacing:.5px;text-decoration:none;white-space:nowrap;line-height:1;direction:ltr}
.lang-switch svg{width:13px;height:13px;flex:0 0 auto;opacity:.85}
.lang-switch:hover{border-color:rgba(217,138,54,.6);color:var(--orange-soft)}
.blueprint{border:1px solid var(--soft);position:relative}.blueprint:before,.blueprint:after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;border-color:var(--line)}.blueprint:before{top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}.blueprint:after{bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}.soft-card{background:#0B253F}
.kicker{color:var(--orange-soft);font-weight:800;letter-spacing:.5px;font-size:var(--fs-sm);margin-bottom:10px;direction:ltr}h1,h2,h3{line-height:1.15;margin:0 0 12px}h1{font-size:var(--fs-display-2)}h2{font-size:var(--fs-display-3)}h3{font-size:var(--fs-lg)}p{color:var(--muted);font-size:var(--fs-md);margin:0 0 14px}.lead{font-size:var(--fs-md);color:#dcecff}.section-intro{max-width:800px;margin:0 0 22px;color:#dce9f6}.hero{padding:64px 0 44px}.hero-card{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:34px}.hero-minor-title{font-size:var(--fs-display-2);font-weight:900}.hero-personal-note{font-size:var(--fs-lg);color:#dcecff}.section{padding:68px 0}.compact{padding:52px 0}.section-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:24px;padding-top:14px;border-top:1px solid var(--soft)}.mini-code{direction:ltr;color:var(--muted2);font-size:var(--fs-xs);border:1px dashed var(--soft);padding:8px 10px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.card{padding:20px;min-height:200px}.card-number{color:var(--orange-soft);direction:ltr;font-size:var(--fs-sm);font-weight:800;letter-spacing:1.2px;margin-bottom:10px}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards-7{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.system-card{min-height:230px}.image-card{background:transparent;padding:0;border:0}.image-card img,.image-merged img{width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}
.about-card-layout{grid-template-columns:1.2fr .8fr;align-items:stretch;min-height:auto}.about-side-column{display:grid;grid-template-rows:1fr auto;gap:18px}.portrait-panel{background:transparent;padding:0;display:flex;align-items:center;justify-content:center;min-height:470px}.portrait-panel img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}.compact-stats{display:grid;background:rgba(7,26,45,.24);grid-template-columns:1fr}.stat{padding:18px 12px;text-align:center;border-bottom:1px solid var(--soft)}.stat:last-child{border-bottom:0}.stat strong{display:block;font-size:var(--fs-xl);direction:ltr;color:#fff}.stat span{display:block;color:var(--muted);font-size:var(--fs-sm)}
.process-questions{margin-top:20px;padding-top:18px;border-top:1px solid var(--soft)}.process-questions h3{margin-bottom:16px}.question-grid{display:grid;gap:10px}.question-card{border:1px solid rgba(182,207,228,.16);background:rgba(7,26,45,.18);padding:14px}.question-title{font-weight:900;color:#fff;margin-bottom:8px}.question-title span{color:var(--orange-soft);direction:ltr;margin-left:8px}.question-more{max-height:0;opacity:0;overflow:hidden;transition:.25s ease;color:var(--muted);font-size:var(--fs-sm)}.question-card:hover .question-more{max-height:180px;opacity:1;margin-top:10px}
.timeline{padding:28px;overflow:hidden}.timeline-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:22px}.timeline-track:before{content:"";position:absolute;top:34px;right:7%;left:7%;height:1px;background:var(--soft)}.timeline-item{position:relative;padding:48px 14px 8px;min-height:245px;text-align:center}.timeline-pin{position:absolute;top:27px;right:50%;transform:translateX(50%);width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--orange)}.timeline-years{font-weight:800;color:#fff;font-size:var(--fs-md);margin-bottom:12px}.timeline-item h3{font-size:var(--fs-lg);margin-bottom:10px}.timeline-more{max-height:0;overflow:hidden;opacity:0;transition:.25s ease}.timeline-item:hover .timeline-more{max-height:140px;opacity:1}.timeline-cta{display:flex;justify-content:flex-start;margin-top:22px}.no-icons .timeline-icon{display:none}
.method-card{padding:28px}.split-method{display:grid;grid-template-columns:1fr .9fr;gap:24px;align-items:center}.work-mode-card img{border:0;background:transparent;padding:0;margin-bottom:16px;min-height:170px;object-fit:contain}.inline-link{color:var(--orange-soft);font-weight:800;display:inline-block;margin-top:8px}.testimonial-carousel{padding:28px;min-height:290px;display:grid;align-content:space-between}.testimonial-ref{text-align:center;color:var(--orange-soft);font-size:var(--fs-sm);font-weight:800;letter-spacing:1px;margin-bottom:12px}.testimonial-carousel .quote{text-align:center;font-size:var(--fs-lg);line-height:1.7;color:#eff8ff;margin:0 0 22px}.testimonial-person{text-align:center;display:grid;gap:4px;padding-top:16px;border-top:1px solid var(--soft)}.testimonial-person strong{font-size:var(--fs-lg)}.testimonial-person span{color:var(--muted)}.slider-controls{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-top:18px}.slider-controls button{width:42px;height:42px;background:transparent;border:1px solid var(--soft);color:#fff;font-size:var(--fs-lg)}.dots{justify-self:center;display:flex;gap:8px}.dot{width:10px!important;height:10px!important;border-radius:50%;padding:0!important;background:rgba(255,255,255,.22)!important}.dot.active{background:var(--orange-soft)!important}
.single-contact-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;padding:26px}.contact-card-image{display:flex;align-items:center;justify-content:center;background:transparent;padding:0}.contact-card-image img{width:min(100%,420px)}.contact-card-form{display:block}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}label{font-size:var(--fs-sm);color:#dcecff}input,select,textarea{width:100%;padding:12px 14px;background:rgba(4,17,29,.74);border:1px solid var(--soft);color:#fff;font:inherit}textarea{min-height:120px;resize:vertical}.form-note{color:var(--muted2);font-size:var(--fs-sm);margin-top:8px}.footer{padding:26px 0;border-top:1px solid var(--soft);background:rgba(7,26,45,.9)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:var(--fs-sm)}.footer-brand{display:flex;gap:10px;align-items:center}
.cm-hero-card{display:grid;grid-template-columns:1.02fr .98fr;gap:26px;align-items:center;padding:30px}.cm-title{font-size:var(--fs-display-1);font-weight:900}.cm-question{font-size:var(--fs-display-3);font-weight:800;color:#dcecff;max-width:420px}.cm-hero-row{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}.rotating-box{max-width:340px;background:rgba(7,26,45,.42);border:1px solid var(--soft);padding:16px 18px}.rotating-label{display:block;color:var(--muted);font-size:var(--fs-sm);margin-bottom:10px}.rotating-word{display:block;font-size:var(--fs-display-3);font-weight:900;color:var(--orange-soft);min-height:42px}.cm-hero-image{background:transparent}.merged-explainer{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:28px}.systems-cards .card{min-height:220px}.use-case-list{display:grid;gap:12px}.use-case-row{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;padding:16px 18px;border:1px solid var(--soft);background:#0B253F}.diagnosis-panel{padding:28px}
.services-hero-layout{min-height:auto}.hero-note{font-size:var(--fs-md);color:var(--muted)}.service-single{display:grid;grid-template-columns:.35fr .65fr;gap:24px;padding:26px;margin-bottom:24px}.service-summary{border-left:1px solid var(--soft);padding-left:22px}.service-content{display:grid;gap:18px}.service-label{direction:ltr;color:var(--orange-soft);font-size:var(--fs-sm);font-weight:800;margin-bottom:12px}.service-illustration{margin:18px 0}.service-examples{display:grid;grid-template-columns:1fr 1fr;gap:16px}.service-example-card{padding:18px}.outputs{margin-top:12px;color:#dcecff;font-size:var(--fs-sm)}.link-row{display:flex;justify-content:flex-start;margin-top:14px}.rtl-list{display:grid;gap:12px}.service-list-item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--soft);background:#0B253F}.service-list-item .btn{justify-self:end}
.blog-layout,.article-layout{display:grid;grid-template-columns:280px 1fr;gap:22px}.article-main,.blog-side,.article-side,.blog-card{padding:22px;background:#0B253F;border:1px solid var(--soft)}.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.blog-type{display:inline-block;margin-bottom:8px;color:var(--orange-soft);font-size:var(--fs-xs);font-weight:800}.article-hero-illustration{padding:16px;margin-bottom:18px;background:rgba(7,26,45,.22);border:1px solid var(--soft)}.article-hero-illustration img{width:100%;height:auto}.blog-side a:not(.btn),.article-side a:not(.btn){display:block;padding:10px 0;color:#dce9f6}.blog-side a:not(.btn):last-child,.article-side a:not(.btn):last-child{border-bottom:0}.blog-section-spacer{margin-top:36px}
@media (max-width:980px){.hero-card,.about-card-layout,.split-method,.cards-3,.cards-7,.single-contact-card,.service-single,.service-examples,.article-layout,.blog-layout,.blog-grid,.merged-explainer,.cm-hero-card{grid-template-columns:1fr}.section-head{grid-template-columns:1fr}.timeline-track{grid-template-columns:1fr;padding-top:10px}.timeline-track:before{right:20px;left:auto;top:0;bottom:0;width:1px;height:auto}.timeline-item{text-align:right;padding-right:28px}.timeline-pin{right:14px;transform:none}.timeline-more{max-height:none;opacity:1}.service-summary{border-left:0;border-bottom:1px solid var(--soft);padding-left:0;padding-bottom:18px}.use-case-row{grid-template-columns:1fr}.cm-hero-row{flex-direction:column}}
@media (max-width:760px){.nav{flex-wrap:wrap;padding:14px 0}.links{display:none;width:100%;flex-direction:column;gap:0}.links.open{display:flex}.links a{padding:12px 0;border:0}.menu-btn{display:inline-flex;align-items:center;justify-content:center}.nav-cta{display:none}.hero{padding-top:36px}.hero-card,.cm-hero-card,.single-contact-card{padding:24px}.form{grid-template-columns:1fr}.footer-inner{flex-direction:column}.container{width:min(var(--max),calc(100% - 28px))}.service-list-item{grid-template-columns:1fr}.brand-title{max-width:220px}body:before,body:after{display:none}.question-more{display:none!important}.question-card:hover .question-more{display:none!important}}



/* V16 image integration refinements */

.brand-logo{width:56px;height:56px}
.brand-logo-image img{width:54px;height:54px;object-fit:contain;mix-blend-mode:normal;filter:none}
.image-card,
.portrait-panel,
.contact-card-image,
.service-illustration{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
.image-card img,
.image-merged img,
.work-mode-card img,
.service-illustration img,
.contact-card-image img{
  background:transparent;
  mix-blend-mode:normal;
  filter:none;
}
.soft-card .image-card,
.soft-card .portrait-panel,
.soft-card .contact-card-image{
  background:transparent !important;
}
.work-mode-card img{
  min-height:170px;
  object-fit:contain;
}
.service-illustration img{
  width:100%;
  object-fit:contain;
}
.contact-card-image img{
  max-width:420px;
}
.portrait-panel img{
  object-fit:contain;
}

/* Match Community Mechanics hero to reference-style word placement */
.cm-style-reference .container{width:min(1240px,calc(100% - 48px))}
.cm-hero-full{
  min-height:680px;
  position:relative;
  overflow:hidden;
  background:rgba(var(--panel-rgb),.72);
}
.cm-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
  mix-blend-mode:screen;
  filter:saturate(.85) brightness(.78);
}
.cm-hero-full:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,26,45,.12),rgba(7,26,45,.2) 44%,rgba(7,26,45,.58));
  pointer-events:none;
}
.cm-title-panel{
  position:absolute;
  top:46px;
  right:52px;
  z-index:2;
  min-width:min(560px,calc(100% - 104px));
  padding:16px 28px 14px;
  background:rgba(210,226,240,.70);
  border:1px solid rgba(255,255,255,.38);
  color:#071a2d;
  text-align:center;
}
.cm-title-panel h1{
  margin:0;
  font-size:var(--fs-display-1);
  color:#071a2d;
  letter-spacing:-1px;
}
.cm-question-bar{
  position:absolute;
  z-index:2;
  left:52px;
  right:52px;
  bottom:96px;
  display:grid;
  grid-template-columns:1fr 310px;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:rgba(210,226,240,.62);
  border:1px solid rgba(255,255,255,.34);
}
.cm-question-text{
  color:#071a2d;
  font-size:var(--fs-display-3);
  font-weight:900;
  text-align:right;
}
.cm-question-bar .rotating-box{
  max-width:none;
  background:rgba(7,26,45,.82);
  border:1px solid rgba(255,255,255,.24);
  padding:14px 16px;
}
.cm-question-bar .rotating-label{
  color:#c2d5e8;
  font-size:var(--fs-sm);
}
.cm-question-bar .rotating-word{
  color:#f0a85c;
  font-size:clamp(25px,3vw,36px);
  line-height:1.15;
  min-height:42px;
}
.cm-hero-cta{
  position:absolute;
  z-index:2;
  right:52px;
  bottom:28px;
}
.merged-explainer:not(.approach-general) .image-card img{
  max-height:var(--img-h);
  object-fit:contain;
}
.services-hero-layout .image-card img{
  object-fit:contain;
}

/* Less visual noise in buttons */
.btn.primary{
  background:transparent !important;
  border-color:rgba(217,138,54,.78) !important;
  color:var(--orange-soft) !important;
}
.btn.primary:hover{
  color:#fff !important;
  border-color:var(--orange-soft) !important;
}

@media (max-width:980px){
  .cm-hero-full{min-height:620px}
  .cm-question-bar{grid-template-columns:1fr;left:24px;right:24px;bottom:84px}
  .cm-title-panel{right:24px;left:24px;min-width:0}
  .cm-hero-cta{right:24px}
}
@media (max-width:760px){
  .cm-hero-full{min-height:560px}
  .cm-title-panel{top:24px;padding:12px 16px}
  .cm-question-bar{bottom:74px;padding:14px}
  .cm-question-text{font-size:var(--fs-xl)}
}

/* V17 about-page portrait replacement */
.portrait-panel{background:var(--bg)!important;}
.portrait-panel img{width:100%;height:auto;display:block;object-fit:contain;background:var(--bg)!important;}


/* V18 fixed blueprint rulers */
body:before,
body:after{
  display:none;
}
.page-rulers{
  position:fixed;
  top:96px;
  right:0;
  bottom:80px;
  left:0;
  pointer-events:none;
  z-index:1;
}
.page-ruler{
  position:absolute;
  top:0;
  bottom:0;
  width:58px;
  color:rgba(220,236,249,.66);
  opacity:.7;
}
.page-ruler::before,
.page-ruler::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  pointer-events:none;
}
.page-ruler::before{
  width:18px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(220,236,249,.72) 0 2px,
      transparent 2px 13px
    );
}
.page-ruler::after{
  width:30px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(220,236,249,.88) 0 2px,
      transparent 2px 65px
    );
}
.page-ruler.left::before,
.page-ruler.left::after{
  left:0;
}
.page-ruler.right::before,
.page-ruler.right::after{
  right:0;
}
.ruler-mark{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:18px;
  transform:translateY(50%);
}
.ruler-mark::before{
  content:"";
  display:block;
  width:20px;
  height:1px;
  background:rgba(220,236,249,.86);
}
.ruler-value{
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  color:rgba(220,236,249,.86);
  text-shadow:0 0 8px rgba(7,26,45,.35);
}
.page-ruler.left .ruler-mark{
  left:0;
  flex-direction:row;
}
.page-ruler.right .ruler-mark{
  right:0;
  flex-direction:row-reverse;
}
.page-ruler.right .ruler-value,
.page-ruler.left .ruler-value{
  min-width:18px;
}
@media (max-width:980px){
  .page-rulers{display:none;}
}

.work-mode-card .compact-diagram-frame img{
  min-height:170px;
  object-fit:contain;
}
.portrait-panel.diagram-frame{
  min-height:470px;
}
.contact-card-image.diagram-frame img{
  width:min(100%,420px);
  margin-inline:auto;
}

/* V21 frame and ruler refinements */
.blueprint{
  border:1px solid rgba(220,236,249,.22);
}
.blueprint:before,
.blueprint:after{
  display:none;
}

.soft-card,
.contact-card,
.method-card,
.service-single,
.blog-card,
.article-main,
.blog-side,
.article-side{
  background:#0B253F;
}

.diagram-frame{
  position:relative;
  padding:var(--img-pad);
  border:1px solid rgba(220,236,249,.22) !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
}

.diagram-frame img{
  position:relative;
  z-index:1;
}
.image-card.diagram-frame,
.service-illustration.diagram-frame,
.portrait-panel.diagram-frame,
.contact-card-image.diagram-frame,
.article-hero-illustration.diagram-frame{
  background:transparent !important;
}
.portrait-panel{
  background:transparent !important;
}
.portrait-panel img{
  background:transparent;
  mix-blend-mode:normal;
  opacity:1;
}
.image-card img,
.image-merged img,
.work-mode-card img,
.service-illustration img,
.contact-card-image img,
.article-hero-illustration img{
  background:transparent !important;
}
.compact-diagram-frame{
  padding:var(--img-pad-sm);
  margin-bottom:16px;
}

.page-rulers{
  top:74px;
  bottom:24px;
  z-index:2;
}
.page-ruler{
  width:52px;
  opacity:.9;
}
.page-ruler::after{
  display:none;
}
.page-ruler::before{
  width:18px;
  opacity:.8;
  background:
    repeating-linear-gradient(
      to top,
      rgba(220,236,249,.62) 0 1px,
      transparent 1px 11px
    );
}
.page-ruler.left{
  left:10px;
  border-left:1px solid rgba(220,236,249,.22);
}
.page-ruler.right{
  right:10px;
  border-right:1px solid rgba(220,236,249,.22);
}
.ruler-labels{
  position:absolute;
  inset:0;
}
.ruler-mark{
  min-height:16px;
  gap:6px;
  transform:translateY(50%);
}
.ruler-mark::before{
  width:14px;
  height:1px;
  background:rgba(220,236,249,.84);
}
.ruler-value{
  font-size:var(--fs-xs);
  font-weight:700;
  color:rgba(236,245,252,.92);
  background:rgba(7,26,45,.88);
  padding:1px 4px;
  border-radius:2px;
  text-shadow:none;
}
.page-ruler.left .ruler-mark{
  left:0;
}
.page-ruler.right .ruler-mark{
  right:0;
}
@media (max-width:760px){
  .diagram-frame{
    padding:var(--img-pad-sm);
  }
}


/* V22 portrait integration and ruler cleanup */
.portrait-panel.diagram-frame{
  background:transparent !important;
}
.portrait-panel.diagram-frame img.about-portrait-clean{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.page-rulers{
  top:74px;
  bottom:88px;
}
.page-ruler{
  width:48px;
}
.ruler-labels{
  inset:8px 0;
}
.ruler-value{
  background:rgba(7,26,45,.94);
}


/* V23 content and responsive refinements */
.hero-summary{
  padding:14px 16px;
  border-right:2px solid rgba(217,138,54,.72);
  background:rgba(7,26,45,.22);
  color:#dcecff;
}
.question-card{
  cursor:pointer;
}
.question-card:focus-visible{
  outline:2px solid var(--orange-soft);
  outline-offset:2px;
}
.question-card.is-open .question-more,
.question-card:hover .question-more{
  max-height:520px;
  opacity:1;
  margin-top:10px;
}
.cards-4{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.components-cards .card{
  min-height:230px;
}
.use-case-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.use-case-number{
  color:var(--orange-soft);
  direction:ltr;
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:1px;
  padding-top:3px;
}
.use-case-title h3{
  margin-bottom:0;
}
.services-hero-layout h1{
  font-size:var(--fs-display-2);
}
.service-summary > p:not(.lead){
  margin-top:8px;
}
.consulting-more{
  margin-top:2px;
}
.service-example-card,
.service-list-item{
  height:100%;
}
@media (max-width:760px){
  .cards-4{
    grid-template-columns:1fr;
  }
  .question-more{
    display:block!important;
    max-height:0;
    opacity:0;
    margin-top:0;
  }
  .question-card:hover .question-more{
    max-height:0;
    opacity:0;
    margin-top:0;
  }
  .question-card.is-open .question-more{
    max-height:640px;
    opacity:1;
    margin-top:10px;
  }
  .services-hero-layout h1{
    font-size:clamp(34px,11vw,48px);
  }
}


/* V24 refinement pass */
html{scroll-behavior:smooth;}
.section-head,
.section-head > div,
.process-questions h3,
.card,
.service-example-card,
.service-list-item,
.blog-card,
.article-main,
.article-side,
.use-case-row,
.timeline-item,
.diagnosis-panel,
.contact-card-form,
.service-content,
.service-summary,
.blog-filters,
.blog-results-head,
.article-section{
  text-align:right;
}
.section-head{
  align-items:start;
}
.section-head h2,
.section-head .section-intro,
.section-head .kicker{
  text-align:right;
}
.mini-code{
  justify-self:start;
}
.card,
.service-example-card,
.blog-card,
.article-side,
.article-main,
.service-list-item{
  display:flex;
  flex-direction:column;
}
.card-number,
.service-label,
.article-chip,
.blog-type,
.topic-tag,
.card-top-meta,
.timeline-years{
  color:var(--orange-soft);
  font-weight:800;
}
.card-number,
.card-top-meta{
  align-self:flex-start;
  margin-bottom:10px;
  text-align:right;
  direction:ltr;
}
.card h3,
.service-example-card h3,
.service-list-item h3,
.blog-card h3,
.question-title,
.use-case-title h3{
  width:100%;
  text-align:right;
}
.inline-link,
.link-row,
.consulting-more,
.service-list-item .btn,
.service-example-card .btn,
.blog-card .inline-link{
  align-self:flex-start;
  text-align:right;
}
.link-row,
.consulting-more{
  width:100%;
  margin-top:auto;
}
.link-row .btn,
.consulting-more .btn,
.service-list-item .btn{
  margin-inline-start:0;
}
.about-card-layout{
  grid-template-columns:1.18fr .82fr;
  align-items:start;
}
.about-side-column{
  gap:16px;
}
.portrait-panel.no-frame,
.image-card.no-frame,
.contact-card-image.no-frame{
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.portrait-panel.no-frame::before,
.portrait-panel.no-frame::after,
.image-card.no-frame::before,
.image-card.no-frame::after,
.contact-card-image.no-frame::before,
.contact-card-image.no-frame::after{
  display:none !important;
}
.portrait-panel.no-frame{
  min-height:auto;
  align-items:flex-end;
}
.portrait-panel.no-frame img{
  width:100%;
  height:auto;
}
.compact-stats{
  border:1px solid rgba(220,236,249,.16);
}
.question-card{
  border-color:rgba(182,207,228,.16);
}
.question-title{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.question-title span{
  flex:0 0 auto;
  margin-left:0;
}
.cm-question-bar{
  grid-template-columns:1.2fr .8fr;
  align-items:center;
}
.cm-question-text{
  font-size:clamp(18px,2.2vw,30px);
  white-space:nowrap;
}
.cm-question-bar .rotating-box{
  display:grid;
  place-items:center;
  min-height:78px;
}
.cm-question-bar .rotating-word{
  text-align:center;
  width:100%;
}
.cm-hero-cta{display:none !important;}
.approach-general .image-card.no-frame img{
  width:100%;
}
.service-single.consulting-layout{
  grid-template-columns:.42fr .58fr;
  align-items:start;
}
.service-single.consulting-layout .service-content{
  align-content:start;
}
.service-single.consulting-layout .service-examples{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.blog-hero-layout{
  grid-template-columns:1.05fr .95fr;
}
.blog-controls-panel{
  display:grid;
  gap:18px;
  padding:24px;
}
.blog-filters{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:end;
  margin-bottom:24px;
}
.filter-type-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.filter-btn{
  background:rgba(7,26,45,.2);
  color:#dcecff;
  border:1px solid rgba(182,207,228,.16);
  padding:10px 14px;
  font:inherit;
  cursor:pointer;
}
.filter-btn.active,
.filter-btn:hover,
.filter-btn:focus-visible{
  border-color:rgba(217,138,54,.72);
  color:#fff;
  outline:none;
}
.topic-filter-wrap{
  display:grid;
  gap:8px;
  min-width:240px;
}
.topic-select{
  width:100%;
  padding:12px 14px;
  background:rgba(4,17,29,.74);
  border:1px solid var(--soft);
  color:#fff;
  font:inherit;
}
.blog-results-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:16px;
}
.blog-grid.filter-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.blog-card{
  position:relative;
  gap:10px;
  min-height:248px;
  background:linear-gradient(180deg, rgba(13,44,74,.68), rgba(7,26,45,.5));
}
.blog-card::before{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:26px;
  height:26px;
  border-top:1px solid rgba(220,236,249,.34);
  border-right:1px solid rgba(220,236,249,.34);
  pointer-events:none;
}
.blog-card .card-top-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  width:100%;
  align-items:center;
}
.blog-type{
  margin:0;
}
.topic-tag{
  font-size:var(--fs-xs);
  padding:4px 8px;
  border:1px solid rgba(217,138,54,.32);
  background:rgba(217,138,54,.08);
  color:var(--orange-soft);
}
.blog-card p{
  margin-bottom:0;
}
.blog-card .inline-link{
  margin-top:auto;
}
.blog-empty-state{
  display:none;
  padding:18px;
  border:1px dashed rgba(182,207,228,.16);
  color:var(--muted);
}
.blog-empty-state.show{display:block;}
.article-header{padding:44px 0 12px;}
.article-hero-card{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:24px;
  align-items:center;
  padding:28px;
}
.article-hero-copy{display:grid;gap:12px;}
.article-chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.article-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(182,207,228,.16);
  background:rgba(7,26,45,.2);
  font-size:var(--fs-xs);
}
.article-chip.topic{border-color:rgba(217,138,54,.34);background:rgba(217,138,54,.07);}
.article-hero-visual{display:flex;align-items:center;justify-content:center;min-height:240px;}
.article-hero-visual img{width:100%;max-width:420px;height:auto;mix-blend-mode:normal;}
.article-layout-enhanced{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start;}
.article-side{
  position:sticky;
  top:98px;
  gap:18px;
}
.article-side h3{margin-bottom:0;}
.toc-links{display:grid;gap:0;}
.toc-links a{display:block;padding:10px 0;border-bottom:1px solid rgba(182,207,228,.16);color:#dce9f6;}
.toc-links a:last-child{border-bottom:0;}
.article-side .cta-box{
  padding-top:16px;
  border-top:1px solid rgba(182,207,228,.16);
  display:grid;
  gap:10px;
}
.article-main.enhanced-content{
  display:grid;
  gap:18px;
}
.article-section{
  padding:20px;
  border:1px solid rgba(182,207,228,.16);
  background:rgba(7,26,45,.24);
}
.article-section h2,
.article-section h3{
  margin-bottom:12px;
}
.article-section ul,
.article-section ol{
  margin:0;
  padding-right:20px;
  color:#dce9f6;
}
.article-section li{margin:0 0 10px;}
.article-section p:last-child,
.article-section li:last-child{margin-bottom:0;}
.article-section.highlight{
  border-right:2px solid rgba(217,138,54,.72);
}
.article-section.meta-block{
  display:grid;
  gap:14px;
}
.article-section.meta-block .meta-label{
  color:var(--orange-soft);
  font-size:var(--fs-xs);
  font-weight:800;
  margin-bottom:4px;
}
.article-section.steps ol{counter-reset:item;list-style:none;padding-right:0;display:grid;gap:12px;}
.article-section.steps li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;}
.article-section.steps li::before{counter-increment:item;content:counter(item, decimal-leading-zero);color:var(--orange-soft);font-weight:800;direction:ltr;}
.page-type-process .article-section.steps li::before,
.page-type-workshop .article-section.steps li::before,
.page-type-lecture .article-section.steps li::before{padding-top:2px;}
.article-back-link{color:#dcecff;font-weight:700;}
.article-main.enhanced-content .article-end-cta{
  display:flex;
  justify-content:flex-start;
  margin-top:4px;
}
.footer-spacer{height:0;}
@media (max-width:980px){
  .article-hero-card,
  .blog-hero-layout,
  .blog-filters,
  .article-layout-enhanced,
  .service-single.consulting-layout{grid-template-columns:1fr;}
  .article-side{position:static;}
  .service-single.consulting-layout .service-examples,
  .blog-grid.filter-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .cm-question-text{white-space:normal;}
  .blog-controls-panel,
  .article-hero-card{padding:22px;}
  .filter-type-buttons{gap:8px;}
  .filter-btn{padding:9px 12px;font-size:var(--fs-sm);}
  .topic-filter-wrap{min-width:0;}
}


/* V25 refinement pass */
.section-head{
  border-top:2px solid rgba(220,236,249,.34);
  padding-top:16px;
  align-items:center;
}
.section-head .kicker{
  display:none !important;
}
.section-head > div{
  display:block;
}
.mini-code{
  color:var(--orange-soft) !important;
  border:1px dashed rgba(217,138,54,.58) !important;
  background:rgba(217,138,54,.06);
  padding:8px 12px;
  font-weight:800;
  letter-spacing:.04em;
}

/* Card numbering: cards on top-left, title stays on same header row */
.card,
.service-example-card{
  position:relative;
}
.card:has(.card-number),
.service-example-card:has(.card-number){
  padding-top:18px;
}
.card .card-number,
.service-example-card .card-number{
  position:absolute;
  top:18px;
  left:20px;
  margin:0;
  align-self:auto;
  text-align:left;
}
.card h3,
.service-example-card h3{
  padding-left:34px;
  margin-top:0;
}
/* questions and stages stay right */
.question-title span,
.use-case-number{
  color:var(--orange-soft);
}

/* links / expansion buttons aligned right */
.inline-link,
.blog-card .inline-link,
.link-row,
.consulting-more,
.service-example-card .btn,
.service-list-item .btn,
.article-end-cta,
.article-end-cta .btn{
  text-align:right;
}
.link-row,
.consulting-more,
.article-end-cta{
  width:100%;
  display:flex;
  justify-content:flex-end !important;
}
.service-example-card .btn,
.service-list-item .btn,
.blog-card .inline-link{
  align-self:flex-end !important;
}
.service-list-item{
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
.service-list-item .btn{
  margin-inline-start:auto;
}

/* Blog chips and CTA */
.blog-card .card-top-meta{
  justify-content:flex-start !important;
  flex-wrap:wrap;
  gap:8px;
}
.blog-type,
.topic-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:0;
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1.2;
  border-style:dashed;
}
.blog-type{
  color:#dcecff !important;
  border:1px dashed rgba(220,236,249,.46) !important;
  background:rgba(7,26,45,.18);
}
.topic-tag{
  color:var(--orange-soft) !important;
  border:1px dashed rgba(217,138,54,.46) !important;
  background:rgba(217,138,54,.08) !important;
}
.blog-card .inline-link{
  border:1px dashed rgba(217,138,54,.52);
  padding:8px 12px;
  background:rgba(217,138,54,.06);
}

/* Article meta duplicate labels */
.article-section.meta-block .meta-label{
  display:none;
}

/* Timeline alignment */
.timeline-pin{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}
.timeline-item{
  text-align:center;
}
@media (max-width:980px){
  .timeline-item{
    text-align:right;
  }
  .timeline-pin{
    left:auto !important;
    right:14px !important;
    transform:none !important;
  }
}

/* Ruler bottom alignment */
.ruler-labels{
  inset:0 !important;
}
.ruler-mark.is-zero{
  transform:none !important;
}

/* Keep tag on the same heading row */
.section-head{
  grid-template-columns:minmax(0,1fr) auto;
}

/* Optional brighter CTA links on cards */
.work-mode-card .inline-link,
.service-example-card .btn,
.service-list-item .btn,
.consulting-more .btn,
.article-end-cta .btn{
  margin-top:auto;
}


/* V26 — unified hierarchy, fixed page-scale rulers, compact CTAs */
body{
  position:relative;
}

/* Technical labels share one heading line with the human title */
.heading-row{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px 14px;
  width:100%;
  margin-bottom:14px;
  text-align:right;
}
.heading-row .kicker,
.heading-row .service-label{
  margin:0;
  flex:0 0 auto;
  color:var(--orange-soft);
  direction:ltr;
  text-align:right;
  white-space:nowrap;
}
.heading-row h1,
.heading-row h2{
  margin:0;
  min-width:0;
}
.hero-copy .heading-row,
.hero-card > div:first-child .heading-row,
.contact-card-form .heading-row,
.diagnosis-panel .heading-row,
.service-summary .heading-row,
.article-hero-copy .heading-row{
  justify-content:flex-start;
}
.hero-card .image-card,
.service-summary .service-illustration,
.article-hero-visual{
  margin-top:10px;
}

/* A number that is read with a card title sits on its right */
.number-title-row{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  margin-bottom:12px;
  text-align:right;
}
.number-title-row .card-number{
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  padding:0 !important;
  align-self:auto !important;
  flex:0 0 auto;
  text-align:right !important;
}
.number-title-row h3{
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
}
#audiences .card:has(.number-title-row),
#work .card:has(.number-title-row),
.systems-cards .card:has(.number-title-row){
  padding-top:20px;
}

/* Dynamic testimonial reference is a technical locator, not a centered caption */
.testimonial-carousel > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.testimonial-ref{
  width:100%;
  text-align:right !important;
  align-self:stretch;
  margin-bottom:16px;
}

/* Every outbound CTA inside a card rests at the bottom-right without overlap */
.card,
.service-example-card,
.service-list-item,
.blog-card,
.article-side,
.article-main{
  position:relative;
}
.card > .inline-link,
.blog-card > .inline-link{
  margin-top:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  align-self:auto !important;
}
.link-row,
.consulting-more,
.article-end-cta{
  direction:rtl;
  justify-content:flex-start !important;
  padding-top:12px;
  margin-top:auto !important;
}
.link-row .btn,
.consulting-more .btn,
.service-list-item .btn,
.article-end-cta .btn{
  margin-left:auto !important;
  margin-right:0 !important;
  align-self:auto !important;
}
.actions{
  direction:rtl;
  justify-content:flex-start;
}

/* Service expansion controls remain secondary and compact */
.small-btn,
.service-example-card .small-btn,
.service-list-item .small-btn,
.consulting-more .small-btn{
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:var(--fs-sm)!important;
  line-height:1.1;
  letter-spacing:0;
}
.service-example-card .link-row,
.service-list-item > .btn,
.consulting-more{
  margin-top:12px !important;
}

/* Blog metadata: two equally weighted white technical tags, top-right */
.blog-card .card-top-meta{
  direction:rtl;
  justify-content:flex-start !important;
  align-items:center;
  width:100%;
  margin-bottom:2px;
}
.blog-type,
.topic-tag{
  color:#dcecff !important;
  border:1px dashed rgba(220,236,249,.48) !important;
  background:rgba(7,26,45,.2) !important;
}
.blog-card .inline-link{
  min-height:30px;
  padding:6px 10px;
  font-size:var(--fs-sm);
  line-height:1.1;
  border:1px solid rgba(217,138,54,.48);
  background:rgba(217,138,54,.035);
}

/* Avoid duplicated meta headings in internal service pages */
.article-section.meta-block .meta-label{
  display:none !important;
}

/* The page ruler belongs to the page canvas and scrolls with it */
.page-rulers-static{
  position:absolute !important;
  top:74px !important;
  right:0 !important;
  left:0 !important;
  bottom:var(--ruler-footer-height, 0px) !important;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.page-rulers-static .page-ruler{
  position:absolute;
  top:0;
  bottom:0;
}
.page-rulers-static .ruler-labels{
  inset:0 !important;
}
.page-rulers-static .ruler-mark{
  transform:translateY(50%);
}
.page-rulers-static .ruler-mark.is-zero{
  transform:none !important;
}

@media (max-width:980px){
  .heading-row{
    gap:8px 10px;
  }
}
@media (max-width:760px){
  .heading-row{
    align-items:flex-start;
  }
}


/* V27 — technical labels left, all card actions left, fixed background scale, legal pages */
.skip-link{
  position:fixed;
  top:10px;
  right:10px;
  z-index:1000;
  transform:translateY(-160%);
  padding:10px 14px;
  background:#fff;
  color:#071a2d;
  border:2px solid var(--orange);
  font-weight:800;
}
.skip-link:focus{transform:translateY(0);}

/* Human title on the right; technical code on the left, same baseline */
.heading-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:10px 18px;
  width:100%;
  direction:rtl;
}
.heading-row h1,
.heading-row h2{
  grid-column:1;
  grid-row:1;
  justify-self:stretch;
  text-align:right;
  margin:0;
  min-width:0;
}
.heading-row .kicker,
.heading-row .service-label{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  text-align:left !important;
  direction:ltr;
  margin:0;
  white-space:nowrap;
}
.testimonial-ref{
  text-align:left !important;
  direction:ltr;
}

/* All card/page actions sit at the bottom-left */
.card > .inline-link,
.blog-card > .inline-link,
.work-mode-card > .inline-link{
  margin-top:auto !important;
  margin-right:auto !important;
  margin-left:0 !important;
  align-self:auto !important;
}
.link-row,
.consulting-more,
.article-end-cta,
.actions{
  width:100%;
  display:flex;
  justify-content:flex-end !important;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.link-row .btn,
.consulting-more .btn,
.service-list-item .btn,
.article-end-cta .btn,
.actions .btn,
.field.full > button,
.field.full > .btn{
  margin-right:auto !important;
  margin-left:0 !important;
}
.service-list-item .btn{
  align-self:auto !important;
}
.field.full > button,
.field.full > .btn{
  justify-self:start;
}

/* Blog tags are equally weighted, slightly brighter technical labels */
.blog-card .card-top-meta{
  direction:rtl;
  justify-content:flex-start !important;
  align-items:center;
  gap:8px;
}
.blog-type,
.topic-tag{
  color:#f2f8fd !important;
  border:1px dashed rgba(242,248,253,.66) !important;
  background:rgba(242,248,253,.035) !important;
}
.blog-card .inline-link{
  min-height:28px;
  padding:5px 9px;
  font-size:var(--fs-xs);
  border:1px solid rgba(217,138,54,.38);
  background:rgba(217,138,54,.025);
}

/* Fixed ruler canvas: content moves, scale never recalculates */
.page-rulers,
.page-rulers-static{display:none !important;}
.page-rulers-fixed{
  position:fixed;
  top:74px;
  right:0;
  bottom:0;
  left:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.page-rulers-fixed .page-ruler{
  position:absolute;
  top:0;
  bottom:0;
  width:48px;
  opacity:.9;
  color:rgba(220,236,249,.76);
}
.page-rulers-fixed .page-ruler::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:18px;
  background:repeating-linear-gradient(to top,rgba(220,236,249,.64) 0 1px,transparent 1px 11px);
}
.page-rulers-fixed .page-ruler.left{left:10px;border-left:1px solid rgba(220,236,249,.22);}
.page-rulers-fixed .page-ruler.right{right:10px;border-right:1px solid rgba(220,236,249,.22);}
.page-rulers-fixed .page-ruler.left::before{left:0;}
.page-rulers-fixed .page-ruler.right::before{right:0;}
.page-rulers-fixed .ruler-labels{position:absolute;inset:0;}
.page-rulers-fixed .ruler-mark{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:16px;
  transform:translateY(50%);
}
.page-rulers-fixed .ruler-mark.is-zero{transform:none;}
.page-rulers-fixed .ruler-mark::before{
  content:"";
  display:block;
  width:14px;
  height:1px;
  background:rgba(220,236,249,.88);
}
.page-rulers-fixed .ruler-value{
  font-size:var(--fs-xs);
  font-weight:700;
  color:rgba(242,248,253,.94);
  background:rgba(7,26,45,.94);
  padding:1px 4px;
  border-radius:2px;
  direction:ltr;
}
.page-rulers-fixed .page-ruler.left .ruler-mark{left:0;flex-direction:row;}
.page-rulers-fixed .page-ruler.right .ruler-mark{right:0;flex-direction:row-reverse;}
main,.footer{position:relative;z-index:1;}
.header{position:sticky;top:0;z-index:70;}

/* Footer legal links */
.footer-legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.footer-legal-links a{
  color:#dce9f6;
  border-bottom:1px dashed rgba(220,236,249,.36);
  padding-bottom:2px;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible{color:#fff;border-color:var(--orange-soft);}

/* Form privacy note */
.privacy-form-note{
  grid-column:1/-1;
  margin:2px 0 0;
  font-size:var(--fs-sm);
  color:var(--muted2);
}
.privacy-form-note a{color:#dce9f6;text-decoration:underline;text-underline-offset:3px;}

/* Legal pages */
.legal-hero{padding:52px 0 24px;}
.legal-card{padding:30px;}
.legal-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.legal-side{
  position:sticky;
  top:96px;
  padding:22px;
  display:grid;
  gap:8px;
}
.legal-side a{
  display:block;
  padding:9px 0;
  border-bottom:1px solid rgba(182,207,228,.16);
  color:#dce9f6;
}
.legal-side a:last-child{border-bottom:0;}
.legal-main{
  padding:26px;
  display:grid;
  gap:16px;
}
.legal-section{
  padding:20px;
  border:1px solid rgba(182,207,228,.16);
  background:rgba(7,26,45,.22);
}
.legal-section h2{font-size:var(--fs-xl);margin-bottom:12px;}
.legal-section ul{margin:0;padding-right:22px;color:#dce9f6;}
.legal-section li{margin-bottom:8px;}
.legal-update{font-size:var(--fs-sm);color:var(--muted2);margin-top:8px;}
.legal-note{
  border-right:2px solid rgba(217,138,54,.72);
  padding:14px 16px;
  background:rgba(217,138,54,.05);
}

@media (max-width:980px){
  .page-rulers-fixed{display:none;}
  .legal-layout{grid-template-columns:1fr;}
  .legal-side{position:static;}
}
@media (max-width:760px){
  .heading-row{grid-template-columns:1fr;align-items:start;}
  .heading-row h1,.heading-row h2{grid-column:1;grid-row:1;}
  .heading-row .kicker,.heading-row .service-label{
    grid-column:1;
    grid-row:2;
    justify-self:end;
    margin-top:2px;
  }
  .footer-legal-links{justify-content:center;}
}


/* V28 — cleaner card hierarchy and return to V26 page-scale rulers */

/* Remove the V27 frozen viewport ruler; the V26 page ruler remains active. */
.page-rulers-fixed{display:none !important;}
.page-rulers,
.page-rulers-static{display:block !important;}

/* Decorative technical headings were removed from the markup. */
.heading-row{
  display:block !important;
  width:100%;
  margin-bottom:14px;
}
.heading-row h1,
.heading-row h2{
  margin:0;
  text-align:right;
}

/* About hero: actions sit below the stats, close to the right edge. */
.hero-side-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start !important;
  width:100%;
  margin-top:2px;
  direction:rtl;
}
.hero-side-actions .btn{
  margin:0 !important;
}

/* Timeline expansion remains on the left. */
.timeline-cta.align-left{
  display:flex;
  justify-content:flex-end !important;
  width:100%;
}
.timeline-cta.align-left .btn{
  margin:0 !important;
}

/* Method section: visual rises slightly and both actions stay together beside it. */
.split-method{
  align-items:start !important;
}
.method-visual-column{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin-top:-14px;
}
.method-visual-column .method-map{
  margin:0 !important;
}
.method-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start !important;
  margin-top:0 !important;
  direction:rtl;
}
.method-actions .btn{
  margin:0 !important;
}

/* "How we will work" links are real compact buttons, anchored left. */
.work-mode-card > .framed-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end !important;
  margin-top:auto !important;
  margin-right:auto !important;
  margin-left:0 !important;
  padding:7px 11px;
  min-height:32px;
  border:1px solid rgba(217,138,54,.5);
  background:rgba(217,138,54,.035);
  color:var(--orange-soft);
  font-size:var(--fs-sm);
  line-height:1.1;
}

/* Practical process: number, stage and explanation read as one natural line. */
.inline-process-list .use-case-row{
  display:grid !important;
  grid-template-columns:auto max-content minmax(0,1fr);
  align-items:baseline;
  column-gap:9px;
  row-gap:0;
  padding:16px 18px;
}
.inline-process-list .use-case-title{
  display:contents;
}
.inline-process-list .use-case-number{
  grid-column:1;
  margin:0;
  padding:0;
}
.inline-process-list h3{
  grid-column:2;
  margin:0 !important;
  white-space:nowrap;
}
.inline-process-list p{
  grid-column:3;
  margin:0 !important;
  font-size:var(--fs-md);
  line-height:1.55;
}

/* Diagnosis actions stay together on the right, not distributed across the card. */
.diagnostic-actions{
  display:flex;
  justify-content:flex-start !important;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  width:auto !important;
  margin-top:20px;
  direction:rtl;
}
.diagnostic-actions .btn{
  margin:0 !important;
}

/* Service and blog action alignment from V27 is retained. */
.service-example-card .link-row,
.consulting-more,
.service-list-item{
  position:relative;
}

/* Blog filter heading replaces the removed orange label. */
.filter-title{
  margin:0 0 10px;
  font-size:var(--fs-md);
  color:#fff;
}

/* Without technical labels, titles use the available card width naturally. */
.components-cards .card h3{
  padding-block:0;
  padding-inline-start:0;
  margin-top:0;
}

@media (max-width:980px){
  .method-visual-column{margin-top:0;}
}
@media (max-width:760px){
  .hero-side-actions,
  .method-actions,
  .diagnostic-actions{
    gap:8px;
  }
  .inline-process-list .use-case-row{
    grid-template-columns:auto 1fr;
    align-items:start;
  }
  .inline-process-list .use-case-number{grid-column:1;grid-row:1;}
  .inline-process-list h3{grid-column:2;grid-row:1;white-space:normal;}
  .inline-process-list p{grid-column:1/-1;grid-row:2;margin-top:5px !important;}
}


/* ============================================================
   V29 — Blog upgrade (additive only): card media, dates,
   professional sub-filter, and single-article content blocks.
   Scoped to blog.html and blog-*.html; no existing class touched.
   ============================================================ */

/* Selected content-type filter reads as the active blueprint tool */
.filter-btn.active{
  background:rgba(217,138,54,.16) !important;
  border:1px solid rgba(217,138,54,.9) !important;
  color:#fff !important;
  box-shadow:inset 0 -2px 0 rgba(217,138,54,.9);
}

/* Professional sub-type row — revealed only when "מאמרים מקצועיים" active */
.filter-subtype-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(220,236,249,.22);
}
.filter-subtype-row[hidden]{display:none;}
.subtype-label{
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-soft);
}
.filter-subtype-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.subtype-btn{
  background:transparent;
  color:#cfe2f6;
  border:1px dashed rgba(220,236,249,.34);
  padding:7px 12px;
  font:inherit;
  font-size:var(--fs-sm);
  cursor:pointer;
  border-radius:2px;
}
.subtype-btn:hover,.subtype-btn:focus-visible{border-color:rgba(217,138,54,.7);color:#fff;outline:none;}
.subtype-btn.active{
  background:rgba(217,138,54,.14);
  border:1px solid rgba(217,138,54,.85);
  color:#fff;
}

/* Card media band — an illustration/photo per card (placeholder for now) */
.blog-card{overflow:hidden;}
.blog-card-media{
  margin:-2px 0 6px;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(220,236,249,.22);
  background:
    linear-gradient(rgba(217,138,54,.05),rgba(217,138,54,.05)),
    repeating-linear-gradient(to right,rgba(220,236,249,.08) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(to bottom,rgba(220,236,249,.08) 0 1px,transparent 1px 20px),
    rgba(7,26,45,.4);
  position:relative;
  overflow:hidden;
}
.blog-card-media .media-note{
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  color:rgba(220,236,249,.62);
  border:1px solid rgba(220,236,249,.22);
  padding:4px 10px;
  background:rgba(7,26,45,.5);
}
.blog-card-media::before{
  content:"";position:absolute;top:8px;right:8px;width:13px;height:13px;
  border-top:1px solid rgba(220,236,249,.4);border-right:1px solid rgba(220,236,249,.4);
}
.blog-card-media::after{
  content:"";position:absolute;bottom:8px;left:8px;width:13px;height:13px;
  border-bottom:1px solid rgba(220,236,249,.4);border-left:1px solid rgba(220,236,249,.4);
}

/* Card footer: last-updated date + read link on one baseline */
.blog-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:12px;
}
.blog-card-date{
  font-size:var(--fs-xs);
  letter-spacing:.04em;
  color:var(--muted2);
  direction:rtl;
}
.blog-card-foot .inline-link{margin:0 !important;}

/* ---- Single-article content blocks ---- */

/* Author credit — professional family only */
.author-credit{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  margin-bottom:18px;
  border:1px solid var(--soft);
  border-right:2px solid rgba(217,138,54,.72);
  background:rgba(7,26,45,.24);
}
.author-credit .author-name{font-weight:800;color:#fff;margin:0 0 4px;font-size:var(--fs-md);}
.author-credit .author-bio{margin:0;font-size:var(--fs-sm);color:#cfe2f6;line-height:1.6;}

/* Pull quote — case-study narrative */
.pull-quote{
  margin:22px 0;
  padding:18px 22px;
  border-right:3px solid rgba(217,138,54,.8);
  background:rgba(217,138,54,.06);
  font-size:var(--fs-md);
  line-height:1.72;
  font-weight:800;
  color:#fff;
}
.pull-quote cite{display:block;margin-top:8px;font-size:var(--fs-sm);font-weight:600;color:var(--orange-soft);font-style:normal;}

/* Inline figure inside article body */
.article-figure{margin:22px 0;}
.article-figure .figure-media{
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(220,236,249,.22);
  background:
    repeating-linear-gradient(to right,rgba(220,236,249,.07) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(to bottom,rgba(220,236,249,.07) 0 1px,transparent 1px 22px),
    rgba(7,26,45,.4);
}
.article-figure .figure-media img{width:100%;height:100%;object-fit:cover;}
.article-figure .figure-media .media-note{font-size:var(--fs-xs);color:rgba(220,236,249,.62);border:1px solid rgba(220,236,249,.22);padding:4px 10px;background:rgba(7,26,45,.5);}
.article-figure figcaption{margin-top:8px;font-size:var(--fs-sm);color:var(--muted2);}

/* Result / outcome block — standard across content types */
.article-result{
  margin-top:22px;
  padding:20px 22px;
  border:1px solid var(--soft);
  border-top:2px solid rgba(217,138,54,.72);
  background:rgba(7,26,45,.22);
}
.article-result .result-kicker{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft);margin:0 0 8px;
}
.article-result h2{margin:0 0 10px;font-size:var(--fs-xl);}
.article-result .result-placeholder{
  margin:0;font-size:var(--fs-sm);color:var(--muted2);
  border:1px dashed rgba(220,236,249,.22);
  padding:12px 14px;
  background:rgba(7,26,45,.3);
}

@media (max-width:760px){
  .filter-subtype-row{gap:8px;}
  .pull-quote{font-size:var(--fs-md);}
}

/* Blog cards: compact grid — roughly half the previous footprint */
.blog-grid.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.blog-card{padding:14px;min-height:0;gap:7px;}
.blog-card::before{width:18px;height:18px;top:9px;right:9px;}
.blog-card-media{margin:-1px 0 4px;}
.blog-card h3{font-size:var(--fs-md);margin-bottom:2px;}
.blog-card p{font-size:var(--fs-sm);line-height:1.5;}
.blog-card-foot{padding-top:9px;}
.blog-card-date{font-size:var(--fs-xs);}
@media (max-width:980px){
  .blog-grid.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .blog-grid.filter-grid{grid-template-columns:1fr;}
}

/* Header: group language switch + CTA together, pinned to the inline-end edge
   (visual right in LTR/English, visual left in RTL/Hebrew), matched in height. */
.nav{gap:12px;}
.nav .links{flex:1 1 auto;display:flex;justify-content:center;align-items:center;}
.lang-switch{min-height:44px;padding:0 16px;box-sizing:border-box;}
@media (max-width:760px){
  .nav .links{flex:none;justify-content:flex-start;}
}

/* ---------- Mobile polish: side rail, header bar, footer ---------- */

/* Keep the blueprint side rail on phones — single slim rail on the inline-end
   edge only, so it reads as a design signature without eating content width. */
@media (max-width:980px){
  .page-rulers-fixed{display:block;}
  .page-rulers-fixed .page-ruler.left{display:none;}
  .page-rulers-fixed .page-ruler.right{right:2px;width:10px;opacity:.5;}
  .page-rulers-fixed .page-ruler.right::before{width:10px;}
  .page-rulers-fixed .ruler-mark::before{width:7px;}
  .page-rulers-fixed .ruler-value{font-size:var(--fs-xs);padding:0 2px;}
  html[dir="ltr"] .page-rulers-fixed .page-ruler.right{right:auto;left:2px;border-right:0;border-left:1px solid rgba(220,236,249,.22);}
  html[dir="ltr"] .page-rulers-fixed .page-ruler.right::before{right:auto;left:0;}
  html[dir="ltr"] .page-rulers-fixed .page-ruler.right .ruler-mark{right:auto;left:0;flex-direction:row;}
  .container{width:min(var(--max),calc(100% - 40px));margin-inline:auto;}
}

/* Header bar on phones: brand | lang + CTA + hamburger, all on one row.
   Nav links move into a full-height slide-in panel opened by the hamburger. */
@media (max-width:760px){
  .nav{min-height:62px;padding:9px 0;gap:8px;flex-wrap:nowrap;align-items:center;}
  .brand{flex:1 1 auto;min-width:0;gap:8px;}
  .brand-logo-image img{width:32px;height:32px;}
  .brand-title{font-size:var(--fs-sm);line-height:1.2;max-width:none;}
  .brand-sub{font-size:var(--fs-xs);line-height:1.2;}
  .nav .lang-switch{flex:0 0 auto;min-height:38px;padding:0 9px;font-size:var(--fs-xs);gap:4px;}
  .nav .lang-switch svg{width:12px;height:12px;}
  .nav-cta{display:inline-flex;flex:0 0 auto;min-height:38px;padding:0 12px;font-size:var(--fs-sm);white-space:nowrap;}

  /* Hamburger: three stacked bars, drawn (no glyph) so it matches the blueprint line work. */
  .menu-btn{
    display:inline-flex;flex:0 0 auto;order:5;
    width:42px;height:38px;padding:0;
    align-items:center;justify-content:center;
    font-size:0;color:transparent;
    border:1px solid var(--soft);background:transparent;
    position:relative;cursor:pointer;
  }
  .menu-btn::before{
    content:"";display:block;width:19px;height:13px;
    border-top:2px solid var(--text);border-bottom:2px solid var(--text);
  }
  .menu-btn::after{
    content:"";position:absolute;width:19px;height:2px;background:var(--text);
  }
  .menu-btn[aria-expanded="true"]::before{
    width:19px;height:19px;border:0;
    background:linear-gradient(45deg,transparent 44%,var(--text) 44% 56%,transparent 56%);
  }
  .menu-btn[aria-expanded="true"]::after{
    width:19px;height:19px;background:linear-gradient(-45deg,transparent 44%,var(--text) 44% 56%,transparent 56%);
  }

  /* Floating menu panel — overlays the page, sized to its content (not full-screen). */
  .nav .links{
    display:flex;position:fixed;top:62px;inset-inline:0;bottom:auto;
    width:100%;max-height:calc(100vh - 78px);flex-direction:column;gap:0;
    padding:6px 22px 16px;
    background:#0d2c4a;
    border-top:1px solid var(--soft);
    border-bottom:1px solid var(--soft);
    box-shadow:0 18px 42px rgba(0,0,0,.6);
    z-index:60;
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    overflow-y:auto;
  }
  .nav .links.open{transform:none;opacity:1;pointer-events:auto;}
  .nav .links a{
    padding:15px 2px;font-size:var(--fs-md);font-weight:700;
    text-align:start;border:0;
    border-bottom:1px solid rgba(182,207,228,.16);
  }
  .nav .links a:last-child{border-bottom:0;}
  .nav .links a.active{color:var(--orange-soft);}
  /* Dimmed backdrop behind the floating panel */
  .menu-scrim{
    display:none;position:fixed;inset:62px 0 0;z-index:40;
    background:rgba(4,14,26,.66);
    opacity:0;transition:opacity .18s ease;
  }
  body.menu-open .menu-scrim{display:block;opacity:1;}
  body.menu-open{overflow:hidden;}
  body.menu-open .page-rulers-fixed{display:none;}
}

/* Services hero illustration: image replaces the frame entirely, fills its slot. */
.services-hero-layout .image-card{
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.services-hero-layout .image-card::before,
.services-hero-layout .image-card::after{display:none !important;}
.services-hero-layout .image-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}

/* Service + contact card illustrations: image replaces the frame, fills its slot. */
.service-illustration,
.contact-card-image{
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible;
}
.service-illustration::before,
.service-illustration::after,
.contact-card-image::before,
.contact-card-image::after{display:none !important;}
.service-illustration img,
.contact-card-image.diagram-frame img{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  object-fit:contain;
  margin-inline:0 !important;
}

/* Footer on phones: stacked, aligned to the reading edge, comfortable spacing. */
@media (max-width:760px){
  .footer-inner{flex-direction:column;align-items:flex-start;gap:18px;text-align:start;}
  html[dir="ltr"] .footer-inner{align-items:flex-start;}
  .footer-brand{display:flex;align-items:center;gap:10px;}
  .footer-legal-links{gap:10px 16px;font-size:var(--fs-sm);}
  .footer-legal-links a{padding:6px 0;}
}

/* Blog filters: results counter sits on the filter-button baseline. */
.blog-filters{grid-template-columns:1fr auto;align-items:end;}
.mini-code.filters-count{justify-self:end;align-self:end;margin:0;}
@media (max-width:980px){
  .mini-code.filters-count{justify-self:start;margin-top:4px;}
}

/* Blog hero illustration: image replaces the frame, fills its slot. */
.blog-hero-layout .image-card{
  padding:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important;
  display:flex;align-items:center;justify-content:center;overflow:visible;
}
.blog-hero-layout .image-card::before,
.blog-hero-layout .image-card::after{display:none !important;}
.blog-hero-layout .image-card img{width:100% !important;height:auto !important;max-height:none !important;object-fit:contain;}

.flow-diagram{margin:0 0 30px;padding:26px 24px 24px;background:#0B253F}
.flow-track{position:relative;display:flex;justify-content:space-between;gap:10px}
.flow-track::before{content:"";position:absolute;top:22px;right:10%;left:10%;height:1px;background:var(--soft)}
.flow-step{position:relative;z-index:1;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.flow-node{width:44px;height:44px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--muted);font:700 13px/1 ui-monospace,monospace;direction:ltr;transition:border-color .18s,color .18s,box-shadow .18s}
.flow-label{font-size:var(--fs-sm);color:var(--muted);transition:color .18s}
.flow-step:hover .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.flow-step:hover .flow-label{color:var(--text)}
.use-case-number{display:inline-block;transition:color .18s}
.use-case-row{transition:border-color .18s,box-shadow .18s,background-color .18s}
.flow-diagram:has(.flow-step:nth-child(1):hover) ~ .use-case-list .use-case-row:nth-child(1){border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.flow-diagram:has(.flow-step:nth-child(1):hover) ~ .use-case-list .use-case-row:nth-child(1) .use-case-number{color:var(--orange)}
.flow-diagram:has(.flow-step:nth-child(2):hover) ~ .use-case-list .use-case-row:nth-child(2){border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.flow-diagram:has(.flow-step:nth-child(2):hover) ~ .use-case-list .use-case-row:nth-child(2) .use-case-number{color:var(--orange)}
.flow-diagram:has(.flow-step:nth-child(3):hover) ~ .use-case-list .use-case-row:nth-child(3){border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.flow-diagram:has(.flow-step:nth-child(3):hover) ~ .use-case-list .use-case-row:nth-child(3) .use-case-number{color:var(--orange)}
.flow-diagram:has(.flow-step:nth-child(4):hover) ~ .use-case-list .use-case-row:nth-child(4){border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.flow-diagram:has(.flow-step:nth-child(4):hover) ~ .use-case-list .use-case-row:nth-child(4) .use-case-number{color:var(--orange)}
.flow-diagram:has(.flow-step:nth-child(5):hover) ~ .use-case-list .use-case-row:nth-child(5){border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.flow-diagram:has(.flow-step:nth-child(5):hover) ~ .use-case-list .use-case-row:nth-child(5) .use-case-number{color:var(--orange)}
@media (max-width:760px){
  .flow-diagram{padding:20px 16px}
  .flow-track{flex-wrap:wrap;justify-content:center;gap:10px 14px}
  .flow-track::before{display:none}
  .flow-step{flex:0 0 auto;flex-direction:row;gap:9px}
  .flow-node{width:38px;height:38px;font-size:var(--fs-xs)}
  .flow-label{font-size:var(--fs-sm)}
}

/* reverse highlight: hover a numbered row -> highlight its step */
.container:has(.use-case-list .use-case-row:nth-child(1):hover) .flow-step:nth-child(1) .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.container:has(.use-case-list .use-case-row:nth-child(1):hover) .flow-step:nth-child(1) .flow-label{color:var(--text)}
.container:has(.use-case-list .use-case-row:nth-child(2):hover) .flow-step:nth-child(2) .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.container:has(.use-case-list .use-case-row:nth-child(2):hover) .flow-step:nth-child(2) .flow-label{color:var(--text)}
.container:has(.use-case-list .use-case-row:nth-child(3):hover) .flow-step:nth-child(3) .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.container:has(.use-case-list .use-case-row:nth-child(3):hover) .flow-step:nth-child(3) .flow-label{color:var(--text)}
.container:has(.use-case-list .use-case-row:nth-child(4):hover) .flow-step:nth-child(4) .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.container:has(.use-case-list .use-case-row:nth-child(4):hover) .flow-step:nth-child(4) .flow-label{color:var(--text)}
.container:has(.use-case-list .use-case-row:nth-child(5):hover) .flow-step:nth-child(5) .flow-node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(217,138,54,.14)}
.container:has(.use-case-list .use-case-row:nth-child(5):hover) .flow-step:nth-child(5) .flow-label{color:var(--text)}

/* temporary purple access button to the diagnostic questionnaire */
.temp-btn{background:#6d5bd0;border-color:#8a79e8;color:#fff;font-weight:800;padding:11px 16px}
.temp-btn:hover{background:#8a79e8;border-color:#a494f5;color:#fff}
.nav .temp-btn{margin-inline-start:8px}

/* Approach section: heading lifted out of the card, balanced text/image split */
.approach-general .explainer-text p{margin:0 0 14px}
.approach-general .explainer-text p:last-child{margin-bottom:0}
.approach-general{grid-template-columns:minmax(0,1fr) clamp(240px,30%,360px);align-items:stretch;gap:0;padding:0;overflow:hidden}
.approach-general .explainer-text{padding:28px;display:flex;flex-direction:column;justify-content:center}
.approach-general .merged-explainer-image{display:block;padding:12px;overflow:hidden;align-self:stretch;box-sizing:border-box}
.approach-general .merged-explainer-image img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;margin:0}
@media (max-width:980px){
.approach-general{grid-template-columns:minmax(0,1fr)}
.approach-general .explainer-text{padding:22px}
.approach-general .merged-explainer-image{height:auto;padding:12px;text-align:center}
.approach-general .merged-explainer-image img{width:auto !important;max-width:100%;height:auto !important;max-height:min(70vh,620px) !important;object-fit:contain;margin:0 auto}
}

/* Services page speaks the same language as the first two pages:
   white section heading outside the card, orange code, numbered cards. */
.rtl-kicker{direction:rtl;text-align:right;margin:0 0 14px}
.service-content .service-list + .rtl-kicker{margin-top:24px}
.service-example-card .outputs{margin-top:auto}
.card,.service-example-card,.service-list-item{transition:border-color .18s,box-shadow .18s}
.card:hover,.service-example-card:hover,.service-list-item:hover{border-color:var(--orange);box-shadow:0 0 0 2px rgba(217,138,54,.16)}
.service-list-item .number-title-row{margin-bottom:8px}

/* Process section: intro card with the text on the right and the image on its left. */
.service-single.service-intro-card{grid-template-columns:.62fr .38fr;align-items:center;margin-bottom:0}
.service-intro-card .service-summary{display:flex;flex-direction:column;justify-content:center}
.service-intro-card .service-illustration{margin:0}
.block-heading{color:var(--text);font-size:clamp(20px,2.2vw,26px);font-weight:800;margin:28px 0 16px;text-align:right}
.more-row{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.more-toggle{width:var(--circle);height:var(--circle);border-radius:50%;background:var(--orange);border:0;color:#fff;font:800 17px/1 system-ui;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.more-hint{font-size:var(--fs-sm);color:var(--muted)}
.service-more{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .28s ease,opacity .2s ease}
.service-summary.is-open .service-more{max-height:420px;opacity:1;margin-top:12px;padding-top:11px;border-top:1px solid var(--soft)}
@media (max-width:980px){.service-single.service-intro-card{grid-template-columns:1fr}}

.more-link{width:var(--circle);height:var(--circle);border-radius:50%;background:var(--orange);color:#fff !important;font:800 17px/1 system-ui;display:grid !important;place-items:center;text-decoration:none;border:0;transition:filter .18s}
.more-link:hover{filter:brightness(1.12)}

/* Example carousel: three cards in view, arrows in the heading row. */
.block-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 16px}
.block-heading-row .block-heading{margin:0}
.carousel-nav{display:flex;gap:8px}
.carousel-btn{direction:ltr;unicode-bidi:bidi-override;width:var(--circle);height:var(--circle);border-radius:50%;background:transparent;border:1px solid rgba(217,138,54,.6);color:var(--orange-soft);font:800 16px/1 system-ui;display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s,opacity .18s}
.carousel-btn:hover{background:rgba(217,138,54,.16);color:#fff}
.carousel-btn[disabled]{opacity:.32;cursor:default}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex;gap:18px;transition:transform .34s cubic-bezier(.22,.61,.36,1);align-items:stretch}
.carousel-track > .service-example-card{flex:0 0 calc((100% - 36px)/3);min-height:0;height:auto;padding:18px}
.carousel-track > .service-example-card p{margin-bottom:12px}
.carousel-track > .service-example-card .link-row{margin-top:auto}
@media (max-width:980px){.carousel-track > .service-example-card{flex:0 0 calc((100% - 18px)/2)}}
@media (max-width:760px){.carousel-track > .service-example-card{flex:0 0 100%}}

.service-intro-card.image-first{grid-template-columns:.38fr .62fr}
@media (max-width:980px){.service-intro-card.image-first{grid-template-columns:1fr}}
.card-tag{align-self:flex-start;padding:4px 10px;font:800 12px/1.2 system-ui;letter-spacing:.3px;border:1px solid;margin-bottom:10px}
.card-tag.lecture{color:#f0a85c;border-color:rgba(217,138,54,.6);background:rgba(217,138,54,.12)}
.card-tag.workshop{color:#9ec8ea;border-color:rgba(158,200,234,.45);background:rgba(158,200,234,.1)}

.carousel-track > .service-example-card p{margin-bottom:10px}
.carousel-track > .service-example-card .card-tag{margin-bottom:8px}
.carousel-track > .service-example-card .number-title-row{margin-bottom:8px}

.service-intro-card .service-summary{border-left:0;padding-left:0}

/* Process carousel cards: uniform text block, + control pinned bottom-left (RTL) */
.carousel-track > .service-example-card{display:flex;flex-direction:column}
.carousel-track > .service-example-card .link-row{justify-content:flex-end !important;margin-top:auto !important}


/* ============================================================
   Mobile refinements (v26) — mobile-only unless noted
   ============================================================ */

/* Card tags sit in the physical top-left corner (all viewports) */
.card-tag{align-self:flex-start;}
[dir="rtl"] .card-tag{align-self:flex-end;}
.card-tag.workshop{color:#dcecff;border-color:rgba(220,236,249,.55);background:#071a2d;}

@media (max-width:980px){
  /* About: portrait + stats move between the highlighted paragraph and the questions */
  .about-card{flex-direction:column !important;gap:0 !important;}
  .about-col-text,.about-col-visual{display:contents !important;}
  .about-portrait{order:1;min-height:0 !important;margin:4px 0 16px;}
  .about-stats{order:2;margin-bottom:18px;}
  .about-questions{order:3;}
  .about-actions{order:4;margin-top:18px;}

  /* Services hero: illustration between the title and the lead */
  .services-hero-layout{display:flex !important;flex-direction:column !important;}
  .services-hero-layout > div:first-child{display:contents !important;}
  .about-portrait > img{max-height:360px;width:auto;}
  .services-hero-layout .heading-row{order:1;}
  .services-hero-layout .lead{order:3;}
  .services-hero-layout .image-card{order:2;margin:8px 0 16px !important;}
}

@media (max-width:760px){
  /* Section heads keep the orange marker on the title line */
  .section-head{grid-template-columns:minmax(0,1fr) auto !important;gap:10px !important;align-items:center !important;}
  .section-head .mini-code{font-size:clamp(7.5px,2.2vw,11px) !important;padding:5px 7px !important;letter-spacing:0 !important;white-space:nowrap;}
  .section-head h2{font-size:clamp(19px,5.6vw,26px) !important;}
  .section-head .section-intro{grid-column:1 / -1;}

  /* Five-step track becomes a vertical flow */
  .flow-diagram{padding:18px 16px !important;}
  .flow-track{flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:0 !important;justify-content:flex-start !important;}
  .flow-track::before{display:none !important;}
  .flow-step{position:relative;flex:0 0 auto;}
  .flow-node{position:relative;z-index:1;flex:0 0 auto;background:var(--panel);}
  .flow-label{font-size:var(--fs-sm)!important;}

  /* Buttons: smaller across nav and calls to action */
  .btn{min-height:40px;padding:9px 14px;font-size:var(--fs-sm);}
  .nav-cta,.temp-btn{min-height:36px;padding:7px 12px;font-size:var(--fs-sm);}
  .lang-switch{padding:5px 8px;font-size:var(--fs-xs);}
  .diagnostic-actions .btn{min-height:38px;padding:8px 13px;font-size:var(--fs-sm);}
}


/* ---- Top bar: plain menu items, "זמני" in purple ---- */
.links .nav-temp{
  background:transparent;border:0;padding:24px 0 20px;min-height:0;
  color:#a494f5;font-weight:800;border-bottom:2px solid transparent;
}
.links .nav-temp:hover{color:#c3b7ff;border-color:#8a79e8;}
.nav{gap:20px;}
.nav .links{gap:20px;align-items:center;}

@media (max-width:760px){
  .links .nav-temp{padding:12px 0;align-self:flex-start;}

  /* Blog filters: orange marker on the white heading line, buttons below */
  .blog-filters{grid-template-columns:minmax(0,1fr) auto !important;gap:10px 12px !important;align-items:center !important;}
  .blog-filters > div:first-child{display:contents;}
  .blog-filters .filter-title{grid-column:1;grid-row:1;margin:0 !important;}
  .blog-filters .filter-type-buttons{grid-column:1 / -1;grid-row:2;}
  .blog-filters .mini-code.filters-count{grid-column:2;grid-row:1;justify-self:end !important;align-self:center !important;
    margin:0 !important;font-size:clamp(7.5px,2.2vw,11px) !important;padding:5px 7px !important;letter-spacing:0 !important;white-space:nowrap;}

  /* Five-step track: centred cards with an arrow between them */
  .flow-step{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:9px !important;padding:0 0 30px !important;}
  .flow-step:last-child{padding-bottom:0 !important;}
  .flow-step::before{content:"";position:absolute;inset-inline-start:auto !important;left:50%;top:auto !important;bottom:14px;
    width:1px;height:16px;background:var(--soft);transform:translateX(-50%);}
  .flow-step::after{content:"";position:absolute;left:50%;bottom:10px;width:9px;height:9px;
    border-inline-start:0 !important;border-left:1px solid var(--soft);border-bottom:1px solid var(--soft);
    transform:translateX(-50%) rotate(-45deg);}
  .flow-step:last-child::before,.flow-step:last-child::after{display:none;}
  .flow-node{background:var(--panel);}
}


/* ============================================================
   Mobile refinements (v27)
   ============================================================ */
@media (max-width:760px){
  /* Menu: every item, including "זמני", on the same axis */
  .links .nav-temp{align-self:auto !important;padding:12px 0 !important;text-align:inherit;}

  /* Section heads: orange marker beside the white title, intro on its own row */
  .section-head > div:first-child{display:contents;}
  .section-head h2{grid-column:1;grid-row:1;align-self:center;}
  .section-head .kicker{grid-column:1 / -1;}
  .section-head .section-intro{grid-column:1 / -1;grid-row:2;margin-top:2px;}
  .section-head .mini-code{grid-column:2;grid-row:1;align-self:center;justify-self:end;
    white-space:normal !important;text-align:center;max-width:44vw;line-height:1.35;}

  /* Footer: logo + legal links on one line, copyright underneath */
  .footer{padding:16px 0 !important;}
  .footer-inner{display:grid !important;grid-template-columns:1fr !important;
    gap:10px !important;justify-items:center !important;text-align:center !important;}
  .footer-brand{display:flex !important;align-items:center !important;justify-content:center !important;
    gap:10px !important;flex-wrap:nowrap !important;}
  .footer-brand > span:last-child{font-size:var(--fs-xs);color:var(--muted2);}
  .footer-inner > span{display:none;}
  .footer-legal-links{justify-self:center !important;justify-content:center !important;
    flex-wrap:nowrap !important;gap:18px !important;font-size:var(--fs-xs)!important;}
  .footer-legal-links a{padding:2px 0 !important;}
}

@media (max-width:760px){
  .services-hero-layout h1{font-size:clamp(24px,7.2vw,34px) !important;line-height:1.14;text-wrap:balance;}
}

/* ---- Engagement ladder article ---- */
.blog-card-media:has(img){border:none;background:none;}
.blog-card-media:has(img)::before,.blog-card-media:has(img)::after{display:none;}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ladder-page{padding-top:34px;}
.ladder-doc{padding:26px 28px 30px;}
.ladder-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;justify-content:flex-end;}
.ladder-top{display:grid;grid-template-columns:1fr 1.14fr;gap:22px;align-items:start;}
.ladder-top-copy{padding-top:2px;}

.ladder-title{margin:0 0 10px;font-size:var(--fs-display-3);line-height:1.15;font-weight:900;}
.ladder-intro{margin:0;font-size:var(--fs-md);line-height:1.78;color:#dcecff;}
.ladder-visual{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;}
.ladder-visual img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;}
.ladder-audience{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;margin-top:24px;}
.ladder-inline-label{color:var(--orange-soft);font-weight:800;font-size:var(--fs-md);white-space:nowrap;}
.ladder-audience p{margin:0;font-size:var(--fs-md);line-height:1.7;color:#dce9f6;}
.ladder-block{margin:28px 0 0;}
.ladder-subhead{margin:0 0 16px;font-size:var(--fs-lg);font-weight:800;color:var(--text);}
.ladder-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.ladder-steps[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.ladder-steps[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.ladder-steps[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));}
.ladder-steps[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.ladder-steps[data-count="7"]{grid-template-columns:repeat(4,minmax(0,1fr));}
.ladder-steps[data-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr));}
.ladder-intro+.ladder-intro{margin-top:12px;}
.ladder-outcome>p+p{margin-top:12px;}
.ladder-outcome ul,.ladder-outcome ol{margin:0;padding-inline-start:20px;font-size:var(--fs-md);line-height:1.78;color:#dce9f6;}
.ladder-step{display:flex;flex-direction:column;gap:6px;border:1px solid var(--soft);padding:16px 14px;}
.ladder-step-num{font-family:"Space Grotesk",system-ui,sans-serif;font-size:var(--fs-xl);font-weight:700;line-height:1;color:var(--orange);letter-spacing:.02em;}
.ladder-step-title{margin:0;font-size:var(--fs-md);font-weight:800;color:var(--text);}
.ladder-step p{margin:0;font-size:var(--fs-sm);line-height:1.62;color:#c8dcee;}
.ladder-outcome>p{margin:0;font-size:var(--fs-md);line-height:1.78;color:#dce9f6;}
.page-type-lecture .ladder-block,.page-type-workshop .ladder-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--soft);}
.page-type-lecture .ladder-subhead,.page-type-workshop .ladder-subhead{margin-bottom:12px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.16em;color:var(--orange-soft);}
.page-type-lecture .ladder-audience,.page-type-workshop .ladder-audience{margin-top:22px;padding-top:16px;border-top:1px solid var(--soft);}
.page-type-lecture .ladder-title,.page-type-workshop .ladder-title{margin-bottom:14px;}
.page-type-lecture .ladder-intro,.page-type-workshop .ladder-intro{font-size:var(--fs-md);line-height:1.8;}
.ladder-steps.ladder-lines{display:flex;flex-direction:column;gap:12px;}
.ladder-steps.ladder-lines .ladder-step{display:block;border:0;padding:0;text-indent:0;font-size:var(--fs-md);line-height:1.72;}
.ladder-steps.ladder-lines .ladder-step-num{display:inline-block;width:auto;direction:ltr;font-size:var(--fs-md);font-variant-numeric:tabular-nums;margin:0 0 0 9px;}
.ladder-steps.ladder-lines .ladder-step-num::before{content:".";}
.ladder-steps.ladder-lines .ladder-step-title{display:inline;font-size:var(--fs-md);margin-inline-end:8px;}
.ladder-steps.ladder-lines .ladder-step p{display:inline;font-size:var(--fs-md);line-height:1.7;color:#dce9f6;}
.article-back-link{border:1px solid var(--soft);border-radius:2px;padding:9px 18px;}
.article-back-link:hover{border-color:var(--orange);color:var(--orange-soft);}
@media (max-width:980px){
  .ladder-steps,.ladder-steps[data-count="4"],.ladder-steps[data-count="6"],.ladder-steps[data-count="7"],.ladder-steps[data-count="8"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
}
@media (max-width:980px){
  .ladder-top{grid-template-columns:1fr;gap:16px;}
  .ladder-visual{order:-1;margin-top:0;}
  .ladder-top-copy{padding-top:0;}
  .ladder-visual img{max-height:none;}
}
@media (max-width:760px){
  .ladder-page{padding-top:24px;}
  .ladder-doc{padding:18px;}
  .ladder-title{font-size:var(--fs-xl);}
  .ladder-intro{font-size:var(--fs-sm);}
  .ladder-subhead{font-size:var(--fs-md);}
  .ladder-steps,.ladder-steps[data-count]{grid-template-columns:1fr;gap:12px;}
  .ladder-step{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:14px;}
  .ladder-step-num{grid-row:span 2;font-size:var(--fs-lg);padding-top:2px;}
  .ladder-audience{grid-template-columns:1fr;gap:4px;}
  .ladder-audience p,.ladder-outcome>p,.ladder-step p{font-size:var(--fs-sm);}
  .ladder-visual img{max-height:none;}
}

.article-end-cta{flex-wrap:wrap;}
.ladder-next{display:inline-flex;align-items:center;gap:10px;margin-inline-start:auto;
  border:1px solid var(--soft);border-radius:2px;padding:9px 16px;text-decoration:none;color:var(--muted);}
.ladder-next:hover{border-color:var(--orange);color:var(--orange-soft);}
.ladder-next-label{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);}
.ladder-next:hover .ladder-next-label{color:var(--orange-soft);}
.ladder-next-title{font-weight:700;color:var(--text);}
.ladder-next:hover .ladder-next-title{color:var(--orange-soft);}
.ladder-next-arrow{color:var(--orange);font-size:var(--fs-md);line-height:1;}
@media (max-width:760px){
  .ladder-next{margin-inline-start:0;width:100%;justify-content:space-between;}
  .ladder-next-title{font-size:var(--fs-sm);}
}


/* Systems + components carousel */
.cm-carousel{margin-top:4px}
.cm-carousel .block-heading-row{justify-content:flex-end;margin:0 0 14px}
.carousel-track > .card{flex:0 0 calc((100% - 54px)/4);min-height:0;height:auto;display:flex;flex-direction:column}
.carousel-track.cards-4 > .card{flex:0 0 calc((100% - 36px)/3)}
@media (max-width:980px){.carousel-track > .card{flex:0 0 calc((100% - 18px)/2)}.carousel-track.cards-4 > .card{flex:0 0 calc((100% - 18px)/2)}}
@media (max-width:760px){.carousel-track > .card{flex:0 0 100%}.carousel-track.cards-4 > .card{flex:0 0 100%}}

.systems-cards .system-card,.components-cards .system-card{position:relative}
.systems-cards .system-card .system-icon,.components-cards .system-card .system-icon{position:absolute;top:12px;inset-inline-end:12px;width:clamp(34px,3.4vw,46px);height:auto;object-fit:contain;opacity:.9;pointer-events:none}
.systems-cards .system-card .number-title-row,.components-cards .system-card h3{padding-inline-end:56px}



.number-title-row .card-tag{margin:0 0 0 auto !important;align-self:center !important;flex:0 0 auto;}
[dir="rtl"] .number-title-row .card-tag{margin:0 auto 0 0 !important;align-self:center !important;}

/* Shared surfaces — the home page uses the same tokens as every other page */
.card-surface{background:#0B253F;border:1px solid rgba(220,236,249,.22)}
.card-surface-inner{background:rgba(7,26,45,.24);border:1px solid rgba(182,207,228,.16)}


/* ============================================================
   ACTION CIRCLE — one size (--circle) for every round
   "open / expand" control on the site.
   ============================================================ */
.action-circle{
  width:var(--circle);height:var(--circle);flex:0 0 auto;
  border:0;border-radius:50%;padding:0;
  background:var(--orange);color:#0a2138;
  font:900 20px/1 ui-monospace,monospace;
  display:grid;place-items:center;
  cursor:pointer;text-decoration:none;
  transition:filter .18s ease;
}
.action-circle:hover{filter:brightness(1.12)}
.action-circle > span{display:block;margin-top:-1px}
.section-head.section-head-flush{border-top:0;padding-top:0}

/* ============================================================
   COMMUNITY MECHANICS PAGE
   Moved here from the page's own <style> block (155 local
   overrides). Same rules, one home, no !important except where
   a rule has to beat a style the carousel script writes inline.
   ============================================================ */
.cm-hero-section .cm-hero-full{min-height:0;width:100%;max-width:100%}
.cm-hero-section .cm-title-panel{inset:auto;top:6%;right:0;left:auto;width:max-content;max-width:80%;min-width:0;text-align:right;border-right:0;border-left:5px solid var(--orange)}
.cm-hero-section .cm-title-panel h1{color:#fff;-webkit-text-fill-color:#fff}
.cm-hero-section .cm-question-bar{inset:auto;left:0;right:0;bottom:0;width:auto;max-width:none;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--sp-4);border:0;border-top:1px solid var(--soft);padding:1.1vw 2.2vw}
.cm-hero-section .cm-question-text{color:#fff;white-space:nowrap;text-align:right;flex:0 1 auto;font-size:clamp(24px,2.9vw,42px)}
.cm-hero-section .cm-question-bar .rotating-box{box-sizing:border-box;min-height:0;width:clamp(240px,24vw,320px);max-width:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--orange);padding:var(--sp-2) var(--sp-5);line-height:1}
.cm-hero-section .cm-question-bar .rotating-word{width:100%;text-align:center;white-space:nowrap;line-height:1.15;transform:translateY(3px)}
.components-cards{align-items:start}
.components-cards .card{min-height:0;height:auto;align-self:start}
.diagnostic-actions{justify-content:flex-end}
.approach-general.merged-explainer{grid-template-columns:minmax(0,1fr) clamp(320px,40%,470px);align-items:stretch;gap:0;padding:0;overflow:hidden}
.approach-general.merged-explainer .explainer-text{padding:var(--sp-8)}
.approach-general.merged-explainer .merged-explainer-image{display:flex;align-items:center;justify-content:center;padding:var(--sp-6) var(--sp-8) !important;box-sizing:border-box;overflow:hidden;align-self:center}
.approach-general.merged-explainer .merged-explainer-image img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;object-position:center;margin:0}

@media (min-width:981px){
  .cm-carousel .block-heading-row{display:none}
  .cm-carousel .carousel-viewport{overflow:visible}
  /* beats the inline transform the carousel script sets */
  .cm-carousel .carousel-track{transform:none !important;gap:18px}
  .cm-carousel .carousel-track.cards-7{display:grid;grid-template-columns:repeat(4,1fr)}
  .cm-carousel .carousel-track.cards-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .approach-general.merged-explainer{grid-template-columns:minmax(0,1fr)}
  .approach-general.merged-explainer .explainer-text{padding:22px}
  .approach-general.merged-explainer .merged-explainer-image{height:auto;padding:0 var(--sp-6) var(--sp-6) !important;text-align:center}
  .approach-general.merged-explainer .merged-explainer-image img{height:auto;width:auto;max-width:100%;max-height:min(70vh,620px);object-fit:contain;margin:0 auto}
  .cm-hero-section .cm-question-text{white-space:normal;font-size:clamp(16px,2.4vw,26px)}
}
@media (max-width:760px){
  .cm-hero-section .cm-hero-full{aspect-ratio:auto;min-height:430px}
  .cm-hero-section .cm-title-panel{top:16px !important;right:0 !important;left:0 !important;width:auto !important;max-width:none !important;padding:var(--sp-3) 14px !important;border-left:0 !important;border-right:0 !important;border-bottom:3px solid var(--orange) !important;text-align:center !important}
  .cm-hero-section .cm-title-panel h1{font-size:var(--fs-xl)}
  .cm-hero-section .cm-question-bar{bottom:0;right:0;left:0;width:auto;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);text-align:center;padding:var(--sp-2)}
  .cm-hero-section .cm-question-text{display:block;font-size:clamp(13px,4.2vw,18px);line-height:1.45;white-space:nowrap;text-align:center;margin:0}
  .cm-hero-section .cm-question-bar > span[aria-hidden]{display:none}
  .cm-hero-section .cm-question-bar .rotating-box{display:flex;width:152px;min-width:152px;max-width:152px;height:34px;flex:none;padding:0 var(--sp-2);margin:0;align-items:center;justify-content:center;overflow:hidden;line-height:1}
  .cm-hero-section .cm-question-bar .rotating-word{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;height:auto;font-size:var(--fs-sm);line-height:1;transform:none;text-align:center}
  .cm-page .section{padding:34px 0}
  .cm-page .section.compact,.cm-page .compact{padding:26px 0}
  .cm-page .hero{padding:36px 0 22px}
}

/* the footer sits at the bottom of the screen even on short pages */
body > main{flex:1 0 auto}
body > .footer{flex:0 0 auto}

.article-updated{display:inline-flex;align-items:center;font-size:var(--fs-xs);letter-spacing:.04em;color:var(--muted,#6b6b6b);opacity:.85;}


/* ============================================================
   SPACING KEY — מפתח מרווחים אחיד לכל האתר, עברית ואנגלית.
   שלוש מדרגות לאזורים, שלוש לכרטיסים, מרווח אחד לרשת.
   כל ערך כפולה של 4. זהו המקור היחיד לערכים האלה.
   ============================================================ */

@media (max-width:760px){
  :root{
    --sec-open-top:32px;--sec-open-bottom:20px;
    --sec-top:24px;--sec-bottom:24px;--sec-close-bottom:36px;
    --pad-panel:24px;--pad-card:20px;--pad-compact:16px;
    --grid-gap:16px;
  }
}
main > section{padding-top:var(--sec-top) !important;padding-bottom:var(--sec-bottom) !important}
main > section:first-of-type{padding-top:var(--sec-open-top) !important;padding-bottom:var(--sec-open-bottom) !important}
main > section:last-of-type{padding-bottom:var(--sec-close-bottom) !important}
.hero-card,.about-card,.home-testimonials,.pad-panel{padding:var(--pad-panel) !important}
.service-single,.contact-card,.single-contact-card,.flow-diagram,.ladder-doc,.diagnosis-panel,.blog-controls-panel,.pad-card{padding:var(--pad-card) !important}
.blog-card,.service-example-card,.card.system-card,.pad-compact{padding:var(--pad-compact) !important}
.cards-3,.cards-7,.blog-grid,.components-cards,.grid-key{gap:var(--grid-gap) !important}


/* ---- Systems + components cards: clean icon, stamped number, divided body ---- */
.systems-cards .system-card,
.components-cards .system-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr;
  align-content:start;
  align-items:center;
  column-gap:16px;
  row-gap:0;
  padding:22px !important;
  overflow:hidden;
}
.components-cards .system-card{align-self:stretch}
.systems-cards .system-card .system-icon,
.components-cards .system-card .system-icon{
  position:relative;
  z-index:1;
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:end;
  width:clamp(66px,6vw,88px);
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  opacity:.92;
  filter:brightness(1.12);
  transition:opacity .18s,transform .18s;
}
.systems-cards .system-card .number-title-row,
.components-cards .system-card h3{
  grid-column:1;
  grid-row:1;
  padding-inline-end:0 !important;
  margin:0 !important;
  min-width:0;
  overflow-wrap:anywhere;
}
.systems-cards .system-card .number-title-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.systems-cards .system-card .number-title-row .card-number{
  font-size:clamp(12px,1vw,14px) !important;
  font-weight:800;
  letter-spacing:2.4px;
  line-height:1;
  margin:0 !important;
  opacity:1;
}
.systems-cards .system-card .number-title-row h3,
.components-cards .system-card h3{
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.12;
  min-width:0;
  overflow-wrap:anywhere;
}
.systems-cards .system-card p,
.components-cards .system-card p{
  grid-column:1 / -1;
  grid-row:2;
  align-self:start;
  margin:16px 0 0 !important;
  padding-top:16px;
  border-top:1px solid var(--soft);
}
.systems-cards .system-card:hover .system-icon,
.components-cards .system-card:hover .system-icon{
  opacity:1;
  transform:translateY(-2px);
}
@media (max-width:760px){
  .systems-cards .system-card,
  .components-cards .system-card{column-gap:12px;padding:18px !important}
  .systems-cards .system-card .system-icon,
  .components-cards .system-card .system-icon{width:52px}
  .systems-cards .system-card p,
  .components-cards .system-card p{margin-top:13px !important;padding-top:13px}
}


/* ---- Mobile-only expandable process steps ---- */
.flow-plus,
.flow-panel{display:none}
@media (max-width:760px){
  .flow-track{flex-flow:column nowrap !important;align-items:stretch !important;gap:8px !important;justify-content:flex-start !important}
  .flow-track .flow-step::before,
  .flow-track .flow-step::after{display:none !important}
  .flow-step{flex:0 0 auto !important;flex-direction:row !important;align-items:center !important;gap:11px !important;width:100% !important;text-align:start !important;border:1px solid var(--soft);padding:6px 8px !important}
  .flow-step .flow-label{flex:1 1 auto;text-align:start !important;color:var(--text)}
  .flow-step .flow-node{color:var(--orange-soft)}
  .flow-plus{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:44px;
    height:44px;
    padding:0;
    background:transparent;
    border:1px solid var(--soft);
    color:var(--orange-soft);
    font:700 22px/1 ui-monospace,monospace;
    cursor:pointer;
    transition:border-color .18s,color .18s;
  }
  .flow-step.open{border-color:var(--orange)}
  .flow-step.open .flow-node{border-color:var(--orange);color:var(--orange)}
  .flow-step.open .flow-plus{border-color:var(--orange);color:var(--orange)}
  .flow-panel.open{
    display:block;
    margin:-8px 0 0;
    padding:12px 12px 14px;
    border-top:0;
    border-right:1px solid var(--orange);
    border-bottom:1px solid var(--orange);
    border-left:1px solid var(--orange);
    background:rgba(7,26,45,.5);
    font-size:var(--fs-sm);
    color:var(--muted);
  }
  .flow-panel-title{display:block;color:var(--text);font-weight:700;margin-bottom:5px}
  /* the same text now lives inside the steps, so the list below is redundant on phones */
  .flow-diagram:has(.flow-panel) + .use-case-list.inline-process-list{display:none !important}
  .flow-diagram:has(.flow-panel){margin-bottom:0}
}


/* ---- Standard: the orange tag centers on the white heading's text row ---- */
.section-head{align-items:center}
.section-head > div:first-child{display:contents}
.section-head h1,
.section-head h2{grid-column:1;grid-row:1;align-self:center;margin-bottom:0}
.section-head .section-intro{grid-column:1 / -1;grid-row:2;margin-top:10px}
.section-head .mini-code{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:0}


/* Mobile: the section tag is dropped — the heading carries the row on its own */
@media (max-width:760px){
  .section-head .mini-code{display:none !important}
  .section-head{grid-template-columns:minmax(0,1fr) !important}
  .section-head h1,
  .section-head h2{grid-column:1 !important}
  .section-head .section-intro{grid-column:1 !important}
}


/* Mobile: tighter head-to-content step, matching the tightened section rhythm */
@media (max-width:760px){
  .section-head{margin-bottom:16px !important;padding-top:12px !important}
  .cm-carousel{margin-top:0 !important}
  .flow-diagram{margin-bottom:20px !important}
}


/* Footer: no mark — the copyright line stands on its own */
.footer .footer-brand .brand-logo{display:none !important}
@media (max-width:760px){
  .footer-brand{justify-content:center !important;text-align:center !important}
}

/* ---- Services hero card: compact two-column layout (both languages) ---- */
@media (min-width:981px){
  .services-hero-layout{display:grid !important;grid-template-columns:.96fr 1.04fr !important;
    grid-template-rows:auto !important;gap:0 34px !important;align-items:center !important;padding:30px !important}
  .services-hero-layout > div:first-child{display:flex !important;flex-direction:column;justify-content:center;gap:14px}
  .services-hero-layout .heading-row{margin:0}
  .services-hero-layout h1{margin:0;font-size:clamp(38px,3.6vw,54px);line-height:1.12;text-wrap:balance}
  .services-hero-layout .lead{margin:0}
  .services-hero-layout .image-card{align-self:stretch;display:flex;align-items:center;justify-content:center}
  .services-hero-layout .image-card img{width:100%;height:auto;max-height:none;object-fit:contain}
}

/* ---- Minimum legible size for small labels (13px floor) ---- */
.mini-code,
.section-head .mini-code,
.blog-filters .mini-code.filters-count,
.brand-sub,
.blog-type,
.topic-tag,
.blog-card-date,
.subtype-label,
.t-ref,
.inline-link,
.card-tag,
.lang-switch span,
.systems-cards .system-card .number-title-row .card-number{
  font-size:13px !important;
  line-height:1.35;
}
@media (max-width:760px){
  .mini-code,
  .section-head .mini-code,
  .blog-filters .mini-code.filters-count{font-size:12px !important;letter-spacing:1.4px}
}


/* ============================================================
   LONG-FORM ARTICLE — theory pieces in the blog
   Reference layout: sticky TOC column + reading column,
   margin call-out boxes, blueprint comparison table.
   ============================================================ */
.longform .article-main{--lf-measure:100%;display:block;gap:0;max-width:none;min-width:0;padding:30px 32px 28px;background:#0B253F;border:1px solid var(--soft)}
.longform .article-side{align-content:start;position:sticky;top:96px;align-self:start;padding:22px 20px;gap:0}
.lf-hero{padding:0;margin-bottom:26px}
.lf-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.lf-eyebrow .blog-type{margin:0}
.lf-title{margin:0 0 14px;font-size:var(--fs-display-2);line-height:1.04;text-wrap:balance;max-width:20ch}
.lf-standfirst{margin:0 0 24px;max-width:var(--lf-measure);font-size:var(--fs-md);line-height:1.78;color:#fff;font-weight:600;text-wrap:pretty}
.lf-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 0 0;margin:0;
  border-top:1px solid var(--soft);font-size:13px;color:var(--muted2)}
.lf-meta .blog-type,.lf-meta .topic-tag{margin:0;font-size:13px !important;font-weight:700;line-height:inherit}
.lf-meta strong{color:var(--muted);font-weight:700}
.lf-body{font-size:var(--fs-md);line-height:1.78;color:var(--muted)}
.lf-body > p,.lf-section > p{margin:0 0 18px;text-wrap:pretty;max-width:var(--lf-measure)}
.lf-body > p:last-child{margin-bottom:0}
.lf-section{padding-top:6px;margin-top:22px;border-top:0;scroll-margin-top:104px}
.lf-section:first-child{padding-top:0;margin-top:0;border-top:0}
.lf-h2{max-width:var(--lf-measure);display:flex;align-items:baseline;gap:14px;margin:0 0 18px;font-size:var(--fs-display-3);line-height:1.12;color:#fff}
.lf-h2 .lf-num{flex:0 0 auto;font-size:1em;font-weight:800;color:var(--orange-soft);direction:ltr}
.lf-h3{max-width:var(--lf-measure);margin:30px 0 14px;font-size:var(--fs-xl);line-height:1.2;color:#fff}
.lf-h4{max-width:var(--lf-measure);margin:26px 0 12px;font-size:var(--fs-lg);color:#fff}

/* definition list — term picked out, definition follows */
.lf-defs{display:grid;gap:18px;margin:8px 0 24px;padding-inline-start:0;max-width:var(--lf-measure)}
.lf-defs{list-style:none}
.lf-defs li{padding-inline-start:0;line-height:1.72}
.lf-defs b{display:block;margin-bottom:5px;color:#fff;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.2px}
.lf-defs p{margin:0;max-width:none}
/* inline variant — bulleted, definition continues after the term */
.lf-defs--inline{list-style:disc outside;padding-inline-start:1.3em;gap:14px;margin:14px 0 18px}
.lf-defs--inline li{padding-inline-start:2px}
.lf-defs--inline li::marker{color:var(--orange-soft)}
.lf-defs--inline b{display:inline;margin:0;font-size:inherit;letter-spacing:0}

/* plain ordered / bulleted runs inside the article */
.lf-steps{list-style:decimal outside;display:grid;gap:14px;margin:4px 0 22px;padding-inline-start:1.6em;max-width:var(--lf-measure)}
.lf-steps li{padding-inline-start:2px;line-height:1.72}
.lf-steps li::marker{color:var(--orange-soft);font-weight:800}
.lf-steps p{margin:0;max-width:none}
.lf-steps b{color:#fff}

/* notes and emphases — set in the text, not in a card */
.lf-notes{clear:both;margin:26px 0;max-width:var(--lf-measure)}
.lf-notes-title{margin:0 0 10px;font-size:var(--fs-lg);color:#fff;font-weight:800}
.lf-notes ul{margin:0;padding-inline-start:1.3em;list-style:disc outside;display:grid;gap:14px}
.lf-notes li{padding-inline-start:2px;line-height:1.72}
.lf-notes li::marker{color:var(--orange-soft)}
.lf-notes b{color:#fff}

/* collapsible panel around a diagram or a table */
.lf-panel{clear:both;max-width:var(--lf-measure);margin:22px 0;border:1px solid var(--soft);background:rgba(7,26,45,.28)}
.lf-sum-icon{flex:0 0 auto;width:18px;height:18px}
.lf-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 18px;font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--orange-soft)}
.lf-panel summary::-webkit-details-marker{display:none}
.lf-panel summary:after{content:"+";margin-inline-start:auto;font-size:var(--fs-lg);line-height:1;font-weight:400}
.lf-panel[open] summary:after{content:"–"}
.lf-panel[open] summary{border-bottom:1px solid var(--soft)}
.lf-panel-body{padding:6px 18px 18px}
.lf-panel-body .lf-figure,.lf-panel-body .lf-table-wrap{margin:16px 0 0}
.lf-panel-body .lf-footnote{margin-bottom:0}

/* margin call-out — floats into the reading column's edge on desktop */
.lf-aside{clear:both;max-width:var(--lf-measure);margin:0 0 20px;padding:16px 18px;background:rgba(7,26,45,.42);
  border:1px solid var(--soft);border-top:2px solid rgba(217,138,54,.7)}
.lf-aside-label{display:block;margin-bottom:10px;font-size:13px;font-weight:800;
  letter-spacing:.5px;color:var(--orange-soft)}
.lf-aside ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.lf-aside li{font-size:var(--fs-md);line-height:1.72;color:var(--muted)}
.lf-aside b{color:#fff}
.lf-aside p{margin:0;font-size:var(--fs-md);line-height:1.72}
@media (min-width:1100px){
  .lf-aside{float:left;width:300px;margin:6px 0 18px 26px}
}

/* interim conclusion strip */
.lf-takeaway{clear:both;max-width:var(--lf-measure);margin:24px 0;padding:18px 22px;background:rgba(217,138,54,.07);
  border:1px solid rgba(217,138,54,.34)}
.lf-takeaway span{display:block;margin-bottom:6px;font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--orange-soft)}
.lf-takeaway p{margin:0;color:#fff;font-size:var(--fs-md);line-height:1.72;max-width:none}

/* tall diagram */
.lf-figure{clear:both;max-width:var(--lf-measure);margin:26px 0}
.lf-figure-plate{display:flex;justify-content:center;min-width:0}
.lf-diagram{width:100%;min-width:0;max-width:660px;height:auto;direction:ltr;font-family:Heebo,Assistant,sans-serif}
.lf-figure figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:var(--muted2);text-align:center}

/* comparison table */
.lf-table-wrap{clear:both;margin:22px 0;overflow-x:auto;border:1px solid var(--soft)}
.lf-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-sm);text-align:center}
.lf-table th,.lf-table td{padding:13px 14px;border-bottom:1px solid rgba(182,207,228,.14);vertical-align:middle;line-height:1.5;text-align:center}
.lf-table thead th{position:sticky;top:0;background:#0d2c4a;color:var(--orange-soft);
  font-size:13px;font-weight:800;letter-spacing:.6px;border-bottom:1px solid rgba(217,138,54,.4)}
.lf-table tbody th{color:#fff;font-weight:800;font-size:var(--fs-md);white-space:nowrap}
.lf-table tbody tr:nth-child(even){background:rgba(7,26,45,.3)}
.lf-table tbody tr:last-child th,.lf-table tbody tr:last-child td{border-bottom:0}
.lf-table tbody tr.is-outlier th{color:var(--orange-soft)}
.lf-table td.num{direction:ltr;text-align:center;font-variant-numeric:tabular-nums}
.lf-footnote{margin:10px 0 0;font-size:13px;color:var(--muted2);line-height:1.55}

/* sticky table of contents */
.lf-toc{display:grid;gap:2px;margin-inline:-10px}
.lf-toc a{display:flex;align-items:baseline;gap:10px;padding:11px 12px 11px 10px;border:0;
  border-inline-start:2px solid transparent;color:#dce9f6;font-size:var(--fs-sm);line-height:1.45;
  transition:color .16s,background .16s,border-color .16s}
.lf-toc a:hover{background:rgba(220,236,249,.05)}
.lf-toc a:hover{color:var(--orange-soft)}
.lf-toc a.is-active{color:#fff;font-weight:700;background:rgba(217,138,54,.09);border-inline-start-color:var(--orange-soft)}
.lf-toc a span{flex:0 0 auto;min-width:22px;font-size:12px;font-weight:800;
  color:var(--orange-soft);direction:ltr;opacity:.75}
.lf-toc a.is-active span{opacity:1}
.lf-side-title{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--orange-soft)}
.lf-side-block{padding-top:16px;margin-top:6px;border-top:1px solid rgba(182,207,228,.16)}
.lf-side-block p{margin:0 0 14px;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);text-align:center}
.lf-side-actions{display:grid;grid-template-columns:1fr;gap:10px}
.article-side .lf-side-actions .btn{width:100%;border:1px solid var(--soft);min-width:0;min-height:40px;padding:10px 12px;font-size:13px;white-space:nowrap;display:flex;align-items:center;justify-content:center;line-height:1.2;box-sizing:border-box}

/* collapsed TOC — only in the stacked layout, sits above the article body */
.lf-toc-mobile{display:none}
.lf-toc-mobile summary{list-style:none;cursor:pointer;padding:13px 16px;background:rgba(7,26,45,.42);
  border:1px solid var(--soft);font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--orange-soft)}
.lf-toc-mobile summary::-webkit-details-marker{display:none}
.lf-toc-mobile summary:after{content:"+";float:left;font-size:var(--fs-lg);line-height:1;font-weight:400}
.lf-toc-mobile[open] summary:after{content:"–"}
.lf-toc-mobile .lf-toc{padding:4px 16px 12px;background:rgba(7,26,45,.42);
  border:1px solid var(--soft);border-top:0}

@media (max-width:980px){
  .longform .article-layout-enhanced{grid-template-columns:1fr}
  /* the sidebar's contents live elsewhere when stacked: TOC moves above the body,
     the CTA and back-link are already repeated in .article-end-cta */
  .longform .article-side{display:none}
  .lf-toc-mobile{display:block;margin:0 0 24px}
  .lf-aside{float:none;width:auto;margin-inline:0}
  .lf-section{padding-top:6px;margin-top:22px}
}

.lf-hero-media{margin:-30px -32px 22px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--soft);overflow:hidden}
.lf-hero-media img{display:block;width:100%;height:auto}
.lf-hero-media img{width:100%;height:auto}
@media (max-width:760px){.lf-hero-media{margin-bottom:22px}}
.article-side .lf-side-actions .btn.primary{border-color:rgba(217,138,54,.7)}
.longform .pull-quote{max-width:var(--lf-measure);font-size:var(--fs-md);line-height:1.72;font-weight:800}
.lf-title{scroll-margin-top:104px}
@media (max-width:760px){
  .lf-meta{flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px}
  .lf-title{font-size:var(--fs-display-3);line-height:1.08;margin-bottom:14px;max-width:none}
  .lf-standfirst{font-size:var(--fs-md);line-height:1.62}
}

/* Blog hero: shorter lead copy — keep the illustration proportional to the text block. */
@media (min-width:981px){
  .blog-hero-layout{grid-template-columns:1.12fr .88fr}
  .blog-hero-layout .image-card img{max-height:290px !important;width:auto !important;max-width:100% !important}
}


/* ============================================================
   V26 — numbering standard, hero-bar parity, denser cards
   ============================================================ */

/* 1a + 1b: an orange card number reads at its title's size and ends with a period */
/* RTL: the period sits between the number and the title, i.e. on the number's left */
.card-number::before{content:"."}
.number-title-row{align-items:baseline}
.service-example-card .number-title-row .card-number,
.card:not(.system-card) .number-title-row .card-number,
.card:not(.system-card) > .card-number,
.service-example-card > .card-number{font-size:var(--fs-lg) !important;letter-spacing:1px}
.systems-cards .system-card .number-title-row .card-number{font-size:clamp(20px,1.7vw,25px) !important;letter-spacing:1px}

/* 2c: systems cards — number, name and logo share one row; logo small, far corner */
.systems-cards .system-card .number-title-row{flex-direction:row !important;align-items:baseline !important;gap:10px !important;flex-wrap:nowrap}
.systems-cards .system-card .number-title-row h3{min-width:0;overflow-wrap:break-word}
.systems-cards .system-card .system-icon,
.components-cards .system-card .system-icon{width:40px !important;display:block;align-self:center !important;margin:0 !important;top:auto !important;inset-inline-end:auto !important}
.systems-cards .system-card,
.components-cards .system-card{column-gap:12px}

/* 2a: hero bar — question and rotating word at one size, word centred in the frame */
.cm-hero-section .cm-question-bar{align-items:center !important}
.cm-hero-section .cm-question-bar .rotating-word{transform:none !important;line-height:1 !important}
.cm-hero-section .cm-question-bar .rotating-box{align-items:center !important;justify-content:center !important}

/* 2b: approach card — artwork breathes inside the frame, column sized to leave almost no void */
@media (min-width:981px){
  .approach-general.merged-explainer{grid-template-columns:minmax(0,1fr) clamp(300px,35%,418px) !important}
  .approach-general.merged-explainer .merged-explainer-image{padding:22px !important;display:flex;align-items:center}
  .approach-general.merged-explainer .merged-explainer-image img{width:100% !important;height:auto !important;max-height:none !important}
}

/* 3a: services hero — tighter artwork, less empty space beside the text */
@media (min-width:981px){
  .services-hero-layout{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr) !important;align-items:center !important}
  .services-hero-layout .image-card img{max-width:430px;margin-inline:auto}
}

/* Standard framed card image: 95% width, equal gutter on all sides */
.blog-card-media.is-framed{aspect-ratio:auto;padding:2.5%;margin:-1px 0 6px;}
.blog-card-media.is-framed img{width:100%;height:auto;object-fit:contain;}

/* Mobile touch targets & footer legibility (Oct 2026) */
@media (max-width:760px){.lang-switch,.menu-btn{min-height:44px;min-width:44px}.footer-brand span,.footer-legal-links a{font-size:13px}.footer-legal-links a{display:inline-block;padding:8px 0}}

/* Services title outside the card, like the about page (Oct 2026) */
.hero .section-head-flush{margin-bottom:18px}
@media (max-width:980px){.services-hero-layout .lead{order:1 !important}.services-hero-layout .lead{margin-bottom:16px !important}.services-hero-layout .image-card{order:2 !important;margin:0 !important}.services-hero-layout .service-quicklinks{order:3;margin:18px 0 0 !important;align-self:stretch;justify-content:flex-start}}
/* Blog hero: compact illustration on tablet/mobile so cards appear sooner (Oct 2026, revertable) */
@media (max-width:980px){.blog-hero-layout .image-card img{max-height:230px !important;width:auto !important;max-width:100% !important;margin-inline:auto}}