/* ==========================================================================
   Mayaal — design system
   Static CSS. No build step, no preprocessor, no external requests.
   Sections: 1 tokens · 2 reset · 3 layout · 4 typography · 5 components
             6 header/nav · 7 hero · 8 page blocks · 9 work · 10 footer
             11 utilities · 12 motion
   ========================================================================== */

/* 0 ─ Typefaces ─────────────────────────────────────────────────────────────
   Served from this domain, not a font CDN, so the site still makes zero
   external requests and sets no third-party cookies. Both are variable fonts
   under the SIL Open Font License — one file covers every weight we use.
   Licences sit next to the files in fonts/.
   font-display:swap paints immediately in the fallback and swaps on load, so
   text is never invisible.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1 ─ Design tokens ─────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:            #080b10;
  --bg-grad-a:     #0b1119;
  --bg-grad-b:     #080b10;
  --elev:          #0e141c;
  --surface:       #121a24;
  --surface-hi:    #182231;
  --line:          rgba(255, 255, 255, .09);
  --line-strong:   rgba(255, 255, 255, .16);

  --text:          #e8edf4;
  --text-mid:      #b8c4d2;
  --muted:         #8b98a9;

  /* Taken straight from the logo (#F09020) so the brand mark and the interface
     are the same orange. --accent-hi is a lightened tint for hover states. */
  --accent:        #f09020;
  --accent-hi:     #ffab45;
  --accent-ink:    #150c02;
  --accent-soft:   rgba(240, 144, 32, .13);
  --accent-line:   rgba(240, 144, 32, .32);

  --cool:          #4cc2f1;
  --cool-soft:     rgba(76, 194, 241, .13);

  --ok:            #4ade80;
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .5);
  --shadow:        0 18px 40px -22px rgba(0, 0, 0, .85);
  --shadow-lg:     0 42px 80px -34px rgba(0, 0, 0, .9);

  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     22px;
  --radius-pill:   999px;

  --step--1:       clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0:        clamp(.9375rem, .91rem + .13vw, 1rem);
  --step-1:        clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem);
  --step-2:        clamp(1.25rem, 1.14rem + .55vw, 1.5rem);
  --step-3:        clamp(1.5rem, 1.29rem + 1.05vw, 2rem);
  --step-4:        clamp(1.875rem, 1.47rem + 2.03vw, 2.875rem);
  --step-5:        clamp(2.25rem, 1.43rem + 4.1vw, 4.25rem);

  --gutter:        clamp(1.125rem, .7rem + 2.1vw, 2.25rem);
  --block:         clamp(4rem, 2.6rem + 7vw, 7.5rem);
  --wrap:          1180px;
  --wrap-narrow:   760px;

  /* Self-hosted (see @font-face below) — still zero external requests. The
     system stack stays behind them so nothing shifts if a file fails to load. */
  --font: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Sora", var(--font);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono",
               Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #fbfaf8;
  --bg-grad-a:     #ffffff;
  --bg-grad-b:     #f6f4f0;
  --elev:          #ffffff;
  --surface:       #ffffff;
  --surface-hi:    #f4f1ec;
  --line:          rgba(12, 20, 31, .11);
  --line-strong:   rgba(12, 20, 31, .2);

  --text:          #0d1520;
  --text-mid:      #37455a;
  --muted:         #5d6b7f;

  /* Same hue as the logo, darkened to clear 4.5:1 on the light background.
     The logo orange itself is only 2.31:1 there — fine for a mark, unreadable
     for buttons and links. */
  --accent:        #a8600b;
  --accent-hi:     #8a4e08;
  --accent-ink:    #fffaf0;
  --accent-soft:   rgba(168, 96, 11, .1);
  --accent-line:   rgba(168, 96, 11, .3);

  --cool:          #0d7ea8;
  --cool-soft:     rgba(13, 126, 168, .1);

  --shadow-sm:     0 1px 2px rgba(16, 24, 40, .06);
  --shadow:        0 16px 34px -20px rgba(16, 24, 40, .35);
  --shadow-lg:     0 36px 70px -32px rgba(16, 24, 40, .4);
}

/* 2 ─ Reset & base ──────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient backdrop: a soft amber bloom top-right, cool bloom bottom-left. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58rem 34rem at 82% -8%, var(--accent-soft), transparent 62%),
    radial-gradient(46rem 30rem at 6% 102%, var(--cool-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  pointer-events: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

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

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

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* 3 ─ Layout ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.block { padding-block: var(--block); }
.block--tight { padding-block: calc(var(--block) * .58); }

.block--alt {
  background: linear-gradient(180deg, transparent, var(--elev) 12%, var(--elev) 88%, transparent);
  border-block: 1px solid var(--line);
}

.grid { display: grid; gap: clamp(1rem, .5rem + 1.4vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.skip-link {
  position: absolute;
  left: 50%;
  top: -4rem;
  translate: -50% 0;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 650;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* 4 ─ Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.12;
  /* Sora is wider than the old system face, so it needs a touch more
     negative tracking to hold the same optical density at display sizes. */
  letter-spacing: -.028em;
  font-weight: 640;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 62ch;
}

.muted { color: var(--muted); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.section-head p { margin-top: 1rem; color: var(--text-mid); }

.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--text-mid); }
.prose strong { color: var(--text); font-weight: 650; }

/* 5 ─ Components ────────────────────────────────────────────────────────── */

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: .005em;
  cursor: pointer;
  white-space: nowrap;
  transition: translate .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { translate: 0 -2px; box-shadow: 0 12px 26px -14px var(--accent); }
.btn:active { translate: 0 0; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--surface-hi);
  border-color: var(--accent-line);
  box-shadow: none;
}

.btn--sm { padding: .55rem 1rem; font-size: .8125rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* Text link with animated rule ------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  font-weight: 620;
  font-size: var(--step--1);
}
.link::after {
  content: "→";
  transition: translate .18s var(--ease);
}
.link:hover::after { translate: .25rem 0; }

/* Pills / tags ----------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-mid);
  white-space: nowrap;
}
.tag--accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.tag--live::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Card ------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + .8vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), translate .2s var(--ease),
              box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--accent-line); translate: 0 -3px; box-shadow: var(--shadow); }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  margin-bottom: 1.15rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }

.card h3 { margin-bottom: .55rem; }
.card p { color: var(--muted); font-size: var(--step--1); line-height: 1.62; }
.card__foot { margin-top: auto; padding-top: 1.15rem; }

/* Stats ------------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.stat { padding: 1.35rem 1.5rem; background: var(--elev); }
.stat dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat dd {
  margin: .3rem 0 0;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Client logo strip ------------------------------------------------------ */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.logos li {
  display: grid;
  place-items: center;
  width: clamp(9.5rem, 8rem + 6vw, 12rem);
  height: 5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .2s var(--ease), translate .2s var(--ease);
}
.logos li:hover { border-color: var(--accent-line); translate: 0 -2px; }
.logos img { max-height: 2.6rem; width: auto; object-fit: contain; }

/* Timeline --------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 2.4rem 2rem;
  border-left: 1px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -.3rem; top: .5rem;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.timeline .t-when {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: .15rem; }
.timeline .t-org { font-size: var(--step--1); color: var(--muted); margin-bottom: .6rem; }
.timeline p { font-size: var(--step--1); color: var(--text-mid); }

/* Notice / callout ------------------------------------------------------- */
.note {
  padding: 1.25rem 1.45rem;
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: var(--step--1);
  color: var(--text-mid);
}

/* 6 ─ Header & navigation ───────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Tall enough for the lockup, which needs a generous box to stay legible. */
  min-height: 5.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
}
/* The header and footer show the full lockup. It ships in two colourways
   because its Latin wordmark is a solid colour — white reads on the dark theme,
   black on the light one. Only one is ever displayed, so screen readers
   announce the name once. */
/* The lockup is roughly 1.7:1 — the tall alif ascender and the descender below
   the baseline mean the Latin wordmark only occupies the middle band. So the
   box has to be generous for "Mayaal" and the ميال to read at a glance. */
.brand__logo {
  display: block;
  height: 3.6rem;
  width: auto;
}
.brand__logo--light { display: none; }
:root[data-theme="light"] .brand__logo--dark { display: none; }
:root[data-theme="light"] .brand__logo--light { display: block; }

/* The footer has room to breathe, so the lockup goes larger there. */
.site-footer .brand__logo { height: 4.4rem; }

@media (max-width: 560px) {
  .brand__logo { height: 3rem; }
  .site-footer .brand__logo { height: 3.6rem; }
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.brand__sub {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: .6rem;
  margin-left: .1rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: block;
  padding: .5rem .8rem;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 580;
  color: var(--text-mid);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__links a:hover { color: var(--text); background: var(--surface-hi); }
.nav__links a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.icon-btn:hover { border-color: var(--accent-line); background: var(--surface-hi); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }

.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.nav__burger { display: none; }

@media (max-width: 880px) {
  .nav__burger { display: grid; }
  .nav__cta { display: none; }

  .nav__links {
    position: fixed;
    inset: 5.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--elev);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    translate: 0 -120%;
    visibility: hidden;
    transition: translate .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open { translate: 0; visibility: visible; }
  .nav__links a { padding: .8rem .9rem; font-size: var(--step-0); }
}

/* 7 ─ Hero ──────────────────────────────────────────────────────────────── */

/* 7a ─ Carousel hero (homepage) ────────────────────────────────────────
   Full-bleed slides with the copy overlaid on the left. Slides are designed
   with a quiet left zone and the product weighted right, so the text always
   has something calm to sit on. Slide 1 is visible with no JavaScript. */

.hero-carousel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(46rem, 88svh);
  padding-block: clamp(4rem, 2rem + 9vw, 8rem) clamp(4.5rem, 2.5rem + 9vw, 8rem);
  overflow: clip;
  /* The hero stays dark in both themes — the slides are dark artwork. */
  background: #080b10;
  color: #e8edf4;

  /* …which means it must also keep the DARK-theme accent, whatever the page
     theme is. The light theme darkens the accent for contrast on a pale
     background; that same colour is unreadable here. Re-declaring the tokens
     locally fixes every descendant at once — headings, buttons, dots, badge. */
  --accent:        #f09020;
  --accent-hi:     #ffab45;
  --accent-ink:    #150c02;
  --accent-soft:   rgba(240, 144, 32, .13);
  --accent-line:   rgba(240, 144, 32, .32);
}

.hero-carousel__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;   /* keep the product side in frame when cropped */
}

/* Readability veil. The artwork carries its own gradient, but this guarantees
   contrast even if a slide is replaced with something brighter. */
.hero-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 9, 13, .74) 0%, rgba(6, 9, 13, .6) 34%,
                           rgba(6, 9, 13, .22) 62%, rgba(6, 9, 13, .08) 100%),
    linear-gradient(180deg, rgba(6, 9, 13, .45) 0%, transparent 22%,
                            transparent 74%, rgba(6, 9, 13, .5) 100%);
  pointer-events: none;
}

.hero-carousel__copy { max-width: min(46rem, 58%); }

@media (max-width: 900px) {
  .hero-carousel {
    min-height: 0;
    padding-block: clamp(2.75rem, 1.5rem + 6vw, 4.5rem) clamp(2.5rem, 1.5rem + 5vw, 4rem);
  }
  .hero-carousel__copy { max-width: 100%; }
  .hero-slide img { object-position: 78% center; }
  /* Copy needs a heavier veil once it sits over the whole frame. */
  .hero-carousel::before {
    background:
      linear-gradient(180deg, rgba(6, 9, 13, .82) 0%, rgba(6, 9, 13, .72) 46%,
                              rgba(6, 9, 13, .86) 100%);
  }
}

.hero-carousel h1 { margin-bottom: 1.4rem; color: #fff; }
.hero-carousel h1 em {
  font-style: normal;
  color: var(--accent-hi);
  background-image: linear-gradient(var(--accent-line), var(--accent-line));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .08em;
}
.hero-carousel .lede { color: #cfd8e3; }
.hero-carousel .hero__badge {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #dbe3ec;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-carousel .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-carousel .btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--accent-line);
}

/* Controls: caption + dots, pinned to the bottom of the frame ------------ */
.hero-carousel__controls {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  z-index: 2;
}
.hero-carousel__controls .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.hero-dots { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }

/* The button is a comfortable 36 x 24px target; the visible bar is drawn by
   ::before so the hit area stays generous without a chunky-looking control. */
.hero-dot {
  position: relative;
  width: 2.25rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width .25s var(--ease);
}
.hero-dot::before,
.hero-dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: .25rem;
  translate: 0 -50%;
  border-radius: var(--radius-pill);
}
.hero-dot::before {
  background: rgba(255, 255, 255, .28);
  transition: background-color .25s var(--ease);
}
.hero-dot:hover::before { background: rgba(255, 255, 255, .55); }
.hero-dot[aria-current="true"] { width: 3.25rem; }
.hero-dot[aria-current="true"]::before { background: var(--accent); }

/* Autoplay progress: the active dot fills left-to-right. */
.hero-dot::after { display: none; }
.hero-dot[aria-current="true"]::after {
  display: block;
  background: rgba(255, 255, 255, .6);
  transform-origin: left;
  animation: hero-progress var(--hero-interval, 6s) linear forwards;
}
@keyframes hero-progress { from { scale: 0 1; } to { scale: 1 1; } }
.hero-carousel.is-paused .hero-dot[aria-current="true"]::after,
.hero-carousel.no-autoplay .hero-dot[aria-current="true"]::after {
  animation-play-state: paused;
}
.hero-carousel.no-autoplay .hero-dot[aria-current="true"]::after { display: none; }

.hero-caption {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(232, 237, 244, .72);
  margin: 0;
}
.hero-caption b { color: #fff; font-weight: 650; }
.hero-caption a { color: inherit; text-decoration: underline; text-underline-offset: .22em;
                  text-decoration-color: rgba(255, 255, 255, .3); }
.hero-caption a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }

/* On small screens the copy fills the frame, so the controls join the normal
   flow instead of floating over the buttons. This block must stay AFTER the
   base .hero-carousel__controls rule above — same specificity, last one wins. */
@media (max-width: 900px) {
  .hero-carousel__controls { position: static; margin-top: 2.25rem; }
  .hero-carousel__controls .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-dot[aria-current="true"]::after { animation: none; display: none; }
}

/* 7b ─ Plain hero (kept for any page that wants the old two-column layout) */

.hero { position: relative; padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) var(--block); }

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
}

.hero h1 { margin-bottom: 1.4rem; }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  /* underline that sits below the descenders */
  background-image: linear-gradient(var(--accent-line), var(--accent-line));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .08em;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.6rem;
  padding: .4rem .85rem .4rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
}
.hero__badge b {
  padding: .12rem .5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
}

.hero__actions { margin-top: 2rem; }

.hero__panel {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--surface-hi), var(--surface));
  box-shadow: var(--shadow-lg);
}
.hero__panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--accent-line), transparent 42%, transparent 62%, var(--cool-soft));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.spec {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.9;
}
.spec li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--line);
}
.spec li:last-child { border-bottom: 0; }
.spec span:first-child { color: var(--muted); }
.spec span:last-child { color: var(--text); text-align: right; font-weight: 600; }

/* 8 ─ Page blocks ───────────────────────────────────────────────────────── */

.page-head { padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) 0; }
.page-head h1 { font-size: var(--step-4); margin-bottom: 1.1rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.4rem;
  font-size: .8125rem;
  color: var(--muted);
}
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .5; }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--sidebar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.cta-band {
  position: relative;
  padding: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(38rem 20rem at 88% -30%, var(--accent-soft), transparent 65%),
    var(--elev);
  text-align: center;
}
.cta-band h2 { font-size: var(--step-3); margin-bottom: 1rem; }
.cta-band p { margin-inline: auto; max-width: 52ch; color: var(--text-mid); }
.cta-band .btn-row { justify-content: center; margin-top: 1.9rem; }

/* Contact rows ----------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.contact-list a,
.contact-list .row {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s var(--ease), translate .18s var(--ease);
}
.contact-list a:hover { border-color: var(--accent-line); translate: 0 -2px; }
.contact-list svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent); }
.contact-list b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--muted); }
.contact-list span { font-size: var(--step-0); }

/* 9 ─ Work grid & project pages ─────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}
.filter {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background-color .18s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--line-strong); }
.filter[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.filter .n { opacity: .6; margin-left: .35rem; font-variant-numeric: tabular-nums; }
.filter[aria-pressed="true"] .n { opacity: .75; }

.work-grid { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
@media (min-width: 620px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .22s var(--ease), translate .22s var(--ease),
              box-shadow .22s var(--ease);
}
.pcard:hover { border-color: var(--accent-line); translate: 0 -4px; box-shadow: var(--shadow); }
.pcard[hidden] { display: none; }

.pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(16rem 10rem at 50% 0%, var(--surface-hi), transparent 70%),
    var(--elev);
  border-bottom: 1px solid var(--line);
}
/* Thumbnails are pre-composed at exactly 16:10 by tools/build_site.py, with the
   artwork already centred on the brand tile. Nothing is cropped here — the
   image and the slot are the same shape. */
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .5s var(--ease);
}
.pcard:hover .pcard__media img { scale: 1.045; }

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.45rem; }
.pcard__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pcard__kicker .cat { color: var(--accent); }
.pcard h3 { font-size: var(--step-1); margin-bottom: .5rem; letter-spacing: -.015em; }
.pcard p { font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.pcard__foot { margin-top: auto; padding-top: 1.1rem; }

/* Whole card is clickable, but only the title is a real link. */
.pcard__link::after { content: ""; position: absolute; inset: 0; }
.pcard__link:hover { color: var(--accent); }

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}

/* Project detail --------------------------------------------------------- */
.project-hero { padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem) 0; }
.project-hero h1 { font-size: var(--step-4); margin-bottom: 1.1rem; }
.project-hero .lede { margin-bottom: 1.6rem; }

.factsheet {
  list-style: none;
  margin: 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: grid;
  gap: 1.05rem;
}
.factsheet div { display: grid; gap: .2rem; }
.factsheet dt, .factsheet b {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.factsheet dd { margin: 0; font-size: var(--step--1); color: var(--text); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.checks li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .75rem;
  align-items: start;
  font-size: var(--step--1);
  color: var(--text-mid);
}
.checks li::before {
  content: "";
  margin-top: .45rem;
  width: 1.15rem; height: .1rem;
  background: var(--accent);
  border-radius: 2px;
}

/* Gallery ---------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(.75rem, .5rem + .8vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.shot {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elev);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .2s var(--ease), translate .2s var(--ease);
}
.shot:hover { border-color: var(--accent-line); translate: 0 -3px; }
.shot img { width: 100%; height: auto; }

/* Lightbox --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(4, 6, 10, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__count {
  position: absolute;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  left: 50%;
  translate: -50% 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}

/* Prev / next ------------------------------------------------------------ */
.pager {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
@media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a {
  display: grid;
  gap: .3rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s var(--ease), translate .18s var(--ease);
}
.pager a:hover { border-color: var(--accent-line); translate: 0 -2px; }
.pager b { font-size: .7rem; font-weight: 700; letter-spacing: .13em;
           text-transform: uppercase; color: var(--muted); }
.pager span { font-size: var(--step-0); font-weight: 620; }
.pager .next { text-align: right; }

/* 10 ─ Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--block);
  border-top: 1px solid var(--line);
  background: var(--elev);
}
.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer__grid h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__grid a { font-size: var(--step--1); color: var(--text-mid); }
.footer__grid a:hover { color: var(--accent); }
.footer__blurb { font-size: var(--step--1); color: var(--muted); max-width: 34ch; margin-top: 1rem; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}

/* 11 ─ Utilities ────────────────────────────────────────────────────────── */

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

.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }

.scroll-x { overflow-x: auto; }

/* Narrow-screen hardening ───────────────────────────────────────────────
   Long unbroken strings (URLs, provider lists, stack lines) must never push
   the page into a horizontal scroll. */

p, li, dd, .spec span, .factsheet dd, .contact-list span { overflow-wrap: break-word; }

@media (max-width: 560px) {
  .brand__sub { display: none; }

  .spec li { flex-wrap: wrap; gap: .1rem .75rem; }
  .spec span:last-child { text-align: left; }

  .hero__badge { flex-wrap: wrap; line-height: 1.5; }

  .stat { padding: 1.1rem 1.15rem; }

  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .cta-band .btn-row, .hero__actions { width: 100%; }
}

@media (max-width: 380px) {
  .logos li { width: 100%; }
}

/* 12 ─ Motion ───────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; translate: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
}

@media print {
  body::before, .site-header, .site-footer, .lightbox, .filters { display: none !important; }
  body { color: #000; background: #fff; }
}