/* ============================================================================
   IBIX base — the non-negotiables, pre-solved.
   Start every new client site with this file, then layer the site's own theme
   on top. Every rule here exists because its absence shipped a real bug on a
   real client site; the comment names which one. Don't delete a rule without
   reading its comment.

   Pair it with the guardrail check:   python "IBIX Studio/qa/qa.py" <url>
   ========================================================================= */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
* { margin: 0; padding: 0 }

/* `height:auto` is load-bearing. An <img> carrying width/height attributes
   (good practice for CLS) whose only CSS is max-width:100% renders VERTICALLY
   STRETCHED below its natural width — object-fit defaults to `fill`, so a
   1280x720 photo draws as 350x720 on a phone. Desktop looks perfect, which is
   why it hides for weeks. Ajyal fleet photo + East Hope, both owner-caught. */
img, video, svg { max-width: 100%; height: auto; display: block }

/* Scoped rules that set an explicit height (cover-fit heroes, logo tiles) are
   more specific and still win — that is intentional. */

input, button, textarea, select { font: inherit; color: inherit }
a { color: inherit; text-decoration: none }

/* --- layout safety -------------------------------------------------------- */

/* No horizontal scroll at ANY width. Wide things scroll inside their own box. */
html { overflow-x: hidden }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased }
table, pre { max-width: 100% }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* NEVER style bare landmarks — a page has more than one <nav>, <header>,
   <footer>, <section>. `nav{position:fixed}` on IBIX's own site also hit the
   FOOTER's <nav class="footer-links"> and pinned it to the top of the viewport.
   Scope to an id/class instead. This comment is the rule; there is deliberately
   no `nav{}` block here. */

/* A portable component must reset its own landmarks so it survives being
   dropped into a page whose CSS you haven't audited. */
#site-footer nav { max-width: none; margin: 0; padding: 0; display: block }

/* --- controls ------------------------------------------------------------- */

/* A header CTA that wraps to two lines grows taller than the fixed nav row, so
   it stops matching its neighbours and reads as "misaligned and a different
   size" — the owner's exact words on East Hope. The cause is the wrap, not the
   alignment. nowrap is the fix, and it belongs in the BASE rule. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; line-height: 1.15; cursor: pointer;
  border: 1.5px solid transparent; transition: .18s;
}

/* Full-screen hero headline: size it by the SMALLER of viewport width AND height.
   A width-only headline (e.g. font-size:12vw) grows so tall on a wide-but-short
   laptop that it pushes the sub-head + CTA below the fold — the hero looks broken
   and the primary button disappears (Ajyal immersive demo; qa.py `hero-fit` catches
   it). The min(_vw,_vh) makes it stay dramatic on tall screens but fit short ones.
   Use .hero-display on the headline, or copy the min() pattern with your own values. */
.hero-display { font-size: clamp(2.5rem, min(11vw, 15vh), 8rem); line-height: .98 }
/* and trim a 100vh hero's vertical padding on short laptops so the CTA stays visible */
@media (max-height: 820px) {
  .hero-fit-pad { padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(28px, 5vh, 60px) }
}

/* WCAG 2.2 AA (2.5.8) target size. Cheap to honour, awkward to retrofit. */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], input[type="submit"] { min-height: 24px }
  /* Only ever set `cursor` in a blanket a,button rule. Setting
     `pointer-events:auto` here re-enables links inside CLOSED overlays
     (opacity:0 + pointer-events:none), creating invisible tap targets that
     open random pages. IBIX shipped exactly that for weeks. */
  * { -webkit-tap-highlight-color: transparent }
}

/* Note the SPACES in the media query above: writing the combinator "and" with
   NO space before the next "(" makes the whole query DEAD in every browser —
   the parser reads it as a function token. IBIX's tablet layout silently never
   applied for months. (Described in words so this comment can never
   false-positive qa.py's dead-query scan when the file is inlined.) */

/* --- degradation: never ship a blank page --------------------------------- */

/* Reveal-on-scroll hides content until JS runs. Gate it on html.js (set by a
   pre-paint inline script) so that if JS is off, blocked, or main.js 404s, the
   content is simply visible instead of the whole page being blank.
   Put this in <head> of every page, BEFORE the stylesheet:
       <script>document.documentElement.classList.add('js');</script> */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: .6s ease }
html.js .reveal.in { opacity: 1; transform: none }

/* Reduced-motion users must SEE the content, not a blank page. Both selectors
   are listed because `html.js .reveal` (0,2,0) outranks a bare `.reveal`
   (0,1,0) — gating the hide silently disabled this override on East Hope. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, .reveal { opacity: 1; transform: none; transition: none }
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important }
}

/* Belt and braces for the no-JS case: in every page's <head>, wrap the rule
   .reveal{opacity:1!important;transform:none!important} in noscript+style tags.
   (Spelled out in WORDS on purpose — a literal closing style tag inside this
   comment TERMINATES the <style> element whenever this file is inlined into a
   single-file build, spilling the rest of the stylesheet onto the page as
   visible text. Found live on the ACME demo build 2026-07-26.) */

/* --- mobile menu scroll lock ---------------------------------------------- */

/* `body{overflow:hidden}` is a NO-OP on any site with `html{overflow-x:hidden}`
   — per CSS overflow propagation the viewport takes its scrolling from the root,
   and body's overflow is only propagated when html computes to `visible`. The
   class applies, and nothing happens. This position-fixed lock is the only one
   that works here AND on iOS Safari. Drive it from JS: store scrollY, set
   body.style.top = -y, restore with scrollTo(0, y) on release. Use an
   owner-keyed lock (lock('menu') / lock('about')) — one overlay opening from
   another otherwise strands the lock forever. */
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden }

/* --- cross-browser -------------------------------------------------------- */

/* Safari needs the -webkit- twin or the effect silently does nothing. */
.glass {
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}
/* Blur is expensive: a grid of many blurred panels janks mid-range Android,
   which is what Gulf clients actually browse on. Drop it at phone widths. */
@media (max-width: 720px) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass { background-color: rgba(20, 52, 79, .82) }
}

/* Firefox ignores ::-webkit-scrollbar entirely — ship both. On a light design a
   default scrollbar reads as a "dark strip" bug to clients, so style it. */
html { scrollbar-width: thin; scrollbar-color: #CBC4B8 transparent }
::-webkit-scrollbar { width: 11px; height: 8px }
::-webkit-scrollbar-thumb { background: #CBC4B8; border-radius: 9px }

/* Decorative fixed canvases NEVER take pointer events — a fixed canvas never
   scrolls away, so it floats over every section and swallows taps in dead
   zones, sending users to random pages. */
canvas[data-decorative] { pointer-events: none }

/* --- RTL / bilingual ------------------------------------------------------ */

/* letter-spacing breaks Arabic letter joining outright. */
[dir="rtl"] * { letter-spacing: normal !important }
/* Latin display faces (Bebas, Archivo, Saira) have NO Arabic glyphs, so Arabic
   headings silently fall back to an ugly default. Same trap for Cyrillic. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--body) }
/* Carousel tracks need LTR geometry with RTL content inside. */
[dir="rtl"] .carousel-track { direction: ltr }

/* --- print ---------------------------------------------------------------- */
@media print {
  .no-print, .wa-float, .cookie-banner { display: none !important }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em }
}

/* ============================================================================
   END IBIX BASE — AJYAL FLAGSHIP THEME BELOW
   ========================================================================= */

/* --- fonts (self-hosted, variable latin subsets + Arabic 400) ------------- */
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-var-latin.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;
}

/* --- tokens ---------------------------------------------------------------- */
:root{
  --ink:#0B0C0E;            /* shell */
  --ink-2:#101216;          /* raised dark panel */
  --ink-3:#16181D;          /* card on dark */
  --pit:#060708;            /* deepest band (route) */
  --paper:#F4F2ED;          /* light reading band */
  --paper-2:#EAE7E0;
  --txt:#EDEDEA;            /* on dark */
  --txt-dim:#A2A6AD;        /* on dark, muted (7.5:1 on ink) */
  --txt-faint:#83878E;      /* on dark, decorative only */
  --ink-txt:#17181B;        /* on paper */
  --ink-dim:#54575D;        /* on paper, muted (6.9:1) */
  --crimson:#C0181D;        /* fills / buttons (white on it = 6.2:1) */
  --crimson-hi:#E8564E;     /* text accent on dark (5.2:1) */
  --line:rgba(255,255,255,.13);
  --line-ink:rgba(23,24,27,.16);
  --display:'Schibsted Grotesk','Segoe UI',Arial,sans-serif;
  --body:'Figtree','Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SF Mono',Consolas,'Liberation Mono',monospace;
  --ar:'IBM Plex Sans Arabic',var(--body);
  --ease:cubic-bezier(.23,.68,.16,1);   /* single house ease token */
  --gut:clamp(20px,4.5vw,64px);
  --wrap:1280px;
}

/* View Transitions — progressive enhancement for the future multi-page site.
   Chrome/Edge 126+ & Safari 18.2+ crossfade page navigations; everyone else
   gets a normal navigation. One rule, zero risk. */
@view-transition{ navigation:auto }

html{ scrollbar-color:#3E4248 var(--ink) }
::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:#3E4248; border-radius:9px; border:3px solid var(--ink); background-clip:padding-box }

body{
  background:var(--ink); color:var(--txt);
  font-family:var(--body); font-size:1rem; line-height:1.62;
  font-optical-sizing:auto;
}
::selection{ background:var(--crimson); color:#fff }
:focus-visible{ outline:2px solid var(--crimson-hi); outline-offset:3px }

h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.04 }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut) }
.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase }

.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--crimson-hi); display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.kicker::after{ content:""; height:1px; width:64px; background:currentColor; opacity:.5 }
.on-paper .kicker{ color:var(--crimson) }

/* buttons */
.btn{ font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:15px 28px; border-radius:3px; min-height:48px }
.btn-crimson{ background:var(--crimson); color:#fff }
.btn-crimson:hover{ background:#A31217; transform:translateY(-1px) }
.btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }
.btn-ink{ border-color:var(--ink-txt); color:var(--ink-txt) }
.btn-ink:hover{ background:var(--ink-txt); color:var(--paper) }

/* JS-armed reveal (hardened pattern: the hide class exists only under
   html.rv-armed, which JS adds ONLY when IntersectionObserver exists) */
html.rv-armed .rv{ opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease) }
html.rv-armed .rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  html.rv-armed .rv{ opacity:1 !important; transform:none !important; transition:none }
}

/* =========================================================== header */
#top-bar{ position:fixed; top:0; left:0; right:0; z-index:700;
  transition:background .35s var(--ease), border-color .35s var(--ease) }
#top-bar.solid{ background:rgba(11,12,14,.88); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.tb-in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ display:flex; flex-direction:column; line-height:1.05 }
.brand .b-en{ font-family:var(--display); font-weight:800; font-size:1.06rem; letter-spacing:.02em; color:#fff }
.brand .b-en b{ color:var(--crimson-hi); font-weight:800 }
.brand .b-ar{ font-family:var(--ar); font-size:.66rem; color:var(--txt-dim); margin-top:1px }
.tb-nav{ display:flex; gap:30px }
.tb-nav a{ font-family:var(--display); font-weight:500; font-size:.9rem; color:var(--txt-dim);
  padding:8px 0; position:relative; transition:color .2s var(--ease) }
.tb-nav a::after{ content:""; position:absolute; left:0; bottom:2px; height:1.5px; width:0;
  background:var(--crimson-hi); transition:width .3s var(--ease) }
.tb-nav a:hover{ color:#fff }
.tb-nav a:hover::after{ width:100% }
.tb-right{ display:flex; align-items:center; gap:14px }
.tb-cta{ padding:11px 20px; min-height:42px; font-size:.86rem }
.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:7px }
.burger span{ display:block; width:24px; height:2px; background:#fff; transition:.3s var(--ease) }
.burger.x span:nth-child(1){ transform:translateY(4.5px) rotate(45deg) }
.burger.x span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg) }

/* reading-progress hairline — CSS scroll-driven (Chrome 115+/FF 132+/Safari 26);
   where unsupported it stays at scaleX(0) = invisible. JS fallback deliberately
   skipped (research §6.9: cheap currency signal, not load-bearing). */
.progress-hairline{ position:absolute; top:0; left:0; height:2px; width:100%;
  background:var(--crimson); border-radius:0 999px 999px 0;
  transform:scaleX(0); transform-origin:0 50% }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()) {
    .progress-hairline{ animation:ajyal-grow-x linear both; animation-timeline:scroll(root) }
  }
}
@keyframes ajyal-grow-x{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* =========================================================== mobile menu */
#menu{ position:fixed; inset:0; z-index:650; background:#08090A;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  display:flex; align-items:center }
#menu.open{ opacity:1; visibility:visible }
.menu-in{ width:100%; max-width:var(--wrap); margin:0 auto; padding:96px var(--gut) 48px }
.menu-links{ display:flex; flex-direction:column; gap:4px }
.menu-links a{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,6.5vw,2.6rem);
  letter-spacing:-.02em; color:var(--txt); padding:7px 0; display:flex; align-items:baseline; gap:16px }
.menu-links a i{ font-style:normal; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--crimson-hi) }
.menu-links a:hover{ color:var(--crimson-hi) }
.menu-meta{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 28px; color:var(--txt-dim); font-size:.9rem }
.menu-meta a{ color:var(--txt); font-weight:600; padding:4px 0 }

/* =========================================================== hero — Aramco-style slider */
/* 2026-07-28, owner-locked spec. 4 full-viewport slides, auto-advance 7s
   (SLIDE_MS in main.js — keep the hs-fill animation duration in lockstep),
   weighted crossfade + small text rise, bottom tab-strip with a crimson
   progress bar (slim dashes under 768px). Slide 1 ships with .on in the
   markup, so no JS / a failed main.js / reduced-motion all get a fully
   visible static hero. Inactive slides are visibility:hidden — out of the
   a11y tree AND the keyboard tab order (house lesson 2026-07-28: opacity:0
   alone leaves controls focusable). Auto-advance NEVER pauses on mouse hover
   (house lesson 2026-07-21: the cursor lives on a 100vh hero — hover-pause
   freezes it permanently); keyboard focus inside the hero is the only pause.
   HERO GRADE RECIPE for the commissioned hi-res photos (per-slide below):
   img filter + optional warm multiply/overlay + the text scrim + hairline
   grid texture. Re-tune object-position anchors when the real shoot lands. */
#hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; background:var(--ink) }
.hero-stage{ position:absolute; inset:0 }
.hs-slide{ position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; z-index:1;
  transition:opacity .95s var(--ease), visibility .95s }
.hs-slide.on{ opacity:1; visibility:visible; z-index:2 }
/* the outgoing slide holds at full opacity UNDER the incoming fade (weighted
   crossfade, no dark dip against the ink background); JS drops .was ~1s later */
.hs-slide.was{ opacity:1; visibility:visible; z-index:1; transition:none }
.hs-media{ position:absolute; inset:0; overflow:hidden }
.hs-media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); transition:transform 2.6s var(--ease) }
.hs-slide.on .hs-media img{ transform:scale(1) }
/* slide-1 load settle — one-shot; the keyframe has no fill so it hands back to
   the stylesheet cleanly; reduced-motion collapses it via the base .001ms rule */
.hs-first.on .hs-media img{ animation:hs-settle 3.2s var(--ease) }
@keyframes hs-settle{ from{ transform:scale(1.06) } }
/* text scrim — radial "pool" behind the copy + left column + bottom anchor
   (for the tab strip) + top fade (for the header) */
.hs-scrim{ position:absolute; inset:0;
  background:radial-gradient(72% 74% at 10% 50%, rgba(8,7,6,.82), rgba(8,7,6,0) 56%),
             linear-gradient(90deg, rgba(8,7,6,.90) 0%, rgba(8,7,6,.20) 42%, rgba(8,7,6,.02) 100%),
             linear-gradient(0deg, rgba(8,7,6,.66) 0%, rgba(8,7,6,0) 26%),
             linear-gradient(180deg, rgba(8,7,6,.6) 0%, rgba(8,7,6,0) 28%) }
.hs-grid{ position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px) }
/* --- per-slide grade + subject-aware crops (stand-in photos) --------------- */
/* 01 rig moving — sunrise haze panorama: already atmospheric, scrim only;
   anchor low to keep the field detail band with the big calm sky above */
.hs-first .hs-media img{ filter:saturate(1.04) contrast(1.05) brightness(.95); object-position:50% 66% }
/* 02 equipment rental — the crane-silhouette sunset (the former single hero,
   grade ported 1:1): mild filter + warm multiply + overlay lift + sun relight */
.hs-rent .hs-media img{ filter:saturate(1.05) contrast(1.04) brightness(.94); object-position:50% 88% }
.hs-rent .hs-media::after{ content:""; position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(126,66,26,.16) 0%, rgba(104,52,20,.18) 55%, rgba(120,58,20,.20) 100%) }
.hs-warm{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
  background:radial-gradient(120% 100% at 72% 24%, rgba(224,146,66,.10), rgba(140,84,38,.05) 55%, rgba(0,0,0,0) 78%) }
/* the crane photo's sun is NEUTRAL white — screen-blend relight (can only
   brighten, so the text scrim is untouched). Desktop only: the phone crop
   moves the sun. Delete when the client's own photo lands. */
@media (min-width:1024px){
  .hs-sun{ position:absolute; left:44.4%; top:84.2%; width:min(26vw,360px); aspect-ratio:1;
    transform:translate(-50%,-50%); pointer-events:none; z-index:1; mix-blend-mode:screen;
    background:radial-gradient(circle, rgba(255,226,178,.92) 0 5.5%, rgba(255,178,92,.60) 11%,
      rgba(255,140,48,.20) 30%, rgba(0,0,0,0) 62%) }
}
/* 03 heavy logistics — oversize float, midday blue: pull it toward dusk */
.hs-log .hs-media img{ filter:saturate(.88) contrast(1.05) brightness(.88); object-position:50% 60% }
/* 04 QHSE — engineer at golden hour: keep the head in frame on the wide crop */
.hs-qhse .hs-media img{ filter:saturate(1.02) contrast(1.03) brightness(.92); object-position:50% 38% }
/* --- slide copy ------------------------------------------------------------ */
.hs-in{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto;
  padding:110px var(--gut) clamp(150px,19vh,190px) }
/* small text rise on activation: children hide via the slide's own visibility
   when inactive; staggered delays only on the way IN */
.hs-in > *{ opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease) }
.hs-slide.on .hs-in > *{ opacity:1; transform:none }
.hs-slide.on .hs-in > :nth-child(1){ transition-delay:.28s }
.hs-slide.on .hs-in > :nth-child(2){ transition-delay:.36s }
.hs-slide.on .hs-in > :nth-child(3){ transition-delay:.44s }
.hs-slide.on .hs-in > :nth-child(4){ transition-delay:.52s }
/* per-slide kicker in the sections' own grammar: crimson index, mono text,
   trailing red hairline */
.hero-heritage{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:14px; margin-bottom:24px }
.hero-heritage i{ font-style:normal; color:var(--crimson-hi); white-space:nowrap }
.hero-heritage::after{ content:""; height:1px; width:64px; background:var(--crimson-hi); opacity:.55 }
.hero-h{ color:#fff; font-size:clamp(2.5rem, min(7.4vw, 10.6vh), 6.6rem); line-height:.94;
  letter-spacing:-.025em; max-width:12.5ch; text-wrap:balance }
.hero-sub{ margin-top:22px; max-width:54ch; color:#D8D6D2; font-size:clamp(1rem,1.35vw,1.14rem);
  line-height:1.7 }
/* ONE quiet Aramco-style link per slide — text + circle-arrow, no buttons */
.hs-link{ display:inline-flex; align-items:center; gap:15px; margin-top:34px;
  color:#fff; font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:.01em }
.hs-link .circ{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  display:grid; place-items:center; font-size:1.15rem; flex:0 0 auto;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease) }
.hs-link:hover .circ{ background:var(--crimson); border-color:var(--crimson); transform:translateX(4px) }
/* --- bottom meta + tab strip ----------------------------------------------- */
/* Aramco-style FREE-STANDING tabs (owner refinement 2026-07-28: "not so
   graph-like" — no connecting border-top hairline, no vertical separators).
   Each tab = label row + its OWN slightly-rounded progress track below it:
   faint track always visible, crimson fill animates along it while active. */
.hero-foot{ position:absolute; z-index:4; left:0; right:0; bottom:0;
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); color:var(--txt-dim) }
.hero-coords{ display:block; text-align:right; padding-bottom:10px }
.hs-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.hs-tab{ position:relative; display:grid; grid-template-columns:auto 1fr;
  align-items:baseline; column-gap:12px; row-gap:13px;
  padding:14px 0 20px; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-dim); transition:color .25s var(--ease) }
.hs-tab:hover, .hs-tab.on{ color:#fff }
.hs-tab-i{ grid-row:1; color:var(--crimson-hi) }
.hs-tab-t{ grid-row:1 }
.hs-bar{ position:relative; grid-column:1/-1; grid-row:2; height:3px; border-radius:999px;
  background:rgba(255,255,255,.18); overflow:hidden; pointer-events:none }
.hs-bar i{ position:absolute; inset:0; border-radius:999px; background:var(--crimson);
  transform:scaleX(0); transform-origin:0 50% }
.hs-tab.on .hs-bar i{ animation:hs-fill 7s linear forwards } /* 7s = SLIDE_MS in main.js */
#hero.hs-paused .hs-tab.on .hs-bar i{ animation-play-state:paused }
@keyframes hs-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
/* tab labels get tight between 768-1023 — shrink rather than wrap */
@media (min-width:768px) and (max-width:1023px){
  .hs-tab{ font-size:.6rem; letter-spacing:.1em; column-gap:8px }
}
/* --- mobile (<768): Aramco's own pattern — labels collapse to slim segmented
   progress dashes at the bottom edge; copy = kicker + headline + quiet link */
@media (max-width:767px){
  .hero-coords{ display:none }
  .hero-sub{ display:none }
  .hs-in{ padding-top:96px; padding-bottom:96px }
  .hs-tabs{ display:flex; gap:10px; padding-bottom:12px }
  /* equal slim segments: flex 1 1 0 + min-width 0 = four equal widths; the
     whole tab stays the tap target (~29px tall) around the 3px track */
  .hs-tab{ flex:1 1 0; min-width:0; display:block; padding:14px 0 12px }
  /* labels stay in the a11y tree (clipped, not display:none) */
  .hs-tab-i, .hs-tab-t{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
  /* .hs-bar must stay position:RELATIVE — the crimson fill <i> is absolute
     inset:0, and a static bar hands its containing block to the whole .hs-tab,
     which painted the active fill as a ~24px red block over the tab (live bug,
     owner-screenshotted, fixed 2026-07-28). Slim rounded track, fill animates
     width inside it via the same hs-fill keyframe. */
  .hs-bar{ position:relative; display:block; height:3px; border-radius:999px;
    background:rgba(255,255,255,.22); overflow:hidden }
}
/* phone-slice crops: anchor each photo on ITS subject (portrait-slice of a
   landscape frame — the default 50% x loses the subject). The crane slide
   shifts right so its NEUTRAL-WHITE sun leaves the phone frame entirely —
   the desktop-only .hs-sun relight can't follow the crop, and an unlit sun
   reads as a grey disc (verified on the 390px screenshot). */
@media (max-width:600px){
  .hs-first .hs-media img{ object-position:36% 62% }
  .hs-rent .hs-media img{ object-position:72% 50% }
  .hs-log .hs-media img{ object-position:64% 55% }
  .hs-qhse .hs-media img{ object-position:60% 40% }
}

/* =========================================================== stats ledger */
#stats{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-top:clamp(56px,8vh,88px); padding-bottom:clamp(56px,8vh,88px) }
.stats-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:40px }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px }
.stat{ border-left:2px solid var(--line); padding-left:22px }
.stat b{ display:block; font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2rem,3.4vw,3.1rem); line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; min-height:1em }
.stat span{ display:block; margin-top:10px; color:var(--txt-dim); font-size:.86rem; line-height:1.5 }
.stat em{ font-style:normal; color:var(--crimson-hi) }

/* =========================================================== about (paper) */
#about{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.about-grid{ display:grid; grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr); gap:clamp(36px,5vw,84px); align-items:start }
.about-copy h2{ font-size:clamp(2rem,3.9vw,3.4rem); max-width:17ch }
.about-lead{ margin-top:26px; font-size:clamp(1.06rem,1.5vw,1.28rem); line-height:1.65; font-weight:500;
  max-width:52ch }
.about-body{ margin-top:18px; color:var(--ink-dim); max-width:58ch }
.cred-rail{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px }
.chip{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-ink); border-radius:999px; padding:9px 16px; color:var(--ink-dim);
  display:inline-flex; align-items:center; min-height:24px }
.about-fig{ position:relative }
figure.clip-rv{ overflow:hidden; border-radius:4px }
figure.clip-rv img{ width:100%; height:auto }
.zoom-slow{ overflow:hidden }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()) {
    .zoom-slow img{ animation:ajyal-slow-zoom linear both; animation-timeline:view();
      animation-range:entry 0% cover 85% }
  }
}
@keyframes ajyal-slow-zoom{ from{ transform:scale(1.09) } to{ transform:scale(1) } }
.fig-cap{ margin-top:12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim); display:flex; gap:12px; align-items:center }
.fig-cap::before{ content:""; width:22px; height:1px; background:var(--crimson) }

/* =========================================================== pinned chapters */
.chapter{ position:relative; background:var(--ink); overflow:hidden }
.ch-media{ position:relative; height:clamp(320px,76vw,660px); overflow:hidden }
.ch-media img{ width:100%; height:100%; object-fit:cover }
.ch-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,8,9,.55), rgba(7,8,9,.1)) }
.ch-in{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  padding:52px var(--gut) 76px }
.ch-copy{ max-width:640px }
.ch-h{ color:#fff; font-size:clamp(1.9rem, min(3.4vw,5.4vh), 3rem); max-width:18ch }
.ch-sub{ margin-top:16px; color:var(--txt-dim); max-width:52ch; font-size:.98rem }
.steps{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:0 }
/* separated short ROUNDED ticks, one per step — Aramco language (owner
   refinement 2026-07-28: no continuous connected rail beside the steps).
   Tick colour rides --tick so the desktop pinned scrub and the mobile
   IO highlight share one mechanism: .act = crimson tick + crimson index. */
.step{ --tick:rgba(255,255,255,.15); position:relative;
  display:flex; gap:18px; align-items:flex-start; padding:13px 0 13px 20px }
.step::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:999px; background:var(--tick); transition:background .35s var(--ease) }
.step.act{ --tick:var(--crimson-hi) }
.step.act .st-i{ color:var(--crimson-hi) }
/* the ACTIVE step's body line brightens — measured: txt-dim over the brightest
   crossfade frames dipped under 4.5:1 on hotspots; this holds it above */
.step.act p{ color:#C9CCD1 }
.step p{ transition:color .35s var(--ease) }
.st-i{ color:var(--txt-faint); padding-top:3px; transition:color .35s var(--ease) }
.step h3{ font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em }
.step p{ margin-top:2px; color:var(--txt-dim); font-size:.87rem; line-height:1.5; max-width:46ch }
.ch-cta{ margin-top:30px }
.ch-cta .mono{ display:block; margin-bottom:14px; color:var(--txt-faint) }

@media (min-width:1024px){
  .chapter{ height:100vh; height:100svh; display:flex; align-items:center }
  .ch-media{ position:absolute; inset:0; height:auto }
  .ch-media img{ transform-origin:center }
  /* copy-side depth raised .87/.60 -> .90/.66 (2026-07-28): the per-step
     crossfade frames include brighter fields than the old single base photo —
     measured active-step text contrast gates this (see refinement banner) */
  .chapter .ch-scrim{ background:linear-gradient(90deg, rgba(7,8,9,.90) 0%, rgba(7,8,9,.66) 42%, rgba(7,8,9,.14) 78%) }
  .chapter--right .ch-scrim{ background:linear-gradient(270deg, rgba(7,8,9,.90) 0%, rgba(7,8,9,.66) 42%, rgba(7,8,9,.14) 78%) }
  .ch-in{ width:100%; padding-top:96px; padding-bottom:44px }
  .chapter--right .ch-in{ display:flex; justify-content:flex-end }
  .step{ padding-top:11px; padding-bottom:11px }
}
@media (min-width:1024px) and (max-height:760px){
  .ch-h{ font-size:clamp(1.7rem,4.6vh,2.4rem) }
  .ch-sub{ margin-top:10px; font-size:.92rem }
  .steps{ margin-top:18px }
  .step{ padding-top:8px; padding-bottom:8px }
  .step::before{ top:9px; bottom:9px }
  .step p{ display:none }
  .ch-cta{ margin-top:18px }
}

/* =========================================================== route band */
#route{ background:var(--pit); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px);
  position:relative; overflow:hidden }
#route::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px) }
.route-head{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:18px; margin-bottom:46px }
.route-head h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.7rem); max-width:22ch }
.route-head .mono{ color:var(--txt-faint) }
.route-svg-wrap{ position:relative; z-index:2 }
#routeSvg{ width:100%; height:auto; display:block }
#routeSvg .rt-path{ fill:none; stroke:var(--crimson-hi); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round }
#routeSvg .rt-ghost{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; stroke-dasharray:3 7; stroke-linejoin:round }
#routeSvg .wp-dot{ fill:var(--pit); stroke:var(--crimson-hi); stroke-width:2 }
#routeSvg .wp-dot--base{ fill:var(--crimson) ; stroke:#fff }
#routeSvg text{ font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; fill:var(--txt-dim); text-transform:uppercase }
#routeSvg text.wp-t{ fill:#fff }
.route-labels-list{ display:none; list-style:none; margin-top:26px; position:relative; z-index:2 }
/* separated rounded ticks — matches the chapter-step language (2026-07-28) */
.route-labels-list li{ font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-dim); padding:9px 0 9px 18px; position:relative }
.route-labels-list li::before{ content:""; position:absolute; left:0; top:11px; bottom:11px;
  width:3px; border-radius:999px; background:var(--line) }
.route-labels-list li b{ color:#fff; font-weight:500 }
@media (max-width:719px){
  #routeSvg text{ display:none }
  .route-labels-list{ display:block }
}

/* =========================================================== fleet register */
#fleet-register{ background:var(--ink);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.reg-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:18px; margin-bottom:34px }
.reg-head h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.7rem) }
.reg-note{ color:var(--txt-dim); font-size:.88rem; max-width:44ch }
.reg-table{ width:100%; border-collapse:collapse; min-width:840px }
.reg-table th{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-faint); text-align:left; font-weight:500; padding:0 18px 14px 0;
  border-bottom:1px solid var(--line) }
.reg-table td{ padding:15px 18px 15px 0; border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--txt-dim); font-size:.92rem; vertical-align:top }
.reg-table td:first-child{ color:#fff; font-family:var(--display); font-weight:600; white-space:nowrap }
.reg-table td.units{ font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; color:var(--crimson-hi); white-space:nowrap }
.reg-table tr:hover td{ background:rgba(255,255,255,.02) }
.reg-foot{ margin-top:22px; color:var(--txt-faint); font-size:.82rem; max-width:70ch }
.reg-foot em{ font-style:normal; color:var(--txt-dim) }

/* =========================================================== image sequence */
#sequence{ background:var(--ink-2); border-top:1px solid var(--line); position:relative; overflow:hidden;
  padding-top:clamp(76px,10vh,120px); padding-bottom:clamp(76px,10vh,120px) }
.seq-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:18px; margin-bottom:36px }
.seq-head h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.7rem) }
.seq-note{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-faint); max-width:38ch; line-height:1.8 }
.seq-stage{ display:none; position:relative }
.seq-frame{ position:relative; border-radius:4px; overflow:hidden; background:#000 }
#seqCanvas{ width:100%; height:100%; display:block }
.seq-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,0) 42%) }
.seq-captions{ position:absolute; left:clamp(18px,3vw,40px); bottom:clamp(52px,7vh,72px); right:clamp(18px,3vw,40px); z-index:3 }
.seq-cap{ position:absolute; left:0; bottom:0; max-width:52ch;
  transition:opacity .45s var(--ease), transform .45s var(--ease) }
/* captions only hide when JS has built the live scrub stage — with no JS or
   reduced-motion nothing sits at opacity:0 (qa.py invisible-no-JS catch) */
#sequence.seq-live .seq-cap{ opacity:0; transform:translateY(10px) }
#sequence.seq-live .seq-cap.on{ opacity:1; transform:none }
.seq-cap b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2vw,1.7rem);
  color:#fff; letter-spacing:-.01em }
.seq-cap span{ display:block; margin-top:6px; color:var(--txt-dim); font-size:.9rem; line-height:1.5 }
.seq-meta{ position:absolute; left:clamp(18px,3vw,40px); right:clamp(18px,3vw,40px); bottom:clamp(18px,3vh,28px);
  z-index:3; display:flex; align-items:center; gap:18px; color:var(--txt-dim) }
/* rounded ends + crimson fill — same indicator language as the hero tabs (2026-07-28) */
.seq-bar{ flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,.18);
  position:relative; overflow:hidden }
.seq-bar i{ position:absolute; inset:0; border-radius:999px; background:var(--crimson);
  transform:scaleX(0); transform-origin:0 50% }
/* live (JS-built, desktop) state */
#sequence.seq-live .seq-stage{ display:block }
#sequence.seq-live .seq-fallback{ display:none }
@media (min-width:1024px){
  #sequence.seq-live{ height:100vh; height:100svh; padding-top:96px; padding-bottom:36px }
  /* the flex chain must run THROUGH .wrap or the stage collapses to 0 height
     (caught by QA 2026-07-27: canvas stuck at its 300x150 default store) */
  #sequence.seq-live > .wrap{ height:100%; display:flex; flex-direction:column; min-height:0 }
  #sequence.seq-live .seq-head{ flex:0 0 auto }
  #sequence.seq-live .seq-wrap-stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
  #sequence.seq-live .seq-stage{ flex:1 1 auto; min-height:0; position:relative }
  #sequence.seq-live .seq-frame{ position:absolute; inset:0 }
}
.seq-fallback .arc{ list-style:none; margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.seq-fallback .arc li{ border-top:2px solid var(--line); padding-top:14px }
.seq-fallback .arc b{ display:flex; gap:10px; align-items:baseline; font-family:var(--display);
  font-weight:700; color:#fff; font-size:.98rem }
.seq-fallback .arc b i{ font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--crimson-hi) }
.seq-fallback .arc p{ margin-top:6px; color:var(--txt-dim); font-size:.85rem; line-height:1.55 }

/* =========================================================== president (paper) */
#president{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.pres-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(36px,5vw,84px); align-items:start }
.pres-port{ position:sticky; top:104px }
.port-ph{ aspect-ratio:4/5; border:1px dashed rgba(23,24,27,.35); border-radius:4px;
  background:var(--paper-2); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px }
.port-ph .mono{ color:var(--ink-txt); letter-spacing:.16em }
.port-ph .dim{ color:var(--ink-dim); font-size:.62rem; text-transform:none; letter-spacing:.08em }
.pres-port figcaption{ margin-top:12px; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim) }
.pres-copy h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:16ch }
.pull{ margin-top:30px; font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,2.15rem); line-height:1.28; max-width:30ch; border-left:3px solid var(--crimson);
  padding-left:clamp(18px,2.5vw,30px) }
.pres-body{ margin-top:26px; color:var(--ink-dim); max-width:60ch }
.signature{ margin-top:28px; font-family:var(--display); font-weight:700; font-size:1.02rem }
.signature small{ display:block; font-family:var(--mono); font-weight:400; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px }
.draft-flag{ margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line-ink); border-radius:3px; padding:8px 12px }
.draft-flag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--crimson); flex:0 0 auto }

/* =========================================================== QHSE */
#qhse{ background:var(--ink); padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.qhse-grid{ display:grid; grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr); gap:clamp(36px,5vw,84px); align-items:start }
.qhse-copy h2{ color:#fff; font-size:clamp(2rem,3.9vw,3.4rem); max-width:14ch }
.qhse-lead{ margin-top:22px; color:var(--txt-dim); max-width:52ch }
.qhse-lead em{ font-style:normal; color:#fff; font-weight:600 }
.qhse-cards{ margin-top:36px; display:flex; flex-direction:column; gap:14px }
.q-card{ background:var(--ink-3); border:1px solid var(--line); border-left:3px solid var(--crimson);
  border-radius:4px; padding:22px 24px }
.q-card h3{ font-size:1.05rem; color:#fff; display:flex; gap:14px; align-items:baseline }
.q-card h3 i{ font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--crimson-hi) }
.q-card p{ margin-top:8px; color:var(--txt-dim); font-size:.9rem; line-height:1.6 }
.qhse-fig .fig-cap{ color:var(--txt-faint) }
.qhse-fig .fig-cap::before{ background:var(--crimson-hi) }

/* =========================================================== credibility (paper) */
#credibility{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.cred-inner{ text-align:left }
.cred-inner h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:24ch }
.cred-sub{ margin-top:18px; color:var(--ink-dim); max-width:56ch }
.cert-rail{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px }
.cred-cta{ margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:18px }
.cred-cta .mono{ color:var(--ink-dim); letter-spacing:.1em; font-size:.64rem }

/* =========================================================== contact */
#contact{ background:var(--ink-2); border-top:1px solid var(--line);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.con-head h2{ color:#fff; font-size:clamp(2rem,3.9vw,3.4rem) }
.con-head p{ margin-top:14px; color:var(--txt-dim); max-width:52ch }
.con-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.con-card{ background:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:26px }
.con-card .mono{ color:var(--crimson-hi); display:block; margin-bottom:14px }
.con-card h3{ color:#fff; font-size:1.06rem }
.con-num{ display:block; margin-top:10px; font-family:var(--display); font-weight:800;
  font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:0; color:#fff;
  font-variant-numeric:tabular-nums }
.con-num:hover{ color:var(--crimson-hi) }
.con-mail{ display:block; margin-top:10px; color:var(--txt); font-weight:600; overflow-wrap:anywhere }
.con-mail:hover{ color:var(--crimson-hi) }
.con-mail + .con-mail{ margin-top:6px }
.con-acts{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap }
.con-acts .btn{ padding:10px 16px; min-height:40px; font-size:.82rem }
.con-office{ margin-top:38px; border-top:1px solid var(--line); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:14px 44px; color:var(--txt-dim); font-size:.9rem }
.con-office b{ color:#fff; font-weight:600 }
.con-office .mono{ color:var(--txt-faint); align-self:center }

/* =========================================================== footer */
#site-footer{ background:var(--pit); border-top:1px solid var(--line);
  padding-top:64px; padding-bottom:34px }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px }
.f-brand .b-en{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:#fff; letter-spacing:.02em }
.f-brand .b-en b{ color:var(--crimson-hi) }
.f-brand .b-ar{ display:block; font-family:var(--ar); color:var(--txt-dim); margin-top:6px; font-size:.85rem }
.f-brand p{ margin-top:16px; color:var(--txt-dim); font-size:.86rem; max-width:34ch }
.f-col h3{ font-family:var(--mono); font-weight:500; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-faint); margin-bottom:16px }
.f-col a{ display:block; color:var(--txt-dim); font-size:.9rem; padding:5px 0; min-height:24px }
.f-col a:hover{ color:#fff }
.foot-legal{ margin-top:48px; border-top:1px solid var(--line); padding-top:22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  color:#8B9098; font-size:.78rem }
.foot-legal a{ color:#8B9098; text-decoration:underline; text-underline-offset:3px }
.foot-legal a:hover{ color:var(--txt) }
.concept-tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase }

/* (WhatsApp float REMOVED 2026-07-28 — owner: "doesn't give off big company
   energy". WhatsApp stays as a normal contact method in #contact's dispatch
   cards. The ibix-base print rule still lists .wa-float — harmless, portable.) */
/* --- media scale + subject-aware framing (owner asked for larger imagery) -------
   The About/QHSE figures are now tall editorial panels rather than small side
   thumbnails, so they hold the frame beside the text. object-fit:cover crops to
   whatever the box isn't, and the default 50% 50% assumes a centred subject —
   these anchor each photo on ITS subject. Re-tune when the real shoot lands. */
.about-fig figure, .qhse-fig figure{ aspect-ratio:4/5 }
.about-fig figure img, .qhse-fig figure img{ width:100%; height:100%; object-fit:cover }
@media (max-width:900px){ .about-fig figure, .qhse-fig figure{ aspect-ratio:4/5 } }
img[src$="stock-rig-site-crew-dusk.webp"]{ object-position:50% 42% }
img[src$="stock-worker-dusk-thumbs-up.webp"]{ object-position:50% 34% }
img[src$="stock-mobile-crane-sunset-yard.webp"]{ object-position:50% 62% }
img[src$="stock-fleet-dump-trucks-desert.webp"]{ object-position:50% 58% }
img[src$="stock-lowbed-backhoe-desert.webp"]{ object-position:50% 55% }
/* second-pass photos (2026-07-28) — anchors verified against each frame's subject:
   Tadano is portrait with a chain-link fence across the bottom ~19% — the square
   tile + 30% Y anchor crops the fence out (LICENSES caveat); refinery plant sits
   in the lower half of its near-square frame; Liebherr aerial subject is slightly
   high of centre. Portacabin + technician are centred subjects in tiles matching
   their natural ratios — no crop, default position is correct there. */
img[src$="stock-tadano-truck-mounted-crane.webp"]{ object-position:50% 30% }
img[src$="stock-refinery-aerial-sunset.webp"]{ object-position:50% 60% }
img[src$="stock-liebherr-all-terrain-crane.webp"]{ object-position:50% 45% }

/* =========================================================== fleet register — marque figure */
.reg-below{ margin-top:26px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:26px 48px; align-items:start }
.reg-below .reg-foot{ margin-top:0 }
.reg-fig figure{ aspect-ratio:16/10; overflow:hidden; border-radius:4px }
.reg-fig figure img{ width:100%; height:100%; object-fit:cover }
.reg-fig .fig-cap{ color:var(--txt-faint) }
.reg-fig .fig-cap::before{ background:var(--crimson-hi) }

/* =========================================================== service index (paper) */
#services{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.svc-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.svc-head h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:22ch }
.svc-head .mono{ color:var(--ink-dim) }
.svc-index{ list-style:none; margin-top:38px; border-bottom:1px solid var(--line-ink) }
.svc-row{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 26px;
  padding-top:24px; padding-bottom:24px; border-top:1px solid var(--line-ink); align-items:start }
.svc-row.has-tile{ grid-template-columns:56px minmax(0,1fr) 200px }
.svc-i{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--crimson);
  align-self:start; padding-top:7px }
.svc-t h3{ font-size:clamp(1.1rem,1.7vw,1.4rem); letter-spacing:-.01em }
.svc-t p{ margin-top:5px; color:var(--ink-dim); font-size:.92rem; line-height:1.55; max-width:58ch }
.svc-tile{ border-radius:3px; overflow:hidden }
.svc-tile img{ width:100%; height:100%; object-fit:cover }
.svc-tile.t-32{ aspect-ratio:3/2 }
.svc-tile.t-43{ aspect-ratio:4/3 }
.svc-tile.t-11{ aspect-ratio:1/1 }
.svc-foot{ margin-top:22px; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim); display:flex; gap:12px; align-items:center }
.svc-foot::before{ content:""; width:22px; height:1px; background:var(--crimson); flex:0 0 auto }

/* =========================================================== responsive */
@media (max-width:1023px){
  .tb-nav{ display:none }
  .burger{ display:flex }
  .tb-cta{ display:none }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px }
  .about-grid,.qhse-grid{ grid-template-columns:1fr }
  .pres-grid{ grid-template-columns:1fr }
  .pres-port{ position:static; max-width:340px }
  .con-grid{ grid-template-columns:1fr }
  .seq-fallback .arc{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .f-brand{ grid-column:1/-1 }
  .reg-below{ grid-template-columns:1fr }
  .reg-fig{ max-width:480px }
}
@media (max-width:700px){
  .svc-row.has-tile{ grid-template-columns:48px minmax(0,1fr) }
  .svc-row{ grid-template-columns:48px minmax(0,1fr) }
  .svc-tile{ grid-column:2; margin-top:14px; max-width:280px }
}
@media (max-width:600px){
  .stats-grid{ grid-template-columns:1fr 1fr; gap:30px 18px }
  .seq-fallback .arc{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr; gap:30px }
}
@media (max-width:480px){
  /* Mobile hero = kicker + headline + quiet link (house lesson 2026-07-20:
     the lead paragraph over a photo reads as a wall on phones; it stays in the
     DOM for desktop — hidden from 767px down, see the slider block). */
  .hero-heritage::after{ display:none }
  .hero-h{ max-width:none }
}
/* ============================================================================
   MULTI-PAGE ADDITIONS — 2026-07-28 phase-1 port (index + 404 + privacy).
   Everything above this banner matches the flagship mock's CSS (bar the
   ../fonts/ url fix) EXCEPT the hero block, which was rebuilt 2026-07-28 as
   the owner-locked Aramco-style slider; below the hero, parity with the mock
   is still the contract.
   ========================================================================= */

/* Seven top-bar links + the CTA get tight between 1024-1180px — tuck the nav in
   rather than let a link wrap (wrap = misaligned header, house lesson). */
@media (min-width:1024px) and (max-width:1180px){
  .tb-nav{ gap:16px }
  .tb-nav a{ font-size:.84rem }
  .tb-cta{ padding:11px 14px }
}

/* --- subpage shell (404 / privacy): static header, no menu apparatus ------- */
.sub-top{ background:var(--ink); border-bottom:1px solid var(--line) }
.sub-top .tb-in{ height:72px }
.sub-back{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-dim); display:inline-flex; align-items:center; gap:10px; min-height:44px }
.sub-back:hover{ color:#fff }
.sub-back::before{ content:"\2190" }
.sub-foot{ background:var(--pit); border-top:1px solid var(--line);
  padding-top:26px; padding-bottom:26px }
.sub-foot .foot-legal{ margin-top:0; border-top:0; padding-top:0 }

/* --- 404: dossier "ref not found" over the route band's hairline grid ------ */
.err-main{ position:relative; overflow:hidden; background:var(--pit);
  min-height:calc(100vh - 72px); min-height:calc(100svh - 72px);
  display:flex; align-items:center;
  padding-top:clamp(64px,10vh,120px); padding-bottom:clamp(64px,10vh,120px) }
.err-main::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px) }
.err-in{ position:relative; z-index:2 }
.err-code{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(4.6rem, min(17vw, 24vh), 10rem); color:#fff }
.err-title{ margin-top:18px; font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  color:#fff; font-size:clamp(1.2rem,2.4vw,1.7rem); max-width:26ch }
.err-sub{ margin-top:12px; color:var(--txt-dim); max-width:52ch; font-size:.95rem }
.err-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px }
.err-coords{ margin-top:44px; color:var(--txt-faint); display:block }
@media (max-width:480px){
  .err-cta .btn{ width:100%; justify-content:center }
}

/* --- privacy: paper legal article ------------------------------------------ */
body.page-paper{ background:var(--paper) }
.legal-main{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(64px,9vh,110px); padding-bottom:clamp(84px,12vh,150px) }
.legal-art{ max-width:780px }
.legal-art h1{ font-size:clamp(2rem,4.6vw,3.2rem); max-width:14ch }
.legal-updated{ margin-top:16px; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim) }
.legal-note{ margin-top:22px; display:flex; gap:10px; align-items:flex-start;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.8; color:var(--ink-dim); border:1px solid var(--line-ink); border-radius:3px;
  padding:12px 14px; max-width:64ch }
.legal-note::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--crimson);
  flex:0 0 auto; margin-top:6px }
.legal-art h2{ margin-top:44px; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.01em;
  padding-top:18px; border-top:1px solid var(--line-ink) }
.legal-art p{ margin-top:12px; color:var(--ink-dim); font-size:.95rem; line-height:1.7; max-width:70ch }
.legal-art ul{ margin:12px 0 0 20px; color:var(--ink-dim); font-size:.95rem; line-height:1.7 }
.legal-art li{ margin-top:6px; max-width:66ch }
.legal-art li b, .legal-art p b{ color:var(--ink-txt); font-weight:600 }
.legal-art a{ color:var(--crimson); text-decoration:underline; text-underline-offset:3px }
.legal-art a:hover{ color:#A31217 }

/* ============================================================================
   PHASE-2 ADDITIONS — 2026-07-28 · about.html + gallery.html
   Shared short page-hero band, nav current-page marker, the about dossier
   sections (story / president / vision-mission / organisation / facts / CTA)
   and the gallery plates + dependency-free lightbox. Nothing above the
   phase-1 banner changes; homepage parity remains the contract.
   ========================================================================= */

/* --- nav: current-page marker ---------------------------------------------- */
.tb-nav a[aria-current="page"]{ color:#fff }
.tb-nav a[aria-current="page"]::after{ width:100%; background:var(--crimson) }
.menu-links a[aria-current="page"]{ color:var(--crimson-hi) }

/* --- shared page hero (a SHORT dark band — deliberately not full-viewport) -- */
.pg-hero{ position:relative; overflow:hidden; background:var(--ink);
  display:flex; align-items:flex-end;
  min-height:clamp(420px,56vh,620px); padding-top:120px }
.pg-hero--flat{ min-height:clamp(340px,46vh,500px) }
.pg-hero--flat::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px) }
.pg-hero .wrap{ position:relative; z-index:2; width:100%;
  padding-bottom:clamp(38px,6.5vh,66px) }
.pg-media{ position:absolute; inset:0 }
.pg-media img{ width:100%; height:100%; object-fit:cover }
.pg-scrim{ position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,7,6,.90) 0%, rgba(8,7,6,.36) 46%, rgba(8,7,6,.10) 74%, rgba(8,7,6,.50) 100%) }
.pg-h1{ color:#fff; font-size:clamp(2.3rem, min(5.6vw, 9vh), 4.8rem); line-height:.96;
  letter-spacing:-.025em; max-width:18ch; text-wrap:balance }
.pg-meta{ margin-top:18px; color:var(--txt-dim); display:block }
/* subject-aware crops for the about page (house pattern — never inline styles):
   red-sun frame anchors just above centre so the sun + field band both hold in
   the short hero; the crawler crane keeps cab + treads in the 4/5 story panel */
img[src$="stock-oilfield-red-sun-pumpjack.webp"]{ object-position:50% 45% }
.about-fig img[src$="stock-crawler-crane-low-angle.webp"]{ object-position:50% 55% }

/* --- about: story (paper — reuses the flagship .about-grid grammar) --------- */
#story{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
/* about-page president band sits paper-on-paper after #story — hairline divide */
.pres-sep{ border-top:1px solid var(--line-ink) }

/* --- about: vision & mission (ink) ------------------------------------------ */
#vision{ background:var(--ink);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.vm-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.vm-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.vm-head .mono{ color:var(--txt-faint) }
.vm-grid{ margin-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:18px }
.vm-card{ background:var(--ink-3); border:1px solid var(--line); border-top:3px solid var(--crimson);
  border-radius:4px; padding:28px }
.vm-card h3{ color:#fff; font-size:1.05rem; display:flex; gap:14px; align-items:baseline }
.vm-card h3 i{ font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--crimson-hi) }
.vm-card p{ margin-top:12px; color:var(--txt-dim); font-size:.93rem; line-height:1.65 }

/* --- about: organisation (paper dossier — no org-chart graphics) ------------ */
#organisation{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.org-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.org-head h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:18ch }
.org-note{ color:var(--ink-dim); font-size:.9rem; max-width:40ch }
.org-top{ margin-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:14px }
.org-cell{ border:1px solid var(--line-ink); border-radius:4px; padding:20px 22px;
  background:rgba(255,255,255,.45) }
.org-cell i{ display:block; font-style:normal; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin-bottom:10px }
.org-cell h3{ font-size:1.02rem; letter-spacing:-.01em }
.org-cell p{ margin-top:6px; color:var(--ink-dim); font-size:.85rem; line-height:1.55 }
.org-grid{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.org-foot{ margin-top:22px; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); display:flex; gap:12px; align-items:center }
.org-foot::before{ content:""; width:22px; height:1px; background:var(--crimson); flex:0 0 auto }

/* --- about: facts on the record (dossier rows, ink-2) ----------------------- */
#facts{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.facts-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.facts-list{ margin-top:36px; border-top:1px solid var(--line) }
.fact-row{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:6px 32px;
  padding-top:16px; padding-bottom:16px; border-bottom:1px solid var(--line) }
.fact-row b{ font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-faint); padding-top:4px }
.fact-row span{ color:var(--txt); font-family:var(--display); font-weight:600; font-size:1.02rem;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.fact-row small{ display:block; margin-top:4px; color:var(--txt-dim); font-family:var(--body);
  font-weight:400; font-size:.85rem }

/* --- shared closing CTA band (pit) ------------------------------------------ */
.cta-band{ background:var(--pit); border-top:1px solid var(--line);
  padding-top:clamp(64px,9vh,110px); padding-bottom:clamp(64px,9vh,110px) }
.cta-in{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:26px 40px }
.cta-copy h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.7rem); max-width:20ch }
.cta-copy p{ margin-top:12px; color:var(--txt-dim); max-width:52ch; font-size:.95rem }
.cta-act{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.cta-act .mono{ color:var(--txt-faint) }

/* --- gallery ----------------------------------------------------------------- */
.gal-sec{ background:var(--ink);
  padding-top:clamp(64px,9vh,110px); padding-bottom:clamp(64px,9vh,110px) }
.gal-sec--alt{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.gal-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:18px; margin-bottom:34px }
.gal-head h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.7rem); max-width:20ch }
.gal-head .mono{ color:var(--txt-faint) }
.gal-note{ margin-top:24px; display:inline-flex; gap:10px; align-items:flex-start; text-align:left;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.8; color:var(--txt-dim); border:1px solid var(--line); border-radius:3px;
  padding:10px 14px; max-width:64ch }
.gal-note::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--crimson);
  flex:0 0 auto; margin-top:5px }
/* plates — natural-ratio masonry columns: zero cover-cropping, so every licensed
   frame is shown as shot (and the crop audit stays trivially clean) */
.plates{ columns:3; column-gap:18px }
.plate{ break-inside:avoid; page-break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 26px }
.plate-link{ display:block; overflow:hidden; border-radius:4px; background:var(--ink-3) }
.plate-link img{ width:100%; height:auto; transition:transform .8s var(--ease) }
.plate-link:hover img{ transform:scale(1.035) }
.plate .fig-cap{ margin-top:10px; color:var(--txt-faint) }
.plate .fig-cap::before{ background:var(--crimson-hi) }
@media (max-width:1023px){ .plates{ columns:2 } }
@media (max-width:620px){ .plates{ columns:1 } }

/* --- lightbox (dependency-free; scroll locked via the owner-keyed lock) ----- */
#lb{ position:fixed; inset:0; z-index:800; background:rgba(5,6,7,.95);
  display:flex; flex-direction:column; opacity:0; transition:opacity .28s var(--ease) }
#lb.open{ opacity:1 }
#lb[hidden]{ display:none }
.lb-bar{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--gut); color:var(--txt-dim) }
.lb-stage{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:0 var(--gut) }
#lbImg{ max-width:min(100%,1500px); max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:3px }
.lb-foot{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  gap:18px; padding:16px var(--gut) 20px }
.lb-cap{ color:var(--txt-dim); letter-spacing:.1em; max-width:70ch }
.lb-nav{ display:flex; gap:10px }
.lb-btn{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:none; color:#fff; font-size:1.15rem; display:grid; place-items:center; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease) }
.lb-btn:hover{ background:var(--crimson); border-color:var(--crimson) }
#lbClose{ font-size:1.5rem; line-height:1 }
@media (max-width:620px){
  .lb-foot{ flex-direction:column-reverse; align-items:stretch }
  .lb-nav{ justify-content:center }
  .lb-cap{ text-align:center }
}

/* --- phase-2 responsive ------------------------------------------------------ */
@media (max-width:1023px){
  .org-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:700px){
  .org-top{ grid-template-columns:1fr }
  .vm-grid{ grid-template-columns:1fr }
  .fact-row{ grid-template-columns:1fr; gap:4px }
  .fact-row b{ padding-top:0 }
}
@media (max-width:520px){
  .org-grid{ grid-template-columns:1fr }
  .cta-act{ width:100% }
  .cta-act .btn{ width:100%; justify-content:center }
}

/* ============================================================================
   REFINEMENT BATCH — 2026-07-28 (owner-decided, aramco.com as the taste ref)
   1 · mobile slider dashes bug fixed IN PLACE in the hero block (.hs-bar
       position:relative — see the comment there).
   2 · rounded/separated indicator language edited IN PLACE: hero tab-strip,
       chapter step ticks (--tick), route-labels ticks, sequence bar,
       reading-progress hairline. Everything NEW lives below this banner.
   3 · pinned-chapter per-step image crossfade — frames are JS-created
       (desktop + JS only; no-JS/mobile never pay for them), so nothing here
       sits at opacity:0 waiting for JS.
   4 · WhatsApp float removed (block deleted above).
   5 · mobile chapters: photo full-bleed BEHIND the copy under a strong scrim
       (like the mobile hero) instead of the old image-band-above layout.
   6 · footer credit: the word IBIX in the site's crimson.
   ========================================================================= */

/* --- 3 · chapter step frames (stacked crossfade targets) ------------------- */
.ch-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* subject-aware anchors for the step frames (house rule: never inline styles).
   The two portrait sources (-ch crew-dusk / doosan) are PRE-CROPPED to a 16:10
   band in the derivative itself, so centre anchors hold there. */
.ch-media img[src$="stock-drilling-rig-desert-canyon-ch.webp"]{ object-position:50% 58% }
.ch-media img[src$="stock-rig-mast-low-angle-ch.webp"]{ object-position:50% 45% }
.ch-media img[src$="stock-lowbed-backhoe-desert-ch.webp"]{ object-position:50% 55% }
.ch-media img[src$="stock-lowbed-oversize-mining-haul.webp"]{ object-position:50% 60% }
.ch-media img[src$="stock-rig-site-crew-dusk-ch.webp"]{ object-position:50% 55% }
.ch-media img[src$="stock-crane-outriggers-hook-ch.webp"]{ object-position:50% 48% }
.ch-media img[src$="stock-multi-axle-lowbed-trailer-ch.webp"]{ object-position:50% 60% }
.ch-media img[src$="stock-road-train-red-dirt-ch.webp"]{ object-position:50% 55% }
.ch-media img[src$="stock-doosan-wheel-loader-sand-ch.webp"]{ object-position:50% 50% }

/* --- 5 · mobile chapters: full-bleed photo behind a strong scrim ----------- */
/* Legibility is the gate (measured in QA: sampled backdrop luminance behind
   headline/steps) — the scrim runs .60 at the very top (photo shows above the
   kicker) and deepens to .95 behind the step stack. */
@media (max-width:1023px){
  .ch-media{ position:absolute; inset:0; height:auto }
  .ch-scrim{ background:linear-gradient(180deg,
    rgba(7,8,9,.60) 0%, rgba(7,8,9,.85) 20%, rgba(7,8,9,.93) 42%, rgba(7,8,9,.95) 100%) }
  .ch-in{ padding-top:76px; padding-bottom:84px }
}

/* --- 6 · footer credit: "Marketed by IBIX", IBIX in the site's crimson ----- */
.foot-legal a.ibix-credit{ color:var(--crimson-hi) }
.foot-legal a.ibix-credit:hover{ color:#fff }

/* ============================================================================
   PHASE-3 ADDITIONS — 2026-07-28 · rig-moving / equipment-rental / services /
   qhse / careers / contact. Six service+institutional pages in the flagship
   dossier grammar: short pg-hero bands (phase-2 component + a new sub-line),
   generous numbered dossier lists with the separated rounded-tick language,
   alternating register rows, and the contact page's two-action quote form.
   Careers joins the burger menu (00-08) + footer Company column site-wide —
   NOT the desktop top nav (seven links + CTA is the ceiling there).
   Nothing above the earlier banners changes.
   ========================================================================= */

/* --- burger menu: 9 entries now — never clip on short phones --------------- */
.menu-in{ max-height:100%; overflow-y:auto }

/* --- pg-hero: optional sub-line under the H1 ------------------------------- */
.pg-sub{ margin-top:18px; color:#D8D6D2; max-width:56ch;
  font-size:clamp(.98rem,1.25vw,1.1rem); line-height:1.7 }

/* --- page-hero subject anchors (house rule: never inline styles) ----------- */
.pg-media img[src$="stock-drilling-rig-desert-canyon-ch.webp"]{ object-position:50% 55% }
.pg-media img[src$="stock-crane-outriggers-hook-ch.webp"]{ object-position:50% 45% }
.pg-media img[src$="stock-lowbed-grader-dirt-road.webp"]{ object-position:50% 58% }
.pg-media img[src$="stock-engineer-golden-hour.webp"]{ object-position:50% 32% }
.pg-media img[src$="stock-rig-site-crew-dusk-ch.webp"]{ object-position:50% 48% }
.pg-media img[src$="stock-oilfield-pipelines-dusk.webp"]{ object-position:50% 30% }
/* per-page hero grades — these three frames carry bright zones behind the
   fixed header (golden-hour glare / pale haze); dimming holds the nav labels
   above the scrim (screenshot-verified 2026-07-28) */
#qhse-hero .pg-media img{ filter:saturate(1.02) contrast(1.04) brightness(.78) }
#services-hero .pg-media img{ filter:saturate(1.02) contrast(1.03) brightness(.9) }
#contact-hero .pg-media img{ filter:saturate(1.14) contrast(1.06) brightness(.8) }

/* --- pending-work flag: dark-band twin of the paper .draft-flag ------------ */
.draft-flag--dark{ color:var(--txt-dim); border-color:var(--line) }

/* --- cross-link sentence (…is on the X page.) ------------------------------ */
.xlink{ margin-top:28px; color:var(--txt-dim); font-size:.92rem; max-width:62ch }
.xlink a{ color:#fff; font-weight:600; border-bottom:1px solid var(--crimson-hi);
  padding-bottom:1px; transition:color .2s var(--ease) }
.xlink a:hover{ color:var(--crimson-hi) }
.on-paper .xlink, #move-safety .xlink{ color:var(--ink-dim) }
.on-paper .xlink a, #move-safety .xlink a{ color:var(--ink-txt); border-bottom-color:var(--crimson) }
.on-paper .xlink a:hover, #move-safety .xlink a:hover{ color:var(--crimson) }

/* --- homepage service index rows are links now ----------------------------- */
.svc-t h3 a{ display:inline-flex; align-items:baseline; gap:10px; min-height:24px;
  transition:color .2s var(--ease) }
.svc-t h3 a::after{ content:"\2192"; font-size:.8em; color:var(--crimson);
  opacity:0; transform:translateX(-4px); transition:opacity .25s var(--ease), transform .25s var(--ease) }
.svc-t h3 a:hover{ color:var(--crimson) }
.svc-t h3 a:hover::after{ opacity:1; transform:none }

/* =========================================================== rig-moving · what we move (paper) */
#what-we-move{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.wwm-grid{ display:grid; grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);
  gap:clamp(36px,5vw,84px); align-items:start }
.wwm-copy h2{ font-size:clamp(2rem,3.9vw,3.4rem); max-width:15ch }
.wwm-copy .about-lead{ max-width:54ch }
.wwm-list{ list-style:none; border-top:1px solid var(--line-ink) }
.wwm-item{ position:relative; padding:20px 0 20px 22px; border-bottom:1px solid var(--line-ink) }
.wwm-item::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:3px;
  border-radius:999px; background:var(--crimson) }
.wwm-item h3{ font-size:1.15rem; letter-spacing:-.01em }
.wwm-item p{ margin-top:5px; color:var(--ink-dim); font-size:.92rem; line-height:1.6; max-width:52ch }

/* =========================================================== rig-moving · the method (ink) */
#method{ background:var(--ink);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.mth-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.mth-head h2{ color:#fff; font-size:clamp(2rem,3.9vw,3.4rem) }
.mth-intro{ color:var(--txt-dim); font-size:.95rem; max-width:40ch }
.mth-list{ list-style:none; margin-top:clamp(30px,5vh,54px); border-bottom:1px solid var(--line) }
.mth-phase{ position:relative; display:grid;
  grid-template-columns:minmax(0,84px) minmax(0,6.2fr) minmax(0,5.2fr);
  gap:20px clamp(24px,3.5vw,56px); align-items:center;
  padding:clamp(36px,5.5vh,54px) 0 clamp(36px,5.5vh,54px) 24px; border-top:1px solid var(--line) }
/* the separated rounded tick — travels with the reader via IO (.act adds
   colour only; no JS / no IO leaves everything fully visible) */
.mth-phase::before{ content:""; position:absolute; left:0; top:clamp(44px,6vh,62px);
  bottom:clamp(44px,6vh,62px); width:3px; border-radius:999px;
  background:rgba(255,255,255,.15); transition:background .4s var(--ease) }
.mth-phase.act::before{ background:var(--crimson-hi) }
.mth-i{ font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.8vw,2.5rem); color:var(--txt-faint); line-height:1;
  font-variant-numeric:tabular-nums; transition:color .4s var(--ease); align-self:start; padding-top:4px }
.mth-phase.act .mth-i{ color:var(--crimson-hi) }
.mth-t h3{ color:#fff; font-size:clamp(1.25rem,2vw,1.7rem); letter-spacing:-.015em; max-width:20ch }
.mth-t p{ margin-top:12px; color:var(--txt-dim); font-size:.94rem; line-height:1.68; max-width:56ch }
.mth-fig figure{ aspect-ratio:16/10; overflow:hidden; border-radius:4px }
.mth-fig figure img{ width:100%; height:100%; object-fit:cover }
.mth-fig .fig-cap{ color:var(--txt-faint) }
.mth-fig .fig-cap::before{ background:var(--crimson-hi) }
.mth-close{ margin-top:34px; color:var(--txt-faint); display:flex; gap:12px; align-items:center }
.mth-close::before{ content:""; width:22px; height:1px; background:var(--crimson-hi); flex:0 0 auto }
/* subject anchors for method figures */
.mth-fig img[src$="stock-engineer-golden-hour.webp"]{ object-position:50% 40% }
.mth-fig img[src$="stock-lowbed-oversize-mining-haul.webp"]{ object-position:50% 60% }

/* =========================================================== shared dossier ledger (rig-moving equipment band · careers trades) */
.led-list{ margin-top:38px; border-top:1px solid var(--line) }
.led-row{ display:grid; grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr); gap:6px 32px;
  padding-top:18px; padding-bottom:18px; border-bottom:1px solid var(--line) }
.led-row b{ color:#fff; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em }
.led-row p{ color:var(--txt-dim); font-size:.92rem; line-height:1.6; max-width:56ch }

/* =========================================================== rig-moving · equipment band (ink-2) */
#move-equipment{ background:var(--ink-2); border-top:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.meq-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.meq-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.meq-note{ color:var(--txt-dim); font-size:.92rem; max-width:38ch }

/* =========================================================== rig-moving · safety band (paper) */
#move-safety{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#move-safety h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:17ch }
#move-safety .safety-body{ margin-top:22px; color:var(--ink-dim); max-width:64ch; line-height:1.7 }
#move-safety .safety-body em{ font-style:normal; color:var(--ink-txt); font-weight:600 }

/* =========================================================== equipment-rental · wet hire (paper) */
#wet-hire{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#wet-hire h2{ font-size:clamp(2rem,3.9vw,3.4rem); max-width:16ch }
.wh-cols{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,56px) }
.wh-cols p{ color:var(--ink-dim); line-height:1.7; max-width:56ch }
.wh-cols p:first-child{ color:var(--ink-txt); font-weight:500;
  font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.65 }

/* =========================================================== equipment-rental · the register (ink) */
#register{ background:var(--ink);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
.erg-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.erg-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.erg-note{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-faint); max-width:44ch; line-height:1.8 }
.erg{ list-style:none; margin-top:clamp(26px,4vh,46px); border-bottom:1px solid var(--line) }
.erg-item{ display:grid; grid-template-columns:minmax(0,6.4fr) minmax(0,5fr);
  gap:26px clamp(28px,4.5vw,72px); align-items:center;
  padding-top:clamp(40px,6vh,60px); padding-bottom:clamp(40px,6vh,60px); border-top:1px solid var(--line) }
.erg-item--flip{ grid-template-columns:minmax(0,5fr) minmax(0,6.4fr) }
.erg-item--flip .erg-copy{ order:2 }
.erg-item--flip .erg-fig{ order:1 }
.erg-item--solo{ grid-template-columns:1fr }
.erg-i{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--crimson-hi); margin-bottom:14px }
.erg-copy h3{ color:#fff; font-size:clamp(1.3rem,2.1vw,1.8rem); letter-spacing:-.015em; max-width:24ch }
.erg-spec{ margin-top:12px; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--txt-faint); line-height:1.9 }
.erg-copy p{ margin-top:14px; color:var(--txt-dim); font-size:.94rem; line-height:1.68; max-width:54ch }
.erg-stat{ margin-top:20px; display:flex; align-items:baseline; gap:14px }
.erg-stat b{ font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums }
.erg-stat span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--crimson-hi) }
.erg-fig figure{ aspect-ratio:16/11; overflow:hidden; border-radius:4px }
.erg-fig figure img{ width:100%; height:100%; object-fit:cover }
.erg-fig .fig-cap{ color:var(--txt-faint) }
.erg-fig .fig-cap::before{ background:var(--crimson-hi) }
/* subject anchors for register figures */
.erg-fig img[src$="stock-flatbed-saudi-desert-highway.webp"]{ object-position:50% 55% }
.erg-fig img[src$="stock-road-train-red-dirt-ch.webp"]{ object-position:50% 55% }

/* =========================================================== equipment-rental · how hiring works (ink-2) */
#how-hire{ background:var(--ink-2); border-top:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.hire-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.hire-steps{ list-style:none; margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.5vw,36px) }
.hire-step{ border-top:2px solid var(--line); padding-top:16px }
.hire-step b{ display:flex; gap:12px; align-items:baseline; font-family:var(--display);
  font-weight:700; color:#fff; font-size:1.05rem }
.hire-step b i{ font-style:normal; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; color:var(--crimson-hi) }
.hire-step p{ margin-top:8px; color:var(--txt-dim); font-size:.9rem; line-height:1.6; max-width:38ch }

/* =========================================================== services · the seven lines (ink) */
#service-lines{ background:var(--ink);
  padding-top:clamp(56px,8vh,96px); padding-bottom:clamp(84px,12vh,150px) }
.sline{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);
  gap:26px clamp(28px,4.5vw,72px); align-items:center;
  padding-top:clamp(44px,6.5vh,64px); padding-bottom:clamp(44px,6.5vh,64px);
  border-top:1px solid var(--line) }
.sline:first-child{ border-top:0; padding-top:clamp(20px,3vh,32px) }
.sline--solo{ grid-template-columns:1fr }
.sline .kicker{ margin-bottom:16px }
.sline h2{ color:#fff; font-size:clamp(1.6rem,2.8vw,2.4rem); letter-spacing:-.015em; max-width:22ch }
.sline > div > p{ margin-top:14px; color:var(--txt-dim); font-size:.94rem; line-height:1.68; max-width:58ch }
.covers{ margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.covers .cv-l{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-faint); margin-right:6px }
.chip--dark{ border-color:var(--line); color:var(--txt-dim) }
.sline-fig figure{ aspect-ratio:4/3; overflow:hidden; border-radius:4px }
.sline-fig figure img{ width:100%; height:100%; object-fit:cover }
.sline-fig .fig-cap{ color:var(--txt-faint) }
.sline-fig .fig-cap::before{ background:var(--crimson-hi) }

/* =========================================================== qhse · policy (paper) */
#policy{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#policy h2{ font-size:clamp(2rem,3.9vw,3.4rem); max-width:16ch }
#policy .policy-body{ margin-top:22px; color:var(--ink-dim); max-width:64ch; line-height:1.7 }
#policy .policy-body:first-of-type{ color:var(--ink-txt); font-weight:500;
  font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.65 }
#policy .policy-body em{ font-style:normal; color:var(--ink-txt); font-weight:600 }

/* =========================================================== qhse · governance (ink) */
#governance{ background:var(--ink);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.gov-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.gov-grid{ margin-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:18px }
.gov-grid .q-card h3{ flex-wrap:wrap }

/* =========================================================== qhse · safety by phase (ink-2) */
#in-practice{ background:var(--ink-2); border-top:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.prac-grid{ display:grid; grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);
  gap:clamp(36px,5vw,84px); align-items:start }
.prac-copy h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:16ch }
.prac-copy > p{ margin-top:16px; color:var(--txt-dim); max-width:52ch }
.prac-copy .steps{ margin-top:34px }
.prac-fig figure{ aspect-ratio:4/5; overflow:hidden; border-radius:4px }
.prac-fig figure img{ width:100%; height:100%; object-fit:cover }
.prac-fig .fig-cap{ color:var(--txt-faint) }
.prac-fig .fig-cap::before{ background:var(--crimson-hi) }

/* =========================================================== careers */
#why-ajyal{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#trades{ background:var(--ink);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.trd-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px }
.trd-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.trd-intro{ color:var(--txt-dim); font-size:.92rem; max-width:38ch }
#apply{ background:var(--ink-2); border-top:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.apply-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem) }
.apply-head > p{ margin-top:16px; color:var(--txt-dim); max-width:56ch }
.apply-grid{ margin-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:920px }
.apply-note{ margin-top:26px; color:var(--txt-dim); font-size:.92rem; max-width:56ch; line-height:1.65 }
.apply-close{ margin-top:30px; color:var(--txt-faint); display:flex; gap:12px; align-items:center }
.apply-close::before{ content:""; width:22px; height:1px; background:var(--crimson-hi); flex:0 0 auto }
.con-card .con-note{ margin-top:12px; color:var(--txt-dim); font-size:.86rem; line-height:1.55 }

/* =========================================================== contact */
#dispatch{ background:var(--ink);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#visit{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-top:clamp(76px,11vh,130px); padding-bottom:clamp(76px,11vh,130px) }
.visit-head h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3.1rem); max-width:20ch }
.visit-head > p{ margin-top:14px; color:var(--txt-dim); max-width:52ch }
#quote{ background:var(--paper); color:var(--ink-txt);
  padding-top:clamp(84px,12vh,150px); padding-bottom:clamp(84px,12vh,150px) }
#quote h2{ font-size:clamp(2rem,3.9vw,3.4rem); max-width:14ch }
.qf-intro{ margin-top:16px; color:var(--ink-dim); max-width:52ch }
.qform{ margin-top:36px; max-width:760px }
.qf-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px }
.qf-field{ margin-top:20px }
.qf-field label{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:9px }
.qf-field input, .qf-field textarea{ width:100%; background:rgba(255,255,255,.65);
  border:1px solid var(--line-ink); border-radius:3px; padding:13px 15px;
  color:var(--ink-txt); min-height:48px; font-size:.95rem;
  transition:border-color .2s var(--ease), background .2s var(--ease) }
.qf-field textarea{ resize:vertical; min-height:120px; line-height:1.6 }
.qf-field input:focus, .qf-field textarea:focus{ border-color:var(--crimson); background:#fff }
.qf-field input::placeholder, .qf-field textarea::placeholder{ color:#9A9891 }
.qf-help{ margin-top:7px; font-size:.8rem; color:var(--ink-dim) }
.qf-actions{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap }
.qf-notes{ margin-top:24px; color:var(--ink-dim); font-size:.88rem; line-height:1.7; max-width:56ch }
.qf-notes a{ color:var(--ink-txt); text-decoration:underline; text-underline-offset:3px }
.qf-notes a:hover{ color:var(--crimson) }
.qf-notes b{ color:var(--ink-txt); font-weight:600 }

/* =========================================================== phase-3 responsive */
@media (max-width:1023px){
  .wwm-grid, .prac-grid{ grid-template-columns:1fr }
  .mth-phase{ grid-template-columns:minmax(0,56px) minmax(0,1fr) }
  .mth-fig{ grid-column:2; max-width:560px }
  .erg-item, .erg-item--flip{ grid-template-columns:1fr }
  .erg-item--flip .erg-copy{ order:1 }
  .erg-item--flip .erg-fig{ order:2 }
  .erg-fig{ max-width:560px }
  .sline{ grid-template-columns:1fr }
  .sline-fig{ max-width:480px }
  .prac-fig{ max-width:440px }
}
@media (max-width:700px){
  .wh-cols{ grid-template-columns:1fr }
  .hire-steps{ grid-template-columns:1fr }
  .gov-grid{ grid-template-columns:1fr }
  .led-row{ grid-template-columns:1fr; gap:4px }
  .apply-grid{ grid-template-columns:1fr }
  .qf-two{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .mth-phase{ grid-template-columns:minmax(0,44px) minmax(0,1fr); padding-left:18px }
  .mth-i{ font-size:1.4rem }
}
@media (max-width:480px){
  .qf-actions .btn, .apply-grid .con-acts .btn{ width:100%; justify-content:center }
}