/* ----------------------------------------------------------------------------
 * Industry landing pages, v3 design system.
 *
 * Replaces the navy (#0f2748) + gold (#ffcf5c) theme that was inlined in
 * views/industry_landing.php. Every class name is unchanged, so the template's
 * markup was not edited — the 8 industry pages driven by Home::industry() are
 * restyled in place.
 *
 * Tokens come from v3-shell.css (:root), loaded alongside this by
 * views/partials/v3_head.php.
 * -------------------------------------------------------------------------- */

.ind-lp{color:var(--v3-ink);font-family:var(--v3-body);background:var(--v3-paper);font-size:17px;line-height:1.6}
.ind-lp *,.ind-lp *::before,.ind-lp *::after{box-sizing:border-box}
.ind-lp .container{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,20px);width:auto}
.ind-lp h1,.ind-lp h2,.ind-lp h3{color:var(--v3-ink);line-height:1.05}
.ind-lp p{line-height:1.65;color:var(--v3-steel)}
.ind-lp a:focus-visible,.ind-lp summary:focus-visible{outline:3px solid var(--v3-lime);outline-offset:3px}

/* hero */
.ind-hero{background:var(--v3-ink);color:#f2f4ea;position:relative;overflow:hidden;padding:clamp(48px,7vw,88px) 0}
.ind-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(229,245,56,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(229,245,56,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 80%);pointer-events:none}
.ind-hero .container{position:relative}
.ind-hero h1{color:#f7f9ef;font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.45vw,64px);line-height:.94;letter-spacing:-.005em;margin:16px 0 18px;text-wrap:balance;overflow-wrap:break-word}
.ind-hero .ind-sub{color:#bfc6b3;font-size:clamp(16.5px,1.5vw,19px);max-width:56ch}
.ind-eyebrow{font-family:var(--v3-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-steel-2);font-weight:400;margin:0;display:flex;align-items:center;gap:10px}
.ind-eyebrow::before{content:"";width:28px;height:2px;background:var(--v3-lime);flex:none}
/* THE SCREENSHOT WAS BOXED INTO A .95fr COLUMN - 521px of a 1160px container
   for a 1600px-wide capture, 0.33x, far too small to read a dashboard. Two
   changes make it bigger: the copy column takes a fixed floor rather than a
   share of the grid, and the grid bleeds past the container to the right edge
   of the viewport, so the shot is no longer capped by the 1160px container.

   The floor is 560px, in px and not ch: ch tracks the PARENT font size, while
   what actually has to fit is "MANUFACTURERS" set in the h1 at up to 64px -
   measured at 535px uppercase. At 44ch (419px) and again at 520px it broke
   mid-word as "MANUFACTUR / ERS". 560px leaves slack, and every pixel above
   the floor goes to the screenshot. */
.ind-hero-grid{
  display:grid;grid-template-columns:minmax(560px,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.ind-hero-grid img{
  width:100%;border-radius:10px 0 0 10px;
  border:1px solid var(--v3-rule-dark);border-right:0;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  display:block;
}
/* Angled rather than flat-on. perspective() on the element itself (not the
   parent) keeps the vanishing point tied to this one image, and the origin on
   the left edge means the tilt pushes the far side AWAY into the bleed - the
   screenshot appears to turn off the edge of the screen instead of sitting on
   it. Small angles on purpose: past about 10deg the UI text starts to smear
   on the receding side. */
@media (min-width:1240px){
  .ind-hero-grid img{
    transform:perspective(2000px) rotateY(-7deg) rotateX(1.5deg);
    transform-origin:left center;
    box-shadow:-10px 40px 90px rgba(0,0,0,.6);
  }
}
@media (prefers-reduced-motion:reduce){
  .ind-hero-grid img{transform:none}
}
/* The bleed. The container is max-width:1240px with 20px padding, so its
   content edge sits at centre + 600px; pulling the grid's right margin by
   (600px - 50vw) lands its right edge exactly on the viewport edge. The copy
   column is pinned at its floor, so every pixel gained goes to the screenshot.
   Only above 1240px, where the container is actually narrower than the
   viewport - below that the sum goes positive and would inset the grid.

   THIS NUMBER IS TIED TO THE CONTAINER PADDING: 600 = 1240/2 - 20. Change
   padding-inline on .ind-lp .container and this has to move with it, or the
   shot stops landing on the viewport edge. */
@media (min-width:1240px){
  .ind-hero-grid{margin-right:calc(600px - 50vw)}
}

/* buttons */
.ind-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.ind-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--v3-radius-btn);font-family:var(--v3-body);font-weight:700;text-decoration:none;font-size:16px;line-height:1.1;border:2px solid transparent;transition:transform .15s ease,background .15s ease}
.ind-btn:hover{transform:translateY(-2px);text-decoration:none}
.ind-btn-primary{background:var(--v3-lime);color:var(--v3-ink)}
.ind-btn-primary:hover{background:var(--v3-lime);color:var(--v3-ink)}
.ind-btn-ghost{border-color:#3b4230;color:#fff}
.ind-btn-ghost:hover{border-color:var(--v3-lime);background:transparent;color:#fff}
.ind-btn-call{background:transparent;border-color:#3b4230;color:#fff}
.ind-btn-call:hover{border-color:var(--v3-lime);color:#fff}
.ind-btn-call i{margin-right:6px}

/* sections */
.ind-section{padding:clamp(56px,8vw,104px) 0}
.ind-alt{background:var(--v3-card);border-block:1px solid var(--v3-rule)}
.ind-section h2{font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.6vw,58px);line-height:.95;text-align:left;margin:0 0 14px;text-wrap:balance}
.ind-section .ind-lead{text-align:left;max-width:62ch;margin:0 0 clamp(32px,4vw,48px);font-size:clamp(16.5px,1.4vw,18.5px)}

/* cards */
.ind-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--v3-rule);border:1px solid var(--v3-rule);margin-top:28px}
.ind-card{background:var(--v3-card);border:0;border-radius:0;padding:28px 26px;box-shadow:none}
.ind-card h3{font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1.02;margin:0 0 10px}
.ind-card p{margin:0;font-size:15px;line-height:1.55}
.ind-pain .ind-card{border-left:0;border-top:3px solid var(--v3-warn,#ff6b2c)}
.ind-badge{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;background:transparent;color:var(--v3-olive);font-family:var(--v3-mono);font-size:12.5px;font-weight:400;line-height:1;margin-bottom:12px}

/* case study */
.ind-case{background:var(--v3-ink);color:#e8ecdf;border-radius:6px;padding:clamp(32px,4.5vw,56px);text-align:left}
.ind-case h2{color:#fff;font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.8vw,48px);line-height:.98;text-align:left}
.ind-cred{color:#aab39d;max-width:70ch;margin:10px 0 0;font-size:16px}
.ind-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(28px,3.5vw,40px) 0 0;border-top:1px solid var(--v3-rule-dark)}
/* Padding was 24px on the RIGHT only, so each figure and label sat hard
   against the divider to its left - "4" and "Manufacturing units unified on
   LastingERP" were touching the rule. Padded both sides, with the outer edges
   left flush so the row still lines up with the copy above it. */
.ind-metrics > div{padding:24px 32px 0;border-right:1px solid var(--v3-rule-dark)}
.ind-metrics > div:first-child{padding-left:0}
.ind-metrics > div:last-child{border-right:0;padding-right:0}
.ind-metric-val{font-family:var(--v3-display);font-weight:800;font-size:clamp(46px,5vw,68px);line-height:.85;color:var(--v3-lime);font-variant-numeric:tabular-nums}
.ind-metric-lbl{color:#aab39d;font-size:14px;margin-top:10px;line-height:1.45}
.ind-case blockquote{font-family:var(--v3-display);font-weight:700;text-transform:uppercase;font-style:normal;font-size:clamp(24px,2.8vw,36px);line-height:1.02;color:#fff;max-width:26ch;margin:clamp(28px,3.5vw,40px) 0 0;padding:0;border:0}
.ind-case blockquote::before{content:"\201C";color:var(--v3-lime);display:block;font-size:1.6em;line-height:.6;margin-bottom:6px}

/* screenshots */
.ind-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.ind-shots img{width:100%;border-radius:8px;border:1px solid var(--v3-rule);box-shadow:0 20px 50px rgba(14,16,11,.10)}

/* faq */
.ind-faq{max-width:820px}
.ind-faq details{background:transparent;border:0;border-bottom:1px solid var(--v3-rule);border-radius:0;padding:0;margin-bottom:0;overflow:visible}
.ind-faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:700;color:var(--v3-ink);list-style:none;font-size:17.5px;position:relative}
.ind-faq summary::-webkit-details-marker{display:none}
.ind-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--v3-mono);font-size:24px;color:var(--v3-olive);font-weight:400}
.ind-faq details[open] summary::after{content:"\2013"}
.ind-faq .ind-ans{padding:0 0 20px;color:var(--v3-steel);line-height:1.65;max-width:62ch}

/* closing cta */
.ind-final-cta{background:var(--v3-lime);color:var(--v3-ink);text-align:left;padding:clamp(44px,6vw,30px) 0}
.ind-final-cta h2{color:var(--v3-ink);font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.6vw,60px);line-height:.95;text-align:left;text-wrap:balance;margin-top:0px}
.ind-final-cta p{color:#3d4400;max-width:56ch}
.ind-final-cta .ind-btn-primary{background:var(--v3-ink);color:#fff}
.ind-final-cta .ind-btn-ghost,.ind-final-cta .ind-btn-call{border-color:var(--v3-ink);color:var(--v3-ink)}
.ind-final-cta .ind-btn-ghost:hover,.ind-final-cta .ind-btn-call:hover{background:var(--v3-ink);color:#fff}

@media (max-width:1020px){
  .ind-hero-grid{grid-template-columns:1fr}
  .ind-metrics{grid-template-columns:1fr;border-top:0}
  .ind-metrics > div{border-right:0;border-top:1px solid var(--v3-rule-dark);padding:20px 0 0}
  .ind-shots{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ind-lp{font-size:16px}
  .ind-cta .ind-btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ind-lp *{transition:none!important;animation:none!important}
}

/* Between 992 and 1240 the two columns plus a 560px floor left the shot at
   401px - SMALLER than the 521px it started at, because there is no bleed
   below 1240 to make up the difference. Stacking from 1240 down instead gives
   the screenshot the full container: 1020px at a 1100px viewport. */
@media (max-width:1239px){
  .ind-hero-grid{grid-template-columns:1fr;margin-right:0}
  .ind-hero-grid img{
    border-radius:10px;border-right:1px solid var(--v3-rule-dark);
  }
}