/* it-t10-realestate.css: the real estate services page, the owner's pack mockup scaled
   (tools/trades10/pack-professional/visual-references/real-estate-services.png, 893 wide).
   --u = one mockup pixel; every size and position below is the mockup's own, measured.
   Built by tools/trades10/realestate.py. */
main.t-realestate{container-type:inline-size;--u:calc(min(100cqw,1440px) / 893);
  --re-ink:#0A1419;--re-sub:#5B686E;--re-or:#F2620C;--re-mist:#F5F8F7;--re-paper:#fff;--re-rule:#E7ECEE;
  --re-slate:#1C363C;font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--re-ink);background:#FCFCFB}
.t-realestate .re-board{position:relative}
.t-realestate .re-art{position:relative;width:calc(893 * var(--u));height:calc(var(--h) * var(--u));margin:0 auto}
.t-realestate .re-a{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w,100) * var(--u))}
.t-realestate .re-t{font-size:calc(var(--f) * var(--u));line-height:calc(var(--l) * var(--u));letter-spacing:var(--ls,0)}
.t-realestate h1,.t-realestate h2,.t-realestate h3{font-weight:700;color:var(--re-ink)}
.re-h2{font-weight:700}
.re-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#26363D}
.re-lede,.re-tools-p,.re-jour-p,.re-rec-p,.re-faq-p{color:var(--re-sub);font-weight:400}
.re-hand{font-family:"Caveat","Segoe Script",cursive;font-weight:500;color:#26363D;
  font-size:calc(12.6 * var(--u));line-height:calc(15.7 * var(--u));transform:rotate(-2deg);transform-origin:0 0}
.t-realestate .re-btn{display:inline-flex;align-items:center;gap:calc(8 * var(--u));justify-content:center;
  height:calc(34 * var(--u));background:#F05A05;color:#fff!important;border-radius:calc(3 * var(--u));
  font-size:calc(10.6 * var(--u));font-weight:600;letter-spacing:.005em;text-decoration:none!important;transition:background .15s}
.t-realestate .re-btn:hover{background:#D24E03}
.t-realestate .re-btn svg{width:calc(11 * var(--u));height:calc(11 * var(--u));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero */
.re-hero{overflow:hidden;background:#fff}
.re-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.re-hero .re-h1{display:block}
.re-kick{position:absolute;left:0;bottom:100%;margin-bottom:calc(9 * var(--u));white-space:nowrap;
  font-size:calc(8 * var(--u));line-height:calc(10 * var(--u));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#26363D}
.re-big{display:block}

/* the paper: one component, two sizes */
.re-doc{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));background:var(--re-paper);overflow:hidden}
.re-logo{display:flex;align-items:center;gap:.4em;line-height:1}
.re-doc .re-logo{position:absolute;left:calc(var(--pad) * var(--u));top:calc(var(--logoy) * var(--u));font-size:calc(var(--logof) * var(--u))}
.re-logo svg{width:1.18em;height:1.18em;display:block;flex:none}
.re-logo b{font-weight:700;letter-spacing:-.02em;color:#101E24}
.re-logo b span{color:#101E24}
.re-doc-h{position:absolute;left:calc(var(--pad) * var(--u));top:calc(var(--titley) * var(--u));
  font-size:calc(var(--titlef) * var(--u));line-height:calc(var(--titlef) * 1.2 * var(--u));font-weight:700;letter-spacing:-.015em}
.re-doc-meta{position:absolute;left:calc(var(--pad) * var(--u));top:calc(var(--billy) * var(--u));right:calc(var(--pad) * var(--u))}
.re-bill{width:calc(var(--metax) * var(--u) - 6px)}
.re-bill b,.re-bill span{display:block;font-size:calc(var(--billf) * var(--u));line-height:calc(var(--billstep) * var(--u));color:#3D4A50}
.re-bill b{color:var(--re-ink);font-weight:700}
.re-meta{position:absolute;left:calc(var(--metax) * var(--u));top:calc(var(--metay) * var(--u));width:calc(var(--metaw) * var(--u));margin:0}
.re-meta div{display:flex;justify-content:space-between;line-height:calc(var(--metastep) * var(--u))}
.re-meta dt,.re-meta dd{margin:0;font-size:calc(var(--billf) * var(--u));color:#6C797E}
.re-meta dd{color:#3D4A50}
.re-tbl{position:absolute;left:calc(var(--tblx) * var(--u));top:calc(var(--tabley) * var(--u));
  width:calc(var(--tblw) * var(--u));table-layout:fixed;border-collapse:collapse;font-size:calc(var(--tblf) * var(--u))}
.re-tbl th,.re-tbl td{padding:0 calc(8 * var(--u));text-align:right;color:#3D4A50;font-weight:400;white-space:nowrap}
.re-tbl th{height:calc(var(--theadh) * var(--u));background:#F1F4F5;color:var(--re-ink);font-weight:600}
.re-tbl td{height:calc(var(--rowh) * var(--u));border-bottom:1px solid var(--re-rule)}
.re-tbl tr>*:first-child{text-align:left;width:calc(var(--c1) * var(--u))}
.re-tbl tr>*:nth-child(2){text-align:center;width:calc(var(--c2) * var(--u))}
.re-tbl tr>*:nth-child(3){text-align:center;width:calc(var(--c3) * var(--u))}
.re-tbl tbody tr:first-child td{border-top:1px solid var(--re-rule)}
.re-tbl td+td,.re-tbl th+th{border-left:1px solid var(--re-rule)}
.re-total{position:absolute;left:calc(var(--pad) * var(--u));right:calc(var(--pad) * var(--u));top:calc(var(--totaly) * var(--u));
  display:flex;justify-content:flex-end;gap:calc(var(--totalgap) * var(--u));font-size:calc(var(--totalf) * var(--u));line-height:1}
.re-total span{font-weight:700}
.re-total b{font-weight:700;min-width:calc(var(--totalw) * var(--u));text-align:right}
.re-doc-hero{--pad:14;--logoy:12;--logof:8.4;--titley:36.5;--titlef:8.8;--billy:65.5;--billf:5.8;--billstep:8.7;
  --metax:150;--metay:-2;--metaw:72;--metastep:9.5;--tblx:17;--tblw:202;--tabley:108;--theadh:18;--rowh:15;--tblf:5.8;
  --c1:73;--c2:48;--c3:42;--totaly:208;--totalf:7.6;--totalgap:16;--totalw:42;
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgba(11,25,32,.35),0 0 0 1px rgba(11,25,32,.05)}
.re-doc-rec{--pad:24;--logoy:12;--logof:10.6;--titley:37.5;--titlef:9.9;--billy:64;--billf:7;--billstep:9.6;
  --metax:238;--metay:0;--metaw:86;--metastep:9.6;--tblx:20;--tblw:328;--tabley:113;--theadh:21;--rowh:18;--tblf:7.6;
  --c1:123;--c2:88;--c3:58;--totaly:230;--totalf:9.4;--totalgap:22;--totalw:62;
  box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(11,25,32,.22),0 0 0 1px rgba(11,25,32,.04)}

/* the property journey */
.re-jour{background:#FCFCFB}
.re-jour-b b{font-weight:700;color:var(--re-ink)}
.re-fp{position:absolute;left:calc(310 * var(--u));top:calc(17 * var(--u));width:calc(545 * var(--u));height:calc(200 * var(--u));overflow:visible}
.re-fp-line{fill:none;stroke:#8C9CA3;stroke-width:1;stroke-dasharray:3 3;stroke-linecap:round}
.re-pin{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(15 * var(--u));height:calc(19 * var(--u));
  filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(11,25,32,.25))}
.re-steps{position:absolute;inset:0}
.re-step-h{font-weight:700;letter-spacing:-.01em}
.re-step-p{color:#4D5A61}

/* the record */
.re-rec{background:var(--re-mist)}
.re-items{position:absolute;inset:0}
.re-item{display:flex;align-items:center;gap:calc(16 * var(--u));font-size:calc(9.6 * var(--u));line-height:calc(14 * var(--u));color:#33424A}
.re-item-i{width:calc(14 * var(--u));height:calc(13.5 * var(--u));flex:none;fill:none;stroke:#26363D;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.re-note-arr{height:calc(42 * var(--u));fill:none;stroke:#3C4A51;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* pricing tools */
.re-tools{background:#FBFBFA}
.re-tool-list{position:absolute;inset:0}
.re-tool-i{height:calc(34 * var(--u));fill:none;stroke:#152229;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t-realestate .re-tool-a{display:flex;align-items:center;gap:calc(6 * var(--u));font-weight:700;color:var(--re-ink)!important;white-space:nowrap}
.re-tool-a svg{width:calc(10 * var(--u));height:calc(10 * var(--u));fill:none;stroke:var(--re-or);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.re-tool-a:hover{color:#C04E06!important}
.re-tool-p{color:var(--re-sub)}

/* template cards */
.re-tpl{background:linear-gradient(180deg,#FBFBFA 0,#F2F6F7 100%)}
.t-realestate .re-tp{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));background:#fff;border-radius:calc(2 * var(--u));
  transform:rotate(var(--rot));overflow:hidden;box-shadow:0 calc(7 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11,25,32,.20),0 0 0 1px rgba(11,25,32,.03)}
.re-tp .re-logo{position:absolute;left:calc(19 * var(--u));top:calc(15 * var(--u));font-size:calc(7.4 * var(--u));z-index:2}
.re-tp1 .re-logo{left:calc(21 * var(--u));top:calc(15 * var(--u));font-size:calc(6.6 * var(--u))}
.re-tp2 .re-logo{left:calc(27 * var(--u));top:calc(18 * var(--u));font-size:calc(8.3 * var(--u))}
.re-tp3 .re-logo{left:calc(19 * var(--u));top:calc(9 * var(--u));font-size:calc(8 * var(--u))}
.re-tp-t{position:absolute;z-index:2;left:calc(21 * var(--u));top:calc(38 * var(--u));font-weight:700;letter-spacing:-.02em;
  font-size:calc(11.8 * var(--u));line-height:calc(15 * var(--u));color:var(--re-ink)}
.re-tp2 .re-tp-t{left:calc(27 * var(--u));top:calc(45 * var(--u));font-size:calc(12.4 * var(--u));line-height:calc(21 * var(--u))}
.re-tp3 .re-tp-t{left:calc(19 * var(--u));top:calc(31 * var(--u))}
.t-realestate .re-tp-img{position:absolute;left:calc(var(--ix) * var(--u));top:calc(var(--iy) * var(--u));
  width:calc(var(--iw) * var(--u));height:calc(var(--ih) * var(--u));object-fit:cover;object-position:top left;display:block;max-width:none;aspect-ratio:auto}
.re-tp .t10-edit{left:50%;bottom:calc(16 * var(--u));font-size:calc(9.6 * var(--u));padding:calc(8 * var(--u)) calc(13 * var(--u));
  border-radius:calc(5 * var(--u));background:#F2620C;gap:calc(10 * var(--u));font-weight:700;white-space:nowrap;box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,52,2,.35)}
.re-tp2 .t10-edit{left:calc(28 * var(--u));bottom:auto;top:calc(129 * var(--u));transform:none;width:calc(128 * var(--u));height:calc(28 * var(--u));
  padding:0;justify-content:center;border-radius:calc(6 * var(--u));font-size:calc(10.4 * var(--u))}
.re-tp2:hover .t10-edit,.re-tp2:focus-visible .t10-edit{transform:none}
.re-tp .t10-edit svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.re-tp .t10-edit.re-edit-on{opacity:1}
.re-tp:hover .t10-edit,.re-tp:focus-visible .t10-edit{transform:translate(-50%,0)}
.re-tp2 .t10-edit,.re-tp2:hover .t10-edit,.re-tp2:focus-visible .t10-edit{transform:none}
.re-strip-s{background:#F2F6F7;padding-block:0 calc(56px)}
.re-strip-s .t10-strip{margin-top:0}

/* payment band */
.re-pay{background:var(--re-slate);color:#fff}
.re-pay .re-pay-h,.re-pay .re-pay-t b{color:#fff}
.re-pay-p{color:#C8D5D8}
.re-pay-t b{font-weight:700}
.re-pay-m{color:#D5E0E2}
.re-qr{height:calc(63 * var(--u));background:#fff;border-radius:calc(3 * var(--u));padding:calc(4 * var(--u))}
.re-qr-img{width:100%;height:100%}
.re-pay-rule{height:calc(57 * var(--u));background:rgba(255,255,255,.28)}
.re-hand-w{color:#F3F7F7}
.re-pay-arr{height:calc(22 * var(--u));fill:none;stroke:#F3F7F7;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* clear through close */
.re-close{background:#FBFBFA}
.re-cl-list{position:absolute;inset:0}
.re-cl-i{height:calc(22 * var(--u));fill:none;stroke:#152229;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-realestate .re-cl-h{font-weight:700;color:var(--re-ink)!important}
.t-realestate .re-cl-h:hover{color:#C04E06!important}
.re-cl-t{font-weight:700}
.re-cl-p{color:var(--re-sub)}
.re-cl-arr svg{width:calc(9 * var(--u));height:calc(9 * var(--u));fill:none;stroke:#26363D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:calc(6 * var(--u))}
.re-cl-rule{height:calc(30 * var(--u));background:#EDEFF0}

/* FAQ: the design's four first, then the page's own questions in the same style */
.re-faqs{background:#FBFBFA;padding-bottom:calc(26 * var(--u))}
.re-faq-in{width:calc(893 * var(--u));margin:0 auto;display:grid;grid-template-columns:calc(329 * var(--u)) 1fr;
  padding:calc(26 * var(--u)) calc(55 * var(--u)) 0}
.re-faq-side{padding-right:calc(24 * var(--u))}
.re-faq-side h2{margin-bottom:calc(16 * var(--u))!important}
.re-faq-p{max-width:calc(180 * var(--u))}
.t-realestate .re-faq details{border-bottom:1px solid #ECEFF0}
.t-realestate .re-faq summary{padding:calc(5.5 * var(--u)) 0;min-height:calc(23 * var(--u));font-size:calc(8.8 * var(--u));line-height:calc(12 * var(--u));color:var(--re-ink)}
.t-realestate .re-faq summary::after{font-size:calc(14 * var(--u));color:#26363D}
.t-realestate .re-faq .a{padding:0 calc(30 * var(--u)) calc(10 * var(--u)) 0}
.t-realestate .re-faq .a p{font-size:calc(9.2 * var(--u));line-height:calc(14.5 * var(--u));color:var(--re-sub)}

/* closing band */
.re-end{overflow:hidden;background:#fff}
.re-end-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

/* the search copy under the design */
.t-realestate .t10-long{background:var(--re-mist)}

/* phones and small tablets: the same blocks in the design's order, photo and copy still one picture */
@media (max-width:899px){
  main.t-realestate{--u:1px}
  .t-realestate .re-art{width:auto;height:auto!important;padding:0 20px}
  .t-realestate .re-a{position:static;width:auto}
  .t-realestate .re-t{font-size:var(--fm,16px);line-height:var(--lm,1.5);letter-spacing:normal}
  .re-hero{min-height:540px;display:flex}
  .re-hero .re-art{padding:26px 20px 30px;display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .re-hero-img{object-position:58% 0}
  .re-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.78) 34%,rgba(255,255,255,.4) 54%,rgba(255,255,255,0) 74%)}
  .re-hero-img,.re-end-img{z-index:0}
  .re-hero .re-art>*:not(img),.re-end .re-art>*:not(img){position:relative;left:auto;top:auto;width:auto;z-index:2}
  .t-realestate .re-hero .re-doc{width:100%;max-width:340px;align-self:flex-start}
  .re-hero::after,.re-end::after{z-index:1}
  .re-kick{position:static;display:block;white-space:normal;margin-bottom:10px;font-size:11px;letter-spacing:.1em}
  .re-big{font-size:34px;line-height:1.08;letter-spacing:-.02em}
  .re-hero .re-h1{font-size:34px}
  .re-lede{margin-top:14px!important;--fm:16px;--lm:1.5;max-width:30em}
  .t-realestate .re-btn{margin-top:20px;height:48px;padding:0 22px;font-size:15px;border-radius:5px}
  .t-realestate .re-btn svg{width:15px;height:15px}
  .t-realestate .re-doc{position:relative;left:auto;top:auto;width:100%;max-width:340px;height:auto;margin-top:26px;padding-bottom:16px;
    --u:calc(min(100vw - 40px,340px) / 372);--pad:24;--logoy:12;--logof:10.6;--titley:37.5;--titlef:9.9;--billy:64;--billf:7;--billstep:9.6;
    --metax:238;--metay:0;--metaw:86;--metastep:9.6;--tblx:20;--tblw:328;--tabley:113;--theadh:21;--rowh:18;--tblf:7.6;
    --c1:123;--c2:88;--c3:58;--totaly:230;--totalf:9.4;--totalgap:22;--totalw:62;min-height:calc(260 * var(--u))}
  .t-realestate .re-doc>*{position:absolute}
  .re-h2{--fm:28px;--lm:1.14;letter-spacing:-.02em}
  .re-eyebrow{--fm:11px;--lm:1.3;letter-spacing:.1em}
  .re-jour-b{--fm:17px;--lm:1.4;margin-top:14px!important}
  .re-jour-p,.re-rec-p,.re-tools-p,.re-faq-p{--fm:16px;--lm:1.55;margin-top:12px!important;max-width:34em}
  .re-jour .re-art,.re-rec .re-art,.re-tools .re-art,.re-tpl .re-art,.re-close .re-art{padding-top:40px;padding-bottom:40px}
  .t-realestate .re-fp{position:relative;left:auto;top:auto;width:calc(100% + 40px);margin:22px -20px 0;height:auto}
  .re-steps{position:static;display:grid;gap:16px;margin-top:20px!important}
  .re-step-h{--fm:17px;--lm:1.3}
  .re-step-p{--fm:15px;--lm:1.45;margin-top:2px!important}
  .re-step-p br,.re-jour-b br{display:inline}
  .re-big br,.re-h2 br,.re-lede br{display:none}
  .re-pin{display:none}
  .re-items{position:static;display:grid;gap:14px;margin-top:22px!important}
  .re-item{font-size:16px;line-height:1.4;gap:14px}
  .re-item-i{width:22px;height:22px}
  .re-hand{font-size:20px;line-height:1.15;margin-top:22px!important;transform:none}
  .re-note-arr{display:none}
  .re-tool-list,.re-cl-list{position:static;display:grid;gap:22px;margin-top:22px!important}
  .re-tool-list li,.re-cl-list li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:center}
  .re-tool-i,.re-cl-i{width:30px;height:30px;grid-row:span 2}
  .re-tool-a,.re-cl-h{--fm:17px;--lm:1.3;grid-column:2}
  .re-tool-p,.re-cl-p{--fm:15px;--lm:1.4;grid-column:2}
  .re-cl-rule{display:none}
  .t-realestate .re-tp{position:relative;left:auto!important;top:auto!important;transform:none;
    width:min(280px,100%);height:auto;aspect-ratio:142/190;margin:0 auto}
  .re-tpl .re-art{display:grid;gap:22px;justify-items:center}
  .re-tp2{order:-1}
  .t-realestate .re-tp-img{left:calc(var(--ix) / var(--w) * 100%);top:calc(var(--iy) / var(--h) * 100%);
    width:calc(var(--iw) / var(--w) * 100%);height:calc(var(--ih) / var(--h) * 100%)}
  .re-tp .re-logo{left:8%;top:7%;font-size:5%}
  .re-tp-t{left:8%;top:19%;font-size:9%;line-height:1.25}
  .re-tp .t10-edit{font-size:13px;padding:10px 14px;border-radius:6px;width:auto;height:auto;left:50%!important;top:auto!important;bottom:14%!important;transform:translate(-50%,0)!important}
  .re-pay .re-art{padding:30px 20px;display:grid;justify-items:start;gap:0}
  .re-pay-h{--fm:26px;--lm:1.15}
  .re-pay-p{--fm:16px;--lm:1.5;margin-top:8px!important}
  .re-qr{width:118px!important;height:118px;margin-top:22px}
  .re-pay-t{--fm:17px;--lm:1.3;margin-top:20px!important}
  .re-pay-m{--fm:16px;--lm:1.5;margin-top:6px!important}
  .re-pay-rule,.re-pay-arr{display:none}
  .re-hand-w{margin-top:18px!important}
  .re-faqs{padding:36px 0 30px}
  .t-realestate .re-faq-in{display:block;width:auto;padding:0 20px}
  .re-faq-side h2{--fm:26px;--lm:1.15;margin-bottom:12px!important}
  .t-realestate .re-faq summary{font-size:16px;line-height:1.4;min-height:48px;padding:12px 0}
  .t-realestate .re-faq summary::after{font-size:22px}
  .t-realestate .re-faq .a{padding:0 8px 14px 0}
  .t-realestate .re-faq .a p{font-size:15px;line-height:1.6}
  .re-end{min-height:360px;display:flex}
  .re-end-img{object-position:62% 40%}
  .re-end::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.93) 0,rgba(255,255,255,.8) 40%,rgba(255,255,255,.3) 62%,rgba(255,255,255,0) 80%)}
  .re-end .re-art{padding:30px 20px 36px;display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .re-strip-s{padding-bottom:36px}
}