﻿:root{
  --industry-accent:var(--ami-green, #4FA63B);
  --industry-accent-two:var(--ami-green-bright, #7BD45E);
  --industry-deep:var(--ami-deep, #0B1620);
}
body[data-industry]{
  --city-accent:var(--industry-accent);
  --city-accent-two:var(--industry-accent-two);
  --city-pattern:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--industry-accent-two) 20%, transparent), transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--industry-accent) 12%, transparent) 0 2px, transparent 2px 34px),
    linear-gradient(0deg, color-mix(in srgb, var(--industry-accent-two) 13%, transparent) 0 2px, transparent 2px 34px);
}
body[data-industry="medical-offices"]{--industry-accent:#2f8f7f;--industry-accent-two:#70cfe0}
body[data-industry="retail-restaurants"]{--industry-accent:#4fa63b;--industry-accent-two:#d7f26b}
body[data-industry="schools-daycare"]{--industry-accent:#3268b2;--industry-accent-two:#7bd45e}
body[data-industry="warehouses-light-industrial"]{--industry-accent:#476a35;--industry-accent-two:#f0c84a}
body[data-industry="property-managed-buildings"]{--industry-accent:#315f97;--industry-accent-two:#6fbf5a}
.industry-hero{
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
}
.industry-hero h1{
  font-size:clamp(2.25rem,4.65vw,4.7rem);
}
.industry-visual{
  --industry-img-x:0px;
  --industry-img-y:0px;
  --industry-img-scale:1.025;
  --industry-brightness:1.03;
  position:relative;
  min-height:540px;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(70% 52% at 28% 8%, rgba(255,255,255,.86), transparent 58%),
    radial-gradient(70% 55% at 76% 18%, color-mix(in srgb, var(--industry-accent-two) 22%, transparent), transparent 62%),
    linear-gradient(135deg, #f9fbf8 0%, #edf5f2 43%, #c8dfe8 100%);
  box-shadow:var(--shadow);
  isolation:isolate;
  perspective:1000px;
  transform-style:preserve-3d;
  transition:transform 360ms cubic-bezier(.2,.75,.2,1), box-shadow 360ms ease, filter 360ms ease;
}
.industry-visual.has-image{
  background:#071620;
}
body[data-industry] .industry-visual.has-image.is-tilting,
body[data-industry] .industry-visual.has-image:hover,
body[data-industry] .industry-visual.has-image:focus-within{
  box-shadow:0 38px 100px rgba(11,22,32,.28), 0 0 0 1px rgba(255,255,255,.48) inset;
  filter:saturate(1.08);
}
.industry-hub-visual{
  border:1px solid rgba(255,255,255,.56);
  background:
    radial-gradient(70% 56% at 72% 12%, rgba(123,212,94,.18), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(224,240,244,.72));
  box-shadow:
    0 34px 90px rgba(11,22,32,.24),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -24px 60px rgba(7,22,32,.08);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.industry-visual-img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  min-height:540px;
  object-fit:cover;
  display:block;
  transform:translate3d(var(--industry-img-x), var(--industry-img-y), 0) scale(var(--industry-img-scale));
  filter:saturate(1.18) contrast(1.08) brightness(var(--industry-brightness));
  transition:transform 620ms cubic-bezier(.16,1,.3,1), filter 620ms cubic-bezier(.16,1,.3,1);
  will-change:transform, filter;
}
body[data-industry] .industry-visual.has-image:hover .industry-visual-img,
body[data-industry] .industry-visual.has-image:focus-within .industry-visual-img,
body[data-industry] .industry-visual.has-image.is-tilting .industry-visual-img{
  --industry-img-scale:1.065;
  --industry-brightness:1.07;
  filter:saturate(1.28) contrast(1.11) brightness(var(--industry-brightness));
}
.industry-visual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,22,32,0) 44%, rgba(7,22,32,.68) 100%),
    radial-gradient(80% 55% at 70% 16%, color-mix(in srgb, var(--industry-accent-two) 15%, transparent), transparent 62%);
}
.industry-hub-visual:before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%, rgba(7,22,32,.56) 100%),
    radial-gradient(42% 34% at 76% 20%, rgba(123,212,94,.18), transparent 72%),
    radial-gradient(48% 38% at 18% 76%, rgba(47,125,179,.18), transparent 76%),
    linear-gradient(125deg, rgba(255,255,255,.22), transparent 36%, rgba(255,255,255,.12) 64%, transparent);
  animation:liquidGlassSheen 8s ease-in-out infinite;
}
body[data-industry] .industry-visual.has-image:before{
  background:
    linear-gradient(180deg, rgba(7,22,32,0) 34%, rgba(7,22,32,.78) 100%),
    radial-gradient(64% 48% at 72% 18%, color-mix(in srgb, var(--industry-accent-two) 28%, transparent), transparent 66%),
    linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,.34) 45%, transparent 58% 100%);
  background-size:100% 100%, 100% 100%, 230% 100%;
  background-position:center, center, 118% 0;
  animation:industryImageSheen 8.5s ease-in-out infinite;
}
.industry-visual:after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:9;
  border:1px solid rgba(255,255,255,.54);
  border-radius:18px;
  pointer-events:none;
}
.industry-hub-visual:after{
  border-color:rgba(255,255,255,.62);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34%, rgba(255,255,255,.1) 68%, rgba(255,255,255,0)),
    radial-gradient(74% 32% at 50% 100%, rgba(255,255,255,.13), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.2),
    0 16px 44px rgba(11,22,32,.12);
  backdrop-filter:blur(.7px);
  -webkit-backdrop-filter:blur(.7px);
}
.industry-stage{
  position:absolute;
  left:9%;
  right:9%;
  bottom:18%;
  height:54%;
  z-index:1;
  transform:rotateX(62deg) rotateZ(-8deg);
  transform-origin:center bottom;
  border:1px solid rgba(11,22,32,.08);
  border-radius:30px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(47,125,179,.12) 49%, transparent 51%) 0 0/78px 78px,
    linear-gradient(0deg, transparent 48%, rgba(79,166,59,.12) 49%, transparent 51%) 0 0/78px 78px,
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.96), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.9), #e9f2ed 50%, #d9e6df);
  box-shadow:0 46px 84px rgba(11,22,32,.22), inset 0 1px 0 rgba(255,255,255,.95);
}
.industry-stage:before,
.industry-stage:after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:999px;
}
.industry-stage:before{
  left:9%;
  right:10%;
  top:48%;
  height:5px;
  background:linear-gradient(90deg, transparent, rgba(47,125,179,.25), rgba(255,255,255,.85), color-mix(in srgb, var(--industry-accent) 34%, transparent), transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--industry-accent-two) 32%, transparent);
}
.industry-stage:after{
  left:4%;
  right:4%;
  bottom:-20%;
  height:46px;
  background:linear-gradient(90deg, transparent, rgba(75,142,174,.32), rgba(255,255,255,.2), transparent);
  transform:rotateX(70deg);
}
.industry-building,
.industry-block,
.industry-counter,
.industry-wing{
  position:absolute;
  z-index:3;
  border:1px solid rgba(255,255,255,.78);
  border-radius:10px 10px 4px 4px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(230,239,236,.86)),
    linear-gradient(160deg, color-mix(in srgb, var(--industry-accent) 18%, #f7fafb), #d7e2dd);
  box-shadow:0 24px 44px rgba(11,22,32,.22), inset 0 1px 0 rgba(255,255,255,.94);
}
.industry-building:before,
.industry-block:before,
.industry-counter:before,
.industry-wing:before{
  content:"";
  position:absolute;
  inset:14px 12px;
  opacity:.7;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--industry-accent) 20%, transparent) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(90deg, rgba(47,125,179,.13) 0 2px, transparent 2px 18px);
}
.industry-building{left:46%;bottom:32%;width:116px;height:178px}
.industry-block{left:20%;bottom:31%;width:165px;height:86px}
.industry-counter{left:62%;bottom:29%;width:180px;height:74px}
.industry-wing{left:34%;bottom:27%;width:118px;height:118px}
.industry-scene-medical .industry-building{height:150px;width:160px;left:48%}
.industry-scene-retail .industry-counter{width:230px;height:90px;left:40%}
.industry-scene-school .industry-wing{width:210px;height:96px;left:24%}
.industry-scene-warehouse .industry-block{width:250px;height:116px;left:24%}
.industry-scene-property .industry-building{height:210px;left:55%}
.industry-route{
  position:absolute;
  z-index:5;
  left:12%;
  right:12%;
  top:56%;
  height:4px;
  border-radius:999px;
  transform:rotate(var(--route-angle, -7deg));
  background:linear-gradient(90deg, transparent, rgba(123,212,94,.12), rgba(255,255,255,.94), rgba(123,212,94,.28), transparent);
  box-shadow:0 0 26px rgba(123,212,94,.48);
  animation:industryRoute 3.4s ease-in-out infinite;
}
.industry-node{
  position:absolute;
  z-index:7;
  left:var(--x);
  top:var(--y);
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border:0;
  border-radius:999px;
  padding:0;
  color:#fff;
  background:radial-gradient(circle at 36% 30%, #fff 0 10%, var(--ami-green-bright) 11% 34%, var(--ami-green) 35% 72%, #1f6f1e 73%);
  box-shadow:0 18px 34px rgba(11,22,32,.26), 0 0 0 9px rgba(123,212,94,.22);
  cursor:pointer;
  font-weight:950;
  transform:translate(-50%, -50%);
  transition:transform 260ms cubic-bezier(.2,.75,.2,1), box-shadow 260ms ease, filter 260ms ease;
}
.industry-visual.has-image .industry-node{
  width:4.25rem;
  height:4.25rem;
  color:transparent;
  background:transparent;
  box-shadow:none;
}
.industry-node{
  text-decoration:none;
}
.industry-hub-visual.has-image .industry-node{
  width:3.45rem;
  height:3.45rem;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.92) 0 9%, transparent 10%),
    linear-gradient(145deg, rgba(123,212,94,.92), rgba(50,145,42,.92) 54%, rgba(22,99,28,.96)),
    rgba(255,255,255,.18);
  box-shadow:
    0 18px 34px rgba(11,22,32,.24),
    0 0 0 10px rgba(123,212,94,.18),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -12px 22px rgba(11,22,32,.16);
  backdrop-filter:blur(10px) saturate(1.18);
  -webkit-backdrop-filter:blur(10px) saturate(1.18);
}
.industry-node:before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:inherit;
  border:1px solid rgba(123,212,94,.42);
  animation:industryNodePulse 2.8s ease-in-out infinite;
}
.industry-visual.has-image .industry-node:before{
  inset:.68rem;
  border:2px solid rgba(123,212,94,.5);
  box-shadow:0 0 0 10px rgba(123,212,94,.14), 0 0 30px rgba(79,166,59,.34);
}
.industry-hub-visual .industry-route{
  display:none;
}
.industry-hub-visual.has-image .industry-node:before{
  inset:-.6rem;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 0 0 8px rgba(123,212,94,.12), 0 0 36px rgba(123,212,94,.28);
}
.industry-node:hover,
.industry-node:focus-visible,
.industry-node.is-node-active{
  z-index:12;
  transform:translate(-50%, -50%) translateY(-18px) scale(1.18);
  filter:saturate(1.26) brightness(1.05);
  box-shadow:0 28px 48px rgba(11,22,32,.38), 0 0 0 12px rgba(123,212,94,.32), 0 0 44px rgba(123,212,94,.62);
}
.industry-visual.has-image .industry-node:hover,
.industry-visual.has-image .industry-node:focus-visible,
.industry-visual.has-image .industry-node.is-node-active{
  background:rgba(123,212,94,.08);
  box-shadow:none;
}
.industry-hub-visual.has-image .industry-node:hover,
.industry-hub-visual.has-image .industry-node:focus-visible,
.industry-hub-visual.has-image .industry-node.is-node-active{
  color:#fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.94) 0 10%, transparent 11%),
    linear-gradient(145deg, rgba(139,231,98,.96), rgba(61,164,47,.98) 55%, rgba(24,108,31,.98));
  box-shadow:
    0 26px 46px rgba(11,22,32,.3),
    0 0 0 12px rgba(123,212,94,.22),
    0 0 42px rgba(123,212,94,.36),
    inset 0 1px 0 rgba(255,255,255,.58);
}
.industry-node:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}
.industry-popover{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  width:min(260px, 42vw);
  padding:.82rem .9rem .9rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:rgba(7,22,32,.88);
  color:#fff;
  box-shadow:0 24px 50px rgba(0,0,0,.36);
  backdrop-filter:blur(14px);
  text-align:left;
  opacity:0;
  transform:translateX(-50%) translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity 190ms ease, transform 250ms cubic-bezier(.2,.75,.2,1);
}
.industry-node:hover .industry-popover,
.industry-node:focus-visible .industry-popover,
.industry-node.is-node-active .industry-popover{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}
.industry-popover strong{
  display:block;
  font-family:Fraunces, Georgia, serif;
  font-size:1.12rem;
  font-weight:500;
  line-height:1.05;
  margin-bottom:.28rem;
}
.industry-popover span{
  display:block;
  margin-bottom:.35rem;
  color:rgba(255,255,255,.74);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.industry-popover p{
  color:rgba(255,255,255,.84);
  font-size:.9rem;
  font-weight:720;
  line-height:1.36;
}
.industry-caption{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1.2rem;
  z-index:10;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
}
.industry-caption span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.industry-caption strong{
  display:block;
  color:#fff;
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:460;
  line-height:1.05;
  text-shadow:0 12px 32px rgba(0,0,0,.32);
}
.industry-card a{
  display:grid;
  gap:.65rem;
  color:inherit;
  text-decoration:none;
}
.industry-card-thumb{
  position:relative;
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  margin:-.2rem -.2rem .2rem;
  border:1px solid rgba(11,22,32,.08);
  border-radius:14px;
  background:#edf5f2;
  box-shadow:0 14px 30px rgba(11,22,32,.08);
}
.industry-card-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.42) 48%, transparent 62% 100%);
  background-size:220% 100%;
  background-position:120% 0;
  opacity:.65;
  transition:background-position 760ms cubic-bezier(.16,1,.3,1), opacity 260ms ease;
}
.industry-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.025);
  filter:saturate(1.12) contrast(1.05);
  transition:transform 620ms cubic-bezier(.16,1,.3,1), filter 620ms cubic-bezier(.16,1,.3,1);
}
.industry-card:hover .industry-card-thumb img,
.industry-card:focus-within .industry-card-thumb img,
.industry-card.is-card-active .industry-card-thumb img{
  transform:scale(1.085) translateY(-3px);
  filter:saturate(1.24) contrast(1.1) brightness(1.05);
}
.industry-card:hover .industry-card-thumb:after,
.industry-card:focus-within .industry-card-thumb:after,
.industry-card.is-card-active .industry-card-thumb:after{
  background-position:-38% 0;
  opacity:.9;
}
.industry-card strong{
  font-family:Fraunces, Georgia, serif;
  color:var(--ami-deep);
  font-size:1.36rem;
  line-height:1.06;
}
.industry-card span{
  color:rgba(11,22,32,.7);
  font-weight:760;
}
.industry-proof{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.industry-proof .card{
  min-height:220px;
}
.industry-field-section{
  background:linear-gradient(135deg, rgba(255,255,255,.56), rgba(232,241,244,.5));
}
.industry-field-proof{
  display:grid;
  grid-template-columns:minmax(360px,.98fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
}
.industry-worker-card{
  position:relative;
  min-height:420px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.68);
  border-radius:22px;
  background:#071620;
  box-shadow:var(--shadow);
  isolation:isolate;
}
.industry-worker-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,22,32,0) 46%, rgba(7,22,32,.7) 100%),
    radial-gradient(80% 60% at 78% 14%, rgba(123,212,94,.16), transparent 62%);
}
.industry-worker-card:after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:2;
  border:1px solid rgba(255,255,255,.24);
  border-radius:18px;
  pointer-events:none;
}
.industry-worker-card img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
}
.industry-worker-card figcaption{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1.2rem;
  z-index:3;
  color:#fff;
}
.industry-worker-card figcaption span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.industry-worker-card figcaption strong{
  display:block;
  max-width:18ch;
  color:#fff;
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:460;
  line-height:1.05;
  text-shadow:0 12px 32px rgba(0,0,0,.32);
}
.industry-field-copy{
  margin-bottom:0;
}
.industry-list{
  margin:.7rem 0 0;
  padding-left:1.1rem;
}
.industry-list li{
  margin:.45rem 0;
}
@keyframes industryRoute{
  0%,100%{clip-path:inset(0 100% 0 0);opacity:.2}
  48%,68%{clip-path:inset(0 0 0 0);opacity:.95}
}
@keyframes industryNodePulse{
  0%,100%{transform:scale(.86);opacity:.16}
  45%{transform:scale(1.28);opacity:.56}
}
@keyframes liquidGlassSheen{
  0%,100%{filter:saturate(1);opacity:.92}
  45%{filter:saturate(1.16) brightness(1.04);opacity:1}
}
@keyframes industryImageSheen{
  0%,100%{background-position:center, center, 118% 0}
  48%{background-position:center, center, -42% 0}
}
@media (max-width:1000px){
  .industry-hero{grid-template-columns:1fr}
  .industry-proof{grid-template-columns:1fr}
  .industry-field-proof{grid-template-columns:1fr}
}
@media (max-width:700px){
  .industry-visual{min-height:430px}
  .industry-visual-img{min-height:430px}
  .industry-worker-card{min-height:330px}
  .industry-worker-card img{min-height:330px}
  .industry-caption{align-items:flex-start;flex-direction:column}
  .industry-building{height:136px;width:94px}
  .industry-block{width:136px}
  .industry-counter{width:150px}
}
@media (prefers-reduced-motion: reduce){
  .industry-route,
  .industry-node:before,
  .industry-hub-visual:before,
  body[data-industry] .industry-visual.has-image:before{
    animation:none;
  }
  .industry-node,
  .industry-popover{transition:none}
  body[data-industry] .industry-visual-img{transform:scale(1.02)}
}
