@charset "UTF-8";
/* =============================================================================
   SUPER CODING — v2 DARK DESIGN SYSTEM
   Single stylesheet, no build step. Edit directly.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────────────
    1. TOKENS                 :root custom properties + per-language font swap
    2. RESET & BASE           box model, body, selection, scrollbar, focus
    3. TYPOGRAPHY             .sc-h1 .sc-h2 .sc-h3 .sc-lead .sc-mono .sc-num
    4. LAYOUT                 .sc-container .sc-section .sc-grid .sc-split
    5. CHROME                 header, mobile menu, lang switcher, footer, CTA, FAB
    6. COMPONENTS             buttons, cards, tiles, chips, heads, stats, media
    7. PAGE COMPOSITIONS      hero, window, marquee, timeline, wizard, article…
    8. EDITOR CONTENT         .sc-prose
    9. ANIMATIONS             @keyframes + scroll reveal
   10. MEDIA QUERIES          1120 / 1000 / 900 / 720 / 560 — all in one place
   11. PREFERENCES            reduced-motion, hover, print

   CONVENTIONS
   ─────────────────────────────────────────────────────────────────────────────
   · Naming        sc-block__element--modifier, plus is-* for JS-owned state.
   · Direction     logical properties only (inset-inline-*, padding-inline…).
                   Physical left/right is a bug except where commented.
   · Responsive    clamp() + auto-fit first. Only five real breakpoints exist
                   and they all live in §10 — never add one inline.
   · Hover         every :hover lives inside @media (hover:hover) in §11.
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* ── Surfaces ─────────────────────────────────────────────────────── */
	--sc-bg:                  #08080B;   /* page background                  */
	--sc-bg-alt:              #0A0A0D;   /* alternate section band           */
	--sc-bg-deep:             #0B0B0F;   /* marquee strip, inputs, chrome    */
	--sc-surface:             #0E0E13;   /* PRIMARY CARD SURFACE             */
	--sc-surface-2:           #101015;   /* nav pill container, badge pill   */
	--sc-surface-3:           #131318;   /* secondary button / chip / FAB    */
	--sc-surface-4:           #1C1C24;   /* hover surface                    */
	--sc-surface-accent:      #17121F;   /* icon tile / accent chip          */
	--sc-surface-plum:        #1B1130;   /* featured badge, gradient stop    */
	--sc-surface-plum-deep:   #0E0A18;   /* darkest purple gradient stop     */
	--sc-surface-plum-lift:   #3A1E77;   /* bright purple gradient stop      */
	--sc-surface-pill-accent: #251746;   /* accent duration pill             */
	--sc-header-bg:           rgba(8,8,11,.72);
	--sc-stripe-a:            #121218;
	--sc-stripe-b:            #0C0C10;

	/* ── Borders ──────────────────────────────────────────────────────── */
	--sc-line:            #1C1C22;   /* hairline divider                     */
	--sc-border:          #1F1F27;   /* card border, default                 */
	--sc-border-accent:   #2C2340;   /* purple-tinted: tiles, chips, eyebrow */
	--sc-border-input:    #26262F;   /* input, lang toggle, social chip      */
	--sc-border-soft:     #2A2A33;   /* secondary button, floating card      */
	--sc-border-media:    #23232B;   /* media placeholder, window, badge     */
	--sc-border-chip:     #262630;   /* duration chip                        */
	--sc-border-hover:    #4A2E86;   /* CARD BORDER ON HOVER + accent card   */
	--sc-border-bright:   #6B4CB0;   /* bright accent                        */
	--sc-border-mute:     #3A3A45;   /* ghost hover border, separator dot    */

	/* ── Text ─────────────────────────────────────────────────────────────
	   CONTRAST NOTE. The mockup's grey ladder does not clear WCAG AA on this
	   background: #6E6D78 lands at 3.8:1, #5C5B66 at 2.9:1 and #4E4D58 at
	   2.3:1, all at 10–13px where the large-text allowance does not apply.

	   Lifting every step to 4.5:1 would collapse them into one colour, so the
	   ladder is restructured instead: four steps, each ≥4.5:1, and the dimmest
	   value survives only for genuinely decorative text (the "[ project shot ]"
	   placeholder and the aria-hidden dashboard mock).                       */
	--sc-text:        #EDECEF;   /* primary                        16.0 : 1   */
	--sc-text-2:      #A6A5AF;   /* leads, footer links             8.0 : 1   */
	--sc-text-3:      #8E8D98;   /* card descriptions               5.8 : 1   */
	--sc-text-4:      #7B7A86;   /* mono meta, labels, kickers      4.5 : 1   */
	--sc-text-5:      #7B7A86;   /* footer headings, copyright      4.5 : 1   */
	--sc-text-idle:   #9A99A3;   /* inactive nav link / filter      6.6 : 1   */
	--sc-text-bright: #C6C5CD;   /* badge text                               */
	--sc-text-quote:  #DAD9DF;   /* blockquote                               */
	--sc-on-accent:   #ffffff;

	/* DECORATIVE ONLY — never use for text a visitor must read. */
	--sc-text-deco:   #4E4D58;

	/* ── Accent ramp ──────────────────────────────────────────────────── */
	--sc-accent:        #7C4DE0;   /* primary brand — fills, dots, borders   */
	/* #7C4DE0 is only 3.7:1 on the page background, so it fails AA wherever it
	   is used as small text. This is the same hue lifted to 4.5:1, for the
	   section numerals and list markers. Fills and dots keep --sc-accent,
	   where the text-contrast rules do not apply. */
	--sc-accent-text:   #8D57FE;
	--sc-accent-light:  #B79BF2;   /* icon colour, chip text, link accent    */
	--sc-accent-pale:   #C0AAEE;   /* purple text on dark-purple surfaces    */
	--sc-accent-pale-2: #C6ABF5;   /* accent stat numeral                    */
	--sc-accent-mid:    #6B34C9;   /* gradient top stop                      */
	--sc-accent-deep:   #5722AD;   /* gradient bottom stop                   */
	--sc-accent-rgb:    124,77,224;

	/* ── Semantic ─────────────────────────────────────────────────────── */
	--sc-success:     #3ED66A;
	--sc-success-rgb: 62,214,106;

	/* ── Gradients ────────────────────────────────────────────────────── */
	--sc-grad-brand:       linear-gradient(150deg,#7C4DE0,#5722AD);
	--sc-grad-btn:         linear-gradient(180deg,#6B34C9,#5722AD);
	--sc-grad-card-accent: linear-gradient(155deg,#3A1E77,#1B1130);
	--sc-grad-card-plum:   linear-gradient(150deg,#1B1130,#0E0A18);
	--sc-grad-avatar:      linear-gradient(150deg,#3A2A5C,#17121F);
	--sc-grad-text:        linear-gradient(100deg,#B79BF2,#7C4DE0);
	--sc-grad-spine:       linear-gradient(180deg,#7C4DE0,#4A2E86 55%,#1F1F27);
	--sc-grad-stripe:      repeating-linear-gradient(135deg,#121218 0 2px,#0C0C10 2px 13px);
	--sc-dots:             radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
	--sc-orb:              radial-gradient(circle,rgba(var(--sc-accent-rgb),.26),rgba(var(--sc-accent-rgb),0) 62%);
	--sc-orb-strong:       radial-gradient(circle,rgba(var(--sc-accent-rgb),.32),rgba(var(--sc-accent-rgb),0) 60%);
	--sc-sheen:            radial-gradient(circle at 75% 20%,rgba(var(--sc-accent-rgb),.24),transparent 55%);

	/* ── Fonts ────────────────────────────────────────────────────────────
	   The mockup swapped these from JS. In WordPress the language is known
	   server-side, so the swap is a pure attribute selector — see below.
	   --sc-font-num is NEVER swapped: numerals, the wordmark and project
	   names stay in Space Grotesk in both languages.                       */
	--sc-font-display: 'Space Grotesk', system-ui, sans-serif;
	--sc-font-body:    'Space Grotesk', system-ui, sans-serif;
	--sc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	--sc-font-num:     'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;

	/* ── Type scale ───────────────────────────────────────────────────── */
	--sc-fs-h1-home: clamp(40px,6vw,86px);
	--sc-fs-h1-page: clamp(40px,7vw,92px);
	--sc-fs-h2-cta:  clamp(38px,7.5vw,96px);
	--sc-fs-h2:      clamp(28px,4.6vw,58px);
	--sc-fs-h2-sm:   clamp(24px,3vw,38px);
	--sc-fs-h3-lg:   clamp(21px,2.2vw,27px);
	--sc-fs-h3:      clamp(20px,2.2vw,24px);
	--sc-fs-h3-sm:   clamp(19px,2vw,23px);
	--sc-fs-lead:    clamp(15px,1.8vw,19px);
	--sc-fs-quote:   clamp(20px,2.4vw,30px);
	--sc-fs-stat:    clamp(36px,4.6vw,58px);
	--sc-fs-stat-sm: clamp(22px,2.4vw,28px);
	--sc-fs-marquee: clamp(18px,2.2vw,28px);
	--sc-fs-1: 9px;
	--sc-fs-2: 10.5px;
	--sc-fs-3: 11.5px;
	--sc-fs-4: 12.5px;
	--sc-fs-5: 13.5px;
	--sc-fs-6: 14px;
	--sc-fs-7: 15.5px;

	--sc-lh-tight: 1.05;
	--sc-lh-h2:    1.14;
	--sc-lh-h3:    1.25;
	--sc-lh-body:  1.7;
	--sc-lh-quote: 1.5;

	--sc-ls-h1:          -1.2px;
	--sc-ls-h2:          -.5px;
	--sc-ls-mono:        .5px;
	--sc-ls-eyebrow:     2.5px;
	--sc-ls-foot-head:   2px;
	--sc-ls-cta-eyebrow: 1.5px;

	/* ── Radii ────────────────────────────────────────────────────────── */
	--sc-r-1: 7px;
	--sc-r-2: 9px;
	--sc-r-3: 12px;
	--sc-r-4: 15px;
	--sc-r-5: 18px;   /* CANONICAL CARD */
	--sc-r-6: 20px;
	--sc-r-pill: 999px;
	--sc-r-circle: 50%;

	/* ── Shadows ──────────────────────────────────────────────────────── */
	--sc-sh-inset:        inset 0 1px 0 rgba(255,255,255,.04);
	--sc-sh-inset-hi:     inset 0 1px 0 rgba(255,255,255,.06);
	--sc-sh-card-hover:   0 26px 60px -30px rgba(var(--sc-accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.06);
	--sc-sh-accent-hover: 0 26px 60px -30px rgba(var(--sc-accent-rgb),.7);
	--sc-sh-float:        0 14px 34px -12px rgba(0,0,0,.7);
	--sc-sh-float-lg:     0 18px 40px -16px rgba(0,0,0,.7);
	--sc-sh-btn-sm:       0 8px 26px -10px rgba(var(--sc-accent-rgb),.85);
	--sc-sh-btn-md:       0 12px 34px -12px rgba(var(--sc-accent-rgb),.85);
	--sc-sh-btn-lg:       0 16px 44px -14px rgba(var(--sc-accent-rgb),.9);
	--sc-sh-window:       0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--sc-accent-rgb),.05);
	--sc-sh-mark:         0 0 22px -4px rgba(var(--sc-accent-rgb),.75);
	--sc-sh-header:       0 10px 30px -18px rgba(0,0,0,.55);
	--sc-sh-dot-live:     0 0 10px 1px rgba(var(--sc-success-rgb),.8);
	--sc-sh-dot-accent:   0 0 10px 1px rgba(var(--sc-accent-rgb),.9);

	/* ── Spacing & layout ─────────────────────────────────────────────── */
	--sc-container:        1400px;
	--sc-container-narrow: 1000px;
	--sc-gutter:      clamp(16px,4vw,56px);
	--sc-header-h:    70px;
	--sc-sec-y:       clamp(58px,8vw,120px);
	--sc-sec-y-sm:    clamp(58px,8vw,110px);
	--sc-sec-y-lg:    clamp(70px,10vw,150px);
	--sc-hero-y-top:  clamp(44px,7vw,92px);
	--sc-hero-y-bot:  clamp(40px,6vw,72px);
	--sc-pad-card:    clamp(26px,2.6vw,34px);
	--sc-pad-card-sm: clamp(20px,2.2vw,28px);
	--sc-pad-card-lg: clamp(28px,3vw,42px);
	--sc-pad-card-xl: clamp(32px,4vw,56px);
	--sc-gap-tight:   clamp(14px,1.6vw,20px);
	--sc-gap-card:    clamp(14px,1.6vw,22px);
	--sc-gap-col:     clamp(30px,4vw,52px);
	--sc-gap-hero:    clamp(40px,5vw,72px);
	--sc-head-mb:     clamp(22px,3vw,36px);
	--sc-1: 4px;  --sc-2: 8px;  --sc-3: 12px; --sc-4: 16px; --sc-5: 20px;
	--sc-6: 24px; --sc-7: 32px; --sc-8: 40px; --sc-9: 48px;

	/* Grid track minimums — these ARE the responsive strategy. */
	--sc-col-services:   320px;
	--sc-col-testi:      300px;
	--sc-col-values:     280px;
	--sc-col-cards:      260px;
	--sc-col-pillars:    250px;
	--sc-col-team:       240px;
	--sc-col-stats:      200px;
	--sc-col-work-stats: 180px;
	--sc-col-footer:     170px;

	/* ── z-index (closed scale — no ad-hoc values) ────────────────────── */
	--sc-z-hero: 1;  --sc-z-window: 2; --sc-z-chip: 4;
	--sc-z-fab: 50;  --sc-z-mobile: 55; --sc-z-header: 60; --sc-z-skip: 100;

	/* ── Motion ───────────────────────────────────────────────────────── */
	--sc-ease:        cubic-bezier(.16,.84,.44,1);
	--sc-ease-draw:   cubic-bezier(.5,0,.2,1);
	--sc-dur-fast:    .25s;
	--sc-dur:         .35s;
	--sc-dur-reveal:  .8s;
	--sc-marquee-dur: 28s;

	/* Mirrored decoration anchors (see §10 / RTL notes). */
	--sc-mask-x: 68%;
}

/* Arabic swaps the display + body face only. Mono and numerals never change. */
html[lang="ar"] {
	--sc-font-display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
	--sc-font-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
}

html[dir="rtl"] { --sc-mask-x: 32%; }


/* =============================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--sc-header-h) + 20px);
}

body {
	margin: 0;
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-6);
	line-height: var(--sc-lh-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--sc-accent); color: var(--sc-on-accent); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sc-bg); }
::-webkit-scrollbar-thumb { background: var(--sc-surface-4); border-radius: var(--sc-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--sc-border-mute); }

:focus-visible {
	outline: 2px solid var(--sc-accent-light);
	outline-offset: 3px;
	border-radius: 4px;
}

.sc-skip {
	position: absolute;
	inset-inline-start: var(--sc-gutter);
	top: -100px;
	z-index: var(--sc-z-skip);
	background: var(--sc-accent);
	color: var(--sc-on-accent);
	padding: 12px 20px;
	border-radius: var(--sc-r-3);
	font-size: var(--sc-fs-5);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--sc-dur-fast) var(--sc-ease);
}
.sc-skip:focus { top: 12px; }

.sc-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A 1px sentinel at the top of <main>; the header shadow observes it so we
   never attach a scroll listener. */
.sc-scroll-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }


/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.sc-h1, .sc-h2, .sc-h3 {
	font-family: var(--sc-font-display);
	font-weight: 700;
	text-wrap: balance;
}

.sc-h1 {
	font-size: var(--sc-fs-h1-page);
	line-height: var(--sc-lh-tight);
	letter-spacing: var(--sc-ls-h1);
}
.sc-h1--home { font-size: var(--sc-fs-h1-home); letter-spacing: -1px; }

.sc-h2 {
	font-size: var(--sc-fs-h2);
	line-height: var(--sc-lh-h2);
	letter-spacing: var(--sc-ls-h2);
}
.sc-h2--sm  { font-size: var(--sc-fs-h2-sm); }
.sc-h2--cta { font-size: var(--sc-fs-h2-cta); line-height: var(--sc-lh-tight); letter-spacing: -1px; }

.sc-h3 {
	font-size: var(--sc-fs-h3);
	line-height: var(--sc-lh-h3);
	font-weight: 600;
}
.sc-h3--lg { font-size: var(--sc-fs-h3-lg); }
.sc-h3--sm { font-size: var(--sc-fs-h3-sm); }

.sc-lead {
	font-size: var(--sc-fs-lead);
	line-height: 1.75;
	color: var(--sc-text-2);
	max-width: 64ch;
}

.sc-body { color: var(--sc-text-3); line-height: var(--sc-lh-body); }

.sc-mono {
	font-family: var(--sc-font-mono);
	letter-spacing: var(--sc-ls-mono);
}

/* Every numeral goes through this so a stray Arabic-Indic digit still lands
   in a font that has the glyph. */
.sc-num { font-family: var(--sc-font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The gradient-clipped accent word. Live ACF data marks it with <em>, which
   must not render italic. */
.sc-grad-text,
.sc-h1 em, .sc-h2 em {
	background: var(--sc-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
	font-weight: inherit;
}

.sc-mute { color: var(--sc-text-4); }

/* Direction-aware arrow. NEVER bake ← / → into a translatable string. */
.sc-arrow { display: inline-block; line-height: 1; }
html[dir="rtl"] .sc-arrow { transform: scaleX(-1); }

/* LTR islands inside Arabic copy: phone numbers, tech tags, URLs, € bands. */
.sc-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }


/* =============================================================================
   4. LAYOUT
   ========================================================================== */

.sc-container {
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}
.sc-container--narrow { max-width: var(--sc-container-narrow); }

.sc-section { padding-block: var(--sc-sec-y); position: relative; }
.sc-section--sm  { padding-block: var(--sc-sec-y-sm); }
.sc-section--alt { background: var(--sc-bg-alt); }
.sc-section--line-top { border-top: 1px solid var(--sc-line); }
.sc-section--tight { padding-block: 0 var(--sc-sec-y-sm); }

.sc-grid { display: grid; gap: var(--sc-gap-card); }
.sc-grid--services   { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-services),1fr)); }
.sc-grid--testi      { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-testi),1fr)); }
.sc-grid--values     { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-values),1fr)); }
.sc-grid--cards      { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-cards),1fr)); }
.sc-grid--pillars    { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-pillars),1fr)); }
.sc-grid--team       { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-team),1fr)); }
.sc-grid--stats      { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-stats),1fr)); }
.sc-grid--work-stats { grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-work-stats),1fr)); }

.sc-stack { display: flex; flex-direction: column; }
.sc-split { display: flex; flex-wrap: wrap; gap: var(--sc-gap-hero); }

.sc-main { display: block; }

/* Ambient decoration layers, shared by the home hero, page heroes and CTA. */
.sc-dots {
	position: absolute;
	inset: 0;
	background-image: var(--sc-dots);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 80%);
	pointer-events: none;
}
.sc-dots--hero {
	-webkit-mask-image: radial-gradient(ellipse 72% 82% at var(--sc-mask-x) 42%, #000, transparent 78%);
	mask-image: radial-gradient(ellipse 72% 82% at var(--sc-mask-x) 42%, #000, transparent 78%);
}

.sc-orb {
	position: absolute;
	width: min(640px, 80vw);
	height: min(640px, 80vw);
	background: var(--sc-orb);
	filter: blur(30px);
	pointer-events: none;
	animation: sc-glow 8s ease-in-out infinite;
}


/* =============================================================================
   5. CHROME
   ========================================================================== */

/* ── 5.1 Header ─────────────────────────────────────────────────────────── */

.sc-header {
	position: sticky;
	top: 0;
	z-index: var(--sc-z-header);
	background: var(--sc-header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid var(--sc-line);
	transition: box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-header.is-scrolled { box-shadow: var(--sc-sh-header); }

/* Hides on scroll down, returns on scroll up. transform rather than `top`
   so it never triggers layout. */
.sc-header {
	transition: box-shadow var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease);
	will-change: transform;
}
.sc-header.is-hidden { transform: translateY(-100%); }

.sc-header__inner {
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
	height: var(--sc-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

.sc-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.sc-brand__mark {
	width: 32px; height: 32px;
	border-radius: var(--sc-r-2);
	background: var(--sc-grad-brand);
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--sc-sh-mark);
	font-family: var(--sc-font-mono);
	color: var(--sc-on-accent);
	font-size: 17px; font-weight: 700;
	flex-shrink: 0;
}
.sc-brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.sc-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.sc-brand__name {
	font-family: var(--sc-font-num);
	font-size: 17px; font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
}
.sc-brand__tagline {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-1);
	letter-spacing: var(--sc-ls-eyebrow);
	color: var(--sc-text-4);
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-header__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--sc-surface-2);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-pill);
	padding: 5px;
	list-style: none;
}
.sc-header__nav li { display: block; }
.sc-header__link {
	display: block;
	text-decoration: none;
	color: var(--sc-text-idle);
	font-size: var(--sc-fs-5);
	font-weight: 500;
	padding: 8px 15px;
	border-radius: var(--sc-r-pill);
	white-space: nowrap;
	transition: color var(--sc-dur-fast) var(--sc-ease), background-color var(--sc-dur-fast) var(--sc-ease);
}
.sc-header__nav .current-menu-item > .sc-header__link,
.sc-header__nav .current_page_item > .sc-header__link,
.sc-header__nav .current-menu-ancestor > .sc-header__link,
.sc-header__link[aria-current] {
	color: var(--sc-text);
	background: var(--sc-surface-4);
}

.sc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sc-3);
	flex-shrink: 0;
}

.sc-header__burger {
	display: none;   /* §10 turns this on below 1000px */
	width: 40px; height: 40px;
	border: 1px solid var(--sc-border-input);
	border-radius: 11px;
	background: var(--sc-surface-2);
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sc-header__burger span {
	width: 17px; height: 1.6px;
	background: var(--sc-text);
	display: block;
	transition: transform var(--sc-dur-fast) var(--sc-ease), opacity var(--sc-dur-fast) var(--sc-ease);
}
html.is-nav-open .sc-header__burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
html.is-nav-open .sc-header__burger span:nth-child(2) { opacity: 0; }
html.is-nav-open .sc-header__burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ── 5.2 Language switcher ──────────────────────────────────────────────── */

.sc-lang {
	display: flex;
	align-items: center;
	border: 1px solid var(--sc-border-input);
	border-radius: var(--sc-r-pill);
	overflow: hidden;
	font-family: var(--sc-font-mono);
	font-size: 11px;
	list-style: none;
}
.sc-lang__link {
	display: block;
	background: transparent;
	color: var(--sc-text-4);
	padding: 6px 10px;
	text-decoration: none;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color var(--sc-dur-fast) var(--sc-ease), background-color var(--sc-dur-fast) var(--sc-ease);
}
.sc-lang__link.is-active,
.sc-lang__link[aria-current] {
	background: var(--sc-accent);
	color: var(--sc-on-accent);
}
.sc-lang__link.is-missing { opacity: .5; }

/* ── 5.3 Mobile menu ────────────────────────────────────────────────────── */

.sc-mobile {
	display: none;
	position: fixed;
	inset: var(--sc-header-h) 0 0 0;
	z-index: var(--sc-z-mobile);
	background: var(--sc-bg);
	padding: var(--sc-7) var(--sc-gutter);
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
html.is-nav-open .sc-mobile { display: flex; }
html.is-nav-open, html.is-nav-open body { overflow: hidden; }

.sc-mobile__list { list-style: none; display: flex; flex-direction: column; }
.sc-mobile__link {
	display: block;
	text-decoration: none;
	color: var(--sc-text);
	font-family: var(--sc-font-num);
	font-weight: 600;
	font-size: 27px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sc-line);
}
.sc-mobile__link[aria-current] { color: var(--sc-accent-light); }
.sc-mobile__cta {
	margin-top: var(--sc-5);
	text-align: center;
	background: var(--sc-grad-btn);
	color: var(--sc-on-accent);
	text-decoration: none;
	font-weight: 600;
	padding: 16px;
	border-radius: 14px;
}

/* ── 5.4 CTA band ───────────────────────────────────────────────────────── */

.sc-cta {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--sc-line);
}
.sc-cta__orb {
	position: absolute;
	top: 50%; left: 50%;                     /* centring idiom — direction-neutral */
	transform: translate(-50%,-50%);
	width: min(900px,90vw);
	height: min(600px,60vw);
	background: var(--sc-orb-strong);
	filter: blur(30px);
	animation: sc-glow 8s ease-in-out infinite;
	pointer-events: none;
}
.sc-cta__inner {
	position: relative;
	max-width: var(--sc-container-narrow);
	margin-inline: auto;
	padding: var(--sc-sec-y-lg) var(--sc-gutter);
	text-align: center;
}
.sc-cta__title {
	max-width: 15ch;
	margin: 0 auto clamp(28px,4vw,44px);
}
.sc-cta .sc-dots { opacity: .5; }
.sc-cta__badge { margin-bottom: clamp(20px,3vw,30px); }
.sc-cta__lead { margin: 0 auto clamp(26px,3.4vw,38px); max-width: 54ch; }
.sc-cta__direct {
	margin-top: clamp(26px,3.4vw,40px);
	padding-top: var(--sc-6);
	border-top: 1px solid var(--sc-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-3) var(--sc-5);
	align-items: center;
	justify-content: center;
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
}
.sc-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sc-text-2);
	text-decoration: none;
	transition: color var(--sc-dur-fast) var(--sc-ease);
}
.sc-cta__sep { color: var(--sc-border-mute); }

/* ── 7.14 Home intro (editorial split) ──────────────────────────────────── */

/* Heading and prose sit side by side instead of stacking into one wide,
   hard-to-read column. The prose is capped at a comfortable measure. */
.sc-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--sc-gap-col);
	align-items: start;
	margin-bottom: clamp(36px,5vw,64px);
}
.sc-intro__head .sc-head__eyebrow { margin-bottom: var(--sc-4); }
.sc-intro__body { max-width: 58ch; }
.sc-intro__body p + p { margin-top: .9em; }

/* ── 7.15 Pillar card ───────────────────────────────────────────────────── */

.sc-pillar { display: flex; flex-direction: column; }
.sc-pillar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-4);
	margin-bottom: var(--sc-5);
}
.sc-pillar__title { margin-bottom: var(--sc-3); }
/* A hairline that fills with the brand gradient on hover — a small reward
   for scanning, without adding another border colour at rest. */
.sc-pillar::before {
	content: ;
	position: absolute;
	inset-inline: var(--sc-pad-card);
	top: 0;
	height: 2px;
	background: var(--sc-grad-brand);
	border-radius: 0 0 var(--sc-r-pill) var(--sc-r-pill);
	transform: scaleX(0);
	transform-origin: var(--sc-origin, left);
	transition: transform var(--sc-dur) var(--sc-ease);
}
html[dir=rtl] .sc-pillar { --sc-origin: right; }

/* ── 7.16 Stat panel ────────────────────────────────────────────────────── */

/* One surface split by hairlines, rather than four separate boxes. Reads as a
   single block of figures and stops competing with the pillar cards above. */
.sc-statpanel {
	margin-top: var(--sc-gap-card);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--sc-col-stats), 1fr));
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-5);
	box-shadow: var(--sc-sh-inset);
	overflow: hidden;
}
.sc-statpanel__cell {
	padding: var(--sc-pad-card);
	border-inline-start: 1px solid var(--sc-line);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-2);
}
.sc-statpanel__cell:first-child { border-inline-start: 0; }
.sc-statpanel__cell.is-accent { background: var(--sc-grad-card-accent); }
.sc-statpanel__cell.is-accent .sc-stat__value { color: var(--sc-accent-pale-2); }
.sc-statpanel__cell.is-accent .sc-stat__label { color: var(--sc-accent-pale); }
.sc-statpanel__cell.is-accent .sc-stat__icon  { color: var(--sc-accent-pale-2); }
.sc-statpanel .sc-stat__icon  { margin-bottom: var(--sc-2); }
.sc-statpanel .sc-stat__value { font-size: clamp(30px,3.6vw,46px); }
.sc-statpanel .sc-stat__label { margin-top: 0; }

/* ── 7.14 Story (About) ─────────────────────────────────────────────────── */

.sc-story {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-gap-col);
	align-items: flex-start;
	margin-bottom: var(--sc-9);
}
.sc-story__text { flex: 2 1 380px; }
.sc-story__stats {
	flex: 1 1 240px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: var(--sc-4);
	padding: var(--sc-pad-card-sm);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-5);
	box-shadow: var(--sc-sh-inset);
}
.sc-story__stat .sc-stat__value { font-size: clamp(26px,3vw,36px); }
.sc-story__stat .sc-stat__label { margin-top: 6px; }

.sc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	justify-content: center;
}

/* ── 5.5 Footer — minimal ───────────────────────────────────────────────── */

.sc-footer { background: var(--sc-bg); border-top: 1px solid var(--sc-line); }
.sc-footer__inner {
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: clamp(36px,4vw,56px) var(--sc-gutter) 22px;
	display: flex;
	flex-direction: column;
	gap: var(--sc-5);
}

.sc-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-5);
}
.sc-footer__brand { text-decoration: none; }
.sc-footer__brand .sc-brand__mark { box-shadow: none; }
.sc-footer__brand .sc-brand__name { font-size: 18px; }

.sc-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-3) var(--sc-6);
	list-style: none;
}
.sc-footer__link {
	text-decoration: none;
	color: var(--sc-text-2);
	font-size: var(--sc-fs-5);
	transition: color var(--sc-dur-fast) var(--sc-ease);
}

.sc-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-3) var(--sc-6);
	font-size: var(--sc-fs-5);
	color: var(--sc-text-2);
	padding-bottom: var(--sc-5);
	border-bottom: 1px solid var(--sc-line);
}
.sc-footer__muted { color: var(--sc-text-4); }

.sc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-3) var(--sc-5);
	align-items: center;
	justify-content: space-between;
}
.sc-footer__copy {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-5);
}
.sc-footer__social { display: flex; flex-wrap: wrap; gap: var(--sc-5); list-style: none; }
.sc-footer__social a {
	text-decoration: none;
	color: var(--sc-text-4);
	font-size: var(--sc-fs-4);
	transition: color var(--sc-dur-fast) var(--sc-ease);
}

/* ── 5.6 WhatsApp FAB ───────────────────────────────────────────────────── */

/* `left` is PHYSICAL on purpose: the button stays bottom-left in both LTR and
   RTL so it never lands under the RTL scrollbar. Do not "fix" to logical. */
.sc-fab {
	position: fixed;
	bottom: 22px;
	left: 22px;
	z-index: var(--sc-z-fab);
	width: 54px; height: 54px;
	border-radius: var(--sc-r-circle);
	background: #25D366;                 /* WhatsApp brand green */
	border: 0;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	text-decoration: none;
	box-shadow: 0 10px 28px -8px rgba(37,211,102,.55);
	animation: sc-float 3.5s ease-in-out infinite;
	transition: transform var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}

/* ── 5.7 Back to top ────────────────────────────────────────────────────── */

.sc-totop {
	position: fixed;
	/* Physical `right`, to mirror the FAB's deliberate physical `left`.
	   inset-inline-end resolves to the LEFT in RTL, which put this button
	   directly on top of the WhatsApp FAB. */
	bottom: 22px;
	right: 22px;
	z-index: var(--sc-z-fab);
	width: 48px; height: 48px;
	border-radius: var(--sc-r-circle);
	background: var(--sc-surface-3);
	border: 1px solid var(--sc-border-soft);
	color: var(--sc-text-2);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease),
	            visibility var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease),
	            color var(--sc-dur) var(--sc-ease);
}
.sc-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── 5.8 Preloader ──────────────────────────────────────────────────────── */

.sc-preloader {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--sc-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sc-5);
	transition: opacity .45s var(--sc-ease), visibility .45s var(--sc-ease);
}
.sc-preloader.is-done { opacity: 0; visibility: hidden; }
.sc-preloader__mark {
	width: 54px; height: 54px;
	border-radius: 15px;
	background: var(--sc-grad-brand);
	box-shadow: var(--sc-sh-mark);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sc-font-mono);
	font-size: 26px;
	font-weight: 700;
	color: var(--sc-on-accent);
}
.sc-preloader__bar {
	width: 140px;
	height: 2px;
	background: var(--sc-border);
	border-radius: var(--sc-r-pill);
	overflow: hidden;
}
.sc-preloader__bar > span {
	display: block;
	width: 40%;
	height: 100%;
	background: var(--sc-grad-brand);
	border-radius: inherit;
	animation: sc-load 1.1s var(--sc-ease) infinite;
}


/* =============================================================================
   6. COMPONENTS
   ========================================================================== */

/* ── 6.1 Buttons — design C5 ────────────────────────────────────────────── */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: var(--sc-r-3);
	cursor: pointer;
	white-space: nowrap;
	transition:
		filter var(--sc-dur-fast) var(--sc-ease),
		transform var(--sc-dur-fast) var(--sc-ease),
		background-color var(--sc-dur-fast) var(--sc-ease),
		border-color var(--sc-dur-fast) var(--sc-ease),
		color var(--sc-dur-fast) var(--sc-ease);
}

.sc-btn--primary {
	background: var(--sc-grad-btn);
	color: var(--sc-on-accent);
	box-shadow: var(--sc-sh-btn-md);
}
.sc-btn--ghost {
	background: var(--sc-surface-3);
	border-color: var(--sc-border-soft);
	color: var(--sc-text);
}
.sc-btn--link-box {
	background: var(--sc-surface-3);
	border-color: var(--sc-border-soft);
	color: var(--sc-text);
	border-radius: 11px;
	font-size: var(--sc-fs-6);
	padding: 12px 20px;
}

.sc-btn--sm { font-size: var(--sc-fs-5); padding: 10px 18px; box-shadow: var(--sc-sh-btn-sm); }
.sc-btn--md { font-size: 15px;           padding: 15px 26px; }
.sc-btn--lg { font-size: var(--sc-fs-7); padding: 17px 34px; border-radius: 13px; }
.sc-btn--lg.sc-btn--primary { box-shadow: var(--sc-sh-btn-lg); }
.sc-btn--pill { border-radius: var(--sc-r-pill); }
.sc-btn--block { width: 100%; }

.sc-btn[disabled], .sc-btn.is-busy { opacity: .65; pointer-events: none; }
.sc-btn.is-busy::after {
	content: "";
	width: 14px; height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--sc-r-circle);
	animation: sc-spin .7s linear infinite;
}

/* ── 6.2 Chips & pills — design C8 ──────────────────────────────────────── */

.sc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sc-font-mono);
	border-radius: var(--sc-r-2);
	border: 1px solid transparent;
	white-space: nowrap;
}

.sc-chip--tag {
	background: var(--sc-surface-accent);
	border-color: var(--sc-border-accent);
	border-radius: var(--sc-r-2);
	font-size: 11px;
	color: var(--sc-accent-light);
	padding: 6px 12px;
}
.sc-chip--cat {
	background: var(--sc-surface-accent);
	border-color: var(--sc-border-accent);
	border-radius: var(--sc-r-1);
	font-size: var(--sc-fs-2);
	color: var(--sc-accent-light);
	padding: 3px 9px;
}
.sc-chip--duration {
	background: var(--sc-surface-3);
	border-color: var(--sc-border-chip);
	border-radius: var(--sc-r-2);
	font-size: 11px;
	color: var(--sc-text-4);
	padding: 5px 11px;
}
.sc-chip--duration-accent {
	background: var(--sc-surface-pill-accent);
	border-color: var(--sc-border-hover);
	color: var(--sc-accent-pale);
}
.sc-chip--featured {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	background: var(--sc-surface-plum);
	border-color: var(--sc-border-hover);
	border-radius: var(--sc-r-1);
	font-size: 10px;
	color: var(--sc-accent-pale);
	padding: 5px 11px;
	z-index: 1;
}
.sc-chip--eyebrow {
	background: var(--sc-surface-2);
	border-color: var(--sc-border-accent);
	border-radius: var(--sc-r-pill);
	font-size: var(--sc-fs-3);
	letter-spacing: var(--sc-ls-cta-eyebrow);
	text-transform: uppercase;
	color: var(--sc-accent-light);
	padding: 7px 15px;
	margin-bottom: clamp(24px,3.5vw,38px);
}
.sc-chip--avail {
	background: var(--sc-surface-2);
	border-color: var(--sc-border-media);
	border-radius: var(--sc-r-pill);
	padding: 8px 16px 8px 14px;
	font-family: inherit;
	font-size: var(--sc-fs-4);
	color: var(--sc-text-bright);
}
.sc-chip--social {
	background: var(--sc-surface-3);
	border-color: var(--sc-border-input);
	border-radius: 10px;
	font-family: inherit;
	font-size: 12px;
	color: var(--sc-text-2);
	padding: 9px 14px;
	text-decoration: none;
	transition: border-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.sc-chip--filter {
	background: transparent;
	border-color: var(--sc-border-input);
	border-radius: var(--sc-r-pill);
	font-family: inherit;
	font-size: var(--sc-fs-4);
	color: var(--sc-text-idle);
	padding: 9px 20px;
	text-decoration: none;
	transition: all var(--sc-dur-fast) var(--sc-ease);
}
.sc-chip--filter[aria-current] {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	color: var(--sc-on-accent);
}

/* Pulsing status dot, used by the availability badge and the response card. */
.sc-dot {
	width: 8px; height: 8px;
	border-radius: var(--sc-r-circle);
	background: var(--sc-success);
	box-shadow: var(--sc-sh-dot-live);
	flex-shrink: 0;
	animation: sc-pulse 2s ease-in-out infinite;
}
.sc-dot--accent { background: var(--sc-accent); box-shadow: var(--sc-sh-dot-accent); }

.sc-sep {
	width: 1px;
	height: 14px;
	background: var(--sc-border-media);
	flex-shrink: 0;
}

/* ── 6.3 Card — the workhorse, design C6 ────────────────────────────────── */

.sc-card {
	position: relative;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-5);
	box-shadow: var(--sc-sh-inset);
	padding: var(--sc-pad-card);
	transition:
		border-color var(--sc-dur) var(--sc-ease),
		transform var(--sc-dur) var(--sc-ease),
		box-shadow var(--sc-dur) var(--sc-ease);
}

.sc-card--accent {
	background: var(--sc-grad-card-accent);
	border-color: var(--sc-border-hover);
	box-shadow: var(--sc-sh-inset-hi);
}
.sc-card--plum {
	background: var(--sc-grad-card-plum);
	border-color: var(--sc-border-hover);
	box-shadow: var(--sc-sh-inset-hi);
}
.sc-card--flat { padding: var(--sc-pad-card-sm); }
.sc-card--pad-sm { padding: var(--sc-pad-card-sm); }
.sc-card--pad-lg { padding: var(--sc-pad-card-lg); }
.sc-card--pad-xl { padding: var(--sc-pad-card-xl); }
.sc-card--link { text-decoration: none; color: inherit; display: block; }

.sc-card__title { margin-bottom: var(--sc-3); }
.sc-tile + .sc-card__title { margin-top: var(--sc-5); }
.sc-card__text  { color: var(--sc-text-3); font-size: var(--sc-fs-6); line-height: var(--sc-lh-body); }
.sc-card__tags  { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-5); }

/* Service card: icon + right-aligned numeral, description pushes tags down. */
.sc-card--service { display: flex; flex-direction: column; }
.sc-card--service .sc-card__text { flex: 1; }
.sc-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sc-4);
	margin-bottom: var(--sc-5);
}
.sc-card__num {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
	color: var(--sc-text-4);
	letter-spacing: var(--sc-ls-mono);
}

/* Team card: horizontal initial tile + name/role. */
.sc-card--team {
	display: flex;
	align-items: center;
	gap: var(--sc-4);
	padding: clamp(22px,2.4vw,28px);
}
.sc-card--team .sc-card__title { margin-bottom: 2px; }
.sc-team__photo { object-fit: cover; border: 1px solid var(--sc-border-accent); }
.sc-team__social { display: flex; gap: var(--sc-2); margin-top: var(--sc-2); color: var(--sc-text-4); }
.sc-team__social a { color: inherit; transition: color var(--sc-dur-fast) var(--sc-ease); }

/* ── 6.4 Icon tile — design C7 ──────────────────────────────────────────── */

.sc-tile {
	width: 52px; height: 52px;
	border-radius: var(--sc-r-3);
	background: var(--sc-surface-accent);
	border: 1px solid var(--sc-border-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sc-accent-light);
	flex-shrink: 0;
}
.sc-tile--58 { width: 58px; height: 58px; border-radius: 16px; background: var(--sc-grad-avatar); }
.sc-tile--48 { width: 48px; height: 48px; }
.sc-tile--44 { width: 44px; height: 44px; }
.sc-tile--42 { width: 42px; height: 42px; border-radius: 11px; }
.sc-tile--bare { width: auto; height: auto; background: none; border: 0; color: var(--sc-accent); }
.sc-tile--on-accent {
	background: rgba(255,255,255,.08);
	border-color: var(--sc-border-bright);
	color: var(--sc-on-accent);
	border-radius: 14px;
}
.sc-tile__initial {
	font-family: var(--sc-font-num);
	font-size: 20px;
	font-weight: 700;
	color: var(--sc-accent-light);
}

/* ── 6.5 Section header — design C9 ─────────────────────────────────────── */

.sc-head { margin-bottom: var(--sc-head-mb); }
.sc-head__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--sc-5);
}
.sc-head__num {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
	color: var(--sc-accent-text);
	flex-shrink: 0;
}
.sc-head__label {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-4);
	letter-spacing: var(--sc-ls-eyebrow);
	text-transform: uppercase;
	flex-shrink: 0;
}
.sc-head__rule { flex: 1; height: 1px; background: var(--sc-line); }
.sc-head__title { margin-bottom: var(--sc-5); }
.sc-head__lead { color: var(--sc-text-2); }

/* Split variant: heading left, "all projects →" button right. */
.sc-head--split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-5);
	align-items: flex-end;
	justify-content: space-between;
}
.sc-head--split .sc-head__block { flex: 1 1 300px; }
.sc-head--split .sc-head__eyebrow { margin-bottom: var(--sc-5); }
.sc-head--split .sc-head__eyebrow .sc-head__rule { display: none; }
.sc-head--split .sc-head__title { margin-bottom: 0; }

/* ── 6.6 Stat — design C10 ──────────────────────────────────────────────── */

.sc-stat__value {
	font-family: var(--sc-font-num);
	font-weight: 700;
	font-size: var(--sc-fs-stat);
	line-height: 1;
}
.sc-stat__label {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-4);
	margin-top: var(--sc-3);
}
.sc-stat--sm .sc-stat__value { font-size: clamp(34px,4.4vw,54px); }
.sc-stat--hero {
	display: flex;
	align-items: center;
	gap: var(--sc-3);
}
.sc-stat--hero .sc-stat__value { font-size: var(--sc-fs-stat-sm); }
.sc-stat--hero .sc-stat__label { margin-top: 0; }
.sc-card--accent .sc-stat__value { color: var(--sc-accent-pale-2); }
.sc-card--accent .sc-stat__label { color: var(--sc-accent-pale); }
.sc-stat__icon { color: var(--sc-accent); margin-bottom: var(--sc-4); }

/* ── 6.7 Media placeholder — design C12 ─────────────────────────────────── */

.sc-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--sc-r-3);
	border: 1px solid var(--sc-border-media);
	background: var(--sc-grad-stripe);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sc-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sc-sheen);
	pointer-events: none;
}
.sc-media--16x11 { aspect-ratio: 16 / 11; }
.sc-media--16x10 { aspect-ratio: 16 / 10; }
.sc-media--16x9  { aspect-ratio: 16 / 9; }
.sc-media--tall  { min-height: 240px; }
.sc-media--cover { aspect-ratio: 16 / 9; border-radius: var(--sc-r-6); }
.sc-media img, .sc-media svg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.sc-media__label {
	position: relative;
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	letter-spacing: 1px;
	color: var(--sc-text-deco);
}

/* ── 6.8 Project card ───────────────────────────────────────────────────── */

.sc-project {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-5);
	overflow: hidden;
	box-shadow: var(--sc-sh-inset);
	transition: border-color var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease);
}
.sc-project .sc-media { border: 0; border-radius: 0; }
.sc-project__body { padding: 22px; }
.sc-project__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sc-3);
	margin-bottom: 6px;
}
.sc-project__title { font-family: var(--sc-font-num); font-weight: 600; font-size: clamp(18px,2vw,23px); }
.sc-project__year  { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); color: var(--sc-text-4); }
.sc-project__cat   { font-size: var(--sc-fs-5); color: var(--sc-text-3); }

.sc-project--featured { grid-column: span 2; grid-row: span 2; border-radius: var(--sc-r-6); }
.sc-project--featured .sc-media { aspect-ratio: auto; flex: 1; min-height: 240px; }
.sc-project--featured .sc-project__title { font-size: clamp(24px,2.8vw,34px); }

/* ── 6.9 Post card ──────────────────────────────────────────────────────── */

.sc-post {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-5);
	overflow: hidden;
	box-shadow: var(--sc-sh-inset);
	transition: border-color var(--sc-dur) var(--sc-ease), transform var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-post .sc-media { border: 0; border-radius: 0; }
.sc-post__body { padding: 22px; display: flex; flex-direction: column; gap: var(--sc-3); flex: 1; }
.sc-post__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-2);
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-4);
}
.sc-post__meta-sep { color: var(--sc-border-mute); }
.sc-post__title { font-size: var(--sc-fs-h3-sm); }
.sc-post__excerpt { color: var(--sc-text-3); font-size: var(--sc-fs-5); flex: 1; }
.sc-post__more {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
	color: var(--sc-accent-light);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sc-post--featured {
	flex-direction: row;
	flex-wrap: wrap;
	border-radius: var(--sc-r-6);
}
.sc-post--featured .sc-media { flex: 1 1 360px; min-height: 280px; aspect-ratio: auto; }
.sc-post--featured .sc-post__body { flex: 1 1 360px; padding: var(--sc-pad-card-lg); justify-content: center; }
.sc-post--featured .sc-post__title { font-size: clamp(26px,3.2vw,42px); line-height: var(--sc-lh-h2); }

/* ── 6.10 Testimonial ───────────────────────────────────────────────────── */

.sc-quote { display: flex; flex-direction: column; gap: var(--sc-5); }
.sc-quote__stars { color: var(--sc-accent-light); display: flex; gap: 2px; }
.sc-quote__text {
	font-size: clamp(16px,1.8vw,19px);
	line-height: var(--sc-lh-quote);
	color: var(--sc-text-quote);
	letter-spacing: -.2px;
	flex: 1;
}
.sc-quote__author { display: flex; align-items: center; gap: var(--sc-3); }
.sc-quote__avatar {
	width: 42px; height: 42px;
	border-radius: var(--sc-r-circle);
	background: var(--sc-grad-avatar);
	border: 1px solid var(--sc-border-accent);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sc-font-num);
	font-weight: 700;
	color: var(--sc-accent-light);
	flex-shrink: 0;
}
.sc-quote__name { font-weight: 600; font-size: var(--sc-fs-6); display: block; }
.sc-quote__role { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); color: var(--sc-text-4); display: block; }
.sc-quote--featured { grid-column: span 2; }
.sc-quote--featured .sc-quote__text { font-size: var(--sc-fs-quote); }

/* ── 6.11 Info rows (contact) ───────────────────────────────────────────── */

.sc-info { display: flex; flex-direction: column; gap: var(--sc-5); }
.sc-info__row { display: flex; align-items: center; gap: var(--sc-3); }
.sc-info__label { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); color: var(--sc-text-4); }
.sc-info__value { font-size: var(--sc-fs-6); color: var(--sc-text); text-decoration: none; }


/* =============================================================================
   7. PAGE COMPOSITIONS
   ========================================================================== */

/* ── 7.1 Home hero ──────────────────────────────────────────────────────── */

.sc-hero { position: relative; overflow: hidden; padding-block: clamp(40px,6vw,80px) var(--sc-sec-y); }
.sc-hero__orb { top: 16%; inset-inline-start: 54%; transform: translate(-50%,-50%); }
.sc-hero__inner { position: relative; z-index: var(--sc-z-hero); }
.sc-hero__split { display: flex; flex-wrap: wrap; gap: var(--sc-gap-hero); align-items: center; }
.sc-hero__copy   { flex: 1 1 430px; min-width: 290px; }
.sc-hero__visual { flex: 1 1 430px; min-width: 290px; position: relative; }
.sc-hero__window-wrap { position: relative; }

.sc-hero__badge { margin-bottom: clamp(22px,3vw,32px); }
.sc-hero__badge-meta { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); color: var(--sc-text-4); }
.sc-hero__title { margin-bottom: clamp(20px,2.6vw,28px); }
.sc-hero__line { display: block; }
.sc-hero__lead  { margin-bottom: clamp(26px,3.2vw,36px); max-width: 56ch; }
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: clamp(32px,4vw,48px); }
.sc-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px,3vw,40px);
	padding-top: var(--sc-6);
	border-top: 1px solid var(--sc-line);
}

/* ── 7.2 App-window mock ────────────────────────────────────────────────── */

/* Component-local tokens: these colours appear nowhere else in the design. */
.sc-window {
	--w-chrome: #0B0B0F;
	--w-rail:   #0B0B0F;
	--w-grid:   #16161B;
	--w-skel:   #1A1A20;
	--w-url:    #26262E;
	--w-red:    #FF5F57;
	--w-amber:  #FEBC2E;
	--w-green:  #28C840;

	position: relative;
	z-index: var(--sc-z-window);
	border: 1px solid var(--sc-border-media);
	border-radius: var(--sc-r-4);
	background: var(--sc-surface);
	box-shadow: var(--sc-sh-window);
	overflow: hidden;
	direction: ltr;      /* a screenshot of an English product */
	text-align: left;
}
.sc-window__bar {
	display: flex;
	align-items: center;
	gap: var(--sc-2);
	padding: 10px 14px;
	background: var(--w-chrome);
	border-bottom: 1px solid var(--sc-border-media);
}
.sc-window__light { width: 10px; height: 10px; border-radius: var(--sc-r-circle); }
.sc-window__light--r { background: var(--w-red); }
.sc-window__light--a { background: var(--w-amber); }
.sc-window__light--g { background: var(--w-green); }
.sc-window__url {
	margin-inline: auto;
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-2);
	color: var(--sc-text-5);
	background: var(--w-url);
	border-radius: 6px;
	padding: 3px 12px;
}
.sc-window__body { display: flex; min-height: 260px; }
.sc-window__rail {
	width: 60px;
	background: var(--w-rail);
	border-right: 1px solid var(--sc-border-media);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sc-5);
	padding: var(--sc-5) 0;
	color: var(--sc-text-deco);
}
.sc-window__rail .is-active { color: var(--sc-accent-light); }
.sc-window__main { flex: 1; padding: var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-4); }
.sc-window__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); }
.sc-window__skel { height: 9px; border-radius: 4px; background: var(--w-skel); }
.sc-window__skel--head { width: 120px; }
.sc-window__live .sc-dot { width: 6px; height: 6px; }
.sc-window__live {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--sc-font-mono); font-size: var(--sc-fs-1);
	color: var(--sc-text-bright);
	background: rgba(var(--sc-success-rgb),.13);
	border: 1px solid rgba(var(--sc-success-rgb),.4);
	border-radius: var(--sc-r-1);
	padding: 3px 8px;
}
.sc-window__chart {
	background: var(--sc-bg-deep);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-3);
	padding: var(--sc-4);
}
.sc-window__chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-3); margin-bottom: var(--sc-3); }
.sc-window__metric-label { font-family: var(--sc-font-mono); font-size: var(--sc-fs-1); color: var(--sc-text-4); }
.sc-window__metric-value { font-family: var(--sc-font-num); font-weight: 700; font-size: 22px; }
.sc-window__delta { font-family: var(--sc-font-mono); font-size: var(--sc-fs-2); color: var(--sc-success); }
.sc-window__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sc-2); }
.sc-window__kpi {
	background: var(--sc-bg-deep);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-2);
	padding: 10px;
}
.sc-window__kpi-label { font-family: var(--sc-font-mono); font-size: var(--sc-fs-1); color: var(--sc-text-4); }
.sc-window__kpi-value { font-family: var(--sc-font-num); font-weight: 700; font-size: 15px; margin-top: 3px; }
.sc-window__kpi-delta { font-family: var(--sc-font-mono); font-size: var(--sc-fs-1); color: var(--sc-success); }
.sc-window__kpi-delta--flat { color: var(--sc-text-4); }

.sc-window__line {
	stroke-dasharray: 640;
	stroke-dashoffset: 640;
	animation: sc-draw 1.8s var(--sc-ease-draw) .3s forwards;
}
.sc-window__area { opacity: 0; animation: sc-fade 1.4s .55s forwards; }
.sc-window__dot  { opacity: 0; animation: sc-fade .5s 1.7s forwards; }
.sc-window__ping { transform-origin: center; animation: sc-ping 2s ease-out 1.9s infinite; }

.sc-window__chip {
	position: absolute;
	z-index: var(--sc-z-chip);
	background: var(--sc-surface-3);
	border: 1px solid var(--sc-border-soft);
	border-radius: 14px;
	padding: 10px 14px;
	box-shadow: var(--sc-sh-float);
	font-size: var(--sc-fs-4);
	display: flex;
	align-items: center;
	gap: var(--sc-2);
	animation: sc-float 4s ease-in-out infinite;
	direction: ltr;
}
.sc-window__chip--1 { top: -18px;    inset-inline-end: 8%;  }
.sc-window__chip--2 { bottom: 12%;   inset-inline-start: -22px; animation-duration: 5s;   animation-delay: .5s; }
.sc-window__chip--3 { bottom: -18px; inset-inline-end: 14%; animation-duration: 4.6s; animation-delay: .8s; }

/* ── 7.3 Marquee ────────────────────────────────────────────────────────── */

.sc-marquee {
	overflow: hidden;
	background: var(--sc-bg-deep);
	border-block: 1px solid var(--sc-line);
	padding-block: var(--sc-4);
	direction: ltr;   /* one keyframe serves both directions */
}
.sc-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(20px,3vw,40px);
	width: max-content;
	animation: sc-marq var(--sc-marquee-dur) linear infinite;
}
.sc-marquee.is-paused .sc-marquee__track { animation-play-state: paused; }
.sc-marquee__item {
	font-family: var(--sc-font-num);
	font-weight: 500;
	font-size: var(--sc-fs-marquee);
	color: #E8E7EC;
	white-space: nowrap;
}
.sc-marquee__sep { color: var(--sc-accent); flex-shrink: 0; }

/* ── 7.4 Process timeline ───────────────────────────────────────────────── */

.sc-timeline { position: relative; display: flex; flex-direction: column; gap: var(--sc-gap-card); }
.sc-timeline__spine {
	position: absolute;
	top: 24px; bottom: 24px;
	inset-inline-start: 23px;
	width: 2px;
	background: var(--sc-grad-spine);
	pointer-events: none;
}
.sc-timeline__row {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--sc-5);
	align-items: start;
}
.sc-timeline__marker {
	width: 48px; height: 48px;
	border-radius: var(--sc-r-circle);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sc-font-num);
	font-weight: 700;
	font-size: var(--sc-fs-6);
	color: var(--sc-text-4);
	flex-shrink: 0;
}
.sc-timeline__row--accent .sc-timeline__marker {
	background: var(--sc-grad-brand);
	border-color: var(--sc-border-bright);
	color: var(--sc-on-accent);
	box-shadow: 0 0 22px -4px rgba(var(--sc-accent-rgb),.85);
}
.sc-timeline__marker--year { font-size: var(--sc-fs-4); letter-spacing: -.3px; }
.sc-timeline__card { display: flex; flex-direction: column; gap: var(--sc-3); align-items: flex-start; }
.sc-section__actions { margin-top: var(--sc-7); }
.sc-timeline__card .sc-chip { align-self: flex-start; margin-top: var(--sc-2); }

/* ── 7.5 Page hero (sub-pages) — design C11 ─────────────────────────────── */

.sc-phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--sc-line); }
.sc-phero__orb { top: -10%; inset-inline-start: 60%; transform: translate(-50%,0); background: radial-gradient(circle,rgba(var(--sc-accent-rgb),.22),rgba(var(--sc-accent-rgb),0) 62%); }
.sc-phero__inner {
	position: relative;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: var(--sc-hero-y-top) var(--sc-gutter) var(--sc-hero-y-bot);
}
.sc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-2);
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	margin-bottom: var(--sc-6);
	list-style: none;
}
.sc-crumbs a { color: var(--sc-text-3); text-decoration: none; }
.sc-crumbs__sep { color: var(--sc-border-mute); }
.sc-crumbs__current { color: var(--sc-accent-light); }
.sc-phero__title { max-width: 16ch; margin-bottom: var(--sc-5); }
.sc-phero__sub { max-width: 560px; color: var(--sc-text-2); font-size: var(--sc-fs-lead); }
.sc-phero__meta { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-6); }

/* ── 7.6 Forms ──────────────────────────────────────────────────────────── */

.sc-form { display: flex; flex-direction: column; gap: var(--sc-4); }
.sc-form__row { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.sc-form__field { flex: 1 1 220px; display: flex; flex-direction: column; gap: var(--sc-2); margin: 0; }
.sc-form__label {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-4);
	letter-spacing: var(--sc-ls-mono);
}

.sc-input {
	width: 100%;
	background: var(--sc-bg-deep);
	border: 1px solid var(--sc-border-input);
	border-radius: var(--sc-r-3);
	color: var(--sc-text);
	font: inherit;
	padding: 13px 16px;
	transition: border-color var(--sc-dur-fast) var(--sc-ease);
}
.sc-input::placeholder { color: var(--sc-text-4); }
.sc-input:focus { border-color: var(--sc-accent); outline: none; }
textarea.sc-input { resize: vertical; min-height: 120px; }
select.sc-input { cursor: pointer; }

.ss-form-feedback { font-size: var(--sc-fs-5); margin: 0; }
.ss-form-feedback:empty { display: none; }
.ss-form-feedback[data-kind="success"] { color: var(--sc-success); }
.ss-form-feedback[data-kind="error"]   { color: #FF6B6B; }

.sc-form__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sc-3);
	text-align: center;
	padding: var(--sc-7) 0;
}
.sc-form__done[hidden] { display: none; }

/* ── 7.7 Newsletter band ────────────────────────────────────────────────── */

.sc-news {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-gap-col);
}
.sc-news__copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--sc-3); }
.sc-news__form { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: var(--sc-2); align-items: center; }
.sc-news__form .sc-input { flex: 1 1 200px; }
.sc-news__form .ss-form-feedback { flex: 1 1 100%; }
.sc-news__done { display: flex; align-items: center; gap: var(--sc-3); }
.sc-news__done[hidden] { display: none; }

.sc-btn--on-plum { background: var(--sc-on-accent); color: var(--sc-bg); }

/* ── 7.8 Contact layout ─────────────────────────────────────────────────── */

.sc-contact { align-items: flex-start; gap: var(--sc-gap-col); }
.sc-contact__form-col { flex: 2 1 420px; }
.sc-contact__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--sc-gap-card); }
.sc-contact__response { display: flex; align-items: center; gap: var(--sc-3); }
.sc-contact__response p { color: var(--sc-accent-pale); font-size: var(--sc-fs-5); }

/* ── 7.9 Filter bar & pagination ────────────────────────────────────────── */

.sc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-2);
	margin-bottom: var(--sc-gap-card);
	list-style: none;
}

.sc-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sc-3); }
.sc-empty .sc-card__tags { justify-content: center; }

.sc-pagination { margin-top: clamp(32px,4vw,56px); }
.sc-pagination .nav-links, .sc-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-2);
	justify-content: center;
	list-style: none;
}
.sc-pagination a.page-numbers, .sc-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--sc-3);
	border: 1px solid var(--sc-border-input);
	border-radius: var(--sc-r-2);
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
	color: var(--sc-text-2);
	text-decoration: none;
	transition: border-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.sc-pagination span.current {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	color: var(--sc-on-accent);
}


/* ── 7.10 Wizard ────────────────────────────────────────────────────────── */

.sc-wizard { display: flex; flex-direction: column; gap: var(--sc-7); }

.wizard-steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--sc-3);
	padding-bottom: var(--sc-5);
}
.wizard-steps-line {
	position: absolute;
	inset-inline: 0;
	top: 19px;
	height: 2px;
	background: var(--sc-border);
}
.wizard-steps-fill {
	display: block;
	height: 100%;
	width: var(--sc-progress, 33%);
	background: var(--sc-grad-brand);
	transition: width var(--sc-dur) var(--sc-ease);
}
.wizard-step-btn {
	position: relative;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sc-2);
	padding: 0;
	color: var(--sc-text-4);
}
.wizard-step-num {
	width: 40px; height: 40px;
	border-radius: var(--sc-r-circle);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	display: flex; align-items: center; justify-content: center;
	font-size: var(--sc-fs-5);
	transition: all var(--sc-dur-fast) var(--sc-ease);
}
.wizard-step-btn.is-active .wizard-step-num,
.wizard-step-btn.is-complete .wizard-step-num {
	background: var(--sc-grad-brand);
	border-color: var(--sc-border-bright);
	color: var(--sc-on-accent);
}
.wizard-step-btn.is-active { color: var(--sc-text); }
.wizard-step-label { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); }

.wizard-step { display: none; flex-direction: column; gap: var(--sc-5); }
.wizard-step.is-active { display: flex; }
.wizard-step[data-error] .sc-choice-group { animation: sc-shake .4s ease; }

.wizard-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-3);
	margin-top: var(--sc-3);
}

/* ── 7.11 Choice chips (checkbox / radio groups) ────────────────────────── */

.sc-choice-group { display: flex; flex-wrap: wrap; gap: var(--sc-2); border: 0; padding: 0; margin: 0; }
.sc-choice-group legend { margin-bottom: var(--sc-3); }
.sc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sc-choice label {
	display: inline-flex;
	align-items: center;
	background: var(--sc-surface-3);
	border: 1px solid var(--sc-border-input);
	border-radius: var(--sc-r-pill);
	padding: 10px 18px;
	font-size: var(--sc-fs-5);
	color: var(--sc-text-2);
	cursor: pointer;
	transition: all var(--sc-dur-fast) var(--sc-ease);
}
.sc-choice input:checked + label {
	background: var(--sc-surface-accent);
	border-color: var(--sc-border-hover);
	color: var(--sc-accent-light);
}
.sc-choice input:focus-visible + label { outline: 2px solid var(--sc-accent-light); outline-offset: 2px; }

/* ── 7.12 FAQ ───────────────────────────────────────────────────────────── */

.sc-faq { display: flex; flex-direction: column; gap: var(--sc-3); }
.sc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-3);
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--sc-fs-lead);
}
.sc-faq__q::-webkit-details-marker { display: none; }
.sc-faq__icon {
	color: var(--sc-accent-light);
	flex-shrink: 0;
	transition: transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-faq__item[open] .sc-faq__icon { transform: rotate(45deg); }
.sc-faq__item[open] { border-color: var(--sc-border-hover); }
.sc-faq__a { color: var(--sc-text-3); line-height: var(--sc-lh-body); padding-top: var(--sc-3); }

/* ── 7.13 Article ───────────────────────────────────────────────────────── */

.sc-article__cover { margin-bottom: var(--sc-9); }
.sc-article {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--sc-gap-col);
	align-items: start;
}
.sc-article__side { position: sticky; top: calc(var(--sc-header-h) + var(--sc-6)); display: flex; flex-direction: column; gap: var(--sc-6); }
.sc-article__author { display: flex; align-items: center; gap: var(--sc-3); margin-bottom: var(--sc-6); }
.sc-article__bio { margin-top: var(--sc-9); }

.sc-toc__title {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	font-weight: 400;
	letter-spacing: var(--sc-ls-foot-head);
	text-transform: uppercase;
	color: var(--sc-text-5);
	margin-bottom: var(--sc-4);
}
.sc-toc__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sc-toc__list a {
	display: flex;
	gap: var(--sc-2);
	text-decoration: none;
	color: var(--sc-text-3);
	font-size: var(--sc-fs-5);
	line-height: 1.45;
	transition: color var(--sc-dur-fast) var(--sc-ease);
}
.sc-toc__num { font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); color: var(--sc-text-5); flex-shrink: 0; }
.sc-toc__list a.is-active { color: var(--sc-accent-light); }
.sc-toc__list a.is-active .sc-toc__num { color: var(--sc-accent-text); }

.sc-share { display: flex; flex-wrap: wrap; gap: var(--sc-2); align-items: center; }

.sc-search-wrap { margin-bottom: var(--sc-gap-card); }
.sc-search { display: flex; gap: var(--sc-2); max-width: 560px; }
.sc-search .sc-input { flex: 1; }


/* =============================================================================
   8. EDITOR CONTENT — the only place raw editor HTML is styled
   ========================================================================== */

.sc-prose { color: var(--sc-text-2); font-size: var(--sc-fs-lead); line-height: 1.85; counter-reset: sc-h2; }
.sc-prose--narrow { max-width: 72ch; margin-inline: auto; }
.sc-prose--compact { font-size: var(--sc-fs-6); line-height: var(--sc-lh-body); color: var(--sc-text-3); }

.sc-prose > * + * { margin-top: 1.1em; }

.sc-prose h2, .sc-prose h3, .sc-prose h4 {
	font-family: var(--sc-font-display);
	color: var(--sc-text);
	line-height: var(--sc-lh-h3);
	margin-top: 1.8em;
	scroll-margin-top: calc(var(--sc-header-h) + 20px);
}
.sc-prose h2 { font-size: var(--sc-fs-h2-sm); font-weight: 700; }
.sc-prose h3 { font-size: var(--sc-fs-h3); font-weight: 600; }
.sc-prose h4 { font-size: var(--sc-fs-h3-sm); font-weight: 600; }

/* Mono numeral before every h2, matching the section-head idiom. */
.sc-prose h2::before {
	counter-increment: sc-h2;
	content: "[ 0" counter(sc-h2) " ]";
	display: block;
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-4);
	font-weight: 400;
	color: var(--sc-accent-text);
	margin-bottom: var(--sc-2);
}

.sc-prose a { color: var(--sc-accent-light); text-decoration: underline; text-underline-offset: 3px; }
.sc-prose strong { color: var(--sc-text); }
.sc-prose ul, .sc-prose ol { padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: .5em; }
.sc-prose li::marker { color: var(--sc-accent-text); }

.sc-prose blockquote {
	border-inline-start: 3px solid var(--sc-accent);
	padding-inline-start: var(--sc-5);
	color: var(--sc-text-quote);
	font-size: var(--sc-fs-quote);
	line-height: var(--sc-lh-quote);
}

.sc-prose code {
	font-family: var(--sc-font-mono);
	font-size: .88em;
	background: var(--sc-bg-deep);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-1);
	padding: 2px 6px;
	direction: ltr;
	unicode-bidi: isolate;
}
.sc-prose pre {
	background: var(--sc-bg-deep);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-r-3);
	padding: var(--sc-5);
	overflow-x: auto;
	direction: ltr;
}
.sc-prose pre code { background: none; border: 0; padding: 0; }

.sc-prose img { border-radius: var(--sc-r-5); }
.sc-prose hr { border: 0; border-top: 1px solid var(--sc-line); margin-block: var(--sc-8); }

.sc-prose table { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-6); }
.sc-prose th, .sc-prose td { border-bottom: 1px solid var(--sc-line); padding: 10px 12px; text-align: start; }
.sc-prose th { color: var(--sc-text); font-family: var(--sc-font-mono); font-size: var(--sc-fs-3); }

.sc-prose figcaption {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-fs-3);
	color: var(--sc-text-5);
	margin-top: var(--sc-2);
}


/* =============================================================================
   9. ANIMATIONS
   ========================================================================== */

@keyframes sc-marq  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
@keyframes sc-glow  { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sc-draw  { to { stroke-dashoffset: 0; } }
@keyframes sc-fade  { to { opacity: 1; } }
@keyframes sc-ping  { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sc-spin  { to { transform: rotate(360deg); } }
@keyframes sc-load  { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes sc-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Scroll reveal. Gated on html.js so a JS failure can never hide the page. */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--sc-dur-reveal) var(--sc-ease) var(--sc-reveal-delay, 0ms),
		transform var(--sc-dur-reveal) var(--sc-ease) var(--sc-reveal-delay, 0ms);
	will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }


/* =============================================================================
   10. MEDIA QUERIES — the complete, closed set
   ========================================================================== */

/* 1120 — the wordmark tagline collides with the nav pill. */
@media (max-width: 1119.98px) {
	.sc-brand__tagline { display: none; }
}

/* 1000 — nav becomes a burger. CSS owns this, not JS: a JS-driven swap
   flashes the desktop pill on first paint on every phone. */
@media (max-width: 999.98px) {
	.sc-header__nav { display: none; }
	.sc-header__burger { display: flex; }
}

/* 900 — the floating chips are absolutely positioned outside the window and
   overflow once the hero column narrows. */
@media (max-width: 899.98px) {
	.sc-window__chip { display: none; }
}

/* 1000 — the article's sticky TOC column collapses under the lead. */
@media (max-width: 999.98px) {
	.sc-article { grid-template-columns: 1fr; }
	.sc-article__side { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--sc-5); }
}

@media (max-width: 899.98px) {
	.sc-intro { grid-template-columns: 1fr; gap: var(--sc-5); }
}

/* 720 — MANDATORY.
   The featured card is `grid-column: span 2` inside
   repeat(auto-fit, minmax(260px,1fr)). Once the container is down to a single
   auto-fit track, that span forces an implicit second column and the grid
   overflows horizontally on every phone. No clamp()/minmax() trick fixes it —
   it is a grid-algorithm limitation, so the span has to be dropped.

   The hero's app-window mock is 100% decorative and unreadable at this width,
   and hiding it is the single largest LCP win available. */
@media (max-width: 719.98px) {
	.sc-project--featured,
	.sc-quote--featured,
	.sc-post--featured { grid-column: auto; grid-row: auto; }
	.sc-post--featured { flex-direction: column; }
	.sc-hero__visual { display: none; }
	.sc-mobile__link { font-size: 22px; }
	.sc-footer__bottom { justify-content: flex-start; }
	.sc-head--split { align-items: flex-start; }
}

/* 560 — the timeline spine sits at the centre of a 48px marker; once the
   marker and card stack, it points at nothing. */
@media (max-width: 559.98px) {
	.sc-timeline__spine { display: none; }
	.sc-timeline__row { grid-template-columns: 1fr; gap: var(--sc-3); }
	.sc-timeline__marker { width: 40px; height: 40px; font-size: var(--sc-fs-4); }
	.sc-window__kpis { grid-template-columns: 1fr; }
	.sc-fab { width: 48px; height: 48px; bottom: 16px; left: 16px; }
	.sc-totop { width: 44px; height: 44px; bottom: 16px; right: 16px; }

	/* The header's right cluster — lang toggle + CTA pill + burger — is wider
	   than a 390px viewport, and the Swedish CTA label is longer still, so the
	   whole document overflowed horizontally on phones. The CTA is not lost:
	   the mobile menu ends with a full-width copy of it. */
	.sc-header__inner { gap: var(--sc-3); }
	.sc-header__actions { gap: var(--sc-2); }
	.sc-header__actions > .sc-btn { display: none; }
	.sc-brand__name { font-size: 15px; }

	.sc-wizard .wizard-step-label { display: none; }
	.sc-news__form { flex-direction: column; align-items: stretch; }
}


/* =============================================================================
   11. PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html.js [data-reveal] { opacity: 1; transform: none; }
	.sc-orb, .sc-cta__orb { animation: none; opacity: .7; }
	.sc-fab { animation: none; }
	.sc-preloader__bar > span { animation: none; width: 100%; }
}

@media (hover: hover) {
	.sc-header__link:hover { background: var(--sc-surface-4); color: var(--sc-accent-light); }
	.sc-lang__link:hover:not(.is-active):not([aria-current]) { color: var(--sc-text); }
	.sc-footer__link:hover { color: var(--sc-text); }
	.sc-footer__social a:hover { color: var(--sc-accent-light); }
	.sc-cta__link:hover { color: var(--sc-accent-light); }
	.sc-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px -8px rgba(37,211,102,.7); }
	.sc-totop:hover { border-color: var(--sc-border-hover); color: var(--sc-accent-light); }
	.sc-brand:hover .sc-brand__name { color: var(--sc-accent-light); }

	.sc-btn--primary:hover { filter: brightness(1.12); transform: translateY(-2px); }
	.sc-btn--sm.sc-btn--primary:hover { transform: translateY(-1px); }
	.sc-btn--ghost:hover { background: var(--sc-surface-4); border-color: var(--sc-border-mute); }
	.sc-btn--link-box:hover { border-color: var(--sc-border-hover); color: var(--sc-accent-light); }

	.sc-chip--social:hover { border-color: var(--sc-border-hover); color: var(--sc-accent-light); }
	.sc-chip--filter:hover:not([aria-current]) { border-color: var(--sc-border-hover); color: var(--sc-accent-light); }

	/* The design repeats this exact resting/hover pair 68 and 65 times.
	   Here it is once. */
	.sc-card:hover,
	.sc-project:hover,
	.sc-post:hover {
		border-color: var(--sc-border-hover);
		transform: translateY(-6px);
		box-shadow: var(--sc-sh-card-hover);
	}
	.sc-card--accent:hover,
	.sc-card--plum:hover {
		border-color: var(--sc-border-hover);
		box-shadow: var(--sc-sh-accent-hover);
	}
	.sc-post:hover .sc-post__more { color: var(--sc-accent-pale); }
	.sc-pillar:hover::before { transform: scaleX(1); }

	.sc-crumbs a:hover { color: var(--sc-accent-light); }
	.sc-info__value:hover { color: var(--sc-accent-light); }
	.sc-pagination a.page-numbers:hover { border-color: var(--sc-border-hover); color: var(--sc-accent-light); }
	.sc-toc__list a:hover { color: var(--sc-accent-light); }
	.sc-team__social a:hover { color: var(--sc-accent-light); }
}

@media print {
	.sc-header, .sc-mobile, .sc-fab, .sc-cta, .sc-footer__social { display: none !important; }
	body { background: #fff; color: #000; }
}