/* ============================================================
   HERO SECTION
   ============================================================ */
.studio-hero {
    padding-top: clamp(var(--space-20), 10vw, var(--space-40));
    padding-bottom: clamp(var(--space-16), 8vw, var(--space-32));
    /* Hero sits on the default page background — warm off-white baseline */
    background-color: var(--color-bg);
    overflow: hidden;
}

.studio-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 800px;
}

.studio-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.studio-hero__eyebrow::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background-color: currentColor;
}

.studio-hero__headline {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}

.studio-hero__headline em {
    font-style: italic;
    color: var(--color-accent);
}

.studio-hero__subhead {
    font-size: clamp(var(--text-base), 2vw, var(--text-md));
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    max-width: 520px;
}

.studio-hero__actions {
    /* Sits below the subhead; the grid gap on .studio-hero__inner handles spacing */
}

.studio-hero__cta {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-black-900);
    background-color: var(--color-highlight);
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.studio-hero__cta:hover {
    background-color: var(--color-highlight-hover);
}

.studio-hero__cta:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
}

.studio-hero__rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
    margin-top: clamp(var(--space-16), 8vw, var(--space-32));
}

/* ============================================================
   SECTION SHARED STYLES
   ============================================================ */
.section {
    padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

/* Section tint variants — used to create visual rhythm via alternating backgrounds */
.section--warm {
    /* Palest blush taupe — subtle warmth, distinct from off-white baseline */
    background-color: var(--color-secondary-50);
}

/* .section--warm's background is a fixed primitive that (deliberately,
   like .section--dark below) doesn't swap with the site theme — so its
   text can't use the theme-swapped --color-text-* tokens either, or it
   goes near-invisible in dark mode (light text landing on a background
   that's still pale). Pinned to the same primitives light mode's
   --color-text-* tokens resolve to, so this section always reads exactly
   like its original light-mode design regardless of the toggle. This
   page uses .section--warm twice (Who We Are, Why Teams Work With Us)
   so every pinned override below applies to both. */
.section--warm .section__label { color: var(--color-gray-500); }
.section--warm .about__heading,
.section--warm .why-us__heading { color: var(--color-black-900); }
.section--warm .about__body,
.section--warm .why-us__body { color: var(--color-black-600); }

.section--dark {
    /* Deep taupe — rich dark section for closing CTAs */
    background-color: var(--color-secondary-800);
}

.section__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-8);
}

.section__label-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    flex-shrink: 0;
}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.about__intro {
    max-width: 640px;
    margin-bottom: clamp(var(--space-10), 5vw, var(--space-12));
}

.about__heading {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-6);
}

.about__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

/* Full-width proof statement — deliberately given real visual weight
   (icon, larger text, prominent border) rather than sitting as a small
   side-note card, since "this is a real, live product" is a load-bearing
   trust claim for this page, not a footnote. Sits inside the
   fixed-primitive .section--warm background, so it (and its text/
   link/border) is pinned to fixed primitives rather than the
   theme-swapping --color-surface/--color-border/--color-text-* tokens —
   same reasoning as the section-level overrides above. */
.about__proof {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background-color: var(--color-white-50);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-primary-500);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-6), 3vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-10));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.about__proof-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
}

.about__proof-text {
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    font-weight: 500;
    line-height: var(--leading-normal);
    color: var(--color-black-700);
}

.about__proof-link {
    color: var(--color-primary-600);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-primary-600) 40%, transparent);
    text-underline-offset: 2px;
}

.about__proof-link:hover {
    color: var(--color-primary-700);
}

@media (max-width: 560px) {
    .about__proof {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   WAYS WE WORK (engagements) — the structural core of the page.
   This section sits on the default swapping --color-bg baseline,
   so its card surfaces can safely use the normal semantic tokens.
   ============================================================ */
.engagements__intro {
    max-width: 680px;
    margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.engagements__heading {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
}

.engagements__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    max-width: 560px;
}

.engagement-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-6), 3vw, var(--space-8));
}

.engagement-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    box-shadow: var(--shadow-sm);
}

.engagement-card__badge {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: .35rem .75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}
:root[data-theme="dark"] .engagement-card__badge {
    background-color: color-mix(in srgb, var(--color-primary-400) 20%, transparent);
    color: var(--color-primary-200);
}

.engagement-card__badge--partner {
    background-color: var(--color-highlight-100);
    color: var(--color-highlight-800);
}
:root[data-theme="dark"] .engagement-card__badge--partner {
    background-color: color-mix(in srgb, var(--color-highlight-400) 22%, transparent);
    color: var(--color-highlight-200);
}

.engagement-card__price {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}

.engagement-card__sub {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.engagement-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.engagement-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.engagement-card__item-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);
}

.engagements__note {
    max-width: 620px;
    margin: clamp(var(--space-10), 5vw, var(--space-16)) auto 0;
    padding-top: clamp(var(--space-8), 4vw, var(--space-10));
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.engagements__note-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-md);
    margin-bottom: var(--space-2);
}

.engagements__note-body {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

.engagements__tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
    line-height: var(--leading-snug);
    text-align: center;
    color: var(--color-text-primary);
    margin-top: clamp(var(--space-10), 5vw, var(--space-12));
}

.engagements__tagline em {
    font-style: italic;
    color: var(--color-accent);
}

/* ============================================================
   WHY TEAMS WORK WITH US
   ============================================================ */
.why-us__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-12), 5vw, var(--space-20));
    align-items: start;
}

.why-us__heading {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-6);
}

.why-us__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width: 440px;
}

.why-us__principles {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.principle {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.principle:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.principle__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.principle__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

/* Pinned overrides for .principle inside the fixed .section--warm bg */
.section--warm .principle { border-bottom-color: var(--color-gray-200); }
.section--warm .principle__title { color: var(--color-black-900); }
.section--warm .principle__desc { color: var(--color-black-600); }

.why-us__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.why-us__quote-block {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.why-us__quote {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    font-style: italic;
    line-height: var(--leading-loose);
    color: var(--color-text-primary);
}

.why-us__quote-attribution {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

/* Pinned overrides for the quote block inside the fixed .section--warm bg */
.section--warm .why-us__quote-block {
    background-color: var(--color-white-50);
    border-color: var(--color-gray-200);
    border-left-color: var(--color-primary-500);
}
.section--warm .why-us__quote { color: var(--color-black-900); }
.section--warm .why-us__quote-attribution { color: var(--color-gray-500); }

/* ============================================================
   FORM PRIMITIVES — same shape as invoice-generator.css's
   .form-field/.form-label/.form-input so form controls read
   consistently across marketing pages. Defined locally since each
   marketing page's CSS is self-contained (no shared component file
   exists yet — see other pages' own .btn/.form-input definitions).
   ============================================================ */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-label__optional {
    font-weight: 400;
    color: var(--color-text-tertiary);
}

.form-input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    height: 40px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.form-input::placeholder { color: var(--color-text-tertiary); }

.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.form-input--textarea {
    height: auto;
    resize: vertical;
    line-height: var(--leading-normal);
    padding-block: var(--space-2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   CONTACT SECTION — the page's primary conversion action, on the
   fixed-primitive .section--dark background. Every element here
   (form inputs, buttons, status text, newsletter aside) is pinned
   to fixed primitives rather than theme-swapping semantic tokens —
   this exact page previously shipped a light-on-light bug from
   getting this wrong (see git history), so nothing in this section
   should reference --color-surface / --color-border(-strong) /
   --color-text-* / --color-bg directly.
   ============================================================ */
.contact {
    padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.contact__layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(var(--space-10), 5vw, var(--space-16));
    align-items: start;
}

.contact__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    /* Muted warm white — pinned, not --color-text-tertiary */
    color: color-mix(in srgb, var(--color-white-50) 60%, transparent);
}

.contact__heading {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
    color: var(--color-white-50);
}

.contact__sub {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    max-width: 480px;
    margin-bottom: var(--space-8);
    color: color-mix(in srgb, var(--color-white-50) 75%, transparent);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 560px;
}

.contact-form .form-label {
    color: color-mix(in srgb, var(--color-white-50) 85%, transparent);
}

.contact-form .form-label__optional {
    color: color-mix(in srgb, var(--color-white-50) 45%, transparent);
}

.contact-form .form-input {
    background-color: color-mix(in srgb, var(--color-white-50) 7%, transparent);
    border-color: color-mix(in srgb, var(--color-white-50) 22%, transparent);
    color: var(--color-white-50);
}

.contact-form .form-input::placeholder {
    color: color-mix(in srgb, var(--color-white-50) 40%, transparent);
}

.contact-form .form-input:focus {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight) 20%, transparent);
}

.contact-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.contact-form__actions .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.contact-form__status {
    font-size: var(--text-sm);
    font-weight: 500;
}

.contact-form__status[data-state="success"] {
    /* Fixed light-sage primitive — reads clearly on the fixed dark taupe bg either theme */
    color: var(--color-primary-200);
}

.contact-form__status[data-state="error"] {
    /* Fixed mid-brick primitive — --color-error would also work (pinned
       to the same primitive in both themes) but this reads slightly
       lighter/more legible against the dark taupe background */
    color: var(--color-error-400);
}

/* ----------------------------------------------------------
   Newsletter aside — compact, visually subordinate to the contact
   form. Sits on the same fixed-dark background as its own quiet card.
   ---------------------------------------------------------- */
.contact__aside {
    align-self: start;
}

.newsletter-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background-color: color-mix(in srgb, var(--color-white-50) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white-50) 16%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.newsletter-card__heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--color-white-50);
}

.newsletter-card__sub {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: color-mix(in srgb, var(--color-white-50) 70%, transparent);
}

.newsletter-form { display: flex; flex-direction: column; gap: var(--space-2); }

.newsletter-form__row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.newsletter-form__row .form-input {
    flex: 1 1 160px;
    min-width: 0;
    background-color: color-mix(in srgb, var(--color-white-50) 7%, transparent);
    border-color: color-mix(in srgb, var(--color-white-50) 22%, transparent);
    color: var(--color-white-50);
}

.newsletter-form__row .form-input::placeholder {
    color: color-mix(in srgb, var(--color-white-50) 40%, transparent);
}

.newsletter-form__row .form-input:focus {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight) 20%, transparent);
}

.newsletter-form__submit {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: transparent;
    border: 1.5px solid color-mix(in srgb, var(--color-white-50) 40%, transparent);
    color: var(--color-white-50);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.newsletter-form__submit:hover {
    background-color: color-mix(in srgb, var(--color-white-50) 12%, transparent);
    border-color: var(--color-white-50);
}

.newsletter-form__submit:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

.newsletter-form__submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.newsletter-form__status {
    font-size: var(--text-xs);
    font-weight: 500;
}

.newsletter-form__status[data-state="success"] { color: var(--color-primary-200); }
.newsletter-form__status[data-state="error"] { color: var(--color-error-400); }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 860px) {
    .contact__layout {
        grid-template-columns: 1fr;
    }
}

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

    .engagement-cards {
        grid-template-columns: 1fr;
    }

    .why-us__layout {
        grid-template-columns: 1fr;
    }

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