/* Concrete Co service pages. Shares the tokens and furniture of the main site. */
:root{
  --paper:#d4d3ce;
  --ink:#131211;
  --stone:#5f5a52;
  --hairline:#bfbeb8;
  --brass:#a97b4f;
  --pad:clamp(24px,5vw,88px);
  --navclear:clamp(100px,9.5vw,142px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper) url('speckle.png') repeat;
  background-size:280px 280px;
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
.caps{text-transform:uppercase;letter-spacing:.28em;font-size:10px;font-weight:500}

/* nav */
nav{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px var(--pad);
  background:rgba(5,5,5,.96);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(250,249,246,.12);
  color:#fff;
}
nav .brand img{display:block;height:54px;width:auto}
nav ul{display:flex;gap:38px;list-style:none}
nav ul a{position:relative;padding:2px 0;color:rgba(255,255,255,.9)}
nav ul a:hover{color:#fff}
@media(max-width:720px){
  nav{gap:14px;padding:12px var(--pad)}
  nav .brand img{height:auto;width:min(34vw,138px)}
  nav ul{gap:13px;flex:0 0 auto}
  nav ul.caps{font-size:8.5px;letter-spacing:.08em;white-space:nowrap}
}

/* page head */
.page-head{
  background:var(--ink);color:var(--paper);
  padding:calc(var(--navclear) + 40px) var(--pad) clamp(50px,7vh,88px);
}
.page-head .inner{max-width:1360px;margin:0 auto}
.crumb{color:rgba(212,211,206,.5);margin-bottom:22px}
.crumb a:hover{color:var(--brass)}
.page-head h1{
  text-wrap:balance;
  font-weight:300;line-height:1.1;letter-spacing:.01em;
  font-size:clamp(30px,5vw,64px);max-width:16em;
}
.page-head .lede{
  text-wrap:balance;
  margin-top:22px;max-width:34em;
  font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:rgba(212,211,206,.72);
}
.page-head .brass-rule{width:64px;height:2px;background:var(--brass);margin-top:32px}

/* body */
.page-body{padding:clamp(50px,7vh,90px) var(--pad) clamp(40px,6vh,70px)}
.page-body .inner{max-width:1360px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.prose h2{
  text-wrap:balance;
  font-weight:400;font-size:clamp(20px,2.2vw,30px);line-height:1.25;
  margin:clamp(34px,5vh,54px) 0 16px;
}
.prose h2:first-child{margin-top:0}
.prose p{
  text-wrap:pretty;font-size:clamp(15px,1.35vw,17.5px);line-height:1.75;color:#2c2926;margin-bottom:1.05em;max-width:38em}
.prose ul{margin:0 0 1.4em 0;padding:0;list-style:none;max-width:38em}
.prose li{
  text-wrap:pretty;
  position:relative;padding-left:22px;margin-bottom:11px;
  font-size:clamp(14.5px,1.3vw,17px);line-height:1.65;color:#2c2926;
}
.prose li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--brass)}
.prose strong{font-weight:500}

/* sidebar */
.side{align-self:start}
.side-card{border:1px solid var(--hairline);border-top:2px solid var(--brass);
  padding:clamp(22px,2.4vw,32px);background:rgba(255,255,255,.3);scroll-margin-top:96px}

/* sidebar enquiry form */
.side-form .field{margin-bottom:20px}
.side-form label{display:block;margin-bottom:8px;color:rgba(19,18,17,.72)}
.side-form input{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(19,18,17,.45);
  color:var(--ink);font:inherit;font-size:16px;
  padding:8px 0 12px;border-radius:0;transition:border-color .35s ease;
}
.side-form input:focus{outline:none;border-bottom-color:var(--brass)}
.side-form button{width:100%;border:none;font-family:inherit;cursor:pointer}
.reach-note{margin:0 0 20px;font-size:12.5px;line-height:1.45;color:rgba(19,18,17,.58);text-wrap:balance}
.reach-note.err{color:#8c2f1f;font-weight:500}
.side-form input.flag{border-bottom-color:#8c2f1f}
.hidden-field{display:none}
.side-label{display:block;color:var(--stone);margin-bottom:16px}
.btn{
  display:block;text-align:center;background:var(--brass);color:#17140f;
  padding:18px 20px;border-radius:2px;font-weight:600;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(169,123,79,.34);
  transition:background .3s ease,transform .25s ease;
}
.btn:hover{background:#c08e5c;transform:translateY(-2px)}
.btn + .btn{margin-top:10px}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid rgba(19,18,17,.45);box-shadow:none;font-weight:500;
}
.btn-ghost:hover{background:rgba(19,18,17,.06);border-color:var(--ink);transform:translateY(-2px)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;max-width:100%}
.cta-actions .btn{flex:1 1 200px;min-width:0;margin-top:0;white-space:nowrap}
.page-cta .btn-ghost{color:var(--paper);border-color:rgba(250,249,246,.42)}
.page-cta .btn-ghost:hover{background:rgba(250,249,246,.08);border-color:var(--paper)}
.side-list{margin-top:26px;border-top:1px solid var(--hairline);padding-top:20px}
.side-list .caps{color:var(--stone);display:block;margin-bottom:14px}
.side-list a{display:block;padding:8px 0;font-size:14.5px;color:#2c2926;border-bottom:1px solid rgba(191,190,184,.5)}
.side-list a:last-child{border-bottom:none}
.side-list a:hover{color:var(--brass)}
.side-list a[aria-current]{color:var(--brass);font-weight:500}

/* towns */
.page-areas{padding:0 var(--pad) clamp(56px,8vh,100px)}
.page-areas .inner{max-width:1360px;margin:0 auto;border-top:1px solid var(--hairline);padding-top:clamp(28px,4vh,44px)}
.page-areas .caps{color:var(--stone);display:block;margin-bottom:16px}
.page-areas p{font-size:clamp(14px,1.25vw,16px);line-height:1.9;color:#2c2926;max-width:60em;text-wrap:pretty}

/* closing cta */
.page-cta{background:var(--ink);color:var(--paper);padding:clamp(56px,8vh,100px) var(--pad)}
.page-cta .inner{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:32px;min-width:0}
.page-cta h2{
  font-weight:300;font-size:clamp(21px,2.3vw,32px);line-height:1.3;
  max-width:20em;flex:1 1 340px;min-width:0;
  text-wrap:balance;
}
/* a question owns its own line, the answer starts on the next one */
.page-cta h2 .q{display:block}
.page-cta .cta-actions{flex:1 1 320px}

footer{
  background:#050505;color:var(--paper);
  padding:clamp(40px,6vh,64px) var(--pad) clamp(34px,5vh,52px);
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
footer .caps{color:rgba(250,249,246,.45);font-size:9px;text-wrap:balance}
footer img{width:min(320px,66vw);height:auto}
footer .legal{font-size:11.5px;line-height:1.7;color:rgba(250,249,246,.42);
  max-width:64em;margin:0;text-align:center;text-wrap:balance}
.nb{white-space:nowrap}

@media(max-width:900px){
  .page-body .inner{grid-template-columns:1fr}
  .side{position:static}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* services hub */
.hub{padding:clamp(50px,7vh,90px) var(--pad) clamp(30px,4vh,54px)}
.hub .inner{max-width:1360px;margin:0 auto}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
}
@media(max-width:1040px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--paper);padding:clamp(26px,3vw,40px);transition:background .4s ease;min-width:0}
.svc:hover{background:#dcdbd6}
.svc-title{
  text-wrap:balance;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(13.5px,1.35vw,16px);font-weight:500;line-height:1.35;
  margin:0 0 14px;color:var(--ink);
  padding-bottom:14px;border-bottom:2px solid var(--brass);display:inline-block;
}
.svc-title a{color:inherit}
.svc:hover .svc-title a{color:var(--brass)}
.svc p{text-wrap:pretty;font-size:clamp(13.5px,1.15vw,15px);line-height:1.65;color:var(--stone);margin:0}
.svc-more{
  display:inline-block;margin-top:18px;color:var(--brass);
  font-size:10px;letter-spacing:.24em;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.svc:hover .svc-more,.svc-more:hover{border-bottom-color:var(--brass)}