/* The quote section on the homepage and /moving-quote/ (tools/build.py embed_estimator): one card with a short navy
   intro and the estimate tool beside it (stacked on phones). The tool's full-page layout is kept inside the card: no
   side scene, the Continue button in the card, nothing sticky over the site's header. */
.rr-intake{--ink:#071d3b;--red:#d92f35;--cream:#f6f0e7;--card:#fffdf9;--sans:"Manrope",Arial,sans-serif;--serif:"Fraunces",Georgia,serif;
  padding:72px 20px 88px;background:var(--cream);scroll-margin-top:90px;font-family:var(--sans)}
.rr-intake-card{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;background:var(--card);border-radius:28px;
  overflow:hidden;box-shadow:0 24px 60px rgba(7,29,59,.12);border:1px solid rgba(7,29,59,.08)}
.rr-intake-intro{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:34px 26px 30px}
.rr-intake-emblem{position:absolute;width:150px;height:auto;right:-34px;top:-30px;opacity:.12;transform:rotate(-20deg);pointer-events:none}
.rr-intake-eyebrow{margin:0 0 12px;font:800 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#f3b8ba}
.rr-intake h2{margin:0;font:600 clamp(30px,7vw,48px)/1.04 var(--serif);letter-spacing:-.02em;color:#fff}
.rr-intake h2 em{font-style:italic;font-weight:500;color:#ff8e93}
.rr-intake-line{margin:14px 0 0;max-width:30ch;font:500 16px/1.55 var(--sans);color:rgba(255,255,255,.86)}
.rr-intake-reach{order:3;margin:0;padding:16px 22px 20px;text-align:center;font:500 13.5px/1.6 var(--sans);color:#5d6b82;border-top:1px solid #efe5d6}
.rr-intake-reach a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--red)}
.rr-intake .rr-embed{order:2;min-width:0}
@media(min-width:960px){
  .rr-intake{padding:96px 32px 112px}
  .rr-intake-card{grid-template-columns:minmax(300px,5fr) 7fr;grid-template-rows:1fr auto}
  .rr-intake-intro{grid-column:1;grid-row:1;padding:56px 44px 28px;display:flex;flex-direction:column;justify-content:center}
  .rr-intake-emblem{width:220px;right:-50px;top:auto;bottom:-40px}
  .rr-intake-reach{grid-column:1;grid-row:2;order:0;background:var(--ink);color:rgba(255,255,255,.72);text-align:left;padding:0 44px 44px;border:0}
  .rr-intake-reach a{color:#fff}
  .rr-intake .rr-embed{grid-column:2;grid-row:1/3}
}

/* The tool inside the card. */
.rr-embed{--sans:"Manrope",Arial,sans-serif;--serif:"Fraunces",Georgia,serif;width:100%;text-align:left}
.rr-embed .est{display:block;min-height:0;padding:0 0 24px;background:var(--card,#fffdf9);border:0;border-radius:0;box-shadow:none;scroll-margin-top:100px;font:500 16px/1.6 var(--sans);color:#071d3b}
.rr-embed .est-top{position:relative;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.rr-embed .est-bar{padding:10px 16px 4px;min-height:52px;gap:6px;max-width:none}
.rr-embed .est-progress{flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 6px;width:auto;max-width:none;margin:0;padding:0;font:700 12px/1.4 var(--sans)}
.rr-embed .est-road{max-width:none;width:auto;margin:0 24px;padding:0}
.rr-embed .est-main{max-width:none;width:100%;padding:24px 24px 0;grid-column:auto}
.rr-embed .est-scene{display:none!important}
.rr-embed .next{position:relative;bottom:auto;padding:18px 24px 0;background:transparent;border:0;grid-column:auto}
.rr-embed .next .in{max-width:none;padding:0}
.rr-embed .intro>.packing-scene,.rr-embed .address-art,.rr-embed .working>.drive-art{display:none}
.rr-embed .intro{text-align:center;padding:6px 0}
.rr-embed .intro h1{font-size:30px;margin-left:auto;margin-right:auto}.rr-embed .intro p{font-size:15px;margin-left:auto;margin-right:auto}
.rr-embed .intro .promise{display:grid;justify-content:center;margin:20px auto;gap:10px}
/* The heading stays centred; the three steps are one left-aligned list, centred as a block. */
.rr-embed .intro .promise{width:min(100%,320px);justify-content:stretch;text-align:left}
.rr-embed .intro .promise li{justify-content:flex-start;text-align:left}
.rr-embed .say h1{font-size:26px}
.rr-embed .est h1,.rr-embed .est h2,.rr-embed .est h3{font-family:var(--serif);line-height:1.1;color:#071d3b}
.rr-embed .est img{max-width:100%;height:auto}
.rr-embed .est-back{min-width:44px;min-height:44px}
.rr-embed .est input[type=text],.rr-embed .est input[type=tel],.rr-embed .est input[type=email],.rr-embed .est input[type=search],.rr-embed .est input[type=date]{font-size:16px;min-height:52px}
.rr-embed .result .range{font-size:clamp(28px,7vw,46px)}
.rr-embed .result ul.inc{font-size:14px}
@media(min-width:960px){.rr-embed .est{padding-bottom:36px}.rr-embed .est-bar{padding:18px 28px 4px}.rr-embed .est-road{margin:0 40px}.rr-embed .est-main{padding:34px 40px 0}.rr-embed .next{padding:20px 40px 0}}
@media(max-width:600px){.rr-intake{padding:48px 12px 64px}.rr-embed .est-main{padding:20px 18px 0}.rr-embed .next{padding:16px 18px 0}}

/* ---- One screen (11/03/2026): the quote section is exactly the window's height with the card centered in it; each
   step scrolls the section to the top of the window (data-est-frame, rr-estimate.js). The card is a fixed frame, so
   it doesn't jump between steps; the question and its button sit together in the middle of the tool. On phones the
   navy intro folds to one line, and once the estimate has started it steps aside so the tool has the screen. ---- */
.rr-intake{box-sizing:border-box;height:100vh;height:var(--rr-vh,100dvh);min-height:0;padding:clamp(10px,3vh,40px) 16px;
  display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0;overflow:hidden}
.rr-intake-card{width:100%;flex:1 1 auto;min-height:0;max-height:860px;grid-template-rows:auto minmax(0,1fr) auto}
.rr-intake .rr-embed{display:flex;flex-direction:column;min-height:0}
.rr-embed .est{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.rr-embed .est-top{flex:none}
.rr-embed .est-main{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;padding-bottom:4px}
.rr-embed .est-main{margin-top:auto}
.rr-embed .next{flex:none;margin-bottom:auto;padding-bottom:clamp(14px,3vh,28px)}
.rr-embed .est-main:has(+.next[hidden]){margin-bottom:auto;padding-bottom:clamp(14px,3vh,28px)}
.rr-embed .say h1{font-size:clamp(22px,min(3.4vh,6vw),28px)}
.rr-embed .say{margin-bottom:clamp(12px,2.4vh,26px)}
@media(min-width:960px){
  .rr-intake{padding:clamp(16px,4vh,48px) 32px}
  .rr-intake-card{grid-template-rows:minmax(0,1fr) auto}
  .rr-intake .rr-embed{grid-row:1/3}
  .rr-intake-intro{padding:clamp(32px,6vh,56px) 44px 28px}
  .rr-intake h2{font-size:clamp(36px,min(3.6vw,6.4vh),52px)}
  .rr-embed .est-bar{padding-top:clamp(10px,2vh,18px)}
  .rr-embed .est-main{padding-top:clamp(18px,3.4vh,34px)}
  .rr-embed .est-progress{font-size:12.5px}
  /* The price and booking the inspection, side by side: the navy intro narrows to give the tool the room. */
  .rr-intake-card:has(.est[data-scene=result]){grid-template-columns:minmax(220px,3fr) 9fr}
  .rr-intake-card:has(.est[data-scene=result]) .rr-intake-intro{padding-left:32px;padding-right:28px}
  .rr-intake-card:has(.est[data-scene=result]) .rr-intake-reach{padding-left:32px;padding-right:28px}
  .rr-intake-card:has(.est[data-scene=result]) h2{font-size:clamp(28px,2.6vw,38px)}
  .rr-embed .result.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start}
  .rr-embed .result.step>*{grid-column:1}
  .rr-embed .result.step>.say{margin-bottom:14px}
  .rr-embed .result.step>.lock,.rr-embed .keyrate-result.step>#book-panel{grid-column:2;grid-row:1/span 6;margin:0}
  .rr-embed .result .card{padding:18px 18px 16px}
  .rr-embed .lock{padding:18px}
  .rr-embed .lock h3,.rr-embed .book-panel h3{font-size:1.3rem}
}
@media(max-width:959px){
  .rr-intake-card{display:flex;flex-direction:column;border-radius:22px}
  .rr-intake-intro{flex:none;padding:14px 20px 12px}
  .rr-intake-eyebrow,.rr-intake-line{display:none}
  .rr-intake h2{font-size:clamp(22px,6vw,30px);line-height:1.1}
  .rr-intake-emblem{width:96px;right:-18px;top:-22px}
  .rr-intake-reach{flex:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));font-size:12.5px;line-height:1.5}
  .rr-intake .rr-embed{flex:1 1 auto}
  /* Started: the tool takes the whole card. */
  .rr-intake:has(.est[data-scene]:not([data-scene=intro])) :is(.rr-intake-intro,.rr-intake-reach){display:none}
  .rr-embed .est-bar{padding:8px 14px 2px;min-height:48px}
  .rr-embed .est-road{margin:0 18px}
}
@media(max-width:600px){.rr-intake{padding:8px 8px}.rr-embed .est-main{padding:clamp(10px,2vh,20px) 16px 4px}.rr-embed .next{padding:10px 16px 14px}}
/* The booking heading on the navy panel stays white (the rule above colours the tool's headings navy). */
.rr-embed .lock h3{color:#fff}
/* The result: no empty bar above it, and on phones the card's own name stands in for the heading. */
.rr-embed .est[data-scene=result] .est-bar{display:none}
.rr-embed .est[data-scene=result] .est-road{margin-top:14px}
@media(max-width:959px){.rr-embed .result:not(.keyrate-result)>.say{display:none}}
/* KeyRate in the card: tighter type; the booking, links and buttons in the right column on wide screens. */
.rr-embed .keyrate-result .card{padding:14px 16px}
.rr-embed .keyrate-result .phone-price,.rr-embed .keyrate-result .keyrate-saving{font-size:13px;margin:2px 0}
.rr-embed .keyrate-result .keyrate-deadline{font-size:13px;line-height:1.4;margin:6px 0}
.rr-embed .result .fine{font-size:12px;line-height:1.4;margin-top:6px}
@media(min-width:960px){
  .rr-embed .result .facts svg{display:none}
  .rr-embed .result .facts span{padding:6px 10px;font-size:12.5px}
  .rr-embed .result ul.inc{gap:4px;font-size:13px}
  .rr-embed .keyrate-result.step{grid-template-rows:auto auto auto auto 1fr}
  .rr-embed .keyrate-result.step>.say{grid-row:1}
  .rr-embed .keyrate-result.step>.card{grid-row:2/span 4}
  .rr-embed .keyrate-result.step>#book-panel{grid-row:1/span 2}
  .rr-embed .keyrate-result.step>.keyrate-error{grid-column:2;grid-row:3}
}
@media(max-width:600px) and (max-height:700px){
  .rr-intake{padding:4px}
  .rr-embed .est[data-scene=result] .est-road{margin-top:6px}
  .rr-embed .est[data-scene=result] .est-main{padding-top:8px;padding-bottom:6px}
}
/* Phones: the booking's one-line intro steps aside so the links under it stay in the card. */
@media(max-width:959px){.rr-embed .book-panel>p:not(.hint):not(.err){display:none}.rr-embed .lock{padding:12px 14px}}
/* The end of the estimate in the card: the same layout as /estimate/ (heading, price | booking, the quiet row). */
@media(min-width:960px){
  .rr-embed .result.step{grid-template-rows:auto auto auto auto}
  .rr-embed .result.step>*{grid-column:1/-1}
  .rr-embed .result.step>.card{grid-column:1;grid-row:2/span 2}
  .rr-embed .result.step>:is(.lock,#book-panel){grid-column:2;grid-row:2;margin:0}
  .rr-embed .result.step>.keyrate-error{grid-column:2;grid-row:3}
  .rr-embed .result.step>.est-more{grid-row:4}
}