/* ============================================================
   WSOOL — PAGE TEMPLATES
   Sections that belong to one template family. Anything reused by three
   or more templates lives in components.css instead.

   Template families:
     .hero / .manifesto / .story / .opportunity   → homepage
     .solution-*                                  → solution pages
     .industry-*                                  → industry pages
     .prose / .toc / .article-*                   → insight articles
     .calc-*                                      → tools
     .lp-*                                        → advertising landing pages
     .legal / .about-*                            → legal + about
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — HERO   WP block: wsool/hero
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-items:center;min-height:100dvh;
  padding-block:calc(var(--header-h) + 46px) 72px;background:var(--canvas);
}
.hero::before{
  content:"";position:absolute;z-index:-2;
  width:520px;aspect-ratio:1;border-radius:50%;
  inset-inline-start:-190px;inset-block-end:-280px;
  border:74px solid rgba(232,92,60,.06);
}
.hero::after{
  content:"";position:absolute;z-index:-2;
  width:460px;height:310px;
  inset-inline-start:-80px;inset-block-start:72px;
  border-end-end-radius:230px;background:var(--peach);
}
.hero-grid{display:grid;grid-template-columns:minmax(420px,.95fr) minmax(480px,1.05fr);gap:clamp(40px,6vw,90px);align-items:center}
.hero-copy{position:relative;z-index:3}
/* The headline names the category and the escape from referrals, so it is a
   far longer line than the 100px this was set at, where it broke into five
   and pushed the buttons off the fold. Sized to land in four. */
.hero h1{margin:0;font-size:clamp(38px,4.6vw,66px);font-weight:700;line-height:var(--lh-hero);letter-spacing:var(--track-display)}
.hero h1 span{display:block;color:var(--coral)}
.hero-sub{max-width:56ch;margin:26px 0 0;color:var(--text);font-size:clamp(16px,1.4vw,20px);line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-block-start:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block-start:26px;color:var(--muted);font-size:13.5px}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}

.hero-figure{position:relative}
.hero-media{
  position:relative;overflow:hidden;
  height:min(66vh,640px);min-height:420px;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Sibling of .hero-media, never a child: .hero-media both clips and animates
   a clip-path, either of which would shear off the overhanging card. */
.outcome-card{
  position:absolute;z-index:5;
  inset-inline-start:-26px;inset-block-end:44px;width:min(272px,66%);
  padding:20px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.95);box-shadow:0 18px 42px rgba(23,38,45,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.outcome-card small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:var(--track-wide)}
.outcome-card strong{display:block;margin-block-start:6px;font-size:18px;line-height:1.35}
.outcome-card span{display:block;margin-block-start:7px;color:var(--coral-ink);font-size:13px;font-weight:700}


/* ════════════════════════════════════════════════════════════
   SOLUTIONS — TWO PILLARS   WP block: wsool/pillar
   Two services, each with its components nested underneath. The nesting is
   the argument: these are parts of one engine, not a menu of six things.
   ════════════════════════════════════════════════════════════ */
.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);align-items:start}
.pillar{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.pillar-head{display:flex;flex-direction:column}
.pillar-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--canvas)}
.pillar-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .8s var(--ease),filter var(--dur)}
.pillar:hover .pillar-img img{transform:scale(1.04);filter:saturate(.98)}
.pillar-body{padding:clamp(20px,2.2vw,28px)}
.pillar-body p{margin:10px 0 16px;color:var(--text);font-size:var(--fs-sm);line-height:1.7}
.pillar-subs{
  display:grid;gap:2px;
  margin-block-start:auto;padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px);
}
.pillar-subs a{
  display:block;padding:13px 16px;border-radius:var(--radius-sm);
  background:var(--canvas);transition:background var(--dur-fast);
}
.pillar-subs a:hover{background:var(--peach-soft)}
.pillar-subs strong{display:block;color:var(--ink);font-size:14.5px}
.pillar-subs span{display:block;margin-block-start:3px;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — BRAND STATEMENT   WP block: wsool/statement
   ════════════════════════════════════════════════════════════ */
.manifesto{
  position:relative;overflow:hidden;
  display:grid;place-items:center;min-height:96dvh;
  padding:clamp(96px,13vw,155px) 24px;background:var(--paper);text-align:center;
}
.manifesto-index{
  position:absolute;inset-block-start:11vh;inset-inline-end:max(24px,calc((100vw - 1280px)/2));
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:var(--track-wide);
}
.manifesto h2{max-width:20ch;margin:0;font-size:clamp(36px,6.6vw,104px);font-weight:500;line-height:var(--lh-hero);letter-spacing:var(--track-tight)}
.manifesto h2 span{color:var(--coral)}
.manifesto>p{position:absolute;inset-block-end:9vh;max-width:52ch;margin:0;color:var(--text);font-size:15px}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — THE DARK CHAPTER   WP block: wsool/story
   Track = 5 triggers. Height is set here, not in JS, so the geometry is
   inspectable and the section can never become an unescapable scroll trap.
   ════════════════════════════════════════════════════════════ */
.story{position:relative;min-height:500dvh;background:var(--ink);color:#fff}
.story-stage{
  position:sticky;inset-block-start:0;height:100dvh;overflow:hidden;
  display:grid;grid-template-columns:minmax(400px,1fr) minmax(400px,1fr);
  gap:clamp(32px,6vw,90px);align-items:center;
  padding:9vh max(24px,calc((100vw - 1280px)/2));
}
.story-stage::before{content:"";position:absolute;inset:8% 4%;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);pointer-events:none}
.story-visual{position:relative;height:72vh;overflow:hidden;border-radius:var(--radius);background:var(--ink-deep)}
.story-visual::after{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(0deg,rgba(16,32,39,.36),transparent 48%)}
.story-watermark{
  position:absolute;z-index:7;inset-block-end:16px;inset-inline-end:18px;
  color:var(--on-dark-mute);font-size:11.5px;font-weight:700;direction:ltr;letter-spacing:var(--track-wide);
}
.story-copy{position:relative;z-index:5}
.stage-no{display:flex;align-items:center;gap:10px;color:var(--coral);font-size:12px;font-weight:700;direction:ltr;letter-spacing:var(--track-wide)}
[dir="rtl"] .stage-no{flex-direction:row-reverse;justify-content:flex-end}
.stage-no::after{content:"";width:30px;height:1px;background:currentColor}
.story-copy h2{margin:16px 0 0;color:#fff;font-size:clamp(38px,7vw,104px);line-height:var(--lh-display);letter-spacing:var(--track-display)}
.story-copy h2 span{display:block;color:var(--coral)}
.story-copy p{max-width:46ch;margin:22px 0 0;color:var(--on-dark-soft);font-size:17px;line-height:1.78}
.story-output{display:flex;align-items:flex-start;gap:11px;margin-block-start:24px;color:#fff;font-size:14px;font-weight:600;line-height:1.6}
.story-output i{flex:none;width:7px;height:7px;margin-block-start:.5em;border-radius:50%;background:var(--coral);box-shadow:0 0 0 6px rgba(232,92,60,.12)}
.story-progress{
  position:absolute;z-index:8;inset-block-end:7vh;inset-inline-start:max(24px,calc((100vw - 1280px)/2));
  display:flex;align-items:center;gap:13px;direction:ltr;
}
.story-count{min-width:48px;color:var(--on-dark-mute);font-size:12px;font-weight:700}
.story-track{position:relative;width:128px;height:1px;background:rgba(255,255,255,.18)}
.story-track span{position:absolute;inset-block:0;inset-inline-start:0;width:20%;background:var(--coral);transition:width .55s var(--ease)}
.story-triggers{position:absolute;inset:0;z-index:10;pointer-events:none}
.story-trigger{height:100dvh}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — OPPORTUNITY HANDOFF
   Answers the single most commercial question on the page — "what exactly
   do I receive?" — as an object you can look at, not a paragraph.
   WP block: wsool/opportunity
   ════════════════════════════════════════════════════════════ */
.opportunity{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.opp-card{
  overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-md);
}
.opp-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-block-end:1px solid var(--line);background:var(--canvas);
}
.opp-head strong{font-size:15px}
.opp-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--peach);color:var(--coral-ink);font-size:13px;font-weight:700;
}
.opp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.opp-grid{display:grid;grid-template-columns:1fr 1fr}
.opp-cell{padding:20px 22px;border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
.opp-cell:nth-child(-n+2){border-block-start:0}
.opp-cell:nth-child(odd){border-inline-start:0}
.opp-cell small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:var(--track-wide)}
.opp-cell strong{display:block;margin-block-start:8px;font-size:15.5px;line-height:1.45}
.opp-cell p{margin:6px 0 0;color:var(--text);font-size:13.5px;line-height:1.6}
.opp-foot{display:flex;align-items:center;gap:10px;padding:15px 22px;border-block-start:1px solid var(--line);background:var(--peach-soft);color:var(--coral-ink);font-size:13.5px;font-weight:700}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — SPLIT (who does what)   WP block: wsool/split
   ════════════════════════════════════════════════════════════ */
.split-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}
.split-side{min-height:360px;padding:clamp(26px,3vw,46px);background:var(--paper)}
.split-side+.split-side{background:var(--peach-soft);border-inline-start:1px solid var(--line)}
.split-side small{display:block;color:var(--coral-ink);font-size:11.5px;font-weight:700;letter-spacing:var(--track-wide)}
.split-side h3{max-width:18ch;margin:26px 0 0;font-size:clamp(22px,2.6vw,34px);letter-spacing:var(--track-tight)}
.split-side>p{max-width:44ch;margin:15px 0 0;color:var(--text);font-size:var(--fs-sm)}
.split-side ul{display:grid;gap:9px;margin-block-start:22px;color:var(--text);font-size:13.5px}
.split-side li{display:flex;align-items:center;gap:10px}
.split-side li::before{content:"";flex:none;width:16px;height:2px;background:var(--coral)}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — THE PROGRAM   WP block: wsool/offer
   One primary commercial offer. Continuation after it is a note, never a
   second card of equal weight — that was the "two ways to work with us"
   pattern this replaces.
   ════════════════════════════════════════════════════════════ */
.program-mark{color:var(--coral);font-size:clamp(90px,13vw,190px);font-weight:600;line-height:.72;direction:ltr;letter-spacing:var(--track-display)}
.offer-primary{
  position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,64px);
  padding:clamp(28px,3.4vw,48px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas);
}
.offer-primary::before{content:"";position:absolute;inset-block-start:0;inset-inline:32px;height:3px;border-end-start-radius:3px;border-end-end-radius:3px;background:var(--coral)}
.offer-tag{
  display:inline-flex;align-self:flex-start;
  padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--peach);color:var(--coral-ink);font-size:13px;font-weight:700;
}
.offer-primary h3{margin:16px 0 0;font-size:clamp(26px,3.2vw,42px);letter-spacing:var(--track-tight)}
.offer-line{margin:12px 0 0;color:var(--ink);font-size:17px;font-weight:600}
.offer-primary p.offer-body{margin:14px 0 0;max-width:52ch;color:var(--text);font-size:var(--fs-sm);line-height:1.75}
.offer-actions{display:flex;flex-wrap:wrap;gap:11px;margin-block-start:26px}
.offer-aside{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.offer-aside h4{margin:0 0 14px;font-size:14px;color:var(--muted);letter-spacing:var(--track-wide)}
.offer-after{margin-block-start:var(--sp-4)}

/* ════════════════════════════════════════════════════════════
   SOLUTION + INDUSTRY PAGES
   ════════════════════════════════════════════════════════════ */
.sig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sig{
  display:flex;gap:13px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);
  color:var(--text);font-size:15px;line-height:1.6;
}
.sig::before{
  content:"";flex:none;width:20px;height:20px;margin-block-start:1px;border-radius:50%;
  background:var(--peach);
  box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 7px var(--coral);
}
.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.deliverable{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.deliverable svg{flex:none;width:20px;height:20px;margin-block-start:2px;color:var(--coral-ink)}
.deliverable strong{display:block;font-size:15.5px}
.deliverable p{margin:5px 0 0;color:var(--text);font-size:14px;line-height:1.6}

.scenario{padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.scenario-tag{display:inline-flex;padding:5px 12px;border-radius:var(--radius-pill);background:var(--canvas);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:var(--track-wide)}
.scenario h3{margin:16px 0 0;font-size:var(--fs-h4)}
.scenario dl{display:grid;gap:14px;margin:18px 0 0}
.scenario dt{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:var(--track-wide)}
.scenario dd{margin:5px 0 0;color:var(--text);font-size:14.5px;line-height:1.68}

.buyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.buyer{padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.buyer strong{display:block;font-size:15.5px}
.buyer span{display:block;margin-block-start:6px;color:var(--coral-ink);font-size:13px;font-weight:700}
.buyer p{margin:9px 0 0;color:var(--text);font-size:14px;line-height:1.6}

/* ════════════════════════════════════════════════════════════
   ARTICLE / INSIGHTS
   ════════════════════════════════════════════════════════════ */
/* Articles are deliberately plain: a white page, well-set text, quotes and
   figures placed where they help. No blog-only visual language — an article
   should read like the rest of the site, not like a separate product. */
.article-head{padding-block:34px var(--sp-6);background:var(--paper)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-block-start:var(--sp-3);color:var(--muted);font-size:13.5px}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.article-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.toc{position:sticky;inset-block-start:calc(var(--header-h) + 30px)}
.toc h2{margin:0 0 12px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:var(--track-wide)}
.toc a{display:block;padding-block:7px;color:var(--text);font-size:14px;line-height:1.5;border-inline-start:2px solid var(--line);padding-inline-start:13px}
.toc a:hover,.toc a.active{color:var(--ink);border-inline-start-color:var(--coral)}

.prose{max-width:72ch;color:var(--text);font-size:17px;line-height:1.85}
.prose>*+*{margin-block-start:1.15em}
.prose h2{margin-block-start:1.9em;color:var(--ink);font-size:clamp(24px,2.6vw,34px);letter-spacing:var(--track-tight);scroll-margin-block-start:calc(var(--header-h) + 24px)}
.prose h3{margin-block-start:1.6em;color:var(--ink);font-size:clamp(19px,1.9vw,23px);scroll-margin-block-start:calc(var(--header-h) + 24px)}
.prose h2+p,.prose h3+p{margin-block-start:.7em}
.prose strong{color:var(--ink)}
.prose a:not(.btn):not(.link-arrow){color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul,.prose ol{display:grid;gap:10px;padding-inline-start:0}
.prose ul li{position:relative;padding-inline-start:24px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:.72em;width:8px;height:8px;border-radius:50%;border:2px solid var(--coral)}
.prose ol{counter-reset:p-ol}
.prose ol li{position:relative;padding-inline-start:34px;counter-increment:p-ol}
.prose ol li::before{
  content:counter(p-ol);position:absolute;inset-inline-start:0;inset-block-start:.15em;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--peach);color:var(--coral-ink);font-size:13px;font-weight:700;direction:ltr;
}
.prose blockquote{
  margin-inline:0;padding:20px 24px;border-inline-start:3px solid var(--coral);
  border-radius:var(--radius-sm);background:var(--peach-soft);
  color:var(--ink);font-size:16px;line-height:1.75;
}
.prose figure{margin-inline:0}
.prose figure img{border-radius:var(--radius);border:1px solid var(--line)}
.prose figcaption{margin-block-start:10px;color:var(--muted);font-size:13.5px;text-align:center}

/* Article imagery.
   .article-cover  — the opening image, full column width.
   .figure-diagram — a hand-authored inline SVG explainer. Given more breathing
   room than a photo because it is read, not glanced at, and a light surface so
   the token-coloured strokes inside it keep their contrast. */
.article-cover{margin-inline:0;margin-block-start:var(--sp-4)}
.article-cover img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.figure-diagram{
  margin-inline:0;padding:clamp(18px,2.6vw,28px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--canvas);
}
/* The 520px cap is deliberate. The viewBox is 400 units wide, so an uncapped
   width:100% renders the diagram near 640px on desktop and pushes the type
   inside it above the 17px prose size — the explainer would then shout louder
   than the paragraph it explains. Capped, it lands ~1.3x on desktop and
   ~0.77x at a 390px viewport. */
.figure-diagram svg{display:block;width:100%;max-width:520px;height:auto;margin-inline:auto}
.figure-diagram figcaption{margin-block-start:14px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.prose th,.prose td{padding:13px 16px;text-align:start;border-block-end:1px solid var(--line)}
.prose th{background:var(--canvas);color:var(--ink);font-size:13.5px;font-weight:700}
.prose tr:last-child td{border-block-end:0}

.article-cta{margin-block-start:var(--sp-6);padding:clamp(24px,3vw,36px);border-radius:var(--radius);background:var(--ink);color:#fff}
.article-cta h2{margin:0;color:#fff;font-size:var(--fs-h3)}
.article-cta p{margin:12px 0 22px;max-width:52ch;color:var(--on-dark-soft);font-size:15.5px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:var(--sp-6)}

.insight-filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:var(--sp-5)}
.insight-filters a{
  display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--text);font-size:14px;font-weight:600;
}
.insight-filters a:hover{border-color:var(--ink);color:var(--ink)}
.insight-filters a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cluster{margin-block-start:var(--sp-7)}
.cluster:first-of-type{margin-block-start:0}
.cluster-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-block-end:var(--sp-4);padding-block-end:14px;border-block-end:1px solid var(--line)}
.cluster-head h2{margin:0;font-size:var(--fs-h3)}
.cluster-head p{margin:0;color:var(--muted);font-size:14px}

/* ════════════════════════════════════════════════════════════
   TOOLS / CALCULATORS   WP block: wsool/calculator
   Runs entirely in the browser. No values leave the page, and that is
   stated on the page — it is the reason a cautious buyer will use it.

   Built for a phone first. The answer sits above the controls and the
   whole instrument is tight enough that at 375px a visitor sees a real
   number on first paint and reaches the sliders in one short scroll —
   which is why this section carries its own reduced block-start padding
   instead of .section's full rhythm. The two-column desktop layout is
   the exception, added back at 1081px.

   Nothing here uses a physical direction. The slider fill is an
   absolutely positioned element anchored with inset-inline-start, not a
   gradient, precisely so the same rule fills rightwards in English and
   leftwards in Arabic with no per-language override.
   ════════════════════════════════════════════════════════════ */
.calc-section{padding-block:var(--sp-3) var(--section-y)}
.calc{display:grid;grid-template-columns:1fr;gap:var(--sp-2);align-items:start}

/* ── The answer ─────────────────────────────────────────────
   One number carries the page. The two figures under it explain where
   it came from; anything beyond that is a report, not an answer. */
.calc-panel{
  padding:var(--sp-3);border-radius:var(--radius);
  background:var(--ink);color:var(--on-dark);box-shadow:var(--shadow-md);
}
.calc-label{
  display:block;margin:0;color:var(--on-dark-soft);
  font-size:var(--fs-sm);font-weight:700;line-height:var(--lh-snug);
}
/* Western digits, tabular, so the number does not jitter while it counts. */
.calc-big{
  display:block;margin:0;margin-block-start:var(--sp-1);
  color:var(--coral);font-size:clamp(38px,10.5vw,68px);font-weight:600;
  line-height:var(--lh-tight);font-variant-numeric:tabular-nums;
}
.calc-note{
  display:block;margin:0;margin-block-start:var(--sp-1);
  color:var(--on-dark-soft);font-size:var(--fs-xs);line-height:var(--lh-snug);
}
.calc-support{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);
  margin-block-start:var(--sp-3);padding-block-start:var(--sp-3);
  border-block-start:1px solid var(--on-dark-line);
}
.calc-support .calc-label{color:var(--on-dark-mute);font-size:var(--fs-xs)}
.calc-mid{
  display:block;margin:0;margin-block-start:var(--sp-1);
  color:var(--on-dark);font-size:clamp(21px,5.6vw,28px);font-weight:600;
  line-height:var(--lh-tight);font-variant-numeric:tabular-nums;
}
/* The assumptions we baked in, said out loud next to the number they move. */
.calc-assume{
  margin:0;margin-block-start:var(--sp-3);
  color:var(--on-dark-mute);font-size:var(--fs-xs);line-height:var(--lh-body);
}

/* ── The controls ───────────────────────────────────────────
   Drag beats type on a phone, so the slider is the primary control and
   the number field beside the label is both the live read-out and the
   way to enter an exact figure. */
.calc-controls{
  display:grid;gap:var(--sp-3);padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.calc-control{display:grid;gap:var(--sp-1)}
.calc-control-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.calc-control-head label{margin:0;color:var(--ink);font-size:var(--fs-sm);font-weight:700;line-height:var(--lh-snug)}
.calc-entry{display:flex;flex:none;align-items:center;gap:var(--sp-1)}
.calc-entry>span{color:var(--muted);font-size:var(--fs-sm);font-weight:700}
.calc-num{
  inline-size:var(--sp-7);min-block-size:var(--tap);padding:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-xs);
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:var(--fs-body);font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.calc-num:hover{border-color:var(--coral-ink)}
.calc-num:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
.calc-hint{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-snug)}

.calc-track{position:relative;display:grid;align-items:center;min-block-size:var(--tap)}
.calc-track::before,.calc-track-fill{
  position:absolute;inset-block-start:50%;
  block-size:var(--sp-1);margin-block-start:calc(var(--sp-1) / -2);
  border-radius:var(--radius-pill);pointer-events:none;
}
.calc-track::before{content:"";inset-inline:0;background:var(--peach)}
.calc-track-fill{inset-inline-start:0;inline-size:50%;background:var(--coral-ink)}

.calc-range{
  position:relative;-webkit-appearance:none;appearance:none;
  inline-size:100%;min-block-size:var(--tap);margin:0;padding:0;
  background:transparent;cursor:pointer;touch-action:pan-y;
}
.calc-range:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset);border-radius:var(--radius-pill)}
/* Vendor thumb rules must stay in separate blocks — one unknown
   pseudo-element invalidates the whole rule in the other engine. */
.calc-range::-webkit-slider-runnable-track{block-size:var(--sp-4);border:0;background:transparent}
.calc-range::-moz-range-track{block-size:var(--sp-4);border:0;background:transparent}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  inline-size:var(--sp-4);block-size:var(--sp-4);border:0;
  border-radius:var(--radius-pill);background:var(--coral-ink);
  box-shadow:var(--shadow-coral);
  transition:transform var(--dur-fast) var(--ease-out);
}
.calc-range::-moz-range-thumb{
  inline-size:var(--sp-4);block-size:var(--sp-4);border:0;
  border-radius:var(--radius-pill);background:var(--coral-ink);
  box-shadow:var(--shadow-coral);
  transition:transform var(--dur-fast) var(--ease-out);
}
.calc-range:active::-webkit-slider-thumb{transform:scale(1.14)}
.calc-range:active::-moz-range-thumb{transform:scale(1.14)}

.calc-method{margin-block-start:var(--sp-5)}
.calc-method h2{margin:0;margin-block-end:var(--sp-2);font-size:var(--fs-h3)}
.calc-formula{
  margin:0;padding:var(--sp-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--text);
  font-size:var(--fs-sm);line-height:var(--lh-body);
}

@media(min-width:1081px){
  .calc{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .calc-controls{order:-1;gap:var(--sp-4);padding:var(--sp-4)}
  .calc-panel{padding:var(--sp-5)}
}

/* ════════════════════════════════════════════════════════════
   ADVERTISING LANDING PAGES
   Deliberately isolated: no mega menu, one promise, one CTA. Editing an
   LP must never be able to affect the main site.
   ════════════════════════════════════════════════════════════ */
.lp-header{
  position:sticky;inset-block-start:0;z-index:200;
  background:rgba(255,255,255,.95);border-block-end:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.lp-hero{padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,72px);background:var(--canvas)}
.lp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:start}
.lp-hero h1{margin:0;font-size:clamp(34px,4.6vw,60px);letter-spacing:var(--track-display);line-height:var(--lh-h1)}
.lp-hero h1 span{color:var(--coral)}
.lp-hero .lead{margin-block-start:20px}
.lp-points{display:grid;gap:12px;margin-block-start:28px}
.lp-points li{display:flex;gap:12px;color:var(--text);font-size:15px;line-height:1.6}
.lp-points svg{flex:none;width:20px;height:20px;margin-block-start:2px;color:var(--coral-ink)}
.lp-section{padding-block:clamp(48px,6vw,80px)}
.lp-foot{padding-block:34px;background:var(--ink-deep);color:var(--on-dark-mute);font-size:13.5px}
.lp-foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.lp-foot a{color:var(--on-dark-soft)}
.lp-foot a:hover{color:#fff}

/* ════════════════════════════════════════════════════════════
   LEGAL + ABOUT + 404
   ════════════════════════════════════════════════════════════ */
.legal{padding-block:34px var(--section-y)}
.legal .prose h2{margin-block-start:2.2em}
.legal-updated{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-pill);background:var(--canvas);color:var(--muted);font-size:13.5px}

.about-media{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.about-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.76)}
.about-points{display:grid;gap:16px;margin-block-start:30px}
.about-point{padding-block-start:16px;border-block-start:1px solid var(--line)}
.about-point strong{font-size:15px}
.about-point p{margin:5px 0 0;color:var(--text);font-size:14.5px;line-height:1.65}
.principle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.err{display:grid;place-items:center;min-height:78dvh;padding-block:var(--section-y);text-align:center}
.err-code{color:var(--coral);font-size:clamp(80px,14vw,180px);font-weight:600;line-height:.8;direction:ltr;letter-spacing:var(--track-display)}
.err h1{margin:26px 0 0;font-size:var(--fs-h2);letter-spacing:var(--track-tight)}
.err p{max-width:48ch;margin:18px auto 0;color:var(--text)}
.err-links{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-block-start:30px}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .hero-grid,.opportunity,.calc,.lp-hero-grid,.article-layout,.pillar-grid{grid-template-columns:1fr}
  .hero-media{height:54vh;min-height:400px}
  .offer-primary{grid-template-columns:1fr}
  .story-stage{grid-template-columns:1fr 1fr;gap:34px;padding-inline:25px}
  .buyer-grid,.related{grid-template-columns:repeat(2,1fr)}
  .toc{display:none}          /* the article still has its full heading tree */
}
@media(max-width:760px){
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 34px) 96px}
  .hero::after{width:250px;height:170px;inset-inline-start:-100px;inset-block-start:60px}
  .hero h1{font-size:clamp(34px,9vw,52px)}   /* leading stays on --lh-hero */

  /* On a phone the hero is three things in a row — headline, photograph, one
     button — and nothing else. The supporting paragraph and the secondary
     button are both cut: the manifesto a screen below says the same thing at
     more length, and a second button on a small screen only splits the tap.
     display:contents lifts the copy block's children into the grid so the
     photograph can sit between the headline and the button, which live in
     different parents in the markup. */
  .hero-grid{gap:0}
  .hero-copy{display:contents}
  .hero h1{order:1}
  .hero-sub{display:none}
  .hero-figure{order:2;margin-block-start:26px}
  .hero-actions{order:3;margin-block-start:24px}
  .hero-actions .btn-outline{display:none}
  .hero-actions .btn{flex:1 1 100%}
  .hero-media{height:48vh;min-height:320px}
  .outcome-card{inset-inline:12px;inset-block-end:12px;width:auto;padding:15px}
  .outcome-card strong{font-size:15px}
    .manifesto{min-height:auto;padding-block:96px 120px}
  .manifesto-index{inset-block-start:44px;inset-inline-end:16px}
  .manifesto h2{font-size:clamp(30px,8.6vw,50px)}
  .manifesto>p{position:static;margin-block-start:34px;font-size:14.5px}

  /* Mobile keeps the cinematic chapter — it is the signature of the page and
     mobile is most of the traffic. Only the geometry changes: the image pins
     to the top, the copy plays underneath it, and the track shortens to
     5 x 82dvh so the section never feels like a trap. */
  .story{min-height:410dvh}
  .story-stage{
    grid-template-columns:1fr;grid-template-rows:40dvh 1fr;
    gap:20px;align-items:start;
    padding:calc(var(--header-h) + 16px) 20px 26px;
  }
  .story-stage::before{inset:6px;border-radius:var(--radius-sm)}
  .story-visual{height:100%}
  .story-copy h2{font-size:clamp(30px,9.4vw,46px)}
  .story-copy p{margin-block-start:12px;font-size:15px;line-height:1.68}
  .story-output{margin-block-start:14px;font-size:13px}
  .story-progress{inset-block-end:16px;inset-inline-start:20px}
  .story-track{width:84px}
  .story-trigger{height:82dvh}
  .story-watermark{inset-block-end:10px;inset-inline-end:12px;font-size:9px}

  .split-card{grid-template-columns:1fr}
  .split-side+.split-side{border-inline-start:0;border-block-start:1px solid var(--line)}
  .split-side{min-height:0}
  .opp-grid{grid-template-columns:1fr}
  .opp-cell{border-inline-start:0!important;border-block-start:1px solid var(--line)!important}
  .opp-cell:first-child{border-block-start:0!important}
  .sig-grid,.deliverables,.buyer-grid,.principle-grid,.related{grid-template-columns:1fr}
  .prose{font-size:16px}
  .article-cta h2{font-size:var(--fs-h4)}
  .program-mark{font-size:clamp(72px,22vw,120px)}
  .offer-primary{padding:24px 20px}
  .lp-hero .btn,.lp-hero-actions .btn{width:100%}
}

/* ════════════════════════════════════════════════════════════
   INNER PAGES — THE EDITORIAL TREATMENT
   (solutions / industries / process / about / founding-clients)

   The brief, in the owner's words: too much empty space on desktop, type
   too small, boxes that earn nothing, badly composed on the phone, and no
   emphasis on the phrases that should stop a scanner. His own prescription
   was "make it fully white like an article and let the typography do the
   work". That is what this block does.

   Three moves, in order of how much they change:

   1. ONE COLUMN, ONE PAPER. Inner pages stop alternating white / canvas
      bands across a 1280px grid and become a single 820px measured column
      on white, separated by column-width hairlines. Cost of the old model:
      at 1440 a section paid 129.6px of padding at each end (259px of dead
      air between two paragraphs) and the .pipeline paragraphs ran 1252px
      wide — about 110 Arabic characters per line, far past readable.

   2. TYPE THAT IS ACTUALLY READ. Component copy was 14 / 14.5 / 15 / 15.5px
      grey, i.e. caption sizes doing body work. It is now --fs-read
      (18 → 19.5px) with --lh-read leading, and every component sub-head is
      --fs-sub (19 → 22px) so the hierarchy is visible at a glance instead of
      being carried by a border.

   3. RULES INSTEAD OF BOXES. .sig, .deliverable, .flow-step, .fit-col,
      .note-honest, .scenario, .buyer and the related-links cards were 20+
      bordered rounded containers per page. Stacked full-width on a phone a
      bordered box says nothing a hairline does not say more quietly, and it
      costs ~36px of padding per item. They are now hairline-separated
      typographic blocks. Markers that carry MEANING (the flow numbers, the
      fit check/cross, the pipeline nodes, the coral human-review mark) stay.

   Scope. The component rules are unscoped on purpose — .sig, .deliverable,
   .fit-*, .flow-step, .phase, .answer, .scenario, .buyer and .note-honest
   appear on inner pages only, so every one of them improves the moment this
   file loads, with no markup change anywhere. The page SHELL (column width,
   section rhythm, all-white, heading size) is scoped to `main.editorial`,
   because .section / .section-head / .display / .card are shared with the
   homepage and the listing pages, which are not being restyled. Adding the
   class to a page is the whole rollout: <main id="main" class="editorial">.
   ════════════════════════════════════════════════════════════ */

/* ── The direct answer: a lede, not a panel ────────────────
   This is the paragraph an impatient buyer reads instead of scrolling, and
   the one an answer engine quotes. It was 16.5px grey inside a bordered
   card. It is now the largest running text on the page. */
.answer{padding:0;border:0;border-radius:0;background:none}
.answer p{margin:0;color:var(--ink);font-size:var(--fs-lede);font-weight:400;line-height:var(--lh-lede)}
.answer p+p{margin-block-start:var(--sp-2)}
.answer h2{margin:0 0 var(--sp-2);font-size:var(--fs-section);line-height:var(--lh-h2);letter-spacing:var(--track-tight)}
.answer .answer-q{
  display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-2);
  color:var(--coral-ink);font-size:var(--fs-sm);font-weight:700;
  line-height:1.5;letter-spacing:var(--track-wide);
}
.answer .answer-q::before{content:"";flex:none;width:30px;height:2px;background:currentColor}

/* ── Signs you need this ──────────────────────────────────
   Six one-sentence statements. Six bordered cards made them look like six
   products; a ruled list makes them read like symptoms, which is what they
   are. Set in --ink because these are the lines a scanner should catch. */
.sig-grid{grid-template-columns:1fr;gap:0}
.sig{
  gap:14px;padding:15px 0;max-width:68ch;
  border:0;border-radius:0;border-block-start:1px solid var(--line);background:none;
  color:var(--ink);font-size:var(--fs-read);line-height:var(--lh-read);
}
.sig:first-child{border-block-start:0;padding-block-start:0}
.sig::before{
  width:9px;height:9px;margin-block-start:.62em;
  background:var(--coral);box-shadow:none;
}

/* ── Who it is for / who it is not for ────────────────────
   Equal weight is a contract rule, so the two columns keep identical
   typography and are told apart by their markers and a single rule. */
.fit-split{grid-template-columns:1fr;gap:0}
.fit-col{padding:0;border:0;border-radius:0;background:none}
.fit-col.no{background:none}
.fit-col+.fit-col{margin-block-start:var(--sp-4);padding-block-start:var(--sp-4);border-block-start:1px solid var(--line)}
.fit-col h3{margin:0 0 4px;font-size:var(--fs-sub);line-height:var(--lh-sub)}
.fit-col>p{margin:0 0 var(--sp-2);color:var(--muted);font-size:var(--fs-read-sm);line-height:1.6}
.fit-list{gap:13px}
.fit-list li{padding-inline-start:32px;max-width:68ch;font-size:var(--fs-read);line-height:var(--lh-read)}
.fit-list li::before{inset-block-start:.5em;width:18px;height:18px}
.fit-list li::after{inset-inline-start:5.6px;inset-block-start:.8em}
.fit-col.no .fit-list li::after{inset-inline-start:7.4px;inset-block-start:.72em}

/* ── What the client keeps ────────────────────────────────
   The icon is the only ornament that survives: it is a wayfinding cue in a
   list of six similar-shaped items, which a border was not. */
.deliverables{grid-template-columns:1fr;gap:0}
.deliverable{
  gap:15px;padding:18px 0;
  border:0;border-radius:0;border-block-start:1px solid var(--line);background:none;
}
.deliverable:first-child{border-block-start:0;padding-block-start:0}
.deliverable svg{width:22px;height:22px;margin-block-start:.2em;color:var(--coral)}
.deliverable strong{display:block;color:var(--ink);font-size:var(--fs-sub);font-weight:700;line-height:var(--lh-sub)}
.deliverable p{margin:6px 0 0;color:var(--text);font-size:var(--fs-read-sm);line-height:1.7;max-width:62ch}

/* ── Inputs → logic → outputs → human review ──────────────
   The four steps are a sequence; the numbers say so. The connector arrows
   only existed to bridge the gaps between boxes, so they go with the boxes. */
.flow{grid-template-columns:1fr;gap:0}
.flow-step{padding:20px 0;border:0;border-radius:0;background:none;border-block-start:1px solid var(--line)}
.flow-step:first-child{border-block-start:0;padding-block-start:0}
.flow-step:not(:last-child)::after{display:none}
.flow-step::before{
  width:27px;height:27px;margin-block-end:11px;
  border:1.5px solid var(--ink);background:none;color:var(--ink);font-size:13px;
}
.flow-step h3{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.flow-step p{margin:8px 0 0;color:var(--text);font-size:var(--fs-read-sm);line-height:1.7;max-width:64ch}
.flow-step.human{border-color:var(--line);background:none}
.flow-step.human::before{border-color:var(--coral-ink);background:var(--coral-ink);color:#fff}

/* ── Longer systems ───────────────────────────────────────
   Already a ruled timeline, so only the type changes. */
.pipeline strong{color:var(--ink);font-size:var(--fs-sub);line-height:var(--lh-sub)}
.pipeline p{margin:7px 0 0;color:var(--text);font-size:var(--fs-read-sm);line-height:1.7;max-width:64ch}
.pipeline li{padding-block:15px}

/* ── The delivery phases ──────────────────────────────────
   Three columns squeezed the paragraph into a 320px gutter on desktop while
   the 104px number column sat empty. Two columns give the prose the measure
   and put the number where a numbered list puts it. .phase-out is the payoff
   line of each phase — it is now typographically the loudest thing in the
   block, because it is the sentence the reader came for. */
.phase{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,2.2vw,26px);row-gap:10px;padding-block:26px}
.phase p{grid-column:2;max-width:66ch;color:var(--text);font-size:var(--fs-read);line-height:var(--lh-read)}
.phase h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.phase-no{min-width:1.5em;font-size:clamp(28px,25px + .55vw,36px);line-height:1.25}
.phase-meta{margin-block-start:6px;font-size:var(--fs-xs)}
.phase-out{
  position:relative;display:block;margin-block-start:14px;padding-inline-start:24px;
  color:var(--ink);font-size:var(--fs-read-sm);font-weight:700;line-height:1.6;
}
.phase-out::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.66em;
  width:15px;height:2px;background:var(--coral);
}

/* ── Asides, honesty notes, illustrative scenarios ────────
   A dashed border is the loudest way to say "this is a footnote". A rule and
   a quieter size say it better. The scenario keeps a peach edge because it is
   the one block on the page that must not be mistaken for a claim. */
.note-honest{
  gap:14px;padding:var(--sp-3) 0 0;
  border:0;border-block-start:1px solid var(--line);border-radius:0;background:none;
  color:var(--text);font-size:var(--fs-read-sm);line-height:1.75;
}
.note-honest svg{width:21px;height:21px;margin-block-start:.22em;color:var(--coral)}
.note-honest strong{color:var(--ink)}
.scenario{
  padding:0;padding-inline-start:var(--sp-3);border:0;border-radius:0;background:none;
  border-inline-start:2px solid var(--peach);
}
.scenario-tag{padding:0;background:none;color:var(--coral-ink)}
.scenario h3{margin:10px 0 0;font-size:var(--fs-sub);line-height:var(--lh-sub)}
.scenario dl{gap:16px;margin-block-start:var(--sp-2)}
.scenario dd{margin:4px 0 0;font-size:var(--fs-read-sm);line-height:1.75;max-width:64ch}

/* ── Decision-makers in an industry ───────────────────────── */
.buyer-grid{grid-template-columns:1fr;gap:0}
.buyer{padding:16px 0;border:0;border-radius:0;background:none;border-block-start:1px solid var(--line)}
.buyer:first-child{border-block-start:0;padding-block-start:0}
.buyer strong{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.buyer span{margin-block-start:3px;font-size:var(--fs-xs)}
.buyer p{margin:7px 0 0;font-size:var(--fs-read-sm);line-height:1.7;max-width:62ch}

/* ── Checklists, FAQ, related links ───────────────────────── */
.tick-list li{padding-inline-start:26px;max-width:66ch;font-size:var(--fs-read);line-height:var(--lh-read)}
.tick-list li::before{inset-block-start:.66em}
.faq-list summary{padding-block:20px;font-size:var(--fs-sub);line-height:var(--lh-sub)}
.faq-list details>div,.faq-list details>p{padding-block-end:22px;max-width:66ch;font-size:var(--fs-read-sm);line-height:1.8}
.related{grid-template-columns:1fr;gap:0;margin-block-start:var(--sp-3)}
.related .card{padding:19px 0;border:0;border-radius:0;background:none;border-block-start:1px solid var(--line)}
.related .card:first-child{border-block-start:0;padding-block-start:0}
.related .card h3{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.related .card p{margin:7px 0 0;font-size:var(--fs-read-sm);line-height:1.7;max-width:64ch}
.related .card .link-arrow{min-height:0;padding-block-start:10px;font-size:var(--fs-xs);letter-spacing:var(--track-wide)}
.related .card-link:hover{transform:none;box-shadow:none;border-color:var(--line)}
.related .card-link:hover h3{color:var(--coral-ink)}

/* ── About page blocks ────────────────────────────────────── */
.about-point strong{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.about-point p{margin:6px 0 0;font-size:var(--fs-read-sm);line-height:1.75;max-width:64ch}

/* ── The key phrase ───────────────────────────────────────
   The one deliberate emphasis mark. A scanner reading nothing but the
   highlighted phrases should still get the argument. Peach band, ink text —
   loud enough to catch the eye, quiet enough that three of them on a page do
   not turn it into a colouring book. Never inside a heading; never more than
   two or three per page. `strong` stays the ordinary, quieter emphasis. */
.key{
  color:var(--ink);font-weight:700;padding-inline:2px;
  background:linear-gradient(to top,var(--peach) 0 .4em,transparent .4em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ════════════════════════════════════════════════════════════
   THE EDITORIAL PAGE SHELL — opt in with <main id="main" class="editorial">
   ════════════════════════════════════════════════════════════ */
.editorial{background:var(--paper);font-size:var(--fs-read);line-height:var(--lh-read)}
.editorial p strong,.editorial li strong{color:var(--ink);font-weight:700}

/* One paper. The alternating canvas/paper bands were what forced the huge
   section padding: a band needs air around it to read as a band. A rule needs
   none, so the rhythm can tighten by ~30% and still feel calmer. */
.editorial>section{position:relative;background:var(--paper)}
.editorial>.cta-band{background:var(--ink-deep)}
.editorial>section.section{padding-block:var(--section-y-read)}
.editorial>section.section-sm{padding-block:calc(var(--section-y-read) * .72)}
.editorial>.page-hero{padding-block:var(--sp-2) calc(var(--section-y-read) * .82)}
.editorial>.cta-band{padding-block:var(--section-y-read)}

/* One column, at the width of the type — not at the width of the screen. */
.editorial>.wrap,
.editorial>section>.wrap,
.editorial>section>.wrap-narrow{width:var(--wrap-read)}

/* The section rule is the width of the column, not of the viewport: a
   full-bleed hairline at 1440 reads as a dashboard divider, a column-width
   one reads as a page. */
.editorial>section+section:not(.cta-band)::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  width:var(--wrap-read);height:1px;margin-inline:auto;background:var(--line);
}

/* Masthead. Single column at every width: the 2-up hero put a 68px headline
   into a 388px well once the page column narrowed. */
.editorial .page-hero-grid{grid-template-columns:1fr;gap:var(--sp-4)}
.editorial .page-hero-copy h1{font-size:clamp(37px,29.2px + 2vw,58px)}
.editorial .page-hero-media{aspect-ratio:16/10}
.editorial .lead{max-width:58ch;font-size:var(--fs-deck);line-height:var(--lh-lede)}
.editorial .page-hero-actions{margin-block-start:var(--sp-3)}

/* Section heads. The old two-column head parked a 350px paragraph at the far
   end of a 1280px row, 86px away from its own title — the single biggest
   source of the "فراغات كتير". Title and deck now stack, at a measure. */
.editorial .section-head{grid-template-columns:1fr;gap:10px;align-items:start;margin-block-end:clamp(22px,18.3px + .95vw,36px)}
.editorial .section-head>p{max-width:58ch;color:var(--text);font-size:var(--fs-read-sm);line-height:1.75}
.editorial .display,.editorial .h2,.editorial .section-head h2,.editorial .cta-band h2{
  font-size:var(--fs-section);line-height:var(--lh-h2);letter-spacing:var(--track-tight);
}
.editorial .h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}

.editorial .faq-grid{grid-template-columns:1fr;gap:var(--sp-3)}
.editorial .faq-title{position:static}
/* The section separator already closes the block; a list's own closing rule
   60px above it just reads as a printing error. */
.editorial .phase:last-child,.editorial .faq-list details:last-child{border-block-end:0}
.editorial .cta-band-inner{grid-template-columns:1fr;gap:var(--sp-3)}
.editorial .cta-band p{max-width:58ch;font-size:var(--fs-read-sm);line-height:1.75}
.editorial .cols-2,.editorial .principle-grid{grid-template-columns:1fr;gap:var(--sp-3)}

/* Content cards inside an editorial page are paragraphs wearing a border.
   Nav cards on the listing pages keep theirs — those pages are not editorial. */
.editorial .card-grid{grid-template-columns:1fr;gap:0}
.editorial .card{padding:19px 0;border:0;border-radius:0;background:none;border-block-start:1px solid var(--line)}
.editorial .card:first-child{border-block-start:0;padding-block-start:0}
.editorial .card h3{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.editorial .card p{margin:8px 0 0;font-size:var(--fs-read-sm);line-height:1.7;max-width:64ch}
.editorial .card .link-arrow{min-height:0;padding-block-start:10px;font-size:var(--fs-xs);letter-spacing:var(--track-wide)}
.editorial .card-ico{width:26px;height:26px;margin-block-end:12px;border-radius:0;background:none;color:var(--coral)}
.editorial .card-ico svg{width:24px;height:24px}
.editorial .card-link:hover{transform:none;box-shadow:none;border-color:var(--line)}
.editorial .card-link:hover h3{color:var(--coral-ink)}
.editorial .card-dark{color:var(--ink)}
.editorial .card-dark p{color:var(--text)}
.editorial .callout{
  padding:0;padding-inline-start:20px;border-radius:0;background:none;
  border-inline-start:2px solid var(--coral);
  font-size:var(--fs-read);line-height:var(--lh-read);
}
.editorial .callout-ink{border-inline-start-color:var(--ink);background:none}
.editorial .callout-title{margin-block-end:4px;font-size:var(--fs-read-sm)}

/* ── Two-up, only where two columns still read ────────────
   Above the phone breakpoint the fit-split and the deliverables earn a second
   column inside the reading measure; everything else stays a single column on
   purpose, because a 400px column of 19.5px Arabic is not a paragraph. */
@media(min-width:761px){
  .fit-split{grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,44px)}
  .fit-col+.fit-col{
    margin-block-start:0;padding-block-start:0;border-block-start:0;
    padding-inline-start:clamp(28px,3.4vw,44px);border-inline-start:1px solid var(--line);
  }
  .deliverables{grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,44px)}
  .deliverable:nth-child(-n+2){border-block-start:0;padding-block-start:0}
  .buyer-grid{grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.4vw,44px)}
  .buyer:nth-child(-n+2){border-block-start:0;padding-block-start:0}
}

/* ── Phone ────────────────────────────────────────────────
   Mobile is the primary canvas here, not a fallback: 20px screen margins,
   full-width actions, and nothing that needs a second column to make sense. */
@media(max-width:760px){
  .editorial .page-hero-media{aspect-ratio:3/2}
  .editorial .page-hero-actions{gap:10px}
  .editorial .page-hero-actions .btn{flex:1 1 100%}
  .editorial .cta-band-actions .btn{flex:1 1 100%}
  .phase{column-gap:14px}
  .related .card{padding-block:17px}
}

/* On a narrow phone the 2-up phase row left the paragraph a 294px well —
   about 28 Arabic characters a line. The number moves onto its own line and
   the prose gets the whole column. */
@media(max-width:560px){
  .phase{grid-template-columns:1fr;row-gap:4px}
  .phase p{grid-column:1}
  .phase-no{font-size:26px;line-height:1.2}
}

/* ════════════════════════════════════════════════════════════
   CLIENT WALL — WP block: wsool/client-wall
   Marks only, full colour: these are past marketing/social clients, not a
   claim about GTM or automation work, so no case-study styling here.
   ════════════════════════════════════════════════════════════ */
.client-wall{display:block}
.client-wall-note{
  margin:0 0 16px;color:var(--muted);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--track-wide);text-transform:uppercase;
}
.client-wall-grid{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
}
.client-wall-grid img{
  height:46px;width:auto;max-width:132px;object-fit:contain;
  opacity:.88;transition:opacity var(--dur-fast);
}
.client-wall-grid img:hover{opacity:1}
@media(max-width:560px){
  .client-wall-grid{gap:16px}
  .client-wall-grid img{height:38px;max-width:104px}
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE (AR) — SECOND PASS (appended; overrides the rules above)
   Scoped to [dir="rtl"] on purpose: the English homepage still carries the
   old three-line outcome card and the old short statement, and it is gated.
   ════════════════════════════════════════════════════════════ */

/* The outcome card is now a single line, so it no longer needs the
   label/note rhythm the three-part version was sized for. */


/* The brand statement now carries a two-clause sentence instead of a short
   slogan, so it needs a wider measure and a smaller top of the type ramp —
   otherwise the first line alone fills a phone screen. The note moves into
   the normal flow: pinned to the bottom it overlapped the longer heading. */
[dir="rtl"] .manifesto h2{max-width:26ch;font-size:clamp(30px,4.6vw,68px)}
[dir="rtl"] .manifesto>p{position:static;max-width:58ch;margin-block-start:clamp(22px,3vw,36px);font-size:var(--fs-sm)}
@media(max-width:760px){
  [dir="rtl"] .manifesto h2{font-size:clamp(26px,7.2vw,42px)}
  [dir="rtl"] .manifesto>p{margin-block-start:26px;font-size:14.5px}
}

/* The author byline sits straight under the H1; without this it collides
   with the heading's own bottom margin. */
[dir="rtl"] h1 + .body-sm{margin-block-start:14px;margin-block-end:0;color:var(--muted)}
@media(max-width:760px){
  [dir="rtl"] .outcome-card strong{margin-block-start:0;font-size:clamp(16px,1.5vw,19px)}
}