/* UNIO MOUZAS: "Hard Ground" design system.
   One stylesheet for English (LTR) and Arabic (RTL). Logical properties throughout. */

:root {
  --gypsum: #F2EDE4;
  --limestone: #E8E1D4;
  --sand: #D8CCB6;
  --stone: #6B6358;
  --bitumen: #17140F;
  --bitumen-2: #211D17;
  --on-dark: #F2EDE4;
  --on-dark-muted: #B5AB9B;
  --aquifer: #1E5A60;
  --aquifer-deep: #154247;
  --aquifer-light: #8CC0BC;
  --rule: rgba(23, 20, 15, 0.16);
  --rule-dark: rgba(242, 237, 228, 0.18);

  --font-latin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ar-display: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-ar-text: "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  --font-body: var(--font-latin);
  --font-display: var(--font-latin);

  --fs-display: clamp(2.75rem, 1.2rem + 5.4vw, 7rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.2vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem);
  --fs-lead: clamp(1.25rem, 1.08rem + 0.75vw, 1.75rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-small: 0.9375rem;

  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1360px;
  --space-1: clamp(16px, 1.5vw, 24px);
  --space-2: clamp(28px, 3vw, 48px);
  --space-3: clamp(48px, 6vw, 96px);
  --space-section: clamp(80px, 10vw, 168px);
  --header-h: 84px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--gypsum);
  color: var(--bitumen);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(ar) { --font-body: var(--font-ar-text); --font-display: var(--font-ar-display); }
:lang(en) { --font-body: var(--font-latin); --font-display: var(--font-latin); }
html[lang="ar"] [lang="en"] { font-family: var(--font-latin); }
html[lang="ar"] body { font-size: calc(var(--fs-body) * 1.08); line-height: 1.85; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--aquifer); outline-offset: 3px; }
.eq-chapter :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .hero-scroll :focus-visible, .menu-panel :focus-visible, .lightbox :focus-visible { outline-color: var(--aquifer-light); }
::selection { background: var(--aquifer); color: var(--gypsum); }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-family: var(--font-latin); font-feature-settings: "tnum" 1, "lnum" 1; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--bitumen); color: var(--gypsum); padding: 10px 16px; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- type ---------- */
.section-title, .page-head__title, .intro__title, .service__title, .year__title, .cta-band__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  line-height: 0.98;
  text-wrap: balance;
}
.section-title { font-size: var(--fs-h2); }
:lang(ar) .section-title, :lang(ar) .page-head__title, :lang(ar) .intro__title,
:lang(ar) .service__title, :lang(ar) .year__title, :lang(ar) .cta-band__title {
  font-weight: 700; letter-spacing: 0; line-height: 1.35; font-stretch: normal;
}
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
:lang(ar) .lead { line-height: 1.8; letter-spacing: 0; }

.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.2s ease; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-weight: 600; text-decoration: none; color: var(--aquifer);
  border-block-end: 1.5px solid currentColor; padding-block-end: 3px;
}
.link-arrow:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(4px); }
.eq-chapter .link-arrow, .site-footer .link-arrow { color: var(--aquifer-light); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 54px; padding: 0 26px;
  background: var(--aquifer); color: var(--gypsum);
  border: 1.5px solid var(--aquifer);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.005em;
  text-decoration: none; line-height: 1.2; text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
:lang(ar) .btn { font-family: var(--font-ar-display); font-weight: 600; font-size: 0.98rem; }
.btn:hover { background: var(--aquifer-deep); border-color: var(--aquifer-deep); }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn--light { background: var(--gypsum); color: var(--bitumen); border-color: var(--gypsum); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--bitumen); }
.btn--outline-light { background: transparent; color: var(--gypsum); border-color: rgba(242, 237, 228, 0.7); }
.btn--outline-light:hover { background: rgba(242, 237, 228, 0.12); border-color: var(--gypsum); }

/* ---------- brand lockup ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.brand__en {
  font-family: var(--font-latin); font-weight: 800; font-stretch: 125%;
  font-size: 1.1875rem; letter-spacing: 0.02em; line-height: 1;
}
.brand__ar { font-family: var(--font-ar-display); font-weight: 700; font-size: 1.3125rem; line-height: 1; }
html[lang="ar"] .brand__ar { order: -1; }
html[lang="ar"] .brand__en { order: 1; }
.brand__bore {
  position: relative; width: 2px; height: 30px; background: currentColor;
  transform: translateY(5px);
}
.brand__bore::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -8px; width: 2px; height: 10px;
  background: var(--aquifer-light);
}
.site-header:not(.site-header--overlay) .brand__bore::after,
.site-header.is-solid .brand__bore::after { background: var(--aquifer); }
.brand--large { gap: 20px; }
.brand--large .brand__en { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem); }
.brand--large .brand__ar { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.brand--large .brand__bore { width: 3px; height: clamp(44px, 4vw, 66px); transform: translateY(10px); }
.brand--large .brand__bore::after { width: 3px; height: 18px; bottom: -14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--gypsum); color: var(--bitumen);
  border-block-end: 1px solid var(--rule);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.site-header--overlay {
  position: fixed; inset-inline: 0; background: transparent; color: var(--gypsum); border-color: transparent;
}
.site-header--overlay.is-solid { background: var(--gypsum); color: var(--bitumen); border-color: var(--rule); }
.site-header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.site-nav a, .lang-switch {
  text-decoration: none; font-weight: 500; font-size: 1rem; padding-block: 8px;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0 1.5px; background-position: 0 100%;
  transition: background-size 0.25s ease;
}
[dir="rtl"] .site-nav a, [dir="rtl"] .lang-switch { background-position: 100% 100%; }
.site-nav a:hover, .lang-switch:hover, .site-nav a[aria-current="page"] { background-size: 100% 1.5px; }
:lang(ar) .site-nav a { font-family: var(--font-ar-display); font-size: 0.98rem; }
.lang-switch:lang(ar) { font-family: var(--font-ar-display); font-weight: 600; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.site-header--overlay:not(.is-solid) .btn--small { background: var(--gypsum); color: var(--bitumen); border-color: var(--gypsum); }
.menu-toggle {
  display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  padding: 10px 0; font-weight: 600;
}
.menu-toggle__bars { width: 22px; height: 10px; border-block: 1.5px solid currentColor; }

/* mobile menu */
.menu-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--bitumen); color: var(--gypsum);
  display: flex; flex-direction: column; overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-panel__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.menu-close { background: none; border: 1px solid var(--rule-dark); color: var(--gypsum); padding: 10px 16px; cursor: pointer; font-weight: 600; }
.menu-panel__nav { margin-block: 6vh auto; }
.menu-panel__nav li { border-block-end: 1px solid var(--rule-dark); }
.menu-panel__nav a {
  display: block; padding-block: 16px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-size: clamp(1.9rem, 1.4rem + 3vw, 2.75rem); line-height: 1.1;
}
.menu-panel__nav a[aria-current="page"] { color: var(--aquifer-light); }
.menu-panel__foot { padding-block: 32px 40px; display: grid; gap: 14px; color: var(--on-dark-muted); }
.lang-switch--big { color: var(--gypsum); font-size: 1.25rem; justify-self: start; }

/* ---------- home: scroll hero ----------
   Without script (or with reduced motion) it is one screen: the poster, the first headline and the actions.
   hero.js adds .is-live: the section becomes a long scroll track with a sticky canvas stage. */
.hero-scroll { position: relative; background: var(--bitumen); color: var(--gypsum); }
.hero-scroll__stage { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; }
.hero-scroll__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; z-index: -2; }
.hero-scroll__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero-scroll__scrim {
  position: absolute; inset-inline: 0; inset-block-start: 0; height: calc(var(--header-h) + 90px); pointer-events: none;
  background: linear-gradient(rgba(14, 11, 8, 0.55), rgba(14, 11, 8, 0));
}
.hero-scroll:not(.is-live) [data-from]:not([data-from="-1"]) { display: none; }
.hero-scroll:not(.is-live) .hero-scroll__scrim {
  height: 100%;
  background: linear-gradient(90deg, rgba(14, 11, 8, 0.6), rgba(14, 11, 8, 0) 62%), linear-gradient(rgba(14, 11, 8, 0.5), rgba(14, 11, 8, 0) 32%);
}
[dir="rtl"] .hero-scroll:not(.is-live) .hero-scroll__scrim {
  background: linear-gradient(270deg, rgba(14, 11, 8, 0.6), rgba(14, 11, 8, 0) 62%), linear-gradient(rgba(14, 11, 8, 0.5), rgba(14, 11, 8, 0) 32%);
}
[dir="rtl"] .hero-scroll:not(.is-live) .hero-scroll__poster { transform: scaleX(-1); }   /* rig away from the copy, as in the live hero */
.hero-scroll.is-live { height: 820vh; }
/* phones: a much shorter track (touch scrolling covers less distance per gesture than a mouse wheel) */
@media (max-aspect-ratio: 9/10), (max-width: 720px) { .hero-scroll.is-live { height: 440vh; } }
.hero-scroll.is-live .hero-scroll__stage { position: sticky; inset-block-start: 0; }
.hero-scroll.is-live .hero-scroll__canvas { display: block; }
.hero-scroll.is-live .hero-scroll__poster { visibility: hidden; }
.hero-scroll.is-live .hs-beat, .hero-scroll.is-live .hs-actions { opacity: 0; visibility: hidden; will-change: opacity, transform; }

.hs-beat {
  position: absolute; inset-inline-start: var(--gutter); inset-block-start: 27%;
  max-width: min(36rem, 42vw); text-shadow: 0 1px 28px rgba(10, 8, 6, 0.35);
}
.hs-beat__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 1rem + 4.6vw, 6.25rem); line-height: 0.94;
}
:lang(ar) .hs-beat__title { font-weight: 700; font-stretch: normal; letter-spacing: 0; line-height: 1.25; font-size: clamp(2.2rem, 1rem + 3.6vw, 5rem); }
/* each headline word rises out of its own line mask (hero.js wraps the words) */
.hs-beat__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em 0.1em; margin-block: -0.06em -0.1em; }
.hs-beat__title .w > span { display: inline-block; will-change: transform; }
.hs-beat__ar { margin-block-start: 0.35em; font: 700 clamp(1.6rem, 1rem + 1.6vw, 2.75rem)/1.3 var(--font-ar-display); text-align: match-parent; }
.hs-beat__text { margin-block-start: 0.9em; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); line-height: 1.5; color: rgba(242, 237, 228, 0.9); max-width: 32ch; }
:lang(ar) .hs-beat__text { line-height: 1.85; max-width: 36ch; }
.hs-beat--teal .hs-beat__text { color: var(--aquifer-light); }
/* scroll cue: a down arrow in a light ring, bobbing, readable over the bright sky */
.hs-cue {
  display: grid; place-items: center; width: 56px; height: 56px; margin-block-start: 2em; border-radius: 50%;
  color: var(--gypsum); background: rgba(14, 11, 8, 0.42); border: 1.5px solid rgba(242, 237, 228, 0.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 24px rgba(8, 6, 4, 0.35);
}
.hs-cue { padding: 0; cursor: pointer; font: inherit; }
.hs-cue:hover { background: rgba(14, 11, 8, 0.6); border-color: var(--gypsum); }
.hero-scroll:not(.is-live) .hs-cue { display: none; }   /* the static hero has nothing to play */
.hs-cue svg { width: 18px; height: 30px; animation: hs-cue 1.6s ease-in-out infinite; }
@keyframes hs-cue { 0%, 100% { translate: 0 -2px; opacity: 0.7; } 50% { translate: 0 4px; opacity: 1; } }
.hs-actions {
  position: absolute; inset-inline-start: var(--gutter); inset-block-end: clamp(28px, 7vh, 72px);
  display: grid; gap: 14px; max-width: min(40rem, 60vw);
}
.hs-actions__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-aspect-ratio: 9/10) {
  .hs-beat { inset-block-start: calc(var(--header-h) + 3vh); max-width: calc(72% - var(--gutter)); }
  .hs-beat__title { font-size: clamp(2.1rem, 1rem + 4.6vw, 3.5rem); }
  :lang(ar) .hs-beat__title { font-size: clamp(1.9rem, 1rem + 3.6vw, 3rem); }
  .hs-actions { inset-inline: var(--gutter); max-width: none; inset-block-end: 4vh; }
  .hs-actions .btn { flex: 1 1 100%; }
  .hero-scroll:not(.is-live) .hero-scroll__poster { inset-block: auto 22%; height: 40%; object-position: 70% 50%; }
}
@media (prefers-reduced-motion: reduce) { .hs-cue svg { animation: none; } }

/* ---------- home: intro ---------- */
.intro { padding-block: var(--space-section) calc(var(--space-section) * 0.75); }
.intro__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2) 24px; }
.intro__title { grid-column: 1 / span 9; font-size: var(--fs-h1); }
.intro__body { grid-column: 6 / span 7; display: grid; gap: 28px; justify-items: start; }

/* ---------- home: services ---------- */
.svc-home { padding-block-end: var(--space-section); }
.svc-home__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; border-block-start: 1px solid var(--bitumen); padding-block-start: var(--space-2); }
.svc-home__head { grid-column: 1 / span 4; display: grid; align-content: start; gap: 24px; justify-items: start; }
.svc-list { grid-column: 6 / span 7; display: grid; gap: var(--space-3); counter-reset: svc; }
.svc { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; row-gap: 12px; }
.bore-mark { grid-row: span 2; position: relative; width: 2px; height: 3.2em; margin-block-start: 0.3em; background: currentColor; }
.bore-mark::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -0.75em; width: 2px; height: 0.9em; background: var(--aquifer); }
.svc__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 720; font-stretch: 110%; line-height: 1.15; letter-spacing: -0.01em; }
:lang(ar) .svc__title { font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.svc__text { color: #3b362e; max-width: 46ch; }
.svc-home__image { margin-block-start: var(--space-3); }
.fig--wide { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- figures ---------- */
.fig { display: grid; gap: 12px; }
.fig__img { width: 100%; height: 100%; object-fit: cover; background: var(--sand); }
.fig__img, .tile__img, .g-img { filter: sepia(0.1) saturate(0.93) contrast(1.04); }
.fig figcaption { font-size: var(--fs-small); color: var(--stone); line-height: 1.45; }
.fig--wide .fig__img { aspect-ratio: 21 / 9; }

/* ---------- home: equipment chapter ---------- */
.eq-chapter { background: var(--bitumen); color: var(--on-dark); padding-block: var(--space-section); }
.eq-chapter--gravel { background: linear-gradient(rgba(23, 20, 15, 0.9), rgba(23, 20, 15, 0.95)), url(../img/strata/gravel.jpg) 0 0 / 420px auto, var(--bitumen); }
.eq-chapter__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-block-end: var(--space-3); }
.eq-chapter__head .section-title { grid-column: 1 / span 6; font-size: var(--fs-h1); }
.eq-chapter__intro { grid-column: 8 / span 5; display: grid; gap: 22px; justify-items: start; color: var(--on-dark-muted); }
.mosaic {
  display: grid; gap: clamp(10px, 1.2vw, 18px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(220px, 23vw, 340px));
}
.tile { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--gypsum); background: var(--bitumen-2); }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile__img { transform: scale(1.03); }
.tile--tall { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.tile--wide { grid-column: 5 / span 8; grid-row: 1; }
.tile--sq { grid-column: 5 / span 4; grid-row: 2; }
.tile--sq2 { grid-column: 9 / span 4; grid-row: 2; }
.tile__label {
  position: absolute; inset-inline-start: 0; inset-block-end: 0; max-width: calc(100% - 24px);
  background: var(--bitumen); padding: 14px 18px 15px; display: grid; gap: 2px;
}
.tile__cat { font-weight: 600; font-size: 1rem; line-height: 1.3; }
:lang(ar) .tile__cat { font-family: var(--font-ar-display); }
.tile__cap { font-size: 0.875rem; color: var(--on-dark-muted); line-height: 1.4; }

/* ---------- home: 1980 ---------- */
.year { padding-block: var(--space-section); background: var(--limestone); overflow: hidden; }
.year__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.year__num {
  grid-column: 1 / span 8;
  font-size: clamp(6rem, 2rem + 17vw, 17rem); font-weight: 760; font-stretch: 125%;
  line-height: 0.78; letter-spacing: -0.035em; color: var(--bitumen);
  margin-block-end: -0.04em;
}
[dir="rtl"] .year__num { direction: ltr; text-align: end; }
.year__text { grid-column: 9 / span 4; display: grid; gap: 16px; padding-block-end: 8px; }
.year__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; font-stretch: 100%; letter-spacing: -0.01em; }
.year__text p { color: var(--stone); }
.year--rock { color: var(--on-dark); background: linear-gradient(rgba(16, 13, 10, 0.74), rgba(16, 13, 10, 0.86)), url(../img/strata/hard-rock.jpg) 0 0 / 460px auto, var(--bitumen); }
.year--rock .year__num { color: var(--sand); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .year--rock .year__num {
    background: linear-gradient(rgba(255, 236, 205, 0.18), rgba(0, 0, 0, 0.12)), url(../img/strata/sand.jpg) center / 620px auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.year--rock .year__text p { color: var(--on-dark-muted); }

/* ---------- home: close-ups ---------- */
.closeups { padding-block: var(--space-section) calc(var(--space-section) * 0.85); }
.closeups--sand { background: linear-gradient(rgba(242, 237, 228, 0.88), rgba(232, 225, 212, 0.93)), url(../img/strata/sand.jpg) 0 0 / 380px auto, var(--limestone); }
.closeups__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; margin-block-end: var(--space-2); }
.closeups__head p { color: var(--stone); max-width: 36ch; }
.closeups__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.closeups__row .fig__img { aspect-ratio: 4 / 5; }
.closeups__row .fig:nth-child(2) { margin-block-start: clamp(24px, 5vw, 80px); }

/* ---------- CTA band ---------- */
.cta-band {
  color: var(--gypsum); padding-block: clamp(64px, 8vw, 120px);
  background: radial-gradient(120% 140% at 85% 0%, rgba(140, 192, 188, 0.24), rgba(140, 192, 188, 0) 55%),
    linear-gradient(rgba(21, 66, 71, 0.84), rgba(30, 90, 96, 0.9)), url(../img/strata/aquifer.jpg) 0 0 / 420px auto, var(--aquifer);
}
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.cta-band__title { font-size: var(--fs-h1); }
.cta-band__text { margin-block-start: 18px; font-size: var(--fs-lead); line-height: 1.45; color: rgba(242, 237, 228, 0.88); max-width: 32ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.cta-band__channels { margin-block-start: 24px; display: grid; gap: 6px; }
.cta-band__channels span { display: inline-block; min-width: 7em; color: rgba(242, 237, 228, 0.75); }

/* ---------- footer ---------- */
.site-footer { color: var(--on-dark); padding-block: clamp(64px, 7vw, 112px) 28px; background: linear-gradient(rgba(14, 11, 8, 0.9), rgba(14, 11, 8, 0.95)), url(../img/strata/hard-rock.jpg) 0 0 / 460px auto, var(--bitumen); }
.site-footer__brand { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; padding-block-end: var(--space-3); border-block-end: 1px solid var(--rule-dark); }
.site-footer__descriptor { display: flex; align-items: center; gap: 14px; color: var(--on-dark-muted); font-size: 1rem; }
.site-footer__descriptor [lang="en"] { font-weight: 500; font-stretch: 112%; letter-spacing: 0.04em; }
.site-footer__descriptor [lang="ar"] { font-family: var(--font-ar-display); }
.site-footer__descriptor .sep { width: 18px; height: 1px; background: var(--on-dark-muted); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: var(--space-2) var(--space-3); }
.site-footer__h { font-size: 1rem; font-weight: 600; color: var(--on-dark-muted); margin-block-end: 18px; }
:lang(ar) .site-footer__h { font-family: var(--font-ar-display); }
.site-footer__list { display: grid; gap: 10px; }
.site-footer__list a:not(.link-arrow) { text-decoration: none; }
.site-footer__list a:not(.link-arrow):hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__address { margin-block-end: 18px; line-height: 1.6; }
.site-footer__legal { color: var(--on-dark-muted); }
.site-footer__legal [lang="en"] { color: var(--on-dark); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block-start: 24px; border-block-start: 1px solid var(--rule-dark); font-size: var(--fs-small); color: var(--on-dark-muted); }
.site-footer__bottom ul { display: flex; gap: 24px; }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- inner pages ---------- */
.page-head {
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
  padding-block: calc(var(--header-h) + clamp(64px, 9vw, 150px)) clamp(52px, 6.5vw, 104px);
  background: var(--ph-tex) 0 0 / 420px auto, var(--bitumen-2);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12, 10, 7, 0.86), rgba(12, 10, 7, 0.5) 75%), linear-gradient(rgba(12, 10, 7, 0.6), rgba(12, 10, 7, 0) 45%);
}
[dir="rtl"] .page-head::before { background: linear-gradient(270deg, rgba(12, 10, 7, 0.86), rgba(12, 10, 7, 0.5) 75%), linear-gradient(rgba(12, 10, 7, 0.6), rgba(12, 10, 7, 0) 45%); }
.page-head--sand { --ph-tex: url(../img/strata/sand.jpg); }
.page-head--gravel { --ph-tex: url(../img/strata/gravel.jpg); }
.page-head--limestone { --ph-tex: url(../img/strata/limestone.jpg); }
.page-head--rock { --ph-tex: url(../img/strata/hard-rock.jpg); }
.page-head--aquifer { --ph-tex: url(../img/strata/aquifer.jpg); }
.page-head__inner { display: grid; gap: 22px; justify-items: start; }
.page-head__layer { font: 600 0.75rem/1 var(--font-latin); letter-spacing: 0.18em; text-transform: uppercase; color: var(--aquifer-light); }
:lang(ar) .page-head__layer { font-family: var(--font-ar-display); font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.page-head__title { font-size: var(--fs-display); max-width: 14ch; text-shadow: 0 2px 30px rgba(8, 6, 4, 0.35); }
.page-head__lead { font-size: var(--fs-lead); line-height: 1.45; color: rgba(242, 237, 228, 0.88); max-width: 40ch; }
:lang(ar) .page-head__lead { line-height: 1.8; }
/* the bore: a dark hole with the drill pipe and the bit, at the inline-end side */
.page-head__bore {
  position: absolute; z-index: -1; inset-block: 0 24%; inset-inline-end: clamp(36px, 13vw, 230px); width: 34px;
  background: linear-gradient(90deg, rgba(4, 3, 2, 0.94), rgba(18, 14, 10, 0.88) 50%, rgba(4, 3, 2, 0.94));
}
.page-head__bore::before {
  content: ""; position: absolute; inset-block: 0 40px; inset-inline-start: 11px; width: 12px;
  background: linear-gradient(90deg, #25221e, #c9c0b3 38%, #7d746a 55%, #1d1a17);
}
.page-head__bore::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: -60px; width: 160px; height: 160px; margin-inline-start: -80px;
  background: radial-gradient(closest-side, rgba(255, 210, 150, 0.32), rgba(255, 210, 150, 0));
}
.page-head__bore img { position: absolute; inset-block-end: 0; inset-inline-start: 2px; width: 30px; height: auto; }
.js-motion .page-head__bore { animation: bore-in 1.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s both; }
@keyframes bore-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -200px 0); } }
.page-image { padding-block-end: var(--space-section); }

.split { padding-block-end: var(--space-section); }
.split__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; }
.split__inner .section-title { grid-column: 1 / span 5; }
.split__body { grid-column: 7 / span 6; display: grid; gap: 28px; justify-items: start; }

.owned { background: var(--limestone); padding-block: var(--space-section); }
.owned__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: center; }
.owned__text { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; }
.owned__text p { max-width: 44ch; }
.owned__pics { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.owned__pics .fig__img { aspect-ratio: 3 / 4; }
.owned__b { margin-block-start: clamp(40px, 7vw, 110px); }

.details { padding-block: var(--space-section); }
.details__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; }
.details__inner .section-title { grid-column: 1 / span 4; }
.details__list { grid-column: 6 / span 7; border-block-start: 1px solid var(--bitumen); }
.details__list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; padding-block: 18px; border-block-end: 1px solid var(--rule); }
.details__list dt { color: var(--stone); font-size: var(--fs-small); padding-block-start: 0.15em; }
.details__list dd { font-weight: 500; }
.details__list dd [lang="ar"] { font-family: var(--font-ar-display); font-weight: 600; }

/* services page */
.service { padding-block: 0 var(--space-section); }
.service__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; border-block-start: 1px solid var(--bitumen); padding-block-start: var(--space-2); }
.service__head { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; }
.service__title { font-size: var(--fs-h2); }
.service__body { grid-column: 7 / span 6; display: grid; gap: var(--space-2); }
.kinds { display: grid; gap: 0; border-block-start: 1px solid var(--rule); }
.kinds li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; padding-block: 20px; border-block-end: 1px solid var(--rule); }
.kinds h3 { font-size: 1.0625rem; font-weight: 650; line-height: 1.4; }
:lang(ar) .kinds h3 { font-family: var(--font-ar-display); font-weight: 600; }
.kinds p { color: #3b362e; }
.service__pics { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-block-start: var(--space-3); align-items: start; }
.service__a { grid-column: 1 / span 7; }
.service__a .fig__img { aspect-ratio: 4 / 3; }
.service__b { grid-column: 9 / span 4; margin-block-start: clamp(40px, 8vw, 140px); }
.service__b .fig__img { aspect-ratio: 4 / 5; }

.checklist { background: var(--bitumen); color: var(--on-dark); padding-block: var(--space-section); }
.checklist__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.checklist__inner > div { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; }
.checklist__inner > div p { color: var(--on-dark-muted); }
.checklist__list { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.checklist__list li { display: grid; gap: 14px; border-block-start: 1px solid var(--rule-dark); padding-block-start: 18px; }
.checklist__list p { font-size: 1.0625rem; }

/* contact page */
.visit { padding-block-end: var(--space-section); }
.visit__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start; border-block-start: 1px solid var(--bitumen); padding-block-start: var(--space-2); }
.visit__address { grid-column: 1 / span 5; display: grid; gap: 22px; justify-items: start; }
.visit__label { font-size: 1rem; font-weight: 600; color: var(--stone); }
:lang(ar) .visit__label { font-family: var(--font-ar-display); }
.visit__lines { display: grid; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; font-stretch: 108%; line-height: 1.1; letter-spacing: -0.02em; }
:lang(ar) .visit__lines { font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.visit__lines span:not(:first-child) { color: var(--stone); }
.visit__actions { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn--outline { background: transparent; color: var(--aquifer); }
.btn--outline:hover { background: rgba(30, 90, 96, 0.08); color: var(--aquifer-deep); border-color: var(--aquifer-deep); }
.visit__fig { grid-column: 7 / span 6; }
.visit__fig .fig__img { aspect-ratio: 3 / 2; }
.channels { display: grid; gap: 8px; width: 100%; }
.channels > div { display: flex; gap: 24px; padding-block: 10px; border-block-end: 1px solid var(--rule); }
.channels dt { min-width: 8em; color: var(--stone); }

/* privacy */
.prose-wrap { padding-block-end: var(--space-section); }
.prose { max-width: 68ch; border-block-start: 1px solid var(--bitumen); padding-block-start: var(--space-2); }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; margin-block: 36px 10px; line-height: 1.3; }
.prose h2:first-child { margin-block-start: 0; }
:lang(ar) .prose h2 { font-weight: 700; }
.prose a { color: var(--aquifer); text-underline-offset: 3px; }

/* ---------- equipment gallery ---------- */
.gallery { padding-block-end: var(--space-section); }
.anchor { display: block; position: relative; top: calc(-1 * var(--header-h)); }
.filters { display: flex; flex-wrap: wrap; gap: 6px 28px; border-block-start: 1px solid var(--bitumen); border-block-end: 1px solid var(--rule); padding-block: 14px; margin-block-end: var(--space-2); }
.filter {
  background: none; border: 0; padding: 8px 0; cursor: pointer; font-weight: 500; font-size: 1rem; color: var(--stone);
  background-image: linear-gradient(var(--aquifer), var(--aquifer)); background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.2s ease;
}
[dir="rtl"] .filter { background-position: 100% 100%; }
:lang(ar) .filter { font-family: var(--font-ar-display); font-size: 0.95rem; }
.filter:hover { color: var(--bitumen); }
.filter[aria-pressed="true"] { color: var(--bitumen); font-weight: 650; background-size: 100% 2px; }
.g-grid {
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 13vw, 200px);
  grid-auto-flow: row dense;
}
.g-item { position: relative; min-height: 0; }
.g-item[hidden] { display: none; }
.g-xl { grid-column: span 8; grid-row: span 3; }
.g-l { grid-column: span 4; grid-row: span 2; }
.g-p { grid-column: span 4; grid-row: span 3; }
.g-link { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sand); color: var(--gypsum); text-decoration: none; cursor: zoom-in; }
.g-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.g-link:hover .g-img { transform: scale(1.035); }
.g-cap {
  position: absolute; inset-inline-start: 0; inset-block-end: 0; max-width: calc(100% - 20px);
  background: rgba(23, 20, 15, 0.86); padding: 10px 14px 11px; font-size: 0.875rem; line-height: 1.4;
  display: grid; gap: 1px;
}
.g-cat { font-weight: 650; font-size: 0.8125rem; color: var(--aquifer-light); }
:lang(ar) .g-cat { font-family: var(--font-ar-display); font-weight: 600; }
.gallery__note { margin-block-start: var(--space-2); color: var(--stone); font-size: var(--fs-small); max-width: 70ch; }

/* lightbox */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(17, 15, 11, 0.97); color: var(--gypsum); }
.lightbox::backdrop { background: rgba(17, 15, 11, 0.9); }
.lightbox__frame { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: clamp(12px, 3vw, 40px); gap: 16px; }
.lightbox__img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.lightbox__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: var(--max); width: 100%; margin-inline: auto; }
.lightbox__cap { flex: 1 1 320px; font-size: 1rem; }
.lightbox__count { color: var(--on-dark-muted); font-size: var(--fs-small); }
.lightbox__nav { display: flex; gap: 8px; }
.lb-btn { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule-dark); color: var(--gypsum); cursor: pointer; }
.lb-btn:hover { background: rgba(242, 237, 228, 0.1); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-prev .arrow { transform: scaleX(-1); }
[dir="rtl"] .lb-prev .arrow { transform: none; }

/* 404 */
.nf { min-height: 100vh; display: grid; place-content: center; gap: 14px; padding: 40px; text-align: center; }
.nf__code { font-size: clamp(6rem, 20vw, 12rem); font-weight: 760; font-stretch: 125%; line-height: 0.8; }
.nf h1, .nf h2 { font-size: 1.75rem; }
.nf h2 { font-family: var(--font-ar-display); margin-block-start: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .site-nav, .site-header__actions .btn--small { display: none; }
  .site-header__actions { margin-inline-start: auto; }
  .menu-toggle { display: inline-flex; }
  :lang(ar) .menu-toggle { font-family: var(--font-ar-display); }
}
@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .intro__title, .intro__body, .svc-home__head, .svc-list, .eq-chapter__head .section-title, .eq-chapter__intro,
  .page-head__title, .page-head__lead, .split__inner .section-title, .split__body, .owned__text, .owned__pics,
  .details__inner .section-title, .details__list, .service__head, .service__body, .checklist__inner > div,
  .checklist__list, .visit__address, .visit__fig { grid-column: 1 / -1; }
  .svc-home__head { grid-auto-flow: row; }
  .mosaic { grid-template-rows: repeat(3, clamp(200px, 36vw, 320px)); }
  .tile--tall { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .tile--wide { grid-column: 7 / span 6; grid-row: 1; }
  .tile--sq { grid-column: 7 / span 6; grid-row: 2; }
  .tile--sq2 { grid-column: 1 / -1; grid-row: 3; }
  .year__num { grid-column: 1 / -1; }
  .year__text { grid-column: 1 / span 9; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__actions { justify-content: flex-start; }
  .service__a { grid-column: 1 / span 8; }
  .service__b { grid-column: 9 / span 4; }
  .g-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 20vw, 190px); }
  .g-xl { grid-column: span 6; grid-row: span 3; }
  .g-l { grid-column: span 3; grid-row: span 2; }
  .g-p { grid-column: span 3; grid-row: span 3; }
}
@media (max-width: 720px) {
  .site-header .brand__en { font-size: 1.0625rem; }
  .site-header .brand__ar { font-size: 1.1875rem; }
  .site-header .brand { gap: 11px; }
  .site-header__actions { gap: 18px; }
  .intro__title { font-size: var(--fs-h2); }
  .svc { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .tile { aspect-ratio: 4 / 5; }
  .tile--tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .tile--wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .tile--sq, .tile--sq2 { grid-column: auto; grid-row: auto; }
  .tile--sq .tile__label, .tile--sq2 .tile__label { padding: 10px 12px; max-width: 100%; }
  .tile--sq .tile__cap, .tile--sq2 .tile__cap { display: none; }
  .year__text { grid-column: 1 / -1; }
  .closeups__row { grid-template-columns: 1fr 1fr; }
  .closeups__row .fig:nth-child(2) { margin-block-start: 0; }
  .closeups__row .fig:nth-child(3) { grid-column: 1 / -1; }
  .closeups__row .fig:nth-child(3) .fig__img { aspect-ratio: 3 / 2; }
  .cta-band__actions .btn { flex: 1 1 100%; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .brand--large { gap: 14px; }
  .brand--large .brand__en { font-size: 1.1875rem; }
  .brand--large .brand__ar { font-size: 1.375rem; }
  .brand--large .brand__bore { width: 2px; height: 34px; transform: translateY(7px); }
  .brand--large .brand__bore::after { width: 2px; height: 12px; bottom: -10px; }
  .site-footer__descriptor { flex-wrap: wrap; gap: 6px 12px; }
  .details__list > div, .kinds li { grid-template-columns: 1fr; gap: 4px; }
  .owned__pics { grid-template-columns: 1fr 1fr; }
  .service__a, .service__b { grid-column: 1 / -1; margin-block-start: 0; }
  .service__b .fig__img { aspect-ratio: 3 / 2; }
  .checklist__list { grid-template-columns: 1fr; gap: 24px; }
  .fig--wide .fig__img { aspect-ratio: 16 / 10; }
  .g-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .g-xl { grid-column: 1 / -1; grid-row: span 1; }
  .g-l { grid-column: 1 / -1; grid-row: span 1; }
  .g-p { grid-column: span 1; grid-row: span 1; }
  .g-xl .g-link, .g-l .g-link { }
  .g-cap { font-size: 0.8125rem; padding: 8px 10px; }
  .g-p .g-cap { display: none; }
  .filters { gap: 2px 20px; }
  .lightbox__bar { gap: 10px; }
}
@media (max-width: 480px) {
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 14px; }
  .site-header .brand__en { font-size: 0.875rem; letter-spacing: 0.01em; }
  .site-header .brand__ar { font-size: 1rem; }
  .site-header .brand { gap: 8px; }
  .site-header .brand__bore { height: 24px; transform: translateY(4px); }
  .site-header .lang-switch { font-size: 0.9375rem; }
  .menu-panel .brand__en { font-size: 0.875rem; }
  .menu-panel .brand__ar { font-size: 1rem; }
  .menu-panel .brand { gap: 8px; }
}
@media (max-width: 400px) {
  .menu-toggle > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 370px) {
  :root { --gutter: 16px; }
  .site-header .brand__en, .menu-panel .brand__en { font-size: 0.8125rem; }
  .site-header .brand__ar, .menu-panel .brand__ar { font-size: 0.9375rem; }
  .site-header .brand, .menu-panel .brand { gap: 7px; }
  .site-header__actions { gap: 12px; }
}
@media (max-width: 400px) {
  .brand--large .brand__en { font-size: 1rem; }
  .brand--large .brand__ar { font-size: 1.1875rem; }
}
@media (max-width: 340px) {
  .site-header .lang-switch { display: none; }
  .brand--large .brand__en { font-size: 0.875rem; }
  .brand--large .brand__ar { font-size: 1rem; }
}

/* ---------- strata: the descent that runs through every page ---------- */
.seam {
  position: relative; height: clamp(24px, 2.6vw, 40px);
  background: var(--seam-tex) 0 0 / 340px auto, var(--bitumen-2);
  box-shadow: inset 0 3px 0 rgba(12, 9, 6, 0.75), inset 0 12px 18px rgba(8, 6, 4, 0.45), inset 0 -2px 0 rgba(12, 9, 6, 0.65);
}
.seam--sand { --seam-tex: url(../img/strata/sand.jpg); }
.seam--gravel { --seam-tex: url(../img/strata/gravel.jpg); }
.seam--limestone { --seam-tex: url(../img/strata/limestone.jpg); }
.seam--rock { --seam-tex: url(../img/strata/hard-rock.jpg); }
.seam--aquifer { --seam-tex: url(../img/strata/aquifer.jpg); }
.seam__label {
  position: absolute; inset-inline-end: var(--gutter); inset-block-start: 50%; transform: translateY(-50%);
  font: 600 0.6875rem/1 var(--font-latin); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242, 237, 228, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
:lang(ar) .seam__label { font-family: var(--font-ar-display); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.seam--aquifer .seam__label { color: var(--aquifer-light); }

/* depth rail: fills as the page goes down (site.js sets --p); desktop only */
.bore-rail {
  --p: 0; position: fixed; z-index: 30; pointer-events: none;
  inset-inline-end: max(10px, calc(var(--gutter) * 0.42)); inset-block: calc(var(--header-h) + 28px) 36px; width: 2px;
  background: rgba(128, 118, 104, 0.32); transition: opacity 0.4s ease;
}
.bore-rail__fill { position: absolute; inset: 0; background: #4E9A99; transform-origin: top; transform: scaleY(var(--p)); }
.bore-rail::after {
  content: ""; position: absolute; inset-inline-start: -3px; inset-block-start: calc(var(--p) * 100%); width: 8px; height: 8px; margin-block-start: -4px;
  border-radius: 50%; background: var(--aquifer-light); box-shadow: 0 0 10px 2px rgba(140, 192, 188, 0.6);
}
.bore-rail.is-off { opacity: 0; }
@media (max-width: 1023px) { .bore-rail { display: none; } }

/* scroll reveals (site.js adds .js-motion when motion is allowed) */
.js-motion .rw .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em 0.12em; margin-block: -0.06em -0.12em; }
.js-motion .rw .w > span { display: inline-block; transform: translateY(112%); transition: transform 0.95s cubic-bezier(0.2, 0.75, 0.15, 1); transition-delay: calc(var(--i, 0) * 55ms); }
.js-motion .rw.is-in .w > span { transform: none; }
.js-motion [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.95s cubic-bezier(0.2, 0.75, 0.15, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.js-motion [data-rv].is-in { opacity: 1; transform: none; }
.js-motion [data-rv-img] { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(0.65, 0, 0.25, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.js-motion [data-rv-img].is-in { clip-path: inset(0 0 0 0); }

@media (max-width: 720px) {
  .seam__label { font-size: 0.625rem; }
  .page-head__inner { padding-inline-end: 56px; }
  .page-head__bore { inset-inline-end: 18px; width: 26px; }
  .page-head__bore::before { inset-inline-start: 8px; width: 10px; }
  .page-head__bore img { width: 24px; inset-inline-start: 1px; }
}

/* ---------- chapters: the ground layers that inner-page sections sit in ---------- */
.ch--sand { background: linear-gradient(rgba(242, 237, 228, 0.88), rgba(232, 225, 212, 0.93)), url(../img/strata/sand.jpg) 0 0 / 380px auto, var(--limestone); }
.ch--gravel { color: var(--on-dark); background: linear-gradient(rgba(23, 20, 15, 0.9), rgba(23, 20, 15, 0.95)), url(../img/strata/gravel.jpg) 0 0 / 420px auto, var(--bitumen); }
.ch--rock { color: var(--on-dark); background: linear-gradient(rgba(16, 13, 10, 0.76), rgba(16, 13, 10, 0.88)), url(../img/strata/hard-rock.jpg) 0 0 / 460px auto, var(--bitumen); }
.ch--dark { --stone: var(--on-dark-muted); --rule: var(--rule-dark); }
.ch--dark .link-arrow { color: var(--aquifer-light); }
.ch--dark :focus-visible { outline-color: var(--aquifer-light); }
.ch--dark .details__list, .ch--dark .service__inner, .ch--dark .visit__inner, .ch--dark .filters { border-block-start-color: rgba(242, 237, 228, 0.55); }
.ch--dark .kinds p, .ch--dark .svc__text { color: var(--on-dark-muted); }
.ch--dark .bore-mark::after { background: var(--aquifer-light); }
.ch--sand .service__inner { border-block-start-color: var(--bitumen); }

/* section sizes inside chapters */
.owned.ch--gravel, .details.ch--rock, .service.ch--sand { padding-block: var(--space-section); }
.gallery.ch--gravel { padding-block: var(--space-3) var(--space-section); }

/* eyebrow above a heading (replaces the 01 / 02 numerals) */
.eyebrow { font: 600 0.75rem/1 var(--font-latin); letter-spacing: 0.18em; text-transform: uppercase; color: var(--aquifer); }
:lang(ar) .eyebrow { font-family: var(--font-ar-display); font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.ch--dark .eyebrow { color: var(--aquifer-light); }

/* bore-marked lists */
.marks { display: grid; gap: 14px; }
.marks li { display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 700; font-stretch: 110%; font-size: var(--fs-h3); line-height: 1.2; }
:lang(ar) .marks li { font-stretch: normal; line-height: 1.5; }
.marks .bore-mark { height: 1.3em; margin: 0 0 0.4em; flex: none; }
.marks .bore-mark::after { height: 0.5em; inset-block-end: -0.45em; }
.kinds li { grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.kinds .bore-mark { grid-row: auto; height: 1.4em; margin: 0.05em 0 0; }
.kinds .bore-mark::after { height: 0.5em; inset-block-end: -0.45em; }
.checklist__list li { grid-template-columns: auto 1fr; align-items: start; column-gap: 16px; }
.checklist__list .bore-mark { grid-row: auto; height: 1.6em; margin: 0.1em 0 0; }
.checklist__list .bore-mark::after { height: 0.55em; inset-block-end: -0.5em; }
.prose h2 { display: flex; align-items: center; gap: 14px; }
.prose h2 .bore-mark { grid-row: auto; height: 1.1em; margin: 0 0 0.35em; flex: none; }
.prose h2 .bore-mark::after { height: 0.45em; inset-block-end: -0.4em; }

/* equipment gallery on dark ground */
.ch--dark .filter { color: var(--on-dark-muted); background-image: linear-gradient(var(--aquifer-light), var(--aquifer-light)); }
.ch--dark .filter:hover, .ch--dark .filter[aria-pressed="true"] { color: var(--gypsum); }
.ch--dark .g-link { background: var(--bitumen-2); }
.ch--dark .gallery__note { color: var(--on-dark-muted); }

@media (max-width: 720px) {
  .kinds li { grid-template-columns: auto 1fr; }
  .kinds li p { grid-column: 2; }
}

/* ---------- preview ribbon (client preview link only; config.json "preview": false at launch) ---------- */
.preview-ribbon { position: fixed; z-index: 70; inset-block-end: 0; inset-inline-end: 0; width: 120px; height: 120px; overflow: hidden; pointer-events: none; }
.preview-ribbon span {
  position: absolute; inset-block-end: 26px; inset-inline-end: -38px; width: 170px; padding: 6px 0;
  transform: rotate(-45deg); text-align: center;
  font: 700 0.75rem/1 var(--font-latin); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gypsum); background: var(--aquifer); border-block: 1px solid rgba(242, 237, 228, 0.4);
  box-shadow: 0 2px 12px rgba(8, 6, 4, 0.35);
}
[dir="rtl"] .preview-ribbon span { transform: rotate(45deg); }
:lang(ar) .preview-ribbon span { font-family: var(--font-ar-display); font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) {
  .preview-ribbon { width: 96px; height: 96px; }
  .preview-ribbon span { inset-block-end: 20px; inset-inline-end: -44px; width: 160px; padding: 4px 0; font-size: 0.625rem; }
  :lang(ar) .preview-ribbon span { font-size: 0.6875rem; }
}

/* ---------- equipment trading ---------- */
.service.ch--gravel { padding-block: var(--space-section); }
.sale__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-ask[hidden] { display: none; }
@media (max-width: 720px) { .sale__actions .btn { flex: 1 1 100%; } }

/* contact details: let the column shrink and long values (the email) wrap on small phones */
.visit__address, .visit__fig { min-width: 0; }
.channels > div { flex-wrap: wrap; gap: 2px 24px; }
.channels dd { min-width: 0; overflow-wrap: anywhere; }
.cta-band__channels li { overflow-wrap: anywhere; }