/* ═══════════════════════════════════════════════════════════════════════════
   ATMOREX Technologies — Services Experience
   ---------------------------------------------------------------------------
   Loaded on the /services tree, and on the home page, which reuses two of
   these sections verbatim (see $page_styles in components/header.php).
   Extends the global design system in style.css; it never overrides it.

   Composition rule for this tree: no two consecutive sections share a layout.
   The page alternates left-anchored → centred → split → bento → staggered so
   the eye is never scanning the same column edge twice in a row.
   ═══════════════════════════════════════════════════════════════════════════ */

.services-page {
  --ff-display: var(--ff-sans);

  /* The display, quote and section steps are the sitewide heading scale
     (style.css :root). They live there now rather than here, so the services
     tree and the rest of the site cannot drift apart again. */
  --svc-fs-display:   var(--fs-display);
  --svc-fs-quote:     var(--fs-quote);
  --svc-fs-section:   var(--fs-section);
  --svc-fs-num:       clamp(0.75rem, 1vw, 0.8125rem);
  --svc-fs-ghost:     clamp(4rem, 9vw, 8rem);

  --svc-rule:         rgba(10, 10, 10, .12);
  --svc-rule-strong:  rgba(10, 10, 10, .30);
  --svc-rule-light:   rgba(255, 255, 255, .16);
  --svc-tint:         rgba(227, 218, 204, .52);

  --svc-track:        0.14em;

  /* Card surface, matched to .pillar-card in style.css so services cards read
     as the same family as the home page rather than a second design. */
  --svc-card-bg:      var(--c-bg-tint);
  --svc-card-stroke:  1.5px solid var(--glass-stroke);
  --svc-card-radius:  var(--radius-2xl);
  --svc-card-shadow:  var(--glass-shadow), var(--glass-highlight);
}

/* ── Accent palette ───────────────────────────────────────────────────────
   Eight hues, so the five pillars and the five engagement models can each own
   an identity without colliding. Extends the five-hue family already in
   style.css (--pc-*) rather than inventing a new one.
   Applied via [data-accent] so PHP can set it from service_accent().        */
/* Every rule is scoped under .services-page so they all carry the SAME
   specificity and resolve by source order — the generic fallback first, the
   named hue after it. Leaving the fallback at .services-page [data-accent]
   (0,2,0) and the hues at [data-accent="x"] (0,1,0) makes the fallback win
   and silently paints every pillar blue. */
.services-page [data-accent]                { --a: #3B82F6; --a-bg: #EFF6FF; --a-glow: rgba(59,130,246,.10); }
.services-page [data-accent="blue"]         { --a: #3B82F6; --a-bg: #EFF6FF; --a-glow: rgba(59,130,246,.10); }
.services-page [data-accent="violet"]       { --a: #8B5CF6; --a-bg: #F5F3FF; --a-glow: rgba(139,92,246,.10); }
.services-page [data-accent="rose"]         { --a: #F43F5E; --a-bg: #FFF1F2; --a-glow: rgba(244,63,94,.09); }
.services-page [data-accent="amber"]        { --a: #F59E0B; --a-bg: #FFFBEB; --a-glow: rgba(245,158,11,.10); }
.services-page [data-accent="emerald"]      { --a: #10B981; --a-bg: #ECFDF5; --a-glow: rgba(16,185,129,.10); }
.services-page [data-accent="cyan"]         { --a: #06B6D4; --a-bg: #ECFEFF; --a-glow: rgba(6,182,212,.10); }
.services-page [data-accent="indigo"]       { --a: #6366F1; --a-bg: #EEF2FF; --a-glow: rgba(99,102,241,.10); }
.services-page [data-accent="teal"]         { --a: #14B8A6; --a-bg: #F0FDFA; --a-glow: rgba(20,184,166,.10); }

.services-page h1,
.services-page h2,
.services-page h3,
.services-page .svc-num,
.services-page .svc-label { font-family: var(--ff-display); }

/* The closing CTA is the shared components/cta.php band, identical sitewide. */
.services-page .cta-section__title { font-family: var(--ff-sans); }

.services-page .svc-label {
  display: inline-block;
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--svc-track);
  text-transform: uppercase;
  color: var(--c-text-light);
}
.services-page .svc-label--light { color: rgba(255, 255, 255, .60); }

/* Accent-tinted eyebrow — a small colour cue that ties a section to its hue. */
.services-page .svc-label--accent { color: var(--a); }

.services-page .svc-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
}

/* ── Section shells ──────────────────────────────────────────────────────── */
.svc-section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.svc-section--tint { background: var(--svc-tint); }
.svc-section--dark { background: var(--c-bg-dark); color: var(--c-text-white); }

/* A pillar page reads as one sheet of cream with a single dark band cut into
   it. The landing page and how-we-engage still alternate plain and tinted —
   they are long, and the banding is what paces them — but a pillar page is
   short enough that the steps read as seams rather than as rhythm. Killing the
   token rather than the modifier means a tinted section added here later is
   even-toned too, without anyone having to remember this rule. */
.services-page--pillar { --svc-tint: transparent; }

/* style.css colours h1–h6 by element selector, which outranks the colour
   inherited from a dark section — every heading on dark needs this. */
.svc-section--dark h1, .svc-section--dark h2,
.svc-section--dark h3, .svc-section--dark h4 { color: var(--c-text-white); }

.svc-section--dark p { color: rgba(255, 255, 255, .70); }

/* Header block — three compositions, used deliberately in rotation. */
.svc-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.svc-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Split header: title left, supporting copy right — fills the width without
   stacking another centred column. */
.svc-head--split {
  max-width: none;
  display: grid;
  gap: var(--sp-6) clamp(3rem, 6vw, 6rem);
  align-items: end;
}

.svc-head__title {
  font-size: var(--svc-fs-section);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--fw-heading);
  margin: var(--sp-4) 0 var(--sp-5);
  text-wrap: balance;
}

.svc-head--split .svc-head__title { margin-bottom: 0; }

.svc-head__sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--c-text);
  max-width: 56ch;
}

/* The modes band runs two paragraphs of framing; without this they close up
   into one block. */
.svc-head__sub + .svc-head__sub { margin-top: var(--sp-4); }

.svc-head--center .svc-head__sub { margin-inline: auto; }
.svc-section--dark .svc-head__sub { color: rgba(255, 255, 255, .68); }

/* ── Card primitive ──────────────────────────────────────────────────────── */
.svc-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--svc-card-bg);
  border: var(--svc-card-stroke);
  border-radius: var(--svc-card-radius);
  box-shadow: var(--svc-card-shadow);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-base);
}

/* Ambient corner wash in the card's own hue — the exact device .pillar-card
   uses in style.css: a radial gradient that fades to transparent. A flat fill
   on a border-radius box reads as a hard-edged disc, not a glow. */
.svc-card::after {
  content: '';
  position: absolute;
  top: -110px;
  right: -110px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--a-bg) 0%, transparent 68%);
  opacity: .7;
  pointer-events: none;
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.svc-card:hover::after { opacity: 1; transform: scale(1.15); }

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-lg), var(--glass-highlight);
  border-color: var(--a);
}

/* Icon chip — accent-tinted square that carries the hue at small scale. */
.svc-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--a-bg);
  color: var(--a);
  flex-shrink: 0;
}

.svc-chip-icon svg { width: 21px; height: 21px; }

/* Numbered variant — used where a generic icon would carry no meaning. */
.svc-chip-icon--num {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Oversized ghost numeral used as a watermark inside cards and stages. */
/* Oversized ghost numeral watermark. It is last in the DOM, so without an
   explicit z-index it paints ON TOP of the card's copy — the numeral has to sit
   on its own layer beneath the text, not merely be faint. */
.svc-ghost {
  position: absolute;
  z-index: 0;
  right: clamp(-0.5rem, -0.4vw, 0rem);
  bottom: clamp(-1.75rem, -1.6vw, -1rem);
  font-family: var(--ff-display);
  font-size: var(--svc-fs-ghost);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--a);
  opacity: .09;
  pointer-events: none;
  user-select: none;
}

/* Everything else in a card rides above both the wash and the numeral. */
.svc-card > *:not(.svc-ghost) { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   01 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
/* One shell, both banners. The landing hero and the pillar hero are the same
   object with different copy, and keeping two rules with hand-matched padding
   is how they drifted apart to begin with.

   Full-bleed under the floating header — the same trick .hero and .page-banner
   use in style.css: the negative margin cancels .header-spacer so the hero
   owns the viewport from y=0 and the glass bar reads as sitting over it. The
   clearance is paid straight back as padding.

   Left to size itself each hero took its height from its own hero_desc —
   /services ran ~930px, how-we-engage ~605px — so the banner changed shape
   page to page and the discs, positioned in % of the box, drifted with it.
   One viewport pins all of them. min-height, not height: a page whose copy
   needs more room still gets it. svh rather than vh so mobile browser chrome
   does not overflow it.

   The padding is short because the flex centring below now supplies the air
   that the old clamp(4rem, 9vw, 8rem) was there to provide; left as it was,
   the landing hero's stat strip fell past the fold. */
.svc-hero,
.svc-detail-hero {
  position: relative;
  background: var(--c-bg);
  color: var(--c-text);
  overflow: hidden;

  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 7rem);

  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;

  /* Two tonal steps off the cream ground — --c-bg-tint and --c-bg-alt held
     translucent, so the discs below read as a shade of the paper. */
  --svc-orb:      rgba(227, 218, 204, .55);
  --svc-orb-soft: rgba(232, 230, 222, .85);
}

/* Breadcrumbs hold the top, the stat strip (landing only) the bottom, and the
   hero block takes the slack between them — centred, so a short pillar and a
   long one put their headline on the same line. */
.svc-hero > .container,
.svc-detail-hero > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.svc-hero h1, .svc-hero h2, .svc-hero h3,
.svc-detail-hero h1, .svc-detail-hero h2,
.svc-detail-hero h3 { color: var(--c-text-dark); }

/* .svc-label--light stays white for the dark bands that also use it; only the
   two heroes moved to cream. */
.services-page .svc-hero .svc-label--light,
.services-page .svc-detail-hero .svc-label--light { color: var(--c-text-light); }

/* Grid ruling — inked rather than chalked, so it reads as texture on cream
   instead of disappearing. */
.svc-hero__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,10,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.035) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 78%);
}

/* The glow layer carries the two discs: a big one centred low-left, so what
   shows is the crown of its arc rising behind the headline, and a small quiet
   one clipping the top-right corner. Hard stops, not blurs — a blur on cream
   turns to haze, an edge stays a shape. */
.svc-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle clamp(15rem, 21vw, 25rem) at 97% -8%,
                    var(--svc-orb-soft) 0 99.4%, transparent 100%),
    radial-gradient(circle clamp(16rem, 29vw, 36rem) at 15% 92%,
                    var(--svc-orb) 0 99.4%, transparent 100%);
}

/* The two columns bottom-align to each other, so the headline's last line sits
   on the CTA row. Anchoring the block to the foot of the slack rather than
   centring it puts that shared edge a fixed distance above the fold on every
   page — otherwise a longer hero_desc still walks the whole block down. */
.svc-hero__inner {
  position: relative;
  flex: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
  align-content: end;
}

.svc-hero__title {
  font-size: var(--svc-fs-display);
  line-height: .98;
  letter-spacing: -0.035em;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  margin: var(--sp-5) 0 0;
  text-wrap: balance;
}

.svc-hero__desc {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: var(--lh-base);
  color: var(--c-text-light);
  max-width: 60ch;
  margin-top: var(--sp-6);
}

.svc-hero__actions { display: flex; gap: var(--sp-4); margin-top: clamp(2rem, 4vw, 3rem); }

/* Stat strip — glass tiles rather than bare text, so the hero closes on a
   surface instead of trailing off. */
.svc-hero__meta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--svc-rule);
  border: 1px solid var(--svc-rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.svc-hero__meta-item {
  display: grid;
  gap: var(--sp-1);
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1rem, 2.4vw, 1.75rem);
  background: var(--glass-fill);
}

.svc-hero__meta-val {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-text-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   02 — PILLAR EXPLORER  ·  split: driver rail + elevated panel
   < 1024px  accordion   ·   >= 1024px  rail left, one sticky card right
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-explorer { display: grid; gap: var(--sp-4); }

.svc-explorer__item { display: block; }

.svc-explorer__btn {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: clamp(.95rem, 1.9vw, 1.35rem) clamp(1rem, 2vw, 1.4rem);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--c-text-light);
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}

/* The dot is the colour cue — it fills with the capability's hue when active. */
.svc-explorer__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--svc-rule-strong);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.svc-explorer__btn:hover { color: var(--c-text-dark); background: rgba(255,255,255,.34); }

.svc-explorer__btn[aria-expanded="true"] {
  color: var(--c-text-dark);
  background: var(--c-bg-tint);
  border-color: var(--glass-stroke);
  box-shadow: var(--glass-highlight);
}

.svc-explorer__btn[aria-expanded="true"] .svc-explorer__dot {
  background: var(--a);
  border-color: var(--a);
  transform: scale(1.25);
}

.svc-explorer__btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

.svc-explorer__btn-num {
  font-size: var(--svc-fs-num);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-light);
  letter-spacing: .05em;
}

.svc-explorer__btn-icons { display: flex; align-items: center; flex-shrink: 0; color: var(--c-text-light); }
.svc-explorer__btn-arrow { display: none; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-base), transform var(--t-base); }
.svc-explorer__btn-chevron { transition: transform var(--t-base); }
.svc-explorer__btn[aria-expanded="true"] .svc-explorer__btn-chevron { transform: rotate(180deg); }
.svc-explorer__btn[aria-expanded="true"] .svc-explorer__btn-arrow { color: var(--a); }

/* Panel — a real elevated card, not a bare column of text. */
.svc-explorer__panel { display: none; }
.svc-explorer__panel[data-active="true"] { display: block; }

.svc-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--svc-card-bg);
  border: var(--svc-card-stroke);
  border-radius: var(--svc-card-radius);
  box-shadow: var(--svc-card-shadow);
}

.svc-panel::after {
  content: '';
  position: absolute;
  top: -140px; right: -140px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--a-bg) 0%, transparent 68%);
  opacity: .75;
  pointer-events: none;
}

.svc-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.svc-panel__title {
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--fw-semibold);
}

.svc-panel__desc {
  position: relative;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  margin-bottom: var(--sp-6);
  max-width: 56ch;
}

.svc-panel__block { position: relative; margin-bottom: var(--sp-6); }

.svc-panel__block-title {
  font-family: var(--ff-display);
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--svc-track);
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: var(--sp-4);
}

.svc-panel__list { list-style: none; display: grid; gap: var(--sp-3); padding: 0; margin: 0; }

/* Accent tick instead of a bullet or a hairline row. */
.svc-panel__list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: var(--lh-base);
}

.svc-panel__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--a);
}

.svc-panel__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-6); }

/* ═══════════════════════════════════════════════════════════════════════════
   03 — MODES  ·  Build / Modernise / Secure / Operate, saw-toothed on dark
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-journey { display: grid; gap: var(--sp-5); position: relative; }

.svc-journey__stage {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--svc-rule-light);
  border-radius: var(--radius-xl);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-slow);
}

.svc-journey__stage:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-3px);
}

.svc-journey__num {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--svc-fs-num);
  letter-spacing: .08em;
  color: rgba(255,255,255,.42);
  margin-bottom: var(--sp-3);
}

.svc-journey__title {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.svc-journey__desc { font-size: var(--fs-sm); line-height: var(--lh-base); color: rgba(255,255,255,.62); }

.svc-journey__stage > *:not(.svc-journey__ghost) { position: relative; z-index: 1; }

.svc-journey__ghost {
  position: absolute;
  z-index: 0;
  right: .25rem; bottom: -1.4rem;
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: rgba(255,255,255,.06);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   04 — INDUSTRIES  ·  compact accent cards
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-industries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-industry__name {
  position: relative;
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-text-dark);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--svc-rule);
}

.svc-industry__caps { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }

.svc-industry__cap {
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--t-fast), transform var(--t-fast);
}

.svc-industry__cap:hover,
.svc-industry__cap:focus-visible { color: var(--a); transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   05 — SERVICE PILLAR PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
/* The capability hero is the landing hero: same shell (§01), same composition
   — .svc-hero__inner / __title / __desc / __actions. It differs only in what
   it renders inside, and in the breadcrumb row below. */

.svc-detail-hero .breadcrumb__link,
.svc-detail-hero .breadcrumb__item--current,
.svc-detail-hero .breadcrumb__sep { color: var(--c-text-light); }
.svc-detail-hero .breadcrumb__link:hover { color: var(--c-text-dark); }

/* Challenge — quote left, problem cards right */
.svc-challenge__quote {
  font-family: var(--ff-display);
  font-size: clamp(1.625rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--fw-medium);
  color: var(--c-text-dark);
  max-width: 20ch;
  text-wrap: balance;
  margin-top: var(--sp-4);
}

.svc-challenge__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 44ch;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-light);
}

.svc-challenge__list { list-style: none; display: grid; gap: var(--sp-3); padding: 0; margin: 0; }

.svc-challenge__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-text);
  box-shadow: var(--glass-highlight);
}

/* Small accent cross — reads as "this is a problem", not a checklist tick. */
.svc-challenge__mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--a);
  opacity: .85;
}

/* Capability cards */
.svc-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-cap__title {
  position: relative;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--c-text-dark);
  margin: var(--sp-5) 0 var(--sp-3);
}

.svc-cap__desc { position: relative; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-text); }

/* Deliverables — accent-ticked two-column list on a tinted panel */
.svc-delivers {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--c-white);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--svc-card-radius);
  box-shadow: var(--glass-highlight);
}

/* Delivery model — numbered stepper on dark */
.svc-delivery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-delivery__step {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--svc-rule-light);
  border-radius: var(--radius-xl);
}

.svc-delivery__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--sp-4);
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--c-bg-dark);
  background: var(--c-white);
  border-radius: 50%;
}

.svc-delivery__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.svc-delivery__desc { font-size: var(--fs-sm); line-height: var(--lh-base); color: rgba(255,255,255,.62); }

/* Prev / next pager */
.svc-pager { display: grid; gap: var(--sp-4); }

.svc-pager__link {
  display: grid;
  gap: var(--sp-2);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  text-decoration: none;
  color: var(--c-text-dark);
  background: var(--c-bg-tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-highlight);
  transition: transform var(--t-slow), border-color var(--t-base);
}

.svc-pager__link:hover { transform: translateY(-3px); border-color: var(--a); }
.svc-pager__link--next { text-align: right; }

.svc-pager__title {
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   06 — HOW WE ENGAGE  ·  teaser strip, model rows, decision table
   The five engagement models are a second axis over the pillars, so they get
   their own shapes rather than reusing the pillar card — a visitor should never
   mistake "Advise" for a sixth service.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Teaser — five compact cards, used on /services and on the home page. */
.svc-engage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-engage__card { text-decoration: none; color: inherit; }

.svc-engage__num {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--ff-display);
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  color: var(--a);
}

.svc-engage__name {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--c-text-dark);
  margin: var(--sp-2) 0 var(--sp-3);
}

.svc-engage__desc { font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-text); }

.svc-engage__actions { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }

/* On dark, the teaser inherits the section's palette rather than the light
   card surface — same markup, one context switch. */
.svc-section--dark .svc-engage__card {
  background: rgba(255,255,255,.045);
  border-color: var(--svc-rule-light);
  box-shadow: none;
}
.svc-section--dark .svc-engage__name { color: var(--c-text-white); }
.svc-section--dark .svc-engage__desc { color: rgba(255,255,255,.62); }

/* ── Model rows — the full treatment on /services/how-we-engage ──────────── */
.svc-models { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

.svc-model {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--svc-card-bg);
  border: var(--svc-card-stroke);
  border-radius: var(--svc-card-radius);
  box-shadow: var(--svc-card-shadow);
  /* Anchored from the decision table and the mega menu — keep the heading
     clear of the floating header when the browser jumps to it. */
  scroll-margin-top: calc(var(--header-offset, 0px) + 2rem);
}

.svc-model::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--a);
}

.svc-model > *:not(.svc-ghost) { position: relative; z-index: 1; }

.svc-model__num {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--ff-display);
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  color: var(--a);
}

.svc-model__name {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: var(--fw-heading);
  letter-spacing: -0.02em;
  color: var(--c-text-dark);
  margin: var(--sp-2) 0 var(--sp-3);
}

.svc-model__short {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text-dark);
  margin-bottom: var(--sp-3);
}

.svc-model__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--c-text-light); }

.svc-model__engagement {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--svc-rule);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.svc-model__engagement-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--svc-track);
  text-transform: uppercase;
  color: var(--c-text-light);
}

.svc-model__caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.svc-model__caps-label {
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--svc-track);
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-right: var(--sp-2);
}

/* ── Decision table ─────────────────────────────────────────────────────── */
.svc-decide {
  max-width: 62rem;
  margin-inline: auto;
}

/* A real two-column lookup, so a real table. It scrolls inside its own box
   rather than pushing the page sideways on a narrow screen. */
.svc-decide__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--svc-card-radius);
  overflow: hidden;
  box-shadow: var(--glass-highlight);
}

.svc-decide__table th,
.svc-decide__table td {
  padding: clamp(.85rem, 1.8vw, 1.15rem) clamp(1rem, 2.2vw, 1.6rem);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--svc-rule);
}

.svc-decide__table tbody tr:last-child td { border-bottom: 0; }

.svc-decide__table th {
  font-size: var(--svc-fs-num);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--svc-track);
  text-transform: uppercase;
  color: var(--c-text-light);
  background: var(--c-bg-alt);
}

.svc-decide__table td {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-text);
}

.svc-decide__model {
  display: inline-block;
  font-weight: var(--fw-semibold);
  color: var(--c-text-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--c-text-dark);
  transition: color var(--t-base), border-color var(--t-base);
}

.svc-decide__model:hover,
.svc-decide__model:focus-visible { color: var(--a); border-color: var(--a); }

.svc-decide__model--plain {
  color: var(--c-text-light);
  border-bottom-color: transparent;
  font-weight: var(--fw-medium);
}

.svc-decide__note {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-light);
}

.svc-decide__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; justify-content: center; }

/* ── The cross-link band on every pillar page ───────────────────────────── */
/* Deliberately narrow: the page's own CTA still closes it, so this must read
   as a signpost rather than a second ending. */
.svc-section--flush { padding-block: clamp(2.5rem, 5vw, 4rem); }

.svc-engage-link {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--a-bg);
  border: 1px solid var(--glass-stroke);
  border-left: 3px solid var(--a);
  border-radius: var(--svc-card-radius);
}

.svc-engage-link__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: var(--fw-heading);
  letter-spacing: -0.02em;
  color: var(--c-text-dark);
  margin-bottom: var(--sp-3);
}

.svc-engage-link__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  max-width: 58ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   07 — PILLAR PAGE EXTRAS  ·  team groupings and business value
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cybersecurity states its offer as three team groupings rather than six
   service areas, so those cards are wider and carry a list instead of prose. */
.svc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-group__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.svc-group__title {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--c-text-dark);
}

.svc-group__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-light);
  margin-bottom: var(--sp-5);
}

.svc-group .svc-panel__list { position: relative; }

/* Business value — a plain ticked list, deliberately not another card grid. */
.svc-value {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.svc-value__list {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.svc-value__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--svc-rule);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--c-text-dark);
}

.svc-value__item:last-child { border-bottom: 0; padding-bottom: 0; }

.svc-value__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  color: var(--a);
  background: var(--a-bg);
  border-radius: 50%;
}

/* The modes band carries an icon above its number. */
.svc-journey__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--sp-4);
  color: var(--c-text-white);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--svc-rule-light);
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first above; everything here is an enhancement
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .svc-hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-journey    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-pager      { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .svc-head--split   { grid-template-columns: 1.1fr 1fr; }
  .svc-challenge__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .svc-value         { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .svc-engage-link   { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 900px) {
  /* Identity and framing on the left, the work list on the right. */
  .svc-model { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

  /* Service areas go three-up rather than auto-fit's ragged 4 + 2. A trailing
     card left alone on its row stretches across the space instead of leaving a
     hole, so six areas read as 3 x 2 and seven as 3 + 3 + 1-across. */
  .svc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-caps > :last-child:nth-child(3n + 1) { grid-column: span 3; }
  .svc-caps > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* Desktop explorer: display:contents lifts each item's button and panel into
   the parent grid — rail stacks in column 1, the open panel holds column 2.
   The explicit row track is required: `grid-row: 1 / -1` resolves against the
   EXPLICIT grid, so without it the panel lands in row 1 and stretches it,
   tearing a gap between the first two rail items. The trailing 1fr row absorbs
   any height the panel has over the rail. */
@media (min-width: 1024px) {
  .svc-explorer {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-rows: repeat(var(--svc-count, 8), auto) 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: var(--sp-2);
    align-items: start;
  }

  .svc-explorer__item  { display: contents; }
  .svc-explorer__btn   { grid-column: 1; }

  .svc-explorer__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(var(--header-offset, 0px) + 2rem);
  }

  .svc-explorer__btn-chevron { display: none; }
  .svc-explorer__btn-arrow   { display: block; }
  .svc-explorer__btn:hover .svc-explorer__btn-arrow,
  .svc-explorer__btn[aria-expanded="true"] .svc-explorer__btn-arrow { opacity: 1; transform: translateX(0); }

  .svc-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }

  /* The four modes go four-up, saw-toothed, so the band reads as a
     progression rather than a table of four equal boxes. */
  .svc-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-journey__stage:nth-child(even) { margin-top: clamp(1rem, 2.5vw, 2rem); }

  .svc-panel__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Approach stages vary per pillar — four or five — so the row is sized from
     the count rather than left to auto-fit's ragged wrap. */
  .svc-delivery { grid-template-columns: repeat(var(--svc-steps, 4), minmax(0, 1fr)); }

  /* Five models read better as one row than as auto-fit's 4 + 1. */
  .svc-engage { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .svc-panel__list--cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — all opt-out
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-explorer__panel[data-active="true"] { animation: svc-panel-in var(--t-base) both; }

@keyframes svc-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-explorer__panel[data-active="true"] { animation: none; }

  .svc-card,
  .svc-card:hover,
  .svc-journey__stage,
  .svc-journey__stage:hover,
  .svc-pager__link,
  .svc-pager__link:hover,
  .svc-industry__cap:hover { transform: none; }

  .svc-engage__card,
  .svc-engage__card:hover { transform: none; }

  .svc-explorer__btn,
  .svc-explorer__btn-arrow,
  .svc-explorer__btn-chevron,
  .svc-explorer__dot,
  .svc-industry__cap,
  .svc-decide__model,
  .svc-pager__title { transition: none; }
}