/* Service and film format page styles.
   Lifted out of service_page.html so the film format pages, which use the
   same sections, can load them too. */
.service-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
}

.service-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.8rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.152rem;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.service-hero-cta:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
    transform: translateY(-1px);
}

.service-hero-cta.primary {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.service-hero-cta.primary:hover {
    background: transparent;
    color: #fff;
}

@media (max-width: 640px) {
    .service-hero-ctas {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 320px);
    }

    .service-hero-cta {
        width: 100%;
    }
}

#form-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-loading-inner {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.form-loading-inner p {
    margin: 1rem 0 0;
    font-size: 1.68rem;
    color: #333;
    letter-spacing: 0.02em;
}
.form-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.service-location-guide {
    background: var(--surface-primary);
    border-top: 1px solid rgba(17, 24, 27, 0.1);
    border-bottom: 1px solid rgba(17, 24, 27, 0.1);
}
.service-location-guide-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: end;
}
.service-location-guide-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.152rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.service-location-guide h2 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 4.8rem);
    font-weight: 300;
    line-height: 0.98;
    margin: 0;
    color: var(--text-primary);
}
.service-location-guide p {
    font-family: var(--font-sans);
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0 0 1.35rem;
}
.service-location-guide-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1.184rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 1px solid currentColor;
}
.service-location-guide-link:hover {
    color: var(--text-secondary);
}
.service-locations-strip {
    background: var(--surface-secondary);
    border-top: 1px solid rgba(17, 24, 27, 0.08);
}
.service-locations-header {
    margin-bottom: 2.5rem;
}
.service-locations-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1;
    margin: 0;
    color: var(--text-primary);
}
.service-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.service-location-card {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
}
.service-location-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-accent);
}
.service-location-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.service-location-card:hover .service-location-card-image img {
    transform: scale(1.04);
}
.service-location-card-image .progressive-image {
    width: 100%;
    height: 100%;
}
.service-location-card-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(17, 24, 27, 0.35);
    font-size: 1.6rem;
}
.service-location-card-copy h3 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    margin: 1rem 0 0.25rem;
}
.service-location-card-copy p {
    font-family: var(--font-sans);
    font-size: 1.36rem;
    color: var(--text-secondary);
    margin: 0;
}
@media (max-width: 900px) {
    .service-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .service-locations-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 800px) {
    .service-faq-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .service-faq-footer {
        text-align: left;
    }
    .service-location-guide-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Hero LQIP (low-quality image placeholder) — inlined so it works even if styles.css is cached. */
.hero-slide .hero-lqip,
.hero-slide .hero-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-slide .hero-lqip {
    filter: blur(24px);
    transform: scale(1.06);
    z-index: 0;
}
.hero-slide .hero-full {
    opacity: 0;
    transition: opacity 600ms ease-out;
    z-index: 1;
}
.hero-slide .hero-full.loaded,
.hero-slide > .hero-full:only-child {
    opacity: 1;
}

/* About-section intro image LQIP.
   When .has-lqip is present, the LQIP image is in normal flow (defines size)
   and the full image overlays it absolutely + fades in.
   When .has-lqip is absent (no LQIP file), the full image is in normal flow. */
.about-lqip-wrap {
    position: relative;
    overflow: hidden;
}
.about-lqip-wrap .about-lqip {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    filter: blur(20px);
    transform: scale(1.06);
    z-index: 0;
}
.about-lqip-wrap.has-lqip .about-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 600ms ease-out;
    z-index: 1;
}
.about-lqip-wrap.has-lqip .about-full.loaded {
    opacity: 1;
}
.about-lqip-wrap:not(.has-lqip) .about-full {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
}
/* Editorial intro: scattered photo collage + centered statement */
.sp-about-inner {
    max-width: 116rem;
    margin: 0 auto;
    text-align: center;
}

.sp-about-collage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 108rem;
    margin: 0 auto 16rem;
    padding-top: 3rem;
}

.sp-collage-photo { position: relative; margin: 0; }

.sp-collage-photo .progressive-image,
.sp-collage-photo > img {
    width: 100%;
    height: 100%;
    display: block;
}

.sp-collage-photo .progressive-image > img,
.sp-collage-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-collage-1 {
    width: 42%;
    aspect-ratio: 4 / 3;
    z-index: 1;
    transform: translateY(2.5rem);
}

.sp-collage-2 {
    width: 25%;
    aspect-ratio: 3 / 4;
    margin: 0 -4.5%;
    transform: translateY(11rem);
    z-index: 3;
    box-shadow: 0 30px 70px -20px rgba(17, 24, 27, 0.35);
}

.sp-collage-3 {
    width: 36%;
    aspect-ratio: 4 / 3;
    z-index: 2;
}

.sp-about-doodle {
    position: absolute;
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 4;
}

.sp-doodle-bottle { width: 4.6rem; top: -3.5rem; left: 39%; transform: rotate(4deg); }
.sp-doodle-heart { width: 4rem; top: 3rem; left: 30%; transform: rotate(-8deg); }
.sp-doodle-sparks { width: 5rem; bottom: -6rem; right: 12%; }

.sp-about-headline {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 4.2vw, 4.6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    max-width: 92rem;
    margin: 0 auto 2.8rem;
}

.sp-about-headline em {
    font-style: italic;
    color: #9c4a26;
}

.sp-about-kicker {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9c4a26;
    margin: 0 0 3rem;
}

.sp-about-body {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.9;
    color: var(--text-secondary);
    max-width: 74rem;
    margin: 0 auto 8rem;
}

.sp-about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    max-width: 100rem;
    margin: 0 auto;
}

.sp-feature { text-align: center; }

.sp-feature svg,
.sp-feature img {
    width: 4.4rem;
    height: 4.4rem;
    object-fit: contain;
    color: #9c4a26;
    margin: 0 auto 1.8rem;
    display: block;
}

.sp-feature span {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .sp-about-collage { margin-bottom: 10rem; }
    .sp-collage-2 { transform: translateY(6rem); }
    .sp-about-doodle { display: none; }
    .sp-about-body { margin-bottom: 5rem; }
    .sp-about-features { grid-template-columns: 1fr; gap: 3.4rem; }
}
/* Collections block: bundles promoted from a second category */
.sp-collections { background: var(--surface-secondary, #f7f4ef); }

.sp-collections-head { max-width: 76rem; margin: 0 auto 6rem; text-align: center; }

.sp-collections-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 4vw, 4.6rem);
    font-weight: 400;
    margin: 1.2rem 0 1.6rem;
}

.sp-collections-intro {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0;
}

.sp-collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    align-items: start;
}

.sp-collection {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 4rem 3rem 3.4rem;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
}

.sp-collection--featured {
    border-color: currentColor;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.08);
}

.sp-collection-badge {
    position: absolute;
    top: -1.2rem;
    left: 3rem;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    background: var(--text-primary);
    color: var(--surface-primary, #fff);
}

.sp-collection-name {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    margin: 0 0 0.6rem;
}

.sp-collection-duration {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 2rem;
}

.sp-collection-price {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 2.4rem;
    line-height: 1.3;
}

.sp-collection-price span {
    display: block;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.sp-collection-list {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    flex: 1;
}

.sp-collection-list li {
    position: relative;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1.65;
    padding: 0 0 1rem 1.8rem;
}

.sp-collection-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
}

.sp-collection-btn {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.5rem;
}

.sp-collections-terms {
    max-width: 96rem;
    margin: 6rem auto 0;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
}

.sp-collections-terms > div {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 1.6rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
}

.sp-collections-terms dt {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.sp-collections-terms dd {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.45rem;
    line-height: 1.7;
}

.sp-collections-link {
    display: block;
    margin-top: 4rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 980px) {
    .sp-collections-grid { grid-template-columns: 1fr; gap: 3.2rem; }
    .sp-collections-terms > div { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* Signature-offer square styles live in global styles.css (shared with the homepage) */

/* "Companies I've worked with" logo ticker under the corporate hero: a dark band,
   because the logos are white artwork on transparent 1200x400 canvases.
   The track holds two identical runs and slides left by half its width, so
   the loop is seamless. Items carry their own padding rather than a flex gap
   so both halves stay exactly equal. */
.client-logo-ticker {
    position: relative;
    background: var(--surface-accent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.8rem 0 3.2rem;
    overflow: hidden;
}

.client-logo-ticker-label {
    font-family: var(--font-sans);
    font-size: 1.152rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
    margin: 0 0 1.6rem;
}

.client-logo-ticker-list,
.client-logo-ticker-run {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-logo-ticker-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    margin: 0;
    /* The artwork canvases carry their own side margin. */
    padding: 0 1.2rem;
}

.client-logo-ticker-img {
    display: block;
    height: 8rem;
    width: auto;
    max-width: 24rem;
    object-fit: contain;
    opacity: 0.82;
    transition: opacity 0.25s ease;
}

.client-logo-ticker-item:hover .client-logo-ticker-img {
    opacity: 1;
}

/* Stand-in until a company's logo is uploaded. */
.client-logo-ticker-wordmark {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    opacity: 0.82;
}

/* The plain list is for screen readers, unless motion is reduced (below). */
.client-logo-ticker-list {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.client-logo-ticker-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.client-logo-ticker-track {
    display: flex;
    width: max-content;
    animation: client-logo-ticker var(--ticker-duration, 36s) linear infinite;
}

.client-logo-ticker-viewport:hover .client-logo-ticker-track {
    animation-play-state: paused;
}

.client-logo-ticker-run {
    display: flex;
    flex: 0 0 auto;
}

@keyframes client-logo-ticker {
    to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
    .client-logo-ticker {
        padding: 2.2rem 0 2.6rem;
    }
    .client-logo-ticker-item {
        height: 5.6rem;
        padding: 0 0.8rem;
    }
    .client-logo-ticker-img {
        height: 5.6rem;
        max-width: 16.8rem;
    }
    .client-logo-ticker-wordmark {
        font-size: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-logo-ticker-viewport {
        display: none;
    }
    .client-logo-ticker-list {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.6rem;
        padding: 0 1.6rem;
    }
}