/* =========================================================
   GEODEN V3: the borehole log
   The whole stylesheet for site-v3/, written from nothing. Source: _build_tools/v3/v3.css
   Idea: the site is a log sheet. Ruled lines, strata symbols, tabular numerals, squared corners.
   On the homepage a depth scale runs down the leading edge and the layers darken with depth,
   from ground level (off-white) through sand and Earth brown to the bearing stratum (Graphite).
   Gold is the only accent: the "after treatment" trace, the depth marker, the main action.
   ========================================================= */

/* ---------- Fonts: self-hosted, no request to any other site ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-latin-var.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/noto-sans-arabic-var.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- Tokens ---------- */
:root {
  --geo-graphite: #1F1F1F;
  --geo-gold: #C88B3C;
  --geo-earth: #6B4E2E;
  --geo-sand: #D9C9A9;
  --geo-off-white: #F7F5F1;
  --geo-white: #FFFFFF;
  --geo-text-muted: #55514B;
  --geo-error: #A3261B;

  /* Layer colours, top of the hole to the bottom */
  --l-surface: #F7F5F1;
  --l-fill: #F2EBDD;
  --l-sand-1: #ECE1CC;
  --l-sand-2: #E5D7BC;
  --l-sand-3: #DFCEB0;
  --l-sand-4: #D9C9A9;
  --l-earth-1: #6B4E2E;
  --l-earth-2: #553D23;
  --l-earth-3: #3D2D1C;
  --l-rock: #1F1F1F;
  --l-bed: #151515;

  /* What sits on a layer. Light-layer values here; dark layers swap them. */
  --bg: var(--geo-white);
  --ink: var(--geo-graphite);
  --ink-2: var(--geo-text-muted);
  --rule: rgba(31, 31, 31, .2);
  --rule-strong: var(--geo-graphite);
  --hatch: rgba(31, 31, 31, .42);
  --panel: rgba(255, 255, 255, .6);
  --accent-ink: var(--geo-earth);

  --gutter: 24px;
  --max: 1240px;
  --header-h: 76px;
  --space: 104px;
  --rail: 0px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --font-latin: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  accent-color: var(--geo-earth);
  caret-color: var(--geo-earth);
  scrollbar-color: #A7A096 var(--geo-off-white);
}
@media (max-width: 767px) { :root { --gutter: 16px; --header-h: 64px; --space: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-latin); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--geo-white); overflow-x: hidden; }
html[lang="ar"] body { font-family: var(--font-arabic); line-height: 1.85; }
html[lang="en"] [lang="ar"], html[lang="en"] .lang-ar { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }   /* English pages do not download the Arabic font for two labels */
img, svg { max-width: 100%; display: block; }
::selection { background: var(--geo-gold); color: var(--geo-graphite); }

h1, h2, h3, h4 { margin: 0 0 16px; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.6vw, 60px); }
h2 { font-size: clamp(27px, 3vw, 42px); }
h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: 0; }
html[lang="ar"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.4; font-weight: 700; }
p { margin: 0 0 16px; }
p, li { text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.45vw, 20px); color: var(--ink-2); max-width: 58ch; }
a { color: inherit; text-decoration-color: var(--geo-gold); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--geo-gold); outline-offset: 2px; box-shadow: 0 0 0 6px var(--geo-graphite); }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--geo-graphite); color: var(--geo-white); padding: 12px 16px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.muted, .note { color: var(--ink-2); }
.note { font-size: 14px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* ---------- Strata symbols (drawn with gradients so they take each layer's line colour) ---------- */
:root {
  --sym-dots: radial-gradient(var(--hatch) 1px, transparent 1.6px) 0 0 / 8px 8px;
  --sym-dots-wide: radial-gradient(var(--hatch) 1px, transparent 1.6px) 0 0 / 14px 14px;
  --sym-lines: repeating-linear-gradient(0deg, var(--hatch) 0 1px, transparent 1px 7px);
  --sym-cross: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 8px);
  --sym-rings: radial-gradient(circle, transparent 2.4px, var(--hatch) 2.4px 3.4px, transparent 3.6px) 0 0 / 12px 12px;
  --sym-diag: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 6px);
  --sym-dash: repeating-linear-gradient(0deg, var(--hatch) 0 1px, transparent 1px 9px), radial-gradient(var(--hatch) 1px, transparent 1.6px) 4px 4px / 9px 9px;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  font: 700 16px/1 var(--font-latin); text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--geo-graphite); background: transparent; border: 1.5px solid var(--ink); border-radius: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
html[lang="ar"] .btn { font-family: var(--font-arabic); }
.btn:active { transform: scale(.97); }
.btn--primary, .btn--gold { background: var(--geo-gold); border-color: var(--geo-gold); color: var(--geo-graphite); }
.btn--outline { color: var(--ink); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn.is-pending { border-style: dashed; border-color: var(--rule-strong); color: var(--ink-2); cursor: default; }
.btn.is-pending:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--gold:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .btn--outline:hover { background: var(--ink); color: var(--bg); }
  .btn.is-pending:hover { background: transparent; color: var(--ink-2); }
}
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); min-height: 44px; }
.text-link::after {
  content: ""; width: 18px; height: 10px; flex: 0 0 auto; background: var(--geo-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease-out);
}
html[dir="rtl"] .text-link::after { transform: scaleX(-1); }
.text-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--geo-gold); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover::after { transform: translateX(4px); }
  html[dir="rtl"] .text-link:hover::after { transform: scaleX(-1) translateX(4px); }
}
.text-link--download { margin-inline-start: 8px; }
.row-link { text-decoration: none; }
.row-link:hover { text-decoration: underline; text-decoration-color: var(--geo-gold); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink); background: transparent; border: 1px solid var(--rule-strong); text-decoration: none; }
html[lang="ar"] .tag { font-size: 13.5px; }
.tag--pending { border-style: dashed; color: var(--ink-2); }
a.tag--link { transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
a.tag--link:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { a.tag--link:hover { background: var(--ink); color: var(--bg); } }
@media (pointer: coarse) { a.tag--link { min-height: 44px; padding-inline: 14px; } .tags:has(a.tag--link) { gap: 8px; } }

/* ---------- Prototype notice, header, navigation ---------- */
.prototype-bar { background: var(--geo-earth); color: var(--geo-white); font-size: 13px; text-align: center; padding: 8px var(--gutter); }
.prototype-bar strong { color: var(--geo-sand); }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--geo-white); border-bottom: 1.5px solid var(--geo-graphite); }
.site-header .container { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--geo-graphite); flex-shrink: 0; }
.brand:hover { color: var(--geo-graphite); }
.brand__icon { width: 46px; height: auto; aspect-ratio: 530 / 540; flex: 0 0 auto; }   /* logo: width only, the file keeps its own proportions */
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-latin); font-weight: 800; font-size: 24px; letter-spacing: .02em; }
.brand__desc { font-family: var(--font-latin); font-weight: 600; font-size: 9.5px; letter-spacing: .24em; margin-top: 5px; }
.brand__ar { font-family: var(--font-arabic); font-weight: 700; font-size: 22px; line-height: 1.1; }
.brand__ar-desc { font-family: var(--font-arabic); font-weight: 500; font-size: 11px; margin-top: 2px; }

.nav { margin-inline-start: auto; display: flex; align-items: center; }
.nav__list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.nav__list > li { position: relative; display: flex; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 13px; font: 600 15px var(--font-latin); color: var(--geo-graphite); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .2s ease; }
html[lang="ar"] .nav__link { font-family: var(--font-arabic); font-size: 16px; }
.nav__link:hover { color: var(--geo-earth); }
.nav__link[aria-current="page"], .nav__link.is-current { box-shadow: inset 0 -4px 0 var(--geo-gold); }
.nav__caret { width: 10px; height: 10px; }
.dropdown {
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 310px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--geo-white); border: 1.5px solid var(--geo-graphite); border-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown, .has-dropdown.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: flex; align-items: center; min-height: 44px; padding: 6px 20px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--geo-graphite); }
.dropdown a:hover { background: var(--l-fill); color: var(--geo-graphite); }
.dropdown .dropdown__all { font-weight: 700; border-bottom: 1px solid var(--rule); }
.dropdown .dropdown__sol { font-weight: 700; border-top: 1px solid var(--rule); }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--geo-graphite); border-inline-start: 1px solid var(--rule); }
.lang-switch span { margin-inline: 5px; color: #8C877F; font-weight: 600; }
.lang-switch .is-active, .lang-switch .lang-ar, .lang-switch .lang-en { color: var(--geo-graphite); margin: 0; font-weight: 800; }
.lang-switch .lang-ar { font-family: var(--font-arabic); font-size: 16px; }
html[lang="ar"] .lang-switch .is-active { font-family: var(--font-arabic); }
.header-cta { min-height: 44px; padding: 0 18px; font-size: 14px; flex-shrink: 0; }
.header-cta--drawer { display: none; }
.menu-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--geo-graphite); cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content: ""; display: block; position: relative; width: 20px; height: 2px; background: var(--geo-graphite); }
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .site-header .lang-switch { margin-inline-start: auto; border: 0; padding: 0 8px; }
  .header-cta--bar { display: none; }
  .header-cta--drawer { display: inline-flex; margin-top: 24px; min-height: 52px; font-size: 16px; }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; flex-direction: column; align-items: stretch; background: var(--geo-white); padding: 8px var(--gutter) 32px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .32s var(--ease-drawer), visibility .32s; }
  html[dir="rtl"] .nav { transform: translateX(-100%); }
  .nav.is-open, html[dir="rtl"] .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; }
  .nav__list > li { display: block; }
  .nav__link { width: 100%; height: auto; min-height: 54px; padding: 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav__link[aria-current="page"], .nav__link.is-current { box-shadow: none; color: var(--geo-earth); }
  .dropdown { position: static; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; min-width: 0; padding: 0 0 8px; }
  .has-dropdown.is-open > .dropdown { display: block; }
  .dropdown a { padding-inline: 16px; border-inline-start: 1px solid var(--geo-graphite); }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 480px) { .brand__desc, .brand__ar-desc { display: none; } .brand__icon { width: 40px; } .brand__name { font-size: 21px; } }

/* =========================================================
   HOMEPAGE: THE LOG
   ========================================================= */
.log { position: relative; --rail: 84px; }
@media (max-width: 900px) { .log { --rail: 30px; } }

body:has(.log) :is(.site-header, .site-footer) { padding-inline-start: 84px; }
@media (max-width: 900px) { body:has(.log) :is(.site-header, .site-footer) { padding-inline-start: 0; } }

/* A layer: one full-width band of ground */
.layer { position: relative; background: var(--bg); color: var(--ink); padding-block: var(--space); padding-inline-start: var(--rail); border-top: 1.5px solid var(--geo-graphite); }
.layer:first-of-type { border-top: 0; }
.layer--surface { --bg: var(--l-surface); --ink-2: #544D42; padding-block: 0 64px; }
.layer--fill   { --bg: var(--l-fill); --ink-2: #51483A; }
.layer--sand-1 { --bg: var(--l-sand-1); --ink-2: #4E4435; }
.layer--sand-2 { --bg: var(--l-sand-2); --ink-2: #4A4031; }
.layer--sand-3 { --bg: var(--l-sand-3); --ink-2: #463C2D; }
.layer--sand-4 { --bg: var(--l-sand-4); --ink-2: #41382A; --accent-ink: #5A4126; }
.layer--earth-1, .layer--earth-2, .layer--earth-3, .layer--rock {
  --ink: #FFFFFF; --ink-2: #EADFCB; --rule: rgba(255, 255, 255, .26); --rule-strong: rgba(255, 255, 255, .8);
  --hatch: rgba(255, 255, 255, .34); --panel: rgba(0, 0, 0, .18); --accent-ink: var(--geo-sand);
}
.layer--earth-1 { --bg: var(--l-earth-1); }
.layer--earth-2 { --bg: var(--l-earth-2); }
.layer--earth-3 { --bg: var(--l-earth-3); }
.layer--rock    { --bg: var(--l-rock); --ink-2: #D8D4CC; }
.layer--earth-1, .layer--earth-2, .layer--earth-3, .layer--rock { border-top-color: rgba(255, 255, 255, .5); }

/* The strata column: each layer draws its own symbol beside the scale */
.layer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 52px; width: 32px; background: var(--sym-dots-wide); border-inline: 1px solid var(--rule-strong); pointer-events: none; }
.layer--fill::before   { background: var(--sym-cross); }
.layer--sand-1::before { background: var(--sym-dots); }
.layer--sand-2::before { background: var(--sym-dash); }
.layer--sand-3::before { background: var(--sym-lines); }
.layer--sand-4::before { background: var(--sym-lines), var(--sym-dots-wide); }
.layer--earth-1::before { background: var(--sym-rings); }
.layer--earth-2::before { background: var(--sym-rings), var(--sym-dots); }
.layer--earth-3::before { background: var(--sym-diag); }
.layer--rock::before   { background: var(--sym-diag), repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 14px); }
@media (max-width: 900px) { .layer::before { inset-inline-start: 14px; width: 16px; } }

/* The depth scale: one unbroken ruler for the whole page, with a marker that shows where "now" is */
.log__rail { position: absolute; z-index: 3; top: 0; bottom: 0; inset-inline-start: 0; width: 52px; pointer-events: none; mix-blend-mode: difference; color: #fff;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 60px) right 0 top 0 / 9px 100% no-repeat,
              repeating-linear-gradient(to bottom, currentColor 0 1.5px, transparent 1.5px 300px) right 0 top 0 / 18px 100% no-repeat; }
html[dir="rtl"] .log__rail { background-position: left 0 top 0, left 0 top 0; }
.log__tick { position: absolute; inset-inline-end: 22px; margin-top: -8px; font-size: 11px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; opacity: .85; }
.log__readout { position: sticky; top: calc(var(--header-h) + 14px); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; margin-inline-start: 2px; padding: 5px 0 4px; font-size: 11px; line-height: 1.1; font-variant-numeric: tabular-nums; mix-blend-mode: normal; }
.log__readout b { font-weight: 800; }
.log__readout i { font-style: normal; font-weight: 600; opacity: .8; }
.log__readout::after { content: ""; position: absolute; top: 50%; inset-inline-end: -8px; margin-top: -5px; width: 7px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
html[dir="rtl"] .log__readout::after { transform: scaleX(-1); }
@media (max-width: 900px) {
  .log__rail { width: 14px; background-size: 5px 100%, 10px 100%; }
  .log__readout, .log__tick { display: none; }
}

/* Log header: the four facts as ruled cells across the top of the sheet */
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1.5px solid var(--geo-graphite); }
.sheet > div { padding: 22px 24px 20px; border-inline-start: 1px solid var(--rule); }
.sheet > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.sheet dt { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
html[lang="ar"] .sheet dt { letter-spacing: 0; font-weight: 700; }
.sheet dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) {
  .sheet { grid-template-columns: 1fr 1fr; }
  .sheet > div { padding: 16px 14px; border-top: 1px solid var(--rule); }
  .sheet > div:nth-child(-n+2) { border-top: 0; }
  .sheet > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

/* Opening: headline and actions beside the test trace */
.opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 318px); gap: 72px; align-items: center; padding-top: 44px; }
.opening h1 { font-size: clamp(40px, min(5.6vw, 9.2vh), 82px); line-height: .96; letter-spacing: -0.045em; margin-bottom: 24px; }
html[lang="ar"] .opening h1 { letter-spacing: 0; line-height: 1.22; font-size: clamp(38px, min(5.2vw, 8.4vh), 74px); }
.opening h1 .accent { display: block; color: var(--geo-earth); }
.opening .lead { max-width: 44ch; font-size: clamp(18px, 1.55vw, 21px); }
@media (max-width: 1000px) { .opening { grid-template-columns: 1fr; gap: 48px; padding-top: 40px; } }
/* Small screens: headline and actions first, the four facts after them */
@media (max-width: 900px) {
  .layer--surface > .container { display: flex; flex-direction: column; }
  .layer--surface .sheet { order: 2; margin-top: 48px; border-top: 1.5px solid var(--geo-graphite); }
}

.trace { margin: 0; background: var(--geo-white); border: 1.5px solid var(--geo-graphite); }
.trace__head { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--geo-graphite); font-size: 12px; font-weight: 700; }
.trace__plot { direction: ltr; border-bottom: 1px solid var(--geo-graphite); background: repeating-linear-gradient(to bottom, var(--geo-graphite) 0 1px, transparent 1px 20%) left 0 top 0 / 7px 100% no-repeat; }
.trace__plot svg { width: 100%; height: clamp(250px, 38vh, 400px); }
.trace path { fill: none; vector-effect: non-scaling-stroke; }
.trace__grid path { stroke: rgba(31, 31, 31, .12); stroke-width: 1; }
.trace__criterion { stroke: var(--geo-graphite); stroke-width: 1.25; stroke-dasharray: 6 5; }
.trace__limit { display: none; }
.trace__before { stroke: #8C877F; stroke-width: 1.5; }
.trace__after { stroke: var(--geo-gold); stroke-width: 2.75; stroke-linejoin: round; vector-effect: none !important; stroke-dasharray: 1; animation: trace-draw 1.8s var(--ease-out) .25s backwards; }
@keyframes trace-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.trace__key { list-style: none; margin: 0; padding: 9px 12px; display: grid; gap: 2px; font-size: 13px; font-weight: 600; }
.trace__key li { display: flex; align-items: center; gap: 10px; }
.trace__key li::before { content: ""; width: 26px; flex: 0 0 auto; border-top: 2px solid #8C877F; }
.trace__key .k-after::before { border-top: 3px solid var(--geo-gold); }
.trace__key .k-criterion::before { border-top: 1.5px dashed var(--geo-graphite); }
.trace figcaption { padding: 8px 12px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.45; color: var(--geo-text-muted); }
@media (max-width: 1000px) { .trace { max-width: 360px; } }

.layer__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 72px; align-items: end; margin-bottom: 48px; }
.layer__head h2, .layer__head .lead { margin: 0; }
@media (max-width: 900px) { .layer__head { grid-template-columns: 1fr; margin-bottom: 36px; } }
.statement { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; max-width: 30ch; margin: 0 0 88px; text-wrap: balance; }
html[lang="ar"] .statement { letter-spacing: 0; line-height: 1.6; }

/* Service families: rows of a log table (symbol, name, description, methods) */
.families { border-top: 1.5px solid var(--rule-strong); }
.family { display: grid; grid-template-columns: 44px minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 1.5fr) auto; column-gap: 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rule); transition: background-color .2s ease; }
.family::before { content: ""; width: 44px; height: 44px; border: 1px solid var(--rule-strong); background: var(--sym-dots); }
.family:nth-child(2)::before { background: var(--sym-diag); }
.family:nth-child(3)::before { background: var(--sym-rings); }
.family:nth-child(4)::before { background: var(--sym-lines); }
.family:nth-child(5)::before { background: var(--sym-cross); }
.family h3 { margin: 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; }
.family p { margin: 0; color: var(--ink-2); font-size: 16px; }
.family .text-link { white-space: nowrap; margin-top: -8px; }
@media (hover: hover) and (pointer: fine) { .family:hover { background: var(--panel); } }
@media (max-width: 1100px) {
  .family { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr); row-gap: 14px; }
  .family .tags { grid-column: 2 / -1; }
  .family .text-link { grid-column: 2 / -1; margin-top: 0; }
}
@media (max-width: 640px) {
  .family { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; padding: 22px 0; }
  .family::before { width: 36px; height: 36px; }
  .family p, .family .tags, .family .text-link { grid-column: 2; }
}

/* Why: principles as ruled entries beside one photograph */
.why { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: center; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 40px; } .why .photo { max-width: 420px; } }
.principles { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1.5px solid var(--rule-strong); }
.principles li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.principles h3 { font-size: 19px; margin-bottom: 6px; }
.principles p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 640px) { .principles { grid-template-columns: 1fr; } }

/* Ground problems */
.problem-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; margin-bottom: 56px; }
@media (max-width: 900px) { .problem-intro { grid-template-columns: 1fr; gap: 40px; } }
.problem-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--rule-strong); border-inline-start: 1px solid var(--rule); }
.problem-grid li { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.problem-grid a { display: block; height: 100%; padding: 22px 20px 24px; text-decoration: none; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); transition: background-color .2s ease; }
.problem-grid a span { display: block; margin-top: 8px; font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.problem-grid a:active { background: var(--panel); }
@media (hover: hover) and (pointer: fine) { .problem-grid a:hover { background: var(--panel); color: var(--ink); box-shadow: inset 0 3px 0 var(--geo-gold); } }
@media (max-width: 1000px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .problem-grid { grid-template-columns: 1fr; } }

/* Case study */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case__flow { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--rule-strong); }
.case__flow li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.case__flow strong { font-weight: 800; }
.case__flow span { color: var(--ink-2); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) { .case__flow li { grid-template-columns: 1fr; gap: 2px; } }

/* Missing information, drawn the way a log shows an interval with no recovery */
.placeholder { padding: 18px 22px; padding-inline-start: 46px; font-size: 15px; color: var(--ink-2); border: 1px dashed var(--rule-strong); background: var(--sym-diag) left 0 top 0 / 26px 100% no-repeat, var(--panel); }
html[dir="rtl"] .placeholder { background-position: right 0 top 0, 0 0; }
.placeholder strong { display: block; color: var(--ink); margin-bottom: 4px; }
.ph-text { padding: 0 5px; border-bottom: 1px dashed currentColor; background: var(--panel); white-space: nowrap; }
@media (max-width: 700px) { .ph-text { white-space: normal; overflow-wrap: anywhere; } }
.ph-image { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 0; font-size: 13px; color: var(--ink-2); border: 1px dashed var(--rule-strong); background: var(--sym-diag) left 0 top 0 / 100% calc(100% - 44px) no-repeat, var(--panel); line-height: 44px; padding-inline: 16px; }
.ph-image--wide { aspect-ratio: 16 / 9; }

/* Process: five steps on one line */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--rule-strong); }
.steps li { counter-increment: s; padding: 22px 20px 0 0; padding-inline: 0 20px; position: relative; }
.steps li::before { content: counter(s); display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--accent-ink); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.steps li::after { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; background: var(--geo-gold); }
.steps h3 { font-size: 18px; margin-bottom: 8px; }
.steps p { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; border-top: 0; border-inline-start: 1.5px solid var(--rule-strong); }
  .steps li { display: grid; grid-template-columns: 52px 1fr; padding: 0 0 26px; padding-inline-start: 22px; }
  .steps li::before { grid-row: span 2; font-size: 32px; margin: 0; }
  .steps li::after { top: 10px; inset-inline-start: -5px; }
}

/* Equipment plates */
.equip-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 72px; align-items: end; margin-bottom: 40px; }
.equip-head h2 { margin-bottom: 8px; } .equip-head .lead { margin: 0; }
.plates { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; }
.plates .photo:first-child { grid-row: span 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.plates .photo:first-child img { height: 100%; object-fit: cover; object-position: right bottom; }
@media (max-width: 800px) { .equip-head, .plates { grid-template-columns: 1fr; } .plates .photo:first-child { grid-row: auto; display: block; } .plates .photo:first-child img { height: auto; } }

/* Sectors */
.sectors { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--rule-strong); }
.sectors li { padding: 22px 20px 0 0; padding-inline: 0 20px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
html[lang="ar"] .sectors li { letter-spacing: 0; font-weight: 700; line-height: 1.5; }
.sectors li span { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) { .sectors { grid-template-columns: 1fr 1fr; row-gap: 12px; } }
@media (max-width: 480px) { .sectors { grid-template-columns: 1fr; } }

/* Bearing stratum: the closing call to action (also the closing band of every inner page) */
.cta-band { background: var(--l-rock); color: #fff; padding-block: 96px; --ink: #fff; --ink-2: #D8D4CC; --bg: var(--l-rock); --rule-strong: rgba(255, 255, 255, .8); --hatch: rgba(255, 255, 255, .3); --accent-ink: var(--geo-sand); position: relative; }
.cta-band .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 72px; align-items: center; }
.cta-band h2 { grid-column: 1; margin: 0; font-size: clamp(30px, 3.8vw, 54px); max-width: 20ch; }
.cta-band p { grid-column: 1; margin: 8px 0 0; color: var(--ink-2); max-width: 58ch; }
.cta-band .btn-row { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-direction: column; align-items: stretch; }
.cta-band .btn--outline { color: #fff; border-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .cta-band .btn--gold:hover { background: #fff; border-color: #fff; color: var(--geo-graphite); }
  .cta-band .btn--outline:hover { background: #fff; color: var(--geo-graphite); }
}
main > .cta-band:not(.layer)::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 14px; background: var(--sym-diag); border-inline-end: 1px solid var(--rule-strong); }
@media (max-width: 860px) { .cta-band { padding-block: 64px; } .cta-band .container { grid-template-columns: 1fr; } .cta-band .btn-row { grid-column: 1; grid-row: auto; margin-top: 28px; flex-direction: row; } }

/* =========================================================
   PHOTOGRAPHS AND DIAGRAMS
   ========================================================= */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; background: var(--l-sand-1); border: 1px solid var(--rule-strong); }
.photo figcaption, .figure-caption, .schematic figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.photo__credit { display: block; font-size: 12px; margin-top: 2px; }
.photo--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.schematic { margin: 0; }
.diagram { background: var(--geo-white); color: var(--geo-graphite); border: 1px solid var(--geo-graphite); padding: 12px; max-width: 100%; }
.diagram svg { width: 100%; height: auto; }
.diagram text { font-family: var(--font-latin); }
html[lang="ar"] .diagram text { font-family: var(--font-arabic); }
.diagram__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram--method svg { min-width: 600px; }
.diagram .figure-caption { color: var(--geo-text-muted); }
@media (max-width: 640px) { .diagram--method .figure-caption::after { content: " ↔"; } }

/* =========================================================
   INNER PAGES
   ========================================================= */
.section { padding-block: var(--space); }
.section--tint { background: var(--l-fill); }
.section-head { max-width: 780px; margin-bottom: 44px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: 1fr; gap: 40px; } }

/* Page header: a log header block, with the strata column on its leading edge */
.page-hero { position: relative; background: var(--l-surface); border-bottom: 1.5px solid var(--geo-graphite); padding-block: 44px 60px; padding-inline-start: 14px; }
.page-hero::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 14px; background: var(--sym-dots); border-inline-end: 1px solid var(--geo-graphite); }
.page-hero h1 { max-width: 20ch; margin-bottom: 18px; }
.page-hero .lead { max-width: 62ch; }
.page-hero__grid { display: block; }
.page-hero--photo .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.page-hero--photo h1 { max-width: none; }
@media (max-width: 900px) { .page-hero--photo .page-hero__grid { grid-template-columns: 1fr; gap: 32px; } }
.breadcrumb { font-size: 13.5px; color: var(--ink-2); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: #8C877F; }
.breadcrumb a { color: var(--ink-2); text-decoration-thickness: 1px; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
@media (pointer: coarse) { .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Lists of methods, services, articles: ruled rows */
.method-rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--rule-strong); }
.method-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); transition: background-color .2s ease, box-shadow .2s ease; }
.method-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.method-row__abbr { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.method-row h3, .method-row h2 { font-size: 21px; margin: 0 0 6px; letter-spacing: -0.015em; }
.method-row p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 78ch; }
@media (hover: hover) and (pointer: fine) {
  .method-row:hover { background: var(--panel); box-shadow: -16px 0 0 var(--panel), 16px 0 0 var(--panel); }
  .layer .method-row:hover, .section .method-row:hover { background: rgba(255, 255, 255, .5); box-shadow: -16px 0 0 rgba(255, 255, 255, .5), 16px 0 0 rgba(255, 255, 255, .5); }
  .section:not(.section--tint) .method-row:hover, .prose .method-row:hover { background: var(--l-surface); box-shadow: -16px 0 0 var(--l-surface), 16px 0 0 var(--l-surface); }
}
@media (max-width: 700px) { .method-row, .method-row--plain { grid-template-columns: 1fr; gap: 6px; } }

/* Tabs (homepage methods) */
.tabs__list { display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; border-bottom: 1.5px solid var(--rule-strong); }
.tabs__tab { flex-shrink: 0; min-height: 52px; padding: 0 15px; white-space: nowrap; font: 700 14.5px var(--font-latin); color: var(--ink-2); background: none; border: 0; border-inline-end: 1px solid var(--rule); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
html[lang="ar"] .tabs__tab { font-family: var(--font-arabic); font-size: 16px; }
.tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tabs__tab:hover:not([aria-selected="true"]) { color: var(--ink); }
.tabs__panel[hidden] { display: none; }
.tabs .method-rows { border-top: 0; }

/* Method page body */
.content-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 72px; align-items: start; }
.content-layout > *, .prose, .prose > section { min-width: 0; }
.toc { position: sticky; top: calc(var(--header-h) + 28px); font-size: 14px; border-top: 1.5px solid var(--geo-graphite); padding-top: 14px; }
.toc__title { font-size: 13px; font-weight: 800; margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 7px 0 7px 14px; padding-inline: 14px 0; border-inline-start: 2px solid var(--rule); text-decoration: none; color: var(--ink-2); font-weight: 500; line-height: 1.35; transition: color .2s ease, border-color .2s ease; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 700; border-inline-start-color: var(--geo-gold); }
@media (max-width: 1000px) { .content-layout { grid-template-columns: 1fr; } .toc { display: none; } }
@media (pointer: coarse) { .toc a { padding-block: 12px; } }

.prose { max-width: 840px; }
.prose > section, .prose article section, article.prose > section { padding-block: 44px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose > section:first-child { border-top: 0; padding-top: 0; }
.prose h2 { font-size: clamp(25px, 2.5vw, 33px); }
.prose h3 { font-size: 19px; margin-top: 28px; }
.prose p, .prose li, .prose dd, .prose .faq { max-width: 66ch; }
.prose .callout p, .prose figure p, .prose td p { max-width: none; }
.prose ul, .prose ol { padding-inline-start: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--geo-earth); font-weight: 700; }
.prose .method-rows { padding: 0; margin: 16px 0 24px; }
.prose .method-rows .method-row { margin: 0; max-width: none; grid-template-columns: 72px minmax(0, 1fr) auto; }
.prose .method-rows .method-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.prose .method-row h3 { margin-top: 0; }
@media (max-width: 700px) { .prose .method-rows .method-row, .prose .method-rows .method-row--plain { grid-template-columns: 1fr; } }
.section-label { display: block; font-size: 13px; font-weight: 800; color: var(--geo-earth); margin-bottom: 8px; }

.check-list { list-style: none; padding: 0 !important; }
.check-list li { position: relative; padding-inline-start: 28px; }
.check-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 14px; height: 3px; background: var(--geo-gold); }
.x-list li::before { width: 9px; height: 9px; top: .5em; background: transparent; border: 2px solid var(--geo-earth); }
.two-col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .two-col-list { grid-template-columns: 1fr; gap: 0; } }
.related-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.related-list li { margin: 0; }
@media (max-width: 700px) { .related-list { grid-template-columns: 1fr; } }

.callout { margin: 24px 0; padding: 18px 22px; font-size: 16px; background: var(--l-fill); border: 1px solid var(--geo-graphite); }
.callout__title { display: block; font-size: 13px; font-weight: 800; color: var(--geo-earth); margin-bottom: 4px; }
.callout p:last-child { margin: 0; }
.callout--draft { padding-inline-start: 46px; background: var(--sym-diag) left 0 top 0 / 26px 100% no-repeat, var(--l-fill); border-style: dashed; }
html[dir="rtl"] .callout--draft { background-position: right 0 top 0, 0 0; }

.stages { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; border: 1px solid var(--geo-graphite); }
.stage { padding: 22px; border-inline-start: 1px solid var(--rule); }
.stage:first-child { border-inline-start: 0; }
.stage__label { font-size: 13px; font-weight: 800; color: var(--geo-earth); }
.stage h3 { margin: 6px 0 8px; font-size: 18px; }
.stage p { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) { .stages { grid-template-columns: 1fr; } .stage { border-inline-start: 0; border-top: 1px solid var(--rule); } .stage:first-child { border-top: 0; } }

.def-list { margin: 0; display: grid; grid-template-columns: 190px 1fr; border-top: 1.5px solid var(--geo-graphite); font-variant-numeric: tabular-nums; }
.def-list dt, .def-list dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.def-list dt { font-weight: 700; padding-inline-end: 16px; }
.def-list dd { color: var(--ink-2); }
@media (max-width: 600px) { .def-list { grid-template-columns: 1fr; } .def-list dt { border-bottom: 0; padding-bottom: 0; } }

.table-wrap { border: 1px solid var(--geo-graphite); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: start; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
.compare th:first-child, .compare td:first-child { border-inline-start: 0; }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { position: sticky; top: var(--header-h); z-index: 1; background: var(--geo-graphite); color: #fff; font-size: 13.5px; font-weight: 700; }
.compare tbody th { width: 18%; font-weight: 700; background: var(--l-fill); }
.compare tbody th small { display: block; margin-top: 4px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 860px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; border-inline-start: 0; }
  .compare tr { border-bottom: 1.5px solid var(--geo-graphite); }
  .compare tr:last-child { border-bottom: 0; }
  .compare td { border-bottom: 1px solid var(--rule); }
  .compare td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 800; color: var(--geo-earth); margin-bottom: 4px; }
}

.faq { margin-top: 8px; border-top: 1.5px solid var(--geo-graphite); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { position: relative; list-style: none; cursor: pointer; min-height: 44px; padding: 18px 0; padding-inline-end: 44px; font-weight: 700; font-size: 17px; transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; top: 50%; inset-inline-end: 6px; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--geo-earth), var(--geo-earth)) center / 100% 2px no-repeat, linear-gradient(var(--geo-earth), var(--geo-earth)) center / 2px 100% no-repeat; transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 20px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--geo-earth); } }

/* Projects */
.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px; margin-bottom: 40px; background: var(--l-fill); border: 1px solid var(--geo-graphite); }
@media (max-width: 860px) { .filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filters { grid-template-columns: 1fr; } }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 960px) { .project-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } }
.project-card { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.project-card h3 { font-size: 20px; margin: 18px 0 8px; }
.project-card__meta { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.empty-state { text-align: center; padding: 48px 24px 48px; border: 1px dashed var(--geo-graphite); background: var(--sym-diag) left 0 top 0 / 100% 18px no-repeat, var(--sym-diag) left 0 bottom 0 / 100% 18px no-repeat, var(--l-surface); }
.empty-state h2 { font-size: 24px; }
.empty-state p { color: var(--ink-2); max-width: 56ch; margin-inline: auto; }

/* Forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
fieldset.field { border: 0; padding: 0; margin: 0; }
.field label, .field legend { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.field .req { color: var(--geo-earth); }
.field .hint { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); margin: -4px 0 8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 16px var(--font-latin); color: var(--geo-graphite);
  background: var(--geo-white); border: 1px solid var(--geo-graphite); border-radius: 0; transition: box-shadow .2s ease;
}
html[lang="ar"] .field :is(input, select, textarea) { font-family: var(--font-arabic); }
.field textarea { min-height: 150px; resize: vertical; }
.field :is(input, select, textarea):focus { outline: 3px solid var(--geo-gold); outline-offset: 0; box-shadow: none; }
.field input[type="file"] { width: 100%; padding: 16px; font: 15px var(--font-latin); border: 1px dashed var(--geo-graphite); background: var(--l-surface); }
.field .error { display: none; margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--geo-error); }
.field .error::before { content: "! "; font-weight: 800; }
.field.has-error :is(input, select, textarea) { border-color: var(--geo-error); box-shadow: inset 0 0 0 1px var(--geo-error); }
.field.has-error .error { display: block; }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; }
.form-status { grid-column: 1 / -1; padding: 18px 22px; background: var(--l-fill); border: 1px solid var(--geo-graphite); }
.form-status[hidden] { display: none; }
.contact-aside { border-top: 1.5px solid var(--geo-graphite); padding-top: 8px; }
.contact-aside dl { margin: 0; }
.contact-aside dt { font-size: 13px; font-weight: 800; color: var(--geo-earth); margin-top: 18px; }
.contact-aside dd { margin: 4px 0 0; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.contact-actions__note { font-size: 14px; margin: 10px 0 0; }
.contact-map { margin-top: 32px; }
.contact-map__frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--geo-graphite); }
.wa-float { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; background: var(--geo-graphite); color: #fff; border: 2px solid var(--geo-gold); font-weight: 700; font-size: 15px; text-decoration: none; }
.wa-float:hover { background: var(--geo-gold); color: var(--geo-graphite); }
@media (max-width: 560px) { .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wa-float { padding: 0; width: 52px; justify-content: center; } }

/* Glossary */
.glossary-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 0 0 16px; }
.glossary-nav li { margin: 0; max-width: none; }
.glossary-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; font-weight: 700; text-decoration: none; color: var(--geo-graphite); border: 1px solid var(--geo-graphite); transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.glossary-nav a:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .glossary-nav a:hover { background: var(--geo-graphite); color: #fff; } }
.glossary { margin: 0; }
.term { padding: 18px 0; border-top: 1px solid var(--rule); }
.term dt { font-weight: 700; font-size: 18px; }
.term__other { margin-inline-start: 10px; font-weight: 500; font-size: 16px; color: var(--geo-earth); white-space: nowrap; }
.term__other[lang="ar"] { font-family: var(--font-arabic); }
.term__other[lang="en"] { font-family: var(--font-latin); }
.term dd { margin: 6px 0 0; max-width: 66ch; color: var(--ink-2); }
.term dd .text-link { margin-inline-start: 6px; font-size: 14px; white-space: nowrap; min-height: 0; }
@media (pointer: coarse) { .term dd .text-link { min-height: 44px; } }

/* =========================================================
   FOOTER: bedrock
   ========================================================= */
.site-footer { background: var(--l-bed); color: #CFCAC1; padding-block: 72px 32px; font-size: 15px; --hatch: rgba(255, 255, 255, .2); --panel: rgba(255, 255, 255, .07); --accent-ink: var(--geo-sand); }
.site-footer a { color: #E9E4DA; text-decoration: none; }
.site-footer a:hover { color: var(--geo-gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.footer-brand .brand { color: #fff; margin-bottom: 20px; }
.footer-brand p { max-width: 36ch; }
.site-footer h2 { font-size: 14px; font-weight: 800; letter-spacing: 0; color: var(--geo-sand); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer .ph-text { border-color: #8C877F; color: var(--geo-sand); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 13px; color: #A39E95; }
.footer-legal { display: inline-flex; gap: 24px; }
.footer-bottom a { color: #CFCAC1; text-decoration: underline; text-decoration-color: #5A5650; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (pointer: coarse) { .site-footer li { margin-bottom: 0; } .site-footer li a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- Motion preferences and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
}
@media print { .log__rail, .wa-float, .prototype-bar, .site-header .nav, .menu-toggle { display: none; } .layer { padding-inline-start: 0; } .layer::before { display: none; } }

/* =========================================================
   INNER PAGES, SECOND PASS (7 October 2026)
   ========================================================= */
.photo picture { display: contents; }   /* WebP with JPEG fallback: the wrapper takes no part in the layout */

/* Each service family carries its strata symbol from the homepage onto its own pages:
   in the column on the leading edge of the page header and as a swatch beside the breadcrumb. */
.page-hero[data-family]::before { width: 22px; }
.page-hero[data-family] { padding-inline-start: 22px; }
.page-hero[data-family="1"] { --sym: var(--sym-dots); }
.page-hero[data-family="2"] { --sym: var(--sym-diag); }
.page-hero[data-family="3"] { --sym: var(--sym-rings); }
.page-hero[data-family="4"] { --sym: var(--sym-lines); }
.page-hero[data-family="5"] { --sym: var(--sym-cross); }
.page-hero[data-family]::before { background: var(--sym); }
.page-hero[data-family] .breadcrumb { position: relative; padding-inline-end: 52px; min-height: 50px; display: flex; align-items: center; padding-bottom: 12px; }
.page-hero[data-family] .breadcrumb::after { content: ""; position: absolute; inset-inline-end: 0; top: 0; width: 38px; height: 38px; border: 1px solid var(--geo-graphite); background: var(--sym); }
@media (max-width: 767px) { .page-hero[data-family]::before { width: 14px; } .page-hero[data-family] { padding-inline-start: 14px; } }

/* Services page: the same symbols beside each family */
.method-rows > .method-row--plain[id] { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; }
.method-rows > .method-row--plain[id]::before { content: ""; width: 44px; height: 44px; border: 1px solid var(--geo-graphite); background: var(--sym-dots); }
.method-rows > [id="piling"]::before { background: var(--sym-diag); }
.method-rows > [id="reinforcement-stabilization"]::before { background: var(--sym-rings); }
.method-rows > [id="excavation-support"]::before { background: var(--sym-lines); }
.method-rows > [id="testing-verification"]::before { background: var(--sym-cross); }
@media (max-width: 700px) { .method-rows > .method-row--plain[id] { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; } .method-rows > .method-row--plain[id]::before { width: 36px; height: 36px; grid-row: span 2; } .method-rows > .method-row--plain[id] > .text-link { grid-column: 2; } }

/* Method rows with a small photograph (family pages, ground-problem pages, homepage tabs) */
.method-row--thumb { grid-template-columns: 128px 84px minmax(0, 1fr) auto; }
.method-row--thumb.method-row--plain { grid-template-columns: 128px minmax(0, 1fr) auto; }
.prose .method-rows .method-row--thumb { grid-template-columns: 112px 64px minmax(0, 1fr) auto; }
.prose .method-rows .method-row--thumb.method-row--plain { grid-template-columns: 112px minmax(0, 1fr) auto; }
.method-row__thumb { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--rule-strong); overflow: hidden; background: var(--panel); }
.method-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.method-row__thumb--none { border-style: dashed; background: var(--sym-diag); }
.method-row--thumb .method-row__abbr { font-size: 22px; }
@media (max-width: 700px) {
  .method-row--thumb, .method-row--thumb.method-row--plain, .prose .method-rows .method-row--thumb, .prose .method-rows .method-row--thumb.method-row--plain { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .method-row--thumb > :not(.method-row__thumb) { grid-column: 2; }
  .method-row--thumb .method-row__thumb { grid-row: 1 / span 3; }
}

/* Reading pages line up with their heading instead of floating in the middle of the sheet */
.prose[style] { margin-inline: 0 !important; }

/* Phones and tablets: the "On this page" list becomes a strip that stays under the header */
@media (max-width: 1000px) {
  .toc { display: block; position: sticky; top: var(--header-h); z-index: 6; margin: 0 calc(-1 * var(--gutter)) 32px; padding: 0; background: var(--geo-white); border-top: 0; border-bottom: 1.5px solid var(--geo-graphite); }
  .toc__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .toc ol { display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-inline: calc(var(--gutter) - 12px); }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc a { white-space: nowrap; padding: 15px 12px 12px; border: 0; border-bottom: 3px solid transparent; font-size: 14px; }
  .toc a.is-active { border-inline-start-color: transparent; border-bottom-color: var(--geo-gold); }
  .content-layout { gap: 0; }
  .section:has(> .content-layout) { padding-top: 0; }
  .prose > section { scroll-margin-top: calc(var(--header-h) + 64px); }
}

/* Glossary: the A to Z row stays in reach on wide screens */
@media (min-width: 900px) {
  .glossary-nav { position: sticky; top: var(--header-h); z-index: 5; background: var(--geo-white); padding-block: 12px 0; border-bottom: 1.5px solid var(--geo-graphite); margin-bottom: 8px; }
  .glossary-nav ul { margin-bottom: 12px; }
  .glossary .term, .prose h2[id] { scroll-margin-top: calc(var(--header-h) + 84px); }
}

/* Printing a method page: the content only, on white */
@media print {
  .site-header, .site-footer, .cta-band, .toc, .diagram__replay, .btn-row, .prototype-bar, .glossary-nav, .breadcrumb::after, .page-hero::before { display: none !important; }
  body { font-size: 10.5pt; }
  .page-hero { background: none; padding: 0 0 12pt; border-bottom: 1pt solid #000; }
  .section { padding-block: 14pt; }
  .content-layout { display: block; }
  .prose { max-width: none; }
  .prose > section { padding-block: 12pt; }
  .diagram, .stages, .callout, .compare tr, .faq details { break-inside: avoid; }
  .faq details > div { display: block; }
  a { text-decoration: none; }
}

/* =========================================================
   FIXES FROM THE 7 OCTOBER 2026 REVIEW
   ========================================================= */
/* The narrowest phones (320 px): the logo, language link and menu button all stay on screen */
@media (max-width: 380px) {
  .site-header .container { gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand__icon { width: 34px; }
  .brand__name { font-size: 19px; }
  .brand__ar { font-size: 19px; }
  .site-header .lang-switch { padding: 0 2px; font-size: 13px; }
  .lang-switch span { margin-inline: 3px; }
  .menu-toggle { margin-inline-start: 2px; }
}
/* Glossary: the term in the other language may wrap on small screens */
@media (max-width: 560px) { .term__other { white-space: normal; display: inline-block; margin-inline-start: 0; } .term dt { overflow-wrap: anywhere; } }
/* Breadcrumb links: a comfortable target for a mouse as well as a finger */
.breadcrumb ol { gap: 2px 8px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 2px; }
@media (pointer: coarse) { .breadcrumb a { min-height: 44px; } }   /* fingers still get the full 44 px */
/* Narrowest phones: buttons stack and may wrap, so nothing is pushed past the screen edge */
@media (max-width: 480px) { .cta-band .btn-row { flex-direction: column; align-items: stretch; } }
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; padding-block: 10px; line-height: 1.25; } }
.diagram__scroll:focus-visible { outline: 3px solid var(--geo-gold); outline-offset: 2px; }

/* V5: links on dark grounds turn Gold on hover (Earth on Graphite was 2.2:1) */
.site-footer a:hover, .cta-band a:hover, .layer--rock a:hover, .layer--earth-1 a:hover, .layer--earth-2 a:hover, .layer--earth-3 a:hover { color: var(--geo-gold); }

/* =========================================================
   V5: CORPORATE ENGINEERING (16 October 2026)
   The owner found the borehole theme unprofessional. This layer keeps every component and behaviour of V3
   and changes its look: white and off-white pages, light dividers, no strata symbols, no depth rail,
   real photographs and the method diagrams as the visuals. Brand colours, type and logo unchanged.
   ========================================================= */
:root {
  --line: #E4DED4;            /* light divider, replaces the 1.5 px Graphite rules */
  --tint: #F7F5F1;            /* off-white band */
  --rule: var(--line); --rule-strong: var(--line); --panel: var(--tint);
  --sym-dots: none; --sym-dots-wide: none; --sym-lines: none; --sym-cross: none; --sym-rings: none; --sym-diag: none; --sym-dash: none;
  --space: 112px; --header-h: 84px;
}
@media (max-width: 767px) { :root { --space: 72px; --header-h: 68px; } }

/* Header: white, one light line, the current page marked in Gold */
.site-header { border-bottom: 1px solid var(--line); }
.dropdown { border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(31, 31, 31, .10); }
.lang-switch { border-inline-start-color: var(--line); }
.menu-toggle { border-color: var(--line); }
.prototype-bar { background: var(--geo-graphite); }

/* Homepage bands */
.band { padding-block: var(--space); background: var(--geo-white); }
.band--tint { background: var(--tint); }
.band--hero { padding-block: 64px 72px; }
.band__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 72px; align-items: end; margin-bottom: 48px; }
.band__head h2, .band__head .lead { margin: 0; }
@media (max-width: 900px) { .band__head { grid-template-columns: 1fr; margin-bottom: 36px; } }

/* Opening: headline and actions beside one real site photograph */
.opening { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; padding-top: 0; }
.opening h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.opening h1 .accent { color: var(--geo-earth); }
.photo--hero { margin: 0; }
.photo--hero img { aspect-ratio: 4 / 3; object-fit: cover; border: 0; }
@media (max-width: 1000px) { .opening { grid-template-columns: 1fr; gap: 40px; } .photo--hero { max-width: 640px; } }

/* Facts strip under the opening */
.facts { background: var(--geo-white); border-block: 1px solid var(--line); }
.sheet--strip { border-bottom: 0; }
.sheet--strip > div { padding: 26px 28px; border-inline-start: 1px solid var(--line); }
.sheet--strip > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.sheet--strip dt { font-size: 18px; }
@media (max-width: 900px) { .sheet--strip > div { border-top: 1px solid var(--line); } .sheet--strip > div:nth-child(-n+2) { border-top: 0; } }
.statement { font-size: clamp(21px, 2.1vw, 28px); font-weight: 600; max-width: 36ch; margin-bottom: 64px; color: var(--geo-graphite); }

/* Service families: cards with a photograph */
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border: 0; }
.family { display: flex; flex-direction: column; gap: 12px; padding: 0 0 24px; background: var(--geo-white); border: 1px solid var(--line); transition: border-color .2s ease; }
.family::before { display: none; }
.family__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.family__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.family > :not(.family__photo) { margin-inline: 24px; }
.family h3 { margin-top: 8px; font-size: 21px; }
.family p { color: var(--ink-2); font-size: 15.5px; }
.family .text-link { margin-top: auto; }
@media (hover: hover) and (pointer: fine) { .family:hover { background: var(--geo-white); border-color: #CFC6B8; } .family:hover .family__photo img { transform: scale(1.03); } }
@media (max-width: 1000px) { .families { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .families { grid-template-columns: 1fr; } }

/* Principles, problems, sectors: light rules only */
.principles { border-top: 1px solid var(--line); }
.problem-grid { gap: 16px; border: 0; }
.problem-grid li { border: 1px solid var(--line); background: var(--geo-white); }
@media (hover: hover) and (pointer: fine) { .problem-grid a:hover { background: var(--geo-white); box-shadow: inset 0 3px 0 var(--geo-gold); } }
.sectors { border-top: 1px solid var(--line); }
.schematic .diagram { border: 1px solid var(--line); }

/* Quality: the five steps beside the illustrative test trace */
.qa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 64px; align-items: start; }
.qa-grid .steps { grid-template-columns: 1fr; border-top: 0; border-inline-start: 2px solid var(--line); }
.qa-grid .steps li { display: grid; grid-template-columns: 56px 1fr; padding: 0 0 28px; padding-inline-start: 24px; }
.qa-grid .steps li::before { grid-row: span 2; font-size: 30px; margin: 0; color: var(--geo-earth); }
.qa-grid .steps li::after { top: 8px; inset-inline-start: -6px; width: 10px; height: 10px; }
.trace { border: 1px solid var(--line); }
.trace__head, .trace__plot { border-color: var(--line); }
@media (max-width: 900px) { .qa-grid { grid-template-columns: 1fr; gap: 40px; } .trace--side { max-width: 360px; } }

/* Equipment: two photographs side by side */
.plates { grid-template-columns: 1fr 1fr; }
.plates .photo:first-child { grid-row: auto; display: block; }
.plates .photo:first-child img { height: auto; }
.photo img { border: 0; }

/* Inner page headers: off-white, generous, no strata column or swatch */
.page-hero, .page-hero[data-family] { background: var(--tint); border-bottom: 0; padding-block: 48px 72px; padding-inline-start: 0; }
.page-hero::before, .page-hero[data-family]::before, .page-hero[data-family] .breadcrumb::after { display: none; }
.page-hero[data-family] .breadcrumb { padding-inline-end: 0; min-height: 0; display: block; }
.breadcrumb { border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
.page-hero--photo .photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Rows, lists and the reading column: light dividers */
.method-rows, .toc, .faq { border-top-width: 1px; border-top-color: var(--line); }
.method-rows > .method-row--plain[id] { grid-template-columns: minmax(0, 1fr) auto; }
.method-rows > .method-row--plain[id]::before { display: none; }
.method-row__thumb { border: 0; }
.method-row__thumb--none { border: 0; background: var(--tint); }
.tabs__list { border-bottom: 1px solid var(--line); }
.tabs__tab { border-inline-end-color: var(--line); }

/* Notes, placeholders, boxes */
.placeholder { padding-inline-start: 22px; border: 1px solid var(--line); background: var(--tint); }
.ph-image { border: 1px solid var(--line); background: var(--tint); }
.empty-state { border: 1px solid var(--line); background: var(--tint); }
.callout { background: var(--tint); border: 0; border-inline-start: 3px solid var(--geo-gold); }
.callout--draft { padding-inline-start: 22px; background: var(--tint); border-style: solid; }
.stages, .diagram, .table-wrap, .filters, .form-status, .glossary-nav a { border-color: var(--line); }
.def-list, .contact-aside { border-top: 1px solid var(--line); }
.filters, .form-status { background: var(--tint); }
.tag { border-color: #CFC6B8; }

/* Closing band: plain Graphite */
main > .cta-band:not(.layer)::before { display: none; }
.cta-band { padding-block: 104px; }

/* V5: the test trace sits lower on the page now, so its gold line draws when the chart comes into view,
   not at page load (v3.js adds .is-in). Without the script the line is simply drawn. */
.trace__after { animation: none; }
.trace.is-in .trace__after { animation: trace-draw 1.8s var(--ease-out) .15s backwards; }