
/* ==========================================================
   HEDA SHELVES | PRODUCT NO.00309
   WAREHOUSE DRIVE-IN RACKING SYSTEM

   DESIGN:
   High-Density Pallet Lane Engineering

   VERIFIED OFFICIAL PRODUCT IMAGES:

   44943b3b20.jpg - Real loaded warehouse installation
   0bcd085b7c.jpg - Rail and upright connection
   5954e3dfd2.jpg - Upper structural bracing detail
   60dac2213b.jpg - Pallet rail support bracket

   OFFICIAL DESCRIPTION DIAGRAM:
   f096205ed2.jpg - Drive-in component schematic

   All four main SKU photos used once.
   The technical schematic is identified as
   an illustration, not the installed configuration.

   No invented capacities or dimensions.
   No unrelated product images.
   No custom JS or external dependencies.

   Native HEDA inquiry popup.
   CSS root: .heda-di309
========================================================== */

.heda-di309{
  --di-navy:#192d40;
  --di-dark:#122332;
  --di-blue:#2b5f86;
  --di-orange:#e47b2b;
  --di-ink:#243747;
  --di-text:#536877;
  --di-muted:#7b8c97;
  --di-line:#dce5ea;
  --di-light:#f3f7f9;
  --di-warm:#faf8f4;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  color:var(--di-text);
  background:#fff;
  font:15px/1.82 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.heda-di309,
.heda-di309 *{
  box-sizing:border-box;
}

.heda-di309 h2,
.heda-di309 h3,
.heda-di309 h4,
.heda-di309 p,
.heda-di309 figure,
.heda-di309 ul{
  margin:0;
}

.heda-di309 img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:0;
}

.heda-di309 a{
  text-decoration:none;
}

.heda-di309 .di-wrap{
  width:calc(100% - 44px);
  max-width:1180px;
  margin:0 auto;
}

.heda-di309 .di-section{
  padding:76px 0;
}

.heda-di309 .di-light{
  background:var(--di-light);
}

.heda-di309 .di-warm{
  background:var(--di-warm);
}

.heda-di309 .di-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:17px;
  color:var(--di-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  line-height:1.5;
  text-transform:uppercase;
}

.heda-di309 .di-kicker:before{
  content:"";
  flex:0 0 26px;
  width:26px;
  height:2px;
  background:var(--di-orange);
}

.heda-di309 .di-title{
  color:var(--di-ink);
  font-size:clamp(29px,3.5vw,43px);
  font-weight:800;
  letter-spacing:-.9px;
  line-height:1.23;
}

.heda-di309 .di-lead{
  max-width:850px;
  margin-top:18px;
  line-height:1.95;
}

.heda-di309 .di-heading{
  max-width:880px;
  margin-bottom:36px;
}

.heda-di309 .di-caption{
  margin-top:11px;
  color:var(--di-muted);
  font-size:12px;
  line-height:1.85;
}

.heda-di309 .di-note{
  padding:20px 23px;
  border-left:3px solid var(--di-orange);
  background:#e7eef2;
  color:var(--di-text);
  font-size:13px;
  line-height:1.95;
}

.heda-di309 .di-note strong{
  color:var(--di-ink);
}

/* ==========================================================
   01 / WAREHOUSE HERO
========================================================== */

.heda-di309 .di-hero{
  background:var(--di-dark);
}

.heda-di309 .di-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.17);
}

.heda-di309 .di-topbar span,
.heda-di309 .di-topbar strong{
  font-size:11px;
  font-weight:800;
  line-height:1.6;
  letter-spacing:1.2px;
}

.heda-di309 .di-topbar span{
  color:#c8dbe7;
}

.heda-di309 .di-topbar strong{
  color:#f1af79;
}

.heda-di309 .di-hero-intro{
  max-width:1050px;
  padding:54px 0 37px;
}

.heda-di309 .di-hero-label{
  display:block;
  margin-bottom:18px;
  color:#f2b487;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.heda-di309 .di-hero h2{
  max-width:1040px;
  color:#fff;
  font-size:clamp(40px,5vw,63px);
  font-weight:800;
  line-height:1.13;
  letter-spacing:-1.7px;
}

.heda-di309 .di-hero h2 span{
  color:#f0a56d;
}

.heda-di309 .di-hero-content{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:stretch;
  padding-bottom:55px;
}

.heda-di309 .di-hero-photo{
  min-width:0;
  padding:14px;
  background:#fff;
}

.heda-di309 .di-hero-photo img{
  max-height:650px;
  margin:0 auto;
  object-fit:contain;
}

.heda-di309 .di-hero-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:35px 31px;
  background:#254359;
}

.heda-di309 .di-hero-side>p{
  color:#d8e5ed;
  font-size:14px;
  line-height:1.95;
}

.heda-di309 .di-hero-tags{
  display:grid;
  grid-template-columns:1fr;
  margin-top:24px;
  border-top:1px solid rgba(255,255,255,.2);
}

.heda-di309 .di-hero-tag{
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
}

.heda-di309 .di-hero-tag strong{
  display:block;
  color:#f4b17f;
  font-size:12px;
  font-weight:800;
}

.heda-di309 .di-hero-tag span{
  display:block;
  margin-top:5px;
  color:#d2e2eb;
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   02 / QUICK FACTS
========================================================== */

.heda-di309 .di-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--di-line);
  border-top:0;
}

.heda-di309 .di-fact{
  min-width:0;
  padding:26px 22px;
}

.heda-di309 .di-fact+.di-fact{
  border-left:1px solid var(--di-line);
}

.heda-di309 .di-fact strong{
  display:block;
  color:var(--di-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.heda-di309 .di-fact span{
  display:block;
  margin-top:9px;
  color:var(--di-muted);
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   03 / STORAGE BENEFITS
========================================================== */

.heda-di309 .di-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.heda-di309 .di-benefit{
  min-width:0;
  padding:31px 28px;
  background:#fff;
  border:1px solid var(--di-line);
  border-top:3px solid var(--di-blue);
}

.heda-di309 .di-benefit:nth-child(2){
  border-top-color:var(--di-orange);
}

.heda-di309 .di-benefit-code{
  display:block;
  margin-bottom:20px;
  color:#b76c37;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.3px;
}

.heda-di309 .di-benefit h3{
  color:var(--di-ink);
  font-size:21px;
  font-weight:800;
  line-height:1.4;
}

.heda-di309 .di-benefit p{
  margin-top:13px;
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   04 / OPERATING SEQUENCE
========================================================== */

.heda-di309 .di-process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-process-step{
  position:relative;
  min-width:0;
  padding:30px 24px;
}

.heda-di309 .di-process-step+
.di-process-step{
  border-left:1px solid var(--di-line);
}

.heda-di309 .di-process-number{
  display:block;
  margin-bottom:23px;
  color:var(--di-orange);
  font-size:31px;
  font-weight:800;
  line-height:1;
}

.heda-di309 .di-process h3{
  color:var(--di-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.45;
}

.heda-di309 .di-process p{
  margin-top:11px;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   05 / DRIVE-IN VS DRIVE-THROUGH
========================================================== */

.heda-di309 .di-rotation{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.heda-di309 .di-rotation-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:33px;
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-rotation-card:first-child{
  border-top:4px solid var(--di-orange);
}

.heda-di309 .di-rotation-card:last-child{
  border-top:4px solid var(--di-blue);
}

.heda-di309 .di-rotation-label{
  display:block;
  margin-bottom:18px;
  color:#a65f31;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-di309 .di-rotation-card h3{
  color:var(--di-ink);
  font-size:27px;
  font-weight:800;
  line-height:1.35;
}

.heda-di309 .di-rotation-card>p{
  margin-top:15px;
  font-size:14px;
  line-height:1.95;
}

.heda-di309 .di-rotation-graphic{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:25px;
  padding:20px;
  background:var(--di-light);
}

.heda-di309 .di-rotation-graphic span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:44px;
  padding:0 7px;
  border:1px solid #aec3d0;
  background:#dbe7ee;
  color:var(--di-ink);
  font-size:12px;
  font-weight:800;
}

.heda-di309 .di-rotation-graphic strong{
  color:var(--di-orange);
  font-size:12px;
  font-weight:800;
}

.heda-di309 .di-rotation-foot{
  margin-top:auto;
  padding-top:18px;
  color:var(--di-muted);
  font-size:12px;
  line-height:1.9;
}

/* ==========================================================
   06 / STRUCTURAL PHOTO LAYOUT
========================================================== */

.heda-di309 .di-detail-split{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:stretch;
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-detail-split.reverse{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
}

.heda-di309 .di-detail-photo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:15px;
  background:#f8fafb;
}

.heda-di309 .di-detail-photo img{
  max-height:630px;
  margin:0 auto;
  object-fit:contain;
}

.heda-di309 .di-detail-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:37px;
}

.heda-di309 .di-detail-split>
.di-detail-copy:nth-child(2){
  border-left:1px solid var(--di-line);
}

.heda-di309 .di-detail-split>
.di-detail-photo:nth-child(2){
  border-left:1px solid var(--di-line);
}

.heda-di309 .di-detail-copy .di-title{
  font-size:clamp(27px,3vw,36px);
}

.heda-di309 .di-detail-points{
  margin-top:22px;
  border-top:1px solid var(--di-line);
}

.heda-di309 .di-detail-point{
  padding:13px 0;
  border-bottom:1px solid var(--di-line);
}

.heda-di309 .di-detail-point strong{
  display:block;
  color:var(--di-ink);
  font-size:15px;
  font-weight:800;
}

.heda-di309 .di-detail-point p{
  margin-top:5px;
  font-size:13px;
  line-height:1.9;
}

/* ==========================================================
   07 / CONNECTION PHOTO CARD
========================================================== */

.heda-di309 .di-connection{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:stretch;
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-connection-photo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:15px;
  background:#f8fafb;
}

.heda-di309 .di-connection-photo img{
  max-height:640px;
  margin:0 auto;
  object-fit:contain;
}

.heda-di309 .di-connection-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:37px;
  border-left:1px solid var(--di-line);
}

/* ==========================================================
   08 / TECHNICAL DIAGRAM
========================================================== */

.heda-di309 .di-diagram{
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-diagram-media{
  padding:20px;
  background:#f9fbfc;
}

.heda-di309 .di-diagram-media img{
  max-height:660px;
  margin:0 auto;
  object-fit:contain;
}

.heda-di309 .di-diagram-info{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--di-line);
}

.heda-di309 .di-diagram-item{
  padding:25px;
}

.heda-di309 .di-diagram-item+
.di-diagram-item{
  border-left:1px solid var(--di-line);
}

.heda-di309 .di-diagram-item h3{
  color:var(--di-ink);
  font-size:17px;
  font-weight:800;
  line-height:1.45;
}

.heda-di309 .di-diagram-item p{
  margin-top:9px;
  font-size:13px;
  line-height:1.9;
}

/* ==========================================================
   09 / ENGINEERING
========================================================== */

.heda-di309 .di-engineering{
  padding:76px 0;
  background:var(--di-dark);
}

.heda-di309 .di-engineering .di-title{
  color:#fff;
}

.heda-di309 .di-engineering .di-kicker{
  color:#cbdce7;
}

.heda-di309 .di-engineering .di-lead{
  color:#d0e0e9;
}

.heda-di309 .di-engineering-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.2);
}

.heda-di309 .di-engineering-card{
  min-width:0;
  padding:29px 23px;
  background:#29475e;
}

.heda-di309 .di-engineering-card span{
  display:block;
  margin-bottom:19px;
  color:#f0ae79;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.heda-di309 .di-engineering-card h3{
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1.45;
}

.heda-di309 .di-engineering-card p{
  margin-top:11px;
  color:#d4e2ea;
  font-size:13px;
  line-height:1.95;
}

.heda-di309 .di-dark-note{
  margin-top:23px;
  padding:21px 25px;
  border-left:3px solid var(--di-orange);
  background:rgba(255,255,255,.08);
  color:#dbe6ec;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   10 / WAREHOUSE APPLICATIONS
========================================================== */

.heda-di309 .di-applications{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.heda-di309 .di-app{
  min-width:0;
  padding:27px 3px 12px;
  border-top:3px solid var(--di-blue);
}

.heda-di309 .di-app:nth-child(2){
  border-top-color:var(--di-orange);
}

.heda-di309 .di-app span{
  display:block;
  margin-bottom:14px;
  color:#b96933;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-di309 .di-app h3{
  color:var(--di-ink);
  font-size:20px;
  font-weight:800;
  line-height:1.45;
}

.heda-di309 .di-app p{
  margin-top:12px;
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   11 / SPECIFICATION
========================================================== */

.heda-di309 .di-spec{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:43px;
  align-items:start;
}

.heda-di309 .di-spec-box{
  min-width:0;
  padding:29px 31px;
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-spec-box h3{
  margin-bottom:18px;
  color:var(--di-ink);
  font-size:21px;
  font-weight:800;
}

.heda-di309 .di-spec-row{
  display:grid;
  grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid var(--di-line);
}

.heda-di309 .di-spec-row:last-child{
  border-bottom:0;
}

.heda-di309 .di-spec-row strong{
  color:#748592;
  font-size:13px;
  line-height:1.85;
}

.heda-di309 .di-spec-row span{
  min-width:0;
  color:var(--di-ink);
  font-size:13px;
  line-height:1.85;
}

/* ==========================================================
   12 / PROJECT PLANNING
========================================================== */

.heda-di309 .di-planning{
  border-top:1px solid var(--di-line);
}

.heda-di309 .di-plan-row{
  display:grid;
  grid-template-columns:44px minmax(0,.35fr) minmax(0,.65fr);
  gap:18px;
  padding:23px 2px;
  border-bottom:1px solid var(--di-line);
}

.heda-di309 .di-plan-row>span{
  color:var(--di-orange);
  font-size:12px;
  font-weight:800;
}

.heda-di309 .di-plan-row h3{
  color:var(--di-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.5;
}

.heda-di309 .di-plan-row p{
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   13 / RFQ
========================================================== */

.heda-di309 .di-rfq{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:42px;
  align-items:start;
}

.heda-di309 .di-rfq-box{
  min-width:0;
  padding:29px 31px;
  border:1px solid var(--di-line);
  background:#fff;
}

.heda-di309 .di-rfq-box h3{
  margin-bottom:17px;
  color:var(--di-ink);
  font-size:21px;
  font-weight:800;
}

.heda-di309 .di-rfq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 18px;
}

.heda-di309 .di-rfq-item{
  position:relative;
  padding:11px 0 11px 20px;
  border-bottom:1px solid var(--di-line);
  font-size:13px;
  line-height:1.9;
}

.heda-di309 .di-rfq-item:before{
  content:"";
  position:absolute;
  left:2px;
  top:20px;
  width:7px;
  height:7px;
  background:var(--di-orange);
}

/* ==========================================================
   14 / FAQ
========================================================== */

.heda-di309 .di-faq{
  border-top:1px solid var(--di-line);
}

.heda-di309 .di-faq-row{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:31px;
  padding:23px 0;
  border-bottom:1px solid var(--di-line);
}

.heda-di309 .di-faq-row h3{
  color:var(--di-ink);
  font-size:16px;
  font-weight:800;
  line-height:1.65;
}

.heda-di309 .di-faq-row p{
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   15 / OFFICIAL INQUIRY
========================================================== */

.heda-di309 .di-cta-section{
  padding:40px 0 72px;
}

.heda-di309 .di-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:34px;
  align-items:center;
  padding:44px 45px;
  background:var(--di-navy);
  border-left:5px solid var(--di-orange);
}

.heda-di309 .di-cta-label{
  display:block;
  margin-bottom:13px;
  color:#c8dce8;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-di309 .di-cta h2{
  color:#fff;
  font-size:clamp(26px,3vw,36px);
  font-weight:800;
  line-height:1.3;
}

.heda-di309 .di-cta p{
  margin-top:13px;
  color:#d0e0e9;
  font-size:14px;
  line-height:1.95;
}

.heda-di309 a.di309-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:195px;
  min-height:54px;
  margin:0 !important;
  padding:16px 27px !important;
  border:0 !important;
  border-radius:3px !important;
  background:#e47b2b !important;
  background-image:none !important;
  color:#fff !important;
  font:800 13px/1.5 Arial,Helvetica,sans-serif !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap;
  opacity:1 !important;
  visibility:visible !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color .2s ease;
}

.heda-di309 a.di309-quote:hover{
  background:#b85c20 !important;
  color:#fff !important;
}

.heda-di309 a.di309-quote:visited{
  color:#fff !important;
}

.heda-di309 a.di309-quote:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* ==========================================================
   RESPONSIVE / TABLET
========================================================== */

@media(max-width:1050px){

  .heda-di309 .di-hero-content{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  }

  .heda-di309 .di-hero-side,
  .heda-di309 .di-detail-copy,
  .heda-di309 .di-connection-copy{
    padding:28px;
  }

  .heda-di309 .di-benefit{
    padding:25px 21px;
  }

  .heda-di309 .di-process-step{
    padding:25px 19px;
  }

  .heda-di309 .di-spec,
  .heda-di309 .di-rfq{
    gap:28px;
  }

  .heda-di309 .di-cta{
    padding:36px 31px;
  }
}

/* ==========================================================
   RESPONSIVE / TABLET PORTRAIT
========================================================== */

@media(max-width:768px){

  .heda-di309 .di-wrap{
    width:calc(100% - 32px);
  }

  .heda-di309 .di-section{
    padding:57px 0;
  }

  .heda-di309 .di-title{
    font-size:31px;
  }

  .heda-di309 .di-heading{
    margin-bottom:27px;
  }

  .heda-di309 .di-hero-intro{
    padding:39px 0 28px;
  }

  .heda-di309 .di-hero h2{
    font-size:43px;
  }

  .heda-di309 .di-hero-content,
  .heda-di309 .di-detail-split,
  .heda-di309 .di-detail-split.reverse,
  .heda-di309 .di-connection,
  .heda-di309 .di-spec,
  .heda-di309 .di-rfq{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-hero-content{
    padding-bottom:43px;
  }

  .heda-di309 .di-hero-side{
    padding:29px;
  }

  .heda-di309 .di-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-di309 .di-fact:nth-child(3){
    border-left:0;
  }

  .heda-di309 .di-fact:nth-child(n+3){
    border-top:1px solid var(--di-line);
  }

  .heda-di309 .di-benefits{
    grid-template-columns:1fr;
    gap:16px;
  }

  .heda-di309 .di-process{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-di309 .di-process-step:nth-child(3){
    border-left:0;
  }

  .heda-di309 .di-process-step:nth-child(n+3){
    border-top:1px solid var(--di-line);
  }

  .heda-di309 .di-rotation{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-detail-split>
  .di-detail-copy:nth-child(2),
  .heda-di309 .di-detail-split>
  .di-detail-photo:nth-child(2),
  .heda-di309 .di-connection-copy{
    border-left:0;
    border-top:1px solid var(--di-line);
  }

  .heda-di309 .di-detail-copy,
  .heda-di309 .di-connection-copy{
    padding:28px;
  }

  .heda-di309 .di-diagram-info{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-diagram-item+
  .di-diagram-item{
    border-left:0;
    border-top:1px solid var(--di-line);
  }

  .heda-di309 .di-engineering{
    padding:57px 0;
  }

  .heda-di309 .di-engineering-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-di309 .di-applications{
    grid-template-columns:1fr;
    gap:16px;
  }

  .heda-di309 .di-plan-row{
    grid-template-columns:35px minmax(0,1fr);
    gap:8px 13px;
  }

  .heda-di309 .di-plan-row p{
    grid-column:2;
  }

  .heda-di309 .di-faq-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .heda-di309 .di-cta{
    grid-template-columns:1fr;
    gap:25px;
    padding:34px 28px;
  }

  .heda-di309 a.di309-quote{
    justify-self:start;
  }
}

/* ==========================================================
   RESPONSIVE / SMALL MOBILE
========================================================== */

@media(max-width:480px){

  .heda-di309 .di-wrap{
    width:calc(100% - 26px);
  }

  .heda-di309 .di-hero h2{
    font-size:35px;
  }

  .heda-di309 .di-hero-photo,
  .heda-di309 .di-detail-photo,
  .heda-di309 .di-connection-photo,
  .heda-di309 .di-diagram-media{
    padding:9px;
  }

  .heda-di309 .di-hero-side{
    padding:24px;
  }

  .heda-di309 .di-fact{
    padding:19px 12px;
  }

  .heda-di309 .di-fact strong{
    font-size:16px;
  }

  .heda-di309 .di-process{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-process-step+
  .di-process-step{
    border-left:0;
    border-top:1px solid var(--di-line);
  }

  .heda-di309 .di-rotation-card,
  .heda-di309 .di-benefit,
  .heda-di309 .di-detail-copy,
  .heda-di309 .di-connection-copy{
    padding:23px;
  }

  .heda-di309 .di-engineering-grid{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-engineering-card{
    padding:25px;
  }

  .heda-di309 .di-spec-box,
  .heda-di309 .di-rfq-box{
    padding:21px;
  }

  .heda-di309 .di-spec-row,
  .heda-di309 .di-rfq-list{
    grid-template-columns:1fr;
  }

  .heda-di309 .di-cta{
    padding:29px 22px;
  }

  .heda-di309 a.di309-quote{
    width:100% !important;
    min-width:0;
    white-space:normal;
  }
}
