/* ==========================================================================
   MedhaSofts — Section archetypes
   A library of structurally different section types. Each page composes a
   different combination so no two pages share a rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Editorial opener — oversized lede with a side note
   -------------------------------------------------------------------------- */
.opener {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.opener__lede {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.35rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.025em;
  color: var(--text-primary);
  text-wrap: pretty;
}
.opener__lede strong { font-weight: 600; color: var(--brand-primary); }
.opener__aside {
  border-left: 2px solid var(--brand-accent);
  padding-left: var(--space-5);
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.opener__aside p + p { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   2. Timeline — staged company story
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-primary) 40%,
                              var(--border));
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(22px, 2.6vw, 34px) 48px;
  border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: 4px; top: calc(clamp(22px, 2.6vw, 34px) + 6px);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--brand-primary);
}
.tl-item--future::before { border-color: var(--border-strong); }
.tl-item__stage {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-accent);
  margin-bottom: 6px;
}
.tl-item h3 { font-size: var(--display-sub); letter-spacing: -.025em; }
.tl-item p { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   3. Asymmetric mosaic — varied tile spans
   -------------------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
}
.mosaic__cell { min-width: 0; }
.mosaic__cell--wide { grid-column: span 4; }
.mosaic__cell--third { grid-column: span 2; }
.mosaic__cell--half { grid-column: span 3; }
.mosaic__cell--full { grid-column: span 6; }

/* Photo cell with copy beneath the image edge */
.mosaic-photo {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-navy);
  height: 100%;
  min-height: 220px;
}
.mosaic-photo .photo, .mosaic-photo img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-photo__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(18px, 2vw, 28px);
  color: var(--white);
}
.mosaic-photo__body h3 { color: var(--white); font-size: var(--text-xl); margin-bottom: 6px; }
.mosaic-photo__body p { color: rgba(233, 240, 254, .85); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   4. Horizontal band — inline facts on one rule
   -------------------------------------------------------------------------- */
.band-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--space-8);
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band-row__item h4 {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-accent);
  margin-bottom: var(--space-3);
}
.band-row__item p { font-size: var(--text-base); color: var(--text-secondary); }
.band-row__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   5. Capability comparison table
   -------------------------------------------------------------------------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.compare caption {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-accent);
  padding-bottom: var(--space-4);
}
.compare th, .compare td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.compare tbody th {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.compare tbody tr { transition: background .35s var(--ease); }
@media (hover: hover) { .compare tbody tr:hover { background: var(--bg-light); } }
.compare td p { color: var(--text-secondary); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   6. Flow diagram — stages joined by animated connectors
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
  counter-reset: flowstep;
}
.flow__node {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border);
  background: var(--white);
  min-width: 0;
}
.flow__node + .flow__node { border-left: 0; }
.flow__node:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.flow__node:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
/* Connector dot sitting on the shared border */
.flow__node + .flow__node::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-accent);
  z-index: 2;
}
.flow__node::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.flow.is-in .flow__node::after { transform: scaleX(1); }
.flow__step {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  color: var(--label-accent);
  margin-bottom: var(--space-3);
}
.flow__node h4 { font-size: var(--text-base); margin-bottom: 8px; }
.flow__node p { font-size: var(--text-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   7. Compact panel row — dense information, no imagery
   -------------------------------------------------------------------------- */
.panel-row {
  display: grid;
  /* `minmax(min(240px, 100%), 1fr)` cannot shrink below 240px, so in a narrow column
     the track overflows its container and `overflow: hidden` then clips
     the copy rather than wrapping it. min() lets the floor collapse. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel {
  background: var(--white);
  padding: clamp(20px, 2.4vw, 30px);
  transition: background .4s var(--ease);
}
@media (hover: hover) { .panel:hover { background: var(--bg-light); } }
.panel h4 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.panel p { font-size: var(--text-sm); color: var(--text-secondary); }
.panel__meta {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label-accent);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   8. Pull quote / brand statement
   -------------------------------------------------------------------------- */
.pull {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.pull--on-dark { color: var(--white); max-width: 22ch; }
.pull em {
  font-style: normal;
  background: linear-gradient(96deg, var(--brand-cyan), #9CC6FF 65%, var(--white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pull-note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .2);
  max-width: 46ch;
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   9. Sticky editorial split — label column stays, content scrolls
   -------------------------------------------------------------------------- */
.sticky-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.sticky-split__rail { position: sticky; top: calc(var(--header-h) + 28px); }
.sticky-split__rail h2 { font-size: var(--display-section); }

/* --------------------------------------------------------------------------
   10. Featured article
   -------------------------------------------------------------------------- */
.featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--white);
}
.featured__media { aspect-ratio: 16 / 11; overflow: hidden; height: 100%; }
.featured__media .photo, .featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__body { padding: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px) 0; }
.featured__body h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
  letter-spacing: -.03em;
  margin-block: var(--space-4);
}
.featured__body p { color: var(--text-secondary); font-size: var(--text-lg); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.meta-row .dot { opacity: .45; }

/* Editorial article list — text-led rows, thumbnail revealed on hover */
.post-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 132px;
  gap: clamp(16px, 2.6vw, 40px);
  align-items: center;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--border);
  transition: background .4s var(--ease);
}
.post-row__thumb {
  width: 132px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  order: 3;
}
.post-row__thumb .photo, .post-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row h3 { font-size: var(--display-sub); letter-spacing: -.025em; margin-bottom: 6px; }
.post-row p { color: var(--text-secondary); font-size: var(--text-sm); }
.post-row__cat {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label-accent);
}
@media (hover: hover) {
  .post-row:hover { background: var(--bg-light); }
  .post-row:hover h3 { color: var(--brand-primary); }
}

/* --------------------------------------------------------------------------
   11. Spec list — dense two-column key/value
   -------------------------------------------------------------------------- */
.spec { display: grid; gap: 0; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.spec__row dt {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.spec__row dd { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* On the navy band the default text colours would be unreadable */
.band-dark .spec__row { border-bottom-color: rgba(255, 255, 255, .16); }
.band-dark .spec__row dt { color: var(--white); }
.band-dark .spec__row dd { color: var(--text-on-dark-muted); }
.band-dark .panel-row { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .16); }
.band-dark .panel { background: #0F2B5C; }
.band-dark .panel h4 { color: var(--white); }
.band-dark .panel p { color: var(--text-on-dark-muted); }
.band-dark .flow__node { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.band-dark .flow__node h4 { color: var(--white); }
.band-dark .flow__node p { color: var(--text-on-dark-muted); }
.band-dark .flow__node + .flow__node::before { background: var(--brand-navy); }
.band-dark .band-row { border-color: rgba(255, 255, 255, .18); }
.band-dark .band-row__item strong { color: var(--white); }
.band-dark .band-row__item p { color: var(--text-on-dark-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .opener,
  .sticky-split,
  .featured { grid-template-columns: 1fr; }
  /* top: auto as well -- the petal heading makes the rail position: relative
     again, and the desktop sticky offset would then push it onto the content */
  .sticky-split__rail { position: static; top: auto; }
  .featured__body { padding: 0 clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px); }
  .featured__media { aspect-ratio: 16 / 9; }
  .mosaic__cell--wide,
  .mosaic__cell--half { grid-column: span 6; }
  .mosaic__cell--third { grid-column: span 3; }
  .flow__node { border-radius: var(--radius-lg) !important; border-left: 1px solid var(--border) !important; }
  .flow { gap: var(--space-4); }
  .flow__node + .flow__node::before { display: none; }
}

@media (max-width: 760px) {
  .tl-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .spec__row { grid-template-columns: 1fr; gap: 4px; }
  .post-row { grid-template-columns: 1fr; }
  .post-row__thumb { width: 100%; order: -1; aspect-ratio: 16 / 9; }
  .mosaic__cell--third { grid-column: span 6; }
  .opener__aside { border-left: 0; border-top: 2px solid var(--brand-accent); padding-left: 0; padding-top: var(--space-4); }
}

/* ==========================================================================
   LAWNX-DERIVED COMPOSITIONS
   Section rhythm ported from the reference; brand, type and imagery are ours.
   ========================================================================== */

/* --- Utility bar above the header ---------------------------------------- */
.utility-bar {
  background: var(--brand-navy);
  color: var(--text-on-dark-muted);
  font-size: var(--text-xs);
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  min-height: 40px;
  padding-block: 8px;
}
.utility-bar a { color: var(--text-on-dark-muted); }
.utility-bar a:hover { color: var(--white); }
.utility-bar__item { display: inline-flex; align-items: center; gap: 7px; }
.utility-bar__item svg { opacity: .65; flex: none; }
.utility-bar__right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-4); }

/* --- Trust / capability strip -------------------------------------------- */
.trust-strip { border-block: 1px solid var(--border); background: var(--white); }
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5) clamp(24px, 4vw, 56px);
  padding-block: clamp(20px, 2.4vw, 30px);
}
.trust-strip__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: var(--space-2);
}
.trust-strip__item {
  font-family: var(--font-display);
  font-size: clamp(.95rem, .9rem + .25vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-primary);
  opacity: .62;
  transition: opacity .35s var(--ease), color .35s var(--ease);
}
@media (hover: hover) {
  .trust-strip__item:hover { opacity: 1; color: var(--brand-primary); }
}

/* --- Centred about block with flanking image mosaic ---------------------- */
.about-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
}
.about-mosaic__col { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.about-mosaic__col figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.about-mosaic__col .photo, .about-mosaic__col img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.about-mosaic__col figure:nth-child(1) { aspect-ratio: 4 / 5; }
.about-mosaic__col figure:nth-child(2) { aspect-ratio: 1 / 1; }
.about-mosaic__body { text-align: center; padding-inline: clamp(0px, 2vw, 24px); }
.about-mosaic__body h2 {
  font-size: var(--display-section);
  margin-bottom: var(--space-5);
}
.about-mosaic__body h2 em {
  font-style: normal;
  color: var(--brand-primary);
}
.about-mosaic__body p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.about-mosaic__body .eyebrow { justify-content: center; }

/* --- Consultation split: copy + contact blocks | form card --------------- */
.consult {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.consult__contacts { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.consult__contact {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}
.consult__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bg-subtle);
  color: var(--brand-primary);
}
.consult__contact h4 {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.consult__contact p { font-size: var(--text-base); color: var(--text-primary); font-weight: 500; }

/* Brand-coloured form card, echoing the reference's green panel */
.consult__card {
  background:
    radial-gradient(520px 320px at 88% -10%, rgba(59,130,246,.35), transparent 62%),
    var(--brand-navy);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-lg);
}
.consult__card h3 { color: var(--white); font-size: var(--display-sub); margin-bottom: var(--space-2); }
.consult__card > p { color: var(--text-on-dark-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.consult__card .field label { color: var(--white); }
.consult__card .field input,
.consult__card .field select,
.consult__card .field textarea {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: var(--white);
}
.consult__card .field input::placeholder,
.consult__card .field textarea::placeholder { color: rgba(201, 218, 244, .6); }
.consult__card .field input:focus,
.consult__card .field select:focus,
.consult__card .field textarea:focus {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .18);
}
.consult__card .field select option { color: var(--text-primary); }
.consult__card .checkbox label { color: var(--text-on-dark-muted); }
.consult__card .checkbox label a { color: var(--brand-cyan); }
.consult__card .form-status--notice {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  color: var(--text-on-dark);
}
.consult__card .form-status--notice a { color: var(--brand-cyan); }

/* --- Footer image grid ---------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.footer-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.footer-grid .photo, .footer-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-soft), opacity .4s var(--ease);
  opacity: .82;
}
@media (hover: hover) {
  .footer-grid a:hover img { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 1024px) {
  .consult { grid-template-columns: 1fr; }
  .about-mosaic { grid-template-columns: 1fr; }
  .about-mosaic__body { order: -1; margin-bottom: var(--space-6); }
  .about-mosaic__col {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
  }
  .about-mosaic__col figure { aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 720px) {
  .utility-bar__right { margin-left: 0; width: 100%; }
  .trust-strip__inner { gap: var(--space-4) var(--space-6); }
}

/* A light card nested inside .band-dark must not inherit the band's white text
   colours, or its copy becomes white-on-white. */
.band-dark .card:not(.card--dark) h2,
.band-dark .card:not(.card--dark) h3,
.band-dark .card:not(.card--dark) h4 { color: var(--text-primary); }
.band-dark .card:not(.card--dark) p { color: var(--text-secondary); }

/* ==========================================================================
   INDUSTRY CARDS
   Copy sits on a solid accent panel, never over the photograph, so contrast
   is fixed by construction. Each segment carries its own accent while the
   brand blue stays the constant for the core focus.
   ========================================================================== */
.industry-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.industry-card {
  --ind: var(--brand-primary);
  --ind-deep: var(--brand-navy);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ind);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.industry-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--brand-navy);
}
.industry-card__media .photo,
.industry-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Accent wash ties the photograph to the panel below it */
.industry-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ind);
  opacity: .22;
  mix-blend-mode: multiply;
  transition: opacity .5s var(--ease);
}
.industry-card__status {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ind);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-weight: 500;
}
.industry-card__body {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 26px);
  color: var(--white);
  background-color: var(--ind);
  background-image: linear-gradient(158deg, var(--ind) 0%, var(--ind-deep) 100%);
}
/* Brighter variant crossfaded in on hover — opacity only, so it composites
   on the GPU rather than repainting a moving background-position. */
.industry-card__body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .20), transparent 58%),
    linear-gradient(158deg, var(--ind) 0%, var(--ind) 38%, var(--ind-deep) 100%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.industry-card__body h3 {
  color: var(--white);
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}
.industry-card__body p {
  color: rgba(255, 255, 255, .92);
  font-size: var(--text-sm);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-5);
}
.industry-card .card-cue {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}
.industry-card__rule {
  width: 44px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.35));
  margin-bottom: var(--space-4);
  transition: width .5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .industry-card:hover .industry-card__media::after { opacity: .10; }
  .industry-card:hover .industry-card__body::before { opacity: 1; }
  .industry-card:hover .industry-card__rule { width: 82px; }
}

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

/* ==========================================================================
   SOCIAL ICONS
   ========================================================================== */
.social { display: inline-flex; align-items: center; gap: 6px; }

.social__link {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: inherit;
  transition: background .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease);
}
.social__link svg { display: block; }

/* No URL configured yet: the same final design, simply not interactive
   (aria-hidden in the markup, so nothing is announced that cannot be followed) */
.social__link--unset { cursor: default; }

/* --- in the utility bar (navy) --- */
.social--bar .social__link { width: 28px; height: 28px; color: var(--text-on-dark-muted); }
@media (hover: hover) {
  .social--bar a.social__link:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    transform: translateY(-1px);
  }
}

/* --- in the footer --- */
.social--footer {
  margin-bottom: var(--space-6);
  gap: var(--space-2);
}
.social--footer .social__link {
  color: var(--text-on-dark-muted);
  border: 1px solid rgba(255, 255, 255, .18);
}
@media (hover: hover) {
  .social--footer a.social__link:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--white);
    transform: translateY(-2px);
  }
}

.utility-bar__follow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

@media (max-width: 860px) {
  .utility-bar__follow { display: none; }
}

/* ==========================================================================
   BRIGHT SYSTEM — components for the light-first rebuild.
   One card shape, a few layouts. The previous library had eleven section
   archetypes whose openings were interchangeable, so the page had no pacing
   while still costing a great deal of vertical space.
   ========================================================================== */

/* --- Accent-edged card: the workhorse ------------------------------------- */
.a-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background-color: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base),
              border-color var(--t-base);
}
.a-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.a-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.a-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.a-card__num {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--accent-ink);
  margin-bottom: var(--space-3);
}
.a-card__foot { margin-top: auto; padding-top: var(--space-5); }

@media (hover: hover) and (pointer: fine) {
  .a-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
  .a-card:hover::before { transform: scaleX(1); }
}

/* --- Pillars: three statements of what the company does -------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.pillar { padding-top: var(--space-5); border-top: 3px solid var(--accent); }
.pillar h3 { font-size: var(--display-sub); margin-bottom: var(--space-3); }
.pillar p { color: var(--text-secondary); }

/* --- Problem layout: one picture, six compact points ----------------------- */
.problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.problem-figure { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.problem-figure .photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.problem-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.problem-item {
  padding: var(--space-5);
  background-color: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.problem-item h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.problem-item p { font-size: var(--text-sm); color: var(--text-secondary); }
.problem-item__num {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--accent-ink);
  margin-bottom: var(--space-2);
}

/* --- Feature band: the single dark moment a page is allowed ---------------- */
.feature-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text-on-dark);
  padding-block: clamp(56px, 6vw, 88px);
}
.feature-band__bg { position: absolute; inset: 0; z-index: -2; }
.feature-band__bg .photo,
.feature-band__bg picture { position: absolute; inset: 0; }
.feature-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Uniform density behind the copy column so no bright patch of the
     photograph can land under a line of text. */
  background:
    linear-gradient(to right, rgba(5, 18, 44, .95) 0%, rgba(5, 18, 44, .92) 42%,
                    rgba(6, 26, 60, .68) 62%, rgba(8, 34, 78, .34) 84%,
                    rgba(8, 34, 78, .26) 100%),
    linear-gradient(to top, rgba(5, 18, 44, .5) 0%, transparent 38%);
}
.feature-band h2 { color: var(--white); font-size: var(--display-section); }
.feature-band p { color: var(--text-on-dark-muted); }
.feature-band__copy { max-width: 54ch; }
.feature-band__modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, .24);
  max-width: 68ch;
}
.feature-band__modules li {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feature-band__modules li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
  flex: none;
}

/* --- Principles: six short statements, two rows, no dead space ------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* --- Compact photo card: smaller image ratio than .media-card -------------- */
.p-card .media-card__media { aspect-ratio: 16 / 10; }
.p-card .media-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }

@media (max-width: 1000px) {
  .pillars,
  .principles,
  .feature-band__modules { grid-template-columns: repeat(2, 1fr); }
  .problem-layout { grid-template-columns: 1fr; }
  .problem-figure { position: static; }
}
@media (max-width: 620px) {
  .pillars,
  .principles,
  .problem-grid,
  .feature-band__modules { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. Honeycomb ground, bevelled blocks, and the Industries panel treatment
   ========================================================================== */

/* --- Honeycomb -----------------------------------------------------------
   One seamlessly tiling hexagon cell, 45 x 78, as an inline SVG so it
   costs no request. It is drawn on a ::before layer and masked to fade out,
   which keeps it a ground texture rather than wallpaper, and keeps it clear
   of any text: the pattern never sits between a glyph and its background,
   so measured contrast is unchanged.
   -------------------------------------------------------------------------- */
:root {
  --hex-light: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2245.033%22%20height=%2278.000%22%20viewBox=%220%200%2045.033%2078.000%22%3E%3Cpath%20d=%22M22.52%2013.00%2045.03%2026.00%2045.03%2052.00%2022.52%2065.00%20-0.00%2052.00%200.00%2026.00Z%20M0.00%20-26.00%2022.52%20-13.00%2022.52%2013.00%200.00%2026.00%20-22.52%2013.00%20-22.52%20-13.00Z%20M45.03%20-26.00%2067.55%20-13.00%2067.55%2013.00%2045.03%2026.00%2022.52%2013.00%2022.52%20-13.00Z%20M0.00%2052.00%2022.52%2065.00%2022.52%2091.00%200.00%20104.00%20-22.52%2091.00%20-22.52%2065.00Z%20M45.03%2052.00%2067.55%2065.00%2067.55%2091.00%2045.03%20104.00%2022.52%2091.00%2022.52%2065.00Z%22%20fill=%22none%22%20stroke=%22rgba(20,85,192,0.17)%22%20stroke-width=%221%22/%3E%3C/svg%3E");
  --hex-dark:  url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2245.033%22%20height=%2278.000%22%20viewBox=%220%200%2045.033%2078.000%22%3E%3Cpath%20d=%22M22.52%2013.00%2045.03%2026.00%2045.03%2052.00%2022.52%2065.00%20-0.00%2052.00%200.00%2026.00Z%20M0.00%20-26.00%2022.52%20-13.00%2022.52%2013.00%200.00%2026.00%20-22.52%2013.00%20-22.52%20-13.00Z%20M45.03%20-26.00%2067.55%20-13.00%2067.55%2013.00%2045.03%2026.00%2022.52%2013.00%2022.52%20-13.00Z%20M0.00%2052.00%2022.52%2065.00%2022.52%2091.00%200.00%20104.00%20-22.52%2091.00%20-22.52%2065.00Z%20M45.03%2052.00%2067.55%2065.00%2067.55%2091.00%2045.03%20104.00%2022.52%2091.00%2022.52%2065.00Z%22%20fill=%22none%22%20stroke=%22rgba(140,200,255,0.16)%22%20stroke-width=%221%22/%3E%3C/svg%3E");
  --hex-size: 45.033px 78.000px;
}

.hex-ground { position: relative; isolation: isolate; }
.hex-ground > * { position: relative; z-index: 1; }
.hex-ground::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hex-light);
  background-size: var(--hex-size);
  background-position: center top;
  /* Strongest at the top-right, gone by the lower left, so it reads as light
     falling across a surface instead of a flat texture. */
  -webkit-mask-image: radial-gradient(120% 95% at 88% 0%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
          mask-image: radial-gradient(120% 95% at 88% 0%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
}
.hex-ground--left::before {
  -webkit-mask-image: radial-gradient(110% 90% at 6% 4%, #000 0%, rgba(0,0,0,.4) 40%, transparent 74%);
          mask-image: radial-gradient(110% 90% at 6% 4%, #000 0%, rgba(0,0,0,.4) 40%, transparent 74%);
}
/* On the dark band the cells are drawn in light, and sit above the scrim but
   below the copy. */
.feature-band .hex-ground::before,
.hex-ground--on-dark::before {
  background-image: var(--hex-dark);
  -webkit-mask-image: radial-gradient(90% 80% at 78% 10%, #000 0%, transparent 72%);
          mask-image: radial-gradient(90% 80% at 78% 10%, #000 0%, transparent 72%);
}

/* --- Bevelled blocks -----------------------------------------------------
   A light top edge and a dark bottom edge, drawn as inset shadows rather than
   borders so they cost no layout. Applied to the light card family; the
   1px highlight is well inside the card, never behind text.
   -------------------------------------------------------------------------- */
.a-card,
.problem-item,
.card,
.consult__card,
.media-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(16, 35, 63, .05),
    0 1px 2px rgba(16, 35, 63, .04),
    0 10px 24px rgba(16, 35, 63, .055);
}
.consult__card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 18px 44px rgba(11, 46, 104, .26);
}
.pillar {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-top-width: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .a-card:hover,
  .card--hover:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(16, 35, 63, .07),
      0 2px 4px rgba(16, 35, 63, .05),
      0 18px 38px rgba(16, 35, 63, .10);
  }
}

/* --- Industries: bevelled, embossed accent panels -------------------------
   The flat gradient blocks read as printed colour. These add the things that
   make a surface look lit: a raised outer edge, a bevelled inner lip, a gloss
   confined to the top band, and an accent-tinted drop shadow so each card
   sits in its own colour of light.

   Every effect is kept off the text. The gloss stops above the rule, the
   emboss lines are 1px at the extreme edges, and the panel gradient itself is
   unchanged — so the worst-case text contrast is still measured against the
   accent at its lightest stop, exactly as before.
   -------------------------------------------------------------------------- */
.industry-card {
  border-radius: var(--radius-xl);
  /* Outer bevel: a thin lit rim, then the card's own coloured shadow. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10) inset,
    0 1px 0 rgba(255, 255, 255, .55),
    0 2px 4px rgba(16, 35, 63, .10),
    0 16px 34px -6px color-mix(in srgb, var(--ind-deep) 42%, transparent);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.industry-card__media::before {
  /* Inner top lip: the media edge catches the light. */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .55), rgba(255, 255, 255, .16) 60%, transparent);
}

.industry-card__body {
  /* Emboss: a lit lip where the panel meets the photograph, a dark lip at the
     foot, and a short inner shadow below the lip so the photograph reads as
     sitting proud of the panel rather than butted against it. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 7px 12px -8px rgba(0, 0, 0, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset -1px 0 0 rgba(0, 0, 0, .18);
}

/* Gloss: a soft specular band across the top of the panel only. It ends at
   14% height, well above the heading, so it cannot lift the background behind
   any glyph. */
.industry-card__body::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 17%;
  z-index: -1;
  background:
    /* specular corner, then the falling sheen */
    radial-gradient(70% 180% at 6% 0%, rgba(255, 255, 255, .26), transparent 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 52%, transparent 100%);
  pointer-events: none;
}

.industry-card__status {
  /* Lift the pill off the photograph so it reads as a physical chip. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(16, 35, 63, .18),
    0 4px 10px rgba(16, 35, 63, .14);
  font-weight: 600;
}

.industry-card__rule {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

@media (hover: hover) and (pointer: fine) {
  .industry-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .16) inset,
      0 1px 0 rgba(255, 255, 255, .7),
      0 4px 8px rgba(16, 35, 63, .12),
      0 26px 50px -8px color-mix(in srgb, var(--ind-deep) 52%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-card,
  .industry-card:hover { transform: none; }
}

/* The feature band already stacks a photograph at -2 and a scrim at -1, and a
   pseudo-element cannot slot between the scrim and the copy. A real element at
   z-index 0, with the container lifted to 1, puts the cells above the scrim
   and still safely behind every glyph. */
.feature-band > .container { position: relative; z-index: 1; }
.feature-band__hex {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hex-dark);
  background-size: var(--hex-size);
  -webkit-mask-image: radial-gradient(95% 85% at 74% 8%, #000 0%, rgba(0,0,0,.5) 44%, transparent 76%);
          mask-image: radial-gradient(95% 85% at 74% 8%, #000 0%, rgba(0,0,0,.5) 44%, transparent 76%);
}

/* A veil painted over the whole image has to guess where the copy will start.
   When the copy block is tall, its first line lands where the gradient is only
   around half dense, and on a bright photograph that measured 4.41:1 against a
   4.5 requirement. Anchoring a second scrim to the copy block itself puts the
   density exactly where the text is, whatever height the block turns out to be. */
.mosaic-photo__body,
.tile__body {
  position: absolute;
  isolation: isolate;
}
.mosaic-photo__body::before,
.tile__body::before {
  content: '';
  position: absolute;
  inset: -56px 0 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 20, 48, 0) 0%, rgba(5, 20, 48, .72) 34%,
    rgba(5, 20, 48, .90) 62%, rgba(5, 20, 48, .95) 100%);
}

/* At 320px the "XPLOR IHMS - in development" pill is wider than the viewport
   and pushed the whole page into horizontal scroll on every page. The pill is
   supplementary -- the same status is stated in full on the product pages -- so
   below 420px it wraps to its own line and is allowed to shrink. */
@media (max-width: 420px) {
  .utility-bar__inner {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding-block: var(--space-2);
  }
  /* Raising the social icons to a 44px target made this row 384px of content
     in a 288px box, which is what pushed the status pill off-screen. Let it
     wrap and tighten the gap. */
  .utility-bar__right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
  }
  .utility-bar .social__link { min-width: 40px; min-height: 40px; }
  .utility-bar .status {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }
  .utility-bar__item a { overflow-wrap: anywhere; }
}

/* The interface mock is a fixed-proportion illustration; below its own minimum
   it has to be allowed to scale rather than push the page sideways. */
@media (max-width: 360px) {
  .ui-mock, .ui-mock__main { min-width: 0; }
  .ui-mock__main { overflow: hidden; }
}

/* --- Why MedhaSofts: sticky rail + accented spine -------------------------
   This was the flattest block on the page: six identical cards, no imagery,
   no colour, sitting between the photographic Industries panels and the
   contact split. It needed its own rhythm rather than a fourth card grid, so
   the argument stays put on the left while the six principles run past it.

   Each principle takes one hue from the accent family. The palette was defined
   with six members and nothing had used more than four, so the numerals now
   read as a quiet colour spine down the list -- brand blue first, because
   domain understanding is the claim everything else rests on.
   -------------------------------------------------------------------------- */
.why-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.why-block__rail { position: sticky; top: calc(var(--header-h) + 28px); }
.why-block__rail .lead { margin-bottom: var(--space-6); }

.why-block__figure {
  margin: 0 0 var(--space-6);
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 2px rgba(16, 35, 63, .08),
    0 16px 34px -8px rgba(16, 35, 63, .18);
}
.why-block__figure .photo { display: block; }
.why-block__figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Same specular treatment as the Industries panels, so the two blocks read as
   the same material. Confined to the top band, clear of the caption. */
.why-block__figure::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 60%, transparent 100%);
}
.why-block__caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.why-list { counter-reset: none; }

.why-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) var(--space-5) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border);
  transition: background-color .4s var(--ease);
}
.why-item:last-child { border-bottom: 1px solid var(--border); }

/* The accent bar sits at a third of its height at rest and fills on hover, so
   the colour is present in the resting state rather than only on interaction. */
.why-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: calc(100% + 2px);
  width: 3px;
  border-radius: 2px;
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent), var(--accent-deep));
  transform: scaleY(.34);
  transform-origin: top;
  transition: transform .5s var(--ease);
}

.why-item__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-ink);
  padding-top: 2px;
}
.why-item__num::after {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background-color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent), var(--accent-deep));
}

.why-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
/* Scoped to the copy column. `.why-item p` scores (0,2,0) and silently beat
   `.why-item__num` at (0,1,0), which turned every numeral back into 15px
   secondary grey and threw away the whole colour spine. */
.why-item > div p { color: var(--text-secondary); font-size: var(--text-sm); }

@media (hover: hover) and (pointer: fine) {
  .why-item:hover { background-color: var(--surface-1); }
  .why-item:hover::before { transform: scaleY(1); }
}

@media (max-width: 1000px) {
  .why-block { grid-template-columns: 1fr; }
  .why-block__rail { position: static; }
  .why-block__figure { max-width: 520px; }
}
@media (max-width: 520px) {
  .why-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
  .why-item__num { display: flex; align-items: center; gap: var(--space-3); }
  .why-item__num::after { margin-top: 0; }
}

/* --- Light feature band ---------------------------------------------------
   Replaces the full-bleed photographic banner. The picture keeps its size, the
   copy gets a surface it can be read against, and the section still reads as a
   moment rather than another card grid.
   -------------------------------------------------------------------------- */
.feature-split {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 5vw, 76px);
  background-color: var(--surface-1);
  background-image: linear-gradient(180deg, #FBFDFF 0%, var(--surface-1) 60%, var(--surface-2) 100%);
}
.feature-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.feature-split--flip .feature-split__copy { order: 2; }
.feature-split--flip .feature-split__media { order: 1; }

.feature-split__copy h2 {
  font-size: var(--display-section);
  margin-bottom: var(--space-4);
}
.feature-split__copy .lead { margin-bottom: var(--space-6); }

.feature-split__media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 2px rgba(16, 35, 63, .08),
    0 18px 38px -10px rgba(16, 35, 63, .2);
}
.feature-split__media .photo { display: block; }
.feature-split__media img { width: 100%; height: auto; display: block; }
.feature-split__media::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 20%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .04) 60%, transparent 100%);
}
.feature-split__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--space-6) var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--white);
  background-color: rgba(5, 20, 48, .92);
  background-image: linear-gradient(180deg, rgba(5, 20, 48, .45), rgba(5, 20, 48, .86) 45%, rgba(5, 20, 48, .94));
}

@media (max-width: 900px) {
  .feature-split__inner { grid-template-columns: 1fr; }
  .feature-split--flip .feature-split__copy,
  .feature-split--flip .feature-split__media { order: 0; }
}

/* --- Image strip: three photographs as one band --------------------------- */
.img-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.img-strip figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 2px rgba(16, 35, 63, .07),
    0 14px 30px -10px rgba(16, 35, 63, .18);
}
.img-strip .photo { display: block; }
.img-strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.img-strip figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
  background-color: rgba(5, 20, 48, .93);
  background-image: linear-gradient(180deg, rgba(5, 20, 48, .5), rgba(5, 20, 48, .88) 48%, rgba(5, 20, 48, .95));
}
@media (max-width: 820px) { .img-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .img-strip { grid-template-columns: 1fr; } }

/* ==========================================================================
   SITE-WIDE ADDITIONS (architecture migration)
   ========================================================================== */

/* Wordless image placeholder -- the Design System's Image Placeholder, for
   inner pages. Holds the slot's exact ratio so the real picture drops in
   without layout change; aria-hidden in the markup, no words on it. */
.ms-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  color: #2563EB;
  background-color: #E8F0FF;
  background-image:
    radial-gradient(70% 90% at 20% 15%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(135deg, #EEF4FD 0%, #DCE8FF 55%, #E7E1FD 100%);
  border: 1px solid rgba(37, 99, 235, .12);
}
.ms-placeholder--wide { aspect-ratio: 16 / 10; }
.ms-placeholder > svg {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .55);
}
.ms-placeholder__lily {
  position: absolute;
  right: 5%;
  bottom: -16%;
  width: 20%;
  aspect-ratio: 20 / 45;
  color: var(--petal-violet, #818CF8);
  opacity: .22;
  transform: rotate(24deg);
}
.ms-placeholder__lily svg { width: 100%; height: 100%; }

/* Code-drawn brand composition used in place of a photograph (Contact:
   Connected Conversation). Decorative; the text around it carries meaning. */
.ms-compose {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background-color: #0B1630;
  background-image: linear-gradient(160deg, #0B1630 0%, #121C47 100%);
}

/* Legal pages: short contents list above the document */
.legal-toc {
  margin-bottom: var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--border, #E4EBF5);
  border-radius: 20px;
  background: var(--white, #fff);
}
.legal-toc ol {
  columns: 2 16em;
  column-gap: var(--space-8);
  margin: 0;
  padding-left: 1.2em;
}
.legal-toc li { margin: 0 0 6px; break-inside: avoid; }
.legal-doc h2 { scroll-margin-top: 120px; }

/* Integration category cards: the discreet examples line */
.card__examples {
  margin-top: var(--space-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
}

/* Integration directory table sits inside the compare-table style */
.directory th[scope="row"] { white-space: nowrap; }
@media (max-width: 640px) { .directory th[scope="row"] { white-space: normal; } }

/* Social icons on the Contact page card (light surface) */
.social--contact { gap: var(--space-2); }
.social--contact .social__link {
  color: var(--brand-primary, #1D4ED8);
  border: 1px solid rgba(37, 99, 235, .22);
}
@media (hover: hover) {
  .social--contact a.social__link:hover {
    background: var(--brand-primary, #1D4ED8);
    color: #fff;
  }
}

/* Integration directory on phones: each category becomes a stacked block */
@media (max-width: 640px) {
  .directory, .directory tbody, .directory tr, .directory th, .directory td { display: block; width: 100%; }
  .directory thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .directory tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--border, #E4EBF5); }
  .directory th[scope="row"], .directory td { padding: 2px 0; border: 0; text-align: left; }
  .directory td:last-child { font-size: 15px; color: var(--text-secondary, #475569); }
}

/* Captions on dark bands take the dark-tone caption colour (Design System
   text-caption dark: #B7C8E2, 8.9:1 on deep navy) */
.band-dark figcaption, .band-dark .media-figure figcaption { color: #B7C8E2; }