/* Better Self Storage Websites — Night Gate */
:root {
  --bg: #121212;
  --bg-alt: #1A1A1A;
  --ink: #F3F0E8;
  --muted: #B8B3A9;
  --primary: #FF5A1F;
  --accent: #FF5A1F;
  --accent-hover: #FF7A45;
  --line: #2C2C2C;
  --header-bg: rgba(18,18,18,0.95);
  --header-ink: #F3F0E8;
  --hero-bg: #121212;
  --hero-ink: #F3F0E8;
  --hero-muted: #C8C3B8;
  --btn-bg: #FF5A1F;
  --btn-ink: #121212;
  --footer-bg: #0A0A0A;
  --footer-ink: #F3F0E8;
  --card-bg: #1C1C1C;
  --highlight-bg: #FF5A1F;
  --highlight-ink: #121212;
  --ribbon-bg: #FF5A1F;
  --ribbon-ink: #121212;
  --radius: 4px;
  --btn-radius: 2px;
  --hero-size: clamp(2.8rem, 8vw, 5.6rem);
  --hero-weight: 800;
  --hero-track: -0.015em;
  --hero-leading: 0.95;
  --display-weight: 800;
  --shadow: none;
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --space: clamp(1.25rem, 3vw, 2rem);
  --max: 72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:1.125rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--btn-ink);padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(var(--max), calc(100% - 2.5rem));margin-inline:auto}
.ribbon{
  background:var(--ribbon-bg);color:var(--ribbon-ink);
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
}
.ribbon .wrap{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.55rem 0}
.ribbon a{color:inherit;text-decoration:underline}
.ribbon a[aria-current="page"]{text-decoration:none;font-weight:800}
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--header-bg);
  color:var(--header-ink);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--header-ink)}
.brand .mark{flex:none;width:40px;height:40px}
.brand-name{font-family:var(--font-display);font-weight:800;line-height:1.1;font-size:.95rem;letter-spacing:-0.02em}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.15rem;align-items:center}
.nav a{color:var(--header-ink);text-decoration:none;font-size:.95rem;font-weight:600}
.nav a:hover{color:var(--accent);text-decoration:underline}
.nav .nav-cta{
  background:var(--btn-bg);color:var(--btn-ink);padding:.45rem .9rem;
  border-radius:var(--btn-radius);text-decoration:none;
}
.nav .nav-cta:hover{background:var(--accent-hover);color:var(--btn-ink);text-decoration:none}
#nav-toggle{position:absolute;opacity:0;pointer-events:none}
.hamburger{display:none;background:none;border:0;color:inherit;font:inherit;font-weight:800;cursor:pointer}
@media (max-width:860px){
  .hamburger{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:0 0 1rem}
  #nav-toggle:checked ~ .nav{display:flex}
  .site-header .wrap{flex-wrap:wrap}
}
.hero{background:var(--hero-bg);color:var(--hero-ink);padding:clamp(3.25rem,8vw,6.5rem) 0 clamp(3.5rem,9vw,7rem)}
.hero h1{
  font-family:var(--font-display);
  font-weight:var(--hero-weight);
  font-size:var(--hero-size);
  letter-spacing:var(--hero-track);
  line-height:var(--hero-leading);
  margin:0 0 1.25rem;
  max-width:18ch;
  text-transform:none;
}
.hero .sub{
  font-size:clamp(1.1rem,2vw,1.3rem);
  line-height:1.55;
  color:var(--hero-muted);
  max-width:42rem;
  margin:0 0 2rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem 1.25rem;align-items:center}
.btn{
  display:inline-block;background:var(--btn-bg);color:var(--btn-ink);
  font-weight:700;font-size:1.05rem;text-decoration:none;
  padding:.85rem 1.25rem;border-radius:var(--btn-radius);
  border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--accent-hover);color:var(--btn-ink);text-decoration:none}
.btn-ghost{background:transparent;color:var(--hero-ink);border:2px solid currentColor;padding:.73rem 1.15rem}
.btn-ghost:hover{background:var(--hero-ink);color:var(--hero-bg)}
.kicker{
  font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .75rem;
}
.hero .kicker{color:var(--accent)}
section{padding:clamp(3.5rem,7vw,5.5rem) 0}
section h2{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:clamp(1.85rem,3.6vw,2.6rem);letter-spacing:-0.03em;line-height:1.15;
  margin:0 0 1rem;max-width:22ch;
}
.lead{font-size:1.2rem;max-width:40rem;color:var(--muted);margin:0 0 2rem}
.section-alt{background:var(--bg-alt)}
.grid-4,.grid-3,.grid-2{display:grid;gap:1.25rem}
@media (min-width:800px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:700px) and (max-width:799px){
  .grid-4{grid-template-columns:1fr 1fr}
}
.card{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.35rem 1.35rem 1.5rem;
  box-shadow:var(--shadow);
}
.card h3{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:1.25rem;letter-spacing:-0.02em;margin:.6rem 0 .4rem;line-height:1.2;
}
.card p{margin:0;color:var(--muted);font-size:1.05rem}
.card .num{
  font-family:var(--font-display);font-weight:800;color:var(--accent);
  font-size:1.35rem;letter-spacing:-0.03em;
}
.happen .card{padding-top:1.2rem}
.proof-card{overflow:hidden;padding:0;display:flex;flex-direction:column}
.proof-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line)}
.proof-body{padding:1.25rem 1.35rem 1.45rem}
.proof-body h3{margin-top:0}
.chips{display:flex;gap:.4rem;margin:.6rem 0 0;flex-wrap:wrap}
.chip{width:1.1rem;height:1.1rem;border-radius:3px;border:1px solid var(--line)}
.story{
  display:grid;gap:2rem;align-items:start;
}
@media (min-width:840px){
  .story{grid-template-columns:1.1fr .9fr}
}
.story-aside{
  background:var(--primary);color:#F3F0E8;
  border-radius:var(--radius);padding:1.75rem 1.6rem;
}
body.theme-b .story-aside{background:#1C1C1C;border:1px solid var(--line);color:var(--ink)}
.story-aside p{margin:0 0 1rem}
.story-aside p:last-child{margin:0}
.story-aside strong{display:block;font-family:var(--font-display);font-size:1.35rem;letter-spacing:-0.02em;margin-bottom:.35rem}
.steps{counter-reset:step}
.step{position:relative;padding-left:0}
.step .num{
  display:inline-block;min-width:2.4rem;
}
.pricing-card{display:flex;flex-direction:column}
.pricing-card .price{
  font-family:var(--font-display);font-weight:800;
  font-size:2.35rem;letter-spacing:-0.04em;line-height:1;margin:.4rem 0 .2rem;
  color:var(--ink);
}
.pricing-card .period{color:var(--muted);margin:0 0 1rem;font-size:1rem}
.pricing-card ul{margin:0 0 0 1.1rem;padding:0;color:var(--muted);flex:1}
.pricing-card li{margin:0 0 .45rem}
.pricing-card.featured{
  background:var(--highlight-bg);color:var(--highlight-ink);border-color:transparent;
}
.pricing-card.featured p,
.pricing-card.featured .price,
.pricing-card.featured .period,
.pricing-card.featured ul,
.pricing-card.featured li{
  color:inherit;
}
.pricing-card.featured .period,
.pricing-card.featured ul{opacity:.92}
.pricing-note{margin:1.5rem 0 0;color:var(--muted);max-width:40rem}
.faq details{
  border-top:1px solid var(--line);padding:1rem 0;
}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;letter-spacing:-0.02em;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.75rem 0 0;color:var(--muted);max-width:42rem}
form{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);
  display:grid;gap:1rem;
}
@media (min-width:700px){
  form{grid-template-columns:1fr 1fr}
  form .full{grid-column:1/-1}
}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
input,textarea,select{
  width:100%;font:inherit;color:var(--ink);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--btn-radius);
  padding:.7rem .8rem;
}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form-note{font-size:.95rem;color:var(--muted);margin:0}
.thanks{
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;display:none;
}
.thanks.show{display:block}
.site-footer{background:var(--footer-bg);color:var(--footer-ink);padding:2.5rem 0}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:end}
.site-footer p{margin:0;opacity:.9}
.site-footer a{color:inherit}
.fine{font-size:.9rem;opacity:.75;margin-top:.6rem !important}