/* =====================================================================
   Industry and Business Verticals — inside page
   (industry-and-business-verticals.html)
   ---------------------------------------------------------------------
   Loaded AFTER main.css (tokens, nav/footer, #site-waves, [data-reveal])
   and about.css (the container/row/col grid and the shared .abt-hero
   furniture). Only what differs on this page lives here.

   This chapter is the printed spread (Annual Report pp.12-17) rebuilt for
   the web, so the colour coding is load-bearing rather than decorative and
   is reproduced exactly:

     BUSINESS UNIT      pill / rule
       Specialty Chemicals    cyan    #45c1ef
       Nutrition              amber   #f5c02b
       Chemical Intermediates green   #8bc751

     VERTICAL           chip outline, "Our Strengths" heading, bullet dots
       Pharmaceuticals        blue    #1f5fd0
       Agrochemicals          green   #2e9c4f
       Nutrition and Food     green   #8bc751
       Personal Care          pink    #d94f9c
       Industrial Application amber   #f0b323
       Semiconductor Chem.    ochre   #d9a03c

   Each vertical passes its own colour in as --v-colour and every coloured
   part of the block reads from that one custom property, so re-colouring a
   vertical is a one-line change rather than six.

   TYPE SCALE — fixed px, as on the other inside pages:
     30px  vertical names and segment names
     20px  "Business Segment Review"
     16px  body copy, lists, headings inside blocks
   ===================================================================== */

/* ---- 1. hero ---------------------------------------------------------
   Type-only plate, like Global Footprint: no banner photograph, so the
   parts of .abt-hero that exist to serve a picture are undone and the
   title takes brand blue on white for its contrast. */
.ind-hero {
  min-height: 0;
  display: block;
  overflow: visible;
  /* top pad clears the fixed nav, which sits over the hero on every page */
  padding: 150px 0 0;
  background: #fff;
}
.ind-hero .abt-hero__inner { padding-bottom: 0; }
.ind-hero .abt-hero__title {
  color: var(--brand-blue);
  text-shadow: none;
  max-width: none;
}

/* ---- 2. intro -------------------------------------------------------- */
.ind-section.ind1{
  padding-top: 40px;
}
.ind-section {
  padding: 0 0 30px;
  background: #fff;
}
/* the intro is set in brand blue in print, not body grey — it reads as an
   extension of the title rather than as the first body paragraph */
.ind-intro p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* ---- 3. the 3 BUs x 6 verticals matrix -------------------------------
   Left: the business unit and what it offers, in a card the BU's colour
   brackets on its left and bottom. Right: the two verticals that BU feeds,
   as captioned plates. Three rows, one per BU. */
.ind-matrix { margin-top: 2.6rem; }

.ind-matrix__heads,
.ind-matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
/* the headings carry the row's left padding too, or they'd sit 12px left
   of the columns they label */
.ind-matrix__heads {
  margin-bottom: 1rem;
  padding-left: 12px;
}
.ind-matrix__head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-blue);
  margin: 0;
}

/* The bracket belongs to the WHOLE row, not to the BU card: in print the
   rule runs down the left of the card, turns the bottom-left corner and
   carries on underneath the two plates as well, tying the BU to the two
   verticals it feeds. That is also why --bu-colour is declared here and
   not on .ind-bu — a custom property inherits DOWN, so setting it on the
   child would leave this element's own border with nothing to read (it
   would silently fall back to currentColor, i.e. black). */
.ind-matrix__row {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  padding: 0 0 14px 12px;
  border-left: 1.5px solid var(--bu-colour);
  border-bottom: 1.5px solid var(--bu-colour);
  border-radius: 0 0 0 22px;
}
.ind-matrix__row--specialty { --bu-colour: #45c1ef; }
.ind-matrix__row--nutrition { --bu-colour: #f5c02b; }
.ind-matrix__row--intermediates { --bu-colour: #8bc751; }

/* the BU card itself is unruled — the row around it draws the bracket */
.ind-bu { padding: 0 0 1.2rem; }

.ind-bu__title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--bu-colour);
  border-radius: 999px;
  padding: 9px 18px;
  margin: 0 0 1rem;
}
.ind-bu__list {
  list-style: none;
  margin: 0;
  padding: 0 1rem 0 18px;
}
.ind-bu__list li {
  position: relative;
  font-size: 16px;
  line-height: 1.5;
  padding-left: 18px;
  margin-bottom: 0.7rem;
}
.ind-bu__list li:last-child { margin-bottom: 0; }
.ind-bu__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--bu-colour);
}
/* Chemical Intermediates lists six products, which run as two columns in
   print rather than one long stack */
.ind-bu__list--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

/* the two captioned plates beside each BU */
.ind-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.ind-tile {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}
.ind-tile img {
  display: block;
  width: 100%;
  height: clamp(150px, 17vw, 200px);
  object-fit: cover;
}

/* Category-coloured image shadows, matching the supplied reference artwork. */
.ind-matrix__row--specialty .ind-tile:first-child {
  --ind-tile-shadow: 0, 78, 164;
}
.ind-matrix__row--specialty .ind-tile:last-child {
  --ind-tile-shadow: 0, 137, 87;
}
.ind-matrix__row--nutrition .ind-tile:first-child {
  --ind-tile-shadow: 159, 104, 0;
}
.ind-matrix__row--nutrition .ind-tile:last-child {
  --ind-tile-shadow: 164, 55, 139;
}
.ind-matrix__row--intermediates .ind-tile:first-child {
  --ind-tile-shadow: 60, 139, 54;
}
.ind-matrix__row--intermediates .ind-tile:last-child {
  --ind-tile-shadow: 157, 94, 13;
}

.ind1 .ind-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(var(--ind-tile-shadow), 0.9) 0%,
    rgba(var(--ind-tile-shadow), 0.68) 25%,
    rgba(var(--ind-tile-shadow), 0.34) 50%,
    rgba(var(--ind-tile-shadow), 0.08) 70%,
    rgba(var(--ind-tile-shadow), 0) 88%
  );
}
/* the caption sits on the plate itself, so it carries a shadow rather
   than a plate-wide scrim — the print sets it straight on the photograph */
.ind-tile__label {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.ind-matrix__foot {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-blue);
  text-align: center;
  margin: 0.6rem 0 0;
}

/* ---- 4. the six verticals --------------------------------------------
   Name chip, then the copy on the left and the strengths on the right,
   with the vertical's colour bracketing the strengths panel on three
   sides. Everything coloured reads from --v-colour. */
   .ind-vertical{
    margin-bottom: 30px;
    /* each of these is a link target from the six photo tiles on the home
       page (index.html, .bu-tile-link). The nav is position:fixed, so a
       plain hash jump parks the name chip underneath it -- scroll-margin
       reserves the nav's own measured height plus a little air. */
    scroll-margin-top: calc(var(--nav-height, 141px) + 70px);
   }
.ind-vertical--pharma { --v-colour: #1f5fd0; }
.ind-vertical--agro { --v-colour: #2e9c4f; }
.ind-vertical--nutrition { --v-colour: #8bc751; }
.ind-vertical--personal { --v-colour: #d94f9c; }
.ind-vertical--industrial { --v-colour: #f0b323; }
.ind-vertical--semicon { --v-colour: #d9a03c; }

.ind-vertical__chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v-colour);
  border: 1.5px solid var(--v-colour);
  border-radius: 999px;
  padding: 8px 20px;
  margin: 0 0 1.2rem;
}

/* the three-mark rule under each chip — one cyan dash then an amber and a
   green dot, the same trio the other chapters open with */
.ind-vertical__dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 0.9rem;
}
.ind-vertical__dots span {
  display: block;
  height: 6px;
  border-radius: 999px;
}
.ind-vertical__dots span:nth-child(1) { width: 26px; background: #45c1ef; }
.ind-vertical__dots span:nth-child(2) { width: 6px; background: #f5c02b; }
.ind-vertical__dots span:nth-child(3) { width: 6px; background: #8bc751; }

.ind-vertical__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
}
.ind-vertical__copy {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* open bracket — top, right and bottom in the vertical's colour, left
   deliberately open so the panel reads as attached to the copy beside it */
.ind-vertical__strengths {
  border: 1.5px solid var(--v-colour);
  border-top:none;
  border-left: 0;
  border-radius: 0 0 22px 0;
  padding: 0 clamp(1.2rem, 2.4vw, 1.8rem) 1.4rem 0;
}
.ind-vertical__strengths-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--v-colour);
  line-height: 1.2;
  width: fit-content;
  padding: 0 14px 0 0;
  background: #fff;
}
.ind-vertical__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ind-vertical__list li {
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: #2b2b2b;
  padding-left: 18px;
  margin-bottom: 0.65rem;
}
.ind-vertical__list li:last-child { margin-bottom: 0; }
.ind-vertical__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--v-colour);
}

/* ---- 5. the donut charts ---------------------------------------------
   Drawn as SVG rather than an image so the figures stay selectable and
   scale cleanly. Each slice is one <circle> on a ring whose circumference
   is exactly 100, which makes stroke-dasharray read as the percentage
   itself — see the markup for the running offsets. */
.ind-chart { margin-top: 2.2rem; }
.ind-chart__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7683;
  border-bottom: 1px solid var(--abt-hair);
  padding-bottom: 8px;
  margin: 0 0 1.4rem;
}

.ind-chart__ring {
  width: min(230px, 100%);
  height: auto;
  flex: 0 0 auto;
}
.ind-chart__value {
  font-family: var(--font-display);
  font-size: 3.4px;
  font-weight: 600;
  fill: #2b2b2b;
}
.ind-chart__unit {
  font-family: var(--font-display);
  font-size: 5px;
  fill: #6b7683;
}

/* legend as plain dots — used by Revenue by Industry */
.ind-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ind-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  line-height: 1.5;
  color: #2b2b2b;
  margin-bottom: 0.5rem;
}
.ind-legend li:last-child { margin-bottom: 0; }
.ind-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--swatch);
  flex: 0 0 auto;
}
/* legend as filled pills — used by Revenue by Segment and EBITDA Mix,
   which is how the print sets those two */
.ind-legend--pills li {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--swatch);
  border-radius: 6px;
  padding: 7px 14px;
  margin-bottom: 0.6rem;
}

/* ---- 6. business segment review --------------------------------------
   Circular plate, segment name, then the copy — one row per segment. */
.ind-review { margin-bottom: 20px; }
.ind-review__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: #6b7683;
  margin-bottom: 10px;
}
/* The columns are the page's own col-xl-5 / col-xl-7, not a private grid,
   so the plate and the copy line up with every other section on the page.
   Segments alternate which side the plate takes — see .ind-segment--flip,
   which only changes SOURCE order; the stacked layout puts the picture
   back on top either way (see the responsive block). */
.ind-segment {
  padding-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
}
.ind-segment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ind-segment__row {
  align-items: center;
  row-gap: 1.6rem;
}
/* The plate is fluid and never wider than the column it sits in, at any
   screen size. <figure> carries a default 40px side margin, which alone
   pushes the picture past the column edge — hence the reset. */
.ind-segment__media {
  margin: 0;
  width: 100%;
}
.ind-segment__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.ind-segment__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--brand-blue);
  margin: 0 0 5px;
}
.ind-segment p {
  font-size: 16px;
  line-height: 1.8;
  color: #2b2b2b;
  margin: 0 0 1.2rem;
}
.ind-segment p:last-child { margin-bottom: 0; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 999px) {
  .ind-matrix__heads { display: none; }
  .ind-matrix__row,
  .ind-vertical__row { grid-template-columns: minmax(0, 1fr); }
  /* col-xl-* goes full width from here down, so the segments stack. On a
     reversed segment the plate is second in source, which would leave the
     copy on top and break the picture-then-copy rhythm the other segments
     read in — order pulls it back to the front. The rule lives at 999px,
     not 767px, because 999px is where the columns actually stack. */
  /* stacked, the bracket would run the full width of the page and stop
     reading as an edge, so it closes into a plain outline instead */
  .ind-vertical__strengths {
    border-left: 1.5px solid var(--v-colour);
    border-radius: 22px;
    padding: 1.2rem clamp(1.2rem, 2.4vw, 1.8rem) 1.4rem;
  }
  .ind-vertical__strengths-title {
    margin-top: 0;
    background: none;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .ind-chart{
    margin-top: 5px;
  }
  .ind-hero { padding-top: 120px; }
  .ind-vertical__chip { font-size: 18px; }
  .ind-segment__name { font-size: 24px; }
  .ind-bu__list--two { grid-template-columns: minmax(0, 1fr); }
  .ind-tiles { gap: 0.7rem; }
}