/*
Theme Name: Lancer Un Site Child
Theme URI: https://lancerun.site
Template: astra
Author: Lance
Author URI: https://lancerun.site
Description: Custom child theme for Lancer Un Site WordPress development services
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: lancerun-child
*/

/* ─── Brand Typography: Space Grotesk (matches logo) ─────────────── */

@font-face {
    font-family: 'Space Grotesk';
    src: url('assets/fonts/SpaceGrotesk-var-subset.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Headings in the brand grotesk. !important beats the inline Georgia
   font-family baked into the landing-page block markup. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Non-heading elements (stat numbers etc.) that carry inline Georgia */
.entry-content [style*="Georgia"] {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ─── Global Brand Refinements (S02) ─────────────────────────────── */

/* Antialiased font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* The hero auroras overhang the right edge by design (::after sits at
   right:-15%). clip-path only clips their PAINT — the boxes still extend the
   document's scrollable area, so the page gains a horizontal scroll (worst on
   phones). `clip` (unlike `hidden`) doesn't create a scroll container, so
   sticky/anchor scrolling keep working. `hidden` first as an old-Safari
   fallback. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Remove header bottom border */
.ast-primary-header-bar,
.main-header-bar {
    border-bottom: none !important;
}

/* Balanced headings */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Tabular numbers for pricing */
.has-tabular-nums,
.pricing-card,
.landing-trust {
    font-variant-numeric: tabular-nums;
}

/* Subtle link transitions */
a {
    transition: color 0.2s ease;
}

/* Button refinements */
.wp-block-button__link,
.wp-element-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:active,
.wp-element-button:active {
    transform: scale(0.96);
}

/* Brand accent selection */
::selection {
    background-color: var(--ast-global-color-0, #47af3b);
    color: #ffffff;
}

/* Subtle image outlines */
.wp-block-image img {
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
}

/* Focus visible accessibility */
:focus-visible {
    outline: 2px solid var(--ast-global-color-0, #47af3b);
    outline-offset: 2px;
}

/* ─── Front Page: Hide Header + Page Title ───────────────────────── */

.home .ast-primary-header-bar,
.home .ast-above-header,
.home .ast-below-header,
.home #ast-desktop-header,
.home #ast-mobile-header,
.home .main-header-bar,
.home header.site-header,
.home .ast-header-break-point .ast-primary-header-bar {
    display: none !important;
}

.home .entry-header.ast-no-thumbnail {
    display: none !important;
}

/* ─── Front Page: Inline Logo + Switcher ─────────────────────────── */

.landing-top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 0;
}

.landing-top-bar .landing-logo {
    margin-bottom: 0.75rem;
}

/* Stacked v3 lockup (lancer / un .site →, ~2.8:1) — the brand moment on a
   header-less landing page. Width on the img itself: the aligncenter figure
   shrink-wraps, so a figure max-width won't bite. */
.landing-top-bar .landing-logo img {
    /* viewBox has 58.66/216.6 invisible left padding (optical centering:
       body sits ~8px right of center, arrow + half the final 'e' overhang) —
       width compensates so the visible body renders the same size */
    width: clamp(232px, 23vw, 302px);
    height: auto;
}

.landing-top-bar .landing-logo img {
    outline: none;
}

.landing-top-bar .lancerun-lang-switcher {
    margin-bottom: 0;
}

/* Tighten hero spacing when header is hidden and logo is inline */
.home .landing-hero {
    padding-top: 1rem !important;
}

/* ─── Hero Section ───────────────────────────────────────────────── */

.landing-hero {
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Let the aurora bleed upward behind the logo/lang top bar (they're a separate
   sibling group, so overflow:hidden left a hard seam at the hero's top edge).
   Sides/bottom stay paint-clipped; the html/body overflow-x:clip above stops
   the un-painted boxes from widening the scrollable area. The hero is
   positioned, so its translucent glows paint over the top bar's white without
   hiding it. */
@supports (clip-path: inset(-1px 0 0 0)) {
    .landing-hero {
        overflow: visible;
        clip-path: inset(-100vh 0 0 0);
    }
}

/* Aurora drift — two soft brand-green glows wandering behind the content.
   Transform-only (GPU-composited); pre-softened radial gradients, no filter. */
.landing-hero::before,
.landing-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 55vmax;
    height: 55vmax;
    border-radius: 50%;
    pointer-events: none;
}

.landing-hero::before {
    top: -55%;
    left: -12%;
    background: radial-gradient(circle at center,
        rgba(71, 175, 59, 0.16) 0%,
        rgba(71, 175, 59, 0.06) 40%,
        transparent 70%);
    /* Delay lets the load-time viewport settle (Speed Index) before drifting */
    animation: hero-drift-a 36s ease-in-out 5s infinite alternate;
}

.landing-hero::after {
    bottom: -35%;
    right: -15%;
    background: radial-gradient(circle at center,
        rgba(62, 111, 57, 0.13) 0%,
        rgba(62, 111, 57, 0.05) 40%,
        transparent 70%);
    animation: hero-drift-b 44s ease-in-out 5s infinite alternate;
}

/* Keep hero content above the glows */
.landing-hero > * {
    position: relative;
    z-index: 1;
}

@keyframes hero-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(10%, 14%, 0) scale(1.12); }
    100% { transform: translate3d(-6%, 6%, 0) scale(0.94); }
}

@keyframes hero-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-12%, -10%, 0) scale(1.15); }
    100% { transform: translate3d(5%, -4%, 0) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero::before,
    .landing-hero::after {
        animation: none;
    }
}

.landing-hero h1 {
    font-size: clamp(2rem, 1.5rem + 3.75vw, 4rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.landing-hero p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
    color: var(--ast-global-color-3, #3d3d37);
}

.landing-hero .wp-block-button {
    margin-top: 2rem;
}

.landing-hero .wp-block-button__link {
    background-color: var(--ast-global-color-0, #47af3b);
    color: #ffffff;
    padding: 0.875rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 6px;
}

.landing-hero .wp-block-button__link:hover {
    background-color: var(--ast-global-color-1, #3a9130);
}

/* ─── Primary Button Feel (hero CTA + form submit, kept identical) ── */

.landing-hero .wp-block-button__link,
.landing-cta .srfm-submit-button,
.landing-cta .srfm-btn-frontend,
.landing-cta .srfm-submit-btn,
.landing-cta .wp-element-button {
    transition: background-color 0.2s ease, color 0.2s ease,
                transform 0.25s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.landing-hero .wp-block-button__link:hover,
.landing-cta .srfm-submit-button:hover,
.landing-cta .srfm-btn-frontend:hover,
.landing-cta .srfm-submit-btn:hover,
.landing-cta .wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px -6px rgba(71, 175, 59, 0.50),
        0 3px 10px rgba(27, 27, 24, 0.15);
}

/* Tactile press */
.landing-hero .wp-block-button__link:active,
.landing-cta .srfm-submit-button:active,
.landing-cta .srfm-btn-frontend:active,
.landing-cta .srfm-submit-btn:active,
.landing-cta .wp-element-button:active {
    transform: translateY(0) scale(0.97);
}

/* ─── Trust Bar Section ──────────────────────────────────────────── */

.landing-trust {
    background-color: var(--ast-global-color-5, #f5f9f4);
    padding: 2.5rem 1.5rem;
}

.landing-trust .wp-block-columns {
    max-width: 900px;
    margin: 0 auto;
}

.landing-trust .wp-block-column {
    text-align: center;
    padding: 1rem;
}

.landing-trust h2,
.landing-trust h3,
.landing-trust h4 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    margin-bottom: 0.25rem;
    color: var(--ast-global-color-2, #1b1b18);
}

.landing-trust p {
    color: var(--ast-global-color-7, #6b7268);
    font-size: 0.9375rem;
    margin: 0;
}

/* ─── Packages Section ───────────────────────────────────────────── */

.landing-packages {
    padding: 4rem 1.5rem;
}

.landing-packages > h2,
.landing-packages > .wp-block-heading {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
}

/* Pricing cards */
.pricing-card {
    border: 1px solid var(--ast-global-color-6, #dde5db);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(71, 175, 59, 0.45) !important;  /* beats inline border-color */
    box-shadow:
        0 1px 2px rgba(27, 27, 24, 0.04),
        0 12px 32px -8px rgba(71, 175, 59, 0.30),
        0 4px 16px -4px rgba(71, 175, 59, 0.16);
}

/* Featured tier */
.pricing-card--featured {
    border-color: var(--ast-global-color-0, #47af3b);
    border-width: 2px;
}

/* Featured card breathes a soft green glow. The glow lives on a pseudo-
   element and only its OPACITY animates — GPU-composited, no repaint loop
   (animating box-shadow directly would repaint every frame). */
.pricing-card--featured::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    box-shadow: 0 0 36px 2px rgba(71, 175, 59, 0.35);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
    animation: glow-breathe 4.5s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
    from { opacity: 0.15; }
    to   { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card--featured::after {
        animation: none;
    }
}

.pricing-card--featured::before {
    content: "MOST POPULAR";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--ast-global-color-0, #47af3b);
    color: #ffffff;
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    white-space: nowrap;
}

/* Language-scoped badge text */
.lang-en .pricing-card--featured::before {
    content: "MOST POPULAR";
}

.lang-fr .pricing-card--featured::before {
    content: "PLUS POPULAIRE";
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.pricing-card .price {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
    font-weight: 300;
    color: var(--ast-global-color-2, #1b1b18);
    margin: 1rem 0;
}

.pricing-card .price-subtitle {
    color: var(--ast-global-color-7, #6b7268);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Checkmark list bullets */
.wp-block-column.pricing-card .wp-block-list {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.wp-block-column.pricing-card .wp-block-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.wp-block-column.pricing-card .wp-block-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ast-global-color-0, #47af3b);
    font-weight: 700;
    font-size: 1.1em;
}

.pricing-card .wp-block-button {
    margin-top: 1.5rem;
}

.pricing-card .wp-block-button__link {
    width: 100%;
    border-radius: 6px;
}

/* Retainer subsection. Hide the block separator between the pricing cards
   and the retainer heading — the heading's own top margin sets the gap
   (subsection-scale: a step below the 5-6rem section paddings). */
.landing-packages > .wp-block-separator {
    display: none;
}

.landing-packages > h3.wp-block-heading {
    margin-top: 4rem;
}

/* Retainer cards (bordered columns, no dedicated class) share the same
   green-glow hover as the pricing cards. !important beats the inline
   border-color baked into the block markup. */
.landing-packages .wp-block-column.has-border-color:not(.pricing-card) {
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.25s ease;
}

.landing-packages .wp-block-column.has-border-color:not(.pricing-card):hover {
    transform: translateY(-4px);
    border-color: rgba(71, 175, 59, 0.45) !important;
    box-shadow:
        0 1px 2px rgba(27, 27, 24, 0.04),
        0 12px 32px -8px rgba(71, 175, 59, 0.30),
        0 4px 16px -4px rgba(71, 175, 59, 0.16);
}

/* ─── Portfolio Section ──────────────────────────────────────────── */

.landing-portfolio {
    background-color: var(--ast-global-color-5, #f5f9f4);
    padding: 4rem 1.5rem;
}

.landing-portfolio > h2,
.landing-portfolio > .wp-block-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.landing-portfolio .wp-block-columns {
    gap: 2.5rem;
}

/* Row spacing matches the 2.5rem horizontal gap for an even grid */
.landing-portfolio .wp-block-columns + .wp-block-columns {
    margin-top: 2.5rem;
}

/* Rows with 1 or 2 cards (item count not divisible by 3) keep the
   3-per-row card width instead of stretching across the section */
@media (min-width: 782px) {
    .landing-portfolio .wp-block-columns > .wp-block-column:only-child,
    .landing-portfolio .wp-block-columns > .wp-block-column:first-child:nth-last-child(2),
    .landing-portfolio .wp-block-columns > .wp-block-column:first-child:nth-last-child(2) ~ .wp-block-column {
        flex: 0 1 calc((100% - 5rem) / 3);
    }
}

/* Each portfolio column becomes a card: image flush to the top edge,
   text on white below, sharing the pricing cards' green-glow hover. */
.landing-portfolio .wp-block-column {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(27, 27, 24, 0.07);
    border-radius: 14px;
    padding-bottom: 1.5rem;
    box-shadow:
        0 1px 2px rgba(27, 27, 24, 0.04),
        0 10px 28px -14px rgba(27, 27, 24, 0.14);
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.3s ease;
}

.landing-portfolio .wp-block-column:hover {
    transform: translateY(-4px);
    border-color: rgba(71, 175, 59, 0.40);
    box-shadow:
        0 1px 2px rgba(27, 27, 24, 0.04),
        0 16px 40px -12px rgba(71, 175, 59, 0.26),
        0 6px 18px -6px rgba(27, 27, 24, 0.10);
}

.landing-portfolio .wp-block-image {
    overflow: hidden;
    border-radius: 0;
    margin: 0 0 1rem;
}

.landing-portfolio .wp-block-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    border-radius: 0 !important;   /* block markup bakes in 8px inline */
    transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
}

.landing-portfolio .wp-block-column:hover .wp-block-image img {
    transform: scale(1.05);
}

/* Titles and text get breathing room inside the card. The bottom margin is
   deliberately smaller than the top gap (1rem): the h4 line box carries
   descender+leading space below glyphs that mostly lack descenders, so equal
   margins read bottom-heavy — 0.65rem makes it look even. */
.landing-portfolio .wp-block-column h4 {
    padding: 0 1.5rem;
    margin: 0 0 0.65rem;
}

.landing-portfolio .wp-block-column p {
    padding: 0 1.5rem;
    margin-top: 0;
}

/* Brand detail: the lance arrow slides in after the title on hover */
.landing-portfolio .wp-block-column h4::after {
    content: "→";
    display: inline-block;
    margin-left: 0.35em;
    color: var(--ast-global-color-0, #47af3b);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.landing-portfolio .wp-block-column:hover h4::after {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll-driven reveal — pure CSS, progressive enhancement. Uses the
   individual `translate` property so it composes with the hover
   `transform` instead of overriding it. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .landing-portfolio .wp-block-column {
            animation: card-rise both;
            animation-timeline: view();
            animation-range: entry 0% entry 50%;
        }
        @keyframes card-rise {
            from {
                opacity: 0;
                translate: 0 28px;
            }
        }
    }
}

.landing-portfolio h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.landing-portfolio p {
    color: var(--ast-global-color-7, #6b7268);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ─── Testimonials Section ───────────────────────────────────────── */

.landing-testimonials {
    padding: 4rem 1.5rem;
}

.landing-testimonials > h2,
.landing-testimonials > .wp-block-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.landing-testimonials blockquote,
.landing-testimonials .wp-block-quote {
    border-left: 3px solid var(--ast-global-color-0, #47af3b);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    margin: 0 0 1.5rem 0;
    background-color: var(--ast-global-color-5, #f5f9f4);
    border-radius: 0 8px 8px 0;
}

.landing-testimonials blockquote p,
.landing-testimonials .wp-block-quote p {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ast-global-color-3, #3d3d37);
}

.landing-testimonials cite,
.landing-testimonials .wp-block-quote cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--ast-global-color-7, #6b7268);
    font-weight: 600;
}

/* ─── CTA Section ────────────────────────────────────────────────── */

.landing-cta {
    /* Dark closer: near-black with soft green auroras — the night-time
       counterpart to the hero's light auroras, bookending the page. Static
       glows (no animation) keep the final section's paint cost at zero. */
    background-color: #0c110b;
    /* Bottom layer is an opaque dark fill: the block markup bakes in an
       inline green background-color, and image layers paint over it. */
    background-image:
        radial-gradient(ellipse 60% 85% at 85% 112%, rgba(71, 175, 59, 0.22), transparent 66%),
        radial-gradient(ellipse 55% 75% at 8% -12%, rgba(62, 111, 57, 0.32), transparent 62%),
        linear-gradient(#0c110b, #0c110b);
    color: #ffffff;
    padding: 4rem 1.5rem;
}

/* Force true edge-to-edge — break out of Astra's .ast-container */
.entry-content .landing-cta.alignfull {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50% + 1.5rem) !important;
    padding-right: calc(50vw - 50% + 1.5rem) !important;
}

.landing-cta h2 {
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.75rem;
}

.landing-cta > p,
.landing-cta > .wp-block-group > p {
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2rem;
}

/* Form styling on the dark background — glass panel with a green edge */
.landing-cta .srfm-form-container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(71, 175, 59, 0.25);
    border-radius: 12px;
    padding: 2rem 2rem 1.5rem;
}

.landing-cta .srfm-block-single-wrapper label,
.landing-cta .srfm-block-single label,
.landing-cta .srfm-block-legend,
.landing-cta legend,
.landing-cta label {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.875rem;
}

.landing-cta .srfm-input-common,
.landing-cta .srfm-dropdown-common,
.landing-cta .srfm-input-content input,
.landing-cta .srfm-input-content select,
.landing-cta .srfm-input-content textarea {
    background-color: #ffffff !important;
    border: 1px solid var(--ast-global-color-6, #dde5db) !important;
    border-radius: 6px;
    min-height: 48px;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    color: var(--ast-global-color-3, #3d3d37);
}

.landing-cta .srfm-input-content input:focus,
.landing-cta .srfm-input-content select:focus,
.landing-cta .srfm-input-content textarea:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
    border-color: #ffffff;
}

.landing-cta .srfm-input-content textarea {
    min-height: 120px;
    resize: vertical;
}

/* Submit button — primary green with white text */
.landing-cta .srfm-submit-button,
.landing-cta .srfm-btn-frontend,
.landing-cta .srfm-submit-btn,
.landing-cta .wp-element-button {
    background-color: var(--ast-global-color-0, #47af3b) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px;
    padding: 1rem 2.5rem;
    font-weight: 700;
    font-size: 1.0625rem;
    min-height: 52px;
    width: 100%;
    display: block;
    cursor: pointer;
    /* Lift off the gradient's bright end, where bg approaches the button green */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.landing-cta .srfm-submit-button:hover,
.landing-cta .srfm-btn-frontend:hover,
.landing-cta .srfm-submit-btn:hover,
.landing-cta .wp-element-button:hover {
    background-color: var(--ast-global-color-1, #3a9130) !important;
    color: #ffffff !important;
}

/* GDPR notice */
.landing-cta .gdpr-notice {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    text-align: center;
    margin-top: 1rem;
}

.landing-cta .gdpr-notice a {
    color: #ffffff;
    text-decoration: underline;
}

/* CTA divider */
.landing-cta .landing-cta-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
}

/* Calendly CTA button — outline style on green bg */
.landing-cta .calendly-cta .wp-block-button__link {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    font-weight: 600;
    font-size: 1rem;
    min-height: 52px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.landing-cta .calendly-cta .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}

/* ─── Responsive: Tablet (768px+) ────────────────────────────────── */

@media (min-width: 768px) {
    .landing-hero {
        padding: 6rem 2rem 4rem;
    }

    .landing-trust .wp-block-column {
        position: relative;
    }

    .landing-trust .wp-block-column:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: var(--ast-global-color-6, #dde5db);
    }

    .landing-packages,
    .landing-portfolio,
    .landing-testimonials {
        padding: 5rem 2rem;
    }

    .landing-packages > h3.wp-block-heading {
        margin-top: 5rem;
    }

    .landing-cta {
        padding: 5rem 2rem;
    }

    .landing-cta .srfm-form-container {
        max-width: 560px;
    }
}

/* ─── Responsive: Desktop (1024px+) ──────────────────────────────── */

@media (min-width: 1024px) {
    .landing-hero {
        padding: 8rem 2rem 5rem;
    }

    .landing-hero h1 {
        letter-spacing: -0.03em;
    }

    .pricing-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .landing-portfolio .wp-block-column {
        border-radius: 8px;
    }

    .landing-packages,
    .landing-portfolio,
    .landing-testimonials {
        padding: 6rem 2rem;
    }

    .landing-cta {
        padding: 6rem 2rem;
    }
}

/* ─── Language Switcher ───────────────────────────────────────────── */

.lancerun-lang-switcher ul {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.lancerun-lang-switcher li {
    display: flex;
    align-items: center;
}

.lancerun-lang-switcher li + li::before {
    content: "/";
    color: var(--ast-global-color-6, #dde5db);
    font-size: 0.8125rem;
    font-weight: 400;
    margin: 0 0.125rem;
}

.lancerun-lang-switcher li a {
    display: block;
    padding: 0.25rem 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ast-global-color-3, #3d3d37);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lancerun-lang-switcher li a:hover {
    background-color: var(--ast-global-color-5, #f5f9f4);
    color: var(--ast-global-color-0, #47af3b);
}

.lancerun-lang-switcher li.current-lang a {
    font-weight: 700;
    color: var(--ast-global-color-0, #47af3b);
}

/* ─── Responsive: Mobile Only (max 767px) ────────────────────────── */

@media (max-width: 767px) {
    .landing-hero {
        padding: 3rem 1rem 2rem;
    }

    .landing-packages .wp-block-columns {
        gap: 1.5rem;
    }

    /* Stacked cards: uniform spacing between all six items */
    .landing-portfolio .wp-block-columns {
        gap: 2.25rem;
    }

    .landing-portfolio .wp-block-columns + .wp-block-columns {
        margin-top: 2.25rem;
    }

    .pricing-card {
        padding: 1.5rem 1.25rem;
    }

    .landing-trust .wp-block-columns {
        gap: 0.5rem;
    }

    /* Enforce touch targets */
    .wp-block-button__link,
    .wp-element-button,
    .srfm-submit-btn,
    .srfm-input-content input,
    .srfm-input-content select {
        min-height: 48px;
    }

    .landing-testimonials blockquote,
    .landing-testimonials .wp-block-quote {
        padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    }

    /* Glass form panel: 2rem side padding is desktop air — on one column it
       just squeezes the fields */
    .landing-cta .srfm-form-container {
        padding: 1.75rem 1.25rem 1.25rem;
    }

    /* The breakout rule's calc() gutter double-counts on mobile: the section's
       left edge sits at viewport x=0, so padding IS the visible gutter, and
       the 50vw-50% term silently adds the parent container's ~21px on top.
       Harmless on desktop (content is centered well inside it) — but here use
       plain padding. !important + matching selector to beat the breakout rule. */
    .entry-content .landing-cta.alignfull {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* ─── Responsive: Small Phones (max 480px) ───────────────────────── */

/* Stacked side gutters left the form fields ~250px wide on a 360px phone.
   Pull the section gutter in so the glass panel nearly spans the screen; the
   panel's own padding keeps the fields breathing. */
@media (max-width: 480px) {
    .entry-content .landing-cta.alignfull {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .landing-cta .srfm-form-container {
        padding: 1.5rem 1rem 1.25rem;
    }
}

/* ─── CookieYes Banner: brand restyle ────────────────────────────────
   The lite (unconnected) plugin hard-applies its 'light' theme preset —
   the blue accents in the generated template CSS override the banner's
   stored colors entirely — so the brand layer lives here instead.
   Typography, radius and shadow follow the site's card system. */

.cky-consent-container,
.cky-modal,
.cky-revisit-bottom-left {
    font-family: inherit;
}

.cky-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.01em;
}

.cky-consent-bar {
    border-color: var(--ast-global-color-6, #dde5db) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 2px rgba(27, 27, 24, 0.05),
        0 18px 44px -12px rgba(27, 27, 24, 0.22) !important;
}

.cky-notice-btn-wrapper .cky-btn,
.cky-preference-body-wrapper .cky-btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease;
}

/* Primary action — the brand green */
.cky-btn-accept,
.cky-opt-out-btn-wrapper .cky-btn-confirm {
    background: var(--ast-global-color-0, #47af3b) !important;
    border-color: var(--ast-global-color-0, #47af3b) !important;
    color: #ffffff !important;
}

.cky-btn-accept:hover,
.cky-opt-out-btn-wrapper .cky-btn-confirm:hover {
    background: var(--ast-global-color-1, #3a9130) !important;
    border-color: var(--ast-global-color-1, #3a9130) !important;
}

/* Secondary actions — quiet neutral outline, matching site cards */
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
    color: var(--ast-global-color-3, #3d3d37) !important;
    background: transparent !important;
    border-color: var(--ast-global-color-6, #dde5db) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
    border-color: var(--ast-global-color-7, #6b7268) !important;
    color: var(--ast-global-color-2, #1b1b18) !important;
}

/* Links, expanders, toggles, checkboxes — green accents */
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-preference-content-wrapper .cky-show-desc-btn,
button.cky-show-desc-btn:not(:hover):not(:active) {
    color: var(--ast-global-color-0, #47af3b) !important;
}

.cky-switch input[type="checkbox"]:checked,
.cky-opt-out-checkbox-wrapper input[type="checkbox"].cky-opt-out-checkbox:checked {
    background: var(--ast-global-color-0, #47af3b) !important;
}

.cky-consent-container :focus-visible,
.cky-modal :focus-visible {
    outline-color: var(--ast-global-color-0, #47af3b) !important;
}

/* Revisit widget (floating cookie icon after choice is made) */
.cky-revisit-bottom-left,
.cky-revisit-bottom-right {
    background-color: var(--ast-global-color-0, #47af3b) !important;
}

/* Preference-center modal: same radius family as the site cards */
.cky-modal .cky-preference-center {
    border-radius: 14px !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────
   The dark block-based .landing-footer is the real footer. Astra leaves a white
   gap beneath it from two things: #primary's 60px bottom margin, and the empty
   #colophon — both showing the white .site-content behind them. On the landing
   pages, remove that bottom margin, and let the (dark) colophon — rather than the
   white content wrapper — absorb any leftover vertical space, so the dark footer
   reaches the very bottom of the page without affecting the top. */
/* !important to beat Astra's `.ast-plain-container.ast-no-sidebar #primary`
   (specificity 120), which sets a 60px bottom margin below the footer block. */
.home #primary,
.page-id-9 #primary,
.page-id-26 #primary {
    margin-bottom: 0 !important;
}

/* #page-scoped to outspecify Astra's `#page .site-content { flex-grow:1 }`. */
.home #page .site-content,
.page-id-9 #page .site-content,
.page-id-26 #page .site-content {
    flex-grow: 0;
}

.site-footer#colophon {
    background-color: #2a2a2a;
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    border: 0;
}