/* it-t10-architect.css: the architect page drawn to the owner's mockup
(tools/trades10/pack-professional/visual-references/architect.png, 780 px wide = a 1440 px screen).
Every length is a multiple of --s (one mockup pixel), so the page is the design at any width.
--m is the same unit but stops growing past ~1600 so long copy does not balloon.
Built by tools/trades10/architect.py. */
.t-architect{
--s:0.128205vw;--m:min(0.128205vw,2.05px);
--ink:#0B1419;--ink2:#1A2428;--slate:#1F373C;--mut:#6E7679;--mut2:#8A9296;
--line:#E4E4E2;--rule:#DCDCD8;--paper:#FBFBF9;--mist:#F1F5F6;--orange:#F26207;
--sans:Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;
background:#FCFCFA;font-family:var(--sans);color:var(--ink)}
.t-architect h1,.t-architect h2,.t-architect h3{letter-spacing:-.022em;font-weight:800;color:var(--ink)}
.t-architect .ar-w{max-width:calc(var(--m)*710);margin-inline:auto}
.t-architect .t10-tp img.ar-sk{aspect-ratio:auto;object-fit:fill;object-position:center;background:none}
.t-architect .ar-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-architect .ar-caps{font-size:calc(var(--m)*6.7);line-height:1.62;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut2)}
.t-architect .ar-note{text-align:right}
.t-architect .ar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--m)*30)}
.t-architect .ar-head h2{font-size:calc(var(--m)*22.2);line-height:1.1;font-weight:600;letter-spacing:-.045em}
.t-architect .ar-head h2 b{font-weight:800}
.t-architect .ar-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.t-architect a{text-decoration:none}
/* ---------- hero: the mockup's whole photo, the copy and the invoice where the design puts them */
.ar-hero{position:relative;container-type:inline-size;overflow:hidden;height:40.77cqw;background:#FCFCFA}
.t-architect .ar-hero-photo{position:absolute;inset:0}
.t-architect .ar-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:780/319}
.t-architect .ar-hero-in{position:absolute;inset:0}
.t-architect .ar-hero-copy{position:absolute;left:4.487cqw;top:0;width:45cqw;height:100%}
.t-architect .ar-hero h1{position:static;margin:0}
.t-architect .ar-k{position:absolute;top:6.17cqw;left:0;white-space:nowrap;font:600 1.013cqw/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#7C8488}
.t-architect .ar-big{position:absolute;top:8.94cqw;left:0;display:block;font-size:3.59cqw;line-height:1.107;font-weight:800;letter-spacing:-.05em}
.t-architect .ar-big span{display:block}
.t-architect .ar-lede{position:absolute;top:18.25cqw;left:0;margin:0;font-size:1.462cqw;line-height:1.36;color:#4D565A;font-weight:400}
.t-architect .ar-hero .ar-btn{position:absolute;top:24.1cqw;left:0}
.t-architect .ar-hero-tag{position:absolute;top:31.24cqw;left:0;margin:0;font-size:1.013cqw;line-height:1.62;letter-spacing:.22em}
.t-architect .ar-btn{display:inline-flex;align-items:center;gap:calc(var(--m)*10);height:calc(var(--m)*26);padding-inline:calc(var(--m)*13);border-radius:calc(var(--m)*3.5);
background:var(--orange);color:#fff!important;font-size:calc(var(--m)*7.6);font-weight:700;letter-spacing:-.005em;transition:background .16s ease-out,transform .16s ease-out}
.t-architect .ar-hero .ar-btn{height:3.33cqw;padding-inline:1.83cqw;gap:1.28cqw;border-radius:.45cqw;font-size:.974cqw}
.t-architect .ar-btn svg{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-architect .ar-btn:hover{background:#D95100;transform:translateY(-1px)}
/* the hero invoice: a real paper over the photo, at the angle and size the mockup lays it.
Every block sits at its own place on the paper (--u = one mockup pixel), as on the drawing. */
.ar-hero-doc{position:absolute;left:62.95cqw;top:1.4cqw;width:34.3cqw;height:38.5cqw;
transform-origin:50% 50%;transform:perspective(108cqw) rotateX(9.7deg) rotate(-1.6deg);border-radius:.2cqw;
box-shadow:-.9cqw .5cqw 2.6cqw rgba(20,22,20,.28)}
.t-architect .ar-inv{--u:.128205cqw;position:relative;width:100%;height:100%;background:#FBFBF9;overflow:hidden;color:#20282B}
.t-architect .ar-inv>*{position:absolute;left:calc(var(--u)*28)}
.t-architect .ar-inv-top{display:flex;align-items:center;gap:calc(var(--u)*9);top:calc(var(--u)*19.8);left:calc(var(--u)*32)}
.t-architect .ar-mark{width:calc(var(--u)*15);height:auto;fill:none;stroke:#3C4448;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.t-architect .ar-wm{font-size:calc(var(--u)*4.7);line-height:1.72;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#4A5256}
.t-architect .ar-inv-h{margin:0;top:calc(var(--u)*57.2);font-size:calc(var(--u)*14.6);line-height:1.1;font-weight:400;letter-spacing:-.03em;color:#151D20}
.t-architect .ar-inv-from{top:calc(var(--u)*83.8)}
.t-architect .ar-inv-no{top:calc(var(--u)*117.5);left:calc(var(--u)*170);width:calc(var(--u)*86)}
.t-architect .ar-inv-bill{top:calc(var(--u)*124.2)}
.t-architect .ar-inv-from,.t-architect .ar-inv-bill{font-size:calc(var(--u)*5.7);line-height:1.62;color:#4A5256}
.t-architect .ar-inv-from b,.t-architect .ar-inv-bill b{font-weight:700;color:#232B2E}
.t-architect .ar-inv-no,.t-architect .ar-inv-sum{margin:0;font-size:calc(var(--u)*5.7);line-height:1.62}
.t-architect .ar-inv-no div,.t-architect .ar-inv-sum div{display:flex;gap:calc(var(--u)*8)}
.t-architect .ar-inv-no dt{width:calc(var(--u)*31);font-weight:700;color:#232B2E}
.t-architect .ar-inv-no dd,.t-architect .ar-inv-sum dd{margin:0;color:#4A5256;white-space:nowrap}
.t-architect .ar-inv-tab{top:calc(var(--u)*178.8);left:calc(var(--u)*25);width:calc(var(--u)*220);border-collapse:collapse;
font-size:calc(var(--u)*5.6);color:#333B3E;border:1px solid #EAEAE6}
.t-architect .ar-inv-tab th,.t-architect .ar-inv-tab td{border-bottom:1px solid #EAEAE6;border-right:1px solid #EAEAE6;padding:calc(var(--u)*3.05) calc(var(--u)*5);text-align:left;font-weight:400;white-space:nowrap}
.t-architect .ar-inv-tab tr>*:last-child{border-right:0}
.t-architect .ar-inv-tab tbody tr:last-child>*{border-bottom:0}
.t-architect .ar-inv-tab tr>*:nth-child(2){width:calc(var(--u)*36)}
.t-architect .ar-inv-tab tr>*:nth-child(3){width:calc(var(--u)*48)}
.t-architect .ar-inv-tab tr>*:nth-child(4){width:calc(var(--u)*42)}
.t-architect .ar-inv-tab thead th{color:#232B2E}
.t-architect .ar-inv-sum{top:calc(var(--u)*236.2);left:calc(var(--u)*170)}
.t-architect .ar-inv-sum dt{width:calc(var(--u)*40);text-align:left}
.t-architect .ar-inv-tot dt,.t-architect .ar-inv-tot dd{font-weight:700;color:#151D20}
.t-architect .ar-inv-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*10);
top:calc(var(--u)*280.5);right:calc(var(--u)*25.5);font-size:calc(var(--u)*4.9);line-height:1.5;color:#5A6266}
.t-architect .ar-inv-foot .ar-caps{font-size:calc(var(--u)*4);line-height:1.62;text-align:right;color:#7C8488;letter-spacing:.2em}
/* ---------- a project deserves a clear paper trail */
.ar-trail{padding:calc(var(--m)*22) 0 calc(var(--m)*21)}
.t-architect .ar-stages{display:grid;grid-template-columns:repeat(4,calc(var(--m)*154)) 1fr;margin-top:calc(var(--m)*24.6)}
.t-architect .ar-stages li{position:relative;padding-right:calc(var(--m)*51)}
.t-architect .ar-stages li:last-child{padding-right:0;width:calc(var(--m)*103)}
.t-architect .ar-stages li+li::before{content:"";position:absolute;left:calc(var(--m)*-31);top:calc(var(--m)*10);width:calc(var(--m)*13);height:calc(var(--m)*13);
background:currentColor;color:#9AA1A4;-webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat}
.t-architect{--arw:url('data:image/svg+xml;utf8,')}
.t-architect .ar-stages .ar-ico{display:block;width:calc(var(--m)*30);height:calc(var(--m)*30);color:var(--ink)}
.t-architect .ar-stages h3{margin:0;font-size:calc(var(--m)*11.2);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.t-architect .ar-stages p{margin:calc(var(--m)*5.5) 0 0;font-size:calc(var(--m)*7.7);line-height:1.41;color:var(--mut)}
/* ---------- the proposal sheet: 740 x 357 at the mockup's scale, five phase columns */
.t-architect .ar-prop{padding:0}
.t-architect .ar-prop-w{max-width:calc(var(--m)*740);margin-inline:auto}
.t-architect .ar-prop-doc{display:block;position:relative}
.t-architect .ar-sheet{--u:calc(var(--m)*1);background:#FAFAF9;border:1px solid #EBEBE7;color:var(--ink)}
.t-architect .ar-sheet-top{display:flex;justify-content:space-between;align-items:flex-start;
margin:0 calc(var(--u)*20);padding:calc(var(--u)*20) 0 calc(var(--u)*18);border-bottom:1px solid #E1E1DD}
.t-architect .ar-sheet-id{display:flex;align-items:flex-start;gap:calc(var(--u)*12)}
.t-architect .ar-sheet .ar-mark{width:calc(var(--u)*33);stroke-width:1;margin-top:calc(var(--u)*-1)}
.t-architect .ar-sheet .ar-wm{font-size:calc(var(--u)*4.6);line-height:1.55;letter-spacing:.22em;color:#5A6266}
.t-architect .ar-sheet-note{text-align:right;font-size:calc(var(--u)*6);line-height:1.55}
.t-architect .ar-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;margin:0 calc(var(--u)*20);padding:calc(var(--u)*11) 0 0}
.t-architect .ar-sheet-h{margin:0;font-size:calc(var(--u)*24.8);line-height:1.08;font-weight:400;letter-spacing:-.027em;color:#1B2427}
.t-architect .ar-sheet-head .ar-caps{margin:calc(var(--u)*7.7) 0 0;font-size:calc(var(--u)*6.9);letter-spacing:.2em}
.t-architect .ar-sheet-meta{margin:calc(var(--u)*4.6) 0 0;font-size:calc(var(--u)*6.2);line-height:1.53;color:#4A5256;text-align:right}
.t-architect .ar-sheet-meta div{display:flex;gap:calc(var(--u)*5);justify-content:flex-end}
.t-architect .ar-sheet-meta dd{margin:0}
.t-architect .ar-phases{display:grid;grid-template-columns:repeat(5,1fr);margin:calc(var(--u)*14.5) calc(var(--u)*12) 0}
.t-architect .ar-phases li{padding:calc(var(--u)*3) calc(var(--u)*10) calc(var(--u)*18)}
.t-architect .ar-phases li+li{border-left:1px solid #E7E7E3}
.t-architect .ar-tick{margin:0;font-size:calc(var(--u)*3.4);letter-spacing:.34em;line-height:1.6;color:#AEB4B6}
.t-architect .ar-ph{display:flex;align-items:baseline;gap:calc(var(--u)*6);margin:0}
.t-architect .ar-num{font-size:calc(var(--u)*13);font-weight:400;color:#7B8286;letter-spacing:.01em;line-height:1}
.t-architect .ar-phn{font-size:calc(var(--u)*8.2);font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.t-architect .ar-phases .ar-sk{display:block;width:100%;height:auto;margin:calc(var(--u)*2.5) 0 0}
.t-architect .ar-phd{margin:calc(var(--u)*7) 0 0;font-size:calc(var(--u)*7.8);line-height:1.42;color:var(--mut)}
.t-architect .ar-sheet-foot{display:flex;align-items:flex-end;gap:calc(var(--u)*14);margin:0 calc(var(--u)*20);padding:calc(var(--u)*25) 0 calc(var(--u)*12)}
.t-architect .ar-sheet-foot .ar-caps{flex:none;margin:0;font-size:calc(var(--u)*5.2);line-height:1.62;letter-spacing:.24em}
.t-architect .ar-rule{flex:1;height:1px;background:#9BA2A5;margin:0 calc(var(--u)*30) calc(var(--u)*4)}
.t-architect .ar-script{flex:none;margin:0 0 calc(var(--u)*-2);font-family:Sacramento,cursive;font-size:calc(var(--u)*19.2);line-height:1;color:#5D666B;letter-spacing:.01em;white-space:nowrap}
.t-architect .ar-prop-doc .t10-edit{bottom:calc(var(--u)*24)}
/* ---------- price the project: three calculators divided by hairlines */
.ar-tools{padding:calc(var(--m)*22) 0 calc(var(--m)*22.5)}
.t-architect .ar-tool-list{display:grid;grid-template-columns:repeat(3,1fr);margin:calc(var(--m)*25) 0 0}
.t-architect .ar-tool-list li{display:flex;gap:calc(var(--m)*24);padding:0 calc(var(--m)*30) 0 calc(var(--m)*9)}
.t-architect .ar-tool-list li+li{border-left:1px solid var(--rule);padding-left:calc(var(--m)*27)}
.t-architect .ar-tool-list .ar-ico{flex:none;width:calc(var(--m)*32);height:calc(var(--m)*32);color:var(--ink)}
.t-architect .ar-tool-list h3{margin:0;font-size:calc(var(--m)*11.2);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.t-architect .ar-tool-list p{margin:calc(var(--m)*8) 0 0;font-size:calc(var(--m)*8.6);line-height:1.42;color:var(--mut)}
.t-architect .ar-open{display:inline-flex;align-items:center;gap:calc(var(--m)*7);margin-top:calc(var(--m)*15);font-size:calc(var(--m)*8.8);font-weight:500;color:#D9530B!important;
text-decoration:underline!important;text-underline-offset:calc(var(--m)*3);text-decoration-thickness:1px}
.t-architect .ar-open svg{width:calc(var(--m)*12);height:calc(var(--m)*12);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-architect .ar-open:hover{color:#C04E06!important}
/* ---------- templates: three tilted papers, the middle one with its edit button open */
.ar-tpl{position:relative;container-type:inline-size;background:var(--mist);height:35.64cqw;overflow:hidden;padding-top:calc(var(--m)*13.5)}
.t-architect .ar-cards{position:absolute;inset:0;pointer-events:none}
.t-architect .ar-card{position:absolute;pointer-events:auto;background:#FCFBF9;transform-origin:0 0;overflow:hidden;
box-shadow:1.1cqw 1.3cqw 2.4cqw rgba(24,36,40,.13),0 0 0 1px rgba(24,36,40,.04)}
.t-architect .ar-card1{left:8.82cqw;top:8.59cqw;width:22.95cqw;height:32.05cqw;transform:matrix(1,-.09,.105,1,0,0)}
.t-architect .ar-card2{left:37.74cqw;top:6.79cqw;width:24.87cqw;height:33.97cqw;transform:matrix(1,-.019,-.025,1,0,0)}
.t-architect .ar-card3{left:67.69cqw;top:8.08cqw;width:23.2cqw;height:32.3cqw;transform:matrix(1,.09,-.105,1,0,0)}
.t-architect .ar-card-in{display:block;position:relative;width:100%;height:100%}
.t-architect .ar-card-top{position:absolute;left:15.25%;top:7.4%}
.t-architect .ar-card .ar-mark{width:3.1cqw;stroke-width:1.05;stroke:#4A5256}
.t-architect .ar-card-h{position:absolute;left:15.8%;top:17.4%;font-size:1.62cqw;line-height:1.26;font-weight:800;letter-spacing:-.03em;color:#101A1E}
.t-architect .ar-card-p{position:absolute;left:15.6%;top:33.2%;width:68%;font-size:1.14cqw;line-height:1.45;color:#5E676B}
.t-architect .ar-card-sk{position:absolute;left:14.5%;top:44.8%;width:78.2%;height:auto}
.t-architect .ar-card2 .ar-card-sk{left:2.6%;top:58.9%;width:97.9%}
.t-architect .ar-card3 .ar-card-sk{left:6.6%;top:47.6%;width:96.1%}
.t-architect .ar-card .t10-edit{left:39.8%;right:auto;bottom:auto;top:49.8%;transform:translate(0,.5cqw);font-size:1.22cqw;padding:.85cqw 1.15cqw;border-radius:.3cqw;background:#F26207;box-shadow:0 1cqw 1.6cqw -.9cqw rgba(0,0,0,.5)}
.t-architect .ar-card .t10-edit svg{width:1.45cqw;height:1.45cqw}
.t-architect .ar-card:hover .t10-edit,.t-architect .ar-card:focus-visible .t10-edit,.t-architect .ar-card.is-open .t10-edit{opacity:1;transform:translate(0,0)}
.t-architect .ar-card.is-open::after{content:"";position:absolute;left:92%;top:56.5%;width:2.6cqw;height:3.2cqw;background:var(--cursor) center/contain no-repeat;z-index:3}
.t-architect{--cursor:url('data:image/svg+xml;utf8,')}
.t-architect .ar-tpl .ar-head{position:relative;z-index:2}
/* ---------- payment band: the page's only QR */
.ar-pay{background:var(--slate);color:#fff;height:calc(var(--m)*153);overflow:hidden}
.t-architect .ar-pay-in{display:grid;grid-template-columns:calc(var(--m)*392) calc(var(--m)*99) 1fr;align-items:start}
.t-architect .ar-pay-copy{padding-top:calc(var(--m)*46.5)}
.t-architect .ar-pay-copy h2{margin:0;font-size:calc(var(--m)*22.2);line-height:1.1;font-weight:800;letter-spacing:-.045em;color:#fff}
.t-architect .ar-pay-copy p{margin:calc(var(--m)*17) 0 0;font-size:calc(var(--m)*11.1);line-height:1.26;color:#C9D2D4}
.t-architect .ar-pay-qr{width:calc(var(--m)*99);margin-top:calc(var(--m)*33);background:#fff;padding:calc(var(--m)*5);border-radius:calc(var(--m)*1.5)}
.t-architect .ar-qr{width:100%}
.t-architect .ar-pay-link{margin-left:calc(var(--m)*51);padding-top:calc(var(--m)*55.8)}
.t-architect .ar-pay-link h3{margin:0;font-size:calc(var(--m)*10.3);line-height:1.2;font-weight:700;color:#fff}
.t-architect .ar-pay-link p{margin:calc(var(--m)*13) 0 0;font-size:calc(var(--m)*9.5);line-height:1.3;color:#D3DADC}
.t-architect .ar-pay-link a{color:#D3DADC!important;text-decoration:underline!important;text-decoration-color:rgba(242,98,7,.6)!important;text-underline-offset:calc(var(--m)*3)}
.t-architect .ar-pay-link a:hover{color:#fff!important}
.t-architect .ar-orule{display:block;width:calc(var(--m)*23);height:calc(var(--m)*2);background:var(--orange);margin-top:calc(var(--m)*13)}
/* ---------- every architect design (an addition under the design) */
.ar-strip{padding:calc(var(--m)*30) 0 0}
.t-architect .ar-strip .t10-strip{margin-top:0}
/* ---------- a simple flow from proposal to receipt */
.ar-flow{background:#F9F9F7;padding:calc(var(--m)*21) 0 calc(var(--m)*26);margin-top:calc(var(--m)*30)}
.t-architect .ar-steps{display:grid;grid-template-columns:repeat(3,calc(var(--m)*188)) 1fr;margin:calc(var(--m)*22) 0 0}
.t-architect .ar-steps li{position:relative;display:flex;gap:calc(var(--m)*22);padding-right:calc(var(--m)*30)}
.t-architect .ar-steps li:last-child{padding-right:0}
.t-architect .ar-steps li+li::before{content:"";position:absolute;left:calc(var(--m)*-37);top:calc(var(--m)*10);width:calc(var(--m)*13);height:calc(var(--m)*13);
background:currentColor;color:#9AA1A4;-webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat}
.t-architect .ar-steps .ar-ico{flex:none;width:calc(var(--m)*24);height:calc(var(--m)*24);color:var(--ink)}
.t-architect .ar-step-h{display:flex;align-items:baseline;gap:calc(var(--m)*11);margin:0;font-size:calc(var(--m)*9.6);font-weight:700;letter-spacing:-.02em}
.t-architect .ar-step-h span{font-weight:500;color:#7B8286}
.t-architect .ar-steps div>p:last-child{margin:calc(var(--m)*6) 0 0;font-size:calc(var(--m)*7.8);line-height:1.42;color:var(--mut);font-weight:400}
/* ---------- explore more tools, and the FAQ beside them */
.ar-links{padding:calc(var(--m)*17) 0 calc(var(--m)*30)}
.t-architect .ar-links-in{display:grid;grid-template-columns:calc(var(--m)*422) 1fr;gap:calc(var(--m)*23)}
.t-architect .ar-links-in h2{margin:0;font-size:calc(var(--m)*16);line-height:1.2;font-weight:800;letter-spacing:-.04em}
.t-architect .ar-links-faq{border-left:1px solid var(--rule);padding-left:calc(var(--m)*23)}
.t-architect .ar-link-cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(var(--m)*22)}
.t-architect .ar-link-cols h3{margin:0 0 calc(var(--m)*14);font-size:calc(var(--m)*9.5);font-weight:700;letter-spacing:-.02em}
.t-architect .ar-link-cols li{margin-top:calc(var(--m)*11.5)}
.t-architect .ar-link-cols li:first-child{margin-top:0}
.t-architect .ar-link-cols a{display:inline-flex;align-items:center;gap:calc(var(--m)*6);font-size:calc(var(--m)*7.8);color:#D9530B!important;
text-decoration:underline!important;text-underline-offset:calc(var(--m)*3);text-decoration-thickness:1px}
.t-architect .ar-link-cols a:hover{color:#C04E06!important}
.t-architect .ar-link-cols svg{width:calc(var(--m)*10);height:calc(var(--m)*10);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-architect .ar-faq{margin-top:calc(var(--m)*14)}
.t-architect .ar-faq details{border-bottom:1px solid var(--rule)}
.t-architect .ar-faq summary{padding:calc(var(--m)*7) 0;font-size:calc(var(--m)*7.6);line-height:1.4;color:#3C4448;gap:calc(var(--m)*20)}
.t-architect .ar-faq summary::after{font-size:calc(var(--m)*12);color:#6E7679;font-weight:400}
.t-architect .ar-faq .a{padding:0 calc(var(--m)*20) calc(var(--m)*10) 0}
.t-architect .ar-faq .a p{font-size:calc(var(--m)*7.4);line-height:1.6;color:var(--mut)}
/* ---------- closing CTA over the blueprint photo */
.ar-end{position:relative;container-type:inline-size;overflow:hidden;height:28.97cqw;background:#FCFCFA;margin-bottom:calc(var(--m)*20)}
.t-architect .ar-end-photo{position:absolute;inset:0}
.t-architect .ar-end-photo img{display:block;width:100%;height:auto;aspect-ratio:780/226}
.t-architect .ar-end-in{position:relative;height:100%}
.t-architect .ar-end-copy{position:absolute;left:0;top:3.91cqw;width:44cqw}
.t-architect .ar-end-copy h2{margin:0;font-size:2.85cqw;line-height:1.1;font-weight:800;letter-spacing:-.045em}
.t-architect .ar-end-copy p{margin:2.05cqw 0 0;font-size:1.42cqw;line-height:1.32;color:#4D565A}
.t-architect .ar-end .ar-btn{position:absolute;top:12.88cqw;left:0;height:3.6cqw;padding-inline:1.83cqw;gap:1.28cqw;border-radius:.45cqw;font-size:.974cqw}
.t-architect .ar-end-note{position:absolute;left:85.9cqw;top:21.73cqw;margin:0;white-space:nowrap;font-size:.9cqw;line-height:1.72;letter-spacing:.22em;text-align:left;color:#5F686C}
/* ---------- the search copy that follows the design */
.t-architect .t10-long{background:var(--mist);margin-top:calc(var(--m)*18)}
.t-architect .t10-w{max-width:calc(var(--m)*710 + 2 * var(--gut))}
/* ---------- below 900 px the design stacks, in its own order */
@media (max-width:900px){
.t-architect{--m:min(0.32vw,3.4px)}
.t-architect .ar-w,.t-architect .ar-prop-w{max-width:none;padding-inline:20px}
.t-architect .ar-hero{height:auto;padding-bottom:28px}
.t-architect .ar-hero-photo{position:static;width:100%}
.t-architect .ar-hero-photo img{aspect-ratio:4/3;object-fit:cover;object-position:20% 50%}
.t-architect .ar-end-photo img{aspect-ratio:16/9;object-fit:cover;object-position:72% 50%}
.t-architect .ar-hero-in{position:static}
.t-architect .ar-hero-copy{position:static;width:auto;height:auto;padding:26px 20px 0}
.t-architect .ar-hero-copy>*,.t-architect .ar-hero h1 span{position:static!important}
.t-architect .ar-k{display:block;font-size:11px;margin-bottom:10px}
.t-architect .ar-big{font-size:clamp(30px,8.6vw,46px)}
.t-architect .ar-lede{font-size:16px;margin-top:14px}
.t-architect .ar-hero .ar-btn,.t-architect .ar-end .ar-btn{position:static;display:inline-flex;height:48px;padding-inline:20px;gap:10px;border-radius:6px;font-size:15px;margin-top:20px}
.t-architect .ar-hero-tag{font-size:11px;margin-top:22px}
.t-architect .ar-hero .ar-bk,.t-architect .ar-end .ar-bk{display:none}
.t-architect .ar-hero-doc{position:relative;left:auto;top:auto;width:calc(100% - 40px);height:auto;margin:24px 20px 0;transform:none;z-index:2;box-shadow:0 14px 30px rgba(20,22,20,.16)}
.t-architect .ar-inv{--u:min(.36vw,3.8px);height:auto;padding:calc(var(--u)*20) calc(var(--u)*21) calc(var(--u)*24)}
.t-architect .ar-inv>*{position:static;left:auto;top:auto;width:auto;margin-top:calc(var(--u)*12)}
.t-architect .ar-inv-top{margin-top:0}.t-architect .ar-inv-tab{width:100%}.t-architect .ar-inv-sum{margin-left:auto;width:max-content}
.t-architect .ar-head{flex-direction:column;gap:14px}
.t-architect .ar-note{text-align:left}
.t-architect .ar-stages,.t-architect .ar-steps,.t-architect .ar-tool-list,.t-architect .ar-link-cols{grid-template-columns:1fr 1fr;gap:26px 18px}
.t-architect .ar-stages li,.t-architect .ar-steps li,.t-architect .ar-tool-list li{padding-right:0}
.t-architect .ar-stages li:last-child{width:auto}
.t-architect .ar-pay{height:auto;padding:30px 0 34px}
.t-architect .ar-pay-copy,.t-architect .ar-pay-link{padding-top:0}
.t-architect .ar-end-note{position:static;left:auto;top:auto;font-size:11px;margin-top:20px}
.t-architect .ar-end-copy h2{font-size:clamp(26px,7vw,38px)}
.t-architect .ar-end-copy p{font-size:16px;margin-top:14px}
.t-architect .ar-stages li+li::before,.t-architect .ar-steps li+li::before{display:none}
.t-architect .ar-tool-list li+li{border-left:0;padding-left:0}
.t-architect .ar-sheet{--u:min(0.3vw,3.2px)}
.t-architect .ar-phases{grid-template-columns:1fr 1fr}
.t-architect .ar-phases li+li{border-left:0}
.t-architect .ar-phases li{border-top:1px solid #E7E7E3}
.t-architect .ar-sheet-foot{flex-wrap:wrap}
.t-architect .ar-tpl{height:auto;container-type:normal;padding-bottom:30px}
.t-architect .ar-cards{position:static;display:grid;grid-template-columns:1fr;gap:22px;margin-top:24px;padding:0 20px}
.t-architect .ar-card{position:static;width:auto;height:auto;min-height:0;transform:none!important;padding:22px 20px 0}
.t-architect .ar-card-in{height:auto}
.t-architect .ar-card-top,.t-architect .ar-card-h,.t-architect .ar-card-p,.t-architect .ar-card-sk{position:static;width:auto;left:auto;top:auto}
.t-architect .ar-card .ar-mark{width:30px}
.t-architect .ar-card-h{display:block;margin-top:12px;font-size:22px}
.t-architect .ar-card-p{display:block;margin-top:8px;font-size:15px}
.t-architect .ar-card-sk{display:block;width:100%;margin-top:16px}
.t-architect .ar-card .t10-edit{position:static;display:inline-flex;opacity:1;transform:none;margin:14px 0 18px;font-size:14px;padding:12px 16px}
.t-architect .ar-card.is-open::after{display:none}
.t-architect .ar-pay-in{grid-template-columns:1fr;gap:20px}
.t-architect .ar-pay-qr{width:118px}
.t-architect .ar-pay-link{margin-left:0}
.t-architect .ar-links-in{grid-template-columns:1fr;gap:28px}
.t-architect .ar-links-faq{border-left:0;padding-left:0}
.t-architect .ar-end{height:auto;padding-bottom:30px}
.t-architect .ar-end-photo{position:static;width:100%}
.t-architect .ar-end-in{position:static}
.t-architect .ar-end-copy{position:static;width:auto;padding-top:24px}
.t-architect .ar-end-copy h2{font-size:clamp(26px,7vw,38px)}
.t-architect .ar-end-copy p{font-size:16px}
.t-architect .ar-end-note{position:static;margin-top:22px;font-size:11px}
}
@media (max-width:560px){
.t-architect .ar-stages,.t-architect .ar-steps,.t-architect .ar-tool-list,.t-architect .ar-link-cols,.t-architect .ar-phases{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.t-architect .ar-btn{transition:none}}
/* it-hero-phone-v1 start */
/* One composed hero on phones (24 Sep 2026): the picture sits under the copy inside the same panel,
with a scrim in the panel color, instead of a separate strip beneath the text. */
@media (max-width:900px){
.t-architect .ar-hero{display:flex;flex-direction:column;position:relative;background:rgb(252,252,250);overflow:hidden;height:auto;min-height:0}
.t-architect .ar-hero-in{order:1;position:relative;inset:auto;z-index:2;background:transparent;padding-bottom:0;margin-bottom:0}
.t-architect .ar-hero-photo{order:2;position:relative;z-index:1;inset:auto;margin:calc(100vw*-0.2100) 0 0;width:100%;max-width:none;height:auto}
.t-architect .ar-hero-photo{aspect-ratio:1/0.7500;overflow:hidden}
.t-architect .ar-hero-photo img{display:block;position:static;width:100%;height:100%;max-width:none;aspect-ratio:auto;padding-top:calc(100vw*0.1260);box-sizing:border-box;background:rgb(252,252,250);object-fit:cover;object-position:20% 50%;-webkit-mask-image:none;mask-image:none}
.t-architect .ar-hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgb(252,252,250) 0,rgb(252,252,250) calc(100vw*0.1335),rgba(252,252,250,0.85) calc(100vw*0.1710),rgba(252,252,250,0.5) calc(100vw*0.2535),rgba(252,252,250,0) calc(100vw*0.4710))}
.t-architect .ar-hero-in{display:contents}.t-architect .ar-hero-copy{order:1;position:relative;z-index:2}.t-architect .ar-hero-doc{order:3;position:relative;z-index:3;margin-top:-28px}
}
/* it-hero-phone-v1 end */