/* ==========================================================================
   Alchemy Tree — shared stylesheet
   Loaded AFTER each page's inline <style>, so this is the authoritative
   source for design tokens and cross-page polish. Each rule is tagged with
   its audit ID (see plan). Palette is fixed — new tokens only NAME colors
   already in use, they do not introduce new hues.
   ========================================================================== */

:root {
    /* ---- Palette (canonical, unifies the drifted per-page :root blocks) ---- */
    --primary: #1b4332;
    --primary-rgb: 27, 67, 50;
    --cta: #d97b2a;
    --cta-hover: #bf6a1e;
    --cta-light: #f09540;      /* Q2: names the light stop of the CTA gradient */
    --cta-dark:  #b85d12;      /* Q2: names the dark stop of the CTA gradient  */
    --bg: #e2dbd1;
    --bg-warm: #d9d0c5;
    --dark: #0d1f17;
    --dark-rgb: 13, 31, 23;
    --bark: #3d2b1f;
    --white: #ffffff;
    --cream: #f0ebe4;
    --surface-dark: #1a1410;   /* Q2: names the reviews section background */
    --text: #2a2a2a;
    --text-light: #4a4338;

    /* ---- Q3: one corner language (was 2 / 4 / 5px scattered) ---- */
    --radius: 2px;
    --radius-pill: 50%;

    /* ---- M3: elevation scale (replaces ad-hoc one-off shadows) ---- */
    --elev-1: 0 2px 8px rgba(40,30,15,0.10);
    --elev-2: 0 6px 20px rgba(40,30,15,0.16);
    --elev-3: 0 16px 40px rgba(0,0,0,0.28);
    --glow-cta: 0 4px 18px rgba(217,123,42,0.40);

    /* ---- M2: spacing scale (4/8-pt) ---- */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;

    /* ---- M1: type scale (collapses the 9 ad-hoc small sizes to 5 steps) ---- */
    --fs-eyebrow: 0.75rem;
    --fs-caption: 0.8125rem;
    --fs-small:   0.875rem;
    --fs-body:    1rem;
    --fs-lead:    1.125rem;
    --lh-tight: 1.3;
    --lh-body:  1.7;

    /* ---- Motion ---- */
    --transition: 0.3s ease;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* NOTE: --nav-height and --section-pad are intentionally NOT set here.
       Each page defines them inline AND reassigns them in @media queries;
       restating them here (loaded last) would clobber those responsive values. */
}

/* ==========================================================================
   B1 — Canonical buttons (single source of truth). Unifies the drifted
   per-page button styles: the service pages previously used a flat 2-stop
   gradient with no sheen; they now match the homepage's premium 3-stop
   gradient + animated sheen. Gradient uses the Q2 CTA tokens. Q3 radius
   (2px) unified here too (was 5px on buttons, 4px on inputs).
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
    min-height: 52px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary {
    background: linear-gradient(155deg, var(--cta-light) 0%, var(--cta) 52%, var(--cta-dark) 100%);
    color: var(--white);
    border-color: transparent;
    border-radius: var(--radius);
    box-shadow: var(--glow-cta), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 40%; height: 200%;
    background: rgba(255,255,255,0.14);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(217,123,42,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(217,123,42,0.3);
}
.btn-secondary {
    background: rgba(0,0,0,0.35);
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.btn-secondary:hover {
    background: rgba(0,0,0,0.55);
    border-color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.btn-secondary:active { transform: translateY(0); }
.btn-outline {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--text);
    border-radius: var(--radius);
}
.btn-outline:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn-outline:active { transform: translateY(0); }

.form-group input,
.form-group select,
.form-group textarea {
    border-radius: var(--radius);
}

/* ==========================================================================
   Q2 — Tokenize colors that previously bypassed the system (hygiene; the
   on-screen colors are unchanged, they just reference tokens now).
   ========================================================================== */
.reviews {
    background: var(--surface-dark);
}
.service-card-link {
    color: var(--cta-light);
}
.service-card-link:hover {
    color: #ffbb7a;
}

/* ==========================================================================
   Q1 — Sparse galleries no longer read as "broken". auto-fit + a capped track
   width + centering means 1, 3, 11 or 22 tiles all lay out intentionally
   instead of a lone tile stranded in a rigid 3-column grid.
   ========================================================================== */
.svc-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    justify-content: center;
}

/* ==========================================================================
   M4 — FAQ answers ease in on open (fade + slight rise) instead of snapping.
   Works for both the homepage (.faq-*) and service-page (.svc-faq-*) markup.
   Marker rotation kept subtle. Respects reduced-motion (below).
   ========================================================================== */
@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
details[open] > .faq-answer,
details[open] > .svc-faq-answer,
.faq-item[open] .faq-answer,
.svc-faq-item[open] .svc-faq-answer {
    animation: faqReveal 0.28s var(--ease-out);
}

/* ==========================================================================
   Q4 — Mobile tap targets raised to guideline (were 40px pills / 36px links).
   ========================================================================== */
@media (max-width: 768px) {
    .area-pill {
        min-height: 48px;
    }
    .footer-links a {
        min-height: 44px;
        line-height: 32px;
    }
}

/* ==========================================================================
   M1 — Apply the type scale. Collapses nine near-identical small sizes
   (0.72/0.75/0.8/0.82/0.85/0.88/0.9/0.92rem) onto four steps so hierarchy
   reads as deliberate. Body copy (1rem) and display clamps are untouched.
   ========================================================================== */
/* eyebrow / label / fine print -> 0.75rem */
.about-eyebrow,
.reviewer,
.review-card .reviewer,
.form-group label,
.footer-credit {
    font-size: var(--fs-eyebrow);
}
/* captions / breadcrumb / small meta -> 0.8125rem */
.service-breadcrumb,
.service-card-link,
.footer-hours,
.footer-bottom,
.footer-credit a {
    font-size: var(--fs-caption);
}
/* small UI text -> 0.875rem */
.nav-links a,
.nav-phone,
.trust-item,
.trust-point,
.area-pill,
.form-submit,
.service-card p,
.mobile-sticky-cta a,
.footer-tagline,
.footer-links a,
.footer-info p,
.footer-areas-list,
.service-cta-card p {
    font-size: var(--fs-small);
}

/* ==========================================================================
   M2 — Spacing consistency. Align the hero's content edge with the 1200px
   container used by every other section (was 1152px, so hero text sat a hair
   off from the sections below it).
   ========================================================================== */
.hero {
    padding-left: max(24px, calc((100vw - 1200px) / 2));
    padding-right: max(24px, calc((100vw - 1200px) / 2));
}

/* ==========================================================================
   Reduced motion — no FAQ reveal animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    details[open] > .faq-answer,
    details[open] > .svc-faq-answer,
    .faq-item[open] .faq-answer,
    .svc-faq-item[open] .svc-faq-answer {
        animation: none;
    }
}