/* 404-r1.css: 404 "page not found" mockup r1. Loaded ONLY by 404/index.html, last in the same CSS
   stack as the service pages. Every rule is scoped to rd-body.page-404, so no other page can change.
   Lives at the project root, so texture urls are url('../textures/...').

   A 404 is a small page: one pasteup hero (lost Rocky + the live message + the two live buttons),
   then a short "pick a page" strip of the key service pages on ivory fibre cards with dark text.
   Client rulings applied: no ruled lines on paper, no numbers on tool-style cards. */

/* ---------- Hero: ivory fibre desk, Rocky sticker beside the message ---------- */
rd-body.page-404 #lost{display:flex;align-items:center;background:#f6f1e4 url('../textures/ivory-fibre.webp') repeat;padding:72px 0;min-height:calc(100vh - 320px);overflow:hidden}
rd-body.page-404 .lost-layout{display:flex;flex-direction:column;align-items:center;gap:34px;max-width:720px;margin:0 auto;text-align:center}

/* Rocky: the live 404 raccoon, cut out as a sticker and taped to a torn scrap of kraft paper */
rd-body.page-404 .lost-art{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:26px 10px 8px}
rd-body.page-404 .lost-art::before{content:'';position:absolute;inset:8% 4% 12%;z-index:-1;background:url('../textures/kraft-paper.webp') center/100% 100% no-repeat;opacity:.9;transform:rotate(-4deg)}
rd-body.page-404 .lost-sticker{width:250px;max-width:100%;margin:0;transform:rotate(-3deg)}
rd-body.page-404 .lost-sticker img{display:block;width:100%;height:auto!important;aspect-ratio:auto!important;filter:drop-shadow(5px 0 0 #fffdf6) drop-shadow(-5px 0 0 #fffdf6) drop-shadow(0 5px 0 #fffdf6) drop-shadow(0 -5px 0 #fffdf6) drop-shadow(0 6px 10px #172a3a33)}
rd-body.page-404 .lost-sticker.taped::after{top:-6%;left:34%;width:34%;height:15%}
rd-body.page-404 .lost-note{position:relative;margin:14px 0 0!important;font-size:25px;line-height:1.25;color:#235b92;transform:rotate(-2deg);text-align:center}

/* Message: big hand-cut 404 stamp, the live heading and copy */
rd-body.page-404 .lost-copy{position:relative;display:flex;flex-direction:column;align-items:center}
rd-body.page-404 .lost-code{display:inline-block;position:relative;isolation:isolate;margin:0 0 6px;padding:2px 26px 0 18px;font-size:112px;line-height:1;font-weight:800;letter-spacing:-.06em;color:#19324a;transform:rotate(-2deg)}
rd-body.page-404 .lost-code::before{content:'';position:absolute;inset:14% 0 6% -2%;z-index:-1;background:#e6d07f;clip-path:polygon(0 9%,97% 0,100% 88%,3% 100%)}
rd-body.page-404 .lost-copy h1{margin:16px 0 0;font-size:44px;line-height:1.12;letter-spacing:-.045em}
rd-body.page-404 .lost-copy .lost-lead{margin:18px auto 0!important;max-width:520px;font-size:19px;line-height:1.6;color:#304b5d}
rd-body.page-404 .lost-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;margin-top:30px}
rd-body.page-404 .lost-ctas .paper-cta{margin:0;min-width:180px}
rd-body.page-404 .lost-ctas .cta-blueprint{color:#193e61!important}

/* ---------- Pick a page: key service pages on ivory fibre cards ---------- */
rd-body.page-404 .lost-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin:38px auto 0;max-width:1020px}
rd-body.page-404 .lost-more .specials-label{font-size:24px;color:#235b92;margin:0!important;transform:rotate(-1.5deg)}

/* ---------- Tablet and mobile ---------- */
@media(max-width:1100px){}
@media(max-width:900px){
 rd-body.page-404 .lost-layout{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px}
 rd-body.page-404 .lost-code{font-size:92px}
 rd-body.page-404 .lost-copy h1{font-size:38px}
}
@media(max-width:767px){
 rd-body.page-404 #lost{padding:40px 0 52px}
 rd-body.page-404 .lost-layout{display:flex;flex-direction:column-reverse;gap:22px;text-align:center}
 rd-body.page-404 .lost-art{padding:22px 6px 4px;width:100%;max-width:290px}
 rd-body.page-404 .lost-sticker{width:220px}
 rd-body.page-404 .lost-note{font-size:22px}
 rd-body.page-404 .lost-code{font-size:84px;padding:2px 18px 0 12px}
 rd-body.page-404 .lost-copy h1{font-size:34px;margin-top:12px}
 rd-body.page-404 .lost-copy .lost-lead{font-size:17px;margin-left:auto!important;margin-right:auto!important;max-width:340px}
 rd-body.page-404 .lost-ctas{flex-direction:column;align-items:stretch;max-width:300px;margin:26px auto 0}
 rd-body.page-404 .lost-ctas .paper-cta{width:100%}
       rd-body.page-404 .lost-more{gap:10px}
}
@media(prefers-reduced-motion:reduce){}