/* UK garden tools, tuned to the site's warm cream and deep green palette. */
.pj-tool-page { --pj-tool-green:#006241; --pj-tool-deep:#1e3932; --pj-tool-mint:#d4e9e2; --pj-tool-cream:#f2f0eb; --pj-tool-ink:rgba(0,0,0,.87); --pj-tool-muted:rgba(0,0,0,.64); --pj-tool-line:#d8ddd8; color:var(--pj-tool-ink); max-width:1180px; margin:0 auto; padding:clamp(24px,4vw,52px) clamp(16px,3vw,36px) 76px; }
.pj-tool-page * { box-sizing:border-box; }
.pj-tool-page h1,.pj-tool-page h2,.pj-tool-page h3,.pj-tool-page p { margin:0; }
.pj-tool-page h1,.pj-tool-page h2,.pj-tool-page h3 { color:var(--pj-tool-deep); font-family:var(--ocs-font-display,"Helvetica Neue",Arial,sans-serif); letter-spacing:-.02em; }
.pj-tool-page .pj-tool-seo-title { color:var(--pj-tool-green); font-size:clamp(2.2rem,4.5vw,3.8rem); line-height:1.08; margin:0 0 20px; max-width:19ch; }
.pj-tool-page h2 { font-size:clamp(1.55rem,2.6vw,2.2rem); line-height:1.16; }
.pj-tool-page h3 { font-size:1.25rem; line-height:1.25; }
.pj-tool-page p { color:var(--pj-tool-muted); line-height:1.65; }
.pj-tool-kicker,.pj-tool-label,.pj-tool-result__eyebrow { color:var(--pj-tool-green)!important; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pj-tool-hero { align-items:center; background:var(--pj-tool-cream); border-radius:12px; display:grid; gap:28px; grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr); margin-bottom:36px; padding:clamp(28px,5vw,56px); }
.pj-tool-hero__lede { font-size:1.12rem; max-width:58ch; }
.pj-tool-hero__visual { align-items:center; background:var(--pj-tool-deep); border-radius:12px; color:#fff; display:flex; flex-direction:column; gap:12px; justify-content:center; min-height:170px; padding:24px; text-align:center; }
.pj-tool-hero__visual span { color:#fff; }
.pj-garden-visual__mark { color:#fff!important; font-size:clamp(2.7rem,6vw,4rem); font-weight:700; letter-spacing:-.06em; }
.pj-tool-workspace { display:grid; gap:24px; grid-template-columns:minmax(0,1fr) 280px; }
.pj-tool-main { display:grid; gap:22px; }
.pj-tool-panel,.pj-tool-explainer,.pj-tool-aside-card { background:#fff; border:1px solid var(--pj-tool-line); border-radius:12px; padding:clamp(22px,3vw,34px); }
.pj-tool-panel__intro { display:grid; gap:10px; margin-bottom:22px; }
.pj-tool-fields { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:20px; }
.pj-tool-field { display:grid; gap:7px; }
.pj-tool-field[hidden] { display:none; }
.pj-tool-field label { color:var(--pj-tool-deep); font-weight:700; }
.pj-tool-field input,.pj-tool-field select { background:#fff; border:1px solid #8b9790; border-radius:8px; color:var(--pj-tool-ink); min-height:48px; padding:10px 12px; width:100%; }
.pj-tool-field small { color:var(--pj-tool-muted); font-size:.86rem; line-height:1.45; }
.pj-tool-button { align-items:center; background:#00754a; border:1px solid #00754a; border-radius:50px; color:#fff!important; display:inline-flex; font:inherit; font-weight:700; gap:9px; justify-content:center; min-height:48px; padding:12px 20px; text-decoration:none!important; transition:transform .15s ease,background .15s ease; }
.pj-tool-button:hover,.pj-tool-button:focus-visible { background:#1e3932; border-color:#1e3932; color:#fff!important; }
.pj-tool-button:active { transform:scale(.98); }
.pj-tool-result { background:#f2f0eb; border:1px solid #c5d6ce; border-radius:12px; margin-top:22px; padding:22px; }
.pj-tool-result[hidden] { display:none; }
.pj-tool-result h3 { margin:6px 0 8px; }
.pj-tool-result__grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:18px 0; }
.pj-tool-result__stat { background:#fff; border:1px solid var(--pj-tool-line); border-radius:9px; display:grid; gap:4px; min-width:0; padding:13px; }
.pj-tool-result__stat strong { color:var(--pj-tool-deep); font-size:1.08rem; overflow-wrap:anywhere; }
.pj-tool-result__stat span { color:var(--pj-tool-muted); font-size:.82rem; }
.pj-tool-result__notice { background:#fff; border-left:4px solid var(--pj-tool-green); border-radius:4px; color:var(--pj-tool-ink); line-height:1.6; margin-top:14px; padding:14px 16px; }
.pj-tool-result [data-result-law] { background:#faf6ee; border-left:4px solid #7a5b1b; border-radius:4px; margin-top:12px; padding:14px 16px; }
.pj-tool-result__actions { margin-top:18px; }
.pj-tool-error { color:#a32020!important; font-weight:600; margin-top:12px!important; }
.pj-tool-error[hidden] { display:none; }
.pj-tool-explainer { display:grid; gap:12px; }
.pj-tool-explainer h2 { margin-bottom:2px; }
.pj-tool-sources { font-size:.92rem; }
.pj-tool-sources a { color:var(--pj-tool-green); text-decoration:underline; }
.pj-tool-aside-card { background:var(--pj-tool-deep); border-color:var(--pj-tool-deep); display:grid; gap:12px; position:sticky; top:28px; }
.pj-tool-aside-card h2,.pj-tool-aside-card p,.pj-tool-aside-card .pj-tool-label { color:#fff!important; }
.pj-tool-aside-card .pj-tool-label { color:#d4e9e2!important; }
.pj-tool-aside-card .pj-tool-button { background:#fff; border-color:#fff; color:var(--pj-tool-green)!important; justify-self:start; }
.pj-tool-aside-card .pj-tool-button:hover,.pj-tool-aside-card .pj-tool-button:focus-visible { background:#d4e9e2; border-color:#d4e9e2; }
.pj-tool-page button:focus-visible,.pj-tool-page a:focus-visible,.pj-tool-page input:focus-visible,.pj-tool-page select:focus-visible { outline:3px solid rgba(0,98,65,.32); outline-offset:3px; }
@media(max-width:820px) { .pj-tool-workspace { grid-template-columns:1fr; } .pj-tool-aside-card { position:static; } }
@media(max-width:560px) { .pj-tool-hero { grid-template-columns:1fr; } .pj-tool-hero__visual { min-height:130px; } .pj-tool-fields,.pj-tool-result__grid { grid-template-columns:1fr; } .pj-tool-page .pj-tool-button { width:100%; } }

/* BUILD-SITES generated design adaptation: inherit the current City + Service site's design tokens. */
.pj-tool-page {
    --pj-tool-blue: var(--ocs-link, var(--ocs-accent, #075b93));
    --pj-tool-deep: var(--ocs-ink, #08233f);
    --pj-tool-cyan: var(--ocs-surface-strong, #9cdef0);
    --pj-tool-cyan-pale: var(--ocs-surface-soft, #e9f9fd);
    --pj-tool-yellow: #ffd400;
    --pj-tool-green: var(--ocs-accent, #00b97a);
    --pj-tool-ink: var(--ocs-ink, #173847);
    --pj-tool-muted: var(--ocs-ink-soft, #58717d);
    --pj-tool-line: var(--ocs-line, #cfe1e8);
    --pj-tool-shadow: var(--ocs-shadow, 0 22px 60px rgba(8, 35, 63, 0.12));
}
.pj-tool-hero {
    background: radial-gradient(circle at 95% 4%, var(--ocs-surface, #fff), transparent 25%), linear-gradient(135deg, var(--ocs-surface-soft, #dff7fc) 0%, var(--ocs-surface-strong, #a9e4f2) 54%, var(--ocs-accent, #7fd1e6) 100%);
    border-color: color-mix(in srgb, var(--ocs-accent, #075b93) 12%, transparent);
}
.pj-tool-page input:focus,
.pj-tool-page select:focus,
.pj-tool-page textarea:focus {
    border-color: var(--ocs-accent, #075b93);
}

/* Keighley site variant: follow the active blue, gold and cool-neutral homepage theme. */
.pj-tool-page { --pj-tool-green:var(--ocs-link,rgb(0 101 144)); --pj-tool-deep:var(--ocs-ink,#173847); --pj-tool-cream:var(--ocs-surface-soft,#f7fafc); --pj-tool-line:var(--ocs-line,#d6e1e6); }
.pj-tool-hero { background:var(--ocs-surface-soft,#f7fafc); border:1px solid var(--ocs-line,#d6e1e6); }
.pj-tool-hero__visual { background:var(--ocs-ink,#173847); }
.pj-tool-button { background:var(--ocs-link,rgb(0 101 144)); border-color:var(--ocs-link,rgb(0 101 144)); color:#fff!important; }
.pj-tool-button:hover,.pj-tool-button:focus-visible { background:var(--ocs-ink,#173847); border-color:var(--ocs-ink,#173847); }
.pj-tool-aside-card { background:var(--ocs-ink,#173847); border-color:var(--ocs-ink,#173847); }
.pj-tool-aside-card .pj-tool-button { background:#fff; border-color:#fff; color:var(--ocs-ink,#173847)!important; }
.pj-tool-aside-card .pj-tool-button:hover,.pj-tool-aside-card .pj-tool-button:focus-visible { background:var(--ocs-surface-soft,#f7fafc); border-color:var(--ocs-surface-soft,#f7fafc); }

/* Compact, tool-specific photo in the summary panel. */
.pj-tool-page .pj-tool-hero__visual { gap:10px; min-height:0; padding:18px; }
.pj-tool-page .pj-tool-hero__image { display:block; width:min(100%,160px); height:96px; object-fit:cover; border-radius:8px; }
@media(max-width:560px) { .pj-tool-page .pj-tool-hero__image { width:min(100%,180px); height:104px; } }

/* Keep both gardeners' faces visible in the cost-estimator thumbnail crop. */
.pj-tool-page .pj-tool-hero__image--people { object-position:center top; }

/* More squared tool actions; dark-panel CTAs use orange with white text. */
.pj-tool-page .pj-tool-button { border-radius:8px; }
.pj-tool-page .pj-tool-aside-card .pj-tool-button { background:#b85c00; border-color:#b85c00; color:#fff!important; }
.pj-tool-page .pj-tool-aside-card .pj-tool-button:hover,
.pj-tool-page .pj-tool-aside-card .pj-tool-button:focus-visible { background:#974900; border-color:#974900; color:#fff!important; }