*{box-sizing:border-box}
.skip-link{position:fixed;left:14px;top:-60px;z-index:1000;background:#fff;color:#102640;padding:10px 14px;border:2px solid #ef5615;font-weight:bold}
.skip-link:focus{top:14px}
:focus-visible{outline:3px solid #ef5615;outline-offset:3px}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 Arial,Helvetica,sans-serif;color:#102640;background:white}
a{color:inherit}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 5%;border-bottom:1px solid #e3e9ef}
header img{width:185px;height:52px;object-fit:contain}
nav{display:flex;flex-wrap:wrap;gap:18px}
nav a{text-decoration:none;font-size:13px;font-weight:bold}
.top{background:#102640;color:white;padding:8px 5%;font-size:12px}
.wrap{max-width:1250px;margin:auto;padding:70px 5%}
.hero{background:#102640;color:white;display:grid;grid-template-columns:1.1fr 1fr;gap:55px;padding:75px 5%}
.hero h1{font-size:clamp(40px,5vw,68px);line-height:1.06;margin:20px 0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#ef5615;font-weight:bold}
.hero p{color:#c5d1de;max-width:550px}
.btn{display:inline-block;background:#ef5615;color:white;padding:13px 22px;text-decoration:none;font-weight:bold;border:0;border-radius:3px;margin:8px 8px 0 0}
.btn.secondary{background:transparent;border:1px solid #9fadb9}
.tiles,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.application-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.application-story{position:relative;min-height:380px;overflow:hidden;border-radius:5px;background:#102640;color:white}
.application-story img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block}
.application-story .overlay{position:absolute;inset:auto 0 0;padding:80px 28px 25px;background:linear-gradient(transparent,rgba(5,20,36,.92))}
.application-story h3{margin:5px 0}
.application-story p{margin:0;color:#d9e2ea}
.tiles{grid-template-columns:1fr 1fr;align-content:center}
.tile{background:#fff;color:#102640;padding:16px;text-decoration:none;border-radius:5px}
.tile img{width:100%;height:155px;object-fit:contain}
.tile span{display:block;font-weight:bold;font-size:13px}
.band{background:#f1f5f8}
.dark{background:#102640;color:white}
h2{font-size:36px;line-height:1.15;margin:12px 0 24px}
h3{line-height:1.25}
.lead{font-size:21px;max-width:800px}
.card{border:1px solid #dbe3eb;border-radius:5px;overflow:hidden;background:white;padding:25px}
.product{padding:0}
.product img{width:100%;height:240px;object-fit:contain;padding:20px;background:#fff}
.product .copy{padding:22px}
.product h3{margin:8px 0}
.small{font-size:13px;color:#607286}
.product details{font-size:14px;margin:15px 0}
.product summary{cursor:pointer;font-weight:bold}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.num{font-size:42px;color:#ef5615;font-weight:bold}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}
.filters button{padding:10px 15px;border:1px solid #bdcad6;background:white;color:#102640;cursor:pointer;border-radius:20px}
.filters button.active{background:#102640;color:white}
footer{background:#0a1b2e;color:#c6d0da;padding:40px 5%;font-size:13px}
footer a{margin-right:18px}
input,textarea,select{width:100%;padding:13px;border:1px solid #acbbc9;font:inherit;margin:6px 0 20px}
label{font-weight:bold;display:block}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.notice{border-left:4px solid #ef5615;padding:15px 22px;background:#f1f5f8}
.links a{display:block;padding:18px 0;border-bottom:1px solid #dbe3eb}
.pagehead{background:#102640;color:white;padding:65px 5%}
.pagehead h1{font-size:48px;line-height:1.1;margin:15px 0}
.hide{display:none!important}
@media(max-width:850px){header{display:block}
nav{margin-top:20px}
.hero{grid-template-columns:1fr;padding-top:45px}
.grid{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr}
.contact-grid{grid-template-columns:1fr}
.application-grid{grid-template-columns:1fr}
}
@media(max-width:550px){header{padding:16px 6%}
header img{width:165px;height:46px}
nav{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;gap:18px;scrollbar-width:thin}
nav a{white-space:nowrap}
.grid{grid-template-columns:1fr}
.wrap{padding:45px 6%}
.hero{gap:30px}
.pagehead h1{font-size:36px}
h2{font-size:30px}
.product img{height:220px}
.steps{grid-template-columns:1fr}
.tiles{gap:12px}
.tile img{height:120px}
.application-story,.application-story img{min-height:320px}
}




/* ==========================================
   STANDARD PRODUCT IMAGE DISPLAY
   SAME METHOD AS HERO PRODUCT IMAGES
   ========================================== */

/* Preserve the product cards */
.magnetic-products .card.product {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-width: 0;
    overflow: hidden;
}

/* Image placeholder */
.product-image-frame {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    background: #172b40;
}

/* Full image visibility */
.product-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: #172b40;
}

/* Preserve product descriptions and links */
.magnetic-products .product .copy {
    padding: 22px;
    flex: 1;
}




/* RiggerSafe - text-only card */
.rigger-text-only {
  display: flex;
  flex-direction: column;
}

.rigger-text-only .copy {
  padding-top: 0;
  margin-top: 0;
  flex: 1;
}

.rigger-text-only::before {
  display: none;
}


/* ==========================================
   RIGGERSAFE - IMAGE ABOVE TEXT CARD
   NO IMAGE PLACEHOLDER
========================================== */

.riggersafe-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  align-self: start;
}

/* Display original image naturally */

/* RiggerSafe - original image ratio, compact display */
.riggersafe-product > img.riggersafe-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  padding: 0;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* RiggerSafe - compact product-grid column */
.grid > .riggersafe-product {
  grid-column: auto / span 1;
  width: 100%;
  max-width: 350px;
  min-width: 0;
  align-self: start;
}


/* Keep border only around text */
.riggersafe-product > .rigger-text-only {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  background: white;
  border: 1px solid #dbe3eb;
  border-radius: 5px;
  overflow: hidden;
}

/* Preserve original text spacing */
.riggersafe-product > .rigger-text-only .copy {
  padding: 22px;
  margin: 0;
}

/* Maintain category filtering */
.riggersafe-product.hide {
  display: none !important;
}

/* RiggerSafe image - preserve original aspect ratio */
.grid > .riggersafe-product > img.riggersafe-image {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin: 0 auto;
  padding: 0;
}

/* Text card follows the image width */



/* ==========================================
   IDENTICAL PRODUCT TEXT CARDS
   ========================================== */


.grid > .riggersafe-product > article.rigger-text-only {
  box-sizing: border-box;
  width: 100%;
  max-width: 350px;
  height: 220px;
  min-height: 220px;
  flex: 0 0 220px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.grid > .riggersafe-product > article.rigger-text-only > .copy {
  padding: 22px;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid > .riggersafe-product > article.rigger-text-only > .copy > a {
  margin-top: auto;
}

/* Expand the card when Application guidance is opened */
.grid > .riggersafe-product > article.rigger-text-only:has(details[open]) {
  height: auto;
  min-height: 220px;
}



/* HSF LoadGrab - match RiggerSafe portrait image size */
.grid > .riggersafe-product > img.loadgrab-image {
  width: 280px;
  max-width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
}


/* Cargo Handling Tool - match RiggerSafe text card */

.grid > .riggersafe-product > article#tool-8689092002037 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  height: 220px;
  min-height: 220px;
  flex: 0 0 220px;
  margin: 0;
  padding: 0;
  border: 1px solid #dbe3eb;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.grid > .riggersafe-product > article#tool-8689092002037 > .copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
  margin: 0;
}

.grid > .riggersafe-product > article#tool-8689092002037 > .copy > a {
  margin-top: auto;
}

/* Expand when application guidance is opened */
.grid > .riggersafe-product > article#tool-8689092002037:has(details[open]) {
  height: auto;
  min-height: 220px;
  flex-basis: auto;
}
