:root {
  color-scheme: light;
  --forest: #003d2b;
  --forest-deep: #003b2b;
  --lime: #62b51a;
  --white: #fff;
  --page-pad: clamp(24px, 4.2vw, 68px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--forest);
  background: var(--forest);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { min-height: 100svh; display: flex; flex-direction: column; }
.hero {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  min-height: 84svh;
  overflow: hidden;
  background: #fdfefd;
  padding: 36px var(--page-pad) 54px;
  display: flex;
  flex-direction: column;
}
.hero-photo {
  position: absolute;
  z-index: -3;
  inset: 0 0 0 36%;
  background-image: url("assets/storage-containers.jpg");
  background-size: cover;
  /* Anchor to the right edge so the nearest, most prominent containers stay
     fully in frame instead of being cropped evenly from both sides. */
  background-position: right center;
}
.hero-photo-lower { display: none; }
.hero-wash {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 28%, rgba(255,255,255,.9) 41%, rgba(255,255,255,.28) 57%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.sl-watermark {
  position: absolute;
  z-index: -1;
  top: -7%;
  left: 48%;
  font-weight: 800;
  font-size: clamp(300px, 37vw, 590px);
  line-height: .8;
  letter-spacing: -.11em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(98,181,26,.48);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  display: block;
  height: clamp(34px, 3.4vw, 50px);
  width: auto;
}
.coming-soon {
  border: 2px solid var(--lime);
  color: var(--forest);
  border-radius: 999px;
  padding: 13px 27px;
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(58%, 780px);
  margin-top: auto;
  padding-top: clamp(74px, 9.5vh, 120px);
}
.eyebrow {
  color: var(--lime);
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 800;
  letter-spacing: .27em;
  margin: 0 0 16px;
}
h1 {
  color: var(--forest-deep);
  font-size: clamp(64px, 7.5vw, 116px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.075em;
  margin: 0;
}
h1 span, .footer-tagline span { color: var(--lime); }
.supporting-copy { margin-top: clamp(32px, 4.1vh, 48px); }
.supporting-copy h2 {
  font-size: clamp(23px, 2.45vw, 38px);
  line-height: 1.2;
  letter-spacing: -.055em;
  margin: 0 0 10px;
  font-weight: 800;
}
.supporting-copy p {
  margin: 0;
  font-size: clamp(16px, 1.65vw, 25px);
  line-height: 1.45;
  letter-spacing: -.035em;
}
.email-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  margin-top: clamp(26px, 4.3vh, 48px);
  padding: 15px 36px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--white);
  text-decoration: none;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.035em;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.email-cta:hover { background: #4f9e11; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,61,43,.16); }
.email-cta:focus-visible, .site-footer a:focus-visible, .brand:focus-visible {
  outline: 3px solid #1b76d1;
  outline-offset: 4px;
}
.email-icon { font-size: .95em; display: none; }
.site-footer {
  min-height: 13svh;
  background: var(--forest);
  color: var(--white);
  padding: 25px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-tagline {
  margin: 0;
  font-size: clamp(25px, 3.2vw, 49px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.055em;
}
.site-footer a {
  flex-shrink: 0;
  color: var(--white);
  text-decoration: none;
  font-size: clamp(13px, 1.15vw, 17px);
  letter-spacing: .25em;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 1600px) {
  .hero { min-height: 87svh; }
}
@media (max-width: 1100px) {
  .hero { min-height: 82svh; }
  .hero-content { width: min(64%, 690px); }
  .hero-photo { left: 30%; }
  .hero-wash { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 31%, rgba(255,255,255,.84) 47%, rgba(255,255,255,.16) 70%, transparent 82%); }
  h1 { font-size: clamp(60px, 8vw, 88px); }
  .sl-watermark { left: 43%; }
}
/* Tall, narrow viewports (portrait tablets as well as phones) switch to the
   stacked layout: a vertical side-column photo at these heights forces an
   extreme background-size:cover crop that loses the sense of a container row. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .hero {
    min-height: 100svh;
    padding: 24px 22px 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .site-header { align-items: flex-start; flex-direction: column; gap: 15px; }
  .brand-logo { height: 34px; }
  .coming-soon { font-size: 10px; padding: 10px 15px; }
  /* Full-bleed background again (same technique as desktop) — the portrait
     photo sits behind the whole hero and the text sits on top of it,
     rather than in a separate photo band above a plain panel. */
  .hero-photo {
    position: absolute;
    z-index: -3;
    inset: 0;
    background-position: center 15%;
    background-size: cover;
  }
  /* The portrait photo leaves a plain stretch of concrete floor at the
     bottom of the frame. Fill it with the desktop container row instead of
     empty ground, faded in at the top edge so the two photos read as one
     continuous scene rather than a hard-edged swap. */
  .hero-photo-lower {
    display: block;
    position: absolute;
    z-index: -3;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background-image: url("assets/storage-containers.jpg");
    background-size: cover;
    background-position: right center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  }
  .hero-wash {
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.78) 48%, rgba(255,255,255,.3) 68%, rgba(255,255,255,0) 85%);
  }
  .sl-watermark { display: none; }
  .hero-content { width: 100%; margin: 0; padding-top: 28px; }
  .eyebrow { font-size: 12px; letter-spacing: .23em; margin-bottom: 13px; }
  h1 { font-size: clamp(49px, 12.3vw, 70px); line-height: .98; letter-spacing: -.075em; }
  .supporting-copy { margin-top: 25px; }
  .supporting-copy h2 { font-size: clamp(22px, 5.8vw, 28px); margin-bottom: 8px; }
  .supporting-copy p { font-size: 16px; line-height: 1.5; }
  .email-cta { margin-top: 24px; margin-bottom: 0; padding: 14px 22px; min-height: 50px; font-size: clamp(15px, 4vw, 18px); }
  .site-footer { min-height: 0; padding: 25px 22px 28px; flex-direction: column; align-items: flex-start; gap: 15px; }
  .footer-tagline { font-size: clamp(25px, 7vw, 32px); }
  .site-footer a { font-size: 12px; letter-spacing: .2em; }
}
/* Phone-only: use the purpose-cropped portrait photo instead of the desktop
   crop (the portrait-tablet range above still uses the default photo). */
@media (max-width: 767px) {
  .hero-photo { background-image: url("assets/storage-containers-mob.jpg"); }
}
@media (max-width: 379px) {
  .hero { padding-left: 18px; padding-right: 18px; }
  .brand-logo { height: 30px; }
  h1 { font-size: 48px; }
  .email-cta { padding: 13px 17px; font-size: 15px; }
  .site-footer { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}