/* =========================================================
   Alterations Plus PH — Home Page CSS
   Includes: hero, services carousel, testimonials marquee,
             fit section, about, process, contact, FAQ.
   Fully responsive.
   ========================================================= */

.home-page {
    background: #ffffff;
}

.home-page .public-main {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* =========================================================
   1. HERO
   ========================================================= */

.home-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background: #c5c075;
}

.hero-slider,
.hero-track,
.hero-slide {
    width: 100%;
    height: 100%;
}

.hero-track {
    display: flex;
    width: 400%;
    transition: transform 0.82s cubic-bezier(.77, 0, .18, 1);
    will-change: transform;
}

.hero-slide {
    position: relative;
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transform: scale(1.015);
}

.hero-slide-1 .hero-bg { background-image: url("../../images/HERO_3.png"); }
.hero-slide-2 .hero-bg { background-image: url("../../images/HERO_8.png"); }
.hero-slide-3 .hero-bg { background-image: url("../../images/HERO_9.png"); }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.02) 72%),
        linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.02) 38%, rgba(0,0,0,.12) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(640px, calc(100% - clamp(32px, 8vw, 160px)));
    margin-left: clamp(32px, 7vw, 92px);
    color: #ffffff;
    transform: translateY(2vh);
}

.hero-kicker {
    margin-bottom: clamp(10px, 1.4vw, 18px);
    color: rgba(255, 245, 230, 0.92);
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(0.82rem, 1.18vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

.hero-title {
    margin-bottom: clamp(14px, 1.8vw, 26px);
    color: #ffffff;
    font-family: var(--font-display-sc, "Playfair Display SC", Georgia, serif);
    font-size: clamp(3rem, 5.4vw, 5.9rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-shadow: 0 12px 38px rgba(0,0,0,.18);
}

.hero-title span { color: #fff5e6; }

.hero-copy {
    width: min(460px, 100%);
    margin-bottom: clamp(20px, 2.4vw, 36px);
    color: rgba(255,255,255,.88);
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.96rem, 1.2vw, 1.1rem);
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.84rem, 0.98vw, 0.94rem);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s;
}

.hero-btn-primary {
    background: #a40e0e;
    color: #ffffff;
    border: 1px solid #a40e0e;
    box-shadow: 0 12px 28px rgba(139,0,0,.24);
}

.hero-btn-primary:hover {
    background: #8b0000;
    border-color: #8b0000;
    transform: translateY(-2px);
}

.hero-btn-secondary {
    background: rgba(255,255,255,.18);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.44);
    backdrop-filter: blur(12px);
}

.hero-btn-secondary:hover {
    background: rgba(255,255,255,.26);
    transform: translateY(-2px);
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3vh, 32px);
    z-index: 5;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.hero-dot {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    cursor: pointer;
    transition: width .24s, background .24s, transform .24s;
}

.hero-dot.active { width: 28px; background: #ffffff; }
.hero-dot:hover  { transform: translateY(-1px); }

/* =========================================================
   2. SHARED SECTION STYLES
   ========================================================= */

.home-section,
.about-section,
.process-section,
.contact-section,
.faq-section {
    width: 100%;
    padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 82px);
}

.section-heading,
.about-heading,
.contact-heading {
    max-width: 820px;
    margin: 0 auto clamp(36px, 4vw, 58px);
    text-align: center;
}

.section-heading p,
.about-heading p,
.contact-heading p,
.section-label {
    margin-bottom: 0.5rem;
    color: #8b0000;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(0.86rem, 1.02vw, 1.02rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-heading h2,
.about-heading h2,
.contact-heading h2 {
    margin: 0;
    color: #111111;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(2rem, 4.2vw, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
}

.section-heading span {
    display: block;
    margin-top: 0.8rem;
    color: #777777;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1.08rem, 1.38vw, 1.36rem);
    font-style: italic;
}

/* =========================================================
   3. SERVICES CAROUSEL
   ========================================================= */

.services-section {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 46%, rgba(139,0,0,.045), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    overflow: hidden;
}

.svc-carousel-shell {
    position: relative;
    width: min(1500px, 100%);
    min-height: clamp(420px, 56vh, 620px);
    margin: 0 auto;
}

.svc-stage {
    position: relative;
    width: 100%;
    height: clamp(420px, 56vh, 620px);
}

.svc-card {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    border-radius: 18px;
    background: #111111;
    cursor: pointer;
    box-shadow: 0 16px 48px rgba(0,0,0,.14);
    transition:
        left .55s cubic-bezier(.34,1.1,.64,1),
        width .55s cubic-bezier(.34,1.1,.64,1),
        height .55s cubic-bezier(.34,1.1,.64,1),
        transform .55s cubic-bezier(.34,1.1,.64,1),
        opacity .35s ease,
        box-shadow .35s ease;
    transform: translate(-50%, -50%);
}

.svc-card[data-pos="0"]  { width: clamp(300px,24vw,420px); height: clamp(420px,52vh,560px); z-index:10; opacity:1; box-shadow: 0 26px 76px rgba(0,0,0,.22); }
.svc-card[data-pos="-1"],.svc-card[data-pos="1"] { width: clamp(230px,18vw,315px); height: clamp(320px,40vh,430px); z-index:8; opacity:.78; }
.svc-card[data-pos="-1"] { left: calc(50% - clamp(210px,19vw,315px)); }
.svc-card[data-pos="1"]  { left: calc(50% + clamp(210px,19vw,315px)); }
.svc-card[data-pos="-2"],.svc-card[data-pos="2"] { width: clamp(170px,13vw,230px); height: clamp(240px,30vh,320px); z-index:6; opacity:.42; }
.svc-card[data-pos="-2"] { left: calc(50% - clamp(390px,34vw,560px)); }
.svc-card[data-pos="2"]  { left: calc(50% + clamp(390px,34vw,560px)); }
.svc-card[data-pos="-3"],.svc-card[data-pos="3"] { width: clamp(120px,10vw,165px); height: clamp(175px,22vh,230px); z-index:4; opacity:.16; }
.svc-card[data-pos="-3"] { left: calc(50% - clamp(540px,48vw,760px)); }
.svc-card[data-pos="3"]  { left: calc(50% + clamp(540px,48vw,760px)); }
.svc-card:hover { transform: translate(-50%, calc(-50% - 8px)); }

.svc-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform .45s ease;
}

.svc-card:hover .svc-card-img { transform: scale(1.055); }

.svc-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(18px,2vw,28px);
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,.02) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}

.svc-card[data-pos="0"] .svc-card-overlay { opacity: 1; }

.svc-brand {
    margin-bottom: 0.55rem;
    color: rgba(255,245,230,.82);
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.svc-title {
    color: #ffffff;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(1.5rem,2vw,2rem);
    line-height: 1.12;
}

.svc-title em { color: #fff5e6; font-style: italic; }

.svc-sub {
    margin-top: 0.45rem;
    color: rgba(255,255,255,.76);
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.svc-desc {
    margin-top: 0.85rem;
    color: rgba(255,245,230,.88);
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(0.98rem,1.18vw,1.12rem);
    font-style: italic;
    line-height: 1.55;
}

.svc-card-label {
    position: absolute;
    left: 50%;
    bottom: -34px;
    color: #111111;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
}

.svc-card[data-pos="-1"] .svc-card-label,
.svc-card[data-pos="1"]  .svc-card-label { opacity: .85; }

.svc-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #eeeeee;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #111111;
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transform: translateY(-50%);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.svc-nav-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.svc-nav-left  { left:  clamp(8px, 2vw, 30px); }
.svc-nav-right { right: clamp(8px, 2vw, 30px); }

.svc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(8px,1.5vw,20px);
}

.svc-dot {
    width: 38px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: #d9d9d9;
    transition: background .24s, width .24s;
}

.svc-dot.active { width: 46px; background: #8b0000; }

.services-footer-note {
    max-width: 720px;
    margin: clamp(22px,2vw,30px) auto 0;
    color: #777777;
    text-align: center;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1.02rem,1.22vw,1.2rem);
    font-style: italic;
}

.svc-bg-1 { background-image: url("../../images/service1.jpg"); }
.svc-bg-2 { background-image: url("../../images/service2.webp"); }
.svc-bg-3 { background-image: url("../../images/service3.webp"); }
.svc-bg-4 { background-image: url("../../images/service4.webp"); }
.svc-bg-5 { background-image: url("../../images/service5.webp"); }
.svc-bg-6 { background-image: url("../../images/service6.webp"); }
.svc-bg-7 { background-image: url("../../images/service7.webp"); }

/* =========================================================
   4. TESTIMONIALS  — infinite dual-row marquee
      (repositioned: between Services Carousel and Fit Section)
   ========================================================= */

.testimonials-section {
    padding: clamp(12px,2vw,24px) 0 clamp(48px,6vw,80px);
    background:
        radial-gradient(circle at 50% 60%, rgba(139,0,0,.04), transparent 32rem),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
    overflow: hidden;
}

.testimonials-section .section-heading {
    padding-inline: clamp(20px,5vw,82px);
}

/* ---- outer wrapper: clips overflow + edge-fade mask ---- */
.testimonials-marquee-wrap {
    position: relative;
    width: 100%;
    margin-top: clamp(14px,2vw,28px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}

/* ---- individual row ---- */
.testimonials-track {
    display: flex;
    gap: clamp(14px,1.8vw,22px);
    width: max-content;
    padding: clamp(10px,1.2vw,16px) 0;
}

.testimonials-track--fwd {
    animation: testimonialsScrollLeft 52s linear infinite;
    margin-bottom: clamp(14px,1.8vw,22px);
}

.testimonials-track--rev {
    animation: testimonialsScrollRight 60s linear infinite;
}

/* pause on hover for the whole wrap */
.testimonials-marquee-wrap:hover .testimonials-track,
.testimonials-marquee-wrap:focus-within .testimonials-track {
    animation-play-state: paused;
}

@keyframes testimonialsScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes testimonialsScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ---- tile ---- */
.t-tile {
    flex: 0 0 auto;
    width: clamp(280px, 22vw, 340px);
    padding: clamp(20px,2vw,28px);
    border: 1px solid rgba(139,0,0,.10);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0,0,0,.06);
    cursor: pointer;
    user-select: none;
    outline-offset: 3px;
    transition: transform .28s cubic-bezier(.34,1.1,.64,1), box-shadow .28s ease, border-color .28s ease;
}

.t-tile:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 40px rgba(0,0,0,.11);
    border-color: rgba(139,0,0,.22);
}

.t-tile:focus-visible {
    outline: 2px solid #8b0000;
}

/* tile header row */
.t-tile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* colored initial avatar */
.t-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-family: var(--font-display-sc, "Playfair Display SC", Georgia, serif);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.t-tile-header-info strong {
    display: block;
    color: #111111;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
}

.t-tile-header-info small {
    display: block;
    color: #888888;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 2px;
}

/* star rating */
.t-stars {
    color: #d4a017;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

/* short preview text */
.t-preview {
    color: #333333;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1.02rem, 1.18vw, 1.12rem);
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "read more" hint */
.t-read-more {
    display: inline-block;
    color: #8b0000;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.76;
    transition: opacity .2s;
}

.t-tile:hover .t-read-more { opacity: 1; }

/* note below marquee */
.testimonials-note {
    max-width: 480px;
    margin: clamp(20px,2.5vw,32px) auto 0;
    color: #999999;
    text-align: center;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1rem,1.18vw,1.15rem);
    font-style: italic;
}

/* =========================================================
   5. TESTIMONIAL MODAL
   ========================================================= */

.testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.testimonial-modal[hidden] { display: none; }

.testimonial-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,8,8,.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.testimonial-modal-inner {
    position: relative;
    z-index: 1;
    max-width: 580px;
    width: 100%;
    padding: clamp(28px,4vw,52px);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 40px 100px rgba(0,0,0,.30);
    animation: modalIn .32s cubic-bezier(.34,1.1,.64,1) forwards;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.testimonial-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    background: #f8f4f0;
    color: #555555;
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
}

.testimonial-modal-close:hover { background: #8b0000; color: #ffffff; transform: scale(1.08); }

.testimonial-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.testimonial-modal-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-family: var(--font-display-sc, "Playfair Display SC", Georgia, serif);
    font-size: 1.55rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.testimonial-modal-name {
    margin: 0 0 4px;
    color: #111111;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(1.35rem,2.2vw,1.75rem);
    line-height: 1.1;
}

.testimonial-modal-meta {
    margin: 0 0 6px;
    color: #888888;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.84rem;
    font-weight: 600;
}

.testimonial-modal-stars {
    color: #d4a017;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.testimonial-modal-text {
    margin: 0 0 26px;
    padding: clamp(16px,2vw,24px);
    border-left: 3px solid #8b0000;
    border-radius: 0 12px 12px 0;
    background: #fff8f5;
    color: #222222;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(1.06rem,1.4vw,1.28rem);
    font-style: italic;
    line-height: 1.75;
}

.testimonial-modal-cta {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0.72rem 1.35rem;
    border-radius: 999px;
    background: #8b0000;
    color: #ffffff;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(139,0,0,.22);
    transition: background .2s, transform .2s;
}

.testimonial-modal-cta:hover { background: #a40e0e; transform: translateY(-2px); }

/* =========================================================
   6. FIT / BOOK HIGHLIGHT
   ========================================================= */

.fit-section {
    position: relative;
    min-height: clamp(620px, 82vh, 860px);
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #fff8bf;
}

.fit-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,248,191,.06), rgba(255,248,191,.82) 54%, rgba(255,248,191,.96)),
        url("../../images/YOUR STYLE.png") center / cover no-repeat;
}

.fit-inner {
    position: relative;
    z-index: 1;
    width: min(1440px, calc(100% - clamp(32px,7vw,150px)));
    display: grid;
    grid-template-columns: 1fr minmax(320px,620px);
    gap: clamp(28px,6vw,82px);
    margin: 0 auto;
    align-items: center;
}

.fit-content { text-align: right; }

.fit-content h2 {
    margin: 0 0 clamp(18px,2vw,28px);
    color: #000000;
    font-family: var(--font-display-sc, "Playfair Display SC", Georgia, serif);
    font-size: clamp(2.4rem,4.8vw,5rem);
    font-weight: 400;
    line-height: 1.08;
}

.fit-content p:not(.section-label) {
    margin-left: auto;
    max-width: 610px;
    color: #111111;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(1rem,1.2vw,1.14rem);
    line-height: 1.9;
    text-align: justify;
}

.fit-btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(24px,2.5vw,36px);
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    background: #a40e0e;
    color: #ffffff;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(164,14,14,.22);
    transition: transform .22s, background .22s;
}

.fit-btn:hover { background: #8b0000; transform: translateY(-2px); }

/* =========================================================
   7. ABOUT
   ========================================================= */

.about-section { background: #ffffff; }

.about-grid {
    width: min(1440px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px,4.5vw,70px);
    margin: 0 auto;
    align-items: center;
}

.about-panel { min-width: 0; }

.about-panel-image {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
}

.about-image {
    width: 100%;
    min-height: clamp(280px,34vw,440px);
    background-size: cover;
    background-position: center top;
    transition: transform .45s ease;
}

.about-panel-image:hover .about-image { transform: scale(1.035); }
.about-image-1 { background-image: url("../../images/service1.webp"); }
.about-image-2 { background-image: url("../../images/service2.webp"); }

.about-copy h3 {
    margin-bottom: 1rem;
    color: #8b0000;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(1.38rem,2vw,2rem);
}

.about-copy p:not(.section-label) {
    color: #111111;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.98rem,1.08vw,1.1rem);
    line-height: 1.9;
    text-align: justify;
}

.about-copy p + p { margin-top: 1rem; }

/* =========================================================
   8. PROCESS
   ========================================================= */

.process-section {
    background:
        radial-gradient(circle at top left, rgba(139,0,0,.04), transparent 24rem),
        #fffdf8;
}

.process-grid {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(18px,2vw,28px);
    margin: 0 auto;
}

.process-card {
    min-height: 250px;
    padding: clamp(24px,2.4vw,34px);
    border: 1px solid #eee4d8;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0,0,0,.045);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139,0,0,.22);
    box-shadow: 0 18px 42px rgba(0,0,0,.075);
}

.process-card span {
    display: inline-flex;
    margin-bottom: 1.25rem;
    color: #8b0000;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 1.02rem;
}

.process-card h3 {
    margin-bottom: 0.8rem;
    color: #111111;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(1.38rem,2vw,1.82rem);
}

.process-card p {
    color: #555555;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.98rem,1.08vw,1.06rem);
    line-height: 1.8;
}

/* =========================================================
   9. CONTACT
   ========================================================= */

.contact-section { background: #ffffff; }

.contact-grid {
    width: min(1440px, 100%);
    display: grid;
    grid-template-columns: minmax(320px,1.1fr) minmax(300px,.9fr);
    gap: clamp(30px,4vw,70px);
    margin: 0 auto;
    align-items: start;
}

.map-card {
    overflow: hidden;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.map-link {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid #eeeeee;
    color: #8b0000;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
}

.map-card iframe {
    display: block;
    width: 100%;
    height: clamp(340px,34vw,480px);
    border: 0;
}

.contact-info { padding-top: clamp(0px,1vw,10px); }

.contact-info h3 {
    margin: 0.65rem 0 1rem;
    color: #111111;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(2rem,3vw,3rem);
    font-weight: 600;
}

.contact-info p:not(.section-label) {
    color: #111111;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.98rem,1.05vw,1.06rem);
    line-height: 2;
}

.contact-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 1.4rem;
}

.contact-list a {
    color: #8b0000;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-weight: 600;
    font-size: clamp(0.96rem,1.02vw,1.04rem);
}

.subscribe-card {
    margin-top: clamp(26px,3vw,42px);
    padding-top: 1.5rem;
    border-top: 1px solid #eeeeee;
}

.subscribe-card h4 {
    margin-bottom: 0.5rem;
    color: #8b0000;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: 1.52rem;
}

.subscribe-card p {
    color: #777777;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.92rem;
}

.subscribe-form {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: 1rem;
    border: 1px solid #999999;
    border-radius: 4px;
    overflow: hidden;
}

.subscribe-form input {
    min-height: 46px;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0.75rem 1rem;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.96rem;
}

.subscribe-form button {
    min-width: 86px;
    border: 0;
    background: #8b0000;
    color: #ffffff;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.subscribe-message {
    display: none;
    margin-top: 0.7rem;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.88rem;
}

/* =========================================================
   10. FAQ
   ========================================================= */

.faq-section {
    position: relative;
    background:
        linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.88)),
        url("../../images/FAQ-IMAGE.png") center / cover no-repeat;
}

.faq-banner {
    width: min(1120px, 100%);
    margin: 0 auto clamp(28px,3vw,44px);
    padding: clamp(36px,5vw,60px);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    text-align: center;
    box-shadow: 0 12px 34px rgba(0,0,0,.055);
    backdrop-filter: blur(10px);
}

.faq-banner p {
    margin-bottom: 0.5rem;
    color: #8b0000;
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.92rem;
}

.faq-banner h2 {
    color: #111111;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: clamp(2rem,4vw,3.5rem);
}

.faq-banner span {
    display: block;
    margin-top: 0.75rem;
    color: #333333;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: clamp(0.98rem,1.12vw,1.08rem);
}

.faq-grid {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 auto;
}

.faq-item {
    overflow: hidden;
    border-radius: 16px;
    background: #fff5e6;
    transition: background .24s, box-shadow .24s;
}

.faq-item.open {
    background: #8b0000;
    box-shadow: 0 12px 28px rgba(139,0,0,.14);
}

.faq-question {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    background: transparent;
    padding: 1rem 1.4rem;
    color: #111111;
    text-align: left;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.faq-item.open .faq-question { color: #ffffff; }

.faq-question strong {
    color: #8b0000;
    font-size: 1.5rem;
    transition: transform .24s, color .24s;
}

.faq-item.open .faq-question strong { color: #ffffff; transform: rotate(45deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.4rem;
    color: #333333;
    font-family: var(--font-body, Montserrat, Arial, sans-serif);
    font-size: 0.96rem;
    line-height: 1.8;
    transition: max-height .3s ease, padding .24s ease;
}

.faq-item.open .faq-answer {
    max-height: 240px;
    padding-bottom: 1.3rem;
    color: rgba(255,245,230,.92);
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .svc-card[data-pos="-3"],.svc-card[data-pos="3"] { display: none; }
    .fit-inner,.about-grid,.contact-grid { gap: 36px; }
}

@media (max-width: 980px) {
    .home-hero { min-height: 580px; }
    .hero-content { width: min(620px, calc(100% - 48px)); margin-left: 32px; }
    .hero-title { font-size: clamp(2.6rem,8vw,4.8rem); }
    .svc-card[data-pos="-2"],.svc-card[data-pos="2"] { display: none; }
    .svc-card[data-pos="-1"] { left: calc(50% - 190px); }
    .svc-card[data-pos="1"]  { left: calc(50% + 190px); }
    .fit-inner { grid-template-columns: 1fr; }
    .fit-space { display: none; }
    .fit-content { max-width: 680px; margin-left: auto; text-align: left; }
    .fit-content p:not(.section-label) { margin-left: 0; }
    .about-grid,.contact-grid,.faq-grid { grid-template-columns: 1fr; }
    .about-panel-image:nth-of-type(4) { order: 3; }
    .t-tile { width: clamp(260px,58vw,320px); }
}

@media (max-width: 720px) {
    .home-hero { height: 100svh; min-height: 560px; }
    .hero-overlay {
        background:
            linear-gradient(90deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.14) 60%, rgba(0,0,0,.06) 100%),
            linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.12));
    }
    .hero-content { width: calc(100% - 40px); margin: 0 auto; transform: translateY(3vh); }
    .hero-copy { max-width: 420px; }
    .hero-actions { max-width: 320px; }
    .hero-btn { width: 100%; }
    .services-section { min-height: auto; }
    .svc-carousel-shell,.svc-stage { min-height: 390px; height: 390px; }
    .svc-card[data-pos="0"]  { width: min(292px, calc(100vw - 64px)); height: 360px; }
    .svc-card[data-pos="-1"],.svc-card[data-pos="1"] { width: 160px; height: 230px; opacity: .34; }
    .svc-card[data-pos="-1"] { left: calc(50% - 136px); }
    .svc-card[data-pos="1"]  { left: calc(50% + 136px); }
    .svc-nav-btn { width: 40px; height: 40px; }
    .fit-section { min-height: 620px; }
    .fit-bg { background: linear-gradient(180deg, rgba(255,248,191,.76), rgba(255,248,191,.98)), url("../../images/YOUR STYLE.png") left center / cover no-repeat; }
    .fit-content h2 { font-size: clamp(2.3rem,10vw,3.6rem); }
    .process-grid { grid-template-columns: 1fr; }
    .subscribe-form { grid-template-columns: 1fr; border: 0; gap: 0.7rem; }
    .subscribe-form input,.subscribe-form button { min-height: 48px; border: 1px solid #999999; border-radius: 999px; }
    .testimonials-section .section-heading { padding-inline: 20px; }
    .t-tile { width: clamp(240px,70vw,290px); }
}

@media (max-width: 520px) {
    .home-hero { min-height: 540px; }
    .hero-kicker { letter-spacing: 0.22em; }
    .hero-title { font-size: clamp(2.45rem,13vw,3.7rem); }
    .hero-copy { font-size: 0.9rem; }
    .svc-card[data-pos="-1"],.svc-card[data-pos="1"] { display: none; }
    .svc-carousel-shell,.svc-stage { min-height: 350px; height: 350px; }
    .svc-card[data-pos="0"] { height: 330px; }
    .home-section,.about-section,.process-section,.contact-section,.faq-section { padding-inline: 18px; }
    .about-image { min-height: 260px; }
    .map-card iframe { height: 340px; }
    .testimonial-modal-inner { padding: 24px; }
}

@media (min-width: 1500px) {
    .hero-content { margin-left: clamp(92px,9vw,160px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-track,.svc-card,.svc-card-img,.about-image,.process-card,
    .hero-btn,.fit-btn,.faq-answer,.t-tile,.testimonials-track,
    .testimonial-modal-inner { transition: none !important; animation: none !important; }
}