/* RB Maintenance, concept 3 — "Ready to Sell".
   The qualifier funnel direction. Ryan's own Facebook bio leads with "pre
   sale restorations", and Eltham is a market where what a buyer sees in the
   first ten seconds moves the number, so this whole direction is built round
   that one service rather than the full trade list.

   Palette is the third real thing in his brand kit: the near black #0B0F14
   and gold #F4C33A off his Instagram badge, cooled with a slate paper and a
   clean white, so it reads like a property report rather than a trade flyer.
   Loud face Space Grotesk, quiet face Inter. Layout language is deliberately
   the opposite of both other concepts: wide rules, tabular rows, generous
   white, almost no colour until it matters. */

:root{
  --ink:#14181C;
  --ink-2:#0F1317;
  --slate:#F4F6F7;
  --slate-2:#E9EDEF;
  --paper:#FFFFFF;
  --gold:#F4C33A;
  --gold-txt:#7A5D0C;
  --green:#2F6B4F;
  --muted:#5C6670;
  --muted-l:#8894A0;
  --line:#DDE3E6;
  --line-d:rgba(244,246,247,.16);
  --rad:8px;
  --f-loud:'Space Grotesk',system-ui,sans-serif;
  --f-quiet:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-quiet);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-loud);font-weight:700;line-height:1.06;margin:0;letter-spacing:-.025em}
p{margin:0}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}
section[id]{scroll-margin-top:96px}
@media(max-width:640px){section[id]{scroll-margin-top:84px}}

.reveal{opacity:0;transform:translateY(16px);filter:blur(5px);
  transition:opacity .7s cubic-bezier(.2,.9,.3,1),transform .7s cubic-bezier(.2,.9,.3,1),filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}
.noanim .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:90}

/* ---------------------------------------------------------- header */
.hd{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:12px clamp(16px,3vw,30px);background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line)}
.hd-logo{display:flex;flex-direction:column;justify-content:center;min-height:48px;text-decoration:none;gap:2px}
.hd-logo b{font-family:var(--f-loud);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.hd-logo span{font-size:10.6px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:11px 13px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;
  font-size:15px;font-weight:500;color:var(--muted);border-radius:var(--rad)}
.nav a:hover{color:var(--ink);background:var(--slate)}
.hd-cta{display:flex;gap:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;
  border-radius:var(--rad);text-decoration:none;cursor:pointer;border:1px solid transparent;
  font-family:var(--f-quiet);font-size:15.4px;font-weight:600;
  transition:transform .16s ease,background .16s ease,border-color .16s ease}
.btn-1{background:var(--ink);color:#fff}
.btn-1:hover{background:#000;transform:translateY(-1px)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-2:hover{border-color:var(--ink)}
.btn-g{background:var(--gold);color:#14181C}
.btn-g:hover{background:#FFD658}
.burger{display:none;width:48px;height:48px;background:transparent;border:1px solid var(--line);
  border-radius:var(--rad);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:0;z-index:59;background:#fff;padding:16px 22px 26px;display:none;
  flex-direction:column;gap:2px;border-bottom:1px solid var(--line);transform:translateY(-102%);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);max-height:100vh;overflow-y:auto}
.mnav.open{transform:none}
.mnav a{padding:14px 4px;min-height:52px;display:flex;align-items:center;text-decoration:none;
  font-size:17px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:14px}

/* ---------------------------------------------------------- hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,6vw,76px) 0 clamp(44px,6vw,68px);background:var(--slate);overflow:hidden}
.hero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 88% 12%,rgba(244,195,58,.2),transparent 68%),
             radial-gradient(46% 44% at 4% 92%,rgba(47,107,79,.11),transparent 70%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);
  gap:clamp(28px,4vw,52px);align-items:center}
.hero-copy{max-width:620px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.2px;font-weight:700;
  letter-spacing:.17em;color:var(--gold-txt);margin-bottom:18px;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-txt);border-radius:2px}
.hero h1{font-size:clamp(40px,5.8vw,70px);line-height:1.02}
.hero .lede{margin-top:22px;font-size:clamp(16.6px,1.5vw,19.4px);color:var(--muted);max-width:53ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-fig{min-height:470px;border-radius:var(--rad)}
@media(max-width:980px){.hero-fig{min-height:420px}}
.hero-fig.is-empty{display:none}

/* ---------------------------------------------------------- sections */
.sec{padding:clamp(68px,8.5vw,112px) 0}
.sec-slate{background:var(--slate)}
.sec-ink{background:var(--ink);color:#EDF1F3}
.sec-ink .eyebrow{color:var(--gold)}
.sec-ink .eyebrow::before{background:var(--gold)}
.shead{max-width:740px;margin-bottom:clamp(34px,5vw,52px)}
.shead h2{font-size:clamp(31px,4.2vw,52px)}
.shead p{margin-top:18px;font-size:17.2px;color:var(--muted);max-width:60ch}
.sec-ink .shead p{color:#A9B6C0}

/* the checklist rows */
.rows{border-top:1px solid var(--line)}
.sec-ink .rows{border-color:var(--line-d)}
.row{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.5fr);gap:8px 24px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.sec-ink .row{border-color:var(--line-d)}
.row .n{font-family:var(--f-loud);font-size:15px;font-weight:700;color:var(--gold-txt);letter-spacing:.04em;grid-row:1 / span 2}
.sec-ink .row .n{color:var(--gold)}
.row h3{font-size:clamp(20px,2.4vw,26px)}
.row p{font-size:16.2px;color:var(--muted)}
.sec-ink .row p{color:#A9B6C0}

/* stat band */
.band{background:var(--ink);color:#EDF1F3}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:32px 0}
.band b{display:block;font-family:var(--f-loud);font-size:clamp(21px,2.6vw,30px);color:var(--gold);line-height:1.05}
.band span{display:block;margin-top:6px;font-size:13.4px;color:#94A2AD}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);padding:28px 26px 30px;
  transition:border-color .2s ease,transform .2s ease}
.sec-slate .card{background:#fff}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:15.6px;color:var(--muted)}
.card .k{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--rad);
  background:var(--slate-2);margin-bottom:16px}
.card .k svg{width:19px;height:19px;color:var(--gold-txt)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal figure{margin:0;border-radius:var(--rad);overflow:hidden;background:var(--slate-2);position:relative;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;color:#fff;font-size:12.8px;
  font-weight:600;background:linear-gradient(to top,rgba(15,19,23,.88),transparent)}
.galnote{margin-top:20px;font-size:14.4px;color:var(--muted)}

/* honest */
.honest{background:var(--slate);border:1px solid var(--line);border-radius:var(--rad);padding:clamp(26px,4vw,42px)}
.honest h3{font-size:25px;margin-bottom:8px}
.honest .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px}
.honest h4{font-family:var(--f-quiet);font-weight:700;font-size:13px;letter-spacing:.13em;color:var(--gold-txt);margin-bottom:12px}
.honest ul{margin:0;padding-left:19px;display:grid;gap:8px}
.honest li{font-size:15.4px;color:var(--muted)}

/* faq */
.faq{display:grid;max-width:900px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-loud);font-size:clamp(18px,2.1vw,23px);min-height:52px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--gold-txt);border-bottom:2px solid var(--gold-txt);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 24px;font-size:16.4px;color:var(--muted);max-width:72ch}

/* contact */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(30px,5vw,58px);align-items:start}
.ct-list{display:grid;gap:12px;margin-top:26px}
.ct-list a,.ct-list div{display:flex;gap:13px;align-items:center;text-decoration:none;font-size:16.6px;
  color:#C6D0D8;min-height:46px}
.ct-list svg{width:19px;height:19px;color:var(--gold);flex:0 0 auto}
.form{background:#fff;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line)}
.form-hd{background:linear-gradient(180deg,rgba(244,195,58,.18),rgba(255,255,255,0));padding:18px 22px 14px;
  text-align:center;border-bottom:1px solid var(--line)}
.form-hd img{height:56px;width:auto;margin:0 auto}
.form-b{padding:24px 22px 26px;display:grid;gap:13px}
.form label{display:grid;gap:6px;font-size:13.4px;font-weight:600;color:#3C464F}
.form input,.form select,.form textarea{height:52px;padding:0 14px;font-family:var(--f-quiet);font-size:16px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--rad);width:100%}
.form textarea{height:110px;padding:13px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-txt);
  box-shadow:0 0 0 3px rgba(122,93,12,.15)}
.form .btn{width:100%}
.form-note{font-size:12.8px;color:var(--muted);margin-top:2px}
.ok{display:none;padding:16px;background:#EEF6F1;border:1px solid #BFDCCB;border-radius:var(--rad);
  font-size:15px;color:#1F4E36}
.ok[hidden]{display:none}
.ok[data-on]{display:block}

/* footer */
.ft{background:var(--ink-2);color:#C6D0D8;padding:clamp(50px,6vw,74px) 0 0}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:42px}
.ft-logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;margin-bottom:14px}
.ft-logo b{font-family:var(--f-loud);font-size:20px;color:#fff;letter-spacing:-.02em}
.ft-logo span{font-size:10.6px;font-weight:600;letter-spacing:.2em;color:#8894A0}
.ft h4{font-family:var(--f-quiet);font-weight:700;font-size:12.8px;letter-spacing:.15em;color:var(--gold);margin-bottom:14px}
.ft a{display:block;text-decoration:none;color:#9EAAB4;font-size:15.2px;padding:8px 0;min-height:40px}
.ft a:hover{color:#fff}
.ft p{color:#8894A0;font-size:15.2px}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;
  padding:20px 0 26px;border-top:1px solid var(--line-d)}
.ft-bot small{color:#79858F;font-size:13.4px}
.by{display:inline-flex;align-items:center;gap:.32em;text-decoration:none;color:#79858F;font-size:13.4px;
  min-height:44px;padding:6px 0}
.by b{color:var(--gold);font-weight:700}
.concept-line{color:#69747E;font-size:12.6px}

/* ---------------------------------------------------------- dock */
.dk{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center;padding:0 12px 12px;
  pointer-events:none;transform:translateY(150%);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.dk.in{transform:none}
.dk-in{position:relative;display:flex;align-items:center;gap:2px;padding:5px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 12px 34px rgba(20,24,28,.18);
  pointer-events:auto;max-width:100%}
.dk-i{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;
  padding:0 16px;border:0;background:transparent;cursor:pointer;font-family:var(--f-quiet);font-size:14px;
  font-weight:600;color:var(--muted);text-decoration:none;border-radius:var(--rad);white-space:nowrap;transition:color .18s ease}
.dk-i:hover,.dk-i.on{color:var(--ink)}
.dk-i:focus-visible{outline:2px solid var(--gold-txt);outline-offset:2px}
.dk-cta{background:var(--ink);color:#fff}
.dk-cta:hover,.dk-cta.on{background:#000;color:#fff}
.dk-pill{position:absolute;left:0;top:5px;height:46px;width:0;opacity:0;background:var(--slate-2);
  border-radius:var(--rad);z-index:0;transition:transform .3s cubic-bezier(.2,.9,.3,1),width .3s cubic-bezier(.2,.9,.3,1),opacity .2s ease}
.dk-dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.dk-chat{display:none}
body.has-dock{padding-bottom:86px}
html.rbc-open .dk{transform:translateY(150%)}

/* ---------------------------------------------------------- chat */
.rbc-fab{position:fixed;right:22px;bottom:22px;z-index:72;display:inline-flex;align-items:center;gap:9px;height:52px;
  padding:0 20px;background:var(--ink);color:#fff;border:0;border-radius:var(--rad);cursor:pointer;
  font-family:var(--f-quiet);font-size:15px;font-weight:600;box-shadow:0 14px 34px rgba(20,24,28,.28);
  transition:transform .18s ease}
.rbc-fab svg{width:19px;height:19px}
.rbc-fab:hover{transform:translateY(-2px)}
.rbc-fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rbc-fab.on span{display:none}
.rbc-fab.on{padding:0 16px}
.rbc{position:fixed;right:22px;bottom:86px;z-index:73;width:min(384px,calc(100vw - 32px));height:min(560px,72vh);
  display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);box-shadow:0 26px 60px rgba(20,24,28,.28)}
.rbc[hidden]{display:none}
.rbc-hd{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--ink);color:#fff}
.rbc-hd-b{display:grid;flex:1 1 auto;min-width:0}
.rbc-hd-b b{font-family:var(--f-loud);font-size:17px;font-weight:700;letter-spacing:-.02em}
.rbc-hd-b span{font-size:12.4px;color:#9EAAB4}
.rbc-x{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line-d);border-radius:var(--rad);color:#fff;cursor:pointer}
.rbc-x svg{width:15px;height:15px}
.rbc-x:hover{background:rgba(255,255,255,.1)}
.rbc-log{flex:1 1 auto;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start}
.rbc-m{max-width:86%;padding:11px 14px;border-radius:var(--rad);font-size:15px;line-height:1.5}
.rbc-bot{background:var(--slate);border:1px solid var(--line);color:var(--ink);justify-self:start}
.rbc-you{background:var(--ink);color:#fff;justify-self:end}
.rbc-dots{display:inline-flex;gap:4px;padding:3px 0}
.rbc-dots span{width:6px;height:6px;border-radius:50%;background:var(--muted-l);animation:rbcd 1.1s ease-in-out infinite}
.rbc-dots span:nth-child(2){animation-delay:.15s}
.rbc-dots span:nth-child(3){animation-delay:.3s}
@keyframes rbcd{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.rbc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 4px}
.rbc-chips:empty{display:none}
.rbc-chip{min-height:38px;padding:0 12px;background:transparent;cursor:pointer;border:1px solid var(--line);
  border-radius:var(--rad);color:var(--ink);font-family:var(--f-quiet);font-size:13.4px;font-weight:600}
.rbc-chip:hover{border-color:var(--ink)}
.rbc-f{display:flex;gap:8px;padding:12px 16px 0}
.rbc-f input{flex:1 1 auto;min-width:0;height:48px;padding:0 14px;font-family:var(--f-quiet);font-size:16px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--rad)}
.rbc-f input:focus{outline:none;border-color:var(--gold-txt);box-shadow:0 0 0 3px rgba(122,93,12,.14)}
.rbc-f button{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;background:var(--ink);
  color:#fff;border:0;border-radius:var(--rad);cursor:pointer}
.rbc-f button:hover{background:#000}
.rbc-f button svg{width:19px;height:19px}
.rbc-note{padding:9px 16px 14px;margin:0;font-size:12.4px;color:var(--muted)}

/* ---------------------------------------------------------- responsive */
@media(max-width:1100px){.grid3{grid-template-columns:repeat(2,1fr)}.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){
  .nav{display:none}
  .hd-cta .btn-1{display:none}
  .burger{display:flex}
  .mnav{display:flex}
  .hero .wrap{grid-template-columns:1fr}
  .ct{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .band .wrap{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:44px 1fr}
  .row p{grid-column:2}
}
@media(max-width:1023px){
  .rbc-fab{display:none}
  .dk-wide{display:none}
  .dk-chat{display:inline-flex}
  .dk-in{width:100%}
  .dk-i{flex:1 1 0;min-width:0;padding:0 8px;font-size:13.5px}
  .rbc{right:0;left:0;bottom:0;width:100%;height:min(78vh,600px);
    border-radius:var(--rad) var(--rad) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:640px){
  body{font-size:16.4px}
  .wrap{width:calc(100% - 34px)}
  .sec{padding:54px 0}
  .hero{padding:34px 0 38px}
  .hero h1{font-size:clamp(33px,9.6vw,46px)}
  .grid3,.gal{grid-template-columns:1fr}
  .band .wrap{grid-template-columns:1fr;gap:18px}
  .honest .cols{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .hero-acts .btn{width:100%}
}

/* hero photograph under a slate wash: this direction stays near white, so the
   image reads as texture rather than as a picture competing with the type */
.hero-bgim{position:absolute;inset:0;z-index:0}
.hero-bgim img{width:100%;height:100%;object-fit:cover}
.hero-bgim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(98deg,rgba(244,246,247,.98) 0%,rgba(244,246,247,.95) 44%,rgba(244,246,247,.74) 74%,rgba(244,246,247,.86) 100%)}

/* Phone header: the stacked wordmark and tagline plus the full number overran
   a 375px row and wrapped the call button onto two lines. */
.hd-call-i{display:none;width:19px;height:19px}
@media(max-width:640px){
  .hd{gap:10px;padding:10px 16px}
  /* nav carries margin-left:auto on desktop and is hidden here, so the
     buttons need their own push to stay against the right edge */
  .hd-cta{margin-left:auto}
  .hd-logo span{display:none}
  .hd-logo b{font-size:18px;white-space:nowrap}
  .hd-call{padding:0 14px;min-width:48px}
  .hd-call span{display:none}
  .hd-call-i{display:block}
}

/* contrast: the concept line sat at 3.91:1 on the ink footer */
.concept-line{color:#98A3AD}