/* Core Labs: a drafting sheet in two lights, drafting paper (light) and the night lab (dark). */

@font-face { font-family: 'Vazirmatn'; src: url('fonts/vazirmatn-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/vazirmatn-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/vazirmatn-800.woff') format('woff'); font-weight: 800; font-display: swap; }

:root {
  --ground: #f3f5f8;
  --ground-deep: #e8edf3;
  --ground-raised: #ffffff;
  --text: #0b1622;
  --text-dim: #44556a;
  --line: #2f5f8f;
  --rule: rgba(33, 105, 173, 0.24);
  --grid: rgba(33, 105, 173, 0.06);
  --grid-major: rgba(33, 105, 173, 0.13);
  --road: #2169ad;
  --road-hover: #1b5a95;
  --link-line: #2169ad;
  --thumb: #b6c4d3;
  --f-text: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 4.5vw, 56px);
  --page: 1320px;
  --step: clamp(88px, 11vw, 152px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0b1622; --ground-deep: #08111b; --ground-raised: #0f1e2d;
    --text: #e6edf4; --text-dim: #a7b6c6; --line: #86b9ec; --rule: rgba(134, 185, 236, 0.3);
    --grid: rgba(134, 185, 236, 0.05); --grid-major: rgba(134, 185, 236, 0.1);
    --road-hover: #2a77c0; --link-line: #2a77c0; --thumb: #2c4762;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --ground: #0b1622; --ground-deep: #08111b; --ground-raised: #0f1e2d;
  --text: #e6edf4; --text-dim: #a7b6c6; --line: #86b9ec; --rule: rgba(134, 185, 236, 0.3);
  --grid: rgba(134, 185, 236, 0.05); --grid-major: rgba(134, 185, 236, 0.1);
  --road-hover: #2a77c0; --link-line: #2a77c0; --thumb: #2c4762;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px;
  scrollbar-color: var(--thumb) var(--ground-deep); }
/* The sheet: a 32px grid with a heavier line every 128px, registered to the text column's starting edge. */
body {
  margin: 0;
  background-color: var(--ground);
  background-image:
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  background-position:
    max(var(--gutter), calc(50% + 64px - var(--page) / 2 + var(--gutter))) 0, 0 0,
    max(var(--gutter), calc(50% + 16px - var(--page) / 2 + var(--gutter))) 0, 0 0;
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
[dir='rtl'] body {
  background-position:
    right max(var(--gutter), calc(50% + 64px - var(--page) / 2 + var(--gutter))) top 0, 0 0,
    right max(var(--gutter), calc(50% + 16px - var(--page) / 2 + var(--gutter))) top 0, 0 0;
}
body, .bar, .band, .foot { transition: background-color 300ms ease-out, color 300ms ease-out; }
::selection { background: var(--road); color: #fff; }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--line); outline-offset: 4px; border-radius: 2px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.skip { position: absolute; inset-inline-start: var(--gutter); top: -100px; z-index: 20; background: var(--road); color: #fff;
  padding: 10px 16px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

/* Text links carry the road-blue underline: road blue only ever marks something you can press. */
.link {
  color: var(--text); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: 0.28em;
  transition: text-decoration-color 160ms ease-out;
}
.link:hover { text-decoration-color: var(--line); }
.go { display: inline-flex; align-items: center; gap: 10px; }
.go svg, .btn svg { width: 18px; height: 18px; flex: none; }
[dir='rtl'] .go svg { transform: scaleX(-1); }

/* Bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid var(--rule); }
.bar-in { max-width: var(--page); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 26px; }
.brand { font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.015em; text-decoration: none; margin-inline-end: auto; }
.nav { display: flex; gap: 26px; }
.nav a, .lang { text-decoration: none; color: var(--text-dim); font-size: 0.9375rem; transition: color 160ms ease-out; }
.nav a { position: relative; padding-block: 6px; }
.nav a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
[dir='rtl'] .nav a::after { transform-origin: right; }
.nav a:hover, .lang:hover, .nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::after { transform: scaleX(1); }
.lang { color: var(--text); font-weight: 600; }
.theme {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--rule); border-radius: 50%;
  transition: border-color 160ms ease-out, transform 400ms var(--ease-out);
}
.theme:hover { border-color: var(--line); }
.theme:active { transform: rotate(-30deg); }
.theme svg { width: 19px; height: 19px; }
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme .sun { display: block; }
  :root:not([data-theme='light']) .theme .moon { display: none; }
}
:root[data-theme='dark'] .theme .sun { display: block; }
:root[data-theme='dark'] .theme .moon { display: none; }

/* Type */
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-weight: 800; font-size: clamp(3rem, 1rem + 5.6vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
h2 { font-weight: 800; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; }
.lede { margin: clamp(26px, 3vw, 40px) 0 0; max-width: 44ch; font-size: clamp(1.125rem, 0.98rem + 0.55vw, 1.4375rem);
  line-height: 1.6; color: var(--text-dim); }
.lede b { color: var(--text); font-weight: 600; }
.standfirst { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); color: var(--text-dim); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(30px, 3.6vw, 48px); }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--road); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  padding: 15px 22px 15px 26px; border-radius: 2px; transition: background-color 160ms ease-out;
}
[dir='rtl'] .btn { padding: 15px 26px 15px 22px; }
.btn:hover { background: var(--road-hover); }
.btn:hover svg { animation: nudge 700ms var(--ease-out); }
@keyframes nudge { 40% { transform: translateY(4px); } }

/* Hero: the statement beside a construction drawing that draws itself; a drafting crosshair follows the pointer. */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px) clamp(72px, 9vw, 128px); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center; gap: clamp(32px, 5vw, 80px); }
.drawing { width: 100%; max-width: 500px; justify-self: end; height: auto; overflow: visible; color: var(--line); }
/* Strokes scale with the drawing: Chromium measures dashes on non-scaling strokes in screen pixels, which cuts the draw-in short. */
.drawing .d { fill: none; stroke: currentColor; stroke-width: 1.5; }
.drawing .d3 { stroke-width: 2; }
.drawing .d4 { stroke: var(--rule); }
.drawing .axis path { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 14 6 3 6; vector-effect: non-scaling-stroke; }
.drawing .core { fill: currentColor; }
.drawing text { fill: currentColor; font: 600 13px var(--f-text); font-variant-numeric: tabular-nums; text-anchor: middle; }
.drawing .orbit circle { fill: var(--ground); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tilt { transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform 900ms var(--ease-out); }
.bench { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease-out; }
.hero.aim .bench { opacity: 1; }
.bench .cx, .bench .cy { position: absolute; background: var(--rule); }
.bench .cx { top: 0; bottom: 0; left: 0; width: 1px; transform: translateX(var(--x, -10px)); }
.bench .cy { left: 0; right: 0; top: 0; height: 1px; transform: translateY(var(--y, -10px)); }
.bench .readout {
  position: absolute; left: 0; top: 0; transform: translate(calc(var(--x, 0px) + 14px), calc(var(--y, 0px) + 14px));
  font: 600 0.75rem/1 var(--f-text); font-variant-numeric: tabular-nums; white-space: pre; color: var(--line);
  background: var(--ground); padding: 5px 7px; border: 1px solid var(--rule); border-radius: 2px;
}

/* Bands */
.band { padding-block: var(--step); }
.band.deep { background: var(--ground-deep); }
.band.raised { background: var(--ground-raised); }

/* What we make: three disciplines, each a line drawing that draws on arrival and comes alive under the pointer */
.make { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px); }
/* Hairline rules head each item; they draw across as the item arrives. */
.make-item, .principles li { position: relative; padding-top: 28px; }
.make-item::before, .principles li::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--rule);
  transform-origin: left; transition: background-color 300ms ease-out; }
[dir='rtl'] .make-item::before, [dir='rtl'] .principles li::before { transform-origin: right; }
.make-item:hover::before { background: var(--line); }
.make-item svg { width: 100%; max-width: 260px; height: auto; color: var(--line); transition: transform 500ms var(--ease-out); }
.make-item:hover svg { transform: translateY(-4px); }
.make-item .d { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.make-item .via, .make-item .cursor { fill: currentColor; }
.make-item .lid { transition: transform 500ms var(--ease-out); }
.make-item:hover .lid { transform: translateY(-9px); }
.make-item h3 { margin-top: 22px; font-weight: 800; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.make-item p { margin: 8px 0 0; color: var(--text-dim); max-width: 32ch; }
.product { margin: clamp(52px, 6vw, 80px) 0 0; padding-top: 26px; border-top: 1px solid var(--rule); color: var(--text-dim); max-width: 72ch; }
.product b { color: var(--text); font-weight: 600; }
.product .go { margin-inline-start: 10px; }

/* How we work */
.principles { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 52px) clamp(32px, 6vw, 96px); }
.principles h3 { font-weight: 800; font-size: clamp(1.3125rem, 1.1rem + 0.7vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.2; }
.principles p { margin: 10px 0 0; color: var(--text-dim); max-width: 46ch; }

/* Contact: the page's close */
.contact { padding-block: clamp(104px, 13vw, 184px); }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(30px, 3.6vw, 48px); }
.mail {
  font-weight: 800; font-size: clamp(1.5rem, 0.8rem + 2.4vw, 3rem); letter-spacing: -0.025em; line-height: 1.15;
  color: var(--text); text-decoration: underline; text-decoration-color: var(--link-line);
  text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; overflow-wrap: anywhere;
  transition: text-decoration-color 160ms ease-out;
}
.mail:hover { text-decoration-color: var(--line); }
.copy { display: none; }
.js .copy {
  display: inline-flex; align-items: center; font: 600 0.9375rem/1 var(--f-text); padding: 12px 18px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
.copy:hover { border-color: var(--line); }
.copy.done { color: var(--line); border-color: var(--line); }
.contact .standfirst { max-width: 44ch; }

/* Footer */
.foot { background: var(--ground-deep); border-top: 1px solid var(--rule); }
.foot-in { padding-block: 36px 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; color: var(--text-dim); font-size: 0.875rem; }
.foot-in .brand { font-size: 1rem; color: var(--text); margin-inline-end: 0; }
.foot-in .note { flex: 1 1 320px; }
.foot-in a { color: var(--text-dim); }
.foot-in a:hover { color: var(--text); }

/* Motion: one orchestrated arrival, reveals as sections enter, and the drawings' idle life. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-text > * { animation: rise 900ms var(--ease-out) both; }
  .js .hero-text > :nth-child(2) { animation-delay: 120ms; }
  .js .hero-text > :nth-child(3) { animation-delay: 240ms; }
  .js .drawing .d { stroke-dasharray: 1; animation: draw 1500ms cubic-bezier(0.65, 0, 0.35, 1) both; }
  .js .drawing .d1 { animation-delay: 150ms; }
  .js .drawing .d2 { animation-delay: 420ms; }
  .js .drawing .d3 { animation-delay: 700ms; }
  .js .drawing .d4 { animation-delay: 850ms; }
  .js .drawing .d5 { animation-delay: 1100ms; animation-duration: 900ms; }
  .js .drawing .d6 { animation-delay: 1200ms; animation-duration: 900ms; }
  .js .drawing .d7 { animation-delay: 1300ms; animation-duration: 700ms; }
  .js .drawing .axis, .js .drawing text, .js .drawing .core { animation: fade 700ms ease-out both; }
  .js .drawing .axis { animation-delay: 60ms; }
  .js .drawing text, .js .drawing .core { animation-delay: 1600ms; }
  .js .drawing .orbit { transform-origin: 260px 260px; animation: fade 700ms ease-out 1700ms both, spin 48s linear 1700ms infinite; }
  .js .drawing .orbit.slow { animation: fade 700ms ease-out 1800ms both, spin 30s linear 1800ms infinite reverse; }

  .js .reveal::before { transform: scaleX(0); transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1), background-color 300ms ease-out; }
  .js .reveal.in::before { transform: none; }
  .js .make-item:nth-child(2)::before, .js .principles li:nth-child(2)::before { transition-delay: 120ms; }
  .js .make-item:nth-child(3)::before, .js .principles li:nth-child(3)::before { transition-delay: 240ms; }
  .js .principles li:nth-child(4)::before { transition-delay: 360ms; }
  .js .make-item .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms cubic-bezier(0.65, 0, 0.35, 1) 250ms; }
  .js .make-item.in .d { stroke-dashoffset: 0; }
  .js .make-item.in:hover .flow { stroke-dasharray: 0.07 0.05; animation: flow 1.1s linear infinite; }
  .make-item:hover .cursor { animation: blink 1s steps(1) infinite; }
}
/* Touch screens have no hover: each drawing plays its living state once, right after it has drawn. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .js .make-item.in .flow { animation: flow-once 2.4s linear 2s; }
  .js .make-item.in .cursor { animation: blink 1s steps(1) 2s 4; }
  .js .make-item.in .lid { animation: lid 1.4s var(--ease-out) 2s 2; }
}
@keyframes flow-once { 0% { stroke-dasharray: 0.07 0.05; stroke-dashoffset: 0; } 99% { stroke-dasharray: 0.07 0.05; stroke-dashoffset: -0.48; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes lid { 50% { transform: translateY(-9px); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -0.24; } }
@keyframes blink { 50% { opacity: 0; } }

/* Arabic: no negative tracking (it breaks the joins), taller lines for the script */
[lang='ar'] body { line-height: 1.85; }
[lang='ar'] h1 { letter-spacing: 0; line-height: 1.22; max-width: 13ch; }
[lang='ar'] h2, [lang='ar'] h3, [lang='ar'] .brand { letter-spacing: 0; }
[lang='ar'] h2 { line-height: 1.25; }
[lang='ar'] .lede, [lang='ar'] .standfirst { line-height: 1.8; }

@media (max-width: 1023px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .drawing { justify-self: center; max-width: 420px; }
}
@media (max-width: 760px) {
  .make, .principles { grid-template-columns: minmax(0, 1fr); }
  .make-item svg { max-width: 240px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bar-in { gap: 14px; padding-block: 10px; }
  .nav a:not(.nav-keep) { display: none; }
  .theme { width: 36px; height: 36px; }
  .drawing { max-width: 300px; }
  .foot-in { gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}