/* Keyfolio public website. No external fonts or frameworks. */
@font-face{font-family:"Keyfolio Serif";src:url(../fonts/lora-latin.woff2?v=348eab9c3c) format("woff2"),url(../fonts/lora-latin.woff?v=6fa626e5ab) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --deep:#0e2f26;--green:#123d31;--green-2:#1c5443;--link:#1d6a50;--lime:#d4e98e;--lime-2:#c2dd6c;
  --mist:#eef4ef;--paper:#fff;--bg:#f7f9f6;--ink:#13261e;--ink-2:#34493f;--muted:#5b6e65;--line:#d8e3dc;--line-2:#b9cabf;
  --amber-bg:#fff3d1;--amber:#6d4c0c;--red:#b42318;--red-bg:#fdeceb;--focus:#ffbf47;
  --serif:"Keyfolio Serif",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-sm:7px;--r:12px;--r-lg:18px;--wrap:1180px;
  /* shadows tinted with the deep green rather than grey: resting, lifted and floating */
  --shadow-sm:0 1px 2px rgba(14,47,38,.07),0 2px 8px -4px rgba(14,47,38,.12);
  --shadow-md:0 1px 2px rgba(14,47,38,.06),0 14px 32px -18px rgba(14,47,38,.42);
  --shadow-lg:0 2px 6px rgba(14,47,38,.06),0 30px 60px -28px rgba(14,47,38,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-feature-settings:"kern"}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--green);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a:focus-visible{background:var(--focus);color:var(--ink);outline-color:var(--focus);box-shadow:0 3px 0 var(--ink);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;color:var(--ink)}
h1{font:600 clamp(1.85rem,4.6vw,3.25rem)/1.1 var(--serif);letter-spacing:-.01em}
h2{font:600 clamp(1.45rem,2.6vw,1.95rem)/1.2 var(--serif)}
h3{font-size:1.12rem;font-weight:650}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em}
li{margin:.25em 0}
[hidden]{display:none!important}  /* what the page script hides stays hidden, whatever display a component has */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--focus);color:var(--ink);padding:10px 16px;font-weight:700}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:20px;padding-right:20px}
.nowrap{white-space:nowrap}
.narrow{max-width:780px}
.small{font-size:.9rem;color:var(--muted)}
.lede{font-size:1.18rem;color:var(--ink-2);max-width:62ch}
.kicker{font-size:.9rem;font-weight:650;color:var(--link);margin-bottom:.4em}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
main{display:block;min-height:50vh}
main:focus{outline:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:10px;border:2px solid transparent;
  font:650 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;background-clip:padding-box}
.btn-primary{background:var(--green);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 18px -12px rgba(14,47,38,.75)}
.btn-primary:hover{background:var(--deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 22px -12px rgba(14,47,38,.8)}
.btn-lime{background:var(--lime);color:var(--deep);box-shadow:0 10px 22px -14px rgba(0,0,0,.6)}
.btn-lime:hover{background:var(--lime-2);color:var(--deep)}
.btn-secondary{background:var(--paper);color:var(--green);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--green);color:var(--deep)}
/* (41.41.1, from the review) a button that cannot be pressed yet looks it */
.btn:disabled,.btn:disabled:hover{opacity:.55;cursor:not-allowed;transform:none;border-color:var(--line-2)}
.btn-large{min-height:54px;padding:10px 26px;font-size:1.06rem}
.btn-block{width:100%}
.btn-link{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;font:inherit;cursor:pointer}
/* (41.52.0) the small button that renews a quote beside its date: 24 pixels high or more, as what is pressed is */
.renew-line .btn-link{padding:3px 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.text-link-light{color:#fff;font-weight:600}
.text-link-light:hover{color:var(--lime)}

/* Header */
.preview-bar{background:var(--amber-bg);color:var(--amber);font-size:.92rem;border-bottom:1px solid #edd9a3}
.preview-bar .wrap{padding-top:8px;padding-bottom:8px}
.preview-bar a{color:var(--amber);font-weight:650}
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;transition:box-shadow .2s ease}
.site-header.is-stuck{box-shadow:0 10px 24px -18px rgba(14,47,38,.55)}
html{scroll-padding-top:96px}
.header-row{display:flex;align-items:center;gap:28px;min-height:74px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 1.45rem/1 var(--serif);letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;flex:none}
.brand:hover{color:var(--green)}
/* Each menu item stays on one line. A menu too long for the header (the owner's own items, Website settings) wraps onto a
   second line rather than pushing the button off the page, and the page script then switches to the Menu button
   (.too-wide), as on a phone. */
.primary-nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.primary-nav a{position:relative;display:block;white-space:nowrap;padding:10px 12px;color:var(--ink-2);text-decoration:none;font-weight:550;border-radius:var(--r-sm);
  transition:background-color .15s ease,color .15s ease}
.primary-nav a:hover{color:var(--green);background:var(--mist)}
.primary-nav a[aria-current]{color:var(--green)}
.primary-nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-15px;height:3px;border-radius:3px 3px 0 0;background:var(--green)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px;flex:none}
.header-actions a{white-space:nowrap}
.quiet-link{color:var(--ink-2);font-weight:550;text-decoration:none}
.quiet-link:hover{color:var(--green);text-decoration:underline}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:650;padding:10px 12px;border:2px solid var(--line-2);border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu-icon{width:18px;height:12px;position:relative;display:inline-block;flex:none}
.menu-icon::before,.menu-icon::after,.menu-icon>span{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:1px;background:currentColor;
  transition:transform .22s ease,opacity .15s ease}
.menu-icon::before{top:0}
.menu-icon>span{top:5px}
.menu-icon::after{top:10px}
.menu[open] .menu-icon::before{transform:translateY(5px) rotate(45deg)}
.menu[open] .menu-icon::after{transform:translateY(-5px) rotate(-45deg)}
.menu[open] .menu-icon>span{opacity:0}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(14,47,38,.12)}
.menu nav ul{list-style:none;margin:0;padding:8px 20px 16px}
.menu nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
@media (max-width:960px){.primary-nav,.header-actions{display:none}.menu{display:block}}
.site-header.too-wide .primary-nav,.site-header.too-wide .header-actions{display:none}
.site-header.too-wide .menu{display:block}
/* Where the menu folds into the Menu button (a phone, a tablet), the way to a quote stays in the header beside it (41.6.0),
   as it is at a desk; on the narrowest screens the Menu button shows its drawing alone (its name is still read out). */
.header-quote{display:none}
@media (max-width:960px){.header-row{gap:12px}.header-quote{display:inline-flex;margin-left:auto;padding:9px 14px;font-size:.95rem}.header-quote+.menu{margin-left:0}}
.site-header.too-wide .header-quote{display:inline-flex;margin-left:auto;padding:9px 14px;font-size:.95rem}
.site-header.too-wide .header-quote+.menu{margin-left:0}
.site-header.too-wide .header-row{gap:12px}
@media (max-width:400px){.header-row{gap:12px}.menu summary{font-size:0;gap:0;padding:12px 11px}.header-quote{padding:8px 12px;font-size:.9rem;white-space:nowrap}}
.crumbs{padding-top:18px;padding-bottom:4px;font-size:.9rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;color:var(--muted)}
.crumbs li{margin:0;white-space:nowrap}
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--line-2)}
.crumbs li[aria-current]{white-space:normal}

/* Hero and estimator */
.hero{background:var(--green);color:#e8f2ec;padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,440px);gap:56px;align-items:center}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4rem);margin-bottom:.4em}
.hero .lede{color:#d5e6dc;font-size:1.22rem}
.hero .kicker{color:var(--lime)}  /* a partner's name over the dark hero, readable */
.hero .hero-disclosure{color:#d5e6dc;font-size:.95rem;max-width:62ch;margin:-.1em 0 1.2em}  /* what the partner is paid, before anything else */
.hero .hero-disclosure a{color:#fff}
.hero-points{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:8px}
.hero-points li{padding-left:28px;position:relative;margin:0}
.hero-points li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.statement{background:var(--paper);color:var(--ink);border-radius:4px 4px var(--r-lg) var(--r-lg);padding:30px 26px 24px;position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font-size:1rem}
.statement::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--paper) 7.5px) 0 0/18px 10px repeat-x}
.statement h2{font-size:1.35rem;margin-bottom:16px}
.est-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:18px}
.est-fields label{display:flex;flex-direction:column;gap:5px;font-size:.88rem;font-weight:650;color:var(--ink-2)}
.est-fields .est-wide{grid-column:1/-1}
.est-fields .choice{flex-direction:row;align-items:center;font-weight:500;color:var(--ink)}
/* Yes or no in the quick estimate as a switch: the real box, drawn as a track whose knob slides across when it is on */
.est-fields .choice input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--bg);cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.est-fields .choice input::before{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--paper);
  box-shadow:0 1px 2px rgba(14,47,38,.35);transition:transform .2s cubic-bezier(.3,1.3,.5,1)}
.est-fields .choice input:checked{background:var(--green);border-color:var(--green)}
.est-fields .choice input:checked::before{transform:translateX(16px);background:var(--lime)}
.est-fields .choice input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.statement-body{border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);padding:14px 0;margin-bottom:12px;min-height:150px}
.line{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;font-variant-numeric:tabular-nums}
.line .dots{flex:1;border-bottom:2px dotted var(--line-2);transform:translateY(-4px);min-width:20px}
.line .amt{font-weight:600;white-space:nowrap}
.line-note{margin:-3px 0 9px;font-size:.84rem;line-height:1.45;color:var(--muted)}  /* what disbursements are, beside them (41.36.1) */
.line-total.line-solo{margin-top:2px;padding-top:0;border-top:0}  /* the estimate's one figure (41.36.1): the legal fees */
.line-solo+.line-note{margin:10px 0 0}
@media (max-width:420px){  /* on a phone, the figure under its words, as on a receipt, never one word on a line of its own */
  .line-total.line-solo{flex-wrap:wrap;row-gap:4px}
  .line-total.line-solo>span:first-child{flex:1 0 100%}
  .line-total.line-solo .dots{display:none}
  .line-total.line-solo .amt{margin-left:auto}
}
.line-total{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.line-total span:first-child{font-weight:700}
.line-total .amt{font:600 1.7rem/1 var(--serif);color:var(--green)}
.statement-note{font-size:.84rem;color:var(--muted);margin-bottom:14px}
.statement .changing .amt{opacity:.35}
.statement .amt{transition:opacity .2s}
.hero .line-total .amt{background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .3em no-repeat;padding:0 .06em}  /* the total, marked */
/* Each line of the home page heading is its own box, so it can slide up into place (Motion); the padding keeps the
   letters' tails and accents inside it without moving anything. */
.hero h1 .ln{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .08em .16em 0;margin:-.05em -.08em -.16em 0}
.hero h1 .ln>span{display:inline-block}
/* The street plan behind the estimate (art.py, Website settings): drawn in the accent colour, faint and fading away from
   the property, whose boundary is edged in full. Decoration only, under everything else at the top of the page. */
.hero-grid{position:relative}
.hero-copy{position:relative;z-index:1}
.hero .statement{z-index:1}
.hero-plan{position:absolute;right:-196px;bottom:-72px;width:980px;height:420px;max-width:none;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(310px 250px at 250px 300px,#000 34%,rgba(0,0,0,.45) 60%,transparent 86%);
  mask-image:radial-gradient(310px 250px at 250px 300px,#000 34%,rgba(0,0,0,.45) 60%,transparent 86%)}
.pl-road{fill:rgba(212,233,142,.05);fill:color-mix(in srgb,var(--lime) 5%,transparent)}
.pl-edge{fill:none;stroke:rgba(212,233,142,.26);stroke:color-mix(in srgb,var(--lime) 26%,transparent);stroke-width:1.2}
.pl-plot{fill:none;stroke:rgba(212,233,142,.18);stroke:color-mix(in srgb,var(--lime) 18%,transparent);stroke-width:1}
.pl-bldg{fill:rgba(212,233,142,.07);fill:color-mix(in srgb,var(--lime) 7%,transparent);stroke:rgba(212,233,142,.22);
  stroke:color-mix(in srgb,var(--lime) 22%,transparent);stroke-width:.8}
.pl-subject-fill{fill:rgba(212,233,142,.12);fill:color-mix(in srgb,var(--lime) 12%,transparent)}
.pl-home{fill:rgba(212,233,142,.3);fill:color-mix(in srgb,var(--lime) 30%,transparent);stroke:rgba(212,233,142,.7);
  stroke:color-mix(in srgb,var(--lime) 70%,transparent);stroke-width:1}
.pl-subject{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linejoin:round}
/* Under the introduction (a tablet or phone) the estimate has no space beside it, and the plan would sit behind words: none */
@media (max-width:1100px){.hero-plan{display:none}}  /* below this the plot would crowd the buttons beside it */
@media print{.hero-plan{display:none}}

/* Sections */
.band{padding:72px 0}
.band-tint{background:var(--mist)}
.band-quiet{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-deep{background:var(--deep);color:#d6e6dc}
.band-deep h2{color:#fff}
.band-partner{padding:24px 0 72px}
.band-partner>.wrap{max-width:calc(var(--wrap) - 40px);background:var(--green-2);color:#dcebe2;border-radius:24px;padding:48px 56px;box-shadow:var(--shadow-lg)}
.band-partner h2{color:#fff}
.band-partner p{margin:0}
.band-partner .split{align-items:center}
.band-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:flex-end}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.more-link{margin-top:24px;font-weight:600}
.page-head{padding-top:28px;padding-bottom:12px}
.section-title{margin-top:48px}
.path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
/* Website settings: a home page part the owner hid leaves the rest the whole width. The introduction keeps a reading
   width for its words and sets its key points across the page; the steps on their own sit side by side; a price table
   on its own is as wide as it reads well. */
.hero-grid.solo,.split.solo{grid-template-columns:minmax(0,1fr)}
.hero-grid.solo .lede{max-width:62ch}
.split.solo>*{max-width:880px}
@media (min-width:1001px){
  .hero-grid.solo .hero-points{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:36px}
  .split.solo>:has(>.steps){max-width:none}
  .split.solo .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
  .home .split.solo .steps li::after{display:none}  /* side by side, the steps need no line joining them */
  /* a footer column the owner hid leaves the others the whole width, not an empty column */
  .footer-cols:not(:has(>:nth-child(4))){grid-template-columns:repeat(3,1fr)}
  .footer-cols:not(:has(>:nth-child(3))){grid-template-columns:repeat(2,1fr)}
}
.path-grid.n3{grid-template-columns:repeat(3,1fr)}
.path-grid.n2{grid-template-columns:repeat(2,1fr)}
.path-grid.n1{grid-template-columns:minmax(0,560px)}
/* The home page's paths: a card for each kind of move, its drawing in a tinted square that fills as it is pointed at, and
   a plot's corner marked in the accent colour */
.path{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;text-decoration:none;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:border-color .15s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
/* (41.36.1, as the owner asked: the cards' movement polished) pointing at a card lifts it a little, darkens its edge and draws a
   fine line in the accent colour along its foot, from left to right: a path. Only where a pointer can rest on it, so a tap on a
   phone never leaves a card looking chosen; a press there gives way a little instead. */
.path::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.path-ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:12px;background:var(--mist);color:var(--green-2);
  transition:background-color .18s ease,color .18s ease}
.path-ico svg{width:28px;height:28px;display:block}
.path h3{font:600 1.3rem/1.25 var(--serif);margin-bottom:.3em;color:var(--green)}
.path p{color:var(--muted);margin:0}
@media (hover:hover) and (pointer:fine){
  .path:hover{border-color:var(--green-2);box-shadow:var(--shadow-md);transform:translateY(-3px)}
  .path:hover::after{transform:none}
  .path:hover .path-ico{background:var(--green);color:var(--lime)}
  .path:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
}
.path:focus-visible::after{transform:none}
.path:focus-visible .path-ico{background:var(--green);color:var(--lime)}
.path:active{transform:scale(.985);box-shadow:var(--shadow-sm);transition-duration:.08s}
.steps{counter-reset:step;list-style:none;padding:0;margin:24px 0 0}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 60px;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:-4px;width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--lime);
  font:600 1.25rem/42px var(--serif);text-align:center}
.steps h3{margin-bottom:.25em}
.steps p{margin:0;color:var(--ink-2)}
.home .steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:46px;bottom:4px;width:2px;border-radius:1px;background:var(--line-2)}
.steps-compact li{padding-bottom:12px;padding-left:46px}
.steps-compact li::before{width:32px;height:32px;line-height:32px;font-size:1rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 22px;color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
.card h2,.card h3{font:600 1.22rem/1.3 var(--serif);color:var(--green)}
.card p{color:var(--muted);margin:0}
.card:hover{border-color:var(--green-2);transform:translateY(-2px)}
.card:hover h2,.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.card-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:650;color:var(--link);margin-bottom:10px}
.card-kicker::before{content:"";width:9px;height:9px;border:1.5px solid var(--green-2);border-radius:2px;background:var(--lime);transform:rotate(45deg)}

/* Tables */
.price-table,.band-table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-variant-numeric:tabular-nums}
.price-table th,.price-table td,.band-table th,.band-table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price-table thead th,.band-table thead th{font-size:.82rem;font-weight:650;color:var(--muted);border-bottom:2px solid var(--line-2)}
.price-table tbody th{font-weight:600}
.price-table .num,.band-table .num{text-align:right}
.price-table th.num,.price-table td.num{width:9em}  /* the price columns line up from one table to the next */
.price-table td.num{white-space:normal}  /* an amount in words ("Depends on the price, see above") wraps; a figure has no spaces to break at */
.band-tint .price-table{background:transparent}
.line-desc{display:block;font-weight:400;font-size:.88rem;color:var(--muted);margin-top:2px}
/* (41.30.0) A quote item by item (public.snapshot_table): each line's price, the VAT on it and its total with VAT, in three
   columns named at the head of each group, the total legal costs on a band of their own. In a narrow space (a phone, the
   example beside a service page) the three figures sit under the item's name, in the same three columns. */
.fee-breakdown{container-type:inline-size;margin:14px 0 18px}
.fee-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;line-height:1.45}
.fee-table thead th{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fee-table th,.fee-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.fee-table .num{text-align:right;white-space:nowrap;width:8.4em}
.fee-table tr.group>*{padding-top:26px;padding-bottom:9px;border-bottom:2px solid var(--green);vertical-align:bottom}
.fee-table tbody:first-of-type tr.group>*{padding-top:4px}
.fee-table tr.group th{font:600 1.14rem/1.25 var(--serif);color:var(--green)}
.fee-table .group-note{display:block;margin-top:3px;font:400 .86rem/1.4 var(--sans);color:var(--muted)}
.fee-table td.lbl{font-size:.8125rem;font-weight:650;color:var(--muted);white-space:normal}
.fee-table tr.fee-line th{font-weight:600;color:var(--ink)}
.fee-table .line-name{margin-right:2px}
.fee-table .line-desc{display:block;margin-top:3px;font-size:.86rem;font-weight:400;color:var(--muted)}
.fee-table td.price,.fee-table td.vat{color:var(--ink-2)}
.fee-table td.vat.none{color:var(--muted);font-size:.88rem}
.fee-table td.total{font-weight:700;color:var(--ink)}
.fee-table td.tbc{color:var(--muted);font-style:italic}
.fee-table tr.subtotal>*{background:var(--mist);font-weight:650;color:var(--ink);border-bottom:0}
.fee-table tr.subtotal>th{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.fee-table tr.subtotal>td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* the total legal costs: on the site's green, a little apart from the lines above them (a gap the band does not paint) */
.fee-table tfoot tr.total>*{background:var(--green);background-clip:padding-box;color:#fff;border:0;border-top:14px solid transparent;
  padding-top:15px;padding-bottom:15px;font-size:1.05rem}
.fee-table tfoot tr.total>th{font-weight:700;border-radius:var(--r) 0 0 var(--r)}
.fee-table tfoot tr.total>td:last-child{border-radius:0 var(--r) var(--r) 0}
.fee-table tfoot tr.total td.price,.fee-table tfoot tr.total td.vat{color:#d6e6dc}
.fee-table tfoot tr.total td.total{color:var(--lime);font-size:1.22rem}
.fee-table tfoot tr.tax>*{border-bottom:0;padding-top:16px;font-weight:650;color:var(--ink)}
.fee-table tfoot tr.tax td.words{white-space:normal}
.fee-note{margin:10px 0 0}
/* printed, and in a high contrast mode, the band is a ruled line: a printer leaves out backgrounds, so its words stay dark */
@media print{.fee-table tfoot tr.total>*,.fee-table tfoot tr.total td.price,.fee-table tfoot tr.total td.vat,.fee-table tfoot tr.total td.total{background:none;color:var(--ink);border-top:2px solid var(--ink)}
  .fee-table tfoot tr.total,.fee-table tr.subtotal,.fee-table tr.subtotal>*{background:none}
  /* (41.36.2, from the review) the totals print once, after the items: a table's foot would print again at every page break */
  .fee-table tfoot{display:table-row-group}}
@media (forced-colors:active){.fee-table tfoot tr.total>*{border-top:2px solid CanvasText}}
@container (max-width:540px){
  .fee-table,.fee-table thead,.fee-table tbody,.fee-table tfoot{display:block}
  .fee-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fee-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;align-items:baseline;padding:12px 2px;border-bottom:1px solid var(--line)}
  .fee-table th,.fee-table td{padding:0;border:0;background:none}
  .fee-table .num{width:auto;min-width:0}
  .fee-table tr>th:first-child{grid-column:1/-1;margin-bottom:8px}
  .fee-table td[colspan]{grid-column:1/-1}
  .fee-table tr.group{padding:24px 2px 8px;border-bottom:2px solid var(--green)}
  .fee-table tbody:first-of-type tr.group{padding-top:4px}
  .fee-table tr.group>th{margin-bottom:12px}
  .fee-table tr.group>*{padding:0;border:0}
  .fee-table td.lbl{font-size:.78rem}  /* (41.36.3: never the smallest words on the site) */
  /* (41.31.0) the group totals and the band reach out past the lines by their own padding, so every figure stays in its
     column; the band's figures a little smaller, and smaller again where a figure is long (public.snapshot_table) */
  .fee-table tr.subtotal{background:var(--mist);border:0;border-radius:var(--r-sm);padding:12px 10px;margin:6px -8px 0}
  .fee-table tr.subtotal>*{background:none;border-radius:0}
  .fee-table tfoot tr.total{background:var(--green);border:0;border-radius:var(--r);padding:14px 12px;margin:16px -10px 0}
  .fee-table tfoot tr.total>*{background:none;border:0;padding:0;border-radius:0;font-size:.98rem}
  .fee-table tfoot tr.total>th{margin-bottom:6px;font-size:1.05rem}
  .fee-table tfoot tr.total td.total{font-size:1.06rem}
  .fee-breakdown.long-figures .fee-table .num{font-size:.86rem}
  .fee-breakdown.long-figures .fee-table tfoot tr.total td.total{font-size:.94rem}
  .fee-table tfoot tr.tax{border:0;padding:14px 2px 0}
  .fee-table tfoot tr.tax>*{padding:0}
}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8125rem;font-weight:650;background:var(--mist);color:var(--green-2);vertical-align:2px}
.tag-instant{background:#e3f1c4;color:#2f4a07}
.tag-tailored{background:#e7eef6;color:#244a6e}

/* Article and aside layouts */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;padding-top:28px;padding-bottom:64px}
.prose{max-width:72ch}
.prose h2{margin-top:1.8em}
.prose section:first-of-type h2{margin-top:1.2em}
.legal h2{font-size:1.4rem}
.wrap.narrow{padding-top:28px;padding-bottom:64px}
.wrap.crumbs{padding-top:18px;padding-bottom:4px}  /* a breadcrumb sized for a narrow page is still just a breadcrumb */
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:96px;box-shadow:var(--shadow-md)}
.aside-card h2{font-size:1.3rem}
.aside-sub{margin-top:24px}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{padding:0;border-bottom:1px solid var(--line);margin:0}
.link-list li:last-child{border-bottom:0}
.link-list li>a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 2px;text-decoration:none;font-weight:550;color:var(--green)}
.link-list li>a::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .15s ease,opacity .15s ease}
.link-list li>a:hover{text-decoration:underline;text-decoration-thickness:1px}
.link-list li>a:hover::after{transform:translateX(3px) rotate(45deg);opacity:1}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px 16px;margin:28px 0;box-shadow:var(--shadow-sm)}
.toc h2{font:650 .95rem/1.3 var(--sans);margin:0 0 10px;color:var(--ink-2)}
.toc ol,.toc ul{counter-reset:toc;list-style:none;margin:0;padding:0;columns:2 16rem;column-gap:28px}
.toc li{counter-increment:toc;break-inside:avoid;display:flex;gap:10px;margin:0;padding:5px 0;line-height:1.4}
.toc ol li::before{content:counter(toc);flex:none;min-width:1.4em;font:600 .85rem/1.65 var(--serif);color:var(--muted);font-variant-numeric:tabular-nums}
.toc ul li::before{content:"";flex:none;width:6px;height:6px;margin:.58em 4px 0 2px;border-radius:1px;background:var(--lime-2);transform:rotate(45deg)}
.toc a{text-decoration:none;font-weight:500}
.toc a:hover{text-decoration:underline}
.callout{background:var(--amber-bg);border-left:4px solid #d9a52a;padding:14px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:20px 0}
.callout p:last-child{margin:0}
.related{border-top:1px solid var(--line);padding:32px 0 64px}
.related .link-list{columns:3 260px;column-gap:32px}
.related .link-list li{break-inside:avoid}

/* Services directory */
.filter{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:20px;max-width:760px}
.filter label{font-weight:650;display:block;margin-bottom:6px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1.5px solid var(--line-2);background:var(--paper);border-radius:999px;padding:6px 14px;font:600 .9rem var(--sans);color:var(--ink-2);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.chip:hover{border-color:var(--green)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.service-group{margin:36px 0}
.service-group h2 .count{font:500 .9rem var(--sans);color:var(--muted);margin-left:6px}
.service-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 28px}
.service{margin:0;border-bottom:1px solid var(--line)}
.service a{display:block;padding:16px 0;text-decoration:none;color:var(--ink)}
.service h3{margin:0 0 4px;color:var(--green)}
.service p{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.service a:hover h3{text-decoration:underline}
.service[hidden],.service-group[hidden]{display:none}

/* Forms */
.stack-form,.quote-form{display:block}
.form-section{border:0;margin:0 0 28px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.form-section>legend{padding:0;float:left;width:100%;margin-bottom:14px}
.form-section>*{clear:both}
.form-section>legend{clear:none}
.legend-title{font:600 1.35rem/1.25 var(--serif);color:var(--ink)}
.form-section>.hint{clear:both}
.field{margin:0 0 20px;clear:both;border:0;padding:0}
.field>label,.field .legend{display:block;font-weight:650;margin-bottom:6px;color:var(--ink);font-size:1rem;padding:0}
.optional{font-weight:400;color:var(--muted)}
.hint{color:var(--muted);font-size:.93rem;margin:-2px 0 8px}
.field-error{color:var(--red);font-weight:650;margin:0 0 8px}
.pc-note{color:var(--red);font-weight:650;margin:6px 0 0}
.has-error{border-left:4px solid var(--red);padding-left:14px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea{
  width:100%;min-height:48px;padding:10px 12px;border:1.5px solid #7f978b;border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .15s ease}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input[type=date]{height:48px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:0;border-color:var(--ink)}
[aria-invalid=true]{border-color:var(--red)}
.affix{display:flex;align-items:stretch}
.affix .prefix,.affix .suffix{display:flex;align-items:center;padding:0 12px;background:var(--mist);border:1.5px solid #7f978b;font-weight:650;color:var(--ink-2)}
.affix .prefix{border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.affix .suffix{border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.affix input{border-radius:0 var(--r-sm) var(--r-sm) 0}
.w-sm>input,.w-sm>.affix,.w-sm>select{max-width:220px}.w-md>input,.w-md>.affix,.w-md>select{max-width:340px}.w-lg>input,.w-lg>.affix,.w-lg>select{max-width:520px}
/* On a phone a medium field would stop just short of the others: it takes the full width like them. */
@media (max-width:440px){.w-md>input,.w-md>.affix,.w-md>select{max-width:none}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:end}  /* boxes side by side line up, whatever the hints above them */
/* Better still, the labels, hints, messages and boxes of two fields side by side each line up (each field a subgrid of
   five rows: label, hint, error message, box, and anything after it). */
@supports (grid-template-rows:subgrid){
  .grid-2{align-items:stretch}
  .grid-2>div.field{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
  .grid-2>div.field[hidden]{display:none}  /* a field hidden by the page script stays hidden in the grid */
  .grid-2>div.field>*{grid-column:1;min-width:0}
  .grid-2>div.field>label{grid-row:1;align-self:end}
  .grid-2>div.field>.hint{grid-row:2}
  .grid-2>div.field>.field-error{grid-row:3}
  .grid-2>div.field>:not(label,.hint,.field-error){grid-row:4}
  .grid-2>div.field>.email-suggest{grid-row:5}  /* "Did you mean" under the box, never over it */
}
.grid-2 .field{clear:none}
.choices .choice-list{display:grid;gap:8px}
.choices.inline .choice-list{display:flex;flex-wrap:wrap;gap:8px 24px}
.choice{display:flex;align-items:flex-start;gap:10px;font-weight:450;cursor:pointer;line-height:1.4;padding:4px 0}
.choice input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--green)}
.form-section .choices .choice-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.single-check{margin-top:4px}
.single-check .choice{font-weight:450}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.error-summary{border:4px solid var(--red);background:var(--paper);padding:16px 20px;margin:0 0 24px;border-radius:var(--r-sm)}
.error-summary h2{font:700 1.15rem/1.3 var(--sans);margin-bottom:8px}
.error-summary ul{margin:0;padding-left:1.1em}
.error-summary a{color:var(--red);font-weight:650}
.error-summary p{margin:0;color:var(--red);font-weight:650}
.flash{background:#e6f4d7;border-left:4px solid #3f7a0d;padding:12px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 20px;font-weight:550}
.flash-bad{background:var(--amber-bg);border-left-color:#d9a52a;color:var(--amber)}
.flash:focus{outline:3px solid var(--focus);outline-offset:-3px}  /* inside the box, so it lines up with the cards below */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:8px 0 48px}
.form-actions .small{margin:0}
.form-actions .trust-line{flex-basis:100%;margin:-8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.9rem;color:var(--ink-2)}
.trust-line .stars{font-size:.95rem}
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:24px 0}
.code{background:var(--deep);color:var(--lime);padding:12px 14px;border-radius:var(--r-sm);overflow-x:auto;font-size:.88rem}
.inline-form{display:inline}

/* Quote journey */
.quote-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start;padding-bottom:40px}
/* The estimate beside the quote form: the same itemised statement as the home page estimator, filling in as the visitor answers */
.live-summary{position:sticky;top:96px;background:var(--paper);color:var(--ink);border-radius:4px 4px var(--r-lg) var(--r-lg);padding:28px 22px 18px;
  box-shadow:0 26px 50px -28px rgba(14,47,38,.55),0 2px 6px rgba(14,47,38,.06)}
.live-summary::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--paper) 7.5px) 0 0/18px 10px repeat-x}
.live-summary h2{font-size:1.25rem;margin-bottom:12px}
.live-summary [data-live-body]{border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);padding:14px 0 12px;min-height:120px}
.live-summary [data-live-body] .small{margin:0}
.live-summary .live-foot{margin:12px 0 0}
.live-summary .line-total span:first-child,.est-sheet .line-total span:first-child{white-space:nowrap}
.live-summary .line-total .amt{font-size:1.45rem}
.live-summary .live-assure{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);font-size:.86rem;color:var(--ink-2)}
.live-summary .live-assure>li{margin:.3em 0;padding-left:26px}
.tax-line{margin:10px 0 0;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.tax-line strong{color:var(--ink);font-variant-numeric:tabular-nums}
.tax-line+.small,.live-summary [data-live-body] .tax-line+.small{margin-top:8px}
.live-summary .sub,.est-sheet .sub{font:650 .82rem var(--sans);color:var(--link);margin:12px 0 6px}
.live-summary .sub:first-child,.est-sheet .sub:first-child{margin-top:0}
.live-summary .changing .amt,.est-bar.changing [data-bar-total]{opacity:.4}
.live-summary .amt{transition:opacity .2s}
.side-card{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.side-card h2{font-size:1.25rem}
/* The typical fee range for work quoted individually: on the dark quote summary and on the light service page card */
.price-guide{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.price-guide .guide-amount{font:600 1.55rem/1.25 var(--serif);color:var(--green);margin:6px 0 8px}
.price-guide .guide-amount span{font:400 .95rem var(--sans);color:var(--muted)}
.quote-result{padding-top:28px;padding-bottom:64px}
.result-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:18px}
.result-total{background:var(--green);color:#dbeae1;border-radius:var(--r-lg);padding:18px 24px;text-align:right;min-width:260px}
.result-total span{display:block;font-size:.9rem}
.result-total strong{display:block;font:600 2.3rem/1.1 var(--serif);color:var(--lime);font-variant-numeric:tabular-nums}
.result-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
/* On a phone the buttons above the quote take two to a row, so the total and where the client goes ahead come up a screen
   sooner (41.6.0) */
@media (max-width:640px){
  .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
  .result-actions>.btn,.result-actions .inline-form>.btn:not(.btn-quiet){width:100%;padding:9px 10px;font-size:.92rem;line-height:1.25;white-space:normal}
  .result-actions .inline-form{display:block}
  .result-actions .btn-quiet{padding:6px 2px;text-align:left}
}
.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:24px}
.quote-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.quote-card-head h2{margin-bottom:4px}
.quote-card-head p{color:var(--muted);margin:0}
.proceed{background:var(--mist);border:2px solid var(--green);border-radius:var(--r-lg);padding:26px;margin:28px 0}
.proceed.done{border-color:#3f7a0d;background:#eef7e3}
.notices{max-width:78ch;margin-top:32px;color:var(--ink-2)}
.notices h2{font-size:1.3rem}
.notices h3{font-size:1rem;margin-top:1.2em}
/* (41.20.0) the important information, short, with a button to it in full on a page of its own */
.info-card{max-width:none;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.info-card>*{max-width:78ch}
.info-card h2{margin-top:0}
.info-points{margin:.5em 0 1em;padding-left:1.2em}
.info-points li{margin:.35em 0}
.info-more{margin:0 0 .3em}
.info-page h2{font-size:1.25rem;margin-top:1.6em}
.info-page h3{font-size:1rem;margin-top:1em}
.info-part p,.info-list li{max-width:72ch}
.info-list{padding-left:1.2em}
.info-list li{margin:.4em 0}
.info-list .note-warn{font-weight:600}
.history{margin-top:28px}
.services-later{margin-top:28px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;background:var(--paper)}
.services-later h3{font-size:1rem;margin:0 0 .4em}
.services-later .link-list{margin-bottom:1em}
.services-later .svc-name{display:block;font-weight:600}  /* each service asked about, its status under it */
.services-later .svc-status{display:block;color:var(--muted)}
.wrap.confirm,.confirm{padding-top:48px;padding-bottom:72px}
/* (41.52.0) the words of a page given the keyboard so that a screen reader reads them after a press (the emails stopped): words to
   read and nothing to press, so no ring, as the thanks after going ahead has none */
.confirm .lede:focus{outline:none}

/* Calculator result */
.result-card{background:var(--paper);border:2px solid var(--green);border-radius:var(--r-lg);padding:22px;margin:0 0 28px}
.result-label{margin:0;font-weight:650;color:var(--ink-2)}
.result-amount{font:600 2.5rem/1.1 var(--serif);color:var(--green);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.faq{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:650;padding:12px 0}
.faq p{margin:0 0 14px;color:var(--ink-2)}

/* Reviews */
.stars{color:#8a6000;letter-spacing:2px;font-size:1.05rem}  /* 5:1 or more on every light background of the site */
.stars .dim{color:#626d67}
.review-summary{font-size:1.05rem}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:20px}
.review{margin:0 0 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.review blockquote{margin:8px 0 10px}
.review blockquote p{font:400 1.08rem/1.55 var(--serif);margin:0}
.review figcaption{font-size:.9rem;color:var(--muted)}
.review .reply{font-size:.92rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px;margin:10px 0 0}

/* Sign in */
.auth-wrap{display:flex;justify-content:center;padding:48px 20px 80px}
.auth-card{width:100%;max-width:460px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.auth-card h1{font-size:1.9rem}
.auth-links{margin:18px 0 0;font-size:.95rem}
.auth-note{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
/* signing in with two-step verification (41.15.0): what to do without the app's code, folded under the form until wanted */
.auth-help{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.auth-help summary{cursor:pointer;font-weight:650;color:var(--link)}
.auth-help[open] summary{margin-bottom:10px}
.auth-help .stack-form{margin:0 0 10px}
.demo-accounts{margin:20px 0 0;padding:16px 18px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--mist);font-size:.92rem}
.demo-accounts h2{font-size:1.1rem;margin:0 0 6px}
.demo-accounts p{margin:0 0 8px}
.demo-accounts ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:12px}
.demo-accounts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.demo-accounts .demo-email{font-weight:650;overflow-wrap:break-word}
.demo-accounts .demo-who{grid-column:1/-1;color:var(--muted)}
.demo-accounts .btn[hidden]{display:none}

/* Footer */
.site-footer{background:var(--deep);color:#bcd2c5;padding:56px 0 40px;margin-top:0;font-size:.95rem}
.site-footer a{color:#e5f0e9}
.site-footer a:hover{color:var(--lime)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-footer{color:#fff}
.brand-footer:hover{color:var(--lime)}
.footer-tag{margin:0;color:#bcd2c5}
.footer-contact{margin:0 0 0 auto}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:32px 0}
.footer-cols h2{font:650 .95rem/1.3 var(--sans);color:var(--lime);margin-bottom:10px}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols li{margin:0 0 6px}
.footer-cols a{text-decoration:none}
.footer-cols a:hover{text-decoration:underline}
.footer-legal{font-size:.84rem;color:#9fb8aa;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin:0;padding-right:max(0px,calc(100% - 110ch))}

/* Responsive */
/* the client's private page: progress, conveyancer and messages */
.btn-small{min-height:38px;padding:6px 14px;font-size:.92rem}
.btn-quiet{background:transparent;color:var(--link);border:0;text-decoration:underline;padding:0 2px}
.btn-quiet:hover{color:var(--deep)}
.consent-bar{background:var(--mist);border-bottom:1px solid var(--line);font-size:.95rem}
.consent-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:10px;padding-bottom:10px}
.consent-bar p{margin:0;flex:1 1 420px}
.consent-bar form{display:flex;gap:8px;flex-wrap:wrap}
.tracker,.conveyancer,.messages,.partner-sharing{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:24px 0}
.tracker-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tracker-head h2,.conveyancer h2,.messages h2{font-size:1.35rem;margin:0 0 .4em}
.tracker-head p{margin:0;color:var(--muted)}
.tracker progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:10px;margin:10px 0 18px;border:0;border-radius:6px;background:var(--mist);overflow:hidden}
.tracker progress::-webkit-progress-bar{background:var(--mist);border-radius:6px}
.tracker progress::-webkit-progress-value{background:var(--green);border-radius:6px}
.tracker progress::-moz-progress-bar{background:var(--green);border-radius:6px}
.milestones{list-style:none;padding:0;margin:0 0 0 11px}
.milestones li{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0;padding:6px 0 18px 28px;border-left:2px solid var(--line)}
.milestones li:last-child{border-left-color:transparent;padding-bottom:4px}
.milestones li::before{content:"";position:absolute;left:-12px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2)}
.milestones li.done{border-left-color:var(--green)}
.milestones li.done::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 3px var(--paper)}
.milestones li.current::before{border-color:var(--green);box-shadow:0 0 0 4px rgba(18,61,49,.14)}
.milestones li.current .ms-title{font-weight:650}
.milestones li.todo .ms-title{color:var(--ink-2)}
.ms-when{color:var(--muted);font-size:.9rem}
.conveyancer h3{margin:.1em 0 .3em;font-size:1.25rem}
.contact-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 28px}
.contact-list li{margin:0}
.conveyancer .contact-list+p{margin-top:16px}
.msg-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px}
.msg{max-width:min(640px,94%);margin:0;padding:12px 16px;border-radius:14px;background:var(--mist)}
.msg p{margin:0}
.msg .msg-meta{font-size:.86rem;color:var(--muted);margin-bottom:4px}
.msg-mine{justify-self:end;background:#e6f4d7}
.msg-theirs{justify-self:start}
.msg .msg-report{margin-top:6px;font-size:.82rem}
.msg .msg-report a{color:var(--muted)}
.review-report{margin:.5em 0 0;font-size:.82rem}
.review-report a{color:var(--muted)}
.message-form textarea{min-height:96px}
.quote-details{margin:24px 0}
.quote-details>summary{cursor:pointer;font-weight:650;font-size:1.08rem;padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.quote-details[open]>summary{margin-bottom:16px}
.device-quotes form{margin-top:12px}
.dq-entry{display:flex;flex-direction:column;gap:2px;min-width:0}
.dq-entry small{font-weight:400;color:var(--muted);font-size:.86rem}
@media (max-width:1000px){
  .hero-grid,.split,.article-grid,.quote-layout{grid-template-columns:1fr;gap:36px}
  .aside-card,.live-summary,.side-card{position:static}
  .path-grid,.path-grid.n3{grid-template-columns:1fr 1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .band-actions{justify-content:flex-start}
}
@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding-left:16px;padding-right:16px}
  .hero{padding:40px 0 52px}
  .band{padding:52px 0}
  .path-grid,.path-grid.n3,.path-grid.n2,.path-grid.n1,.grid-2,.est-fields{grid-template-columns:1fr}
  .form-section{padding:18px 16px}
  .result-head{grid-template-columns:1fr}
  .result-total{text-align:left;min-width:0}
  .footer-contact{margin-left:0}
  .statement{padding:26px 18px 20px}
  .quote-card{padding:18px 14px}
}
@media print{
  .site-header,.site-footer,.preview-bar,.consent-bar,.crumbs,.result-actions,.proceed form,.btn,.live-summary,.message-form,.est-bar,.step-progress,.step-actions{display:none!important}
  body{background:#fff}
  /* (41.36.2, from the review) a quote's card runs on over a page break, as a card kept whole could leave a page mostly blank;
     its totals print once, at its end (the fee table's foot, above) */
  .quote-card,.result-total{border:1px solid #999}
  .result-total{break-inside:avoid}
  /* printed before the visitor scrolled to them: the estimate's lines and How it works' steps are simply there */
  .motion .hero .statement.will-print .statement-body .line,.motion .hero .statement.will-print .statement-body .tax-line,.motion .steps.will-draw li::before,.motion .steps.will-draw li::after,
  .motion .steps.will-draw li>*{opacity:1!important}
  .motion *,.motion *::before,.motion *::after{animation:none!important}
}
.split>*,.article-grid>*,.quote-layout>*,.hero-grid>*{min-width:0}
@media (max-width:420px){
  .price-table th,.price-table td,.band-table th,.band-table td{padding:9px 5px;font-size:.92rem}
  .price-table td.num+td.num,.price-table th.num+th.num{padding-left:16px}  /* clear space between the two price columns */
  .price-table thead th.num,.band-table thead th.num{white-space:normal}
  .price-table th.num,.price-table td.num{width:auto}
}
.field>label.choice{display:flex;font-weight:450;margin-bottom:0;padding:4px 0}
.result-total .small{color:#c9ddd1}
/* Comparing firms on the panel */
.compare{margin:32px 0}
.compare>p{max-width:72ch}
.sort-links{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:10px 0 16px;font-size:.92rem;color:var(--muted)}
.sort-links a{padding:4px 10px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--green-2);background:var(--paper)}
.sort-links a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
.firm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;max-width:980px}
.firm-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.firm-card.sponsored{border-color:var(--lime-2);box-shadow:0 0 0 2px #eef6d6 inset}
.firm-card h3{font:600 1.2rem/1.3 var(--serif);color:var(--green);margin:0 0 4px}
.sponsored-label{display:inline-block;align-self:flex-start;margin:0 0 8px;padding:2px 9px;border-radius:999px;background:#eef6d6;color:#3d5a09;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.firm-card.lowest{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.lowest-label{display:inline-block;align-self:flex-start;margin:0 8px 8px 0;padding:2px 10px;border-radius:999px;background:var(--green);color:var(--lime);font-size:.78rem;font-weight:700}
.firm-saving{margin:-2px 0 8px;font-size:.9rem;font-weight:600;color:var(--green-2)}
.firm-price{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;margin:12px 0 6px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.firm-price span{color:var(--muted);font-size:.9rem}
.firm-price strong{font:600 1.5rem/1 var(--serif);color:var(--green)}
.firm-breakdown{margin:6px 0 10px;font-size:.92rem}
.firm-breakdown summary{cursor:pointer;color:var(--link);font-weight:600}
.firm-breakdown dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:8px 0}
.firm-breakdown dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.firm-facts{list-style:none;margin:8px 0;padding:0;font-size:.92rem}
.firm-facts li{padding:4px 0 4px 20px;position:relative}
.firm-facts li::before{content:"";position:absolute;left:4px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--lime-2)}
.firm-facts .verified{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:#e3f1c4;color:#2f4a07;font-size:.78rem;font-weight:700}
.firm-facts .stated{display:inline-block;margin-left:4px;color:var(--muted);font-size:.78rem}
.firm-fee{margin:6px 0 0}
.firm-card form{margin:0}
.firm-card form .btn{width:100%}

/* The steps of the client's matter, before they go ahead (public.py, _journey): the steps their law firm marks as done
   later, read down each column. Exchange and completion, the two that matter most, are filled in. */
.journey{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:28px 0}
.journey h2{font-size:1.35rem;margin:0 0 .35em}
.journey>p{color:var(--ink-2);max-width:68ch;margin-bottom:0}
.journey-steps{counter-reset:jstep;list-style:none;padding:0;margin:18px 0 0;columns:3 14.5rem;column-gap:34px}
.journey-steps li{counter-increment:jstep;break-inside:avoid;position:relative;margin:0;padding:5px 0 13px 42px;line-height:1.35}
.journey-steps li::before{content:counter(jstep);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);
  background:var(--paper);color:var(--green-2);font:650 .86rem/26px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.journey-steps li.key::before{background:var(--green);border-color:var(--green);color:var(--lime)}
.journey-steps li span{display:inline-block}
.journey-steps li.key span{font-weight:650}
@media (prefers-reduced-motion:no-preference){
  /* reached for the first time (site.js, data-reveal): each number fills in after the one before, and its words follow */
  .journey-steps.will-reveal li::before,.journey-steps.will-reveal li span{opacity:0}
  .journey-steps.revealed li::before{animation:kf-pop .45s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(var(--n,0) * 70ms)}
  .journey-steps.revealed li span{animation:kf-rise .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--n,0) * 70ms + 60ms)}
}
.journey-steps li:nth-child(2){--n:1}.journey-steps li:nth-child(3){--n:2}.journey-steps li:nth-child(4){--n:3}.journey-steps li:nth-child(5){--n:4}
.journey-steps li:nth-child(6){--n:5}.journey-steps li:nth-child(7){--n:6}.journey-steps li:nth-child(8){--n:7}.journey-steps li:nth-child(9){--n:8}
.journey-steps li:nth-child(10){--n:9}.journey-steps li:nth-child(11){--n:10}.journey-steps li:nth-child(12){--n:11}.journey-steps li:nth-child(13){--n:12}
.journey-steps li:nth-child(14){--n:13}.journey-steps li:nth-child(15){--n:14}.journey-steps li:nth-child(16){--n:15}.journey-steps li:nth-child(n+17){--n:16}
@media print{.journey-steps.will-reveal li::before,.journey-steps.will-reveal li span{opacity:1!important}.journey-steps li::before,.journey-steps li span{animation:none!important}}

/* The total at the foot of a phone's screen (public.py, _go_bar): site.js shows it once the visitor has scrolled past the
   total and where they go ahead, and takes it away when either is on screen again. Never on a wider screen or in print. */
.go-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--green);color:#dbeae1;box-shadow:0 -6px 20px rgba(14,47,38,.22);
  transform:translateY(110%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
.go-bar.up{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.go-bar-total{margin:0;display:flex;flex-direction:column;line-height:1.15}
/* at a desk, after the itemised quote: the total again and the way back to going ahead (41.5.0); a phone has the bar instead */
.after-quote{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;margin:-6px 0 30px}
.after-quote p{margin:0;color:var(--ink-2)}
.after-quote strong{font:600 1.35rem/1.2 var(--serif);color:var(--green);font-variant-numeric:tabular-nums}
@media (max-width:760px){.after-quote{display:none}}
.go-bar-total span{font-size:.8rem}
.go-bar-total strong{font:600 1.3rem/1.15 var(--serif);color:var(--lime);font-variant-numeric:tabular-nums}
.go-bar .btn{flex:none;padding-left:18px;padding-right:18px}
body.with-go-bar{padding-bottom:76px}
html.with-go-bar{scroll-padding-bottom:96px}
@media (min-width:761px){.go-bar{display:none!important}body.with-go-bar{padding-bottom:0}html.with-go-bar{scroll-padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.go-bar,.go-bar.up{transition:none}}
@media print{.go-bar{display:none!important}}

/* Small pieces added in the October 2026 review */
.plain-list{padding-left:1.1em;margin:0 0 1em}
.plain-list li{margin:.4em 0}
.empty-note{background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r);padding:16px 18px;margin:12px 0 20px}
.empty-note p{margin:0 0 .4em}
.empty-note p:last-child{margin:0;color:var(--muted)}
.find-form .form-actions{margin-bottom:0}
h1,h2,.legend-title{text-wrap:balance}
.lede{text-wrap:pretty}
@media (max-width:640px){
  .crumbs li[aria-current]{display:none}
  .crumbs li:nth-last-child(2)::after{content:none}
}
/* Site announcement and maintenance banners */
.announce{background:var(--mist);border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.announce .wrap{padding-top:10px;padding-bottom:10px}
.announce p{margin:0}
.announce-warn{background:var(--amber-bg);color:var(--amber);border-bottom-color:#edd9a3}
.announce-good{background:#e6f4d7;color:#2c5a0b;border-bottom-color:#cfe6b5}
.announce a{color:inherit;font-weight:650}
/* Client pages: every section is a card, the same as the tracker and messages */
.uploads,.callback{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:24px 0}
.uploads h2,.callback h2{font-size:1.35rem;margin:0 0 .4em}
.uploads h3{font-size:1.05rem;margin:22px 0 .4em}
.assumptions,.calc-more{margin:20px 0}
/* (41.41.3, from the audit) a long name with no spaces in what the quote is based on wraps, never widening a phone's page */
.assumptions li,.assumptions p{overflow-wrap:anywhere}
.assumptions>summary,.calc-more>summary{cursor:pointer;font-weight:650;padding:10px 0;color:var(--green)}
/* What the client should know about this transaction: a quiet panel, one point per line, warnings marked out */
.quote-notes{list-style:none;padding:12px 16px;margin:16px 0;color:var(--ink-2);background:var(--mist);border-radius:var(--r-sm);border-left:3px solid var(--line-2)}
.quote-notes li{margin:0}
.quote-notes li+li{margin-top:.5em}
.quote-notes .note-warn{color:var(--amber);font-weight:550}
.quote-notes:has(.note-warn){border-left-color:var(--amber)}
.callout.success{background:#e6f4d7;border-left-color:#3f7a0d}
.callout.fraud{background:#fff;border:1px solid #edd9a3;border-left:4px solid #d9a52a}
.guide-group{margin:36px 0}
.review-list{display:grid;gap:16px;margin-top:18px}
.footer-note{font-size:.84rem;color:#9fb8aa;margin:12px 0 0}
.facts-table{width:100%;border-collapse:collapse;margin:16px 0}
.facts-table th,.facts-table td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line)}
.facts-table th{width:38%;color:var(--muted);font-weight:600}
/* Jargon buster */
.letter-index{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:20px 0 8px}
.letter-index li{margin:0}
.letter-index a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--paper);text-decoration:none;font-weight:650;color:var(--green);transition:background-color .15s ease,border-color .15s ease}
.letter-index a:hover{border-color:var(--green);background:var(--mist)}
section[id^="letter-"]>h2{border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:1.6em}
.glossary{margin:0}
.glossary dt{font-weight:700;margin:18px 0 0;color:var(--ink)}
.glossary dd{margin:4px 0 0;color:var(--ink-2)}
.proceed form{margin:18px 0 12px}
.proceed .small{margin:0}
.prose .table-cta{margin:18px 0 8px}  /* the way to a quote under the starting prices (41.5.0) */
.prose .table-link{margin:8px 0 22px;font-weight:600}
.proceed .beside-button{margin-top:.9em}
/* the promise every firm on the panel has agreed, by the go-ahead button rather than in its small print (41.5.0) */
.proceed .panel-promise{margin:1.1em 0 0;padding:12px 16px;background:var(--paper);border-left:4px solid var(--lime-2);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;line-height:1.55;max-width:46rem}
.proceed .panel-promise strong{display:block;font-size:1.02rem;color:var(--green);margin-bottom:2px}
.proceed .panel-promise+.panel-promise{margin-top:.6em}  /* (41.36.1) No completion, no fee, under the price promise */
/* the same promise beside the total while it is true of the quote, and the chosen firm's own on the client's page (41.11.0) */
.result-total .total-promise{white-space:normal;margin-top:8px;color:var(--lime);font-weight:600;line-height:1.35}
.result-total .total-promise::before{content:"\2713\00a0"}
.conveyancer .quote-promise{margin:1em 0;padding:12px 16px;background:var(--paper);border-left:4px solid var(--lime-2);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;line-height:1.55}
.conveyancer .quote-promise strong{display:block;font-size:1.02rem;color:var(--green);margin-bottom:2px}
.conveyancer .quote-promise+.quote-promise{margin-top:-.4em}
.firm-price span{white-space:nowrap}
.firm-card h3{min-height:2.6em}
.result-total span{white-space:nowrap}
/* (41.31.0) the line about the property tax wraps in a narrow box ("No Stamp Duty Land Tax is estimated, with first-time buyer
   relief" is wider than a phone), as the line about items to be confirmed does */
.result-total .small{white-space:normal}
/* (41.39.0) what the total is made of, with the way to every line, light on the dark box */
.result-total .total-split{margin-top:4px}
.result-total .total-split a{color:var(--lime);font-weight:600}
.result-total .total-split a:hover{color:#fff}
/* 41.3: what the total leaves out until the law firm confirms it, said beside the total, wrapping under it */
.result-total .tbc-line{white-space:normal;max-width:22em;margin:6px 0 0 auto}
@media (max-width:1000px){.result-total .tbc-line{margin-left:0}}
.go-bar-total .go-bar-tbc{font-size:.78rem;color:#c9ddd1}  /* (41.36.4: no words smaller than .78rem) */
/* who the client would be introduced to, by the go-ahead button (public._who_acts), and a gap in the panel (public.gap_note) */
.proceed .who-acts{margin:.2em 0 1em}
.proceed .who-acts ul{margin:.4em 0 0;padding-left:1.2em}
.panel-gap{font-size:.95rem}
.proceed .panel-gap,.quote-head .panel-gap,.example-slip .panel-gap{margin:.4em 0 1em}
.example-slip .panel-gap-quiet{margin:.7em 0 0}  /* where no firm acts yet, in a service page's small print (41.5.0) */
.confirm-press .confirm-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 8px}  /* confirm and go ahead, or only confirm (41.5.0) */
.callout.gap-here{margin:10px 0 0;padding:10px 14px;font-size:.92rem;max-width:36rem}  /* beside the country on a quote form (41.5.0) */
.firm-connection{margin-top:.5em}
@media (max-width:640px){.crumbs ol:has(>li:nth-child(2):last-child){display:none}}

/* Motion. Quiet and quick: transform and opacity only. One entrance on the home page; everywhere else movement answers what the
   visitor does (opening, changing, sending), so it shows what changed. */
@view-transition{navigation:auto}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.2s;animation-timing-function:ease}
.site-header{view-transition-name:site-header}
@keyframes kf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kf-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes kf-settle{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes kf-fade{from{opacity:0}to{opacity:1}}
@keyframes kf-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes kf-place{from{transform:translateY(10px)}to{transform:none}}
@keyframes kf-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes kf-print{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes kf-leader{from{transform:translateY(-4px) scaleX(0)}to{transform:translateY(-4px) scaleX(1)}}
@keyframes kf-mark{from{background-size:0 .3em}to{background-size:100% .3em}}
@keyframes kf-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes kf-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes kf-tick{from{opacity:0;transform:rotate(-45deg) scale(.2)}to{opacity:1;transform:rotate(-45deg)}}
.motion .hero-points li::before{animation:kf-tick .42s cubic-bezier(.3,1.4,.5,1) .62s backwards}
.motion .hero-points li:nth-child(2)::before{animation-delay:.72s}
.motion .hero-points li:nth-child(3)::before{animation-delay:.82s}
.motion .hero-points li:nth-child(4)::before{animation-delay:.92s}
.motion .hero-points li:nth-child(n+5)::before{animation-delay:1.02s}
.hero-partner .wrap>*{animation:kf-rise .55s cubic-bezier(.2,.7,.2,1) both}
.hero-partner .wrap>:nth-child(2){animation-delay:.06s}
.hero-partner .wrap>:nth-child(3){animation-delay:.12s}
.hero-partner .wrap>:nth-child(4){animation-delay:.18s}
/* The home page (Website settings, "Movement as the page opens"): one sequence of under three seconds, then stillness.
   The heading's lines slide up into place and the introduction follows; the street plan fades in and the property's
   boundary is traced; the estimate prints line by line and its total is marked last. Nothing loops. The movement only
   starts the hidden part of each step (fill-mode backwards), so the page at rest is the same as without it. */
.motion .hero h1 .ln>span{animation:kf-line .85s cubic-bezier(.2,.75,.15,1) backwards}
.motion .hero h1 .ln:nth-of-type(2)>span{animation-delay:.09s}
.motion .hero h1 .ln:nth-of-type(3)>span{animation-delay:.18s}
.motion .hero h1 .ln:nth-of-type(n+4)>span{animation-delay:.27s}
.motion .hero-copy>:not(h1){animation:kf-rise .6s cubic-bezier(.2,.7,.2,1) .28s backwards}
/* (41.50.0, from the engineering review) The introduction is the largest thing a phone paints first: it settles into place as
   before, but is never invisible while it waits, so the page's main words are there with the first frame (faded in from
   nothing, they were painted 0.8 seconds later on a slow phone). */
.motion .hero-copy>.lede{animation-name:kf-place}
.motion .hero-copy>:nth-child(3){animation-delay:.36s}
.motion .hero-copy>:nth-child(4){animation-delay:.44s}
.motion .hero .statement{animation:kf-rise .7s cubic-bezier(.2,.7,.2,1) .18s backwards}
.motion .hero-plan{animation:kf-fade 1.4s ease-out .1s backwards}
.motion .pl-subject{stroke-dasharray:100;animation:kf-trace 1.3s cubic-bezier(.65,0,.35,1) .6s backwards}
.motion .pl-subject-fill,.motion .pl-home{animation:kf-fade .7s ease-out 1.65s backwards}
/* The estimate prints when the visitor can see it: as the page opens on a computer, and as it scrolls into view on a phone
   or tablet (site.js adds .printing). Changing an answer prints the new figures again, quickly (.live). */
@media (min-width:1001px){
  .motion .hero .statement-body:not(.live) .line{animation:kf-print .4s ease-out .75s backwards}
  .motion .hero .statement-body:not(.live) .line .dots{transform-origin:left;animation:kf-leader .5s cubic-bezier(.4,0,.2,1) .81s backwards}
  .motion .hero .statement-body:not(.live) .line .amt{animation:kf-fade .35s ease-out 1.13s backwards}
  .motion .hero .statement-body:not(.live) .line:nth-child(2){animation-delay:.9s}
  .motion .hero .statement-body:not(.live) .line:nth-child(2) .dots{animation-delay:.96s}
  .motion .hero .statement-body:not(.live) .line:nth-child(2) .amt{animation-delay:1.28s}
  .motion .hero .statement-body:not(.live) .line:nth-child(3){animation-delay:1.05s}
  .motion .hero .statement-body:not(.live) .line:nth-child(3) .dots{animation-delay:1.11s}
  .motion .hero .statement-body:not(.live) .line:nth-child(3) .amt{animation-delay:1.43s}
  .motion .hero .statement-body:not(.live) .line:nth-child(4){animation-delay:1.2s}
  .motion .hero .statement-body:not(.live) .line:nth-child(4) .dots{animation-delay:1.26s}
  .motion .hero .statement-body:not(.live) .line:nth-child(4) .amt{animation-delay:1.58s}
  .motion .hero .statement-body:not(.live) .line:nth-child(n+5){animation-delay:1.35s}
  .motion .hero .statement-body:not(.live) .line:nth-child(n+5) .dots{animation-delay:1.41s}
  .motion .hero .statement-body:not(.live) .line:nth-child(n+5) .amt{animation-delay:1.73s}
  .motion .hero .statement-body:not(.live) .line:nth-child(n+6){animation-delay:1.5s}  /* separate representation's six lines */
  .motion .hero .statement-body:not(.live) .line:nth-child(n+6) .dots{animation-delay:1.56s}
  .motion .hero .statement-body:not(.live) .line:nth-child(n+6) .amt{animation-delay:1.88s}
  .motion .hero .statement-body:not(.live) .line-total .amt{animation-name:kf-fade,kf-mark;animation-duration:.35s,.7s;
    animation-timing-function:ease-out,cubic-bezier(.4,0,.2,1);animation-fill-mode:backwards}
  .motion .hero .statement-body:not(.live) .line-total:nth-child(2) .amt{animation-delay:1.28s,1.5s}
  .motion .hero .statement-body:not(.live) .line-total:nth-child(3) .amt{animation-delay:1.43s,1.65s}
  .motion .hero .statement-body:not(.live) .line-total:nth-child(4) .amt{animation-delay:1.58s,1.8s}
  .motion .hero .statement-body:not(.live) .line-total:nth-child(n+5) .amt{animation-delay:1.73s,1.95s}
  .motion .hero .statement-body:not(.live) .line-total:nth-child(n+6) .amt{animation-delay:1.88s,2.1s}
  .motion .hero .statement-body:not(.live) .tax-line{animation:kf-fade .4s ease-out 1.75s backwards}
  .motion .hero .statement-body:not(.live) .line-note{animation:kf-fade .45s ease-out 1.4s backwards}  /* (41.36.1) */
}
@media (max-width:1000px){
  .motion .hero .statement.will-print .statement-body .line,.motion .hero .statement.will-print .statement-body .tax-line,
  .motion .hero .statement.will-print .statement-body .line-note{opacity:0}
  .motion .hero .statement.printing .statement-body:not(.live) .tax-line{animation:kf-fade .4s ease-out 1s backwards}
  .motion .hero .statement.printing .statement-body:not(.live) .line-note{animation:kf-fade .45s ease-out .7s backwards}  /* (41.36.1) */
  .motion .hero .statement.printing .statement-body:not(.live) .line{animation:kf-print .4s ease-out backwards}
  .motion .hero .statement.printing .statement-body:not(.live) .line .dots{transform-origin:left;animation:kf-leader .5s cubic-bezier(.4,0,.2,1) .06s backwards}
  .motion .hero .statement.printing .statement-body:not(.live) .line .amt{animation:kf-fade .35s ease-out .38s backwards}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(2){animation-delay:.15s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(2) .dots{animation-delay:.21s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(2) .amt{animation-delay:.53s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(3){animation-delay:.3s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(3) .dots{animation-delay:.36s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(3) .amt{animation-delay:.68s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(n+4){animation-delay:.45s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(n+4) .dots{animation-delay:.51s}
  .motion .hero .statement.printing .statement-body:not(.live) .line:nth-child(n+4) .amt{animation-delay:.83s}
  .motion .hero .statement.printing .statement-body:not(.live) .line-total .amt{animation-name:kf-fade,kf-mark;animation-duration:.35s,.7s;
    animation-timing-function:ease-out,cubic-bezier(.4,0,.2,1);animation-fill-mode:backwards;animation-delay:.83s,1.05s}
  .motion .hero .statement.printing .statement-body:not(.live) .line-total:nth-child(2) .amt{animation-delay:.53s,.75s}
  .motion .hero .statement.printing .statement-body:not(.live) .line-total:nth-child(3) .amt{animation-delay:.68s,.9s}
}
.motion .hero .statement-body.live .line{animation:kf-print .28s ease-out backwards}
.motion .hero .statement-body.live .line:nth-child(2){animation-delay:.04s}
.motion .hero .statement-body.live .line:nth-child(3){animation-delay:.08s}
.motion .hero .statement-body.live .line:nth-child(n+4){animation-delay:.12s}
.motion .hero .statement-body.live .line-note{animation:kf-fade .3s ease-out .1s backwards}
/* The steps of How it works draw in, once, when the visitor reaches them (site.js swaps .will-draw for .drawn) */
.motion .steps.will-draw li::before,.motion .steps.will-draw li::after,.motion .steps.will-draw li>*{opacity:0}
.motion .steps.drawn li::before{animation:kf-pop .5s cubic-bezier(.3,1.3,.5,1) backwards}
.motion .steps.drawn li::after{transform-origin:50% 0;animation:kf-grow .6s cubic-bezier(.4,0,.2,1) .3s backwards}
.motion .steps.drawn li>*{animation:kf-rise .5s cubic-bezier(.2,.7,.2,1) .08s backwards}
.motion .steps.drawn li:nth-child(2)::before{animation-delay:.5s}
.motion .steps.drawn li:nth-child(2)>*{animation-delay:.58s}
.motion .steps.drawn li:nth-child(2)::after{animation-delay:.8s}
.motion .steps.drawn li:nth-child(n+3)::before{animation-delay:1s}
.motion .steps.drawn li:nth-child(n+3)>*{animation-delay:1.08s}
.motion .steps.drawn li:nth-child(n+3)::after{animation-delay:1.3s}
/* A visitor whose device asks for less movement sees every page still: whatever would move is at once where it ends */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .motion .hero *,.motion .hero *::before,.motion .hero *::after{animation:none!important}
}
/* Once the opening has played (site.js adds .still about three seconds in), turning a tablet or widening the window never
   plays it again, although its rules belong to wider screens */
.motion .hero.still *,.motion .hero.still *::before,.motion .hero.still *::after{animation:none!important}
details[open]>:not(summary){animation:kf-drop .22s ease-out}
.flash,.error-summary{animation:kf-drop .28s ease-out}
.amt.settle,.result-amount.settle{animation:kf-settle .35s cubic-bezier(.2,.7,.2,1)}
.card:hover{box-shadow:0 12px 28px -20px rgba(14,47,38,.55)}
/* Questions and grouped lists open with a turning chevron rather than the browser's triangle */
.faq summary,.quote-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker,.quote-details>summary::-webkit-details-marker{display:none}
.faq summary::after,.quote-details>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.faq[open] summary::after,.quote-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
/* the same chevron, just after the words, for a quote's assumptions and the calculator's further questions */
.assumptions>summary,.calc-more>summary{list-style:none;display:flex;align-items:center;gap:12px}
.assumptions>summary::-webkit-details-marker,.calc-more>summary::-webkit-details-marker{display:none}
.assumptions>summary::after,.calc-more>summary::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.assumptions[open]>summary::after,.calc-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media print{.assumptions>summary::after,.calc-more>summary::after{display:none}}
@media (max-width:640px){.header-row{min-height:64px}html{scroll-padding-top:84px}}

.nw{white-space:nowrap}  /* a street number range kept on one line (content.keep_range) */
.fixed-answer{margin:0 0 4px;font-weight:600}.fixed-answer .hint{display:inline;font-weight:400;margin:0}
/* Example quotes for a sale and a purchase together */
.aside-card .example-head{font:600 1rem/1.3 var(--serif);color:var(--ink);margin:18px 0 0}
.example-total{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:1.08rem;border-top:2px solid var(--green);
  border-bottom:2px solid var(--green);padding:9px 4px;margin:4px 0 16px;font-variant-numeric:tabular-nums}
/* File choosers match the site's secondary buttons */
input[type=file]{font:inherit;font-size:.95rem;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{font:600 .95rem/1.2 var(--sans);min-height:44px;padding:0 16px;margin-right:12px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--green);cursor:pointer;transition:border-color .15s ease}
input[type=file]::file-selector-button:hover{border-color:var(--green)}
input[type=file]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

/* The guided start: one plain question at a time, each answer a link to the next question or to the quote form */
.finder{padding-bottom:64px}
.finder-head{padding-bottom:4px}
.finder-options{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px;max-width:780px}
.finder-options.wide{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.finder-options li{margin:0}
.finder-option{display:grid;grid-template-columns:40px minmax(0,1fr);grid-auto-rows:auto;column-gap:14px;row-gap:4px;align-content:start;
  justify-items:start;height:100%;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r);padding:18px 52px 18px 18px;color:var(--ink);text-decoration:none;position:relative;
  transition:border-color .15s ease,box-shadow .2s ease,transform .12s ease}
/* each answer's drawing, beside its words (icons.FINDER): it fills in as the answer is pointed at */
.fo-ico{grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--mist);
  color:var(--green-2);transition:background-color .18s ease,color .18s ease}
.fo-ico svg{width:24px;height:24px;display:block}
.finder-option>:not(.fo-ico){grid-column:2}
.finder-option:hover .fo-ico,.finder-option:focus-visible .fo-ico{background:var(--green);color:var(--lime)}
.finder-option::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--green);
  border-top:2px solid var(--green);transform:rotate(45deg);transition:transform .15s ease}
.finder-option:hover{border-color:var(--green);box-shadow:0 12px 28px -20px rgba(14,47,38,.55)}
.finder-option:hover::after{transform:translateX(3px) rotate(45deg)}
.finder-option:active{transform:translateY(1px)}
.fo-title{font:600 1.2rem/1.3 var(--serif);color:var(--green)}
.fo-about{color:var(--muted);font-size:.95rem;line-height:1.45}
.finder-option .tag{margin-top:6px}
.finder-option:hover .fo-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.finder-options.primary{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:14px}
.finder-options.primary .finder-option{padding:22px 52px 24px 20px;border-width:2px;grid-template-columns:48px minmax(0,1fr)}
.finder-options.primary .fo-ico{width:48px;height:48px;border-radius:12px}.finder-options.primary .fo-ico svg{width:28px;height:28px}
.finder-options.primary .fo-title{font-size:1.5rem}
.finder-sub{font:650 1rem/1.3 var(--sans);color:var(--ink-2);margin:34px 0 0}
.finder-options.compact .finder-option{padding-top:14px;padding-bottom:14px}
.finder-options.compact .fo-title{font-size:1.1rem}
.finder-more{margin-top:36px;max-width:780px;border-top:1px solid var(--line);padding-top:24px}
.finder-search label{display:block;font-weight:650;margin-bottom:8px}
.search-row{display:flex;gap:10px;align-items:stretch;max-width:560px}
.search-row input{flex:1;min-width:0}
.search-row .btn{min-height:48px}
.finder-more .small{margin:16px 0 0}
@media (max-width:900px){.finder-options.primary{grid-template-columns:1fr}}
@media (max-width:760px){.finder-options.wide{grid-template-columns:1fr}.finder-option,.finder-options.primary .finder-option{padding:16px 46px 16px 14px}
  .finder-option::after{right:18px}.finder-options.primary .fo-title{font-size:1.3rem}}

/* A quote form, a step at a time */
.quote-head .switch-quote{margin:-4px 0 0}
.step-progress{margin:0 0 18px}
.step-count{margin:0 0 8px;font-size:.88rem;font-weight:650;color:var(--muted)}
.step-nav{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.step-nav li{flex:1 1 0;margin:0;min-width:0}
.step-nav .sn{display:flex;flex-direction:column;gap:7px;width:100%;padding:0;background:none;border:0;text-align:left;font:600 .86rem/1.3 var(--sans);
  color:var(--muted);text-decoration:none}
.step-nav .sn::before{content:"";display:block;height:5px;border-radius:3px;background:var(--line);transition:background-color .25s ease}
.step-nav .done .sn::before{background:var(--green-2)}
.step-nav [aria-current] .sn{color:var(--ink)}
.step-nav [aria-current] .sn::before{background:var(--lime-2)}
.step-nav button.sn{cursor:pointer}
.step-nav button.sn:hover{color:var(--green)}
.step-nav button.sn:hover .sn-label{text-decoration:underline}
.step-nav .sn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:4px 0 48px}
.step-actions[hidden],.form-actions[hidden]{display:none}
.step-in{animation:kf-rise .28s cubic-bezier(.2,.7,.2,1)}
.form-section.step>legend .legend-title{outline:none}
@media (max-width:640px){.step-nav li{position:relative}
  .step-nav .sn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .step-nav{gap:4px}.step-nav .sn{gap:0}.step-nav button.sn{padding:12px 0;margin:-12px 0}}

/* Short answers as joined buttons: yes or no, how many people, where the visitor is up to */
.choices.seg .choice-list{display:flex;flex-wrap:wrap;gap:8px}
.choices.seg .choice{position:relative;padding:0;margin:0;gap:0}
.choices.seg .choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choices.seg .choice span{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:76px;padding:0 18px;border:1.5px solid var(--line-2);
  border-radius:8px;background:var(--paper);font-weight:600;color:var(--ink-2);transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.choices.seg .choice:hover span{border-color:var(--green)}
.choices.seg .choice input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.choices.seg .choice input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.choices.seg.count .choice span{min-width:52px;padding:0 10px}
.choices.seg.has-error .choice span{border-color:var(--red)}
@media (max-width:640px){.choices.seg.count .choice-list{gap:6px}.choices.seg.count .choice span{min-width:44px;padding:0 6px}}
/* (41.41.0) Each person's full name, right under their number: a box for each, as many as were chosen */
.people-names{margin-top:-4px}
.people-names .people-list{display:grid;gap:12px}
.people-names .people-list .field{margin:0}
.people-names .people-list .field>label{font-weight:550;font-size:.95rem;color:var(--ink-2);margin-bottom:4px}
.people-names .people-list>.cond:not([hidden]){animation:kf-drop .22s ease-out}

/* Answers explained in a few words (freehold, leasehold, commonhold): cards with a drawing, the answer and a line about it.
   The real radio button covers the card, so it works with a keyboard, a screen reader and without the page script. */
.choices.cards .choice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.card-choice{position:relative;display:block;padding:0;cursor:pointer}
.card-choice>input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cc-box{display:grid;grid-template-columns:1fr auto;gap:4px 10px;height:100%;padding:14px 14px 13px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.cc-box .tile-ico{grid-column:1;margin-bottom:6px}
.cc-text{grid-column:1}
.cc-dot{grid-column:2;grid-row:1;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--paper);
  transition:border-color .15s ease,box-shadow .2s cubic-bezier(.3,1.4,.5,1)}
.card-choice:hover .cc-box{border-color:var(--green)}
.card-choice>input:checked+.cc-box{border-color:var(--green);background:var(--mist);box-shadow:inset 0 0 0 1px var(--green)}
.card-choice>input:checked+.cc-box .cc-dot{border-color:var(--green);box-shadow:inset 0 0 0 5px var(--green)}
.card-choice>input:checked+.cc-box .tile-ico{background:var(--green);color:var(--lime)}
.card-choice>input:focus-visible+.cc-box{outline:3px solid var(--focus);outline-offset:2px}
.choices.cards.has-error .cc-box{border-color:var(--red)}
.cc-title{display:block;font-weight:650;line-height:1.3}
.cc-about{display:block;font-size:.88rem;line-height:1.4;color:var(--muted);margin-top:3px}
@media (max-width:760px){
  .choices.cards .choice-list{grid-template-columns:1fr}
  .cc-box{grid-template-columns:auto 1fr auto;align-items:center;gap:0 12px}
  .cc-box .tile-ico{grid-column:1;grid-row:1;margin:0}.cc-text{grid-column:2;grid-row:1}.cc-dot{grid-column:3}
}

/* Boxes to tick as tiles: a drawing, a short name and a line about it, in a grid that fits the space. A long list is set
   out in groups under small headings. The real box covers the tile; the one drawn on it ticks itself in. */
.tiles>legend{margin-bottom:4px}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
.tile-set+.tile-set{margin-top:16px}
.tile-set-title{margin:10px 0 8px;font-size:.9rem;font-weight:650;color:var(--ink-2)}
.tile{position:relative;display:block;cursor:pointer;min-width:0}
.tile>input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tile-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:100%;min-height:66px;padding:11px 12px 11px 11px;
  border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--paper);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.tile-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--mist);color:var(--green-2);
  transition:background-color .18s ease,color .18s ease}
.tile-ico svg{width:24px;height:24px;display:block}
.tile-text{min-width:0}
.tile-title{display:block;font-weight:650;line-height:1.25;color:var(--ink)}
.tile-about{display:block;margin-top:2px;font-size:.85rem;line-height:1.35;color:var(--muted)}
.tick{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--paper);color:#fff;
  transition:background-color .15s ease,border-color .15s ease}
.tick svg{width:16px;height:16px;display:block;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .26s cubic-bezier(.65,0,.35,1) .04s}
.tile:hover .tile-box{border-color:var(--green)}
.tile>input:checked+.tile-box{border-color:var(--green);background:var(--mist);box-shadow:inset 0 0 0 1px var(--green)}
.tile>input:checked+.tile-box .tile-ico{background:var(--green);color:var(--lime)}
.tile>input:checked+.tile-box .tick,.agree-row>input:checked~.tick{background:var(--green);border-color:var(--green)}
.tile>input:checked+.tile-box .tick svg,.agree-row>input:checked~.tick svg{stroke-dashoffset:0}
.tile>input:focus-visible+.tile-box{outline:3px solid var(--focus);outline-offset:2px}
.tiles.has-error .tile-box{border-color:var(--red)}
.tile.popped .tile-ico{animation:kf-press .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes kf-press{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}
.tile-more>.cond>.field,.tile-more>.field{margin:14px 0 0}
.tile-more .cond:not([hidden]){animation:kf-drop .22s ease-out}

/* One box to tick, as a row: the statement in bold and any detail under it */
.agree{margin:10px 0 0}
.quote-form .ack-note{margin:18px 0 4px;color:var(--ink-2)}  /* what the quote is, said by the button (41.5.0) */
.field>label.agree-row{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:12px;margin:0;padding:13px 16px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);font-weight:450;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease}
.agree-row>input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.agree-row>.tick{grid-column:1;grid-row:1;margin-top:1px}
.agree-text{grid-column:2;grid-row:1;min-width:0;line-height:1.4}
.agree-title{display:block;font-weight:600;color:var(--ink)}
.agree-about{display:block;margin-top:3px;font-size:.9rem;color:var(--muted)}
.agree-about a,.agree-title a{position:relative;z-index:2}
.field>label.agree-row:hover{border-color:var(--green)}
.field>label.agree-row:has(>input:checked){border-color:var(--green);background:var(--mist)}
.agree-row>input:focus-visible~.tick{outline:3px solid var(--focus);outline-offset:2px}
.agree.has-error>label.agree-row{border-color:var(--red)}
.agree+.agree{margin-top:8px}
.agree+.btn,.agree+button{margin-top:18px}
/* High contrast (Windows' contrast themes): colours and shadows are the system's own, so a chosen card, answer, tile or row
   is marked with the system's highlight, and the quick estimate's switch is a plain tick box again */
@media (forced-colors:active){
  .card-choice>input:checked+.cc-box,.tile>input:checked+.tile-box,.field>label.agree-row:has(>input:checked){outline:3px solid Highlight;outline-offset:-3px}
  .card-choice>input:checked+.cc-box .cc-dot{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .choices.seg .choice input:checked+span{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
  .est-fields .choice input{appearance:auto;-webkit-appearance:auto;width:18px;height:18px;border-radius:0}
  .est-fields .choice input::before{content:none}
  .tick svg{stroke:CanvasText}
}

.cond[hidden]{display:none}

/* The estimate on a phone: a bar at the foot of the screen with the running total, opening to the breakdown */
.est-bar{display:none}
@media (max-width:1000px){
  .js .live-summary{display:none}
  .est-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--deep);color:#dfece5;
    box-shadow:0 -12px 30px -14px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom);animation:kf-rise .3s cubic-bezier(.2,.7,.2,1)}
  .est-bar[hidden]{display:none}
  .est-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0 18px;background:none;border:0;color:inherit;font:inherit;
    text-align:left;cursor:pointer}
  .est-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
  .est-label{font-weight:600;font-size:.95rem;line-height:1.35;padding:8px 0}
  .est-label>span{display:block}
  /* (41.39.0) the legal fees and the disbursements under the label, quieter than the total they make */
  .est-label>.est-split{font-weight:400;font-size:.8rem;line-height:1.3;color:#b9d0c3}
  .est-label>.est-split[hidden]{display:none}
  .est-toggle strong{margin-left:auto;font:600 1.35rem/1 var(--serif);color:var(--lime);font-variant-numeric:tabular-nums}
  .est-chev{flex:none;width:9px;height:9px;border-left:2px solid var(--lime);border-top:2px solid var(--lime);transform:translateY(2px) rotate(45deg);
    transition:transform .2s ease}
  .est-toggle[aria-expanded="true"] .est-chev{transform:translateY(-3px) rotate(225deg)}
  .est-sheet{max-height:58vh;max-height:58dvh;overflow:auto;padding:6px 18px 16px;border-top:1px solid rgba(255,255,255,.12)}
  .est-sheet .line .dots{border-color:rgba(212,233,142,.35)}
  .est-sheet .line-total .amt{color:var(--lime)}
  .est-sheet .small,.est-sheet .tax-line,.est-sheet .line-note{color:#b9d0c3}  /* (41.37.0, from the audit: the note on the dark sheet, legible) */
  .est-sheet .tax-line strong{color:#fff}
  .est-sheet .sub{color:var(--lime)}
  body.has-est-bar{padding-bottom:78px}
}

/* Separate representation (slr.py): the law firm's starting fee printed as the home page's itemised statement, the steps
   joined as on the home page, what the fee depends on as a ruled list, and the request form on a tinted band beside the
   firm's card */
.hero-slr h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
/* The statement holds one figure, the starting fee, as the home page's total (marked, as it prints); "plus VAT" beside it,
   and what the firm confirms later in the muted words a quote uses for "To be confirmed" */
.slr-statement .line-total .vat{flex:none;font:650 .9rem/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
/* (41.32.2) on a phone, "including VAT" goes under the figure, so the total's label stays whole on its line */
.slr-statement .line-total span:first-child{white-space:nowrap}
@media (max-width:560px){
  .slr-statement .line-total{flex-wrap:wrap}
  .slr-statement .line-total .vat{flex:1 0 100%;text-align:right;margin-top:4px}
}
.slr-statement .amt.tbc{font-weight:500;font-style:italic;color:var(--muted)}
/* Under the introduction (a tablet or phone) the statement comes after the words: the fee is said at the start as well */
.hero-price{display:none}
@media (max-width:1000px){
  .hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:-.15em 0 .8em}
  .hero-price .hp-label,.hero-price .hp-vat{font:650 1rem/1.2 var(--sans);color:#d5e6dc}
  .hero-price .hp-amount{font:600 2.4rem/1.05 var(--serif);color:var(--lime);font-variant-numeric:tabular-nums}
}

.hero-slr .hero-points{margin-bottom:28px}
.slr .steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:46px;bottom:4px;width:2px;border-radius:1px;background:var(--line-2)}
.ruled-list{list-style:none;padding:0;margin:20px 0 16px;border-top:1px solid var(--line)}
.ruled-list li{margin:0;padding:14px 0;border-bottom:1px solid var(--line);font:600 1.22rem/1.35 var(--serif);color:var(--green)}
.slr-request h2{margin-bottom:.3em}
.slr-request .lede{margin-bottom:26px}
.slr-request .form-actions{margin-bottom:0}
.slr-firm .firm-name{font:600 1.22rem/1.3 var(--serif);color:var(--green)}
.slr-firm .callout{margin:18px 0}
.slr-more>h2:first-child{margin-top:0}
.slr-more .faq summary{font-size:1.05rem}
.slr-sent{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:56px;align-items:start;padding-top:40px;padding-bottom:72px}
.slr-sent .statement{margin-top:14px;box-shadow:0 26px 50px -28px rgba(14,47,38,.55),0 2px 6px rgba(14,47,38,.06)}
.slr-sent .line-total .amt{background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .3em no-repeat;padding:0 .06em}
.slr-sent .steps{margin-bottom:8px}
@media (max-width:1000px){.slr-sent{grid-template-columns:1fr;gap:36px}}

/* Who acts for whom (art.lender_routes, slr.diagram): the lender and its law firm on a solid line, the borrower and their
   own conveyancer on a dashed one, both reaching the property. Dark on the home page's band, light on the page's own band.
   The legend under it says the same in words. */
.band-slr{background:var(--green);color:#d5e6dc}
.band-slr h2{color:#fff}
.band-slr p{color:#d5e6dc;max-width:52ch}
.slr-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.slr-band .band-actions{justify-content:flex-start;margin-top:24px}
.slr-band-copy>:last-child{margin-bottom:0}
.la-figure{margin:0;--la-ring:rgba(212,233,142,.36);--la-fill:rgba(212,233,142,.06);--la-ink:#d5e6dc;--la-strong:#fff;
  --la-firm:rgba(212,233,142,.2);--la-accent:var(--lime);--la-dash:rgba(212,233,142,.55);--la-text:#d5e6dc}
.slr-explain .la-figure{--la-ring:var(--line-2);--la-fill:#fff;--la-ink:var(--green-2);--la-strong:var(--deep);--la-firm:var(--lime);
  --la-accent:var(--green-2);--la-dash:var(--muted);--la-text:var(--ink-2)}
.la-art{display:block;width:100%;height:auto}
.la-ring{fill:var(--la-fill);stroke:var(--la-ring);stroke-width:1.5}
.la-firm .la-ring{fill:var(--la-firm);stroke:var(--la-accent)}
.la-home .la-ring{stroke:var(--la-accent);stroke-width:2.4}
.la-ico{fill:none;stroke:var(--la-ink);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.la-firm .la-ico,.la-home .la-ico{stroke:var(--la-strong)}
.la-route{fill:none;stroke-linecap:round}
.la-lender{stroke:var(--la-accent);stroke-width:2.4}
.la-borrower{stroke:var(--la-dash);stroke-width:1.6;stroke-dasharray:5 7}
.la-legend{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.95rem;color:var(--la-text)}
.la-key{display:flex;align-items:center;gap:10px;margin:0}
.la-key::before{content:"";flex:none;width:28px;border-top:2.4px solid var(--la-accent)}
.la-key-borrower::before{border-top:2px dashed var(--la-dash)}
.slr-explain h2{margin-bottom:.4em}
.slr-explain p{max-width:56ch}
@media (max-width:1000px){.slr-band{grid-template-columns:1fr;gap:32px}.la-figure{max-width:520px}}
/* With "Movement as the page opens" on, the drawing plays once as the visitor reaches it (site.js): the circles appear, the
   lender's line is traced from the lender to the property, and the borrower's fades in beside it */
.motion .la-art.will-draw .la-node,.motion .la-art.will-draw .la-route{opacity:0}
.motion .la-art.drawn .la-node{transform-box:fill-box;transform-origin:center;animation:kf-pop .5s cubic-bezier(.3,1.3,.5,1) backwards}
.motion .la-art.drawn .la-firm{animation-delay:.55s}
.motion .la-art.drawn .la-borrower-node{animation-delay:.15s}
.motion .la-art.drawn .la-conveyancer{animation-delay:.7s}
.motion .la-art.drawn .la-home{animation-delay:1.25s}
.motion .la-art.drawn .la-lender{stroke-dasharray:100;animation:kf-trace .55s cubic-bezier(.65,0,.35,1) .3s backwards}
.motion .la-art.drawn .la-lender-2{animation-delay:.85s}
.motion .la-art.drawn .la-borrower{animation:kf-fade .6s ease-out .6s backwards}
@media print{.motion .la-art.will-draw .la-node,.motion .la-art.will-draw .la-route{opacity:1!important}}
@media (forced-colors:active){
  .la-ring,.la-firm .la-ring{fill:Canvas;stroke:CanvasText}
  .la-ico,.la-firm .la-ico,.la-home .la-ico,.la-lender,.la-borrower{stroke:CanvasText}
  .la-key::before,.la-key-borrower::before{border-top-color:CanvasText}
}

/* ------------------------------------------------------------------ 41.2: the site's look, polished
   Two marks carry the brand through every page: the title plan (the street plan of the home page, with the visitor's plot
   edged) and the itemised receipt (the estimate's torn edge and dotted leaders, for every summary of money). Colours come
   from the theme's own variables, so a theme the owner chooses (Website settings) recolours all of it. */

/* The head of every inner page (views.layout, art.site_plan): a tinted band behind the breadcrumb and the heading, the
   street plan drawn faintly at its right with the visitor's plot edged, fading into the page below. Decoration only,
   under everything else; none in print or a contrast theme, and on a small phone the band alone. */
.masthead{position:absolute;left:0;right:0;height:440px;z-index:-1;pointer-events:none;overflow:hidden;background:var(--mist);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.55) 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.55) 62%,transparent 100%)}
/* Where a card stands on the right (an example quote, the estimate as it fills in, a contact card) the card is what the eye
   goes to: the band stays and the plan is left out, rather than half hidden behind the card */
body:has(.aside-card,.side-card,.live-summary,.result-total,.finder,.slr-facts,.slr-sent) .site-plan{display:none}
.site-plan{position:absolute;top:-128px;left:calc(50% + 300px);width:980px;height:420px;max-width:none;
  -webkit-mask-image:radial-gradient(360px 270px at 214px 262px,#000 28%,rgba(0,0,0,.42) 60%,transparent 88%);
  mask-image:radial-gradient(360px 270px at 214px 262px,#000 28%,rgba(0,0,0,.42) 60%,transparent 88%)}
.sp-road{fill:rgba(18,61,49,.035);fill:color-mix(in srgb,var(--green) 3.5%,transparent)}
.sp-edge{fill:none;stroke:rgba(18,61,49,.24);stroke:color-mix(in srgb,var(--green) 24%,transparent);stroke-width:1.2}
.sp-plot{fill:none;stroke:rgba(18,61,49,.16);stroke:color-mix(in srgb,var(--green) 16%,transparent);stroke-width:1}
.sp-bldg{fill:rgba(18,61,49,.05);fill:color-mix(in srgb,var(--green) 5%,transparent);stroke:rgba(18,61,49,.2);
  stroke:color-mix(in srgb,var(--green) 20%,transparent);stroke-width:.8}
.sp-subject-fill{fill:rgba(212,233,142,.5);fill:color-mix(in srgb,var(--lime) 50%,transparent)}
.sp-home{fill:rgba(28,84,67,.3);fill:color-mix(in srgb,var(--green-2) 30%,transparent);stroke:var(--green-2);stroke-width:1}
.sp-subject{fill:none;stroke:var(--green-2);stroke-width:2.2;stroke-linejoin:round}
/* Below a wide screen there is no margin beside the heading to hold the plan, so the band stands alone */
@media (max-width:1180px){.site-plan{display:none}}
@media (max-width:760px){.masthead{height:300px}}
@media print{.masthead{display:none}}
@media (forced-colors:active){.masthead{display:none}}

/* An itemised receipt for any summary of money that is not a form (the home page's starting prices): the estimate's torn
   top edge, on white, lifted off the page */
.receipt{position:relative;background:var(--paper);border-radius:4px 4px var(--r-lg) var(--r-lg);padding:22px 24px 16px;margin-top:20px;box-shadow:var(--shadow-md)}
.receipt::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--paper) 7.5px) 0 0/18px 10px repeat-x}
.receipt .price-table{margin-top:0}
.receipt .price-table th,.receipt .price-table td{padding-left:6px;padding-right:6px}
.receipt .price-table th.num,.receipt .price-table td.num{width:7.4em}
.receipt .price-table tbody tr:last-child>*{border-bottom:0}
.receipt>.small:last-child{margin-bottom:0;padding-top:12px;border-top:1px dashed var(--line-2)}
@media (max-width:640px){.receipt{padding:18px 14px 12px}.band-partner>.wrap{margin:0 12px;padding:32px 20px;border-radius:18px}}
@media print{.receipt{box-shadow:none;border:1px solid #999}.receipt::before{display:none}}

/* Articles (services, guides, information pages): lists marked with the plot's diamond, what a service covers ticked, the
   covered and extra work side by side, questions that open with their own answer in reach */
.prose ul:not([class]),.auth-card ul:not([class]){list-style:none;padding-left:0}
.prose ul:not([class])>li,.auth-card ul:not([class])>li{position:relative;padding-left:24px}
.prose ul:not([class])>li::before,.auth-card ul:not([class])>li::before{content:"";position:absolute;left:5px;top:.62em;width:7px;height:7px;border-radius:1.5px;background:var(--lime-2);
  box-shadow:0 0 0 1.5px var(--green-2);transform:rotate(45deg)}
.prose ol:not([class])>li::marker{color:var(--green-2);font-weight:650}
.ticks{list-style:none;padding:0}
.ticks>li{position:relative;padding-left:30px;margin:.45em 0}
.ticks>li::before{content:"";position:absolute;left:3px;top:.42em;width:14px;height:8px;border-left:2.5px solid var(--green-2);border-bottom:2.5px solid var(--green-2);
  transform:rotate(-45deg)}
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 40px;margin-top:1.4em}
.cols-2>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 24px 12px;box-shadow:var(--shadow-sm)}
.cols-2>div>h2{font-size:1.3rem;margin-top:1.1em}
.faq summary{transition:color .15s ease}
.faq summary:hover,.faq[open] summary{color:var(--green)}
.faq summary::after{border-color:var(--green-2)}
.prose .faq{border-bottom-color:var(--line)}
@media (max-width:640px){.cols-2{gap:16px}.cols-2>div{padding:2px 16px 8px}}
@media print{.cols-2>div{box-shadow:none}}

/* Every white panel the same: the same corner (--r-lg) and the same resting shadow, so a page reads as one set */
.form-section,.quote-card,.tracker,.conveyancer,.messages,.partner-sharing,.uploads,.callback,.journey,.services-later,.calc,.filter,
.result-card,.firm-card,.review,.auth-card,.empty-note{box-shadow:var(--shadow-sm)}
.firm-card{border-radius:var(--r-lg)}
.firm-card:hover{border-color:var(--green-2)}
/* The total on a client's page, printed like the estimate: a torn top edge in the panel's own colour */
.result-total{position:relative;border-radius:4px 4px var(--r-lg) var(--r-lg);box-shadow:var(--shadow-md)}
.result-total::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--green) 7.5px) 0 0/18px 10px repeat-x}
/* The services directory: each service a row that lights up as it is pointed at */
.service a{margin:0 -12px;padding:16px 12px;border-radius:var(--r);transition:background-color .15s ease}
.service a:hover{background:var(--paper);box-shadow:var(--shadow-sm)}
/* On a phone the paths lie flat: the drawing beside the words, so four of them fit on a screen or two */
@media (max-width:640px){
  .path{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 18px 20px}
  .path::after{left:18px;right:18px}
  .path-ico{grid-row:1 / span 2;width:44px;height:44px;margin:0}
  .path-ico svg{width:26px;height:26px}
  .path h3{grid-column:2;font-size:1.2rem;margin:2px 0 .2em}
  .path p{grid-column:2}
  /* (41.36.2, as the owner asked: on a phone the drawings were squeezed into the icon's column, too small to see them move) a
     card with a drawing keeps it above its words, as at a desk, wide enough for its movement to be seen */
  .path.path-drawn{display:flex;flex-direction:column;gap:2px;padding:14px 18px 20px}
  .path-drawn .path-art{width:100%;max-width:300px;margin:0 0 8px}
  .path-drawn h3{margin:0 0 .2em}
  .service a{margin:0 -8px;padding:14px 8px}
}
/* On paper the total is dark ink on white, whether or not the browser prints background colours */
@media print{.result-total{background:#fff!important;color:#13261e!important;box-shadow:none}.result-total *{color:#13261e!important}.result-total::before{display:none}}
@media (forced-colors:active){.result-total::before,.receipt::before{display:none}}

/* The calculators' answers (stamp duty, moving costs) on the estimate's own slip: a torn top edge, white, lifted off the
   page, the figure marked in lime as the home page marks its total */
.result-card{position:relative;border:0;border-radius:4px 4px var(--r-lg) var(--r-lg);padding:28px 26px 18px;margin:30px 0 32px;box-shadow:var(--shadow-md)}
.result-card::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--paper) 7.5px) 0 0/18px 10px repeat-x}
.result-card .result-amount{display:inline-block;background:linear-gradient(var(--lime),var(--lime)) 0 88%/100% .28em no-repeat;padding:0 .06em}
.result-card>.small:last-child{margin-bottom:0;padding-top:12px;border-top:1px dashed var(--line-2)}
.result-card .band-table tbody tr:last-child>*{border-bottom:0}
/* The rates in force, four small tables side by side */
.rate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:16px 0 8px;align-items:start}
.rate-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 8px;box-shadow:var(--shadow-sm)}
.rate-card h3{font-size:1rem;margin:0 0 4px;line-height:1.35}
.rate-card .band-table{margin:6px 0 10px}
.rate-card .band-table th,.rate-card .band-table td{padding-left:2px;padding-right:2px}
.rate-card .band-table tbody tr:last-child>*{border-bottom:0}
.rate-card .small{margin:0 0 12px;padding-top:10px;border-top:1px dashed var(--line-2)}
@media (max-width:640px){.result-card{padding:24px 16px 14px}}
@media print{.result-card,.rate-card{box-shadow:none;border:1px solid #999}.result-card::before{display:none}}
@media (forced-colors:active){.result-card{border:1px solid CanvasText}.result-card::before{display:none}}

/* A form that is the page's purpose (finding a quote, contacting us, a review, applying to join) on a white panel, as the
   quote forms and the calculators are */
.panel-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px 28px;margin-top:26px;box-shadow:var(--shadow-sm)}
@media (max-width:640px){.panel-form{padding:20px 16px 22px}}
@media print{.panel-form{box-shadow:none}}

/* The decision on a client's quote: still its own tint, now lifted like the panels around it rather than ruled in heavy green */
.proceed{border:1px solid var(--line-2);box-shadow:var(--shadow-md)}
.proceed h2{margin-bottom:14px}
@media print{.proceed{box-shadow:none}}
.services-later h2{font-size:1.35rem;margin:0 0 .4em}  /* the same size as every other panel's heading on a client's page */
.review{border-radius:var(--r-lg)}  /* the reviews take the same corner as every other card */
.auth-card{box-shadow:var(--shadow-md)}  /* signing in: the one card on the page, lifted off the band behind it */
@media print{.steps li::before{background:#fff!important;color:#13261e!important;border:1.5px solid #13261e}}  /* numbers readable on paper */

/* After the independent design review (41.2) */
/* The plan fades in from its left edge, so none of it runs under the heading or the introduction (a narrow column ends 70
   pixels inside where it starts); the visitor's plot, from 128 pixels in, is untouched */
.site-plan{-webkit-mask-image:linear-gradient(90deg,transparent 90px,#000 130px),radial-gradient(360px 270px at 214px 262px,#000 28%,rgba(0,0,0,.42) 60%,transparent 88%);
  mask-image:linear-gradient(90deg,transparent 90px,#000 130px),radial-gradient(360px 270px at 214px 262px,#000 28%,rgba(0,0,0,.42) 60%,transparent 88%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* A fee and its "before VAT" each on one line */
@media (min-width:641px){.price-table th.num,.price-table td.num{width:10.5em}.price-table td.num .line-desc{white-space:nowrap}}
/* Large totals in the serif with its own figure widths: in columns, figures line up; a total alone reads as one number */
.result-amount,.result-total strong,.line-total .amt,.hero-price .hp-amount{font-variant-numeric:lining-nums proportional-nums}
/* The live estimate on the quote forms marks its total as the home page's does */
.statement .line-total .amt,.live-summary .line-total .amt{background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .3em no-repeat;padding:0 .06em}
/* A form inside a card is part of the card, not a second card */
.aside-card .panel-form{background:none;border:0;box-shadow:none;padding:0;margin:0}
/* The contents box's diamonds sit on their line */
.toc ul li::before{margin:0}
/* Room between a side card's links and its button */
.aside-card .link-list{margin-bottom:16px}
/* Three situations side by side whenever there is room for three */
@media (min-width:761px){.choices.cards .choice-list:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.cc-box{align-content:start}  /* in cards of one height, each card's words start at the top */
/* The phone menu marks the page you are on, as the menu on a wider screen does */
.menu nav a[aria-current]{color:var(--green);box-shadow:inset 3px 0 var(--lime-2);padding-left:12px}
/* Keyboard focus on a whole card: the card keeps its white and gains a ring, so the words on it stay as readable */
a.card:focus-visible,a.path:focus-visible,a.finder-option:focus-visible,.service a:focus-visible,.link-list li>a:focus-visible{
  background:var(--paper);color:var(--ink);outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px var(--ink);text-decoration:none}
/* The torn edge shows on a light page too */
.receipt::before,.result-card::before,.live-summary::before{filter:drop-shadow(0 -1px 0 rgba(14,47,38,.14))}
/* A client's itemised quote and a service's example quote on the slip */
.quote-card,.aside-card.example-slip{border:0;border-radius:4px 4px var(--r-lg) var(--r-lg);box-shadow:var(--shadow-md)}
.quote-card{position:relative;margin-top:16px}
.quote-card::before,.aside-card.example-slip::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--paper) 7.5px) 0 0/18px 10px repeat-x;filter:drop-shadow(0 -1px 0 rgba(14,47,38,.14))}
@media (max-width:1000px){.aside-card.example-slip{position:relative;top:auto;margin-top:10px}}  /* (41.36.3: no sticky offset below the text) */
/* the way to a quote under a service's introduction, where the example quote falls below the page (41.5.0) */
.lede-cta{display:none}
@media (max-width:1000px){.lede-cta{display:block;margin:4px 0 26px}.lede-cta p{margin:0 0 8px}}
@media print{.quote-card::before,.aside-card.example-slip::before{display:none}.quote-card,.aside-card.example-slip{box-shadow:none;border:1px solid #999}}
@media (forced-colors:active){.quote-card::before,.aside-card.example-slip::before{display:none}.quote-card,.aside-card.example-slip{border:1px solid CanvasText}}
/* The tags in the site's own colours, so a theme recolours them too */
.tag-instant{background:rgba(212,233,142,.55);background:color-mix(in srgb,var(--lime) 55%,#fff);color:var(--green)}
.tag-tailored{background:var(--paper);color:var(--green-2);box-shadow:inset 0 0 0 1px var(--line-2)}
/* On a phone every panel keeps the same inset, and the partner panel lines up with the blocks around it */
@media (max-width:640px){
  .band-partner>.wrap{margin:0 16px}
  .quote-card,.tracker,.conveyancer,.messages,.partner-sharing,.uploads,.callback,.journey,.services-later,.proceed{padding:20px 16px}
}

/* 41.3: separate representation asked as a quote is: the request a step at a time, with the request and its starting fee on
   a slip beside it as it is filled in; the firm answers beside the request on a slip of its own */
.slr-form .form-subsection{border:0;border-top:1px dashed var(--line-2);margin:22px 0 0;padding:18px 0 0;min-width:0}
.slr-form .form-subsection[hidden]{display:none}
.slr-form .form-subsection>legend{float:left;width:100%;padding:0;margin-bottom:12px;font:600 1.08rem/1.3 var(--serif);color:var(--green)}
.slr-form .form-subsection>*{clear:both}
.slr-form .form-privacy{margin:20px 0 0}
.slr-summary .slr-sum-body{border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);padding:14px 0 12px}
.slr-summary .sum-empty{margin:0 0 12px}
.slr-summary .sum-answers{margin:0}
.slr-summary .sum-row{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:10px;padding:5px 0;font-size:.92rem;line-height:1.4}
.slr-summary .sum-row[hidden]{display:none}
.slr-summary .sum-row dt{color:var(--muted)}
.slr-summary .sum-row dd{margin:0;color:var(--ink);font-weight:550;overflow-wrap:anywhere}
.slr-summary .slr-sum-fee{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2)}
.slr-summary.is-empty .slr-sum-fee{margin-top:0;padding-top:0;border-top:0}
.slr-summary .line-total .vat{flex:none;font:650 .9rem/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
.slr-summary .amt.tbc{font-weight:500;font-style:italic;color:var(--muted)}
.slr-summary .slr-sum-fee .line>span:first-child{white-space:nowrap}
/* the card is narrow: the lines before the total in smaller type, and "including VAT" under the total rather than past
   the card's edge (41.5.0) */
.slr-summary .slr-sum-fee .line:not(.line-total){font-size:.92rem}
.slr-summary .slr-sum-fee .line:not(.line-total)>span:first-child{white-space:normal;min-width:0}
.slr-summary .line-total{flex-wrap:wrap;row-gap:2px}
.slr-summary .line-total .vat{flex-basis:100%;text-align:right}
@media (min-width:1001px){.slr-answer{grid-template-columns:minmax(0,1fr) 380px}}
.slr-summary .sum-row.is-new dd{animation:kf-fade .45s ease-out backwards}
.slr-head-fee{display:none;margin:-4px 0 14px;font-size:1rem}
.slr-head-fee strong{font:600 1.1rem var(--serif);color:var(--green)}
@media (max-width:1000px){.js .slr-summary{display:block}.slr-head-fee{display:block}}
.slr-start h3{font-size:1.05rem;margin:14px 0 4px}
.slr-start .ticks{margin:0 0 26px}
.slr-answer .slr-facts{margin-top:0;position:sticky;top:96px}
.slr-facts h2{font-size:1.25rem;margin-bottom:10px}
.fact-list{margin:0;border-top:1px dashed var(--line-2)}
.fact-row{display:grid;grid-template-columns:minmax(6.5em,38%) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:.94rem;line-height:1.45}
.fact-row:last-child{border-bottom:0}
.fact-row dt{color:var(--muted)}
.fact-row dd{margin:0;font-weight:550;overflow-wrap:anywhere}
.fact-message{border-top:1px dashed var(--line-2);margin-top:4px;padding-top:12px}
.fact-message h3{font-size:1rem;margin:0 0 6px}
.fact-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.slr-answer-form{margin-top:0}
.slr-answer-main>.callout{margin-top:0}
.answer-now{margin-bottom:8px}
.answer-history{margin:4px 0 16px}
@media (max-width:1000px){.slr-answer .slr-facts{position:static}}
@media print{.slr-answer .slr-facts{position:static}}


/* 41.4.0: confirming the client's email address before they go ahead, in place of the go-ahead button: the code in a wide,
   spaced box beside its button, a new code and a corrected address underneath; and the hint under any email box when the
   address looks like a slip of the keyboard */
.confirm-email{margin:.6em 0 1.2em;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--lime-2);border-radius:var(--r-sm);background:var(--paper)}
.confirm-email h3{margin:0 0 .4em;font-size:1.12rem}
.confirm-email>p{margin:0 0 .8em}
.confirm-form>label{display:block;font-weight:650;margin:0 0 6px}
.confirm-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.confirm-row input{width:9.5em;font:600 1.3rem/1.2 var(--sans);letter-spacing:.18em;padding:10px 12px;font-variant-numeric:tabular-nums}
.confirm-form .hint{display:block;margin:-2px 0 8px;font-size:.88rem;color:var(--muted)}
.confirm-more{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:14px}
.confirm-more p{margin:0}
.confirm-suggest p{margin:0 0 .8em}
.confirm-change{margin-top:12px}
.confirm-change summary{cursor:pointer;color:var(--link)}
.confirm-change form{margin-top:10px}
.email-suggest{margin:6px 0 0;font-size:.92rem}
.email-suggest[hidden]{display:none}

/* 41.8.0: what happens after a partner applies, under the form */
.apply-next{margin-top:36px}
.apply-next h2{font-size:1.35rem}
.apply-next p{margin-top:8px;color:var(--ink-2)}
/* 41.36.2: the kinds of partner, each with an application page of its own */
.apply-cards{list-style:none;margin:24px 0 8px;padding:0;display:grid;gap:14px}
@media (min-width:700px){.apply-cards{grid-template-columns:1fr 1fr}}
.apply-card{margin:0}
.apply-card a{display:flex;flex-direction:column;height:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  color:var(--ink);text-decoration:none}
.apply-card a:hover{border-color:var(--green)}
.apply-card a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.apply-card h2{font-size:1.2rem;margin:0 0 6px}
.apply-card p{margin:0 0 8px}
.apply-card .small{color:var(--ink-2)}
.apply-go{margin-top:auto;font-weight:650;color:var(--green)}
.apply-form .form-section{margin:0 0 18px}
.apply-form .agree+.grid-2,.apply-form .agree+.field:not(.agree){margin-top:20px}  /* (a broker's principal firm, after its tick) */
/* 41.9.0: once the client is handed over to their law firm, the firm's name, who handles the matter and how to reach it come
   first, in the box at the top, with the phone number as a button to tap; then how long a matter like theirs commonly takes */
.proceed.handed .firm-contact{margin:16px 0 0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm)}
.firm-contact .firm-contact-name{font:600 1.22rem/1.3 var(--serif);color:var(--green);margin:0 0 .3em}
.firm-contact .firm-handler{margin:0 0 .4em}
.contact-buttons{align-items:center}
.contact-buttons a[href^="tel:"]{display:inline-block;margin-left:4px;padding:7px 14px;border-radius:var(--r-sm);background:var(--green);color:#fff;
  font-weight:600;text-decoration:none;white-space:nowrap}
.contact-buttons a[href^="tel:"]:hover{background:#0e2f26}
.contact-buttons a[href^="tel:"]:focus-visible{outline:3px solid var(--lime-2);outline-offset:2px}
.timescale{margin:1.1em 0 0;color:var(--ink-2);max-width:66ch}
.proceed.handed .timescale{margin-top:18px}
.proceed .timescale{margin:.2em 0 1em;font-size:.95rem}
.proceed .who-acts li{margin:0 0 .35em;line-height:1.45}

/* 41.12.0: the quote journey made easier to say yes to (a review of it as a first-time buyer on a phone) */
/* The home page: one order for every screen, as it is read and as the keyboard moves through it (public.home): the heading,
   the introduction, the estimate, the key points, the buttons and the law firm. A computer screen sets the estimate beside the
   rest, which is centred against it as before (the rows above and below take what is left over); a tablet or phone shows it
   straight after the introduction, with three key points under it on a phone. Only the home page: other pages' tops keep
   their own layout. */
.hero-grid.hero-est{grid-template-columns:minmax(0,1fr)}
@media (min-width:1001px){
  .hero-est .hero-copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,440px);grid-template-rows:1fr repeat(6,auto) 1fr;
    column-gap:56px;row-gap:0}
  .hero-est .hero-copy>*{grid-column:1;min-width:0}
  .hero-est .hero-copy>h1{grid-row:2}
  .hero-est .hero-copy>.lede{grid-row:3;margin-bottom:0}  /* (no margins collapse in a grid: the next part's own margin is the gap) */
  .hero-est .hero-copy>.hero-points{grid-row:4}
  .hero-est .hero-copy>.hero-actions{grid-row:5;margin-bottom:0}
  .hero-est .hero-copy>.hero-rating{grid-row:6}  /* (41.33.0) what customers rate the business, under the buttons */
  .hero-est .hero-copy>.hero-firm{grid-row:7}
  .hero-est .hero-copy>.statement{grid-column:2;grid-row:1/-1;align-self:center}
}
@media (max-width:1000px){
  .hero-est .hero-copy>.lede{margin-bottom:28px}  /* (room above the estimate's torn edge) */
  .hero-est .hero-copy>.hero-points{margin:26px 0 22px}
}
@media (max-width:760px){
  .hero-est .hero-points li:nth-child(n+4){display:none}  /* three key points on a phone: the first is the promise, while it holds */
  .hero-est .hero-points.with-nofee li:nth-child(4){display:block}  /* (41.36.1) four with No completion, no fee among them */
}
@media (max-width:360px){.hero-home h1{font-size:2rem}}  /* the smallest phones: each line of the home page's heading on one line */
/* (the parts rise in the order they are read: the estimate has its own, earlier, start) */
.motion .hero-est .hero-copy>.hero-points{animation-delay:.36s}
.motion .hero-est .hero-copy>.hero-actions,.motion .hero-est .hero-copy>.hero-firm,.motion .hero-est .hero-copy>.hero-rating{animation-delay:.44s}
.hero-firm{margin:18px 0 0;font-size:.92rem;color:#c8dccf;max-width:30rem;line-height:1.5}  /* (clear of the street plan beside it) */
.hero-firm strong{color:#fff;font-weight:600}
.hero-firm a{color:#fff}
/* the promise under the estimate, after its note: about the itemised quote the button leads to */
.statement-promise{margin:-4px 0 14px;font-weight:600;color:var(--green);font-size:.94rem;line-height:1.4}
.statement-promise::before{content:"\2713\00a0";color:var(--green-2)}
/* The client's quote: the button straight after who the client is introduced to, then what happens next */
.go-ahead form{margin:18px 0 10px}
.proceed .go-hint{margin:0 0 12px;color:var(--ink-2)}
.proceed-next{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--line-2)}
.proceed-next h3{font-size:1.05rem;margin:0 0 10px}
.proceed-next .steps{margin:0}
.confirm-email .confirm-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px}
/* (41.12.0) the box ticked to go ahead: what the client agrees to, right above the button that sends the request */
.go-agree{margin:14px 0 4px;max-width:44rem}
.go-ahead .go-agree{margin:0 0 12px}
.firm-card .go-agree{margin:10px 0}
/* (41.20.0, as the owner asked) the law firm a client goes ahead with: the firm named, and another behind "Want to instruct
   another firm?", chosen from a list */
.firm-choice{margin:4px 0 16px;max-width:44rem}
.firm-chosen{display:grid;gap:3px;margin:0;padding:14px 16px;border:1.5px solid var(--green);border-radius:var(--r);background:var(--paper)}
.firm-chosen[hidden]{display:none}
.firm-chosen-lead{color:var(--ink-2);font-size:.92rem}
.firm-chosen-name{font-size:1.08rem}
.firm-chosen-price{font-weight:600}
.firm-chosen-about{color:var(--muted);overflow-wrap:anywhere}
/* (41.38.0, as the owner asked) the owner's main law firm, our recommended firm: its name with a mark, and why, beneath it */
.firm-chosen.firm-main{border-width:2px;box-shadow:0 0 0 4px var(--mist)}
.firm-chosen.firm-main .firm-chosen-lead{color:var(--green);font-weight:650}
.firm-why{margin:6px 0 4px}
.firm-why[hidden]{display:none}
.firm-why-head{margin:0;font-weight:650}
.firm-why>.ticks{margin:2px 0 0}
.firm-why>.ticks>li{margin:.25em 0}
/* (41.38.0, from the audit) how it is connected to us, and how we recommend a firm, with the recommendation itself */
.firm-why-about{margin:6px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.firm-other{margin-top:10px}
.firm-other>summary{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;border:2px solid var(--line-2);border-radius:10px;
  background:var(--paper);color:var(--green);font-weight:650;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.firm-other>summary::-webkit-details-marker{display:none}
.firm-other>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.firm-other[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.firm-other>summary:hover{border-color:var(--green);color:var(--deep)}
.firm-other>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.firm-other>summary::after{transition:none}}
.firm-other-body{margin:6px 0 0}
.firm-other-body select{width:100%;max-width:100%}
.firm-abouts{margin:8px 0 0;padding-left:1.1em;color:var(--muted)}
.firm-abouts li{margin:.35em 0;overflow-wrap:anywhere}
.confirm-email .firm-choice{margin-top:14px}
.form-agree{flex-basis:100%;margin:6px 0 0;color:var(--ink-2)}
.form-agree a{font-weight:600}
.confirm-go .confirm-row input{width:11em}
/* (41.39.0) the code, the tick and the buttons together under the law firm's card, so a phone shows them as one */
.confirm-go-row{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.confirm-go-row>label{display:block;font-weight:650;margin:0 0 6px}
.confirm-go-row .go-agree{margin-top:12px}
.confirm-email[data-focus]:focus{outline:none}
.confirm-email[data-focus]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.quote-result>.result-actions{margin:20px 0 24px}
/* The quote form: the reassurance by the button on a phone or tablet, where the column beside the form is not shown */
.form-assure{display:none;margin:0;flex-basis:100%;font-size:.92rem;color:var(--ink-2)}
.form-assure>li{margin:.25em 0}
@media (max-width:1000px){.js .form-assure{display:block}}
.call-line{margin:-4px 0 14px;color:var(--ink-2)}
.call-line a,.contact-quick a{font-weight:600}
.extras-more{margin:6px 0 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.extras-more>summary{cursor:pointer;padding:13px 16px;font-weight:650;color:var(--green)}
.extras-more>summary:hover{text-decoration:underline}
.extras-more>summary .optional{font-weight:400;color:var(--muted)}
.extras-more[open]>summary{border-bottom:1px solid var(--line)}
.extras-more>.field{padding:14px 16px 4px;margin:0}
/* The guided start: four main answers in two columns, and the way to every kind of purchase under them */
.finder-options.primary.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.finder-options.primary.n4{grid-template-columns:1fr}}
.finder-also{margin:14px 0 0;color:var(--ink-2)}
.finder-also a{font-weight:600}
/* How it works: who does the legal work, named */
.panel-line.callout{margin:0 0 1.4em}
.panel-line ul{margin:.4em 0 0;padding-left:1.2em}
/* The lenders' band: an outlined button, so a buyer does not read it as the way to their own conveyancer */
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-on-dark:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
/* The contact page on a phone: the quickest ways to reach us first, under the introduction */
.contact-quick{margin:0 0 18px;padding:12px 16px;background:var(--mist);border-radius:var(--r-sm)}
@media (min-width:1001px){.contact-quick{display:none}}

/* ------------------------------------------------------------------ 41.13.0
   The street along the top of the footer (art.street_line): one line, drawn in once from left to right as the footer is
   reached (site.js, data-reveal), its doors and windows following; simply there without the page script, when the footer is
   already on the screen, or for a device that asks for less movement. */
.footer-street{margin:-30px 0 30px;color:var(--lime)}
.street{display:block;width:100%;height:clamp(58px,9.4vw,112px)}
.street path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.st-line{stroke-width:2;stroke-opacity:.6}
.st-detail{stroke-width:1.5;stroke-opacity:.28}
@keyframes kf-street{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.footer-street.will-reveal .st-line{stroke-dasharray:1;stroke-dashoffset:1}
.footer-street.will-reveal .st-detail{opacity:0}
.footer-street.revealed .st-line{stroke-dasharray:1;animation:kf-street 2.8s cubic-bezier(.45,.05,.3,1) both}
.footer-street.revealed .st-detail{animation:kf-fade 1.4s ease 1.7s backwards}
@media print{.footer-street{display:none}}

/* The guides, filed: each card has an index tab on its top edge carrying what the card's kicker says (its kind of guide or
   how long it takes to read), as the cards in a file do. */
.card-grid:has(>.card>.card-kicker){row-gap:46px;padding-top:22px}
.card:has(>.card-kicker){position:relative;border-top-left-radius:0}
.card>.card-kicker{position:absolute;left:-1px;top:1px;transform:translateY(-100%);margin:0;padding:6px 14px 5px;background:var(--paper);
  border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:inset 0 3px 0 var(--lime-2);
  transition:border-color .15s ease,box-shadow .15s ease}
.card>.card-kicker::before{display:none}
.card:hover>.card-kicker,.card:focus-visible>.card-kicker{border-color:var(--green-2);box-shadow:inset 0 3px 0 var(--green-2)}

/* A quote form's steps: the next one comes in from the right and an earlier one from the left, so the way through the form
   shows; a step already answered is ticked in the progress strip. */
@keyframes kf-step-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes kf-step-back{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.quote-form.is-stepped{overflow-x:clip;overflow-clip-margin:8px}
.step-in{animation:kf-step-in .32s cubic-bezier(.2,.7,.2,1)}
.step-back{animation:kf-step-back .32s cubic-bezier(.2,.7,.2,1)}
.step-nav .done .sn-label::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:5px;vertical-align:-.08em;background:var(--green-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Reviews as stubs torn from the same paper as the quotes: a perforated top edge, the words, then who wrote it and when
   under a dashed rule, as at the foot of a receipt. */
.review-grid{row-gap:30px;padding-top:10px}
.review-list .review{margin-top:28px}
.review-grid>.review,.review-list .review{position:relative;background:var(--mist);border:0;border-radius:3px 3px var(--r) var(--r);padding:22px 22px 18px}
.review-grid>.review::before,.review-list .review::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(circle at 9px -2px,transparent 7px,var(--mist) 7.5px) 0 0/18px 10px repeat-x}
.review-grid>.review figcaption,.review-list .review figcaption{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.review-grid>.review .reply,.review-list .review .reply{border-top-style:dashed;border-top-color:var(--line-2)}

/* How it works, drawn as the journey it describes: a line down beside its parts, with a stop at each heading. */
.how-route{--jx:46px;--jl:13px}
@media (max-width:640px){.how-route{--jx:32px;--jl:7px}}
.how-route>section,.how-route>.mid-cta{display:flow-root;position:relative;padding-left:var(--jx)}
.how-route>section::after,.how-route>.mid-cta::after{content:"";position:absolute;left:var(--jl);top:0;bottom:-72px;width:2px;background:var(--line-2)}
.how-route>section:last-of-type::after{bottom:0;background:linear-gradient(var(--line-2) 70%,transparent)}  /* (each part's line reaches the next) */
.how-route>section>h2{position:relative}
.how-route>section>h2::before{content:"";position:absolute;left:calc(var(--jl) - 7px - var(--jx));top:calc(.6em - 8px);width:16px;height:16px;box-sizing:border-box;
  border-radius:50%;background:var(--bg);border:3px solid var(--green-2);z-index:1}
.how-route>section:first-of-type>h2::before{background:var(--lime);border-color:var(--green)}

/* ------------------------------------------------------------------ How it works, drawn (art.journey_stage, 41.13.0)
   Beside the home page's steps, a drawing for each: the property, the itemised quote, going ahead with a regulated law
   firm. site.js shows them one after another as the part is reached (.is-live, then .on on the scene shown), marks the step
   each shows, and adds the buttons under them; each scene draws itself in as it comes on. Without the script the first
   drawing is there, still; a device that asks for less movement sees each at once. */
.band-how .split{align-items:center}
.stage{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:22px 22px 14px}
.stage-art{display:block;width:100%;height:auto;color:var(--green-2)}
.stage-art path,.stage-art circle{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stage-art .st-ground{stroke:var(--line-2);stroke-width:2}
.stage-art .fill-lime{fill:var(--lime)}
.stage-art .fill-paper{fill:var(--paper)}
.stage-art .fill-glass{fill:color-mix(in srgb,var(--lime) 30%,transparent)}
.stage-art .ln-dots{stroke-dasharray:1 6;stroke-width:2;stroke:var(--line-2)}
.stage-art .ln-label{stroke-width:5;stroke:var(--line-2)}
.stage-art .ln-amt{stroke-width:5}
.stage-art .ln-strong{stroke-width:7}
.stage-art .ln-head{stroke-width:7;stroke:var(--green)}
.stage-art .ln-rule{stroke-width:1.6;stroke:var(--line-2)}
.stage-art .ln-handle{stroke-width:7}
.stage-art .ln-route{stroke-dasharray:2 8}
.stage-art .ln-tick{stroke-width:3.2}
.stage-art .sc-move{transform:translate(368px,192px)}
.stage-art .sc-pop{transform-origin:150px 120px}
.stage-art .sc-key{transform-origin:470px 120px}
.stage .sc{opacity:0}
.stage:not(.is-live)[data-scene="1"] .sc-1{opacity:1}
.stage.is-live .sc{transition:opacity .5s ease}
.stage.is-live .sc.on{opacity:1}
@keyframes kf-sc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kf-sc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes kf-sc-fade{from{opacity:0}to{opacity:1}}
@keyframes kf-sc-drop{0%{opacity:0;transform:translateY(-38px)}55%{opacity:1;transform:translateY(5px)}80%{transform:translateY(-2px)}100%{opacity:1;transform:none}}
@keyframes kf-sc-pop{0%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:none}}
@keyframes kf-sc-glass{from{opacity:0;transform:translate(44px,10px)}to{opacity:1;transform:none}}
@keyframes kf-sc-swing{0%{opacity:0;transform:rotate(-40deg)}55%{opacity:1;transform:rotate(10deg)}80%{transform:rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes kf-sc-travel{0%{opacity:0;transform:translate(240px,232px) rotate(-12deg)}15%{opacity:1}50%{transform:translate(302px,178px) rotate(-4deg)}
  100%{opacity:1;transform:translate(368px,192px)}}
.stage.is-live .sc.on .sc-draw{stroke-dasharray:1;animation:kf-sc-draw 1.2s cubic-bezier(.45,.05,.3,1) both}
.stage.is-live .sc.on .sc-late{animation-delay:.45s}
.stage.is-live .sc.on .sc-tick{stroke-dasharray:1;animation:kf-sc-draw .35s ease-out both;animation-delay:calc(1s + var(--i,0) * .38s)}
/* each in its turn: the order is set here, as the pages take no styles written into them */
.sc-ticks>:nth-child(2),.sc-lines>:nth-child(2){--i:1}
.sc-ticks>:nth-child(3),.sc-lines>:nth-child(3){--i:2}
.sc-lines>:nth-child(4){--i:3}
.sc-lines>:nth-child(5){--i:4}
.sc-lines>:nth-child(6){--i:5}
.stage.is-live .sc.on .sc-fill{animation:kf-sc-fade .6s ease 1.1s both}
.stage.is-live .sc.on .sc-drop{animation:kf-sc-drop .8s cubic-bezier(.3,.7,.3,1) 1.3s both}
.stage.is-live .sc.on .sc-line{animation:kf-sc-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.55s + var(--i,0) * .2s)}
.stage.is-live .sc.on .sc-underline{animation-delay:1.85s;animation-duration:.6s}
.stage.is-live .sc.on .sc-glass{animation:kf-sc-glass .7s cubic-bezier(.2,.7,.2,1) 2.1s both}
.stage.is-live .sc.on .sc-pop{animation:kf-sc-pop .6s cubic-bezier(.3,.7,.3,1) 1s both}
.stage.is-live .sc.on .ln-route{animation:kf-sc-fade .5s ease 1.4s both}
.stage.is-live .sc.on .sc-move{animation:kf-sc-travel 1.3s cubic-bezier(.45,.05,.3,1) 1.5s both}
.stage.is-live .sc.on .sc-key{animation:kf-sc-swing .9s cubic-bezier(.3,.7,.3,1) 2.7s both}
/* The buttons under the drawings (site.js): one for each step, which fills as its drawing plays, and one to pause */
.stage-bar{display:flex;align-items:center;gap:8px;margin:10px 2px 2px}
.stage-dot{flex:1 1 0;height:28px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.stage-dot span{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.stage-dot span::after{content:"";position:absolute;inset:0;background:var(--green-2);transform:scaleX(0);transform-origin:0 50%}
.stage-dot.seen span::after,.stage-dot[aria-pressed="true"] span::after{transform:none}
.stage.is-playing .stage-dot[aria-pressed="true"] span::after{animation:kf-dot var(--stage-step,4.6s) linear both}
@keyframes kf-dot{from{transform:scaleX(0)}to{transform:none}}
.stage-dot:hover span{background:var(--line-2)}
.stage-dot:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.stage-play{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--paper);color:var(--green);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.stage-play:hover{border-color:var(--green)}
.stage-play svg{width:14px;height:14px;display:block}
/* the step a drawing shows, marked beside it */
.band-how .steps li::before{transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.band-how .steps li.is-on::before{background:var(--lime);color:var(--deep);box-shadow:0 0 0 5px color-mix(in srgb,var(--lime) 45%,transparent)}
.how-more{margin:6px 0 0 60px;font-weight:600}
@media (max-width:1000px){.how-more{margin-left:0}}
@media print{.stage{display:none}}

/* The journeys on the home page, drawn (art.vignette): each card opens with its own scene, which answers a pointer with a
   small movement of its own. */
.path-art{display:block;margin:-4px -4px 12px}
.vg{display:block;width:100%;height:auto;color:var(--green-2)}
.vg path,.vg circle{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vg .vg-ground{stroke:var(--line-2);stroke-width:2}
.vg .fill-lime{fill:var(--lime)}
.vg .fill-paper{fill:var(--paper)}
.vg .vg-arrow{stroke-dasharray:.018 .034}
.vg .vg-strip{transform-origin:144px 50px}
.vg .vg-sway{transform-origin:176px 108px}
.vg .vg-key{transform-origin:16px 74px}
@keyframes kf-vg-strip{from{transform:scaleX(0)}to{transform:none}}
@keyframes kf-vg-sway{0%,100%{transform:none}25%{transform:rotate(-5deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
@keyframes kf-vg-flow{from{stroke-dashoffset:.26}to{stroke-dashoffset:0}}
@keyframes kf-vg-lit{from{fill:transparent}to{fill:var(--lime)}}
@keyframes kf-vg-turn{0%,100%{transform:none}40%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}}
/* (41.36.1) pointed at with a mouse (a tap on a phone opens the card at once) */
@media (hover:hover) and (pointer:fine){
  .path:hover .vg-strip{animation:kf-vg-strip .45s cubic-bezier(.2,.7,.2,1)}
  .path:hover .vg-key{animation:kf-vg-turn .8s ease .15s}
  .path:hover .vg-sway{animation:kf-vg-sway .9s ease}
  .path:hover .vg-arrow{animation:kf-vg-flow .9s linear}
  .path:hover .vg-win{animation:kf-vg-lit .25s ease both;animation-delay:calc((var(--r,0) * 4 + var(--c,0)) * 45ms)}
}
.path:focus-visible .vg-strip{animation:kf-vg-strip .45s cubic-bezier(.2,.7,.2,1)}
.path:focus-visible .vg-key{animation:kf-vg-turn .8s ease .15s}
.path:focus-visible .vg-sway{animation:kf-vg-sway .9s ease}
.path:focus-visible .vg-arrow{animation:kf-vg-flow .9s linear}
.vg-wins>:nth-child(2){--r:1}.vg-wins>:nth-child(3){--r:2}.vg-wins>:nth-child(4){--r:3}
.vg-wins>*>:nth-child(2){--c:1}.vg-wins>*>:nth-child(3){--c:2}.vg-wins>*>:nth-child(4){--c:3}
.path:focus-visible .vg-win{animation:kf-vg-lit .25s ease both;animation-delay:calc((var(--r,0) * 4 + var(--c,0)) * 45ms)}
/* (41.36.1, as the owner asked: "the website feels alive") the drawings come in as the cards are reached, or as the page opens
   when they are on the screen, one card after another: their lines draw in, then the rest rises into place. With Movement as
   the page opens (Website settings, Home page); simply there for a device that asks for less movement, and in print. */
.path-grid>.path:nth-child(2){--i:1}.path-grid>.path:nth-child(3){--i:2}.path-grid>.path:nth-child(4){--i:3}
@keyframes kf-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
  .motion .path-grid .path:not(.will-reveal) .vg-d{stroke-dasharray:1;animation:kf-draw-in 1s cubic-bezier(.45,.05,.3,1) backwards;
    animation-delay:calc(var(--i,0) * .14s + .12s)}
  .motion .path-grid .path:not(.will-reveal) .vg-in{animation:kf-rise .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .14s + .8s)}
  .motion .path-grid .path:not(.will-reveal) .vg-in-2{animation-delay:calc(var(--i,0) * .14s + .95s)}
  .path.will-reveal .vg-d{stroke-dasharray:1;stroke-dashoffset:1}
  .path.will-reveal .vg-in{opacity:0}
}
/* (41.36.2) on a phone the cards stand one under another, each drawn in as it is reached: no wait for the cards above it */
@media (max-width:640px){.path-grid>.path:nth-child(n){--i:0}}
@media print{.vg-d,.vg-in{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}

/* The pages that say what happened (art.sent, art.signpost): a letter on its way above a thank-you, a fingerpost above a
   page not found, each moving once as the page opens. */
.confirm-art{display:block;width:220px;max-width:62%;height:auto;margin:6px 0 10px;color:var(--green-2)}
.confirm-art path,.confirm-art circle{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.confirm-art .fill-lime{fill:var(--lime)}
.confirm-art .fill-paper{fill:var(--paper)}
.confirm-art .ca-trail{stroke-dasharray:.03 .05;stroke:var(--line-2)}
.confirm-art .ca-ground{stroke:var(--line-2);stroke-width:2}
.confirm-art .ca-seal{transform-origin:170px 72px}
.confirm-art .ca-arm{transform-origin:110px 46px}
.confirm-art .ca-arm-2{transform-origin:110px 70px}
@keyframes kf-ca-fly{from{opacity:0;transform:translate(-46px,30px) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes kf-ca-pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes kf-ca-swing{0%{transform:rotate(-9deg)}45%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes kf-ca-trail{from{opacity:0}to{opacity:1}}
.confirm-art .ca-fly{animation:kf-ca-fly .8s cubic-bezier(.2,.7,.2,1) .15s both}
.confirm-art .ca-seal{animation:kf-ca-pop .5s cubic-bezier(.3,.7,.3,1) .85s both}
.confirm-art .ca-trail{animation:kf-ca-trail .6s ease .1s both}
.confirm-art .ca-arm-1{animation:kf-ca-swing 1.1s ease .2s both}
.confirm-art .ca-arm-2{animation:kf-ca-swing 1.1s ease .35s both}
@media print{.confirm-art{display:none}}

/* The estimate beside a quote form, before the price is in: the lines it will show, drawn faint, as on the receipts */
.live-summary [data-live-body]:has(>p.small:only-child)::before{content:"";display:block;height:58px;margin:2px 0 12px;opacity:.9;
  background:linear-gradient(var(--line) 0 0) 0 4px/56% 6px no-repeat,linear-gradient(var(--line) 0 0) right 0 top 4px/18% 6px no-repeat,
    linear-gradient(var(--line) 0 0) 0 26px/42% 6px no-repeat,linear-gradient(var(--line) 0 0) right 0 top 26px/22% 6px no-repeat,
    linear-gradient(var(--line-2) 0 0) 0 48px/30% 8px no-repeat,linear-gradient(var(--line-2) 0 0) right 0 top 48px/26% 8px no-repeat}

/* The partner network, drawn (art.network_node): four stops in order, joined by a line, each with what it is under it;
   a column on a phone. Reached, the stops come in one after another and the line draws between them. */
.network{margin:34px 0 8px}
.network-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:nw}
.network-steps li{position:relative;margin:0;text-align:center;counter-increment:nw}
.network-steps li>span{display:block;font-size:.92rem;line-height:1.4;color:var(--ink-2);padding:0 4px}
.network-steps li>span::before{content:counter(nw) ". ";font-weight:700;color:var(--green-2)}
.nw-art{display:block;width:100%;max-width:150px;height:auto;margin:0 auto 8px;color:var(--green-2)}
.nw-art path,.nw-art circle{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nw-art .fill-lime{fill:var(--lime)}.nw-art .fill-paper{fill:var(--paper)}
.nw-art .nw-ground{stroke:var(--line-2);stroke-width:2}
.nw-art .nw-faint{stroke:var(--line-2);stroke-width:4}
.nw-art .nw-strong{stroke-width:4}
.network-steps li:not(:last-child)::after{content:"";position:absolute;top:34%;left:calc(50% + 66px);right:calc(-50% + 66px - 18px);height:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);transform-origin:0 50%}
@media (max-width:760px){
  .network-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .network-steps li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:8px 0}
  .nw-art{margin:0}
  .network-steps li:not(:last-child)::after{top:auto;bottom:-6px;left:45px;right:auto;width:2px;height:16px;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 10px)}
}
@keyframes kf-nw-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kf-nw-line{from{transform:scaleX(0)}to{transform:none}}
.network.will-reveal li{opacity:0}
.network.will-reveal li::after{transform:scaleX(0)}
.network.revealed li{animation:kf-nw-in .55s cubic-bezier(.2,.7,.2,1) both}
.network.revealed li::after{animation:kf-nw-line .45s cubic-bezier(.4,0,.2,1) both}
.network.revealed li:nth-child(1)::after{animation-delay:.35s}
.network.revealed li:nth-child(2){animation-delay:.5s}
.network.revealed li:nth-child(2)::after{animation-delay:.85s}
.network.revealed li:nth-child(3){animation-delay:1s}
.network.revealed li:nth-child(3)::after{animation-delay:1.35s}
.network.revealed li:nth-child(4){animation-delay:1.5s}
/* (41.36.1, as the owner asked: "the website feels alive") each stop then draws itself in, one after another: its lines first,
   then what is filled in, then a small movement of its own (the board settles on its post, the quote prints line by line, the
   seal is stamped and its tick drawn, the door fills and the key turns into place). As the page opens when the drawing is on
   the screen, or once it is reached (site.js, data-reveal), while the owner has drawings move (Website settings, Every page,
   Drawings: network moving); simply there for a device that asks for less movement, and in print. */
.network-steps li:nth-child(2){--i:1}.network-steps li:nth-child(3){--i:2}.network-steps li:nth-child(4){--i:3}
@keyframes kf-nw-settle{0%{opacity:0;transform:translateY(-12px)}55%{opacity:1;transform:translateY(1.5px)}100%{opacity:1;transform:none}}
@keyframes kf-nw-print{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes kf-nw-stamp{0%{opacity:0;transform:scale(.25)}55%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes kf-nw-turn{0%{opacity:0;transform:rotate(-60deg)}65%{opacity:1;transform:rotate(7deg)}100%{opacity:1;transform:none}}
@keyframes kf-nw-fill{from{transform:scaleY(0)}to{transform:none}}
.nw-art .nw-board{transform-origin:78px 38px}
.nw-art .nw-print>*{transform-box:fill-box;transform-origin:left center}
.nw-art .nw-print>:nth-child(3),.nw-art .nw-print>:nth-child(4){--r:1}.nw-art .nw-print>:nth-child(5),.nw-art .nw-print>:nth-child(6){--r:2}
.nw-art .nw-seal{transform-box:fill-box;transform-origin:center}
.nw-art .nw-key{transform-origin:92px 24px}
.nw-art .nw-door{transform-box:fill-box;transform-origin:center bottom}
@media (prefers-reduced-motion:no-preference){
  .network.moving:not(.will-reveal) .nw-d{stroke-dasharray:1;animation:kf-draw-in .85s cubic-bezier(.45,.05,.3,1) backwards;
    animation-delay:calc(var(--i,0) * .5s + .1s)}
  .network.moving:not(.will-reveal) .nw-late{animation-delay:calc(var(--i,0) * .5s + .55s)}
  .network.moving:not(.will-reveal) .nw-fill{animation:kf-draw-in .85s cubic-bezier(.45,.05,.3,1) backwards,kf-fade .35s ease backwards;
    animation-delay:calc(var(--i,0) * .5s + .1s),calc(var(--i,0) * .5s + .5s)}
  .network.moving:not(.will-reveal) .nw-board{animation:kf-nw-settle .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .5s + .55s)}
  .network.moving:not(.will-reveal) .nw-print>*{animation:kf-nw-print .35s cubic-bezier(.2,.7,.2,1) backwards;
    animation-delay:calc(var(--i,0) * .5s + .55s + var(--r,0) * .12s)}
  .network.moving:not(.will-reveal) .nw-seal{animation:kf-nw-stamp .5s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(var(--i,0) * .5s + .65s)}
  .network.moving:not(.will-reveal) .nw-tick{animation-delay:calc(var(--i,0) * .5s + .95s)}
  .network.moving:not(.will-reveal) .nw-door{animation:kf-nw-fill .4s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .5s + .6s)}
  .network.moving:not(.will-reveal) .nw-key{animation:kf-nw-turn .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .5s + .8s)}
  .network.will-reveal .nw-d{stroke-dasharray:1;stroke-dashoffset:1}
  .network.will-reveal .nw-board,.network.will-reveal .nw-print>*,.network.will-reveal .nw-seal,.network.will-reveal .nw-key{opacity:0}
  .network.will-reveal .nw-door{transform:scaleY(0)}
}
/* on paper, every stop simply there, the key where it hangs (its own place is set on the drawing, so only what moves is reset) */
@media print{
  .network.will-reveal li{opacity:1!important}
  .network li,.network li::after{animation:none!important}
  .network.will-reveal li::after{transform:none!important}
  .nw-art *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .nw-art .nw-door{transform:none!important}
}
@media (max-width:760px){.network.revealed li::after{animation-name:kf-fade}}

/* The check that a person is sending a form (41.13.0): Cloudflare's box above the button, seen only when it asks for a
   tick, and what the page says while it waits for its answer */
.cf-turnstile{max-width:100%}
.bot-note{margin:8px 0 0;font-size:.92rem;color:var(--ink-2)}
.bot-note:empty{display:none}

/* ------------------------------------------------------------------ 41.14.0: a drawing for every page (plates.py)
   Under each page's introduction, a plate in the website's own line: its ground, its lines in the ink, one part in lime.
   As the page opens (or the plate is reached: site.js) the first lines draw in, then the second and the last, the lime and
   the paper fill in, and the scene plays its one movement. For a device that asks for less movement it is simply there. */
/* no wider than about three and a half times its height, so a wide column does not cut the top off the drawing */
.plate{margin:20px 0 28px;padding:0;max-width:720px}
.plate-art{display:block;width:100%;height:clamp(128px,40vw,206px);color:var(--green-2)}
/* above a form, smaller, so the form is not pushed far down */
.plate-sm{margin:12px 0 22px;max-width:520px;max-width:min(520px,calc(3.2 * clamp(116px,17vw,150px)))}
.plate-sm .plate-art{height:clamp(116px,17vw,150px)}
.page-head .plate{margin-bottom:8px}
/* beside the heading of a quote form or the guided start, at a desk; on a tablet or phone the questions come first */
.head-plate{display:none}
@media (min-width:1001px){
  .page-head.has-plate{display:flex;align-items:flex-end;gap:48px}
  .page-head.has-plate>.head-text{flex:1 1 auto;min-width:0}
  .page-head.has-plate>.head-plate{display:block;flex:0 0 clamp(300px,30vw,380px);margin:0 0 4px}
  .head-plate .plate-art{height:120px}
}
/* a page with its own drawing leaves the street plan out of its head, so there is one drawing to look at */
body:has(.plate) .site-plan{display:none}
.plate-art path,.plate-art circle{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plate-art .pt-ground{stroke:var(--line-2);stroke-width:2}
.plate-art .fill-lime{fill:var(--lime)}
.plate-art .fill-paper{fill:var(--paper)}
.plate-art .fill-mist{fill:var(--mist)}
.plate-art .fill-shade{fill:color-mix(in srgb,var(--green) 18%,var(--paper))}
.plate-art .fill-glass{fill:color-mix(in srgb,var(--lime) 34%,transparent)}
.plate-art .nostroke{stroke:none}
.plate-art .ln-faint{stroke:var(--line-2)}
.plate-art .pt-back path{stroke:var(--line);stroke-width:1.6}
.plate-art .ln-bar{stroke:var(--line-2);stroke-width:4}
.plate-art .ln-amt{stroke-width:4}
.plate-art .ln-strong{stroke-width:6}
.plate-art .ln-rule{stroke:var(--line-2);stroke-width:1.6}
.plate-art .ln-handle{stroke-width:6}
.plate-art .ln-hand{stroke-width:3}
.plate-art .ln-tick{stroke-width:2.8}
.plate-art .ln-route{stroke-dasharray:2 8}
.plate-art .sg{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .plate-art .pt-d{stroke-dasharray:1;animation:pl-draw 1s cubic-bezier(.45,.05,.3,1) .1s both}
  .plate-art .pt-b .pt-d{animation-delay:.45s}
  .plate-art .pt-c .pt-d{animation-delay:.8s}
  .plate-art .pt-back{animation:kf-fade 1.2s ease 1.3s both}
  .plate-art .pt-fills,.plate-art .pt-b>:not(.pt-d),.plate-art .pt-c>:not(.pt-d){animation:kf-fade .6s ease 1s both}
  .plate-art .pt-a>:not(.pt-d){animation:kf-fade .5s ease .5s both}
  .plate-art .pt-sig{animation:kf-fade .4s ease 1.25s both}
  .plate-art .sg-turn{transform-origin:0 50%;animation:pl-turn 1.1s cubic-bezier(.3,1.2,.4,1) 1.35s both}
  .plate-art .sg-spin{transform-origin:50% 100%;animation:pl-spin 1.6s cubic-bezier(.4,0,.2,1) 1.3s both}
  .plate-art .sg-pop{transform-origin:50% 50%;animation:kf-sc-pop .7s cubic-bezier(.3,1.3,.5,1) 1.35s both}
  .plate-art .sg-glide{animation:pl-glide 1.4s cubic-bezier(.4,0,.2,1) 1.2s both}
  .plate-art .sg-drop{animation:kf-sc-drop .8s cubic-bezier(.3,1.2,.5,1) 1.3s both}
  .plate-art .sg-press{transform-origin:100% 50%;animation:pl-press .9s cubic-bezier(.3,1.3,.5,1) 1.3s both}
  .plate-art .sg-sway{transform-origin:50% 100%;animation:pl-sway 1.3s ease-in-out 1.3s both}
  .plate-art .sg-slide{animation:pl-slide 1.3s cubic-bezier(.2,.7,.2,1) 1.1s both}
  .plate-art .sg-rise{animation:pl-rise 1s cubic-bezier(.2,.7,.2,1) 1.3s both}
  .plate-art .sg-lower{animation:pl-lower 1.4s cubic-bezier(.3,1.1,.4,1) 1.2s both}
  .plate-art .sg-grow{transform-origin:0 50%;animation:pl-grow 1.2s cubic-bezier(.4,0,.2,1) 1.3s both}
  .plate-art .sg-open{transform-origin:0 50%;animation:pl-open 1s cubic-bezier(.4,0,.2,1) 1.4s both}
  .plate-art .sg-roll{transform-origin:50% 50%;animation:pl-roll 1.5s cubic-bezier(.4,0,.2,1) 1.2s both}
  .plate-art .sg-toggle{animation:pl-toggle .6s cubic-bezier(.3,1.3,.5,1) 1.5s both}
  .plate-art .sg-shut{animation:pl-shut .6s cubic-bezier(.3,1.3,.5,1) 1.5s both}
  .plate-art .sg-zoom{transform-origin:0 50%;animation:pl-zoom 1.2s cubic-bezier(.3,1.2,.4,1) 1.3s both}
  .plate-art .sg-draw .pt-d,.plate-art .sg-draw>path{stroke-dasharray:1;animation:pl-draw .7s ease 1.5s both}
  .plate-art .sg-light>*{animation:pl-light .4s ease both}
  .plate-art .sg-light>:nth-child(1){animation-delay:1.3s}.plate-art .sg-light>:nth-child(2){animation-delay:1.45s}
  .plate-art .sg-light>:nth-child(3){animation-delay:1.6s}.plate-art .sg-light>:nth-child(4){animation-delay:1.75s}
  .plate-art .sg-light>:nth-child(5){animation-delay:1.9s}.plate-art .sg-light>:nth-child(6){animation-delay:2.05s}
  .plate-art .sg-light>:nth-child(n+7){animation-delay:2.2s}
  .plate-art .pt-strip{transform-box:fill-box;transform-origin:0 50%;animation:kf-vg-strip .6s cubic-bezier(.4,0,.2,1) 1.2s both}
  .plate.is-waiting .plate-art,.plate.is-waiting .plate-art *{animation-play-state:paused}
}
/* the owner's choice to keep them still (Website settings, Every page, Drawings) */
.plate.plate-still .plate-art,.plate.plate-still .plate-art *{animation:none}
@keyframes pl-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pl-turn{0%{transform:rotate(-38deg)}70%{transform:rotate(6deg)}100%{transform:none}}
@keyframes pl-spin{from{transform:rotate(-300deg)}to{transform:none}}
@keyframes pl-glide{from{transform:translateX(-70px)}to{transform:none}}
@keyframes pl-press{0%{transform:rotate(-24deg)}55%{transform:rotate(4deg)}100%{transform:none}}
@keyframes pl-sway{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
@keyframes pl-slide{from{transform:translateX(-90px);opacity:0}to{transform:none;opacity:1}}
@keyframes pl-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes pl-lower{from{transform:translateY(-46px)}to{transform:none}}
@keyframes pl-grow{from{transform:scaleX(.25)}to{transform:none}}
@keyframes pl-open{from{transform:none}to{transform:scaleX(.42)}}
@keyframes pl-roll{from{transform:rotate(-200deg)}to{transform:none}}
@keyframes pl-toggle{from{transform:translateX(-18px)}to{transform:none}}
@keyframes pl-shut{from{transform:translateY(-9px)}to{transform:none}}
@keyframes pl-zoom{from{transform:scale(.72)}to{transform:none}}
@keyframes pl-light{from{fill:transparent}to{fill:var(--lime)}}
@media print{.plate,.page-head.has-plate>.head-plate{display:none}}
@media (forced-colors:active){.plate,.page-head.has-plate>.head-plate{display:none}}


/* 41.19.0: a law firm's private page for news of the matters it has (firm_updates.py): one card for each matter, with its
   reference set in the serif beside the client's name, then the answer; the details each answer needs show once it is
   chosen, where the browser can tell (:has), and are all shown where it cannot. */
.fu{padding-bottom:40px}
.fu-head .lede{max-width:60ch}
.fu-form{margin:0}
.fu-matter{margin-top:18px}
.fu-matter:first-of-type{margin-top:6px}
.fu-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:600 1.18rem/1.3 var(--sans);margin:0 0 4px;color:var(--ink)}
.fu-ref{font:600 1.3rem/1.2 var(--serif);color:var(--green);letter-spacing:.01em}
.fu-about{margin:0;color:var(--ink-2)}
.fu-known{margin:2px 0 14px;color:var(--muted);font-size:.95rem}
.fu-last{margin:-6px 0 14px;padding:8px 12px;background:var(--mist);border-radius:var(--r-sm);font-size:.95rem}
.fu-if{margin-top:2px}
.fu-if>.field:last-child{margin-bottom:6px}
@supports selector(:has(*)){
  .fu-matter .fu-if{display:none}
  .fu-matter:has(input[value="completed"]:checked) .fu-if-completed,
  .fu-matter:has(input[value="not_yet"]:checked) .fu-if-not_yet{display:block;animation:kf-fade .25s ease-out}
}
@media (prefers-reduced-motion:reduce){.fu-matter .fu-if{animation:none!important}}
.fu-how{margin:0 0 4px;color:var(--muted);font-size:.95rem}
/* Send stays in reach while the firm works down a long list; a field it moves to is never left under it */
.fu-send{position:sticky;bottom:0;z-index:2;margin:18px -12px 0;padding:12px;background:linear-gradient(rgba(247,249,246,0),var(--bg) 30%)}
:root:has(.fu-send){scroll-padding-bottom:84px}
.fu-note{margin-top:0}
.fu-done{margin-top:26px}
.fu-done h2{font-size:1.2rem;margin:0 0 8px}
.fu-done ul{margin:0;padding-left:20px}
.fu-done li{margin:4px 0}
.fu-private{margin-top:22px;color:var(--muted)}
@media print{.fu-send{position:static;background:none}.fu-matter .fu-if{display:block}}

/* 41.19.0: sharing a page (plain links to each network's own share page) */
.share{margin:34px 0 0;padding-top:18px;border-top:1px dashed var(--line-2)}
.share-h{font:600 .95rem/1.3 var(--sans);margin:0 0 10px;color:var(--ink-2)}
.share-list,.prose .share-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.share-list li,.prose .share-list li{margin:0}
.share-list a,.share-list button{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--paper);color:var(--green);font:600 .9rem/1 var(--sans);text-decoration:none;cursor:pointer}
.share-list a:hover,.share-list button:hover{border-color:var(--green);background:var(--mist);color:var(--green)}
.share-list a:focus-visible,.share-list button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* The business's own pages elsewhere (41.28.0): a small button each at the foot of every page, the drawing of what it holds on
   a lime disc, in the footer's own colours */
.footer-social{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:4px 0 0}
.footer-social-label{margin:0;font:650 .95rem/1.3 var(--sans);color:var(--lime)}
.social-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.social-links li{margin:0}
.site-footer .social-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 18px 5px 5px;border:1px solid rgba(255,255,255,.24);
  border-radius:999px;background:rgba(255,255,255,.05);color:#f3f8f4;font:600 .95rem/1.2 var(--sans);text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease}
.social-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--deep)}
.social-ico svg{display:block;width:18px;height:18px}
.social-handle{font-weight:500;color:#a9c2b4}
.site-footer .social-link:hover{border-color:var(--lime);background:rgba(212,233,142,.12);background:color-mix(in srgb,var(--lime) 12%,transparent);color:#fff}
.site-footer .social-link:hover .social-handle{color:#d3e2d9}
.site-footer .social-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus);background:var(--focus);color:var(--ink);box-shadow:none}
.site-footer .social-link:focus-visible .social-handle{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.site-footer .social-link{transition:none}}
/* (41.33.0) The home page's questions before a quote: the same opening questions as the questions and answers page, in a
   column of their own beside the heading on a computer */
.band-faq{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px 64px;align-items:start}
.faq-band>h2{position:sticky;top:110px;margin:6px 0 0}
.faq-list{border-top:1px solid var(--line)}
.faq-list .faq summary{padding:18px 0;font:600 1.12rem/1.35 var(--serif);color:var(--ink)}
.faq-list .faq p{max-width:62ch;margin:0 0 18px;color:var(--ink-2)}
.faq-band .more-link{grid-column:2;margin-top:6px}
@media (max-width:860px){.faq-band{grid-template-columns:1fr}.faq-band>h2{position:static}.faq-band .more-link{grid-column:1}}
/* (41.43.2) What happens to a visitor's details: on the home page, the padlock and heading beside the promise on the deep green;
   on a quote form, the same promise beside the boxes for the details */
.band-promise{background:var(--deep);color:#dfe9e3;padding:56px 0}
.promise-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px 64px;align-items:center}
.promise-head{display:flex;gap:16px;align-items:center}
.promise-head h2{color:#fff;margin:0}
.promise-head .promise-ico{flex:none;width:52px;height:52px;padding:12px;border-radius:50%;background:rgba(212,233,142,.14);background:color-mix(in srgb,var(--lime) 14%,transparent);color:var(--lime)}
.promise-words p{max-width:62ch;margin:0 0 10px;color:#dfe9e3}
.promise-words .more-link{margin:0}
.band-promise a{color:var(--lime);font-weight:600}
.band-promise a:hover{color:#fff}
@media (max-width:860px){.band-promise{padding:44px 0}.promise-band{grid-template-columns:1fr}}
@media print{.band-promise{background:none;padding:24px 0}.promise-head h2,.promise-words p,.band-promise a{color:#000}}  /* (dark ink on paper) */
.details-promise{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin:4px 0 18px}
.details-promise .promise-ico{flex:none;width:22px;height:22px;margin-top:1px;color:var(--green-2)}
.details-promise p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.details-promise strong{color:var(--ink)}
@media print{.details-promise{border-color:#999}}
/* The last word: one button to a quote, beside the front door with its key (art.keys_door), which comes to the lock and
   turns once as the band is reached (site.js, data-reveal); still for a device that asks for less movement */
.band-last{background:linear-gradient(180deg,var(--bg),var(--mist));padding:80px 0}
.last-band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 56px;align-items:center}
.last-words h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;margin-bottom:.4em}
.last-words p{font-size:1.12rem;color:var(--ink-2);max-width:50ch}
.last-band .band-actions{justify-content:flex-start;margin-top:26px}
.last-art{justify-self:center;width:100%;max-width:340px}
.keys-door{display:block;width:100%;height:auto;color:var(--green-2)}
.keys-door path,.keys-door circle{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.keys-door .fill-lime{fill:var(--lime)}
.keys-door .fill-paper{fill:var(--paper)}
.keys-door .kd-ground{stroke:var(--line-2);stroke-width:2}
.keys-door .kd-knob{fill:var(--deep);stroke:none}
.keys-door .kd-hole{stroke-width:2.6}
.keys-door .kd-key{transform-box:view-box;transform-origin:150px 125px}  /* (its tip, in the lock) */
@media (prefers-reduced-motion:no-preference){
  .last-art.will-reveal .kd-key{transform:translate(44px,-30px) rotate(-20deg);opacity:0}
  .last-art.revealed .kd-key{animation:kf-kd-key 1.5s cubic-bezier(.2,.7,.2,1) both}
  .last-art.revealed .kd-door{animation:kf-kd-glow .9s ease 1.3s both}
}
/* it comes to the lock, waits a moment, then turns into the place it rests in */
@keyframes kf-kd-key{0%{transform:translate(44px,-30px) rotate(-20deg);opacity:0}55%{transform:rotate(-14deg);opacity:1}
  75%{transform:rotate(-14deg)}100%{transform:none;opacity:1}}
@keyframes kf-kd-glow{0%,100%{fill:var(--lime)}45%{fill:var(--lime-2)}}
@media (max-width:860px){.band-last{padding:56px 0}.last-band{grid-template-columns:1fr}.last-art{order:-1;max-width:240px;justify-self:start}}
@media print{.band-last{display:none}}
/* (41.33.0) What customers rate the business, under the home page's buttons, in the hero's own light words */
.hero-rating{margin:20px 0 0}
.hero-rating a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:#d6e6dc;text-decoration:none;font-size:.97rem}
.hero-rating a:hover{color:#fff}
.hero-rating a:hover span{text-decoration:underline;text-underline-offset:.18em}
.hero-rating .stars{color:#f1d27a}
.hero-rating .stars .dim{color:#9db9ab}
.hero-rating strong{color:#fff}
/* (41.33.0) the way to a quote under the introduction of a page about one kind of move */
.prose .top-cta{margin:4px 0 28px}
/* (41.40.0, as the owner asked on 5 November 2026: "Only after their details") the boxes that start a quote while no price comes
   before the visitor's details: the home page's, with no figures under its questions, and the one beside each quote form */
.statement-start .est-fields{margin-bottom:14px}
.statement-start .statement-note{font-size:.9rem;color:var(--ink-2);border-top:1px dashed var(--line-2);padding-top:12px}
.live-summary.quote-waits [data-live-body]{min-height:0}
.live-summary.quote-waits [data-live-body]>p{margin:0;font-size:.95rem;color:var(--ink-2)}
.aside-card.quote-card p{color:var(--ink-2)}
/* (41.40.0) the country settled by the postcode, said in one line, with the way to change it */
.nation-line{margin:0;font-size:.95rem}
.nation-line .btn-link{margin-left:6px}
.field.nation-settled>label,.field.nation-settled>.hint,.field.nation-settled>select{display:none}
/* (41.40.0, from the owner's figures: 3 in 4 who open a quote form leave on its first page) on a phone, the first question shows
   as the page opens: the trail of links goes (the line under the introduction leads back to every quote), and the heading and
   introduction take less room */
@media (max-width:640px){
  body:has([data-quote-form]) .crumbs{display:none}
  .quote-head{padding-top:14px}
  .quote-head h1{font-size:1.7rem}
  .quote-head .lede{font-size:1rem;line-height:1.5;margin-bottom:8px}
}
/* (41.40.0) why the address is asked, under its question. (41.50.0, from the journey review) Drawn up to the address it explains
   and set apart from the question after it: it sat against "Postcode" and read as that box's caption. */
.why-line{margin:-12px 0 20px;font-size:.86rem;color:var(--muted)}
.field.nation-waiting{display:none}

/* ------------------------------------------------------------------ The quote page (41.41.0, as the owner asked on 6 November 2026:
   "overhaul the way it looks once a client gets a quote", "it felt like a lot of words on a screen", "make sure everything looks
   polished"): the total and its PDF, then the law firm and the go-ahead button, then the itemised quote; the small print at the foot */
.result-total .total-pdfs{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-end;align-items:baseline;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(212,233,142,.28);white-space:normal}
.result-total .total-pdf{color:var(--lime);font-weight:650;text-decoration:none;white-space:nowrap;
  display:inline-block;padding:3px 0;min-height:24px}  /* (41.50.0) a target of 24 pixels or more (WCAG 2.2, 2.5.8): it measured 23 */
.result-total .total-pdf::before{content:"\2193\00a0"}
.result-total .total-pdf:hover{color:#fff;text-decoration:underline}
.result-total .total-pdf:focus-visible{color:var(--ink)}
.result-total .total-sent{display:inline;color:#c9ddd1}
@media (max-width:1000px){.result-total .total-pdfs{justify-content:flex-start}}
/* an address that looks mistyped, with the one meant, corrected in one press (41.41.0) */
.result-total .total-suggest{margin:10px 0 0;max-width:24em;margin-left:auto;text-align:left}
.result-total .total-suggest p{margin:0;color:#dbeae1;line-height:1.45}
.result-total .total-suggest strong{display:inline;font:inherit;font-weight:650;color:#fff;overflow-wrap:anywhere}
.result-total .total-suggest .btn-link{color:var(--lime);font-weight:650}
.result-total .total-suggest .btn-link:hover{color:#fff}
@media (max-width:1000px){.result-total .total-suggest{margin-left:0}}

/* Choosing the law firm, and going ahead */
.proceed.go-section{background:var(--paper);border:1px solid var(--line-2);padding:26px 28px}
.go-section>h2{margin:0 0 16px}
.go-section .firm-choice{max-width:600px}
.go-section .firm-pick{margin:0 0 12px}
.go-section .firm-pick select{font-weight:600;color:var(--ink)}
.firm-cards{display:grid;gap:12px;margin:0 0 16px}
.firm-panel{padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg)}
.firm-panel.firm-main{border-color:var(--green-2);background:var(--mist)}
.firm-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.firm-badges:empty{display:none}
.firm-badges>span{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.82rem;font-weight:700;line-height:1.5}
.firm-badges .badge-rec{background:var(--green);color:var(--lime)}
.firm-badges .badge-low{background:var(--lime);color:var(--deep)}
.firm-panel-name{font:600 1.22rem/1.25 var(--serif);color:var(--ink);margin:0 0 2px}
.firm-panel-price{margin:0 0 10px;color:var(--ink-2)}
.firm-panel-price strong{font-size:1.12rem;color:var(--green);font-variant-numeric:tabular-nums}
.firm-panel .firm-ticks{margin:0 0 10px}
.firm-panel .firm-ticks>li{margin:.3em 0;font-size:.96rem;line-height:1.45}
.go-section .firm-panel-about{margin:0;color:var(--muted);line-height:1.5}
.go-section .firm-panel-how{margin:8px 0 0}
.go-section .go-ahead form.go-form{margin:0}
.go-form .go-agree{max-width:600px;margin:0 0 14px}
.go-form .go-button{min-width:280px;text-align:center}
.go-section .go-note{margin:10px 0 0;color:var(--muted)}
.go-section .ask-first{margin:16px 0 0;color:var(--muted)}
/* at a desk, the firm on the left and the decision beside it, so the button is in view with the firm it goes ahead with */
@media (min-width:900px){
  /* (the tick, the button and the note stacked at the top of their column, however tall the firm's card is) */
  .go-form:has(>.firm-choice){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;
    column-gap:36px;align-items:start}
  .go-form:has(>.firm-choice)>.firm-choice{grid-column:1;grid-row:1 / span 3}
  .go-form:has(>.firm-choice)>.go-agree,.go-form:has(>.firm-choice)>.go-button,.go-form:has(>.firm-choice)>.go-note{grid-column:2}
  .go-form:has(>.firm-choice)>.go-agree{margin-top:30px}
  .go-form:has(>.firm-choice)>.go-button{width:100%;min-width:0}
  .go-section .go-form .firm-choice{max-width:none}
  .go-section .firm-cards{margin-bottom:0}
}
@media (max-width:640px){
  .proceed.go-section{padding:20px 16px}
  .go-form .go-button{width:100%;min-width:0}
  .firm-panel{padding:14px 14px}
}

/* After go ahead is pressed, while the email address is to be confirmed: where the email is, and its code as another way */
.check-email{position:relative;max-width:620px;padding:22px 22px 18px;border:1.5px solid var(--green-2);border-radius:var(--r);background:var(--mist)}
.check-email .check-mark{position:relative;width:46px;height:46px;margin:0 0 12px;border-radius:50%;background:var(--green)}
.check-email .check-mark::before{content:"";position:absolute;left:11px;top:14px;width:24px;height:18px;border:2px solid var(--lime);border-radius:3px}
.check-email .check-mark::after{content:"";position:absolute;left:17px;top:12px;width:12px;height:12px;border-right:2px solid var(--lime);
  border-bottom:2px solid var(--lime);transform:rotate(45deg)}
.check-email h3{font:600 1.32rem/1.2 var(--serif);margin:0 0 6px}
.check-email h3:focus,.check-email[tabindex="-1"]:focus{outline:none}
.check-email .check-said{margin:0 0 14px}
.check-email .check-said,.check-email h3{overflow-wrap:anywhere}  /* (41.44.0, from the public site audit) a long address breaks inside the box on a phone */
.check-email .confirm-form{margin:0;padding-top:14px;border-top:1px solid var(--line)}
.check-email .confirm-more{margin-top:14px}
.check-email .confirm-again{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.check-email .confirm-firm{margin:12px 0 0}
.check-email.confirm-press .btn-large{margin-top:2px}
@media (max-width:640px){.check-email{padding:18px 16px 16px}.check-email.confirm-press .btn-large{width:100%}}
@media (forced-colors:active){.check-email .check-mark{border:2px solid CanvasText}}

/* Gone ahead: said first, with the firm (the "you've confirmed" screen the owner asked for) */
.proceed.done .done-mark{position:relative;width:52px;height:52px;margin:0 0 14px;border-radius:50%;background:#3f7a0d}
.proceed.done .done-mark::after{content:"";position:absolute;left:19px;top:12px;width:12px;height:22px;border-right:4px solid #fff;border-bottom:4px solid #fff;
  transform:rotate(40deg)}
.proceed.instructed{border:1.5px solid #3f7a0d;background:#eef7e3}
.proceed.instructed .instructed-thanks{font-size:1.1rem;font-weight:550;color:var(--ink)}
.proceed.instructed .instructed-thanks:focus{outline:none}
.proceed.done>h2#proceed{scroll-margin-top:150px}  /* (its mark above it in view, under the bar at the top) */
/* (41.41.1, from the review) the go-ahead box opened from a link or a message: the section's heading above it in view too */
.go-section>.go-ahead{scroll-margin-top:76px}
@media (forced-colors:active){.proceed.done .done-mark{border:2px solid CanvasText}}

/* The itemised quote: each line by its name and figures, what each item is for a press away */
.quote-lines{margin:34px 0 0}
.quote-lines-head{margin:0 0 4px}
.quote-card .fee-explain-line{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.quote-card .fee-explain,.quote-card .change-answers{font-size:.95rem}
.fee-terse .line-desc,.fee-terse .group-note{display:none}
.fee-terse tr.tax .line-desc{display:block}
.quote-card .tax-about{margin:12px 0 0}
.quote-card .tax-about summary{cursor:pointer;color:var(--link);font-size:.95rem}
.quote-card .tax-about p{margin:8px 0 0}

/* What happens next, under the quote */
.next-steps{margin:28px 0;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.next-steps h2{font-size:1.35rem;margin:0 0 14px}
.next-steps .steps{margin:0}
.next-steps .timescale{margin:8px 0 0;font-size:.95rem}
/* (41.53.0, M3) "Help your law firm start sooner", once a client has gone ahead: one quiet box under where things stand, and
   the page it leads to, each person a few boxes of their own */
.ready-start p{margin:0 0 12px;max-width:44rem}
.ready-start .ready-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
.ready-start .ready-go .small{color:var(--muted)}
.ready-form .ready-part{font-size:1.2rem;margin:8px 0 12px}
.ready-form .ready-person .legend-title{font-size:1.15rem}
.ready-form div.ready-person>h3{margin:0 0 8px}
.ready-form div.ready-person>p{margin:0 0 6px}
@media (max-width:640px){.next-steps{padding:20px 16px}}

/* The small print, at the foot: what we are paid and the promises in full, and the way to stop reminders */
.info-card .info-more-said{margin:14px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.info-card .info-more-said .quote-promise{margin:0 0 .8em;font-size:.95rem;line-height:1.55}
.info-card .info-more-said .quote-promise strong{color:var(--green)}
.info-card .info-more-said .beside-button p{margin:0 0 .6em;color:var(--ink-2)}
.info-card .info-reminders{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line-2)}
@media print{.quote-card .fee-explain-line,.result-total .total-pdfs,.result-total .total-suggest,.check-email .confirm-more,.check-email .confirm-change{display:none!important}
  .fee-terse .line-desc,.fee-terse .group-note{display:block}}