/* One content width for the whole site — header, every page section and footer line up with
   the Selected work cards on the homepage: 90% of the page, up to 1280px. */
:root { --vz-content: min(1280px, 90%); }

.site-header .navbar { width: var(--vz-content); max-width: none; margin-inline: auto; padding-inline: 0; }
.vz-home, .vz-footer, .work-page, .work-footer { width: var(--vz-content); margin-inline: auto; }
.vz-showcase { width: auto; margin-inline: 0; }

/* Section rhythm — the same spacing as the homepage on every page.
   Desktop ≈ 150px above and below each section, ≈ 64px between a section title and its content. */
:root { --vz-section-space: clamp(52px, 7.8vw, 100px); --vz-head-space: clamp(36px, 4.5vw, 64px); }
.services-section, .proposal-section, .about-story, .about-principles, .about-timeline, .about-focus,
.case-section, .services-visual-map, .contact-form-section, .levels-page .engagement-section {
    padding-top: var(--vz-section-space); padding-bottom: var(--vz-section-space);
}
.levels-page .milestone-section { padding-top: 0; }
.services-section-heading, .proposal-heading, .about-section-heading, .work-section-title, .contact-form-heading { margin-bottom: var(--vz-head-space); }
.case-section h2 { margin-bottom: var(--vz-head-space) !important; }
:is(.services-section-heading, .proposal-heading, .about-section-heading, .about-story, .about-principles, .case-section, .contact-form-heading, .visual-map-heading, .services-questions) h2 { margin-top: 18px; }

/* Sections whose title sat in a narrow side column now stack: title on top, content below,
   so the larger titles keep a comfortable line length. */
.about-story, .about-principles, .services-questions, .contact-form-section, .services-visual-map { grid-template-columns: minmax(0, 1fr); row-gap: var(--vz-head-space); }
.about-story-copy, .services-questions > div:last-child { max-width: 820px; }

/* Plans page — three plan cards, demo links and module tables. */
.plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans-grid .engagement-card-copy h3 { font-size: clamp(30px, 3vw, 40px); }
.plans-grid .engagement-card { min-width: 0; }
.plans-grid .engagement-card-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.plans-grid .engagement-estimate { min-width: 0; text-align: left; }
.plans-grid .engagement-estimate strong { font-size: 30px; }
.plan-meta { margin-top: 20px; padding-top: 14px; border-top: 1px solid #343536; color: #8f8f8b; font-size: 12px; letter-spacing: .4px; }
.plan-links { padding: 0 clamp(24px, 3.5vw, 38px) clamp(24px, 3.5vw, 38px); }
.plan-links .engagement-action { width: 100%; margin: 0; }
.plan-demo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #EABD7C; font-size: 13px; text-decoration: none; }
.plan-demo:hover { text-decoration: underline; }
.plan-demo-soon { color: #8f8f8b; }
.plans-demo-note { margin-top: 28px; padding: 18px 22px; border-left: 2px solid #EABD7C; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.plans-demo-note strong { font-weight: 400; }
.plans-ai-table { margin-top: 28px; }
.milestone-table s { margin-right: 6px; font-weight: 400; opacity: .6; }
@media (max-width: 1080px) { .plans-grid { grid-template-columns: minmax(0, 1fr); } }

/* Services page — one featured service, then smaller standalone work. */
.service-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 4vw, 56px); }
.service-feature h3 { font-size: clamp(30px, 3.4vw, 44px) !important; margin: 18px 0 16px; }
.service-feature-copy > p:not(.service-fit) { font-size: 16px; line-height: 1.75; }
.service-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.service-feature-detail ul:not(.service-plans) { margin-bottom: 26px; }
.service-plans { list-style: none; padding: 0 !important; border-top: 1px solid #343536; }
.service-plans li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 14px 0 !important; margin: 0 !important; border-bottom: 1px solid #343536; }
.service-plans li::marker { content: none; }
.service-plans strong { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 400; }
.service-plans span { font-size: 13px; }
.service-plans em { font-style: normal; font-weight: 600; color: #EABD7C; white-space: nowrap; }
.also-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; }
.also-grid li { display: flex; flex-direction: column; padding: 24px 22px; border: 1px solid #343536; }
.also-grid h3 { font-size: 19px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.also-grid p { font-size: 14px; line-height: 1.7; color: #ababaa; margin-bottom: 18px; }
.also-grid .also-price { margin-top: auto; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.also-grid .also-price strong { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 22px; color: #eceae5; }
.also-grid .also-price span { font-size: 12px; color: #8f8f8b; }
body.theme-light .also-grid .also-price strong { color: #1C1C1A; }
body.theme-light .also-grid .also-price span { color: #6F6A61; }
.optional-modules li.optional-scope a { color: inherit; text-decoration: none; }
.also-tag { margin-top: auto; margin-bottom: 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8f8f8b; }
.also-grid a { display: inline-flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid #343536; color: #EABD7C; font-size: 13px; text-decoration: none; }
@media (max-width: 1080px) { .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .service-feature { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .also-grid { grid-template-columns: minmax(0, 1fr); } .service-plans li { grid-template-columns: minmax(0, 1fr) auto; } .service-plans span { grid-column: 1 / -1; grid-row: 2; } }

/* Logo lockup — "V." monogram + VENZOH in serif capitals (markup in php/config.php → venzoh_logo()). */
.brand-link { display: inline-flex; align-items: center; gap: 11px; font-family: Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; font-size: 17px !important; letter-spacing: 5px !important; line-height: 1; --logo-accent: #EABD7C; }
.logo-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.logo-word { display: block; padding-top: 2px; color: inherit !important; }
body.theme-light .site-header .brand-link { color: #1C1C1A; --logo-accent: #A8792F; }
.work-footer .brand-link, .vz-footer .brand-link { color: #e8e6e1; --logo-accent: #EABD7C; font-size: 18px !important; }
.work-footer .logo-mark, .vz-footer .logo-mark { width: 38px; height: 38px; }
.vz-intro-word, .project-wordmark { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; }
@media (max-width: 700px) {
    .brand-link { gap: 9px; font-size: 15px !important; letter-spacing: 4px !important; }
    .logo-mark { width: 27px; height: 27px; }
}

/* Former dialog buttons are now plain links to the contact page. */
.service-request, .engagement-action { text-decoration: none; }
.site-cta > .home-primary { flex-shrink: 0; }

@media (max-width: 760px) {
    .site-header .navbar { padding-inline: 0; }
    .site-header .header-links { padding-inline: 5%; }
}

/* Unified vertical rhythm — one system on every page.
   · Between any two blocks (section, highlighted card, call to action): 2 × --vz-section-space (≈ 280px desktop).
   · Call to action → footer (or the "next project" link): 1 × --vz-section-space. */
.levels-page .milestone-section, .levels-page .levels-optional-section { padding-top: var(--vz-section-space); padding-bottom: var(--vz-section-space); }
.services-stack, .services-proposal, .case-stage, .levels-next-step { margin-top: var(--vz-section-space); margin-bottom: var(--vz-section-space); }
.work-collection { padding-top: var(--vz-section-space); padding-bottom: var(--vz-section-space); }
/* Work page: "Selected work" continues straight from the page title, so it sits closer than a new section. */
.work-page > .work-collection { padding-top: clamp(20px, 3vw, 40px); }
/* Services: the Toolkit card completes "How the pieces connect" (layers → the tools behind them),
   so it sits right under that section's cards instead of a full section gap. */
.services-visual-map:has(+ .services-stack) { padding-bottom: 0; }
.services-visual-map + .services-stack { margin-top: var(--vz-head-space); }
/* The proposal card completes "From conversation to delivery", so it sits right under the process steps. */
.services-section:has(+ .services-proposal) { padding-bottom: 0; }
.services-section + .services-proposal { margin-top: var(--vz-head-space); }
/* Pricing: "Five milestones", "Add what you need" and "Fixed price, clear terms" are the detail of one
   offer, so they sit closer to each other (≈ 120px desktop) than full sections (≈ 200px). */
.levels-page .milestone-section:has(+ .milestone-section) { padding-bottom: calc(var(--vz-section-space) * .6); }
.levels-page .milestone-section + .milestone-section { padding-top: calc(var(--vz-section-space) * .6); }
/* Pricing: the two untitled cards ("Need one part…" and "See exactly what each phase includes") close the
   pricing detail — they sit under "Fixed price, clear terms" as a pair, then a full gap before the CTA. */
.levels-page .milestone-section:has(+ .levels-optional-section) { padding-bottom: 0; }
.levels-page .levels-optional-section { padding-top: var(--vz-head-space); padding-bottom: 0; }
.levels-page .levels-optional-section + .levels-next-step { margin-top: clamp(20px, 2.5vw, 32px); }
/* Links to services#smaller-projects land with the section eyebrow ≈ 48px under the header. */
/* ───────── Phone menu ─────────
   Full-screen panel under the header: large serif links with small gold numbers, a dark "Let's talk"
   button at the bottom and faint brand rings. Opens with a soft fade and a one-by-one reveal of the links. */
@media (max-width: 760px) {
    html.nav-locked, html.nav-locked body { overflow: hidden; }
    body .site-header .nav-toggle { width: 44px; height: 44px; margin-right: -10px; }
    body .site-header .header-links {
        position: absolute; top: 100%; left: 50%; right: auto; width: 100vw; margin-left: -50vw; z-index: 5;
        height: var(--menu-h, calc(100dvh - 64px)); overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        padding: clamp(20px, 5vh, 40px) 5vw calc(24px + env(safe-area-inset-bottom)) !important;
        background: #F7F4EE; border-top: 1px solid #E3DDD1; border-bottom: 0; text-align: left; isolation: isolate;
        visibility: hidden; opacity: 0; transform: translateY(-6px);
        transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
    }
    body .site-header.menu-open .header-links { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
    /* Faint concentric rings — the Venzoh motif — in the lower right corner. */
    body .site-header .header-links::before {
        content: ""; position: absolute; z-index: -1; right: -140px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
        background: repeating-radial-gradient(circle, transparent 0 34px, rgba(168, 121, 47, .16) 34px 35px);
        -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    }
    body .site-header .header-links .nav-item {
        display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid #E3DDD1;
        font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 9vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -.01em;
        color: #1C1C1A; white-space: normal;
    }
    body .site-header .header-links .nav-item:first-child { border-top: 0; }
    body .site-header .header-links .nav-item[aria-current="page"] { color: #A8792F; }
    body .site-header .header-links .nav-item:active { color: #A8792F; }
    body .site-header .header-links .nav-num { display: inline-block; min-width: 22px; font-family: 'Inter', Arial, sans-serif; font-size: 11px; letter-spacing: 1.5px; color: #A8792F; transform: translateY(-.9em); }
    body .site-header .header-links .contact-link {
        margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 18px 22px; background: #141516; color: #F7F4EE !important; font-size: 15px; letter-spacing: .02em;
    }
    body .site-header .header-links .contact-link .arrow-up-right { color: #EABD7C; }
    body .site-header .header-links .nav-menu-note { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .04em; color: #6F6A61; }
    /* One-by-one reveal of the menu content. */
    body .site-header .header-links > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
    body .site-header.menu-open .header-links > * { opacity: 1; transform: none; }
    body .site-header.menu-open .header-links > :nth-child(1) { transition-delay: .06s; }
    body .site-header.menu-open .header-links > :nth-child(2) { transition-delay: .11s; }
    body .site-header.menu-open .header-links > :nth-child(3) { transition-delay: .16s; }
    body .site-header.menu-open .header-links > :nth-child(4) { transition-delay: .21s; }
    body .site-header.menu-open .header-links > :nth-child(5) { transition-delay: .28s; }
    body .site-header.menu-open .header-links > :nth-child(6) { transition-delay: .33s; }
}

/* The section's top divider stays hidden under the fixed header. */
.services-also { scroll-margin-top: -20px; }
@media (max-width: 700px) { .services-also { scroll-margin-top: 8px; } }
body.theme-light .work-contact, body.theme-light .vz-home .site-cta { margin: var(--vz-section-space) 0; }
body.theme-light :is(.services-stack, .services-proposal, .case-stage, .levels-next-step) + .work-contact { margin-top: calc(var(--vz-section-space) * 2); }
.case-related { margin-bottom: var(--vz-section-space); }
/* Hero (or the strip right under it) → first section: the same 64px + section space on every page. */
.vz-home .vz-facts, .work-page > .work-heading, .proposal-snapshot, .case-sections, .services-hero, .about-hero { margin-bottom: 64px; }
.contact-hero { padding-bottom: 64px; }
.contact-page { padding-bottom: 0; }
/* Homepage hero: sized by its content (no full-screen minimum height), so on tall screens there is
   no extra empty band before the facts strip and "Selected work". */
.vz-home .vz-hero { min-height: 0; padding-bottom: 64px; }
@media (max-width: 700px) { .vz-home .vz-hero { padding-bottom: 36px; } }

/* Phone menu: a short question beside each link (What have you built? …), aligned to the right edge. */
@media (max-width: 760px) {
    body .site-header .header-links { overflow-x: hidden; }
    /* Same rings as before, but drawn inside the panel (no overflow), so the menu only scrolls when its content is taller than the screen. */
    body .site-header .header-links::before {
        right: 0; bottom: 0; width: 280px; height: 300px; border-radius: 0;
        background: repeating-radial-gradient(circle at 210px 210px, transparent 0 34px, rgba(168, 121, 47, .16) 34px 35px);
        -webkit-mask-image: radial-gradient(circle 297px at 210px 210px, #000 163px, transparent 214px);
        mask-image: radial-gradient(circle 297px at 210px 210px, #000 163px, transparent 214px);
    }
    .site-header .header-links .nav-label { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
    .site-header .header-links .nav-q { display: block; flex: none; font-family: 'Inter', Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .02em; line-height: 1.3; color: #6F6A61; text-align: right; white-space: nowrap; }
    .site-header .header-links .contact-link .nav-label { justify-content: flex-start; align-items: center; }
    .site-header .header-links .contact-link .nav-q { font-size: 11px; color: #B9B2A6; }
    body .site-header.menu-open .header-links > :nth-child(7) { transition-delay: .38s; }
}

/* Two plans (Intelligent hidden): two columns on wide screens. */
@media (min-width: 1081px) { .plans-grid.plans-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }