/* RF Carpets & Flooring — copper, silver and charcoal from the logo */
:root{
  --bg:#f4f3f1; --surface:#ffffff; --ink:#1c1c1c; --muted:#62615e; --line:#dddbd7;
  --char:#1c1c1c; --char-ink:#f4f3f1;
  --copper:#a8561f; --copper-lt:#f0bb8a; --copper-soft:#f5e7da;
  --silver:#a5a8ab;
  --ok:#2f7a4f; --warn:#a4492f;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121212; --surface:#1c1c1c; --ink:#ecebe9; --muted:#a3a19d; --line:#2f2e2c;
  --char:#0a0a0a; --char-ink:#ecebe9;
  --copper:#e19a62; --copper-soft:#2b2119; --ok:#6cc792; --warn:#e98a6c; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);margin:0}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.1}
.label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
a{color:var(--copper)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}

/* header */
header.top{background:var(--char);color:var(--char-ink)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.25rem;color:inherit;text-decoration:none}
.brand img{width:44px;height:44px}
nav{display:flex;gap:20px;font-weight:500;font-size:.95rem;flex-wrap:wrap}
nav a{color:inherit;text-decoration:none;opacity:.85}
nav a:hover{opacity:1;color:var(--copper-lt)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--char);color:var(--char-ink);border-top:1px solid #2c2c2c}
.hero::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:min(44%,460px);
  background:url(gallery/kitchen-lvt.jpg) center 70%/cover;
  border-left:6px solid #b4692f;
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.hero::before{content:"";position:absolute;right:-40px;top:0;bottom:0;width:calc(min(44%,460px) + 10px);background:linear-gradient(180deg,#e7a874,#9c4d17);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.hero .wrap{position:relative;z-index:1;padding-block:60px 64px}
.hero-copy{max-width:540px;display:flex;flex-direction:column;gap:16px}
.hero h1{font-size:clamp(2.3rem,6.5vw,3.9rem);letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--copper-lt),#c0702f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;font-size:1.08rem;opacity:.85}
.hero .label{color:var(--silver)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer}
.btn-copper{background:linear-gradient(90deg,#e7a874,#b4692f);color:#1c1c1c}
.btn-copper:hover{filter:brightness(1.06)}
.btn-ghost{border:1px solid #555;color:var(--char-ink)}
.btn-ghost:hover{border-color:var(--copper-lt)}
@media (max-width:640px){.hero::after{width:100%;opacity:.22;clip-path:none;right:0}.hero::before{display:none}}

.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding-block:18px;font-weight:600;font-size:.95rem}
.trust span{display:flex;align-items:center;gap:8px}
.trust span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--copper);transform:rotate(45deg);flex:none}

section{padding-block:60px}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.5rem)}

/* services */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:820px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.services{grid-template-columns:1fr}}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.swatch{height:84px}
.sw-carpet{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 1.6px) 0 0/5px 5px,#5b5550}
.sw-lam{background:repeating-linear-gradient(90deg,#c79b63 0 64px,#b88a52 64px 66px,#cfa66f 66px 130px,#b88a52 130px 132px)}
.sw-lvt{background:repeating-linear-gradient(0deg,transparent 0 41px,rgba(0,0,0,.18) 41px 42px),repeating-linear-gradient(90deg,#8e8a80 0 41px,rgba(0,0,0,.18) 41px 42px),#9c978c}
.sw-vinyl{background:linear-gradient(135deg,#a5a8ab,#7d8184)}
.sw-wood{background:repeating-linear-gradient(45deg,#7a4f2c 0 22px,#8c5d36 22px 44px)}
.sw-survey{background:repeating-linear-gradient(90deg,var(--copper-soft) 0 9px,var(--copper) 9px 10px),var(--copper-soft)}
.svc-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.svc h3{font-size:1.3rem}
.svc p{margin:0;color:var(--muted);font-size:.93rem}
.svc .price{margin-top:auto;padding-top:8px;font-weight:600;font-variant-numeric:tabular-nums}
.hint{font-size:.85rem;color:var(--muted);margin:0}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gallery figcaption{padding:10px 12px;font-size:.9rem;color:var(--muted)}

/* booking */
.book-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.book-grid{grid-template-columns:1fr}}
form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:22px}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
legend{font-family:var(--display);font-size:1.3rem;padding:0;margin-bottom:12px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.88rem;font-weight:600}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
textarea{min-height:84px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.92rem;background:var(--bg)}
.chip input:checked+span{background:var(--char);border-color:var(--copper);color:var(--copper-lt)}
.chip input:focus-visible+span{outline:3px solid var(--copper);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{width:auto;margin-top:4px}
.err{color:var(--warn);font-size:.9rem;margin:0}
.hidden-field{position:absolute;left:-9999px}
.submit{align-self:flex-start}
.submit:disabled{opacity:.6;cursor:wait}

.ticket{background:var(--char);color:var(--char-ink);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
.ticket .label{color:var(--silver)}
.ticket h3{font-size:1.4rem;color:var(--copper-lt)}
.ticket dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.93rem}
.ticket dt{color:var(--silver)}
.ticket dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.ticket .est{border-top:1px dashed #555;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ticket .est strong{font-family:var(--display);font-size:1.7rem;font-weight:400;font-variant-numeric:tabular-nums}
.ticket .hint{color:#b5b3ae}

/* contact + footer */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.contact div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:4px}
.contact strong{font-size:1.05rem;overflow-wrap:anywhere}
footer{background:var(--char);color:#b5b3ae;padding-block:28px;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
footer a{color:var(--copper-lt)}

/* simple pages */
.page{padding-block:56px;max-width:720px}
.page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:16px}
.page h2{font-size:1.4rem;margin:28px 0 8px}
.page p,.page li{color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;margin-top:20px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.callout{margin-top:16px;background:var(--char);color:var(--char-ink);border-radius:var(--r);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.callout div{max-width:620px;min-width:0}
.callout h3{font-size:1.4rem;color:var(--copper-lt);margin-bottom:6px}
.callout p{margin:0;color:#c9c7c2;font-size:.95rem}

/* before / after */
.ba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center}
@media (max-width:820px){.ba-grid{grid-template-columns:1fr}}
.ba-copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ba-copy h2{font-size:clamp(1.8rem,4vw,2.5rem)}
.ba-copy p{margin:0;color:var(--muted);max-width:46ch}
.ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;max-width:100%;background:var(--char);user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:linear-gradient(180deg,#f0bb8a,#b4692f);pointer-events:none}
.ba-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#1c1c1c;color:#f0bb8a;border:2px solid #e7a874;display:grid;place-items:center;font-weight:700;letter-spacing:2px;font-size:1rem}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0}
.ba-range:focus-visible~.ba-handle::after{outline:3px solid #f0bb8a;outline-offset:2px}
.ba-tag{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:rgba(20,20,20,.75);color:#f4f3f1;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ba-tag-l{left:12px}.ba-tag-r{right:12px}
.sec-head-row{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec-head-row>div{display:flex;flex-direction:column;gap:6px}
.more{font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}

/* full gallery page */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-weight:500}
.filters button[aria-pressed="true"]{background:var(--char);color:var(--copper-lt);border-color:var(--copper)}
.masonry{columns:3 280px;column-gap:12px}
.masonry figure{break-inside:avoid;margin:0 0 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.masonry button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.masonry img{width:100%;height:auto}
.masonry figcaption{padding:10px 12px;font-size:.9rem;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.masonry .tag{font-size:.75rem;font-weight:600;color:var(--copper);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-width:100%;max-height:82vh;border-radius:8px;object-fit:contain}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;color:#ecebe9}
.lb-btn{position:absolute;background:#1c1c1c;color:#f0bb8a;border:1px solid #555;border-radius:999px;width:44px;height:44px;font-size:1.2rem;cursor:pointer}
.lb-close{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lb-prev{left:max(12px,env(safe-area-inset-left,0px));top:50%}
.lb-next{right:max(12px,env(safe-area-inset-right,0px));top:50%}

/* job story: strip-out to finish (4 prep steps in a 2x2 grid, finished floor large on the right) */
.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto;gap:12px}
.job-final{grid-column:3;grid-row:1 / span 2}
@media (max-width:820px){.job{grid-template-columns:repeat(2,minmax(0,1fr))}.job-final{grid-column:1 / -1;grid-row:auto}}
.job-step{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--char);min-height:0}
.job-step img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.job-final img{aspect-ratio:auto;position:absolute;inset:0}
@media (max-width:820px){.job-final img{position:static;aspect-ratio:4/5}}
.job-step figcaption{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:rgba(20,20,20,.84);color:#f4f3f1;font-size:.82rem;font-weight:600;max-width:calc(100% - 20px)}
.job-step .step{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(90deg,#e7a874,#b4692f);color:#1c1c1c;font-size:.75rem;font-weight:700;flex:none}
@media (max-width:480px){.job-step figcaption{font-size:.72rem;padding:5px 10px 5px 6px;gap:6px;left:8px;bottom:8px}.job-step .step{width:18px;height:18px;font-size:.66rem}}

/* social links */
.foot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.social{display:inline-flex;gap:10px}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #444;color:#f0bb8a}
.social a:hover{border-color:#f0bb8a;background:rgba(240,187,138,.1)}
.social svg{width:18px;height:18px}
.follow{margin-top:16px;background:var(--char);color:var(--char-ink);border-radius:var(--r);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.follow .label{color:var(--silver)}
.follow p{margin:4px 0 0;color:#c9c7c2;font-size:.95rem}
.follow-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-social{background:transparent;border:1px solid #555;color:var(--char-ink);padding:10px 18px}
.btn-social:hover{border-color:var(--copper-lt);color:var(--copper-lt)}
.btn-social svg{width:18px;height:18px}
.more-row{display:flex;gap:18px;flex-wrap:wrap}
