/* r50 phone immersion (Brandon 10/26: B + A mix). Phones only: every rule sits under max-width 760px.
   B: today's order and paper look, Estimate + Call pinned at the thumb, forms one group per screen.
   A: media sections go edge to edge with the action at the thumb. */
@media (max-width:760px){
:root{--r50bh:calc(76px + env(safe-area-inset-bottom,0px))} /* the bar's real height, home bar inset included */

/* ---------- pinned bar (B, ref Uber Eats / Alan) ---------- */
.r50-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(245,244,240,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line,rgb(214,211,204));
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
.r50-bar.on{transform:none}
.r50-bar a{display:inline-flex;align-items:center;justify-content:center;height:52px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:500 11px/1 "FS Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.r50-bar .r50-go{flex:1;background:var(--ink,#121211);color:var(--white,#F7F6F2)!important}
.r50-bar .r50-go i{font-style:normal;color:var(--green,#62A544);margin-left:8px}
.r50-bar .r50-call{flex:none;padding:0 16px;color:var(--ink,#121211)!important;box-shadow:inset 0 0 0 1px var(--ink,#121211)}
/* r58: Call shows the number where it fits; Spanish and phones under 390px show just Call / Llamar so the bar never runs off screen */
html[lang=es] .r50-bar .r50-num{display:none}
@media (max-width:389px){.r50-bar .r50-num{display:none}}
.r50-bar.dk{background:rgba(18,18,17,.9);border-top-color:rgba(247,246,242,.12)}
.r50-bar.dk .r50-go{background:var(--green,#62A544)}
.r50-bar.dk .r50-go i{color:#fff}
.r50-bar.dk .r50-call{color:#fff!important;box-shadow:inset 0 0 0 1px rgba(247,246,242,.6)}
body.r50b{padding-bottom:var(--r50bh)}

/* ---------- menu on the home page (other pages already have one) ---------- */
.r50-menu{position:fixed;inset:0;z-index:70;background:var(--paper,#F5F4F0);padding:96px 22px 40px;display:flex;flex-direction:column;overflow:auto}
.r50-menu[hidden]{display:none}
.r50-menu a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line,rgb(214,211,204));color:var(--ink,#121211);text-decoration:none;
  font:700 30px/1 "FS Round",sans-serif;letter-spacing:-.03em}
.r50-menu .r50-x{position:absolute;right:16px;top:12px}

/* ---------- tap targets 44 x 44 ---------- */
.nav-lang{height:46px!important}
.nav-lang button{min-width:44px!important;padding:0 10px!important;font-size:11px!important}
.nav .nav-home,.pg-nav>a:first-child{display:inline-flex;align-items:center;min-height:44px}
.nav .pill,.pg-nav .pill{height:44px;min-height:44px}
a.pill,button.pill{min-height:44px}
.fs-foot .ff-bot a{display:inline-flex;align-items:center;min-height:44px!important;padding:0 6px}
.ff-links a{display:inline-flex;align-items:center;min-height:44px}
.fx-info a{display:inline-flex;align-items:center;min-height:44px}
#build .fullb{display:flex;align-items:center;min-height:44px}
.wlb .lt .back,.wlb .x,.wgal .gbar .x,.wgal .gbar .back{min-height:44px;min-width:44px}
#build .close{width:44px;height:44px;right:8px;top:6px}
.px-sw button{width:48px!important;height:48px!important}
.px-lay button,.chips button{min-height:44px}
#vPhoto,#vPlan{min-height:44px!important;min-width:44px}
body.r50-work .grp button{height:44px!important}

/* ---------- footer: room for the bar ---------- */
.fs-foot{padding-bottom:28px}
}

/* ================= HOME (/m) ================= */
@media (max-width:760px){
/* hero: the bar carries the estimate, so the title sits above it */
body.r50-home #est{display:none}
body.r50-home.r50b .statement{bottom:calc(var(--r50bh) + 28px)!important}

/* 04 How it's made: the chapter text sits above the bar */
body.r50-home.r50b #made .mk-right{padding-bottom:calc(var(--r50bh) + 24px)!important}

/* 02 Build yours (r50b): the desktop scroll-in on a phone. Title first, the fence window grows to fill the screen
   between the nav and the bar, then the picks arrive on the grass under the fence (never over it). */
body.r50-home #build.pinp{padding:0!important;border-top:1px solid var(--line)}
body.r50-home #build.pinp .btitle{padding:26px 18px 0}
body.r50-home #build.pinp .btitle .eyebrow{margin-bottom:10px}
body.r50-home #build.pinp .btitle .head h2{font-size:56px}
body.r50-home #build.pinp .btitle .head p{margin:12px auto 0;max-width:31ch;font-size:15px;line-height:1.45}
body.r50-home #build.pinp .bfacts{display:block;margin-top:12px;font-size:11px;line-height:1.5;padding:0 6px}
body.r50-home #build.pinp .scene-clip{box-shadow:0 24px 50px -30px rgba(18,18,17,.5)}
body.r50-home #build.pinp .photo{min-height:0} body.r50-home #build.pinp .photo img{object-position:50% var(--fy,47%)} /*r59: the fence sits centred in the frame (js sets --fy per frame); bottom-anchoring showed only grass while the window was small*/
body.r50-home #build.pinp .bdraw-cap{top:12px!important;left:12px!important;bottom:auto!important}
body.r50-home #build.pinp .dock{left:10px!important;right:10px!important;bottom:10px!important;max-width:none;padding:10px!important;gap:8px!important;
  flex-wrap:wrap!important;align-items:stretch;border-radius:16px}
body.r50-home #build.pinp .dock .gfin{order:1;width:100%}
body.r50-home #build.pinp .dock>.grp:not(.gfin){order:2;flex:1 1 0;min-width:0}
body.r50-home #build.pinp .dock .fins{order:3;width:100%}
body.r50-home #build.pinp .dock .fin{width:100%}
body.r50-home #build.pinp .dock .grp>.mono,body.r50-home #build.pinp .dock .fin>.mono{display:none}
body.r50-home #build.pinp .dock .seg{display:flex;width:100%;padding:3px}
body.r50-home #build.pinp .dock .seg button{flex:1;min-height:42px;padding:0 6px!important;font-size:14px}
body.r50-home #build.pinp .dock .seg small{display:none}
body.r50-home #build.pinp .dock .chips{flex-wrap:nowrap;justify-content:space-between;gap:6px}
body.r50-home #build.pinp .dock .chip{width:44px!important;height:44px!important}
body.r50-home #build.pinp .dock .pick{display:none!important}
/* r50c: the dock keeps its estimate button on phones; it opens the fence builder with these picks */
body.r50-home #build.pinp .dock .cta{display:inline-flex!important;order:2;flex:none;width:auto!important;white-space:nowrap;align-items:center;justify-content:center;height:48px;padding:0 16px!important;font-size:14px;align-self:center}
body.r50-home #build .sheet{z-index:65;padding-bottom:0}
body.r50-home #build .sheet .send{position:sticky;bottom:0;width:100%;margin-top:14px;box-shadow:0 -14px 0 var(--white,#fff)}
body.r50-home #build .sheet label,body.r50-home #build .sheet .note{font-size:13px}

/* 03 Our work (r50b): the desktop layout on a phone. Big card in the middle, the jobs before and after it underneath
   in two hairline columns with their Previous / Next, dots and See all work below. Swipe the card too. */
body.r50-home #work{padding:88px 0 40px!important}
body.r50-home #work .whead{padding:0 18px!important}
body.r50-home #work .whead h2{font-size:52px}
body.r50-home #work .whead .lede{margin-top:14px;font-size:15px}
body.r50-home #work .wstage{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.r50-home #work .wtrack{display:none!important}
body.r50-home #work .wgrid{display:grid!important;grid-template-columns:1fr 1fr;grid-template-areas:"m m" "l r";max-width:none}
body.r50-home #work .wmid{grid-area:m;padding:16px}
body.r50-home #work .wmid .card{aspect-ratio:4/5;max-height:calc(100svh - 66px - var(--r50bh) - 150px);width:100%;margin:0 auto;border-radius:6px;will-change:transform}
body.r50-home #work .wside{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
body.r50-home #work .wside.l{grid-area:l;border-right:1px solid var(--line)}
body.r50-home #work .wside.r{grid-area:r;border-left:0;grid-template-columns:minmax(0,1fr) 56px}
body.r50-home #work .wside .t{grid-column:1 / -1;font-size:11px}
body.r50-home #work .wside.r .t{text-align:right}
body.r50-home #work .wside button.thumb{width:56px;height:56px;aspect-ratio:auto}
body.r50-home #work .wside.r button.thumb{grid-column:2;grid-row:2}
body.r50-home #work .wside.r button.go{grid-column:1;grid-row:2}
body.r50-home #work .wside button.go{height:44px;padding:0 14px}
body.r50-home #work .card .acts .pill{height:46px}
body.r50-home #work .wfoot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 18px 0}
body.r50-home #work .wfoot .dots{display:flex;margin:0}
body.r50-home #work .dots div{gap:0;padding:0 6px}
body.r50-home #work .dots button{width:40px;height:40px;display:grid;place-items:center;background:none!important;border-radius:0}
body.r50-home #work .dots button::before{content:"";display:block;width:7px;height:7px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
body.r50-home #work .dots button.on{width:40px}
body.r50-home #work .dots button.on::before{width:24px;background:var(--ink)}
body.r50-home #work .wfoot .seeall-m{display:flex!important;margin:0;width:100%}
body.r50-home #work .wfoot .seeall-m .pill{width:100%;justify-content:center}

/* 05 Straight answers: 4 shown, the rest one tap away (A idea, B look) */
body.r50-home #answers .qa-list details.r50-more{display:none}
body.r50-home #answers .qa-list.r50-all details.r50-more{display:block}
body.r50-home #answers summary{min-height:56px}
body.r50-home .r50-allq{margin-top:18px}

/* 06 For pros (r50b): the desktop card on a phone. It opens up as you scroll in, the fence inside runs through every
   look, and the five wood looks float around it (tap one to show it). */
body.r50-home .pro-x{height:140vh!important;height:140svh!important;padding:0!important} /*r58: was 210, three screens looked the same*/
@media (prefers-reduced-motion:reduce){body.r50-home .pro-x{height:100vh!important;height:100svh!important}}
body.r50-home .pb-pin{position:sticky!important;top:0;height:100vh;height:100svh;display:grid!important;place-items:center;overflow:hidden!important;padding:0!important}
body.r50-home .pb-card{width:100%!important;height:calc(100svh - 66px - var(--r50bh))!important;aspect-ratio:auto!important;
  margin:calc(66px - var(--r50bh)) 0 0!important;border-radius:0!important} /*r51b: nav to bar, edge to edge*/
body.r50-home .pb-in{padding:0 20px!important}
body.r50-home .pb-h{font-size:40px!important}
body.r50-home .pb-in p{font-size:15px!important;margin-top:16px!important}
body.r50-home .pb-a{width:auto!important;margin-top:22px!important;gap:8px!important}
body.r50-home .pro-x .pill{flex:0 0 auto!important;height:48px!important;padding:0 16px!important}
body.r50-home .pb-look{display:flex!important;left:14px!important;top:14px!important;bottom:auto!important} /* top: the bottom corners hold two of the looks */
body.r50-home .pb-sws{position:absolute!important;inset:0!important;display:block!important;margin:0!important;overflow:visible!important}
body.r50-home .pb-sw{left:50%!important;top:calc(50% + (66px - var(--r50bh)) / 2)!important;position:absolute!important;width:60px!important;flex:none!important;pointer-events:auto;cursor:pointer}
body.r50-home .pb-sw img{border-radius:12px!important}
body.r50-home .pb-sw figcaption{display:none}
}

/* ================= closer + footer (every page with them), r50c =================
   Closer: the desktop's two side pictures become full-width strips, the Texas map above the words and the fence going
   up under the buttons, so each one is big enough to read and runs the same animation as the computer.
   Footer: a normal phone footer. Logo, contact in two short columns, the links in two columns, delivery in one line. */
@media (max-width:760px){
/* r50h closer on phones (Brandon 10/26 5:24 PM: "skip the animations for the mobile and put just the text and important stuff"):
   the headline and the two buttons, no map or fence art. The computer keeps its side columns. */
.fend{display:block!important}
.fend>.fe-side,.fend .fe-tiles{display:none!important}
.fend .fe-mid{padding:64px 22px 68px!important}
.fend .fe-h{font-size:clamp(40px,11.4vw,50px)!important}
.fend .fe-cta{flex-direction:column;align-items:stretch;width:100%;margin-top:30px!important}
.fend .fe-cta .pill{justify-content:center}

/* r50g footer (Brandon picked A 10/26): the computer footer, wrapped. Big logo and line, then the four open columns two by two
   with no lines between them, one hairline over the bottom row, Made in Laredo on the right. */
.fs-foot.fx{padding:48px 22px 22px!important}
.fs-foot.fx .fx-grid{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-areas:"brand brand" "visit talk" "site deliv";gap:40px 18px!important;padding-bottom:44px!important}
.fs-foot.fx .fx-brand{grid-area:brand;padding:18px 18px 0!important}
.fs-foot.fx .fx-logo{width:270px!important;height:63.9px!important}
.fs-foot.fx .fx-say{margin-top:26px!important;font-size:26px;max-width:15ch}
.fs-foot.fx .fx-col{padding:0;min-width:0}
.fs-foot.fx .fx-col:nth-child(2){grid-area:visit}
.fs-foot.fx .fx-col:nth-child(3){grid-area:talk}
.fs-foot.fx .fx-col:nth-child(4){grid-area:site}
.fs-foot.fx .fx-col:nth-child(5){grid-area:deliv}
.fs-foot.fx .ff-lab{margin-bottom:16px!important;font-size:11px}
.fs-foot.fx .fx-col p{font-size:14.5px;line-height:1.45;margin:0 0 10px}
.fs-foot.fx .ff-big{font-size:22px;margin-bottom:8px}
.fs-foot.fx .fx-col:nth-child(3) .ff-links a{font-size:14px;word-break:break-all;min-height:40px}
.fs-foot.fx .ff-links{grid-template-columns:1fr}
.fs-foot.fx .ff-links a,.fs-foot.fx .ff-links li{font-size:15px;min-height:40px;line-height:1.3}
.fs-foot.fx .ff-bot{flex-wrap:wrap;justify-content:space-between;gap:4px 18px!important;padding-top:16px!important;font-size:11px}
.fs-foot.fx .ff-bot a{min-height:40px!important}
.fs-foot.fx .ff-made{flex-basis:auto!important;margin-left:auto!important}
}

/* How it's made on a phone: about half the scroll it had, and a Skip to jump past it */
@media (max-width:760px){
body.r50-home #made{height:340vh!important;height:340svh!important}
.r50-skip{position:absolute;z-index:6;right:14px;top:calc(var(--hmnav,66px) + var(--sat,0px) + 50px);height:44px;padding:0 16px;border:0;border-radius:999px;
  background:rgba(18,18,17,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 11px/1 "FS Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:opacity .3s}
.r50-skip.off{opacity:0;pointer-events:none}
}

/* ================= /pros: the factory film first, full screen (A) ================= */
@media (max-width:760px){
body.r50-pros .px-hero{position:relative;display:block!important;height:calc(100svh - 64px)!important;min-height:600px;padding:0!important;margin:0!important;background:#121211}
body.r50-pros .px-film{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;border-radius:0!important;aspect-ratio:auto!important}
body.r50-pros .px-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,18,17,.55),rgba(18,18,17,0) 24%,rgba(18,18,17,.15) 48%,rgba(18,18,17,.9) 82%)}
body.r50-pros .px-film .px-tc,body.r50-pros .px-film .px-cap,body.r50-pros .px-film .px-load{display:none!important}
body.r50-pros .px-film .px-tag{top:78px!important;left:18px!important;bottom:auto!important;z-index:2;font-size:11px}
body.r50-pros .px-film .px-pp{z-index:3;right:18px!important;bottom:calc(var(--r50bh) + 24px)!important;top:auto!important;width:48px;height:48px}
body.r50-pros .px-say{position:absolute!important;left:18px!important;right:80px!important;top:auto!important;bottom:calc(var(--r50bh) + 24px)!important;z-index:2;color:#fff;padding:0!important;margin:0!important;max-width:none!important}
body.r50-pros .px-say p,body.r50-pros .px-say .pp-acts{display:none!important}
body.r50-pros .px-say h1{font-size:46px!important;line-height:.92!important;margin:8px 0 14px!important;color:#fff}
body.r50-pros .px-rail{display:flex!important;gap:6px;margin:0!important;padding:0!important}
body.r50-pros .px-rail li{flex:1;min-width:0}
body.r50-pros .px-rail button{width:100%;min-height:48px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0!important;background:none;border:0;color:#fff;text-align:left}
body.r50-pros .px-rail button span{display:none}
body.r50-pros .px-rail li.on button span{display:block;position:absolute;left:0;bottom:-6px;font:500 11px/1 "FS Mono",monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
body.r50-pros .px-rail li{position:relative}
body.r50-pros .px-rail b{font-size:11px!important;opacity:.75}
body.r50-pros .px-rail i{display:block!important;position:static!important;height:3px!important;width:100%!important;border-radius:2px;background:linear-gradient(90deg,#fff calc(var(--p,0)*100%),rgba(247,246,242,.32) 0)!important}
body.r50-pros .px-say .eyebrow{font-size:11px}
}

/* ================= /builder (r50d, Brandon picked A 10/26): the desktop rail on a phone =================
   Every step stacked in one scroll like the computer. The fence photo opens big, then shrinks to a strip under the nav
   and stays there while you pick; it leaves with the last step. Get price stays at the thumb. */
@media (max-width:760px){
body.r50-builder .tabs{display:none!important}
html.tabs-on body.r50-builder .pn{display:block!important;min-height:0!important}
body.r50-builder .next{display:none!important}
body.r50-builder .stage{position:fixed!important;left:0;right:0;top:calc(var(--nav) + var(--sat));z-index:6;height:var(--bxh,50svh)!important;will-change:height,transform}
body.r50-builder .rail{padding:0 20px!important;margin-top:var(--bx0,50svh)}
body.r50-builder .rh{display:none}
body.r50-builder .pn,body.r50-builder .pn:first-of-type{border-top:1px solid var(--line)!important;padding:26px 0!important;margin:0!important}
body.r50-builder .pn:first-of-type{border-top:0!important}
body.r50-builder .pn h2{font-size:26px}
body.r50-builder .pn:last-of-type{padding-bottom:40px!important}
body.r50-builder .cta-l b{-webkit-line-clamp:1!important}
body.r50-builder .cta-l small{white-space:normal!important;line-height:1.35;font-size:11px!important;letter-spacing:.08em!important}
body.r50-builder .bx{padding-bottom:12px}
body.r50-builder .ticks{height:40px!important}
body.r50-builder .ticks button{min-width:40px!important;height:40px;display:flex;align-items:center;justify-content:center}
body.r50-builder .ticks button::after{inset:-4px 0!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){body.r50-builder .stage{transition:none}}

/* ================= forms one group per screen (B, ref Careem / Beside) ================= */
@media (max-width:760px){
.r50-steps .fx-g{display:none}
.r50-steps .fx-g.r50-on{display:block}
.r50-steps .fx-go{display:none}
.r50-steps.r50-last .fx-go{display:inline-flex}
.r50-prog{display:flex;gap:4px;margin:0 0 14px}
.r50-prog i{flex:1;height:3px;border-radius:2px;background:var(--line,rgb(214,211,204))}
.r50-prog i.on{background:var(--ink,#121211)}
.r50-stepn{display:flex;gap:8px;position:sticky;bottom:0;z-index:5;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper,#F5F4F0);margin-top:8px}
.r50-stepn button,.r50-steps .fx-go{height:52px;border-radius:999px;font:500 11px/1 "FS Mono",monospace;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.r50-stepn .r50-back{flex:1;background:transparent;border:1px solid var(--ink,#121211);color:var(--ink,#121211)}
.r50-stepn .r50-next{flex:2;background:var(--ink,#121211);border:0;color:var(--white,#F7F6F2)}
.r50-stepn .r50-next i{font-style:normal;color:var(--green,#62A544);margin-left:8px}
.r50-steps.r50-last .r50-next{display:none}
.r50-steps.r50-first .r50-back{visibility:hidden;flex:0 0 0;padding:0;border:0}
.r50-steps.r50-last .fx-go{flex:2;justify-content:center}
.r50-steps .fx-go{order:2}
/* contact: the 3D fence stays on top, the form rises over it like a sheet */
body.r50-contact .ct-card .fx-l{padding-bottom:44px}
body.r50-contact .ct-card .fx-l .ct-logo{display:none}
body.r50-contact .ct-card .fx-3d{height:34svh!important;min-height:220px}
body.r50-contact .ct-card .fx-rw{position:relative;z-index:2;margin-top:-28px;border-radius:22px 22px 0 0;background:var(--paper,#F5F4F0);padding-top:12px}
body.r50-contact .ct-card .fx-rw::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line,rgb(214,211,204));margin:0 auto 14px}
}

/* ================= reduced motion: finished stills ================= */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
.r50-bar{transition:none}
body.r50-home .pb-imgs img{transition:none!important}
}