/* Al Hadhar homepage. Structure, type scale and motion follow leome-and-partners.com;
   colors come from the Al Hadhar logo's beige and taupe, on a light page. */

/* ============ Tokens ============ */
:root {
  --bg: #EEE9E0;            /* page (light beige) */
  --bg-2: #E5DED2;          /* panels, placeholders */
  --ink: #3A332B;           /* text and the accent role (Leome's mint) */
  --ink-rgb: 58, 51, 43;
  --taupe: #857D6F;         /* logo taupe: second hero line, muted text */
  --beige: #A29A8B;         /* logo beige: borders, lines */
  --cream: #F7F4EE;         /* text on dark fills and photos */
  --line: #A29A8B;
  --line-soft: rgba(var(--ink-rgb), .14);
  --tag: rgba(var(--ink-rgb), .08);
  --up: #2E7D4F;
  --up-rgb: 46, 125, 79;
  --down: #B23A2A;
  --down-rgb: 178, 58, 42;

  --gutter: 40px;
  --ticker-bar: 46px;
  --section: 96px;
  --gap: 32px;
  --ease: cubic-bezier(.87, 0, .13, 1);      /* expo.inOut */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* expo.out */
  --ease-p3: cubic-bezier(.645, .045, .355, 1); /* power3.inOut */
  --font: "Noto Kufi Arabic", system-ui, sans-serif;

  --h1: clamp(46px, 6.1vw, 88px);
  --h2: clamp(38px, 4.45vw, 64px);
  --h4: clamp(22px, 1.95vw, 28px);
  --h5: clamp(19px, 1.67vw, 24px);
  --xl: clamp(21px, 1.95vw, 28px);
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
svg { display: block; }
p { margin: 0; font-weight: 400; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--cream); }

.container { padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.h2 { font-size: var(--h2); line-height: 1.05; }
.bolt { display: block; width: 11px; height: 11px; background: currentColor; }

/* Image placeholder: swap the .ph div for <img class="img-cover"> when photos arrive */
.ph {
  position: absolute; inset: 0;
  background: var(--bg-2);
  display: grid; place-items: center; text-align: center;
}
.ph::after {
  content: attr(data-ph);
  max-width: 80%; font-size: 12px; font-weight: 400; color: var(--taupe);
  border: 1px dashed var(--beige); padding: 6px 10px;
}
.img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* line-by-line heading reveal (SplitText-style) */
.split .line, .split-lines .line { display: block; overflow: hidden; padding-block: .12em .3em; margin-block: -.12em -.3em; }
.split .line > span, .split-lines .line > span { display: block; transform: translate3d(0, 150%, 0); transition: transform 1.2s var(--ease); }
.in .line > span { transform: none; }

/* text link with underline that redraws on hover */
.link {
  position: relative; font-size: var(--h5); font-weight: 400; line-height: 1.1;
  white-space: nowrap; padding-bottom: 6px;
}
.link::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: currentColor;
  transform-origin: left; transition: transform .6s var(--ease);
}
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link--light { color: var(--cream); }
.link--light::after { background: rgba(255, 255, 255, .3); }
.link--quiet::after { transform: scaleX(0); transform-origin: right; }
.link--quiet:hover::after { transform: scaleX(1); transform-origin: left; }

/* buttons whose label rolls up on hover (btn-animate-chars) */
.roll { display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2; }
.roll > span { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.roll > span + span { transform: translateY(110%); }
:is(a, button):hover > .roll > span:first-child { transform: translateY(-110%); }
:is(a, button):hover > .roll > span + span { transform: none; }

.tag {
  display: inline-block; font-size: 12px; line-height: 1; font-weight: 500;
  padding: 6px 9px; background: var(--tag); color: var(--ink);
}

/* ============ Preloader ============ */
/* One CSS timeline (reference t-2e2b6599): bolts 0.2s for 1.3s, mark 1.1s for 1.3s, slide-up 2.4s for 1.1s.
   It starts as soon as the stylesheet applies, so it never waits on scripts, the CDN or fonts.
   The ease is GSAP's real expo.inOut (holds at both ends, snaps through the middle), sampled into linear()
   to within 0.2%; browsers without linear() keep the cubic-bezier approximation in --ease. */
.preloader { --ease-loader: var(--ease); }
@supports (animation-timing-function: linear(0, 1)) {
  .preloader { --ease-loader: linear(0, 0.0075 19.7%, 0.0223 27.55%, 0.0448 32.6%, 0.0754 36.35%, 0.1134 39.3%, 0.1593 41.75%, 0.2132 43.85%, 0.2755 45.7%, 0.3439 47.3%, 0.4204 48.75%, 0.5069 50.1%, 0.591 51.45%, 0.6678 52.95%, 0.7357 54.6%, 0.7955 56.45%, 0.8482 58.6%, 0.8934 61.15%, 0.9307 64.25%, 0.9599 68.2%, 0.9812 73.65%, 0.9944 82.45%, 1); }
}
.preloader {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-items: center;
  animation: preloader-out 1.1s var(--ease-loader) 2.4s both;
}
.preloader-box { position: relative; width: 288px; height: 288px; display: grid; place-items: center; color: var(--ink); }
/* the four squares start together as one block in the centre, then spread out to the box corners */
.preloader .bolt { position: absolute; animation: bolt-out 1.3s var(--ease-loader) .2s both; }
.preloader .b1 { left: 0;  top: 0;    --sx: 133px;  --sy: 133px; }
.preloader .b2 { right: 0; top: 0;    --sx: -133px; --sy: 133px; }
.preloader .b3 { left: 0;  bottom: 0; --sx: 133px;  --sy: -133px; }
.preloader .b4 { right: 0; bottom: 0; --sx: -133px; --sy: -133px; }
.preloader-mask { position: relative; z-index: 1; overflow: hidden; padding: 4px; }
.preloader-mark { display: block; width: 144px; height: auto; animation: mark-in 1.3s var(--ease-loader) 1.1s both; }
@keyframes bolt-out { from { transform: translate3d(var(--sx), var(--sy), 0); } to { transform: none; } }
@keyframes mark-in { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes preloader-out { to { transform: translate3d(0, -100%, 0); } }
@keyframes rise-in { from { transform: translate3d(0, 150%, 0); } to { transform: none; } }

/* ============ Cursor bubble ============ */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; transform: translate(-100px, -100px); }
.cursor-bubble {
  display: grid; place-items: center; height: 44px; padding: 0 12px;
  background: var(--ink); color: var(--cream); font-size: 15px; white-space: nowrap;
  transform: translate(12px, 12px) scale(0); transform-origin: top left;
  transition: transform .4s var(--ease-out);
}
.cursor.active .cursor-bubble { transform: translate(12px, 12px) scale(1); }
.cursor.active-edge .cursor-bubble { transform: translate(calc(-100% - 12px), 12px) scale(1); transform-origin: top right; }

/* ============ Header & menu ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px var(--gutter);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header { transition: transform .6s var(--ease-out); }
body.ticker-stuck .site-header { transform: translate3d(0, var(--ticker-h, 0px), 0); }
body.menu-open .site-header { transform: none; }
.brand { display: grid; }
.brand-logo { grid-area: 1 / 1; display: block; height: 42px; width: auto; transition: opacity .4s; }
.brand-logo--light { opacity: 0; }
/* over the full-screen photo sections the header turns light */
.site-header.on-dark .brand-logo { opacity: 0; }
.site-header.on-dark .brand-logo--light { opacity: 1; }
.site-header .btn { transition: background .4s, color .4s, box-shadow .4s; }
.site-header.on-dark .btn--solid { background: var(--cream); color: var(--ink); }
.site-header.on-dark .btn--line { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); }
.header-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 34px;
  padding: 0 10px 0 14px; border: 0; cursor: pointer; font-size: 14px; font-weight: 500;
}
.btn--solid { background: var(--ink); color: var(--cream); }
.btn--line { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); padding-inline: 14px; }
.burger { display: grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
body.menu-open .burger i:first-child { transform: translateY(2.75px) rotate(45deg); }
body.menu-open .burger i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  padding: 150px var(--gutter) 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu-nav { display: grid; justify-items: start; }
.menu-nav a {
  font-size: clamp(36px, 4.45vw, 64px); line-height: 1.25; font-weight: 400; color: var(--ink);
  transform: translateY(40px); opacity: 0;
  transition: transform .8s var(--ease-out), opacity .8s, color .3s;
}
body.menu-open .menu-nav a { transform: none; opacity: 1; }
body.menu-open .menu-nav a:nth-child(2) { transition-delay: .05s; }
body.menu-open .menu-nav a:nth-child(3) { transition-delay: .1s; }
body.menu-open .menu-nav a:nth-child(4) { transition-delay: .15s; }
body.menu-open .menu-nav a:nth-child(5) { transition-delay: .2s; }
body.menu-open .menu-nav a:nth-child(6) { transition-delay: .25s; }
body.menu-open .menu-nav a:nth-child(7) { transition-delay: .3s; }
.menu-nav a:hover, .menu-nav a.current { color: var(--taupe); }
.menu-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 18px; font-weight: 400; }

/* ============ Hero (pinned) ============ */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 620px;
  padding: 112px 0 calc(24px + var(--ticker-bar)); /* room for the ticker on its bottom edge */
  display: flex; flex-direction: column;
}
.hero-layout { flex: 1; display: grid; justify-items: center; align-content: center; text-align: center; }
/* words are spread across the row, then the row narrows to fit as the image opens */
.hero-heading-wrap {
  display: flex; justify-content: space-between; gap: .28em; margin: 0 auto;
  font-size: var(--h1); line-height: 1.2; font-weight: 500; color: var(--taupe); white-space: nowrap;
  transition: width 1.3s var(--ease);
}
.hero-heading-wrap--second { color: var(--ink); }
.word { display: inline-block; overflow: hidden; padding-block: .1em .28em; margin-block: -.1em -.28em; vertical-align: top; }
.word > span { display: inline-block; transform: translate3d(0, 150%, 0); transition: transform 1.2s var(--ease); }
/* intro: words rise at 3.05s, stagger .8s total (per-word --d set in the markup) */
.hero-heading-wrap .word > span { animation: rise-in 1.2s var(--ease) calc(3.05s + var(--d, 0s)) both; }
/* the coin floats on the page itself (no frame); it appears at 5.16s, where the reference opens its image */
.hero-img {
  /* frame is just taller than the coin, so the headline sits right against it */
  /* as large as the screen allows: wide screens are capped by the height left over after the headline */
  position: relative; aspect-ratio: 16 / 9;
  width: min(clamp(340px, 48vw, 820px), calc((100svh - 400px) * 16 / 9));
  animation: coin-in 1.2s var(--ease-p3) 5.16s both;
}
.hero-img-inner { position: absolute; inset: 0; will-change: transform; }
@keyframes coin-in {
  from { opacity: 0; transform: translate3d(0, 16%, 0) scale(.55); }
  to   { opacity: 1; transform: none; }
}
/* ---- Gold coin: CSS 3D, stacked rim layers for thickness, column in relief via an SVG lighting filter ---- */
.coin-stage {
  --d: 51%;                       /* coin diameter, relative to the hero image width */
  position: absolute; left: 50%; top: 46%; width: var(--d); aspect-ratio: 1;
  transform: translate(-50%, -50%); perspective: 1100px;
}
/* WebGL coin (coin3d.js) replaces the CSS coin once it has loaded */
.coin-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.has-3d .coin-tilt { display: none; }
.has-3d .coin-stage { top: 50%; }
.has-3d .coin-shadow { animation: none; }
/* soft contact shadow on the page */
.coin-shadow {
  position: absolute; left: 12%; right: 12%; bottom: -7%; height: 10%;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), .32), rgba(var(--ink-rgb), .1) 60%, transparent);
  filter: blur(6px); animation: coin-shadow 6.4s ease-in-out infinite;
}
.coin-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.coin { position: absolute; inset: 0; transform-style: preserve-3d; animation: coin-spin 6.4s cubic-bezier(.45, 0, .2, 1) infinite; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden; }
.coin-front { transform: translateZ(1px); }
.coin-back { transform: translateZ(-23px) rotateY(180deg); }
/* rounded rim: bands of reflected light, rolled off top-left (light) and bottom-right (shade) */
.coin-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 215deg,
    #F6D8B8, #E0A06A 9%, #9A5A2A 22%, #C98448 34%, #F2CFA8 46%,
    #C27A3E 58%, #7E4620 72%, #D08E52 86%, #F6D8B8);
  box-shadow:
    inset 0 6px 10px rgba(255, 250, 225, .65),
    inset 0 -8px 14px rgba(90, 48, 20, .55),
    inset 0 0 0 1px rgba(255, 246, 214, .7);
}
/* polished field, sunk slightly below the rim, with fine turning marks */
.coin-field {
  position: absolute; inset: 9%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 34% 26%, #FAE0C6 0%, #E8B07A 18%, #CF8A4E 45%, #B06A35 76%, #8A4E24 100%);
  box-shadow:
    inset 4px 5px 8px rgba(90, 48, 20, .5),
    inset -3px -4px 8px rgba(255, 246, 210, .8),
    0 0 0 1.5px rgba(120, 66, 30, .5);
}
.coin-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* studio reflections: a soft key highlight and a warm bounce light */
.coin-gloss {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 33% 20%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 40% 26% at 74% 86%, rgba(255, 214, 170, .45), transparent 70%);
  mix-blend-mode: screen;
}
.coin-shine {
  position: absolute; inset: -25%;
  background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .65) 49%, rgba(255, 255, 255, .15) 53%, transparent 60%);
  mix-blend-mode: overlay; transform: translateX(-65%);
  animation: coin-shine 6.4s ease-in-out infinite;
}
.coin-edge i {
  position: absolute; inset: .4%; border-radius: 50%;
  transform: translateZ(calc(var(--i) * -1px));
  background: linear-gradient(90deg, #5E3418, #9A5A2A 20%, #E6AE78 46%, #C27A3E 60%, #7E4620 84%, #4E2A12);
}
/* idle sway, then one quick flip, back to sway (loops) */
@keyframes coin-spin {
  0%   { transform: translateY(0) rotateY(-22deg) rotateX(6deg); }
  30%  { transform: translateY(-5%) rotateY(18deg) rotateX(-4deg); }
  48%  { transform: translateY(-2%) rotateY(-12deg) rotateX(4deg); }
  62%  { transform: translateY(-7%) rotateY(338deg) rotateX(0deg); }
  80%  { transform: translateY(-3%) rotateY(352deg) rotateX(5deg); }
  100% { transform: translateY(0) rotateY(338deg) rotateX(6deg); }
}
@keyframes coin-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  62% { transform: scale(.82); opacity: .7; }
}
@keyframes coin-shine {
  0%, 42% { transform: translateX(-65%); }
  66%, 100% { transform: translateX(65%); }
}
.hero-links {
  display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  font-size: 13.6px; color: var(--ink);
}
.hero-links a { transition: color .3s; }
.hero-links a:hover { color: var(--taupe); }
.mask { display: inline-block; overflow: hidden; padding-bottom: .25em; margin-bottom: -.25em; vertical-align: top; }
.mask > span { display: inline-block; }
/* bottom links rise last: 5.85s, stagger .35s total */
.hero-links .mask > span { animation: rise-in .6s var(--ease) calc(5.85s + var(--d, 0s)) both; }

/* ============ Full-screen photo sections ============ */
.parallax {
  position: relative; z-index: 1; overflow: hidden;
  min-height: max(100vh, 760px);
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--cream);
}
.parallax-bg { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.parallax-overlay { position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, rgba(var(--ink-rgb), .7)); }
.parallax-top { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-top: 72px; color: var(--cream); }
.parallax-bottom { position: relative; z-index: 1; padding-bottom: 72px; }
.intro-text { max-width: 785px; font-size: var(--xl); line-height: 1.4; color: var(--cream); }
/* image placeholder: plain black until the real photo goes in (swap for <img class="img-cover">) */
.ph-black { position: absolute; inset: 0; background: #0B0A09; }
/* real photos: shade the whole picture a little so the light text on top stays readable */
.parallax-bg .img-cover { filter: saturate(.85); }
.parallax-bg .img-cover ~ .parallax-overlay {
  inset: 0;
  background: linear-gradient(rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), .3) 35%, rgba(var(--ink-rgb), .35) 60%, rgba(var(--ink-rgb), .8));
}

.after-hero { position: relative; z-index: 1; background: var(--bg); }

/* ============ Ticker ============ */
/* stays at the top of the screen once scrolled to; the header then moves down below it */
.ticker {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: var(--ticker-bar);
  background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: 13.6px; overflow: hidden;
}
/* homepage: pulled up onto the bottom of the hero, shown with the hero links at the end of the intro */
.ticker--hero {
  margin-top: calc(-1 * var(--ticker-bar));
  border-top: 1px solid var(--line);
  animation: ticker-in .8s ease 5.85s both;
}
@keyframes ticker-in { from { opacity: 0; } }
.ticker-label {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--ink); color: var(--cream);
  letter-spacing: .04em; direction: ltr;
}
.ticker-label i { width: 6px; height: 6px; background: var(--cream); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .15; } }
.ticker-viewport { flex: 1; overflow: hidden; direction: ltr; }
.ticker-track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.tick { display: flex; gap: 8px; align-items: baseline; padding: 12px 20px; border-left: 1px solid var(--line-soft); white-space: nowrap; font-weight: 400; }
.tick b { font-weight: 500; }
.tick .up { color: var(--up); } .tick .down { color: var(--down); } .tick .flat { opacity: .5; }

/* ============ Shared section head ============ */
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
.section-head .meta { font-size: 13.6px; color: var(--taupe); margin-top: 20px; }

/* ============ Market summary ============ */
.panel { border: 1px solid var(--line); padding: 24px; }
.panel-title { font-size: var(--h5); line-height: 1.2; margin-bottom: 18px; }
.panel-title--sub { margin-top: 32px; }
.sym-icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); font-size: 14px; direction: ltr;
}
.sym-icon--sm { width: 36px; height: 36px; font-size: 12px; }
.sym-icon.i-stock { background: var(--tag); color: var(--ink); }

.summary-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; }
.summary-name { display: flex; align-items: center; gap: 10px; font-size: var(--h4); line-height: 1.15; }
.summary-price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; direction: ltr; justify-content: flex-end; }
.summary-price .price { font-size: clamp(38px, 3.9vw, 56px); line-height: 1; font-weight: 500; }
.summary-price .unit { font-size: 12px; color: var(--taupe); }
.summary-price .pct { font-size: 18px; }
.pct.up { color: var(--up); } .pct.down { color: var(--down); } .pct.flat { color: var(--taupe); }

.tf-tabs { display: flex; gap: 6px; }
.tf-tabs button {
  border: 0; cursor: pointer; font-size: 13px; padding: 7px 11px;
  background: var(--tag); color: var(--ink); transition: background .3s, color .3s;
}
.tf-tabs button:hover { background: rgba(var(--ink-rgb), .16); }
.tf-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); }

.chart { position: relative; height: 380px; margin-top: 24px; user-select: none; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .axis { font: 400 11px var(--font); fill: var(--taupe); }
.chart .grid { stroke: var(--line-soft); }
.chart .cross { stroke: var(--ink); stroke-dasharray: 2 4; }
.chart-tip {
  position: absolute; top: 0; pointer-events: none; transform: translateX(-50%);
  background: var(--ink); color: var(--cream); font-size: 12px; padding: 5px 9px; white-space: nowrap;
}
.chart-note { position: absolute; left: 0; top: -2px; font-size: 11px; font-weight: 400; color: var(--taupe); }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.sym-list { list-style: none; margin: 0; padding: 0; }
.sym-list li { position: relative; z-index: 0; }
.sym-list li + li { border-top: 1px solid var(--line-soft); }
.sym-row {
  position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: start;
}
.sym-row::before {
  content: ""; position: absolute; inset: 0 -12px; background: var(--tag); z-index: -1;
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
}
.sym-row:hover::before, .sym-row[aria-pressed="true"]::before { transform: none; }
.sym-row .nm { display: block; font-size: 15px; line-height: 1.3; }
.sym-row .sub { display: block; font-size: 12px; color: var(--taupe); direction: ltr; text-align: end; }
.sym-row .val { text-align: end; direction: ltr; font-size: 15px; }
.sym-row .val b { display: block; font-weight: 500; }
.sym-row .val small { font-size: 10px; color: var(--taupe); margin-inline-start: 3px; }

.breadth-bar { display: flex; height: 8px; gap: 2px; margin-bottom: 14px; }
.breadth-bar i { display: block; height: 100%; }
.breadth-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 400; }
.breadth-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; background: var(--c); }
.breadth-total { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; font-weight: 400; }
.breadth-total b { font-weight: 500; direction: ltr; }
.sector-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sector-bars li { display: grid; grid-template-columns: 104px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; }
.sector-bars .track { height: 6px; background: var(--line-soft); }
.sector-bars .fill { display: block; height: 100%; background: var(--ink); transform-origin: right; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.in-view .sector-bars .fill { transform: scaleX(1); }
.sector-bars .v { direction: ltr; text-align: end; color: var(--taupe); }

/* ============ Price bulletin ============ */
.bulletin { padding-top: 0; }
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.mover-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mover-list li { background: var(--tag); padding: 12px 10px; direction: ltr; text-align: center; font-size: 13px; font-weight: 400; }
.mover-list b { display: block; font-weight: 500; }
.mover-list .px { display: block; font-size: 17px; margin: 4px 0 2px; font-weight: 500; }

.filters { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 48px 0 20px; }
.filters-end { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; gap: 8px; align-items: center;
  border: 0; cursor: pointer; padding: 8px 11px; font-size: 13px;
  background: var(--tag); color: var(--ink); transition: background .3s, color .3s;
}
.pill:hover { background: rgba(var(--ink-rgb), .16); }
.pill em { font-style: normal; font-size: 11px; opacity: .65; }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.search input {
  width: 240px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0; font-size: 15px; font-weight: 400; color: var(--ink);
}
.search input::placeholder { color: var(--taupe); }
.search input:focus { outline: none; border-bottom-color: var(--ink); }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.quotes { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1120px; }
.quotes th {
  padding: 16px 10px; text-align: center; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--taupe); border-bottom: 1px solid var(--line);
}
.quotes th[data-sort] { cursor: pointer; }
.quotes th[data-sort]:hover, .quotes th[aria-sort] { color: var(--ink); }
.quotes th[data-sort]::after { content: "↕"; margin-inline-start: 4px; opacity: .5; }
.quotes th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.quotes th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.quotes td { padding: 15px 10px; text-align: center; border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-weight: 400; }
.quotes tbody tr { transition: background .3s; }
.quotes tbody tr:hover { background: rgba(var(--ink-rgb), .04); }
.quotes .n { color: var(--taupe); }
.quotes .sym { font-weight: 500; font-size: 15px; }
.quotes .co { text-align: end; max-width: 250px; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.quotes .ref { color: var(--taupe); }
.quotes .hi { color: var(--up); }
.quotes .lo { color: var(--down); }
.quotes .last { font-weight: 500; }
.quotes .num { direction: ltr; }
.quotes .tag { white-space: nowrap; }
.market-tag { display: inline-block; font-size: 11px; padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--line); direction: ltr; }
.market-tag.none { color: var(--beige); box-shadow: none; }
.chg { display: inline-block; padding: 5px 8px; font-size: 13px; direction: ltr; }
.chg.up { background: rgba(var(--up-rgb), .12); color: var(--up); }
.chg.down { background: rgba(var(--down-rgb), .12); color: var(--down); }
.chg.flat { background: var(--tag); color: var(--taupe); }
.empty td { padding: 48px; color: var(--taupe); }
.table-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; font-weight: 400; }
.table-foot .note { color: var(--taupe); }

/* ============ Services (expertise) ============ */
/* plain grid: the stagger comes from the scroll parallax, as on the reference */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.svc-heading { grid-column: 1; grid-row: 1; }
.svc-link { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
.svc {
  position: relative; aspect-ratio: 1; border: 1px solid var(--line); padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  will-change: transform;
}
/* hover plays at 1x; leaving reverses at 1.5x (reference timeline timeScale) */
.svc-overlay {
  position: absolute; inset: -1px; background: var(--ink);
  transform: scale(0); transform-origin: top left; transition: transform .47s var(--ease);
}
.svc:hover .svc-overlay { transition-duration: .7s; }
.svc-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; }
.svc-arrow {
  width: 48px; height: 48px; padding: 10px; background: var(--ink); color: var(--cream);
  transition: transform .47s var(--ease), background .35s;
}
.svc:hover .svc-arrow { transition: transform .7s var(--ease) .2s, background .5s; }
.svc-arrow svg { width: 100%; height: 100%; }
.svc ul {
  position: absolute; top: 24px; right: 24px; left: 96px;
  list-style: none; margin: 0; padding: 0; color: var(--cream);
  font-size: clamp(14px, 1.2vw, 17px); font-weight: 400; line-height: 1.95;
}
.svc li { transform: translateY(1em); opacity: 0; transition: transform .33s var(--ease), opacity .33s var(--ease); }
.svc h3 { position: relative; font-size: var(--h4); line-height: 1.15; transition: color .33s var(--ease); }
.svc:hover h3 { transition: color .5s var(--ease) .1s; }
.svc:hover li { transition-duration: .5s; }
.svc h3 small { font-size: .55em; opacity: .7; }
.svc:hover .svc-overlay, .svc:focus-visible .svc-overlay { transform: scale(1); }
.svc:hover h3, .svc:focus-visible h3 { color: var(--cream); }
.svc:hover .svc-arrow, .svc:focus-visible .svc-arrow { transform: rotate(180deg); background: transparent; }
.svc:hover li, .svc:focus-visible li { transform: none; opacity: 1; }
.svc:hover li:nth-child(1) { transition-delay: .3s; }
.svc:hover li:nth-child(2) { transition-delay: .36s; }
.svc:hover li:nth-child(3) { transition-delay: .42s; }
.svc:hover li:nth-child(4) { transition-delay: .48s; }
.svc:hover li:nth-child(5) { transition-delay: .54s; }
/* staggered like the reference: 01 middle, 02 start, 03 end (lower), 04 middle */
.svc--1 { grid-column: 2; grid-row: 1; }
.svc--2 { grid-column: 1; grid-row: 2; }
.svc--3 { grid-column: 3; grid-row: 2; }
.svc--4 { grid-column: 2; grid-row: 3; }

/* ============ Team ============ */
.parallax--team { min-height: max(107vh, 800px); }
.team-stat { position: absolute; z-index: 1; top: 40%; left: var(--gutter); display: grid; max-width: 200px; font-size: 14px; font-weight: 400; color: var(--cream); }
.team-stat b { font-size: clamp(56px, 6.1vw, 88px); line-height: 1; font-weight: 500; }
.team-caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* ============ News (insights) ============ */
.news-heading { padding-bottom: 48px; }
.news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap); }
.post { display: block; }
.post-img { position: relative; aspect-ratio: 664 / 400; overflow: hidden; margin-bottom: 24px; }
.post:not(:first-child) .post-img { aspect-ratio: 316 / 300; }
.post-img > * { transition: transform 1s var(--ease-out); }
.post:hover .post-img > * { transform: scale(1.05); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--taupe); }
.post h3 { font-size: var(--h5); line-height: 1.25; margin-bottom: 12px; text-wrap: balance; }
.post p { font-size: 16px; line-height: 1.5; max-width: 52ch; color: var(--taupe); }

/* ============ Footer ============ */
.footer { position: relative; padding: 28px; overflow: hidden; }
.footer-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 100% 100%, #857D6F, transparent 60%),
    radial-gradient(60% 100% at 0% 0%, #CFC6B6, transparent 60%),
    linear-gradient(135deg, #D8D0C2, #A29A8B 55%, #857D6F);
}
.footer-layout { position: relative; background: var(--bg); padding: 96px 0 28px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap); }
.footer-mark { display: block; width: clamp(110px, 12vw, 170px); height: auto; }
.footer-nav { display: grid; align-content: start; justify-items: start; gap: 10px; }
.footer-info { font-size: 15px; font-weight: 400; }
.footer-info p { margin-bottom: 10px; }
.footer-info .label { font-weight: 500; margin-top: 6px; }
.wordmark {
  margin: clamp(56px, 8vw, 120px) 0 clamp(20px, 3vw, 40px);
  font-size: clamp(44px, 15.5vw, 250px); line-height: 1; font-weight: 500; white-space: nowrap;
}
.wordmark .word > span { transition-duration: 1.7s; }
.footer.in .wordmark .word > span { transform: none; }
.footer-bottom { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--gap); font-size: 14px; font-weight: 400; }
.footer-bottom a:hover { color: var(--taupe); }

/* ============ Inner pages ============ */
/* reference inner pages: no loader; one large statement revealed line by line, a single bolt */
.page-hero {
  position: relative; min-height: max(78vh, 580px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 180px; padding-bottom: 48px;
}
.page-hero-bolt { position: absolute; top: 140px; left: var(--gutter); color: var(--ink); }
.page-hero-kicker { font-size: 14px; color: var(--taupe); margin-bottom: 20px; }
.page-hero-title { max-width: 1040px; font-size: clamp(30px, 3.35vw, 48px); line-height: 1.2; font-weight: 500; }
.page-hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line);
}
.index-strip { display: flex; gap: 48px; flex-wrap: wrap; }
.index-item { display: grid; gap: 4px; }
.index-name { font-size: 13px; color: var(--taupe); }
.index-val { font-size: clamp(22px, 1.95vw, 28px); font-weight: 500; }
.index-val .pct { font-size: 15px; font-weight: 400; }
.as-of-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--taupe); }
.live-dot { width: 6px; height: 6px; background: var(--up); animation: pulse 1.6s infinite; }

/* rows with a title column and a description column (reference: service items) */
.row-item {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
  padding: 24px 0 64px; border-top: 1px solid var(--line);
}
.row-title { font-size: var(--h4); line-height: 1.15; }
.row-title small { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; color: var(--taupe); }
.row-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin: 0; }
.row-stats dt, .detail-stats dt { font-size: 13px; color: var(--taupe); }
.row-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 500; }
.row-stats dd .pct { font-size: 14px; font-weight: 400; }
.row-symbols { margin-top: 22px; font-size: 13px; color: var(--taupe); text-align: end; }

/* stock detail panel inside the price table */
.quotes .row-toggle { cursor: pointer; }
.quotes .row-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.quotes .row-toggle.is-open td { background: rgba(var(--ink-rgb), .06); border-bottom-color: transparent; }
.quotes .detail-row td { padding: 0; text-align: start; white-space: normal; background: rgba(var(--ink-rgb), .03); border-bottom: 1px solid var(--line); }
/* pinned to the visible part of the (horizontally scrollable) table */
.detail-grid {
  position: sticky; right: 0; width: var(--wrap-w, 100%);
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px 48px; padding: 28px 24px 32px;
}
.detail-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.detail-sym { font-size: 28px; font-weight: 500; }
.detail-name { color: var(--taupe); }
.detail-label { font-size: 13px; color: var(--taupe); margin-bottom: 14px; }
.detail-label small { font-size: 11px; }
.detail-muted { font-size: 14px; color: var(--taupe); }
.range { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.range-track { position: relative; flex: 1; height: 4px; background: var(--line-soft); }
.range-track i { position: absolute; top: 50%; width: 10px; height: 10px; background: var(--ink); transform: translate(-50%, -50%); }
.detail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.detail-stats dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
.spark { display: block; width: 100%; height: 90px; }
.spark-line { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-fill { fill: rgba(var(--ink-rgb), .08); }
.detail-cta { grid-column: 1 / -1; justify-self: start; font-size: 16px; }

/* services page rows */
.services-list { padding-top: 24px; }
.service-row { scroll-margin-top: 100px; }
.service-row .row-title small { display: inline; margin: 0; font-size: .5em; }
.row-text { max-width: 48ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }
.row-tags { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.row-tags li { font-size: 12px; padding: 6px 9px; background: var(--tag); }

/* photo section with a heading in its middle */
.parallax-middle { position: relative; z-index: 1; }
.parallax-middle-title { max-width: 50%; font-size: var(--h4); line-height: 1.2; color: var(--cream); }
.h3-light { max-width: 80%; font-size: clamp(30px, 3.35vw, 48px); line-height: 1.15; color: var(--cream); }

/* centred slider (reference: Osmo centred slider; ease .625,.05,0,1 over .725s) */
.slider-section { overflow: hidden; }
.cslider { --sw: clamp(250px, 24vw, 350px); position: relative; }
.cslider-track { position: relative; height: calc(var(--sw) * 0.86 + 24px); touch-action: pan-y; cursor: grab; user-select: none; }
.cslider-track:active { cursor: grabbing; }
.cslide {
  position: absolute; top: 12px; left: 50%; width: var(--sw); margin-left: calc(var(--sw) / -2);
  transition: transform .725s cubic-bezier(.625, .05, 0, 1);
}
.cslide-inner {
  height: calc(var(--sw) * 0.82); padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(var(--ink-rgb), .05); border: 1px solid rgba(var(--ink-rgb), .1);
  transition: transform .725s cubic-bezier(.625, .05, 0, 1), background .4s;
  transform: scale(.96);
}
.cslide.active .cslide-inner { transform: none; background: rgba(var(--ink-rgb), .09); }
.cslide-n { font-size: 12px; color: var(--taupe); }
.cslide h3 { font-size: var(--h5); line-height: 1.25; margin-bottom: 10px; }
.cslide p { font-size: 15px; color: var(--taupe); }
.cslider-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 36px; }
.cslider-btn {
  width: 48px; height: 48px; padding: 12px; cursor: pointer;
  background: rgba(var(--ink-rgb), .06); border: 1px solid rgba(var(--ink-rgb), .1); color: var(--ink);
  transition: background .3s;
}
.cslider-btn:hover { background: rgba(var(--ink-rgb), .14); }
.cslider-btn svg { width: 100%; height: 100%; }
.cslider-next svg { transform: scaleX(-1); }   /* RTL: next is to the left */

/* ---- About page ---- */
/* hero: two big words, spread across the row then closing in (reference t-765be9ff) */
.about-hero { min-height: max(70vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 220px; padding-bottom: 48px; }
.about-hero-center { flex: 1; display: grid; place-items: center; }
.about-hero-words { color: var(--ink); }
.about-hero-words .word:first-child { color: var(--taupe); }
.about-hero .word > span { animation: none; }
.about-ready .about-hero .word > span { animation: rise-in 1.2s var(--ease) calc(.15s + var(--d, 0s)) both; }
.about-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 120px; }
.about-hero-label { font-size: 16px; }

/* team: portraits with name, role and a bolt (reference: team grid + a "join us" card) */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.team-photo { position: relative; aspect-ratio: 421 / 562; overflow: hidden; }
.team-card-foot { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 24px; }
.team-name { font-size: 16px; font-weight: 500; }
.team-role { font-size: 14px; color: var(--taupe); }
.team-cta { grid-column: span 2; display: flex; flex-direction: column; }
.team-cta-inner {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-content: start;
  padding: 32px 24px; background: var(--ink); color: var(--cream);
}
.team-cta h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.team-cta-body { display: grid; gap: 24px; justify-items: start; align-content: start; }
.team-cta-body p { color: rgba(247, 244, 238, .8); }
.btn--cream { background: var(--cream); color: var(--ink); padding-inline: 14px; }
.reveal-up { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal-up.in { opacity: 1; transform: none; }

/* story + rolling numbers (reference: odometer counters) */
.about-story-text { max-width: 860px; font-size: var(--xl); line-height: 1.4; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 96px; }
.stat { border-top: 1px solid var(--line); padding-top: 20px; }
.stat-num { font-size: clamp(56px, 6.1vw, 88px); line-height: 1; font-weight: 500; }
.stat-label { margin-top: 14px; color: var(--taupe); max-width: 24ch; }
.odo { display: inline-flex; height: 1.1em; overflow: hidden; vertical-align: top; }
.odo-col { display: block; height: 1.1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transform: translate3d(0, 0, 0); transition: transform 2.2s var(--ease); }
.odo-strip span, .odo-sym { display: block; height: 1.1em; line-height: 1.1; }

/* ---- Contact page ---- */
.about-hero--short { min-height: auto; padding-top: 220px; padding-bottom: 80px; }
.about-hero--short .about-hero-center { min-height: 120px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.contact-info { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.contact-links { display: grid; gap: 18px; justify-items: start; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; font-size: var(--h5); }
.contact-link .link { font-size: inherit; }
.contact-note { max-width: 40ch; color: var(--taupe); }
/* opening hours with a live status (reference: Osmo opening hours) */
.hours-top { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 16px; }
.hours-title { font-size: 20px; }
.hours-status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: var(--ink); color: var(--cream); font-size: 14px; }
.hours-status i { width: 10px; height: 10px; border-radius: 50%; background: #D08A2E; }
.hours-status.is-open i { background: var(--up); box-shadow: 0 0 0 3px rgba(var(--up-rgb), .3); }
.hours-table { list-style: none; margin: 0; padding: 0; }
.hours-table li { display: flex; justify-content: space-between; padding: 16px 12px; border-top: 1px solid var(--line-soft); }
.hours-table li.is-today { background: var(--tag); font-weight: 500; }
/* inset photo inside the page margins */
.parallax--inset { min-height: 0; aspect-ratio: 1360 / 907; }
/* FAQ accordion (reference: accordion-css, .6s on ease .625,.05,0,1) */
.faq-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.faq-title { font-size: var(--h4); line-height: 1.15; }
.accordion { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.acc-item { border-top: 1px solid var(--line); transition: background .3s; }
.acc-item:hover, .acc-item.is-open { background: rgba(var(--ink-rgb), .04); }
.acc-top {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 16px 24px 16px 16px; background: none; border: 0; cursor: pointer; text-align: start;
  font-size: 18px; font-weight: 500; color: var(--ink);
}
.acc-icon { flex: none; width: 32px; height: 32px; padding: 6px; transform: scaleX(-1); transition: transform .6s cubic-bezier(.625, .05, 0, 1); }
.acc-item.is-open .acc-icon { transform: scaleX(-1) rotate(90deg); }
.acc-bottom { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.625, .05, 0, 1); }
.acc-bottom > div { overflow: hidden; }
.acc-bottom p { padding: 0 24px 24px 16px; max-width: 60ch; color: var(--taupe); }
.acc-item.is-open .acc-bottom { grid-template-rows: 1fr; }
.inline-link { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ---- Legal pages (reference: large title; bolt beside a half-width text column) ---- */
.legal-hero { padding-top: 200px; }
.legal-title { font-size: var(--h1); line-height: 1.1; }
.legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.legal-text { max-width: 640px; }
.legal-text h2 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; margin: 40px 0 10px; }
.legal-text p { font-size: 16px; line-height: 1.8; }
.legal-text p + p { margin-top: 12px; }
.legal-text a { text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { color: var(--taupe); margin-bottom: 24px; }
.legal-todo { background: rgba(var(--down-rgb), .12); color: var(--down); padding: 0 4px; }

/* numbered steps beside a bolt (reference: the process section) */
.steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--gap); }
.steps-list { list-style: none; margin: 56px 0 0; padding: 0; }
.steps-list li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap);
  padding: 24px 0 44px; border-top: 1px solid var(--line);
}
.steps-n { font-size: 13px; color: var(--taupe); }
.steps-list h3 { font-size: var(--h5); line-height: 1.25; }
.steps-list p { color: var(--taupe); }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-grid .panel:last-child { grid-column: 1 / -1; }
  .movers { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; --section: 72px; --gap: 16px; --h1: 42px; }
  .brand-logo { height: 32px; }
  .header-actions { margin-top: 8px; }
  .btn--line { display: none; }
  .site-header { padding-block: 16px; }
  .hero { padding-top: 96px; }
  /* phones have height to spare: a taller frame lets the coin fill the width */
  .hero-img { width: min(100%, 440px); aspect-ratio: 4 / 3; }
  .coin-stage { --d: 66%; }
  .hero-links { justify-content: center; font-size: 12px; }
  .parallax-top { padding-top: 96px; }
  .parallax-bottom { padding-bottom: 40px; }
  .section-head { flex-direction: column; gap: 16px; margin-bottom: 32px; }
  .panel { padding: 18px; }
  .summary-head { grid-template-columns: auto 1fr; }
  .summary-price { justify-content: flex-start; }
  .tf-tabs { grid-column: 1 / -1; }
  .tf-tabs button { flex: 1; padding-inline: 2px; font-size: 12px; white-space: nowrap; }
  .chart { height: 260px; }
  .summary-grid { grid-template-columns: 1fr; }
  .mover-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters { margin-top: 32px; }
  .filters-end, .search, .search input { width: 100%; }
  .svc-grid { grid-template-columns: 1fr; row-gap: var(--gap); }
  .svc--1, .svc--2, .svc--3, .svc--4, .svc-heading, .svc-link { grid-column: 1; grid-row: auto; margin-top: 0; }
  .svc-heading, .svc-link { justify-self: start; }
  .svc-link { margin-bottom: 16px; }
  .svc { aspect-ratio: 1.15; }
  .parallax--team { min-height: 900px; }
  .team-stat { top: 96px; }
  .team-caption { flex-direction: column; align-items: flex-start; }
  .news-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .post:not(:first-child) .post-img { aspect-ratio: 664 / 400; }
  .page-hero { min-height: auto; padding-top: 140px; }
  .page-hero-bolt { top: 104px; }
  .page-hero-foot { margin-top: 40px; }
  .index-strip { gap: 28px; }
  .row-item, .steps, .steps-list li { grid-template-columns: 1fr; gap: 16px; }
  .row-item { padding-bottom: 40px; }
  .row-symbols { text-align: start; }
  .steps-list { margin-top: 32px; }
  .detail-grid { grid-template-columns: 1fr; }
  .parallax-middle-title, .h3-light { max-width: 100%; }
  .cslider { --sw: 78vw; }
  .about-hero { min-height: auto; padding-top: 180px; }
  .about-hero-foot { margin-top: 72px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .team-cta { grid-column: 1 / -1; }
  .team-cta-inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; margin-top: 56px; }
  .about-hero--short { padding-top: 160px; padding-bottom: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .legal-hero { padding-top: 140px; }
  .legal { grid-template-columns: 1fr; }
  .contact-link { font-size: 17px; }
  .acc-top { font-size: 16px; padding-inline: 12px 16px; }
  .footer { padding: 12px; }
  .footer-layout { padding-top: 56px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .wordmark { font-size: 14vw; }
  .footer-bottom { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (hover: none) {
  /* touch has no hover, so the sub-services sit in the card */
  .svc { aspect-ratio: auto; min-height: 300px; }
  .svc ul { position: static; color: var(--taupe); margin: 24px 0; font-size: 14px; line-height: 1.8; }
  .svc li { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .ticker-label i { animation: none; }
  .split .line > span, .split-lines .line > span { transform: none; transition: none; }
  .hero-img, .hero-heading-wrap .word > span, .hero-links .mask > span, .ticker--hero { animation: none; }
  .sector-bars .fill { transform: none; }
  .word > span, .mask > span { transform: none; transition: none; }
  .coin, .coin-shadow, .coin-shine { animation: none; }
  .coin { transform: rotateY(-18deg) rotateX(6deg); }
  .preloader { display: none; }
}

/* ===== News page and articles (content from the admin) ===== */
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 64px; }
.news-grid--all .post .post-img { aspect-ratio: 316 / 220; }
.news-empty { color: var(--taupe); font-size: 18px; }
.news-article { max-width: 820px; margin-inline: auto; }
.news-back { display: inline-block; margin-bottom: 40px; font-size: 14px; }
.news-title { font-size: var(--h2); line-height: 1.15; font-weight: 500; margin: 8px 0 20px; text-wrap: balance; }
.news-excerpt { font-size: var(--h5); line-height: 1.5; color: var(--taupe); margin-bottom: 40px; }
.news-cover { margin: 0 0 48px; aspect-ratio: 16 / 9; overflow: hidden; }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-body { font-size: 18px; line-height: 1.85; }
.news-body > * + * { margin-top: 1.1em; }
.news-body h2, .news-body h3 { font-weight: 500; line-height: 1.3; margin-top: 1.8em; }
.news-body h2 { font-size: var(--h5); }
.news-body ul, .news-body ol { padding-inline-start: 1.4em; }
.news-body a { text-decoration: underline; text-underline-offset: 3px; }
.news-body blockquote { border-inline-start: 2px solid currentColor; padding-inline-start: 20px; color: var(--taupe); }
.news-body img { max-width: 100%; height: auto; }
@media (max-width: 991px) { .news-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .news-grid--all { grid-template-columns: 1fr; } }
/* blocks that site.js shows or hides on the news page (some have their own display rules) */
[data-news-hero][hidden], [data-news-list][hidden], [data-news-article][hidden], .news-cover[hidden], .news-empty[hidden] { display: none !important; }
.news-article { padding-top: 168px; }
@media (max-width: 767px) { .news-article { padding-top: 120px; } }

/* ===== Language switch (both languages) ===== */
.lang-switch { padding-inline: 12px; min-width: 40px; justify-content: center; }
.lang-switch[lang="ar"] { font-family: "Noto Kufi Arabic", sans-serif; }
@media (max-width: 767px) { .header-actions .lang-switch { display: inline-flex; } }

/* ===== English pages (/en/): Latin type and left-to-right mirrors of the Arabic layout ===== */
html[lang="en"] { --font: "DM Sans", system-ui, sans-serif; }
html[lang="en"] :is(h1, h2, h3, .h2, .hero-heading-wrap, .wordmark, .page-hero-title, .legal-title, .row-title, .menu-nav a) { letter-spacing: -.02em; }
html[dir="ltr"] .summary-price { justify-content: flex-start; }
html[dir="ltr"] .chart-note { left: auto; right: 0; }
html[dir="ltr"] .sym-row .sub { text-align: start; }
html[dir="ltr"] .sector-bars .fill { transform-origin: left; }
html[dir="ltr"] .quotes .co { text-align: start; }
html[dir="ltr"] .svc-overlay { transform-origin: top right; }
html[dir="ltr"] .svc ul { right: 96px; left: 24px; }
html[dir="ltr"] .svc-arrow svg { transform: scaleX(-1); }
html[dir="ltr"] .team-stat { left: auto; right: var(--gutter); }
html[dir="ltr"] .page-hero-bolt { left: auto; right: var(--gutter); }
html[dir="ltr"] .row-symbols { text-align: start; }
html[dir="ltr"] .detail-grid { right: auto; left: 0; }
html[dir="ltr"] .cslider-next svg { transform: none; }
html[dir="ltr"] .cslider-prev svg { transform: scaleX(-1); }
html[dir="ltr"] .acc-top { padding: 16px 16px 16px 24px; }
html[dir="ltr"] .acc-icon { transform: none; }
html[dir="ltr"] .acc-item.is-open .acc-icon { transform: rotate(90deg); }

/* ===== Contact page request form (saved as a lead in the admin) ===== */
.lead-form { display: grid; gap: 28px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.field small { font-weight: 400; color: var(--taupe); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 0; font: inherit; font-size: 17px; font-weight: 400; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { cursor: pointer; }
.field input[dir="ltr"] { text-align: right; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-foot .btn { height: 44px; padding-inline: 20px; }
.form-foot .btn:disabled { opacity: .6; cursor: progress; }
.form-status { font-size: 15px; color: var(--taupe); }
.form-status[data-kind="ok"] { color: var(--up); }
.form-status[data-kind="error"] { color: var(--down); }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; } }

/* reports list on the prices page */
.report-link { display: inline-block; margin-top: 20px; font-size: 16px; }