/* SYBNOC subpages — SAP EWM / TM / LGM
   ---------------------------------------------------------------------
   One sheet shared by all three so they can never drift apart. Tokens,
   type scale and the reveal mechanism are lifted from index.html rather
   than re-invented, so a subpage and the homepage read as one site.

   The source drafts arrived in a light amber-on-paper system (Archivo,
   #FFB020 on #F5F7F9). Everything below is the same CONTENT rebuilt in
   the site's own dark language — the copy is verbatim, the shell is not. */

:root {
  --bg: #070A06;
  --lime: #B3D230;
  --cyan: #2EABC6;
  --accent: #7FC46B;
  --text: #EFF3E9;
  --text-dim: rgba(239, 243, 233, 0.56);
  --mint: #62BA8B;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --line: rgba(239, 243, 233, 0.12);
  --panel: rgba(239, 243, 233, 0.028);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 88px; }

/* the ground colour lives on <html> so the fixed wave canvas at
   z-index -1 sits above it and below the page content; a painted
   body would cover the canvas entirely */
html { background: var(--bg); }
body {
  background: transparent; color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.03em; line-height: 1.06; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ── nav: identical device to the homepage, but always visible here
      because a subpage has no film to scroll past first ── */
#brandnav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,10,6,0.84); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(239,243,233,0.07);
  /* padding deliberately NOT set here. nav.css owns it, including the
     responsive band that keeps six top-level items from running off the
     right edge - and sub.css loads after nav.css, so redeclaring padding
     here silently beat that rule on all nineteen subpages. */
}
#brandnav .mark { display: flex; align-items: center; gap: 11px; color: var(--text); }
.logo-mark { display: block; height: 1em; width: auto; font-size: 30px; }
.logo-word { display: block; height: 1em; width: auto; font-size: 13px; }
#brandnav .links { display: flex; gap: 2.2vw; }
#brandnav a { color: var(--text-dim); font-size: 11.5px; letter-spacing: 0.18em;
              text-transform: uppercase; transition: color .25s; }
#brandnav a:hover, #brandnav a.on { color: var(--text); }
#brandnav a.on { color: var(--lime); }
#brandnav .navcta { border: 1px solid var(--lime); border-radius: 100px;
                    padding: 8px 22px; color: var(--lime); }
@media (max-width: 900px) { #brandnav .links { display: none; } }

.wrap { max-width: 1500px; margin: 0 auto; padding: 0 7vw; }
section { padding: 12vh 0; }

/* ── hero ── */
.hero { position: relative; overflow: hidden; padding: 12vh 0 10vh;
        border-bottom: 1px solid var(--line); }
/* the hairline grid is the drawing language from the module plates */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(239,243,233,.04) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(239,243,233,.04) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 20%, transparent 80%);
}
/* a lime scan crossing the hero, the same gesture the plates use */
.hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 220px; left: -220px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(179,210,48,.10), transparent);
  animation: heroSweep 9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroSweep { 0% { transform: translateX(0); }
                       55%, 100% { transform: translateX(calc(100vw + 220px)); } }
.hero .wrap { position: relative; z-index: 1; }
/* staggered entrance. Deliberately a CSS animation rather than the
   data-reveal observer: the hero is above the fold, and an observer that
   never fires would leave the whole masthead blank. */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); }
                    to   { opacity: 1; transform: none; } }
.hero .crumb, .hero .eyebrow, .hero h1, .hero .lead, .hero .chips {
  animation: heroIn .9s var(--ease) both;
}
.hero .eyebrow { animation-delay: .06s; }
.hero h1      { animation-delay: .14s; }
.hero .lead   { animation-delay: .24s; }
.hero .chips  { animation-delay: .34s; }
.crumb { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em;
         text-transform: uppercase; color: rgba(239,243,233,.58); margin-bottom: 22px; }
.crumb a { color: rgba(239,243,233,.62); transition: color .25s; }
.crumb a:hover { color: var(--lime); }
.crumb i { font-style: normal; padding: 0 8px; color: rgba(239,243,233,.28); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px;
           font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .3em;
           text-transform: uppercase; color: var(--lime); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--lime); }
.hero h1 { font-size: clamp(34px, 5.4vw, 68px); font-weight: 600;
           max-width: 17ch; margin: 22px 0 24px; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { color: var(--text-dim); font-size: clamp(15px, 1.35vw, 19px);
              line-height: 1.75; max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em;
        text-transform: uppercase; color: rgba(239,243,233,.66);
        border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px;
        white-space: nowrap; transition: border-color .3s var(--ease), color .3s var(--ease); }
.chip:hover { border-color: rgba(179,210,48,.5); color: var(--text); }

/* ── section heads ── */
.sec-head { max-width: 62ch; margin-bottom: 54px; }
.sec-head h2 { font-size: clamp(28px, 3.8vw, 50px); font-weight: 600; margin: 18px 0 16px; }
.sec-head p { color: var(--text-dim); font-size: clamp(14px, 1.25vw, 17px); line-height: 1.75; }
.tint { background: rgba(239,243,233,0.018);
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ── cards ── */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr));
         grid-auto-rows: 1fr; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px 28px;
        background: var(--panel); position: relative; overflow: hidden;
        transition: border-color .35s var(--ease), transform .35s var(--ease); }
.card:hover { border-color: rgba(179,210,48,.42); transform: translateY(-4px); }
.card h4, .card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.card > p { font-size: 14px; color: var(--text-dim); line-height: 1.65; }
.card ul { list-style: none; margin-top: 16px; padding-top: 14px;
           border-top: 1px solid rgba(239,243,233,.09); }
.card li { font-size: 13.5px; color: rgba(239,243,233,.72); padding: 6px 0 6px 20px;
           position: relative; line-height: 1.55; }
.card li::before { content: ""; position: absolute; left: 0; top: 13px;
                   width: 9px; height: 1px; background: var(--lime); }

/* ── functional depth grid ── */
.depth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: 14px; grid-auto-rows: 1fr; }
@media (max-width: 1020px) { .depth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .depth-grid { grid-template-columns: 1fr; } }
.depth-item { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 20px;
              background: var(--panel); font-size: 13.5px; line-height: 1.6;
              color: rgba(239,243,233,.74);
              transition: border-color .35s var(--ease); }
.depth-item:hover { border-color: rgba(46,171,198,.42); }
.depth-item span { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
                   letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
                   margin-bottom: 8px; }

/* ── delivery phases: a rail that draws itself across the row ── */
.phases { position: relative; display: grid; gap: 14px;
          grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.phases::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px;
  background: linear-gradient(90deg, var(--lime), rgba(179,210,48,.15));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease) .2s;
}
.phases.in::before { transform: scaleX(1); }
@media (max-width: 1020px) { .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .phases::before { display: none; } }
@media (max-width: 620px)  { .phases { grid-template-columns: 1fr; } }
.phase { position: relative; border: 1px solid var(--line); border-radius: 10px;
         padding: 20px 18px 22px; background: var(--bg);
         transition: border-color .35s var(--ease), transform .35s var(--ease); }
.phase:hover { border-color: rgba(179,210,48,.42); transform: translateY(-3px); }
.phase .n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em;
            color: var(--lime); }
.phase h4, .phase h3 { font-size: 16px; font-weight: 600; margin: 10px 0 8px; }
.phase p { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* ── why rail ── */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
.why-item { border-left: 2px solid var(--lime); padding: 4px 0 4px 22px; }
.why-item h4, .why-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.why-item p { font-size: 14.5px; color: var(--text-dim); line-height: 1.7; }

/* ── comparison table (LGM) ── */
.fit-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 18px 20px; text-align: left; font-size: 14px; line-height: 1.6;
         border-bottom: 1px solid rgba(239,243,233,.08); vertical-align: top; }
thead th { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em;
           text-transform: uppercase; color: var(--text-dim); font-weight: 500;
           background: rgba(239,243,233,.03); }
thead th.hl { color: var(--lime); }
tbody tr:last-child td { border-bottom: none; }
td.dim { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14.5px;
         color: var(--text); white-space: nowrap; }
td { color: var(--text-dim); }
td.hl { background: rgba(179,210,48,.06); color: rgba(239,243,233,.82);
        box-shadow: inset 1px 0 0 rgba(179,210,48,.28), inset -1px 0 0 rgba(179,210,48,.28); }
tbody tr:first-child td.hl { box-shadow: inset 1px 0 0 rgba(179,210,48,.28),
                                         inset -1px 0 0 rgba(179,210,48,.28),
                                         inset 0 1px 0 rgba(179,210,48,.28); }
tbody tr:last-child td.hl { box-shadow: inset 1px 0 0 rgba(179,210,48,.28),
                                        inset -1px 0 0 rgba(179,210,48,.28),
                                        inset 0 -1px 0 rgba(179,210,48,.28); }

/* ── scale path (LGM) ── */
/* Flex, not a fixed 5-column grid. The grid version spelled out
   '1fr auto 1fr auto 1fr' - exactly three steps and two arrows - so a
   four-step path silently wrapped its last arrow and step onto a second
   row. Equal-width steps with content-width arrows works for any count. */
.path { display: flex; align-items: stretch; }
.path > .path-step { flex: 1 1 0; min-width: 0; }
.path > .path-arrow { flex: 0 0 auto; }
@media (max-width: 900px) { .path { flex-direction: column; } }
.path-step { border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px;
             background: var(--panel);
             transition: border-color .35s var(--ease), transform .35s var(--ease); }
.path-step:hover { border-color: rgba(179,210,48,.42); transform: translateY(-4px); }
.path-step .chip { display: inline-block; margin-bottom: 16px; }
.path-step h4, .path-step h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.path-step p { font-size: 14px; color: var(--text-dim); line-height: 1.7; }
.path-arrow { display: grid; place-items: center; padding: 0 18px; color: var(--lime); }
.path-arrow svg { width: 26px; height: 26px; }
/* the arrow nudges along the path, so the sequence reads as a direction */
.path-arrow svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-3px); opacity: .55; }
                   50% { transform: translateX(3px); opacity: 1; } }
@media (max-width: 900px) { .path-arrow { padding: 14px 0; transform: rotate(90deg); } }

/* ── DriverX feature (TM) ── */
.feature-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 5vw; align-items: center; }
@media (max-width: 900px) { .feature-in { grid-template-columns: 1fr; gap: 34px; } }
.feature h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 600; margin: 18px 0 18px; }
.feature > div > p { color: var(--text-dim); font-size: 16px; line-height: 1.75; }
.feature ul { list-style: none; margin-top: 24px; }
.feature li { position: relative; padding: 9px 0 9px 26px; font-size: 15px;
              color: rgba(239,243,233,.78); line-height: 1.6; }
.feature li::before { content: ""; position: absolute; left: 0; top: 18px;
                      width: 13px; height: 1px; background: var(--lime); }
.feature-panel { border: 1px solid rgba(179,210,48,.3); border-radius: 14px; padding: 34px 32px;
                 background: linear-gradient(155deg, rgba(179,210,48,.09), rgba(239,243,233,.02)); }
.feature-panel h3 { font-size: 23px; font-weight: 600; margin: 16px 0 12px; }
.feature-panel p { font-size: 14.5px; color: var(--text-dim); line-height: 1.75; }

/* ── closing CTA ── */
.cta-in { display: flex; flex-wrap: wrap; align-items: center;
          justify-content: space-between; gap: 34px; }
.cta h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 600; max-width: 20ch; }
.cta p { color: var(--text-dim); margin-top: 14px; max-width: 52ch; font-size: 15.5px; line-height: 1.7; }
/* Matched to the homepage's "Send enquiry" button, which is the reference
   for every green button on the site. The text was the visible mismatch -
   subpages were sentence case at weight 600 with .04em tracking, the
   homepage uppercase at 400 with .12em - so a visitor moving between them
   met two different buttons. Padding comes along too: uppercase at .12em
   is a wider word and needs the extra horizontal room the homepage gives it. */
.btn { display: inline-block; background: var(--lime); color: #0d1600; font-weight: 400;
       padding: 14px 38px; border-radius: 100px; font-size: 14px; letter-spacing: .12em;
       text-transform: uppercase;
       transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(179,210,48,.22); }

/* ── footer, matching the homepage ── */
footer.bp-footer { border-top: 1px solid rgba(239,243,233,0.08); padding: 9vh 7vw 6vh; }
.bp-footer .cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 5vw;
                   max-width: 1500px; margin: 0 auto; }
@media (max-width: 900px) { .bp-footer .cols { grid-template-columns: 1fr 1fr; gap: 8vw 5vw; } }
@media (max-width: 560px) { .bp-footer .cols { grid-template-columns: 1fr; } }
.footmark { display: flex; align-items: center; gap: 12px; color: var(--text); }
.footmark .logo-mark { font-size: 34px; }
.footmark .logo-word { font-size: 15px; }
.bp-footer .ft-k, .bp-footer h4, .bp-footer h3 { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
                color: var(--text-dim); margin: 0 0 16px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.bp-footer a, .bp-footer .fl { display: block; color: var(--text-dim); font-size: 13.5px;
                               margin-bottom: 10px; transition: color .25s; }
.bp-footer a:hover { color: var(--text); }
.bp-footer .fine { font-family: 'IBM Plex Mono', monospace; font-size: 10px;
                   letter-spacing: .24em; text-transform: uppercase;
                   color: rgba(239,243,233,.52); margin-top: 7vh; text-align: center; }

/* ── reveal on scroll: same contract as the homepage. The .in class is
      added by an observer AND by a scroll sweep, so content is never
      stranded at opacity 0 if the observer is throttled or skipped. ── */
[data-reveal] { opacity: 0; transform: translateY(26px);
                transition: opacity .8s cubic-bezier(.2,.6,.2,1),
                            transform .8s cubic-bezier(.2,.6,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .08s; }
[data-reveal][data-d="2"] { transition-delay: .16s; }
[data-reveal][data-d="3"] { transition-delay: .24s; }
[data-reveal][data-d="4"] { transition-delay: .32s; }
[data-reveal][data-d="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero::after, .path-arrow svg { animation: none; }
  .hero .crumb, .hero .eyebrow, .hero h1, .hero .lead, .hero .chips { animation: none; }
  .phases::before { transition: none; transform: scaleX(1); }
  .card, .phase, .path-step, .depth-item, .btn { transition: none; }
}

/* ═══ service / industries pages ══════════════════════════════════════
   Added for the five pages under Services and Industries. Where a
   component already existed it is REUSED rather than duplicated: the AMS
   scope grid is .depth-grid, its principles are .why, and the role list
   is a row of .chip — three fewer things to keep in sync later. */

/* ── the tab strip that links the four service pages ── */
/* The offset is the nav's REAL height, published as --navh by sub.js.
   A hardcoded guess was 63px against an actual 69px, so the tab strip
   slid 6px under the nav once both were stuck. The literal here is only
   the fallback for a page where the script has not run yet. */
.svc-tabs { position: sticky; top: var(--navh, 69px); z-index: 70;
            background: rgba(7,10,6,.9); backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line); }
.svc-tabs .wrap { display: flex; gap: 0; overflow-x: auto;
                  scrollbar-width: none; }
.svc-tabs .wrap::-webkit-scrollbar { display: none; }
/* tabs share the column: each grows to fill its share of the content width
   (space-between look, centred labels); type scales with the viewport so the
   row reads at laptop and desktop sizes alike. Overflow still scrolls. */
.svc-tab { position: relative; flex: 1 0 auto; text-align: center; white-space: nowrap; padding: 16px 10px;
           font-family: 'IBM Plex Mono', monospace; font-size: clamp(10.5px, .84vw, 13px);
           letter-spacing: .12em; text-transform: uppercase;
           color: rgba(239,243,233,.55); transition: color .3s var(--ease); }
.svc-tab:hover { color: var(--text); }
/* the active marker is a scaled bar, so switching pages costs no layout */
.svc-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
                  height: 2px; background: var(--lime);
                  transform: scaleX(0); transform-origin: center;
                  transition: transform .35s var(--ease); }
.svc-tab.active { color: var(--lime); }
.svc-tab.active::after { transform: scaleX(1); }
@media (max-width: 900px) { .svc-tab { padding: 17px 12px; font-size: 11px; } }   /* >=48px tap rows on phones */

/* ── industries ── */
.ind-grid { display: grid; gap: 18px; grid-auto-rows: 1fr;
            grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ind-grid { grid-template-columns: 1fr; } }
.ind-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
            background: var(--panel); display: flex; flex-direction: column;
            transition: border-color .35s var(--ease), transform .35s var(--ease); }
.ind-card:hover { border-color: rgba(179,210,48,.42); transform: translateY(-4px); }
.ind-media { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden;
             background: radial-gradient(120% 130% at 30% 0%, #101810, #060907 72%); }
.ind-media img { width: 100%; height: 100%; object-fit: cover; display: block;
                 opacity: .68; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.ind-card:hover .ind-media img { opacity: .92; transform: scale(1.05); }
/* the number sits over the photo, so a card with no photo still reads as
   part of the same set rather than as a broken tile */
.ind-media .num { position: absolute; left: 16px; top: 14px; z-index: 2;
                  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
                  letter-spacing: .2em; color: var(--lime);
                  background: rgba(7,10,6,.72); border: 1px solid rgba(179,210,48,.32);
                  border-radius: 5px; padding: 4px 9px; }
.ind-media.no-photo { display: grid; place-items: center; }
.ind-media.no-photo::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(239,243,233,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(239,243,233,.05) 0 1px, transparent 1px 34px);
}
.ind-body { padding: 20px 22px 24px; flex: 1; }
.ind-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.ind-body p { font-size: 14px; color: var(--text-dim); line-height: 1.65; }
.ind-mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ind-mods .chip { font-size: 10px; padding: 5px 11px; }

/* ── advisory: the duration line on each product card ── */
.dur { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(239,243,233,.09);
       font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em;
       text-transform: uppercase; color: var(--cyan); }

/* ── two-up card grid (implementation) ── */
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .cards.c2 { grid-template-columns: 1fr; } }

/* ── four-across phase rail (AMS transition, augmentation steps) ── */
.phases.p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .phases.p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .phases.p4 { grid-template-columns: 1fr; } }

/* ── role list ── */
.roles-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.roles-grid .chip { font-size: 11.5px; padding: 9px 17px; }

/* ── industry detail pages ────────────────────────────────────────────
   The hero carries the industry photograph behind the copy, faded well
   back so headline contrast never depends on which crop is used. */
.ind-hero { position: relative; }
.ind-hero-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ind-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .22;
                      transform: scale(1.04); }
/* the copy sits on a solid ramp, not on the photo itself */
.ind-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(7,10,6,.92) 48%, rgba(7,10,6,.62) 100%),
              linear-gradient(0deg, var(--bg), transparent 60%);
}
.ind-hero .wrap { position: relative; z-index: 2; }

/* the "Challenge 01" marker on each card */
.ch-tag { display: inline-block; margin-bottom: 14px; color: var(--cyan);
          border-color: rgba(46,171,198,.34); }
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

.anchor-note { margin-top: 26px; font-size: 14px; color: var(--text-dim); line-height: 1.7; }
.anchor-note a { color: var(--lime); border-bottom: 1px solid rgba(179,210,48,.35);
                 transition: border-color .25s var(--ease); }
.anchor-note a:hover { border-color: var(--lime); }
/* the hub tiles are whole-card links */
a.ind-card { color: inherit; text-decoration: none; }
a.ind-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ═══ capability map (sap-capabilities.html) ══════════════════════════ */
.tier { border-left: 2px solid rgba(239,243,233,.14); padding-left: 28px; margin-bottom: 64px; }
.tier.core { border-left-color: var(--lime); }
.tier-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em;
            text-transform: uppercase; color: rgba(239,243,233,.5); margin-bottom: 10px; }
.tier.core .tier-tag { color: var(--lime); }
.tier h3 { font-size: clamp(21px, 2.4vw, 29px); font-weight: 600; margin-bottom: 12px; }
.tier > p { color: var(--text-dim); max-width: 62ch; margin-bottom: 28px;
            font-size: 15px; line-height: 1.72; }
.card.flagship { border-top: 2px solid var(--lime); }
.card .tcode { display: inline-block; margin-bottom: 14px; }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards.c4 { grid-template-columns: 1fr; } }
.cards.mini .card { padding: 18px 18px 20px; }
.cards.mini h4, .cards.mini h3 { font-size: 15.5px; margin-bottom: 6px; }
.cards.mini > .card > p { font-size: 13px; }

/* the engagement matrix */
.pill { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
        letter-spacing: .1em; padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.pill.lead { background: var(--lime); color: #0d1600; font-weight: 600; }
.pill.yes  { background: rgba(239,243,233,.1); color: var(--text); }
.pill.sel  { background: transparent; border: 1px solid rgba(239,243,233,.24); color: var(--text-dim); }
td.svc { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14.5px;
         color: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px;
          font-size: 13px; color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: 9px; }

/* ── careers ──────────────────────────────────────────────────────────
   Openings are fetched from a Google Sheet at runtime (careers.js), so
   this markup is built in JS and none of it exists in the HTML. Two
   consequences shaped the styling: there is no server-rendered height to
   reserve, and the number of roles is unknown, so nothing here depends on
   a fixed count or a fixed height. */
.job-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lime); margin-bottom: 22px;
}
.job-list { display: flex; flex-direction: column; gap: 12px; }

/* ── the resting state, while HR's sheet is still answering ──────────
   Skeleton rows rather than a spinner: they occupy the same box as a
   real role, so the list does not jump when the roles arrive. The
   shimmer is a moving gradient on the compositor, and it stops for
   anyone who has asked for reduced motion. */
.job-skel { padding: 24px; display: flex; flex-direction: column; gap: 12px;
            border: 1px solid var(--line); border-radius: 13px;
            background: var(--panel); }
.job-skel span { display: block; height: 13px; border-radius: 4px;
                 background: linear-gradient(90deg,
                   rgba(239,243,233,.05) 0%, rgba(239,243,233,.05) 32%,
                   rgba(239,243,233,.13) 50%,
                   rgba(239,243,233,.05) 68%, rgba(239,243,233,.05) 100%);
                 background-size: 280% 100%;
                 animation: jobShimmer 1.5s ease-in-out infinite; }
.job-skel .t { height: 17px; width: 46%; }
.job-skel .m { width: 68%; }
.job-skel:nth-child(2) .t { width: 38%; } .job-skel:nth-child(2) .m { width: 58%; }
.job-skel:nth-child(3) .t { width: 52%; } .job-skel:nth-child(3) .m { width: 62%; }
.job-skel span:nth-child(2) { animation-delay: .18s; }
.job-skel:nth-child(2) span { animation-delay: .12s; }
.job-skel:nth-child(3) span { animation-delay: .24s; }
@keyframes jobShimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
.job-count.is-loading { color: rgba(239,243,233,.42); }
@media (prefers-reduced-motion: reduce) {
  .job-skel span { animation: none; background: rgba(239,243,233,.07); }
}

.job {
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel);
  overflow: hidden; transition: border-color .35s var(--ease), background-color .35s var(--ease);
  /* staggered arrival, indexed from JS so it survives any number of roles */
  animation: jobIn .55s var(--ease) both; animation-delay: calc(var(--j, 0) * 70ms);
}
@keyframes jobIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.job:hover { border-color: rgba(179,210,48,.4); }
.job.on { border-color: rgba(179,210,48,.55); background: rgba(179,210,48,.05); }

.job-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 24px; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.job-head h3 { font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; }
.job-meta {
  margin-top: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(239,243,233,.52);
}
.job-sep { margin: 0 8px; opacity: .5; }

/* a chevron drawn in CSS - no icon file to ship, and it rotates on open */
.job-chev {
  flex: none; width: 11px; height: 11px; border-right: 1.8px solid var(--lime);
  border-bottom: 1.8px solid var(--lime); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .35s var(--ease); opacity: .75;
}
.job.on .job-chev { transform: rotate(225deg) translate(-2px, -2px); opacity: 1; }

/* 0fr → 1fr rather than max-height: the body is content-agnostic, so a role
   with twelve bullets opens as cleanly as one with two, and the copy stays
   in the accessibility tree while closed. */
.job-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.job.on .job-body { grid-template-rows: 1fr; }
.job-inner { overflow: hidden; padding: 0 24px; }
.job.on .job-inner { padding-bottom: 26px; }

.job-sum { font-size: 15px; line-height: 1.72; color: rgba(239,243,233,.74); max-width: 70ch; margin-bottom: 22px; }
.job-col { margin-bottom: 20px; }
.job-coltitle {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lime); margin-bottom: 10px;
}
.job-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.job-col li {
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.62;
  color: rgba(239,243,233,.7); max-width: 78ch;
}
.job-col li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: rgba(179,210,48,.55);
}
.job-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.job-posted {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(239,243,233,.42);
}

/* One state for "nothing to show", used both when the sheet says there are
   no roles and when the sheet could not be read at all. */
.job-empty {
  border: 1px dashed var(--line); border-radius: 14px; padding: 46px 34px;
  text-align: center; max-width: 62ch; margin: 0 auto;
}
.job-empty h3 { font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; margin-bottom: 14px; }
.job-empty p { font-size: 15px; line-height: 1.72; color: rgba(239,243,233,.66); margin-bottom: 26px; }

@media (max-width: 640px) {
  .job-head { padding: 18px 18px; gap: 14px; }
  .job-inner { padding: 0 18px; }
  .job-empty { padding: 34px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .job { animation: none; }
  .job-body, .job-chev { transition: none; }
}

/* ── closed roles ─────────────────────────────────────────────────────
   Filled roles stay on the page: they show what the practice actually
   hires for, which tells a visitor more than an empty list does. They are
   dimmed and carry no apply button, so nobody wastes an application. */
.job-closed { opacity: .62; }
.job-closed:hover { opacity: .82; border-color: rgba(239,243,233,.2); }
.job-closed.on { border-color: rgba(239,243,233,.22); background: rgba(239,243,233,.02); }
.job-closed .job-chev { border-color: rgba(239,243,233,.4); }
.job-pill {
  display: inline-block; margin-left: 12px; vertical-align: middle;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(239,243,233,.6);
  border: 1px solid rgba(239,243,233,.22); border-radius: 100px; padding: 3px 9px;
}
/* The filled section is a full section head now, so it needs air above it to
   read as a break rather than a continuation of the open list. */
/* a second hero paragraph, joining the staggered hero entrance one beat
   after the first rather than arriving with it */
.hero .lead-2 { margin-top: 16px; animation-delay: .3s; }

.job-sep-head { margin-top: 92px; }
.job-sep-head p + p { margin-top: 15px; }
@media (max-width: 640px) { .job-sep-head { margin-top: 64px; } }
.job-alt {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime); text-decoration: none;
  border-bottom: 1px solid rgba(179,210,48,.35); padding-bottom: 3px;
}
.job-alt:hover { border-color: var(--lime); }

/* ── application form ─────────────────────────────────────────────────── */
.ap-form { max-width: 760px; }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
@media (max-width: 680px) { .ap-grid { grid-template-columns: 1fr; } }
.ap-form .field { display: block; margin-bottom: 18px; }
.ap-form .field > span {
  display: block; margin-bottom: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(239,243,233,.6);
}
.ap-form .field > span i { color: var(--lime); font-style: normal; margin-left: 3px; }
.ap-form input[type="text"], .ap-form input[type="email"], .ap-form input[type="tel"],
.ap-form input[type="url"], .ap-form textarea {
  width: 100%; background: rgba(239,243,233,.035); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  font: inherit; font-size: 14.5px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.ap-form input:focus, .ap-form textarea:focus {
  outline: none; border-color: rgba(179,210,48,.6); background: rgba(179,210,48,.05);
}
.ap-form textarea { resize: vertical; line-height: 1.65; }
.ap-form .field.invalid input, .ap-form .field.invalid textarea,
.ap-form .field.invalid input[type="file"] { border-color: rgba(233,90,80,.75); }

.ap-file input[type="file"] {
  width: 100%; background: rgba(239,243,233,.035); color: var(--text-dim);
  border: 1px dashed var(--line); border-radius: 10px; padding: 14px 15px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.ap-file input[type="file"]::file-selector-button {
  background: rgba(179,210,48,.14); color: var(--lime); border: 1px solid rgba(179,210,48,.4);
  border-radius: 100px; padding: 7px 16px; margin-right: 14px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
}
.ap-hint { display: block; margin-top: 7px; font-size: 12px; color: rgba(239,243,233,.4); font-style: normal; }

/* the honeypot: off-screen rather than display:none, which some bots skip */
.ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ap-role {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 30px; padding: 16px 20px;
  border: 1px solid rgba(179,210,48,.3); border-radius: 12px;
  background: rgba(179,210,48,.06);
}
.ap-role-k {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(239,243,233,.55);
}
.ap-role strong { font-size: 16px; font-weight: 600; color: var(--lime); }

.ap-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.ap-submit[disabled] { opacity: .55; cursor: default; }
.ap-note { font-size: 14px; line-height: 1.6; max-width: 46ch; }
.ap-note.ok { color: var(--lime); }
.ap-note.bad { color: #E9756B; }
.ap-fine { margin-top: 22px; font-size: 12.5px; color: rgba(239,243,233,.4); }

/* the area-of-interest select, matching the text inputs beside it */
.ap-form select {
  width: 100%; background: rgba(239,243,233,.035); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  font: inherit; font-size: 14.5px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(239,243,233,.5) 50%),
                    linear-gradient(135deg, rgba(239,243,233,.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.ap-form select:focus { outline: none; border-color: rgba(179,210,48,.6); }
.ap-form select option { background: #0C130A; color: var(--text); }
.ap-form .field.invalid select { border-color: rgba(233,90,80,.75); }

/* ═══ blueprint pages ═══════════════════════════════════════════════════
   Additions for the pages introduced by the Website Content & Improvement
   Blueprint: About, Leadership, Success Stories, Services, Project
   Assurance, Partners, Contact, DriverX, Insights. Everything reuses the
   card / depth / why vocabulary above; these are the few extras. */

/* an unconfirmed fact, visible on the review copy and removed as each is
   approved. Nothing should ship to production while one remains. */
.validate { display: inline-block; vertical-align: middle; margin-left: 6px;
            font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em;
            text-transform: uppercase; color: #E0913F; border: 1px solid rgba(224,145,63,.45);
            background: rgba(224,145,63,.10); border-radius: 4px; padding: 2px 7px; }

/* leadership */
.bio-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.av { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
      font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em;
      color: var(--lime); background: rgba(179,210,48,.12); border: 1px solid rgba(179,210,48,.35); }
.bio-role { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em;
            text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }

/* success stories: facts strip, then four columns of bullets */
.case-facts { margin-bottom: 26px; }
.case-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .case-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .case-cols { grid-template-columns: 1fr; } }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { position: relative; padding: 5px 0 5px 18px; font-size: 14px; line-height: 1.55; color: rgba(239,243,233,.74); }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 1px; background: var(--lime); }

/* contact: form beside the details column */
.ct-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .ct-wrap { grid-template-columns: 1fr; } }
.ct-side { display: flex; flex-direction: column; gap: 12px; }
.ct-side .depth-item a { color: var(--lime); }
.ap-form .field.wide { grid-column: 1 / -1; }
.ap-form .field > span small { text-transform: none; letter-spacing: 0; color: rgba(239,243,233,.42); margin-left: 6px; }

/* insights: article and post cards on the subpage grid */
.card.ins { padding-top: 0; }
.ins-fig { margin: 0 -24px 18px; aspect-ratio: 16 / 9; overflow: hidden; background: #10170F; }
.ins-fig img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.card .chip.study { border-color: var(--lime); color: var(--lime); }
.li-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.li-head strong { display: block; font-size: 14.5px; color: var(--text); }
.li-head small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.card.li > p { margin-top: 10px; }
.fd-empty { color: var(--text-dim); font-size: 14px; }

/* ── see-also row: the cross-links §37 asks for, in the chip idiom ── */
.related { padding: 0 0 72px; }
.related .eyebrow { margin-bottom: 4px; }
.rel-row { margin-top: 16px; }
.rel-row a.chip { text-decoration: none; }
.rel-row a.chip:hover { color: var(--lime); border-color: var(--lime); }

/* a small in-context "more" link (case-study cross-links from the industry
   scope card, etc.); mirrors nav.css .nav-all but available on subpages */
.morelink { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
            font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em;
            text-transform: uppercase; color: var(--lime); text-decoration: none; }
.morelink svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.morelink:hover { text-decoration: underline; }
.morelink:hover svg { transform: translateX(3px); }

/* the blueprint's one primary CTA in every hero */
.hero .hero-btn { margin-top: 30px; }
.hero .chips + .hero-btn { margin-top: 26px; }

/* linked chips on the 404 page */
.hero .chips a.chip { text-decoration: none; }
.hero .chips a.chip:hover { color: var(--lime); border-color: var(--lime); }

/* width/height attributes reserve layout space; the rendered box still follows CSS */
img[width][height] { height: auto; }
.ind-media img[width][height], .ind-hero-media img[width][height] { height: 100%; }

/* one bar, always. When a strip is wider than the screen it scrolls sideways;
   sub.js marks which edges have more behind them and only those fade, so the
   first and last tabs read cleanly once you have swiped to either end. */
.svc-tabs.more-right .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
                                     mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.svc-tabs.more-left .wrap  { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px);
                                     mask-image: linear-gradient(90deg, transparent, #000 64px); }
.svc-tabs.more-left.more-right .wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }

/* ── 404: "Wrong aisle" ─────────────────────────────────────────────── */
.nf-hero { padding: 12vh 0 9vh; }
.nf-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 6vw; align-items: center; }
.nf-copy h1 { margin-bottom: 18px; }
.nf-copy .lead { max-width: 560px; }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.nf-actions .hero-btn { margin-top: 0; }
.nf-mail { margin: 0; font-size: 14.5px; color: var(--text-dim); }
.nf-mail a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(179,210,48,.4); }
.nf-mail a:hover { border-bottom-color: var(--lime); }
.nf-mark { display: grid; justify-items: center; gap: 22px; }
.nf-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: .85; letter-spacing: -.04em;
          font-size: clamp(120px, 17vw, 260px); color: transparent;
          -webkit-text-stroke: 1.5px rgba(179,210,48,.75);
          background: radial-gradient(circle, rgba(179,210,48,.22) 0 1.2px, transparent 1.6px) 0 0 / 14px 14px;
          -webkit-background-clip: text; background-clip: text; }
.nf-tag { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(179,210,48,.55);
          border-radius: 6px; background: rgba(179,210,48,.06);
          font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.nf-tag b { font-weight: 500; color: var(--lime); }
.nf-tag i { width: 1px; height: 14px; background: rgba(179,210,48,.45); }
.nf-routes { padding: 8vh 0 12vh; }
.nf-k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
        color: var(--lime); margin: 0 0 18px; }
.nf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nf-grid a { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 24px 56px 24px 24px; border-radius: 14px;
             border: 1px solid var(--line); background: #0E140D; color: inherit; text-decoration: none;
             transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease); }
.nf-lab { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.nf-grid b { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; }
.nf-grid small { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.nf-grid i { position: absolute; right: 22px; top: 24px; font-style: normal; font-size: 20px; color: var(--lime); opacity: .55;
             transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nf-grid a:hover, .nf-grid a:focus-visible { border-color: rgba(179,210,48,.55); background: #111910; transform: translateY(-2px); }
.nf-grid a:hover i, .nf-grid a:focus-visible i { opacity: 1; transform: translateX(4px); }
.nf-grid a:hover b { color: var(--lime); }
@media (max-width: 900px) {
  .nf-in { grid-template-columns: 1fr; gap: 34px; }
  .nf-mark { justify-items: start; gap: 14px; }
  .nf-num { font-size: clamp(96px, 30vw, 150px); }
  .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nf-hero { padding: 8vh 0 10vh; }
  /* phones: keep the page short - headline, homepage button, email; the full menu is one tap away */
  .nf-routes { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nf-grid a, .nf-grid i { transition: none; } }

/* ── consent checkbox (tools/blueprint_consent.py) ─────────────────────────── */
.ap-consent { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 6px; padding: 14px 16px; border: 1px solid var(--line);
              border-radius: 12px; background: rgba(255,255,255,.015); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.ap-consent:hover { border-color: rgba(179,210,48,.45); }
.ap-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid rgba(179,210,48,.75);
                    border-radius: 6px; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color .15s var(--ease); }
.ap-consent input::after { content: ""; width: 6px; height: 11px; border: solid #0d1600; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.ap-consent input:checked { background: var(--lime); border-color: var(--lime); }
.ap-consent input:checked::after { opacity: 1; }
.ap-consent input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ap-consent span { font-size: 14px; line-height: 1.55; color: rgba(239,243,233,.8); }
.ap-consent.invalid { border-color: rgba(233,90,80,.8); background: rgba(233,90,80,.05); }
.ap-consent-warn { display: none; margin: 0 0 4px; font-size: 13px; color: #E9756B; }
.ap-consent-warn.show { display: block; }
/* until the box is ticked the button looks inactive, but stays clickable so a press explains why */
.ap-form.consent-pending .ap-submit { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ap-consent, .ap-consent input { transition: none; } }

/* in-copy links (content and AI-search merge, C8): capability pages and success stories */
a.inl { color: inherit; border-bottom: 1px solid rgba(179,210,48,.55); transition: color .2s, border-color .2s; }
a.inl:hover, a.inl:focus-visible { color: var(--lime); border-bottom-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { a.inl { transition: none; } }
/* acronym expansions in headings: available on hover and to screen readers, without the browser's dotted underline */
h3 abbr[title] { text-decoration: none; }