.sec--hero { padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 768px) {
  .sec--hero { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}
.sec--hero::before { display: none; }
.sec--hero .hero-grid { display: grid; gap: var(--s-7); }
.sec--hero .hero-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 600;
  color: var(--ink);
}
.sec--hero .hero-title-line { display: block; color: var(--display-accent); }
.sec--hero .hero-lead { margin-top: var(--s-5); }
.sec--hero .hero-actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.sec--hero .hero-actions .btn { width: 100%; }
@media (min-width: 720px) {
  .sec--hero .hero-actions { display: flex; flex-wrap: wrap; }
  .sec--hero .hero-actions .btn { width: auto; }
}
.sec--hero .hero-strip {
  display: grid;
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: var(--track-mono);
  color: var(--ink-2);
}
.sec--hero .hero-strip li { padding-block: var(--s-2); border-top: 1px solid var(--hairline); }
@media (min-width: 720px) {
  .sec--hero .hero-strip { grid-template-columns: repeat(3, auto); justify-content: start; }
  .sec--hero .hero-strip li { padding: var(--s-2); border-top: 0; border-left: 1px solid var(--hairline); }
  .sec--hero .hero-strip li:first-child { padding-left: 0; border-left: 0; }
}
.sec--hero .hero-readout { margin-top: var(--s-6); }
.sec--hero .readout-figure--word { white-space: nowrap; }
.sec--hero .hero-visual { position: relative; min-width: 0; }
@media (max-width: 1099px) {
  .sec--hero .hero-grid { gap: 0; }
  .sec--hero .hero-text { display: contents; }
  .sec--hero .hero-visual { order: 1; margin-top: var(--s-6); }
  .sec--hero .hero-readout { order: 2; margin-top: var(--s-7); }
}
@media (max-width: 767px) {
  .sec--hero .readout-cell { padding-block: var(--s-3); }
  .sec--hero .readout-figure--word { min-height: 0; }
  .sec--hero .readout-label { margin-top: var(--s-1); }
}
@media (min-width: 1100px) {
  .sec--hero .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    align-items: center;
  }
  .sec--hero .hero-text { grid-column: 1 / span 7; padding-right: var(--s-5); }
  .sec--hero .hero-title { font-size: min(var(--fs-display), 3.25rem); }
  .sec--hero .hero-lead { max-width: none; font-size: 1.125rem; line-height: 1.55; }
  .sec--hero .hero-visual { grid-column: 8 / span 5; }
  .sec--hero .readout-cell { padding-inline: var(--s-4); }
  .sec--hero .readout-cell:first-child { padding-left: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .sec--hero .hero-strip { letter-spacing: 0; }
  .sec--hero .hero-strip li { padding-inline: 6px; }
  .sec--hero .hero-strip li:first-child { padding-left: 0; }
  .sec--hero .hero-strip li:last-child { padding-right: 0; }
}
@media (min-width: 1200px) {
  .sec--hero .hero-text { padding-right: var(--s-7); }
}
@media (min-width: 1280px) {
  .sec--hero .hero-lead { font-size: 1.0625rem; }
}
.sec--clients .section-head { margin-bottom: var(--s-6); }
@media (min-width: 768px) {
  .sec--clients .section-head { margin-bottom: var(--s-7); }
}
/* Client logos: one static set. Each logo has its own height (--logo-h) so wide wordmarks and taller emblems
   read at the same optical weight; --logo-k scales the set per breakpoint. Phone 2+2+1, tablet 3+2, desktop one row. */
.sec--clients .logo-strip {
  --logo-k: .7;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  justify-items: center;
}
.sec--clients .logo-strip img {
  grid-column: span 2;
  height: calc(var(--logo-h) * var(--logo-k));
  object-position: center;
  opacity: .9;
}
.sec--clients .logo-strip img:last-child { grid-column: 2 / span 2; }
.sec--clients .logo-opella { --logo-h: 44px; }
.sec--clients .logo-brightbase { --logo-h: 50px; }
.sec--clients .logo-sct { --logo-h: 56px; }
.sec--clients .logo-ascend { --logo-h: 50px; }
.sec--clients .logo-walden { --logo-h: 64px; }
@media (min-width: 560px) {
  .sec--clients .logo-strip { --logo-k: .8; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sec--clients .logo-strip img:nth-child(4) { grid-column: 2 / span 2; }
  .sec--clients .logo-strip img:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 768px) {
  .sec--clients .logo-strip { --logo-k: .9; row-gap: var(--s-7); }
}
@media (min-width: 1024px) {
  .sec--clients .logo-strip { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); }
}
@media (min-width: 1200px) {
  .sec--clients .logo-strip { --logo-k: 1; }
}
/* What we commit to: the shared commitment cards (site.css), cut to icon, number and title. The card rules live
   in site.css; here only the head row and the columns: one column, two from 768px, three from 1024px. */
.sec--pillars .section-head { margin-bottom: var(--s-6); }
.sec--pillars .cmt-card { align-items: center; }
@media (min-width: 768px) {
  .sec--pillars .section-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); }
  .sec--pillars .section-head > * { grid-column: 1; }
  .sec--pillars .section-head .link-ghost { grid-column: 2; grid-row: 1; align-self: end; }
  .sec--pillars .cmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .sec--pillars .cmt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@keyframes pillar-tick {
  from { opacity: 0; transform: translateY(0.75em); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec--pillars .cmt-num {
      display: inline-block;
      animation: pillar-tick steps(3, end) both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .sec--pillars .cmt-card:nth-child(3n+2) .cmt-num { animation-range: entry 6% cover 25%; }
    .sec--pillars .cmt-card:nth-child(3n) .cmt-num { animation-range: entry 12% cover 25%; }
  }
}
/* Solutions: four panels on one shared frame, each headed by its logo on the brand's own ground (home solutions concept E2).
   Each panel is the logo band (the h3), the sector, the blurb, the link and a footer of ownership and platform tags
   (the same tags, in the same order, as the solutions.html rows). The panels are subgrids, so the five rows line up across
   a row of panels. A base line under the panels names the framework all four run on.
   Four across from 1100px, two from 640px, one below. */
.sec--solutions .section-head .link-ghost { justify-self: start; }
.sec--solutions .sol-sheet {
  --sol-band-h: 76px;
  --sol-pad: var(--s-5);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.sec--solutions .sol-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sec--solutions .sol-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  min-width: 0;
}
/* Brand grounds. They do not follow the page; the two light ones take the site's screenshot dim on the dark page. */
.sec--solutions .sol-tile--ptb { --sol-ground: #F8FAFF; --sol-edge: rgba(0, 85, 163, 0.18); }
.sec--solutions .sol-tile--gmb { --sol-ground: #0F1C33; --sol-edge: rgba(170, 199, 242, 0.14); }
.sec--solutions .sol-tile--stp { --sol-ground: #17181A; --sol-edge: rgba(255, 255, 255, 0.10); }
.sec--solutions .sol-tile--cht { --sol-ground: #F5EFE6; --sol-edge: rgba(62, 39, 35, 0.16); }
/* The band is the h3, with the logo centred on the brand ground. Each logo gets its own height so wordmarks of different
   shapes read at a similar weight; the long Plant Toolbox wordmark is sized by width so a narrow panel scales it down. */
.sec--solutions .sol-logo {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sol-band-h);
  padding: 0 var(--sol-pad);
  background: var(--sol-ground);
  border-bottom: 1px solid var(--sol-edge);
}
.sec--solutions .sol-tile--ptb .sol-logo, .sec--solutions .sol-tile--cht .sol-logo { filter: brightness(0.94); }
.sec--solutions .sol-logo img { width: auto; max-width: 100%; }
.sec--solutions .sol-logo .sol-logo-ptb { width: min(212px, 100cqi); height: auto; }
.sec--solutions .sol-logo-gmb { height: 44px; }
.sec--solutions .sol-logo-stp { height: 44px; }
.sec--solutions .sol-lockup { display: flex; align-items: center; gap: 10px; }
.sec--solutions .sol-lockup img { height: 40px; }
.sec--solutions .sol-lockup span { display: grid; font-size: 21px; font-weight: 650; line-height: 1.1; letter-spacing: var(--track-h3); color: #342528; }
.sec--solutions .sol-lockup small { font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; color: #7B665A; }
.sec--solutions .sol-sector {
  margin: 28px var(--sol-pad) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec--solutions .sol-blurb { margin: var(--s-2) var(--sol-pad) 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* The link sits at the foot of the panel body with room above it; the subgrid keeps the links on one line. */
.sec--solutions .sol-go { align-self: end; justify-self: start; margin: var(--s-7) var(--sol-pad) 22px; font-size: 14px; }
.sec--solutions .sol-go::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* The whole panel is the link, so the focus ring goes round the panel. Without :has() the link keeps its own ring. */
.sec--solutions .sol-tile:has(.sol-go:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.sec--solutions .sol-tile:has(.sol-go:focus-visible) .sol-go:focus-visible { outline: none; }
.sec--solutions .sol-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px var(--sol-pad);
  border-top: 1px solid var(--hairline);
}
/* The solutions.html tags, a size down, so ownership and platforms stay on one line in a four-up panel from 1100px. */
.sec--solutions .sol-foot .tag { padding-inline: 6px; font-size: 12px; }
.sec--solutions .sol-foot .tag-neutral { margin-inline-end: auto; }
.sec--solutions .tag-platform { background: transparent; border-color: var(--hairline); color: var(--ink-3); }
/* The base line: one framework under all four. */
.sec--solutions .sol-base {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: none;
  padding: 14px var(--sol-pad);
  border-top: 1px solid var(--hairline);
  background: var(--bg-subtle);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.sec--solutions .sol-base svg { width: 10px; height: 17px; flex: none; color: var(--teal-ink); }
.sec--solutions .sol-base b { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* Column dividers start under the band, so the bands meet edge to edge. */
.sec--solutions .sol-tile::after {
  content: "";
  display: none;
  position: absolute;
  top: var(--sol-band-h);
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--hairline);
  pointer-events: none;
}
@media (min-width: 640px) {
  .sec--solutions .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec--solutions .sol-tile:nth-child(even)::after { display: block; }
}
@media (min-width: 1100px) {
  .sec--solutions .sol-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sec--solutions .sol-tile + .sol-tile::after { display: block; }
}
/* Hover: the link takes ink and its arrow steps on. */
@media (hover: hover) {
  .sec--solutions .sol-tile:hover .sol-go { color: var(--link-hover); }
  .sec--solutions .sol-tile:hover .sol-go .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .sec--solutions .sol-go .icon { transition: transform 200ms ease-out; }
}
@media (max-width: 639px) {
  .sec--solutions .sol-sheet { --sol-band-h: 68px; --sol-pad: 20px; }
  .sec--solutions .sol-logo .sol-logo-ptb { width: min(184px, 100cqi); }
  .sec--solutions .sol-logo-gmb { height: 40px; }
  .sec--solutions .sol-logo-stp { height: 40px; }
  .sec--solutions .sol-lockup img { height: 36px; }
  .sec--solutions .sol-lockup span { font-size: 19px; }
  .sec--solutions .sol-sector { margin-top: 22px; }
  .sec--solutions .sol-go { margin: var(--s-6) var(--sol-pad) 12px; }
}
@media (min-width: 900px) {
  .sec--solutions .section-head { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
  .sec--solutions .section-head .eyebrow { grid-column: 1 / -1; }
  .sec--solutions .section-head h2 { grid-column: 1 / 3; grid-row: 2 / span 2; }
  .sec--solutions .section-head .lead { grid-column: 3 / -1; grid-row: 2; }
  .sec--solutions .section-head .link-ghost { grid-column: 3 / -1; grid-row: 3; }
}
/* Engagement and trust heads (eyebrow, title, lead, link): the link sits right of the lead, as on the commitments
   head, not alone on a fourth row. */
@media (min-width: 768px) {
  :is(.sec--engagement, .sec--trust) .section-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); }
  :is(.sec--engagement, .sec--trust) .section-head > * { grid-column: 1; }
  :is(.sec--engagement, .sec--trust) .section-head .link-ghost { grid-column: 2; grid-row: 3; align-self: end; }
}
@keyframes eng-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eng-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sec--engagement .stage-track { position: relative; gap: var(--s-5); }
.sec--engagement .stage .tag { font-size: 13px; align-self: flex-start; }
.sec--engagement .stage-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal);
  transform-origin: 0 50%;
  z-index: 1;
}
.sec--engagement .stage-track::after { content: none; }
@media (max-width: 1023px) {
  .sec--engagement .stage-track::before,
  .sec--engagement .stage-track::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
  }
  .sec--engagement .stage-track::before { transform-origin: 50% 0; }
  .sec--engagement .stage-track::after { content: ""; position: absolute; background: var(--hairline); }
  .sec--engagement .stage { padding-left: var(--s-5); padding-top: 0; border-top: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec--engagement .stage-track { view-timeline: --eng-track; }
    .sec--engagement .stage-track::before {
      animation: eng-fill-x linear both;
      animation-timeline: --eng-track;
      animation-range: entry 0% cover 50%;
    }
    @media (max-width: 1023px) {
      .sec--engagement .stage-track::before { animation-name: eng-fill-y; }
    }
  }
}
.sec--trust .trust-grid { margin-top: 0; }
@media (min-width: 768px) { .sec--trust .trust-grid { overflow: clip; } }
.sec--trust .trust-cell { gap: var(--s-2); padding: var(--s-5); }
.sec--trust .trust-num { display: block; color: var(--ink-3); }
.sec--trust .trust-cell h3 { font-size: 18px; line-height: 1.3; }
.sec--trust .trust-cell p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
}
/* Phones: the six cards are one swipe row (css/swipe-row.css), so each one gets its own border. */
@media (max-width: 767px) {
  .sec--trust .trust-grid { background: none; border: 0; border-radius: 0; }
  .sec--trust .trust-cell { border: 1px solid var(--hairline); border-radius: var(--r-card); }
}
/* Closing: one centred call to action on the band, no frame, large type; the footer follows directly. */
.sec--closing {
  background: var(--teal-deep);
  color: var(--white);
  text-align: center;
  --grid-line: color-mix(in srgb, var(--white) 7%, transparent);
}
@keyframes cl-grid-drift { from { background-position: 0 0; } to { background-position: 32px 32px; } }
@media (prefers-reduced-motion: no-preference) {
  .sec--closing.tx-grid::after { animation: cl-grid-drift 48s linear infinite; }
}
.sec--closing::before { display: none; }
.sec--closing .closing-inner { display: grid; justify-items: center; }
.sec--closing .eyebrow { margin: 0 0 var(--s-5); color: var(--on-dark-2); }
.sec--closing h2 {
  max-width: 14em;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--white);
}
.sec--closing .closing-accent { color: var(--display-accent); }
@media (min-width: 720px) { .sec--closing .closing-accent { display: block; } }
.sec--closing .closing-lead {
  max-width: 32em;
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--on-dark-2);
}
.sec--closing .closing-actions { justify-content: center; margin-top: var(--s-7); }
@media (max-width: 719px) { .sec--closing .closing-actions { justify-self: stretch; } }
@media (min-width: 720px) {
  .sec--closing .closing-actions .btn { min-height: 52px; padding: 0 var(--s-6); font-size: 16px; }
}
.sec--closing .closing-hub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-7);
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-3);
}
.sec--closing .closing-hub .link-ghost { color: var(--teal-ink); }
.sec--closing .closing-hub .link-ghost:hover { color: var(--white); }
.sec--closing :focus-visible { outline-color: var(--focus-on-deep); }