/* ══════════════════════════════════════════════════════════
   Palette and type sampled from the live Heartland sites.
   navy #0F324B · steel #2F6286 · sky #61839D · CTA blue #3E5DAA
   ink #212529 · Roboto (display/UI) + Public Sans (text)
   ══════════════════════════════════════════════════════════ */
:root{
  --navy:#0F324B; --navy-900:#0a2437; --steel:#2F6286; --sky:#61839D;
  --blue:#3E5DAA; --blue-700:#334d8c;
  --ink:#212529; --ink-nav:#231F20; --ink-mid:#555; --ink-soft:#7b828a;
  --bg:#FBFCFD; --surface:#FEFEFF; --bg-100:#F1F4F7; --bg-200:#e6ebf0; --line:#DCE3EA;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:132px;
  --r:8px; --r-lg:14px;
  --lift-1:0 1px 2px rgba(15,50,75,.06), 0 2px 8px rgba(15,50,75,.06);
  --lift-2:0 2px 4px rgba(15,50,75,.07), 0 10px 26px rgba(15,50,75,.10);
  --lift-3:0 6px 12px rgba(15,50,75,.09), 0 22px 48px rgba(15,50,75,.14);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.7 "Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Roboto,sans-serif;color:var(--navy);margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.15}
p{margin:0 0 var(--s2)}
a{color:var(--steel)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s3)}
.measure{max-width:68ch}

.util{background:var(--navy);color:#fff;font-size:13.5px;padding:9px 0}
.util .wrap{display:flex;justify-content:flex-end;gap:var(--s3);flex-wrap:wrap}
.util strong{font-weight:600}

.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:88px;flex-wrap:wrap}
.logo img{height:56px;width:auto;display:block}
.navwrap{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
nav a{font-family:Roboto,sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-nav);text-decoration:none;margin-left:var(--s3);transition:color .15s}
nav a:hover,nav a[aria-current]{color:var(--blue)}
.tel{font-family:Roboto,sans-serif;font-weight:700;font-size:20px;color:var(--steel);text-decoration:none;white-space:nowrap}
.btn{display:inline-block;font-family:Roboto,sans-serif;font-weight:700;font-size:15px;color:#fff;background:var(--blue);
  padding:11px 22px;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;
  transition:background .18s,transform .18s ease-out,box-shadow .18s ease-out}
.btn:hover{background:var(--blue-700);transform:translateY(-1px);box-shadow:var(--lift-2)}
.btn:active{transform:none}

.hero{position:relative;color:#fff;padding:var(--s5) 0 var(--s6);overflow:hidden;
  background:linear-gradient(100deg,rgba(10,36,55,.94) 0%,rgba(15,50,75,.80) 42%,rgba(15,50,75,.44) 100%),
    url("/hero.jpg") center/cover no-repeat,var(--navy)}
.hero .grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s5);align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:Roboto,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#cfe0ec;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);padding:8px 15px;border-radius:100px;margin-bottom:var(--s3)}
.dot{width:7px;height:7px;border-radius:50%;background:#7fd4a0}
.hero h1{color:#fff;font-size:clamp(44px,6vw,78px);line-height:1.0;text-wrap:balance}
.lede{font-size:21px;line-height:1.6;color:rgba(255,255,255,.88);margin-top:var(--s3);max-width:46ch}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.16)}
.fact .k{display:block;overflow-wrap:anywhere;font-family:Roboto,sans-serif;font-size:36px;font-weight:700;color:#fff;line-height:1.05;letter-spacing:-.02em}
.fact .v{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#9dbdd4;margin-top:4px;display:block}

/* ── waiting list card ── */
.card{background:var(--surface);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--lift-3);color:var(--ink)}
.card h2{font-size:30px;text-wrap:balance;margin-bottom:var(--s3)}
.card .sub{font-size:15px;color:var(--ink-mid);margin:8px 0 var(--s3)}
label{display:block;font-family:Roboto,sans-serif;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel]{width:100%;padding:12px 13px;font:400 15px/1.4 "Public Sans",Arial,sans-serif;color:var(--ink);
  background:var(--bg-100);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(62,93,170,.14);background:var(--surface)}
.field{margin-bottom:var(--s2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.card .btn{width:100%;margin-top:var(--s2);padding:14px;font-size:16px}

/* size picker, real sizes and prices */
.sizes{display:grid;gap:8px;margin-bottom:var(--s2)}
.sizes .opt{position:relative}
.sizes input{position:absolute;opacity:0;width:0;height:0}
.sizes span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-100);
  font-size:14.5px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.sizes span b{font-family:Roboto,sans-serif;font-weight:700;color:var(--navy);font-size:14.5px}
.sizes span i{font-style:normal;color:var(--ink-soft);font-size:13px;white-space:nowrap}
.sizes input:checked + span{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(62,93,170,.16)}
.sizes input:focus-visible + span{box-shadow:0 0 0 3px rgba(62,93,170,.28)}
/* plan choice: free list vs paid hold */
.plans{display:grid;gap:9px;margin:var(--s3) 0 var(--s2)}
.plans .opt{position:relative;display:block}
.plans input{position:absolute;opacity:0;width:0;height:0}
.plans>.opt>span:not(.rec){display:block;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--bg-100);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.plans b{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:Roboto,sans-serif;font-weight:700;font-size:15.5px;color:var(--navy)}
.plans b em{font-style:normal;font-size:14px;color:var(--steel)}
.plans i{display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--ink-mid);margin-top:5px}
.plans>.opt>input:checked + span{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 2px rgba(62,93,170,.16)}
.plans>.opt>input:focus-visible + span{box-shadow:0 0 0 3px rgba(62,93,170,.32)}
.plans .rec{position:absolute;top:-8px;right:12px;z-index:2;font-family:Roboto,sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);background:#ffd9a8;
  padding:3px 8px;border-radius:100px;pointer-events:none}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:var(--s2);padding:13px;background:var(--bg-100);border:1px solid var(--line);border-radius:var(--r)}
.consent input{width:16px;height:16px;flex:0 0 16px;margin-top:3px;accent-color:var(--blue)}
.consent label{font-family:"Public Sans",Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--ink-mid);margin:0}
.fine{font-size:11.5px;color:var(--ink-soft);margin:var(--s2) 0 0;line-height:1.55}

.section{padding:var(--s6) 0}
.section.tint{background:var(--bg-100);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Headings get their own, wider measure than body copy, so they stop
   orphaning a word onto line two. balance evens out any that do wrap. */
.h2wrap{margin-bottom:var(--s4)}
.h2wrap h2{font-size:clamp(29px,3.4vw,42px);max-width:42ch;text-wrap:balance}
.h2wrap p{color:var(--ink-mid);margin-top:var(--s2);font-size:18px;line-height:1.65;max-width:68ch}

/* ── unit cards ── */
.units{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.unit{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--lift-1);transition:transform .2s ease-out,box-shadow .2s ease-out}
.unit:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.unit.pick{border-color:var(--blue);box-shadow:var(--lift-2)}
.unit .head{background:var(--navy);color:#fff;padding:var(--s3);position:relative}
.unit.pick .head{background:linear-gradient(150deg,var(--navy),var(--steel))}
.unit .tag{position:absolute;top:14px;right:14px;font-family:Roboto,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:#ffd9a8;padding:4px 9px;border-radius:100px}
.unit h3{color:#fff;font-size:20px;margin-bottom:4px}
.unit .dims{font-size:13px;color:var(--sky);letter-spacing:.03em;text-transform:uppercase;font-family:Roboto,sans-serif;font-weight:600}
.unit .price{display:flex;align-items:baseline;gap:4px;margin-top:var(--s2)}
.unit .price .amt{font-family:Roboto,sans-serif;font-size:44px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em}
.unit .price .cur{font-family:Roboto,sans-serif;font-size:19px;font-weight:700;color:#fff;align-self:flex-start;margin-top:5px}
.unit .price .per{font-size:14px;color:rgba(255,255,255,.72)}
.unit .body{padding:var(--s3);flex:1;display:flex;flex-direction:column}
.unit .body p{font-size:15px;color:var(--ink-mid);margin-bottom:var(--s2)}
.unit ul{list-style:none;margin:0 0 var(--s3);padding:0;font-size:14.5px;color:var(--ink-mid)}
.unit li{padding-left:22px;position:relative;margin-bottom:7px}
.unit li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:6px;border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.unit .btn{margin-top:auto;text-align:center}
.priceline{margin-top:var(--s3);font-size:15px;color:var(--ink-mid)}

/* ── checklist ── */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2) var(--s4)}
.checks div{display:flex;align-items:flex-start;gap:12px;font-size:16.5px;color:var(--ink)}
.checks div svg{flex:0 0 auto;width:26px;height:26px;fill:var(--blue);opacity:.9;margin-top:-1px}
.band .checks div{color:rgba(255,255,255,.9)}
.band .checks div svg{fill:#7fd4a0;opacity:.95}

/* ── promise ── */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.promise .p{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s3);box-shadow:var(--lift-1)}
.promise h3{font-size:20px;margin-bottom:10px}
.promise p{font-size:15.5px;color:var(--ink-mid);margin:0}
.ic{width:44px;height:44px;border-radius:12px;background:var(--bg-100);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2)}
.ic svg{width:25px;height:25px;fill:var(--blue);stroke:none}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);counter-reset:s}
.step{position:relative;padding:var(--s3) var(--s3) var(--s3) 68px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift-1)}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:var(--s3);top:var(--s3);
  width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-family:Roboto,sans-serif;
  font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:17px;margin-bottom:4px}
.step p{font-size:14.5px;color:var(--ink-mid);margin:0}

.band{background:var(--navy);color:#fff;padding:var(--s6) 0}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.75)}
.band .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s3)}
.chip{font-family:Roboto,sans-serif;font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.9)}

details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
summary{cursor:pointer;font-family:Roboto,sans-serif;font-weight:700;font-size:19px;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s3);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-size:24px;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:var(--s2) 0 0;color:var(--ink-mid);max-width:70ch}

footer{background:var(--navy-900);color:rgba(255,255,255,.62);padding:var(--s5) 0 var(--s3);font-size:15px}
footer .cols{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
footer a{color:rgba(255,255,255,.82);text-decoration:none;display:block;margin-bottom:8px;font-size:15px}
footer a:hover{color:#fff}
footer .lbl{font-family:Roboto,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:13px}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s3);font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.6}

/* feature strip anchors the bottom of the hero's left column */
.strip{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:1fr 1fr;gap:11px var(--s3)}
.strip div{position:relative;padding-left:26px;font-size:15.5px;color:rgba(255,255,255,.88)}
.strip div::before{content:"";position:absolute;left:1px;top:9px;width:12px;height:6px;
  border-left:2.5px solid #7fd4a0;border-bottom:2.5px solid #7fd4a0;transform:rotate(-45deg)}
.callnow{margin-top:var(--s3);font-size:16px;color:rgba(255,255,255,.72)}
.callnow a{color:#fff;font-family:Roboto,sans-serif;font-weight:700;font-size:21px;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.callnow a:hover{color:#bcd9ec}

@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(18px);animation:rise .6s cubic-bezier(.22,.61,.36,1) forwards}
  .d2{animation-delay:.1s}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media (max-width:1000px){
  .units,.checks,.promise,.steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero{padding:var(--s5) 0}
  .hero .grid,.band .grid{grid-template-columns:1fr;gap:var(--s4)}
  .section{padding:var(--s5) 0}
  nav a{margin:0 var(--s2) 0 0;font-size:14px}
  .facts{grid-template-columns:repeat(3,auto);gap:var(--s3)}
  .strip{grid-template-columns:1fr}
  .top .wrap{min-height:0;padding-top:var(--s2);padding-bottom:var(--s2)}
}
@media (max-width:700px){
  .units,.checks,.promise,.steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .util{display:none}
  .hero h1{font-size:clamp(32px,8.4vw,44px)}
  .lede{font-size:17px}
  .facts{grid-template-columns:repeat(2,auto);gap:var(--s3)}
  .fact .k{font-size:28px}
  .card{padding:var(--s3)}
  .logo img{height:44px}
  .tel{font-size:18px}
}

/* ── Location map. Address-driven today; swap the iframe q= for the Google Business
   Profile place id once each location has a verified listing, and the branded pin
   with reviews replaces the plain address pin. Nothing else needs to change. ── */
.mapwrap{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;min-height:300px;
  background:#0a2437;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 16px 40px rgba(0,0,0,.24)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.mapsoon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:var(--s3);
  color:rgba(255,255,255,.72);font-size:15px}
.mapsoon strong{color:#fff;font-family:Roboto,sans-serif;font-size:17px;letter-spacing:-.02em}
.maplinks{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.maplinks a{font-family:Roboto,sans-serif;font-weight:600;font-size:15px;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.maplinks a:hover{border-bottom-color:#fff}
@media (max-width:820px){.mapwrap{aspect-ratio:1/1;min-height:0}}

/* ── Cross sell to the sister business, Heartland Shipping Containers. Deliberately
   subordinate to the primary CTA: quiet surface, no solid fill, no arrow. Present on
   the dark hero and again as a slim strip in the footer.
   NOTE: do NOT use justify-content:space-between here. With three children it spreads
   free space between the icon and the text and the icon ends up marooned. Let the text
   flex instead, so only the link is pushed right. ── */
.xsell{display:flex;align-items:center;gap:18px;max-width:52ch;margin-top:var(--s4);
  padding:16px 20px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  transition:background .18s ease-out,border-color .18s ease-out,transform .18s ease-out}
.xsell:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.xsell .ico{flex:0 0 auto;width:44px;height:44px;opacity:.95}
.xsell span{flex:1 1 auto;min-width:0}
.xsell b{display:block;font-family:Roboto,sans-serif;font-weight:700;font-size:15.5px;
  color:#fff;letter-spacing:-.015em}
.xsell em{display:block;font-style:normal;font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.68);margin-top:2px}
.xsell u{flex:0 0 auto;text-decoration:none;color:#9ec2e6;font-weight:600;font-size:14px;white-space:nowrap}
.xsell:hover u{color:#fff}

footer .xsell{max-width:none;margin:0 0 var(--s4);padding:18px 22px;gap:20px}
footer .xsell .ico{width:50px;height:50px}
footer .xsell b,footer .xsell em{margin:0}

@media (max-width:700px){
  .xsell{flex-wrap:wrap;gap:12px;padding:16px}
  .xsell .ico,footer .xsell .ico{width:40px;height:40px}
  .xsell span{flex:1 1 100%;order:2}
  .xsell u{white-space:normal;order:3;flex:1 1 100%}
}

/* ---- Locations dropdown. Shared by styles.css and legal.css; both declare the
   same custom properties, so this block is identical in each. Opens on hover for
   mouse, on focus-within for keyboard, and on aria-expanded for tap. ---- */
.drop{position:relative;display:inline-block;margin-left:var(--s3)}
.droptrig{font-family:Roboto,sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink-nav);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .15s}
.droptrig::after{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s}
.droptrig:hover,.droptrig.on,.drop:hover .droptrig,.drop:focus-within .droptrig{color:var(--blue)}
.drop:hover .droptrig::after,.droptrig[aria-expanded="true"]::after{transform:rotate(180deg)}
.dropmenu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:208px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;
  box-shadow:0 2px 4px rgba(15,50,75,.07),0 14px 32px rgba(15,50,75,.14);
  opacity:0;visibility:hidden;transform:translateY(-5px);z-index:60;
  transition:opacity .15s,transform .15s,visibility .15s}
.drop:hover .dropmenu,.drop:focus-within .dropmenu,
.droptrig[aria-expanded="true"]+.dropmenu{opacity:1;visibility:visible;transform:none}
.dropmenu a{display:block;margin:0;padding:9px 12px;border-radius:var(--r);font-size:15px;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.dropmenu a:hover,.dropmenu a[aria-current]{background:var(--bg-100);color:var(--blue)}
.dropmenu .sub{display:block;font-family:"Public Sans",sans-serif;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:1px}
.dropmenu a:hover .sub,.dropmenu a[aria-current] .sub{color:var(--sky)}
@media (max-width:620px){.dropmenu{left:auto;right:0;min-width:184px}}