/* Shared layout for the /categories/ and /services/ landing pages.
   One stylesheet for all thirteen rather than a copy inlined into each. */

.lp-hero { padding:clamp(8rem,13vw,11rem) 8% clamp(3.5rem,6vw,5rem); background:var(--c-band); border-bottom:1px solid var(--c-line); }
.lp-wrap { max-width:1100px; margin:0 auto; }
.lp-crumb { margin:0 0 1.25rem; color:var(--c-sub); font:500 .74rem 'IBM Plex Mono',monospace; }
.lp-crumb a { color:var(--c-accent); text-decoration:none; }
.lp-crumb a:hover { text-decoration:underline; text-underline-offset:3px; }
.eyebrow { margin:0 0 1.25rem; color:var(--c-accent); font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase; }
.lp-hero h1 { max-width:940px; margin:0; font-size:clamp(2.3rem,4.8vw,4rem) !important; line-height:1.04 !important; }
.lp-hero .lead { max-width:760px; margin:1.75rem 0 0; color:var(--c-sub); font-size:1.1rem; line-height:1.8; }
.lp-stats { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.25rem; }
.lp-stats span { padding:.5rem .95rem; border:1px solid var(--c-line-mid); border-radius:999px; background:var(--c-surface); color:var(--c-sub); font:500 .74rem 'IBM Plex Mono',monospace; }

.lp-section { padding:clamp(3rem,6vw,4.5rem) 8%; background:var(--c-surface); }
.lp-section--muted { background:var(--c-band); }
.lp-section h2 { margin:0 0 1.25rem; font-size:clamp(1.7rem,3.4vw,2.6rem) !important; }
.lp-section h3 { margin:2rem 0 .85rem; font-size:1.15rem !important; }
/* :not([class]) so this stays a rule about section prose. Unqualified, it
   out-specified every classed paragraph below it in this same file -- the
   revision line under an article and the constraint note on a project page
   both asked for a smaller size and were quietly given 1rem instead. */
.lp-section p:not([class]), .lp-section li:not([class]) { color:var(--c-sub); font-size:1.05rem; line-height:1.8; }
.lp-section p, .lp-section li { color:var(--c-sub); }
.lp-section p { margin:0 0 1.25rem; max-width:46rem; }
.lp-section p:last-child { margin-bottom:0; }
.lp-section ul { margin:0; padding-left:1.35rem; max-width:820px; }
.lp-section li { margin-bottom:.6rem; }
.lp-section li:last-child { margin-bottom:0; }
.lp-section strong { color:var(--c-ink); font-weight:600; }

.lp-note { margin:0 0 1.75rem; padding:1.35rem 1.6rem; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-surface); }
.lp-section--muted .lp-note { background:var(--c-surface); }
.lp-note p { margin:0; }

/* Comparison table. Scrolls inside its own container so a wide spec set never
   makes the page itself scroll sideways on a phone. */
.lp-table-scroll { margin-top:2rem; overflow-x:auto; border:1px solid var(--c-line); background:var(--c-surface); }
.lp-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.lp-table caption { padding:1rem 1.25rem; text-align:left; color:var(--c-sub); font:500 .7rem 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--c-line); }
.lp-table th, .lp-table td { padding:.85rem 1.25rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-line-soft); }
.lp-table thead th { position:sticky; top:0; background:var(--c-band); color:var(--c-ink); font:600 .72rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.lp-table tbody tr:last-child td { border-bottom:0; }
.lp-table tbody tr:hover { background:var(--c-surface-2); }
.lp-table td { color:var(--c-sub); }
.lp-table td:first-child { min-width:230px; }
.lp-table a { color:var(--c-accent); font-weight:600; text-decoration:none; }
.lp-table a:hover { text-decoration:underline; text-underline-offset:2px; }
/* The em dash standing for "not applicable" in a spec table. At #b0b0b5
   it was 2.16:1 -- a cell a reader with low vision cannot tell from an
   empty one, which is the opposite of what it is for. */
.lp-table .lp-na { color:var(--sub); }

/* What the table does not claim: the sentence under a comparison saying
   which cells are catalogue-verified and which have to be read off the
   manufacturer's own specification. */
/* The manufacturer page behind a claim, printed beside the claim. */
.lp-cite { display:block; margin-top:1.4rem; max-width:820px; color:var(--c-sub); font:500 .82rem 'IBM Plex Mono',ui-monospace,monospace; line-height:1.7; }
.lp-cite a { color:var(--c-accent); font-weight:600; text-decoration:none; }
.lp-cite a:hover { text-decoration:underline; text-underline-offset:2px; }
.lp-section code { padding:.1em .35em; border-radius:4px; background:var(--c-surface-2); font:500 .9em 'IBM Plex Mono',ui-monospace,monospace; }

.lp-table-note { margin-top:1rem !important; max-width:820px; color:var(--c-sub) !important; font-size:.9rem !important; }

/* ---- Article diagrams ----
   Inline SVG, drawn in currentColor so one drawing is legible in both
   themes without a second asset or a prefers-color-scheme rule. */
.lp-figure { margin:2rem 0 0; }
.lp-figure svg { display:block; width:100%; height:auto; max-width:820px; color:var(--c-ink); }
.lp-figure figcaption { margin-top:1rem; max-width:820px; color:var(--c-sub); font-size:.9rem; line-height:1.7; }
.lp-dia-box { fill:none; stroke:currentColor; stroke-width:1.25; opacity:.55; }
.lp-dia-box--accent { stroke:var(--c-accent); opacity:1; }
.lp-dia-line { stroke:currentColor; stroke-width:1.25; fill:none; opacity:.45; }
.lp-dia-line--accent { stroke:var(--c-accent); opacity:1; }
.lp-dia-arrow { fill:currentColor; opacity:.45; }
.lp-dia-arrow--accent { fill:var(--c-accent); opacity:1; }
.lp-dia-title { font:600 13px 'IBM Plex Mono',ui-monospace,monospace; fill:currentColor; }
.lp-dia-text { font:400 12.5px Inter,system-ui,sans-serif; fill:currentColor; opacity:.72; }
.lp-dia-tag { font:600 10.5px 'IBM Plex Mono',ui-monospace,monospace; fill:var(--c-accent); letter-spacing:.08em; }

.lp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.lp-card { padding:1.5rem; border:1px solid var(--c-line); border-radius:16px; background:var(--c-surface); }
.lp-section--muted .lp-card { background:var(--c-surface); }
.lp-card h3 { margin:0 0 .5rem; font-size:1.05rem !important; }
.lp-card p { margin:0; font-size:.95rem; }
.lp-card a { color:var(--c-accent); font-weight:600; text-decoration:none; }
.lp-card a:hover { text-decoration:underline; text-underline-offset:2px; }
/* On the index pages the card *is* the link, so it must not inherit the
   browser's default link colour and underline for its whole body of text. */
a.lp-card { display:block; color:inherit; text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
a.lp-card:hover { border-color:var(--c-accent); transform:translateY(-3px); }
a.lp-card h3 { color:var(--c-ink); }
a.lp-card p { color:var(--c-sub); }
.lp-card__meta { display:block; margin-top:.9rem; color:var(--c-accent); font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }

.lp-links { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.lp-links a { padding:.55rem 1rem; border:1px solid var(--c-line-mid); border-radius:999px; background:var(--c-surface); color:var(--c-accent); font:500 .78rem 'IBM Plex Mono',monospace; text-decoration:none; }
.lp-links a:hover { border-color:var(--c-accent); }

.lp-quote { padding:clamp(3.5rem,7vw,6rem) 8%; background:var(--c-inkband); color:#fff; }
.lp-quote .eyebrow { color:#a7c46a; }
.lp-quote h2 { margin:0 0 1.25rem; color:#fff !important; font-size:clamp(1.8rem,3.6vw,2.8rem) !important; }
.lp-quote p { max-width:660px; margin:0 0 1.5rem; color:#c7c7c9; line-height:1.8; }
.lp-quote ul { max-width:660px; margin:0 0 2rem; padding-left:1.35rem; color:#c7c7c9; line-height:1.8; }
.lp-quote li { margin-bottom:.4rem; }
.quote-box { max-width:660px; padding:2.25rem; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.06); }
.quote-box dt { margin:0 0 .6rem; color:#a7c46a; font:500 .7rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.quote-box dd { margin:0 0 1.5rem; }
.quote-box dd:last-child { margin-bottom:0; }
/* anywhere, not break-all: break-all wrapped a long address inside the
   domain ("...automation.co / m"). The <wbr> in the markup offers the
   break after the @ that a reader expects, and this only breaks a word
   when even that will not fit. */
.quote-box a { color:#fff; font-family:'Space Grotesk',Arial,sans-serif; font-size:clamp(1.05rem,3.4vw,1.45rem); font-weight:500; letter-spacing:-.02em; text-decoration:none; overflow-wrap:anywhere; border-bottom:1px solid rgba(255,255,255,.35); transition:color .2s,border-color .2s; }
.quote-box a:hover { color:#a7c46a; border-color:#a7c46a; }
.quote-box .quote-tel { font-size:1.05rem; }
.lp-back { display:inline-block; margin-top:2.5rem; color:#a7c46a; font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.lp-back:hover { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:768px) {
    .lp-hero,.lp-section,.lp-quote { padding-left:20px; padding-right:20px; }
    .lp-hero { padding-top:7.5rem; }
    .quote-box { padding:1.75rem 1.25rem; }
    .lp-note { padding:1.15rem 1.25rem; }
    .lp-table th, .lp-table td { padding:.7rem .9rem; }
}

/* ---- Generated technical articles: provenance line and sources ---- */
.article-meta { margin:1.5rem 0 0; color:var(--c-sub); font:500 .78rem 'IBM Plex Mono',monospace; }
.article-meta__sep { margin:0 .55rem; opacity:.55; }
.article-sources { margin:0; padding-left:1.3rem; max-width:820px; color:var(--c-sub); font-size:.92rem; line-height:1.75; }
.article-sources li { margin-bottom:.6rem; }
.article-sources li:last-child { margin-bottom:0; }
.article-revised { margin:1.75rem 0 0 !important; color:var(--c-sub) !important; font-size:.85rem; }
.article-revised a { color:var(--c-accent); font-weight:600; }

/* ---- Project pages ---- */
.proj-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; margin:2.5rem 0 0; padding:1px; border-radius:14px; background:var(--c-line); overflow:hidden; }
.proj-fact { padding:1.15rem 1.35rem; background:var(--c-surface); }
.proj-fact dt { color:var(--c-sub); font:500 .66rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.proj-fact dd { margin:.45rem 0 0; color:var(--c-ink); font-size:.98rem; line-height:1.5; }
.proj-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-top:1.5rem; }
.proj-shot { width:100%; height:auto; max-height:32rem; object-fit:contain; border-radius:16px; background:var(--mist); }
.proj-constraint { margin-top:1.25rem; padding:1rem 1.25rem; border-left:3px solid var(--c-accent); border-radius:0 10px 10px 0; background:var(--c-band); font-size:.98rem; line-height:1.7; }
.proj-confidential { margin-top:1rem; color:var(--c-sub); font:500 .78rem 'IBM Plex Mono',monospace; letter-spacing:.03em; }

/* --- Call to action -------------------------------------------------------
   These replaced a mailto: link whose body carried a second copy of the
   enquiry form. Everything here is a link to /contact.html, which is the
   site's only quotation form. */
.lp-cta__row { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin:2rem 0 0; }
.lp-cta__button { display:inline-block; padding:1rem 1.75rem; background:var(--c-accent-fill); color:var(--c-on-accent) !important; font:600 .78rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1px solid var(--c-accent); transition:background .2s,border-color .2s; }
.lp-cta__button:hover { background:var(--c-accent-fill-hover); border-color:var(--c-accent-deep); }
.lp-cta__second { display:inline-block; padding:1rem 1.75rem; color:var(--c-ink); font:600 .78rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1px solid var(--c-line-hard); transition:border-color .2s,color .2s; }
.lp-cta__second:hover { border-color:var(--c-accent); color:var(--c-accent); }
.lp-cta__alt { margin:1.1rem 0 0 !important; font-size:.92rem; }
/* On the dark closing block the secondary button needs its own borders. */
.lp-quote .lp-cta__second { color:#fff !important; border-color:rgba(255,255,255,.35); }
.lp-quote .lp-cta__second:hover { border-color:#a7c46a; color:#a7c46a !important; }
.lp-quote .lp-cta__alt { color:#c7c7c9; }
.lp-quote .lp-cta__alt a { color:#a7c46a; }
/* The mid-page call to action is a rule with two buttons on it, not another
   full section: it interrupts the reading as little as possible. */
.lp-section--cta { padding-top:0; padding-bottom:0; }
.lp-section--cta .lp-cta__row { margin:0; padding:2.25rem 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }

/* --- Solution pages ------------------------------------------------------- */
.lp-steps { counter-reset:step; margin:2.5rem 0 0; padding:0; list-style:none; }
.lp-steps li { counter-increment:step; position:relative; margin:0 0 1.75rem; padding-left:3.25rem; }
.lp-steps li::before { content:counter(step); position:absolute; left:0; top:.1rem; width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--c-line-firm); border-radius:50%; color:var(--c-accent); font:600 .8rem 'IBM Plex Mono',monospace; }
.lp-steps h3 { margin:0 0 .4rem; font-size:1.2rem !important; }
.lp-steps p { margin:0; color:var(--c-sub); line-height:1.8; }

.lp-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.lp-group { padding:1.75rem; border:1px solid var(--c-line); background:var(--c-surface); }
.lp-group h3 { margin:0 0 .6rem; font-size:1.25rem !important; }
.lp-group h3 a { color:var(--c-ink); text-decoration:none; border-bottom:2px solid var(--c-accent-rule); }
.lp-group h3 a:hover { color:var(--c-accent); border-color:var(--c-accent); }
.lp-group p { margin:0 0 1.1rem; color:var(--c-sub); font-size:.95rem; line-height:1.75; }
.lp-group__links { display:flex; flex-wrap:wrap; gap:.5rem; }
.lp-group__links a { padding:.35rem .7rem; border:1px solid var(--c-line-mid); color:var(--c-accent-deep); font:500 .74rem 'IBM Plex Mono',monospace; text-decoration:none; }
.lp-group__links a:hover { border-color:var(--c-accent); background:var(--c-tint-3); }

.lp-packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.lp-pack { padding:1.75rem; border:1px solid var(--c-line); background:var(--c-surface); }
.lp-pack h3 { margin:0 0 .25rem; font-size:1.3rem !important; }
.lp-pack__sub { margin:0 0 1.25rem !important; color:var(--c-accent); font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.lp-pack ul { margin:0; padding-left:1.15rem; color:var(--c-sub); font-size:.95rem; line-height:1.8; }
.lp-pack li { margin-bottom:.5rem; }

.lp-crits { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.75rem 2.5rem; margin-top:2.5rem; }
.lp-crit h3 { margin:0 0 .5rem; font-size:1.15rem !important; }
.lp-crit p { margin:0; color:var(--c-sub); line-height:1.8; }

.lp-check { margin:2rem 0 0; padding:0; list-style:none; max-width:760px; }
.lp-check li { position:relative; padding:.75rem 0 .75rem 2rem; border-bottom:1px solid var(--c-line-thin); color:var(--c-ink); line-height:1.7; }
.lp-check li::before { content:"—"; position:absolute; left:0; color:var(--c-accent); font-weight:600; }

.lp-faqs { margin-top:2.5rem; max-width:820px; }
.lp-faq { border-bottom:1px solid var(--c-line); }
.lp-faq summary { padding:1.15rem 2rem 1.15rem 0; position:relative; cursor:pointer; font-family:'Space Grotesk',Arial,sans-serif; font-size:1.1rem; font-weight:500; letter-spacing:-.02em; list-style:none; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; position:absolute; right:.25rem; top:1rem; color:var(--c-accent); font-size:1.35rem; line-height:1; }
.lp-faq[open] summary::after { content:"\2212"; }
.lp-faq summary:hover { color:var(--c-accent); }
.lp-faq summary:focus-visible { outline:2px solid var(--c-accent); outline-offset:3px; }
.lp-faq div { padding:0 2rem 1.35rem 0; }
.lp-faq p { margin:0; color:var(--c-sub); line-height:1.8; }
.lp-faq a { color:var(--c-accent-deep); }

@media (max-width:768px) {
    .lp-cta__button,.lp-cta__second { width:100%; text-align:center; }
    .lp-steps li { padding-left:2.75rem; }
}