/* The homeowner page's first screen: a dark aerial street at dusk (assets/aerial-street.svg), one roof outlined in a
   glow made from the roofer's color (brand.mjs sets --brand-glow, --brand-fill, --on-brand, --brand-accent), the
   headline and the address box (the same box as step 1's, address-step.js). The rest of the page keeps style.css.
   Motion runs once (about 3 s), pauses off screen and is left out for reduced motion; the box works from the start. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2')}
/* Stand-ins sized like the page fonts, so the headline and the lines under it keep their place when the fonts arrive. */
@font-face{font-family:'Aerial Serif';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Times');size-adjust:83%;ascent-override:99%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Aerial Sans';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:98%;ascent-override:107%;descent-override:30%;line-gap-override:0%}
:root{--brand-glow:#78e9d1}
.aerial,.aerial-top{
 --night:#050a0b;--glow:var(--brand-glow);
 --text:#f6f3ec;--text-2:rgba(246,243,236,.84);--text-3:rgba(246,243,236,.64);--hair:rgba(255,255,255,.16);
 --serif:'Instrument Serif','Aerial Serif',Georgia,'Times New Roman',serif;
 --sans:Manrope,'Aerial Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --pad:clamp(16px,5vw,72px)
}
.aerial{
 --banner:0px;--first:calc(100svh - var(--banner));
 /* Where the outlined roof sits (fractions of the screen) and its center in the drawing (1120, 650 of 1800 x 1200). */
 --fx:.69;--fy:.47;--tx:.62222;--ty:.54167;--zoom:1.45;
 position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(560px,var(--first),1180px);
 padding-bottom:28px;background:var(--night);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased
}
/* A preview or review page keeps a note fixed to the bottom of the screen; the first screen ends above it. */
body:has(>.rc-preview-banner,>.rc-review-bar) .aerial{--banner:var(--rc-banner-h,34px)}
@supports not (height:100svh){.aerial{--first:calc(100vh - var(--banner))}}
/* The page under the first screen rises over it on a rounded edge. */
.aerial::after{content:'';position:absolute;z-index:6;left:0;right:0;bottom:0;height:28px;border-radius:28px 28px 0 0;background:var(--cream,#f5f4ef);pointer-events:none}
html body::before{display:none}
.aerial-view{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:88px}

/* ---- the drawing: the street (a picture) and the reveal (drawn here, in the roofer's glow) ---- */
.aerial-scene{position:absolute;inset:0;z-index:-3;overflow:hidden;container-type:size;pointer-events:none;background:#0b1512}
.aerial-scene-base{animation:aerial-in 1.1s ease-out both}
/* The page can paint before the inline script places the roof, so until then the drawing waits unseen. */
.aerial:not(.is-placed) .aerial-scene{visibility:hidden}
.aerial-scene-top{z-index:2;background:none}
.aerial-map{
 --sw:calc(max(100cqw,150cqh)*var(--zoom));position:absolute;width:var(--sw);height:calc(var(--sw)/1.5);
 left:clamp(calc(100cqw - var(--sw)),calc(var(--fx)*100cqw - var(--tx)*var(--sw)),0px);
 top:clamp(calc(100cqh - var(--sw)/1.5),calc(var(--fy)*100cqh - var(--ty)*var(--sw)/1.5),0px);
 transform-origin:calc(var(--tx)*100%) calc(var(--ty)*100%);animation:aerial-descend 2.6s cubic-bezier(.16,.84,.24,1) both;
 transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),width .9s cubic-bezier(.2,.8,.2,1),height .9s cubic-bezier(.2,.8,.2,1)
}
@supports not (width:1cqw){.aerial-map{left:-70%;top:-20%;width:230%;height:auto;aspect-ratio:3/2}}
.aerial.no-glide .aerial-map{transition:none}
.aerial-street,.aerial-reveal,.aerial-tint{position:absolute;inset:0;display:block;width:100%;height:100%}
/* A red, orange or brown glow sits too close to the outlined roof's terracotta, so for those roofers (brand.mjs sets
   --roof-slate to 1) that one roof takes a slate tile color: its tiles and shading stay, only the hue changes. */
.aerial-tint{mix-blend-mode:color;opacity:var(--roof-slate,0)}
.aerial-tint path{fill:#4f5c66}
.aerial-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
 background:linear-gradient(90deg,rgba(4,9,10,.95) 0,rgba(4,9,10,.88) 24%,rgba(4,9,10,.55) 42%,rgba(4,9,10,.08) 58%,rgba(4,9,10,0) 66%),
  linear-gradient(180deg,rgba(4,9,10,.78) 0,rgba(4,9,10,0) 170px),linear-gradient(0deg,rgba(4,9,10,.92) 0,rgba(4,9,10,.35) 170px,rgba(4,9,10,0) 280px)}
.aerial-shade::after{content:'';position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes aerial-in{from{opacity:0}to{opacity:1}}
@keyframes aerial-descend{from{transform:scale(1.18)}to{transform:none}}
.aerial-reveal .roof-case{fill:none;stroke:rgba(2,6,7,.42);stroke-width:7;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:aerial-draw 1.5s .95s cubic-bezier(.55,.1,.3,1) both}
.aerial-reveal .roof-line{fill:none;stroke:var(--glow);stroke-width:3.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:aerial-draw 1.5s .95s cubic-bezier(.55,.1,.3,1) both}
.aerial-reveal .roof-glow{fill:none;stroke:var(--glow);stroke-width:12;opacity:.62;stroke-dasharray:1;stroke-dashoffset:0;animation:aerial-draw 1.5s .95s cubic-bezier(.55,.1,.3,1) both}
.aerial-reveal .roof-fill{fill:var(--glow);fill-opacity:.09;animation:aerial-fill .7s 2.25s ease-out both}
.aerial-reveal .handle{fill:#fff;stroke:var(--glow);stroke-width:2.6;transform-box:fill-box;transform-origin:center;animation:aerial-pop .38s calc(1.2s + var(--i)*.1s) cubic-bezier(.3,1.6,.5,1) both}
.aerial-reveal .ping{fill:none;stroke:var(--glow);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:aerial-ping 1.5s .75s ease-out both}
.aerial-reveal .scan{opacity:0;animation:aerial-scan 1.3s 1.05s cubic-bezier(.4,0,.2,1) both}
.aerial-reveal .dims{animation:aerial-up .6s 2.45s ease-out both}
.aerial-reveal .dim-line{fill:none;stroke:rgba(255,255,255,.78);stroke-width:1.4}
.aerial-reveal .dim-label rect{fill:rgba(5,12,13,.82);stroke:rgba(255,255,255,.28)}
.aerial-reveal .dim-label text{font:800 13.5px var(--sans);fill:#fff;letter-spacing:.02em;text-anchor:middle}
@keyframes aerial-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes aerial-fill{from{fill-opacity:0}to{fill-opacity:.09}}
@keyframes aerial-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes aerial-ping{0%{opacity:.9;transform:scale(.15)}100%{opacity:0;transform:scale(1.5)}}
@keyframes aerial-scan{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(215px)}}
@keyframes aerial-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- the size card beside the roof (under it on phones), in the drawing's own place ---- */
.aerial-chip{position:absolute;left:calc(67.222% + 40px);top:54.167%;display:grid;gap:3px;padding:14px 20px 14px 18px;border-radius:18px;white-space:nowrap;
 background:rgba(6,14,15,.68);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.2);
 box-shadow:0 26px 60px -22px rgba(0,0,0,.9);transform:translateY(-62%);animation:aerial-chip .6s 1.95s cubic-bezier(.2,.8,.2,1) both;font-family:var(--sans)}
.aerial-chip::before{content:'';position:absolute;right:100%;top:50%;width:34px;height:1.5px;background:linear-gradient(90deg,var(--glow),color-mix(in srgb,var(--glow) 30%,transparent))}
.aerial-chip::after{content:'';position:absolute;right:calc(100% + 30px);top:calc(50% - 4px);width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--glow),0 0 14px var(--glow)}
.aerial-chip.is-below{left:62.222%;top:calc(62.667% + 16px);transform:translateX(-50%)}
.aerial-chip.is-below::before{right:auto;left:50%;top:auto;bottom:100%;width:1.5px;height:14px;background:linear-gradient(0deg,color-mix(in srgb,var(--glow) 30%,transparent),var(--glow))}
.aerial-chip.is-below::after{display:none}
/* A card with no room is hidden but keeps its size (the placement reads it). */
.aerial-chip.is-gone{visibility:hidden}
@keyframes aerial-chip{from{opacity:0;translate:0 10px;scale:.96}to{opacity:1;translate:none;scale:none}}
.aerial-chip-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.aerial-chip-v{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.05;font-variant-numeric:tabular-nums}
.aerial-chip-v small{margin-left:5px;font-size:15px;font-weight:700;letter-spacing:0;color:var(--text-2)}
.aerial-chip-s{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--glow)}
.aerial-chip-s svg{width:13px;height:13px}

/* ---- the header over the drawing ---- */
.aerial-top{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--pad) 0;font-family:Manrope,'Aerial Sans',system-ui,sans-serif}
.aerial-top .brand,.aerial-top .rc-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#fff;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.15;text-decoration:none}
/* The logo on a light tile, so a dark or a light logo reads on the night scene (a light logo keeps its dark chip). */
.aerial-top .rc-brand img.rc-brand-logo{box-sizing:content-box;height:34px;width:auto;max-width:170px;padding:7px 11px;border-radius:13px;object-fit:contain;background:#fff;box-shadow:0 8px 24px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.4)}
.aerial-top .rc-brand img.rc-brand-logo--tall{height:44px;padding:5px 9px}
.aerial-top .rc-brand--logo-only img.rc-brand-logo{height:40px;max-width:230px}
.aerial-top .rc-brand--logo-only img.rc-brand-logo--tall{height:50px}
.aerial-top .rc-brand img.rc-brand-logo--chip{background:var(--logo-bg)}
.aerial-top .brandmark,.aerial-top .rc-brand:not(:has(img))::before{content:'';flex:none;display:block;width:44px;height:44px;border-radius:13px;font-size:0;color:transparent;
 background:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23183f37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.5 16 6l12 10.5'/%3E%3Cpath d='M8.5 13.5V26h15V13.5'/%3E%3Cpath d='M13.5 26v-6.5h5V26'/%3E%3C/svg%3E") center/26px no-repeat,#fff;
 box-shadow:0 8px 24px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.4)}
.aerial-top .brand-divider{background:rgba(255,255,255,.3)}
.aerial-top .brand small{color:var(--text-3)}
.aerial-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600}
.aerial-nav a{color:var(--text-2);text-decoration:none}
.aerial-nav a:hover{color:#fff}
.aerial-cta,.aerial-menu{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:700}
.aerial-nav .aerial-cta{color:#fff}
.aerial-menu{display:none;width:44px;height:44px;padding:0;justify-content:center;cursor:pointer;color:#fff;font:inherit}
.aerial-menu span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;transition:transform .2s}
.aerial-menu[aria-expanded="true"]{background:rgba(255,255,255,.2)}
.aerial-top :focus-visible,.aerial :focus-visible{outline:3px solid var(--glow);outline-offset:3px}

/* ---- the words and the address box ---- */
.aerial-main{position:relative;z-index:7;flex:1;display:flex;align-items:center;padding:0 var(--pad);min-height:0}
.aerial-copy{width:min(640px,50vw);display:flex;flex-direction:column}
.aerial-stage{display:none}
/* The words and the box; on a phone they fill the first screen together (see the phone rules). */
.aerial-fold{display:contents}
.aerial-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--text-2)}
.aerial .rc-eyebrow-name{color:var(--glow)}
.aerial-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(5,10,11,.6),0 0 0 5.5px color-mix(in srgb,var(--glow) 42%,transparent),0 0 12px var(--glow)}
.aerial-live::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--glow);opacity:0;animation:aerial-halo 2.4s 1s ease-out both}
@keyframes aerial-halo{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.aerial h1{margin:20px 0;font-family:var(--serif);font-weight:400;font-size:clamp(60px,6.7vw,104px);line-height:.93;letter-spacing:-.012em;color:#fff}
.aerial h1 em{font-style:italic;color:var(--glow);text-shadow:0 0 42px color-mix(in srgb,var(--glow) 40%,transparent)}
.aerial-lede{margin:0;max-width:30em;font-size:18.5px;line-height:1.55;font-weight:500;color:var(--text-2)}
.aerial-lede strong{color:#fff;font-weight:700;white-space:nowrap}
.aerial-search{position:relative;margin-top:32px}
#aerial .aerial-label{display:flex;align-items:center;gap:8px;margin:0 0 11px 4px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.aerial-label svg{width:14px;height:14px;color:var(--glow)}
.aerial-label span{display:none}
.aerial-bar{position:relative;display:flex;gap:8px;padding:8px;border-radius:26px;
 background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.3);
 -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 box-shadow:0 34px 80px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.4),0 0 70px -14px color-mix(in srgb,var(--glow) 55%,transparent)}
.aerial-bar::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
 background:linear-gradient(110deg,transparent 20%,color-mix(in srgb,var(--glow) 90%,white) 45%,transparent 70%) 0 0/250% 100% no-repeat;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 animation:aerial-sheen 1.6s 1.6s ease-out both}
@keyframes aerial-sheen{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-120% 0}}
.aerial-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;background:#fff;border-radius:18px;transition:box-shadow .2s}
.aerial-field:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 75%,transparent)}
.aerial-field>svg{position:absolute;left:19px;width:22px;height:22px;color:var(--brand-accent,#183f37);pointer-events:none}
#aerial .aerial-field input{width:100%;height:64px;margin:0;border:0;outline:0;background:transparent;border-radius:18px;padding:0 18px 0 54px;font:600 17.5px/1 var(--sans);color:#101815;letter-spacing:-.005em;text-overflow:ellipsis}
#aerial .aerial-field input::placeholder{color:#69716d;font-weight:500}
#aerial .aerial-field input:focus-visible{outline:0}
.aerial-unit{position:absolute;right:18px;font-size:15px;font-weight:700;color:#69716d;pointer-events:none}
#aerial .aerial-field input[type=number]{padding-right:64px;-moz-appearance:textfield}
.aerial-go{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;padding:0 26px;border:0;border-radius:18px;cursor:pointer;white-space:nowrap;
 background:linear-gradient(180deg,color-mix(in oklab,var(--brand-fill,#183f37) 82%,white),var(--brand-fill,#183f37) 55%);color:var(--on-brand,#fff);font:800 17px var(--sans);letter-spacing:-.01em;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent),0 10px 28px -8px color-mix(in srgb,var(--glow) 45%,transparent)}
.aerial-go svg{width:18px;height:18px;transition:transform .2s}
.aerial-go:hover svg{transform:translateX(3px)}
.aerial-go[aria-busy=true]{cursor:progress;opacity:.8}
#aerial .hero-house .house-status{margin:10px 4px 0;font-size:14px;line-height:1.5;color:var(--text)}
#aerial .hero-house .house-status:empty{margin:0}
/* The open list: the same listbox as step 1's, dressed for the first screen, with a way out under it. */
.aerial-drop{display:none;position:absolute;z-index:9;left:0;right:0;top:calc(100% + 10px);padding:8px;border-radius:22px;background:#fff;color:#101815;
 box-shadow:0 40px 90px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.5);animation:aerial-drop .22s ease-out both}
.aerial-drop:has(>.house-suggestions:not([hidden])){display:block}
.aerial.is-listing .aerial-drop{display:block}
@keyframes aerial-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.aerial-drop-head{margin:6px 12px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6a716e}
/* Three addresses show at a time and the top of a fourth fades out under them (the list scrolls; its end clears the
   fade), so the list stays on the first screen. */
#aerial .hero-house .house-suggestions{position:static;margin:0;padding:0;max-height:186px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;background:none;box-shadow:none}
#aerial .hero-house .house-suggestions:has(>li:nth-child(4)){padding-bottom:24px;-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
#aerial .hero-house .house-option{display:grid;grid-template-columns:40px 1fr 20px;grid-template-areas:'pin street go' 'pin place go';align-items:center;column-gap:12px;row-gap:1px;min-height:54px;padding:7px 12px;border-radius:15px;font-family:var(--sans);line-height:1.3}
#aerial .hero-house .house-option::before{content:'';grid-area:pin;width:40px;height:40px;border-radius:12px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23243d35'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E") center/19px no-repeat,color-mix(in srgb,var(--brand-fill,#183f37) 11%,white)}
#aerial .hero-house .house-option::after{content:'→';grid-area:go;font-size:18px;font-weight:700;color:var(--brand-accent,#183f37);opacity:0}
#aerial .hero-house .house-option b{grid-area:street;font-size:16px;font-weight:500;color:#1d2420;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aerial .hero-house .house-option .house-typed{font-weight:800}
#aerial .hero-house .house-option span{grid-area:place;font-size:13.5px;color:#5c6360}
#aerial .hero-house .house-option[aria-selected="true"],#aerial .hero-house .house-option:hover{background:color-mix(in srgb,var(--brand-fill,#183f37) 9%,white)}
#aerial .hero-house .house-option[aria-selected="true"]::after{opacity:1}
.aerial-drop-foot{margin:6px 4px 2px;padding:12px 8px 6px;border-top:1px solid #ecebe6;font-size:14px;line-height:1.45;color:#5c6360}
.aerial-drop-foot a{color:var(--brand-accent,#183f37);font-weight:800;white-space:nowrap}
/* The size form of a site without see your home: the same bar, and the stories beside it. */
#aerial .hero-stories{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0 4px;border:0;padding:0}
#aerial .hero-stories legend{float:left;margin:0 6px 0 0;padding:0;font-size:14px;font-weight:700;line-height:40px;color:var(--text-2)}
#aerial .hero-stories label{margin:0}
.aerial .hero-stories span{min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff}
.aerial .hero-stories input:checked+span{box-shadow:0 0 0 2px color-mix(in srgb,var(--glow) 70%,transparent)}
.aerial-alts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 0 4px}
#aerial .aerial-alts .text-button{display:inline;min-height:0;padding:0 0 2px;border-bottom:1px solid rgba(255,255,255,.28);font-size:15px;font-weight:600;color:var(--text-2);text-decoration:none}
#aerial .aerial-alts .text-button:hover{color:#fff;border-color:var(--glow)}
.aerial-assure{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 0 4px;padding:0;list-style:none;font-size:12.5px;font-weight:600;color:var(--text-3)}
.aerial-assure li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.aerial-assure svg{width:14px;height:14px;color:var(--glow)}
/* The license sits with the illustration note, at the foot of the first screen (under it on a phone). */
.aerial-aside{display:grid;justify-items:end;gap:4px;text-align:right}
#aerial .rc-hero-license{margin:0;max-width:26em;font-size:12px;line-height:1.5;color:var(--text-3)}

/* ---- how it works, along the bottom of the first screen ---- */
.aerial-rail{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 var(--pad);padding:20px 0 26px;border-top:1px solid var(--hair);scroll-margin-top:24px}
.aerial-steps{display:flex;gap:44px;margin:0;padding:0;list-style:none}
.aerial-steps li{display:flex;align-items:flex-start;gap:14px}
.aerial-num{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;color:var(--text-3)}
.aerial-steps li:first-child .aerial-num{color:var(--glow)}
.aerial-steps strong{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.aerial-steps small{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:13px;font-weight:500;color:var(--text-3)}
.aerial-swatches{display:flex}
.aerial-swatches img{display:block;width:24px;height:24px;margin-left:-7px;border-radius:50%;object-fit:cover;border:2px solid rgba(12,20,20,.9);box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.aerial-swatches img:first-child{margin-left:0}
.aerial-note{margin:0;max-width:22em;text-align:right;font-size:12px;line-height:1.5;color:var(--text-3)}
#estimator{padding-top:clamp(24px,3vw,44px)}

/* ---- a little narrower: the nav keeps only its button ---- */
@media (min-width:901px) and (max-width:1100px) and (orientation:landscape){
 .aerial-nav a:not(.aerial-cta){display:none}
 .aerial-copy{width:min(640px,56vw)}
 .aerial-rail{flex-wrap:wrap;gap:10px 32px}
 .aerial-steps{gap:28px}
 .aerial-steps small{white-space:nowrap}
 .aerial-aside{flex-basis:100%;justify-items:start;text-align:left}
 .aerial-note{max-width:none;text-align:left}
}

/* ---- phones and upright screens (tablets, a tall window): one column, the drawing between the words and the box.
   The inline script in index.html asks the same query. ---- */
@media (max-width:900px),(orientation:portrait){
 .aerial{--fx:.5;--fy:.48;--zoom:1.15;display:block;min-height:0;padding-bottom:28px}
 /* The drawing may stop short of the bottom edge or the top (both are dark there), so the roof sits where the room is. */
 .aerial-map{top:clamp(calc(40cqh - var(--sw)/1.5),calc(var(--fy)*100cqh - var(--ty)*var(--sw)/1.5),90px)}
 .aerial.is-listing .aerial-map{top:clamp(calc(40cqh - var(--sw)/1.5),calc(var(--fy)*100cqh - var(--ty)*var(--sw)/1.5),180px)}
 .aerial{--vt:70px;--vb:18px}
 .aerial-view{position:relative;min-height:max(560px,var(--first));padding-top:var(--vt)}
 /* The words, the roof and the box fill the first screen; on a short one (.is-spilled, the script's call) the links
    and checks under the box sit just below it, which makes room for the roof and its card. */
 .aerial-fold{display:flex;flex-direction:column;flex:1 0 auto}
 .aerial.is-spilled .aerial-fold{min-height:calc(max(560px,var(--first)) - var(--vt) - var(--vb))}
 /* Dark behind the words, clear from the roof's top (--bt) to the foot of its card (--sf), dark again toward the box. */
 .aerial-shade{background:linear-gradient(180deg,rgba(4,9,10,.94) 0,rgba(4,9,10,.88) calc(var(--st,280px) - 34px),rgba(4,9,10,.3) min(calc(var(--st,280px) + 16px),var(--bt,280px)),rgba(4,9,10,0) min(calc(var(--st,280px) + 56px),calc(var(--bt,280px) + 16px)),rgba(4,9,10,0) max(calc(var(--sb,580px) - 80px),calc(var(--sf,0px) + 4px)),rgba(4,9,10,.72) calc(var(--sb,580px) + 4px),rgba(4,9,10,.94) calc(var(--sb,580px) + 90px),rgba(4,9,10,.97) 100%)}
 .aerial.is-listing .aerial-shade{background:linear-gradient(180deg,rgba(4,9,10,.93) 0,rgba(4,9,10,.8) 40%,rgba(4,9,10,.2) 70%,rgba(4,9,10,.35) 100%)}
 .aerial.is-listing{--zoom:1.42}
 .aerial-top{padding:14px 16px 0}
 .aerial-top .brand,.aerial-top .rc-brand{gap:10px;font-size:16.5px}
 .aerial-top .brandmark,.aerial-top .rc-brand:not(:has(img))::before{width:40px;height:40px;border-radius:12px;background-size:23px}
 .aerial-top .rc-brand img.rc-brand-logo{height:28px;max-width:150px;padding:6px 9px;border-radius:12px}
 .aerial-top .rc-brand img.rc-brand-logo--tall{height:36px;padding:4px 8px}
 .aerial-top .rc-brand--logo-only img.rc-brand-logo{height:32px;max-width:190px}
 .aerial-top .rc-brand--logo-only img.rc-brand-logo--tall{height:40px}
 .aerial-menu{display:inline-flex;position:relative}
 .aerial-nav{position:absolute;top:calc(100% + 10px);right:16px;left:16px;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:20px;background:rgba(8,16,16,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px -20px rgba(0,0,0,.9);font-size:16px}
 .aerial-nav a{padding:13px 14px;border-radius:12px}
 .aerial-nav .aerial-cta{justify-content:center;margin-top:6px;padding:13px 14px;border-radius:14px;background:var(--brand-fill,#183f37);color:var(--on-brand,#fff);border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent)}
 .aerial-top.is-open .aerial-nav{display:flex}
 .aerial-main{align-items:stretch;padding:0 16px var(--vb)}
 .aerial-copy{width:100%}
 .aerial-eyebrow{margin-top:8px;font-size:11px;letter-spacing:.18em}
 .aerial h1{margin:12px 0;font-size:clamp(42px,12vw,48px);line-height:.95}
 .aerial-lede{font-size:15.5px;line-height:1.5}
 .aerial-stage{display:block;flex:1;min-height:120px}
 .aerial-search{margin-top:0}
 #aerial .aerial-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .aerial-bar{flex-direction:column;gap:7px;padding:7px;border-radius:24px}
 #aerial .aerial-field input{height:58px;font-size:16.5px;padding-left:50px}
 .aerial-field>svg{left:17px}
 .aerial-go{height:54px;border-radius:17px;font-size:16.5px}
 .aerial-alts{flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px}
 #aerial .aerial-alts .text-button{font-size:14.5px}
 .aerial-assure{margin-top:14px;gap:6px 16px;font-size:12px}
 .aerial-chip{padding:10px 14px 11px;border-radius:15px}
 .aerial-chip-k{font-size:9.5px;letter-spacing:.14em}
 .aerial-chip-v{font-size:23px}
 .aerial-chip-v small{font-size:13px}
 .aerial-chip-s{display:none}
 .aerial-rail{display:block;margin:0 16px;padding:26px 0 30px}
 .aerial-steps{flex-direction:column;gap:18px}
 .aerial-aside{justify-items:start;margin-top:22px;text-align:left}
 .aerial-note{text-align:left;max-width:none}
 /* Typing: the headline steps aside and the list opens with the roof still in view below it. */
 .aerial.is-listing :is(.aerial-eyebrow,.aerial-lede,.aerial-go,.aerial-alts,.aerial-assure){display:none}
 .aerial.is-listing .aerial-stage{flex:0;min-height:0}
 .aerial.is-listing h1{margin:14px 0 16px;font-size:31px;line-height:1}
 .aerial.is-listing h1 br{display:none}
 .aerial.is-listing .aerial-chip{display:none}
 /* The roof stays in view under the list. */
 #aerial .hero-house .house-suggestions{max-height:198px}
 #aerial .hero-house .house-option{min-height:58px;padding:9px 10px;column-gap:11px}
}
/* A narrow phone: the header already names the roofer, so the eyebrow keeps to its one line. */
@media (max-width:599px){.aerial-eyebrow .rc-eyebrow-co{display:none}}
/* Short phones: the drawing gives way first, so the box and its button stay on the first screen. */
@media (max-width:900px) and (max-height:720px){
 .aerial-lede-more{display:none}
 .aerial h1{font-size:40px}
 .aerial-eyebrow{margin-top:4px}
 .aerial{--vt:64px}
}
/* Before the script has placed the roof, a short phone starts with the links under the fold, as the script mostly
   decides there (the page can paint before it runs; this way nothing moves when it does). */
@media (max-width:900px) and (max-height:799px){.aerial:not(.is-placed) .aerial-fold{min-height:calc(max(560px,var(--first)) - var(--vt) - var(--vb))}}
@media (max-width:900px) and (max-height:833px){body:has(>.rc-preview-banner,>.rc-review-bar) .aerial:not(.is-placed) .aerial-fold{min-height:calc(max(560px,var(--first)) - var(--vt) - var(--vb))}}
@media (min-width:600px) and (max-width:900px),(min-width:600px) and (orientation:portrait){
 .aerial-copy{max-width:560px;margin:0 auto}
 .aerial h1{font-size:64px}
 .aerial-lede{font-size:17px}
 .aerial-rail{max-width:560px;margin:0 auto}
}
/* A short laptop window: the headline sizes to the height and the gaps close, so the steps stay on the first screen. */
@media (min-width:901px) and (max-height:800px) and (orientation:landscape){
 .aerial-view{padding-top:90px}
 .aerial h1{margin:12px 0;font-size:clamp(52px,min(6.7vw,12vh),104px)}
 .aerial-lede{line-height:1.45}
 .aerial-search{margin-top:18px}
 #aerial .aerial-label{margin-bottom:8px}
 .aerial-alts{margin-top:12px}
 .aerial-assure{margin-top:12px}
 .aerial-main{padding-bottom:14px}
 .aerial-rail{padding:12px 0 16px}
}
@media (min-width:901px) and (max-height:640px) and (orientation:landscape){
 .aerial-view{padding-top:84px}
 .aerial h1{font-size:clamp(48px,min(6.7vw,11vh),104px)}
 .aerial-assure{display:none}
}
/* Once the entrance has played (or the list has opened) it is taken off, so nothing the list hides plays it again. */
.aerial.is-settled .aerial-scene-base,.aerial.is-settled .aerial-map,.aerial.is-settled .aerial-reveal *,.aerial.is-settled .aerial-chip,.aerial.is-settled .aerial-live::after,.aerial.is-settled .aerial-bar::before{animation:none!important}
/* Off screen, the motion waits; with reduced motion the finished picture shows at once. */
.aerial.is-away,.aerial.is-away *,.aerial.is-away *::before,.aerial.is-away *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
 .aerial,.aerial *,.aerial *::before,.aerial *::after{animation:none!important;transition:none!important}
}
@media print{.aerial,.aerial-top{display:none!important}}