/* ============================================================
   Industries — VERBATIM copy of the <style> block in the
   export's ui_kits/industries/index.html. Do not hand-edit: keep it
   diffable against a future export.
   ============================================================ */
html,body{margin:0;padding:0}
a{color:#5939F5}a:hover{color:#4527d4}
.ind-page a{text-decoration:none}

/* 1 — Hero (centered, white) */
.ind-hero{background:#FFFFFF;padding:calc(var(--header-height) + 60px) 0 0;text-align:center}
.ind-hero__inner{max-width:924px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.ind-hero__h1{margin:0;font:var(--fw-halbfett) 48px/1.05 var(--font-display);letter-spacing:-1.44px;color:#050E1E;text-wrap:balance}
.ind-hero__sub{margin:24px auto 0;max-width:760px;font-family:"Epilogue",var(--font-body);font-weight:400;font-size:20px;line-height:1.4;color:#050E1E}

/* 2 — Industry cards grid (reuses .fa-ind__* card styling from homepage.css) */
.ind-grid{background:#FFFFFF;padding:0 0 120px}
.ind-grid__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
/* Media band: photo over a yellow torn/zig-zag shape */
.ind-frame{position:relative;width:100%;height:300px;margin-top:auto;overflow:hidden}
.ind-zig{position:absolute;left:18px;right:18px;top:24px;bottom:0;background:#FCEB4E;z-index:0;
  clip-path:polygon(0 8%,6% 0,12% 8%,18% 0,24% 8%,30% 0,36% 8%,42% 0,48% 8%,54% 0,60% 8%,66% 0,72% 8%,78% 0,84% 8%,90% 0,96% 8%,100% 2%,100% 100%,0 100%)}
.ind-photo{position:absolute;left:0;right:0;top:16px;bottom:0;width:100%;height:calc(100% - 16px);object-fit:cover;display:block;z-index:1}
.ind-ph{position:absolute;left:0;right:0;top:16px;bottom:0;background:#050E1E;display:flex;align-items:center;justify-content:center;z-index:1}
.ind-ph__label{font:var(--fw-kraftig) 14px/1.35 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* Tablet */
@media (max-width:1199px){
  .ind-hero{padding:80px 0}
  .ind-hero__h1{font-size:40px;letter-spacing:-1.2px}
  .ind-grid{padding:0 0 80px}
}
/* Mobile */
@media (max-width:767px){
  .ind-hero{padding:60px 0}
  .ind-hero__h1{font-size:34px;letter-spacing:-1px}
  .ind-hero__sub{font-size:17px}
  .ind-grid{padding:0 0 60px}
  .ind-grid__row{grid-template-columns:1fr}
  .ind-frame{height:auto;aspect-ratio:16/10}
  .ind-photo,.ind-ph{position:relative;top:0;height:100%}
  .ind-zig{top:16px}
}
