/* /next7: the short homepage, the tool pages, the switching move plan and one main button per section.
   Desktop renders on the shared 1440px canvas; at 900px and below the dev mobile layout applies. */
:root { --n7-ink:#073f3c; --n7-navy:#08234d; --n7-green:#007b67; --n7-mint:#8fe0c6; --n7-line:#d6e5df; --n7-paper:#f1f8f5; --n7-text:#0b2f2a; --n7-muted:#3c5263; --n7-amber:#f2b33d; }

/* Trade switch: anything marked for another trade is hidden, so each element keeps its own display. */
.n7-home:not([data-trade="water"]) [data-trade-only="water"], .n7-home:not([data-trade="fgas"]) [data-trade-only="fgas"],
.n7-home:not([data-trade="fire"]) [data-trade-only="fire"], .n7-home:not([data-trade="electrical"]) [data-trade-only="electrical"] { display:none !important; }

/* Shared furniture: a slightly tighter rhythm keeps the page to about five desktop screens. */
.n7-home { --staging-section-gap:48px; }
.n7-home .n2-heading { max-width:none; }
.n7-centred { margin-inline:auto !important; text-align:center; }
.n7-home :is(.n7-prove-copy, .n7-ai-copy) h2 { margin:0 0 18px; color:var(--n2-ink); font:600 46px/1.1 'Work Sans',sans-serif; letter-spacing:-.035em; }
.n7-home :is(.n7-prove-copy, .n7-ai-copy) h2 span { color:var(--n7-green); }
.n7-btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 26px; border-radius:.7rem; background:var(--n7-green); box-shadow:0 1rem 2rem rgba(2,137,116,.2); color:#fff !important; font:600 16px/1.2 'Work Sans',sans-serif; text-decoration:none !important; transition:background .2s; }
.n7-btn:hover { background:#00634f; }
.n7-btn:focus-visible { outline:3px solid var(--n7-mint); outline-offset:3px; }
.n7-btn.is-mint { background:var(--n7-mint); box-shadow:none; color:var(--n7-ink) !important; }
.n7-btn.is-mint:hover { background:#b5eedb; }
.n7-quiet, .n7-quiet-dark { display:inline-flex; align-items:center; gap:8px; font:600 16px/1.3 'Work Sans',sans-serif; text-decoration:underline !important; text-underline-offset:5px; text-decoration-thickness:2px !important; }
.n7-quiet { color:#fff !important; text-decoration-color:var(--n7-mint) !important; }
.n7-quiet-dark { color:var(--n7-green) !important; text-decoration-color:#9fd8c6 !important; }
.n7-ticks { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.n7-ticks li { position:relative; padding-left:34px; color:var(--n7-text); font:500 17px/1.5 'Work Sans',sans-serif; }
.n7-ticks li::before { content:'\2713'; position:absolute; top:1px; left:0; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--n7-green); color:#fff; font:700 12px/1 'Work Sans',sans-serif; }

/* Hero */
.collabit-dev-premium main.n7-home > section.n7-top h1 { font-size:64px !important; line-height:1.06 !important; letter-spacing:-.025em; }
.n7-trades { display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin:28px 0 0; padding:0; border:0; }
.n7-trades legend { width:100%; margin-bottom:12px; padding:0; color:var(--n7-mint); font:600 12px/1 'Work Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.n7-trades label { position:relative; }
.n7-trades input { position:absolute; opacity:0; pointer-events:none; }
.n7-trades span { display:inline-block; padding:10px 17px; border:1px solid #ffffff3d; border-radius:99px; background:#ffffff0d; color:#e8f4ef; font:500 15px/1.2 'Work Sans',sans-serif; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.n7-trades label:hover span { border-color:#ffffffa6; }
.n7-trades input:checked + span { border-color:var(--n7-mint); background:var(--n7-mint); color:var(--n7-ink); font-weight:600; }
.n7-trades input:focus-visible + span { outline:3px solid #fff; outline-offset:2px; }
.n7-hero-actions { align-items:center; gap:14px 26px !important; }
/* The shared hero styles every action link as a button; this one stays a quiet text link. */
.collabit-dev-premium .reference-hero .reference-actions a.n7-quiet, .collabit-staging-prototype .reference-actions a.n7-quiet { min-height:0 !important; padding:8px 0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; color:#fff !important; font-size:16px !important; }
.n7-stage { position:relative; container-type:inline-size; aspect-ratio:1.04; perspective:1700px; }
.n7-stage::before { content:''; position:absolute; inset:12% 6% 8%; border-radius:50%; background:radial-gradient(closest-side, #8fe0c640, transparent); filter:blur(30px); }
.n7-stack { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(-14deg) rotateX(6deg); }
.collabit-next2 .n7-stack > figure { position:absolute; margin:0; animation:n7-deal .9s cubic-bezier(.2,.8,.2,1) both; }
.n7-stack figcaption { display:none !important; }
.n7-stack > figure > button { animation:n7-float 8s ease-in-out infinite; }
.n7-stack-main { top:3%; right:2%; transform:translateZ(30px); }
.n7-stack-main img { width:min(76cqw, calc(54cqw * var(--r)), calc(var(--w) / 2)); }
.n7-stack-second { left:0; bottom:14%; transform:translateZ(120px); animation-delay:.08s !important; }
.n7-stack-second img { width:min(52cqw, calc(30cqw * var(--r)), calc(var(--w) / 2)); }
.n7-stack-second > button { animation-delay:-2.6s !important; }
.collabit-next2 .n7-stack .n7-stack-phone { right:5%; bottom:12%; width:21cqw; transform:translateZ(190px); animation-delay:.16s !important; }
.n7-stack-phone > button { animation-delay:-5.2s !important; }
.n7-stage-note { position:absolute; left:0; bottom:-6px; margin:0 !important; color:#9fbdb4 !important; font:400 12px/1.4 'Work Sans',sans-serif !important; }

/* Customers and certifications */
.n7-logos { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:20px; align-items:center; margin:0; padding:0; list-style:none; }
.n7-logos li { display:grid; place-items:center; height:62px; }
.n7-logos img { width:auto; max-width:100%; height:auto; max-height:46px; object-fit:contain; }
/* The Morrisons file is a square with its own white margin. */
.n7-logos .is-morrisons img { max-height:62px; }
.n7-trustline { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin:22px 0 0; color:var(--n7-text); font:600 14.5px/1.3 'Work Sans',sans-serif; }
.n7-trustline span { display:inline-flex; align-items:center; gap:8px; }
.n7-trustline span::before { content:'\2713'; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--n7-ink); color:#fff; font:700 11px/1 'Work Sans',sans-serif; }

/* How it works: Elle's flow, all five steps in view */
.n7-flow .n2-heading { margin-bottom:38px; }
.n7-steps { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; }
.n7-steps::before { content:''; position:absolute; top:44px; right:10%; left:10%; height:2px; background:linear-gradient(90deg, var(--n7-mint), var(--n7-green)); }
.n7-steps li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.n7-step-icon { display:grid; place-items:center; width:88px; height:88px; border:1px solid var(--n7-line); border-radius:50%; background:#fff; color:var(--n7-green); box-shadow:0 18px 36px -24px #0f3b3680; }
.n7-step-icon svg { width:38px; height:38px; }
.n7-steps b { margin:22px 0 8px; color:var(--n7-navy); font:600 19px/1.3 'Poppins',sans-serif; }
.n7-steps p { margin:0; color:var(--n7-muted); font:400 16px/1.55 'Work Sans',sans-serif; }
.n7-flow-foot { max-width:1000px; margin:30px auto 0; padding:18px 26px; border-radius:16px; background:var(--n7-paper); color:var(--n7-text); font:500 16.5px/1.55 'Work Sans',sans-serif; text-align:center; }
.n7-flow-foot a { color:var(--n7-green); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

/* Prove the work */
.n7-prove-panel { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px; align-items:center; padding:44px 48px 44px 60px; border-radius:32px; background:radial-gradient(60% 70% at 85% 40%, #d9f1e7, transparent 70%), var(--n7-paper); }
.n7-prove-copy .n7-ticks { margin:26px 0 32px; }
.collabit-next2 .n7-window { box-shadow:0 40px 70px -40px #0f3b3699; }
.collabit-next2 .n7-window button { min-height:0; padding:14px; }
/* Show the top of each record, where the evidence is, at a readable size. */
.collabit-next2 .n7-window img { width:100%; max-height:400px; object-fit:cover; object-position:top; }
.collabit-next2 .n7-ai .n7-window img { max-height:340px; }
.collabit-next2 .n7-window figcaption { padding:13px 18px 15px; border-top:1px solid #e1ebe7; color:var(--n7-text); font:500 15px/1.45 'Work Sans',sans-serif; }
.n7-window figcaption small { margin-left:6px; padding:3px 8px; border-radius:99px; background:#fff3d6; color:#6b4c00; font:600 11.5px/1 'Work Sans',sans-serif; }

/* Customer results */
.n7-results .n2-heading { margin-bottom:28px; }
.n7-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0; }
.n7-stats div { display:flex; flex-direction:column-reverse; justify-content:flex-end; padding:26px 24px 24px; border:1px solid var(--n7-line); border-top:4px solid var(--n7-green); border-radius:18px; background:#fff; }
.n7-stats dd { margin:0; color:var(--n7-green); font:600 46px/1 'Poppins',sans-serif; letter-spacing:-.03em; white-space:nowrap; }
.n7-stats dt { margin-top:12px; color:var(--n7-text); font:500 16.5px/1.45 'Work Sans',sans-serif; }
.n7-stats dt small { display:block; margin-top:10px; color:var(--n7-green); font:600 12px/1.3 'Work Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.n7-results-foot { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.42fr); gap:20px; margin-top:20px; }
.n7-quote { display:flex; flex-direction:column; justify-content:center; margin:0; padding:34px 40px; border-radius:22px; background:var(--n7-ink); }
.n7-quote p { margin:0; color:#fff; font:500 25px/1.4 'Poppins',sans-serif; letter-spacing:-.01em; }
.n7-quote .n7-quote-by { margin-top:14px; color:#a9cfc4; font:500 15px/1.5 'Work Sans',sans-serif; letter-spacing:0; }
.n7-results-cta { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; padding:30px 32px; border:1px solid var(--n7-line); border-radius:22px; background:var(--n7-paper); }
.n7-results-cta p { margin:0; color:var(--n7-navy); font:600 22px/1.3 'Poppins',sans-serif; }

/* Collabit AI */
.n7-ai-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; padding:48px 48px 48px 60px; border-radius:32px; background:radial-gradient(70% 90% at 92% 8%, #0f6b5c, transparent 62%), var(--n7-ink); }
.n7-ai .dev-home-eyebrow { color:var(--n7-mint) !important; }
.n7-home .n7-ai-copy h2 { color:#fff; }
.n7-home .n7-ai-copy h2 span { color:var(--n7-mint); }
.n7-ai-copy > p:not(.dev-home-eyebrow) { margin:0; color:#cfe5de; font:400 17.5px/1.65 'Work Sans',sans-serif; }
.n7-ai-copy .n7-ticks { margin:24px 0 32px; }
.n7-ai .n7-ticks li { color:#fff; }
.n7-ai .n7-ticks li::before { background:var(--n7-mint); color:var(--n7-ink); }
.collabit-next2 .n7-ai .n7-window { border-color:#ffffff26; box-shadow:0 40px 80px -40px #000; }

/* One main button per section: the first action stays a button and the rest become quiet links.
   The shared staging styles set these buttons with !important, so the overrides need it too. */
.collabit-staging-prototype .staging-closing-actions > .staging-closing-button:first-child { border-color:var(--n7-mint) !important; background:var(--n7-mint) !important; color:var(--n7-ink) !important; }
.collabit-staging-prototype .staging-closing-actions > .staging-closing-button:first-child:is(:hover, :focus) { border-color:#fff !important; background:#fff !important; }
.collabit-staging-prototype .staging-closing-actions > .staging-closing-button:not(:first-child) { min-height:0 !important; padding:.68rem .35rem !important; border-color:transparent !important; background:transparent !important; color:#fff !important; text-decoration:underline !important; text-decoration-color:var(--n7-mint) !important; text-underline-offset:4px; }
.collabit-staging-prototype .staging-closing-actions > .staging-closing-button:not(:first-child):is(:hover, :focus) { border-color:transparent !important; background:transparent !important; color:var(--n7-mint) !important; }

/* The same on solution and feature page heroes: book a demo is the button, the rest are links. */
.collabit-staging-prototype main > section:first-child :is([class*="-stage-actions"], .service-actions) > a:not(:first-child) { min-height:0 !important; padding-inline:.35rem !important; border-color:transparent !important; background:transparent !important; box-shadow:none !important; color:var(--n7-green) !important; text-decoration:underline !important; text-decoration-color:#9fd8c6 !important; text-underline-offset:4px; }
.collabit-staging-prototype main > section:first-child :is([class*="-stage-actions"], .service-actions) > a:not(:first-child):is(:hover, :focus) { border-color:transparent !important; background:transparent !important; color:var(--n7-ink) !important; }

/* Switching: the move plan */
.n7-switching .review-actions { align-items:center; gap:14px 26px; }
.n7-move-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.n7-move-steps > li { display:flex; flex-direction:column; padding:22px 20px 22px; border:1px solid var(--n7-line); border-top:4px solid var(--n7-green); border-radius:18px; background:#fff; }
.n7-move-label { display:flex; align-items:center; gap:10px; margin:0 0 14px !important; color:var(--n7-green); font:600 13px/1 'Work Sans',sans-serif !important; letter-spacing:.14em; text-transform:uppercase; }
.n7-move-label span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--n7-ink); color:#fff; font:600 14px/1 'Poppins',sans-serif; letter-spacing:0; }
.n7-move-steps h3 { margin:0 0 8px; color:var(--n7-navy); font:600 19px/1.3 'Poppins',sans-serif; }
.n7-move-steps > li > p:not(.n7-move-label) { margin:0 0 16px; color:var(--n7-muted); font:400 15.5px/1.55 'Work Sans',sans-serif; }
.n7-move-steps ul { display:grid; gap:8px; margin:auto 0 0; padding:14px 0 0; border-top:1px dashed #c9dad4; list-style:none; }
.n7-move-steps ul li { position:relative; padding-left:25px; color:var(--n7-text); font:500 14.5px/1.4 'Work Sans',sans-serif; }
.n7-move-steps ul li::before { content:'\2713'; position:absolute; top:1px; left:0; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--n7-green); color:#fff; font:700 10px/1 'Work Sans',sans-serif; }
.n7-renewal { display:flex; gap:14px; max-width:760px; margin-top:20px; padding:18px 22px; border:1px solid #f1d9a8; border-radius:18px; background:#fff8e8; }
.n7-renewal b { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--n7-amber); color:#3b2a05; font:700 18px/1 'Poppins',sans-serif; }
.n7-renewal p { margin:0; color:#4a3a12; font:400 15.5px/1.55 'Work Sans',sans-serif; }
.n7-renewal strong { display:block; color:#3b2a05; font:600 17px/1.35 'Poppins',sans-serif; }

/* Tool pages */
.collabit-dev-premium main.n7-tool-page > section:first-child { padding-bottom:56px !important; }
.collabit-dev-premium main.n7-tool-page > section:first-child h1 { max-width:900px; font-size:58px !important; }
.n7-tool-head h1 span { color:var(--n7-green); }
.n7-tool-head > p:not(.dev-home-eyebrow, .n7-tool-private) { max-width:820px; margin:20px 0 0; color:var(--n7-muted); font:400 19px/1.65 'Work Sans',sans-serif; }
.n7-tool-private { display:inline-flex; gap:10px; margin:22px 0 0; padding:10px 16px; border:1px solid var(--n7-line); border-radius:12px; background:#fff; color:var(--n7-muted); font:500 14.5px/1.4 'Work Sans',sans-serif; }
.n7-tool-next { margin:30px auto 0 !important; color:var(--n7-text); font:500 17px/1.5 'Work Sans',sans-serif; }
.n7-tool-next a { color:var(--n7-green); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.n7-memo-fields { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:end; margin-top:20px; }
.n7-memo-fields .n6-memo-company { margin:0; }
.n7-memo-reader { display:grid; gap:6px; }
.n7-memo-reader span { color:var(--n6-green); font:600 12px/1 'Work Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.n7-memo-reader select { width:100%; min-height:44px; padding:8px 12px; border:1px solid #b9d0c8; border-radius:10px; background:#fff; color:var(--n6-text); font:600 16px/1.3 'Work Sans',sans-serif; }
.n7-memo-reader select:focus-visible { outline:3px solid var(--n7-mint); outline-offset:1px; }
.n7-tool-page .n6-tabs { margin-bottom:22px; }

@keyframes n7-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes n7-deal { from { opacity:0; translate:0 40px; } to { opacity:1; translate:0 0; } }

@media (max-width:900px) {
    .collabit-dev-premium main.n7-home > section.n7-top h1 { font-size:42px !important; }
    .n7-trades { order:1; margin-top:0; }
    .n7-trades span { padding:9px 14px; font-size:14px; }
    .n7-hero-actions { order:2; }
    .n7-stage { width:100%; margin:4px 0 18px; aspect-ratio:1.2; }
    .collabit-dev-premium main .n7-hero-actions > a.n7-quiet { width:auto !important; min-height:0 !important; padding:6px 0 !important; text-align:left !important; }
    .n7-stack { transform:rotateY(-8deg) rotateX(4deg); }
    .collabit-next2 .n7-stack .n7-stack-phone { width:26cqw; }
    .n7-stage-note { bottom:-26px; }
    .n7-home :is(.n7-prove-copy, .n7-ai-copy) h2 { font-size:32px; }
    .n7-logos { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px; }
    .n7-logos li { height:52px; }
    .n7-logos img { max-height:38px; }
    .n7-trustline { justify-content:flex-start; gap:10px 18px; font-size:14px; }
    .n7-steps { grid-template-columns:1fr; gap:20px; }
    .n7-steps::before { top:24px; bottom:24px; right:auto; left:31px; width:2px; height:auto; background:linear-gradient(180deg, var(--n7-mint), var(--n7-green)); }
    .n7-steps li { display:grid; grid-template-columns:64px minmax(0,1fr); gap:2px 16px; align-items:start; text-align:left; }
    .n7-step-icon { grid-row:span 2; width:64px; height:64px; }
    .n7-step-icon svg { width:30px; height:30px; }
    .n7-steps b { margin:6px 0 2px; font-size:17px; }
    .n7-steps p { font-size:15.5px; }
    .n7-flow-foot { margin-top:28px; padding:16px 18px; text-align:left; }
    .n7-prove-panel, .n7-ai-panel { grid-template-columns:1fr; gap:28px; padding:30px 18px 22px; border-radius:22px; }
    .n7-prove-copy .n7-ticks, .n7-ai-copy .n7-ticks { margin:20px 0 24px; }
    .n7-ticks li { font-size:16px; }
    .collabit-next2 .n7-window button { padding:8px; }
    .collabit-next2 .n7-window img { max-height:260px; }
    .collabit-next2 .n7-ai .n7-window img { max-height:220px; }
    .collabit-next2 .n7-window figcaption { font-size:14px; }
    .n7-stats { grid-template-columns:1fr 1fr; gap:12px; }
    .n7-stats div { padding:18px 16px; }
    .n7-stats dd { font-size:32px; }
    .n7-stats dt { font-size:14.5px; }
    .n7-results-foot { grid-template-columns:1fr; gap:12px; }
    .n7-quote { padding:24px 22px; }
    .n7-quote p { font-size:20px; }
    .n7-quote .n7-quote-by { font-size:14px; }
    .n7-results-cta { padding:22px 20px; }
    .n7-results-cta p { font-size:19px; }
    .n7-move-steps { grid-template-columns:1fr; gap:12px; }
    .n7-renewal { padding:16px 18px; }
    .collabit-dev-premium main.n7-tool-page > section:first-child h1 { font-size:38px !important; }
    .n7-tool-head > p:not(.dev-home-eyebrow, .n7-tool-private) { font-size:16.5px; }
    .n7-memo-fields { grid-template-columns:1fr; gap:14px; }
}
@media (prefers-reduced-motion:reduce) {
    .collabit-next2 .n7-stack > figure, .n7-stack > figure > button { animation:none !important; }
}
@media print {
    .n6-print-sheet .n7-memo-reader { display:none; }
    .n6-print-sheet .n7-memo-fields { display:block; }
}