/* ============================================================
   STORAGE ROOMS .GR — Premium public marketing components
   Namespace: .srs-*  (loaded after storage-theme.css)
   ============================================================ */

.srs { --maxw: 1200px; }
.srs * { box-sizing: border-box; }
.srs-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.srs-section { padding: 84px 0; }
.srs-section.tight { padding: 56px 0; }
.srs-bg-soft { background: var(--sr-bg); }
.srs-bg-ink  { background: var(--sr-ink); color: #fff; }
.srs-bg-tint { background: var(--sr-blue-soft); }

/* Section heading */
.srs-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sr-blue); background: var(--sr-blue-soft); padding: 7px 15px; border-radius: 30px; margin-bottom: 18px;
}
.srs-bg-ink .srs-eyebrow { background: rgba(244, 73, 2,.15); color: var(--sr-teal); }
.srs-h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.5px; }
.srs-lead { font-size: 18px; color: var(--sr-muted); max-width: 640px; line-height: 1.6; margin: 0; }
.srs-bg-ink .srs-lead { color: #ddd2ca; }
.srs-center { text-align: center; }
.srs-center .srs-lead { margin-left: auto; margin-right: auto; }

/* ── HERO (light) ── */
.srs-hero { position: relative; overflow: hidden; background: linear-gradient(165deg, #ffffff 0%, #FFF4EE 100%); color: var(--sr-ink); border-bottom: 1px solid var(--sr-line); }
.srs-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(circle at 90% 8%, rgba(244, 73, 2,.10), transparent 42%),
    radial-gradient(circle at 6% 95%, rgba(244, 73, 2,.05), transparent 40%); }
.srs-hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding: 76px 0 86px; }
.srs-hero h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -1px; margin: 0 0 20px; color: var(--sr-ink); }
.srs-hero h1 .hl { color: var(--sr-orange); }
.srs-hero p { font-size: 19px; color: var(--sr-ink-2); max-width: 520px; line-height: 1.6; margin: 0 0 30px; }
.srs-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.srs-hero-stats { display: flex; gap: 30px; margin-top: 42px; flex-wrap: wrap; }
.srs-hero-stat .n { font-size: 30px; font-weight: 800; line-height: 1; color: var(--sr-ink); }
.srs-hero-stat .n span { color: var(--sr-orange); }
.srs-hero-stat .l { font-size: 13.5px; color: var(--sr-muted); margin-top: 5px; }
.srs-hero-card { position: relative; }
.srs-hero-img { width: 100%; height: 440px; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.srs-hero-badge {
    position: absolute; left: -22px; bottom: 30px; background: #fff; color: var(--sr-ink);
    border-radius: 16px; padding: 16px 20px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.4); display: flex; align-items: center; gap: 13px;
}
.srs-hero-badge i { width: 44px; height: 44px; border-radius: 12px; background: var(--sr-blue-soft); color: var(--sr-blue); display: grid; place-items: center; font-size: 19px; }
.srs-hero-badge .t { font-size: 12px; color: var(--sr-muted); }
.srs-hero-badge .v { font-size: 17px; font-weight: 800; }

/* ── Quick search bar ── */
.srs-searchbar {
    background: #fff; border-radius: 18px; box-shadow: var(--sr-shadow);
    padding: 16px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px;
    max-width: 880px; margin: -42px auto 0; position: relative; z-index: 5;
}
.srs-searchbar .f { display: flex; flex-direction: column; gap: 4px; padding: 4px 10px; }
.srs-searchbar label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sr-muted); }
.srs-searchbar select { border: 0; font-size: 15px; font-weight: 600; color: var(--sr-ink); background: transparent; padding: 2px 0; cursor: pointer; }

/* ── Feature grid ── */
.srs-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.srs-feature { background: #fff; border: 1px solid var(--sr-line); border-radius: 16px; padding: 26px 22px; transition: .2s; }
.srs-feature:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow); border-color: var(--sr-light-blue); }
.srs-feature .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--sr-blue-soft); color: var(--sr-blue); display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; }
.srs-feature h3 { font-size: 17px; font-weight: 700; margin: 0 0 7px; }
.srs-feature p { font-size: 14px; color: var(--sr-muted); margin: 0; line-height: 1.55; }

/* ── Steps ── */
.srs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.srs-step { position: relative; padding-top: 14px; }
.srs-step .num { font-family: 'Bebas Neue', sans-serif; font-size: 56px; line-height: 1; color: var(--sr-light-blue); opacity: .55; }
.srs-step h3 { font-size: 19px; font-weight: 700; margin: 8px 0 8px; }
.srs-step p { font-size: 14.5px; color: var(--sr-muted); margin: 0; line-height: 1.55; }

/* ── Pricing table ── */
.srs-pricing-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--sr-line); background: #fff; box-shadow: var(--sr-shadow-sm); }
.srs-pricing { width: 100%; border-collapse: collapse; min-width: 720px; }
.srs-pricing th, .srs-pricing td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--sr-line); }
.srs-pricing thead th { background: var(--sr-ink); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.srs-pricing thead th:first-child { text-align: left; border-top-left-radius: 0; }
.srs-pricing tbody td:first-child { text-align: left; font-weight: 800; font-size: 16px; color: var(--sr-ink); }
.srs-pricing tbody tr:hover { background: var(--sr-blue-soft); }
.srs-pricing .best { color: var(--sr-blue); font-weight: 800; font-size: 17px; }
.srs-pricing .muted { color: var(--sr-muted); }
.srs-pricing-note { font-size: 14px; color: var(--sr-muted); margin-top: 16px; display: flex; align-items: center; gap: 9px; }
.srs-pricing-note i { color: var(--sr-blue); }

/* ── Location cards ── */
.srs-locs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.srs-loc-card { background: #fff; border: 1px solid var(--sr-line); border-radius: 20px; overflow: hidden; box-shadow: var(--sr-shadow-sm); transition: .2s; display: flex; flex-direction: column; }
.srs-loc-card:hover { box-shadow: var(--sr-shadow); transform: translateY(-3px); }
.srs-loc-card .ph { height: 220px; position: relative; overflow: hidden; }
.srs-loc-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.srs-loc-card:hover .ph img { transform: scale(1.06); }
.srs-loc-card .ph .chip { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: var(--sr-blue-dark); font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 20px; }
.srs-loc-card .bd { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.srs-loc-card h3 { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.srs-loc-card .addr { font-size: 14px; color: var(--sr-muted); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.srs-loc-card .meta { display: flex; gap: 18px; margin-bottom: 18px; }
.srs-loc-card .meta .it { font-size: 13px; color: var(--sr-ink-2); display: flex; align-items: center; gap: 7px; }
.srs-loc-card .meta i { color: var(--sr-blue); }
.srs-loc-card .ft { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srs-loc-card .from { font-size: 13px; color: var(--sr-muted); }
.srs-loc-card .from b { font-size: 22px; color: var(--sr-blue); }

/* ── Use cases ── */
.srs-usecases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.srs-usecases > div { transition: .2s; }
.srs-usecases > div:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow); }
@media (max-width: 992px) { .srs-usecases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .srs-usecases { grid-template-columns: 1fr; } }

/* ── Gallery ── */
.srs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.srs-gallery a { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; }
.srs-gallery img { width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.srs-gallery a:hover img { transform: scale(1.08); }
.srs-gallery .tall { grid-row: span 2; aspect-ratio: auto; }

/* ── Items lists (allowed / prohibited) ── */
.srs-items { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.srs-items-card { background: #fff; border: 1px solid var(--sr-line); border-radius: 18px; padding: 28px; }
.srs-items-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 18px; display: flex; align-items: center; gap: 11px; }
.srs-items-card.ok h3 i { color: #16a34a; }
.srs-items-card.no h3 i { color: #dc2626; }
.srs-items-card ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.srs-items-card li { font-size: 14.5px; color: var(--sr-ink-2); display: flex; align-items: center; gap: 9px; }
.srs-items-card.ok li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #16a34a; font-size: 12px; }
.srs-items-card.no li::before { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #dc2626; font-size: 13px; }

/* ── FAQ accordion ── */
.srs-faq { max-width: 820px; margin: 0 auto; }
.srs-faq details { background: #fff; border: 1px solid var(--sr-line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.srs-faq summary { padding: 19px 22px; font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srs-faq summary::-webkit-details-marker { display: none; }
.srs-faq summary::after { content: '\2b'; color: var(--sr-blue); font-weight: 700; font-size: 20px; transition: .2s; }
.srs-faq details[open] summary::after { transform: rotate(45deg); }
.srs-faq .a { padding: 0 22px 20px; color: var(--sr-muted); font-size: 15px; line-height: 1.6; }

/* ── Reviews ── */
.srs-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.srs-review { background: #fff; border: 1px solid var(--sr-line); border-radius: 18px; padding: 26px; box-shadow: var(--sr-shadow-sm); }
.srs-review .stars { color: #f6b73c; margin-bottom: 13px; font-size: 15px; }
.srs-review p { font-size: 15px; line-height: 1.6; color: var(--sr-ink-2); margin: 0 0 18px; }
.srs-review .who { display: flex; align-items: center; gap: 11px; }
.srs-review .av { width: 42px; height: 42px; border-radius: 50%; background: var(--sr-blue); color: #fff; font-weight: 700; display: grid; place-items: center; }
.srs-review .who b { font-size: 14.5px; }
.srs-review .who span { font-size: 12.5px; color: var(--sr-muted); display: block; }

/* ── CTA band ── */
.srs-cta { background: linear-gradient(140deg, #231F20, #C93A02 110%); border-radius: 26px; padding: 56px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.srs-cta::after { content:''; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; background: rgba(244, 73, 2,.18); }
.srs-cta h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin: 0 0 14px; position: relative; }
.srs-cta p { font-size: 18px; color: #f5dccf; max-width: 560px; margin: 0 auto 28px; position: relative; }
.srs-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── Buttons (site scale) ── */
.srs-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; padding: 14px 26px; border-radius: 12px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: .16s; }
.srs-btn-primary { background: var(--sr-blue); color: #fff; border-color: var(--sr-blue); }
.srs-btn-primary:hover { background: var(--sr-blue-dark); border-color: var(--sr-blue-dark); color: #fff; transform: translateY(-2px); }
.srs-btn-light { background: #fff; color: var(--sr-ink); border-color: #fff; }
.srs-btn-light:hover { background: transparent; color: #fff; }
.srs-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.srs-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.srs-btn-ghost { background: #fff; color: var(--sr-ink); border-color: var(--sr-line); }
.srs-btn-ghost:hover { border-color: var(--sr-blue); color: var(--sr-blue); }

/* ── Page header (inner pages) ── */
.srs-pagehead { background: linear-gradient(150deg, #231F20, #C93A02); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.srs-pagehead::after { content:''; position:absolute; right:-60px; bottom:-90px; width:260px; height:260px; border-radius:50%; background: rgba(244, 73, 2,.16); }
.srs-pagehead .crumb { font-size: 13.5px; color: #e8bfa6; margin-bottom: 12px; position: relative; }
.srs-pagehead .crumb a { color: #f5dccf; text-decoration: none; }
.srs-pagehead h1 { font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; margin: 0 0 12px; letter-spacing: -.5px; position: relative; }
.srs-pagehead p { font-size: 18px; color: #f5dccf; max-width: 640px; margin: 0; position: relative; }

/* Prose (about / terms) */
.srs-prose { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--sr-ink-2); }
.srs-prose h2 { font-size: 26px; font-weight: 800; color: var(--sr-ink); margin: 38px 0 14px; }
.srs-prose h3 { font-size: 20px; font-weight: 700; color: var(--sr-ink); margin: 28px 0 10px; }
.srs-prose p { margin: 0 0 16px; }
.srs-prose ul { margin: 0 0 16px; padding-left: 22px; }
.srs-prose li { margin-bottom: 8px; }
.srs-prose a { color: var(--sr-blue); }

/* Utility */
.srs-mt-6 { margin-top: 40px; }
.srs-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 42px; flex-wrap: wrap; }

@media (max-width: 992px) {
    .srs-hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 60px 0 70px; }
    .srs-hero-card { display: none; }
    .srs-features { grid-template-columns: 1fr 1fr; }
    .srs-steps { grid-template-columns: 1fr 1fr; }
    .srs-locs { grid-template-columns: 1fr; }
    .srs-reviews { grid-template-columns: 1fr; }
    .srs-gallery { grid-template-columns: 1fr 1fr; }
    .srs-items { grid-template-columns: 1fr; }
    .srs-searchbar { grid-template-columns: 1fr; }
    .srs-cta { padding: 40px 24px; }
}
@media (max-width: 560px) {
    .srs-features { grid-template-columns: 1fr; }
    .srs-steps { grid-template-columns: 1fr; }
    .srs-items-card ul { grid-template-columns: 1fr; }
}

/* ── Mobile scroll hint for the pricing table ── */
.srs-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sr-blue);
    margin-bottom: 12px;
}
.srs-scroll-hint i { animation: srsHintSlide 1.4s ease-in-out infinite; }
@keyframes srsHintSlide { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
/* right-edge fade so it reads as scrollable */
.srs-scroll-x { position: relative; }
@media (max-width: 768px) {
    .srs-scroll-hint { display: flex; }
    .srs-scroll-x { -webkit-overflow-scrolling: touch; }
    .srs-scroll-x::-webkit-scrollbar { height: 7px; }
    .srs-scroll-x::-webkit-scrollbar-thumb { background: rgba(244,73,2,.4); border-radius: 4px; }
}

/* ── Home locations map (multi-marker) ── */
.srs-map-wrap {
    margin-top: 34px;
}
.srs-map {
    width: 100%;
    height: 420px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px -22px rgba(35, 31, 32, .5);
    border: 1px solid rgba(35, 31, 32, .08);
}
@media (max-width: 768px) {
    .srs-map { height: 320px; border-radius: 14px; }
    .srs-map-wrap { margin-top: 24px; }
}

/* ── Mobile footer: left-align & balance (theme forces center < 993px) ── */
@media (max-width: 993px) {
    footer .d-flex.flex-column {
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer .list,
    footer .list li,
    footer .link.d-flex.flex-row {
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer .list { padding-inline: 0; }
    /* keep icon boxes next to their text, top-aligned */
    footer .list li > .d-flex { align-items: flex-start; }
    /* copyright stays centered */
    footer .justify-content-center {
        justify-content: center !important;
        text-align: center;
        align-items: center;
    }
}