/**
 * Industry detail page.
 *
 * Enqueued only on a single zouma_industry. Section numbering matches
 * single-zouma_industry.php.
 *
 * Sizes come from the 1728-wide Figma frame and are used as CSS pixels at the
 * top of each clamp. They are reached by 1440 rather than 1728 because
 * `--zouma-vw` is min(1vw, 14.4px): every clamp middle is written so that
 * `base + k × 14.4px ≥ top`, and from 1440 up the value simply sits on the cap.
 * The shell is widened to 1360 so its 1280 content column matches the design.
 *
 * Everything that has a side is written logically (padding-inline, inset-inline,
 * margin-inline-start…) so the Arabic build mirrors without a single rule in
 * rtl.css.
 */

.zouma-indp-hero .zouma-shell,
.zouma-indp-num .zouma-shell,
.zouma-indp-story .zouma-shell,
.zouma-indp-exp .zouma-shell,
.zouma-indp-stories .zouma-shell,
.zouma-indp-cta .zouma-shell {
  max-width: 1360px;
}

/* Every band opens with the same eyebrow, and each heading below it states its
 * own gap from it — so the shared 1rem the eyebrow carries would double up. */
.zouma-indp-num .zouma-eyebrow,
.zouma-indp-story .zouma-eyebrow,
.zouma-indp-exp .zouma-eyebrow,
.zouma-indp-stories .zouma-eyebrow,
.zouma-indp-cta .zouma-eyebrow {
  margin: 0;
}

/* 01 · Hero -------------------------------------------------------------- */

.zouma-indp-hero {
  position: relative;
  display: grid;
  /* The copy sits low in the frame, on the photograph's darkest part. */
  align-content: end;
  /* The design fixes this hero at 765 rather than a screenful.
   *
   * Stated rather than dropped: `main > section` floors every band at 100svh
   * and is (0,0,2), so deleting a height here would hand the hero straight
   * back to that floor. The header's own height is counted inside the 765 —
   * the section is pulled up under it below. */
  min-height: clamp(520px, calc(53.2 * var(--zouma-vw)), 765px);
  /* The header floats over the photograph rather than sitting above it, so
   * pull the section up under it and add the height back as padding. */
  margin-top: calc(-1 * var(--zouma-header-h));
  padding-top: var(--zouma-header-h);
  background: var(--zouma-dark);
  color: #fff;
  /* clip, not hidden: `overflow-x: hidden` forces the other axis to `auto`
   * and turns the element into a scroll container, which takes the sticky
   * header out with it. clip trims the photograph without that side effect. */
  overflow: clip;
  /* The backdrop sits at z-index -1; without a stacking context of its own it
   * would drop behind the page body rather than behind the copy. */
  isolation: isolate;
}

.zouma-indp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.zouma-indp-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top, not the centre. The band is 2.26:1 and the photos
   * are 3:2, so cover has to lose a strip top and bottom; centred it took
   * the top of the subject's head off under the header, where the design
   * keeps headroom and loses floor instead. */
  object-position: 50% 0;
}

/* Darkens towards the foot, where the copy is. The gradient runs top to
 * bottom, so it is direction-neutral and Arabic needs nothing for it. */
.zouma-indp-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 18, 0.25) 0%,
    rgba(18, 18, 18, 0.55) 55%,
    rgba(18, 18, 18, 0.88) 100%
  );
}

/* An industry with no photograph gets the dotted world map the other page
 * heroes use, so the band is never a flat dark field. */
.zouma-indp-hero.is-plain .zouma-indp-hero__bg {
  background: url("../images/world-dots.svg") center / contain no-repeat;
  opacity: 0.35;
}

/* Two columns, bottom-aligned: the title on the left, the intro on the right,
 * in the 543/663 split the design draws inside the 1280 column. fr on both so
 * the split holds at every width above the phone break. */
.zouma-indp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 543fr) minmax(0, 663fr);
  column-gap: 64px;
  align-items: end;
  padding-bottom: clamp(2.5rem, calc(6.75 * var(--zouma-vw)), 97px);
}

.zouma-indp-hero__copy {
  min-width: 0;
}

/* .zouma-eyebrow--light resolves to the pale sky used on photographic panels,
 * which greys out on this dark shade. The design sets the words in plain
 * white and tints only the mark. */
.zouma-indp-hero .zouma-eyebrow {
  color: #fff;
}

/* The cluster mark is drawn fill="currentColor", so the white above would
 * swallow it. Cyan mark, white caps is the split the design draws. */
.zouma-indp-hero .zouma-eyebrow .zouma-icon--spark {
  color: var(--zouma-cyan);
}

/* h1.class rather than .class: style.css sizes h1 at (0,0,1), so a bare class
 * would win, but the same convention as the other headings here keeps every
 * heading rule on this page at one specificity. */
h1.zouma-indp-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--zouma-font-heading);
  font-size: clamp(2.25rem, 1.25rem + calc(2.55 * var(--zouma-vw)), 3.5rem);
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: -0.01em;
}

/* The design sets the ampersand apart by weight, not colour: white like the
 * words around it, but regular against their bold. */
.zouma-indp-hero__amp {
  color: #fff;
  font-weight: 400;
}

p.zouma-indp-hero__text {
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--zouma-font-body);
  font-size: clamp(0.9375rem, 0.8rem + calc(0.25 * var(--zouma-vw)), 1rem);
  line-height: 1.7;
}

/* 02 · The numbers ------------------------------------------------------- */

.zouma-indp-num {
  /* Content height, not a screenful — see the note on the hero. */
  min-height: auto;
  display: block;
  padding-block: clamp(3rem, calc(8.3 * var(--zouma-vw)), 7.5rem);
  background: #fff;
}

/* h2.class, not .class: main.css carries every section title in its 48px
 * section-heading list at (0,1,1), and a bare class here is (0,1,0) and loses
 * however late this sheet loads. Equal specificity plus source order is what
 * actually reaches it, and this sheet depends on zouma-main so it is always
 * the later of the two. The same reasoning holds for every heading below. */
h2.zouma-indp-num__title {
  margin: 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.75rem, 1.25rem + calc(1.15 * var(--zouma-vw)), 2.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

p.zouma-indp-num__text {
  max-width: 900px;
  margin: 18px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* minmax(0, 1fr), not 1fr: a grid item floors at min-content, so one long
 * unbroken label widens its track, the grid outgrows the shell, and
 * .zouma-site clips the overflow with no scrollbar to show for it.
 *
 * The reset is here because the grid is a <ul> — the figures are a list and
 * are marked up as one, but its markers and indent are not part of the design. */
ul.zouma-indp-num__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 40px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* The same floor one level down — each of these is itself a grid item. */
.zouma-indp-stat {
  min-width: 0;
}

p.zouma-indp-stat__value {
  margin: 0;
  color: var(--zouma-blue);
  font-family: var(--zouma-font-heading);
  font-size: clamp(2rem, 1.5rem + calc(1.7 * var(--zouma-vw)), 3rem);
  font-weight: 700;
  line-height: 1.1;
}

/* The unit — the % or the + — is set smaller and lighter than the figure. */
.zouma-indp-stat__value span {
  font-size: 0.72em;
  font-weight: 500;
}

p.zouma-indp-stat__label {
  margin: 8px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* 03 · Customer story ---------------------------------------------------- */

.zouma-indp-story {
  position: relative;
  display: grid;
  align-items: center;
  /* 943 in the design, and stated for the same reason as the hero. */
  min-height: clamp(560px, calc(65.5 * var(--zouma-vw)), 943px);
  /* The teal shows while the photograph loads, and on an industry that has
   * none — the white card still needs something to float on. */
  background: var(--zouma-teal);
  /* clip, not hidden — see the hero. */
  overflow: clip;
  isolation: isolate;
}

.zouma-indp-story__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.zouma-indp-story__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card sits at the inline end of the content column, over the emptier
 * side of the photograph. flex-end rather than a margin so it mirrors. */
.zouma-indp-story__inner {
  display: flex;
  justify-content: flex-end;
}

.zouma-indp-story__card {
  width: 100%;
  max-width: 567px;
  padding: 38px;
  background: #fff;
  border-radius: 8px;
  color: var(--zouma-color-text);
}

h3.zouma-indp-story__title {
  margin: 14px 0 0;
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.5rem, 1.125rem + calc(1 * var(--zouma-vw)), 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p.zouma-indp-story__text {
  margin: 16px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* An outlined button in the accent, not the shared .zouma-btn shapes — the
 * design draws this one square-cornered and hollow.
 *
 * a.class at every state: style.css repaints `a:hover, a:focus` in the primary
 * blue at (0,1,1), and a bare class is (0,1,0) and loses — the cyan would go
 * dark under the pointer instead of filling. The transition rides with the
 * resting pose, which is the to-pose here: the hover is the only thing that
 * moves. */
a.zouma-indp-story__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 8px 16px;
  border: 1.5px solid var(--zouma-cyan);
  border-radius: 4px;
  background: transparent;
  color: var(--zouma-cyan);
  font-family: var(--zouma-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--zouma-transition),
    color var(--zouma-transition);
}

a.zouma-indp-story__btn:hover,
a.zouma-indp-story__btn:focus {
  background: var(--zouma-cyan);
  color: #fff;
  text-decoration: none;
}

a.zouma-indp-story__btn:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 3px;
}

a.zouma-indp-story__btn .zouma-icon {
  transition: transform var(--zouma-transition);
}

a.zouma-indp-story__btn:hover .zouma-icon {
  transform: translateX(3px);
}

/* 04 · Industry expertise ------------------------------------------------ */

.zouma-indp-exp {
  min-height: auto;
  display: block;
  padding-block: clamp(3rem, calc(8.3 * var(--zouma-vw)), 7.5rem);
  background: #fff;
}

h2.zouma-indp-exp__title {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.875rem, 1.25rem + calc(1.85 * var(--zouma-vw)), 2.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Three across; five items fall as 3 + 2, which is how the design sets them. */
ul.zouma-indp-exp__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 48px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.zouma-indp-exp__item {
  min-width: 0;
}

h3.zouma-indp-exp__name {
  margin: 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.25rem, 1rem + calc(0.72 * var(--zouma-vw)), 1.625rem);
  font-weight: 600;
  line-height: 1.25;
}

p.zouma-indp-exp__text {
  margin: 12px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* A bordered strip the full width of the column under the grid — a regulatory
 * footnote to the items above it, tagged with the body that sets the rule.
 * Flex with baseline alignment so the 12px tag and the 13px sentence share a
 * line at desktop and the sentence wraps under the tag once it must. p.class
 * for the same reason as every heading here: main.css styles bare p, and one
 * specificity throughout the sheet is easier to reason about. */
p.zouma-indp-exp__note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 40px 0 0;
  padding: 14px 20px;
  border: 1px solid var(--zouma-color-border);
  border-radius: 6px;
  background: #fff;
}

/* The tag never breaks — "CQC" split over two lines is unreadable. */
.zouma-indp-exp__note-tag {
  color: var(--zouma-cyan);
  font-family: var(--zouma-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* min-width: 0 so the sentence, a flex item, can shrink and wrap on a phone
 * instead of holding its one-line width and pushing the strip past the shell. */
.zouma-indp-exp__note-text {
  min-width: 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 13px;
  line-height: 1.5;
}

/* 05 · Stories & insights ------------------------------------------------ */

.zouma-indp-stories {
  min-height: auto;
  display: block;
  padding-block: clamp(3rem, calc(8.3 * var(--zouma-vw)), 7.5rem);
  background: #fff;
}

h2.zouma-indp-stories__title {
  max-width: 860px;
  margin: 14px 0 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.875rem, 1.25rem + calc(1.85 * var(--zouma-vw)), 2.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* 19 between four tracks is what lands each card on the design's 306. */
ul.zouma-indp-stories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 19px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* A pale grey-blue tile, as in the design: the photograph sits flush at the
 * top and the copy is inset below it. The tile does the rounding and the
 * clipping, so the figure needs neither. #f3f6f9 is read off the frame — a
 * step cooler and lighter than --zouma-blue-pale, which is the CTA band's
 * colour and would make the cards read as buttons. */
.zouma-indp-card {
  min-width: 0;
  padding-bottom: 22px;
  background: #f3f6f9;
  border-radius: 8px;
  overflow: hidden;
}

/* The pale blue is what shows while the picture loads. */
figure.zouma-indp-card__media {
  margin: 0;
  aspect-ratio: 306 / 268;
  overflow: hidden;
  background: var(--zouma-blue-pale);
}

/* The figure does the rounding and the clipping, so the picture inside it
 * must not carry the radius style.css gives every figure > img. */
.zouma-indp-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

p.zouma-indp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 14px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.zouma-indp-card__dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* text-wrap: initial because the base h1–h6 rule in style.css balances every
 * heading, which breaks these titles early; the design fills each line before
 * it breaks, and clamps at three. */
h3.zouma-indp-card__title {
  margin: 8px 0 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: initial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* a.class at every state, for the same reason as the story button: without it
 * the style.css `a:hover` turns the cyan link dark blue. */
a.zouma-indp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--zouma-cyan);
  font-family: var(--zouma-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

/* Inset the copy from the tile's edges; the picture above stays edge to edge. */
p.zouma-indp-card__meta,
h3.zouma-indp-card__title,
a.zouma-indp-card__link {
  margin-inline: 12px;
}

a.zouma-indp-card__link:hover,
a.zouma-indp-card__link:focus {
  color: var(--zouma-cyan);
  text-decoration: underline;
}

a.zouma-indp-card__link:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 3px;
}

a.zouma-indp-card__link .zouma-icon {
  transition: transform var(--zouma-transition);
}

a.zouma-indp-card__link:hover .zouma-icon {
  transform: translateX(3px);
}

/* 06 · Closing call to action -------------------------------------------- */

.zouma-indp-cta {
  min-height: auto;
  display: block;
  padding-block: clamp(3rem, calc(8.3 * var(--zouma-vw)), 7.5rem);
  background: var(--zouma-blue-pale);
}

/* The button sits at the inline end, on the copy's baseline; it wraps under
 * the copy once the two no longer fit side by side. */
.zouma-indp-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.zouma-indp-cta__body {
  flex: 1 1 520px;
  min-width: 0;
}

h2.zouma-indp-cta__title {
  margin: 14px 0 0;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(1.75rem, 1.25rem + calc(1.65 * var(--zouma-vw)), 2.6875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p.zouma-indp-cta__text {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.zouma-indp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Narrow ----------------------------------------------------------------- */

/* ul.class throughout, to match the resting rules above: a bare class here is
 * (0,1,0) and would lose to them however far down the sheet it sits. */
@media (max-width: 1100px) {
  ul.zouma-indp-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* The 765 is a desktop measurement. Held on a phone it letterboxes: the
   * copy wraps and the band still reserves the same box. Fixed padding
   * instead, and the hero takes the height its own words need. */
  .zouma-indp-hero {
    min-height: auto;
    padding-top: calc(var(--zouma-header-h) + 48px);
    padding-bottom: 48px;
  }

  /* The section carries the bottom gap now, so the inner's would double it. */
  .zouma-indp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    padding-bottom: 0;
  }

  ul.zouma-indp-num__grid,
  ul.zouma-indp-exp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The card stops floating on a full-bleed photograph and the two stack: the
   * picture as a banner, then the copy under it in normal flow. The floating
   * composition does not survive a phone — the card would cover most of the
   * picture and the photograph read as a texture behind the type. */
  .zouma-indp-story {
    min-height: auto;
    display: block;
    background: #fff;
  }

  /* 16:10, not the photograph's own ratio — a panorama held at its own ratio
   * is a thin strip on a phone. cover keeps the middle of the frame. */
  .zouma-indp-story__bg {
    position: static;
    aspect-ratio: 16 / 10;
  }

  .zouma-indp-story__inner {
    display: block;
    padding-block: 32px 48px;
  }

  /* In flow the card is the page itself: no cap, no box, only the copy. */
  .zouma-indp-story__card {
    max-width: none;
    padding: 28px 0 0;
    border-radius: 0;
  }
}

@media (max-width: 600px) {
  ul.zouma-indp-num__grid,
  ul.zouma-indp-exp__grid,
  ul.zouma-indp-stories__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  p.zouma-indp-exp__note {
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.zouma-indp-story__btn,
  a.zouma-indp-story__btn .zouma-icon,
  a.zouma-indp-card__link .zouma-icon {
    transition: none;
  }

  a.zouma-indp-story__btn:hover .zouma-icon,
  a.zouma-indp-card__link:hover .zouma-icon {
    transform: none;
  }
}