/* ==========================================================================
   Cumberland Cathodic Protection Limited
   style.css — design tokens, reset, base type, layout primitives

   Concept: "Current, applied."
   Cathodic protection does not remove corrosion; it moves it. Current is
   pushed from an anode, through the electrolyte, onto the structure, and the
   anode is consumed instead of the steel. The whole system encodes that:
   blue is the applied current and the protected structure, copper is the
   thing being sacrificed, and every structural rule carries a direction.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Colour ------------------------------------------------------------
     --structure is both the heading colour on light surfaces and the dark
     surface itself (masthead, hero, page heads, footer), so it has to stay
     readable in both directions. It is a colder, bluer navy than the Al-Dorra
     parent's, pulled toward the CCPL logo blue, so the family reads but CCPL
     owns its own value. */
  --structure:      #0E2A45;  --structure-rgb: 14 42 69;
  --structure-deep: #081B2E;

  /* Text on light surfaces. */
  --graphite: #33445A;   /* strong labels, sub-heads */
  --slate:    #56697F;   /* running body copy */

  /* Surfaces. --mist is the cool alternating band; deliberately cool rather
     than cream so the site never drifts warm. */
  --paper:     #FFFFFF;
  --mist:      #EEF3F8;
  --mist-deep: #E3EBF3;

  /* Hairlines. */
  --line:        #DCE5EE;
  --line-strong: #C4D2E0;

  /* --- The two signals ---------------------------------------------------
     --current is the CCPL logo blue, sampled from images/cplogo.png (#0060AF).
     At 6.37:1 on white it carries body-sized type as well as fills, so one
     token does the work of two. --current-lift is the same hue raised for type
     on the navy ground, where #0060AF falls under 3:1.

     --anode is the copper of a Cu/CuSO4 reference electrode, the standard
     every CP potential in this industry is measured against. It is a signal,
     never a decoration: it marks what is consumed, or what is used as a
     reference, and nothing else. Held to a few percent of any viewport. */
  --current:      #0060AF;  --current-rgb: 0 96 175;
  --current-deep: #004E8F;
  --current-lift: #5EA9E6;
  --current-wash: #E7F0F9;

  --anode:      #B3651F;
  --anode-lift: #E2954B;
  --anode-wash: #FBF0E4;

  --focus: #F0A93C;

  /* --- Type --------------------------------------------------------------
     Three roles, each earning its place.
       Archivo       — display. A squared-off grotesque: industrial without
                       being the Inter every corporate rebuild reaches for.
       IBM Plex Sans — body. Engineering pedigree, humanist enough to give the
                       pairing real contrast, excellent at 17px.
       IBM Plex Mono — data and labels. The Projects page is a genuine register
                       of serials, clients and dates, and the hero schematic
                       carries instrument labels. Mono is right for both.
     Plex Sans and Plex Mono are a designed superfamily, so they sit together
     correctly rather than merely coexisting. */
  --font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-micro:   0.6875rem; /* 11 — schematic labels */
  --fs-utility: 0.75rem;   /* 12 — eyebrows, table heads, metadata */
  --fs-fine:    0.8125rem; /* 13 */
  --fs-nav:     0.9375rem; /* 15 */
  --fs-body:    1.0625rem; /* 17 */
  --fs-lead:    1.1875rem; /* 19 */
  --fs-title:   1.3125rem; /* 21 */
  --fs-figure:  2.75rem;   /* 44 — stat numerals */
  --fs-section: 2.25rem;   /* 36 */
  --fs-page:    2.75rem;   /* 44 */
  --fs-hero:    3.75rem;   /* 60 */

  --lh-body:    1.72;
  --lh-display: 1.08;
  --track-display: -0.025em;
  --track-utility: 0.16em;
  --measure: 70ch;

  /* --- Layout ------------------------------------------------------------ */
  --shell: 1220px;
  --gutter: 20px;
  --gutter-lg: 40px;
  --section-y: 64px;
  --section-y-lg: 104px;
  --header-h: 78px;
  --bar-h: 36px;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* --- Elevation ---------------------------------------------------------
     Two shadows only. Depth separates a card from its band; it never
     decorates one. */
  --shadow-card: 0 1px 2px rgb(14 42 69 / 0.05), 0 8px 24px -10px rgb(14 42 69 / 0.14);
  --shadow-lift: 0 2px 4px rgb(14 42 69 / 0.07), 0 20px 40px -16px rgb(14 42 69 / 0.22);
  --shadow-head: 0 1px 0 rgb(14 42 69 / 0.08);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover:  180ms;
  --dur-reveal: 620ms;

  /* --- The ground --------------------------------------------------------
     The dark surface used by the masthead, the hero, every inner page head and
     the footer. A diagonal navy base, one bloom at the anode end (top right)
     and a colder one at the structure end (bottom left), over a 56px survey
     grid masked to fade at the edges. */
  --ground-base: linear-gradient(148deg, #081B2E 0%, #0E2A45 52%, #123553 100%);
  --ground-bloom-a: radial-gradient(58% 62% at 96% -4%,
      rgb(0 96 175 / 0.46) 0%, rgb(0 96 175 / 0.16) 44%, transparent 74%);
  --ground-bloom-b: radial-gradient(52% 58% at -6% 104%,
      rgb(30 84 128 / 0.52) 0%, rgb(20 60 96 / 0.22) 46%, transparent 76%);
  --ground-grid:
      linear-gradient(rgb(255 255 255 / 0.038) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.038) 1px, transparent 1px);
  --ground-grid-size: 56px 56px;
}

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: var(--gutter-lg); --section-y: var(--section-y-lg); } }

/* Display sizes step down rather than scaling fluidly, so the mobile layout is
   a deliberate set of sizes and not a shrunken desktop one. */
@media (max-width: 1023px) {
  :root { --fs-hero: 2.75rem; --fs-page: 2.125rem; --fs-section: 1.875rem; --fs-figure: 2.25rem; }
}
@media (max-width: 560px) {
  :root { --fs-hero: 2.0625rem; --fs-page: 1.75rem; --fs-section: 1.5rem; --fs-figure: 2rem;
          --fs-body: 1rem; --fs-lead: 1.0625rem; --measure: 100%; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--structure);
  text-wrap: balance;
}

p { margin: 0; }
p + p { margin-block-start: 1.15em; }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--current);
  text-decoration-color: rgb(var(--current-rgb) / 0.35);
  text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease);
}
a:hover { color: var(--current-deep); text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--current); color: #fff; }

/* One focus treatment everywhere, never removed. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-inline-size: 940px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.68); }
.section--mist { background: var(--mist); }

/* Body copy never runs wider than the measure. */
.prose { max-inline-size: var(--measure); }
.prose p { color: var(--slate); }
.prose > * + * { margin-block-start: 1.15em; }

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: 12px; z-index: 200;
  background: var(--structure); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-fine); text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. The dark ground
   -------------------------------------------------------------------------- */
.ground {
  position: relative;
  background-color: var(--structure);
  background-image: var(--ground-bloom-a), var(--ground-bloom-b), var(--ground-base);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.ground::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--ground-grid);
  background-size: var(--ground-grid-size);
  -webkit-mask-image: radial-gradient(120% 108% at 50% 44%, #000 34%, transparent 82%);
          mask-image: radial-gradient(120% 108% at 50% 44%, #000 34%, transparent 82%);
  pointer-events: none;
}
.ground > * { position: relative; z-index: 1; }

.ground h1, .ground h2, .ground h3 { color: #fff; }
.ground a { color: var(--current-lift); }
.ground a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   5. Utility type
   -------------------------------------------------------------------------- */

/* The eyebrow carries a direction, not a number. Current flows one way, and
   the services are not a numbered sequence, so a directional tick is true
   where "01 / 02 / 03" would be invented. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-utility);
  font-weight: 500;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  color: var(--current);
}
.eyebrow::before {
  content: "";
  inline-size: 26px; block-size: 8px; flex: none;
  background: currentColor;
  -webkit-mask: var(--tick) no-repeat center / contain;
          mask: var(--tick) no-repeat center / contain;
}
.eyebrow { --tick: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M0 4h19' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M18.5 1.2 24 4l-5.5 2.8z' fill='black'/%3E%3C/svg%3E"); }
.eyebrow--anode { color: var(--anode); }
.ground .eyebrow { color: var(--current-lift); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-utility);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}

.lead { font-size: var(--fs-lead); line-height: 1.68; color: var(--graphite); }
.ground .lead { color: rgb(255 255 255 / 0.8); }

.section-title { font-size: var(--fs-section); }
.section-head { margin-block-end: 44px; max-inline-size: 64ch; }
.section-head .lead { margin-block-start: 18px; }

/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero__figure, .staff-bar { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .ground { background: #fff !important; color: #000 !important; }
  .ground h1, .ground h2, .ground h3 { color: #000 !important; }
}