/* Spring About Us. All colours are supplied by the active variables.css theme. */
#spring-about {
    box-sizing: border-box;
    display: block;
    float: none;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 40px 72px;
    color: var(--site-text);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    text-align: left;
}

#spring-about *,
#spring-about *::before,
#spring-about *::after { box-sizing: border-box; }

#spring-about section,
#spring-about article,
#spring-about figure { float: none; width: 100%; min-width: 0; margin: 0; }

#spring-about h1,
#spring-about h2,
#spring-about h3,
#spring-about p,
#spring-about figure,
#spring-about dl,
#spring-about dt,
#spring-about dd,
#spring-about ul { float: none; margin: 0; padding: 0; border: 0; background: none; }

#spring-about h1,
#spring-about h2,
#spring-about h3 { color: var(--site-text-strong); font-weight: 600; text-transform: none; text-wrap: balance; }
#spring-about h1 { font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -2px; line-height: 1.12; }
#spring-about h2 { font-size: clamp(29px, 2.7vw, 39px); letter-spacing: -1.2px; line-height: 1.23; }
#spring-about h3 { font-size: 20px; letter-spacing: -.5px; line-height: 1.4; }
#spring-about p { color: var(--site-text-muted); font-size: 16px; font-weight: 400; line-height: 1.85; }
#spring-about a { color: var(--site-text-strong); text-decoration: none; }
#spring-about img { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; object-fit: cover; }

#spring-about .spring-about-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--site-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.5; text-transform: uppercase; }
#spring-about .spring-about-eyebrow::before { content: ''; flex: 0 0 28px; height: 2px; background: var(--site-accent); }

/* A dark hero and warm accent establish Spring's electrical and lighting identity. */
#spring-about .spring-about-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 26px 26px 0 0; background: var(--site-brand-primary); }
#spring-about .spring-about-hero-copy { align-self: center; padding: 62px 40px 62px 52px; }
#spring-about .spring-about-hero .spring-about-eyebrow,
#spring-about .spring-about-hero h1 { color: var(--site-brand-contrast); }
#spring-about .spring-about-hero h1 span { color: var(--site-accent); }
#spring-about .spring-about-intro { max-width: 450px; margin-top: 24px; color: var(--site-brand-contrast); font-size: 17px; }
#spring-about .spring-about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }

#spring-about .spring-about-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 14px 22px; border: 1px solid var(--site-accent); border-radius: var(--site-button-radius); color: var(--site-button-color); background: var(--site-button-background); box-shadow: var(--site-button-shadow); font-size: 14px; font-weight: 600; line-height: 1.5; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
#spring-about .spring-about-button:hover { color: var(--site-button-color); background: var(--site-button-hover-background); box-shadow: var(--site-button-hover-shadow); transform: translateY(-3px); }
#spring-about .spring-about-button span,
#spring-about .spring-about-text-link span,
#spring-about .spring-about-hero-link span,
#spring-about .spring-about-range-links a span { display: inline-block; transition: transform .2s ease; }
#spring-about .spring-about-button:hover span,
#spring-about .spring-about-text-link:hover span { transform: translateX(4px); }
#spring-about .spring-about-hero-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--site-brand-contrast); font-size: 13px; font-weight: 500; line-height: 1.6; transition: color .2s ease; }
#spring-about .spring-about-hero-link:hover { color: var(--site-accent); }
#spring-about .spring-about-hero-link:hover span { transform: translateY(3px); }

#spring-about .spring-about-hero-photo { position: relative; isolation: isolate; min-height: 510px; overflow: hidden; }
#spring-about .spring-about-hero-photo img { position: absolute; inset: 0; height: 100%; object-position: 58% center; }
#spring-about .spring-about-hero-photo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, var(--site-brand-primary-deep), transparent 50%); }
#spring-about .spring-about-hero-photo figcaption { position: absolute; z-index: 1; left: 30px; right: 24px; bottom: 26px; display: flex; align-items: center; gap: 10px; color: var(--site-brand-contrast); font-size: 12px; line-height: 1.6; }
#spring-about .spring-about-hero-photo figcaption > span { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--site-accent); }

#spring-about .spring-about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 30px 20px; border: 1px solid var(--site-border); border-top: 3px solid var(--site-accent); border-radius: 0 0 26px 26px; background: var(--site-surface); }
#spring-about .spring-about-facts > div { min-width: 0; padding: 0 32px; }
#spring-about .spring-about-facts > div + div { border-left: 1px solid var(--site-border); }
#spring-about .spring-about-facts dt { color: var(--site-text-muted); font-size: 11px; font-weight: 500; letter-spacing: 1.3px; line-height: 1.5; text-transform: uppercase; }
#spring-about .spring-about-facts dd { margin-top: 8px; color: var(--site-text-strong); font-size: clamp(32px, 3.2vw, 44px); font-weight: 600; letter-spacing: -1.4px; line-height: 1.25; }
#spring-about .spring-about-facts dd.spring-about-fact-word { font-size: clamp(25px, 2.5vw, 34px); letter-spacing: -.8px; }
#spring-about .spring-about-fact-plus { color: var(--site-accent-hover); font-weight: 500; }
#spring-about .spring-about-fact-caption { display: block; margin-top: 8px; color: var(--site-text-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.6; }

/* Spacious editorial sections keep the history and product range easy to scan. */
#spring-about .spring-about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 72px; padding: 82px 20px; scroll-margin-top: 40px; }
#spring-about .spring-about-story-copy { padding-top: 5px; }
#spring-about .spring-about-promises { display: grid; margin-top: 26px; list-style: none; }
#spring-about .spring-about-promises li { display: flex; align-items: center; gap: 18px; padding: 13px 0; border-top: 1px solid var(--site-border); color: var(--site-text-strong); font-size: 14px; font-weight: 500; line-height: 1.6; }
#spring-about .spring-about-promises li > span { color: var(--site-text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
#spring-about .spring-about-promises li > span::after { content: ''; display: block; height: 2px; margin-top: 3px; background: var(--site-accent); }

#spring-about .spring-about-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; padding: 30px; border: 1px solid var(--site-border); border-radius: 26px; background: var(--site-surface-soft); }
#spring-about .spring-about-image { position: relative; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--site-surface-raised); }
#spring-about .spring-about-image img { height: 100%; transition: transform .7s cubic-bezier(.2,.65,.3,1); }
#spring-about .spring-about-range-photo { aspect-ratio: 1.18; }
#spring-about .spring-about-range-photo img { object-position: center; }
#spring-about .spring-about-range-copy { padding: 18px 18px 18px 0; }
#spring-about .spring-about-range h2 span { color: var(--site-accent-hover); }
#spring-about .spring-about-range-copy > p:not(.spring-about-eyebrow) { margin-top: 22px; }
#spring-about .spring-about-range-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
#spring-about .spring-about-range-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--site-border); border-radius: 8px; color: var(--site-text-strong); background: var(--site-surface); font-size: 12px; font-weight: 500; line-height: 1.6; transition: border-color .2s ease, background .2s ease; }
#spring-about .spring-about-range-links a:hover { border-color: var(--site-accent); background: var(--site-surface-raised); }
#spring-about .spring-about-range-links a:hover span { transform: translate(2px, -2px); }
#spring-about .spring-about-text-link { display: inline-flex; align-items: center; gap: 18px; min-height: 40px; margin-top: 24px; padding-bottom: 5px; border-bottom: 2px solid var(--site-accent); color: var(--site-text-strong); font-size: 14px; font-weight: 600; line-height: 1.6; transition: color .2s ease; }
#spring-about .spring-about-text-link:hover { color: var(--site-text-muted); }

#spring-about .spring-about-memberships { padding: 82px 20px 0; }
#spring-about .spring-about-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
#spring-about .spring-about-memberships .spring-about-section-heading { display: block; }
#spring-about .spring-about-membership-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#spring-about .spring-about-membership { position: relative; padding: 32px; border: 1px solid var(--site-border); border-radius: 18px; background: var(--site-surface); }
#spring-about .spring-about-member-mark { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 26px; padding: 8px 16px; border-left: 3px solid var(--site-accent); color: var(--site-text-strong); background: var(--site-surface-raised); font-size: 23px; font-weight: 600; letter-spacing: 2px; line-height: 1.3; }
#spring-about .spring-about-membership p { margin-top: 14px; font-size: 14px; }

#spring-about .spring-about-delivery { padding: 80px 20px; }
#spring-about .spring-about-delivery .spring-about-text-link { flex-shrink: 0; margin-top: 0; margin-bottom: 4px; }
#spring-about .spring-about-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
#spring-about .spring-about-service { position: relative; padding: 28px 26px; overflow: hidden; border: 1px solid var(--site-border); border-radius: 18px; background: var(--site-surface-soft); }
#spring-about .spring-about-service::before { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: var(--site-accent); }
#spring-about .spring-about-service-number { display: block; margin-bottom: 26px; color: var(--site-text-muted); font-size: 13px; font-weight: 500; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
#spring-about .spring-about-service h3 { font-size: 18px; }
#spring-about .spring-about-service p { margin-top: 14px; font-size: 14px; }

/* The celebration panel echoes the hero, followed by a clear contact invitation. */
#spring-about .spring-about-celebration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 52px; overflow: hidden; padding: 32px 32px 32px 52px; border-radius: 26px; background: var(--site-brand-primary-deep); }
#spring-about .spring-about-celebration-copy { padding: 18px 0; }
#spring-about .spring-about-celebration .spring-about-eyebrow,
#spring-about .spring-about-celebration h2,
#spring-about .spring-about-celebration p:not(.spring-about-eyebrow) { color: var(--site-brand-contrast); }
#spring-about .spring-about-celebration h2 { font-size: clamp(36px, 3.7vw, 52px); letter-spacing: -1.5px; }
#spring-about .spring-about-celebration h2 span { color: var(--site-accent); }
#spring-about .spring-about-celebration p:not(.spring-about-eyebrow) { max-width: 430px; margin-top: 22px; font-size: 15px; }
#spring-about .spring-about-celebration .spring-about-button { margin-top: 28px; }
#spring-about .spring-about-celebration-photo { aspect-ratio: 1.1; background: var(--site-brand-primary); }
#spring-about .spring-about-celebration-photo img { object-position: center; }

#spring-about .spring-about-contact { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-top: 48px; padding: 42px 44px; border: 1px solid var(--site-border); border-radius: 24px; background: var(--site-surface); }
#spring-about .spring-about-contact .spring-about-eyebrow { margin-bottom: 14px; }
#spring-about .spring-about-contact h2 { max-width: 660px; font-size: clamp(27px, 2.7vw, 36px); }
#spring-about .spring-about-contact-actions { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 12px; }
#spring-about .spring-about-contact-phone { display: inline-flex; align-items: center; min-height: 32px; color: var(--site-text-strong); font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
#spring-about .spring-about-contact-phone:hover { color: var(--site-text-muted); }
#spring-about a:focus-visible { outline: 3px solid var(--site-button-focus-color); outline-offset: 5px; }
#spring-about .spring-about-button:focus-visible { outline-color: var(--site-text-strong); }
#spring-about .spring-about-hero .spring-about-button:focus-visible,
#spring-about .spring-about-celebration .spring-about-button:focus-visible { outline-color: var(--site-brand-contrast); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #spring-about .spring-about-image:hover img { transform: scale(1.035); }
}

@media (max-width: 1150px) {
    #spring-about { padding: 28px 28px 60px; }
    #spring-about h1 { font-size: 48px; }
    #spring-about .spring-about-hero-copy { padding: 42px 30px; }
    #spring-about .spring-about-hero-photo { min-height: 470px; }
    #spring-about .spring-about-facts > div { padding: 0 22px; }
    #spring-about .spring-about-story,
    #spring-about .spring-about-range,
    #spring-about .spring-about-celebration { gap: 36px; }
    #spring-about .spring-about-range-copy { padding-right: 0; }
    #spring-about .spring-about-membership { padding: 26px; }
    #spring-about .spring-about-service { padding: 26px 22px; }
    #spring-about .spring-about-service::before { left: 22px; right: 22px; }
    #spring-about .spring-about-celebration { padding: 28px 28px 28px 36px; }
    #spring-about .spring-about-contact { padding: 36px; }
}

@media (max-width: 850px) {
    #spring-about .spring-about-hero { grid-template-columns: minmax(0, 1fr); }
    #spring-about .spring-about-hero-copy { padding: 42px 38px; }
    #spring-about .spring-about-intro { max-width: 550px; }
    #spring-about .spring-about-hero-photo { min-height: 0; height: 340px; }
    #spring-about .spring-about-hero-photo img { object-position: center 65%; }
    #spring-about .spring-about-facts { padding: 26px 6px; }
    #spring-about .spring-about-facts > div { padding: 0 18px; }
    #spring-about .spring-about-facts dd { font-size: 32px; }
    #spring-about .spring-about-facts dd.spring-about-fact-word { font-size: 25px; }
    #spring-about .spring-about-story { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 52px 8px; }
    #spring-about .spring-about-story-copy { padding: 0; }
    #spring-about .spring-about-range { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    #spring-about .spring-about-range-photo { aspect-ratio: 1.55; }
    #spring-about .spring-about-range-copy { padding: 0 4px 8px; }
    #spring-about .spring-about-memberships { padding: 52px 8px 0; }
    #spring-about .spring-about-membership-grid { gap: 18px; }
    #spring-about .spring-about-delivery { padding: 52px 8px; }
    #spring-about .spring-about-section-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
    #spring-about .spring-about-service-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #spring-about .spring-about-service { padding: 24px 26px; }
    #spring-about .spring-about-service-number { margin-bottom: 14px; }
    #spring-about .spring-about-service p { margin-top: 10px; }
    #spring-about .spring-about-celebration { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; }
    #spring-about .spring-about-celebration-copy { padding: 4px; }
    #spring-about .spring-about-celebration-photo { aspect-ratio: 1.5; }
    #spring-about .spring-about-celebration p:not(.spring-about-eyebrow) { max-width: 550px; }
    #spring-about .spring-about-contact { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 32px; }
    #spring-about .spring-about-contact-actions { align-items: flex-start; }
}

@media (max-width: 540px) {
    #spring-about { padding: 20px 16px 44px; }
    #spring-about h1 { font-size: clamp(34px, 9vw, 45px); letter-spacing: -1.2px; }
    #spring-about h2 { font-size: 28px; letter-spacing: -.8px; }
    #spring-about .spring-about-hero-copy { padding: 32px 24px; }
    #spring-about .spring-about-eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: 1.3px; }
    #spring-about .spring-about-eyebrow::before { flex-basis: 22px; }
    #spring-about .spring-about-intro { margin-top: 20px; font-size: 15px; }
    #spring-about .spring-about-actions { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
    #spring-about .spring-about-button { gap: 14px; padding: 14px 18px; font-size: 13px; }
    #spring-about .spring-about-hero-photo { height: 250px; }
    #spring-about .spring-about-hero-photo figcaption { left: 22px; bottom: 20px; font-size: 11px; }
    #spring-about .spring-about-facts { grid-template-columns: minmax(0, 1fr); padding: 8px 24px; }
    #spring-about .spring-about-facts > div { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 0; }
    #spring-about .spring-about-facts > div + div { border-left: 0; border-top: 1px solid var(--site-border); }
    #spring-about .spring-about-facts dt { font-size: 10px; letter-spacing: .8px; }
    #spring-about .spring-about-facts dd,
    #spring-about .spring-about-facts dd.spring-about-fact-word { margin: 0; font-size: 26px; }
    #spring-about .spring-about-fact-caption { font-size: 11px; }
    #spring-about .spring-about-story { padding: 44px 4px; }
    #spring-about .spring-about-story-copy p { font-size: 15px; }
    #spring-about .spring-about-range { padding: 18px; }
    #spring-about .spring-about-range-photo { aspect-ratio: 1.2; }
    #spring-about .spring-about-range-copy p:not(.spring-about-eyebrow) { font-size: 15px; }
    #spring-about .spring-about-range-links { gap: 8px; }
    #spring-about .spring-about-range-links a { gap: 14px; padding: 10px 12px; }
    #spring-about .spring-about-memberships { padding: 44px 4px 0; }
    #spring-about .spring-about-membership-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #spring-about .spring-about-membership { padding: 26px 24px; }
    #spring-about .spring-about-member-mark { margin-bottom: 22px; }
    #spring-about .spring-about-delivery { padding: 44px 4px; }
    #spring-about .spring-about-service { padding: 24px; }
    #spring-about .spring-about-celebration { padding: 24px 20px; }
    #spring-about .spring-about-celebration h2 { font-size: 36px; }
    #spring-about .spring-about-celebration-photo { aspect-ratio: 1.15; }
    #spring-about .spring-about-celebration .spring-about-button { width: 100%; }
    #spring-about .spring-about-contact { padding: 30px 24px; }
    #spring-about .spring-about-contact-actions { width: 100%; }
    #spring-about .spring-about-contact .spring-about-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #spring-about a,
    #spring-about a span,
    #spring-about img { transition: none; }
    #spring-about .spring-about-button:hover,
    #spring-about .spring-about-button:hover span,
    #spring-about .spring-about-text-link:hover span,
    #spring-about .spring-about-hero-link:hover span,
    #spring-about .spring-about-range-links a:hover span { transform: none; }
}