/*

LSW layer — additive over Spectrum (Tooplate 2163, free client licence).
Only adds: ghost CTA, integration strip, engagement grid.
Kit tokens (white / ink #111 / orange #FF4500 / green #00FA9A / magenta #FF00FF,
Space Grotesk) are untouched so the mockup stays faithful to the kit.

*/

/* ---- Hero secondary CTA ---- */
.hero-cta-ghost {
    display: inline-block;
    margin-top: 20px;
    width: fit-content;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    padding: 4px 2px;
    border-bottom: 3px solid var(--green);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-cta-ghost:hover {
    border-bottom-color: var(--magenta);
    color: var(--magenta);
}

/* ---- Integration strip ---- */
.strip {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 26px 0;
    background: var(--white);
}

.strip-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.strip-label {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange);
    flex: 0 0 auto;
}

.strip-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.strip-list li {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    border: 2px solid var(--ink);
    border-radius: 30px;
    padding: 7px 16px;
    transition: background 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}

.strip-list li:nth-child(3n+1):hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.strip-list li:nth-child(3n+2):hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--ink);
}

.strip-list li:nth-child(3n):hover {
    background: var(--magenta);
    border-color: var(--magenta);
    color: var(--white);
}

/* ---- Ways to engage ---- */
.engage {
    padding: 110px 0 30px;
}

.engage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.engage-card {
    border: 2px solid var(--ink);
    background: var(--white);
    padding: 32px 28px 36px;
    transition: background 0.18s ease, color 0.18s ease;
}

.engage-num {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    color: var(--orange);
    margin-bottom: 20px;
}

.engage-card h3 {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.engage-desc {
    font-size: 1rem;
    color: #333;
}

.engage-card:hover {
    background: var(--ink);
}

.engage-card:hover h3,
.engage-card:hover .engage-desc {
    color: var(--white);
}

.engage-card:hover .engage-num {
    color: var(--green);
}

/* ---- Catalog card heading size for longer product names ---- */
.product-info h3 {
    font-size: 1.1rem;
    line-height: 1.25;
}

.product-info .price {
    font-size: 0.92rem;
    font-weight: 500;
    color: #555;
    line-height: 1.4;
}

.product-card:hover .price {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Contact: the quieter route to the qualify page ---- */
.contact-alt {
    margin: 0 0 22px;
    font-size: 0.95rem;
    color: #444;
}

.contact-alt a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--green);
}

.contact-alt a:hover {
    border-bottom-color: var(--magenta);
    color: var(--magenta);
}

/* ---- Back to top (standing SOP) ---- */
.to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 50%;
    cursor: pointer;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
                background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.to-top svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background: var(--green);
    color: var(--ink);
    border-color: var(--ink);
}

.to-top:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

/* invert while it sits over the dark ORIN band */
.to-top.over-dark {
    background: var(--white);
    color: var(--ink);
    border-color: var(--ink);
}

.to-top.over-dark:hover {
    background: var(--green);
}

@media (max-width: 520px) {
    .to-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }
}

/* ---- Catalog cards now open a writeup page (the kit's .add-cart is a <button>) ---- */
.product-info .add-cart {
    display: block;
    text-align: center;
    text-decoration: none;
}

.product-info .add-cart:hover {
    background: var(--magenta);
}

.product-info h3 a {
    text-decoration: none;
    color: inherit;
}

.product-info h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A touch device has no hover, so a hover-revealed action would be unreachable. There the
   card's action sits permanently in the 64px the kit already reserves for it. */
@media (hover: none), (max-width: 900px) {
    .product-info .add-cart {
        bottom: 18px;
    }
}

/* ---- Responsive additions ---- */
@media (max-width: 900px) {
    .engage {
        padding: 70px 0 20px;
    }
    .engage-grid {
        grid-template-columns: 1fr;
    }
    .strip-inner {
        gap: 16px;
    }
    .orin {
        padding: 66px 0 70px;
    }
    .orin-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .orin-sticker-1,
    .orin-sticker-2 {
        display: none;
    }
}

/* ============================================================
   METHOD PAGE
   Structure borrowed from Tooplate 2161 "VORA Bold": numbered rows
   that open into labelled detail panels, sticky section labels, and
   heavy section rules. Rebuilt in our own tokens, so it still reads
   as this site and not as that template.
   ============================================================ */

.m-hero {
    background: var(--ink);
    color: var(--white);
    padding: 150px 0 82px;
    border-bottom: 2px solid var(--ink);
}

.m-hero .m-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 18px;
}

.m-hero h1 {
    font-size: clamp(2rem, 5.4vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    max-width: 20ch;
    margin-bottom: 22px;
}

.m-hero .m-lede {
    font-size: 1.08rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, 0.84);
    max-width: 64ch;
    margin-bottom: 26px;
}

.m-hero .svc-tag { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.m-hero .svc-cta { background: var(--green); border-color: var(--green); color: var(--ink); }
.m-hero .svc-cta-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }

/* ---------- sticky section labels (VORA's .sticky-label) ---------- */

.m-sticky {
    position: sticky;
    top: 86px;          /* measured: the fixed header is 84px once scrolled */
    z-index: 40;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 2px solid var(--ink);
    padding: 10px 0;
}

.m-sticky .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #888;
}

/* ---------- numbered rows that open into panels ---------- */

.m-sec {
    padding-bottom: 8px;
}

.m-sec__title {
    padding: 38px 0 4px;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    letter-spacing: -0.03em;
}

.m-sec__meta {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #999;
    padding-bottom: 10px;
}

.m-row {
    display: grid;
    grid-template-columns: 62px 1fr minmax(0, 300px) 26px;
    gap: 22px;
    align-items: center;
    padding: 21px 0;
    border-top: 2px solid var(--ink);
    cursor: pointer;
    user-select: none;
}

.m-sec .m-row:last-of-type {
    border-bottom: 2px solid var(--ink);
}

.m-row:hover {
    background: rgba(17, 17, 17, 0.03);
}

.m-row__num {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--orange);
}

.m-row__name {
    font-size: clamp(1.2rem, 2.6vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.m-row__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6b6b6b;
    text-align: right;
}

.m-row__arrow {
    font-size: 1.1rem;
    color: #c4c4c4;
    transition: transform 0.3s ease, color 0.3s ease;
}

.m-row:hover .m-row__arrow {
    transform: translateX(5px);
    color: var(--ink);
}

.m-row.is-open .m-row__arrow {
    transform: rotate(90deg);
    color: var(--orange);
}

.m-row:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

/* The panel: grid-template-rows animates, so there is no height maths.
   OPEN is the default state and collapsing requires html.js, which the page's
   head sets inline. So with JavaScript off every rule is readable, and with
   JavaScript on the closed ones collapse - progressive, not content hidden
   behind a script. */
.m-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 2px solid var(--ink);
}

html.js .m-panel:not(.is-open) {
    grid-template-rows: 0fr;
}

.m-panel__inner {
    overflow: hidden;
    padding: 4px 0 26px 84px;
    transition: padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .m-panel:not(.is-open) .m-panel__inner {
    padding: 0 0 0 84px;
}

/* labelled block (VORA's .sp-block) */
.m-block2 {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 4px 30px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.m-block2:last-child {
    border-bottom: 0;
}

.m-block2__label {
    font-size: 0.63rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.m-block2__title {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 5px;
}

.m-block2__text {
    color: #3a3a3a;
    line-height: 1.7;
    max-width: 76ch;
}

/* plain rows (the delivery line) reuse .m-row without a panel */
.m-row--static {
    cursor: default;
}

.m-row--static:hover {
    background: transparent;
}

/* ---------- blocks that stay as blocks ---------- */

.m-plain {
    padding: 30px 0 12px;
}

.m-plain h2 {
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}

.m-plain p {
    color: #3a3a3a;
    line-height: 1.72;
    max-width: 76ch;
    margin-bottom: 14px;
}

.m-plain h3 {
    font-size: 1.06rem;
    margin: 22px 0 6px;
}

/* ---------- section titles in the brand orange (Norm, 3 Oct 2026) ----------
   Orange on white measures 3.41:1. That clears the AA requirement for LARGE
   text (3:1) but not for small text (4.5:1), so every heading recoloured here
   is kept at large-text size: the section titles are 24px+ and bold, and the
   small "Where this shows up" head is bumped to 1.2rem/700 so it qualifies
   rather than sitting just under the line. FAQ questions and stage names stay
   ink on purpose - they are body-level headings, not section titles. */

.m-sec__title,
.m-plain h2,
.m-sec .svc-related h3 {
    color: var(--orange);
}

.m-sec .svc-related h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

@media (max-width: 900px) {
    .m-row {
        grid-template-columns: 44px 1fr 22px;
        gap: 14px;
    }
    .m-row__desc {
        display: none;
    }
    .m-panel__inner,
    html.js .m-panel:not(.is-open) .m-panel__inner {
        padding-left: 58px;
    }
    .m-block2 {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .m-sticky {
        top: 80px;      /* measured: 78px header below 900px wide */
    }
    .m-sticky .container {
        font-size: 0.6rem;
        letter-spacing: 0.16em;
    }
}

/* ============================================================
   SITE NOTES — a centred document.
   The third shape in the house: no rail, no card grid, no hero
   diagram. Small-caps section rules and a narrow measure, so a
   credits/small-print page reads as small print.
   ============================================================ */

.n-hero {
    background: var(--white);
    border-bottom: 2px solid var(--ink);
    padding: 152px 24px 46px;
    text-align: center;
}

.n-hero .n-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 16px;
}

.n-hero h1 {
    font-size: clamp(1.8rem, 4.4vw, 2.8rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    max-width: 22ch;
    margin: 0 auto 16px;
}

.n-hero .n-lede {
    max-width: 64ch;
    margin: 0 auto;
    color: #444;
    line-height: 1.66;
}

.n-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 24px;
}

.n-block {
    margin-bottom: 46px;
}

.n-block h2 {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #888;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 9px;
    margin-bottom: 18px;
}

.n-block p {
    font-size: 1.02rem;
    line-height: 1.72;
    color: #3a3a3a;
    margin-bottom: 14px;
}

.n-credits {
    list-style: none;
    margin: 0;
}

.n-credits li {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.n-credits b {
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.n-credits span {
    font-size: 0.98rem;
    line-height: 1.62;
    color: #3a3a3a;
}

.n-meta {
    font-size: 0.9rem;
    color: #666;
    border-left: 3px solid var(--green);
    padding-left: 14px;
}

@media (max-width: 700px) {
    .n-hero {
        padding: 118px 20px 34px;
    }
    .n-credits li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ---- Compact Orin strip: the top and bottom of pages ----
   Replaces the old full-height Orin band with one slim row, repeated top and bottom. The
   top strip has to clear the fixed header, which wraps to two lines at some widths, so
   --header-h is set by lsw.js from the real measured height with 104px as the CSS fallback
   - nothing depends on JavaScript. */

/* The strip stands where the hero's header clearance used to be, so its height is taken back
   out of that padding: the space above the page's first line is unchanged and no hero can
   end up tucked under the fixed header. */

/* ---- Compact Orin strip: the top and bottom of pages ----
   Replaces the old full-height Orin band with one slim row, repeated top and bottom. The
   top strip has to clear the fixed header, which wraps to two lines at some widths, so
   --header-h is set by lsw.js from the real measured height with 104px as the CSS fallback
   - nothing depends on JavaScript. */
.orinbar {
    background: var(--ink);
    color: var(--white);
    border-bottom: 2px solid var(--orange);
}
.orinbar--top { margin-top: var(--header-h, 104px); }
.orinbar--bottom { border-bottom: 0; border-top: 2px solid var(--orange); }

.orinbar-inner {
    max-width: 1120px; margin: 0 auto;
    padding: 10px 28px;
    display: flex; align-items: center; gap: 14px;
}
.orinbar-mark { display: flex; flex: none; }
.orinbar-mark svg { width: 26px; height: 26px; display: block; }
.orinbar-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; flex: none; }
.orinbar-line {
    font-size: 0.86rem; line-height: 1.3; color: rgba(255, 255, 255, 0.7);
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orinbar-status {
    display: flex; align-items: center; gap: 7px; flex: none;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--green);
}
.orinbar-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 250, 154, 0.18);
}
.orinbar-cta {
    flex: none; text-decoration: none;
    font-size: 0.82rem; font-weight: 600;
    color: var(--ink); background: var(--green);
    border: 2px solid var(--green); border-radius: 999px;
    padding: 5px 14px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.orinbar-cta:hover { background: var(--white); border-color: var(--white); }

/* Responsive rules for the strip - and they MUST sit after the base rules above. A media query
   adds no specificity, so the same selector written EARLIER in the file loses to the later base
   rule: written above `.orinbar-status`/`.orinbar-inner`, both of these were silently dead, and
   a 400px phone measured 521px wide because the status line and the CTA could not fit. */
@media (max-width: 900px) { .orinbar-line { display: none; } }
@media (max-width: 640px) {
    .orinbar-inner { padding: 9px 18px; gap: 10px; }
    .orinbar-status { display: none; }
}

/* The strip stands where the hero's header clearance used to be, so its height is taken back
   out of that padding: the space above the page's first line is unchanged and no hero can end
   up tucked under the fixed header. */
.orinbar--top + .hero     { padding-top: max(28px, calc(70px  - var(--header-h, 104px))); }
.orinbar--top + .m-hero   { padding-top: max(28px, calc(150px - var(--header-h, 104px))); }
.orinbar--top + .mag-hero { padding-top: max(28px, calc(132px - var(--header-h, 104px))); }
.orinbar--top + .n-hero   { padding-top: max(28px, calc(152px - var(--header-h, 104px))); }
.orinbar--top + .svc-hero { padding-top: max(26px, calc(130px - var(--header-h, 104px))); }
.orinbar--top + .dl-hero  { padding-top: max(28px, calc(132px - var(--header-h, 104px))); }
.orinbar--top + main.insights .i-mast { padding-top: max(22px, calc(118px - var(--header-h, 104px))); }
.orinbar--top + main.insights .i-hero { padding-top: max(22px, calc(56px  - var(--header-h, 104px))); }
.orinbar--top + main.cat .cat-hero    { padding-top: max(26px, calc(122px - var(--header-h, 104px))); }

/* The home page's catalogue section still scrolls in place; this is its one link OUT to the
   catalogue page, so the section is a summary rather than a dead end. */
.catalog-more { margin: 34px 0 0; text-align: right; }
.catalog-more a {
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    border-bottom: 3px solid var(--green); padding-bottom: 3px;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.catalog-more a:hover { border-bottom-color: var(--magenta); color: var(--magenta); }
@media (max-width: 900px) { .catalog-more { text-align: left; } }

/* ---- Document top -------------------------------------------------------
   The fixed header is out of flow, so every page clears it with padding; the Orin strip sits in
   flow instead, with `margin-top: var(--header-h)`. With no border, padding or BFC between them
   that margin COLLAPSES onto <body> and pushes body's box ~82px down the document - visually
   identical, but it moves the document's own top to 82, so `#top` (= body) landed there and the
   back-to-top button stopped 82px short. flow-root contains the margin, so body starts at 0.
   (`overflow-x: hidden` cannot do this job: on <body> it propagates to the viewport.) */
body { display: flow-root; }