:root{
  --chalk:#F4F4F1;
  --chalk-2:#E9EAE6;
  --flint:#1C1D1F;
  --flint-grey:#7E878D;
  --gold:#D7BC78;
  --gold-ink:#8E733A;
  --brick:#9A4A33;
  --R:215px;
  --ring:46px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--chalk);color:var(--flint);font:400 17px/1.65 "Hanken Grotesk",system-ui,sans-serif}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.serif{font-family:Baskervville,"Libre Baskerville",serif}
.eyebrow{font:600 12px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}

.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 0}
.top nav{display:flex;gap:28px}
.top nav a{text-decoration:none;font-weight:500}
.top nav a:hover{color:var(--gold-ink)}
.top .right{justify-content:flex-end}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:6px}
.brand img{width:54px}
.brand span{display:flex;flex-direction:column;align-items:center;gap:6px}
.brand b{font:400 15px/1 "Libre Baskerville",serif;letter-spacing:.22em}
.brand small{font:400 10px/1 "Libre Baskerville",serif;letter-spacing:.3em;color:var(--flint-grey)}
.tel{font-weight:600;white-space:nowrap}

/* hero + signature: the bullseye */
.hero{text-align:center;padding:36px 0 40px}
.hero h1{font-family:Baskervville,serif;font-weight:400;font-size:clamp(40px,4.8vw,72px);line-height:1;letter-spacing:-.015em;margin:0 auto;max-width:13em}
.hero h1 i{color:var(--gold-ink)}
.stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px;margin-top:36px}
.side{text-align:left;max-width:300px}
.side.r{justify-self:end;text-align:right}
.side h2{font-family:Baskervville,serif;font-weight:400;font-size:30px;line-height:1.1;margin:10px 0 12px}
.side p{margin:0 0 16px;font-size:16px;color:#43474b}
.side a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--gold)}
.side a:hover{border-color:var(--flint)}

.oculus{position:relative;width:calc(var(--R) * 2 + var(--ring) * 2);aspect-ratio:1}
.aperture{position:absolute;inset:var(--ring);border-radius:50%;overflow:hidden;background:var(--chalk-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.aperture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.aperture img.on{opacity:1}
.v{position:absolute;left:50%;top:50%;height:var(--ring);background-size:cover;background-position:center;transform-origin:0 0;border-radius:1px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.v.key{background:var(--gold)!important;box-shadow:none}
.set .v{opacity:0}
.set .v.in{opacity:1;transition:opacity .25s ease}
.caption{margin-top:18px;font-size:14px;color:var(--flint-grey);min-height:1.6em}
@media (prefers-reduced-motion:reduce){.set .v{opacity:1}.aperture img{transition:none}}

.sec{padding:110px 0}
.belief{text-align:center;border-top:1px solid #D9DAD5}
.belief .statement{font-family:Baskervville,serif;font-size:clamp(28px,3.2vw,44px);line-height:1.25;max-width:22em;margin:18px auto 0}

.trust{list-style:none;padding:0;margin:40px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:15px;color:#43474b}
.trust li{display:flex;align-items:center;gap:16px}
.trust li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.services{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.arch{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;max-width:420px}
.services h2{font-family:Baskervville,serif;font-weight:400;font-size:clamp(32px,3.2vw,46px);line-height:1.08;margin:28px 0 14px}
.services ul{list-style:none;padding:0;margin:22px 0 26px}
.services li{padding:10px 0;border-top:1px solid #D9DAD5}
.services li:last-child{border-bottom:1px solid #D9DAD5}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--flint);color:var(--chalk);text-decoration:none;font-weight:600;border:0;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--gold-ink)}
.btn.line{background:none;color:var(--flint);box-shadow:inset 0 0 0 1.5px var(--flint)}
.btn.line:hover{background:var(--flint);color:var(--chalk)}

.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.gallery-head h1,.gallery-head h2{font-family:Baskervville,serif;font-weight:400;font-size:clamp(32px,3.2vw,46px);margin:8px 0 0;line-height:1}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:15px;padding-top:10px;color:#43474b}
.gallery figcaption b{font-weight:600;color:var(--flint)}

.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ig a{aspect-ratio:1;background-size:cover;background-position:center;border-radius:50%;transition:transform .3s ease}
.ig a:hover{transform:scale(1.04)}

.contact{background:var(--flint);color:var(--chalk)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.contact h2{font-family:Baskervville,serif;font-weight:400;font-size:clamp(36px,4vw,60px);line-height:1.04;margin:12px 0 18px}
.contact .eyebrow{color:var(--gold)}
.contact p{color:#C4C6C2}
.num{display:block;font-family:Baskervville,serif;font-size:clamp(34px,3.8vw,52px);color:var(--gold);text-decoration:none;margin:26px 0 6px;line-height:1}
.num:hover{color:#fff}
.mail{color:var(--chalk)}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:14px;font-weight:500;color:#C4C6C2}
input,select,textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #3B3E42;background:#26282B;color:var(--chalk);border-radius:6px}
textarea{min-height:130px;resize:vertical}
.contact .btn{background:var(--gold);color:var(--flint)}
.contact .btn:hover{background:#fff}
footer{background:var(--flint);color:#7E878D;font-size:14px;padding:0 0 32px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #33363A;padding-top:24px}

@media (max-width:1080px){
  :root{--R:190px;--ring:38px}
  .stage{grid-template-columns:1fr 1fr;gap:28px}
  .eye{grid-column:1/-1;grid-row:1;justify-self:center}
  .side,.side.r{max-width:none;justify-self:stretch;text-align:left}
}
@media (max-width:860px){
  .top{grid-template-columns:auto 1fr}
  .top nav.left{display:none}
  .top .right a:not(.tel){display:none}
  .brand{flex-direction:row;gap:10px}
  .brand span{align-items:flex-start;gap:5px}
  .brand img{width:40px}
  .services,.contact .grid{grid-template-columns:1fr;gap:56px}
  .gallery{grid-template-columns:1fr 1fr}
  .ig{grid-template-columns:repeat(3,1fr)}
  .sec{padding:72px 0}
}
@media (max-width:560px){
  :root{--R:128px;--ring:28px}
  .wrap{padding:0 16px}
  .stage{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .brand b{font-size:12px;letter-spacing:.16em}
  .brand small{font-size:8px;letter-spacing:.18em}
  .brand img{width:32px}
}

/* additions for the live site */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-note{margin:0;font-size:15px;color:var(--gold)}
.form-note.ok,.form-note.err{display:grid;align-content:center;gap:8px;padding:28px;border-radius:6px;font-size:18px;line-height:1.4;color:var(--chalk)}
.form-note strong{font-family:Baskervville,serif;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1}
.form-note.ok{border:1px solid var(--gold);background:#26282B}
.form-note.ok strong{color:var(--gold)}
.form-note.err{border:1px solid var(--brick);background:#2B2120}
.form-note.err strong{color:#E39478}
.form-note[hidden]{display:none}
#enquiry.sent>:not(.form-note){display:none}
.page-head{padding:56px 0 8px}
.page-head h1{font-family:Baskervville,serif;font-weight:400;font-size:clamp(40px,4.8vw,64px);line-height:1;margin:10px 0 0}
.gallery figure a{text-decoration:none;display:block}
.gallery figcaption .where{display:block;font-size:13px;color:var(--flint-grey);margin-top:2px}
.project{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.project img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project-meta{max-width:40em;margin:16px 0 40px;color:#43474b}
.notice{max-width:36em;margin:0 auto;text-align:center}
@media (max-width:860px){.project{grid-template-columns:1fr}}