/* ==========================================================================
   Big Peach Self Storage — core design system
   Tokens, reset, and site-wide components. Directly editable — no build step.
   ========================================================================== */

:root {
  /* Brand */
  --orange: #f06a39;
  --orange-600: #e05627;
  --orange-700: #c1451c;
  --orange-100: #fde5da;
  --orange-050: #fdf2ec;

  --green: #2f6b3a;
  --green-600: #275a30;
  --green-050: #eef5ef;

  /* Neutrals */
  --ink: #1b1f22;
  --ink-2: #3c4247;
  --ink-3: #626b72;
  --ink-4: #8b949b;
  --line: #e4e7ea;
  --line-2: #eef0f2;
  --surface: #ffffff;
  --surface-warm: #fdfbf8;
  --surface-peach: #fdf5f0;
  --dark: #14181b;

  --danger: #b4341c;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;

  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 27, .06), 0 1px 3px rgba(20, 24, 27, .04);
  --shadow: 0 2px 6px rgba(20, 24, 27, .06), 0 8px 24px rgba(20, 24, 27, .07);
  --shadow-lg: 0 4px 12px rgba(20, 24, 27, .08), 0 18px 48px rgba(20, 24, 27, .12);

  --wrap: 1280px;
  --header-h: 78px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface-warm);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 3.9vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 800; }
h3 { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--orange-700); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: .9375rem; letter-spacing: .01em;
  padding: 13px 22px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; text-decoration: none !important; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-600); color: #fff; }

.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-600); color: #fff; }

.btn-ghost { background: rgba(20,24,27,.35); color: #fff; border-color: rgba(255,255,255,.65); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(20,24,27,.55); color: #fff; }

.btn-outline { background: #fff; color: var(--orange-700); border-color: var(--orange); }
.btn-outline:hover { background: var(--orange-050); color: var(--orange-700); }

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 9px 14px; font-size: .8125rem; white-space: nowrap; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- utility bar ---------- */
.utility {
  background: var(--dark); color: #cfd5da; font-size: .8125rem;
}
.utility .wrap { display: flex; align-items: center; gap: 0; min-height: 42px; flex-wrap: wrap; }
.utility-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 0; }
.utility-item + .utility-item { border-left: 1px solid rgba(255,255,255,.16); padding-left: 18px; }
.utility svg { width: 15px; height: 15px; color: var(--orange); flex: none; }
.utility a { color: #cfd5da; }
.utility a:hover { color: #fff; }
.utility-links { margin-left: auto; display: flex; gap: 22px; }
.utility-links a { font-weight: 500; }
@media (max-width: 900px) { .utility-item:nth-child(n+2) { display: none; } .utility-links { gap: 16px; } }

/* ---------- header ---------- */
.site-header { background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 90; }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img, .brand svg { height: 46px; width: auto; }
.brand:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > * { flex: none; }
.nav a.nav-link, .nav button.nav-link {
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink); padding: 10px 9px; border-radius: 8px; white-space: nowrap;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.nav a.nav-link:hover, .nav button.nav-link:hover { color: var(--orange-700); background: var(--orange-050); text-decoration: none; }
.nav a.nav-link[aria-current="page"] { color: var(--orange-700); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }

.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 262px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 8px; display: none; z-index: 95;
}
.has-menu[data-open="true"] .menu { display: block; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .9375rem; }
.menu a:hover { background: var(--orange-050); color: var(--orange-700); text-decoration: none; }
.menu a small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8125rem; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 2px solid var(--line); border-radius: 8px; padding: 9px 11px; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; color: var(--ink); }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 20px 20px;
    border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-header[data-nav-open="true"] .nav { display: flex; }
  .nav a.nav-link, .nav button.nav-link { padding: 13px 10px; font-size: .875rem; width: 100%; justify-content: space-between; }
  .menu { position: static; display: none; box-shadow: none; border: 0; border-left: 2px solid var(--orange-100); border-radius: 0; margin: 0 0 6px 10px; padding: 2px 0 2px 8px; }
  .nav-actions { margin: 10px 0 0; flex-direction: column; align-items: stretch; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--dark); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(10,13,15,.96) 0%, rgba(10,13,15,.90) 30%, rgba(10,13,15,.62) 52%, rgba(10,13,15,.22) 76%, rgba(10,13,15,.10) 100%),
    linear-gradient(180deg, rgba(10,13,15,.30) 0%, rgba(10,13,15,0) 34%, rgba(10,13,15,.42) 100%);
}
.hero-body { position: relative; padding: clamp(52px, 8vw, 100px) 0 clamp(76px, 9vw, 120px); max-width: 760px; }
.hero h1 { color: #fff; text-transform: uppercase; margin-bottom: .35em; text-shadow: 0 2px 18px rgba(0,0,0,.32); }
.hero h1 .accent { color: var(--orange); }
.hero-sub { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.1875rem); max-width: 34em; margin-bottom: 1.6em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 860px) {
  /* On narrow screens the horizontal scrim leaves the headline over sky — go vertical. */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,13,15,.90) 0%, rgba(10,13,15,.80) 45%, rgba(10,13,15,.62) 70%, rgba(10,13,15,.55) 100%);
  }
  .hero-media img { object-position: center 55%; }
}

/* ---------- feature strip ---------- */
.features { background: var(--surface); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature { display: flex; gap: 14px; align-items: flex-start; padding: 26px 22px; }
.feature + .feature { border-left: 1px solid var(--line-2); }
.feature-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; color: var(--green); }
.feature-ic svg { width: 46px; height: 46px; stroke-width: 1.7; }
.feature h3 { font-size: .875rem; text-transform: uppercase; letter-spacing: .045em; color: var(--green); margin-bottom: 3px; }
.feature p { font-size: .8125rem; color: var(--ink-3); margin: 0; line-height: 1.45; }
@media (max-width: 980px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(odd) { border-left: 0; }
  .feature:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature { border-left: 0 !important; }
  .feature + .feature { border-top: 1px solid var(--line-2); }
}

/* ---------- size guide CTA ---------- */
.sizecta { padding: var(--sp-6) 0 var(--sp-7); }
.sizecta-inner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(94deg, var(--orange) 0%, var(--orange-600) 58%, #d94e22 100%);
  color: #fff; display: flex; align-items: center; gap: 20px; padding: 20px 26px;
  box-shadow: var(--shadow);
}
.sizecta-inner > svg.box { width: 40px; height: 40px; flex: none; }
.sizecta-text { flex: 1; min-width: 0; }
.sizecta-text strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .02em; }
.sizecta-text span { font-size: .9375rem; color: rgba(255,255,255,.94); }
.sizecta .peach { position: absolute; right: -14px; bottom: -30px; width: 152px; opacity: .95; pointer-events: none; }
.sizecta .btn { flex: none; margin-right: 118px; }
@media (max-width: 860px) {
  .sizecta-inner { flex-direction: column; align-items: flex-start; padding-bottom: 26px; }
  .sizecta .btn { margin-right: 0; }
  .sizecta .peach { width: 104px; right: -10px; bottom: -22px; opacity: .5; }
}

/* ---------- sections ---------- */
.section { padding: var(--sp-8) 0; }
.section-warm { background: var(--surface-warm); }
.section-white { background: var(--surface); }
.section-peach { background: var(--surface-peach); }
.section-dark { background: var(--dark); color: #c9d0d6; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto var(--sp-6); text-align: center; }
/* Interior pages carry their page heading here. It is an <h1> for SEO and
   accessibility, but is sized to match the section headings around it. */
.section-head h1 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 800; margin-bottom: .5em; }
.section-head p { color: var(--ink-3); font-size: 1.0625rem; margin: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-700); margin-bottom: 10px;
}

.cardgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--ink-3); font-size: .9375rem; margin: 0; }
.tile-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--orange-050); display: grid; place-items: center; margin-bottom: 14px; }
.tile-ic svg { width: 23px; height: 23px; color: var(--orange-700); }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 17px 50px 17px 20px; font-weight: 700;
  color: var(--ink); position: relative; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item .a { padding: 0 20px 18px; color: var(--ink-3); font-size: .9375rem; }
.faq-item .a > :last-child { margin-bottom: 0; }

/* ---------- modal (tenant login selector) ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  background: rgba(14,17,20,.62); backdrop-filter: blur(3px);
}
.modal-panel {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
}
.modal-head { padding: 22px 24px 8px; position: relative; }
.modal-head h2 { font-size: 1.375rem; margin-bottom: 6px; }
.modal-head p { color: var(--ink-3); font-size: .9375rem; margin: 0; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 8px;
  border: 0; background: var(--line-2); cursor: pointer; display: grid; place-items: center;
}
.modal-close:hover { background: var(--line); }
.modal-close svg { width: 17px; height: 17px; color: var(--ink-2); }
.modal-list { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 9px; }
.modal-list a {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); font-weight: 700;
}
.modal-list a:hover { border-color: var(--orange); background: var(--orange-050); text-decoration: none; }
.modal-list a span.city { flex: 1; }
.modal-list a small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
.modal-list a svg { width: 18px; height: 18px; color: var(--orange); flex: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #a8b1b8; padding: var(--sp-8) 0 var(--sp-5); font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--font-display); color: #fff; font-size: .8125rem; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 14px;
}
.site-footer a { color: #a8b1b8; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-brand img, .footer-brand svg { height: 50px; width: auto; margin-bottom: 16px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--orange); flex: none; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11); margin-top: var(--sp-7); padding-top: var(--sp-4);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: #79838b;
}
.footer-bottom nav { display: flex; gap: 20px; }

/* ---------- misc ---------- */
.breadcrumb { font-size: .8125rem; color: var(--ink-3); padding: 14px 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li::after { content: "/"; margin-left: 8px; color: var(--ink-4); }
.breadcrumb li:last-child::after { content: ""; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.pill-list li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 15px; font-size: .875rem; color: var(--ink-2); font-weight: 600;
}
/* An orange-edged callout box.
   TWO names, same styling, and the distinction is deliberate:

   .callout          permanent customer-facing copy — a tip, a caveat, a
                     "forgot your password?" aside. Ships to production.
   .placeholder-note internal editorial notes-to-ourselves. MUST NOT ship.

   They were one class called .placeholder-note, and that is how internal notes
   ("Content placeholder. Years in business... deliberately left out", "Blog
   structure ready.") sat on the live About and Storage Tips pages: the class on
   a legitimate tenant-login tip made the name look routine, so the real
   placeholders read as normal page furniture. test-content-integrity.js now
   fails if ANY page renders .placeholder-note — which only works because
   genuine callouts use the other name. */
.placeholder-note,
.callout {
  border-left: 3px solid var(--orange); background: var(--orange-050); padding: 12px 16px;
  font-size: .875rem; color: var(--ink-2); border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- embedded contact form (Jotform) ----------
   The card is the Big Peach surface around a third-party iframe we do not
   control. Deliberately NO height, max-height or overflow: Jotform sizes its
   own iframe by posting height messages to its resizer, and any constraint
   here clips the form the moment a validation message or a conditional field
   appears. Width is the only axis we manage. */
.form-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
}
/* Jotform emits its iframe with inline `min-width:100%; max-width:100%` and an
   inline pixel `height` that its resizer then rewrites on every height message.
   Width is normalised here so no inline min-width can push past a narrow phone
   — that is the containment rule the touch test depends on. HEIGHT IS NOT SET,
   deliberately: the inline height is Jotform's to own, and any height or
   max-height here would fight the resizer and clip the form. */
.form-card iframe {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0;
}
.form-card-fallback { font-size: .9375rem; color: var(--ink-2); margin: 0; }

@media (max-width: 600px) {
  .form-card { padding: 10px; border-radius: var(--radius); }
}

/* ==========================================================================
   Utility classes
   These replace the inline style attributes that used to be emitted into the
   generated pages. Presentation belongs here, not in the HTML.
   ========================================================================== */

.u-center      { text-align: center; }
.u-narrow      { max-width: 720px; margin-left: auto; margin-right: auto; }
.u-measure     { max-width: 56ch; margin-left: auto; margin-right: auto; }
.u-prose-mid   { margin-left: auto; margin-right: auto; }
.u-flush-top   { padding-top: 8px; }
.u-mt-0        { margin-top: 0; }
.u-mt-2        { margin-top: 10px; }
.u-mt-4        { margin-top: 16px; }
.u-mt-6        { margin-top: 26px; }
.u-mt-8        { margin-top: 34px; }
.u-mb-3        { margin-bottom: 12px; }
.u-mb-4        { margin-bottom: 16px; }
.u-mb-6        { margin-bottom: 26px; }
.u-mb-7        { margin-bottom: 28px; }

.btn-row       { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row-center{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.panel-title {
  font-family: var(--font-display); font-size: .875rem; text-transform: uppercase;
  letter-spacing: .045em; color: var(--ink); margin-bottom: 10px;
}
.panel-copy  { font-size: .875rem; color: var(--ink-3); }
.panel-copy:last-child { margin-bottom: 0; }

.size-sqft   { color: var(--ink-4); font-weight: 500; font-size: .8em; }

/* ---------- footer credits (StorageRankers standard) ---------- */
.footer-credits {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .8125rem; color: #79838b;
}
.footer-credits a { color: #9aa4ac; font-weight: 600; }
.footer-credits a:hover { color: var(--orange); text-decoration: none; }
.footer-credits .sep { color: #4d565d; }

/* ==========================================================================
   VISUAL SYSTEM — depth, gradient and motion layer
   ==========================================================================
   Added as a controlled system, not scattered effects. Everything below draws
   on the tokens in this block; components do not invent their own shadows or
   gradients. Layered after the base rules so the intent of each override is
   readable in one place.
   ========================================================================== */

:root {
  /* ---- gradients ---- */
  --gradient-orange:      linear-gradient(135deg, #f47b4d 0%, #f06a39 48%, #d94e22 100%);
  --gradient-orange-hover:linear-gradient(135deg, #f2703f 0%, #e85f2c 48%, #c8451c 100%);
  --gradient-dark:        linear-gradient(135deg, #111619 0%, #1b2226 55%, #1d2622 100%);
  --gradient-dark-deep:   linear-gradient(140deg, #0e1214 0%, #171d21 50%, #1c2723 100%);
  --gradient-peach:       linear-gradient(180deg, #fffaf7 0%, #fdf1e9 100%);
  --gradient-warm:        linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  --gradient-green:       linear-gradient(135deg, #3a7d47 0%, #2f6b3a 55%, #24552d 100%);
  --gradient-surface:     linear-gradient(180deg, #ffffff 0%, #fcfaf8 100%);
  --gradient-price:       linear-gradient(180deg, #fffdfb 0%, #fdf4ee 100%);

  /* ---- shadows ---- */
  --shadow-card:    0 8px 24px rgba(27,31,34,.08), 0 2px 6px rgba(27,31,34,.05);
  --shadow-raised:  0 20px 50px rgba(27,31,34,.14), 0 5px 14px rgba(27,31,34,.08);
  --shadow-float:   0 28px 64px rgba(27,31,34,.18), 0 8px 20px rgba(27,31,34,.10);
  --shadow-btn:     0 4px 10px rgba(27,31,34,.10);
  --shadow-orange:  0 10px 24px rgba(240,106,57,.24);
  --shadow-orange-strong: 0 14px 30px rgba(240,106,57,.32);
  --shadow-green:   0 10px 22px rgba(47,107,58,.22);
  --shadow-header:  0 1px 0 rgba(27,31,34,.06), 0 6px 20px rgba(27,31,34,.07);
  --shadow-menu:    0 18px 44px rgba(17,22,25,.18), 0 4px 12px rgba(17,22,25,.10);

  /* ---- highlights & glows ---- */
  --inset-top:      inset 0 1px 0 rgba(255,255,255,.55);
  --inset-top-dark: inset 0 1px 0 rgba(255,255,255,.14);
  --glow-orange:    radial-gradient(60% 70% at 18% 40%, rgba(240,106,57,.18) 0%, rgba(240,106,57,0) 70%);
  --edge-orange:    linear-gradient(90deg, rgba(240,106,57,0) 0%, rgba(240,106,57,.85) 50%, rgba(240,106,57,0) 100%);

  /* ---- motion ---- */
  --ease:        cubic-bezier(.22, .68, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-fast:    .16s;
  --dur:         .24s;
  --dur-slow:    .42s;
  --lift:        -3px;
  --lift-strong: -5px;
}

/* ---------- buttons ---------- */
.btn {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(var(--lift)); }
.btn:active { transform: translateY(-1px); }

.btn-primary {
  background: var(--gradient-orange);
  box-shadow: var(--shadow-orange), var(--inset-top);
  border-color: transparent;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #f2703f 0%, #e85f2c 48%, #c8451c 100%);
  box-shadow: var(--shadow-orange-strong), var(--inset-top);
}

.btn-green {
  background: var(--gradient-green);
  box-shadow: var(--shadow-green), var(--inset-top-dark);
}
.btn-green:hover {
  background: linear-gradient(135deg, #34733f 0%, #2a6134 55%, #1f4b27 100%);
  box-shadow: 0 14px 28px rgba(47,107,58,.3), var(--inset-top-dark);
}

.btn-dark {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-btn), var(--inset-top-dark);
}
.btn-dark:hover { background: var(--gradient-dark-deep); box-shadow: 0 10px 22px rgba(17,22,25,.26), var(--inset-top-dark); }

.btn-outline {
  background: linear-gradient(180deg, #fff 0%, #fffaf7 100%);
  box-shadow: 0 1px 2px rgba(27,31,34,.05);
}
.btn-outline:hover {
  background: linear-gradient(180deg, #fff4ee 0%, #fde8dd 100%);
  border-color: var(--orange-600);
  box-shadow: 0 6px 16px rgba(240,106,57,.18);
}

.btn-ghost {
  background: rgba(16,20,23,.42);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.22), var(--inset-top-dark);
}
.btn-ghost:hover { background: rgba(16,20,23,.62); border-color: rgba(255,255,255,.8); }

/* ---------- utility bar & header ---------- */
.utility {
  background: var(--gradient-dark);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.site-header {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid rgba(27,31,34,.05);
}
/* A hairline of brand colour under the header ties it to the hero below. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--edge-orange); opacity: .5; pointer-events: none;
}
.site-header { position: sticky; }

.nav a.nav-link, .nav button.nav-link { transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav a.nav-link:hover, .nav button.nav-link:hover { background: var(--orange-050); }
.nav a.nav-link[aria-current="page"] { position: relative; }
.nav a.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px;
  background: var(--orange); border-radius: 2px;
}

/* ---------- dropdown menus ---------- */
.menu {
  box-shadow: var(--shadow-menu);
  border-color: rgba(27,31,34,.08);
  padding: 10px;
  transform-origin: top left;
}
.has-menu[data-open="true"] .menu { animation: menu-in var(--dur) var(--ease-out) both; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.menu a { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.menu a:hover, .menu a:focus-visible { background: var(--orange-050); }

/* Tenant-login selector — a premium navigation component, not a bare list. */
.login-menu .menu {
  right: 0; left: auto; min-width: 316px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
  transform-origin: top right;
}
.menu-title {
  margin: 2px 4px 8px; padding: 0 8px 9px;
  font-family: var(--font-display); font-size: .6875rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}
.menu-login a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px; border-radius: 9px; border: 1px solid transparent;
}
.menu-login a strong { font-size: .9375rem; color: var(--ink); font-weight: 700; }
.menu-login a small { font-size: .8125rem; color: var(--ink-3); font-weight: 400; }
.menu-login a:hover, .menu-login a:focus-visible {
  background: linear-gradient(180deg, #fff4ee 0%, #fdeae0 100%);
  border-color: rgba(240,106,57,.28);
}
.menu-login a:hover strong, .menu-login a:focus-visible strong { color: var(--orange-700); }
.login-trigger svg:last-child { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.has-menu[data-open="true"] .login-trigger svg:last-child { transform: rotate(180deg); }

@media (max-width: 767px) {
  /* Inside the mobile nav the selector is a full-width list with large targets. */
  .login-menu { width: 100%; }
  .login-menu .login-trigger { width: 100%; justify-content: space-between; }
  .login-menu .menu { min-width: 0; width: 100%; animation: none; }
  .menu-login a { padding: 15px 12px; }
  .menu-login a strong { font-size: 1rem; }
  .nav .menu { background: var(--surface-warm); }
}

/* ---------- hero ---------- */
.hero-media::after {
  background:
    var(--glow-orange),
    linear-gradient(96deg, rgba(10,13,15,.95) 0%, rgba(10,13,15,.88) 28%, rgba(10,13,15,.60) 52%, rgba(10,13,15,.20) 78%, rgba(10,13,15,.06) 100%),
    linear-gradient(180deg, rgba(10,13,15,.34) 0%, rgba(10,13,15,0) 30%, rgba(10,13,15,.10) 62%, rgba(10,13,15,.52) 100%);
}
/* Lower vignette: seats the hero against whatever follows it. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, rgba(10,13,15,0) 0%, rgba(10,13,15,.30) 100%);
  pointer-events: none; z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
.hero-sub { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero-actions .btn { box-shadow: var(--shadow-orange-strong), var(--inset-top); }
.hero-actions .btn-ghost { box-shadow: 0 10px 26px rgba(0,0,0,.3), var(--inset-top-dark); }
.hero-feature .ic {
  background: rgba(255,255,255,.07);
  box-shadow: var(--inset-top-dark), 0 4px 12px rgba(0,0,0,.2);
  backdrop-filter: blur(2px);
}

/* ---------- feature strip ---------- */
.features { background: var(--gradient-warm); }
.feature-ic {
  border-radius: 14px;
  background: linear-gradient(180deg, #f3f8f3 0%, #e9f2ea 100%);
  box-shadow: var(--inset-top), 0 2px 6px rgba(27,31,34,.05);
}
.feature-ic svg { width: 26px; height: 26px; stroke-width: 1.9; }
.feature { transition: background var(--dur) var(--ease); }
.feature:hover { background: rgba(240,106,57,.03); }

/* ---------- sections ---------- */
.section-white { background: var(--gradient-surface); }
.section-peach { background: var(--gradient-peach); position: relative; }
.section-warm  { background: var(--surface-warm); }
.section-dark  { background: var(--gradient-dark-deep); position: relative; overflow: hidden; }
.section-dark::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(240,106,57,.16) 0%, rgba(240,106,57,0) 65%);
  pointer-events: none;
}
.section-dark .wrap { position: relative; z-index: 1; }
/* One restrained decorative peach glow, on the peach section only. */
.section-peach::after {
  content: ""; position: absolute; right: -80px; top: -60px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(240,106,57,.10) 0%, rgba(240,106,57,0) 70%);
  pointer-events: none;
}

.eyebrow { position: relative; padding-bottom: 2px; }
.section-head h2::after, .section-head h1::after {
  content: ""; display: block; width: 46px; height: 3px; margin: 14px auto 0;
  background: var(--edge-orange); border-radius: 2px;
}

/* ---------- tiles ---------- */
.tile {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
}
.tile:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-raised); }
.tile-ic {
  background: linear-gradient(180deg, #fff2ea 0%, #fde3d6 100%);
  box-shadow: var(--inset-top);
}

/* ---------- size-guide CTA ---------- */
.sizecta-inner {
  background: var(--gradient-orange);
  box-shadow: var(--shadow-orange-strong), var(--inset-top);
}
.sizecta-inner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 12% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.sizecta-inner > * { position: relative; z-index: 1; }
.sizecta .btn-green { box-shadow: 0 8px 20px rgba(0,0,0,.22), var(--inset-top-dark); }

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  overflow: hidden;
}
.faq-item:hover { box-shadow: var(--shadow-raised); }
.faq-item[open] {
  border-color: rgba(240,106,57,.34);
  box-shadow: var(--shadow-raised);
}
.faq-item[open] summary {
  background: linear-gradient(180deg, #fff6f1 0%, #fdefe7 100%);
  color: var(--orange-700);
}
.faq-item summary { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq-item[open] .a { animation: reveal var(--dur) var(--ease-out) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- modal ---------- */
.modal-panel { box-shadow: var(--shadow-float); }
.modal[data-animate="in"] .modal-panel { animation: modal-in var(--dur-slow) var(--ease-out) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-list a { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.modal-list a:hover { transform: translateX(2px); box-shadow: 0 4px 12px rgba(240,106,57,.14); }

/* ---------- footer ---------- */
.site-footer {
  background: linear-gradient(140deg, #14181b 0%, #1a2124 45%, #1d2a23 100%);
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--edge-orange);
}
.site-footer::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(240,106,57,.09) 0%, rgba(240,106,57,0) 70%);
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid > div + div { padding-left: 4px; }
@media (min-width: 941px) {
  .footer-grid > div + div { border-left: 1px solid rgba(255,255,255,.07); padding-left: 30px; }
}
.site-footer h4 { position: relative; padding-bottom: 10px; }
.site-footer h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: var(--orange); border-radius: 2px; opacity: .8;
}
.site-footer a { transition: color var(--dur-fast) var(--ease); }
.footer-credits a { transition: color var(--dur-fast) var(--ease); }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .tile:hover, .loc-card:hover, .unit-card:hover { transform: none !important; }
  .has-menu[data-open="true"] .menu,
  .modal[data-animate="in"] .modal-panel,
  .faq-item[open] .a { animation: none !important; }
}

/* ---------- corrections found in visual QA ---------- */

/* Nav chevrons had no intrinsic size. On desktop the flex row masked it; inside
   the full-width mobile nav the SVG stretched to fill the row. */
.nav .nav-link svg,
.nav .login-trigger svg { width: 15px; height: 15px; flex: none; }
.nav .login-trigger svg:first-child { width: 16px; height: 16px; }

@media (max-width: 767px) {
  /* Mobile submenus sit flush inside the nav panel instead of overhanging it. */
  .nav .menu {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: 10px;
    background: linear-gradient(180deg, #fffaf7 0%, #fdf3ec 100%);
    box-shadow: inset 0 1px 3px rgba(27,31,34,.04);
  }
  .nav .menu a { padding: 13px 12px; }
  .nav-actions { gap: 10px; }
}

/* ==========================================================================
   TARGETED VISUAL CORRECTIONS
   ========================================================================== */

/* ---------- brand lockup ----------
   The supplied original horizontal artwork, used as a plain image. There is no
   typeset wordmark: BIGPEACH and SELF STORAGE are the client's own pixels. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: auto; width: 176px; display: block; transition: transform var(--dur) var(--ease); }
.brand:hover { text-decoration: none; }
.brand:hover img { transform: translateY(-1px); }

.footer-brand .brand-footer { display: inline-block; margin-bottom: 18px; }
.footer-brand .brand-footer img { width: 196px; }

@media (max-width: 767px) { .brand img { width: 178px; } }
@media (max-width: 560px)  { .brand img { width: 152px; } }

/* ---------- 6. header as an elevated card ---------- */
.site-header {
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
  padding: 12px 0;
}
.site-header::after { display: none; }
.header-card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  border: 1px solid rgba(27,31,34,.07);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17,22,25,.13), 0 2px 6px rgba(17,22,25,.06), var(--inset-top);
  padding: 0 18px;
  position: relative;
}
.header-card::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: var(--edge-orange); opacity: .45; pointer-events: none;
}
.site-header .wrap.header-card { max-width: calc(var(--wrap) - 8px); }
@media (max-width: 767px) {
  .site-header { padding: 10px 0; }
  .header-card { border-radius: 14px; padding: 0 14px; }
  .site-header[data-nav-open="true"] .header-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .nav { left: 0; right: 0; border-radius: 0 0 14px 14px; border: 1px solid rgba(27,31,34,.07); border-top: 0; }
}

/* ---------- 4. feature icons ---------- */
.feature-ic {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(180deg, #f5faf5 0%, #e7f1e9 100%);
  box-shadow: var(--inset-top), 0 3px 10px rgba(27,31,34,.07);
  border: 1px solid rgba(47,107,58,.10);
  color: var(--green);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-ic svg { width: 27px; height: 27px; stroke-width: 1.7; }
.feature:hover .feature-ic { transform: translateY(-2px); box-shadow: var(--inset-top), 0 8px 18px rgba(47,107,58,.16); }

/* ---------- 5. brand peach in the orange bar ---------- */
.sizecta .peach {
  position: absolute; right: -26px; bottom: -46px; width: 210px; height: auto;
  opacity: .96; pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(90,30,6,.28));
  transform: rotate(-6deg);
}
@media (max-width: 860px) {
  .sizecta .peach { width: 140px; right: -22px; bottom: -34px; opacity: .55; }
}

/* ---------- 7. richer gradients ---------- */
:root {
  --gradient-orange:   linear-gradient(135deg, #f9884f 0%, #f06a39 46%, #cf4519 100%);
  --gradient-dark:     linear-gradient(135deg, #0f1518 0%, #1b2429 52%, #22302a 100%);
  --gradient-dark-deep:linear-gradient(142deg, #0b0f11 0%, #161e22 48%, #1d2b25 100%);
  --gradient-peach:    linear-gradient(180deg, #fffaf6 0%, #fdeee3 62%, #fce7d9 100%);
  --gradient-warm:     linear-gradient(180deg, #ffffff 0%, #fdf9f5 100%);
  --gradient-green:    linear-gradient(135deg, #408a4e 0%, #2f6b3a 52%, #1f4c28 100%);
  --gradient-surface:  linear-gradient(180deg, #ffffff 0%, #fbf8f4 100%);
  --gradient-price:    linear-gradient(180deg, #fffdfa 0%, #fdf0e6 100%);
  --shadow-orange:        0 12px 26px rgba(240,106,57,.30);
  --shadow-orange-strong: 0 16px 34px rgba(240,106,57,.40);
}
.section-warm { background: linear-gradient(180deg, #fdfbf8 0%, #fbf6f1 100%); }
.section-peach::after { background: radial-gradient(circle, rgba(240,106,57,.15) 0%, rgba(240,106,57,0) 70%); }
.section-dark::before { background: radial-gradient(72% 100% at 50% 0%, rgba(240,106,57,.22) 0%, rgba(240,106,57,0) 66%); }

/* ---------- 1. hero composition ----------
   The facility photo now occupies the right-hand portion of the hero rather than
   bleeding edge to edge. That shows MORE of each photograph (the container is
   closer to the source's own 16:9, so less is cropped away), moves the building
   right of centre, and leaves a genuinely dark left field for the headline
   instead of relying on a gradient fighting a bright sky. */
.hero { background: var(--gradient-dark-deep); }

.hero-media { left: 30%; }
.hero-media img { object-position: center 46%; }
.hero-media::after { display: none; }   /* scrim moves to .hero::before, full width */

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 78% at 14% 42%, rgba(240,106,57,.16) 0%, rgba(240,106,57,0) 72%),
    linear-gradient(97deg,
      rgba(9,12,14,.99) 0%,
      rgba(9,12,14,.97) 26%,
      rgba(9,12,14,.86) 38%,
      rgba(9,12,14,.52) 50%,
      rgba(9,12,14,.20) 66%,
      rgba(9,12,14,.06) 82%,
      rgba(9,12,14,.02) 100%),
    linear-gradient(180deg, rgba(9,12,14,.42) 0%, rgba(9,12,14,0) 26%, rgba(9,12,14,.08) 60%, rgba(9,12,14,.58) 100%);
}
.hero::after { z-index: 1; }

@media (max-width: 1180px) { .hero-media { left: 18%; } }
@media (max-width: 860px) {
  .hero-media { left: 0; }
  .hero-media img { object-position: center 52%; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(9,12,14,.92) 0%, rgba(9,12,14,.82) 42%, rgba(9,12,14,.66) 72%, rgba(9,12,14,.60) 100%);
  }
}

/* ---------- header fit ----------
   The supplied horizontal lockup is wider than a bare mark, so the nav gives
   back a little room before the card would overflow at 1440. */
.site-header .wrap.header-card { gap: 14px; min-height: 84px; }
.nav a.nav-link, .nav button.nav-link { padding: 9px 7px; font-size: .78rem; letter-spacing: .035em; }
.nav-actions { gap: 7px; margin-left: 8px; }
.nav-actions .btn-sm { padding: 9px 12px; font-size: .78rem; }
.login-trigger { gap: 7px; }


/* ---------- 1. hero composition ----------
   The facility photo now occupies the right-hand portion of the hero rather than
   bleeding edge to edge. That shows MORE of each photograph (the container is
   closer to the source's own 16:9, so less is cropped away), moves the building
   right of centre, and leaves a genuinely dark left field for the headline
   instead of relying on a gradient fighting a bright sky. */
.hero { background: var(--gradient-dark-deep); }

.hero-media { left: 30%; }
.hero-media img { object-position: center 46%; }
.hero-media::after { display: none; }   /* scrim moves to .hero::before, full width */

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 78% at 14% 42%, rgba(240,106,57,.16) 0%, rgba(240,106,57,0) 72%),
    linear-gradient(97deg,
      rgba(9,12,14,.99) 0%,
      rgba(9,12,14,.97) 26%,
      rgba(9,12,14,.86) 38%,
      rgba(9,12,14,.52) 50%,
      rgba(9,12,14,.20) 66%,
      rgba(9,12,14,.06) 82%,
      rgba(9,12,14,.02) 100%),
    linear-gradient(180deg, rgba(9,12,14,.42) 0%, rgba(9,12,14,0) 26%, rgba(9,12,14,.08) 60%, rgba(9,12,14,.58) 100%);
}
.hero::after { z-index: 1; }

@media (max-width: 1180px) { .hero-media { left: 18%; } }
@media (max-width: 860px) {
  .hero-media { left: 0; }
  .hero-media img { object-position: center 52%; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(9,12,14,.92) 0%, rgba(9,12,14,.82) 42%, rgba(9,12,14,.66) 72%, rgba(9,12,14,.60) 100%);
  }
}

/* Seat the brand peach inside the bar so the mark reads whole, bleeding only
   past the lower edge rather than being cut through the door. */
.sizecta-inner { overflow: visible; }
.sizecta .peach {
  right: 14px; bottom: -30px; width: 168px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 10px 20px rgba(90,30,6,.32));
}
.sizecta { overflow: hidden; padding-bottom: calc(var(--sp-7) + 6px); }
@media (max-width: 860px) { .sizecta .peach { width: 118px; right: 8px; bottom: -22px; opacity: .6; } }

/* Feather the photograph's own left edge so it dissolves into the dark field
   instead of meeting it at a visible vertical seam. */
.hero-media {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 9%, rgba(0,0,0,1) 28%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 9%, rgba(0,0,0,1) 28%);
}
@media (max-width: 860px) {
  .hero-media { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 2. feature icons — more visual presence ----------
   Same custom artwork, given the weight the approved mockup shows: a larger
   container, larger glyph, heavier stroke and stronger orange accents, so the
   row reads as a designed feature band rather than four small utility marks. */
.feature { gap: 18px; padding: 30px 24px; }
.feature-ic {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(180deg, #f6fbf6 0%, #e4f0e6 100%);
  box-shadow: var(--inset-top), 0 4px 12px rgba(27,31,34,.09);
  border: 1px solid rgba(47,107,58,.13);
}
.feature-ic svg { width: 33px; height: 33px; stroke-width: 1.95; }
/* Accent strokes carry a touch more weight than the outline so they register. */
.feature-ic svg [stroke="#f06a39"] { stroke-width: 2.15; }
.feature h3 { font-size: .9375rem; margin-bottom: 5px; }
.feature p { font-size: .875rem; }
.feature:hover .feature-ic { transform: translateY(-2px); box-shadow: var(--inset-top), 0 10px 22px rgba(47,107,58,.20); }

@media (max-width: 560px) {
  .feature { padding: 24px 20px; gap: 16px; }
  .feature-ic { width: 58px; height: 58px; }
  .feature-ic svg { width: 30px; height: 30px; }
}

/* ---------- header logo prominence ----------
   The supplied lockup carries its own internal padding, so it needs more CSS
   width than a tightly-cropped mark to read at the size the mockup shows. The
   nav gives back the difference through slightly tighter tracking.

   Note: .wrap is capped at 1280px, so the header card is the same width at
   1600 as at 1366 — one desktop scale serves every width above the collapse
   breakpoint. */
.brand img { width: 196px; }

/* Desktop. These values were squeezed to fit seven links plus a button beside
   a 292px lockup; with Storage Units and Vehicle Parking gone from the bar
   there is roughly 300px of slack, so the type goes back up to a comfortable
   size and the items get real breathing room. */
@media (min-width: 1200px) {
  .nav a.nav-link, .nav button.nav-link { padding: 11px 14px; font-size: .8125rem; letter-spacing: .045em; }
  .nav { gap: 4px; }
  .nav-actions { gap: 10px; margin-left: 14px; }
  .nav-actions .btn-sm { padding: 11px 16px; font-size: .8125rem; }
  .site-header .wrap.header-card { gap: 18px; }
}
@media (max-width: 767px) { .brand img { width: 190px; } }
@media (max-width: 560px)  { .brand img { width: 158px; } }

/* ==========================================================================
   FINAL REVIEW BUILD
   Items 1-6. Everything below is additive; nothing above was deleted, so the
   approved visual language is intact and these rules only override the
   specific properties named.
   ========================================================================== */

/* ---------- 1. brand lockup at full size ----------
   The supplied horizontal artwork is 900 x 307, so a 292px width renders at
   99.6px tall. --header-float is that height plus the card's own padding and
   the header's outer padding; the hero and the interior masthead both use it
   to reserve room for the card that now floats over them. Change the logo
   width and this one variable together or the card will clip its background. */
:root { --header-float: 150px; }

.brand img { width: 292px; }
.footer-brand .brand-footer img { width: 294px; }

.site-header .wrap.header-card { min-height: 124px; }

@media (max-width: 767px) {
  :root { --header-float: 122px; }
  .brand img { width: 236px; }
  .site-header .wrap.header-card { min-height: 100px; }
}
@media (max-width: 560px) {
  :root { --header-float: 106px; }
  .brand img { width: 196px; }
  .footer-brand .brand-footer img { width: 236px; }
  .site-header .wrap.header-card { min-height: 86px; }
}


/* ---------- 3. the menu card floats over the hero ----------
   Previously the header sat in its own white band and the hero began below it.
   Pulling the header's own height back out of the flow lets the photograph run
   all the way up to the utility bar, with the card sitting on top of it. The
   header stays sticky, so the card detaches from the photo and rides down the
   page as before. */
.site-header {
  position: sticky;
  top: 0;
  margin-bottom: calc(-1 * var(--header-float));
}

/* Every first-child banner reserves the space the card no longer occupies. */
.hero-body { padding-top: calc(var(--header-float) + clamp(28px, 4vw, 56px)); }

/* Interior pages: a dark gradient masthead in place of the white strip. The
   breadcrumb bar IS the masthead — no page markup changed.

   Scoped to :first-child because location pages put the breadcrumb AFTER their
   photographic hero, where it is a footer to the banner rather than the banner
   itself; there it must not reserve room for a card that is nowhere near it. */
main > .breadcrumb:first-child {
  background:
    radial-gradient(64% 150% at 12% 0%, rgba(240,106,57,.20) 0%, rgba(240,106,57,0) 70%),
    var(--gradient-dark-deep);
  color: rgba(255,255,255,.72);
  padding: calc(var(--header-float) + 18px) 0 26px;
  position: relative;
}
.breadcrumb { position: relative; }
.breadcrumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gradient-orange); opacity: .9;
}
.breadcrumb a { color: rgba(255,255,255,.82); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li::after { color: rgba(255,255,255,.34); }
.breadcrumb li[aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- 2. header nav without the Rent Storage button ----------
   Rental calls to action live in the hero, on every unit card, in the size
   guide bar and in the footer. In the bar they competed with Tenant Login,
   which is the one thing a returning customer is looking for. */
.nav-actions { margin-left: 10px; }

/* ---------- 5 & 6. scroll reveal ----------
   Every hidden state is scoped to html.js-reveal, which js/reveal.js sets in
   <head> before first paint. Without JavaScript the class never appears, none
   of these rules match, and the page renders fully visible. That is the whole
   progressive-enhancement contract; do not move a hidden state out of this
   scope. */
:root {
  --reveal-dur: 620ms;
  --reveal-step: 95ms;      /* item 6: 80-120ms stagger */
  --reveal-rise: 26px;
  --reveal-rise-card: 44px; /* item 6: 40-50px slide */
  --reveal-ease: cubic-bezier(.22,.61,.36,1);   /* decelerating, no overshoot */
}

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
  will-change: opacity, transform;
}
html.js-reveal [data-reveal="scale"] { transform: scale(.98); }
html.js-reveal [data-reveal="slide"] { transform: translate3d(0, var(--reveal-rise-card), 0); }

html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Belt and braces: if the media query flips after load, or the class is
   present on a machine that would rather not see motion, everything is
   immediately in its final state. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* The units-scope note sits under the freshness line and explains that the
   list covers one size band. */
.units-scope {
  font-size: .875rem; color: var(--ink-3); line-height: 1.5;
  background: var(--surface-warm); border: 1px solid var(--line-2);
  border-left: 3px solid var(--orange); border-radius: 8px;
  padding: 10px 14px; margin: -4px 0 18px;
}
.units-scope strong { color: var(--ink-2); }

/* ---------- 7. the supplied peach on the orange bar ----------
   The supplied artwork is very nearly square (475 x 490) where the previous
   mark was wide (675 x 455), so the same width renders half as tall again.
   Sized and positioned here so it sits behind the button rather than over it. */
.sizecta .peach {
  width: 148px; right: -14px; bottom: -34px;
  transform: rotate(-7deg);
  z-index: 0;
}
.sizecta-inner { position: relative; z-index: 1; }
@media (max-width: 1100px) { .sizecta .peach { width: 118px; right: -12px; bottom: -26px; opacity: .8; } }
@media (max-width: 860px)  { .sizecta .peach { width: 96px; right: -10px; bottom: -20px; opacity: .5; } }

/* ---------- validation fixes ----------
   .section-peach::after is a decorative glow offset 80px past the right edge.
   Without a clip it widened the document by exactly that much, which put a
   horizontal scrollbar on the homepage at every viewport width. */
.section-peach { overflow: hidden; }

/* The header's own box is 148px tall (12px padding, a 124px card, 12px
   padding). --header-float must match it exactly or the hero slips under the
   utility bar. */
:root { --header-float: 148px; }
@media (max-width: 767px) { :root { --header-float: 120px; } }
@media (max-width: 560px)  { :root { --header-float: 106px; } }

/* ==========================================================================
   TABLET NAVIGATION — 768px to 1199px
   ==========================================================================
   The hamburger now belongs to phones only. An iPad Air is 820px portrait and
   1180px landscape, and on a screen that size hiding the whole site behind a
   menu button is a downgrade, not a responsive design.

   Cramming a 292px lockup and eight nav items into one 820px row is the other
   wrong answer, so the card becomes two rows: the logo owns the first, the
   navigation owns the second, full width, with Tenant Login still on it. The
   card keeps its rounded corners and shadow. Above 1200px the single-row
   desktop layout is unchanged.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  /* The card is taller because it is two rows; --header-float must follow it
     or the hero will slide under the floating card. */
  :root { --header-float: 190px; }

  .nav-toggle { display: none !important; }

  .site-header .wrap.header-card {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    padding: 10px 18px 4px;
    min-height: 0;
  }

  .brand { flex: 0 0 100%; justify-content: flex-start; }
  .brand img { width: 268px; }

  /* Row two. Static, not the absolute mobile panel — this is real navigation,
     not a drawer, so it is always visible and never toggled. */
  .nav {
    display: flex !important;
    position: static;
    flex: 0 0 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px 4px;
    margin: 4px 0 0;
    padding: 6px 0 8px;
    border: 0;
    border-top: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  .nav a.nav-link, .nav button.nav-link {
    width: auto;
    justify-content: center;
    padding: 9px 8px;
    font-size: .78rem;
    letter-spacing: .03em;
  }

  /* Tenant Login stays part of the navigation, pushed to the end of the row. */
  .nav-actions {
    flex-direction: row;
    align-items: center;
    margin: 0 0 0 auto;
    gap: 8px;
  }
  .nav-actions .btn-sm { padding: 9px 13px; font-size: .78rem; }
  .login-menu { width: auto; }
  .login-menu .login-trigger { width: auto; }

  /* Dropdowns overlay the page again rather than pushing the row open. */
  .has-menu { position: relative; }
  .nav .menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: auto;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 40px));
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background: #fff;
  }
  .nav .has-menu:first-child .menu { left: 0; right: auto; }
  .nav .menu a { padding: 11px 12px; }

  .header-card { border-radius: 16px; }
  .site-header[data-nav-open="true"] .header-card {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

/* Narrow tablets — 768 to 1023.
   This range is an iPad held in portrait, so the targets have to be finger
   sized. The previous pass squeezed the row onto one line at .672rem with 8px
   of padding, which fit but was not usable; comfort wins over row count here.
   Links wrap into two rows, each target is at least 44px tall, and the type
   stays at .78rem. --header-float is measured against the resulting card. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Grid rather than wrap, so the two rows are balanced by construction —
     three and three — instead of whatever split the text lengths happen to
     produce. The six children are the five links plus .nav-actions. Change the
     column count if the nav gains or loses an item. */
  .nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 6px;
    padding: 8px 0 10px;
  }
  .nav a.nav-link,
  .nav button.nav-link {
    min-height: 44px;
    padding: 11px 12px;
    font-size: .78rem;
    letter-spacing: .03em;
    align-items: center;
  }
  .nav .nav-link svg { width: 15px; height: 15px; }

  /* Tenant Login is a nav item at this size, not a trailing action: it sits in
     the flow so the two rows balance instead of one row carrying the button
     alone at the far right. */
  .nav-actions { margin: 0; gap: 8px; justify-content: center; }
  .nav-actions, .login-menu { width: 100%; }
  .nav-actions .btn-sm { width: 100%; min-height: 44px; padding: 11px 12px; font-size: .78rem; }
  .login-trigger { min-height: 44px; }
  /* The dropdown is wider than one grid cell, so anchor it to the right edge
     of the nav rather than of its 1fr column. */
  .nav .login-menu .menu { right: 0; left: auto; min-width: 280px; }

  .brand img { width: 252px; }
  .site-header .wrap.header-card { padding: 10px 18px 6px; }
}

/* 1024-1199 — iPad landscape. One row is allowed here only because every
   target still clears 44px at a readable size; if a link were ever added that
   forced compression, the row would wrap rather than shrink. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav a.nav-link,
  .nav button.nav-link { min-height: 44px; padding: 11px 9px; font-size: .78rem; align-items: center; }
  .nav-actions .btn-sm { min-height: 44px; padding: 11px 14px; font-size: .78rem; }
  .login-trigger { min-height: 44px; }
}

/* Card height is a fixed negative margin, so it has to be right per range.
   Measured, not guessed: two rows plus the header's own 12px padding. */
@media (min-width: 768px)  and (max-width: 1023px) { :root { --header-float: 243px; } }
@media (min-width: 1024px) and (max-width: 1199px) { :root { --header-float: 194px; } }


/* ==========================================================================
   HORIZONTAL CONTAINMENT
   ==========================================================================
   iOS Safari treats any content outside the viewport as somewhere the user is
   allowed to drag to, which is what made the page feel unanchored on an iPad:
   a horizontal swipe would slide the whole document sideways and let it snap
   back. The cure is to stop producing out-of-viewport boxes at all. The
   blanket rules at the bottom of this block are a backstop, not the fix — an
   element parked at left:-9999px still creates a draggable region under
   overflow-x:hidden in some engines, so each offender is corrected at source
   first.

   Diagnosed offenders, both corrected below:
     .skip-link      parked at left:-9999px  (every page)
     .sizecta .peach overhung the right edge at 1024-1199px viewport widths
   ========================================================================== */

/* 1. The skip link. Same behaviour — invisible until focused, then the first
      thing a keyboard user reaches — but it now occupies a 1px box inside the
      viewport instead of sitting 10,000px to the left of it. */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 12px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* 2. The peach may overhang the orange bar — that is the design — but it may
      never overhang the viewport. Clipping at the section keeps the overhang
      against the bar and throws away anything past the page edge. */
.sizecta { overflow: hidden; }

/* 3. Backstop. If anything is ever added that reaches past the right edge,
      the page still cannot be dragged sideways. overflow-x:hidden alone would
      also make the element scrollable-to; clip is the stronger form and is
      used wherever it is supported. Vertical scrolling and pinch zoom are
      untouched — neither overflow-x nor overscroll-behavior-x affects them. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* 4. Grid and flex children default to min-width:auto, which refuses to shrink
      below their content and is the usual reason a long word, a wide image or
      a nowrap price row pushes a whole layout past the viewport. */
.wrap,
main,
section,
.loc-grid > *,
.unit-grid > *,
.features-grid > *,
.cardgrid > *,
.loc-card,
.unit-card,
.tile,
.panel-row > *,
.loc-card-media,
.unit-thumb,
.hero-media,
.sizecta-inner,
.sizecta-text {
  min-width: 0;
  max-width: 100%;
}

/* Media never reports a width larger than the box it is in. */
img,
picture,
svg,
video,
iframe,
table {
  max-width: 100%;
}

/* The peach's overhang is measured against the wrap's 20px gutter. On a wide
   desktop there is 80px of gutter and it can hang past the bar; from tablet
   down the gutter is only 20px, and the rotated bounding box would reach past
   the viewport edge — visually clipped, but still a box outside the viewport,
   which is exactly what makes iOS think there is somewhere to drag to. */
@media (max-width: 1320px) {
  .sizecta .peach { right: 10px; }
}

/* ==========================================================================
   HOMEPAGE HERO — HeroSign1.png
   ==========================================================================
   The supplied photograph already places the sign; nothing here moves it. The
   image simply fills the hero with object-fit: cover, and ONE horizontal
   gradient darkens the left for the headline.

   Deliberately absent, because the previous source needed them and this one
   does not: no translate, no natural-width sizing, no vertical mask, no top
   vignette, no bottom feather, no right-edge fade, no separate strip behind
   the menu card. The card floats directly on the photograph.

   Scoped to .hero-photo-fade so the four location heroes are untouched.
   ========================================================================== */
.hero-photo-fade { background: #050b11; }

.hero-photo-fade .hero-media { position: absolute; inset: 0; height: auto; }
.hero-photo-fade .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 20% down keeps the upper sign panel in frame when the container is taller
     than the source and the crop comes off the vertical. */
  object-position: 50% 20%;
  display: block;
  transform: none;
}
/* Any gradient the shared hero rules put on these layers is removed here
   rather than overridden, so nothing can reappear as a band. */
.hero-photo-fade .hero-media::before,
.hero-photo-fade .hero-media::after { display: none; content: none; }

/* The single overlay. Horizontal only — it has no vertical component at all,
   which is what guarantees there is no band across the top or bottom. */
.hero-photo-fade::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(5, 11, 17, .94) 0%,
    rgba(5, 11, 17, .82) 24%,
    rgba(5, 11, 17, .46) 46%,
    rgba(5, 11, 17, .10) 68%,
    rgba(5, 11, 17, 0) 82%
  );
}
.hero-photo-fade::after { display: none; }

.hero-photo-fade h1 { text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.hero-photo-fade .hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* Portrait viewports — the iPad held upright, and every phone.
   ==========================================================================
   A 2.33:1 photograph cannot fill a container taller than it is wide without
   losing most of its width, so here it does not try. The hero is a dark field
   with the headline and buttons in the upper area, and the REAL photograph —
   a straight crop of the same source, nothing generated — occupies a band
   across the lower part at full viewport width.

   The earlier attempt at this stacked the photo under a slab of flat #1685E5
   to fake more sky. That join was visible in the asset and would have been
   visible on the page. There is no fabricated pixel anywhere in these files.
   ========================================================================== */
@media (max-aspect-ratio: 6/5) {
  .hero-photo-fade { background: #050b11; min-height: min(76vh, 830px); }

  /* The photograph is a band, not a backdrop. */
  .hero-photo-fade .hero-media { top: auto; bottom: 0; left: 0; right: 0; height: 46%; }
  /* Anchored to the TOP of the crop: that keeps the sky above the sign, which
     is where the transition into the dark field lands. The crop that gets
     trimmed is tree line at the bottom, not sign. */
  .hero-photo-fade .hero-media img { object-position: 50% 0%; }

  /* The transition. Deliberately short and light, and it sits in the sky ABOVE
     the upper sign panel — long enough to soften the meeting of photo and dark
     field, nowhere near long enough to dim the sign. Scoped to portrait only;
     the desktop hero has no gradient on the photo layer at all. */
  .hero-photo-fade .hero-media::before {
    display: block;
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 26px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,11,17,.92) 0%, rgba(5,11,17,.45) 45%, rgba(5,11,17,0) 100%);
  }

  .hero-photo-fade .hero-body { padding-bottom: clamp(40px, 6vw, 72px); }
}

/* ==========================================================================
   MENU CARD — warm radial
   ==========================================================================
   A restrained orange bloom from the upper right, so the card reads as part of
   the brand rather than as a plain white slab. It sits UNDER the content: the
   card's own background carries it, nothing overlays the logo or the links, so
   text contrast is exactly what it was. Peak alpha is .14, which over white is
   about #fdf0ea — a tint, not a colour.
   ========================================================================== */
.header-card {
  background:
    /* Explicit radius. Left to size itself, `circle` on a box this wide and
       short resolves to a farthest-corner radius of ~1000px, so the 58% stop
       landed past the middle of the card and washed half of it peach. A fixed
       460px keeps it a corner bloom at every card width. */
    radial-gradient(circle 460px at 84% -8%,
      rgba(240, 106, 57, .14) 0%,
      rgba(240, 106, 57, .06) 28%,
      rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
}

/* On a small screen the card is a fraction of the width, so the same circle
   would cover most of it. Pulled further into the corner and lightened. */
@media (max-width: 1023px) {
  .header-card {
    background:
      radial-gradient(circle 300px at 90% -10%,
        rgba(240, 106, 57, .11) 0%,
        rgba(240, 106, 57, .05) 26%,
        rgba(255, 255, 255, 0) 54%),
      linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  }
}


/* ---------- orange bar peach, 20% smaller ----------
   Same asset, same corner, same bleed off the bar — just less of it, so the
   headline is the loudest thing in the bar again. 148 -> 118, 118 -> 94,
   96 -> 77, each a 20% reduction.

   The offsets come in slightly too: the rotated bounding box of the old 148px
   version reached 1443px at a 1440px viewport. It was clipped by
   .sizecta{overflow:hidden} so nothing showed, but a box outside the viewport
   is the exact thing the iPad containment work removed everywhere else. */
.sizecta .peach { width: 118px; right: -8px; bottom: -26px; }
@media (max-width: 1320px) { .sizecta .peach { right: 10px; } }
@media (max-width: 1100px) { .sizecta .peach { width: 94px;  right: 8px;  bottom: -20px; } }
@media (max-width: 860px)  { .sizecta .peach { width: 77px;  right: 6px;  bottom: -16px; } }

/* ---------- orange bar peach, a further 30% reduction ----------
   118 -> 83, 94 -> 66, 77 -> 54. Same asset, same corner, same bleed off the
   bar; it now supports the headline rather than competing with it. */
.sizecta .peach { width: 83px; right: -6px; bottom: -18px; }
@media (max-width: 1320px) { .sizecta .peach { right: 8px; } }
@media (max-width: 1100px) { .sizecta .peach { width: 66px; right: 6px; bottom: -14px; } }
@media (max-width: 860px)  { .sizecta .peach { width: 54px; right: 5px; bottom: -11px; } }