@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800&display=swap');

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

.hero{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding:clamp(92px, 8vh, 128px) 0 clamp(28px, 5vh, 48px);
  color:#fff;
  overflow-x:hidden;
  overflow-y:visible;
  background:#003366;
  font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.hero::before{
  display:none!important;
}
.hero-bg .blueprint{display:none!important;background:none!important}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg .blueprint{display:none}
.hero-bg svg{position:absolute;right:-2%;bottom:0;height:92%;opacity:.9}
.scan{position:absolute;top:0;bottom:0;left:0;width:2px;opacity:.5;background:linear-gradient(#00a0a6,transparent);animation:heroScan 7s linear infinite}
.bar{transform-origin:center bottom;transform-box:fill-box;transform:scaleY(.84);animation:heroBarPulse 4.2s ease-in-out infinite;will-change:transform}
.crane{stroke-dasharray:600;stroke-dashoffset:600;animation:heroDraw 2.2s ease forwards .3s}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-grid > div:first-child{max-width:620px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;color:#7ED8D8;font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase}
.hero-eyebrow{font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif}
.hero-eyebrow::before{content:"";width:30px;height:2px;background:#b4885b}
.hero h1{margin:22px 0 16px;color:#fff;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(40px,6vw,76px);font-weight:800;line-height:1.05;letter-spacing:-.03em;max-width:620px}
.hero h1 .accent{display:block;color:#4FC3C3}
.hero .sub{margin:0 0 38px;max-width:620px;color:#fff;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(17px,1.45vw,20px)}
.hero .tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.tag{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:7px 14px;color:#dceaf2;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.06em;line-height:1;text-transform:uppercase}
.tag b{display:inline-block;margin-left:.38em;color:#7ED8D8;font:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cta .btn{border-radius:2px}
.hero-cta .btn-pri{background:#A67C52;border:1px solid #A67C52;color:#fff}
.hero-cta .btn-pri:hover{background:#9a7048;border-color:#9a7048}
.hero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.stats{position:relative;display:flex;flex-direction:column;gap:22px;padding-left:30px;border-left:2px solid rgba(0,160,166,.4)}
.stats::before{content:"";position:absolute;top:-150px;bottom:-160px;left:-24px;width:2px;background:rgba(0,160,166,.4);pointer-events:none}
.stat .num{color:#fff;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .num .pre{color:#c9ab7c}
.stat .lab{margin-top:6px;color:#7ED8D8;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.stat-isos .num{display:flex;align-items:center;font-size:clamp(30px,3.2vw,42px)}
.iso-inline-label{display:inline-block;margin-left:8px;font:inherit;color:inherit;letter-spacing:inherit;text-transform:uppercase}
.iso-circles{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.iso-circle{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:2px solid rgba(255,255,255,.95);border-radius:50%;color:#fff;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.06em;line-height:1;text-align:center}

.hero-grid > div:first-child > *,.hero .stats .stat{
  opacity:0;
  transform:translateY(18px);
  animation:heroEnter .75s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero .hero-eyebrow{animation-delay:.08s}
.hero h1{animation-delay:.18s}
.hero .sub{animation-delay:.28s}
.hero .tags{animation-delay:.38s}
.hero .hero-cta{animation-delay:.48s}
.hero .stats .stat:nth-child(1){animation-delay:.3s}
.hero .stats .stat:nth-child(2){animation-delay:.4s}
.hero .stats .stat:nth-child(3){animation-delay:.5s}
.hero .stats .stat:nth-child(4){animation-delay:.6s}
.scrollcue{position:absolute;left:50%;bottom:26px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);color:#7fa0b5;font-family:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scrollcue .dot{width:3px;height:34px;border-radius:2px;background:linear-gradient(#7ED8D8,transparent);animation:heroCue 1.8s ease-in-out infinite}

@keyframes heroScan{0%{left:-2%}100%{left:102%}}
@keyframes heroBarPulse{0%,100%{transform:scaleY(.84)}50%{transform:scaleY(1.12)}}
@keyframes heroDraw{to{stroke-dashoffset:0}}
@keyframes heroCue{0%,100%{transform:scaleY(.5);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@keyframes heroEnter{to{opacity:1;transform:none}}

@media (min-width:901px){
  .hero{height:100dvh;min-height:100dvh;padding:calc(20px + var(--header-h)) 0 24px}
  .hero-grid{height:100%;align-items:center}
  .hero-grid > div:first-child{
    max-width:620px;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
  }
  .hero h1{margin:12px 0 18px;max-width:620px}
  .hero .sub{margin:0 0 18px;line-height:1.42}
  .hero .tags{margin:8px 0 0}
  .hero-cta{margin:18px 0 0}
}

@media (min-width:901px) and (max-height:820px){
  .hero{padding:calc(10px + var(--header-h)) 0 14px}
  .hero-grid > div:first-child{gap:10px;padding:4px 0}
  .hero h1{font-size:clamp(2rem,3.55vw,3.2rem);line-height:1.04;margin:10px 0 14px}
  .hero .sub{font-size:1.05rem;margin:0 0 14px;line-height:1.35}
  .hero .tags{margin:4px 0 8px}
  .hero-cta{margin:10px 0 0}
}

@media (min-width:981px){
  .crane-main,.crane-horizontal,.crane-right{display:none}
  .stats::after{content:"";position:absolute;top:-150px;left:-24px;width:clamp(280px,27vw,420px);height:46px;background:linear-gradient(rgba(0,160,166,.55),rgba(0,160,166,.55)) 100% 0 / 2px 46px no-repeat,linear-gradient(rgba(0,160,166,.55),rgba(0,160,166,.55)) 0 0 / 100% 2px no-repeat;pointer-events:none}
}

@media (max-width:980px){
  .hero{min-height:auto;height:auto;padding-top:calc(18px + var(--header-h));padding-bottom:32px}
  .hero-grid{grid-template-columns:1fr;gap:32px;min-height:auto}
  .hero-grid > div:first-child{max-width:none;display:flex;flex-direction:column;min-height:auto}
  .hero .tags{margin-bottom:22px;gap:8px}
  .tag{padding:6px 12px;font-size:.68rem}
  .hero h1{font-size:clamp(2.1rem,8.5vw,3.3rem);margin:12px 0 16px;line-height:1.02}
  .hero .sub{font-size:1rem;line-height:1.38;margin:0 0 18px}
  .hero-cta{margin-bottom:14px;gap:10px;display:grid;grid-template-columns:1fr 1fr}
  .hero-cta .btn{width:100%;min-height:42px;padding:11px 16px;font-size:.9rem}
  .stats{flex-direction:row;flex-wrap:wrap;border-left:none;border-top:2px solid rgba(0,160,166,.4);padding-left:0;padding-top:26px;gap:30px}
  .stats::before,.stats::after{display:none}
  .iso-circles{gap:8px}
  .iso-circle{width:52px;height:52px;font-size:11px}
  .stat .num{font-size:clamp(2rem,6.4vw,3rem)}
}

@media (max-height:760px){
  .hero{padding-top:calc(12px + var(--header-h));padding-bottom:24px}
  .hero .sub{margin-bottom:16px}
  .hero .tags{margin-bottom:18px}
}

@media (max-width:650px){
  .hero{padding-top:calc(12px + var(--header-h));padding-bottom:20px}
  .hero h1{font-size:clamp(2rem,11vw,2.95rem);line-height:1.03;margin:9px 0 14px}
  .hero .sub{font-size:.95rem;line-height:1.35;margin:0 0 16px}
  .hero .tags{gap:6px}
  .tag{font-size:.62rem;padding:6px 10px}
  .hero-cta .btn{padding:10px 12px;font-size:.83rem}
  .stats{gap:18px 22px}
  .iso-circle{width:48px;height:48px;font-size:10px}
  .stat .num{font-size:clamp(1.7rem,8vw,2.4rem)}
}

@media (max-width:430px){
  .hero{min-height:auto;height:auto}
  .hero-grid{min-height:auto}
  .hero h1{font-size:clamp(1.85rem,10.5vw,2.65rem);line-height:1.04;margin:9px 0 12px}
  .hero .sub{font-size:.9rem;line-height:1.32;margin:0 0 12px}
  .hero-cta{margin-bottom:10px;gap:8px}
  .hero-cta .btn{min-height:38px;padding:9px 10px;font-size:.78rem}
  .stats{gap:14px;padding-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .scan,.bar,.crane,.scrollcue .dot,.hero-grid > div:first-child > *,.hero .stats .stat{animation:none}
  .hero-grid > div:first-child > *,.hero .stats .stat{opacity:1;transform:none}
}

@media (max-width:520px){
  .wrap{padding:0 18px}
}