/* ============================================================================
   jl.css — Jurney's Logix and Advisory NV — public site theme
   Ink / bronze / teal / stone · Source Serif 4 + Inter · soft modern cards.
   Class prefix: jl-   (home sections + inner pages + forms)
   Palette tokens come from brand.css; local aliases below keep this file readable.
   ============================================================================ */

:root {
    --jl-ink:        var(--brand-ink, #16242C);
    --jl-ink-soft:   #3B4A52;
    --jl-paper:      #FFFFFF;
    --jl-stone:      #F3F4F2;
    --jl-bronze:     var(--brand-accent, #B8862E);
    --jl-bronze-deep:#8F6A22;
    --jl-teal:       #1F4E4A;
    --jl-line:       #E1E3E0;
    --jl-serif:      'Source Serif 4', Georgia, 'Times New Roman', serif;
    --jl-sans:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --jl-radius:     10px;
    --jl-radius-lg:  22px;
    --jl-shadow:     0 10px 28px rgba(22,36,44,.08);
    --jl-shadow-lg:  0 22px 55px rgba(22,36,44,.14);
}

.jl-page, .jl-page *, .jl-page *::before, .jl-page *::after { box-sizing: border-box; }
.jl-page { font-family: var(--jl-sans); color: var(--jl-ink); background: var(--jl-paper); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.jl-page h1, .jl-page h2, .jl-page h3 { font-family: var(--jl-serif); font-weight: 500; line-height: 1.15; }
.jl-page a { text-decoration: none; color: inherit; }
/* .jl-btn is a gold pill — dark ink text reads far better on gold than white (~5:1 vs ~3:1 contrast) */
.jl-page a.jl-btn { color: var(--jl-ink); }
.jl-page a.jl-btn:hover { color: #fff; }
/* keep light-on-dark elements light — .jl-page a's specificity otherwise wins over the component rules.
   Must come after the .jl-btn rule above: an element with BOTH jl-btn and jl-btn-outline (the hero's
   "View Our Services" button) needs this white rule to win, since it sits on a transparent/dark background. */
.jl-page a.jl-btn-outline, .jl-page a.jl-btn-ink,
.jl-page .jl-gallery-grid > a { color: #fff; }
.jl-page a.jl-nav-cta { color: var(--nav-cta-text, #fff); }
.jl-page img { max-width: 100%; display: block; }
.jl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.jl-section { padding: 96px 0; }
/* Sibling-only — fires purely on actual DOM adjacency, so it stays correct no
   matter which sections an admin switches off: whenever two plain content
   sections end up back-to-back (same default white background, or two that
   happen to share a color like About/Testimonials), this draws the same thin
   divider Trust already uses instead of leaving an undifferentiated gap. A
   section that isn't rendered never leaves a seam behind — see home.blade.php. */
.jl-section + .jl-section { border-top: 1px solid var(--jl-line); }
.jl-section-head { max-width: 560px; margin-bottom: 52px; }
.jl-section-head h2 { font-size: 34px; }
.jl-section-head p { margin-top: 14px; color: var(--jl-ink-soft); font-size: 15.5px; }

/* Small gold label above a section heading — use the deeper gold for text
   (better contrast on white than the lighter --jl-bronze used on buttons). */
.jl-eyebrow {
    display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--jl-bronze-deep); margin-bottom: 10px;
}
.jl-testimonials .jl-eyebrow, .jl-hero .jl-eyebrow { color: var(--jl-bronze); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.jl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--jl-bronze); color: var(--jl-ink); padding: 14px 26px; border-radius: var(--jl-radius);
    font-size: 15px; font-weight: 600; border: 1px solid var(--jl-bronze);
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    cursor: pointer; font-family: inherit;
}
.jl-btn:hover { background: var(--jl-bronze-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--jl-shadow); }
.jl-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.jl-btn-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.jl-btn-ink { background: var(--jl-ink); border-color: var(--jl-ink); color: #fff; }
.jl-btn-ink:hover { background: var(--jl-teal); border-color: var(--jl-teal); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.jl-header {
    position: sticky; top: 0; z-index: 50; overflow: hidden;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--jl-line);
}
.jl-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 32px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.jl-brand { font-family: var(--jl-serif); font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.jl-brand span { color: var(--jl-bronze); }
.jl-brand img { max-height: 48px; }
.jl-nav-links { display: flex; gap: 28px; font-size: 14.5px; color: var(--nav-text, var(--jl-ink-soft)); }
.jl-nav-links a:hover { color: var(--jl-ink); }
.jl-nav-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.jl-lang { font-size: 14px; color: var(--nav-text, var(--jl-ink-soft)); display: flex; gap: 4px; }
.jl-lang a { padding: 2px 4px; }
.jl-lang a.is-active { color: var(--nav-text, var(--jl-ink)); font-weight: 600; border-bottom: 1.5px solid var(--jl-bronze); }
.jl-nav-signin { font-size: 14px; color: var(--nav-text, var(--jl-ink-soft)); white-space: nowrap; }
.jl-nav-signin:hover { color: var(--jl-ink); }
.jl-nav-cta { display: inline-block; background: var(--nav-cta-bg, var(--jl-ink)); color: var(--nav-cta-text, #fff); padding: 11px 20px; font-size: 14px; font-weight: 600; border-radius: var(--jl-radius); white-space: nowrap; transition: background .18s ease, transform .18s ease; }
.jl-nav-cta:hover { background: var(--jl-teal); transform: translateY(-1px); }
.jl-menu-toggle { display: none; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--nav-text, var(--jl-ink)); cursor: pointer; padding: 4px 6px; }
.jl-mobile-menu { display: none; position: relative; z-index: 1; }

/* ── Flash message (e.g. redirected here because a section/page is off) ────── */
.jl-flash { text-align: center; padding: 14px 32px; font-size: 14.5px; }
.jl-flash-error { background: #FBEAEA; color: #8A2C2C; }
.jl-flash-success { background: #E8F3EE; color: #1F4E4A; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.jl-hero { background: var(--jl-ink); color: #fff; padding: 110px 0 90px; position: relative; overflow: hidden; }
.jl-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; }
.jl-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px;
    border-radius: 999px; background: rgba(184,134,46,.14); border: 1px solid rgba(184,134,46,.3);
    color: #E4C171; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; margin-bottom: 20px; }
.jl-hero-line { width: 56px; height: 2px; background: var(--jl-bronze); margin-bottom: 26px; }
.jl-hero h1 { font-size: 52px; color: var(--hero-headline, #fff); max-width: 640px; letter-spacing: .2px; }
.jl-hero .jl-lead { margin-top: 22px; font-size: 17px; color: var(--hero-lead, #C7D0D2); max-width: 480px; }
.jl-hero-ctas { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.jl-hero-panel { border: 1px solid rgba(255,255,255,.16); padding: 28px; border-radius: var(--jl-radius-lg); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.jl-hero-panel p { font-size: 13.5px; color: #A9B4B6; margin-bottom: 14px; }
.jl-hero-panel ul { list-style: none; }
.jl-hero-panel li { display: flex; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14.5px; color: #DCE2E3; }
.jl-hero-panel li:first-child { border-top: none; }
.jl-hero-panel li b { color: #fff; font-weight: 600; text-align: right; }
.jl-hero--centered .jl-hero-grid { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; text-align: center; }
.jl-hero--centered .jl-hero-panel { display: none; }
.jl-hero--centered .jl-hero-line, .jl-hero--centered .jl-hero-ctas { justify-content: center; }
.jl-hero--centered .jl-hero-line, .jl-hero--centered .jl-hero-badge { margin-left: auto; margin-right: auto; }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.jl-trust { background: var(--jl-stone); border-bottom: 1px solid var(--jl-line); }
.jl-trust .jl-wrap { display: flex; justify-content: space-between; padding: 34px 32px; flex-wrap: wrap; gap: 24px; }
.jl-trust-item { min-width: 180px; }
.jl-trust-item .jl-num { font-family: var(--jl-serif); font-size: 30px; color: var(--jl-ink); font-weight: 600; line-height: 1; }
.jl-trust-item .jl-label { font-size: 13px; color: var(--jl-ink-soft); margin-top: 6px; max-width: 170px; line-height: 1.35; }

/* ── Services grid ───────────────────────────────────────────────────────── */
.jl-services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.jl-services-grid--cols-1 { grid-template-columns: 1fr; }
.jl-services-grid--cols-2 { grid-template-columns: repeat(2,1fr); }
.jl-service-card {
    background: #fff; border: 1px solid var(--jl-line); border-radius: var(--jl-radius-lg);
    padding: 32px 28px; display: block; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jl-service-card:hover { transform: translateY(-5px); box-shadow: var(--jl-shadow-lg); border-color: #d6dde0; }
.jl-service-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #B4BEC5; margin-bottom: 18px; }
.jl-service-ico-wrap { width: 48px; height: 48px; border-radius: 14px; background: var(--jl-stone);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.jl-service-card--ink .jl-service-ico-wrap { background: rgba(255,255,255,.08); }
.jl-service-ico { width: 22px; height: 22px; color: var(--jl-bronze); }
.jl-service-card h3 { font-size: 19px; margin-bottom: 10px; }
.jl-service-card p { font-size: 14.5px; color: var(--jl-ink-soft); margin-bottom: 16px; }
.jl-service-card .jl-more { font-size: 13.5px; font-weight: 600; color: var(--jl-teal); }
.jl-service-card--ink { background: var(--jl-ink); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.jl-service-card--ink:hover { border-color: var(--jl-ink); }
.jl-service-card--ink h3 { color: #fff; }
.jl-service-card--ink p { color: #B9C2C4; }
.jl-service-card--ink .jl-more { color: var(--jl-bronze); }
.jl-price-line { font-size: 13.5px; color: var(--jl-ink); font-weight: 600; margin-bottom: 14px; }

/* ── About ───────────────────────────────────────────────────────────────── */
.jl-about { background: var(--jl-stone); }
.jl-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.jl-about-img { aspect-ratio: 4/5; background: linear-gradient(160deg,#233C42,#16242C); border-radius: var(--jl-radius-lg); background-size: cover; background-position: center; box-shadow: var(--jl-shadow-lg); }
/* No About photo uploaded yet — drop the placeholder box entirely rather than
   show an empty gradient rectangle, and let the text take the full width. */
.jl-about-grid--no-image { grid-template-columns: 1fr; max-width: 720px; }
.jl-about h2 { font-size: 32px; max-width: 440px; }
.jl-about p { color: var(--jl-ink-soft); margin-top: 18px; font-size: 15.5px; max-width: 460px; }
.jl-about-points { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.jl-about-points div { display: flex; gap: 12px; font-size: 14.5px; color: var(--jl-ink); align-items: center; }
.jl-about-points b {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(184,134,46,.14); color: var(--jl-bronze-deep);
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.jl-gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 180px; gap: 14px; }
.jl-gallery-grid > * { border-radius: var(--jl-radius-lg); background: linear-gradient(150deg,#2A4247,#16242C); background-size: cover; background-position: center; overflow: hidden; color: #fff; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.jl-gallery-grid > a:hover { transform: translateY(-4px); box-shadow: var(--jl-shadow-lg); }
.jl-gallery-grid > *:nth-child(2) { background: linear-gradient(150deg,#3A3120,#16242C); }
.jl-gallery-grid > *:nth-child(3) { background: linear-gradient(150deg,#1F4E4A,#16242C); }
.jl-gallery-grid > *:nth-child(4n) { background: linear-gradient(150deg,#4A3B1E,#16242C); }
.jl-gallery-grid > *:first-child { grid-row: span 2; }
.jl-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; font-size: 12.5px;
    background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* ── Promotions (infinite marquee) ──────────────────────────────────────────
   Two identical passes of the slide list sit side by side in one flex track;
   the track animates left by exactly one pass's width, so the seam between
   pass 1 ending and pass 2 starting is invisible and the loop never "jumps". */
.jl-promo-section { padding-bottom: 96px; }
.jl-promo-section .jl-section-head { margin-bottom: 32px; }
.jl-promo-marquee { overflow: hidden; }
.jl-promo-track { display: flex; width: max-content; gap: 20px; animation: jl-promo-scroll 32s linear infinite; }
.jl-promo-marquee:hover .jl-promo-track { animation-play-state: paused; }
.jl-promo-slide { position: relative; flex: 0 0 auto; width: 340px; height: 220px; border-radius: var(--jl-radius-lg); overflow: hidden; background: var(--jl-ink); box-shadow: var(--jl-shadow); }
.jl-promo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jl-promo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.jl-promo-cap h3 { font-size: 16px; margin: 0 0 4px; }
.jl-promo-cap p { font-size: 13px; margin: 0; opacity: .9; }
@keyframes jl-promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .jl-promo-track { animation: none; }
}

/* ── Testimonials ────────────────────────────────────────────────────────── */
.jl-testimonials { background: var(--jl-ink); color: #fff; }
.jl-testimonials .jl-section-head h2 { color: #fff; }
.jl-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.jl-test-grid--cols-1 { grid-template-columns: 1fr; }
.jl-test-grid--cols-1 .jl-test-card { max-width: 560px; }
.jl-test-stars { display: flex; gap: 3px; color: var(--jl-bronze); margin-bottom: 16px; }
.jl-test-card p { font-size: 18px; font-family: var(--jl-serif); line-height: 1.5; color: #EDEFEE; }
.jl-test-meta { margin-top: 22px; font-size: 14px; color: #A9B4B6; display: flex; align-items: center; gap: 12px; }
.jl-test-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(184,134,46,.16);
    color: #E4C171; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.jl-test-meta b { color: #fff; display: block; font-size: 14.5px; margin-bottom: 2px; }

/* ── Blog ────────────────────────────────────────────────────────────────── */
.jl-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.jl-blog-grid--cols-1 { grid-template-columns: 1fr; }
.jl-blog-grid--cols-2 { grid-template-columns: repeat(2,1fr); }
/* Fewer posts than columns — don't stretch the lone card(s) to fill the row width. */
.jl-blog-card { max-width: 360px; display: block; transition: transform .2s ease; }
.jl-blog-card:hover { transform: translateY(-4px); }
.jl-blog-card:hover .jl-thumb { box-shadow: var(--jl-shadow); }
.jl-blog-card .jl-thumb { aspect-ratio: 16/10; background: var(--jl-stone); border: 1px solid var(--jl-line); border-radius: var(--jl-radius); margin-bottom: 18px; background-size: cover; background-position: center; overflow: hidden; transition: box-shadow .2s ease; }
.jl-blog-date { font-size: 13px; color: var(--jl-bronze-deep); font-weight: 600; }
.jl-blog-card h3 { font-size: 18px; margin: 8px 0; }
.jl-blog-card p { font-size: 14px; color: var(--jl-ink-soft); }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.jl-cta-band { background: var(--jl-teal); color: #fff; padding: 70px 0; position: relative; overflow: hidden; }
.jl-cta-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; position: relative; z-index: 1; }
.jl-cta-band h2 { color: var(--cta-heading, #fff); font-size: 30px; max-width: 520px; }

/* ── Contact section (form) ──────────────────────────────────────────────── */
.jl-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.jl-contact-info h2 { font-size: 32px; }
.jl-contact-info p { color: var(--jl-ink-soft); margin-top: 16px; font-size: 15.5px; max-width: 420px; }
.jl-contact-detail { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 14.5px; }
.jl-contact-detail b {
    flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--jl-stone);
    color: var(--jl-bronze-deep); display: flex; align-items: center; justify-content: center;
}
.jl-contact-detail span { display: flex; flex-direction: column; gap: 2px; }
.jl-contact-detail strong { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a969f; font-weight: 700; }
.jl-contact-detail a { color: var(--jl-ink); }
.jl-contact-detail a:hover { color: var(--jl-teal); }
.jl-form { display: grid; gap: 16px; min-width: 0; background: var(--jl-stone); border: 1px solid var(--jl-line);
    border-radius: var(--jl-radius-lg); padding: 32px; box-shadow: var(--jl-shadow); }
.jl-form > * { min-width: 0; }
.jl-form label { font-size: 13px; font-weight: 600; color: var(--jl-ink); margin-bottom: 6px; display: block; }
.jl-form input, .jl-form textarea, .jl-form select {
    display: block; width: 100%; max-width: 100%; padding: 12px 14px;
    border: 1px solid var(--jl-line); border-radius: var(--jl-radius);
    font: inherit; font-size: 14.5px; color: var(--jl-ink); background: #fff;
}
.jl-form input:focus, .jl-form textarea:focus, .jl-form select:focus {
    outline: none; border-color: var(--jl-bronze); box-shadow: 0 0 0 3px rgba(184,134,46,.15);
}
.jl-form textarea { min-height: 130px; resize: vertical; }
.jl-form .jl-btn { justify-content: center; }
.jl-form-note { font-size: 12.5px; color: var(--jl-ink-soft); }
.jl-form-ok { background: #ecfdf3; border: 1px solid #b7e4c7; color: #1a7f4b; padding: 12px 14px; border-radius: var(--jl-radius); font-size: 14px; }
.jl-form-err { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: 12px 14px; border-radius: var(--jl-radius); font-size: 14px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* --foot-bg/--foot-text/--foot-heading are set inline by footer_landing.blade.php
   from Admin → Home Page Content → Footer → Appearance; unset = these fallbacks,
   so an untouched site looks exactly like it did before that existed. */
.jl-footer { position: relative; overflow: hidden; background: var(--foot-bg, var(--jl-ink)); color: var(--foot-text, #B9C2C4); padding: 70px 0 30px; }
.jl-footer > .jl-wrap { position: relative; z-index: 1; }
.jl-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.1); }
.jl-foot-brand h3 { color: var(--foot-heading, #fff); font-size: 19px; margin-bottom: 14px; }
.jl-foot-brand p { font-size: 14px; max-width: 260px; }
.jl-footer h4 { color: var(--foot-heading, #fff); font-size: 14px; margin-bottom: 16px; font-weight: 600; }
.jl-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.jl-footer ul a:hover { color: var(--foot-heading, #fff); }
.jl-foot-bottom { display: flex; justify-content: space-between; padding-top: 26px; font-size: 13px; color: var(--foot-text, #7E8B8D); flex-wrap: wrap; gap: 10px; }
/* The language switcher is shared with the (light-background) header, where
   .jl-lang a.is-active uses --jl-ink for contrast — invisible on this dark
   footer. Override both states here. */
.jl-footer .jl-lang { color: var(--foot-text, #7E8B8D); }
.jl-footer .jl-lang a { color: var(--foot-text, #7E8B8D); }
.jl-footer .jl-lang a.is-active { color: var(--foot-heading, #fff); border-bottom-color: var(--jl-bronze); }
.jl-foot-socials { display: flex; gap: 14px; margin-top: 4px; }
.jl-foot-socials a:hover { color: var(--foot-heading, #fff); }
.jl-foot-bottom-right { display: flex; align-items: center; gap: 18px; }
.jl-foot-bottom-right a { color: var(--foot-text, #B9C2C4); }
.jl-foot-bottom-right a:hover { color: var(--foot-heading, #fff); }

/* ── Inner pages ─────────────────────────────────────────────────────────── */
.jl-inner-hero { background: var(--jl-ink); color: #fff; padding: 84px 0 64px; border-bottom: 3px solid var(--jl-bronze); }
.jl-inner-hero .jl-hero-line { margin-bottom: 20px; }
.jl-inner-hero h1 { font-size: 40px; color: #fff; }
.jl-inner-hero p { margin-top: 14px; color: #C7D0D2; font-size: 16px; max-width: 560px; }
.jl-crumb { font-size: 12.5px; color: #A9B4B6; margin-bottom: 14px; }
.jl-crumb a:hover { color: #fff; }
.jl-inner-body { position: relative; overflow: hidden; padding: 72px 0; }
.jl-card { background: #fff; border: 1px solid var(--jl-line); padding: 34px; margin-bottom: 24px; border-radius: var(--jl-radius-lg); box-shadow: var(--jl-shadow); }
.jl-card h2 { font-size: 22px; margin-bottom: 10px; }
.jl-card p { color: var(--jl-ink-soft); font-size: 15px; line-height: 1.8; }
.jl-divider { height: 1px; background: var(--jl-line); margin: 20px 0; }
.jl-empty { text-align: center; padding: 80px 20px; font-family: var(--jl-serif); font-size: 20px; color: var(--jl-ink-soft); font-style: italic; }
.jl-back { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jl-teal); }

/* ── Auth pages (login / register) ───────────────────────────────────────── */
.jl-auth { background: var(--jl-stone); display: flex; justify-content: center; align-items: flex-start; padding: 72px 24px 96px; min-height: calc(100vh - 400px); }
.jl-auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--jl-line); border-radius: var(--jl-radius-lg); padding: 40px 34px; box-shadow: var(--jl-shadow); }
.jl-auth-card h1 { font-size: 26px; }
.jl-auth-card .jl-sub { color: var(--jl-ink-soft); font-size: 14.5px; margin: 8px 0 26px; }
.jl-auth-card .jl-form { margin-top: 4px; }
.jl-auth-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 12px; flex-wrap: wrap; }
.jl-auth-meta label { font-weight: 400; display: flex; gap: 8px; align-items: center; margin: 0; }
.jl-auth-meta input[type=checkbox] { width: auto; }
.jl-auth-meta a { color: var(--jl-teal); }
.jl-auth-alt { margin-top: 22px; font-size: 14px; color: var(--jl-ink-soft); }
.jl-auth-alt a { color: var(--jl-teal); font-weight: 600; }
.jl-auth-card .jl-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* ── Minimal header (auth + account pages) ───────────────────────────────── */
.jl-header-min { position: static; }
.jl-header-min .jl-nav-right { gap: 14px; }

/* ── Account area (dashboard / messages / profile) ───────────────────────── */
.jl-acct-band { background: var(--jl-ink); color: #fff; padding: 46px 0 26px; }
.jl-acct-band h1 { font-size: 30px; color: #fff; }
.jl-acct-band p { margin-top: 8px; color: #A9B4B6; font-size: 14px; }
.jl-acct-tabs { background: var(--jl-ink); border-bottom: 1px solid rgba(255,255,255,.12); position: sticky; top: 0; z-index: 20; }
.jl-acct-tabs .jl-wrap { display: flex; gap: 4px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.jl-acct-tabs .jl-wrap::-webkit-scrollbar { display: none; }
.jl-acct-tabs a { padding: 14px 18px; font-size: 14px; color: #A9B4B6; border-bottom: 2px solid transparent; white-space: nowrap; }
.jl-acct-tabs a:hover { color: #fff; }
.jl-acct-tabs a.is-active { color: #fff; border-bottom-color: var(--jl-bronze); }
.jl-acct-logout { margin-left: auto; display: flex; align-items: center; }
.jl-acct-logout button { background: none; border: 0; color: #7E8B8D; font: inherit; font-size: 13px; cursor: pointer; padding: 14px 4px; }
.jl-acct-logout button:hover { color: #fff; }

.jl-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.jl-acct-tile { display: block; background: #fff; border: 1px solid var(--jl-line); border-radius: var(--jl-radius-lg); padding: 26px 24px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.jl-acct-tile:hover { border-color: var(--jl-bronze); transform: translateY(-3px); box-shadow: var(--jl-shadow); }
.jl-acct-tile h3 { font-size: 17px; margin-bottom: 8px; }
.jl-acct-tile p { font-size: 13.5px; color: var(--jl-ink-soft); line-height: 1.6; }
.jl-acct-tile .jl-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--jl-teal); }
.jl-acct-welcome { background: var(--jl-stone); border: 1px solid var(--jl-line); border-radius: var(--jl-radius-lg); padding: 22px 24px; margin-bottom: 28px; font-size: 15px; }

.jl-msg-list { display: flex; flex-direction: column; border: 1px solid var(--jl-line); border-radius: var(--jl-radius-lg); overflow: hidden; }
.jl-msg-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border-top: 1px solid var(--jl-line); }
.jl-msg-row:first-child { border-top: 0; }
.jl-msg-row:hover { background: var(--jl-stone); }
.jl-msg-row .jl-msg-subject { font-weight: 600; font-size: 14.5px; }
.jl-msg-row .jl-msg-meta { font-size: 12.5px; color: var(--jl-ink-soft); }
.jl-msg-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; }
.jl-msg-tag--open { background: #fef3c7; color: #92600e; }
.jl-msg-tag--done { background: #dcfce7; color: #166534; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .jl-nav { padding: 16px 20px; }
    .jl-nav-links, .jl-nav-right .jl-lang, .jl-nav-right .jl-nav-cta, .jl-nav-right .jl-nav-signin { display: none; }
    .jl-menu-toggle { display: block; }
    .jl-header-min .jl-menu-toggle { display: none; }
    .jl-header-min .jl-nav-right .jl-nav-signin { display: inline; }
    .jl-header-min .jl-nav-right .jl-nav-cta { display: inline-block; }
    .jl-acct-band { padding: 34px 0 22px; }
    .jl-acct-band h1 { font-size: 24px; }
    .jl-mobile-menu.is-open { display: block; background: #fff; border-top: 1px solid var(--jl-line); }
    .jl-mobile-menu a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--jl-line); font-size: 15px; color: var(--jl-ink); }
    .jl-mobile-menu .jl-lang { padding: 12px 20px; border-bottom: 1px solid var(--jl-line); display: flex; gap: 14px; }
    .jl-mobile-menu .jl-lang a { display: inline; padding: 0; border: 0; }
    .jl-hero-grid, .jl-about-grid, .jl-contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .jl-hero h1 { font-size: 38px; }
    .jl-services-grid { grid-template-columns: 1fr 1fr; }
    .jl-test-grid, .jl-blog-grid { grid-template-columns: 1fr; }
    .jl-gallery-grid { grid-template-columns: 1fr 1fr; }
    .jl-gallery-grid > *:first-child { grid-row: auto; }
    .jl-foot-grid { grid-template-columns: 1fr 1fr; }
    .jl-section { padding: 68px 0; }
    .jl-inner-hero h1 { font-size: 30px; }
}
@media (max-width: 560px) {
    .jl-wrap { padding: 0 20px; }
    .jl-services-grid { grid-template-columns: 1fr; }
    .jl-trust .jl-wrap { flex-direction: column; gap: 18px; padding: 26px 20px; }
    .jl-foot-grid { grid-template-columns: 1fr; }
    .jl-hero h1 { font-size: 31px; }
    .jl-section-head h2 { font-size: 27px; }
}

/* ── Section appearance overrides (background image/video + text colors) ───
   Opt-in per section via config/home_sections.php's 'appearance' key + Admin
   → Home Page Content's Appearance form. See App\Support\SectionAppearance. */
.jl-section-bg-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.jl-section-bg-media video, .jl-section-bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jl-section-bg-media__scrim { position: absolute; inset: 0; }
.jl-section-bg-media__scrim--dark { background: linear-gradient(rgba(22,36,44,.55), rgba(22,36,44,.65)); }
.jl-section-bg-media__scrim--light { background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.55)); }