/* ============================================================
   SERVICES — Luxury Minimal
   ============================================================ */

/* ── Service Hero ── */
.sff-service-hero {
    position: relative;
    height: 70vh;
    min-height: 480px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.sff-service-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%; /* 0%=top  50%=center  100%=bottom */
}
.sff-service-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.sff-service-hero__content {
    position: relative; z-index: 1;
    padding: var(--gutter);
    padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-20));
    width: 100%;
    max-width: var(--content-w);
    margin-inline: auto;
}
.sff-service-hero__content .label { margin-bottom: var(--sp-4); }
.sff-service-hero__content h1 { color: var(--sff-white); margin-bottom: var(--sp-4); }
.sff-service-hero__content p { color: rgba(255,255,255,.75); max-width: 52ch; font-size: var(--text-lg); }

/* ── Intro Section ── */
.sff-service-intro { background: var(--sff-white); }
.sff-service-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--sp-12), 6vw, var(--sp-24));
    align-items: center;
}
.sff-service-intro__text .label { margin-bottom: var(--sp-4); }
.sff-service-intro__text h2     { margin-bottom: var(--sp-5); }
.sff-service-intro__text p      { color: var(--sff-mid); margin-bottom: var(--sp-6); }
.sff-service-intro__includes     { margin-top: var(--sp-8); }
.sff-service-intro__includes-title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sff-mid);
    margin-bottom: var(--sp-4);
}
.sff-service-intro__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.sff-service-intro__list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--sff-dark);
}
.sff-service-intro__list li::before {
    content: '';
    width: 18px; height: 1px;
    background: var(--sff-terracotta);
    flex-shrink: 0;
}
.sff-service-intro__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
}
.sff-service-intro__image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
    .sff-service-intro__grid { grid-template-columns: 1fr; }
    .sff-service-intro__image { aspect-ratio: 16/9; }
}

/* ── Packages ── */
.sff-packages { background: var(--sff-cream); }
.sff-packages__header { text-align: center; margin-bottom: var(--sp-12); }
.sff-packages__header .label { margin-bottom: var(--sp-4); }
.sff-packages__header h2 { margin-bottom: 0; }
.sff-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    align-items: start;
}
.sff-package {
    background: var(--sff-white);
    border: 1px solid var(--sff-border-light);
    padding: var(--sp-10) var(--sp-8);
    position: relative;
    transition: box-shadow var(--t-base), border-color var(--t-base);
}
.sff-package:hover { box-shadow: var(--shadow); border-color: var(--sff-border); }
.sff-package--featured {
    border-color: var(--sff-terracotta);
    background: var(--sff-white);
    box-shadow: var(--shadow-lg);
}
.sff-package__badge {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--sff-terracotta);
    color: var(--sff-white);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: var(--sp-1) var(--sp-4);
}
.sff-package__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--sff-charcoal);
    margin-bottom: var(--sp-2);
}
.sff-package__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--sff-terracotta);
    line-height: 1;
    margin-bottom: var(--sp-2);
}
.sff-package__price sup { font-size: var(--text-xl); vertical-align: top; margin-top: 0.5rem; }
.sff-package__duration {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sff-muted);
    margin-bottom: var(--sp-8);
    display: block;
}
.sff-package__features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.sff-package__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--sff-mid);
    line-height: 1.5;
}
.sff-package__features li::before {
    content: '✓';
    color: var(--sff-terracotta);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 1px;
}
.sff-package__divider { height: 1px; background: var(--sff-border-light); margin-bottom: var(--sp-8); }
@media (max-width: 900px) { .sff-packages__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ── Template alias classes (page-service.php uses these names) ── */

/* Included list */
.sff-included-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-8) auto 0;
    padding: 0;
    max-width: 520px;
    text-align: center;
}
.sff-included-list li {
    font-size: var(--text-sm);
    color: var(--sff-mid);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.sff-included-list li::before {
    content: '✓';
    color: var(--sff-terracotta);
    font-weight: 700;
    flex-shrink: 0;
}

/* Section headings centered */
.sff-section .sff-eyebrow,
.sff-section h2 {
    text-align: center;
}

/* Packages grid */
.sff-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-5);
    align-items: start;
    margin-top: var(--sp-10);
}
.sff-package-card {
    background: var(--sff-white);
    border: 1px solid var(--sff-border-light);
    padding: var(--sp-10) var(--sp-8);
    position: relative;
    text-align: center;
    transition: box-shadow var(--t-base), border-color var(--t-base);
}
.sff-package-card:hover { box-shadow: var(--shadow); border-color: var(--sff-border); }
.sff-package-card--featured {
    border-color: var(--sff-terracotta);
    box-shadow: var(--shadow-lg);
}
.sff-package-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--sff-charcoal);
    margin-bottom: var(--sp-3);
}
.sff-package-card__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--sff-terracotta);
    line-height: 1;
    margin-bottom: var(--sp-6);
}
.sff-package-card__price sup { font-size: var(--text-xl); vertical-align: top; margin-top: 0.4rem; }
.sff-package-card__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    text-align: left;
}
.sff-package-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--sff-mid);
    line-height: 1.5;
}
.sff-package-card__features li::before {
    content: '✓';
    color: var(--sff-terracotta);
    font-weight: 700;
    flex-shrink: 0;
}

/* Add-ons grid */
.sff-addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}
.sff-addon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6);
    background: var(--sff-white);
    border: 1px solid var(--sff-border-light);
    text-align: center;
}
.sff-addon-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--sff-charcoal); }
.sff-addon-card__price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--sff-terracotta); }

/* Session note */
.sff-session-note {
    background: var(--sff-bone);
    border-left: 3px solid var(--sff-terracotta);
    padding: var(--sp-6) var(--sp-8);
    font-size: var(--text-sm);
    color: var(--sff-mid);
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 900px) {
    .sff-packages-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sff-packages-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

/* ── Add-ons ── */
.sff-addons { background: var(--sff-bone); }
.sff-addons__header { text-align: center; margin-bottom: var(--sp-10); }
.sff-addons__header .label { margin-bottom: var(--sp-4); }
.sff-addons__header h2 { margin-bottom: 0; }
.sff-addons__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
}
.sff-addon {
    background: var(--sff-white);
    padding: var(--sp-6);
    border: 1px solid var(--sff-border-light);
}
.sff-addon__name { font-size: var(--text-sm); font-weight: 600; color: var(--sff-charcoal); margin-bottom: var(--sp-2); }
.sff-addon__price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--sff-terracotta); margin-bottom: var(--sp-2); }
.sff-addon__desc { font-size: var(--text-xs); color: var(--sff-muted); line-height: 1.5; }
@media (max-width: 900px) { .sff-addons__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sff-addons__grid { grid-template-columns: 1fr; } }

/* ── Contract Download Section ── */
.sff-contract-section { background: var(--sff-white); }
.sff-contract-section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-12);
    border: 1px solid var(--sff-border-light);
}
.sff-contract-section__text .label { margin-bottom: var(--sp-3); }
.sff-contract-section__text h3     { margin-bottom: var(--sp-3); }
.sff-contract-section__text p      { color: var(--sff-mid); font-size: var(--text-sm); }
.sff-contract-section__cta { flex-shrink: 0; }
@media (max-width: 600px) {
    .sff-contract-section__inner { flex-direction: column; text-align: center; padding: var(--sp-8); }
}

/* ── Session Note ── */
.sff-session-note { background: var(--sff-terracotta); text-align: center; padding-block: var(--sp-12); }
.sff-session-note p { color: rgba(255,255,255,.85); font-size: var(--text-lg); max-width: 55ch; margin-inline: auto; margin-bottom: var(--sp-6); }

/* ── Service Page Portfolio Gallery ── */
.sff-service-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}
.sff-service-gallery__item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
}
.sff-service-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.sff-service-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 768px) { .sff-service-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sff-service-gallery { grid-template-columns: 1fr; } }

/* ── Modeling Portfolio 3D Collage ── */
@keyframes sff-card-in {
    0%   { opacity: 0; transform: perspective(900px) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) translateY(50px) scale(.88); }
    100% { opacity: 1; transform: perspective(900px) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) translateY(0)    scale(1);   }
}
@keyframes sff-float {
    0%, 100% { transform: perspective(900px) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) translateY(0px); }
    50%       { transform: perspective(900px) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) translateY(-5px); }
}

.sff-service-gallery--collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 32px 8px 48px;
}

.sff-service-gallery--collage .sff-service-gallery__item {
    aspect-ratio: 1 / 1;   /* uniform square — no mixed heights */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    --tilt-y: 0deg; --tilt-x: 0deg;
    box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.14);
    transform: perspective(900px) rotateY(var(--tilt-y)) rotateX(var(--tilt-x));
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, z-index 0s;
    animation: sff-card-in .8s cubic-bezier(.22,1,.36,1) both;
    will-change: transform;
}

/* Stagger entry */
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(1)  { animation-delay: .04s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(2)  { animation-delay: .09s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(3)  { animation-delay: .14s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(4)  { animation-delay: .19s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(5)  { animation-delay: .24s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(6)  { animation-delay: .29s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(7)  { animation-delay: .34s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(8)  { animation-delay: .39s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(9)  { animation-delay: .44s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(10) { animation-delay: .49s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(11) { animation-delay: .54s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(12) { animation-delay: .59s; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(n+13) { animation-delay: .64s; }

/* Unique per-card 3D tilt — gives each card its own lean */
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(4n+1) { --tilt-y: -5deg; --tilt-x:  2deg; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(4n+2) { --tilt-y:  4deg; --tilt-x: -3deg; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(4n+3) { --tilt-y: -3deg; --tilt-x:  4deg; }
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(4n+4) { --tilt-y:  5deg; --tilt-x: -2deg; }

/* Subtle float animation on every other card */
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(odd) {
    animation: sff-card-in .8s cubic-bezier(.22,1,.36,1) both,
               sff-float 4s ease-in-out infinite;
    animation-delay: var(--anim-delay, 0s), 1.5s;
}
.sff-service-gallery--collage .sff-service-gallery__item:nth-child(even) {
    animation: sff-card-in .8s cubic-bezier(.22,1,.36,1) both,
               sff-float 4.5s ease-in-out infinite reverse;
    animation-delay: var(--anim-delay, 0s), 2s;
}

/* Normal image fill */
.sff-service-gallery--collage .sff-service-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    image-orientation: from-image;
    display: block;
    transition: object-fit 0s, transform .5s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── In-place expand ── */
.sff-service-gallery--collage .sff-service-gallery__item.is-expanded {
    transform: perspective(900px) rotateY(0deg) rotateX(0deg)
               scale(var(--sc, 2.2)) !important;
    z-index: 100;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.3);
    animation-play-state: paused;
    /* background-image set by JS = same photo, blurred behind the contain image */
    background-size: cover;
    background-position: center;
}
/* Blurred duplicate of the photo fills the "bar" areas — no black lines */
.sff-service-gallery--collage .sff-service-gallery__item.is-expanded::before {
    content: '';
    position: absolute; inset: -4px;
    background: inherit;
    filter: blur(18px) brightness(.55) saturate(1.2);
    transform: scale(1.08);
    z-index: 0;
    border-radius: 10px;
}
/* Full photo — contain so nothing is cropped */
.sff-service-gallery--collage .sff-service-gallery__item.is-expanded img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center center;
    transform: none;
}

/* Gloss shine overlay */
.sff-service-gallery--collage .sff-service-gallery__item::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    transition: opacity .4s ease;
}
.sff-service-gallery--collage .sff-service-gallery__item:hover::before { opacity: 0; }

/* Terracotta glow rim on hover */
.sff-service-gallery--collage .sff-service-gallery__item::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(188,96,72,.6);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity .4s ease;
}
.sff-service-gallery--collage .sff-service-gallery__item:hover::after { opacity: 1; }

@media (max-width: 1024px) { .sff-service-gallery--collage { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sff-service-gallery--collage { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sff-service-gallery--collage .sff-service-gallery__item { --tilt-y: 0deg !important; --tilt-x: 0deg !important; }
}
@media (max-width: 400px)  { .sff-service-gallery--collage { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* ── Transparent shield (blocks right-click / drag on images) ── */
.sff-img-shield {
    position: absolute; inset: 0; z-index: 5;
    background: transparent;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}

/* ============================================================
   INVESTMENT / PRICING OVERHAUL — Luxury Minimal
   ============================================================ */

.sff-pricing-section {
    margin-bottom: var(--sp-16);
    background: var(--sff-white);
    border: 1px solid var(--sff-border-light);
    padding: var(--sp-12) var(--sp-10);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.sff-pricing-section:hover {
    border-color: var(--sff-border);
    box-shadow: var(--shadow);
}
.sff-pricing-section:last-of-type {
    margin-bottom: 0;
}

.sff-pricing-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--sp-8);
    border-bottom: 1px solid var(--sff-border-light);
    padding-bottom: var(--sp-4);
}
.sff-pricing-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--sff-charcoal);
    margin: 0;
}

/* Grid of pricing cards on investment page */
.sff-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}

/* Modern luxury minimal investment card */
.sff-pricing-card {
    background: var(--sff-cream);
    border: 1px solid var(--sff-border-light);
    padding: var(--sp-8) var(--sp-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    text-align: left;
}
.sff-pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--sff-border);
    box-shadow: var(--shadow-sm);
    background: var(--sff-white);
}
.sff-pricing-card__price {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--sff-terracotta);
    margin-bottom: var(--sp-2);
    font-weight: 400;
    line-height: 1;
}
.sff-pricing-card__name {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--sff-charcoal);
    margin-bottom: var(--sp-2);
    letter-spacing: -0.01em;
}
.sff-pricing-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--sff-mid);
    line-height: 1.6;
}

/* Add-ons styling */
.sff-pricing-addons__title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sff-charcoal);
    margin-bottom: var(--sp-4);
}
.sff-pricing-addons__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.sff-pricing-addon-badge {
    background: var(--sff-cream);
    border: 1px solid var(--sff-border-light);
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    transition: all var(--t-fast);
}
.sff-pricing-addon-badge:hover {
    border-color: var(--sff-terracotta);
    background: var(--sff-white);
}
.sff-pricing-addon-badge__name {
    color: var(--sff-charcoal);
}
.sff-pricing-addon-badge__price {
    font-weight: 600;
    color: var(--sff-terracotta);
}

/* Custom layout responsive fixes */
@media (max-width: 768px) {
    .sff-pricing-section {
        padding: var(--sp-8) var(--sp-6);
    }
    .sff-pricing-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
    }
    .sff-pricing-grid {
        grid-template-columns: 1fr;
    }
}