/* ============================================================================
   Elevate Technology Partners — base.css
   ----------------------------------------------------------------------------
   This file holds the RESTING state of the site: everything a visitor needs to
   read the page is styled here. No animation lives in this file on purpose —
   if JavaScript fails, or the visitor has "reduce motion" switched on, the site
   still renders exactly as designed. Animation is layered on top in motion.css.

   Section map:
     1.  Design tokens (colours, type scale, spacing)
     2.  Reset + document defaults
     3.  Typography
     4.  Layout helpers (container, grid, section rhythm)
     5.  Buttons + links
     6.  Header / navigation
     7.  Hero
     8.  Content blocks (cards, rows, pillars, quotes, logo grid)
     9.  Forms
     10. Footer
     11. Responsive breakpoints
   ========================================================================== */

/* --- 1. Design tokens ----------------------------------------------------- */
/* Change a value here and it updates everywhere on every page. This is the
   single place to adjust brand colours after hand-off.                       */

:root {
  /* Brand — ELEVATE TECHNOLOGY PARTNERS.
     Sampled from the logo the client supplied, not guessed: the flat interior
     of the cyan shapes reads #00C8FF once the JPEG's edge artefacts are eroded
     away. The ground is the near-black the logo is drawn on.

     The token NAMES date from the first build — read "navy" as "the dark ink"
     and "cyan" as "the accent". Renaming them would touch every file for no
     visual gain.

     Measured, not eyeballed:
       heading  #10151A on white  18.4:1      body #3A464D on white  9.7:1
       link/btn #00789F on white   5.0:1      white on that button   5.0:1
       accent   #00C8FF on ground 10.3:1

     TWO RULES THIS PALETTE IMPOSES:
     1. #00C8FF is 1.96:1 on white. It never carries text on a light ground —
        only rules, borders, and text on the dark ground.
     2. A button filled with #00C8FF must use DARK text (10.3:1), never white
        (1.96:1). That is why .btn--accent sets a near-black label.           */
  --navy-900: #050708;   /* the ground: header, dark sections, footer       */
  --navy-800: #10151A;   /* headings on white                              */
  --navy-700: #1C2429;   /* secondary dark                                 */
  --navy-500: #3A464D;   /* body copy on white                             */
  --cyan-400: #00C8FF;   /* BRAND accent — dark grounds only, see rule 1    */
  --cyan-600: #00789F;   /* deep accent — safe for links and buttons        */
  --teal-300: #7FDFFF;   /* soft accent                                    */

  /* Hero artwork, on tokens so a palette change repaints it too. */
  --art-mid: #0A1318;
  --art-glow-1: rgba(0, 200, 255, 0.24);
  --art-glow-2: rgba(127, 223, 255, 0.14);

  /* Neutrals */
  --white: #ffffff;
  --grey-50: #F5F8F9;
  --grey-100: #EBEFF1;
  --grey-200: #DFE5E8;   /* hairline rules                                  */
  --grey-400: #94A1A6;
  --grey-600: #59656A;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Fluid type scale: min size, preferred (scales with viewport), max size.
     clamp() means we never need a media query just to change a font size.   */
  --fs-display: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  /* READING TEXT. Elevate asked for the hero paragraph's size to be used for
     the body copy everywhere, so --fs-copy is deliberately the same value as
     --fs-lead: change this one line and every paragraph on the site follows.
     --fs-body stays 1rem for interface text (labels, hints, small print).   */
  --fs-copy: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 1.05rem;  /* 0.75 -> 0.9 -> 1.05rem: Elevate asked twice    */

  /* Spacing + layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
  --section-y: clamp(3.5rem, 2rem + 5vw, 7rem);
  --header-h: 76px;

  --radius: 2px;         /* corporate = near-square corners                 */
  --rule: 1px solid var(--grey-200);
}

/* --- 2. Reset + document defaults ---------------------------------------- */

/* Self-hosted variable font: ONE 35 KB file covers weights 100–900, so the
   site makes zero third-party font requests (faster, and no Google cookies). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops the sticky header covering a heading when an in-page link is used */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy-500);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

img,
svg { max-width: 100%; height: auto; display: block; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 3px solid var(--cyan-600);
  outline-offset: 3px;
}

/* Visually hidden, still read by screen readers (used for the skip link). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter); top: -100px;
  z-index: 200;
  background: var(--navy-800);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* --- 3. Typography -------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--navy-800);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  text-wrap: balance;      /* stops one lonely word on the last line */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* One rule sets the size of every piece of reading text inside the page body.
   It is scoped to <main> on purpose: the header, footer and form labels are
   signage, not reading, and they stay at their smaller size.

   Anything with its own class-level font-size (.eyebrow, .field__hint,
   .crumbs) still wins over this, because a class beats a bare element
   selector — that is how the small print stays small.                       */
main p,
main li {
  font-size: var(--fs-copy);
  line-height: 1.6;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--navy-500);
  max-width: 62ch;
}

/* Small uppercase label that sits above a heading — a DXC-style signature. */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;   /* keeps the rule on the first line when the
                                label wraps onto two lines on a phone       */
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  margin-top: 0.62em;      /* drops the rule to the optical centre of line 1 */
  background: var(--cyan-400);
  flex: 0 0 28px;          /* fixed width: never let flex shrink the rule   */
}
.on-dark .eyebrow { color: var(--cyan-400); }

/* The very large uppercase headline used in page heroes. */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.measure { max-width: 68ch; }

/* --- 4. Layout helpers ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--grey { background: var(--grey-50); }
.section--rule-top { border-top: var(--rule); }

/* Dark sections: flip the ink colours rather than restyling each element. */
.on-dark { background: var(--navy-900); color: #C3CEDC; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lead { color: #C3CEDC; }

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem); }
.section-head--split {
  max-width: none;
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  /* `center`, not `end`: the heading is two lines and the paragraph six, so
     bottom-aligning them left the heading sitting low against the paragraph.
     Centring lines the heading up with the middle of the text beside it.    */
  align-items: center;
  grid-template-columns: 1fr;
}
/* The heading sits in a wrapper div; its own bottom margin would push it above
   the centre line, so it is zeroed here. Without this "centred" is 13px out. */
.section-head--split h2 { margin-bottom: 0; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- 5. Buttons + links --------------------------------------------------- */

a { color: var(--cyan-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.on-dark a { color: var(--cyan-400); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn .btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--cyan-600); color: var(--white); border-color: var(--cyan-600); }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); }

/* Filled with the BRAND cyan. The label is near-black on purpose: white text
   on #00C8FF measures 1.96:1 and fails outright, dark text measures 10.3:1. */
.btn--accent { background: var(--cyan-400); color: var(--navy-900); border-color: var(--cyan-400); }
.btn--accent:hover { background: var(--teal-300); border-color: var(--teal-300); color: var(--navy-900); }

.btn--dark { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }
.btn--dark:hover { background: var(--cyan-600); border-color: var(--cyan-600); }

.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--grey-200); }
.btn--ghost:hover { border-color: var(--navy-800); background: var(--navy-800); color: var(--white); }

/* `.on-dark a` (a class plus an element) outranks `.btn--primary` (one class),
   so every filled button sitting on a dark section had its white label
   repainted brand cyan: #00C8FF on the #00789F fill is 2.56:1. These three
   rules win the label back. Measured: white on cyan-600 5.0:1, near-black on
   cyan-400 10.3:1.                                                          */
.on-dark .btn--primary { color: var(--white); }
.on-dark .btn--dark { color: var(--white); }
.on-dark .btn--accent { color: var(--navy-900); }

.on-dark .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.on-dark .btn--ghost:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Text link with a trailing arrow, used at the foot of cards. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;      /* 0.9 -> 1 -> 1.15rem: Elevate asked twice       */
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--cyan-600);
}
.link-arrow svg { transition: transform 0.18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }

/* --- 6. Header / navigation ----------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Dark, because the Elevate mark's inner chevron is white — on a light
     header half the logo disappears. */
  background: rgba(5, 7, 8, 0.93);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* The client's supplied lockup. Served at 2x the displayed height so it stays
   sharp on retina screens; the black ground has been keyed out so it sits on
   any dark surface. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* 46px: below about 40 the "TECHNOLOGY PARTNERS" line under the wordmark
   stops being legible. */
.brand__logo { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .brand__logo { height: 34px; } }
.footer .brand__logo { height: 54px; margin-bottom: 0.4rem; }
.brand__mark {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--navy-800);
  line-height: 1;
}
.brand__rule {
  width: 100%;
  height: 3px;
  margin-top: 5px;
  background: linear-gradient(90deg, var(--cyan-400), var(--teal-300));
}
.brand__sub {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin-top: 6px;
}
.on-dark .brand__mark, .footer .brand__mark { color: var(--white); }
.footer .brand__sub { color: var(--grey-400); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav__link {
  font-size: 0.93rem;
  font-weight: 600;
  color: #C7D2D6;                /* 13.1:1 on the dark header */
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--white); border-bottom-color: var(--cyan-400); }
.nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--cyan-400); }
.nav .btn { padding: 0.7rem 1.2rem; font-size: 0.78rem; }

/* Mobile menu button — hidden on desktop, shown under 960px. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;      /* 44px = comfortable tap target          */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--white);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* --- 7. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy-900);
  color: #C3CEDC;
  overflow: hidden;   /* keeps the decorative artwork inside the section     */
  isolation: isolate;
}

/* Abstract brand artwork instead of stock photography: it is drawn by the
   browser (gradients + an inline SVG grid), so it weighs a few hundred bytes
   rather than the 360 KB JPEGs on the current site.                          */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 78% 18%, var(--art-glow-1), transparent 62%),
    radial-gradient(760px 520px at 12% 96%, var(--art-glow-2), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--art-mid) 55%, var(--navy-900) 100%);
}
.hero__art::after {
  /* 1px grid, drawn as a repeating gradient — the "enterprise blueprint" cue */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(120deg, transparent 8%, #000 45%, transparent 92%);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 1.6rem + 5vw, 6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
}

/* 15ch keeps the headline to three or four strong lines at every width
   instead of one very long line on a wide monitor. */
.hero .display { color: var(--white); max-width: 15ch; }
.hero__lead { font-size: var(--fs-lead); color: #C8D4E2; max-width: 54ch; }

/* Right-hand panel: three short proof points stacked on hairlines. */
.hero__panel {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
}
.hero__panel h2 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 1.25rem;
}
.hero__panel ul { list-style: none; margin: 0; padding: 0; }
.hero__panel li {
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.95rem;
}
.hero__panel li:first-child { border-top: 0; padding-top: 0; }
.hero__panel li:last-child { padding-bottom: 0; }
.hero__panel b { color: var(--white); display: block; font-weight: 700; }
.hero__panel .num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--cyan-400);
  padding-top: 0.35rem;
}

/* --- 7b. Wide hero (the current home-page format) -------------------------
   The first build put a bordered proof panel beside the headline. This gives
   the headline the whole measure instead. A strip of service names used to run
   along the bottom of it; that was removed at Elevate's request, along with
   the rules that styled it. The old split version is still in the stylesheet
   above, so switching back is a class change, not a rewrite.                */

.hero--wide .hero__inner {
  grid-template-columns: 1fr;        /* one column at every width */
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .hero--wide .hero__inner { grid-template-columns: 1fr; }
}

.hero--wide .display { max-width: 19ch; }
.hero--wide .hero__lead { max-width: 60ch; }

/* --- 8b. Numbered rows (replaces the three-card services grid) -------------
   Cards put three things side by side and force the copy into equal, short
   boxes. Rows give each practice the full width, a large numeral, and room
   for a real sentence — which is what a services page is actually for.     */

.row-list { border-top: var(--rule); }

.row-item {
  display: grid;
  gap: 0.6rem clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
  padding: clamp(1.8rem, 1.2rem + 1.8vw, 3rem) 0;
  border-bottom: var(--rule);
  position: relative;
  transition: background-color 0.2s ease;
}
/* Three columns: heading, body, link. There used to be a fourth — a big 01/02/03
   numeral — but Elevate asked for the numbers to go and the body copy to sit
   further left, so the numeral column was removed rather than left empty, and
   the heading column narrowed from 320px to 240px. Between them the paragraph
   starts roughly 170px further left than it did.                             */
@media (min-width: 880px) {
  .row-item {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
    align-items: start;
  }
}

.row-item h3 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 800; }
/* 58ch cap: with the numeral column gone the body column is much wider, and
   without this the lines run past 80 characters, which is tiring to read. The
   copy moves left as asked; the line length stays comfortable.              */
.row-item p { margin: 0; color: var(--grey-600); max-width: 58ch; }

.row-item__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  font-weight: 700;
  font-size: 1.15rem;      /* 0.85 -> 1 -> 1.15rem: Elevate asked twice      */
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--cyan-600);
  white-space: nowrap;
}
.row-item__go svg { transition: transform 0.18s ease; }
.row-item:hover .row-item__go svg { transform: translateX(4px); }

/* The whole row is clickable, without nesting a block inside an <a>. */
.row-item__link::after { content: ""; position: absolute; inset: 0; }
.row-item:hover { background: var(--grey-50); }

/* --- 8e. Service cards ----------------------------------------------------
   Boxed items, three across: a visual panel on top, then heading, text and a
   link. The card is a flex column with the link pushed to the bottom by
   margin-top:auto, so three cards with unequal text still line their links up
   on a common baseline instead of floating at three different heights.

   THE VISUAL PANEL: by default it is brand artwork drawn by the browser — the
   same gradient and grid as the hero — so the layout works with no photography
   at all. To use a real photo instead, replace the <div class="svc-card__art">
   with <img class="svc-card__art" src="..." alt="">; the fixed aspect ratio
   means a photo of any size crops to the same shape as the others.          */

.svc-grid {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card {
  /* The id for the in-page links (#cloud etc.) sits on the card, and a card has
     no padding above it to absorb a sloppy landing. scroll-padding-top on the
     document was not being honoured for hash navigation, so the card came to
     rest 3px UNDER the sticky header. scroll-margin-top belongs to the target
     itself and is honoured, so the card lands clear of the header. */
  scroll-margin-top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--rule);
  overflow: hidden;              /* keeps the art inside the card's corners  */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.svc-card:hover {
  border-color: var(--navy-800);
  box-shadow: 0 18px 40px -28px rgba(5, 7, 8, 0.55);
}

.svc-card__art {
  aspect-ratio: 16 / 10;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 76% 22%, var(--art-glow-1), transparent 60%),
    radial-gradient(320px 240px at 14% 92%, var(--art-glow-2), transparent 58%),
    linear-gradient(155deg, var(--navy-900) 0%, var(--art-mid) 58%, var(--navy-900) 100%);
}
/* The same 1px blueprint grid as the hero, so the cards read as one family. */
.svc-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(125deg, transparent 6%, #000 48%, transparent 94%);
}
.svc-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fills the panel at any photo dimension  */
  display: block;
}
/* The blueprint grid stays ON TOP of the photo, at lower strength, so a
   card with a picture still belongs to the same family as one without. */
.svc-card__art:has(img)::after { opacity: 0.5; }

/* A service icon sitting in the artwork, bottom-left. Replaced the big
   numeral: once each card carries a photograph, a number ranks things that
   are not ranked, whereas an icon says what the card is about at a glance.
   The chip has its own dark backing so the icon holds up over any photo. */
.svc-card__icon {
  position: absolute;
  left: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  bottom: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0, 200, 255, 0.45);
  background: rgba(5, 7, 8, 0.66);
  backdrop-filter: blur(3px);
  border-radius: var(--radius);
}
.svc-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--cyan-400);   /* 10.3:1 on the dark chip behind it */
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  flex: 1;                       /* fill the card so margin-top:auto works   */
}
/* The sub-capability list inside a service card. Hairline-separated rather
   than bulleted: seven short phrases read as a scannable index this way, and
   bullets at this size make the card look like a shopping list. */
.svc-card__list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  border-top: var(--rule);
}
.svc-card__list li {
  padding: 0.5rem 0 0.5rem 1.1rem;
  border-bottom: var(--rule);
  /* Kept a step below the paragraphs above them: these are a scannable index
     of capabilities, not reading text. Raised from 0.9rem so they are not
     dwarfed now that the body copy is larger.                              */
  font-size: 1rem;
  color: var(--navy-500);
  position: relative;
}
.svc-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 1px;
  background: var(--cyan-600);
}
.svc-card__list li:last-child { border-bottom: 0; }

.svc-card__body h3 { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.svc-card__body p { margin: 0; color: var(--grey-600); font-size: var(--fs-copy); }
.svc-card__body .link-arrow { margin-top: auto; padding-top: 0.5rem; }

/* --- 8c. Feature quote ---------------------------------------------------- */
/* One testimonial given real size, with the rest as a quieter set beneath. */

.quote--feature {
  border: 0;
  border-left: 3px solid var(--cyan-400);
  background: transparent;
  padding: clamp(1.2rem, 1rem + 1vw, 2rem) 0 clamp(1.2rem, 1rem + 1vw, 2rem)
           clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.quote--feature blockquote {
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- 8d. Article rows (replaces the Insights card grid) -------------------- */

.post-row {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) 0;
  border-bottom: var(--rule);
  position: relative;
  transition: background-color 0.2s ease;
}
@media (min-width: 880px) {
  .post-row { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: baseline; }
}
.post-row:hover { background: var(--grey-50); }
.post-row__cat {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.post-row h3 { margin: 0 0 0.35rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
.post-row p { margin: 0; color: var(--grey-600); font-size: var(--fs-copy); max-width: 62ch; }
.post-row__go { align-self: center; white-space: nowrap; }

/* Compact hero used on the four inner pages. */
.page-hero {
  background: var(--navy-900);
  color: #C3CEDC;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The inner block keeps the full container width so the hero text lines up
   with the content below it; only the text itself is capped for readability.
   (Capping the container instead would centre it and push the hero text in.) */
.page-hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.page-hero__inner > * { max-width: 860px; }
.page-hero h1 { color: var(--white); }

/* Breadcrumb line above the page title. */
.crumbs { font-size: var(--fs-small); color: var(--grey-400); margin-bottom: 1rem; }
.crumbs a { color: var(--grey-400); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }

/* --- 8. Content blocks ---------------------------------------------------- */

/* Card — used for services, insights and solution tiles. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  background: var(--white);
  border: var(--rule);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card::before {
  /* Accent bar along the top edge that fills out on hover. */
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 58px; height: 3px;
  background: var(--cyan-400);
  transition: width 0.28s ease;
}
.card:hover { border-color: var(--navy-800); box-shadow: 0 18px 40px -28px rgba(11, 22, 38, 0.55); }
.card:hover::before { width: calc(100% + 2px); }
.card h3 { margin: 0; }
.card p { color: var(--grey-600); font-size: var(--fs-copy); }
.card .link-arrow { margin-top: auto; padding-top: 0.4rem; }
.card--flat:hover { transform: none; }

.card__icon { color: var(--cyan-600); }
.card__icon svg { width: 34px; height: 34px; }

/* Pillars: Empowerment / Experience / Flexibility / Solutions / Agility */
.pillar {
  padding: 1.6rem 0;
  border-top: var(--rule);
  display: grid;
  gap: 0.4rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .pillar { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; }
}
.pillar h3 { margin: 0; }
.pillar p { color: var(--grey-600); margin: 0; }

/* Stat / fact tiles */
.fact {
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border-left: 3px solid var(--cyan-400);
  background: var(--white);
}
.on-dark .fact { background: rgba(255, 255, 255, 0.04); }
.fact__value {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.on-dark .fact__value { color: var(--white); }
.fact__label { font-size: 0.9rem; color: var(--grey-600); }
.on-dark .fact__label { color: #A9B7C8; }

/* Client logo strip — grey placeholder wordmarks until real assets arrive. */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.logos__item {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--grey-400);
  text-transform: uppercase;
}

/* On a phone the labels are long enough that flex-wrap leaves one item alone
   on one line and two crowded on the next, which reads as a broken layout.
   A single column with hairlines is orderly at any label length. */
@media (max-width: 720px) {
  .logos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: var(--rule);
  }
  .logos__item {
    font-size: 0.92rem;
    padding: 0.85rem 0;
    border-bottom: var(--rule);
  }
}

/* Testimonial cards */
.quote {
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  background: var(--white);
  border: var(--rule);
  border-top: 3px solid var(--teal-300);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy-800);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.quote figcaption {
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--grey-600);
  border-top: var(--rule);
  padding-top: 0.9rem;
}

/* --- 8f. Insight rows ------------------------------------------------------
   The category column has gone: Elevate's insights are not categorised, and a
   column kept for a label that never arrives reads as a missing element rather
   than as whitespace. Heading, body and the invitation all start at the left
   margin and run the full measure.                                          */

.insight-list { border-top: var(--rule); }

.insight {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) 0;
  border-bottom: var(--rule);
}

.insight h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.6rem);
  font-weight: 800;
  /* The global heading line-height is 1.08, which suits a 44px display line
     but leaves only 2px of air between the two lines of a 25.6px insight
     title — measured, and it reads as crammed. 1.28 gives ~33px line to
     line. The site-wide value is deliberately left alone: tight leading is
     right for the big headlines.                                          */
  line-height: 1.28;
  max-width: 34ch;          /* keeps a long title to two lines, not four   */
}

.insight p {
  margin: 0;
  color: var(--grey-600);
  max-width: 62ch;          /* a readable line length on a wide monitor. Was
                               78ch when the body copy was 16px; at the larger
                               size that ran to roughly 1000px of line.      */
}

/* The closing invitation: question, then the link. Kept on one line where
   there is room and wrapping to two where there is not. */
/* NOTE the selector: `.insight p` above sets `margin: 0`, and that shorthand
   has higher specificity than a bare `.insight__cta { margin-top }`, so the
   spacing silently did nothing. Matching p.insight__cta wins it back. */
.insight p.insight__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin-top: 1.6rem;        /* a clear blank line between the paragraph and
                                the invitation, so the invitation reads as a
                                separate beat rather than a fourth sentence  */
}
.insight p.insight__cta span { color: var(--navy-800); font-weight: 600; }
/* The link shares a line with that question, so it has to share its size too.
   Left at the default .link-arrow 0.9rem it looked like a footnote sitting
   next to a sentence once the body copy grew.                               */
.insight p.insight__cta .link-arrow { font-size: inherit; }

/* The insights beyond the first few are collapsed by JavaScript, never by
   CSS alone. Everything stays in the HTML: a visitor without JavaScript, and
   any search engine, gets all of them. The class that hides them is only
   applied by the same code that can un-apply it.                           */
.insight[hidden] { display: none; }

.insight-more {
  display: flex;
  justify-content: center;
  padding-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
}

/* Split band: text on one side, bordered list on the other. */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 1rem 0 1rem 2.2rem;
  border-top: var(--rule);
  color: var(--grey-600);
  /* Caps the line length on a wide monitor — without it these descriptions run
     to about 110 characters a line. NOTE this also shortens the hairline above
     each item, because the border belongs to the <li>: the rules stop with the
     text rather than crossing the full container. That is deliberate, but if
     full-width rules are ever wanted, the cap has to move to an inner element
     instead of being widened here.                                          */
  max-width: 68ch;
}
.on-dark .checklist li { border-top-color: rgba(255, 255, 255, 0.14); color: #B7C4D3; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.5rem;
  width: 12px; height: 2px;
  background: var(--cyan-400);
}
/* The name sits on its own line above its description: these run to about
   forty words each, and an inline label in front of that much text stops
   looking like a heading and starts looking like the first few words of the
   sentence.                                                                 */
.checklist strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--navy-800);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}
.on-dark .checklist strong { color: var(--white); }

/* --- Partner logo grid ----------------------------------------------------
   A box for partner logos, sized for about six. Each cell is a fixed-ratio
   frame so logos of different shapes (a wide "aws", a squat "HPE") still line
   up on a common baseline instead of jostling each other.

   TO ADD A LOGO: replace the <span> inside a cell with
       <img src="assets/img/partners/name.svg" alt="Partner name">
   SVG if you have it, otherwise PNG with a transparent background at about
   400px wide. The cell handles the sizing.                                  */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                        /* the gap IS the hairline: cells sit on a
                                      shared grid line rather than each having
                                      its own border, so no doubled-up rules */
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
}
@media (min-width: 620px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }

.logo-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  aspect-ratio: 5 / 3;
  padding: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
}

/* Logos are constrained by BOTH dimensions, so a tall mark cannot grow past
   the cell just because it is narrow. */
.logo-grid__cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Empty slot, until a real logo is dropped in. The label is grey-600 rather
   than grey-400: at grey-400 it measured 2.66:1 on white, which is below the
   readable minimum even for a placeholder.                                  */
.logo-grid__cell span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-600);
  text-align: center;
}

/* Full-width call to action band above the footer. */
.cta-band { background: var(--navy-800); color: #C3CEDC; }
.cta-band__inner {
  display: grid;
  gap: 1.6rem clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { color: var(--white); margin-bottom: 0.5rem; }
/* The paragraph here carries .lead, and .lead sets a DARK colour meant for a
   white page. On this near-black band that measured 1.89:1 — effectively
   unreadable. The band is not marked .on-dark, so the .on-dark .lead rule
   never reached it. White measures 17.6:1.
   Same fault was live on Home, About, Services and Insights, not only the one
   page it was spotted on.                                                   */
.cta-band .lead { color: var(--white); }

/* --- 8g. Legal pages -------------------------------------------------------
   A privacy policy is read, not skimmed, so it gets a single narrow column
   rather than the full page width: about 70 characters a line is where long
   prose stops being tiring.                                                 */

.legal { max-width: 70ch; }
.legal p { margin: 0 0 1.3em; }
.legal ul {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  border-top: var(--rule);
}
.legal li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.4rem;
  border-bottom: var(--rule);
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: 8px; height: 1px;
  background: var(--cyan-600);
}
.legal__sign {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: var(--rule);
  font-weight: 600;
  color: var(--navy-800);
}

/* --- 9. Forms ------------------------------------------------------------- */

.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: var(--fs-small); font-weight: 700; color: var(--navy-800); }
.field .req { color: var(--cyan-600); }

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--navy-800);
  background: var(--white);
  padding: 0.85rem 1rem;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cyan-600);
  box-shadow: 0 0 0 3px rgba(11, 111, 164, 0.14);
  outline: none;
}
.field__hint { font-size: 0.8rem; color: var(--grey-600); }

/* Error state is driven by aria-invalid so the styling and the accessibility
   information can never drift apart. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #C8322F; background: #FFF7F7; }
.field__error { font-size: 0.8rem; color: #C8322F; font-weight: 600; min-height: 1.1em; }

.form__status {
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--cyan-400);
  background: var(--grey-50);
  font-size: 0.95rem;
}
.form__status[hidden] { display: none; }

/* Honeypot: a field only a spam bot will fill in. Hidden from people and from
   screen readers, never from bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 10. Footer ----------------------------------------------------------- */

.footer { background: var(--navy-900); color: #93A2B4; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 860px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer h4 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { color: #93A2B4; text-decoration: none; font-size: 0.93rem; }
.footer a:hover { color: var(--white); text-decoration: underline; }
/* NOTE: the tagline under the footer logo ("Technology consulting and
   management.") was removed at Elevate's request, and .footer__blurb went
   with it rather than being left styling nothing.                          */
.footer__bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-small);
}
.footer address { font-style: normal; font-size: 0.93rem; line-height: 1.7; }

/* --- 11. Responsive ------------------------------------------------------- */

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }

  /* Off-canvas panel. `hidden` on the element keeps it out of the tab order
     and out of the accessibility tree while it is closed. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: 0 24px 40px -30px rgba(11, 22, 38, 0.6);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav__link { padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--cyan-400); }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

@media (min-width: 960px) {
  /* The menu is never hidden on desktop, whatever JavaScript last set. */
  .nav[hidden] { display: flex; }
}

/* Printing an informational site should not waste ink on dark panels. */
@media print {
  .header, .cta-band, .footer, .nav-toggle { display: none !important; }
  .hero, .page-hero, .on-dark { background: #fff !important; color: #000 !important; }
  .hero .display, .on-dark h1, .on-dark h2, .on-dark h3 { color: #000 !important; }
}