/* =========================================================================
   Landingspagina (template-landing.php) - shared by all landing pages.
   Chrome (.hdr/.brand/.ftr/.btn) is global in style.css; everything else is
   scoped under the .at-landing body class.

   The design-system block at the top (typography / head-band / crumbs / ph /
   band-dark / cta-band / btn-light / btn-outline) mirrors the other warm
   design pages - see page-werkwijze.css. It is repeated here for the same
   reason it is repeated there: those globals are generic and must be
   overridden per page. Because ONE template serves every landing page, this
   file is written once and every landing page inherits it.

   Prose styling deliberately mirrors .at-article .prose (single.css) so a
   long-form landing block reads exactly like a blog article body.
   ========================================================================= */

body.at-landing {
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Typography (overrides the generic global .h1/.h2/.h3/.eyebrow)
   ------------------------------------------------------------------------- */

.at-landing .h1 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.98;
    font-size: clamp(40px, 5vw, 60px);
    margin: 0;
}
.at-landing .h2 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(26px, 2.4vw, 34px);
    color: var(--ink);
    margin: 0;
}
.at-landing .eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.at-landing .eyebrow-light {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Sections + page-only buttons
   ------------------------------------------------------------------------- */

.at-landing .sec        { padding: 104px 0; }
.at-landing .sec--tight { padding: 0 0 104px; }

.at-landing .btn-light {
    background: #fff;
    color: var(--ink) !important;
    border-color: #fff;
}
.at-landing .btn-light:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
}
.at-landing .btn-outline {
    background: transparent;
    color: #fff !important;
    border-color: #fff;
}
.at-landing .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.at-landing .head-band { background: var(--accent); color: #fff; }
.at-landing .head-band .h1 { color: #fff; }
.at-landing .head-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: end;
}
.at-landing .hero-intro {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 540px;
}
.at-landing .crumbs {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.at-landing .crumbs a { text-decoration: none; color: rgba(255, 255, 255, 0.7); }
.at-landing .crumbs a:hover { color: #fff; }

.at-landing .points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.at-landing .point {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
}
.at-landing .point-c {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   Photo placeholder - the theme's striped fallback, used when a text section
   has no photo and the page has no default either. Same treatment as
   page-werkwijze.css so a photo-less landing page still looks intentional.
   ------------------------------------------------------------------------- */

.at-landing .ph {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: repeating-linear-gradient(135deg, #E7E1D4 0 16px, #DDD6C6 16px 32px);
    border: 1px solid var(--line);
    overflow: hidden;
}
.at-landing .ph-tag {
    margin: 14px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.13em;
    color: #7C7565;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Stats bar
   ------------------------------------------------------------------------- */

.at-landing .statband {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}
/* auto-fit so 3 or 5 cijfers stay evenly spread, not just the default 4. */
.at-landing .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.at-landing .stat {
    padding: 34px 32px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.at-landing .stat:first-child { padding-left: 0; border-left: none; }
.at-landing .stat-v {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--accent);
}
.at-landing .stat-l {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Sticky section bar - sits directly under the site header, names the section
   you are in, and opens the full list as a full-width dropdown.
   The header is a constant 78px tall + 1px border at every breakpoint.
   ------------------------------------------------------------------------- */

.at-landing {
    --hdr-h:  79px;
    --lbar-h: 54px;
}

.at-landing .lbar {
    position: sticky;
    top: var(--hdr-h);
    z-index: 30; /* under .hdr (50), over the page */
    background: rgba(244, 241, 234, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.at-landing .lbar-in {
    height: var(--lbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.at-landing .lbar-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0; /* lets the long title truncate instead of pushing the count out */
    padding: 6px 0;
    cursor: pointer;
    text-align: left;
}
.at-landing .lbar-label {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.at-landing .lbar-label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-left: 14px;
    background: var(--line);
    vertical-align: -2px;
}
.at-landing .lbar-current {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.at-landing .lbar-btn:hover .lbar-current { color: var(--accent); }

/* Caret drawn from a rotated border - no icon font. */
.at-landing .lbar-caret {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--duration-base) var(--ease);
}
.at-landing .lbar-btn[aria-expanded="true"] .lbar-caret {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.at-landing .lbar-count {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.at-landing .lbar-count [data-lbar-pos] { color: var(--accent); }

/* Reading progress - a hairline across the foot of the bar. */
.at-landing .lbar-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
}
.at-landing .lbar-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: width 120ms linear;
}

/* Dropdown - mirrors the header megamenu panel. */
.at-landing .lbar-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 44px -26px rgba(26, 28, 30, 0.4);
    z-index: 40;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}
.at-landing .lbar-panel[hidden] { display: none; }

.at-landing .lbar-list {
    list-style: none;
    margin: 0;
    padding: 14px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 40px;
}
.at-landing .lbar-list a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 14px;
    padding: 12px 12px 12px 10px;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}
.at-landing .lbar-list a:hover { background: var(--paper-2); border-left-color: var(--line); }
.at-landing .lbar-n {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--accent);
}
.at-landing .lbar-t {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--ink);
}
/* The section you're currently in. */
.at-landing .lbar-list a.is-active {
    background: var(--paper-2);
    border-left-color: var(--accent);
}
.at-landing .lbar-list a.is-active .lbar-t { color: var(--accent); }

/* -------------------------------------------------------------------------
   Content sections - every block is its own band, so the page reads
   section-by-section instead of as one long column of prose.
   ------------------------------------------------------------------------- */

.at-landing .lsec {
    padding: 96px 0;
    /* Jumped-to sections must clear BOTH sticky bars (header + section bar). */
    scroll-margin-top: calc(var(--hdr-h) + var(--lbar-h) + 12px);
}
.at-landing .lsec--paper { background: var(--paper); }
.at-landing .lsec--alt   { background: var(--paper-2); }
.at-landing .lsec--dark  { background: var(--ink); }
.at-landing .lsec--cta   { background: var(--accent); color: #fff; padding: 84px 0; }

/* Two neighbouring bands of the same colour would read as one long section;
   a hairline keeps the rhythm without inventing a colour change. */
.at-landing .lsec--paper + .lsec--paper,
.at-landing .lsec--alt + .lsec--alt { border-top: 1px solid var(--line); }

.at-landing .lsec--dark .h2,
.at-landing .lsec--dark .prose,
.at-landing .lsec--dark .lintro { color: var(--paper); }
.at-landing .lsec--dark .prose strong { color: #fff; }
.at-landing .lsec--dark .prose a { color: #fff; }
.at-landing .lsec--dark .lcard { border-color: #33363A; }
.at-landing .lsec--dark .lcard-t { color: #fff; }
.at-landing .lsec--dark .lcard-d { color: #C2BCAF; }

.at-landing .lhead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin-bottom: 44px;
}
.at-landing .lintro { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

/* Text section ------------------------------------------------------------ */

.at-landing .ltext .h2 { margin-bottom: 22px; }
.at-landing .ltext .eyebrow { display: block; margin-bottom: 14px; }

/* Big section number, with the accent rule that ties it to the heading,
   the same anchor the Werkwijze step flow uses. */
.at-landing .lnum {
    position: relative;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 56px;
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--accent);
    margin-bottom: 20px;
    padding-bottom: 18px;
}
.at-landing .lnum::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--accent);
    opacity: 0.35;
}
.at-landing .lsec--dark .lnum { color: var(--accent); }

.at-landing .ltext--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
/* Text first in the DOM (it is what matters); the modifier moves the image. */
.at-landing .ltext--split .ltext-img     { order: -1; }
.at-landing .ltext--img-right .ltext-img { order: 1; }

.at-landing .ltext-img {
    position: relative;
    align-self: stretch;
    min-height: 380px;
    margin: 0;
    background-color: var(--paper-2);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
}

/* A thin accent edge on the side the photo faces the text - a small piece of
   craft that keeps the zig-zag from reading as two loose columns. */
.at-landing .ltext--split .ltext-img::before {
    content: '';
    position: absolute;
    top: 22px;
    bottom: 22px;
    right: -1px;
    width: 3px;
    background: var(--accent);
}
.at-landing .ltext--img-right .ltext-img::before { right: auto; left: -1px; }

/* Caption sits on the photo, in the same tag style the placeholders use. */
.at-landing .ltext-img .ph-tag {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Cards section ----------------------------------------------------------- */

.at-landing .lcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.at-landing .lcard {
    background: var(--paper);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.at-landing .lsec--alt .lcard  { background: var(--paper-2); }
.at-landing .lsec--dark .lcards { background: #33363A; border-color: #33363A; }
.at-landing .lsec--dark .lcard  { background: var(--ink); }
.at-landing .lcard-n {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: var(--accent);
}
.at-landing .lcard-t {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ink);
}
.at-landing .lcard-d { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Highlight section ------------------------------------------------------- */

.at-landing .lhi {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.55);
    padding: 44px 48px;
    max-width: 900px;
}
.at-landing .lsec--dark .lhi {
    background: rgba(255, 255, 255, 0.04);
    border-color: #33363A;
    border-left-color: var(--accent);
}
.at-landing .lhi .eyebrow { display: block; margin-bottom: 12px; }
.at-landing .lhi .h2 { margin-bottom: 20px; }

/* Inline CTA band --------------------------------------------------------- */

.at-landing .ctablock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
.at-landing .lsec--cta .h2 { color: #fff; max-width: 640px; }
.at-landing .ctablock-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Long-form body copy - mirrors .at-article .prose (single.css). */
.at-landing .prose {
    font-size: 17.5px;
    line-height: 1.78;
    color: #33363A;
    max-width: 72ch;
}
.at-landing .ltext--split .prose { max-width: none; }
.at-landing .lhi .prose { max-width: none; }
.at-landing .prose > * + * { margin-top: 22px; }
.at-landing .prose h3 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 38px;
}
.at-landing .prose h4 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    margin-top: 30px;
}
.at-landing .prose strong { font-weight: 600; color: var(--ink); }
.at-landing .prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.at-landing .prose a:hover { color: var(--accent-hover); }
.at-landing .prose ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.at-landing .prose ul li {
    position: relative;
    padding-left: 30px;
    font-size: 16.5px;
    line-height: 1.65;
}
.at-landing .prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 11px;
    height: 11px;
    background: var(--accent);
}
.at-landing .prose ol { padding-left: 1.4rem; margin-top: 20px; }
.at-landing .prose ol li { font-size: 16.5px; line-height: 1.65; }
.at-landing .prose ol li + li { margin-top: 10px; }
.at-landing .prose blockquote {
    padding-left: 26px;
    border-left: 3px solid var(--accent);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: var(--ink);
}
.at-landing .prose hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin-top: 34px;
}
.at-landing .prose img { border: 1px solid var(--line); }
.at-landing .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
}
.at-landing .prose th,
.at-landing .prose td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
}
.at-landing .prose th {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    background: var(--paper-2);
}

/* -------------------------------------------------------------------------
   USP band (dark)
   ------------------------------------------------------------------------- */

.at-landing .band-dark { background: var(--ink); color: var(--paper); }
.at-landing .band-dark .h2 { color: #fff; }
.at-landing .usps { display: grid; grid-template-columns: repeat(4, 1fr); }
.at-landing .usp {
    padding: 0 32px;
    border-left: 1px solid #33363A;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.at-landing .usp:first-child { padding-left: 0; border-left: none; }
.at-landing .usp-n {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--accent);
}
.at-landing .usp-t {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}
.at-landing .usp-d { font-size: 14.5px; color: #C2BCAF; line-height: 1.6; }

/* -------------------------------------------------------------------------
   Customer quote
   ------------------------------------------------------------------------- */

.at-landing .quote {
    margin: 0;
    padding: 44px 48px;
    background: var(--paper-2);
    border-left: 3px solid var(--accent);
    max-width: 860px;
}
.at-landing .quote-q {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.at-landing .quote-a {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.at-landing .quote-name { font-weight: 500; color: var(--ink); }
.at-landing .quote-place::before { content: '· '; }

/* -------------------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------------------- */

.at-landing .faq-list { border-top: 1px solid var(--line); max-width: 860px; }
.at-landing .faq { border-bottom: 1px solid var(--line); }
.at-landing .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 2px;
    text-align: left;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    cursor: pointer;
}
.at-landing .faq-q:hover { color: var(--accent); }

/* Plus/minus built from two bars so no icon font is needed. */
.at-landing .faq-i {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.at-landing .faq-i::before,
.at-landing .faq-i::after {
    content: '';
    position: absolute;
    background: var(--accent);
    transition: transform var(--duration-base) var(--ease);
}
.at-landing .faq-i::before { top: 7px; left: 0; width: 16px; height: 2px; }
.at-landing .faq-i::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.at-landing .faq.open .faq-i::after { transform: scaleY(0); }

.at-landing .faq-a { display: none; padding: 0 2px 26px; max-width: 68ch; }
.at-landing .faq.open .faq-a { display: block; }
.at-landing .faq-a p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.at-landing .faq-a > * + * { margin-top: 14px; }
.at-landing .faq-a a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.at-landing .faq-a ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.at-landing .faq-a ul li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.at-landing .faq-a ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 9px;
    height: 9px;
    background: var(--accent);
}

/* -------------------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------------------- */

.at-landing .cta-band { background: var(--accent); color: #fff; }
.at-landing .cta-band .h2 { color: #fff; }
.at-landing .cta-p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 520px;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .at-landing .sec        { padding: 64px 0; }
    .at-landing .sec--tight { padding: 0 0 64px; }
    .at-landing .head-grid  { grid-template-columns: 1fr; gap: 40px; align-items: start; }
    .at-landing .stats      { grid-template-columns: 1fr 1fr; }
    .at-landing .stat       { padding: 26px 24px; }
    .at-landing .stat:nth-child(odd) { padding-left: 0; border-left: none; }
    .at-landing .lbar-list  { grid-template-columns: 1fr; gap: 0; }
    .at-landing .lbar-label { display: none; } /* the title alone carries it on narrow screens */
    .at-landing .lsec       { padding: 60px 0; }
    .at-landing .lsec--cta  { padding: 56px 0; }
    .at-landing .lhead      { margin-bottom: 32px; }
    .at-landing .lhi        { padding: 30px 26px; }
    .at-landing .ltext--split { grid-template-columns: 1fr; gap: 28px; }
    /* On one column the image always sits above the text, whatever the side. */
    .at-landing .ltext--split .ltext-img,
    .at-landing .ltext--img-right .ltext-img { order: -1; min-height: 240px; }
    .at-landing .usps       { grid-template-columns: 1fr 1fr; gap: 32px; }
    .at-landing .usp        { padding: 0; border-left: none; }
    .at-landing .quote      { padding: 32px 28px; }
}

@media (max-width: 540px) {
    .at-landing .sec        { padding: 56px 0; }
    .at-landing .sec--tight { padding: 0 0 56px; }
    .at-landing .lsec       { padding: 52px 0; }
    .at-landing .stats      { grid-template-columns: 1fr; }
    .at-landing .stat       { padding: 22px 0; border-left: none; }
    .at-landing .usps       { grid-template-columns: 1fr; gap: 28px; }
    .at-landing .prose      { font-size: 16.5px; }
    .at-landing .faq-q      { font-size: 16.5px; }
}