/* SMIT — "The Corridor"
   Layout: a 12-column editorial grid over a night-port ground; the globe lives on a fixed
   stage behind the content and is framed by anchors inside each section. Light "stone"
   bands interrupt the night for long-form reading. */
:root {
  /* colour — SMIT Brand Guidelines 2026 (navy and white carry the brand; gold ≈ a tenth) */
  --ink: #0e2b4b;          /* SMIT Navy — primary backgrounds */
  --ink-2: #092442;        /* Midnight — depth, panels, gradients */
  --slate: #163355;        /* Wordmark Navy — raised surfaces, gradient light */
  --slate-2: #1b3b60;
  --ivory: #f8f4ec;        /* Ivory — text on navy */
  --white: #ffffff;
  --mute: #aab5c4;         /* secondary text on navy (AA) */
  --dim: #8c9bb0;          /* labels on navy (AA) */
  --line: rgba(248, 244, 236, .13);
  --line-2: rgba(248, 244, 236, .26);
  --gold: #c29750;         /* Light Gold — highlights on navy */
  --gold-2: #b98d47;       /* Trade Gold — emblem, tagline, rules */
  --gold-deep: #8f6a33;    /* Trade Gold deepened for small text on white (AA) */
  --sand: #c29750;
  --stone: #ffffff;        /* White — main light background */
  --stone-2: #f8f4ec;      /* Ivory — warm alternative */
  --stone-ink: #0e2b4b;    /* body text on light: SMIT Navy */
  --stone-head: #163355;   /* headlines on light: Wordmark Navy */
  --stone-mute: #4e5e72;
  --stone-line: rgba(14, 43, 75, .14);
  --danger: #ef9f8a;

  /* type — Cormorant Garamond for headlines, display and quotes; Montserrat for body, labels and interface */
  --f-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --t-xxl: clamp(3.1rem, 1rem + 6.6vw, 8.4rem);
  --t-xl: clamp(2.6rem, 1.1rem + 5vw, 6.2rem);
  --t-l: clamp(2rem, 1.1rem + 2.8vw, 3.8rem);
  --t-m: clamp(1.45rem, 1.1rem + 1.1vw, 2.15rem);
  --t-s: clamp(1.06rem, 1rem + .25vw, 1.2rem);
  --t-body: 1rem;
  --t-small: .9rem;
  --t-micro: .7rem;

  /* space & grid */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --section: clamp(88px, 12vw, 180px);
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
  --header-h: 76px;
  --header-top: 124px;     /* header at the top of the page: full horizontal logo at 240px + clear space */
  color-scheme: dark;
}

@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.stone :focus-visible { outline-color: var(--gold-deep); }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  background: var(--ivory); color: var(--ink); padding: 10px 16px; border-radius: 2px;
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }

/* ---------- type ---------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
.t-xxl { font-size: var(--t-xxl); line-height: .9; letter-spacing: -.035em; font-weight: 360; }
.t-xl { font-size: var(--t-xl); line-height: .95; font-weight: 380; }
.t-l { font-size: var(--t-l); line-height: 1.02; font-weight: 400; }
.t-m { font-size: var(--t-m); line-height: 1.15; font-weight: 450; letter-spacing: -.015em; }
.t-s { font-size: var(--t-s); line-height: 1.5; }
.em { color: var(--gold); font-style: normal; }
.stone .em { color: var(--gold-deep); }
.lede { font-size: var(--t-s); color: var(--mute); max-width: 36em; text-wrap: pretty; }
.stone .lede { color: var(--stone-mute); }
p { margin: 0; text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 38em; }

.eyebrow {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
  display: inline-flex; align-items: center; gap: .8em; margin: 0;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.stone .eyebrow { color: var(--stone-mute); }
.mono { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- buttons & links ---------- */
.btn {
  --bg: var(--ivory); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 22px 0 26px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: color .45s var(--ease), transform .5s var(--ease);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--gold); transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn .arr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); transition: transform .5s var(--ease), background .4s, color .4s; flex: none; }
.btn:hover .arr { transform: rotate(-45deg); }
.btn .arr svg { width: 13px; height: 13px; }
.btn--ghost { --bg: transparent; --fg: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost::before { background: var(--ivory); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); }
.btn--ghost .arr { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.stone .btn { --bg: var(--stone-ink); --fg: var(--stone); }
.stone .btn::before { background: var(--gold-deep); }
.btn[disabled] { opacity: .6; cursor: progress; }

.link {
  position: relative; text-decoration: none; display: inline-flex; align-items: center; gap: .5em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link svg { width: .72em; height: .72em; flex: none; }
.link--u { background-size: 100% 1px; background-image: linear-gradient(var(--line-2), var(--line-2)); }
.link--u:hover { background-image: linear-gradient(currentColor, currentColor); }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 61; background: var(--ink); }
.hdr {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 60;
  transition: transform .6s var(--ease), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr .wrap { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.hdr.is-solid { background: rgba(9, 36, 66, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
.hdr.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; flex: none; }
.brand .em-mark, .brand .wm {
  display: block; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.brand .em-mark { --m: url("../img/smit-emblem.webp?v=92febef4f4"); width: 46px; height: 48px; background: var(--gold); }
.brand .wm {
  --m: url("../img/smit-wordmark.webp?v=2561415c28"); width: 200px; height: 100px;
  background:
    linear-gradient(var(--gold), var(--gold)) 72.6% 0 / 8% 14.6% no-repeat,
    var(--ivory);
}
.hdr .brand .wm { width: 96px; height: 32.3px; -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: top; mask-position: top;
  background: linear-gradient(var(--gold), var(--gold)) 72.6% 0 / 8% 22% no-repeat, var(--ivory); }
.hdr .brand { gap: 10px; }
.hdr .brand .em-mark { width: 40px; height: 42px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav a.nl { text-decoration: none; font-size: .95rem; color: var(--mute); position: relative; padding: 6px 0; transition: color .3s; }
.nav a.nl:hover, .nav a.nl[aria-current="page"] { color: var(--ivory); }
.nav a.nl[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); }
.clock { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; color: var(--dim); display: flex; gap: .6em; align-items: center; white-space: nowrap; }
.clock i { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 0 rgba(194, 151, 80, .6); animation: beat 2.4s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(194,151,80,.55);} 70% { box-shadow: 0 0 0 8px rgba(194,151,80,0);} 100% { box-shadow: 0 0 0 0 rgba(194,151,80,0);} }
.hdr .btn { min-height: 44px; padding: 0 8px 0 20px; font-size: .9rem; }
.hdr .btn .arr { width: 28px; height: 28px; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 15px; right: 15px; height: 1.5px; background: var(--ivory); transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn span:nth-child(1) { top: 20px; }
.menu-btn span:nth-child(2) { top: 27px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55; background: var(--ink);
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 32px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-io), visibility 0s .7s;
  overflow-y: auto;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-io), visibility 0s; }
.drawer ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.drawer li { border-bottom: 1px solid var(--line); overflow: hidden; }
.drawer li a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; text-decoration: none; font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: -.03em; line-height: 1; transform: translateY(105%); transition: transform .8s var(--ease); }
.drawer li a small { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--dim); letter-spacing: .1em; }
.drawer li a[aria-current="page"] { color: var(--gold); }
.drawer.is-open li a { transform: none; }
.drawer.is-open li:nth-child(2) a { transition-delay: .06s; }
.drawer.is-open li:nth-child(3) a { transition-delay: .12s; }
.drawer.is-open li:nth-child(4) a { transition-delay: .18s; }
.drawer.is-open li:nth-child(5) a { transition-delay: .24s; }
.drawer .d-foot { margin-top: auto; display: grid; gap: 10px; color: var(--mute); font-size: var(--t-small); }
.drawer .d-foot a { text-decoration: none; color: var(--ivory); }

/* ---------- globe stage ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.stage.is-ready canvas { opacity: 1; }
main, .ftr { position: relative; z-index: 1; }
.solid { background: var(--ink); }
.solid-2 { background: var(--ink-2); }

/* ---------- loader (home, first visit) ---------- */
.loader { position: fixed; inset: 0; z-index: 120; background: var(--ink); display: grid; place-items: center; transition: clip-path 1s var(--ease-io), visibility 0s 1s; clip-path: inset(0 0 0 0); }
.loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader .l-in { display: grid; justify-items: center; gap: 22px; }
.loader .l-mark { width: 74px; height: 78px; background: var(--gold); -webkit-mask: url("../img/smit-emblem.webp?v=92febef4f4") center/contain no-repeat; mask: url("../img/smit-emblem.webp?v=92febef4f4") center/contain no-repeat; animation: l-mark 1.6s var(--ease) both; }
@keyframes l-mark { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.loader .l-bar { width: 160px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader .l-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); animation: l-bar 1.2s var(--ease-io) .1s forwards; }
@keyframes l-bar { to { transform: scaleX(1); } }
.loader .l-co { color: var(--mute); }
.no-js .loader { display: none; }

/* ---------- hero ---------- */
.hero, .phero, .bridge, .process { overflow-x: clip; }
.hero { position: relative; min-height: min(100svh, 1000px); display: flex; flex-direction: column; padding-top: calc(var(--header-top) + env(safe-area-inset-top, 0px)); }
.hero .wrap { flex: 1; display: flex; flex-direction: column; }
.hero-body { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); align-items: center; padding-block: clamp(28px, 6vh, 72px); }
.hero-copy { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: clamp(22px, 3.2vh, 36px); position: relative; z-index: 2; }
.hero h1 { max-width: 13ch; }
.hero .lede { max-width: 30em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-anchor { position: absolute; right: -15vw; top: 50%; transform: translateY(-46%); width: min(62vw, 104vh, 1040px); aspect-ratio: 1; pointer-events: none; }
.hero-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); border-top: 1px solid var(--line); padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--mute); position: relative; z-index: 2; }
.hero-meta > * { grid-column: span 3; display: flex; flex-direction: column; gap: 2px; }
.hero-meta b { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.hero-meta span { font-size: var(--t-small); color: var(--ivory); }
.hero-meta .cue { grid-column: 10 / span 3; align-items: flex-end; justify-content: center; }
.cue a { text-decoration: none; display: inline-flex; gap: 10px; align-items: center; color: var(--mute); font-size: var(--t-small); }
.cue .tick { width: 1px; height: 30px; background: var(--line-2); position: relative; overflow: hidden; }
.cue .tick::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; background: var(--gold); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.globe-note { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: 100%; margin-bottom: 14px; color: var(--dim); text-align: right; max-width: 22em; }

/* page hero (secondary pages) */
.phero { padding-top: calc(var(--header-top) + env(safe-area-inset-top, 0px) + clamp(48px, 10vh, 120px)); padding-bottom: clamp(56px, 9vw, 120px); position: relative; }
.phero .grid { align-items: end; row-gap: 28px; }
.phero h1 { grid-column: 1 / span 9; }
.phero .lede { grid-column: 1 / span 6; }
.phero .eyebrow { grid-column: 1 / -1; }
.phero-anchor { position: absolute; right: -10vw; top: 6vh; width: min(62vw, 820px); aspect-ratio: 1; pointer-events: none; }
.crumbs { grid-column: 1 / -1; display: flex; gap: 10px; color: var(--dim); }
.crumbs a { text-decoration: none; color: var(--mute); }

/* ---------- sections ---------- */
.sec { padding-block: var(--section); position: relative; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: 20px; margin-bottom: clamp(48px, 7vw, 96px); align-items: end; }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head h2 { grid-column: 1 / span 8; }
.sec-head .lede { grid-column: 9 / span 4; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.stone { background: var(--stone); color: var(--stone-ink); }
.stone .rule { background: var(--stone-line); }

/* bridge statement */
.bridge { position: relative; padding-block: clamp(120px, 18vw, 260px); }
.bridge p.big { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.1; letter-spacing: -.02em; font-weight: 380; max-width: 22ch; }
.bridge .w { opacity: var(--o, 1); transition: opacity .3s linear; }
.bridge .grid { row-gap: 40px; }
.bridge .b-txt { grid-column: 1 / span 8; display: grid; gap: 40px; position: relative; z-index: 2; }
.bridge .b-side { grid-column: 1 / span 4; display: grid; gap: 14px; color: var(--mute); font-size: var(--t-small); padding-top: 24px; border-top: 1px solid var(--line); position: relative; z-index: 2; }

.bridge-anchor { position: absolute; right: -14vw; top: 50%; transform: translateY(-50%); width: min(56vw, 760px); aspect-ratio: 1; pointer-events: none; }
@media (max-width: 860px) { .bridge-anchor { display: none; } }

/* services panel (home) */
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }
.svc-list { grid-column: 1 / span 6; border-top: 1px solid var(--line); }
.svc-item { border-bottom: 1px solid var(--line); }
.svc-item > button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 4.2em 1fr auto; align-items: baseline; gap: 12px;
  padding: clamp(20px, 2.6vw, 34px) 0;
}
.svc-item > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.svc-item .code { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .12em; color: var(--dim); transform: translateY(-.35em); }
.svc-item .name { font-family: var(--f-display); font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem); letter-spacing: -.03em; line-height: 1; color: var(--mute); transition: color .5s var(--ease), transform .7s var(--ease); }
.svc-item .pm { width: 18px; height: 18px; position: relative; }
.svc-item .pm::before, .svc-item .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--mute); transition: transform .5s var(--ease), background .3s; }
.svc-item .pm::after { transform: rotate(90deg); }
.svc-item.is-active .name, .svc-item > button:hover .name { color: var(--ivory); }
.svc-item.is-active .name { transform: translateX(10px); }
.svc-item.is-active .code { color: var(--gold); }
.svc-item.is-active .pm::after { transform: rotate(0); }
.svc-item.is-active .pm::before, .svc-item.is-active .pm::after { background: var(--gold); }
.svc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.svc-item.is-active .svc-body { grid-template-rows: 1fr; }
.svc-body > div { overflow: hidden; }
.svc-body .inner { padding: 0 0 clamp(26px, 3vw, 40px) calc(4.2em + 12px); display: grid; gap: 22px; max-width: 40em; }
.svc-body p { color: var(--mute); }
.svc-body .viz-m { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { font-size: .82rem; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ivory); }
.stone .tags li { box-shadow: inset 0 0 0 1px var(--stone-line); color: var(--stone-ink); }
.svc-viz { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.svc-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc-viz .cap { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--dim); }
.svc-viz .cap span:last-child { color: var(--gold); }

/* process (globe story) */
.process { position: relative; }
.proc-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }
.proc-steps { grid-column: 1 / span 5; position: relative; z-index: 2; }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 8vh; }
.step:first-child { min-height: 70vh; justify-content: flex-start; padding-top: 0; }
.step .num { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.step .num::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: var(--line-2); }
.step .s-card { display: grid; gap: 20px; }
.step h3 { font-size: var(--t-l); }
.step p { color: var(--mute); max-width: 30em; }
.step ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.step li { display: flex; gap: 12px; color: var(--ivory); font-size: var(--t-small); }
.step li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold); flex: none; }
.proc-steps { grid-row: 1; }
.proc-anchor { grid-column: 6 / span 7; grid-row: 1; align-self: start; position: sticky; top: 0; height: 100vh; height: 100svh; pointer-events: none; display: grid; place-items: center; }
.proc-anchor .ga { width: min(100%, 86vh); aspect-ratio: 1; }
.proc-key { position: absolute; bottom: 4vh; right: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; color: var(--dim); }
.proc-key span { display: inline-flex; align-items: center; gap: 8px; }
.proc-key i { width: 18px; height: 1.5px; background: var(--gold); }
.proc-key i.o { background: var(--ivory); }
.proc-key i.n { background: #99bded; }
.proc-progress { position: absolute; left: calc(var(--gutter) * -0.55); top: 0; bottom: 0; width: 1px; background: var(--line); }
.proc-progress i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(var(--p, 0)); }

/* UAE / principles (stone band) */
.uae .grid { row-gap: 56px; }
.uae .u-head { grid-column: 1 / span 7; display: grid; gap: 28px; }
.uae .u-side { grid-column: 9 / span 4; align-self: end; display: grid; gap: 20px; color: var(--stone-mute); }
.coord { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--stone-line); }
.coord b { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.9rem, 1rem + 2.4vw, 3rem); letter-spacing: -.03em; color: var(--stone-ink); line-height: 1; }
.p-label { grid-column: 1 / -1; margin-bottom: -32px; color: var(--gold-deep); }
.pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--stone-line); }
.pillar { padding: 34px clamp(16px, 2.4vw, 36px) 8px 0; display: grid; gap: 14px; align-content: start; }
.pillar + .pillar { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--stone-line); }
.pillar h3 { font-size: var(--t-m); }
.pillar p { color: var(--stone-mute); }
.pillar .mono { color: var(--gold-deep); }
.quote { grid-column: 2 / span 10; font-family: var(--f-display); font-size: var(--t-l); line-height: 1.12; letter-spacing: -.02em; font-weight: 350; margin: 0; text-wrap: balance; }
.quote footer { margin-top: 22px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--stone-mute); }

/* CTA */
.cta { padding-block: clamp(110px, 15vw, 220px); overflow: hidden; }
.cta .grid { row-gap: 40px; align-items: end; }
.cta h2 { grid-column: 1 / span 9; }
.cta .c-side { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 28px; }
.cta .direct { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.cta .direct a { text-decoration: none; display: grid; gap: 2px; }
.cta .direct a b { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--dim); letter-spacing: .12em; font-weight: 500; }
.cta .direct a span { font-size: var(--t-m); font-family: var(--f-display); letter-spacing: -.02em; }
.cta .direct a:hover span { color: var(--gold); }
.cta-lines { position: absolute; inset: 0; z-index: -1; opacity: .5; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 110px); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--mute); font-size: var(--t-small); }
.ftr .grid { row-gap: 44px; }
.f-brand { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.f-brand .brand .em-mark { width: 96px; height: 100px; }
.f-brand .brand .wm { width: 200px; height: 100px; }
.f-brand .brand { gap: 0; margin-left: -6px; }
.f-col { grid-column: span 2; display: grid; gap: 12px; align-content: start; }
.f-col.wide { grid-column: span 4; }
.f-col h2 { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);  margin-bottom: 6px; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-col a { text-decoration: none; color: var(--ivory); }
.f-col address { font-style: normal; }
.f-big { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: .2em; font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 6.6vw, 7.5rem); letter-spacing: -.045em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2); white-space: nowrap; user-select: none; margin-top: 12px; }
.f-big i { font-style: normal; -webkit-text-stroke: 0; color: var(--gold-2); font-size: .5em; transform: translateY(-.35em); }
.f-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; border-top: 1px solid var(--line); padding-top: 22px; color: var(--dim); font-size: .82rem; }
.f-base a { color: var(--mute); text-decoration: none; }
.f-base a:hover { color: var(--ivory); }

/* ---------- services page ---------- */
.s-nav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 5; background: rgba(9, 36, 66, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line); transition: top .6s var(--ease); }
.hdr.is-hidden ~ main .s-nav { top: env(safe-area-inset-top, 0px); }
.s-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.s-nav a { display: inline-flex; gap: 10px; align-items: center; padding: 16px 14px; text-decoration: none; color: var(--mute); white-space: nowrap; font-size: var(--t-small); position: relative; }
.s-nav a .mono { color: var(--dim); }
.s-nav a.is-active { color: var(--ivory); }
.s-nav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--gold); }
.service { padding-block: clamp(80px, 11vw, 160px); border-bottom: 1px solid var(--line); }
.service .grid { row-gap: 40px; align-items: start; }
.service .s-tag { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; color: var(--dim); }
.service .s-tag .mono:first-child { color: var(--gold); }
.service h2 { grid-column: 1 / span 7; font-size: var(--t-xl); }
.service .s-copy { grid-column: 1 / span 6; display: grid; gap: 30px; }
.service .s-copy .lede { color: var(--ivory); font-size: var(--t-m); font-family: var(--f-display); letter-spacing: -.015em; line-height: 1.25; max-width: 26em; }
.service .s-copy p { color: var(--mute); }
.service .s-viz { grid-column: 8 / span 5; grid-row: 2 / span 2; position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.service .s-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.service:nth-of-type(even) .s-viz { grid-column: 1 / span 5; }
.service:nth-of-type(even) h2, .service:nth-of-type(even) .s-copy { grid-column: 7 / span 6; }
.hl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: hl; }
.hl li { display: grid; grid-template-columns: 2.6em 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ivory); }
.hl li::before { counter-increment: hl; content: counter(hl, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-micro); color: var(--dim); padding-top: .35em; letter-spacing: .08em; }
.docs { display: flex; flex-wrap: wrap; gap: 8px; }
.docs span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border: 1px dashed var(--line-2); color: var(--mute); border-radius: 2px; }

.support .grid { row-gap: 0; }
.sup { grid-column: span 4; padding: 36px clamp(16px, 2vw, 32px) 36px 0; display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--stone-line); }
.sup + .sup { border-left: 1px solid var(--stone-line); padding-left: clamp(16px, 2vw, 32px); }
.sup h3 { font-size: var(--t-m); }
.sup p { color: var(--stone-mute); }
.sup svg { width: 40px; height: 40px; color: var(--gold-deep); }

/* ---------- about page ---------- */
.ab-intro .grid { row-gap: 40px; }
.ab-intro .ab-lead { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); font-family: var(--f-display); font-size: var(--t-m); line-height: 1.25; letter-spacing: -.015em; }
.ab-intro .prose { grid-column: 7 / span 6; grid-row: 1; color: var(--stone-mute); }
.ab-intro .prose p:first-child { color: var(--stone-ink); }
.ab-intro .sig { grid-column: 7 / span 6; grid-row: 2; padding-top: 24px; border-top: 1px solid var(--stone-line); font-family: var(--f-display); font-size: var(--t-m); letter-spacing: -.015em; line-height: 1.2; }
.cap4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cap4 > div { padding: 32px clamp(14px, 1.6vw, 26px) 12px 0; display: grid; gap: 14px; align-content: start; }
.cap4 > div + div { border-left: 1px solid var(--line); padding-left: clamp(14px, 1.6vw, 26px); }
.cap4 h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); letter-spacing: -.015em; line-height: 1.1; }
.cap4 p { color: var(--mute); font-size: var(--t-small); }
.cap4 .glyph { width: 100%; aspect-ratio: 16 / 9; color: var(--gold); margin-bottom: 8px; }
.values dl { margin: 0; display: grid; }
.values .v { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline; transition: background .4s; }
.values .v:last-child { border-bottom: 1px solid var(--line); }
.values dt { grid-column: 1 / span 6; font-family: var(--f-display); font-size: var(--t-l); letter-spacing: -.03em; line-height: 1; color: var(--mute); transition: color .5s var(--ease), transform .7s var(--ease); }
.values dd { grid-column: 8 / span 5; margin: 0; color: var(--mute); }
.values .v:hover dt { color: var(--ivory); transform: translateX(12px); }

/* ---------- contact page ---------- */
.ct .grid { row-gap: 56px; align-items: start; }
.form { grid-column: 1 / span 7; display: grid; gap: 28px; }
.fld { display: grid; gap: 8px; position: relative; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fld label, .fld .lbl { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; gap: 10px; }
.fld label .opt { color: var(--dim); letter-spacing: .06em; }
.fld input, .fld textarea, .fld select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  padding: 10px 0 14px; font-size: 1.15rem; color: var(--ivory); outline: none; transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(-45deg, transparent 50%, var(--mute) 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; cursor: pointer; }
.fld select option { background: var(--ink-2); color: var(--ivory); }
.fld textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim); }
.fld .bar { position: absolute; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.fld input + .bar, .fld select + .bar { top: auto; bottom: 0; }
.fld:has(.err-msg:not(:empty)) .bar { bottom: 26px; }
.fld:focus-within .bar { transform: scaleX(1); }
.fld.is-invalid input, .fld.is-invalid textarea { border-bottom-color: var(--danger); }
.err-msg { color: var(--danger); font-size: .82rem; min-height: 0; }
.err-msg:empty { display: none; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; color: var(--mute); font-size: var(--t-small); cursor: pointer; }
.check input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; cursor: pointer; transition: background .3s, box-shadow .3s; }
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--ease); }
.check input:checked { background: var(--gold); box-shadow: none; }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check a { color: var(--ivory); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.f-status { font-size: var(--t-small); color: var(--mute); }
.f-status.ok { color: var(--gold); }
.f-status.bad { color: var(--danger); }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: none; }
.btn.is-loading .spin { display: block; }
.btn.is-loading .arr svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sent { display: none; gap: 18px; padding: 36px 0; border-top: 1px solid var(--gold); }
.form.is-sent > :not(.sent) { display: none; }
.form.is-sent .sent { display: grid; }

.ct-info { grid-column: 9 / span 4; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ct-info .ci { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.ct-info .ci b { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--dim); letter-spacing: .12em; font-weight: 500; text-transform: uppercase; }
.ct-info .ci .v { font-size: 1.15rem; color: var(--ivory); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-info .ci .v a { text-decoration: none; }
.copy { border: 0; background: transparent; color: var(--mute); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); transition: color .3s, box-shadow .3s; }
.copy:hover { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--ivory); }
.copy.is-done { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.map { grid-column: 1 / -1; position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 21 / 8; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.map .m-ui { position: absolute; left: 24px; bottom: 22px; right: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.map .m-ui .m-t { display: grid; gap: 4px; }
.map .m-ui .m-t span:first-child { color: var(--sand); }
.map .m-act { display: flex; gap: 10px; flex-wrap: wrap; }
.map .btn { min-height: 44px; font-size: .88rem; }

/* legal / 404 */
.legal .prose { max-width: 44em; color: var(--mute); }
.legal .prose h2 { font-size: var(--t-m); color: var(--ivory); margin: 2em 0 .6em; }
.legal .prose a { color: var(--ivory); }
.legal .prose ul { padding-left: 1.2em; }
.legal .prose li + li { margin-top: .4em; }
.nf { min-height: 100svh; display: grid; align-content: center; gap: 28px; padding-top: var(--header-top); }

/* ---------- reveal system ---------- */
.js [data-r] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-r].is-in { opacity: 1; transform: none; }
.js [data-r="fade"] { transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .2em; margin-bottom: -.2em; }
.split .wi { display: inline-block; }
.js .split .wi { transform: translateY(135%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 45ms); }
.js .split.is-in .wi { transform: none; }
.js [data-r="line"] { opacity: 1; transform: none; }
.js [data-r="line"]::before { transform: scaleX(0); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .clock { display: none; }
  .hero-copy { grid-column: 1 / span 8; }
  .svc-list { grid-column: 1 / span 7; }
  .svc-viz { grid-column: 8 / span 5; }
  .f-brand { grid-column: 1 / -1; }
  .f-col, .f-col.wide { grid-column: span 4; }
}
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .hero { min-height: auto; }
  .hero-body { grid-template-rows: auto auto; padding-top: 12px; }
  .hero-copy { grid-column: 1 / -1; grid-row: 2; }
  .hero-anchor { position: relative; right: auto; top: auto; transform: none; grid-column: 1 / -1; grid-row: 1; width: 118%; margin: -6% -9% -16%; justify-self: center; }
  .hero-meta > * { grid-column: span 6; padding-block: 6px; }
  .hero-meta .cue { display: none; }
  .globe-note { display: none; }
  .sec-head h2, .sec-head .lede { grid-column: 1 / -1; }
  .bridge .b-txt, .bridge .b-side { grid-column: 1 / -1; }
  .svc-list { grid-column: 1 / -1; }
  .svc-viz { display: none; }
  .svc-body .viz-m { display: block; position: relative; aspect-ratio: 16 / 11; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); }
  .svc-body .viz-m canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .svc-body .inner { padding-left: 0; }
  .proc-steps { grid-column: 1 / -1; }
  .proc-anchor { grid-column: 1 / -1; height: 64svh; top: calc(var(--header-h) - 8px); z-index: 0; }
  .proc-anchor .ga { width: min(100vw, 64svh); }
  .step, .step:first-child { min-height: 100svh; justify-content: flex-end; padding-block: 0 9svh; }
  .step .s-card { background: rgba(9, 36, 66, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 22px 20px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 16px; }
  .step h3 { font-size: var(--t-m); }
  .proc-key, .proc-progress { display: none; }
  .uae .u-head, .uae .u-side, .quote { grid-column: 1 / -1; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--stone-line); }
  .cta h2 { grid-column: 1 / -1; }
  .phero h1, .phero .lede { grid-column: 1 / -1; }
  .phero-anchor { right: -30vw; top: 2vh; width: 100vw; opacity: .7; }
  .service h2, .service .s-copy, .service:nth-of-type(even) h2, .service:nth-of-type(even) .s-copy { grid-column: 1 / -1; }
  .service .s-viz, .service:nth-of-type(even) .s-viz { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; }
  .sup { grid-column: 1 / -1; }
  .sup + .sup { border-left: 0; padding-left: 0; }
  .ab-intro .ab-lead, .ab-intro .prose, .ab-intro .sig { grid-column: 1 / -1; grid-row: auto; position: static; }
  .cap4 { grid-template-columns: 1fr 1fr; }
  .cap4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cap4 > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .values dt, .values dd { grid-column: 1 / -1; }
  .values dd { margin-top: 10px; }
  .form, .ct-info { grid-column: 1 / -1; }
  .map { aspect-ratio: auto; display: grid; }
  .map canvas { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
  .map iframe { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; grid-row: 1; grid-column: 1; }
  .map canvas { grid-row: 1; grid-column: 1; }
  .map .m-ui { position: static; padding: 20px; border-top: 1px solid var(--line); }
  .map .m-act, .map .m-act .btn { width: 100%; justify-content: space-between; }
  .f-brand .brand .em-mark { width: 62px; height: 65px; }
  .f-brand .brand .wm { width: 130px; height: 65px; }
}
@media (max-width: 560px) {
  .f-big { flex-direction: column; align-items: flex-start; font-size: 17vw; gap: 0; }
  .f-big i { display: none; }
  .fld-row { grid-template-columns: 1fr; }
  .cap4 { grid-template-columns: 1fr; }
  .cap4 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .f-col, .f-col.wide { grid-column: 1 / -1; }
  .svc-item > button { grid-template-columns: 3.2em 1fr auto; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: space-between; }
  .cta .direct a span { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-r], .js .split .wi { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.nw { white-space: nowrap; }

/* ---------- brand layer: serif display + spaced sans labels (matches the SMIT wordmark) ---------- */
.display, h1, h2, h3 { font-weight: 500; letter-spacing: -.012em; line-height: .98; }
.t-xxl { font-weight: 500; letter-spacing: -.018em; line-height: .9; }
.t-xl { font-weight: 500; letter-spacing: -.015em; line-height: .95; }
.t-l { font-weight: 500; letter-spacing: -.01em; }
.t-m { font-weight: 600; letter-spacing: -.005em; }
.em { font-style: italic; font-weight: 500; }
.eyebrow, .mono, .clock, .hero-meta b, .svc-item .code, .quote footer, .cta .direct a b, .f-col h2,
.hl li::before, .docs span, .fld label, .fld .lbl, .ct-info .ci b, .copy, .drawer li a small {
  font-family: var(--f-body); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-micro);
}
.eyebrow { color: var(--gold); }
.eyebrow::before { background: var(--gold); }
.stone .eyebrow { color: var(--gold-deep); }
.stone .eyebrow::before { background: var(--gold-deep); }
.drawer li a, .svc-item .name, .values dt, .bridge p.big, .quote, .ab-intro .ab-lead, .ab-intro .sig,
.service .s-copy .lede, .cta .direct a span, .coord b { letter-spacing: -.01em; }
.svc-item .name { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.5rem); font-weight: 500; }
.values dt { font-size: var(--t-l); font-weight: 500; }
.bridge p.big { font-weight: 500; font-size: clamp(2.1rem, 1.2rem + 2.9vw, 4rem); line-height: 1.08; max-width: 21ch; }
.quote { font-weight: 500; font-style: italic; }
.coord b { font-weight: 500; font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.4rem); }
.service .s-copy .lede, .ab-intro .ab-lead, .ab-intro .sig { font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.3rem); font-weight: 500; line-height: 1.18; }
.cta .direct a span { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 500; }
.cap4 h3, .pillar h3, .sup h3 { font-size: clamp(1.45rem, 1.1rem + .9vw, 1.9rem); font-weight: 600; }
.step h3 { font-weight: 500; }
.f-big { font-weight: 400; letter-spacing: .01em; font-size: clamp(2rem, 7.2vw, 8.4rem); -webkit-text-stroke: 1px rgba(194, 151, 80, .28); }
.f-big i { color: var(--gold); }
.hl li::before { letter-spacing: .1em; }

/* logo slots — official artwork, never rearranged (Brand Guidelines p.3, 5, 8) */
.brand .em-img { display: block; width: 46px; height: auto; }
.hdr .brand { position: relative; display: block; width: 240px; height: 83px; transition: height .5s var(--ease); }
.hdr .brand img { position: absolute; left: 0; top: 50%; height: auto; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.hdr .brand .logo-h { width: 240px; transform: translateY(-50%); }           /* horizontal logo, minimum 240 px */
.hdr .brand .em-img { width: 44px; opacity: 0; transform: translateY(-50%) scale(.92); }   /* emblem when the bar compacts */
.hdr .wrap { transition: height .5s var(--ease); }
.hdr:not(.is-solid) .wrap { height: var(--header-top); }
.hdr.is-solid .brand { height: 46px; }
.hdr.is-solid .brand .logo-h { opacity: 0; transform: translateY(-50%) scale(.96); }
.hdr.is-solid .brand .em-img { opacity: 1; transform: translateY(-50%); }
.f-brand .lockup { display: block; text-decoration: none; }
.f-brand .lockup .logo-h { width: 300px; height: auto; display: block; }
.loader .l-mark { background: url("../img/smit-emblem.webp?v=92febef4f4") center / contain no-repeat; -webkit-mask: none; mask: none; width: 92px; height: 97px; }
@media (max-width: 560px) {
  :root { --header-top: 112px; }
  .f-brand .lockup .logo-h { width: 260px; }
}

.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .2em; margin-bottom: -.2em; }
.split .wi { display: inline-block; }
.js .split .wi { transform: translateY(135%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 45ms); }
.js .split.is-in .wi { transform: none; }
.js [data-r="line"] { opacity: 1; transform: none; }
.js [data-r="line"]::before { transform: scaleX(0); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .clock { display: none; }
  .hero-copy { grid-column: 1 / span 8; }
  .svc-list { grid-column: 1 / span 7; }
  .svc-viz { grid-column: 8 / span 5; }
  .f-brand { grid-column: 1 / -1; }
  .f-col, .f-col.wide { grid-column: span 4; }
}
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .hero { min-height: auto; }
  .hero-body { grid-template-rows: auto auto; padding-top: 12px; }
  .hero-copy { grid-column: 1 / -1; grid-row: 2; }
  .hero-anchor { position: relative; right: auto; top: auto; transform: none; grid-column: 1 / -1; grid-row: 1; width: 118%; margin: -6% -9% -16%; justify-self: center; }
  .hero-meta > * { grid-column: span 6; padding-block: 6px; }
  .hero-meta .cue { display: none; }
  .globe-note { display: none; }
  .sec-head h2, .sec-head .lede { grid-column: 1 / -1; }
  .bridge .b-txt, .bridge .b-side { grid-column: 1 / -1; }
  .svc-list { grid-column: 1 / -1; }
  .svc-viz { display: none; }
  .svc-body .viz-m { display: block; position: relative; aspect-ratio: 16 / 11; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); }
  .svc-body .viz-m canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .svc-body .inner { padding-left: 0; }
  .proc-steps { grid-column: 1 / -1; }
  .proc-anchor { grid-column: 1 / -1; height: 64svh; top: calc(var(--header-h) - 8px); z-index: 0; }
  .proc-anchor .ga { width: min(100vw, 64svh); }
  .step, .step:first-child { min-height: 100svh; justify-content: flex-end; padding-block: 0 9svh; }
  .step .s-card { background: rgba(9, 36, 66, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 22px 20px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 16px; }
  .step h3 { font-size: var(--t-m); }
  .proc-key, .proc-progress { display: none; }
  .uae .u-head, .uae .u-side, .quote { grid-column: 1 / -1; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--stone-line); }
  .cta h2 { grid-column: 1 / -1; }
  .phero h1, .phero .lede { grid-column: 1 / -1; }
  .phero-anchor { right: -30vw; top: 2vh; width: 100vw; opacity: .7; }
  .service h2, .service .s-copy, .service:nth-of-type(even) h2, .service:nth-of-type(even) .s-copy { grid-column: 1 / -1; }
  .service .s-viz, .service:nth-of-type(even) .s-viz { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; }
  .sup { grid-column: 1 / -1; }
  .sup + .sup { border-left: 0; padding-left: 0; }
  .ab-intro .ab-lead, .ab-intro .prose, .ab-intro .sig { grid-column: 1 / -1; grid-row: auto; position: static; }
  .cap4 { grid-template-columns: 1fr 1fr; }
  .cap4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cap4 > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .values dt, .values dd { grid-column: 1 / -1; }
  .values dd { margin-top: 10px; }
  .form, .ct-info { grid-column: 1 / -1; }
  .map { aspect-ratio: auto; display: grid; }
  .map canvas { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
  .map iframe { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; grid-row: 1; grid-column: 1; }
  .map canvas { grid-row: 1; grid-column: 1; }
  .map .m-ui { position: static; padding: 20px; border-top: 1px solid var(--line); }
  .map .m-act, .map .m-act .btn { width: 100%; justify-content: space-between; }
  .f-brand .brand .em-mark { width: 62px; height: 65px; }
  .f-brand .brand .wm { width: 130px; height: 65px; }
}
@media (max-width: 560px) {
  .f-big { flex-direction: column; align-items: flex-start; font-size: 17vw; gap: 0; }
  .f-big i { display: none; }
  .fld-row { grid-template-columns: 1fr; }
  .cap4 { grid-template-columns: 1fr; }
  .cap4 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .f-col, .f-col.wide { grid-column: 1 / -1; }
  .svc-item > button { grid-template-columns: 3.2em 1fr auto; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: space-between; }
  .cta .direct a span { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-r], .js .split .wi { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.nw { white-space: nowrap; }

/* ---------- brand layer: serif display + spaced sans labels (matches the SMIT wordmark) ---------- */
.display, h1, h2, h3 { font-weight: 500; letter-spacing: -.012em; line-height: .98; }
.t-xxl { font-weight: 500; letter-spacing: -.018em; line-height: .9; }
.t-xl { font-weight: 500; letter-spacing: -.015em; line-height: .95; }
.t-l { font-weight: 500; letter-spacing: -.01em; }
.t-m { font-weight: 600; letter-spacing: -.005em; }
.em { font-style: italic; font-weight: 500; }
.eyebrow, .mono, .clock, .hero-meta b, .svc-item .code, .quote footer, .cta .direct a b, .f-col h2,
.hl li::before, .docs span, .fld label, .fld .lbl, .ct-info .ci b, .copy, .drawer li a small {
  font-family: var(--f-body); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-micro);
}
.eyebrow { color: var(--gold); }
.eyebrow::before { background: var(--gold); }
.stone .eyebrow { color: var(--gold-deep); }
.stone .eyebrow::before { background: var(--gold-deep); }
.drawer li a, .svc-item .name, .values dt, .bridge p.big, .quote, .ab-intro .ab-lead, .ab-intro .sig,
.service .s-copy .lede, .cta .direct a span, .coord b { letter-spacing: -.01em; }
.svc-item .name { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.5rem); font-weight: 500; }
.values dt { font-size: var(--t-l); font-weight: 500; }
.bridge p.big { font-weight: 500; font-size: clamp(2.1rem, 1.2rem + 2.9vw, 4rem); line-height: 1.08; max-width: 21ch; }
.quote { font-weight: 500; font-style: italic; }
.coord b { font-weight: 500; font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.4rem); }
.service .s-copy .lede, .ab-intro .ab-lead, .ab-intro .sig { font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.3rem); font-weight: 500; line-height: 1.18; }
.cta .direct a span { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 500; }
.cap4 h3, .pillar h3, .sup h3 { font-size: clamp(1.45rem, 1.1rem + .9vw, 1.9rem); font-weight: 600; }
.step h3 { font-weight: 500; }
.f-big { font-weight: 400; letter-spacing: .01em; font-size: clamp(2rem, 7.2vw, 8.4rem); -webkit-text-stroke: 1px rgba(194, 151, 80, .28); }
.f-big i { color: var(--gold); }
.hl li::before { letter-spacing: .1em; }

/* logo slots */
.brand .em-img { display: block; width: 46px; height: auto; }
.hdr .brand .em-img { width: 42px; }
.hdr .brand .wm { width: 84px; height: 25.3px; -webkit-mask: url("../img/smit-wordmark.webp?v=2561415c28") center / contain no-repeat; mask: url("../img/smit-wordmark.webp?v=2561415c28") center / contain no-repeat; background: var(--ivory); }
.f-brand .lockup { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.f-brand .lockup .em-img { width: 96px; }
.f-brand .lockup .lk { width: 260px; height: auto; display: block; }
.loader .l-mark { background: url("../img/smit-emblem.webp?v=92febef4f4") center / contain no-repeat; -webkit-mask: none; mask: none; width: 92px; height: 97px; }
@media (max-width: 560px) {
  .f-brand .lockup { gap: 14px; }
  .f-brand .lockup .em-img { width: 64px; }
  .f-brand .lockup .lk { width: 190px; }
}

.split .w { padding-right: .1em; margin-right: -.1em; }

/* ---------- content components (guide, FAQ, checklists) ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note { color: var(--mute); font-size: var(--t-small); max-width: 46em; margin-top: 28px; }
.stone .note { color: var(--stone-mute); }
.toc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toc a { text-decoration: none; font-size: .86rem; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ivory); transition: box-shadow .3s, color .3s; }
.toc a:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }

/* facts band */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--stone-line); }
.fact { padding: 34px clamp(16px, 2.4vw, 36px) 30px 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--stone-line); }
.fact:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--stone-line); }
.fact b { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4.4rem); line-height: .95; letter-spacing: -.01em; color: var(--stone-ink); }
.fact p { color: var(--stone-mute); max-width: 26em; }
.fact .src { font-size: .78rem; color: var(--gold-deep); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; justify-self: start; padding-bottom: 1px; }
.solid .facts, .solid-2 .facts { border-color: var(--line); }
.solid .fact, .solid-2 .fact { border-color: var(--line); }
.solid .fact b, .solid-2 .fact b { color: var(--ivory); }
.solid .fact p { color: var(--mute); }
.solid .fact .src { color: var(--gold); }

/* incoterms */
.inc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.inc-tabs { display: grid; gap: 26px; }
.inc-group { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-gl { flex-basis: 100%; font-size: var(--t-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.inc-tabs button { border: 0; cursor: pointer; background: transparent; color: var(--ivory); font-weight: 600; letter-spacing: .08em; font-size: .9rem; width: 64px; height: 48px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s, box-shadow .3s; }
.inc-tabs button:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.inc-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); box-shadow: none; }
.inc-panel { background: radial-gradient(120% 90% at 0% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; padding: clamp(22px, 3vw, 40px); display: grid; gap: 30px; }
.inc-head { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.inc-code { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .85; color: var(--gold); letter-spacing: .02em; }
.inc-head h3 { font-size: var(--t-m); margin-bottom: 10px; }
.inc-head p { color: var(--mute); }
.inc-track { list-style: none; margin: 0; padding: 34px 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; position: relative; }
.inc-track li { min-height: 92px; padding: 12px 10px; border-radius: 3px; font-size: .78rem; line-height: 1.3; display: flex; align-items: flex-end; transition: background .5s var(--ease), color .5s; }
.inc-track li.is-s { background: rgba(194, 151, 80, .9); color: var(--ink); font-weight: 600; }
.inc-track li.is-p { background: linear-gradient(90deg, rgba(194, 151, 80, .9) 50%, rgba(248, 244, 236, .08) 50%); color: var(--ivory); }
.inc-track li.is-b { background: rgba(248, 244, 236, .08); color: var(--mute); }
.inc-risk { position: absolute; top: 0; bottom: -10px; left: var(--pos, 50%); width: 0; border-left: 2px dashed var(--ivory); transition: left .7s var(--ease); font-style: normal; }
.inc-risk em { position: absolute; top: 0; left: 8px; white-space: nowrap; font-style: normal; font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); }
.inc-key { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .82rem; color: var(--mute); }
.inc-key span { display: inline-flex; align-items: center; gap: 8px; }
.inc-key i { width: 16px; height: 10px; border-radius: 2px; }
.inc-key .k-s { background: var(--gold); } .inc-key .k-b { background: rgba(248, 244, 236, .16); } .inc-key .k-r { border-left: 2px dashed var(--ivory); width: 2px; height: 14px; border-radius: 0; }
.inc-tip { padding-top: 20px; border-top: 1px solid var(--line); color: var(--ivory); }

/* documents */
.docs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.doc { background: var(--ink-2); padding: clamp(24px, 2.6vw, 38px); display: grid; gap: 14px; align-content: start; transition: background .5s var(--ease); }
.doc:hover { background: var(--slate); }
.doc .mono { color: var(--gold); }
.doc h3 { font-size: clamp(1.5rem, 1.15rem + .9vw, 2rem); }
.doc p { color: var(--mute); }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.calc-in { display: grid; gap: 26px; }
.calc input[type=number] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-out { position: sticky; top: calc(var(--header-h) + 30px); background: radial-gradient(120% 90% at 100% 0%, var(--slate) 0%, var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; padding: clamp(22px, 3vw, 40px); display: grid; gap: 26px; }
.co-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--line); }
.co-bar i { flex: 1 1 0; transition: flex-grow .6s var(--ease); min-width: 0; }
.co-bar [data-seg=goods] { background: var(--ivory); } .co-bar [data-seg=freight] { background: #99bded; } .co-bar [data-seg=ins] { background: #6f8fb8; }
.co-bar [data-seg=duty] { background: var(--gold); } .co-bar [data-seg=vat] { background: var(--gold-2); } .co-bar [data-seg=local] { background: var(--dim); }
.calc-out dl { margin: 0; display: grid; }
.calc-out dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-out dt { color: var(--mute); }
.calc-out dd { margin: 0; color: var(--ivory); font-weight: 500; }
.calc-out .tot { border-bottom: 0; padding-top: 18px; align-items: baseline; }
.calc-out .tot dt { color: var(--ivory); font-weight: 600; }
.calc-out .tot dd { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); color: var(--gold); font-weight: 600; }
.calc-out .note { margin: 0; font-size: .82rem; }

/* checklist */
.ck-head { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.ck-head .btn { justify-self: start; }
.ck { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone-line); counter-reset: ck; }
.ck li { border-bottom: 1px solid var(--stone-line); }
.ck label { display: grid; grid-template-columns: 26px 1fr; gap: 18px; padding: 20px 0; cursor: pointer; }
.ck input { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 2px 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stone-line), inset 0 0 0 1.5px rgba(14,43,75,.35); display: grid; place-items: center; cursor: pointer; transition: background .3s; }
.ck input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--ease); }
.ck input:checked { background: var(--stone-ink); box-shadow: none; }
.ck input:checked::after { transform: rotate(-45deg) scale(1); }
.ck span { display: grid; gap: 4px; color: var(--stone-mute); }
.ck b { color: var(--stone-ink); font-weight: 600; font-size: 1.05rem; }
.ck input:checked + span b { text-decoration: line-through; text-decoration-color: var(--gold-deep); }
.ck-count { grid-column: 7 / span 6; color: var(--gold-deep); margin-top: 18px; }

/* five steps */
.steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.s5 { padding: 30px clamp(14px, 1.6vw, 26px) 10px 0; display: grid; gap: 14px; align-content: start; }
.s5 + .s5 { padding-left: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--line); }
.s5 .mono { color: var(--gold); }
.s5 h3 { font-size: clamp(1.45rem, 1.1rem + .9vw, 1.9rem); }
.s5 p { color: var(--mute); font-size: var(--t-small); }

/* glossary */
.gl-search { grid-column: 9 / span 4; position: relative; }
.gl-search input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 12px 0; font-size: 1.05rem; color: var(--ivory); outline: none; }
.gl-search input:focus { border-color: var(--gold); }
.gl-n { position: absolute; right: 0; top: -18px; color: var(--dim); }
.gl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.gl div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.gl dt { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: var(--ivory); }
.gl dd { margin: 0; color: var(--mute); font-size: var(--t-small); }
.gl-empty { color: var(--mute); padding: 20px 0; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }
.faq-list { grid-column: 5 / span 8; border-top: 1px solid var(--line); }
.stone .faq-list { border-color: var(--stone-line); }
.faq-head { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.faq details { border-bottom: 1px solid var(--line); }
.stone .faq details { border-color: var(--stone-line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 22px; gap: 20px; align-items: center; padding: 24px 0; font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); font-weight: 500; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 22px; height: 22px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .5s var(--ease); color: var(--gold); }
.stone .faq summary::after { color: var(--gold-deep); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 48px 26px 0; color: var(--mute); max-width: 44em; display: grid; gap: 12px; }
.stone .faq .ans { color: var(--stone-mute); }
.faq .ans a { color: inherit; }

/* service how-it-works & brief */
.s-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: 36px; margin-top: 24px; padding-top: 40px; border-top: 1px dashed var(--line-2); }
.s-more .hw { grid-column: 1 / span 7; }
.s-more .need { grid-column: 9 / span 4; }
.s-more h3 { font-size: var(--t-micro); font-family: var(--f-body); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: fl; }
.flow li { padding: 0 16px 0 0; display: grid; gap: 8px; align-content: start; position: relative; counter-increment: fl; }
.flow li::before { content: counter(fl, decimal-leading-zero); font-family: var(--f-display); font-size: 2rem; font-weight: 500; color: var(--gold); line-height: 1; }
.flow li::after { content: ""; position: absolute; top: 16px; left: 46px; right: 12px; height: 1px; background: var(--line-2); }
.flow li:last-child::after { display: none; }
.flow b { font-weight: 600; }
.flow span { color: var(--mute); font-size: var(--t-small); }
.need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.need li { display: flex; gap: 12px; color: var(--ivory); font-size: var(--t-small); }
.need li::before { content: ""; width: 14px; height: 1px; background: var(--gold); margin-top: .75em; flex: none; }

/* teaser cards (home) */
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.teaser { background: var(--ink); padding: clamp(24px, 2.8vw, 40px); display: grid; gap: 16px; align-content: start; text-decoration: none; min-height: 260px; position: relative; overflow: hidden; transition: background .5s var(--ease); }
.teaser:hover { background: var(--slate); }
.teaser .mono { color: var(--gold); }
.teaser h3 { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.3rem); }
.teaser p { color: var(--mute); }
.teaser .go { margin-top: auto; display: inline-flex; gap: 10px; align-items: center; color: var(--ivory); font-weight: 600; font-size: .92rem; }
.teaser .go svg { width: 12px; height: 12px; transition: transform .5s var(--ease); }
.teaser:hover .go svg { transform: translate(3px, -3px); }

@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--stone-line); }
  .inc, .calc { grid-template-columns: 1fr; }
  .inc-track { grid-template-columns: 1fr; padding: 0 0 0 0; }
  .inc-track li { min-height: 0; padding: 12px 14px; }
  .inc-risk { left: -6px; right: -6px; width: auto; top: calc(var(--pos) * 1); bottom: auto; height: 0; border-left: 0; border-top: 2px dashed var(--ivory); transition: top .7s var(--ease); }
  .inc-risk em { left: auto; right: 0; top: -20px; }
  .inc-head { grid-template-columns: 1fr; gap: 12px; }
  .docs-grid, .teasers { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .ck-head, .ck, .ck-count { grid-column: 1 / -1; position: static; }
  .ck-head { margin-bottom: 28px; }
  .steps5 { grid-template-columns: 1fr; }
  .s5 + .s5 { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .gl-search { grid-column: 1 / -1; }
  .gl { grid-template-columns: 1fr; }
  .gl div { grid-template-columns: 1fr; gap: 6px; }
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-head { margin-bottom: 28px; }
  .s-more .hw, .s-more .need { grid-column: 1 / -1; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .fact:nth-child(even) { padding-left: 0; border-left: 0; }
  .flow { grid-template-columns: 1fr; }
  .flow li::after { display: none; }
  .inc-tabs button { width: calc((100% - 24px) / 4); }
}

/* about: role diagram */
.role { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc { padding: clamp(26px, 3vw, 44px) clamp(18px, 2.4vw, 36px); display: grid; gap: 14px; align-content: start; position: relative; }
.rc + .rc { border-left: 1px solid var(--line); }
.rc .mono { color: var(--dim); }
.rc h3 { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.3rem); }
.rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--mute); font-size: var(--t-small); }
.rc li { display: flex; gap: 10px; } .rc li::before { content: ""; width: 12px; height: 1px; background: var(--gold); margin-top: .75em; flex: none; }
.rc--mid { background: radial-gradient(100% 120% at 50% 0%, var(--slate) 0%, transparent 75%); }
.rc--mid .mono, .rc--mid h3 { color: var(--gold); }
.flowline { position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; pointer-events: none; overflow: hidden; }
.flowline i { position: absolute; top: 0; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: fl 3.2s var(--ease-io) infinite; }
@keyframes fl { from { left: -30%; } to { left: 100%; } }
.role-links { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 30px; }
/* contact: next steps */
.next { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: 24px; padding-top: 48px; border-top: 1px solid var(--line); }
.next .nx-h { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.nx { grid-column: 5 / span 8; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); counter-reset: nx; }
.nx li { display: grid; gap: 8px; align-content: start; counter-increment: nx; }
.nx li::before { content: counter(nx, decimal-leading-zero); font-family: var(--f-display); font-size: 2.2rem; font-weight: 500; color: var(--gold); line-height: 1; }
.nx b { font-weight: 600; } .nx span { color: var(--mute); font-size: var(--t-small); }
.next .note { grid-column: 5 / span 8; margin-top: 0; }
@media (max-width: 860px) {
  .role { grid-template-columns: 1fr; }
  .rc + .rc { border-left: 0; border-top: 1px solid var(--line); }
  .flowline { display: none; }
  .next .nx-h, .nx, .next .note { grid-column: 1 / -1; }
  .nx { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .flowline i { display: none; } }

/* ================= FX LAYER ================= */
/* page transition curtain */
.curtain { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: grid; place-items: center; background: var(--ink); clip-path: inset(100% 0 0 0); visibility: hidden; }
.curtain.is-cover { visibility: visible; pointer-events: all; }
.curtain.is-in { animation: cur-in .56s var(--ease-io) forwards; }
.curtain.is-cover.no-anim { clip-path: inset(0 0 0 0); }
.curtain.is-cover:not(.is-in):not(.is-out) { clip-path: inset(0 0 0 0); }
.curtain.is-out { animation: cur-out .85s var(--ease-io) forwards; }
@keyframes cur-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cur-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.curtain .c-in { display: grid; justify-items: center; gap: 18px; }
.curtain .c-mark { width: 64px; height: 67px; background: url("../img/smit-emblem.webp?v=92febef4f4") center / contain no-repeat; opacity: 0; transform: scale(.9) rotate(-8deg); transition: opacity .4s .12s, transform .6s .12s var(--ease); }
.curtain.is-in .c-mark, .curtain.no-anim .c-mark, .curtain.is-out .c-mark { opacity: 1; transform: none; }
.curtain .c-line { width: 120px; height: 1px; background: var(--line); overflow: hidden; display: block; }
.curtain .c-line b { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.curtain.is-in .c-line b { animation: l-bar .5s var(--ease-io) .1s forwards; }
.curtain.is-out .c-line b, .curtain.no-anim .c-line b { transform: scaleX(1); }

/* scroll progress */
.progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 70; background: linear-gradient(90deg, var(--gold-2), var(--sand)); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* cursor ring */
.cursor { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(194, 151, 80, .75); transition: transform .45s var(--ease), background .3s, box-shadow .3s; }
.cursor.is-link i { transform: scale(1.7); background: rgba(194, 151, 80, .12); box-shadow: inset 0 0 0 1px rgba(194, 151, 80, .4); }
.cursor.is-card i { transform: scale(2.6); background: rgba(194, 151, 80, .05); box-shadow: inset 0 0 0 1px rgba(194, 151, 80, .25); }
.cursor.is-text i { transform: scale(.35, 1); }
.cursor.is-down i { transform: scale(.8); }

/* spotlight + tilt */
:where([data-spot]) { position: relative; }
[data-spot] { isolation: isolate; transition: transform .6s var(--ease), background .5s var(--ease); }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .45s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 151, 80, .16), transparent 62%); }
.stone [data-spot]::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(181, 138, 70, .16), transparent 62%); }
[data-spot]:hover::after { opacity: 1; }
.svc-viz[data-spot]::after, .s-viz[data-spot]::after { z-index: 2; mix-blend-mode: screen; }

/* eyebrow line draw */
.js .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .1s; }
.js .eyebrow.is-seen::before { transform: none; }

/* footer marquee */
.mq { grid-column: 1 / -1; overflow: hidden; margin: 10px calc(var(--gutter) * -1) 0; padding-block: 6px; border-block: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-t { display: flex; width: max-content; will-change: transform; }
.mq-t span { font-family: var(--f-display); font-size: clamp(3rem, 1.6rem + 6vw, 8.8rem); line-height: 1.05; font-weight: 500; padding: 0 .3em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(194, 151, 80, .45); transition: color .5s, -webkit-text-stroke-color .5s; }
.mq-t span:nth-child(4n+3) { font-style: italic; color: rgba(194, 151, 80, .9); -webkit-text-stroke: 0; }
.mq-t i { font-style: normal; align-self: center; color: var(--gold); font-size: clamp(1rem, .8rem + 1vw, 2rem); padding: 0 .2em; }
.mq:hover .mq-t span { -webkit-text-stroke-color: var(--gold); }

/* pinned horizontal scene */
.hs { position: relative; }
.hs-pin { position: relative; }
.hs.is-pinned .hs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vh, 48px); }
.hs-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 560px); gap: clamp(16px, 2vw, 28px); will-change: transform; padding-right: var(--gutter); }
.hs:not(.is-pinned) .hs-track { grid-auto-flow: row; grid-auto-columns: auto; padding-right: 0; }
.hs-meter { width: 200px; height: 1px; background: var(--line-2); position: relative; flex: none; }
.hs-meter i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--hp, 0)); }
.hp-card { background: radial-gradient(120% 90% at 0% 0%, var(--slate) 0%, var(--ink-2) 72%); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; padding: clamp(26px, 3vw, 44px); display: grid; gap: 18px; align-content: start; min-height: min(62vh, 540px); }
.hp-card .mono { color: var(--gold); }
.hp-card .glyph { width: 100%; max-width: 260px; aspect-ratio: 16 / 9; color: var(--gold); margin: 10px 0 auto; }
.hp-card h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3.3rem); margin-top: auto; }
.hp-card p { color: var(--mute); max-width: 30em; }
.hp-card .num { font-family: var(--f-display); font-size: 5rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(194, 151, 80, .5); }
.hp-card .glyph path, .hp-card .glyph circle, .hp-card .glyph rect { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.2s var(--ease); }
.hp-card.is-seen .glyph path, .hp-card.is-seen .glyph circle, .hp-card.is-seen .glyph rect, .hs:not(.is-pinned) .glyph * { stroke-dashoffset: 0; }

/* services hero index */
.sx { grid-column: 1 / span 8; list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sx li { border-bottom: 1px solid var(--line); }
.sx a { display: grid; grid-template-columns: 4em 1fr auto; align-items: center; gap: 14px; padding: clamp(14px, 2vw, 22px) 6px; text-decoration: none; transition: padding .6s var(--ease), color .4s; }
.sx a .mono { color: var(--dim); transition: color .4s; }
.sx a b { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.2rem); line-height: 1; transition: color .4s; }
.sx a i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .4s, color .4s, transform .6s var(--ease); font-style: normal; }
.sx a i svg { width: 14px; height: 14px; }
.sx.is-hovering a b { color: var(--dim); }
.sx a:hover, .sx a:focus-visible { padding-left: 22px; }
.sx a:hover b, .sx a:focus-visible b { color: var(--ivory); }
.sx a:hover .mono, .sx a:focus-visible .mono { color: var(--gold); }
.sx a:hover i, .sx a:focus-visible i { background: var(--gold); color: var(--ink); transform: rotate(45deg); box-shadow: none; }
.sx-hint { grid-column: 1 / span 8; color: var(--dim); font-size: .82rem; }

/* services: big ghost code + sticky visual */
.service { position: relative; overflow-x: clip; }
.s-ghost { position: absolute; right: -2vw; top: 4vh; font-family: var(--f-display); font-weight: 600; font-size: clamp(8rem, 22vw, 22rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(194, 151, 80, .12); pointer-events: none; user-select: none; z-index: 0; }
.service:nth-of-type(even) .s-ghost { right: auto; left: -2vw; }
.service .wrap { position: relative; z-index: 1; }
@media (min-width: 861px) {
  .service .s-viz { position: sticky; top: calc(var(--header-h) + 80px); align-self: start; }
}
.service .s-more { grid-column: auto; display: grid; grid-template-columns: 1fr; margin-top: 8px; padding-top: 32px; }
.service .s-more .hw, .service .s-more .need { grid-column: auto; }
.service .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
.service .flow li:nth-child(2)::after { display: none; }

/* contact hero globe label */
.here { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; color: var(--sand); pointer-events: none; }
.here i { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 0 rgba(194, 151, 80, .6); animation: beat 2.4s infinite; }

/* sent state */
.sent .tick { width: 64px; height: 64px; }
.sent .tick circle, .sent .tick path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; }
.form.is-sent .sent .tick circle { animation: draw 1s var(--ease) forwards; }
.form.is-sent .sent .tick path { animation: draw .8s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* buttons: shine sweep */
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }

/* heading accent underline for links in prose */
.prose a, .ans a, .note a { text-decoration-color: rgba(194, 151, 80, .6); text-underline-offset: 3px; }

@media (max-width: 860px) {
  .sx, .sx-hint { grid-column: 1 / -1; }
  .s-ghost { font-size: 38vw; top: 2vh; }
  .hs-track { grid-auto-columns: auto; }
  .hp-card { min-height: 0; }
  .hs-meter { display: none; }
  .mq { margin-inline: calc(max(16px, env(safe-area-inset-left, 0px)) * -1); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain, .cursor, .progress { display: none !important; }
  [data-spot] { transform: none !important; }
  .hp-card .glyph * { stroke-dashoffset: 0 !important; }
}
.hs.is-pinned { padding-block: 0; }
.hs.is-pinned .hs-pin .wrap { max-width: none; }
@media (hover: none) { .sx-hint { display: none; } }
.phero--tall { min-height: min(88svh, 860px); display: flex; flex-direction: column; justify-content: center; }
.phero--tall .phero-anchor { top: 50%; transform: translateY(-50%); }
.s-ghost { -webkit-text-stroke-color: rgba(194, 151, 80, .2); }
@media (max-width: 860px) { .phero--tall { min-height: 0; } .phero--tall .phero-anchor { top: 2vh; transform: none; } }

.f-col .f-h { font-family: var(--f-body); font-size: var(--t-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
/* about: company facts */
.facts-co { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); row-gap: 32px; }
.cf-head { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.cf { grid-column: 6 / span 7; margin: 0; border-top: 1px solid var(--line); }
.cf div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cf dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding-top: .25em; }
.cf dd { margin: 0; color: var(--ivory); }
.cf dd a { color: inherit; text-decoration-color: rgba(194, 151, 80, .6); text-underline-offset: 3px; }
@media (max-width: 860px) { .cf-head, .cf { grid-column: 1 / -1; } .cf div { grid-template-columns: 1fr; gap: 4px; } }


/* ---------- SMIT Brand Guidelines 2026 ---------- */
/* Montserrat Medium, tracked, for eyebrows, labels and the tagline */
.eyebrow, .mono, .clock, .hero-meta b, .svc-item .code, .quote footer, .cta .direct a b, .f-col h2, .f-h,
.hl li::before, .docs span, .fld label, .fld .lbl, .ct-info .ci b, .copy, .drawer li a small { font-weight: 500; letter-spacing: .2em; }
.btn { font-weight: 500; letter-spacing: .02em; font-size: .94rem; }
.nav a.nl { font-size: .88rem; letter-spacing: .01em; }
/* headlines on light grounds in Wordmark Navy */
.stone h1, .stone h2, .stone h3, .stone .display, .stone .ab-lead, .stone .sig, .stone .quote { color: var(--stone-head); }
/* Cormorant Garamond Medium for headlines */
.display, h1, h2, h3 { font-weight: 500; }
/* header: horizontal logo needs room — the drawer takes over below 1100 px, the clock below 1280 px */
@media (max-width: 1280px) { .clock { display: none; } }
@media (max-width: 1100px) { .nav { display: none; } .menu-btn { display: block; } }

/* About: the emblem story (Brand Guidelines p.2) */
.emb .grid { align-items: center; row-gap: 48px; }
.emb-mark { grid-column: 1 / span 5; margin: 0; display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: radial-gradient(70% 70% at 50% 45%, var(--slate) 0%, var(--ink-2) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.emb-mark img { width: min(56%, 300px); height: auto; }
.emb-copy { grid-column: 7 / span 6; display: grid; gap: 28px; align-content: center; }
.emb-q { margin: 8px 0 0; padding-top: 26px; border-top: 1px solid var(--gold-2); max-width: 30em; }
.emb-q p { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1.15; color: var(--ivory); }
@media (max-width: 860px) { .emb-mark, .emb-copy { grid-column: 1 / -1; } .emb-mark { aspect-ratio: 4 / 3; } }

/* hero headline: Cormorant Garamond sets wider than Cormorant */
.hero h1 { max-width: 16ch; }

/* Sector focus band (Home, Services) */
.sector .grid { align-items: center; row-gap: 44px; }
.sector-copy { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.sector-copy .btn { justify-self: start; }
.sector-cats { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sector-cats li { border-bottom: 1px solid var(--line); }
.sector-cats a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 6px; align-items: baseline; padding: 24px 8px; text-decoration: none; color: var(--ivory); transition: background-color .4s, padding .6s var(--ease); }
.sector-cats a:hover, .sector-cats a:focus-visible { background-color: rgba(248, 244, 236, .04); padding-left: 18px; }
.sector-cats .mono { color: var(--gold); grid-row: 1 / span 2; }
.sector-cats b { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.1; }
.sector-cats small { grid-column: 2; color: var(--mute); font-size: var(--t-small); }
.sector-cats i { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--gold); transition: transform .6s var(--ease); }
.sector-cats i svg { width: 14px; height: 14px; }
.sector-cats a:hover i { transform: translate(3px, -3px); }
@media (max-width: 860px) { .sector-copy, .sector-cats { grid-column: 1 / -1; } }
/* Technology page */
.doc .src { font-size: .78rem; color: var(--gold); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; justify-self: start; padding-bottom: 1px; }
.s5 .mono a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* Legal pages: sticky contents + numbered clauses */
.legal-meta { color: var(--dim); }
.legal-grid { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.legal-toc ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: toc var(--start, 0); border-top: 1px solid var(--line); }
.legal-toc ol[start="8"] { --start: 7; }
.legal-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.legal-toc ol a { display: flex; gap: 12px; padding: 9px 0; font-size: .86rem; color: var(--mute); text-decoration: none; transition: color .3s, padding .4s var(--ease); }
.legal-toc ol a::before { content: counter(toc); min-width: 1.6em; color: var(--gold); font-variant-numeric: tabular-nums; font-size: .78rem; padding-top: .1em; }
.legal-toc ol a:hover, .legal-toc ol a:focus-visible { color: var(--ivory); padding-left: 4px; }
.legal-part { color: var(--gold); margin: 0 0 12px; }
.legal-body { max-width: 46em; }
.legal-body > .legal-part { padding-top: 6px; margin-bottom: -.4em; }
.legal-body > .legal-part ~ .legal-part { margin-top: 3.2em; padding-top: 2.4em; border-top: 1px solid var(--gold-2); }
.legal .prose h2 { display: flex; align-items: baseline; gap: .55em; scroll-margin-top: calc(var(--header-h) + 24px); }
.legal .prose h2 .n { font-family: var(--f-body); font-size: .78rem; font-weight: 500; color: var(--gold); letter-spacing: .1em; min-width: 1.8em; font-variant-numeric: tabular-nums; }
.legal .prose h3 { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: var(--ivory); margin: 1.5em 0 .5em; }
.legal .prose p { display: block; }
.legal .prose .cl { display: inline-block; min-width: 2.8em; color: var(--dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
.legal .prose b { color: var(--ivory); font-weight: 500; }
.legal-contact { list-style: none; padding: 0 !important; }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; max-height: none; overflow: visible; }
}
.phero .legal-meta { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .legal-toc ol { columns: 2; column-gap: 20px; border-top: 0; }
  .legal-toc li { break-inside: avoid; }
  .legal-toc a { font-size: .8rem; padding: 7px 0; }
}

/* ================= Arabic (lang="ar", dir="rtl") =================
   Almarai for everything Arabic: simple, modern and easy to read (chosen by SAED, Oct 2026).
   Arabic letters join, so letter-spacing is always zero; capitals and italics do not exist. */
[lang="ar"] {
  --f-display: "Almarai", "Montserrat", "Segoe UI", Tahoma, sans-serif;
  --f-body: "Almarai", "Montserrat", "Segoe UI", Tahoma, sans-serif;
  --f-mono: "Almarai", "Montserrat", "Segoe UI", Tahoma, sans-serif;
}
[lang="ar"] body { line-height: 1.8; }
[lang="ar"] *, [lang="ar"] *::before, [lang="ar"] *::after { letter-spacing: 0 !important; }
[lang="ar"] *, [lang="ar"] *::before, [lang="ar"] *::after { font-style: normal !important; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .t-xxl, [lang="ar"] .t-xl, [lang="ar"] .t-l { line-height: 1.35; font-weight: 700; }
[lang="ar"] .hero h1 { font-weight: 800; }
[lang="ar"] .svc-item .name, [lang="ar"] .values dt, [lang="ar"] .sx a b, [lang="ar"] .fact b, [lang="ar"] .faq summary, [lang="ar"] .gl dt { font-weight: 700; }
[lang="ar"] .bridge p.big, [lang="ar"] .quote, [lang="ar"] .service .s-copy .lede, [lang="ar"] .ab-intro .ab-lead { font-weight: 400; line-height: 1.6; }
[lang="ar"] .mq-t span { font-weight: 700; }
[lang="ar"] .t-m, [lang="ar"] .lede { line-height: 1.6; }
[lang="ar"] .mono, [lang="ar"] .eyebrow, [lang="ar"] .fld label, [lang="ar"] .ct-info .ci b, [lang="ar"] .f-h { font-size: .82rem; font-weight: 400; }
[lang="ar"] .hero h1 { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.6rem); max-width: 11em; }
[lang="ar"] .phero h1, [lang="ar"] .t-xl { font-size: clamp(2.2rem, 1rem + 3.6vw, 4.6rem); }
[lang="ar"] .split .w { padding-bottom: .35em; margin-bottom: -.35em; padding-top: .1em; }
[lang="ar"] [dir="ltr"] { unicode-bidi: isolate; }
[lang="ar"] .tnum, [lang="ar"] [data-clock] { font-family: "Montserrat", "Almarai", sans-serif; }
[lang="ar"]:not(html) { font-family: "Almarai", "Segoe UI", Tahoma, sans-serif; }

/* language switch */
.lang-sw { font-family: var(--f-body); font-size: .92rem; text-decoration: none; color: var(--mute); transition: color .3s; white-space: nowrap; }
.lang-sw:hover, .lang-sw:focus-visible { color: var(--gold); }
[lang="en"] .lang-sw { font-family: "Almarai", "Segoe UI", Tahoma, sans-serif; font-size: .98rem; }
[lang="ar"] .lang-sw { font-family: "Montserrat", sans-serif; font-size: .82rem; letter-spacing: .04em; }
.nav > .lang-sw { padding-inline: 2px; }
.d-foot .lang-sw { color: var(--gold); }
@media (max-width: 1180px) { .nav > .lang-sw { display: none; } }

/* mirror the layout */
[dir="rtl"] .skip { left: auto; right: 16px; }
[dir="rtl"] .nav, [dir="rtl"] .menu-btn { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hdr .brand img { left: auto; right: 0; }
[dir="rtl"] .f-brand .brand { margin-left: 0; margin-right: -6px; }
[dir="rtl"] .hero-anchor { right: auto; left: -15vw; }
[dir="rtl"] .phero-anchor { right: auto; left: -10vw; }
[dir="rtl"] .bridge-anchor { right: auto; left: -14vw; }
[dir="rtl"] .globe-note { right: auto; left: max(var(--gutter), env(safe-area-inset-left, 0px)); text-align: left; }
[dir="rtl"] .proc-key { right: auto; left: 0; }
[dir="rtl"] .proc-progress { left: auto; right: calc(var(--gutter) * -0.55); }
[dir="rtl"] .hp { left: auto !important; right: -9999px !important; }
[dir="rtl"] .s-ghost { right: auto; left: -2vw; }
[dir="rtl"] .service:nth-of-type(even) .s-ghost { left: auto; right: -2vw; }
[dir="rtl"] .svc-body .inner { padding: 0 calc(4.2em + 12px) clamp(26px, 3vw, 40px) 0; }
[dir="rtl"] .fld select { background-position: 12px 55%, 6px 55%; padding-right: 0; padding-left: 28px; }
[dir="rtl"] .split .w { padding-right: 0; margin-right: 0; padding-left: .1em; margin-left: -.1em; }

/* dividers between columns sit on the leading side */
[dir="rtl"] .pillar + .pillar, [dir="rtl"] .sup + .sup, [dir="rtl"] .cap4 > div + div, [dir="rtl"] .s5 + .s5,
[dir="rtl"] .fact:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; border-right: 1px solid var(--stone-line); padding-right: clamp(16px, 2.4vw, 36px); }
[dir="rtl"] .cap4 > div + div, [dir="rtl"] .s5 + .s5 { border-right-color: var(--line); padding-right: clamp(14px, 1.6vw, 26px); }
[dir="rtl"] .rc + .rc { border-left: 0; border-right: 1px solid var(--line); }

/* lines grow from the reading start */
[dir="rtl"] .loader .l-bar i, [dir="rtl"] .fld .bar, [dir="rtl"] .curtain .c-line b, [dir="rtl"] .progress,
[dir="rtl"] .hs-meter i, [dir="rtl"] .js .eyebrow::before { transform-origin: right; }
[dir="rtl"] .flowline i { animation-name: fl-rtl; }
[dir="rtl"] .hs-track { padding-right: 0; padding-left: var(--gutter); }
[dir="rtl"] .hs:not(.is-pinned) .hs-track { padding-left: 0; }
@keyframes fl-rtl { from { left: 100%; } to { left: -30%; } }

/* motion goes toward the reading end */
[dir="rtl"] .svc-item.is-active .name { transform: translateX(-10px); }
[dir="rtl"] .values .v:hover dt { transform: translateX(-12px); }
[dir="rtl"] .btn:hover .arr { transform: rotate(45deg); }
[dir="rtl"] .sx a:hover i, [dir="rtl"] .sx a:focus-visible i { transform: rotate(-45deg); }
[dir="rtl"] .teaser:hover .go svg, [dir="rtl"] .sector-cats a:hover i { transform: translate(-3px, -3px); }
[dir="rtl"] .sx a:hover, [dir="rtl"] .sx a:focus-visible { padding-left: 6px; padding-right: 22px; }
[dir="rtl"] .sector-cats a:hover, [dir="rtl"] .sector-cats a:focus-visible { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .btn::after { background: linear-gradient(-105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); }

@media (max-width: 860px) {
  [dir="rtl"] .hero-anchor { left: auto; }
  [dir="rtl"] .svc-body .inner { padding-right: 0; }
  [dir="rtl"] .pillar + .pillar, [dir="rtl"] .sup + .sup, [dir="rtl"] .cap4 > div + div, [dir="rtl"] .s5 + .s5, [dir="rtl"] .rc + .rc { border-right: 0; padding-right: 0; }
  [dir="rtl"] .fact:not(:nth-child(3n+1)) { border-right: 0; padding-right: 0; }
  [dir="rtl"] .fact:nth-child(even) { padding-left: 0; border-left: 0; padding-right: 16px; border-right: 1px solid var(--stone-line); }
  [dir="rtl"] .phero-anchor { right: auto; left: -30vw; }
}

/* ================= Insights: hub + articles ================= */
.ins-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ins-list li { border-bottom: 1px solid var(--line); }
.ins-card { display: grid; grid-template-columns: minmax(150px, 2fr) 6fr 3fr; gap: 10px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 3.4vw, 46px) 0; text-decoration: none; color: inherit; transition: padding .6s var(--ease); }
.ins-card .mono { color: var(--gold); }
.ins-card h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 1rem + 1.9vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; margin: 0; transition: color .4s; }
.ins-card p { grid-column: 2; margin: 0; color: var(--mute); max-width: 40em; }
.ins-card .go { grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center; display: inline-flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--mute); transition: color .4s; }
.ins-card .go svg { width: 12px; height: 12px; transition: transform .5s var(--ease); }
.ins-card:hover h2, .ins-card:focus-visible h2 { color: var(--gold); }
.ins-card:hover .go, .ins-card:focus-visible .go { color: var(--ivory); }
.ins-card:hover .go svg { transform: translate(3px, -3px); }
.ins-more { margin-top: clamp(28px, 4vw, 48px); color: var(--mute); max-width: 44em; }
@media (max-width: 860px) {
  .ins-card { grid-template-columns: 1fr; }
  .ins-card p, .ins-card .go { grid-column: 1; grid-row: auto; justify-self: start; }
}

.art-hero .eyebrow a { color: inherit; text-decoration: none; }
.art-hero .eyebrow a:hover { color: var(--gold); }
.art-hero h1 { max-width: 20ch; }
.art .legal-toc .toc-h { color: var(--dim); margin: 0 0 12px; }
.art .legal-toc .toc-cta { margin-top: 4px; }
.art-body { font-size: 1.02rem; }
.art .prose p, .art .prose li { line-height: 1.75; }
.art .prose h2 { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.3rem); margin-top: 2.2em; }
.art .prose h2::before { content: ""; display: block; width: 28px; height: 1px; background: var(--gold); margin-bottom: 18px; }
.art .prose h2 { flex-direction: column; align-items: flex-start; gap: 0; }
.art .prose ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 1.4em 0; border-top: 1px solid var(--line); }
.art .prose ol.steps > li { counter-increment: st; position: relative; padding: 18px 0 18px 3.2em; border-bottom: 1px solid var(--line); margin: 0; }
.art .prose ol.steps > li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; }
.art .prose ol.steps ul { margin: .7em 0 0; }
.art .prose ul ul { margin-top: .5em; }
.art-sum { margin: 0 0 2.4em; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--gold-2); border-radius: 4px; background: rgba(185, 141, 71, .05); }
.art-sum .mono { color: var(--gold); margin: 0 0 10px; }
.art-sum p:last-child { color: var(--ivory); font-size: 1.08rem; line-height: 1.7; margin: 0; }
.kf { list-style: none; padding: 0 !important; margin: 1em 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kf li { margin: 0 !important; padding: 20px 22px; background: var(--ink); display: grid; gap: 10px; align-content: start; }
.kf li p { margin: 0; color: var(--ivory); line-height: 1.55; }
.kf-src { font-size: .78rem; color: var(--dim); line-height: 1.5; }
.kf-src a { color: var(--mute) !important; }
.faq--flat { display: block; margin-top: .8em; }
.faq--flat summary { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); color: var(--ivory); padding: 20px 0; }
.faq--flat .ans { padding-right: 0; }
.art .prose .btn { color: var(--fg); text-decoration: none; }
.srcs { padding-left: 1.6em; color: var(--dim); font-size: .88rem; }
.srcs li { line-height: 1.55 !important; }
.srcs li + li { margin-top: .55em; }
.srcs a { color: var(--mute) !important; }
.srcs a:hover { color: var(--ivory) !important; }
.art-note { margin-top: 2.4em !important; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: .86rem; color: var(--dim); }
.art-cta { margin-top: 2.4em; padding: clamp(24px, 3vw, 40px); border-radius: 4px; background: var(--ink-2, #0b2747); box-shadow: inset 0 0 0 1px var(--line-2); }
.art-cta .eyebrow { margin-bottom: 10px; }
.art .prose .art-cta h2 { margin: 0 0 .4em; font-size: var(--t-m); }
.art .prose .art-cta h2::before { display: none; }
.art-cta p { color: var(--mute); margin: 0; }
.art-cta-a { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.art-cta-a .link { color: var(--ivory); }
@media (max-width: 860px) {
  .kf { grid-template-columns: 1fr; }
  .art .legal-toc .toc-cta { display: none; }
  .art .prose ol.steps > li { padding-left: 2.6em; }
}
.legal-grid > * { min-width: 0; }
.legal .prose, .srcs, .kf-src { overflow-wrap: anywhere; }
@media (max-width: 860px) { .legal-grid { grid-template-columns: minmax(0, 1fr); } }

.f-social { display: flex; flex-wrap: wrap; gap: 6px 4px; color: var(--dim); font-size: .92rem; }
.f-social .link { color: var(--mute); }
.f-social .link:hover, .f-social .link:focus-visible { color: var(--gold); }