/* Modern Joinery Solutions. Colours and type are taken from the business's A-board sign and logo. */
:root{
  --black:#141414;
  --gold:#c9a063;
  --white:#fff;
  --grey:#666;
  --rule:#e3e3e3;
  --mist:#f4f4f3;
  --font:'Montserrat',Arial,sans-serif;
  --gutter:clamp(16px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--white);color:var(--black);font:400 16px/1.6 var(--font)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:fixed;left:8px;top:-60px;z-index:20;background:var(--black);color:var(--white);padding:10px 16px}
.skip:focus{top:8px}

/* Header: the logo and phone number stay in view while scrolling. */
.topbar{position:sticky;top:0;z-index:10;height:64px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--rule)}
.topbar-logo img{width:170px;height:auto}
.topbar nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.topbar nav a{text-decoration:none}
.topbar nav a:hover{text-decoration:underline;text-underline-offset:5px}
.topbar .topbar-call{background:var(--black);color:var(--white);padding:9px 16px;font-weight:600}
.topbar .topbar-call:hover{background:#333;text-decoration:none}

/* Brand introduction. */
.brand{padding:clamp(36px,5vw,64px) var(--gutter) clamp(32px,4vw,52px);text-align:center}
.brand-logo{width:min(600px,100%);height:auto;margin:0 auto clamp(26px,4vw,40px)}
.brand h1{font-size:clamp(24px,3vw,38px);font-weight:600;line-height:1.25;letter-spacing:-.01em;max-width:24em;margin:0 auto;text-wrap:balance}
.brand-sub{margin-top:12px;color:var(--grey);font-size:clamp(16px,1.4vw,18px)}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin-top:24px;font-size:15px;color:var(--grey)}
.facts strong{color:var(--black);font-weight:700}

/* Work: a filmstrip that keeps each photo's own shape. */
.work{padding:clamp(40px,6vw,72px) 0;background:var(--mist)}
.work-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);margin-bottom:24px}
.work h2,.contact h2{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.01em}
.strip-controls{display:flex;align-items:center;gap:8px}
.strip-count{font-size:14px;color:var(--grey);margin-right:10px;font-variant-numeric:tabular-nums}
.strip-controls button{width:44px;height:44px;border:1px solid var(--black);background:transparent;color:var(--black);font:600 16px var(--font);cursor:pointer}
.strip-controls button:hover{background:var(--black);color:var(--white)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter) 12px;scrollbar-width:thin;scrollbar-color:#bbb transparent}
.strip li{flex:none;scroll-snap-align:start}
.strip li:last-child{padding-right:var(--gutter)}
.strip img{height:clamp(300px,58vh,600px);width:auto;max-width:min(86vw,900px);object-fit:cover;background:#ddd}
.strip figcaption{margin-top:10px;font-size:14px;font-weight:500}
.work-more{padding:0 var(--gutter);margin-top:20px;font-size:15px;color:var(--grey)}
.work-more a{color:var(--black);font-weight:600;text-underline-offset:4px}

/* Services: styled after the black and gold A-board outside. */
.board{background:var(--black);color:var(--white);padding:clamp(56px,8vw,104px) var(--gutter)}
.board-inner{max-width:1080px;margin:0 auto}
.board-logo{width:min(340px,80%);height:auto;filter:invert(1);margin-bottom:clamp(36px,5vw,56px)}
.board h2{font-size:clamp(32px,4.4vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.015em;margin-bottom:clamp(32px,5vw,56px)}
.board-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.board h3{font-size:15px;font-weight:600;color:#aaa;padding-bottom:12px;border-bottom:1px solid #3a3a3a}
.service-list li{padding:18px 0;border-bottom:1px solid #2b2b2b;color:#c4c4c4;font-size:15px}
.service-list strong{display:block;color:var(--gold);font-size:clamp(20px,2vw,26px);font-weight:600;line-height:1.25;margin-bottom:4px}
.board-call{margin-top:clamp(40px,6vw,64px);font-size:clamp(22px,2.6vw,32px);font-weight:600}
.board-call a{color:var(--gold);text-decoration:none;white-space:nowrap;margin-left:.3em}
.board-call a:hover{text-decoration:underline;text-underline-offset:6px}

/* Commercial clients: a slow, continuous strip of logos. */
.clients{padding:clamp(32px,4vw,48px) 0;text-align:center;border-bottom:1px solid var(--rule)}
.clients-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 var(--gutter);margin-bottom:24px}
.clients h2{font-size:15px;font-weight:500;color:var(--grey)}
#logos-toggle{width:32px;height:32px;border:1px solid var(--rule);background:transparent;color:var(--grey);font:600 11px var(--font);cursor:pointer}
#logos-toggle:hover{border-color:var(--black);color:var(--black)}
.logo-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.client-logos{display:flex;align-items:center;width:max-content;animation:logos 45s linear infinite}
.client-logos li{flex:none;padding:0 clamp(28px,3.5vw,48px)}
.client-logos img{height:var(--h);width:auto}
.logo-track:hover .client-logos,.clients.paused .client-logos{animation-play-state:paused}
@keyframes logos{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .client-logos{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:28px}
  .client-logos [aria-hidden="true"],#logos-toggle{display:none}
  .logo-track{-webkit-mask-image:none;mask-image:none}
}

/* Contact. */
.contact{padding:clamp(56px,8vw,96px) var(--gutter);text-align:center}
.contact p{max-width:34em;margin:12px auto 0;color:var(--grey);font-size:17px}
.contact-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
.button{display:inline-block;padding:16px 28px;border:2px solid var(--black);font-weight:600;font-size:16px;text-decoration:none}
.button:hover{background:var(--mist)}
.button-dark{background:var(--black);color:var(--white)}
.button-dark:hover{background:#333}

/* Social media. */
.social{padding:clamp(48px,7vw,80px) var(--gutter);background:var(--mist);text-align:center}
.social h2{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.01em}
.social p{margin-top:8px;color:var(--grey);font-size:17px}
.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:32px}
.social-links a{display:flex;align-items:center;gap:14px;min-width:280px;padding:18px 22px;background:var(--white);border:2px solid var(--black);text-decoration:none;text-align:left;font-size:14px;color:var(--grey)}
.social-links a:hover{background:var(--black);color:#ccc}
.social-links a:hover svg,.social-links a:hover strong{color:var(--white)}
.social-links svg{flex:none;color:var(--black)}
.social-links strong{display:block;font-size:17px;color:var(--black)}

.footer{padding:32px var(--gutter);border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;font-size:14px;color:var(--grey)}
.footer img{width:150px;height:auto}
.footer a{margin-right:16px;text-underline-offset:4px}

@media(max-width:760px){
  .topbar{height:58px}
  .topbar-logo img{width:132px}
  .topbar nav a:not(.topbar-call){display:none}
  .topbar .topbar-call{padding:8px 12px;font-size:13px}
  .hide-small{display:none}
  .facts{gap:8px 24px}
  .strip-count{display:none}
  .strip-controls button{width:40px;height:40px}
  .strip img{height:clamp(260px,52vh,420px)}
  .board-columns{grid-template-columns:1fr}
  .contact-actions{flex-direction:column}
  .social-links{flex-direction:column}
  .social-links a{min-width:0}
  .footer{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* All-black theme: the whole page in the sign's black and gold. */
body{background:var(--black);color:var(--white)}
.topbar{background:rgba(20,20,20,.96);border-color:#2b2b2b}
.topbar-logo img,.brand-logo,.footer img{filter:invert(1)}
.topbar .topbar-call{background:var(--gold);color:var(--black)}
.topbar .topbar-call:hover{background:#d8b47c}
.brand h1{color:var(--gold);font-weight:700}
.brand-sub,.facts{color:#b5b5b5}
.facts strong{color:var(--white)}
.work{background:#1c1c1c}
.strip-count,.work-more{color:#b5b5b5}
.work-more a{color:var(--gold)}
.strip-controls button{border-color:#777;color:var(--white)}
.strip-controls button:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.strip figcaption{color:#ddd}
.board{border-top:1px solid #2b2b2b}
.board-logo{display:none}
.clients{background:var(--white);border-color:#2b2b2b}
.clients h2{color:var(--grey)}
.contact p{color:#b5b5b5}
.contact h2{color:var(--gold)}
.button{border-color:var(--white);color:var(--white)}
.button:hover{background:#262626}
.button-dark{background:var(--gold);border-color:var(--gold);color:var(--black)}
.button-dark:hover{background:#d8b47c}
.footer{border-color:#2b2b2b;color:#999}
.social{background:#1c1c1c}
.social p{color:#b5b5b5}
.social-links a{background:var(--black);border-color:var(--gold);color:#b5b5b5}
.social-links svg,.social-links strong{color:var(--gold)}
.social-links a:hover{background:var(--gold);color:var(--black)}
.social-links a:hover svg,.social-links a:hover strong{color:var(--black)}