/* 8 Pollen View — shared site styles
   Palette + type sampled from the developer's Pollen Collection E-Brochure
   (sage green / warm gold-tan / cream / taupe, Playfair Display headlines,
   tracked small-caps labels, arch-shaped image frames). */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sage:#4c5f56;
  --sage-deep:#333f38;
  --sage-pale:#7c9186;
  --gold:#a9855f;
  --gold-lt:#d8bd98;
  --gold-pale:#f1e6d5;
  --cream:#f8f5ee;
  --cream-2:#f2ede2;
  --taupe:#ded7c8;
  --taupe-2:#c9c0ac;
  --ink:#2a2f29;
  --line:#e2dbc9;
  --muted:#716b5c;
  --card:#ffffff;
  --teal:#4a7f8c;
  --teal-lt:#a9cdd4;
  --radius:4px;
  --radius-lg:6px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw: 1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.narrow{max-width:760px;}

/* ---------- Top nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(248,245,238,0.97);
  border-bottom:1px solid var(--line);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);}
.brand svg{width:30px;height:30px;}
.brand .name{font-family:var(--serif); font-weight:600; font-size:1.1rem; letter-spacing:.01em;}
nav.links{display:flex; gap:2px; flex-wrap:wrap; align-items:center;}
nav.links a{font-size:0.78rem; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--muted); font-weight:600; padding:8px 13px; border-radius:3px; transition:color .15s, background .15s;}
nav.links a:hover{color:var(--sage);}
nav.links a.active{color:var(--sage); background:var(--gold-pale);}
.navtoggle{display:none;}

@media (max-width:980px){
  nav.links{position:fixed; inset:58px 0 0 0; background:var(--cream); flex-direction:column; align-items:stretch; padding:20px; gap:2px;
    transform:translateY(-110%); transition:transform .25s ease; border-top:1px solid var(--line); z-index:40; overflow-y:auto;}
  nav.links.open{transform:translateY(0);}
  nav.links a{font-size:1rem; padding:14px 10px; border-bottom:1px solid var(--line);}
  .navtoggle{display:block; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--sage);}
}

/* ---------- Page hero (arch-framed image, brochure motif) ---------- */
.pagehero{background:linear-gradient(180deg, var(--sage) 0%, var(--sage-deep) 100%); color:var(--cream); padding:56px 0 0; overflow:hidden;}
.pagehero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:end;}
.pagehero-text{padding-bottom:56px;}
.pagehero .eyebrow{color:var(--gold-lt);}
.pagehero h1{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.2vw,3.1rem); margin:14px 0 12px; line-height:1.08;}
.pagehero p.sub{font-size:1.02rem; color:#d9ddd6; max-width:520px; line-height:1.6; margin:0;}
.archframe{position:relative; width:100%; max-width:360px; margin:0 auto;}
.archframe .archimg{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:50% 50% 6px 6px / 32% 32% 6px 6px; box-shadow:0 20px 60px rgba(0,0,0,0.35);}
.archcap{text-align:center; font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase; color:#aeb8ac; margin-top:10px;}

.pagehero.compact{padding:38px 0 34px;}
.pagehero.compact .wrap{grid-template-columns:1fr; align-items:start;}
.pagehero.compact .pagehero-text{padding-bottom:0;}
.pagehero.compact h1{font-size:clamp(1.8rem,3.4vw,2.5rem);}

.eyebrow{font-size:0.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700;}

/* home hero specific */
.homehero{background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 75%); color:var(--cream); position:relative; overflow:hidden;}
.homehero .wrap{position:relative; z-index:2; padding:88px 0 72px; text-align:center;}
.homehero .word{font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.15rem; color:var(--gold-lt); margin-bottom:6px;}
.homehero h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,6vw,4.4rem); margin:6px 0 18px; line-height:1.03;}
.homehero p.sub{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:#dfe3da; max-width:600px; margin:0 auto 30px; line-height:1.5;}
.homehero .meta{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; font-size:0.86rem; color:#b9c4bb; letter-spacing:.03em; text-transform:uppercase; margin-bottom:8px;}
.homehero .meta strong{color:var(--cream); font-weight:600;}
.homehero-arch{margin:36px auto 0; max-width:520px;}
.homehero-arch img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:40% 40% 6px 6px / 22% 22% 6px 6px; box-shadow:0 24px 70px rgba(0,0,0,0.4);}

/* ---------- Quicklink cards (home) ---------- */
.quickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.qcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; gap:10px;}
.qcard:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(42,47,41,0.1);}
.qcard .qi{font-size:1.6rem;}
.qcard h3{font-family:var(--serif); font-weight:600; font-size:1.15rem; margin:0;}
.qcard p{margin:0; font-size:0.86rem; color:var(--muted); line-height:1.55;}
.qcard .qarrow{margin-top:auto; font-size:0.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--gold);}

/* ---------- Sections ---------- */
section{padding:64px 0;}
section.alt{background:var(--cream-2);}
section.deep{background:var(--sage); color:var(--cream);}
section.deep .eyebrow{color:var(--gold-lt);}
section.deep .sechead h2{color:var(--cream);}
section.deep .sechead p{color:#d3d8cd;}
.sechead{max-width:680px; margin-bottom:36px;}
.sechead .eyebrow{color:var(--gold);}
.sechead h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem); margin:10px 0 12px;}
.sechead p{color:var(--muted); line-height:1.65; margin:0; font-size:1rem;}
.sechead.center{margin-left:auto; margin-right:auto; text-align:center;}

/* breather / pull-quote block */
.breather{padding:60px 0; text-align:center; background:var(--taupe);}
.breather blockquote{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--sage-deep); max-width:780px; margin:0 auto; line-height:1.45;}

/* ---------- Overview / fact grid ---------- */
.factgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:8px;}
.fact{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 22px;}
.fact .n{font-family:var(--serif); font-weight:600; font-size:1.8rem; color:var(--sage);}
.fact .l{font-size:0.82rem; color:var(--muted); margin-top:4px; line-height:1.4;}

.noticebox{background:var(--gold-pale); border:1px solid var(--gold-lt); border-radius:var(--radius-lg); padding:18px 22px; margin-top:24px; font-size:0.92rem; line-height:1.65;}
.noticebox strong{color:#8a6416;}

/* ---------- Rich accordion (devices / house care / plans) ---------- */
.devgroup{margin-bottom:34px;}
.devgroup:last-child{margin-bottom:0;}
.devgroup-title{font-family:var(--serif); font-weight:600; font-size:1.25rem; color:var(--sage); margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--gold); display:inline-block;}
.daccwrap{display:flex; flex-direction:column; gap:12px;}
.dacc{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--card);}
.dacc summary{cursor:pointer; list-style:none; padding:17px 22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.dacc summary::-webkit-details-marker{display:none;}
.dacc-title{font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink);}
.dacc .brand-tag{font-size:0.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700; background:var(--gold-pale); padding:3px 9px; border-radius:20px;}
.dacc summary .plus{margin-left:auto; font-size:1.4rem; color:var(--gold); transition:transform .2s; flex:none;}
.dacc[open] summary .plus{transform:rotate(45deg);}
.dacc-body{padding:2px 24px 28px; border-top:1px solid var(--line);}
.dacc-body .lede{font-family:var(--serif); font-size:1.08rem; color:var(--sage-deep); margin:18px 0 18px; line-height:1.55;}

.dacc-body p, .modal-body p, .tabpanel p{margin:0 0 12px; line-height:1.65; font-size:0.94rem; color:#3a382f;}
.dacc-body ul, .dacc-body ol, .modal-body ul, .modal-body ol, .tabpanel ul, .tabpanel ol{margin:0 0 6px; padding-left:22px; line-height:1.6; font-size:0.94rem; color:#3a382f;}
.dacc-body li, .modal-body li, .tabpanel li{margin-bottom:7px;}
.dacc-body strong, .modal-body strong, .tabpanel strong{color:var(--sage);}
.dacc-body a, .modal-body a, .tabpanel a{color:var(--sage); font-weight:600;}
.subhead{font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--sage); margin:22px 0 10px; padding-top:16px; border-top:1px dashed var(--line);}
.steps:first-of-type .subhead, .dacc-body>.steps:first-child .subhead{border-top:none; padding-top:0; margin-top:6px;}
.steps em, .steps i, .tabpanel em, .tabpanel i{font-style:normal; display:block; font-weight:700; color:var(--gold); background:var(--gold-pale); padding:5px 10px; border-radius:20px; margin:16px 0 8px; font-size:0.78rem; text-transform:uppercase; letter-spacing:.05em; width:fit-content;}
.steps li::marker, .tabpanel .steps li::marker{color:var(--gold); font-weight:800;}

/* ---------- Arch card grid + tabbed modal (Devices / House Care / Plans / Renovation) ---------- */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:20px 16px;}
.archcard{cursor:pointer; text-align:left; background:none; border:none; padding:0; font:inherit; color:inherit; display:block; width:100%; max-width:200px;}
.archcard .arch-thumb{aspect-ratio:4/5; border-radius:50% 50% 8px 8px / 34% 34% 8px 8px; overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow, 0 1px 2px rgba(42,47,41,.08)); transition:.2s; background:var(--cream-2); padding:14%; }
.archcard .arch-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.archcard:hover .arch-thumb{transform:translateY(-3px); box-shadow:0 16px 34px rgba(42,47,41,.16);}
.archcard .arch-eyebrow{font-size:0.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px;}
.archcard h3{font-family:var(--serif); font-weight:600; font-style:italic; font-size:1.1rem; margin:0 0 3px; line-height:1.25; color:var(--ink);}
.archcard .arch-tag{font-size:0.8rem; color:var(--muted);}
.archcard:focus-visible .arch-thumb{outline:2px solid var(--gold); outline-offset:3px;}

.pv-backdrop{position:fixed; inset:0; background:rgba(24,30,26,.55); backdrop-filter:blur(2px); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s;}
.pv-backdrop.show{opacity:1; pointer-events:auto;}
.pv-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(680px,92vw); max-height:86vh; background:var(--card); border-radius:16px; box-shadow:0 24px 70px rgba(20,26,20,.35); z-index:201; opacity:0; pointer-events:none; transition:.22s; display:flex; flex-direction:column; overflow:hidden;}
.pv-modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
.pv-modal-head{padding:22px 26px 0; display:flex; gap:16px; align-items:flex-start;}
.pv-modal-thumb{width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 4px 14px rgba(42,47,41,.18);}
.pv-modal-thumb img{width:100%; height:100%; object-fit:cover;}
.pv-modal-htext{flex:1; padding-top:2px;}
.pv-modal-htext h2{font-family:var(--serif); font-weight:600; font-size:1.35rem; margin:0 0 3px;}
.pv-modal-htext .arch-tag{font-size:0.82rem; color:var(--muted);}
.pv-modal-close{background:none; border:none; font-size:1.5rem; color:var(--muted); cursor:pointer; line-height:1; padding:4px; margin-top:-4px;}
.pv-modal-close:hover{color:var(--ink);}
.pv-tabbar{display:flex; gap:2px; padding:16px 26px 0; border-bottom:1px solid var(--line); overflow-x:auto; margin-top:14px;}
.pv-tabbtn{background:none; border:none; padding:10px 6px; margin-right:20px; font-size:0.86rem; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--sans);}
.pv-tabbtn:hover{color:var(--sage);}
.pv-tabbtn.active{color:var(--sage); border-bottom-color:var(--gold);}
.pv-modal-body{padding:20px 26px 28px; overflow-y:auto;}
.tabpanel{display:none;}
.tabpanel.active{display:block; animation:pvfade .18s ease;}
@keyframes pvfade{from{opacity:0;} to{opacity:1;}}

@media (max-width:640px){
  .pv-modal{width:94vw; max-height:88vh;}
  .pv-modal-head{padding:20px 20px 0;}
  .pv-tabbar{padding:14px 20px 0;}
  .pv-modal-body{padding:16px 20px 22px;}
}

.factchips{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:0;}
.factchips li{background:var(--cream-2); border-radius:var(--radius); padding:9px 13px; margin-bottom:8px; font-size:0.87rem; line-height:1.5; color:#3a382f;}

.do-box, .dont-box, .warn-box{border-radius:var(--radius-lg); padding:16px 20px; margin:16px 0;}
.do-box{background:#eef4ef; border:1px solid #bcd6c1;}
.dont-box{background:#f8ece7; border:1px solid #e3bfae;}
.warn-box{background:var(--gold-pale); border:1px solid var(--gold-lt);}
.box-head{font-weight:800; margin-bottom:8px; font-size:0.92rem;}
.do-box .box-head{color:#2c6b41;}
.dont-box .box-head{color:#a3532c;}
.warn-box .box-head{color:#8a6416;}
.do-box ul, .dont-box ul, .warn-box ul{margin-bottom:0;}
.do-box li::marker{color:#2c6b41;} .dont-box li::marker{color:#a3532c;} .warn-box li::marker{color:#8a6416;}

.trouble, .notes, .maint{margin:6px 0;}
.contactline{margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); font-size:0.87rem; color:var(--muted);}
.contactline strong{color:var(--sage);}
.contactline p{display:inline; margin:0;}

/* ---------- Manual page image galleries + lightbox ---------- */
.mgallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0 20px;}
.mgallery-single{grid-template-columns:minmax(200px,420px);}
.mfig{margin:0; cursor:zoom-in; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.mfig img{width:100%; height:150px; object-fit:cover; object-position:top; display:block; transition:opacity .15s;}
.mgallery-single .mfig img{height:auto; object-fit:contain; max-height:420px;}
.mfig:hover img{opacity:0.85;}
.mfig figcaption{font-size:0.74rem; color:var(--muted); padding:8px 10px; line-height:1.4;}

.lightbox{position:fixed; inset:0; background:rgba(24,30,26,0.94); z-index:300; display:none; align-items:center; justify-content:center; padding:30px; flex-direction:column;}
.lightbox.show{display:flex;}
.lightbox img{max-width:100%; max-height:80vh; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,0.5);}
.lightbox figcaption{color:#d3d8cd; font-size:0.88rem; margin-top:14px; max-width:800px; text-align:center;}
.lightbox-close{position:absolute; top:20px; right:24px; color:var(--cream); font-size:2rem; background:none; border:none; cursor:pointer; line-height:1;}

/* ---------- Calendar table ---------- */
table.cal{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);}
table.cal th, table.cal td{padding:13px 16px; text-align:left; font-size:0.87rem; border-bottom:1px solid var(--line);}
table.cal th{background:var(--sage); color:var(--cream); font-weight:600; font-size:0.76rem; text-transform:uppercase; letter-spacing:.05em;}
table.cal tr:last-child td{border-bottom:none;}
table.cal tr:hover td{background:var(--cream-2);}
.freq{display:inline-block; background:var(--gold-pale); color:#8a6416; font-weight:700; font-size:0.76rem; padding:3px 9px; border-radius:20px;}

/* ---------- Documents ---------- */
.doccat{margin-bottom:30px;}
.doccat h3{font-family:var(--serif); font-weight:600; font-size:1.15rem; margin:0 0 12px; color:var(--sage); border-bottom:2px solid var(--gold); display:inline-block; padding-bottom:4px;}
.doclist{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px;}
.docitem{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; text-decoration:none; color:var(--ink); font-size:0.87rem; transition:border-color .15s, box-shadow .15s;}
.docitem:hover{border-color:var(--gold); box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.docitem .ic{width:30px; height:30px; flex:none; border-radius:6px; background:var(--sage); color:var(--gold-lt); display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:800;}
.docitem .t{line-height:1.3;}

/* ---------- Contacts ---------- */
.contactgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;}
.ccard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px;}
.ccard h4{margin:0 0 4px; font-size:0.98rem; font-family:var(--serif); font-weight:600;}
.ccard .role{font-size:0.78rem; color:var(--muted); margin-bottom:8px;}
.ccard a.tel, .ccard a.mail{display:block; font-size:0.86rem; color:var(--sage); text-decoration:none; font-weight:600; margin-top:2px;}
.ccard a.tel:hover, .ccard a.mail:hover{text-decoration:underline;}
.ccard.emph{border-color:var(--gold); background:#fffdf6;}

/* ---------- Renovation ---------- */
.statusbar{display:flex; align-items:center; gap:12px; background:var(--sage); color:var(--cream); border-radius:var(--radius-lg); padding:18px 22px; margin-bottom:28px;}
.statusdot{width:12px; height:12px; border-radius:50%; background:#c9c9c9; box-shadow:0 0 0 4px rgba(255,255,255,0.08);}
.statusbar .stxt strong{font-family:var(--serif); font-weight:600; font-size:1.1rem; display:block;}
.statusbar .stxt span{font-size:0.82rem; color:#b9c4bb;}

.timeline{display:flex; gap:0; margin:28px 0 40px; flex-wrap:wrap;}
.tlstep{flex:1; min-width:130px; text-align:center; position:relative; padding-top:8px;}
.tlstep .dot{width:16px; height:16px; border-radius:50%; background:var(--card); border:3px solid var(--line); margin:0 auto 10px;}
.tlstep.active .dot{border-color:var(--gold); background:var(--gold);}
.tlstep .lbl{font-size:0.82rem; font-weight:700; color:var(--muted);}
.tlstep.active .lbl{color:var(--sage);}
.tlstep::before{content:""; position:absolute; top:16px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1;}
.tlstep:first-child::before{display:none;}

table.quotes{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
table.quotes th, table.quotes td{padding:14px 16px; text-align:left; font-size:0.87rem; border-bottom:1px solid var(--line); vertical-align:top;}
table.quotes th{background:var(--cream-2); font-size:0.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
table.quotes tr:last-child td{border-bottom:none;}
table.quotes .empty td{text-align:center; color:var(--muted); padding:34px 16px; font-style:italic;}

/* ---------- Two-column quote comparison (NC vs Sin Siang) ---------- */
.cmpgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
.cmpcol{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.cmpcol-head{display:flex; justify-content:space-between; align-items:baseline; padding:12px 16px; background:var(--cream-2); border-bottom:1px solid var(--line); font-family:var(--serif); font-weight:600;}
.cmpcol-head span{font-size:0.82rem; color:var(--muted); font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.cmpcol-head strong{font-size:1.05rem; color:var(--sage);}
.cmpcol table.cal{border:none; border-radius:0;}
.cmpcol table.cal td{font-size:0.84rem; padding:10px 16px;}
.cmpcol > p{padding:16px;}
@media (max-width:820px){
  .cmpgrid{grid-template-columns:1fr;}
}
.qstatus{display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:20px;}
.qstatus.pending{background:var(--gold-pale); color:#8a6416;}
.qstatus.accepted{background:#eef4ef; color:#2c6b41;}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:18px;}
.gtile{aspect-ratio:4/3; border:1.5px dashed var(--taupe-2); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:0.78rem; text-align:center; padding:10px; background:var(--cream-2);}

/* renovation room concept cards */
.roomgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.roomcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.roomcard .rc-head{padding:18px 20px 14px;}
.roomcard h3{font-family:var(--serif); font-weight:600; font-size:1.1rem; margin:0 0 3px;}
.roomcard .rc-meta{font-size:0.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700;}
.roomcard .rc-body{padding:0 20px 20px;}
.roomcard p{font-size:0.88rem; line-height:1.6; color:#3a382f; margin:0 0 12px;}

/* ---------- Footer ---------- */
footer{background:var(--sage-deep); color:#a9b3a5; padding:38px 0; font-size:0.82rem;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer a{color:var(--gold-lt); text-decoration:none;}

.backtop{position:fixed; right:20px; bottom:20px; background:var(--sage); color:var(--gold-lt); border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,0.25); font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity .2s;}
.backtop.show{opacity:1; pointer-events:auto;}

@media (max-width:820px){
  .pagehero .wrap{grid-template-columns:1fr;}
  .archframe{max-width:280px;}
}