/* Paper Town Roofing v3 (job 1107-roofing-v3): the live sample's identity (storm photo, lime on black, Zilla Slab
   headline, 3D roof layers, 3D objects on lime) with one clear Call, his name big, and plain "what happens" steps. */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.btn{border-radius:0}
.btn.d{background:var(--ink);color:var(--lime)}
.btn:focus-visible,.dot:focus-visible,.grip:focus-visible,.menu-t:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pt-fix .btn:focus-visible,.pt-trust :focus-visible{outline-color:var(--ink)}
.btn.call{min-height:60px;padding:0 28px;font-size:17px;letter-spacing:.06em;gap:12px;justify-content:center}
.btn.call .ic{width:22px;height:22px}
/* the sample strip: one quiet line, not three shouting ones */
.strip{font-size:11px;letter-spacing:.06em;line-height:1.4;padding:6px 14px}
/* header */
.pt-bar{padding:10px 4vw;min-height:64px}
.pt-bar .logo{font-size:20px;line-height:1.05;text-wrap:balance;max-width:24ch}
.pt-bar .acts .btn{gap:8px}
/* ---------- HERO ---------- */
.pt-hero{--x:0%}
.stage{position:absolute;inset:0;overflow:hidden}
.pt-hero .scrim{background:linear-gradient(90deg,rgba(14,15,13,.92) 0%,rgba(14,15,13,.7) 30%,rgba(14,15,13,.15) 52%,transparent 62%)}
.pt-hero .copy{left:4vw;bottom:7vh;max-width:min(640px,46vw)}
.who{margin:0 0 6px}
.who .k{display:block;color:var(--lime);margin-bottom:8px}
.nm{display:block;font:700 30px/1.04 Zil,serif;text-transform:uppercase;letter-spacing:.01em;color:#fff;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
.pt-hero h1{margin:16px 0 14px}
.pt-hero .lead{max-width:38ch}
.pt-hero .call{margin-top:26px}
.pt-hero .sub{margin-top:14px;font-size:15px;color:#c9cbbf}
.pt-hero .sub a{color:var(--lime);font-weight:700;text-underline-offset:3px}
.pt-hero .sub a:after{content:" \2193"}
.grip{border:0;padding:0}
.grip svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.hint{transition:opacity .5s}
.pt-hero.touched .hint{opacity:0}
.pt-hero.anim .scene .new,.pt-hero.anim canvas.rain,.pt-hero.anim .flash{transition:clip-path 1.2s cubic-bezier(.65,0,.25,1)}
.pt-hero.anim .line,.pt-hero.anim .grip,.pt-hero.anim .hint{transition:left 1.2s cubic-bezier(.65,0,.25,1),opacity .4s}
/* ---------- WHEN YOU CALL ---------- */
.v3-how{padding:96px 4vw;background:var(--ink);border-top:1px solid #30332b}
.v3-how .k,.v3-now .k{color:var(--lime);display:block;margin-bottom:12px}
.v3-how h2,.v3-now h2{font:700 clamp(38px,5.5vw,84px)/.92 Zil,serif;text-transform:uppercase}
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px 0 34px}
.steps3 li{background:var(--ink2);border-top:4px solid var(--lime);padding:26px 24px 28px}
.steps3 b{display:block;font:700 54px/1 Zil,serif;color:var(--lime);margin-bottom:16px}
.steps3 h3{font:700 24px/1.08 Zil,serif;text-transform:uppercase;margin-bottom:10px;text-wrap:balance}
.steps3 p{color:#c9cbbf;font-size:17px;line-height:1.5}
/* ---------- RIGHT NOW ---------- */
.v3-now{padding:0 4vw 96px;background:var(--ink)}
.v3-now .box{background:#221a15;border:2px solid var(--red);padding:40px clamp(22px,4vw,56px);display:grid;grid-template-columns:1fr 1.15fr;gap:12px 5vw;align-items:start}
.v3-now .k{color:var(--red)}
.v3-now ol{grid-column:2;grid-row:1/span 3;list-style:none;counter-reset:n;display:grid;gap:12px}
.v3-now li{counter-increment:n;position:relative;padding:4px 0 12px 52px;font-size:18px;line-height:1.45;color:#ece6df;border-bottom:1px solid #3b2c24}
.v3-now li:before{content:counter(n);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:var(--red);color:#fff;font:800 17px Bar,sans-serif}
.v3-now .also{color:#cbbfb5;font-size:16px;line-height:1.5;max-width:40ch}
.v3-now .call{justify-self:start}
/* ---------- LAYERS ---------- */
.layers .hintp{color:#b9bcaf;font-size:17px;line-height:1.5;margin-top:16px;max-width:40ch}
.info{min-height:0}
.info dl{grid-template-columns:8.5em 1fr}
.dot{border:0}
/* ---------- WHAT WE FIX: a showcase, no button per card ---------- */
.card{opacity:1;transform:none;cursor:default;transition:background .3s}
.card .go{margin:0;font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:none;line-height:1.35}
.card .k{opacity:.7}
@media (hover:hover) and (pointer:fine){.card:hover img{transform:translateY(-6px) scale(1.05) rotate(-2deg)}}
@media (hover:none),(pointer:coarse){.card:hover{background:#c8e012}.card:hover img{transform:none}}
.fixcta{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* ---------- REQUEST ---------- */
.pt-trust{align-items:start}
.pt-trust dd{line-height:1.45}
.req{background:#fff;padding:30px;box-shadow:0 24px 50px rgba(25,27,23,.12);border-top:6px solid var(--lime)}
.req fieldset{border:0;min-width:0;display:grid;gap:14px}
.req h3{font:700 32px/1 Zil,serif;text-transform:uppercase}
.req .sub{color:#55584f;font-size:16px;line-height:1.45;margin-top:-4px}
.req label{display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3d4037}
.req label i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;color:#6d7066}
.req input,.req textarea{width:100%;font:16px Bar,sans-serif;color:var(--ink);background:#f5f5ef;border:1px solid #c6c8bc;padding:13px 14px;border-radius:0}
.req textarea{resize:vertical;min-height:84px}
.req .err{color:#b42318;font-size:15px;min-height:1.3em;margin:0}
.req button{width:100%;justify-content:center;min-height:56px;font-size:16px}
.req .done h3{margin-bottom:10px}.req .done .sub{margin:0 0 10px}.req .demo{color:#6d7066;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
footer{padding-bottom:28px}
/* ---------- PHONES ---------- */
@media (max-width:900px){
 .pt-bar{min-height:58px;padding:8px 5vw}
 .pt-bar .acts{display:none!important}
 /* the name lives big in the hero on this page, so the bar is just the mark and Menu */
 body.v3 .pt-bar .logo span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .pt-bar .logo.lg-g:before{width:34px;height:34px}
 .pt-hero{height:auto;min-height:0;display:flex;flex-direction:column}
 .stage{position:relative;inset:auto;height:clamp(250px,36svh,400px);flex:none}
 .pt-hero .scrim{background:linear-gradient(0deg,rgba(14,15,13,.85) 0%,rgba(14,15,13,0) 34%)}
 .scene img{object-position:60% 38%}
 .tag{top:12px;padding:6px 10px;font-size:11px}.tag.a{left:12px}.tag.b{right:12px}
 .grip{top:46%;width:52px;height:52px;margin:-26px 0 0 -26px}
 .hint{top:calc(46% + 36px);font-size:11px}
 .pt-hero .copy{position:static;max-width:none;padding:2px 5vw 30px;background:#0e0f0d}
 .nm{font-size:36px;margin-top:2px}
 .who .k{margin-bottom:6px;font-size:12px}
 .pt-hero h1{font-size:clamp(34px,10.2vw,64px);margin:14px 0 10px}
 .pt-hero .lead{font-size:17px;line-height:1.42}
 .pt-hero .call{display:flex;width:100%;margin-top:18px}
 .btn.call{font-size:18px;white-space:normal;text-align:center}
 .pt-hero .sub{margin-top:12px}
 .v3-how{padding:64px 5vw}
 .steps3{grid-template-columns:1fr;margin:30px 0 26px;gap:10px}
 .steps3 li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px 18px}
 .steps3 b{font-size:40px;margin:0;grid-row:1/span 2}
 .steps3 h3{font-size:21px;margin-bottom:4px}
 .steps3 p{font-size:16px}
 .v3-how .call,.v3-now .call,.fixcta .call{display:flex;width:100%}
 .v3-now{padding:0 5vw 64px}
 .v3-now .box{grid-template-columns:1fr;padding:28px 20px;gap:16px}
 .v3-now ol{grid-column:auto;grid-row:auto}
 .v3-now li{font-size:17px;padding-left:48px}
 .layers{padding:64px 5vw;gap:26px}
 .info{padding:22px 20px;margin-top:22px}
 .info h3{font-size:28px}
 .info dl{grid-template-columns:1fr;gap:2px}
 .info dt{padding-top:10px}
 .pt-fix{padding:64px 5vw}
 .pt-fix header{margin-bottom:28px}
 .card .go{font-size:14px}
 .pt-film-cap{padding-bottom:48px}
 .pt-trust{padding:64px 5vw;gap:34px}
 .req{padding:24px 20px}
 .req h3{font-size:28px}
}
/* fixes after the first 390 px pass */
.strip{text-transform:none;font-size:12px;letter-spacing:.02em;font-weight:500}
.btn.call,.req button,.pt-bar .acts .btn{font-weight:800}
.pt-film-cap h2{font:700 clamp(38px,5.5vw,84px)/.92 Zil,serif;text-transform:uppercase;margin:12px 0 16px;color:#fff}
@media (max-width:900px) and (max-height:700px){
 .stage{height:26svh;min-height:150px}
 .pt-hero .copy{padding-bottom:22px}
 .pt-hero h1{font-size:30px;margin:10px 0 8px}
 .pt-hero .lead{font-size:15px}
 .pt-hero .call{margin-top:12px;min-height:54px}
 .tag{display:none}
}
@media (max-width:374px){.nm{font-size:30px}.btn.call{font-size:16px;padding:0 16px}}

/* inner pages */
.pg-req{display:inline-flex;align-items:center;min-height:48px;font-weight:700;font-size:15px;color:inherit;text-underline-offset:4px}
.pg-req:after{content:" \2192";margin-left:6px}
.pg-cta .btn.solid{min-height:52px}
@media (max-width:900px){.pg .row .btn{width:100%;justify-content:center;min-height:56px;font-size:16px}.pg .row{flex-direction:column;align-items:stretch}}