/**
 * Home (front page) — index.html section layouts.
 *
 * Section-level classes ported from wp-content/index.html, `lp-`-prefixed so they
 * never collide with the legacy .award-card / .btn-primary / .step rules still in
 * design-system.css. Reuses the motif utilities already defined in design-system.css
 * (.lp-eyebrow, .lp-frame, .lp-viewfinder, .lp-badge, .lp-pull, .lp-chip, .lp-btn,
 * .lp-on-dark) and .lp-wrap from index-chrome.css.
 *
 * Enqueued on the front page only (see functions.php: lenspo_assets()).
 */

/* ==========================================================================
   Home canvas + typography
   ========================================================================== */
.lp-home {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body-font);
}
.lp-home img,
.lp-home svg { display: block; max-width: 100%; }
.lp-home a { color: inherit; text-decoration: none; }
.lp-home h1,
.lp-home h2,
.lp-home h3,
.lp-home h4 {
    font-family: var(--headings-font);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.lp-home .bn { font-family: var(--bn-font), var(--headings-font); }

/* ==========================================================================
   Section shell
   ========================================================================== */
.lp-section { padding: 64px 0; }
.lp-section-tight { padding: 48px 0; }

.lp-sec-head { max-width: 640px; margin-bottom: 36px; }
.lp-sec-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-top: 12px; }
.lp-sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: 1rem; }
.lp-on-dark .lp-sec-head p { color: rgba(245, 247, 246, 0.75); }
.lp-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-sec-head--center .lp-eyebrow { justify-content: center; }

.lp-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.lp-actions--center { justify-content: center; }
.lp-section-foot { margin-top: 34px; display: flex; justify-content: center; }
.lp-empty { text-align: center; color: var(--ink-soft); }
.lp-on-dark .lp-empty { color: rgba(245, 247, 246, 0.7); }

/* ==========================================================================
   Notice ticker — index.html design: a slim dark teal bar under the header,
   gold label, one headline (ellipsised), "All notices" link on >=640px.
   Replaces the old paper-coloured marquee.
   ========================================================================== */
.lp-notice-ticker { background: var(--teal-deep); color: var(--paper); }
.lp-notice-ticker-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 0.78rem;
    overflow: hidden;
}
.lp-notice-label {
    flex-shrink: 0;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--magenta);
    padding-right: 12px;
    border-right: 1px solid var(--line-on-dark);
}
.lp-notice-text {
    flex: 1;
    min-width: 0;
    color: rgba(245, 247, 246, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-notice-text a { color: inherit; }
.lp-notice-text a:hover { color: var(--magenta-light); }
.lp-notice-link {
    flex-shrink: 0;
    color: var(--paper);
    font-weight: 600;
    display: none;
}
.lp-notice-link:hover { color: var(--magenta-light); }
@media (min-width: 640px) {
    .lp-notice-link { display: inline-flex; align-items: center; gap: 4px; }
}

/* ==========================================================================
   Hero slider — index.html design. Slides stack absolutely and cross-fade;
   each carries a brand gradient (or its own background image) under a dark
   scrim so the copy always stays legible.
   ========================================================================== */
.lp-hero-slider {
    position: relative;
    overflow: hidden;
    min-height: clamp(480px, 74vh, 660px);
    color: var(--paper);
}
.lp-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    z-index: 1;
}
.lp-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Keep the section tall enough for its content: the first slide also holds
   the document flow, so it is not absolutely positioned. */
.lp-hero-slider > .lp-hero-slide:first-child { position: relative; }

.lp-hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
.lp-hero-slide-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 31, 30, 0.20), rgba(10, 31, 30, 0.68));
}
.lp-grad-1 {
    background-color: var(--teal-deep);
    background-image:
        radial-gradient(circle at 80% 20%, rgba(200, 155, 60, 0.32), transparent 50%),
        linear-gradient(135deg, #12867B, #0A1F1E 72%);
}
.lp-grad-2 {
    background-color: var(--teal-deep);
    background-image:
        radial-gradient(circle at 20% 78%, rgba(200, 155, 60, 0.28), transparent 55%),
        linear-gradient(150deg, #0A1F1E, #12867B 60%, #0E7C74);
}
.lp-grad-3 {
    background-color: var(--teal-deep);
    background-image:
        radial-gradient(circle at 60% 25%, rgba(200, 155, 60, 0.30), transparent 50%),
        linear-gradient(160deg, #0E7C74, #0A1F1E);
}
/* A slide with its own photo keeps the photo; the ::after scrim still applies. */
.lp-hero-slide-bg[style*="background-image"] { background-blend-mode: normal; }

/* Vertical padding only — this element is also .lp-wrap, and a padding
   shorthand here would wipe out the wrap's horizontal gutter and push the
   hero copy flush against the screen edge on phones. */
.lp-hero-slide-inner {
    position: relative;
    z-index: 1;
    padding-top: 90px;
    padding-bottom: 56px;
    width: 100%;
}
.lp-eyebrow--on-slide { color: var(--magenta-light); }
.lp-eyebrow--on-slide::before { background: var(--magenta-light); }

.lp-hero-slide h1,
.lp-hero-slide h2 {
    font-family: var(--headings-font);
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.12;
    margin-top: 16px;
    max-width: 16ch;
    color: var(--paper);
}
.lp-hero-slide h1 em,
.lp-hero-slide h2 em { font-style: italic; font-weight: 500; color: var(--magenta-light); }
.lp-hero-slide .lp-lede {
    margin-top: 18px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(245, 247, 246, 0.85);
    max-width: 46ch;
}
.lp-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero button pair from the design: solid gold + light ghost.
   !important is required: a global `.lp-btn { background: var(--lp-green) !important }`
   in the shared button layer otherwise repaints both of these teal. */
.lp-btn-gold {
    background: var(--magenta) !important;
    border-color: var(--magenta) !important;
    color: var(--teal-deep) !important;
}
.lp-btn-gold:hover {
    background: var(--magenta-deep) !important;
    border-color: var(--magenta-deep) !important;
    color: var(--teal-deep) !important;
}
.lp-btn-ghost-light {
    background: transparent !important;
    border-color: var(--line-on-dark) !important;
    color: var(--paper) !important;
}
.lp-btn-ghost-light:hover {
    background: transparent !important;
    border-color: var(--magenta) !important;
    color: var(--magenta) !important;
}

.lp-stat-strip {
    border-top: 1px solid var(--line-on-dark);
    margin-top: 44px;
    padding-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
@media (min-width: 640px) { .lp-stat-strip { grid-template-columns: repeat(4, 1fr); } }
.lp-stat b {
    display: block;
    font-family: var(--headings-font);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--magenta);
}
.lp-stat span { font-size: 0.78rem; color: rgba(245, 247, 246, 0.7); }

.lp-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-on-dark);
    background: rgba(10, 31, 30, 0.35);
    color: var(--paper);
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lp-hero-arrow:hover { border-color: var(--magenta); color: var(--magenta); }
.lp-hero-arrow.prev { left: 14px; }
.lp-hero-arrow.next { right: 14px; }
@media (min-width: 720px) {
    .lp-hero-arrow { width: 46px; height: 46px; }
    .lp-hero-arrow.prev { left: 28px; }
    .lp-hero-arrow.next { right: 28px; }
}

.lp-hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 2px;
}
/* The button is a 24px hit target; the visible 8px dot is drawn with ::before.
   A global `a, button, .btn { min-width:44px; min-height:44px }` tap-target rule
   otherwise inflated these into 44px blobs, so min-* is reset explicitly. */
.lp-hero-dot {
    width: 24px;
    height: 24px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-hero-dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245, 247, 246, 0.4);
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
.lp-hero-dot:hover::before { background: rgba(245, 247, 246, 0.7); }
.lp-hero-dot.is-active::before { background: var(--magenta); width: 22px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .lp-hero-slide { transition: none; }
}


/* ==========================================================================
   About
   ========================================================================== */
.lp-about-grid { display: grid; gap: 34px; }
@media (min-width: 880px) {
    .lp-about-grid { grid-template-columns: 1.3fr 0.9fr; gap: 60px; align-items: start; }
}
/* Third Eye story panel spans the full row (hero visual removed) */
.lp-story-panel { grid-column: 1 / -1; }
.lp-about-copy p { color: var(--ink-soft); font-size: 1.02rem; }
.lp-about-copy p + p { margin-top: 14px; }
.lp-about-copy .lp-sec-head { margin-bottom: 20px; }

/* ==========================================================================
   Publication
   ========================================================================== */
.lp-pub {
    display: grid;
    gap: 30px;
    background: var(--teal);
    color: var(--paper);
    padding: 36px 24px;
}
@media (min-width: 880px) {
    .lp-pub { grid-template-columns: 0.85fr 1.15fr; padding: 44px; gap: 48px; align-items: stretch; }
}
.lp-pub-cover {
    aspect-ratio: 3/4;
    background: linear-gradient(155deg, var(--magenta), var(--teal) 65%, var(--teal-deep));
    border: 1px solid var(--line-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    text-align: center;
    overflow: hidden;
}
/* When a real cover image is present, show it whole (covers are landscape
   book mockups) instead of cropping it into the portrait placeholder box. */
/* With a real cover image the frame must not letterbox it: drop the fixed
   aspect ratio, stop the grid stretching this column to match the text, and
   let the image set its own height. */
.lp-pub-cover:has(img) {
    aspect-ratio: auto;
    padding: 0;
    background: transparent;
    border: 0;
    align-self: start;
    display: block;
    overflow: visible;
}
.lp-pub-cover img { display: block; width: 100%; height: auto; object-fit: contain; }
.lp-pub-cover .bn { font-size: 1.25rem; color: var(--paper); line-height: 1.5; }
.lp-pub-body h2 { margin-top: 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--paper); }
.lp-pub-lead { margin-top: 16px; color: var(--paper); font-weight: 500; }
.lp-pub-body p { color: rgba(245, 247, 246, 0.82); margin-top: 14px; }
.lp-pub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line-on-dark);
}
.lp-pub-meta div span { display: block; font-size: 0.7rem; color: rgba(245, 247, 246, 0.55); }
.lp-pub-meta div b { font-family: var(--headings-font); font-weight: 500; color: var(--paper); }
.lp-pub-body .lp-btn { margin-top: 22px; }

/* ==========================================================================
   Grid cards — awards, news, latest events, drawing, winners
   ========================================================================== */
.lp-award-grid { display: grid; gap: 20px; }
@media (min-width: 600px) { .lp-award-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lp-award-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-award-card {
    background: var(--paper);
    padding: 22px;
    display: flex;
    flex-direction: column;
}
.lp-award-media {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 16px;
}
.lp-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lp-award-year { font-size: 0.78rem; color: var(--teal); font-weight: 600; }
.lp-award-card h3 { font-size: 1.2rem; }
.lp-award-card .lp-who { margin-top: 8px; font-size: 0.86rem; color: var(--ink-soft); }
.lp-award-card p.lp-desc { margin-top: 12px; font-size: 0.92rem; color: var(--ink-soft); }
.lp-award-date { font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; }
.lp-award-card .lp-btn { margin-top: 16px; align-self: flex-start; }
.lp-award-card--center { text-align: center; align-items: center; }
.lp-award-card--center .lp-badge-row { justify-content: center; }
.lp-card-link:hover h3 { color: var(--teal); }

/* ==========================================================================
   Activities — filterable list (on dark)
   ========================================================================== */
.lp-activity-list { display: flex; flex-direction: column; }
.lp-activity-item {
    display: grid;
    gap: 14px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 760px) {
    .lp-activity-item { grid-template-columns: 120px 1fr 160px; align-items: start; gap: 24px; }
}
.lp-activity-item:first-child { border-top: 1px solid var(--line-on-dark); }
.lp-act-date { font-size: 0.82rem; color: var(--magenta); font-weight: 600; }
.lp-act-body h4 { font-size: 1.08rem; font-weight: 600; color: var(--paper); }
.lp-act-body p { margin-top: 6px; color: rgba(245, 247, 246, 0.75); font-size: 0.92rem; }
.lp-act-link:hover h4 { color: var(--magenta-light); }
.lp-act-tag {
    justify-self: start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(245, 247, 246, 0.85);
    border: 1px solid var(--line-on-dark);
    padding: 5px 10px;
    white-space: nowrap;
    height: fit-content;
}
@media (min-width: 760px) { .lp-act-tag { justify-self: end; } }

/* ==========================================================================
   Welfare highlight band
   ========================================================================== */
.lp-welfare-band {
    background: var(--paper-dim);
    padding: 36px 24px;
    display: grid;
    gap: 24px;
}
@media (min-width: 820px) { .lp-welfare-band { grid-template-columns: repeat(3, 1fr); padding: 40px; } }
.lp-welfare-item b { display: block; font-family: var(--headings-font); font-size: 1.6rem; color: var(--magenta); }
.lp-welfare-item span { font-size: 0.85rem; color: var(--ink-soft); }

/* ==========================================================================
   Contest — steps + why (on dark)
   ========================================================================== */
.lp-steps { display: grid; gap: 20px; }
@media (min-width: 820px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { position: relative; padding-top: 44px; }
.lp-step .lp-num {
    font-family: var(--headings-font);
    font-size: 2.1rem;
    font-weight: 300;
    color: var(--magenta);
    position: absolute;
    top: 0;
    left: 0;
}
.lp-step h4 { font-size: 1.05rem; color: var(--paper); }
.lp-step p { margin-top: 8px; color: rgba(245, 247, 246, 0.75); font-size: 0.92rem; }

.lp-why-grid { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 720px) { .lp-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .lp-why-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.lp-why-card { padding: 22px; border: 1px solid var(--line-on-dark); }
.lp-why-card h4 { font-size: 1.05rem; color: var(--paper); }
.lp-why-card p { margin-top: 8px; color: rgba(245, 247, 246, 0.75); font-size: 0.92rem; }

/* Why-enter layout with the optional contest image beside the cards. */
.lp-why-layout { margin-top: 34px; }
.lp-why-layout .lp-why-grid { margin-top: 0; }
.lp-why-media { position: relative; overflow: hidden; min-height: 220px; }
.lp-why-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 880px) {
    .lp-why-layout--media {
        display: grid;
        grid-template-columns: 1.4fr 0.9fr;
        gap: 24px;
        align-items: stretch;
    }
    .lp-why-layout--media .lp-why-grid { grid-template-columns: 1fr 1fr; align-content: start; }
}

/* ==========================================================================
   Third Eye — story panel credit + full photo gallery
   ========================================================================== */
.lp-story-credit { margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); }
.lp-story-body { margin-top: 14px; }
.lp-story-body p { color: var(--ink-soft); }
.lp-story-body p + p { margin-top: 12px; }
.lp-story-body strong { color: var(--ink); }

/* Masonry-style photo story gallery — photos keep their natural aspect ratio
   (documentary work is a mix of portrait / landscape) instead of hard 1:1 crops. */
.lp-photo-grid {
    columns: 2;
    column-gap: 14px;
    margin-top: 40px;
}
@media (min-width: 640px) { .lp-photo-grid { columns: 3; } }
@media (min-width: 1100px) { .lp-photo-grid { columns: 4; } }
.lp-photo-grid a {
    position: relative;
    display: block;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    break-inside: avoid;
    background: var(--paper-dim);
}
.lp-photo-grid img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.lp-photo-grid a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 31, 30, 0.55));
    opacity: 0;
    transition: opacity 0.35s ease;
}
.lp-photo-grid a::before {
    content: "\002B"; /* + expand hint */
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--teal-deep);
    background: var(--magenta);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.lp-photo-grid a:hover img { transform: scale(1.05); }
.lp-photo-grid a:hover::after { opacity: 1; }
.lp-photo-grid a:hover::before,
.lp-photo-grid a:focus-visible::before { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Team
   ========================================================================== */
.lp-team-scroll { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .lp-team-scroll { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .lp-team-scroll { grid-template-columns: repeat(4, 1fr); } }
.lp-member { border: 1px solid var(--line); overflow: hidden; padding-bottom: 16px; }
.lp-member__media { aspect-ratio: 1/1; overflow: hidden; background: var(--paper-dim); margin-bottom: 12px; }
.lp-member__media img { width: 100%; height: 100%; object-fit: cover; }
.lp-member .lp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--teal), var(--magenta));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    font-family: var(--headings-font);
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 14px 12px;
}
.lp-member h5 { font-family: var(--body-font); font-weight: 600; font-size: 0.92rem; padding: 0 14px; margin: 0; }
.lp-member p { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; padding: 0 14px; }

/* ==========================================================================
   Institution
   ========================================================================== */
.lp-inst-grid { display: grid; gap: 28px; }
@media (min-width: 880px) { .lp-inst-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.lp-inst-copy .lp-sec-head { margin-bottom: 16px; }
.lp-inst-copy p { color: var(--ink-soft); }
.lp-inst-copy p + p { margin-top: 14px; }
.lp-inst-badge { margin-top: 18px; }
.lp-inst-visual {
    aspect-ratio: 16/10;
    background:
        repeating-linear-gradient(115deg, rgba(245, 247, 246, 0.05) 0 2px, transparent 2px 26px),
        linear-gradient(160deg, var(--teal), var(--teal-deep) 80%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    overflow: hidden;
    position: relative;
}
.lp-inst-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lp-inst-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 31, 30, 0.6), transparent 55%);
    z-index: 1;
}
.lp-inst-visual span { position: relative; z-index: 2; color: rgba(245, 247, 246, 0.85); font-size: 0.78rem; }

/* ==========================================================================
   Template hooks — dark section band, on-dark eyebrow, ticker duplication,
   contest sub-headings
   ========================================================================== */
.lp-section.lp-on-dark { background: var(--teal-deep); color: var(--paper); }
.lp-on-dark .lp-eyebrow { color: rgba(245, 247, 246, 0.72); }


.lp-steps-title {
    font-family: var(--headings-font);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--paper);
    margin: 34px 0 18px;
}
.lp-steps-title + .lp-why-grid { margin-top: 0; }
/* The steps grid is as tall as its longest description, so a following
   sub-heading needs real separation rather than the default 34px. */
.lp-steps + .lp-steps-title { margin-top: 30px; margin-bottom: 30px; }
.lp-steps { margin-bottom: 4px; }

/* Phone: the side arrows sit on top of the hero CTAs at narrow widths, so drop
   them and let the dots (and swipe) drive the carousel instead. */
@media (max-width: 719px) {
    .lp-hero-arrow { display: none; }
    .lp-hero-slide-inner { padding-top: 64px; padding-bottom: 72px; }
    .lp-hero-dots { bottom: 16px; }
}

/* ==========================================================================
   Responsive corrections (home sections)
   ========================================================================== */

/* 1. Hero: no dead space above the headline on phones.
   style.css carries a blanket `section { padding: 30px 0 !important }` at
   <=576px (and 40px at <=768px) that hits EVERY section including the hero,
   stacking on top of the slide's own 64px inner padding. The hero paints a
   full-bleed background, so it must own its spacing — hence !important to
   beat the legacy rule rather than editing that 27k-line sheet. */
@media (max-width: 768px) {
    .lp-home .lp-hero-slider { padding: 0 !important; }
    /* padding-top/bottom only: a `padding` shorthand here would wipe the
       .lp-wrap horizontal gutter and push copy to the screen edge. */
    .lp-hero-slide-inner { padding-top: 34px; padding-bottom: 48px; }
}
@media (max-width: 575px) {
    .lp-hero-slide-inner { padding-top: 26px; padding-bottom: 40px; }
}

/* 5. Breathing room around the section CTA on every device. The button used
   to sit flush against both the last card above it and the section edge
   below, because the legacy mobile rule shrinks section padding to 30px. */
.lp-why-grid + .lp-actions,
.lp-steps + .lp-actions { margin-top: 40px; }
@media (max-width: 768px) {
    .lp-why-grid + .lp-actions,
    .lp-steps + .lp-actions { margin-top: 32px; }
    .lp-home #contest { padding-bottom: 56px !important; }
    .lp-home #contest .lp-actions .lp-btn { width: 100%; justify-content: center; }
}

/* An image-only hero slide carries no copy, so the heavy readability scrim
   just dims the photo for no reason. Keep a light wash only — enough to seat
   the arrows and dots against the image without hiding the picture. */
.lp-hero-slide--image-only .lp-hero-slide-bg::after {
    background: linear-gradient(180deg, rgba(10, 31, 30, 0.06), rgba(10, 31, 30, 0.28));
}