/* ==========================================================================
   Standard Editorial / Service Page System (Build 35.7)
   Shared by: Self Storage Marketing, About Us, Contact Us.
   Case Studies uses this plus case-studies.css; Pricing uses pricing-page.css;
   legal pages use legal.css. Hero geometry, buttons, trust bar, FAQ, CTA and
   timeline all come from their existing component files and are NOT
   duplicated here - this file only adds page hero motifs and the shared
   content-block layouts these pages need.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero motifs (CSS-only, no image dependency, restrained per spec)
   -------------------------------------------------------------------- */
.internal-hero--marketing{
    --internal-hero-bg-image:
        repeating-linear-gradient(115deg, rgba(111,217,224,.09) 0, rgba(111,217,224,.09) 1px, transparent 1px, transparent 58px),
        radial-gradient(circle at 78% 30%, rgba(19,167,179,.20) 0%, transparent 42%),
        radial-gradient(circle at 20% 80%, rgba(245,141,29,.10) 0%, transparent 40%);
}
.internal-hero--pricing{
    --internal-hero-bg-image:
        repeating-linear-gradient(0deg, rgba(111,217,224,.08) 0, rgba(111,217,224,.08) 1px, transparent 1px, transparent 46px),
        linear-gradient(135deg, rgba(19,167,179,.14) 0%, transparent 48%);
}
.internal-hero--case-studies{
    --internal-hero-bg-image:
        repeating-linear-gradient(90deg, rgba(111,217,224,.10) 0, rgba(111,217,224,.10) 2px, transparent 2px, transparent 72px),
        linear-gradient(0deg, rgba(19,167,179,.16) 0%, transparent 55%);
}
.internal-hero--about{
    --internal-hero-bg-image:
        repeating-linear-gradient(45deg, rgba(111,217,224,.07) 0, rgba(111,217,224,.07) 1px, transparent 1px, transparent 54px),
        radial-gradient(circle at 72% 44%, rgba(19,167,179,.16) 0%, transparent 44%);
}
.internal-hero--contact{
    --internal-hero-bg-image:
        repeating-linear-gradient(135deg, rgba(111,217,224,.08) 0, rgba(111,217,224,.08) 1px, transparent 1px, transparent 62px),
        radial-gradient(circle at 68% 38%, rgba(19,167,179,.18) 0%, transparent 40%);
}
.internal-hero--marketing .internal-hero__bg,
.internal-hero--pricing .internal-hero__bg,
.internal-hero--case-studies .internal-hero__bg,
.internal-hero--about .internal-hero__bg,
.internal-hero--contact .internal-hero__bg{background-size:auto,100% 100%,100% 100%;background-position:center;}
.internal-hero--marketing .internal-hero__overlay,
.internal-hero--pricing .internal-hero__overlay,
.internal-hero--case-studies .internal-hero__overlay,
.internal-hero--about .internal-hero__overlay,
.internal-hero--contact .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(19,167,179,.10),transparent 36%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.82) 54%,rgba(0,31,49,.62) 100%);
}

/* Hero object: shared restrained "signal panel" used by these pages.
   Abstract, decorative, aria-hidden - carries no invented data. */
.sp-hero-panel{
    max-width:400px;margin-left:auto;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:16px;padding:22px 24px;backdrop-filter:blur(3px);
    box-shadow:0 22px 48px rgba(0,10,18,.34);
}
.sp-hero-panel__row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.sp-hero-panel__row:last-child{border-bottom:none;}
.sp-hero-panel__icon{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    background:rgba(19,167,179,.18);border:1px solid rgba(111,217,224,.3);
    display:flex;align-items:center;justify-content:center;color:var(--teal-300);
}
.sp-hero-panel__lines{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
.sp-hero-panel__lines span{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.22);}
.sp-hero-panel__lines span:last-child{width:58%;background:rgba(255,255,255,.13);}
.sp-hero-panel__row--accent .sp-hero-panel__lines span{background:rgba(111,217,224,.42);}
.sp-hero-panel__row--accent .sp-hero-panel__lines span:last-child{background:rgba(111,217,224,.22);}

/* --------------------------------------------------------------------
   Shared content sections
   -------------------------------------------------------------------- */
.sp-section{padding:80px 0;background:var(--white);}
.sp-section--alt{background:var(--gray-100);}
.sp-section--dark{background:var(--navy-950);}
.sp-section--dark h2{color:var(--white);}
.sp-section--dark p{color:var(--gray-300);}
.sp-section h2{font-size:2rem;color:var(--navy-950);margin-bottom:14px;}
.sp-lead{max-width:820px;margin:0 auto 12px;color:var(--gray-700);font-size:1rem;line-height:1.7;}
.sp-lead--left{margin-left:0;}
.sp-prose{max-width:820px;margin:0 auto;}
.sp-prose p{color:var(--gray-700);font-size:1rem;line-height:1.7;margin-bottom:16px;}
.sp-prose ul{margin:0 0 18px 20px;display:grid;gap:8px;}
.sp-prose li{color:var(--gray-700);font-size:.96rem;line-height:1.6;}
.sp-prose h3{color:var(--navy-950);font-size:1.15rem;margin:24px 0 10px;}
.sp-section--dark .sp-prose p,.sp-section--dark .sp-prose li{color:var(--gray-300);}
.sp-section--dark .sp-prose h3{color:var(--white);}

/* Card grid - used for capability/value/service blocks */
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.sp-grid--2{grid-template-columns:repeat(2,1fr);}
.sp-grid--4{grid-template-columns:repeat(4,1fr);}
.sp-card{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;
    padding:24px 22px;box-shadow:0 4px 14px rgba(0,31,49,.05);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.sp-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,31,49,.09);border-color:rgba(19,167,179,.35);}
.sp-card h3{color:var(--navy-950);font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.sp-card p{color:var(--gray-700);font-size:.92rem;line-height:1.6;margin:0;}
.sp-card ul{margin:12px 0 0 18px;display:grid;gap:6px;}
.sp-card li{color:var(--gray-700);font-size:.88rem;line-height:1.5;}
.sp-card__icon{color:var(--teal-500);margin-bottom:12px;display:block;}
.sp-section--alt .sp-card{background:var(--white);}
.sp-section--dark .sp-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.sp-section--dark .sp-card h3{color:var(--white);}
.sp-section--dark .sp-card p,.sp-section--dark .sp-card li{color:var(--gray-300);}

/* Numbered process/step list (distinct from the timeline component, used
   where the live page presents a long numbered narrative sequence) */
.sp-steps{display:grid;gap:18px;margin-top:32px;max-width:900px;margin-left:auto;margin-right:auto;}
.sp-step{
    display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;padding:20px 22px;
}
.sp-section--alt .sp-step{background:var(--white);}
.sp-step__num{
    width:52px;height:52px;border-radius:50%;background:var(--gray-100);
    border:2px solid var(--teal-500);color:var(--teal-500);
    font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
}
.sp-step h3{color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:8px;}
.sp-step p{color:var(--gray-700);font-size:.93rem;line-height:1.6;margin:0;}
.sp-step ul{margin:10px 0 0 18px;display:grid;gap:6px;}
.sp-step li{color:var(--gray-700);font-size:.9rem;line-height:1.55;}

/* Definition/checklist rows */
.sp-checklist{display:grid;gap:12px;margin-top:24px;max-width:820px;}
.sp-checklist li{
    display:flex;gap:10px;align-items:flex-start;list-style:none;
    color:var(--gray-700);font-size:.95rem;line-height:1.6;
}
.sp-checklist li::before{content:'\2713';color:var(--teal-500);font-weight:700;flex-shrink:0;}
.sp-section--dark .sp-checklist li{color:var(--gray-300);}

/* Callout / emphasis block */
.sp-callout{
    background:var(--gray-100);border-left:4px solid var(--teal-500);border-radius:0 10px 10px 0;
    padding:20px 24px;margin:24px auto;max-width:820px;
}
.sp-callout p{margin:0;color:var(--gray-700);font-size:.96rem;line-height:1.65;}
.sp-callout strong{color:var(--navy-950);}

/* Contact method cards */
.sp-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.sp-contact-card{
    background:var(--white);border:1px solid var(--gray-300);border-radius:14px;
    padding:28px 24px;text-align:center;box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.sp-contact-card__icon{
    width:52px;height:52px;border-radius:12px;margin:0 auto 16px;
    background:rgba(19,167,179,.10);border:1px solid rgba(19,167,179,.25);
    display:flex;align-items:center;justify-content:center;color:var(--teal-500);
}
.sp-contact-card h3{color:var(--navy-950);font-size:1.05rem;margin-bottom:10px;}
.sp-contact-card__primary{display:block;font-size:1.15rem;font-weight:800;color:var(--navy-950);margin-bottom:10px;text-decoration:none;}
a.sp-contact-card__primary:hover{color:var(--teal-500);}
.sp-contact-card p{color:var(--gray-700);font-size:.9rem;line-height:1.55;margin:0 0 6px;}
.sp-contact-card__hours{color:var(--gray-700);font-size:.88rem;line-height:1.6;margin-bottom:10px;}

/* Form embed region - the live form mechanism is not reproducible from
   fetched source (see BUILD_35.7_MIGRATION_REPORT.md). This preserves the
   embed's position and visible framing without inventing a form action. */
.sp-form-region{
    max-width:760px;margin:32px auto 0;background:var(--white);
    border:1px solid var(--gray-300);border-radius:14px;padding:32px 28px;
    box-shadow:0 8px 24px rgba(0,31,49,.07);
}
.sp-form-region__note{
    background:var(--gray-100);border:1px dashed var(--gray-300);border-radius:10px;
    padding:20px 22px;color:var(--gray-700);font-size:.92rem;line-height:1.6;
}
.sp-form-region__note strong{color:var(--navy-950);display:block;margin-bottom:6px;}

/* Social row */
.sp-social{display:flex;gap:14px;justify-content:center;margin-top:22px;}
.sp-social a{
    width:44px;height:44px;border-radius:10px;background:var(--gray-100);
    border:1px solid var(--gray-300);display:flex;align-items:center;justify-content:center;
    color:var(--navy-950);transition:background .2s,color .2s,transform .2s;
}
.sp-social a:hover{background:var(--teal-500);color:var(--white);transform:translateY(-2px);}

/* Tech-stack image block (About page) */
.sp-figure{max-width:820px;margin:26px auto;}
.sp-figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--gray-300);}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width:1024px){
    .sp-grid,.sp-grid--4{grid-template-columns:repeat(2,1fr);}
    .sp-contact-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
    .sp-section{padding:60px 0;}
    .sp-section h2{font-size:1.65rem;}
}
@media (max-width:640px){
    .sp-grid,.sp-grid--2,.sp-grid--4{grid-template-columns:1fr;}
    .sp-step{grid-template-columns:44px 1fr;gap:14px;padding:18px 16px;}
    .sp-step__num{width:44px;height:44px;font-size:.95rem;}
    .sp-form-region{padding:22px 18px;}
    .sp-callout{padding:16px 18px;}
}