/* =============================================================
   Touching Hearts by SeReniCare — Shared Stylesheet
   Brand palette pulled directly from grandma's pamphlet designs.
   ============================================================= */

/* ---------- Design Tokens ---------- */
:root {
    /* Brand colors (from pamphlet) */
    --c-purple-deep: #5B2C83;
    --c-purple-mid:  #7A3DA9;
    --c-purple-soft: #A46CA6;
    --c-pink:        #E7548E;
    --c-pink-soft:   #F8C8DC;
    --c-gold:        #D4AF37;
    --c-gold-soft:   #F0DFA0;
    --c-cream:       #FFF7EA;
    --c-white:       #FFFFFF;

    /* Text colors — warm purple-tinted neutrals for readability */
    --c-ink:         #2C1A3A;
    --c-ink-soft:    #6B5A78;
    --c-line:        rgba(91, 44, 131, 0.12);

    /* Type scale — generous sizes for accessibility */
    --fs-xs:   0.85rem;
    --fs-sm:   0.95rem;
    --fs-base: 1.125rem;   /* 18px body baseline */
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.75rem;
    --fs-4xl:  3.75rem;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    /* Layout */
    --container: 1200px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(91, 44, 131, 0.08);
    --shadow-md: 0 12px 32px rgba(91, 44, 131, 0.12);
    --shadow-lg: 0 24px 64px rgba(91, 44, 131, 0.18);

    /* Motion */
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --t-fast: 0.2s var(--ease);
    --t-med:  0.4s var(--ease);

    /* Header height (for offset anchors) */
    --header-h: 80px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: var(--c-purple-deep);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--c-pink);
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-purple-deep);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.85rem, 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

.script {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    color: var(--c-pink);
    font-size: 1.4em;
    line-height: 1;
    letter-spacing: 0.01em;
}

.eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-pink);
    margin-bottom: var(--s-3);
}

.lead {
    font-size: var(--fs-lg);
    color: var(--c-ink-soft);
    line-height: 1.7;
}

/* ---------- Utility ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.section {
    padding-block: var(--s-9);
}

.section--tight {
    padding-block: var(--s-7);
}

.text-center { text-align: center; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mb-6 { margin-bottom: var(--s-6); }

/* Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link (accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--s-4);
    background: var(--c-purple-deep);
    color: var(--c-cream);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius-sm);
    z-index: 10000;
    font-weight: 600;
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: var(--s-4);
    color: var(--c-cream);
}

/* Focus ring (accessibility) */
:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-6);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast), color var(--t-fast);
    border: 2px solid transparent;
    min-height: 52px;     /* generous tap target */
    text-align: center;
}

.btn--primary {
    background: var(--c-purple-deep);
    color: var(--c-cream);
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--c-pink);
    color: var(--c-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background: var(--c-cream);
    color: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
}

.btn--secondary:hover {
    background: var(--c-purple-deep);
    color: var(--c-cream);
    transform: translateY(-2px);
}

.btn--gold {
    background: var(--c-gold);
    color: var(--c-purple-deep);
    box-shadow: var(--shadow-sm);
}

.btn--gold:hover {
    background: var(--c-purple-deep);
    color: var(--c-gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--ghost {
    background: transparent;
    color: var(--c-purple-deep);
}

.btn--ghost:hover {
    color: var(--c-pink);
    transform: translateY(-1px);
}

.btn--lg {
    padding: var(--s-5) var(--s-7);
    font-size: var(--fs-lg);
    min-height: 60px;
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 247, 234, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-5);
    max-width: var(--container);
    margin-inline: auto;
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--c-purple-deep);
}

.brand__mark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.brand__name {
    line-height: 1.05;
}

.brand__name-top {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-purple-deep);
    display: block;
}

.brand__name-script {
    font-family: 'Great Vibes', cursive;
    font-size: 1.7rem;
    color: var(--c-pink);
    line-height: 0.85;
    display: block;
    margin-top: 2px;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.nav__list {
    display: flex;
    gap: var(--s-2);
    align-items: center;
}

.nav__link {
    padding: var(--s-3) var(--s-4);
    color: var(--c-ink);
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    transition: background var(--t-fast), color var(--t-fast);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    background: rgba(91, 44, 131, 0.08);
    color: var(--c-purple-deep);
}

.nav__cta {
    margin-left: var(--s-3);
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--c-purple-deep);
}

.nav-toggle:hover {
    background: rgba(91, 44, 131, 0.08);
}

.nav-toggle__bars {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background var(--t-fast);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: currentColor;
    left: 0;
    transition: transform var(--t-fast);
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg) translate(5px, -5px); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: var(--s-10) 0 var(--s-9);
    background:
        radial-gradient(ellipse at top right, rgba(231, 84, 142, 0.18), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(91, 44, 131, 0.12), transparent 55%),
        var(--c-cream);
}

.hero__grid {
    display: grid;
    /* minmax keeps the photo column from collapsing when the img is position:absolute */
    grid-template-columns: 1.1fr minmax(16rem, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.hero__copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__copy .eyebrow {
    text-align: center;
}

.hero__copy h1 {
    font-size: clamp(2.5rem, 5vw, var(--fs-4xl));
    margin-bottom: var(--s-4);
    text-align: center;
}

.hero__copy h1 .script {
    display: block;
    color: var(--c-pink);
    font-size: 1.5em;
    margin: var(--s-2) 0;
}

.hero__lead {
    font-size: var(--fs-lg);
    color: var(--c-ink-soft);
    font-weight: 500;
    max-width: 52ch;
    margin: 0 auto var(--s-6);
    text-align: center;
    text-shadow:
        0 0 1px rgba(255, 247, 234, 1),
        0 0 10px rgba(255, 247, 234, 0.95),
        0 0 22px rgba(255, 247, 234, 0.75),
        0 1px 3px rgba(44, 26, 58, 0.35);
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
}

.hero__visual {
    position: relative;
    width: 100%;
    min-width: 16rem;
    min-height: 12.5rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--c-purple-soft), var(--c-pink-soft));
}

.photo-cover {
    display: block;
}

.hero__visual .photo-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    z-index: 0;
}

/* Subtle bottom tint for contrast with the floating badge */
.hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(91, 44, 131, 0.45));
}

.hero__badge {
    --hero-badge-w: 172px;
    --hero-badge-h: 158px;
    --hero-badge-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-7-4.35-9.5-9C1 9 3 5 7 5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6 4 4.5 7-2.5 4.65-9.5 9-9.5 9z'/%3E%3C/svg%3E");
    position: absolute;
    bottom: var(--s-5);
    right: var(--s-5);
    left: auto;
    width: var(--hero-badge-w);
    height: var(--hero-badge-h);
    padding: 0;
    background: var(--c-pink);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-image: var(--hero-badge-heart);
    mask-image: var(--hero-badge-heart);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 4px 14px rgba(91, 44, 131, 0.35));
    z-index: 2;
}

.hero__badge__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 0.5rem;
    margin-top: -0.5rem;
    text-align: center;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.hero__badge__label span {
    display: block;
    width: 100%;
    text-align: center;
}

.hero__badge .script {
    color: var(--c-white);
    font-size: 1.35rem;
    line-height: 1.1;
}

/* ---------- Page Hero (interior pages) ---------- */
.page-hero {
    background:
        radial-gradient(ellipse at top, rgba(231, 84, 142, 0.15), transparent 60%),
        var(--c-cream);
    padding: var(--s-9) 0 var(--s-7);
    text-align: center;
}

.page-hero h1 {
    margin-bottom: var(--s-4);
}

.page-hero .lead {
    max-width: 60ch;
    margin-inline: auto;
}

/* ---------- Section Header ---------- */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-7);
}

.section-header h2 {
    margin-bottom: var(--s-3);
}

/* ---------- Card grid ---------- */
.grid {
    display: grid;
    gap: var(--s-5);
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Flex + centered rows — last row stays symmetrical (e.g. 7 service cards) */
.grid--auto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--s-5);
}

.grid--auto > * {
    flex: 0 1 300px;
    width: 300px;
    max-width: 100%;
}

/* ---------- Service Card ---------- */
.service-card {
    background: var(--c-white);
    border-radius: var(--radius-md);
    padding: var(--s-6);
    transition: transform var(--t-med), box-shadow var(--t-med);
    border: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    height: 100%;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(91, 44, 131, 0.25);
}

.service-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-purple-deep);
    color: var(--c-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-card__icon svg {
    width: 32px;
    height: 32px;
}

.service-card h3 {
    color: var(--c-purple-deep);
    font-size: var(--fs-xl);
    margin-bottom: var(--s-1);
}

.service-card p {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    flex-grow: 1;
}

/* ---------- Why-Us list ---------- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-inline: 2.35rem;
    overflow: visible;
}

.why-list__item {
    --why-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-7-4.35-9.5-9C1 9 3 5 7 5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6 4 4.5 7-2.5 4.65-9.5 9-9.5 9z'/%3E%3C/svg%3E");
    position: relative;
    z-index: 0;
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
    padding: var(--s-4);
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    overflow: visible;
    perspective: 480px;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.why-list__item::before,
.why-list__item::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    pointer-events: none;
    opacity: 0;
    background-color: var(--c-pink);
    -webkit-mask-image: var(--why-heart-mask);
    mask-image: var(--why-heart-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: scale(0.75) rotateY(0deg);
    transition: opacity 0.35s ease;
    transform-style: preserve-3d;
    backface-visibility: visible;
    filter: drop-shadow(0 2px 6px rgba(91, 44, 131, 0.2));
}

.why-list__item::before {
    left: -2.1rem;
    background-color: var(--c-pink);
}

.why-list__item::after {
    right: -2.1rem;
    background-color: var(--c-purple-deep);
}

.why-list__item:hover {
    z-index: 1;
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.why-list__item:hover::before,
.why-list__item:hover::after {
    opacity: 0.92;
    animation: why-list-heart-float-spin 2.75s ease-in-out infinite;
}

.why-list__item:hover::after {
    animation-delay: -1.35s;
}

@keyframes why-list-heart-float-spin {
    0% {
        transform: translateY(0) rotateY(0deg) scale(0.9);
    }
    25% {
        transform: translateY(-6px) rotateY(90deg) scale(1);
    }
    50% {
        transform: translateY(-8px) rotateY(180deg) scale(1.08);
    }
    75% {
        transform: translateY(-5px) rotateY(270deg) scale(1);
    }
    100% {
        transform: translateY(0) rotateY(360deg) scale(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-list__item::before,
    .why-list__item::after {
        content: none;
    }
}

.why-list__check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-purple-deep);
    color: var(--c-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.why-list__text strong {
    display: block;
    font-size: var(--fs-lg);
    color: var(--c-purple-deep);
    margin-bottom: 2px;
}

.why-list__text span {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
}

.why-image {
    width: 100%;
    min-width: 16rem;
    min-height: 12.5rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--c-purple-deep), var(--c-purple-mid));
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.why-image .photo-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}

/* ---------- Audience cards (We Serve) ---------- */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}

.audience-card {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.audience-card__icon {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-purple-deep), var(--c-purple-mid));
    color: var(--c-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

.audience-card__icon svg {
    width: 48px;
    height: 48px;
}

.audience-card h3 {
    margin-bottom: var(--s-2);
    font-size: var(--fs-lg);
}

.audience-card p {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
}

/* ---------- Values strip (Compassion · Respect · Dignity · Trust) ---------- */
.values-strip {
    background: var(--c-purple-deep);
    color: var(--c-cream);
    padding: var(--s-6) var(--s-5);
}

.values-strip__inner {
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-6);
    font-family: 'Playfair Display', serif;
    font-size: var(--fs-lg);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-white);
}

.values-strip__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    perspective: 56px;
}

/* Spin around vertical axis (rotateY) — like a coin or sign rotating toward/away from you */
@keyframes values-strip-heart-spin-y {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* Wrapper: inline-flex so transform/animation applies (not display:inline). SVG moves with parent. */
.values-strip .values-strip__heart-wrap {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    transform-origin: center center;
    transform-style: preserve-3d;
    vertical-align: middle;
    animation: values-strip-heart-spin-y 2s linear infinite;
    backface-visibility: visible;
}

/* Leading heart counter-clockwise, trailing clockwise */
.values-strip .values-strip__item > .values-strip__heart-wrap:first-of-type {
    animation-direction: reverse;
}

.values-strip .values-strip__heart {
    width: 14px;
    height: 14px;
    color: var(--c-pink);
    display: block;
}

/* ---------- Testimonial ---------- */
.testimonial {
    background:
        radial-gradient(ellipse at center, rgba(255, 247, 234, 0.4), transparent 60%),
        linear-gradient(135deg, var(--c-purple-deep), var(--c-purple-mid));
    color: var(--c-cream);
    padding: var(--s-9) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.testimonial__quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto var(--s-5);
    color: var(--c-cream);
}

.testimonial__quote::before,
.testimonial__quote::after {
    content: '"';
    font-family: 'Playfair Display', serif;
    color: var(--c-gold);
    font-size: 2em;
    line-height: 0;
    vertical-align: middle;
    margin: 0 0.1em;
}

.testimonial__attr {
    color: var(--c-gold-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* ---------- CTA Band ---------- */
.cta-band {
    background:
        radial-gradient(ellipse at center, rgba(231, 84, 142, 0.15), transparent 70%),
        var(--c-cream);
    padding: var(--s-9) 0;
    text-align: center;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.cta-band h2 {
    margin-bottom: var(--s-3);
}

.cta-band__sub {
    color: var(--c-ink-soft);
    font-size: var(--fs-lg);
    margin-bottom: var(--s-6);
    max-width: 60ch;
    margin-inline: auto;
}

.cta-band__buttons {
    display: flex;
    gap: var(--s-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Services page tabs ---------- */
.service-tabs {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: var(--s-7);
}

.tablist {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--s-1);
    background: var(--c-white);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);
}

.tablist__tab {
    flex: 1 1 200px;
    min-height: 52px;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    color: var(--c-ink);
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.tablist__tab:hover {
    color: var(--c-purple-deep);
    background: rgba(91, 44, 131, 0.06);
}

.tablist__tab[aria-selected="true"] {
    color: var(--c-white);
    background: var(--c-purple-deep);
    box-shadow: var(--shadow-sm);
}

.tablist__tab:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

.tab-panel__intro {
    text-align: center;
    max-width: 65ch;
    margin: 0 auto var(--s-7);
}

/* ---------- Service detail block (services page) ---------- */
.service-detail {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--s-5);
    padding: var(--s-6);
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    margin-bottom: var(--s-5);
    align-items: start;
    transition: box-shadow var(--t-med);
}

.service-detail:hover {
    box-shadow: var(--shadow-md);
}

.service-detail__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-purple-deep), var(--c-purple-mid));
    color: var(--c-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-detail__icon svg {
    width: 36px;
    height: 36px;
}

.service-detail h3 {
    margin-bottom: var(--s-3);
}

.service-detail ul {
    margin-top: var(--s-3);
    padding-left: 0;
}

.service-detail ul li {
    position: relative;
    padding-left: var(--s-5);
    margin-bottom: var(--s-2);
    color: var(--c-ink-soft);
}

.service-detail ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-gold);
}

/* ---------- About page ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.about-image {
    width: 100%;
    min-width: 16rem;
    min-height: 12.5rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--c-purple-soft), var(--c-pink));
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.about-image .photo-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-7);
}

.value-card {
    text-align: center;
    padding: var(--s-6) var(--s-4);
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.value-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    background: var(--c-pink-soft);
    color: var(--c-purple-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--s-2);
}

.value-card p {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
}

.parent-brand {
    background: var(--c-cream);
    border: 2px dashed var(--c-purple-soft);
    border-radius: var(--radius-md);
    max-width: 40rem;
    margin: var(--s-8) auto 0;
    padding: var(--s-8) var(--s-7);
    text-align: center;
}

.parent-brand .eyebrow {
    margin-bottom: var(--s-2);
}

.parent-brand h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: var(--s-4);
}

.parent-brand .script {
    font-size: clamp(2.25rem, 5vw, 3rem);
    color: var(--c-pink);
    display: block;
    line-height: 1;
    margin-bottom: var(--s-3);
}

.parent-brand__text {
    max-width: 36ch;
    margin-inline: auto;
    color: var(--c-ink-soft);
    font-size: var(--fs-base);
    line-height: 1.65;
}

/* ---------- Contact page ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-7);
    align-items: start;
}

.contact-info {
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    padding: var(--s-7);
}

.contact-info h2 {
    margin-bottom: var(--s-4);
}

.contact-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    margin-top: var(--s-5);
}

.contact-info__item {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
}

.contact-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-pink);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info__icon svg {
    width: 22px;
    height: 22px;
}

.contact-info__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-soft);
    font-weight: 600;
    margin-bottom: 2px;
}

.contact-info__value {
    font-size: var(--fs-lg);
    color: var(--c-purple-deep);
    font-weight: 600;
}

.contact-info__value a {
    color: var(--c-purple-deep);
}

.contact-info__value a:hover {
    color: var(--c-pink);
}

/* ---------- Form ---------- */
.form-card {
    background: var(--c-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    padding: var(--s-7);
    box-shadow: var(--shadow-sm);
}

.form-card h2 {
    margin-bottom: var(--s-3);
}

.form-card .lead {
    margin-bottom: var(--s-6);
    font-size: var(--fs-base);
}

.form {
    display: grid;
    gap: var(--s-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.field label {
    font-weight: 600;
    color: var(--c-purple-deep);
    font-size: var(--fs-sm);
}

.field label .req {
    color: var(--c-pink);
    margin-left: 2px;
}

.field input,
.field select,
.field textarea {
    padding: var(--s-3) var(--s-4);
    background: var(--c-cream);
    border: 2px solid var(--c-line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-base);
    color: var(--c-ink);
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast);
    min-height: 52px;
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--c-purple-deep);
    background: var(--c-white);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
    border-color: var(--c-pink);
}

.form__consent {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
}

.form__consent input {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    accent-color: var(--c-purple-deep);
    flex-shrink: 0;
}

.form__submit {
    margin-top: var(--s-3);
    justify-self: start;
}

.form__status {
    padding: var(--s-4);
    border-radius: var(--radius-sm);
    font-weight: 600;
    display: none;
}

.form__status[data-state="success"] {
    display: block;
    background: rgba(91, 44, 131, 0.08);
    color: var(--c-purple-deep);
    border: 1px solid var(--c-purple-soft);
}

.form__status[data-state="error"] {
    display: block;
    background: rgba(231, 84, 142, 0.1);
    color: var(--c-pink);
    border: 1px solid var(--c-pink);
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--c-purple-deep);
    color: var(--c-cream);
    padding: var(--s-8) 0 var(--s-5);
    margin-top: var(--s-9);
}

.site-footer a { color: var(--c-cream); }
.site-footer a:hover { color: var(--c-gold); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s-6);
    margin-bottom: var(--s-6);
}

.footer-brand .brand__name-top {
    color: var(--c-cream);
}

.footer-brand p {
    color: rgba(255, 247, 234, 0.7);
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.footer-col h4 {
    color: var(--c-gold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--s-3);
    font-family: 'Inter', sans-serif;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.footer-col a,
.footer-col p {
    font-size: var(--fs-sm);
    color: rgba(255, 247, 234, 0.85);
    line-height: 1.6;
}

.footer-bottom {
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 247, 234, 0.15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-size: var(--fs-xs);
    color: rgba(255, 247, 234, 0.65);
    letter-spacing: 0.05em;
}

/* ---------- Reveal-on-scroll (subtle) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hero__grid,
    .why-grid,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero__visual,
    .why-image,
    .about-image,
    .founder__visual {
        width: 100%;
        max-width: min(100%, 30rem);
        margin-inline: auto;
    }

    .grid--3,
    .audience-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    :root { --header-h: 72px; }

    .nav__list,
    .nav__cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Mobile menu drawer */
    .nav.is-open .nav__list {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--c-cream);
        border-bottom: 1px solid var(--c-line);
        padding: var(--s-4);
        gap: var(--s-2);
        box-shadow: var(--shadow-md);
    }

    .nav.is-open .nav__link {
        font-size: var(--fs-lg);
        padding: var(--s-4);
        text-align: center;
    }

    .nav.is-open .nav__cta {
        display: inline-flex;
        margin: var(--s-3) 0 0;
        align-self: center;
    }

    .section { padding-block: var(--s-7); }

    .grid--3,
    .grid--4,
    .audience-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .grid--auto > * {
        flex: 1 1 100%;
        width: 100%;
        max-width: 360px;
    }

    .field--row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .service-detail {
        grid-template-columns: 1fr;
    }

    .service-detail__icon {
        margin: 0 auto;
    }

    .hero__badge {
        --hero-badge-w: 128px;
        --hero-badge-h: 118px;
    }

    .hero__badge__label {
        margin-top: -0.35rem;
        font-size: 0.72rem;
    }

    .hero__badge .script {
        font-size: 1.1rem;
    }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Stop decorative heart spin — beats the blanket * rule above */
    .values-strip .values-strip__heart-wrap {
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .values-strip__item [data-edit] {
        animation: none !important;
    }
}

/* ---------- Print ---------- */
@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .cta-band,
    .form-card { display: none; }

    body { background: white; color: black; }
}

/* =============================================================
   C-TEC ANIMATION LAYER — Warm particle canvas + breathing glow
   Added: 2026-05-09 | Architect: Darlington Princewill
   Rules: Additive only. Do NOT modify anything above this line.
   ============================================================= */

/* --- Hero canvas layer --- */
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
}

/* --- Breathing glow orbs --- */
.hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
    animation: th-breathe 4.5s ease-in-out infinite;
}

.hero__glow--pink {
    top: -25%;
    right: -15%;
    width: 70%;
    height: 125%;
    background: radial-gradient(ellipse, rgba(231, 84, 142, 0.18), transparent 68%);
    animation-delay: 0s;
}

.hero__glow--purple {
    bottom: -25%;
    left: -15%;
    width: 70%;
    height: 125%;
    background: radial-gradient(ellipse, rgba(91, 44, 131, 0.13), transparent 68%);
    animation-delay: 2.25s;  /* offset by half cycle for counterpoint breathing */
}

/* Inhale → hold → exhale cycle */
@keyframes th-breathe {
    0%   { opacity: 0.6; }
    40%  { opacity: 1;   }
    60%  { opacity: 1;   }
    100% { opacity: 0.6; }
}

/* --- Hero content must sit above canvas + glow layers --- */
/* The existing .container inside .hero already has no z-index set.
   Add this to ensure it floats above the new layers. */
.hero > .container {
    position: relative;
    z-index: 2;
}

/* --- Hero badge heartbeat --- */
.hero__badge {
    animation: th-heartbeat 1.1s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

/* Double-beat: lub-dub pattern (two quick beats then rest) */
@keyframes th-heartbeat {
    0%   { transform: scale(1); }
    10%  { transform: scale(1.12); }   /* lub */
    20%  { transform: scale(1); }
    32%  { transform: scale(1.08); }   /* dub */
    44%  { transform: scale(1); }
    100% { transform: scale(1); }      /* rest */
}

/* --- Staggered reveal (extends existing .reveal system) ---
   Apply .reveal--stagger to a grid parent, and children
   receive animation delays based on their DOM index via JS */
.reveal--stagger-child {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Values strip — staggered word float + gold bloom */
.values-strip__item [data-edit] {
    display: inline-block;
    animation: th-word-float 3s ease-in-out infinite,
               th-word-glow  3s ease-in-out infinite;
}

.values-strip__item:nth-child(1) [data-edit] { animation-delay: 0s;    }
.values-strip__item:nth-child(2) [data-edit] { animation-delay: 0.75s; }
.values-strip__item:nth-child(3) [data-edit] { animation-delay: 1.5s;  }
.values-strip__item:nth-child(4) [data-edit] { animation-delay: 2.25s; }

@keyframes th-word-float {
    0%,100% { transform: translateY(0px);  }
    50%     { transform: translateY(-6px); }
}

@keyframes th-word-glow {
    0%,100% { color: #FFFFFF; text-shadow: none; }
    50%     { color: #F0DFA0;
              text-shadow: 0 0 14px rgba(212,175,55,.5),
                           0 0 30px rgba(212,175,55,.2); }
}

/* --- Reduced motion: kill all new animations --- */
@media (prefers-reduced-motion: reduce) {
    .hero__canvas,
    .hero__glow {
        display: none !important;
    }

    .hero__badge {
        animation: none !important;
    }

    .why-list__item:hover::before,
    .why-list__item:hover::after {
        animation: none !important;
    }
}

/* =============================================================
   FOUNDER'S STORY LAYOUT — Copy Overhaul 2026-05-09
   Mirrors .why-grid pattern. Additive only.
   Uses --s-* tokens (site scale); handoff --space-* mapped here.
   ============================================================= */

.founder-grid {
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.founder__visual {
    width: 100%;
    min-width: 16rem;
    min-height: 12.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    background: linear-gradient(135deg, var(--c-purple-deep), var(--c-purple-mid));
    box-shadow: var(--shadow-lg);
}

.founder__visual .photo-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
}

.founder__copy {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.founder__copy p + p {
    margin-top: 0;
}

.founder__copy .btn {
    align-self: flex-start;
    margin-top: var(--s-2);
}

@media (max-width: 1024px) {
    .founder-grid {
        grid-template-columns: 1fr;
    }
}

/* Narrow / short viewports: landscape-friendly ratio (photos are ~16:9) */
@media (max-width: 768px) {
    .hero__visual,
    .why-image,
    .founder__visual {
        aspect-ratio: 16 / 10;
        min-height: 11rem;
    }

    .about-image {
        min-height: 14rem;
    }
}