/* MEDGULF Petroleum FZCO | site.css
   One stylesheet for every page (index, privacy, terms, 404, contact.php). Mobile-first,
   self-hosted fonts, no inline styles (CSP). Sections: 1 Fonts, 2 Tokens, 3 Base, 4 Layout,
   5 Buttons and links, 6 Header, 7 Hero, 8 Section heads, 9 01 Who We Are,
   10 02 Services and Solutions, 11 03 Quality, 12 04 Contact, 13 Footer, 14 Reveals,
   15 Subpages, 16 Reduced motion, forced colours, print. */

/* 1 Fonts: Barlow (text) and Barlow Semi Condensed (headings), SIL OFL ------- */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* 2 Tokens ----------------------------------------------------------- */
:root {
  --navy-950: #061423;       /* footer */
  --navy-900: #0b2238;       /* dark bands, card headers */
  --navy-800: #12314f;
  --blue: #0f5ca7;           /* MEDGULF blue (logo): buttons, links, icons */
  --blue-700: #0b4a88;
  --cyan: #00b7f1;           /* logo highlight: small accents only */
  --cyan-text: #a6e6fb;      /* light cyan for text on navy and on darkened photos */
  --ink: #0b1b2b;
  --text: #2a3a4b;
  --muted: #566778;          /* 5.6:1 on white, 5.2:1 on --steel */
  --line: #dbe3eb;
  --line-strong: #c3cfdb;
  --steel: #f2f5f8;          /* light bands */
  --white: #ffffff;
  --on-dark: #ffffff;
  --on-dark-muted: #b9c7d5;
  --line-on-dark: rgb(255 255 255 / 0.14);
  --error: #b42318;

  --sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;

  --maxw: 80rem;                                   /* 1280px content */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --gap: clamp(1.25rem, 2.4vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-card: 0 1px 2px rgb(11 27 43 / 0.06), 0 10px 30px rgb(11 27 43 / 0.07);

  --hh-full: 4.25rem;                              /* header height, top of page */
  --hh-min: 3.75rem;                               /* header height, condensed */

  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-h1: clamp(2.5rem, 1.35rem + 4.1vw, 4.75rem);
  --fs-lead: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-eyebrow: 0.8125rem;
}
@media (min-width: 64em) {
  :root { --hh-full: 5.25rem; --hh-min: 4.25rem; }
}

/* 3 Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hh-min); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0; padding-top: var(--hh-full); background: var(--white); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.65;
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address, blockquote { margin: 0; }
ul, ol { padding: 0; }
address { font-style: normal; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue-700); text-decoration-thickness: 2px; }
abbr[title] { text-decoration: underline dotted 1px; text-underline-offset: 0.2em; cursor: help; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
/* keyboard focus scrolled into view stops just clear of the fixed header, so the ring shows */
a, button, input, select, textarea { scroll-margin-top: 0.75rem; }
.skip-link {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 300; padding: 0.75rem 1.125rem;
  background: var(--navy-900); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:focus { transform: none; }
.skip-link:hover { color: #fff; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1.5rem; pointer-events: none; }

/* 4 Layout ----------------------------------------------------------- */
.wrap {
  width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--alt { background: var(--steel); }

/* 5 Buttons and links ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.125rem; padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn .icon { width: 1.125rem; height: 1.125rem; transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-700); color: #fff; }
.btn--lg { min-height: 3.5rem; padding: 0.875rem 1.875rem; font-size: 1.0625rem; }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.btn--secondary { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn--secondary:hover { background: var(--navy-900); color: #fff; }
.btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }
.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font-weight: 600; color: var(--blue); text-decoration: none;
}
.text-link .icon { width: 1.125rem; height: 1.125rem; transition: transform 0.25s var(--ease); }
.text-link:hover { color: var(--blue-700); }
.text-link:hover .icon { transform: translateX(3px); }

/* Round icon badge: a white line icon on MEDGULF blue, as in the company profile. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 3.25rem;
  height: 3.25rem; border-radius: 50%; background: var(--blue); color: #fff;
}
.icon-badge .icon { width: 1.5rem; height: 1.5rem; }

/* 6 Header and navigation -------------------------------------------- */
.site-header {
  --hh: var(--hh-full); position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white); border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.site-header.is-condensed { --hh: var(--hh-min); box-shadow: 0 6px 24px rgb(11 27 43 / 0.08); }
.site-header__bar {
  display: flex; align-items: center; gap: 1.5rem; height: var(--hh);
  transition: height 0.35s var(--ease);
}
.site-header__logo { display: flex; align-items: center; flex: none; min-height: 2.75rem; margin-right: auto; }
.site-header__logo img {
  width: auto; height: 2.5rem; transform-origin: 0 50%; transition: transform 0.35s var(--ease);
}
.site-header.is-condensed .site-header__logo img { transform: scale(0.88); }
.site-header__cta { display: none; }
.site-nav__list { list-style: none; }
.site-nav__link { color: var(--ink); text-decoration: none; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  margin-right: -0.5rem; padding: 0 0.5rem; border: 0; border-radius: 0; background: none;
  color: var(--ink); font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; cursor: pointer;
}
.nav-toggle__icon { position: relative; width: 1.375rem; height: 0.75rem; }
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 63.99em) {
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--hh));
    height: calc(100dvh - var(--hh)); overflow-y: auto; overscroll-behavior: contain;
    padding: 0.5rem var(--gutter) 2.5rem; background: var(--white);
    border-top: 1px solid var(--line); visibility: hidden; opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .site-nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
  }
  .site-nav__link {
    display: flex; align-items: center; min-height: 3.5rem; padding-block: 0.75rem;
    border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.625rem;
    font-weight: 600; line-height: 1.15;
  }
  .site-nav__link[aria-current="true"] { color: var(--blue); }
  html.nav-open { overflow: hidden; }
}
/* No JavaScript on small screens: the header scrolls with the page and the links wrap
   onto their own row under the logo, so every link is fully visible when focused. */
@media (max-width: 63.99em) and (scripting: none) {
  html { scroll-padding-top: 0; }
  body { padding-top: 0; }
  .site-header { position: relative; }
  .site-header__bar { flex-wrap: wrap; height: auto; padding-block: 0.5rem; }
  .nav-toggle { display: none; }
  .site-nav {
    position: static; flex: 1 1 100%; min-width: 0; height: auto; overflow: visible; padding: 0;
    border: 0; background: none; visibility: visible; opacity: 1; transform: none;
  }
  .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .site-nav__link {
    align-items: center; min-height: 2.75rem; padding: 0; border: 0; font-family: var(--sans);
    font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  }
}
@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .site-header__logo img { height: 3rem; }
  .site-header.is-condensed .site-header__logo img { transform: scale(0.8); }
  .site-nav { align-self: stretch; }
  .site-nav__list { display: flex; height: 100%; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
  .site-nav__list li { display: flex; }
  .site-nav__link {
    position: relative; display: flex; align-items: center; font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s;
  }
  .site-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--blue); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.3s var(--ease);
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="true"] { color: var(--blue); }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .site-header__cta { display: inline-flex; margin-left: clamp(0.5rem, 1.5vw, 1.5rem); }
}

/* 7 Hero ------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: clamp(36rem, calc(92vh - var(--hh-full)), 54rem);
  min-height: clamp(36rem, calc(92svh - var(--hh-full)), 54rem);
  overflow: hidden; background: var(--navy-900); color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture,
.hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 62% 45%; }
/* Navy scrim: even and strong on phones (text spans the full width), and from tablet up
   a left-to-right fade so the rig stays visible on the right. The dark stop tracks the text
   column (centred, at most 80rem wide), not a fixed share of the width, so the text keeps
   4.5:1 or more at every width from 768 to 2560px. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(6 20 35 / 0.75) 0, rgb(6 20 35 / 0) 12rem),
    linear-gradient(rgb(6 20 35 / 0.74), rgb(6 20 35 / 0.74));
}
@media (min-width: 48em) {
  .hero__media::after {
    background:
      linear-gradient(to top, rgb(6 20 35 / 0.7) 0, rgb(6 20 35 / 0) 12rem),
      linear-gradient(90deg, rgb(6 20 35 / 0.94) 0%, rgb(6 20 35 / 0.86) max(55%, calc(50% + 20rem)), rgb(6 20 35 / 0.42) max(80%, calc(50% + 34rem)), rgb(6 20 35 / 0.22) 100%);
  }
}
/* Wide screens: the text sits on solid navy at the left and the photo fills the right side,
   blending into the navy, so the rig (centre of the photo) stays bright beside the text.
   (Below 80em the text column is too wide for this; the full-bleed scrim above is used.) */
@media (min-width: 80em) {
  .hero__media { left: 34%; }
  .hero__media img { object-position: 50% 45%; }
  .hero__media::after {
    background: linear-gradient(90deg, rgb(11 34 56) 0%, rgb(11 34 56 / 0.88) 20%, rgb(11 34 56 / 0.45) 46%, rgb(11 34 56 / 0.12) 100%);
  }
  /* the bottom shade spans the full width (navy panel and photo alike), so no seam */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgb(6 20 35 / 0.65) 0, rgb(6 20 35 / 0) 12rem);
  }
}
.hero__content {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem);
}
.hero__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5em;
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.6; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan-text);
}
.hero__label::before {
  content: ""; flex: none; width: 2.5rem; height: 2px; margin-right: 0.5rem; background: var(--cyan);
}
.hero__title {
  max-width: 12em; margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--display); font-size: var(--fs-h1); font-weight: 700; line-height: 1.03;
  letter-spacing: -0.01em; color: #fff; text-wrap: balance;
}
.hero__sub {
  max-width: 32em; margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 400; line-height: 1.5;
  color: rgb(255 255 255 / 0.9); text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.hero__bar { border-top: 1px solid rgb(255 255 255 / 0.16); background: rgb(6 20 35 / 0.35); }
.hero__meta {
  display: flex; align-items: center; gap: 0.75rem; padding-block: 1.125rem;
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.4; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgb(255 255 255 / 0.88);
}
.hero__meta::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--cyan); }
.hero :focus-visible { outline-color: #fff; }

/* 8 Section heads: a blue eyebrow (bar, number, name) over a large headline -- */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sec-head__title {
  display: flex; align-items: center; gap: 0.75rem; font-family: var(--sans);
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.4; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
}
.sec-head__title::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: currentColor; }
.sec-head__num { font-weight: 700; color: var(--ink); }
.sec-head__lead {
  max-width: 22em; margin-top: 1.125rem; font-family: var(--display); font-size: var(--fs-lead);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.005em; color: var(--ink);
  text-wrap: balance;
}
.sec-head__line { display: block; }   /* a two-sentence lead: one sentence per line */
.sec-head--light .sec-head__title { color: var(--cyan-text); }
.sec-head--light .sec-head__num { color: #fff; }
.sec-head--light .sec-head__lead { color: #fff; }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__title { justify-content: center; }
.sec-head--center .sec-head__title::after { content: ""; flex: none; width: 2.5rem; height: 2px; background: currentColor; }

/* 9 01 Who We Are ---------------------------------------------------- */
#who-we-are { padding-bottom: 0; }
.about { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; padding-bottom: var(--section-y); }
.about .sec-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.about__body p { max-width: 36em; color: var(--text); text-wrap: pretty; }
.about__body p:first-child { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem); line-height: 1.55; color: var(--ink); }
.about__body p + p { margin-top: 1.1em; }
/* The photo with the year badge over its lower left corner and a blue rule along its top. */
.about__media { position: relative; border-top: 4px solid var(--blue); }
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }
.about__badge {
  position: absolute; left: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column;
  padding: 1.125rem 1.5rem 1rem; background: var(--blue); color: #fff; line-height: 1;
}
.about__badge-year { font-family: var(--display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; }
.about__badge-text { margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
@media (min-width: 64em) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .about { align-items: start; }
  .about__media { margin-top: 2.75rem; }
}

/* "Our value proposition": four cards with an icon badge, on a light band. */
.values-band { padding-block: clamp(4rem, 8vw, 6rem); background: var(--steel); }
.values__heading {
  font-family: var(--display); font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); font-weight: 700;
  line-height: 1.15; color: var(--ink); text-align: center;
}
.values__heading::after { content: ""; display: block; width: 3rem; height: 3px; margin: 1rem auto 0; background: var(--cyan); }
.values { list-style: none; display: grid; gap: var(--gap); margin-top: clamp(2.25rem, 4vw, 3rem); }
.value {
  padding: 2rem 1.75rem 2.125rem; background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--blue); transition: box-shadow 0.3s, transform 0.3s var(--ease);
}
.value:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.value__title {
  margin-top: 1.375rem; font-family: var(--display); font-size: 1.375rem; font-weight: 700;
  line-height: 1.2; color: var(--ink); text-wrap: balance;
}
.value__text { margin-top: 0.625rem; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
@media (min-width: 40em) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72em) {
  .values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 10 02 Services and Solutions ------------------------------------------ */
/* The heading sits on the offshore photo under a navy scrim; the six cards (navy header,
   list body, as on page 3 of the company profile) follow below the band. */
.services-section { background: var(--steel); padding-bottom: var(--section-y); }
.services-intro {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  background: var(--navy-900);
}
.services-intro__media { position: absolute; inset: 0; z-index: -1; }
.services-intro__media picture,
.services-intro__media img { width: 100%; height: 100%; }
.services-intro__media img { object-fit: cover; object-position: 50% 40%; }
.services-intro__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(6 20 35 / 0.9) 0%, rgb(6 20 35 / 0.8) max(45%, calc(50% + 12rem)), rgb(6 20 35 / 0.35) 100%);
}
.services-intro .sec-head { margin-bottom: 0; }
.services-intro .sec-head__lead { max-width: 26em; font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem); line-height: 1.12; }
.services { display: grid; gap: var(--gap); margin-top: clamp(3rem, 6vw, 4.5rem); }
.service { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-card); }
.service__head {
  display: flex; align-items: center; gap: 1rem; min-height: 5.75rem; padding: 1.125rem 1.5rem;
  background: var(--navy-900); color: #fff; font-family: var(--display); font-size: 1.3125rem;
  font-weight: 600; line-height: 1.18;
}
.service__head abbr[title] { text-decoration-color: rgb(255 255 255 / 0.55); }
.service__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--blue); color: #fff;
}
.service__icon .icon { width: 1.375rem; height: 1.375rem; }
.service__list { list-style: none; flex: 1; padding: 0.625rem 1.5rem 1.375rem; }
.service__list li {
  position: relative; padding: 0.6875rem 0 0.6875rem 1.375rem; border-bottom: 1px solid var(--line);
  font-size: 1rem; line-height: 1.45; color: var(--text); text-wrap: pretty;
}
.service__list li:last-child { border-bottom: 0; }
.service__list li::before {
  content: ""; position: absolute; left: 0; top: 1.25em; width: 0.4375rem; height: 0.4375rem;
  background: var(--blue);
}
.services__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white); border-left: 4px solid var(--blue); box-shadow: var(--shadow-card);
}
.services__note p {
  font-family: var(--display); font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  font-weight: 600; line-height: 1.3; color: var(--ink);
}
@media (min-width: 48em) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 11 03 Quality: certificate panel on the darkened pipework photo ------ */
.quality { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); color: var(--on-dark); }
.quality__bg { position: absolute; inset: 0; z-index: -1; }
.quality__bg picture,
.quality__bg img { width: 100%; height: 100%; }
.quality__bg img { object-fit: cover; object-position: 50% 40%; }
.quality__bg::after { content: ""; position: absolute; inset: 0; background: rgb(6 20 35 / 0.8); }
.quality :focus-visible { outline-color: #fff; }

.cert {
  --cert-pad: clamp(0.875rem, 2.2vw, 1.5rem); position: relative; max-width: 64rem;
  margin-inline: auto; padding: var(--cert-pad); background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
/* centring marks at the middle of each sheet edge, as on a drawing sheet */
.cert::before,
.cert::after { content: ""; position: absolute; left: 50%; width: 1px; height: var(--cert-pad); background: var(--ink); }
.cert::before { top: 0; }
.cert::after { bottom: 0; }
.cert__frame { position: relative; padding: 5px; border: 1px solid var(--ink); }
.cert__frame::before,
.cert__frame::after { content: ""; position: absolute; top: 50%; width: var(--cert-pad); height: 1px; background: var(--ink); }
.cert__frame::before { right: 100%; }
.cert__frame::after { left: 100%; }
.cert__inner {
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.125rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--ink); text-align: center;
}
.cert__title {
  font-family: var(--display); font-size: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); font-weight: 700;
  line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-900);
  text-wrap: balance;
}
.cert__title::after { content: ""; display: block; width: 3rem; height: 3px; margin: 1.125rem auto 0; background: var(--cyan); }
.cert__statement {
  max-width: 30em; margin: 1.25rem auto 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5; color: var(--text); text-wrap: balance;
}
.cert__list {
  list-style: none; display: grid; margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.cert__item { padding: 1.5rem 0.75rem; }
.cert__item + .cert__item { border-top: 1px solid var(--line); }
.cert__seal { display: block; width: fit-content; margin: 0 auto 0.625rem; color: var(--blue); }
.cert__seal .icon { width: 2.25rem; height: 2.25rem; }
.cert__code {
  display: block; font-family: var(--display); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 700; line-height: 1.15; color: var(--navy-900);
}
.cert__name { display: block; margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; color: var(--muted); }
.cert__scope { max-width: 36em; margin: clamp(1.5rem, 3vw, 2rem) auto 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.cert__scope-label { margin-right: 0.35em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 64em) {
  .cert__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert__item { padding: clamp(1.75rem, 3vw, 2.25rem) 1rem; }
  .cert__item + .cert__item { border-top: 0; border-left: 1px solid var(--line); }
}

/* Registration marks: hairline crosshairs on a 1px frame border, overshooting the corner. */
.reg-mark { --o: 8px; position: absolute; width: calc(2 * var(--o) + 1px); height: calc(2 * var(--o) + 1px); pointer-events: none; }
.reg-mark::before,
.reg-mark::after { content: ""; position: absolute; background: var(--ink); }
.reg-mark::before { top: var(--o); left: 0; width: 100%; height: 1px; }
.reg-mark::after { left: var(--o); top: 0; width: 1px; height: 100%; }
.reg-mark--tl { top: calc(-1px - var(--o)); left: calc(-1px - var(--o)); }
.reg-mark--tr { top: calc(-1px - var(--o)); right: calc(-1px - var(--o)); }
.reg-mark--bl { bottom: calc(-1px - var(--o)); left: calc(-1px - var(--o)); }
.reg-mark--br { bottom: calc(-1px - var(--o)); right: calc(-1px - var(--o)); }
@media (min-width: 48em) {
  .reg-mark { --o: 14px; }
}

/* The three blocks under the certificate. */
.qa { list-style: none; display: grid; gap: var(--gap); max-width: 64rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.qa__item { padding: 2rem 1.75rem; background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-on-dark); border-top: 3px solid var(--cyan); }
.qa__title { margin-top: 1.25rem; font-family: var(--display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: #fff; }
.qa__text { margin-top: 0.625rem; font-size: 1rem; line-height: 1.6; color: var(--on-dark-muted); text-wrap: pretty; }
.qa abbr[title] { text-decoration-color: rgb(255 255 255 / 0.5); }
@media (min-width: 48em) {
  .qa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 12 04 Contact and form --------------------------------------------- */
.contact { display: grid; box-shadow: var(--shadow-card); }
.contact__details {
  padding: clamp(2rem, 4vw, 3rem); color: var(--on-dark); background-color: var(--navy-900);
  background-image: linear-gradient(rgb(11 34 56 / 0.9), rgb(11 34 56 / 0.97)), url("../img/photos/rig-mast-800.jpg");
  background-size: cover; background-position: 50% 70%;
}
.contact__row { padding-block: 1.25rem; border-bottom: 1px solid var(--line-on-dark); }
.contact__row:first-child { padding-top: 0; }
.contact__label {
  display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; font-weight: 600;
  line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-text);
}
.contact__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact__value { margin-top: 0.625rem; font-size: 1.0625rem; line-height: 1.6; color: #fff; }
.contact__email {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: -0.375rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); font-weight: 600; color: #fff;
  text-decoration-color: var(--cyan);
}
.contact__email:hover { color: var(--cyan-text); }
.contact__details :focus-visible { outline-color: #fff; }
.contact > .form,
.contact > .form-done { background: var(--white); padding: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.form { position: relative; }
.form__grid { display: grid; gap: 1.375rem 1.25rem; }
@media (min-width: 40em) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.field__req { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.field__input {
  display: block; width: 100%; min-height: 3.25rem; padding: 0.8125rem 0.9375rem;
  border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s;
}
.field__input:hover { border-color: #8a9aab; }
.field__input:focus,
.field__input:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.field__input[aria-invalid="true"] { border-color: var(--error); }
.field__input[aria-invalid="true"]:focus { outline-color: var(--error); }
.field__select {
  appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b2238' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem 0.5rem;
}
.field__textarea { min-height: 10rem; resize: vertical; }
.field__error { display: flex; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.4; color: var(--error); }
.field__error::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; margin-top: 0.42em; background: currentColor; }
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.form__note { flex: 1 1 16rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.form__status { margin-top: 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.form__status:empty { margin-top: 0; }
.form__status.is-error { padding: 1rem 1.25rem; border: 1px solid var(--error); border-left-width: 4px; }
.form-done { border-top: 4px solid var(--blue); }
.form-done:focus { outline: 2px solid var(--blue); outline-offset: 4px; }
.form-done__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.form-done__title { margin-top: 1rem; font-family: var(--display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--ink); }
.form-done__title-line { display: block; }
.form-done__text { margin-top: 0.875rem; }

/* 13 Footer ---------------------------------------------------------- */
.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5rem) max(1.5rem, env(safe-area-inset-bottom));
  background: var(--navy-950); color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.6;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cyan-text); }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__top { display: grid; gap: 2.5rem; }
.site-footer__logo { display: flex; align-items: center; width: fit-content; min-height: 2.75rem; }
.site-footer__logo img { width: 11rem; height: auto; }
.site-footer__heading {
  margin-bottom: 0.875rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-text);
}
.site-footer__address { color: #fff; }
.site-footer__list { list-style: none; }
.site-footer__list a { display: inline-block; padding-block: 0.6875rem; line-height: 1.5; text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-direction: column; gap: 0.75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line-on-dark); font-size: 0.875rem;
}
.site-footer__fine { max-width: 46em; }
.site-footer__fine > * + * { margin-top: 0.375rem; }
.site-footer__copy { color: #fff; }
.site-footer__ethics { text-wrap: balance; }
.site-footer__legal { list-style: none; display: flex; gap: 1.75rem; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48em) {
  .site-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .site-footer__brand { grid-column: 1 / span 4; }
  .site-footer__top > .site-footer__col:nth-child(2) { grid-column: 6 / span 3; }
  .site-footer__top > .site-footer__col:nth-child(3) { grid-column: 10 / span 3; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 2rem; }
  .site-footer__legal { flex: none; margin-block: calc((1.6em - 2.75rem) / 2); }
}

/* 14 Scroll reveals (JS adds .is-pending only to elements below the fold) */
.js .reveal:not(.is-pending) { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-pending { opacity: 0; transform: translate3d(0, 1rem, 0); }
@media (min-width: 64em) {
  .js .service.reveal:nth-child(3n + 2), .js .value.reveal:nth-child(4n + 2), .js .qa__item.reveal:nth-child(2) { transition-delay: 0.07s; }
  .js .service.reveal:nth-child(3n), .js .value.reveal:nth-child(4n + 3), .js .qa__item.reveal:nth-child(3) { transition-delay: 0.14s; }
  .js .value.reveal:nth-child(4n) { transition-delay: 0.21s; }
}

/* =====================================================================
   15 Subpages: privacy.html, terms.html, 404.html, contact.php output.
   .page-head  navy title band under the header (eyebrow + H1 + meta)
   .page-body  padded wrapper for .prose
   .prose      long-form legal text; every <h2> is numbered 01, 02 ... by CSS
   .status     centred panel (404, form sent, form errors)
   ===================================================================== */
.page-head { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.75rem); background: var(--navy-900); color: #fff; }
.page-head__label {
  display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-eyebrow); font-weight: 600;
  line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-text);
}
.page-head__label::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: currentColor; }
.page-head__label span { color: #fff; }
.page-head__title {
  max-width: 18em; margin-top: 1.125rem; font-family: var(--display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); font-weight: 700; line-height: 1.05; color: #fff; text-wrap: balance;
}
.page-head__meta { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-muted); }
.page-body { padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--section-y); }

.prose { max-width: 40em; counter-reset: prose-section; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 {
  counter-increment: prose-section; position: relative; margin-top: 2.5em; padding-top: 1rem;
  border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  font-weight: 700; line-height: 1.2; color: var(--ink);
}
.prose h2::before {
  content: counter(prose-section, decimal-leading-zero); display: block; margin-bottom: 0.5rem;
  font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
  letter-spacing: 0.14em; color: var(--blue);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2em; font-family: var(--display); font-size: 1.3125rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: square; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { overflow-wrap: anywhere; }
@media (min-width: 64em) {
  .prose { margin-left: calc((100% + var(--gap)) / 4); }
  .prose h2::before { position: absolute; top: 1.35rem; right: 100%; margin: 0 1.5rem 0 0; }
}

.status { padding-block: clamp(4rem, 10vw, 7rem); background: var(--steel); }
.status__panel {
  position: relative; max-width: 42rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.5rem, 5vw, 3.25rem); background: #fff;
  border-top: 4px solid var(--blue); box-shadow: var(--shadow-card); text-align: center;
}
.status__panel .reg-mark { display: none; }
.status__label { font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.status--error .status__panel { border-top-color: var(--error); }
.status--error .status__label { color: var(--error); }
.status__title {
  margin-top: 1rem; font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 700;
  line-height: 1.08; color: var(--ink); text-wrap: balance;
}
.status__title-line { display: block; }
.status__text { max-width: 32em; margin: 1.25rem auto 0; text-wrap: pretty; }
.status__list { list-style: none; max-width: 32em; margin: 1.5rem auto 0; text-align: left; border-top: 1px solid var(--line); }
.status__list li { position: relative; padding: 0.75rem 0 0.75rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.status__list li::before { content: ""; position: absolute; top: 1.25rem; left: 0; width: 0.4375rem; height: 0.4375rem; background: var(--error); }
.status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin-top: 2.25rem; }

/* 16 Reduced motion, forced colours, print --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  }
  .js .reveal, .js .reveal.is-pending { opacity: 1; transform: none; }
}
/* High-contrast themes: keep the logos on their intended grounds and give the select its
   native, system-coloured arrow. */
@media (forced-colors: active) {
  .site-header__logo img { forced-color-adjust: none; background: #fff; padding: 2px 4px; }
  .site-footer__logo img { forced-color-adjust: none; background: var(--navy-950); padding: 2px 4px; }
  .field__select { appearance: auto; background-image: none; padding-right: 0.9375rem; }
}
@media print {
  .site-header, .skip-link, .hero__media, .services-intro__media, .quality__bg, .form, .reg-mark { display: none !important; }
  body { padding-top: 0; }
  .hero, .services-intro, .quality, .site-footer, .contact__details, .page-head { min-height: 0; background: none; color: var(--ink); }
  .hero__title, .hero__sub, .sec-head--light .sec-head__lead, .qa__title, .contact__value, .page-head__title { color: var(--ink); }
  .service__head { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); }
  .js .reveal.is-pending { opacity: 1; transform: none; }
}