/* Triangle Big Toy Storage — hand-written stylesheet (no JavaScript required for layout or navigation).
   Breakpoints: desktop >= 990px, tablet 768-989px, mobile <= 767px. */

:root {
  --dark: #424d4f;
  --ice: #c9dadf;
  --teal: #84b6bc;
  --gold: #c9bd7e;
  --mist: #e8efef;
  --field: #4e6063;
  --soft: #c8d9de;
  --line: #e1e1e1;
  --font: "Open Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: #333; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font: 13px/21.45px var(--font);
  color: #444;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
img { border: 0; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h6 { font-weight: 600; line-height: 1.1em; }
h1 { font-size: 34px; margin-bottom: 14px; }
h2 { font-size: 28px; margin-bottom: 10px; }
h6 { font-size: 14px; }
p { margin: 0.85em 0; }
strong, b { font-weight: bold; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.container { max-width: 1310px; margin: 0 auto; padding: 0 50px; }
.container::after { content: ""; display: block; clear: both; }

/* ---------- Top bar ---------- */
.topbar {
  position: relative; z-index: 10;
  min-height: 40px; margin-bottom: -1px;
  background: var(--dark); border-bottom: 1px solid var(--line);
}
.topbar .container { min-height: 40px; }
.phone-info {
  float: left; padding: 10px 0;
  font-size: 15px; line-height: 20px; letter-spacing: 1px; color: #fff;
}
.phone-info span { display: inline-block; line-height: 1em; }
.phone-info .pin {
  width: 18px; height: 24px; vertical-align: middle;
  background: url(../images/locator-pin.png) no-repeat; background-size: 18px auto;
}
.phone-info .address { vertical-align: middle; }
.phone-info .number {
  margin-left: 7px; margin-top: -2px; vertical-align: middle;
  font-size: 20px; font-weight: bold; line-height: 20px;
}
.subnav {
  position: relative; top: 10px; z-index: 2; float: right;
  padding-left: 10px; font-size: 15px; line-height: 30px;
}
.subnav ul { float: left; }
.subnav li { float: left; padding: 0 10px; border-right: 1px solid var(--line); line-height: 20px; }
.subnav li:last-child { padding: 0 0 0 10px; border: 0; }
.subnav a { padding: 7px 0; color: #fff; font-weight: bold; text-decoration: none; }
.subnav li:last-child a { color: var(--gold); }
.subnav li:not(:first-child) a:hover { text-decoration: underline; }
.subnav li:first-child a { cursor: default; }

/* ---------- Header: logo + navigation ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.header-main {
  position: relative; height: 116px;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.brand-inner { position: relative; height: 80px; }
.logo { display: block; width: 360px; max-width: 100%; margin: 0 auto; }
.logo img { display: block; }

@media (min-width: 990px) { .header-main { z-index: 2; } }
.main-nav { position: absolute; left: 0; right: 0; top: 65px; height: 50px; }
.main-nav ul { display: flex; justify-content: center; }
.main-nav a {
  position: relative; display: block; height: 50px; padding: 0 13px;
  font-size: 17px; font-weight: 600; line-height: 50px; color: #808080; text-decoration: none;
  transition: color 0.4s ease;
}
.main-nav a span { padding-left: 13px; margin-left: -13px; }
.main-nav li + li a span { border-left: 1px solid var(--line); }
.main-nav a[aria-current="page"], .main-nav a:hover { color: #333; }
.main-nav a::after { /* underline bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--teal); opacity: 0; transition: opacity 0.3s ease;
}
.main-nav a[aria-current="page"]::after, .main-nav a:hover::after { opacity: 1; }

.burger, .nav-dim, .nav-panel { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #fff; container-type: inline-size; z-index: 1; }
.hero-box { --s: min(1px, calc(100cqw / 1280)); position: relative; overflow: hidden; }
.hero--video .hero-box { height: calc(620 * var(--s)); }
.hero--image { display: none; }
.hero--image .hero-box { height: calc(1040 * var(--s)); }

.slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; animation: slide-cycle 24s infinite;
}
.slide:nth-of-type(1) { opacity: 1; animation-delay: 0s; }
.slide:nth-of-type(2) { animation-delay: 6s; }
.slide:nth-of-type(3) { animation-delay: 12s; }
.slide:nth-of-type(4) { animation-delay: 18s; }
@keyframes slide-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero--video .slide:nth-of-type(1) { animation-name: slide-cycle-first; }
@keyframes slide-cycle-first {
  0%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}
.hero--image .slide { animation-duration: 16s; }
.hero--image .slide:nth-of-type(2) { animation-delay: 4s; }
.hero--image .slide:nth-of-type(3) { animation-delay: 8s; }
.hero--image .slide:nth-of-type(4) { animation-delay: 12s; }
.hero--image .slide:nth-of-type(1) { animation-name: kb-first; }
.hero--image .slide:nth-of-type(n+2) { animation-name: kb-cycle; }
@keyframes kb-first {
  0%   { opacity: 1; transform: scale(1); }
  25%  { opacity: 1; transform: scale(1.2); }
  31%  { opacity: 0; transform: scale(1.2); }
  94%  { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kb-cycle {
  0%   { opacity: 0; transform: scale(1); }
  6%   { opacity: 1; transform: scale(1.03); }
  25%  { opacity: 1; transform: scale(1.2); }
  31%  { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1); }
}

.hero-stage { position: relative; width: calc(1280 * var(--s)); height: 100%; margin: 0 auto; }
.hero-text, .hero-button {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  font-family: Helvetica, Arial, sans-serif; color: #fff; text-align: center; margin: 0;
}
.hero-title { top: 20%; width: calc(800 * var(--s)); font-size: calc(46 * var(--s)); font-weight: 800; line-height: 1.413; }
.hero-sub   { top: 33%; width: calc(800 * var(--s)); font-size: calc(36 * var(--s)); font-weight: 500; line-height: 1.1666; }
.hero-button {
  top: 50%; display: block; text-decoration: none; line-height: normal;
}
.hero-button span {
  display: block; box-sizing: content-box; width: calc(300 * var(--s));
  padding: calc(15 * var(--s)) calc(60 * var(--s));
  border: 5px solid var(--teal); background: var(--teal);
  font-size: calc(32 * var(--s)); font-weight: 600; color: #fff;
}
.hero-button:hover { opacity: 0.7; }

.hero--image .hero-title { top: 20%; font-size: calc(66 * var(--s)); }
.hero--image .hero-sub   { top: 40%; font-size: calc(56 * var(--s)); }
.hero--image .hero-button { top: 60%; }
.hero--image .hero-button span { width: 60cqw; font-size: calc(60 * var(--s)); border-width: calc(5 * var(--s)); }

/* ---------- Sections ---------- */
.section-dark { background: var(--dark); color: #fff; }
.section-dark > .container { padding-top: 50px; padding-bottom: 50px; }

/* three feature cards */
.cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -100px; }
.card { padding: 40px; color: var(--dark); }
.card:nth-child(1) { background: var(--ice); }
.card:nth-child(2) { background: var(--teal); }
.card:nth-child(3) { background: var(--gold); }
.card a { text-decoration: none; color: inherit; }
.card .icon { display: block; width: max-content; margin: 0 auto; }
.card .icon img { display: block; }
.card h2 {
  margin: 30px 0 10px; text-align: center; text-transform: capitalize; letter-spacing: 1px; font-weight: 600;
}
.card h2 strong { font-weight: bold; }
.card h6 { padding-top: 6px; text-align: left; font-size: 14px; }

/* "Have a question?" */
.question > .container { padding-top: 20px; }
.question-cols { display: flex; justify-content: space-between; }
.question-cols > * { width: 47%; display: flow-root; }
.heading { padding-bottom: 10px; }
.heading h1 {
  margin: 0;
  font-weight: 300; text-transform: uppercase; letter-spacing: 1px; color: var(--gold);
}
.question .copy p { color: var(--soft); font-size: 18px; margin: 15.3px 0 8px; }
.question .copy p.big { margin-top: 0; font-size: 28px; font-weight: bold; margin-bottom: 23.8px; }
.question .copy p.pitch { margin: 15.3px 0; }

/* contact form */
.cform { margin-bottom: 20px; }
.cform p { margin: 11.05px 0; }
.cform .field { position: relative; display: block; }
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform textarea {
  display: block; width: 100%; max-width: 100%; margin: 0 0 20px; padding: 10px; border: 0; border-radius: 0;
  background: var(--field); color: var(--gold); outline: 0; -webkit-appearance: none; appearance: none;
  font: 18px HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cform textarea { height: 128px; line-height: 27px; resize: vertical; }
.cform ::placeholder { color: var(--gold); opacity: 1; font-size: 18px; }
.cform input:focus, .cform textarea:focus { background: #556b6e; }
.cform .submit {
  padding: 10px 40px; border: 2px solid var(--gold); border-radius: 0; cursor: pointer;
  background: var(--field); color: var(--gold); font: 18px Arial, sans-serif; -webkit-appearance: none; appearance: none;
}
.cform .submit:hover { background: #5c7376; }
.cform .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .tip { display: block; color: #f00; font-size: 1em; font-weight: normal; }
.cform .response { display: none; margin: 30px 0; padding: 0.2em 1em; border: 2px solid #fff; color: var(--gold); font-size: 18px; }
.cform .response.show { display: block; }
.cform.busy .submit { opacity: 0.6; cursor: wait; }
.cform .spinner { display: none; width: 16px; height: 16px; margin: 0 0 0 10px; vertical-align: middle; background: url(../images/spinner.gif) no-repeat center; }
.cform.busy .spinner { display: inline-block; }
/* no-JS result messages (the server redirects to #sent / #failed) */
.cform .after { display: none; }
.cform .after:target { display: block; margin: 30px 0; padding: 0.2em 1em; border: 2px solid #fff; color: var(--gold); font-size: 18px; }

/* stats strip */
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell { display: flex; align-items: center; justify-content: center; padding: 80px 50px; color: var(--dark); }
.cell > div { width: 100%; }
.cell:nth-child(1) { background: var(--ice); }
.cell:nth-child(2) { background: var(--mist); }
.cell:nth-child(3) { background: var(--gold); }
.stat { display: block; position: relative; clear: both; text-align: center; color: var(--dark); }
.stat-title {
  display: inline; position: relative;
  font-size: 42px; font-weight: 400; line-height: 1em; letter-spacing: -2px; white-space: nowrap; color: var(--dark);
}
.stat-title .unit { font-size: 80%; font-weight: normal; opacity: 0.5; }
.stat-text { position: relative; overflow: hidden; font-size: 22px; line-height: 1.3em; }
.stat-text p { margin: 0; }
.count-up { display: none; }

/* storage photo + "Safe & Secure" */
.safe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.safe-photo { min-height: 500px; background: url(../images/rv-storage.jpeg) center center / cover no-repeat; }
.safe-copy { min-height: 500px; padding: 80px; background: var(--teal); color: var(--dark); display: flex; flex-direction: column; justify-content: center; }
.safe h1 .amp { font-weight: 400; }
.safe h1 { margin: 0; font-size: 40px; font-weight: bold; line-height: 44px; color: var(--dark); }
.safe p { margin: 18px 0; font-size: 15px; line-height: 1.3em; }
.safe .intro { padding-bottom: 10px; }
.safe-copy::after { content: ""; display: block; height: 6px; }
.btn-light {
  display: inline-block; align-self: flex-start; min-width: 200px; max-width: 100%; margin: 3px 0;
  padding: 25px 50px 23px; border: 3px solid #fff; border-radius: 3px;
  font-size: 24px; font-weight: bold; line-height: 1.2em; text-align: center; color: #fff; text-decoration: none;
  transition: opacity 0.2s;
}
.btn-light:hover { opacity: 0.7; }

/* ---------- Footer ---------- */
.site-footer { padding: 15px 0 80px; border-top: 1px solid var(--ice); background: var(--ice); color: var(--dark); }
.site-footer .cols { display: flex; justify-content: space-between; }
.site-footer .cols > * { width: 47%; }
.site-footer .contact { display: flow-root; margin-bottom: 10px; }
.site-footer .contact .big { padding: 0; border-bottom: 2px solid #fff; font-size: 30px; line-height: 36px; }
.site-footer .contact .big p { margin: 25.5px 0; }
.site-footer .contact .big b { white-space: nowrap; }
.site-footer .contact .mail { font-size: 18px; text-decoration: none; }
.socket { margin-top: -1px; border-top: 1px solid #444; background: #333; color: #eee; font-size: 11px; }
.socket .container { padding-top: 15px; padding-bottom: 15px; }
.socket .copyright { display: block; }
.socket a { color: #fff; text-decoration: none; }
.socket a:hover { text-decoration: underline; }

/* ---------- Pricing page ---------- */
.price-page > .container { padding-top: 50px; padding-bottom: 50px; }
.price-page .heading h1 { margin: 0; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.price-table { display: table; table-layout: fixed; width: 100%; margin-top: 30px; }
.price-col { display: table-cell; }
.price-col ul { margin: 10px; }
.price-col li {
  margin: 0; padding: 9px 12px; border: 1px solid var(--gold); border-bottom: 0;
  background: var(--field); color: #fff; text-align: center; font-size: 17px;
}
.price-col li:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; }
.price-col li:last-child { border-bottom: 1px solid var(--gold); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

/* ---------- Back-to-top (appears after scrolling, where the browser supports scroll-driven animation) ---------- */
.to-top {
  position: fixed; right: 50px; bottom: 50px; z-index: 150; display: block; width: 50px; height: 50px;
  border: 1px solid #444; background: #333; color: #eee; line-height: 50px; text-align: center; text-decoration: none;
  opacity: 0; visibility: hidden;
}
.to-top::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-top: 21px; vertical-align: top;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
}
.to-top:hover { background: #fcfcfc; color: #719430; border-color: var(--line); }
@supports (animation-timeline: scroll()) {
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(root block); animation-range: 300px 400px; }
  @keyframes to-top-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
}

/* ---------- Count-up numbers (progressive enhancement, no JS) ---------- */
@property --num { syntax: "<integer>"; initial-value: 0; inherits: false; }
@counter-style pad2 { system: extends decimal; pad: 2 "0"; }
@counter-style pad3 { system: extends decimal; pad: 3 "0"; }
@supports (animation-timeline: view()) {
  .count-final { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .count-up { display: inline; counter-reset: n var(--num); animation: count linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  .count-up::before { content: counter(n, pad3); }
  .count-up.two::before { content: counter(n, pad2); }
  @keyframes count { from { --num: 0; } to { --num: var(--to); } }
}

/* ---------- Tablet (768–989) ---------- */
@media (max-width: 989px) {
  .phone-info { float: none; width: 100%; clear: both; text-align: center; }
  .subnav { float: right; }

  .header-main { height: auto; }
  .brand-inner { height: 90px; }
  .logo { position: absolute; top: 0; left: 50%; width: 360px; max-width: 50%; margin: 0; transform: translateX(-50%); }
  .main-nav { display: none; }

  .burger {
    position: absolute; z-index: 103; top: 0; right: 50.8px; display: block; width: 55px; height: 90px;
    padding-left: 20px; cursor: pointer;
  }
  .burger-box { position: absolute; top: 0; left: 20px; width: 35px; height: 100%; }
  .burger-bar, .burger-bar::before, .burger-bar::after {
    position: absolute; display: block; width: 35px; height: 3px; border-radius: 3px; background: #808080;
    transition: transform 0.15s ease;
  }
  .burger-bar { top: 50%; margin-top: 0; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .burger-bar::before, .burger-bar::after { content: ""; left: 0; }
  .burger-bar::before { top: -10px; transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in, background-color 0.15s ease; }
  .burger-bar::after { top: 10px; transition: top 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0.15s ease; }

  .nav-toggle:checked ~ .header-main .burger-bar { transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .nav-toggle:checked ~ .header-main .burger-bar,
  .nav-toggle:checked ~ .header-main .burger-bar::before,
  .nav-toggle:checked ~ .header-main .burger-bar::after { background: #333; }
  .nav-toggle:checked ~ .header-main .burger-bar::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out, background-color 0.15s ease; }
  .nav-toggle:checked ~ .header-main .burger-bar::after { top: 0; transform: rotate(-90deg); transition: top 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.15s ease; }
  .nav-toggle:focus-visible ~ .header-main .burger { outline: 2px solid var(--teal); outline-offset: -2px; }

  /* slide-in menu */
  .nav-dim { position: fixed; inset: 0; z-index: 100; display: block; background: #000; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
  .nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; display: block; width: 350px; max-width: 100%; background: #fff; transform: translateX(350px); visibility: hidden; transition: transform 0.5s cubic-bezier(0.75, 0, 0.25, 1), visibility 0s 0.5s; }
  .nav-toggle:checked ~ .nav-dim { opacity: 0.3; visibility: visible; transition-delay: 0s; }
  .nav-toggle:checked ~ .nav-panel { transform: none; visibility: visible; transition-delay: 0s; }
  html:has(.nav-toggle:checked) { overflow: hidden; }

  .main-nav {
    position: absolute; top: 100%; right: 0; left: auto; z-index: 102; display: block;
    width: 350px; max-width: 100%; height: auto; visibility: hidden; opacity: 0; transform: translateX(350px);
    transition: transform 0.5s cubic-bezier(0.75, 0, 0.25, 1), visibility 0s 0.5s, opacity 0s 0.5s;
  }
  .nav-toggle:checked ~ .header-main .main-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .main-nav ul { display: block; }
  .main-nav a {
    height: auto; padding: 15px 50px; border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 400; line-height: 1.3em; color: #333; text-align: left;
  }
  .main-nav a:hover { background: var(--ice); }
  .main-nav a::after { display: none; }
  .main-nav a span, .main-nav li + li a span { padding: 0; margin: 0; border: 0; }

}

@media (min-width: 768px) and (max-width: 989px) {
  .phone-info .pin { display: none; }
}

/* ---------- Mobile (<= 767) ---------- */
@media (max-width: 767px) {
  .container { padding: 0 7.5%; }
  .phone-info span, .phone-info span.number { margin: 0; padding: 0; }
  .subnav { position: static; float: none; width: 100%; margin: 0 auto; text-align: center; }
  .subnav ul { float: none; width: 100%; text-align: center; }
  .subnav li, .subnav li:last-child { float: none; display: inline-block; padding: 0 10px; }

  .brand-inner { display: flex; align-items: center; height: 80px; }
  .logo { position: static; transform: none; width: auto; max-width: 80%; }
  .burger { height: 80px; }

  .hero--video { display: none; }
  .hero--image { display: block; }

  .cards { display: block; }
  .card { margin-bottom: 20px; }
  .question-cols { display: block; }
  .question-cols > * { width: 100%; margin-bottom: 20px; }
  
  .cells { display: block; }
  .cell { display: block; padding: 80px 8%; }
  .stat-title { font-size: 42px; }

  .safe { display: block; }
  .safe-photo { min-height: 500px; }
  .safe-copy { display: block; min-height: 500px; padding: 80px 8%; }
  .safe h1 { font-size: 32px; line-height: 35.2px; }

  .site-footer .cols { display: block; }
  .site-footer .cols > * { width: 100%; margin-bottom: 20px; }
  .site-footer .cols > :first-child { min-height: 61px; }
  .site-footer .contact { margin-bottom: 30px; }

  .price-table, .price-col { display: block; }
  .price-col ul { margin: 10px 10px 40px; }

  .to-top { display: none; }
}

@media (max-width: 479px) {
  .burger { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide { animation: none !important; }
  .slide:nth-of-type(1) { opacity: 1; }
  .count-up { animation: none; --num: var(--to); }
}