/* ============================================================================
   RANCO — inner-page components
   Layered ON TOP of immersive-light.css. The approved design was a one-page
   concept; these are the pieces the multi-page site needs that the concept
   never had. Everything here reuses the concept's own tokens — no new colours,
   no new type sizes. Built 2026-08-08 from the client's own content pack.
   ========================================================================= */

/* --- page hero (every page except home) --------------------------------- */
.page-hero{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding-block:calc(var(--tb-h) + var(--space-6)) var(--space-6);
}
.page-hero .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.page-hero h1{
  font-family:var(--display); font-size:var(--step-5); line-height:var(--lh-display);
  color:var(--navy); margin:0 0 var(--space-3); text-wrap:balance;
}
.page-hero h1 .b{ color:var(--accent-hi) }
.page-hero .ph-lede{
  font-size:var(--step-1); color:var(--ink-dim); max-width:62ch; margin:0;
}
.page-hero .kicker{ margin:0 0 var(--space-3) }

/* --- generic prose section --------------------------------------------- */
.sec{ padding-block:var(--pad-section); background:var(--paper) }
.sec.alt{ background:var(--paper-2) }
.sec > .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sec h2{
  font-family:var(--display); font-size:var(--step-3); line-height:1.15;
  color:var(--navy); margin:0 0 var(--space-4); text-wrap:balance;
}
.prose{ max-width:70ch }
.prose p{ margin:0 0 var(--space-3); font-size:var(--step-0); line-height:var(--lh-latin) }
.prose p:last-child{ margin-bottom:0 }
.prose p.lead{ font-size:var(--step-1); color:var(--ink-txt) }

/* --- service detail block ---------------------------------------------- */
.svc-detail{
  border-top:1px solid var(--line);
  padding-block:var(--space-6);
  display:grid; gap:var(--space-4);
  grid-template-columns:minmax(0,1fr);
  scroll-margin-top:calc(var(--tb-h) + 16px);
}
@media (min-width:900px){
  .svc-detail{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-6) }
}
.svc-detail .sd-ix{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-hi); margin:0 0 var(--space-3);
}
.svc-detail h2{ font-size:var(--step-2); margin:0 0 var(--space-3) }
.svc-detail .sd-sub{
  font-size:var(--step-1); color:var(--navy); margin:0 0 var(--space-3); font-weight:600;
}
.svc-detail p{ margin:0 0 var(--space-3); line-height:var(--lh-latin) }
.svc-detail p:last-child{ margin-bottom:0 }

/* capability list inside a service block */
.cap-list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:10px }
.cap-list li{
  position:relative; padding-inline-start:22px; font-size:var(--step-0); line-height:1.45;
}
.cap-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:9px; height:2px; background:var(--accent);
}

/* the aside card that sits beside a service block */
.sd-card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:14px;
  padding:var(--space-4); align-self:start;
}
.sd-card .sdc-h{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 var(--space-3);
}
.sd-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.sd-card li{ font-size:.95rem; color:var(--ink-txt); line-height:1.45 }

/* --- equipment register (two-column list, not a table — scans better) --- */
.equip-grid{
  display:grid; gap:var(--space-4); grid-template-columns:minmax(0,1fr); margin-top:var(--space-4);
}
@media (min-width:760px){ .equip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.equip-col{
  background:var(--paper-3); border:1px solid var(--line); border-radius:14px; padding:var(--space-4);
}
.equip-col h3{
  font-family:var(--display); font-size:var(--step-2); color:var(--navy); margin:0 0 var(--space-3);
}
.equip-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.equip-col li{
  font-size:.95rem; line-height:1.4; padding-inline-start:20px; position:relative; color:var(--ink-txt);
}
.equip-col li::before{
  content:""; position:absolute; inset-inline-start:0; top:.6em;
  width:8px; height:2px; background:var(--accent);
}
.equip-note{
  margin:var(--space-3) 0 0; font-size:.9rem; color:var(--ink-dim); font-style:italic;
}

/* --- QHSE / careers pill lists ----------------------------------------- */
.pill-list{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:12px }
@media (min-width:760px){ .pill-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.pill-list li{
  background:var(--paper-3); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; font-size:.97rem; line-height:1.45;
}
.pill-list li b{ color:var(--navy); display:block; margin-bottom:3px }

/* --- contact: one card per division ------------------------------------ */
.div-grid{
  display:grid; gap:var(--space-4); grid-template-columns:minmax(0,1fr); margin-top:var(--space-5);
}
@media (min-width:680px){ .div-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .div-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.div-card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:16px;
  padding:var(--space-4); display:flex; flex-direction:column; gap:10px;
}
.div-card .dc-div{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-hi); margin:0;
}
.div-card .dc-name{
  font-family:var(--display); font-size:var(--step-2); color:var(--navy); margin:0; line-height:1.15;
}
.div-card .dc-tel{
  font-family:var(--mono); font-size:.98rem; color:var(--ink-txt);
  text-decoration:none; border-bottom:1px solid var(--line); padding-block:2px;
  min-height:24px; display:inline-flex; align-items:center;
}
.div-card .dc-tel:hover{ color:var(--blue-link); border-bottom-color:currentColor }
.div-card .dc-pending{
  font-size:.9rem; color:var(--ink-dim); margin:0; line-height:1.4;
}
.div-card .dc-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px }
.div-card .dc-acts .btn{ flex:1 1 auto; text-align:center; min-width:120px }

/* --- request-for-quote form -------------------------------------------- */
.rfq{
  background:var(--paper-3); border:1px solid var(--line); border-radius:18px;
  padding:var(--space-5); margin-top:var(--space-5);
}
@media (min-width:900px){ .rfq{ padding:var(--space-6) } }
.rfq h2{ margin-top:0 }
.rfq-grid{ display:grid; gap:var(--space-4); grid-template-columns:minmax(0,1fr) }
@media (min-width:680px){ .rfq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.field{ display:flex; flex-direction:column; gap:6px }
.field.wide{ grid-column:1 / -1 }
.field label{ font-size:.9rem; font-weight:600; color:var(--navy) }
.field input, .field select, .field textarea{
  font:inherit; font-size:var(--step-0); color:var(--ink-txt);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; min-height:48px; width:100%;
}
.field textarea{ min-height:140px; resize:vertical }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}
.rfq-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--space-4) }
.rfq-actions .btn{ flex:1 1 220px; text-align:center }
.rfq-note{ margin:var(--space-3) 0 0; font-size:.88rem; color:var(--ink-dim); line-height:1.5 }

/* honeypot — visually hidden WITHOUT a physical off-canvas offset.
   RANCO's earlier build used left:-9999px, which was harmless in English and
   blew the Arabic pages out to 10,374px wide. Never reintroduce that. */
.hp-field{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- legal pages -------------------------------------------------------- */
.legal-body{ max-width:72ch }
.legal-body h2{ font-size:var(--step-2); margin-top:var(--space-5) }
.legal-body h2:first-child{ margin-top:0 }
.legal-body p, .legal-body li{ font-size:var(--step-0); line-height:1.6 }
.legal-body ul{ padding-inline-start:20px; margin:0 0 var(--space-3) }
.legal-body li{ margin-bottom:8px }
.legal-updated{ font-size:.88rem; color:var(--ink-dim); margin-bottom:var(--space-5) }

/* placeholder that must be obvious to the owner and never reach a live site */
.todo{
  background:#FFF4E5; border:1px dashed #B8791F; color:#7A4E12;
  padding:2px 8px; border-radius:6px; font-size:.85em; font-weight:600;
}

/* --- CTA band ----------------------------------------------------------- */
.cta-band{
  background:var(--ink); color:var(--txt); padding-block:var(--pad-section);
}
.cta-band .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.cta-band h2{
  font-family:var(--display); font-size:var(--step-4); line-height:1.1;
  color:var(--txt); margin:0 0 var(--space-3); text-wrap:balance;
}
.cta-band p{ color:var(--txt-dim); max-width:60ch; margin:0 0 var(--space-4); font-size:var(--step-1) }
.cta-band .cta-acts{ display:flex; gap:12px; flex-wrap:wrap }
/* .btn-line ships background:var(--paper-3) — pure white. Inheriting that on
   the dark band gave white text on a white pill: invisible, and caught by the
   contrast gate at 4 pages. The override MUST clear the background too. */
.cta-band .btn-line{
  background:transparent; color:var(--txt); border-color:rgba(255,255,255,.55);
}
.cta-band .btn-line:hover{
  background:rgba(255,255,255,.12); color:var(--txt); border-color:var(--txt);
}

/* --- utilities ----------------------------------------------------------
   These exist because a CSP of style-src 'self' BLOCKS every inline style
   attribute in production — RANCO shipped that bug once already. Never put a
   style="" back on an element; add a class here instead. */
.mt-4{ margin-top:var(--space-4) }
.mt-5{ margin-top:var(--space-5) }
.u-sig{ color:var(--navy); font-weight:600 }
.u-subhead{
  margin-top:var(--space-5); font-family:var(--display); color:var(--navy);
  font-size:var(--step-2); line-height:1.2;
}
/* one column on phones, two from tablet up — as a class, because a
   grid-template-columns set inline can never be beaten by a media query */
.split-2{ display:grid; gap:var(--space-5); grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .split-2{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center } }

/* --- home: services overview -------------------------------------------
   The pinned one-per-screen cross-fade is gone (see js/immersive-light.js for
   why). Its unpinned fallback stacks seven 3.6rem headings vertically, which
   is a very long way to say "we do seven things" — so on the home page this is
   a card grid instead, each card linking through to the full write-up on
   /services. The rail dots only ever meant anything while pinned. */
#services .svc-seq{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4);
}
@media (min-width:700px){  #services .svc-seq{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ #services .svc-seq{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
#services .svc-cell{
  background:var(--paper-3); border:1px solid var(--line); border-radius:16px;
  padding:var(--space-4); gap:10px; align-content:start;
}
#services .svc-cell h3{
  font-size:var(--step-2); letter-spacing:-.01em; line-height:1.15; max-width:none;
}
#services .svc-cell h3 a{ color:var(--navy); text-decoration:none }
#services .svc-cell h3 a:hover{ color:var(--blue-link); text-decoration:underline }
#services .svc-cell h3 a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px }
#services .svc-cell p{ font-size:.98rem; max-width:none; line-height:1.6 }
#services .svc-rail{ display:none }

/* --- skip link (keyboard users land here first) ------------------------- */
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  text-decoration:none; font-weight:600; min-height:24px;
}
.skip-link:focus{ inset-inline-start:0 }

/* --- language switch ---------------------------------------------------- */
.lang-switch{
  font-size:.9rem; font-weight:600; color:var(--ink-dim); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  min-height:24px; display:inline-flex; align-items:center; white-space:nowrap;
}
.lang-switch:hover{ color:var(--navy); border-color:var(--navy) }
.lang-switch:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
@media (max-width:860px){ .tb-right .lang-switch{ display:none } }

/* --- light button on the dark CTA band ---------------------------------- */
.btn-paper{
  background:var(--paper); color:var(--navy); border:1px solid var(--paper);
}
.btn-paper:hover{ background:#fff; border-color:#fff; color:var(--navy) }

/* --- breadcrumb-free simple in-page nav for the services page ----------- */
.jump{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--space-4);
}
.jump a{
  font-size:.88rem; text-decoration:none; color:var(--navy);
  background:var(--paper-3); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; min-height:24px; display:inline-flex; align-items:center;
}
.jump a:hover{ border-color:var(--accent); color:var(--blue-link) }
.jump a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }