/* =========================================================
   HEDA SHELVES
   WAREHOUSE WIDE SPAN SHELVING STORAGE RACKS
   MODEL WSSSR01

   DESIGN: WAREHOUSE PICKING / MODULAR LONGSPAN STORAGE
   IMAGE: VERIFIED ORIGINAL HEDA PRODUCT PHOTOGRAPH
   CTA: OFFICIAL GET QUOTE NOW NATIVE POPUP

   Complete Responsive HTML + CSS
   All styles scoped to .heda-wss01
========================================================= */

.heda-wss01{
  --ws-navy:#183244;
  --ws-deep:#102b3c;
  --ws-blue:#27658f;
  --ws-orange:#e98332;
  --ws-text:#536a79;
  --ws-muted:#738995;
  --ws-line:#dce6eb;
  --ws-soft:#f3f7f9;
  --ws-ice:#eaf2f6;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:var(--ws-text);
  font:15px/1.85 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.heda-wss01,
.heda-wss01 *{
  box-sizing:border-box;
}

.heda-wss01 h2,
.heda-wss01 h3,
.heda-wss01 h4,
.heda-wss01 p,
.heda-wss01 figure,
.heda-wss01 ul{
  margin:0;
}

.heda-wss01 img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:0;
}

.heda-wss01 a{
  text-decoration:none;
}

.heda-wss01 .ws-wrap{
  width:calc(100% - 44px);
  max-width:1180px;
  margin:0 auto;
}

.heda-wss01 .ws-section{
  padding:82px 0;
}

.heda-wss01 .ws-soft{
  background:var(--ws-soft);
}

.heda-wss01 .ws-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  color:var(--ws-blue);
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.heda-wss01 .ws-kicker:before{
  content:"";
  display:block;
  width:27px;
  height:2px;
  flex:0 0 27px;
  background:var(--ws-orange);
}

.heda-wss01 .ws-heading{
  color:var(--ws-navy);
  font-size:clamp(29px,3.4vw,42px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.9px;
}

.heda-wss01 .ws-lead{
  margin-top:18px;
  max-width:770px;
  color:var(--ws-text);
  font-size:15px;
  line-height:1.95;
}

.heda-wss01 .ws-head{
  max-width:820px;
  margin-bottom:37px;
}

.heda-wss01 .ws-caption{
  color:var(--ws-muted);
  font-size:12px;
  line-height:1.85;
}

/* =========================================================
   01 HERO - WAREHOUSE INSTALLATION
========================================================= */

.heda-wss01 .ws-hero{
  background:var(--ws-deep);
}

.heda-wss01 .ws-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:19px 0;
  border-bottom:1px solid rgba(255,255,255,.19);
}

.heda-wss01 .ws-meta span,
.heda-wss01 .ws-meta strong{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  line-height:1.6;
}

.heda-wss01 .ws-meta span{
  color:#c4dbe8;
}

.heda-wss01 .ws-meta strong{
  color:#ffc391;
}

.heda-wss01 .ws-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);
  align-items:center;
  gap:47px;
  padding:48px 0 55px;
}

.heda-wss01 .ws-hero-copy{
  min-width:0;
}

.heda-wss01 .ws-hero-label{
  display:block;
  margin-bottom:20px;
  color:#f6b17d;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.heda-wss01 .ws-hero h2{
  color:#fff;
  font-size:clamp(36px,4.6vw,58px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-1.5px;
}

.heda-wss01 .ws-hero h2 span{
  display:block;
  color:#f1a76f;
}

.heda-wss01 .ws-hero-description{
  max-width:500px;
  margin-top:25px;
  color:#cddde6;
  font-size:15px;
  line-height:1.95;
}

.heda-wss01 .ws-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.heda-wss01 .ws-hero-tags span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);
  color:#e8f1f5;
  font-size:11px;
  font-weight:700;
  line-height:1.5;
}

.heda-wss01 .ws-hero-visual{
  min-width:0;
}

.heda-wss01 .ws-photo-frame{
  padding:10px;
  background:#fff;
  border-radius:3px;
}

.heda-wss01 .ws-photo-frame img{
  width:100%;
  max-height:610px;
  object-fit:contain;
}

.heda-wss01 .ws-photo-caption{
  margin-top:15px;
  color:#c2d4dd;
  font-size:12px;
  line-height:1.85;
}

/* =========================================================
   02 PRODUCT IDENTITY
========================================================= */

.heda-wss01 .ws-identity{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--ws-line);
  border-top:0;
  background:#fff;
}

.heda-wss01 .ws-identity-item{
  min-width:0;
  padding:28px 27px;
}

.heda-wss01 .ws-identity-item+.ws-identity-item{
  border-left:1px solid var(--ws-line);
}

.heda-wss01 .ws-identity-item strong{
  display:block;
  color:var(--ws-navy);
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.heda-wss01 .ws-identity-item span{
  display:block;
  margin-top:8px;
  color:var(--ws-muted);
  font-size:12px;
  line-height:1.85;
}

/* =========================================================
   03 PICKING WORKFLOW
========================================================= */

.heda-wss01 .ws-workflow-intro{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:54px;
  align-items:end;
  margin-bottom:36px;
}

.heda-wss01 .ws-workflow-intro p{
  color:var(--ws-muted);
  font-size:15px;
  line-height:1.95;
}

.heda-wss01 .ws-workflow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.heda-wss01 .ws-workstep{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:30px 27px 33px;
  border:1px solid var(--ws-line);
  border-top:3px solid var(--ws-orange);
  background:#fff;
}

.heda-wss01 .ws-workstep:nth-child(2){
  border-top-color:var(--ws-blue);
}

.heda-wss01 .ws-workstep-index{
  display:block;
  margin-bottom:27px;
  color:#a1b0b9;
  font-size:29px;
  font-weight:800;
  line-height:1;
}

.heda-wss01 .ws-workstep h3{
  margin-bottom:12px;
  color:var(--ws-navy);
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.heda-wss01 .ws-workstep p{
  color:var(--ws-muted);
  font-size:14px;
  line-height:1.95;
}

.heda-wss01 .ws-workflow-note{
  margin-top:24px;
  padding:19px 23px;
  border-left:3px solid var(--ws-orange);
  background:#e7eef3;
  color:#536b7c;
  font-size:13px;
  line-height:1.9;
}

/* =========================================================
   04 COMPONENTS
========================================================= */

.heda-wss01 .ws-components-layout{
  display:grid;
  grid-template-columns:minmax(0,.73fr) minmax(0,1.27fr);
  gap:55px;
  align-items:start;
}

.heda-wss01 .ws-components-copy{
  min-width:0;
}

.heda-wss01 .ws-components-note{
  margin-top:25px;
  padding:20px 22px;
  border-left:3px solid var(--ws-orange);
  background:#e4ecf1;
  color:#526b7c;
  font-size:13px;
  line-height:1.9;
}

.heda-wss01 .ws-components-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.heda-wss01 .ws-component{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:236px;
  padding:27px 25px;
  border:1px solid var(--ws-line);
  background:#fff;
}

.heda-wss01 .ws-component-number{
  display:block;
  margin-bottom:25px;
  color:var(--ws-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1.1px;
}

.heda-wss01 .ws-component h3{
  color:var(--ws-navy);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.heda-wss01 .ws-component p{
  margin-top:10px;
  color:var(--ws-muted);
  font-size:13px;
  line-height:1.9;
}

/* =========================================================
   05 MODULAR STORAGE OPTIONS
========================================================= */

.heda-wss01 .ws-modular{
  padding:77px 0;
  background:var(--ws-deep);
}

.heda-wss01 .ws-modular .ws-kicker{
  color:#bdd8e8;
}

.heda-wss01 .ws-modular .ws-heading{
  color:#fff;
}

.heda-wss01 .ws-modular .ws-lead{
  color:#c8dce7;
}

.heda-wss01 .ws-modular-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.heda-wss01 .ws-modular-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:32px 31px;
  border:1px solid rgba(255,255,255,.2);
  border-top:4px solid var(--ws-orange);
  background:#1c3a50;
}

.heda-wss01 .ws-modular-card:nth-child(2){
  border-top-color:#87b8d8;
}

.heda-wss01 .ws-modular-label{
  display:block;
  margin-bottom:21px;
  color:#fac096;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.heda-wss01 .ws-modular-card h3{
  color:#fff;
  font-size:23px;
  font-weight:800;
  line-height:1.35;
}

.heda-wss01 .ws-modular-card p{
  margin-top:14px;
  color:#c9dae5;
  font-size:14px;
  line-height:1.9;
}

.heda-wss01 .ws-module-points{
  margin-top:23px;
  border-top:1px solid rgba(255,255,255,.17);
}

.heda-wss01 .ws-module-point{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.17);
  color:#d8e5ec;
  font-size:13px;
  line-height:1.85;
}

/* =========================================================
   06 STRUCTURAL CONFIGURATION
========================================================= */

.heda-wss01 .ws-configuration{
  border-top:1px solid var(--ws-line);
}

.heda-wss01 .ws-config-row{
  display:grid;
  grid-template-columns:62px minmax(0,.55fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:26px 4px;
  border-bottom:1px solid var(--ws-line);
}

.heda-wss01 .ws-config-no{
  color:var(--ws-orange);
  font-size:12px;
  font-weight:800;
}

.heda-wss01 .ws-config-row h3{
  color:var(--ws-navy);
  font-size:19px;
  font-weight:800;
  line-height:1.45;
}

.heda-wss01 .ws-config-row p{
  color:var(--ws-muted);
  font-size:14px;
  line-height:1.9;
}

/* =========================================================
   07 TECHNICAL SPECIFICATIONS
========================================================= */

.heda-wss01 .ws-spec-layout{
  display:grid;
  grid-template-columns:minmax(0,.79fr) minmax(0,1.21fr);
  gap:52px;
  align-items:start;
}

.heda-wss01 .ws-spec-copy{
  min-width:0;
}

.heda-wss01 .ws-spec-warning{
  margin-top:27px;
  padding:20px 22px;
  border-left:3px solid var(--ws-orange);
  background:#e5edf2;
  color:#546e80;
  font-size:13px;
  line-height:1.95;
}

.heda-wss01 .ws-spec-table{
  min-width:0;
  padding:29px 33px;
  border:1px solid var(--ws-line);
  background:#fff;
}

.heda-wss01 .ws-spec-table h3{
  margin-bottom:20px;
  color:var(--ws-navy);
  font-size:21px;
  font-weight:800;
  line-height:1.4;
}

.heda-wss01 .ws-spec-row{
  display:grid;
  grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  gap:17px;
  padding:12px 0;
  border-bottom:1px solid var(--ws-line);
}

.heda-wss01 .ws-spec-row:last-child{
  border-bottom:0;
}

.heda-wss01 .ws-spec-name{
  color:#667c8b;
  font-size:13px;
  font-weight:700;
  line-height:1.85;
}

.heda-wss01 .ws-spec-value{
  min-width:0;
  color:var(--ws-navy);
  font-size:13px;
  line-height:1.85;
}

/* =========================================================
   08 APPLICATIONS
========================================================= */

.heda-wss01 .ws-applications{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.heda-wss01 .ws-application{
  min-width:0;
  padding:27px 0 12px;
  border-top:3px solid #c5d7e2;
}

.heda-wss01 .ws-application span{
  display:block;
  margin-bottom:18px;
  color:var(--ws-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-wss01 .ws-application h3{
  color:var(--ws-navy);
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.heda-wss01 .ws-application p{
  margin-top:12px;
  color:var(--ws-muted);
  font-size:14px;
  line-height:1.9;
}

/* =========================================================
   09 PROJECT PLANNING
========================================================= */

.heda-wss01 .ws-plan{
  display:grid;
  grid-template-columns:minmax(0,.79fr) minmax(0,1.21fr);
  gap:54px;
  align-items:start;
}

.heda-wss01 .ws-plan-note{
  margin-top:25px;
  padding:19px 22px;
  border-left:3px solid var(--ws-orange);
  background:#e5edf2;
  color:#526b7b;
  font-size:13px;
  line-height:1.95;
}

.heda-wss01 .ws-plan-panel{
  min-width:0;
  padding:30px 33px;
  border:1px solid var(--ws-line);
  background:#fff;
}

.heda-wss01 .ws-plan-panel h3{
  margin-bottom:20px;
  color:var(--ws-navy);
  font-size:21px;
  font-weight:800;
  line-height:1.45;
}

.heda-wss01 .ws-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
}

.heda-wss01 .ws-check{
  position:relative;
  padding:12px 0 12px 22px;
  border-bottom:1px solid var(--ws-line);
  color:#526b7b;
  font-size:13px;
  line-height:1.85;
}

.heda-wss01 .ws-check:before{
  content:"";
  position:absolute;
  top:22px;
  left:2px;
  width:8px;
  height:8px;
  background:var(--ws-orange);
}

.heda-wss01 .ws-plan-foot{
  margin-top:19px;
  color:var(--ws-muted);
  font-size:12px;
  line-height:1.85;
}

/* =========================================================
   10 FAQ
========================================================= */

.heda-wss01 .ws-faq{
  border-top:1px solid var(--ws-line);
}

.heda-wss01 .ws-faq-item{
  display:grid;
  grid-template-columns:minmax(0,.41fr) minmax(0,.59fr);
  gap:38px;
  padding:24px 0;
  border-bottom:1px solid var(--ws-line);
}

.heda-wss01 .ws-faq-item h3{
  color:var(--ws-navy);
  font-size:16px;
  font-weight:800;
  line-height:1.65;
}

.heda-wss01 .ws-faq-item p{
  color:var(--ws-muted);
  font-size:14px;
  line-height:1.95;
}

/* =========================================================
   11 NATIVE INQUIRY CTA
========================================================= */

.heda-wss01 .ws-cta-section{
  padding:42px 0 68px;
}

.heda-wss01 .ws-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:42px;
  align-items:center;
  padding:49px 51px;
  border-top:4px solid var(--ws-orange);
  background:var(--ws-deep);
}

.heda-wss01 .ws-cta-copy{
  min-width:0;
  max-width:690px;
}

.heda-wss01 .ws-cta-label{
  display:block;
  margin-bottom:14px;
  color:#bdd8e6;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.heda-wss01 .ws-cta h2{
  color:#fff;
  font-size:clamp(27px,3vw,36px);
  font-weight:800;
  line-height:1.3;
}

.heda-wss01 .ws-cta p{
  margin-top:15px;
  color:#cbdce6;
  font-size:14px;
  line-height:1.95;
}

/* Official native popup trigger attributes retained. */

.heda-wss01 a.ws01-quote{
  position:relative;
  z-index:2;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto;
  width:auto !important;
  height:auto !important;
  min-width:190px;
  min-height:54px;
  margin:0 !important;
  padding:16px 27px !important;
  border:0 !important;
  border-radius:3px !important;
  background:#e98332 !important;
  background-image:none !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap;
  cursor:pointer;
  opacity:1 !important;
  visibility:visible !important;
  box-shadow:none !important;
  transition:background-color .2s ease;
}

.heda-wss01 a.ws01-quote:hover{
  background:#c76a24 !important;
  color:#fff !important;
  text-decoration:none !important;
}

.heda-wss01 a.ws01-quote:visited{
  color:#fff !important;
}

.heda-wss01 a.ws01-quote:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* =========================================================
   RESPONSIVE / TABLET
========================================================= */

@media(max-width:1050px){

  .heda-wss01 .ws-hero-layout,
  .heda-wss01 .ws-workflow-intro,
  .heda-wss01 .ws-components-layout,
  .heda-wss01 .ws-spec-layout,
  .heda-wss01 .ws-plan{
    gap:32px;
  }

  .heda-wss01 .ws-hero h2{
    font-size:45px;
  }

  .heda-wss01 .ws-cta{
    padding:41px 36px;
  }
}

/* =========================================================
   RESPONSIVE / MOBILE
========================================================= */

@media(max-width:768px){

  .heda-wss01 .ws-wrap{
    width:calc(100% - 32px);
  }

  .heda-wss01 .ws-section{
    padding:58px 0;
  }

  .heda-wss01 .ws-heading{
    font-size:31px;
  }

  .heda-wss01 .ws-head{
    margin-bottom:27px;
  }

  .heda-wss01 .ws-hero-layout,
  .heda-wss01 .ws-workflow-intro,
  .heda-wss01 .ws-components-layout,
  .heda-wss01 .ws-spec-layout,
  .heda-wss01 .ws-plan{
    grid-template-columns:1fr;
  }

  .heda-wss01 .ws-hero-layout{
    gap:28px;
    padding:37px 0 45px;
  }

  .heda-wss01 .ws-hero h2{
    font-size:40px;
  }

  .heda-wss01 .ws-identity{
    grid-template-columns:1fr;
  }

  .heda-wss01 .ws-identity-item{
    padding:21px 25px;
  }

  .heda-wss01 .ws-identity-item+
  .ws-identity-item{
    border-left:0;
    border-top:1px solid var(--ws-line);
  }

  .heda-wss01 .ws-workflow-intro{
    gap:16px;
    margin-bottom:27px;
  }

  .heda-wss01 .ws-workflow{
    grid-template-columns:1fr;
    gap:15px;
  }

  .heda-wss01 .ws-workstep{
    padding:26px;
  }

  .heda-wss01 .ws-workstep-index{
    margin-bottom:13px;
  }

  .heda-wss01 .ws-components-layout{
    gap:27px;
  }

  .heda-wss01 .ws-modular{
    padding:59px 0;
  }

  .heda-wss01 .ws-modular-grid{
    grid-template-columns:1fr;
    gap:17px;
  }

  .heda-wss01 .ws-config-row{
    grid-template-columns:45px minmax(0,1fr);
    gap:9px 15px;
  }

  .heda-wss01 .ws-config-row p{
    grid-column:2;
  }

  .heda-wss01 .ws-spec-layout,
  .heda-wss01 .ws-plan{
    gap:27px;
  }

  .heda-wss01 .ws-spec-table,
  .heda-wss01 .ws-plan-panel{
    padding:25px;
  }

  .heda-wss01 .ws-applications{
    grid-template-columns:1fr;
    gap:15px;
  }

  .heda-wss01 .ws-application{
    padding:23px 0;
  }

  .heda-wss01 .ws-application span{
    margin-bottom:11px;
  }

  .heda-wss01 .ws-faq-item{
    grid-template-columns:1fr;
    gap:8px;
  }

  .heda-wss01 .ws-cta{
    grid-template-columns:1fr;
    gap:25px;
    padding:37px 28px;
  }

  .heda-wss01 a.ws01-quote{
    justify-self:start;
  }
}

/* =========================================================
   RESPONSIVE / SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .heda-wss01 .ws-wrap{
    width:calc(100% - 26px);
  }

  .heda-wss01 .ws-hero h2{
    font-size:33px;
  }

  .heda-wss01 .ws-hero-description{
    font-size:14px;
  }

  .heda-wss01 .ws-photo-frame{
    padding:6px;
  }

  .heda-wss01 .ws-components-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .heda-wss01 .ws-component{
    min-height:0;
    padding:24px;
  }

  .heda-wss01 .ws-component-number{
    margin-bottom:13px;
  }

  .heda-wss01 .ws-modular-card{
    padding:27px 23px;
  }

  .heda-wss01 .ws-spec-row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .heda-wss01 .ws-spec-table,
  .heda-wss01 .ws-plan-panel{
    padding:22px;
  }

  .heda-wss01 .ws-check-grid{
    grid-template-columns:1fr;
  }

  .heda-wss01 .ws-cta{
    padding:32px 22px;
  }

  .heda-wss01 a.ws01-quote{
    width:100% !important;
    min-width:0;
    white-space:normal;
  }
}