/* SIWAN — tokens (generated from the design system) */
:root,[data-theme="light"]{
--orange-500:#e66a27;
--orange-600:#d95d1c;
--orange-100:#fbe3d3;
--copper-700:#a94720;
--charcoal-900:#171b1a;
--charcoal-800:#2a302e;
--ivory-100:#f5f2eb;
--ivory-50:#fffdf8;
--ivory-200:#ece6da;
--stone-500:#8a847d;
--stone-300:#d9d2c5;
--stone-700:#5c5752;
--success-700:#1f6f5c;
--success-100:#e1efe9;
--error-700:#b3261e;
--error-100:#f9e2df;
--bg-page:var(--ivory-100);
--bg-raised:var(--ivory-50);
--bg-sunken:var(--ivory-200);
--bg-inverse:var(--charcoal-900);
--bg-brand:var(--orange-500);
--bg-brand-subtle:var(--orange-100);
--text-primary:var(--charcoal-900);
--text-muted:var(--stone-700);
--text-subtle:var(--stone-500);
--text-inverse:var(--ivory-100);
--text-on-brand:var(--charcoal-900);
--text-link:var(--copper-700);
--border-subtle:var(--stone-300);
--border-control:var(--stone-500);
--border-strong:var(--charcoal-900);
--focus-ring:var(--charcoal-900);
--focus-ring-inverse:var(--orange-500);
--action-primary:var(--orange-500);
--action-primary-hover:var(--orange-600);
--action-primary-edge:var(--copper-700);
--action-secondary:var(--charcoal-900);
--action-secondary-hover:var(--charcoal-800);
--action-disabled:var(--ivory-200);
--status-success:var(--success-700);
--status-success-bg:var(--success-100);
--status-error:var(--error-700);
--status-error-bg:var(--error-100);
--shadow-ledge-brand:0 3px 0 0 #a94720;
--shadow-ledge-sm:0 2px 0 0 #171b1a;
--shadow-ledge-md:0 4px 0 0 #171b1a;
--shadow-ledge-lg:0 7px 0 0 #171b1a;
--shadow-float:0 16px 40px rgba(23, 27, 26, 0.14);
}
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--radius-xs:3px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:24px;
--border-hairline:1px;
--border-default:1.5px;
--border-heavy:2px;
--container-max:1200px;
--container-text:720px;
--grid-columns-desktop:12;
--grid-columns-mobile:4;
--gutter-desktop:24px;
--gutter-mobile:16px;
--page-margin-desktop:40px;
--page-margin-mobile:20px;
--nav-height:72px;
--nav-height-mobile:60px;
--tap-target-min:44px;
--font-ar:"IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--font-display:"Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
--font-body:Inter, "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* ==========================================================================
   SIWAN | سيوان — component stylesheet
   Loads after tokens.css. Every color, space, radius and shadow is a token.
   Responsive rules use container queries on `.sw` (breakpoint 720px), so the
   same markup adapts inside any frame — a page, a card, a mobile mock.
   ========================================================================== */

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

.sw {
  container: sw / inline-size;
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sw[dir="ltr"], .sw [dir="ltr"] { font-family: var(--font-body); line-height: 1.6; }
.sw[dir="rtl"], .sw [dir="rtl"] { font-family: var(--font-ar); line-height: 1.8; }
.sw :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.sw img { max-width: 100%; display: block; }

/* Mirror directional icons (arrows) in RTL */
.sw-flip:dir(rtl) { transform: scaleX(-1); }

/* ---------- Layout ---------- */
.sw-container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--page-margin-desktop));
  margin-inline: auto;
  padding-inline: var(--page-margin-desktop);
}
.sw-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter-desktop);
}
.sw-section { padding-block: var(--space-9); }
.sw-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

@container sw (max-width: 719px) {
  .sw-container { padding-inline: var(--page-margin-mobile); }
  .sw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-mobile); }
  .sw-section { padding-block: var(--space-7); }
}

/* ---------- Type helpers ---------- */
.sw-display { font-size: 56px; line-height: 76px; font-weight: 700; text-wrap: balance; }
.sw-h1 { font-size: 40px; line-height: 58px; font-weight: 700; text-wrap: balance; }
.sw-h2 { font-size: 30px; line-height: 44px; font-weight: 700; }
.sw-h3 { font-size: 22px; line-height: 34px; font-weight: 600; }
.sw-lead { font-size: 19px; line-height: 34px; color: var(--text-muted); text-wrap: pretty; }
.sw-body { font-size: 16px; line-height: 29px; }
.sw-small { font-size: 14px; line-height: 24px; color: var(--text-muted); }
.sw-eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-link); display: inline-flex; align-items: center; gap: var(--space-2); }
.sw-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-xs); background: var(--bg-brand); }

.sw-display:dir(ltr), .sw-h1:dir(ltr), .sw-h2:dir(ltr), .sw-h3:dir(ltr) { font-family: var(--font-display); }
.sw-display:dir(ltr) { line-height: 60px; letter-spacing: -0.02em; }
.sw-h1:dir(ltr) { line-height: 46px; letter-spacing: -0.015em; }
.sw-h2:dir(ltr) { line-height: 36px; letter-spacing: -0.01em; font-weight: 600; }
.sw-h3:dir(ltr) { line-height: 28px; }
.sw-lead:dir(ltr) { font-size: 18px; line-height: 30px; }
.sw-body:dir(ltr) { line-height: 26px; }
.sw-small:dir(ltr) { line-height: 22px; }
.sw-eyebrow:dir(ltr) { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

@container sw (max-width: 719px) {
  .sw-display { font-size: 36px; line-height: 52px; }
  .sw-h1 { font-size: 30px; line-height: 46px; }
  .sw-h2 { font-size: 24px; line-height: 38px; }
  .sw-lead { font-size: 17px; line-height: 31px; }
  .sw-display:dir(ltr) { line-height: 40px; }
  .sw-h1:dir(ltr) { line-height: 36px; }
  .sw-h2:dir(ltr) { line-height: 30px; }
}

/* ---------- Motif: square dots, diamonds, dot field ---------- */
.sw-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-xs); background: var(--bg-brand); flex: none; }
.sw-dot--ink { background: var(--text-primary); }
.sw-diamond { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--text-primary); transform: rotate(45deg) scaleX(1); flex: none; }
.sw-dotfield {
  background-image: radial-gradient(circle at 2px 2px, var(--stone-300) 1.6px, transparent 2px);
  background-size: 20px 20px;
}
.sw-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.sw-list li { display: flex; align-items: baseline; gap: var(--space-3); }
.sw-list li::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px;
  background: var(--bg-brand); transform: translateY(-2px) rotate(45deg);
}

/* ---------- Button ---------- */
.sw-btn {
  --_bg: var(--action-primary);
  --_bg-hover: var(--action-primary-hover);
  --_fg: var(--text-on-brand);
  --_bd: var(--action-primary-edge);
  --_ledge: var(--action-primary-edge);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: 0 var(--space-5);
  border: var(--border-default) solid var(--_bd);
  border-radius: var(--radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font: 600 15px/1.2 var(--font-ar);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 0 0 var(--_ledge);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sw-btn:dir(ltr) { font-family: var(--font-body); }
.sw-btn:hover, .sw-btn.is-hover { background: var(--_bg-hover); transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--_ledge); }
.sw-btn:active, .sw-btn.is-active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--_ledge); }
.sw-btn:focus-visible, .sw-btn.is-focus { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 3px; }
.sw-btn .sw-ico { width: 18px; height: 18px; flex: none; }

.sw-btn--secondary { --_bg: var(--action-secondary); --_bg-hover: var(--action-secondary-hover); --_fg: var(--text-inverse); --_bd: var(--action-secondary); --_ledge: var(--orange-500); }
.sw-btn--outline { --_bg: var(--bg-raised); --_bg-hover: var(--bg-page); --_fg: var(--text-primary); --_bd: var(--border-strong); --_ledge: var(--border-strong); box-shadow: 0 2px 0 0 var(--_ledge); }
.sw-btn--ghost { --_bg: transparent; --_bg-hover: var(--bg-sunken); --_fg: var(--text-primary); --_bd: transparent; --_ledge: transparent; box-shadow: none; }
.sw-btn--ghost:hover, .sw-btn--ghost.is-hover { transform: none; box-shadow: none; }
.sw-btn--ghost:active, .sw-btn--ghost.is-active { transform: none; box-shadow: none; background: var(--stone-300); }

.sw-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; border-radius: var(--radius-sm); }
.sw-btn--lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.sw-btn--block { width: 100%; }
.sw-btn--icon { padding: 0; width: var(--tap-target-min); }

.sw-btn:disabled, .sw-btn[aria-disabled="true"]:not([aria-busy="true"]) {
  --_bg: var(--action-disabled); --_bg-hover: var(--action-disabled); --_fg: var(--text-muted); --_bd: var(--border-subtle); --_ledge: transparent;
  cursor: not-allowed; transform: none; box-shadow: none;
}
.sw-btn[aria-busy="true"] { cursor: progress; pointer-events: none; transform: none; }

/* Loading: three square dots — the logo's dots, assembling */
.sw-dots { display: inline-flex; gap: 4px; align-items: center; }
.sw-dots i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; animation: sw-dot 900ms ease-in-out infinite; }
.sw-dots i:nth-child(2) { animation-delay: 150ms; }
.sw-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes sw-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Links ---------- */
.sw-link {
  color: var(--text-link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  border-radius: 3px; cursor: pointer;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.sw-link:hover, .sw-link.is-hover { color: var(--text-primary); text-decoration-color: var(--orange-500); text-decoration-thickness: 2.5px; }
.sw-link:focus-visible, .sw-link.is-focus { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 3px; }
.sw-link:active, .sw-link.is-active { color: var(--copper-700); }
.sw-link--arrow { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.sw-link--arrow .sw-ico { width: 18px; height: 18px; transition: translate 160ms ease; }
.sw-link--arrow:hover .sw-ico, .sw-link--arrow.is-hover .sw-ico { translate: 3px 0; }
.sw-link--arrow:hover .sw-ico:dir(rtl), .sw-link--arrow.is-hover .sw-ico:dir(rtl) { translate: -3px 0; }
.sw-link[aria-disabled="true"] { color: var(--text-subtle); text-decoration: none; pointer-events: none; }

.sw-navlink {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap-target-min);
  padding-inline: var(--space-2); color: var(--text-primary); font-weight: 500; font-size: 15px; text-decoration: none; border-radius: var(--radius-sm);
}
.sw-navlink::after {
  content: ""; position: absolute; inset-inline: var(--space-2); bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--orange-500); transform: scaleX(0); transition: transform 160ms ease;
}
.sw-navlink:hover::after, .sw-navlink.is-hover::after, .sw-navlink[aria-current="page"]::after { transform: scaleX(1); }
.sw-navlink[aria-current="page"] { font-weight: 600; }
.sw-navlink:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Fields ---------- */
.sw-field { display: grid; gap: var(--space-2); align-content: start; }
.sw-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-primary); }
.sw-label .sw-opt { font-weight: 400; color: var(--text-muted); font-size: 13px; margin-inline-start: var(--space-1); }
.sw-label .sw-req { color: var(--status-error); margin-inline-start: 2px; }
.sw-input, .sw-select, .sw-textarea {
  width: 100%; min-height: 48px;
  padding: 0 14px;
  font-family: inherit; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--text-primary);
  background: var(--bg-raised);
  border: var(--border-default) solid var(--border-control);
  border-radius: var(--radius-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}
.sw-textarea { min-height: 132px; padding: var(--space-3) 14px; resize: vertical; line-height: 1.8; }
.sw-input::placeholder, .sw-textarea::placeholder { color: var(--text-subtle); opacity: 1; }
.sw-input:hover, .sw-select:hover, .sw-textarea:hover,
.sw-input.is-hover, .sw-select.is-hover, .sw-textarea.is-hover { border-color: var(--border-strong); }
.sw-input:focus-visible, .sw-select:focus-visible, .sw-textarea:focus-visible,
.sw-input.is-focus, .sw-select.is-focus, .sw-textarea.is-focus {
  outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px;
  border-color: var(--border-strong);
  box-shadow: inset 0 -3px 0 0 var(--orange-500);
}
.sw-input[aria-invalid="true"], .sw-select[aria-invalid="true"], .sw-textarea[aria-invalid="true"] { border-color: var(--status-error); border-width: var(--border-heavy); }
.sw-input.is-valid, .sw-select.is-valid, .sw-textarea.is-valid { border-color: var(--status-success); }
.sw-input:disabled, .sw-select:disabled, .sw-textarea:disabled {
  background: var(--action-disabled); border-color: var(--border-subtle); color: var(--text-muted); cursor: not-allowed;
}
.sw-select {
  padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171b1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sw-select:dir(rtl) { background-position: left 14px center; }
.sw-input[type="email"], .sw-input[type="tel"], .sw-input[type="url"] { direction: ltr; }
.sw-input[type="email"]:dir(rtl), .sw-input[type="tel"]:dir(rtl), .sw-input[type="url"]:dir(rtl) { text-align: right; }
.sw-input[type="email"]:dir(rtl)::placeholder, .sw-input[type="tel"]:dir(rtl)::placeholder { text-align: right; }

.sw-hint { font-size: 14px; line-height: 22px; color: var(--text-muted); }
.sw-msg { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; line-height: 22px; font-weight: 500; }
.sw-msg[hidden] { display: none; }
.sw-msg .sw-ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.sw-msg--error { color: var(--status-error); }
.sw-msg--success { color: var(--status-success); }

/* ---------- Alert (form-level outcome) ---------- */
.sw-alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-md);
  border: var(--border-default) solid currentColor; font-size: 15px; line-height: 26px;
}
.sw-alert[hidden] { display: none; }
.sw-alert .sw-ico { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.sw-alert strong { display: block; color: var(--text-primary); font-weight: 600; }
.sw-alert p { color: var(--text-primary); }
.sw-alert--success { color: var(--status-success); background: var(--status-success-bg); }
.sw-alert--error { color: var(--status-error); background: var(--status-error-bg); }

/* ---------- Card ---------- */
.sw-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.sw-card--interactive {
  border: var(--border-default) solid var(--border-strong);
  box-shadow: 0 4px 0 0 var(--border-strong);
  transition: transform 160ms ease, box-shadow 160ms ease;
  text-decoration: none; cursor: pointer;
}
.sw-card--interactive:hover, .sw-card--interactive.is-hover { transform: translateY(-3px); box-shadow: 0 7px 0 0 var(--border-strong); }
.sw-card--interactive:active, .sw-card--interactive.is-active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--border-strong); }
.sw-card--interactive:focus-visible, .sw-card--interactive:focus-within { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 4px; }
.sw-card--interactive :focus-visible { outline: none; }
.sw-card--inverse { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }
.sw-card--inverse .sw-small, .sw-card--inverse .sw-lead { color: var(--stone-300); }
.sw-card__title { font-size: 22px; line-height: 34px; font-weight: 600; }
.sw-card__title:dir(ltr) { font-family: var(--font-display); line-height: 28px; }
.sw-card__desc { color: var(--text-muted); font-size: 15px; line-height: 27px; }
.sw-card__desc:dir(ltr) { line-height: 24px; }
.sw-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); }

/* Build tile: icon block for service cards — a square that holds a diamond */
.sw-tile {
  position: relative; width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-brand); border: var(--border-default) solid var(--action-primary-edge);
  border-radius: var(--radius-md); box-shadow: 0 3px 0 0 var(--action-primary-edge);
}
.sw-tile .sw-ico { width: 26px; height: 26px; color: var(--text-primary); }
.sw-tile--ink { background: var(--bg-inverse); border-color: var(--bg-inverse); box-shadow: 0 3px 0 0 var(--orange-500); }
.sw-tile--ink .sw-ico { color: var(--text-inverse); }

/* Project media: a composition of blocks (no stock photos) */
.sw-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-sunken); border: var(--border-hairline) solid var(--border-subtle);
}

/* ---------- Badge ---------- */
.sw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; min-height: 26px;
  font-size: 13px; line-height: 20px; font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken); color: var(--text-primary);
  border: var(--border-hairline) solid var(--border-subtle);
  white-space: nowrap;
}
.sw-badge:dir(ltr) { font-family: var(--font-body); font-size: 12px; }
.sw-badge::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--stone-500); flex: none; }
.sw-badge--plain::before { display: none; }
.sw-badge--brand { background: var(--bg-brand-subtle); color: var(--copper-700); border-color: transparent; }
.sw-badge--brand::before { background: var(--orange-500); }
.sw-badge--ink { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }
.sw-badge--ink::before { background: var(--orange-500); }
.sw-badge--success { background: var(--status-success-bg); color: var(--status-success); border-color: transparent; }
.sw-badge--success::before { background: var(--status-success); }
.sw-badge--error { background: var(--status-error-bg); color: var(--status-error); border-color: transparent; }
.sw-badge--error::before { background: var(--status-error); }

/* ---------- Tabs ---------- */
.sw-tabs { display: grid; gap: var(--space-5); }
.sw-tablist {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; justify-self: start;
  background: var(--bg-sunken); border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--border-subtle);
}
.sw-tab {
  min-height: 40px; padding: 0 var(--space-4);
  font-family: inherit; font-size: 15px; line-height: 1; font-weight: 600; color: var(--text-muted);
  background: transparent; border: var(--border-default) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: color 120ms ease, background-color 120ms ease;
}
.sw-tab:hover, .sw-tab.is-hover { color: var(--text-primary); background: var(--bg-page); }
.sw-tab[aria-selected="true"] {
  color: var(--text-primary); background: var(--bg-raised);
  border-color: var(--border-strong); box-shadow: 0 2px 0 0 var(--border-strong);
}
.sw-tab:focus-visible, .sw-tab.is-focus { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px; }
.sw-tab:disabled { color: var(--text-subtle); cursor: not-allowed; background: transparent; }
.sw-tabpanel:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }
.sw-tabpanel[hidden] { display: none; }

/* ---------- FAQ (native details/summary) ---------- */
.sw-faq { border-top: var(--border-default) solid var(--border-strong); }
.sw-faq__item { border-bottom: var(--border-default) solid var(--border-strong); }
.sw-faq__q {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding-block: var(--space-4); cursor: pointer;
  font-size: 18px; line-height: 30px; font-weight: 600; border-radius: var(--radius-sm);
}
.sw-faq__q:dir(ltr) { font-family: var(--font-display); font-size: 18px; line-height: 26px; }
.sw-faq__q::-webkit-details-marker { display: none; }
.sw-faq__q:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px; }
.sw-faq__icon {
  position: relative; width: 30px; height: 30px; flex: none;
  border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-raised); transition: transform 200ms ease, background-color 200ms ease;
}
.sw-faq__icon::before, .sw-faq__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--text-primary); border-radius: 1px;
}
.sw-faq__icon::after { transform: rotate(90deg); }
.sw-faq__q:hover .sw-faq__icon { background: var(--bg-brand-subtle); }
.sw-faq__item[open] .sw-faq__icon { transform: rotate(45deg); background: var(--bg-brand); border-color: var(--action-primary-edge); }
.sw-faq__a { padding-bottom: var(--space-5); color: var(--text-muted); max-width: var(--container-text); }

/* ---------- Navbar ---------- */
.sw-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-page);
  border-bottom: var(--border-heavy) solid var(--border-strong);
}
.sw-nav__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--nav-height); }
.sw-nav__brand { display: inline-flex; align-items: center; border-radius: var(--radius-sm); flex: none; }
.sw-nav__brand img { height: 30px; width: auto; }
.sw-nav__brand:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 4px; }
.sw-nav__links { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: var(--space-4); }
.sw-nav__actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.sw-nav__lang { font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.sw-nav__toggle { display: none; }
.sw-nav__sheet { display: none; }
.sw-burger { position: relative; width: 18px; height: 12px; }
.sw-burger::before, .sw-burger::after { content: ""; position: absolute; inset-inline: 0; height: 2px; border-radius: 1px; background: currentColor; transition: transform 160ms ease, top 160ms ease; }
.sw-burger::before { top: 1px; }
.sw-burger::after { top: 9px; }
[aria-expanded="true"] .sw-burger::before { top: 5px; transform: rotate(45deg); }
[aria-expanded="true"] .sw-burger::after { top: 5px; transform: rotate(-45deg); }

@container sw (max-width: 719px) {
  .sw-nav__inner { min-height: var(--nav-height-mobile); gap: var(--space-3); }
  .sw-nav__brand img { height: 26px; }
  .sw-nav__links, .sw-nav__actions .sw-nav__cta { display: none; }
  .sw-nav__toggle { display: inline-flex; }
  .sw-nav__sheet:not([hidden]) {
    display: grid; gap: var(--space-1);
    padding: var(--space-4) var(--page-margin-mobile) var(--space-5);
    background: var(--bg-raised); border-top: var(--border-hairline) solid var(--border-subtle);
    box-shadow: var(--shadow-float);
  }
  .sw-nav__sheet .sw-navlink { font-size: 17px; min-height: 48px; }
  .sw-nav__sheet .sw-btn { margin-top: var(--space-3); }
}

/* ---------- Hero ---------- */
.sw-hero { position: relative; padding-block: var(--space-9); overflow: hidden; }
.sw-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter-desktop); align-items: center; }
.sw-hero__copy { grid-column: span 7; display: grid; gap: var(--space-5); justify-items: start; }
.sw-hero__title { max-width: 14ch; }
.sw-hero__title:dir(ltr) { max-width: 16ch; }
.sw-hero__lead { max-width: 54ch; }
.sw-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.sw-hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--border-subtle); width: 100%; }
.sw-hero__proof span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-muted); }
.sw-hero__visual { grid-column: span 5; }
.sw-hero__frame {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-xl);
  background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); box-shadow: 0 6px 0 0 var(--border-strong);
  overflow: hidden;
}
.sw-hero__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }

@container sw (max-width: 719px) {
  .sw-hero { padding-block: var(--space-6) var(--space-7); }
  .sw-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sw-hero__copy, .sw-hero__visual { grid-column: auto; }
  .sw-hero__visual { max-width: 340px; width: 100%; justify-self: center; }
  .sw-hero__actions { width: 100%; gap: var(--space-4); }
  .sw-hero__actions .sw-btn { width: 100%; }
}

/* Visual helpers for SVG ornaments (fills bound to tokens) */
.f-brand { fill: var(--orange-500); } .f-copper { fill: var(--copper-700); } .f-ink { fill: var(--charcoal-900); }
.f-ivory { fill: var(--bg-page); } .f-raised { fill: var(--bg-raised); } .f-sunken { fill: var(--bg-sunken); } .f-stone { fill: var(--stone-500); } .f-tint { fill: var(--orange-100); } .f-line { fill: var(--stone-300); }
.s-brand { stroke: var(--orange-500); fill: none; } .s-ink { stroke: var(--charcoal-900); fill: none; } .s-line { stroke: var(--stone-300); fill: none; }

/* ---------- Showcase scaffolding (previews only) ---------- */
.sw-specimen { padding: var(--space-5); }
.sw-caption { font: 500 12px/16px var(--font-body); color: var(--text-muted); letter-spacing: 0.02em; }
.sw-caption--ar { font-family: var(--font-ar); font-size: 13px; line-height: 20px; }
.sw-langswitch { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--bg-sunken); border: var(--border-hairline) solid var(--border-subtle); }
.sw-langswitch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; font: 600 13px/1 var(--font-body); color: var(--text-muted); cursor: pointer; }
.sw-langswitch button:first-child { font-family: var(--font-ar); }
.sw-langswitch button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-primary); box-shadow: 0 1px 0 0 var(--border-strong); }
.sw-langswitch button:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .sw *, .sw *::before, .sw *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* ===== SIWAN site layer — built on the design system (tokens.css + bundle.css above) ===== */
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }
body { background: var(--bg-page); color: var(--text-primary); margin: 0; overflow-x: hidden; }
.site { min-height: 100%; }
.sw-container { padding-left: max(var(--page-margin-desktop), env(safe-area-inset-left, 0px)); padding-right: max(var(--page-margin-desktop), env(safe-area-inset-right, 0px)); }
@container sw (max-width: 719px) { .sw-container { padding-left: max(var(--page-margin-mobile), env(safe-area-inset-left, 0px)); padding-right: max(var(--page-margin-mobile), env(safe-area-inset-right, 0px)); } }
.sw-nav { top: env(safe-area-inset-top, 0px); }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 50; background: var(--bg-inverse); color: var(--text-inverse); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; outline: var(--border-heavy) solid var(--focus-ring-inverse); }
button.sw-navlink { background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; color: var(--text-primary); }
.sw-nav__lang { font-family: var(--font-body); }
.sw-nav__lang:dir(ltr) { font-family: var(--font-ar); }

/* section head */
.s-head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-7); }
.s-head .sw-lead { max-width: 62ch; }
.sec-alt { background: var(--bg-sunken); }
.note { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); font-weight: 600; }
.note .sw-diamond { background: var(--orange-500); }

/* ---------- Hero: centered, single column ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg-page); padding-block: clamp(64px, 9vw, 112px) clamp(80px, 10vw, 128px); isolation: isolate; }
/* decorative arc, bottom-left corner, CSS only */
.hero::before { content: ""; position: absolute; z-index: -1; left: -300px; bottom: -340px; width: 600px; height: 600px; border-radius: 50%; border: 64px solid var(--orange-100); pointer-events: none; }
.hero__inner { position: relative; max-width: 960px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.hero__eyebrow { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--orange-500); }
.hero__title { margin: 0; font-family: var(--font-ar); font-weight: 700; color: var(--charcoal-900); font-size: clamp(40px, 6.2vw, 80px); line-height: 1.38; text-wrap: balance; }
.hero__title:dir(ltr) { font-family: var(--font-display); font-size: clamp(36px, 5.2vw, 68px); line-height: 1.1; letter-spacing: -0.02em; }
.hero__title .own { color: var(--orange-500); }
.hero__desc { max-width: 760px; margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.85; color: var(--text-muted); text-wrap: pretty; }
.hero__desc:dir(ltr) { line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); }
.hero__actions .sw-btn { min-height: 54px; padding-inline: 28px; font-size: 17px; }
.sw-btn.sw-btn--quiet { --_bg: transparent; --_bg-hover: var(--bg-raised); --_fg: var(--charcoal-900); --_bd: var(--charcoal-900); --_ledge: transparent; border-width: var(--border-hairline); box-shadow: none; }
.sw-btn.sw-btn--quiet:hover, .sw-btn.sw-btn--quiet:active { transform: none; box-shadow: none; }
.hero__tag { margin: var(--space-2) 0 0; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--text-muted); }
.br-d { display: inline; }
@container sw (max-width: 719px) {
  .br-d { display: none; }
  .hero__title { line-height: 1.45; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .hero__actions .sw-btn { width: 100%; }
  .hero::before { left: -150px; bottom: -170px; width: 260px; height: 260px; border-width: 34px; }
}

/* ---------- Starting point: questions ---------- */
.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.start__body { display: grid; gap: var(--space-4); max-width: 60ch; }
.qs { list-style: none; padding: 0; margin: 0; display: grid; border-top: var(--border-heavy) solid var(--border-strong); }
.qs li { display: flex; gap: var(--space-4); align-items: center; padding-block: var(--space-5); border-bottom: var(--border-hairline) solid var(--border-subtle); font-size: 24px; line-height: 1.5; font-weight: 700; }
.qs li:dir(ltr) { font-family: var(--font-display); font-size: 23px; line-height: 1.3; }
.qs li::before { content: "؟"; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-brand); border: var(--border-default) solid var(--action-primary-edge); box-shadow: var(--shadow-ledge-brand); font: 700 22px/1 var(--font-ar); }
.qs li:dir(ltr)::before { content: "?"; font-family: var(--font-display); }
@container sw (max-width: 899px) { .start { grid-template-columns: 1fr; gap: var(--space-6); } .qs li { font-size: 19px; } .qs li:dir(ltr) { font-size: 19px; } }

/* ---------- Services: stages ---------- */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); counter-reset: st; }
.stage { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); min-width: 0; }
.stage__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.stage__bar { display: flex; gap: 4px; }
.stage__bar i { width: 18px; height: 8px; border-radius: 2px; background: var(--stone-300); }
.stage:nth-child(1) .stage__bar i:nth-child(-n+1), .stage:nth-child(2) .stage__bar i:nth-child(-n+2), .stage:nth-child(3) .stage__bar i { background: var(--orange-500); }
.stage h3 { font-size: 22px; line-height: 34px; font-weight: 700; }
.stage h3:dir(ltr) { font-family: var(--font-display); line-height: 28px; }
.stage p { color: var(--text-muted); font-size: 15.5px; line-height: 1.85; }
.stage p:dir(ltr) { line-height: 1.6; }
.outs { margin-top: auto; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); display: grid; gap: var(--space-2); }
.outs > span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.outs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@container sw (max-width: 899px) { .stages { grid-template-columns: 1fr; } }

/* ---------- Dark band: product thinking ---------- */
.band-ink { background: var(--bg-inverse); color: var(--text-inverse); }
.band-ink .sw-eyebrow { color: var(--orange-500); }
.band-ink .sw-lead, .band-ink .muted { color: var(--stone-300); }
.band-ink a:focus-visible, .band-ink .sw-btn:focus-visible { outline-color: var(--focus-ring-inverse); }
.think { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
.think__copy { display: grid; gap: var(--space-5); justify-items: start; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.points li { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-4); align-items: center; padding-block: var(--space-5); border-bottom: 1px solid rgba(245,242,235,.16); font-size: 20px; font-weight: 600; line-height: 1.6; }
.points li:first-child { border-top: 1px solid rgba(245,242,235,.16); }
.points li svg { width: 52px; height: 30px; }
.link-inv { color: var(--orange-500); font-weight: 700; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; display: inline-flex; align-items: center; gap: 8px; border-radius: 3px; }
.link-inv:hover { color: var(--text-inverse); text-decoration-color: var(--orange-500); }
.link-inv .sw-ico { width: 18px; height: 18px; }
.think__q { font-size: 15px; color: var(--stone-300); }
@container sw (max-width: 899px) { .think { grid-template-columns: 1fr; gap: var(--space-6); } .points li { font-size: 18px; } }

/* ---------- What we build ---------- */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: var(--border-default) solid var(--border-strong); }
.kind { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); min-width: 0; }
.kind + .kind { border-inline-start: var(--border-hairline) solid var(--border-subtle); }
.kind__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-inverse); color: var(--text-inverse); }
.kind:nth-child(2) .kind__ico { background: var(--bg-brand); color: var(--text-on-brand); }
.kind__ico .sw-ico { width: 22px; height: 22px; }
.kind h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.kind h3:dir(ltr) { font-family: var(--font-display); }
.kind p { color: var(--text-muted); font-size: 15px; line-height: 1.8; }
@container sw (max-width: 899px) { .kinds { grid-template-columns: 1fr 1fr; } .kind:nth-child(3) { border-inline-start: 0; } .kind:nth-child(n+3) { border-top: var(--border-hairline) solid var(--border-subtle); } }
@container sw (max-width: 520px) { .kinds { grid-template-columns: 1fr; } .kind + .kind { border-inline-start: 0; border-top: var(--border-hairline) solid var(--border-subtle); } .kind { grid-template-columns: 44px 1fr; column-gap: var(--space-4); padding-inline: 0; } .kind h3, .kind p { grid-column: 2; } .kind__ico { grid-row: span 2; } }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; inset-inline: 28px 28px; height: 0; border-top: 2px dashed var(--stone-500); }
.step { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.step__n { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); box-shadow: var(--shadow-ledge-sm); font: 700 22px/1 var(--font-display); position: relative; }
.step:last-child .step__n { background: var(--bg-brand); border-color: var(--action-primary-edge); box-shadow: var(--shadow-ledge-brand); }
.step h3 { font-size: 20px; font-weight: 700; line-height: 1.5; margin-top: var(--space-2); }
.step h3:dir(ltr) { font-family: var(--font-display); }
.step p { color: var(--text-muted); font-size: 15.5px; line-height: 1.8; }
.steps-note { margin-top: var(--space-6); color: var(--text-muted); font-size: 15px; }
@container sw (max-width: 899px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps::before { top: 28px; bottom: 28px; inset-inline: 27px auto; width: 0; height: auto; border-top: 0; border-inline-start: 2px dashed var(--stone-500); }
  .step { grid-template-columns: 56px 1fr; column-gap: var(--space-4); }
  .step__n { grid-row: span 2; }
  .step h3 { margin-top: 10px; }
}

/* ---------- About strip ---------- */
.aboutx { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-7); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-ledge-md); }
.portrait { margin: 0; display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.portrait img { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; }
.portrait figcaption b { display: block; font-size: 17px; }
.portrait figcaption span { display: block; font: 500 14px/1.4 var(--font-body); color: var(--text-muted); }
.aboutx__copy { display: grid; gap: var(--space-4); justify-items: start; }
@container sw (max-width: 819px) { .aboutx { grid-template-columns: 1fr; padding: var(--space-5); gap: var(--space-5); } .portrait img { max-width: 200px; } }

/* ---------- Terms ---------- */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
.term { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2) var(--space-4); padding-block: var(--space-5); border-top: var(--border-hairline) solid var(--stone-500); }
.term .sw-ico { width: 28px; height: 28px; color: var(--status-success); grid-row: span 2; }
.term h3 { font-size: 18px; font-weight: 700; line-height: 1.6; }
.term h3:dir(ltr) { font-family: var(--font-display); }
.term p { color: var(--text-muted); font-size: 15.5px; line-height: 1.8; }
@container sw (max-width: 719px) { .terms { grid-template-columns: 1fr; } }

/* ---------- FAQ + contact ---------- */
.faqwrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: start; }
@container sw (max-width: 899px) { .faqwrap { grid-template-columns: 1fr; gap: var(--space-5); } }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.contact__copy { display: grid; gap: var(--space-4); }
.contact__list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.contact__list li { display: flex; gap: var(--space-3); align-items: center; font-weight: 500; }
.formslot { min-height: 420px; border-radius: var(--radius-xl); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); box-shadow: var(--shadow-ledge-md); padding: var(--space-6); display: grid; align-content: center; justify-items: center; gap: var(--space-4); text-align: center; }
.formslot iframe { width: 100%; min-height: 520px; border: 0; }
.formslot--empty { border-style: dashed; box-shadow: none; background: var(--bg-page); }
.formslot--empty .sw-tile { margin-bottom: var(--space-2); }
@container sw (max-width: 899px) { .contact { grid-template-columns: 1fr; gap: var(--space-6); } .formslot { min-height: 300px; padding: var(--space-5); } }

/* ---------- Page heads (inner pages) ---------- */
.phead { padding-block: var(--space-8) var(--space-7); border-bottom: var(--border-heavy) solid var(--border-strong); background-image: radial-gradient(circle at 2px 2px, var(--stone-300) 1.4px, transparent 1.8px); background-size: 20px 20px; }
.phead__inner { display: grid; gap: var(--space-5); max-width: 860px; justify-items: start; }
.phead .sw-display { max-width: 18ch; }
@container sw (max-width: 719px) { .phead { padding-block: var(--space-6); } }

/* ---------- Compare ---------- */
.cmp-wrap { border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow-ledge-md); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: start; vertical-align: top; padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--border-subtle); font-size: 16px; line-height: 1.75; }
.cmp thead th { background: var(--bg-sunken); font-size: 15px; font-weight: 700; border-bottom: var(--border-default) solid var(--border-strong); }
.cmp thead th:last-child { background: var(--orange-100); }
.cmp tbody th { font-weight: 700; width: 18%; color: var(--text-primary); }
.cmp td:last-child { background: rgba(251, 227, 211, .35); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .k { display: none; }
.cmp-note { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--bg-sunken); border-radius: var(--radius-md); font-weight: 600; line-height: 1.8; }
.cmp-note .sw-ico { width: 22px; height: 22px; flex: none; margin-top: 4px; color: var(--copper-700); }
@container sw (max-width: 759px) {
  .cmp-wrap { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { margin-bottom: var(--space-4); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; }
  .cmp tbody th { width: auto; background: var(--bg-inverse); color: var(--text-inverse); padding-block: var(--space-3); }
  .cmp td { padding-block: var(--space-3) var(--space-4); }
  .cmp td:last-child { border-bottom: 0; }
  .cmp .k { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
  .cmp td:last-child .k { color: var(--copper-700); }
}

/* ---------- Example ---------- */
.ex { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.ex__col { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); border: var(--border-default) solid var(--border-strong); background: var(--bg-raised); }
.ex__col--b { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); box-shadow: 0 4px 0 0 var(--orange-500); }
.ex__col.ex__col--b p { color: var(--stone-300); }
.ex__col h3 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.ex__col h3:dir(ltr) { font-family: var(--font-display); }
.ex__col p { color: var(--text-muted); line-height: 1.9; }
.flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; }
.flow span { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.flow .sw-ico { width: 14px; height: 14px; }
.ex__col--b .flow span { color: var(--orange-500); }
.ex__col--b .flow span.q { border-style: dashed; }
.ex-end { margin-top: var(--space-6); font-size: 20px; font-weight: 700; line-height: 1.7; max-width: 46ch; }
.ex-end:dir(ltr) { font-family: var(--font-display); }
@container sw (max-width: 759px) { .ex { grid-template-columns: 1fr; } .ex__col { padding: var(--space-5); } }

/* ---------- Approach (4 verbs) ---------- */
.verbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.verb { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-top: 4px solid var(--charcoal-900); background: var(--bg-raised); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.verb:nth-child(2) { border-top-color: var(--orange-500); } .verb:nth-child(3) { border-top-color: var(--copper-700); } .verb:nth-child(4) { border-top-color: var(--stone-500); }
.verb b { font-size: 22px; line-height: 1.4; }
.verb b:dir(ltr) { font-family: var(--font-display); }
.verb p { color: var(--text-muted); font-size: 15.5px; line-height: 1.8; }
@container sw (max-width: 899px) { .verbs { grid-template-columns: 1fr 1fr; } }
@container sw (max-width: 520px) { .verbs { grid-template-columns: 1fr; } }

/* ---------- Fit checklist ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checks li { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); background: var(--bg-raised); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); font-size: 17px; font-weight: 600; line-height: 1.6; }
.checks .sw-ico { width: 24px; height: 24px; color: var(--status-success); flex: none; }
@container sw (max-width: 899px) { .fit { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- Beliefs ---------- */
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.belief { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-2) var(--space-5); padding: var(--space-6); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); }
.belief svg { width: 56px; height: 56px; grid-row: span 2; }
.belief h3 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.belief h3:dir(ltr) { font-family: var(--font-display); }
.belief p { color: var(--text-muted); line-height: 1.85; }
@container sw (max-width: 759px) { .beliefs { grid-template-columns: 1fr; } .belief { padding: var(--space-5); grid-template-columns: 44px 1fr; } .belief svg { width: 44px; height: 44px; } }

/* ---------- Person ---------- */
.person { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.person .portrait img { max-width: 320px; }
.person__copy { display: grid; gap: var(--space-4); max-width: 64ch; }
.person__role { display: flex; flex-wrap: wrap; gap: 8px; }
.person__copy p { line-height: 1.95; font-size: 17px; }
.person__copy p:dir(ltr) { line-height: 1.7; }
@container sw (max-width: 819px) { .person { grid-template-columns: 1fr; gap: var(--space-5); } .person .portrait { justify-items: start; text-align: start; } .person .portrait img { max-width: 220px; } }

/* ---------- CTA band ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-7); border-radius: var(--radius-xl); background: var(--bg-brand); border: var(--border-default) solid var(--action-primary-edge); box-shadow: 0 6px 0 0 var(--charcoal-900); color: var(--text-on-brand); position: relative; overflow: hidden; }
.cta h2 { max-width: 22ch; }
.cta p { font-size: 18px; line-height: 1.8; margin-top: var(--space-2); max-width: 52ch; }
.cta .sw-btn { --_ledge: var(--orange-500); }
.cta .link-row { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
@container sw (max-width: 719px) { .cta { grid-template-columns: 1fr; padding: var(--space-5); } .cta .sw-btn { width: 100%; } }

/* ---------- Footer ---------- */
.foot { background: var(--bg-inverse); color: var(--text-inverse); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.foot__brand { display: grid; gap: var(--space-4); justify-items: start; }
.foot__plate { display: inline-flex; padding: 14px 18px; background: var(--bg-page); border-radius: var(--radius-md); }
.foot__plate img { height: 32px; width: auto; }
.foot__tag { font-size: 20px; font-weight: 700; }
.foot__tag span { display: block; font: 500 15px/1.6 var(--font-body); color: var(--stone-300); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: flex-end; }
.foot nav a, .foot nav button { color: var(--text-inverse); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.foot nav a:hover, .foot nav button:hover { color: var(--orange-500); }
.foot a:focus-visible, .foot button:focus-visible { outline: var(--border-heavy) solid var(--focus-ring-inverse); outline-offset: 3px; }
.foot__bottom { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(245,242,235,.16); font-size: 14px; color: var(--stone-300); }
@container sw (max-width: 719px) { .foot__grid { grid-template-columns: 1fr; } .foot nav { justify-content: flex-start; } .foot { margin-top: var(--space-7); } }

.sec-tight { padding-block: var(--space-8); }
@container sw (max-width: 719px) { .sec-tight { padding-block: var(--space-7); } .s-head { margin-bottom: var(--space-6); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ================= Home v3 ================= */
.lu { width: 1.25em; height: 1.25em; flex: none; }

/* 2. Journey strip — compact, no durations, no progress marks */
.jr { border-block: var(--border-hairline) solid var(--border-subtle); background: var(--bg-raised); padding-block: var(--space-5); }
.jr__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.jr__list::before { content: ""; position: absolute; top: 20px; inset-inline: 10%; border-top: var(--border-hairline) solid var(--stone-500); }
.jr__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; min-width: 0; }
.jr__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-raised); border: var(--border-default) solid var(--orange-500); color: var(--charcoal-900); }
.jr__ico .sw-ico { width: 19px; height: 19px; }
.jr__item:first-child .jr__ico { background: var(--orange-500); border-color: var(--orange-500); }
.jr__name { font-size: 15px; font-weight: 600; line-height: 1.5; }
@container sw (max-width: 719px) {
  .jr { padding-block: var(--space-4); }
  .jr__list { flex-direction: column; gap: 10px; max-width: 320px; margin-inline: auto; }
  .jr__list::before { top: 18px; bottom: 18px; inset-inline: 19px auto; border-top: 0; border-inline-start: var(--border-hairline) solid var(--stone-500); }
  .jr__item { flex-direction: row; text-align: start; gap: var(--space-3); }
  .jr__ico { width: 38px; height: 38px; }
}

/* 3. Challenges — dark, browser-window frames */
.chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ch { background: var(--charcoal-800); border: 1px solid rgba(245, 242, 235, .18); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.ch__bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(245, 242, 235, .12); }
.ch__bar i { width: 8px; height: 8px; border-radius: 2px; background: var(--stone-500); }
.ch__bar i:first-child { background: var(--orange-500); }
.ch__body { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-5) var(--space-5) var(--space-6); }
.ch__ico { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid rgba(230, 106, 39, .55); color: var(--orange-500); }
.ch__ico .sw-ico { width: 22px; height: 22px; }
.ch__q { font-size: 22px; line-height: 1.55; font-weight: 700; color: var(--text-inverse); }
.ch__q:dir(ltr) { font-family: var(--font-display); line-height: 1.3; }
.ch__q em { font-style: normal; color: var(--orange-500); }
.ch__d { color: var(--stone-300); font-size: 16px; line-height: 1.85; }
.ch__d:dir(ltr) { line-height: 1.6; }
.ch-end { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(245, 242, 235, .16); }
.ch-end p { font-size: 19px; line-height: 1.8; font-weight: 600; max-width: 56ch; }
.band-ink .sw-btn:focus-visible { outline-color: var(--focus-ring-inverse); }
@container sw (max-width: 719px) { .chs { grid-template-columns: 1fr; gap: var(--space-4); } .ch__q { font-size: 19px; } .ch__body { padding: var(--space-4); } .ch-end .sw-btn { width: 100%; } .ch-end p { font-size: 17px; } }

/* 4. How we work — tabs on desktop, accordion on mobile */
.stg--tabs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.stg--acc { display: none; }
.stg__list { display: grid; gap: 6px; }
.stg__tab { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 60px; padding: 0 var(--space-4); text-align: start; font: inherit; font-size: 17px; font-weight: 600; color: var(--text-muted); background: transparent; border: var(--border-hairline) solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.stg__tab:hover { background: var(--bg-raised); color: var(--text-primary); }
.stg__tab[aria-selected="true"] { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-ledge-sm); }
.stg__tab:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px; }
.stg__n { font: 600 14px/1 var(--font-display); color: var(--copper-700); min-width: 24px; font-variant-numeric: tabular-nums; }
.stg__tab[aria-selected="true"] .stg__n { color: var(--charcoal-900); }
.stg__panel { background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-6); min-height: 100%; }
.stg__panel:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 3px; }
.stg__detail { display: grid; gap: var(--space-4); }
.stg__head { display: flex; align-items: center; justify-content: space-between; }
.stg__ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-brand); border: var(--border-default) solid var(--action-primary-edge); box-shadow: var(--shadow-ledge-brand); color: var(--charcoal-900); }
.stg__ico .sw-ico { width: 24px; height: 24px; }
.stg__num { font: 700 44px/1 var(--font-display); color: var(--stone-300); }
.stg__title { font-size: 24px; line-height: 1.5; font-weight: 700; }
.stg__title:dir(ltr) { font-family: var(--font-display); line-height: 1.25; }
.stg__desc { color: var(--text-muted); font-size: 17px; line-height: 1.9; }
.stg__desc:dir(ltr) { line-height: 1.6; }
.stg__outs { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); }
.stg__outs > span { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.stg__acc { border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-raised); }
.stg__acc + .stg__acc { margin-top: 10px; }
.stg__acc summary { list-style: none; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); font-weight: 600; font-size: 16px; cursor: pointer; border-radius: var(--radius-md); }
.stg__acc summary::-webkit-details-marker { display: none; }
.stg__acc summary .sw-ico { margin-inline-start: auto; width: 20px; height: 20px; transition: transform 160ms ease; }
.stg__acc[open] summary .sw-ico { transform: rotate(180deg); }
.stg__acc summary:focus-visible { outline: var(--border-heavy) solid var(--focus-ring); outline-offset: 2px; }
.stg__acc .stg__detail { padding: 0 var(--space-4) var(--space-5); }
.stg__acc .stg__num { display: none; }
@container sw (max-width: 899px) { .stg--tabs { display: none; } .stg--acc { display: block; } .stg__title { font-size: 20px; } .stg__desc { font-size: 16px; } .stg__ico { width: 44px; height: 44px; } }

/* 5. Entry points — equal cards */
.ens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.en { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--bg-raised); border: var(--border-default) solid var(--border-strong); border-radius: var(--radius-lg); min-width: 0; }
.en__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.en__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-inverse); color: var(--text-inverse); }
.en__ico .sw-ico { width: 22px; height: 22px; }
.en__title { font-size: 22px; line-height: 1.5; font-weight: 700; }
.en__title:dir(ltr) { font-family: var(--font-display); line-height: 1.25; }
.en__blk { display: grid; gap: var(--space-2); }
.en__lbl { font-size: 13px; font-weight: 700; color: var(--copper-700); }
.en__blk p { color: var(--text-muted); font-size: 15.5px; line-height: 1.85; }
.en__blk .sw-list { font-size: 15px; line-height: 1.7; }
.en__out { padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); }
.en__out p { color: var(--text-primary); font-weight: 600; }
.en__btn { margin-top: auto; }
@container sw (max-width: 959px) { .ens { grid-template-columns: 1fr; } }

/* think, now on a light ground */
.points--light li { border-color: var(--border-subtle) !important; }
.points--light li:first-child { border-top: var(--border-hairline) solid var(--border-subtle); }

/* Tally embed */
.formslot--tally { display: block; text-align: start; padding: var(--space-5); min-height: 0; }
.formslot--tally iframe { display: block; width: 100%; min-height: 560px; border: 0; background: transparent; }
.formslot__alt { margin-top: var(--space-4); text-align: center; }
@container sw (max-width: 899px) { .formslot--tally { padding: var(--space-3); } }