/*
 * Business pages v2 (Business, Trade, Schools) - built 30 Oct 2026 from the
 * owner-approved v14 mockups (Claude outputs/business-pages-2026-10-29).
 *
 * Loaded instead of the b2b-shared/hub/trade/schools stack when the page
 * content carries the .ffb2 wrapper (includes/core/b2b-assets.php), so a
 * plugin deploy never restyles a page still on the old content.
 *
 * Shared layer is scoped under .ffb2; page layers under #ff-bh, #ff-tr, #ff-sc.
 * Semantic tokens only. One keyframe system per page; static under
 * prefers-reduced-motion.
 */

/* ===== Shared layer ===== */
.ffb2{font-family:var(--font-stack);font-size:1rem;line-height:1.6;color:var(--content-body);background:var(--surface);overflow-x:clip}
/* ===== Business pages mockup v3: shared layer (mobile-first) ===== */
.ffb2 *,.ffb2 *::before,.ffb2 *::after{box-sizing:border-box}
.ffb2 img,.ffb2 svg{max-width:100%}
.ffb2 a{color:var(--action);text-decoration-thickness:1px;text-underline-offset:3px}
.ffb2 a:hover{color:var(--action-hover)}
.ffb2 h1,.ffb2 h2,.ffb2 h3{color:var(--content);margin:0}
.ffb2 h1{font-size:var(--text-h1);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.ffb2 h2{font-size:var(--text-h2);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ffb2 h3{font-size:1.25rem;font-weight:700;line-height:1.3}
.ffb2 p{margin:0}
.ffb2 .op{color:var(--action)}
.ffb2 .wrap{max-width:1320px;margin:0 auto;padding:0 16px}
.ffb2 .sec{padding:64px 0}
.ffb2 .alt{background:var(--surface-alt)}
.ffb2 .head{max-width:720px;margin-bottom:32px}
.ffb2 .head p{font-size:1.125rem;margin-top:16px}
/* Buttons and arrow links */
.ffb2 .btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ffb2 .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:12px;font:700 1rem/1.2 var(--font-stack);letter-spacing:.01em;text-decoration:none;border:2px solid var(--action);background:var(--action);color:var(--on-action);transition:background .2s ease,border-color .2s ease}
.ffb2 .btn:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--on-action)}
.ffb2 .more{font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center;min-height:44px}
.ffb2 .more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.ffb2 .more:hover::after{transform:translateX(3px) rotate(45deg)}
/* Hero: the claim on the left, the page's one drawing on the right */
.ffb2 .hero{padding:48px 0 64px}
.ffb2 .hero .wrap{display:grid;gap:40px;align-items:center}
.ffb2 .hero h1{margin-bottom:20px}
.ffb2 .hero .lead{font-size:1.125rem;max-width:520px;margin-bottom:32px}
.ffb2 .hero .fxs{max-width:320px;margin:0 auto}
/* Drawings: the icon language (ink line, paper, teal, saffron, soft wash) */
.ffb2 .fxs{display:block;width:100%;height:auto;overflow:visible}
.ffb2 .fxs .st{fill:var(--wash-brand-soft)}
.ffb2 .fxs .k,.ffb2 .fxs .kp,.ffb2 .fxs .kb,.ffb2 .fxs .kw,.ffb2 .fxs .kf,.ffb2 .fxs .kd{stroke:var(--content);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ffb2 .fxs .k{fill:none}
.ffb2 .fxs .kp,.ffb2 .fxs .p{fill:var(--surface)}
.ffb2 .fxs .kb,.ffb2 .fxs .b{fill:var(--accent)}
.ffb2 .fxs .kw,.ffb2 .fxs .w{fill:var(--accent-warm)}
.ffb2 .fxs .kf{fill:var(--surface-fill)}
.ffb2 .fxs .kd,.ffb2 .fxs .d{fill:var(--ink-900,#102a30)}
.ffb2 .fxs .thin{stroke-width:1.8}
.ffb2 .fxs .wl{stroke:var(--accent-warm);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ffb2 .fxs .lbl{font:800 12px var(--font-stack);fill:var(--content);letter-spacing:.06em}
.ffb2 .fxs .dash{stroke-dasharray:2 7}
/* Workshop stories: the site's existing "From Our Workshop" card */
.ffb2 .ws{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.ffb2 .ws-card{display:grid;grid-template-columns:1fr;height:100%;border:1px solid var(--border-neutral);border-radius:12px;overflow:hidden;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .2s ease}
.ffb2 .ws-card:hover{border-color:var(--action)}
.ffb2 .ws-media{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-alt)}
.ffb2 .ws-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ffb2 .ws-body{display:flex;flex-direction:column;gap:8px;padding:16px 20px 20px}
.ffb2 .ws-body time{font-size:.875rem;color:var(--content-secondary)}
.ffb2 .ws-title{font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--content)}
.ffb2 .ws-sum{font-size:.95rem;line-height:1.55}
.ffb2 .ws-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-weight:700;color:var(--action)}
/* Numbered steps (vertical on phones, a row from 1024px) */
.ffb2 .steps{list-style:none;margin:0;padding:0;display:grid;gap:32px;counter-reset:s}
.ffb2 .steps li{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;align-content:start}
.ffb2 .steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;width:44px;height:44px;border-radius:50%;border:2px solid var(--content);display:grid;place-items:center;font-weight:800;color:var(--content);background:var(--surface)}
.ffb2 .steps h3{font-size:1.125rem;padding-top:8px}
.ffb2 .steps p{font-size:.9375rem}
/* Terms row: label above value, rules between */
.ffb2 .terms{margin:48px 0 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-neutral)}
.ffb2 .terms div{padding:20px 16px 0 0}
.ffb2 .terms dt{font-size:.875rem;font-weight:600;color:var(--content-secondary)}
.ffb2 .terms dd{margin:4px 0 0;font-size:1.0625rem;font-weight:700;color:var(--content);line-height:1.35}
/* FAQ: one short list */
.ffb2 .faq{max-width:820px;display:grid;gap:12px}
.ffb2 .faq details{border:1px solid var(--border-interactive);border-radius:12px;background:var(--surface);transition:border-color .2s ease}
.ffb2 .faq details:hover{border-color:var(--border-active)}
.ffb2 .faq summary{list-style:none;cursor:pointer;padding:16px 56px 16px 20px;min-height:56px;display:flex;align-items:center;font-weight:700;color:var(--content);position:relative}
.ffb2 .faq summary::-webkit-details-marker{display:none}
.ffb2 .faq summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-right:2px solid var(--action);border-bottom:2px solid var(--action);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.ffb2 .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.ffb2 .faq details p{padding:0 20px 20px;font-size:.9375rem}
/* Start: heading and one sentence beside the form */
.ffb2 .start{display:grid;gap:32px}
.ffb2 .start h2{margin-bottom:16px}
.ffb2 .start p{font-size:1.125rem}
.ffb2 .start .aside{margin-top:24px;font-size:.9375rem;display:grid;gap:12px}
.ffb2 .start .aside b{display:block;color:var(--content)}
.ffb2 .form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--border-neutral);border-radius:12px;padding:24px;align-content:start}
.ffb2 .form label{display:grid;gap:8px;font-size:.875rem;font-weight:600;color:var(--content)}
.ffb2 .form .in{height:48px;border:1px solid var(--border-neutral);border-radius:10px;background:var(--surface)}
.ffb2 .form .ta{height:112px}
.ffb2 .form .row{display:grid;gap:16px}
.ffb2 .form .btn{justify-self:start}
/* ---------- Larger screens ---------- */
@media (min-width:481px){.ffb2 .ws-card{grid-template-columns:9rem 1fr}
.ffb2 .ws-media{aspect-ratio:auto;min-height:9rem}}
@media (min-width:768px){.ffb2 .wrap{padding:0 32px}
.ffb2 .form .row{grid-template-columns:1fr 1fr}
.ffb2 .form{padding:32px}
.ffb2 .terms{grid-template-columns:repeat(4,1fr)}
.ffb2 .terms div{padding:24px 24px 0;border-left:1px solid var(--border-neutral)}
.ffb2 .terms div:first-child{padding-left:0;border-left:0}}
@media (min-width:1024px){.ffb2 .sec{padding:96px 0}
.ffb2 .head{margin-bottom:48px}
.ffb2 .hero{padding:80px 0 96px}
.ffb2 .hero .wrap{grid-template-columns:6fr 5fr;gap:64px}
.ffb2 .hero .fxs{max-width:460px;margin-right:0}
.ffb2 .ws{grid-template-columns:repeat(3,minmax(0,1fr))}
.ffb2 .ws-card{grid-template-columns:1fr}
.ffb2 .ws-media{aspect-ratio:3/2;min-height:0}
.ffb2 .steps{grid-template-columns:repeat(var(--n,4),1fr);gap:32px}
.ffb2 .steps li{grid-template-columns:1fr;gap:0;position:relative}
.ffb2 .steps li::before{grid-row:auto;margin-bottom:20px}
.ffb2 .steps li:not(:last-child)::after{content:"";position:absolute;top:21px;left:60px;right:-20px;border-top:2px dotted var(--accent-art)}
.ffb2 .steps h3{padding-top:0;margin-bottom:6px}
.ffb2 .start{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
/* One orchestrated moment per page; static under reduced motion */
@media (prefers-reduced-motion:reduce){.ffb2 *,.ffb2 *::before,.ffb2 *::after{animation:none !important;transition:none !important}} /* Reduced motion: must beat each page's own animation declarations */
.ffb2 .start .aside a{display:inline-block;padding:10px 0;margin:-10px 0}
/* ===== v7 layer ===== */
/* Hero on a quiet tinted field with a delicate dot grid */
.ffb2 .hero .lead{font-size:1.1875rem}
@media (min-width:1024px){.ffb2 .hero .fxs{max-width:480px}}
/* The one always-dark band: how it works. Tokens are remapped so every component inside reads on ink. */
.ffb2 .band{background:var(--surface-inverse);--content:var(--content-inverse);--content-body:var(--content-inverse-body);--content-secondary:var(--content-inverse-muted);--surface:var(--surface-inverse-raised);--border-neutral:var(--rule-inverse);--accent-art:var(--rule-inverse-brand);color:var(--content-body)}
.ffb2 .band .steps li::before{content:counter(s,decimal-leading-zero);width:auto;height:auto;border:0;border-radius:0;background:none;display:block;font-size:2.25rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--accent-warm)}
.ffb2 .band .terms{background:var(--surface);border:1px solid var(--rule-inverse);border-radius:12px;padding:4px 24px 24px;margin-top:56px}
.ffb2 .band .byemail{margin-top:16px}
/* Scope columns carry a small subject drawing */
.ffb2 .ico{display:block;width:96px;height:auto;overflow:visible;margin:0 0 20px}
.ffb2 .ico .l{stroke:var(--content);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ffb2 .ico .p{fill:var(--surface)}
.ffb2 .ico .b{fill:var(--accent)}
.ffb2 .ico .w{fill:var(--accent-warm)}
.ffb2 .ico .f{fill:none}
.ffb2 .ico .wk{fill:none;stroke:var(--accent-warm);stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ffb2 .ico .tick{fill:none;stroke:var(--surface);stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* From Our Workshop: statement and photo, then the written-up repairs */
.ffb2 .shop{display:grid;gap:32px;align-items:center;margin-bottom:48px}
.ffb2 .shop h2{margin-bottom:16px}
.ffb2 .shop p{font-size:1.125rem}
.ffb2 .shop img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
/* Final: questions beside the next step */
.ffb2 .final{display:grid;gap:48px}
.ffb2 .final .faq{max-width:none}
.ffb2 .final h2{margin-bottom:24px}
.ffb2 .cta{background:var(--surface-alt);border:1px solid var(--border-neutral);border-radius:12px;padding:24px}
.ffb2 .cta h2{margin-bottom:12px}
.ffb2 .cta>p{font-size:1.0625rem;margin-bottom:24px}
.ffb2 .cta .form{background:none;border:0;padding:0}
.ffb2 .cta .aside{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border-neutral);font-size:.9375rem}
.ffb2 .cta .aside b{display:block;color:var(--content)}
@media (min-width:768px){.ffb2 .cta{padding:32px}}
@media (min-width:1024px){.ffb2 .shop{grid-template-columns:5fr 7fr;gap:64px;margin-bottom:64px}
.ffb2 .final{grid-template-columns:6fr 5fr;gap:64px;align-items:start}
.ffb2 .band .terms{padding:4px 32px 28px}}
/* Hero drawings use the same line weight as the icons: a fixed 2px ink line at any size */
.ffb2 .hero .fxs .k,.ffb2 .hero .fxs .kp,.ffb2 .hero .fxs .kb,.ffb2 .hero .fxs .kw,.ffb2 .hero .fxs .kf,.ffb2 .hero .fxs .kd{stroke-width:2;vector-effect:non-scaling-stroke}
.ffb2 .hero .fxs .thin{stroke-width:1.5}
.ffb2 .hero .fxs .wl{stroke-width:2.5;vector-effect:non-scaling-stroke}
/* ===== v9 ===== */
/* Work examples without names: what was sent, how much, what came back */
.ffb2 .ex{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ffb2 .ex li{display:grid;align-content:start;gap:8px;background:var(--surface);border:1px solid var(--border-neutral);border-radius:12px;padding:24px}
.ffb2 .ex .org{font-size:.875rem;font-weight:600;color:var(--content-secondary)}
.ffb2 .ex .num{display:flex;align-items:baseline;gap:10px;margin:4px 0 4px}
.ffb2 .ex .num b{font-size:clamp(2.5rem,5vw,3.25rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--content)}
.ffb2 .ex .num span{font-size:1.125rem;font-weight:700;color:var(--content);line-height:1.25}
.ffb2 .ex p{font-size:.9375rem}
@media (min-width:1024px){.ffb2 .ex{grid-template-columns:repeat(3,1fr);gap:24px}
.ffb2 .ex li{padding:28px 32px}}
/* Quote panel: a brand tint instead of grey, fields sized to the v4 forms spec */
.ffb2 .cta{background:var(--wash-brand-faint);border:1px solid var(--border-subtle)}
.ffb2 .cta .form label{font-size:.875rem}
.ffb2 .cta .form .in{display:flex;align-items:center;padding:0 16px;background:var(--surface);border:1px solid var(--border-interactive);font-size:.9375rem;font-weight:400;color:var(--content-secondary)}
.ffb2 .cta .form .ta{align-items:flex-start;padding-top:14px}
.ffb2 .cta .form .sel{position:relative;padding-right:44px}
.ffb2 .cta .form .sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--action);border-bottom:2px solid var(--action);transform:translateY(-70%) rotate(45deg)}
.ffb2 .cta .form .btn{width:100%}
.ffb2 .cta .note{margin-top:12px;font-size:.8125rem;color:var(--content-secondary)}
@media (min-width:768px){.ffb2 .cta .form .btn{width:auto}}
.ffb2 .band .ws-more,.ffb2 .band .ws-body a{color:var(--accent-inverse)}
/* ===== v13 (from v12): the site's own page language ===== */
.ffb2 .hero{background:var(--surface);background-image:none}
.ffb2 .hero .fxs{max-width:440px}
.ffb2 .btn-o{background:transparent;color:var(--action)}
.ffb2 .btn-o:hover{background:transparent;color:var(--action-hover);border-color:var(--action-hover)}
.ffb2 .head.c{margin-left:auto;margin-right:auto;text-align:center}
.ffb2 .faq.narrow{max-width:820px;margin:0 auto}
/* Related services, as on Diagnostics: "After the Diagnosis" */
.ffb2 .rel{display:grid;gap:12px}
.ffb2 .rel-card{display:grid;gap:6px;padding:20px 24px;background:var(--surface-alt);border:1px solid var(--border-neutral);border-radius:12px;color:var(--content-body);text-decoration:none;transition:border-color .2s ease}
.ffb2 .rel-card:hover{border-color:var(--border-active)}
.ffb2 .rel-card b{color:var(--content);font-size:1.0625rem}
.ffb2 .rel-card span{font-size:.9375rem}
/* One form, centred */
.ffb2 .form.solo{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border-neutral)}
.ffb2 .form.solo .in{display:flex;align-items:center;padding:0 16px;background:var(--surface);border:1px solid var(--border-interactive);font-size:.9375rem;color:var(--content-secondary)}
.ffb2 .form.solo .ta{align-items:flex-start;padding-top:14px}
.ffb2 .form.solo .sel{position:relative;padding-right:44px}
.ffb2 .form.solo .sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--action);border-bottom:2px solid var(--action);transform:translateY(-70%) rotate(45deg)}
.ffb2 .form.solo .note{font-size:.8125rem;color:var(--content-secondary)}
.ffb2 .form.solo .aside{padding-top:16px;border-top:1px solid var(--border-neutral);font-size:.9375rem}
.ffb2 .form.solo .aside b{display:block;color:var(--content)}
.ffb2 .split2{display:grid;gap:40px;align-items:center}
.ffb2 .facts3{display:grid;gap:0;margin:48px 0 0;border-top:1px solid var(--border-neutral)}
.ffb2 .facts3>div{padding:20px 0;border-bottom:1px solid var(--border-neutral)}
.ffb2 .facts3 dt{font-weight:700;color:var(--content)}
.ffb2 .facts3 dd{margin:4px 0 0;font-size:.9375rem}
@media (min-width:768px){.ffb2 .rel{grid-template-columns:repeat(3,1fr);gap:16px}
.ffb2 .facts3{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border-neutral)}
.ffb2 .facts3>div{padding:24px 32px 24px 0;border-bottom:0}
.ffb2 .facts3>div+div{padding-left:32px;border-left:1px solid var(--border-neutral)}}
@media (min-width:1024px){.ffb2 .split2{grid-template-columns:1fr 1fr;gap:64px}}
/* Ink band in the dark register (same gate as the theme: html.ff-dm) */
html.ff-dm[data-theme="dark"] .ffb2 .band{background:var(--surface-inverse-raised);--surface:var(--ink-850)}
@media (prefers-color-scheme:dark){html.ff-dm:not([data-theme="light"]) .ffb2 .band{background:var(--surface-inverse-raised);--surface:var(--ink-850)}}
/* The real form is WPForms, styled by the theme; this is only its panel */
.ffb2 .form-panel{max-width:760px;margin:0 auto;padding:24px;background:var(--surface);border:1px solid var(--border-neutral);border-radius:12px}
.ffb2 .form-panel .aside{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-neutral);font-size:.9375rem}
.ffb2 .form-panel .aside b{display:block;color:var(--content)}
.ffb2 .form-panel .aside a{display:inline-block;padding:10px 0;margin:-10px 0}
@media (min-width:768px){.ffb2 .form-panel{padding:32px}}
/* ===== Business ===== */
/* Hero: pick who you are, see your own job record move through the bench */
#ff-bh .hero .wrap{align-items:center}
#ff-bh .prog{position:relative;width:100%;max-width:520px;margin:0 auto}
#ff-bh .prog::before{content:"";position:absolute;left:50%;top:56%;width:min(100%,500px);aspect-ratio:1;border-radius:50%;background:var(--wash-brand-soft);transform:translate(-50%,-50%);z-index:0}
#ff-bh .prog-tabs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
#ff-bh .prog-tabs button{min-height:44px;padding:0 14px;border:1px solid var(--border-interactive);border-radius:9999px;background:var(--surface);color:var(--content);font:600 .875rem/1 var(--font-stack);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
#ff-bh .prog-tabs button:hover{border-color:var(--border-active)}
#ff-bh .prog-tabs button[aria-selected="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
#ff-bh .prog-tabs button:focus-visible{outline:2px solid var(--action);outline-offset:2px}
#ff-bh .pp{position:relative;z-index:1;background:var(--surface);border:2px solid var(--content);border-radius:12px;padding:28px 24px 24px}
#ff-bh .pp::before{content:"";position:absolute;left:50%;top:-12px;width:88px;height:22px;margin-left:-44px;border-radius:6px;background:var(--content)}
/* All five records share one grid cell, so the card keeps the tallest one's height and the hero never jumps */
#ff-bh .pp-stack{position:relative;z-index:1;display:grid}
#ff-bh .pp{grid-area:1/1}
#ff-bh .pp[hidden]{display:block;visibility:hidden}
#ff-bh .pp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--content)}
#ff-bh .pp-head b{font-size:1.25rem;font-weight:800;letter-spacing:.02em;color:var(--content)}
#ff-bh .pp-head span{font-size:.875rem;font-weight:600;color:var(--content-secondary);text-align:right}
#ff-bh .pp-rows{margin:0;display:grid}
#ff-bh .pp-rows div{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-neutral)}
#ff-bh .pp-rows dt{font-size:.875rem;color:var(--content-secondary)}
#ff-bh .pp-rows dd{margin:0;font-size:.9375rem;font-weight:600;color:var(--content);line-height:1.4}
#ff-bh .pp-stages{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
#ff-bh .pp-stages::before,#ff-bh .pp-stages::after{content:"";position:absolute;top:13px;left:12.5%;right:12.5%;height:2px;background:var(--border-neutral)}
#ff-bh .pp-stages::after{background:var(--accent-warm);transform-origin:left center}
#ff-bh .pp-stages li{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--content);text-align:center;line-height:1.25}
#ff-bh .pp-stages li::before{content:"";width:28px;height:28px;border-radius:50%;border:2px solid var(--content);background:var(--accent-warm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 14.5l3.5 3.5 7.5-8' fill='none' stroke='%23101517' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (prefers-reduced-motion:no-preference){#ff-bh .pp.run .pp-stages::after{animation:bh-line 1.6s cubic-bezier(.4,0,.2,1) both}
#ff-bh .pp.run .pp-stages li::before{animation:bh-stage .35s cubic-bezier(.4,0,.2,1) both}
#ff-bh .pp.run .pp-stages li:nth-child(1)::before{animation-delay:.15s}
#ff-bh .pp.run .pp-stages li:nth-child(2)::before{animation-delay:.6s}
#ff-bh .pp.run .pp-stages li:nth-child(3)::before{animation-delay:1.05s}
#ff-bh .pp.run .pp-stages li:nth-child(4)::before{animation-delay:1.5s}}
/* One keyframe system: the record's stages tick off in turn */
@keyframes bh-stage{from{background-color:var(--surface);background-size:0 0}to{background-color:var(--accent-warm);background-size:100% 100%}}
@keyframes bh-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:768px){#ff-bh .pp{padding:32px 32px 28px}}
@media (min-width:1024px){#ff-bh .prog{margin:0 0 0 auto}
#ff-bh .prog::before{width:min(112%,500px)}}
/* Who we run programmes for: one plain grid, the sixth cell points repairers to Trade */
#ff-bh .who{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--border-neutral)}
#ff-bh .who li{padding:24px 0;border-bottom:1px solid var(--border-neutral)}
#ff-bh .who h3{margin-bottom:8px}
#ff-bh .who p{font-size:.9375rem}
#ff-bh .who li.to-trade{display:flex;align-items:center}
#ff-bh .who li.to-trade p{font-size:1rem}
#ff-bh .who li.to-trade a{font-weight:700}
@media (min-width:768px){#ff-bh .who{grid-template-columns:1fr 1fr;column-gap:48px}}
@media (min-width:1024px){#ff-bh .who{grid-template-columns:repeat(3,1fr);column-gap:48px}
#ff-bh .who li{padding:28px 0}}
/* How a programme runs: steps beside the report that comes back */
#ff-bh .steps-v{list-style:none;margin:0;padding:0;display:grid;gap:24px;counter-reset:s}
#ff-bh .steps-v li{display:grid;grid-template-columns:40px 1fr;gap:2px 16px}
#ff-bh .steps-v li::before{counter-increment:s;content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--action);color:var(--action);display:grid;place-items:center;font-weight:800;font-size:.875rem}
#ff-bh .steps-v h3{font-size:1.0625rem;padding-top:4px}
#ff-bh .steps-v p{font-size:.9375rem}
#ff-bh .report{border:1px solid var(--border-neutral);border-radius:12px;background:var(--surface);padding:24px}
#ff-bh .report h3{font-size:1.0625rem;margin-bottom:4px}
#ff-bh .report .sub{font-size:.875rem;color:var(--content-secondary);margin-bottom:16px}
#ff-bh .report dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-neutral);border:1px solid var(--border-neutral);border-radius:10px;overflow:hidden}
#ff-bh .report dl div{background:var(--surface);padding:12px 14px}
#ff-bh .report dt{font-size:.8125rem;color:var(--content-secondary)}
#ff-bh .report dd{margin:2px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--content);line-height:1.2}
#ff-bh .report h4{margin:24px 0 10px;font-size:.9375rem;font-weight:700;color:var(--content)}
#ff-bh .faults{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#ff-bh .faults li{display:grid;grid-template-columns:8.5rem 1fr 2rem;align-items:center;gap:12px;font-size:.875rem;color:var(--content)}
#ff-bh .faults i{display:block;height:8px;border-radius:4px;background:var(--accent)}
#ff-bh .faults b{text-align:right;font-weight:700}
@media (min-width:640px){#ff-bh .report dl{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px){#ff-bh .report{padding:32px}}
#ff-bh .terms + .byemail{margin-top:20px}
/* Which device: an accordion, as "What Changes by Device" on Diagnostics */
#ff-bh .acc{max-width:none;display:grid;gap:12px;align-items:start}
@media (min-width:1024px){#ff-bh .acc{grid-template-columns:1fr 1fr;gap:16px}}
#ff-bh .acc summary{gap:12px}
#ff-bh .acc .ico.mini{width:40px;height:auto;margin:0;flex:none}
#ff-bh .acc details p{padding-left:72px}
/* Ledger of jobs beside the photo */
#ff-bh .work{display:grid;gap:40px;align-items:center}
#ff-bh .work img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:640px;object-fit:cover;border-radius:12px}
#ff-bh .rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-neutral)}
#ff-bh .rows li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--border-neutral)}
#ff-bh .rows .org{font-size:.875rem;font-weight:600;color:var(--content-secondary)}
#ff-bh .rows .n{display:flex;align-items:baseline;gap:10px}
#ff-bh .rows .n b{font-size:2.25rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--content)}
#ff-bh .rows .n span{font-weight:700;color:var(--content)}
#ff-bh .rows p{font-size:.9375rem}
@media (min-width:1024px){#ff-bh .work{grid-template-columns:4fr 6fr;gap:64px}}
/* ===== Trade ===== */
/* ===== Trade Repair Services ===== */
#ff-tr .lens{transform:translateY(0)}
@media (prefers-reduced-motion:no-preference){#ff-tr .lens{animation:tr-dive 7s cubic-bezier(.4,0,.2,1) infinite}}
/* The lens goes past the line most shops stop at, down to the motherboard */
@keyframes tr-dive{0%,8%{transform:translateY(0)}46%,84%{transform:translateY(234px)}100%{transform:translateY(0)}}
/* Who sends us work: rows with what you send and what comes back */
#ff-tr .partners{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-neutral)}
#ff-tr .partners li{display:grid;grid-template-columns:72px 1fr;gap:6px 24px;padding:28px 0;border-bottom:1px solid var(--border-neutral)}
#ff-tr .partners .ico{width:72px;margin:0;grid-row:span 3}
#ff-tr .partners h3{margin-top:2px}
#ff-tr .partners p{font-size:.9375rem}
#ff-tr .partners p b{color:var(--content)}
#ff-tr .partners p a{font-weight:600}
@media (min-width:1024px){#ff-tr .partners li{grid-template-columns:96px 280px 1fr 1fr;gap:32px;align-items:start}
#ff-tr .partners .ico{width:96px;grid-row:auto}}
/* The deal: the one dark section, as the cost section on Diagnostics */
#ff-tr .loop{display:grid;gap:16px}
#ff-tr .node{background:var(--surface);border:1px solid var(--rule-inverse);border-radius:12px;padding:24px}
#ff-tr .node h3{margin-bottom:8px}
#ff-tr .node p,#ff-tr .node li{font-size:.9375rem}
#ff-tr .node ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
#ff-tr .node li{display:grid;grid-template-columns:28px 1fr;gap:12px}
#ff-tr .node li b{font-size:1.25rem;font-weight:900;color:var(--accent-warm);line-height:1.2}
#ff-tr .legs{display:grid;gap:12px;justify-items:center}
#ff-tr .leg{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--content);font-size:.9375rem}
#ff-tr .leg svg{width:20px;height:44px;flex:none}
#ff-tr .leg .ar{stroke:var(--accent-warm);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
#ff-tr .leg .dash{stroke-dasharray:3 5}
#ff-tr .leg .h{display:none}
#ff-tr .band .ws-more{color:var(--accent-inverse)}
@media (min-width:1024px){#ff-tr .loop{grid-template-columns:5fr 3fr 5fr;align-items:center;gap:24px}
#ff-tr .node{padding:32px}
#ff-tr .legs{gap:28px}
#ff-tr .leg{flex-direction:column;gap:6px;text-align:center}
#ff-tr .leg .v{display:none}
#ff-tr .leg .h{display:block;width:100%}
#ff-tr .leg .h svg{width:100%;height:20px}}
#ff-tr .elsewhere{margin-top:24px;font-size:1rem}
#ff-tr .elsewhere a{font-weight:700}
#ff-tr .shop2{display:grid;gap:32px;align-items:center;margin-bottom:48px}
#ff-tr .shop2 img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
@media (min-width:1024px){#ff-tr .shop2{grid-template-columns:5fr 7fr;gap:64px}}
/* ===== Schools ===== */
/* ===== Services for Schools ===== */
#ff-sc .fixd{display:none}
/* Static drawing: the year bar carries the motion */
#ff-sc .t-lab{font:700 11px var(--font-stack);fill:var(--content-secondary);letter-spacing:.08em}
#ff-sc .t-row{font:600 13px var(--font-stack);fill:var(--content)}
#ff-sc .t-job{font:800 16px var(--font-stack);fill:var(--content);letter-spacing:.04em}
#ff-sc .t-sum{font:800 14px var(--font-stack);fill:var(--content)}
#ff-sc .t-more{font:600 13px var(--font-stack);fill:var(--content-secondary)}
/* The school year: terms in paper, holidays in saffron */
#ff-sc .year{display:grid;gap:40px}
#ff-sc .months{display:none}
#ff-sc .bar{position:relative;display:grid;gap:8px}
#ff-sc .seg{position:relative;display:flex;align-items:center;min-height:48px;padding:0 16px;border:2px solid var(--content);border-radius:10px;font-weight:700;font-size:.9375rem;color:var(--content);background:var(--surface)}
#ff-sc .seg.h{background:var(--accent-warm)}
#ff-sc .seg .ht{position:absolute;top:-2px;bottom:-2px;width:8%;background:var(--accent-warm);border-left:2px solid var(--content);border-right:2px solid var(--content)}
#ff-sc .seg span{position:relative}
#ff-sc .mark{display:none}
#ff-sc .notes{display:grid;gap:24px}
#ff-sc .notes h3{margin-bottom:8px}
#ff-sc .notes p{font-size:.9375rem}
/* Fleet assessment sheet */
#ff-sc .rr{display:grid;gap:40px;align-items:center}
#ff-sc .rr h2{margin-bottom:24px}
#ff-sc .rr p + p{margin-top:16px}
#ff-sc .sheet{border:2px solid var(--content);border-radius:12px;background:var(--surface);padding:24px;width:100%;max-width:520px}
#ff-sc .sheet h3{font-size:1.0625rem;margin-bottom:4px}
#ff-sc .sheet .sub{font-size:.875rem;color:var(--content-secondary);margin-bottom:16px}
#ff-sc .sheet table{width:100%;border-collapse:collapse;font-size:.875rem}
#ff-sc .sheet th{text-align:left;font-weight:600;color:var(--content-secondary);padding:0 8px 8px 0;border-bottom:2px solid var(--content)}
#ff-sc .sheet td{padding:12px 8px 12px 0;border-bottom:1px solid var(--border-neutral)}
#ff-sc .sheet td:last-child,#ff-sc .sheet th:last-child{text-align:right;padding-right:0}
#ff-sc .v{font-weight:800;color:var(--action)}
#ff-sc .v.x{color:var(--content)}
#ff-sc .sheet td:first-child,#ff-sc .sheet td:last-child{white-space:nowrap}
@media (max-width:480px){#ff-sc .sheet{padding:20px 16px}
#ff-sc .sheet th:nth-child(3),#ff-sc .sheet td:nth-child(3){display:none}}
#ff-sc .sheet .tot{display:flex;justify-content:space-between;margin-top:16px;font-weight:700;color:var(--content);font-size:.9375rem}
@media (min-width:768px){#ff-sc .months{display:grid;grid-template-columns:repeat(12,1fr);font-size:.8125rem;font-weight:600;color:var(--content-secondary);margin-bottom:12px}
#ff-sc .bar{display:flex;gap:4px}
#ff-sc .seg{flex:var(--w) 1 0;min-height:112px;padding:0 16px}
#ff-sc .seg.h{padding:0;justify-content:center}
#ff-sc .seg.h span{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.875rem}
#ff-sc .mark{display:block;position:absolute;top:-12px;bottom:-12px;left:0;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--action);opacity:0}
#ff-sc .notes{grid-template-columns:1fr 1fr;gap:64px;margin-top:24px}
#ff-sc .sheet{padding:32px}
@media (prefers-reduced-motion:no-preference){#ff-sc .mark{animation:sc-sweep 12s linear infinite}
#ff-sc .seg.h{animation:sc-xmas 12s linear infinite}
#ff-sc .seg.e{animation-name:sc-easter}
#ff-sc .seg.s{animation-name:sc-summer}}}
@media (min-width:1024px){#ff-sc .rr{grid-template-columns:1fr 1fr;gap:64px}}
/* One timeline: the marker crosses the year, each holiday fills as it arrives */
@keyframes sc-sweep{0%{left:0;opacity:1}92%{left:100%;opacity:1}96%,100%{left:100%;opacity:0}}
@keyframes sc-xmas{0%,27%{background:var(--surface)}29%,96%{background:var(--accent-warm)}100%{background:var(--surface)}}
@keyframes sc-easter{0%,52%{background:var(--surface)}54%,96%{background:var(--accent-warm)}100%{background:var(--surface)}}
@keyframes sc-summer{0%,80%{background:var(--surface)}82%,96%{background:var(--accent-warm)}100%{background:var(--surface)}}
/* The year on the ink band */
#ff-sc .band .seg.h{color:var(--ink-950)}
#ff-sc .band .mark{background:var(--accent-inverse)}
@media (min-width:768px){#ff-sc .band .seg.h span{color:var(--content-inverse)}}
#ff-sc .notes{display:grid;gap:24px;margin-top:40px}
#ff-sc .notes h3{margin-bottom:8px}
#ff-sc .notes p{font-size:.9375rem}
@media (min-width:768px){#ff-sc .notes{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}}
/* Assessment sheet */
#ff-sc .sheet{border:1px solid var(--border-neutral);border-radius:12px;background:var(--surface);padding:24px;width:100%;max-width:560px}
#ff-sc .sheet h3{font-size:1.0625rem;margin-bottom:4px}
#ff-sc .sheet .sub{font-size:.875rem;color:var(--content-secondary);margin-bottom:16px}
#ff-sc .sheet table{width:100%;border-collapse:collapse;font-size:.9375rem}
#ff-sc .sheet th{text-align:left;font-size:.8125rem;font-weight:600;color:var(--content-secondary);padding:0 8px 10px 0;border-bottom:2px solid var(--content)}
#ff-sc .sheet td{padding:12px 8px 12px 0;border-bottom:1px solid var(--border-neutral)}
#ff-sc .sheet td:last-child,#ff-sc .sheet th:last-child{text-align:right;padding-right:0}
#ff-sc .v{font-weight:800;color:var(--action)}
#ff-sc .v.x{color:var(--content)}
#ff-sc .sheet .tot{display:flex;justify-content:space-between;margin-top:16px;font-weight:700;color:var(--content);font-size:.9375rem}
@media (min-width:768px){#ff-sc .sheet{padding:32px}}
/* Phones: the verdict is the point of the sheet, so it stays; the fault wraps instead */
@media (max-width:480px){#ff-sc .sheet table{font-size:.875rem}
#ff-sc .sheet th:nth-child(3),#ff-sc .sheet td:nth-child(3){display:table-cell}}
/* What we take on: two plain lines under the repair-or-replace text */
#ff-sc .devs{display:grid;gap:16px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--border-neutral)}
#ff-sc .devs dt{font-weight:700;color:var(--content)}
#ff-sc .devs dd{margin:4px 0 0;font-size:.9375rem}
#ff-sc .devs a{font-weight:600}
/* Terms wrap to two lines on narrower columns: keep the email line clear of them */
#ff-sc .terms + .byemail{margin-top:20px}
/* Two white sections in a row: the space between them is one section gap, not two */
#ff-sc .sec.cont{padding-top:0}
/* Photos come from the media library at their own proportions; CSS frames them */
#ff-bh .work img{object-position:50% 100%}