/* ============================================================
   WSOOL — COMPONENTS
   Every block here is self-contained: one root class, no dependency on
   sibling order or page context, no physical left/right. That is the
   contract that lets each one become a WordPress block unchanged.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   BUTTONS & INLINE LINKS
   ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:13px 26px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  font-size:15px;font-weight:700;letter-spacing:var(--track-tight);
  text-align:center;
  transition:transform var(--dur) var(--ease),background var(--dur-fast),
             border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);
}
/* Arrow points the way reading flows, so one rule serves ar/ and en/. */
.btn::after{
  content:"";flex:none;width:1em;height:1em;background:currentColor;
  transition:transform var(--dur) var(--ease);
  -webkit-mask:var(--arrow) center/contain no-repeat;
          mask:var(--arrow) center/contain no-repeat;
}
.btn-plain::after{display:none}
[dir="rtl"] .btn::after{transform:scaleX(-1)}
.btn:hover{transform:translateY(-2px)}
[dir="ltr"] .btn:hover::after{transform:translateX(4px)}
[dir="rtl"] .btn:hover::after{transform:scaleX(-1) translateX(4px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* Fill is --coral-ink, not --coral: white 15px on --coral is 3.2:1 (fails AA). */
.btn-coral{background:var(--coral-ink);color:#fff;box-shadow:var(--shadow-coral)}
.btn-coral:hover{background:var(--coral-press);box-shadow:0 18px 36px rgba(176,58,32,.26)}
.btn-outline{border-color:var(--line-strong);background:rgba(255,255,255,.6);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-deep)}
.btn-on-dark{background:#fff;color:var(--ink)}
.btn-on-dark:hover{background:var(--peach)}
.btn-ghost-dark{border-color:var(--on-dark-line);color:#fff}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{min-height:56px;padding:17px 32px;font-size:16px}
.btn-sm{min-height:var(--tap);padding:9px 18px;font-size:14.5px}
.btn-block{width:100%}

/* Text link with the same direction-aware arrow. */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  color:var(--coral-ink);font-size:15.5px;font-weight:700;
}
.link-arrow::after{
  content:"";flex:none;width:.95em;height:.95em;background:currentColor;
  transition:transform var(--dur) var(--ease);
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
}
[dir="rtl"] .link-arrow::after{transform:scaleX(-1)}
[dir="ltr"] .link-arrow:hover::after{transform:translateX(4px)}
[dir="rtl"] .link-arrow:hover::after{transform:scaleX(-1) translateX(4px)}
.link-arrow-light{color:#fff}

/* ════════════════════════════════════════════════════════════
   HEADER + DESKTOP NAVIGATION
   WP: parts/header.html + nav_menu location "primary"
   ════════════════════════════════════════════════════════════ */
.progress{position:fixed;z-index:300;inset-block-start:0;inset-inline:0;height:3px;pointer-events:none}
.progress span{display:block;width:100%;height:100%;background:var(--coral);transform:scaleX(0);transform-origin:var(--progress-origin,left)}
[dir="rtl"] .progress span{transform-origin:right}

/* The bar floats clear of the page edge and rounds its corners, so it reads as
   an object sitting on the page rather than a band welded to the top of it. */
.header{
  position:fixed;z-index:220;
  inset-block-start:var(--header-inset);inset-inline:clamp(14px,3vw,40px);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(219,226,222,.9);border-radius:18px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 34px rgba(23,38,45,.09);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur-fast);
}
.header.scrolled{box-shadow:0 14px 40px rgba(23,38,45,.13)}
/* Clears its own height plus the gap above it, or a sliver stays on screen. */
.header.hide{transform:translateY(calc(-100% - var(--header-inset) - 6px))}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:auto;height:var(--header-bar);padding-inline:clamp(16px,2vw,26px);
}
.brand{display:flex;align-items:center;min-height:var(--tap)}
.brand img{width:96px}
/* Stretched to the full header height on purpose — see .has-menu below. */
/* Three zones: brand · nav · CTA. `margin-inline:auto` centres the nav and
   pushes the call to action to the far edge. */
.nav-links{display:flex;align-items:center;align-self:stretch;gap:clamp(14px,1.6vw,24px);
  margin-inline:auto;font-size:14.5px;font-weight:600;color:var(--text);letter-spacing:-.006em}
.nav-links>a{display:inline-flex;align-items:center;min-height:var(--tap)}
.nav-links>a:not(.nav-cta):hover,.nav-links>a[aria-current="page"]{color:var(--ink)}
.nav-links>a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--coral)}
/* A hairline that grows from the centre on hover — quieter than a colour flip. */
.nav-links>a{position:relative}
.nav-links>a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:14px;height:1.5px;
  background:var(--coral);transform:scaleX(0);transition:transform var(--dur-fast) var(--ease);
}
.nav-links>a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.nav-links>a::after{transition:none}}
.nav-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:9px 20px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  border-radius:var(--radius-pill);background:var(--coral-ink);color:#fff;
  box-shadow:var(--shadow-coral);
}
.nav-cta:hover{background:var(--coral-press);color:#fff!important}

/* ── Mega menu ────────────────────────────────────────────
   The panel is anchored to .header, not to its trigger, and spans the
   full header width. Anchoring to the trigger needs a centring translate,
   and in RTL the inline axis and the translate fight each other — that is
   how the old panel ended up rendering off the left edge of the viewport.
   Full-width is symmetric by construction, so it cannot happen. */
/* align-self:stretch is load-bearing, not cosmetic. The trigger is 44px tall
   (--tap) inside a 72px header, and the panel hangs off the header's bottom
   edge — so an unstretched .has-menu leaves a 14px dead strip that the cursor
   must cross on its way to the panel. Crossing it drops :hover and the panel
   vanishes mid-reach. Stretching makes the hover region meet the panel with
   no gap, which is why .nav-links is stretched above too. */
.has-menu{position:static;display:flex;align-items:center;align-self:stretch}
.menu-trigger{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);
  padding:0;font-size:14.5px;font-weight:600;color:var(--text);
}
.menu-trigger::after{
  content:"";width:8px;height:8px;
  border-inline-end:1.6px solid currentColor;border-block-end:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--dur-fast) var(--ease);
}
.has-menu:hover .menu-trigger,.has-menu:focus-within .menu-trigger{color:var(--ink)}
.has-menu:hover .menu-trigger::after,
.has-menu:focus-within .menu-trigger::after{transform:translateY(2px) rotate(225deg)}

.menu-panel{
  position:absolute;z-index:230;inset-block-start:100%;inset-inline:0;
  padding-block:26px 22px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  border-radius:0 0 18px 18px;
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.has-menu:hover .menu-panel,
.has-menu:focus-within .menu-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.menu-inner{display:grid;grid-template-columns:1fr 288px;gap:clamp(24px,4vw,56px);align-items:start}
.menu-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.menu-cards-2{grid-template-columns:repeat(2,1fr)}
.menu-card{
  display:flex;align-items:flex-start;gap:12px;
  min-height:var(--tap);padding:12px 14px;border-radius:var(--radius-sm);
  transition:background var(--dur-fast);
}
.menu-card:hover{background:var(--peach-soft)}
.menu-card .m-ico{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--radius-xs);background:var(--peach);color:var(--coral-ink);
}
.menu-card .m-ico svg{width:17px;height:17px}
.menu-card b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.menu-card span span,.menu-card>span>span{display:block;margin-block-start:3px;color:var(--muted);font-size:13.5px;line-height:1.5}
/* Two pillars, each with its components listed underneath. The nesting is the
   message: these are parts of one engine, not six things on a menu. */
.menu-pillar{display:flex;flex-direction:column}
.menu-sub{
  display:grid;gap:2px;
  margin-block-start:2px;padding-inline-start:60px;
}
.menu-sub a{
  display:flex;align-items:center;min-height:34px;
  color:var(--muted);font-size:13.5px;font-weight:600;
}
.menu-sub a::before{
  content:"";flex:none;
  width:5px;height:5px;margin-inline-end:10px;border-radius:50%;
  background:var(--line-strong);
  transition:background var(--dur-fast);
}
.menu-sub a:hover{color:var(--ink)}
.menu-sub a:hover::before{background:var(--coral)}

.menu-promo{
  padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--canvas);
}
.menu-promo small{display:block;color:var(--coral-ink);font-size:13px;font-weight:700;letter-spacing:var(--track-wide)}
.menu-promo strong{display:block;margin-block-start:10px;font-size:16px;line-height:1.4}
.menu-promo p{margin:8px 0 16px;color:var(--text);font-size:14px;line-height:1.65}

/* ════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   Plain scrollable list. The CTA is pinned at the top so it is reachable
   without scrolling the menu, and the burger becomes a clear X when open.
   ════════════════════════════════════════════════════════════ */
.burger{
  display:none;place-items:center;width:var(--tap);height:var(--tap);
  border:1px solid var(--line);border-radius:50%;background:#fff;
}
.burger span,.burger::before,.burger::after{
  content:"";display:block;width:18px;height:1.6px;background:var(--ink);
  border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur-fast);
}
.burger span{margin-block:5px}
body.menu-open .burger span{opacity:0}
body.menu-open .burger::before{transform:translateY(6.6px) rotate(45deg)}
body.menu-open .burger::after{transform:translateY(-6.6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;z-index:210;inset:0;
  display:flex;flex-direction:column;
  background:var(--canvas);
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
body.menu-open .mobile-nav{visibility:visible;opacity:1;transform:none}
.mobile-cta-top{
  flex:none;padding:calc(var(--header-h) + 14px) 22px 14px;
  background:var(--canvas);border-block-end:1px solid var(--line);
}
.mobile-cta-top .btn{width:100%}
.mobile-nav-scroll{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 22px calc(34px + env(safe-area-inset-bottom));
}
.m-link{
  display:flex;align-items:center;min-height:56px;
  border-block-end:1px solid var(--line);
  font-size:18px;font-weight:700;color:var(--ink);
}
.m-label{
  margin:22px 0 2px;color:var(--muted);
  font-size:13px;font-weight:700;letter-spacing:var(--track-wide);
}
.m-sub{
  display:flex;align-items:center;min-height:var(--tap);
  padding-inline-start:14px;border-block-end:1px solid var(--line);
  font-size:15.5px;font-weight:500;color:var(--text);
}
.m-link:active,.m-sub:active,.m-link[aria-current="page"],.m-sub[aria-current="page"]{color:var(--coral-ink)}
/* Groups collapse. The drawer used to open on 23 tappable items with every
   group expanded; now it opens on 8. <details> is native, so this still works
   with JavaScript switched off. */
.m-group{border-block-end:1px solid var(--line)}
.m-group>summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;font-size:16px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;
}
.m-group>summary::-webkit-details-marker{display:none}
.m-group>summary::after{
  content:"";width:9px;height:9px;margin-inline-start:12px;flex:0 0 auto;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease);
}
.m-group[open]>summary::after{transform:rotate(-135deg)}
.m-group>summary:focus-visible{outline:var(--focus);outline-offset:2px}
.m-group .m-sub:last-child{border-block-end:0}
.m-group .m-sub{padding-block-end:2px}
.m-foot{display:flex;flex-wrap:wrap;gap:16px;margin-block-start:26px}
.m-foot a{color:var(--muted);font-size:14px;font-weight:600}

/* ════════════════════════════════════════════════════════════
   BREADCRUMBS   WP block: wsool/breadcrumbs (+ BreadcrumbList JSON-LD)
   ════════════════════════════════════════════════════════════ */
.breadcrumbs{padding-block:calc(var(--header-h) + 26px) 0}

/* WCAG 2.5.8: breadcrumb links were 23-26px tall; 24px is the AA floor. */
.breadcrumbs a{display:inline-flex;align-items:center;min-height:24px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li+li::before{content:"";width:5px;height:5px;border-block-start:1.4px solid currentColor;border-inline-end:1.4px solid currentColor;transform:rotate(45deg)}
[dir="rtl"] .breadcrumbs li+li::before{transform:rotate(-135deg)}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ════════════════════════════════════════════════════════════
   PAGE HERO — inner pages. Quieter than the homepage hero by design:
   one image reveal, no sticky, no rail.
   WP block: wsool/page-hero
   ════════════════════════════════════════════════════════════ */
.page-hero{padding-block:44px var(--section-y);background:var(--canvas)}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.page-hero-copy h1{margin:0;font-size:var(--fs-h1);letter-spacing:var(--track-display)}
.page-hero-copy h1 span{color:var(--coral)}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:var(--sp-4)}
.page-hero-media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow);aspect-ratio:4/3;
}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero-solo{max-width:820px}
.page-hero-solo h1{max-width:16ch}

/* ════════════════════════════════════════════════════════════
   ANSWER BOX — the direct answer in the first screen.
   Present on every solution, industry, tool and article page: it is what
   answer engines quote and what an impatient buyer reads instead of scrolling.
   WP block: wsool/answer
   ════════════════════════════════════════════════════════════ */
.answer{
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--line);border-inline-start:3px solid var(--coral);
  border-radius:var(--radius);background:var(--paper);
}
.answer h2,.answer .answer-q{
  margin:0 0 12px;font-size:var(--fs-h4);font-weight:700;color:var(--ink);
}
.answer p{margin:0;color:var(--text);font-size:16.5px;line-height:1.78}
.answer p+p{margin-block-start:12px}

/* ════════════════════════════════════════════════════════════
   CARD GRIDS   WP block: wsool/card-grid (repeatable item)
   ════════════════════════════════════════════════════════════ */
.card-grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

.card{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur-fast);
}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card-ico{
  display:grid;place-items:center;width:44px;height:44px;margin-block-end:18px;
  border-radius:var(--radius-xs);background:var(--peach);color:var(--coral-ink);
}
.card-ico svg{width:21px;height:21px}
.card h3{margin:0;font-size:var(--fs-h4);letter-spacing:var(--track-tight)}
.card p{margin:10px 0 0;color:var(--text);font-size:var(--fs-sm);line-height:1.7}
.card .link-arrow{margin-block-start:auto;padding-block-start:16px}
.card-canvas{background:var(--canvas)}
.card-dark{background:var(--ink);border-color:transparent;color:#fff}
.card-dark p{color:var(--on-dark-soft)}

/* Media card — image on top. Used by industries, insights, capabilities. */
.media-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;flex-direction:column}
.media-card-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--canvas)}
.media-card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .8s var(--ease),filter var(--dur)}
.media-card:hover .media-card-img img{transform:scale(1.04);filter:saturate(.98)}
.media-card-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,28px)}
.media-card-body h3{margin:0;font-size:var(--fs-h4);letter-spacing:var(--track-tight)}
.media-card-body p{margin:10px 0 0;color:var(--text);font-size:var(--fs-sm);line-height:1.7}
.media-card-body .link-arrow{margin-block-start:auto;padding-block-start:16px}

/* ════════════════════════════════════════════════════════════
   FIGURE BAND   WP block: wsool/figure
   ════════════════════════════════════════════════════════════
   One photograph laid across the reading column, used to break a long run of
   prose sections. An inner page is nine sections of heading-plus-paragraph in
   a row; alternating the background between paper and canvas is too weak a
   rhythm to register, and the eye reads the whole page as one grey block.

   The caption is not decoration. It is the one line most likely to be read on
   a page nobody reads all of, so it carries a claim, not a description of the
   photo. */
.section-figure{padding-block:clamp(30px,4vw,58px)}
.figure-band{margin:0}
.figure-band img{
  display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--radius);filter:saturate(.82);
}
.figure-band figcaption{
  display:flex;gap:14px;margin-block-start:18px;
  color:var(--text);font-size:var(--fs-read-sm);line-height:1.7;max-width:60ch;
}
.figure-band figcaption::before{
  content:"";flex:0 0 auto;width:3px;margin-block:.2em;background:var(--coral);
}
@media (max-width:720px){
  .figure-band img{aspect-ratio:4/3}
}

.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:18px}
.tag{padding:6px 11px;border-radius:var(--radius-pill);background:var(--canvas);color:var(--text);font-size:13px;font-weight:600}
.tag-coral{background:var(--peach);color:var(--coral-ink)}
.tag-outline{background:none;border:1px solid var(--line)}

/* ════════════════════════════════════════════════════════════
   FIT LISTS — "who this is for" / "who this is NOT for"
   The negative column is the strongest trust signal on a service page,
   so it gets equal visual weight, never a footnote.
   WP block: wsool/fit-split
   ════════════════════════════════════════════════════════════ */
/* Fit / not-fit. This is a verdict, so it uses the meaning palette, not the
   identity one: a reader scrolling past should be able to tell the two columns
   apart before reading a word of either. The tick and the cross carry the
   meaning on their own — the colour only agrees with them. */
.fit-split{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fit-col{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);border-block-start:3px solid var(--good);
  border-radius:var(--radius);background:var(--paper);
}
.fit-col.no{background:var(--canvas);border-block-start-color:var(--bad)}
.fit-col h3{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:var(--fs-h4)}
.fit-col h3::before{
  content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--good-soft) center/10px 10px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%231d7a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fit-col.no h3::before{
  background-color:var(--bad-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23c62828' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fit-col>p{margin:0 0 18px;color:var(--muted);font-size:14px}
.fit-list{display:grid;gap:12px}
.fit-list li{position:relative;padding-inline-start:30px;color:var(--text);font-size:var(--fs-sm);line-height:1.65}
.fit-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.42em;
  width:16px;height:16px;border-radius:50%;
  background:var(--good-soft);
}
.fit-list li::after{
  content:"";position:absolute;inset-inline-start:4.6px;inset-block-start:.72em;
  width:7px;height:3.5px;border-inline-start:1.8px solid var(--good);border-block-end:1.8px solid var(--good);
  transform:rotate(-45deg);
}
.fit-col.no .fit-list li::before{background:var(--bad-soft)}
.fit-col.no .fit-list li::after{
  inset-inline-start:4.6px;inset-block-start:.66em;width:7px;height:7px;
  border:0;transform:none;
  background:
    linear-gradient(45deg,transparent 43%,var(--bad) 43%,var(--bad) 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--bad) 43%,var(--bad) 57%,transparent 57%);
}
.fit-col.no .fit-list li{color:var(--muted)}

/* Simple bulleted list used inside offers, deliverables, checklists. */
.tick-list{display:grid;gap:11px}
.tick-list li{position:relative;padding-inline-start:24px;color:var(--text);font-size:var(--fs-sm);line-height:1.7}
.tick-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em;
  width:9px;height:9px;border-radius:50%;border:2px solid var(--coral);
}
.tick-list-ink li::before{border-color:var(--ink)}
.tick-list-light li{color:var(--on-dark-soft)}

/* ════════════════════════════════════════════════════════════
   FLOW DIAGRAM — Inputs → Logic → Outputs → Human review
   Semantic <ol> so it reads correctly without CSS and in a screen reader.
   WP block: wsool/flow
   ════════════════════════════════════════════════════════════ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:flow}
.flow-step{
  position:relative;padding:24px 22px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.flow-step::before{
  counter-increment:flow;content:counter(flow);
  display:grid;place-items:center;width:28px;height:28px;margin-block-end:14px;
  border-radius:50%;background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:700;direction:ltr;
}
/* The connector arrow between steps — inline-axis aware, so it points
   left in Arabic and right in English from the same rule. */
.flow-step:not(:last-child)::after{
  content:"";position:absolute;z-index:2;
  inset-block-start:50%;inset-inline-end:-12px;
  width:12px;height:12px;background:var(--coral);
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transform:translateY(-50%);
}
[dir="rtl"] .flow-step:not(:last-child)::after{transform:translateY(-50%) scaleX(-1)}
.flow-step h3{margin:0;font-size:15.5px;letter-spacing:var(--track-tight)}
.flow-step p{margin:8px 0 0;color:var(--text);font-size:14.5px;line-height:1.65}
.flow-step.human{border-color:var(--coral);background:var(--peach-soft)}
.flow-step.human::before{background:var(--coral-ink)}

/* Vertical pipeline used for longer systems (10+ nodes). */
.pipeline{display:grid;gap:0;border-inline-start:2px solid var(--line);padding-inline-start:26px}
.pipeline li{position:relative;padding-block:14px}
.pipeline li::before{
  content:"";position:absolute;inset-inline-start:-33px;inset-block-start:22px;
  width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--coral);
}
.pipeline strong{display:block;font-size:15px}
.pipeline p{margin:5px 0 0;color:var(--text);font-size:14.5px;line-height:1.65}
.pipeline li.human::before{background:var(--coral);box-shadow:0 0 0 5px var(--peach)}

/* ════════════════════════════════════════════════════════════
   STEP / PHASE LIST   WP block: wsool/phases
   ════════════════════════════════════════════════════════════ */
.phase-list{border-block-start:1px solid var(--ink)}
.phase{
  display:grid;grid-template-columns:104px minmax(240px,.72fr) 1fr;
  gap:clamp(20px,4vw,64px);align-items:start;
  padding-block:34px;border-block-end:1px solid var(--line);
}
.phase-no{color:var(--coral-ink);font-size:40px;font-weight:600;line-height:1;direction:ltr}
.phase h3{margin:0;font-size:var(--fs-h3)}
.phase-meta{display:block;margin-block-start:10px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:var(--track-wide)}
.phase p{max-width:60ch;margin:0;color:var(--text);font-size:var(--fs-sm)}
.phase-out{display:block;margin-block-start:12px;color:var(--ink);font-size:14px;font-weight:600}

/* ════════════════════════════════════════════════════════════
   TOOL STRIP — the systems we build on. Named logos, no claims.
   WP block: wsool/tool-strip
   ════════════════════════════════════════════════════════════ */
.tool-strip{padding-block:var(--section-y-sm);background:var(--paper);border-block:1px solid var(--line)}
.tool-strip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-block-end:26px}
.tool-strip-head p{margin:0;color:var(--muted);font-size:14px}
.tool-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-group{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas)}
.tool-group h3{margin:0 0 14px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:var(--track-wide)}
.tool-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tool-logos img{
  width:auto;height:22px;object-fit:contain;
  opacity:.72;filter:grayscale(1);transition:opacity var(--dur-fast),filter var(--dur-fast);
}
.tool-group:hover .tool-logos img{opacity:1;filter:grayscale(0)}

/* ════════════════════════════════════════════════════════════
   STATS / CALLOUTS / QUOTES
   ════════════════════════════════════════════════════════════ */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.stat b{display:block;color:var(--coral-ink);font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.05;direction:ltr}
.stat span{display:block;margin-block-start:10px;color:var(--text);font-size:14.5px;line-height:1.6}

.callout{
  padding:22px 24px;border-radius:var(--radius);
  border-inline-start:3px solid var(--coral);background:var(--peach-soft);
  color:var(--text);font-size:15.5px;line-height:1.72;
}
.callout strong{color:var(--ink)}
.callout-ink{border-inline-start-color:var(--ink);background:var(--canvas)}
.callout-title{display:block;margin-block-end:6px;color:var(--ink);font-size:15px;font-weight:700}

.note-honest{
  display:flex;gap:14px;padding:20px 22px;
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--canvas);color:var(--text);font-size:14.5px;line-height:1.7;
}
.note-honest svg{flex:none;width:20px;height:20px;margin-block-start:2px;color:var(--muted)}

/* ════════════════════════════════════════════════════════════
   FAQ   WP block: wsool/faq — MUST stay in sync with FAQPage JSON-LD
   ════════════════════════════════════════════════════════════ */
.faq-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(32px,7vw,110px);align-items:start}
.faq-title{position:sticky;inset-block-start:calc(var(--header-h) + 40px)}
.faq-list{border-block-start:1px solid var(--ink)}
.faq-list details{border-block-end:1px solid var(--line)}
.faq-list summary{
  position:relative;display:flex;align-items:center;min-height:var(--tap);
  padding:22px 0;padding-inline-end:44px;
  list-style:none;font-size:17px;font-weight:700;cursor:pointer;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before,.faq-list summary::after{
  content:"";position:absolute;inset-inline-end:4px;inset-block-start:50%;
  width:15px;height:1.6px;background:var(--ink);transition:transform var(--dur-fast);
}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(0)}
.faq-list details>div,.faq-list details>p{max-width:72ch;margin:0;padding-block-end:22px;color:var(--text);font-size:var(--fs-sm);line-height:1.78}

/* ════════════════════════════════════════════════════════════
   CTA BAND   WP block: wsool/cta-band
   ════════════════════════════════════════════════════════════ */
.cta-band{padding-block:var(--section-y);background:var(--ink-deep);color:#fff}
.cta-band-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,80px);align-items:center}
.cta-band h2{margin:0;font-size:var(--fs-h2);letter-spacing:var(--track-tight);color:#fff}
.cta-band h2 span{color:var(--coral)}
.cta-band p{margin:16px 0 0;max-width:56ch;color:var(--on-dark-soft);font-size:var(--fs-sm)}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* ════════════════════════════════════════════════════════════
   LEAD FORM   WP block: wsool/lead-form
   Endpoint is read from a single config value in forms.js — never inline.
   ════════════════════════════════════════════════════════════ */
.lead-form{padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas)}
.lead-form.on-paper{background:var(--paper)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px}
.field-full,.form-actions,.form-message,.form-consent{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:700}
.field .req{color:var(--coral-ink)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:10px 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-xs);
  background:#fff;color:var(--ink);outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field textarea{min-height:104px;padding-block:14px;line-height:1.6;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--coral-ink);box-shadow:0 0 0 4px rgba(176,58,32,.12);
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--bad)}
.field-error{min-height:0;color:var(--bad-ink);font-size:13.5px;font-weight:600}
.field-error:empty{display:none}
.contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-consent{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.form-consent a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.form-actions{display:flex;align-items:center;gap:16px;margin-block-start:4px}
.form-note{max-width:34ch;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.form-message{min-height:22px;margin:0;font-size:13.5px;font-weight:600}
.form-message.success{color:var(--good)}
.form-message.error{color:var(--bad-ink)}
.form-message.info{color:var(--muted)}
/* Honeypot: hidden from people but still present and fillable, so bots that
   skip display:none fields still trip it. Clipped in place rather than pushed
   off-screen — an offset like `inset-inline-start:-9999px` resolves to
   `right:-9999px` under RTL and drags the whole document 9999px wide. */
.hp{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.btn-loading{position:relative;color:transparent!important}
.btn-loading::before{
  content:"";position:absolute;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-block-start-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-loading::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════
   FOOTER   WP: parts/footer.html
   ════════════════════════════════════════════════════════════ */
.site-footer{padding-block:var(--sp-7) 22px;background:var(--ink-deep);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,.6fr);gap:clamp(28px,5vw,72px);padding-block-end:56px}
.footer-brand img{width:110px}
.footer-brand p{max-width:44ch;margin:20px 0 0;color:var(--on-dark-soft);font-size:14.5px;line-height:1.7}
.socials{display:flex;gap:8px;margin-block-start:22px}
.socials a{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border:1px solid var(--on-dark-line);border-radius:50%;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.socials a:hover{background:var(--coral-ink);border-color:var(--coral-ink);transform:translateY(-3px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.footer-col{display:grid;align-content:start;gap:2px}
.footer-col h3{margin:0 0 10px;color:#fff;font-size:14.5px}
.footer-col a{display:flex;align-items:center;min-height:34px;color:var(--on-dark-soft);font-size:14px}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  padding-block-start:20px;border-block-start:1px solid var(--on-dark-line);
  color:var(--on-dark-mute);font-size:13px;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}
.footer-legal a:hover{color:#fff}
.lang-switch{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);color:var(--on-dark-soft);font-weight:600}
.lang-switch:hover{color:#fff}

/* Sticky mobile CTA — shown only between the hero and the form. */
.mobile-cta{display:none}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  :root{--wrap:min(100% - 36px,1280px);--wrap-narrow:min(100% - 36px,760px)}
  .nav-links,.menu-panel{display:none}
  .burger{display:grid}
  .nav-cta{display:none}   /* the drawer pins its own copy */
  .section-head,.page-hero-grid,.faq-grid,.cta-band-inner{grid-template-columns:1fr}
  .cta-band-actions{justify-content:flex-start}
  .faq-title{position:relative;inset-block-start:auto}
  .cols-3,.cols-4,.tool-groups,.stat-row{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow-step:nth-child(2)::after{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .phase{grid-template-columns:84px 1fr}
  .phase p{grid-column:2}
}
@media(max-width:760px){
  :root{--wrap:min(100% - 28px,1280px);--wrap-narrow:min(100% - 28px,760px);--radius:13px;--header-h:64px}
  body{font-size:15.5px}
  .brand img{width:86px}
  .cols-2,.cols-3,.cols-4,.fit-split,.tool-groups,.stat-row,.contact-pair,.form-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  /* Vertical stack: the connector now points down, not along the inline axis. */
  .flow-step:not(:last-child)::after{
    inset-block-start:auto;inset-block-end:-12px;inset-inline:0;margin-inline:auto;
    transform:rotate(90deg);
  }
  [dir="rtl"] .flow-step:not(:last-child)::after{transform:rotate(90deg)}
  .flow-step:nth-child(2)::after{display:block}
  .page-hero{padding-block:30px var(--section-y-sm)}
  .page-hero-media{aspect-ratio:3/2}
  .phase{grid-template-columns:52px 1fr;gap:16px;padding-block:26px}
  .phase-no{font-size:32px}
  .phase h3{font-size:22px}
  .faq-list summary{font-size:16px;padding-block:19px}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%}
  .form-note{max-width:none;text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:34px;padding-block-end:38px}
  .footer-bottom{flex-direction:column}
  .mobile-cta{
    position:fixed;z-index:180;inset:auto 10px calc(10px + env(safe-area-inset-bottom));
    display:block;opacity:0;transform:translateY(18px);pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .mobile-cta.show{opacity:1;transform:none;pointer-events:auto}
  .mobile-cta .btn{width:100%;box-shadow:0 13px 34px rgba(23,38,45,.22)}
}

/* ════════════════════════════════════════════════════════════
   CLIENT WALL — WP block: wsool/marquee
   The client logos, as a wall rather than a ticker.

   Two rows slide in OPPOSITE directions at slightly different speeds. That
   counter-motion is the whole idea: a single row reads as a conveyor belt
   carrying decoration past you, while two rows drifting against each other
   read as a crowd — a lot of people, all at once. It also means the wall
   never repeats the same pairing twice, so the eye keeps finding new marks.

   How each endless row works, in plain language:
   the track contains the same list of logos TWICE. JavaScript slides the
   track sideways a little on every frame; the moment it has travelled the
   width of ONE copy it snaps back to zero. At that instant copy 2 is sitting
   exactly where copy 1 was, so the eye never sees a jump or a gap.

   The sliding is done in JS (not a CSS animation) for one reason: a finger
   drag and a CSS animation would fight each other over the same transform.
   One owner of the transform = no fighting. See assets/js/site.js.
   ════════════════════════════════════════════════════════════ */
.marquee-band{
  padding-block:clamp(34px,4.4vw,56px);
  /* A light band, not a dark one. The logos are the subject here, and every
     mark already carries its own colour — a dark field forced each of them
     onto a white tile that read as a stamp collection. The band takes --paper
     so it lifts clear of the --canvas page around it: an earlier pass used
     --canvas here and the whole section vanished into the background. */
  background:var(--paper);
  color:var(--ink);
  border-block:1px solid var(--line);
}
.marquee-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  margin:0 0 clamp(18px,2.2vw,26px);
}
.marquee-label{
  /* A sentence now, not a one-word kicker: no wide tracking (it pulls Arabic
     letterforms apart) and a size you can actually read. */
  margin:0;color:var(--ink);font-size:clamp(15px,1.7vw,18px);font-weight:700;
}
/* The count is the proof. It is a plain fact, not a verdict, so it stays
   neutral ink — never a meaning colour. */
.marquee-count{
  margin:0;color:var(--text);font-size:14px;font-weight:600;
}
/* The window a track slides behind. The mask softens both edges so logos
   fade in and out instead of being chopped off by a hard border. */
.marquee{
  /* The page is RTL. Without this the max-content track overflows to the
     LEFT, so sliding it further left just reveals blank band. */
  direction:ltr;
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.marquee + .marquee{margin-top:clamp(10px,1.2vw,16px)}
.marquee-track{
  padding-block:6px;
  /* Laid out left-to-right even on this RTL page: logo order carries no
     meaning, and one fixed direction keeps the loop maths simple. */
  direction:ltr;
  display:flex;align-items:center;
  width:max-content;will-change:transform;
  /* pan-y = the browser keeps vertical page scrolling, we take the
     horizontal swipe for the drag. */
  touch-action:pan-y;
  cursor:grab;
}
.marquee.is-dragging .marquee-track{cursor:grabbing}
.marq-logo{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(124px,13.5vw,164px);height:clamp(70px,7.6vw,90px);
  /* Spacing lives on the item, NOT as flex `gap`. With `gap` the browser puts
     a space BETWEEN items only — 53 spaces for 54 logos — so half the track
     would be half a space short of one full copy and the loop would creep out
     of line a little on every lap. A trailing margin on every logo makes each
     copy exactly the same width, which keeps the seam invisible forever. */
  margin-inline-end:clamp(14px,1.8vw,26px);
  padding:clamp(9px,1.1vw,14px);
  /* A quiet tile: light enough to carry a dark mark, soft enough not to read
     as a sticker. It takes --canvas against the --paper band — the inverse of
     the page — so each mark sits in its own faint well rather than on a hard
     white rectangle. */
  background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(23,38,45,.04);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
}
/* Resting state is slightly held back so the wall reads as one calm texture;
   the mark you point at comes fully forward. Desaturation is never the only
   signal — the lift and the shadow carry it too. */
@media(hover:hover){
  .marq-logo img{opacity:.82;filter:saturate(.72);transition:opacity .35s,filter .35s}
  .marq-logo:hover{
    transform:translateY(-3px);
    border-color:rgba(23,38,45,.12);
    box-shadow:0 10px 26px rgba(23,38,45,.10);
  }
  .marq-logo:hover img{opacity:1;filter:none}
}
.marq-logo img{
  /* The tile has a fixed width and height, so its content box is DEFINITE and
     these percentages actually resolve — which is what an earlier max-height:100%
     could not do on an auto-sized box, and why tall marks used to spill past the
     band. object-fit letterboxes each mark inside its own tile. */
  width:100%;height:100%;object-fit:contain;
  -webkit-user-drag:none;user-select:none;
}
@media(prefers-reduced-motion:reduce){
  /* JS reads this same query and stops the automatic sliding; dragging by
     hand still works. */
  .marquee-track{will-change:auto}
}