/* Wedding Souls — logo mark placement.
   The mark is a square JPEG, so it is masked to a circle and given a hairline
   ring to sit cleanly against the template's dark surfaces. */

.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--_color---white-15);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.brand-mark--footer {
    width: 1.75rem;
    height: 1.75rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
}

@media screen and (max-width: 767px) {
    .brand-mark {
        width: 2rem;
        height: 2rem;
    }
    .footer-brand {
        gap: .5rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Typographic and surface refinements.

   Loaded after wedding-souls.css on every page, so this is the layer that
   adjusts the template without editing it. Everything here is a property
   value — no selector depends on markup that does not already exist.
   ───────────────────────────────────────────────────────────────────────── */

/* Display type ----------------------------------------------------------
   Fraunces replaces Phudu. It is an optical-size serif: font-optical-sizing
   defaults to `auto`, so the 9.25rem hero and a 1.5rem card title resolve to
   genuinely different letterforms rather than one drawing scaled up and down.
   That is the reason for choosing it, and it needs no declaration to work.

   What it does need is tighter tracking. The template was set in a condensed
   face whose default spacing suits large sizes; a serif at 148px looks loose
   with the same metrics. */
.hero-heading,
.section-heading,
.project-collection-heading,
.cta-heading,
.single-innner-heading {
    letter-spacing: -.022em;
    text-wrap: balance;
}

.font-2-small,
.font-2-medium,
.font-3-normal,
.project-card-title,
.counter-text,
.reviewer-name,
.email-address {
    letter-spacing: -.012em;
}

/* Micro-labels read as small headings when set in a display serif. Put them
   back in the body face, uppercased and widely tracked, so they read as the
   labels they are. */
.section-counter-text,
.subject {
    font-family: var(--font-family--inter-tight);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section-counter-text {
    font-size: .8125rem;
}

/* Ragged-right body copy on a dark background benefits most from `pretty`,
   which pulls up orphans without the reflow cost of `balance` on long text. */
p {
    text-wrap: pretty;
}

/* Surfaces --------------------------------------------------------------
   Card greys are warmed in wedding-souls.css; a hairline lets each card
   separate from the page without a border heavy enough to read as a box. */
.team-card,
.testimonial-info-card,
.services-card {
    box-shadow: inset 0 0 0 1px var(--_color---white-15);
}

/* Imagery ---------------------------------------------------------------
   One easing for every photo that sits inside a hoverable card. The wrappers
   need overflow clipping or the scale spills past the card edge. */
.project-image-wrapper,
.project-card,
.service-image-wrapper,
.process-image-wrapper,
.team-img-wrap {
    overflow: hidden;
}

.project-image,
.project-card-img,
.service-image,
.process-img,
.team-image {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1),
                filter .7s cubic-bezier(.22, 1, .36, 1);
}

.project-collection-wrapper:hover .project-image,
.project-card:hover .project-card-img,
.services-card:hover .service-image {
    transform: scale(1.04);
    filter: brightness(1.06);
}

/* Interaction -----------------------------------------------------------
   The template ships no visible focus state, so keyboard navigation is
   invisible on a near-black page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--_color---primary-color);
    outline-offset: 3px;
    border-radius: 1px;
}

::selection {
    background-color: var(--_color---primary-color);
    color: var(--_color---white);
}

@media (prefers-reduced-motion: reduce) {
    .project-image,
    .project-card-img,
    .service-image,
    .process-img,
    .team-image {
        transition: none;
    }

    .project-collection-wrapper:hover .project-image,
    .project-card:hover .project-card-img,
    .services-card:hover .service-image {
        transform: none;
    }
}

/* Claims the imagery cannot support -------------------------------------
   The five review cards were rewritten to verifiable facts rather than
   invented testimonials, but each still carries the template's client-logo
   wordmark. There are no client logos to put there, so it is hidden rather
   than left implying agencies that were never clients. */
.reviewer-logo {
    display: none;
}

/* The team cards name real roles, one of them a named individual. Every
   photograph available is client wedding work — there is no picture of the
   team — so a couple's portrait beneath "Founder & Lead Photographer" would
   put a stranger's face on a named person. The cards render as typographic
   until real team photographs exist; delete this rule when they do. */
.team-img-wrap {
    display: none;
}

/* Without the image the card measured 121px, which reads as an afterthought
   under a 7rem heading. Given enough height to hold the grid on its own. */
.team-card {
    padding-top: 3.25rem;
    padding-bottom: 3.5rem;
    justify-content: center;
    min-height: 13rem;
}

/* The hero carries a full-strength `mix-blend-mode: color` wash in the brand
   ember. Against the template's abstract stock that was a styling device;
   against real wedding photography it flattens the saree reds, the gold and
   every skin tone into one flat orange — it hides the work the page exists to
   show. Held back so the tint unifies the heroes without replacing them. */
.blend-color {
    opacity: .38;
}

/* Agency name suffix ".in": lower case even inside capitals. */
.brand-tld {
    text-transform: none;
}

/* In the hero, much smaller than the name so the line still fits at 360 px. */
.hero-heading .brand-tld {
    font-size: .42em;
    letter-spacing: 0;
}

/* Header booking button. It sits outside the collapsible menu, so on phones it
   stays beside the menu button. */
.nav-cta {
    /* Not flex: a flex item drops the leading space of " a Consultation". */
    display: inline-block;
    padding: .7rem 1.15rem;
    border-radius: 999px;
    background-color: var(--_color---granadier);
    color: var(--_color---white);
    font-weight: var(--fonts-weight--medium);
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}

.nav-cta:hover {
    background-color: #9a3614;
}

.nav-cta:active {
    transform: scale(.97);
}

.nav-cta:focus-visible {
    outline: 2px solid var(--_color---white);
    outline-offset: 3px;
}

@media screen and (max-width: 991px) {
    .nav-cta {
        margin-left: auto;
        margin-right: .75rem;
    }
}

@media screen and (max-width: 420px) {
    .nav-cta {
        padding: .6rem .95rem;
        font-size: .875rem;
    }
    /* Visually hidden, still read out: the accessible name stays "Book a Consultation". */
    .nav-cta-more {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}