/* ==========================================================================
   Sector pages.

   Built to be read once, top to bottom, by somebody who has never heard of us.
   Four sections, wide margins, one idea per screen. Nothing here is a card
   unless it is genuinely one of a set: the previous version made everything a
   card, so nothing stood out and the page read as a wall.

   Every selector carries the .product-industry body class. This file is linked
   from {% block head %}, which base.html renders *before* aws-refit.css and
   product-experience.css, so anything written plainly here loses every tie to
   them. Without the extra class the hero silently re-centred itself and the
   dark closing panel's heading came back dark green on dark green.
   ========================================================================== */

.product-industry .ind {
  --ind-ink:#142E25; --ind-body:#4B5C55; --ind-line:#DDE7E0;
}

/* ---------- hero ---------- */
.product-industry .ind .ind-hero {
  position:relative; isolation:isolate; overflow:hidden;
  max-width:none; padding:74px 34px 66px; margin-bottom:14px;
  border-radius:20px; border:1px solid var(--ind-line); text-align:left;
}
/* Reusing a photograph the site already owns rather than sourcing a fourth. */
.product-industry .ind .ind-hero::before {
  content:''; position:absolute; inset:0; z-index:-2;
  background:url("../images/photos/nat-hills.webp") center 58% / cover no-repeat;
}
.product-industry .ind .ind-hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg,
    rgba(251,250,246,.94) 0%, rgba(251,250,246,.91) 38%,
    rgba(251,250,246,.74) 54%, rgba(251,250,246,.30) 72%,
    rgba(251,250,246,.14) 100%);
}
.product-industry .ind .ind-hero > * {
  max-width:min(56ch,660px); margin-inline:0 auto;
}
.product-industry .ind .ind-crumb {
  margin:0 0 18px; font:600 .72rem/1.5 ui-monospace,monospace;
  letter-spacing:.08em; text-transform:uppercase; color:#6C7F76;
}
.product-industry .ind .ind-crumb a { color:#0E6B47; text-decoration:none; }
.product-industry .ind .ind-crumb a:hover { text-decoration:underline; }
.product-industry .ind .ind-crumb span { margin:0 8px; color:#A9B8B0; }
.product-industry .ind .ind-hero h1 {
  margin:0; color:var(--ind-ink);
  font:700 clamp(34px,4.4vw,58px)/1.06 'Space Grotesk',Inter,sans-serif;
  letter-spacing:-.03em; text-wrap:balance;
}
.product-industry .ind .ind-lede {
  margin:20px 0 0; color:var(--ind-body); font-size:1.06rem; line-height:1.62;
}
.product-industry .ind .ind-actions {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;
}

/* ---------- sections ---------- */
.product-industry .ind .ind-sec {
  padding:64px 4px; border-top:1px solid var(--ind-line);
}
.product-industry .ind .ind-sec:first-of-type { border-top:0; }
.product-industry .ind .ind-sec h2 {
  margin:10px 0 0; color:var(--ind-ink);
  font:700 clamp(26px,3vw,38px)/1.12 'Space Grotesk',Inter,sans-serif;
  letter-spacing:-.025em; text-wrap:balance;
}

/* Two answers side by side, because the point is that they are a pair and
   neither one finishes the job. */
.product-industry .ind .ind-pair {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 46px; margin:30px 0 0; padding:0; list-style:none;
}
.product-industry .ind .ind-pair li { padding:22px 0 0; border-top:2px solid #C9D8CF; }
.product-industry .ind .ind-pair strong {
  display:block; color:var(--ind-ink); font-size:1.08rem; font-weight:650;
}
.product-industry .ind .ind-pair span {
  display:block; margin-top:8px; color:var(--ind-body); font-size:.95rem; line-height:1.6;
}

/* A sequence, numbered because it genuinely is one: the record cannot exist
   before the check has run. */
.product-industry .ind .ind-steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:34px 40px; margin:34px 0 0; padding:0; list-style:none;
}
.product-industry .ind .ind-steps b {
  display:block; margin-bottom:14px;
  font:640 .78rem ui-monospace,monospace; letter-spacing:.08em; color:#0E6B47;
}
.product-industry .ind .ind-steps h3 {
  margin:0 0 8px; color:var(--ind-ink); font-size:1.06rem; line-height:1.3;
}
.product-industry .ind .ind-steps p {
  margin:0; color:var(--ind-body); font-size:.94rem; line-height:1.6;
}

/* The limits are the most credible thing on the page, so they are plain
   readable lines rather than something hidden inside a card. */
.product-industry .ind .ind-nots {
  max-width:74ch; margin:30px 0 0; padding:0; list-style:none;
}
.product-industry .ind .ind-nots li {
  position:relative; padding:15px 0 15px 30px; border-bottom:1px solid var(--ind-line);
  color:var(--ind-body); font-size:.98rem; line-height:1.62;
}
.product-industry .ind .ind-nots li:first-child { border-top:1px solid var(--ind-line); }
.product-industry .ind .ind-nots li::before {
  content:'\2014'; position:absolute; left:0; top:15px; color:#B08A2E; font-weight:700;
}

/* ---------- close ---------- */
.product-industry .ind .ind-cta {
  margin:20px 0 8px; padding:52px 34px; border-radius:20px;
  background:#10362A; color:#CFE0D6;
}
.product-industry .ind .ind-cta h2 {
  margin:0; color:#fff;
  font:700 clamp(24px,2.6vw,34px)/1.14 'Space Grotesk',Inter,sans-serif; letter-spacing:-.02em;
}
.product-industry .ind .ind-cta p {
  max-width:60ch; margin:14px 0 0; color:#B6CCC0; line-height:1.65;
}
.product-industry .ind .ind-cta .ek-button {
  background:transparent; border-color:#4A6C5C; color:#DCEBE2;
}
.product-industry .ind .ind-cta .ek-button:hover {
  background:#194A38; border-color:#7FA692; color:#fff;
}
.product-industry .ind .ind-cta .ek-button-primary {
  background:#fff; border-color:#fff; color:#10362A;
}
.product-industry .ind .ind-cta .ek-button-primary:hover {
  background:#E7F2EA; border-color:#E7F2EA; color:#10362A;
}

@media (max-width:760px){
  .product-industry .ind .ind-hero { padding:52px 20px 46px; border-radius:16px; }
  /* The left-to-right ramp only works while the text keeps to the left half.
     At this width it runs the full measure and the lede ends up sitting on the
     photograph. Even wash instead. */
  .product-industry .ind .ind-hero::after {
    background:linear-gradient(180deg,
      rgba(251,250,246,.94) 0%, rgba(251,250,246,.90) 55%, rgba(251,250,246,.94) 100%);
  }
  .product-industry .ind .ind-hero > * { max-width:none; }
  .product-industry .ind .ind-sec { padding:48px 2px; }
  .product-industry .ind .ind-cta { padding:38px 22px; border-radius:16px; }
}