/* =============================================================================
   MAATARA CONSULTING - SERVICE PAGE STYLES
   assets/css/service-page.css

   Loaded AFTER theme.css. It adds the section types that appear on service
   pages only, so home.html and service pages share one design system while a
   service page can carry more sections than a landing page.

   Section order on a service page (this is the template):
     1  hero               (theme: .hero)
     2  client strip       (theme: .clients)
     3  approach           (theme: .feat)
     4  frameworks grid    (.svc-grid / .card .svc)
     5  cta band           (theme: .cta-band)
     6  outcomes           (.out-grid)
     7  services grid      (.card .svc)
     8  why                (theme: .split + .stat-grid)
     9  cta band
     10 deliverables       (.deliv)
     11 case studies       (theme: .card .case)
     12 business-model tabs (theme: .tabs)
     13 engagement model   (theme: .card .em)
     14 testimonials       (theme: .card .t-card)
     15 engagement models  (theme: .card .plan)
     16 fit check          (theme: .fit)
     17 faq                (theme: .faq-layout)
     18 contact            (theme: .contact-panel)
     19 related            (theme: .rel)

   WordPress mapping: this file is enqueued on the service-page template only.
   Every class here becomes an Elementor widget class or a shortcode class.
   ========================================================================== */

/* =============================================================================
   FRAMEWORK CARDS
   Compact icon-and-copy cards used in the "control frameworks" section.
   ========================================================================== */

.fw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .fw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fw-grid {
    grid-template-columns: 1fr;
  }
}

.fw-card {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fw-card h3 {
  font-size: 18px;
  line-height: 1.35;
  margin-top: 4px;
}

.fw-card p {
  font-size: 15px;
  color: var(--text-2);
}

/* =============================================================================
   SERVICE LIST CARDS
   Numbered cards. The number sits top-right, the icon below it.
   ========================================================================== */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.svc-card {
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--svc-gap);
}

.svc-card .svc-num {
  top: 26px;
  right: 26px;
}

.svc-card h3 {
  font-size: 19px;
  margin-top: 6px;
}

.svc-card p {
  font-size: var(--fs-card-p);
  color: var(--text-2);
  flex-grow: 1;
}

.svc-card .svc-tag {
  align-self: flex-start;
  margin-top: 2px;
}

/* =============================================================================
   ENGAGEMENT MODEL CARDS
   Numbered process cards with a rotating icon accent.
   ========================================================================== */

.em-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 900px) {
  .em-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .em-grid {
    grid-template-columns: 1fr;
  }
}

.em {
  position: relative;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The watermark numeral. --line-2 is a border token and reads as noise on the
   card, so the numerals use --text-3, the muted ink meant for large decorative
   text. The teal variant lives in theme.css beside the other .teal overrides. */
.em .n {
  font-family: var(--font-display);
  font-size: var(--fs-number);
  font-weight: 800;
  color: var(--text-3);
  line-height: var(--lh-number);
}

.em h4 {
  font-size: 18px;
  /* The engagement card keeps the card surface behind its title in both modes,
     so the title takes the page ink rather than the on-fill colour. */
  color: var(--text-strong);
  margin-top: 2px;
}

.em p {
  font-size: 15px;
  color: var(--text-2);
}

/* =============================================================================
   FIT CHECK LIST
   ========================================================================== */

.fit h3 i {
  background: var(--chip-ico-cyan-bg);
  color: var(--cyan);
}

.fit.is-yes h3 i {
  background: var(--chip-ico-lime-bg);
  color: var(--lime);
}

.fit.is-no h3 i {
  background: rgba(251, 191, 36, 0.14);
  color: var(--amber);
}

/* =============================================================================
   PROOF PANELS
   Small dark panels that stand in for a screenshot. Built from divs so a
   service page never needs an image asset to look finished.
   ========================================================================== */

.proof {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
}

.proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.proof-head b {
  font-family: var(--font-display);
  font-size: 14.5px;
  /* The panel sits on --bg-2, which is a dark slate in the dark theme and a
     near-white in the light one, so the label follows the surface. */
  color: var(--text-strong);
}

.proof-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
}

.proof-row:last-child {
  border-bottom: 0;
}

.proof-row small {
  display: block;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 1px;
}

.proof-row > div:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

.proof-bar {
  flex: 0 0 30%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.proof-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

.proof-bar.is-warn i {
  background: var(--amber);
}

.proof-bar.is-lime i {
  background: var(--lime);
}

/* =============================================================================
   STAGE PILLS
   Small status chips used inside proof panels: PASS, REVIEW, BLOCKED.
   ========================================================================== */

.pill-status {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Status pills. Each pairs a tinted fill with an ink that clears 4.5:1 on it,
   in both themes. The red is the hardest case: a single value that works on a
   pale red tint and on a dark red tint has to sit in the middle, which is what
   --status-block is. The light value #AC4E4E reads 4.53:1 on #FEE8E8; the
   dark value #FCA5A5 reads 5.02:1 on the dark-mode tint. */
.pill-status.is-pass {
  background: var(--chip-ico-lime-bg);
  color: var(--lime);
}

.pill-status.is-warn {
  background: rgba(251, 191, 36, 0.14);
  color: var(--amber);
}

.pill-status.is-block {
  background: rgba(239, 68, 68, 0.14);
  color: var(--status-block);
}

/* =============================================================================
   FLOW DIAGRAM
   A horizontal chain of steps with arrows, used in the approach visual.
   ========================================================================== */

.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  min-width: 74px;
}

.flow-node .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: var(--icon-bg);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-node .ico svg {
  width: 20px;
  height: 20px;
}

.flow-node.is-gate .ico {
  background: var(--chip-ico-lime-bg);
  color: var(--lime);
}

.flow-arrow {
  width: 26px;
  height: 1px;
  background: var(--line-2);
  position: relative;
  flex-shrink: 0;
}

.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

/* =============================================================================
   TOGGLE LIST
   Two-column list of on/off policy rows.
   ========================================================================== */

.toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
}

.toggle-row b {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.toggle {
  width: 38px;
  height: 21px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  position: relative;
  flex-shrink: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--white);
}

.toggle.is-off {
  background: var(--line-2);
}

.toggle.is-off::after {
  right: auto;
  left: 2px;
}

/* =============================================================================
   BAR CHART
   Used for quality-versus-cost comparisons in an approach visual.
   ========================================================================== */

.chart {
  width: 100%;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-2);
  margin-bottom: 20px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
}

.chart-bars i {
  flex: 1 1 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--cyan), rgba(34, 195, 238, 0.28));
  min-height: 8px;
}

.chart-bars i.is-alt {
  background: linear-gradient(180deg, var(--lime), rgba(74, 222, 42, 0.24));
}

.chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-3);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chart-legend span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--cyan);
}

.chart-legend span.is-alt::before {
  background: var(--lime);
}

/* =============================================================================
   LAYER STACK
   Three stacked slabs used for a platform-layers visual.
   ========================================================================== */

.layers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.layer {
  padding: 16px 18px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.layer small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-3);
}

.layer:nth-child(1) {
  border-color: var(--cyan);
}

.layer:nth-child(2) {
  border-color: rgba(34, 195, 238, 0.55);
}

.layer:nth-child(3) {
  border-color: var(--line-2);
}

/* =============================================================================
   ENGAGEMENT MODEL (pricing) TWEAKS
   ========================================================================== */

.plan .sub {
  min-height: 42px;
}

.plan .price em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
}

/* =============================================================================
   OUTCOMES BAND
   The outcomes metrics sit in a bordered panel inside a normal section rather
   than filling a teal band, so the numbers read as a block of evidence in the
   middle of the page. A service that has nothing measurable drops the section.
   ========================================================================== */

.out-band {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-cta);
  padding: var(--out-band-pad);
  /* The band paints its own surface, so its copy follows that surface rather
     than the teal section it happens to sit in. */
  color: var(--text-strong);
}

.out-band .kicker,
.out-band .section-head h2,
.out-band .section-head p,
.out-band .section-head .accent {
  color: inherit;
}

.out-band .section-head .accent {
  color: var(--lime);
}

/* The service page's own accent on a highlighted word in a section heading.
   theme.css scopes the hero's accent to `.hero h1`; on an interior section the
   lime still reads, and it is the only lime the heading gets. */
.section-head .accent {
  color: var(--lime);
}

.section.teal .section-head .accent {
  color: var(--lime-on-teal);
}

/* An out-band keeps the card surface even inside a teal section, so the accent
   on its own heading stays the page lime rather than the on-fill one. */
.section.teal .out-band .section-head .accent {
  color: var(--lime);
}

/* =============================================================================
   SERVICE PAGE HERO
   The service hero reuses the home hero grid. These two classes let a service
   page show a data panel on the right without an image.
   ========================================================================== */

.hero-panel-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-panel-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  background: var(--hero-chip-bg);
  border: 1px solid var(--hero-chip-line);
  box-shadow: var(--shadow-chip);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-on-surface-2);
  white-space: nowrap;
}

.hero-panel-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hero-panel-badge.is-lime {
  color: var(--lime);
}

.hero-panel-badge.is-cyan {
  color: var(--cyan);
}

.hero-panel-badge.is-top {
  top: 18px;
  right: 18px;
}

/* The bottom badge hangs below the panel so it reads as a floating chip the
   way the home hero's does, instead of landing on the panel's own footer row. */
.hero-panel-badge.is-bottom {
  bottom: -18px;
  left: 18px;
}

/* =============================================================================
   RELATED CONTENT
   Two titled groups on one service page: related work, then related services.
   theme.css has .rel and .rel-title; this is only the gap between the groups,
   so the page can render either group alone.
   ========================================================================== */

.rel-block {
  margin-top: 56px;
}

.rel-block:first-child {
  margin-top: 0;
}

/* =============================================================================
   SERVICES INDEX
   The list a service is picked from, as opposed to one service's own page. It
   wears the same section types, so it keeps page-service, and adds
   page-services because its own rhythm is tightened: three category bands
   stack on this page where a service page carries one of each, so the full
   section padding between them adds up to more dead space than the page can
   spend.

   The hero opens at the same distance as every other page's, and the gap
   under it is set here instead of being left to two full section paddings
   meeting. That gap holds the page's index, so it is not wasted: it is where
   a visitor decides which group to look in.
   ========================================================================== */

.page-services {
  --section-pad: 88px;
}

.page-services .section-hero {
  padding-block: calc(var(--section-pad) * 0.72) calc(var(--section-pad) * 0.3);
}

.page-services #intro {
  padding-top: 0;
  padding-bottom: calc(var(--section-pad) * 0.62);
}

/* The intro copy reads at the same measure as the prose it replaces on the
   other pages, and it sits under a hero that already centred a paragraph, so
   it is pulled left against the wrap rather than centred a second time. Two
   centred paragraphs stacked under a centred heading is three centring events
   in a row, which is what made this band read as empty space. */
.svc-intro {
  max-width: 72ch;
  color: var(--text-2);
}

.svc-intro > * + * {
  margin-top: 1.15em;
}

.svc-intro p {
  font-size: var(--fs-body-lg);
  line-height: 1.75;
}

.svc-intro a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The jump row is the page's index, so it reads as a row of destinations
   rather than as another heading. The cards it sits above are the same
   pill-and-border language the rest of the site uses for that, at a slightly
   heavier touch to carry the row's weight. */
.svc-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.svc-jump-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--card);
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    transform var(--t-fast);
}

.svc-jump-link:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  background: var(--card-2);
}

.svc-jump-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.svc-jump-name {
  font-weight: 600;
  font-size: var(--fs-link);
}

.svc-jump-count {
  flex-shrink: 0;
  font-size: var(--fs-tag);
  font-weight: 600;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* The bands that follow each get their top padding pulled in for the same
   reason the hero's bottom is: two full paddings meeting put more than 150px
   of page background above the first row of cards, which reads as a break
   between the sections when the headings already carry the break. */
.page-services .section[id^='category-'] {
  padding-top: calc(var(--section-pad) * 0.66);
  /* The nav is sticky, so an in-page jump has to land below it rather than
     tuck the band's own kicker underneath the header. */
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.page-services #cta {
  padding-top: calc(var(--section-pad) * 0.42);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .out-band {
    padding: var(--out-band-pad-sm);
  }

  .hero-panel-badge.is-top {
    top: -14px;
    right: 8px;
  }

  .hero-panel-badge.is-bottom {
    bottom: -14px;
    left: 8px;
  }
}

@media (max-width: 860px) {
  .svc-jump {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-services .section-hero {
    padding-block: 56px 40px;
  }

  .page-services #intro {
    padding-bottom: 48px;
  }

  .page-services .section[id^='category-'] {
    padding-top: 48px;
  }
}