/* Selwood Projects Ltd: homepage concept by Layout Creative.
   Idea: the logo is a house inside a house, drawn in one line. The page uses that line as its frame (the hero photo
   sits inside the inner house, the outline drawing round it) and as a small roofline on every section break.
   Paper is lime-wash, ink is the logo's black, the accent is the brass of the handles and the golden London brick
   in their own photos. Libre Caslon for headings, Instrument Sans for reading, Montserrat only in the logo. */

@font-face{font-family:"Caslon Display";src:url(../fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon Text";src:url(../fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon Text";src:url(../fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#ece8dd; --paper-hi:#f4f1e9; --paper-lo:#dfdacc;
  --ink:#111411; --ink-2:#383c37; --ink-3:#5f635b;
  --night:#0f110f; --night-2:#181b18; --night-3:#232723;
  --on-night:#ece8dd; --on-night-2:#b5b3a8;
  --brass:#9a7330; --brass-hi:#c9a55e;
  --rule:rgba(17,20,17,.2); --rule-n:rgba(236,232,221,.2);
  --serif:"Caslon Display","Libre Caslon Display",Georgia,"Times New Roman",serif;
  --serif-t:"Caslon Text","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4.4vw,64px);
  --max:1440px;
  --head:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.night :focus-visible,.site-foot :focus-visible{outline-color:var(--brass-hi)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:500}
.skip:focus{top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.018em}
.night h1,.night h2,.night h3{color:var(--on-night)}
h2{font-size:clamp(34px,4.3vw,62px);line-height:1.04}
h3{font-size:clamp(26px,2.5vw,36px);line-height:1.1}
.label{display:flex;align-items:center;gap:12px;font:500 12px/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.night .label{color:var(--on-night-2)}
.label svg{flex:none;width:30px;height:13px;color:var(--brass)}
.night .label svg{color:var(--brass-hi)}
.small{font-size:14px;line-height:1.5;color:var(--ink-3)}
.night .small{color:var(--on-night-2)}
.cap{font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.night .cap{color:var(--on-night-2)}

/* the roofline: a hairline with a small gable sitting on it, the logo's roof */
.roofline{position:relative;height:15px;border-bottom:1px solid var(--rule)}
.roofline svg{position:absolute;left:0;bottom:-1px;width:44px;height:15px;color:var(--ink)}
.night .roofline{border-color:var(--rule-n)}
.night .roofline svg{color:var(--brass-hi)}

/* buttons: square, no shadows */
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 24px;background:var(--ink);color:var(--paper);font:500 15px/1 var(--sans);letter-spacing:.01em;border:1px solid var(--ink);transition:background .2s,color .2s}
.btn svg{width:16px;height:16px;flex:none;transition:transform .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn:hover svg{transform:translateX(4px)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:transparent;color:var(--paper)}
.link{display:inline-flex;align-items:center;gap:10px;font:500 15px/1.3 var(--sans);color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:3px}
.link svg{width:15px;height:15px;transition:transform .2s}
.link:hover svg{transform:translate(3px,-3px)}
.night .link{color:var(--on-night)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.head-row{height:var(--head);display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
.logo{display:flex;align-items:center;gap:13px;color:var(--ink);flex:none}
.logo .mk{width:30px;height:34px;flex:none}
.logo .nm{display:flex;flex-direction:column;gap:5px;font-family:"Montserrat",var(--sans);line-height:1}
.logo .nm b{font-weight:700;font-size:19px;letter-spacing:.07em}
.logo .nm small{font-weight:300;font-size:9.5px;letter-spacing:.46em;padding-left:1px}
.nav{display:flex;gap:clamp(18px,2.4vw,38px);margin-left:auto}
.nav a{font:500 14.5px/1 var(--sans);padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover{border-color:var(--ink)}
.head-cta{display:flex;align-items:center;gap:22px}
.head-tel{display:flex;flex-direction:column;gap:3px;font:500 15px/1 var(--sans);color:var(--ink)}
.head-tel small{font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.head-cta .btn{height:44px;padding:0 20px;font-size:14px}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--ink);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--ink);transition:transform .25s,top .25s}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none}

/* 1 hero */
.hero{padding:clamp(28px,3.4vw,52px) 0 0}
.hero-grid{align-items:stretch}
.hero-copy{grid-column:1/7;display:flex;flex-direction:column;padding-bottom:clamp(24px,3vw,44px)}
.hero h1{margin-top:clamp(22px,2.6vw,38px);font-size:clamp(46px,6.1vw,92px);line-height:.98;letter-spacing:-.025em}
.hero h1 span{display:block}
.hero h1 span:nth-child(n+3){padding-left:.9em}
.lede{margin-top:clamp(22px,2.6vw,36px);max-width:31em;font-size:clamp(17px,1.3vw,19.5px);line-height:1.58;color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(26px,2.8vw,40px)}
.proof{margin-top:auto;padding-top:clamp(30px,4vw,56px);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0}
.proof li{padding:0 clamp(16px,2vw,30px);border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}
.proof li:first-child{padding-left:0;border-left:0}
.proof b{font:400 clamp(28px,2.7vw,40px)/1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.proof b i{font-style:normal;font-size:.55em;color:var(--ink-3)}
.proof span{font:500 11.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.proof a{display:flex;flex-direction:column;gap:7px}
.proof a:hover b{color:var(--brass)}
.hero-art{grid-column:7/13;position:relative;align-self:start;margin:0 0 0 auto;width:min(100%,640px);aspect-ratio:700/880}
.hero-art .frame{position:absolute;left:8.571%;top:10.227%;width:85.714%;height:88.636%}
.hero-art .frame img{width:100%;height:100%;object-fit:cover;object-position:56% 50%;clip-path:polygon(0 24.4%,50% 0,100% 24.4%,100% 100%,0 100%)}
.hero-art svg.outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.outline path{fill:none;stroke:var(--brass);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.js .outline path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.9s cubic-bezier(.6,.05,.2,1) .25s forwards}
.js .outline path+path{animation-delay:.7s;animation-duration:.8s}
@keyframes draw{to{stroke-dashoffset:0}}
.js .hero-art .frame img{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes rise{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero-art figcaption{position:absolute;left:8.571%;right:0;bottom:-34px}
.hero-band{margin-top:clamp(52px,5vw,72px);background:var(--night);color:var(--on-night)}
.hero-band ul{display:flex;flex-wrap:wrap;gap:6px 0;padding:22px 0;font:500 12px/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--on-night)}
.hero-band li+li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 clamp(14px,2vw,30px);background:var(--brass-hi);vertical-align:middle;transform:translateY(-1px)}

/* 2 about */
.about{padding:clamp(80px,10vw,150px) 0 clamp(70px,9vw,130px)}
.about-grid{row-gap:clamp(40px,5vw,72px)}
.about .label{grid-column:1/4;align-self:start;padding-top:12px}
.about-text{grid-column:4/12}
.statement{font:400 clamp(26px,3vw,44px)/1.16 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.facts{grid-column:4/12;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.facts li{padding:24px clamp(14px,2vw,30px) 0 0}
.facts li+li{padding-left:clamp(14px,2vw,30px);border-left:1px solid var(--rule)}
.facts h3{font:600 15px/1.3 var(--sans);letter-spacing:0;color:var(--ink);margin-bottom:8px}
.facts p{font-size:15.5px;line-height:1.55}
.about-photo{grid-column:1/13;margin-top:clamp(20px,3vw,40px)}
.about-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 60%}
.about-photo figcaption{margin-top:12px}

/* 3 work */
.work{padding:0 0 clamp(80px,9vw,140px)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);align-items:end;padding:clamp(40px,5vw,72px) 0 clamp(36px,4.5vw,64px)}
.sec-head .label,.sec-head p.label{grid-column:1/13;margin-bottom:22px;font-size:12px;max-width:none}
.sec-head h2{grid-column:1/8}
.sec-head p{grid-column:9/13;font-size:16px;max-width:26em}
.sec-head p a{color:var(--ink);border-bottom:1px solid var(--ink)}
.spread{padding:clamp(28px,3.5vw,52px) 0 clamp(52px,6vw,96px);row-gap:28px}
.spread+.spread{border-top:1px solid var(--rule)}
.place{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.spread .txt h3{font-size:clamp(32px,3.7vw,54px);line-height:1.04;margin-bottom:20px}
.spread .txt p{font-size:16.5px;max-width:30em}
.spread figure img{width:100%;height:auto;object-fit:cover}
.spread figcaption{margin-top:10px}
.dl{margin-top:28px;border-top:1px solid var(--rule)}
.dl div{display:grid;grid-template-columns:7.2em 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45}
.dl dt{font:500 11.5px/1.7 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.dl dd{color:var(--ink)}
/* spread 1: Cobham */
.s1 .big{grid-column:1/8;grid-row:1/3}
.s1 .big img{aspect-ratio:3/2}
@media (min-width:901px){.s1 .big{display:flex;flex-direction:column}.s1 .big img{flex:1 1 0;min-height:0;aspect-ratio:auto}}
.s1 .txt{grid-column:9/13;grid-row:1}
.s1 .sm1{grid-column:8/11;grid-row:2;align-self:end;margin-top:24px}
.s1 .sm1 img{aspect-ratio:1/1}
.s1 .sm2{grid-column:11/13;grid-row:2;align-self:end;margin-top:24px}
.s1 .sm2 img{aspect-ratio:3/4;object-position:35% 50%}
/* spread 2: Cranleigh */
.s2 .txt{grid-column:1/5;grid-row:1;align-self:start}
.s2 .tall{grid-column:5/9;align-self:end}
.s2 .tall img{aspect-ratio:3/4}
.s2 .det{grid-column:9/13;align-self:end}
.s2 .det img{aspect-ratio:4/5}
/* spread 3: loft and patio */
.s3 .wide{grid-column:1/9;grid-row:1}
.s3 .wide img{aspect-ratio:33/20;object-position:50% 70%}
.s3 .pat{grid-column:9/13;grid-row:1}
.s3 .pat img{aspect-ratio:4/5}
.s3 .wide-txt{grid-column:1/9;grid-row:2;max-width:34em}
.s3 .pat-txt{grid-column:9/13;grid-row:2}
.s3 .wide-txt h3,.s3 .pat-txt h3{margin-bottom:12px;font-size:clamp(26px,2.6vw,36px)}
.s3 .wide-txt p,.s3 .pat-txt p{font-size:16px}
/* commercial strip */
.s4 .intro{grid-column:1/5}
.s4 .intro h3{margin-bottom:16px}
.s4 .intro p:not(.place){font-size:16.5px}
.s4 .c1{grid-column:5/8}.s4 .c2{grid-column:8/10}.s4 .c3{grid-column:10/13}
.s4 .c1 img{aspect-ratio:1/1}.s4 .c2 img{aspect-ratio:3/4}.s4 .c3 img{aspect-ratio:1/1}
.s4 figure{align-self:end}
.s4 figcaption{min-height:2.9em}

/* gallery */
.gal{padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.gal-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:28px}
.gal-head h3{font-size:clamp(28px,3vw,42px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:38px;padding:0 16px;border:1px solid var(--rule);font:500 13.5px/1 var(--sans);color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tiles{columns:4;column-gap:clamp(10px,1.2vw,18px)}
.tile{display:block;position:relative;break-inside:avoid;margin:0 0 clamp(10px,1.2vw,18px);cursor:zoom-in;overflow:hidden;background:var(--paper-lo)}
.tile img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.035)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(15,17,15,.72));color:#f4f1e9;font:500 12.5px/1.35 var(--sans);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.tile:hover span,.tile:focus-visible span{opacity:1;transform:none}
.tile[hidden]{display:none}

/* 4 services explorer (dark) */
.night{background:var(--night);color:var(--on-night-2)}
.services{padding:clamp(76px,9vw,132px) 0 clamp(80px,9vw,130px)}
.services .sec-head{padding-top:0}
.services .sec-head p{color:var(--on-night-2)}
.explore{align-items:start;row-gap:30px}
.tabs{grid-column:1/6;border-top:1px solid var(--rule-n)}
.tab{display:grid;grid-template-columns:2.6em 1fr auto;align-items:baseline;width:100%;text-align:left;padding:15px 0 14px;border-bottom:1px solid var(--rule-n);color:var(--on-night);opacity:.46;transition:opacity .25s,padding .25s}
.tab:hover{opacity:.85}
.tab[aria-selected=true]{opacity:1}
.tab .n{font:500 12px/1 var(--sans);letter-spacing:.12em;color:var(--on-night-2)}
.tab .t{font:400 clamp(26px,2.9vw,42px)/1.08 var(--serif);letter-spacing:-.015em}
.tab .arr{width:22px;height:22px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;color:var(--brass-hi)}
.tab[aria-selected=true] .arr{opacity:1;transform:none}
.tab[aria-selected=true] .n{color:var(--brass-hi)}
.panels{grid-column:7/13;min-height:0}
.panel[hidden]{display:none}
.panel{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pics{display:grid;grid-template-columns:2fr 1fr;gap:clamp(10px,1.2vw,18px);align-items:stretch}
.pics figure{overflow:hidden;background:var(--night-3)}
.pics img{width:100%;height:100%;object-fit:cover}
.pics .a{aspect-ratio:4/3.1}
.panel .lead{margin-top:28px;font:400 clamp(24px,2.3vw,33px)/1.18 var(--serif);letter-spacing:-.012em;color:var(--on-night)}
.panel-cols{margin-top:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px clamp(22px,3vw,44px)}
.panel-cols p{font-size:15.5px;line-height:1.6}
.panel ul{border-top:1px solid var(--rule-n)}
.panel li{padding:9px 0 9px 24px;border-bottom:1px solid var(--rule-n);font-size:14.5px;line-height:1.4;color:var(--on-night);position:relative}
.panel li::before{content:"";position:absolute;left:0;top:50%;width:11px;height:1px;background:var(--brass-hi)}
.panel .cta{margin-top:28px}
.areas{margin-top:clamp(56px,6vw,90px);padding-top:26px;border-top:1px solid var(--rule-n);display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline}
.areas p{font-size:15.5px;color:var(--on-night)}

/* 5 reviews */
.reviews{background:var(--paper-lo);padding:clamp(76px,9vw,132px) 0}
.reviews .sec-head{padding-top:0}
.rev-grid{row-gap:44px;align-items:start}
.scores{grid-column:1/5;display:grid;gap:0;border-top:1px solid var(--rule)}
.score{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:end;padding:26px 0;border-bottom:1px solid var(--rule)}
.score .num{font:400 clamp(60px,6.4vw,92px)/.85 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.score .num i{font-style:normal;font-size:.36em;letter-spacing:0;color:var(--ink-3);margin-left:2px}
.score .src{font:500 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:4px}
.score .src b{display:block;color:var(--ink);font-weight:600}
.score a.src:hover b{color:var(--brass)}
.bars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.bars p{font:500 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.bars b{display:block;margin-top:6px;font:400 22px/1 var(--serif);color:var(--ink);letter-spacing:-.01em;text-transform:none}
.trust{margin-top:22px;font-size:14px;line-height:1.55;color:var(--ink-3)}
.quote-area{grid-column:6/13}
.quote{font:italic 400 clamp(21px,2.05vw,29px)/1.34 var(--serif-t);letter-spacing:-.003em;color:var(--ink);min-height:8.4em}
.quote-wrap{position:relative;padding-left:clamp(0px,3vw,48px)}
.quote-wrap::before{content:"\201C";position:absolute;left:-.1em;top:-.34em;font:400 clamp(110px,10vw,160px)/1 var(--serif);color:var(--brass);opacity:.7}
.quote-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.quote-by b{font:600 15px/1.3 var(--sans);color:var(--ink)}
.src-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--ink);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.quote-nav{display:flex;align-items:center;gap:18px;margin-top:26px;padding-left:clamp(0px,3vw,48px)}
.arrow-btn{width:48px;height:48px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.arrow-btn:hover{background:var(--ink);color:var(--paper)}
.arrow-btn svg{width:18px;height:18px}
.count{white-space:nowrap;font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dots{display:flex;gap:7px;margin-left:auto}
.dots button{width:26px;height:3px;background:var(--rule);transition:background .2s}
.dots button[aria-current=true]{background:var(--ink)}
.also{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);margin-top:clamp(10px,2vw,30px)}
.also blockquote{padding:26px clamp(14px,2vw,32px) 0 0;font:italic 400 18.5px/1.45 var(--serif-t);color:var(--ink)}
.also blockquote+blockquote{padding-left:clamp(14px,2vw,32px);border-left:1px solid var(--rule)}
.also cite{display:block;margin-top:14px;font:500 11.5px/1.4 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* 6 contact */
.contact{padding:clamp(80px,10vw,150px) 0 clamp(60px,7vw,100px)}
.contact .g12{row-gap:48px}
.c-left{grid-column:1/6}
.c-left h2{margin:22px 0 24px;font-size:clamp(36px,4.6vw,68px);line-height:1.02}
.c-left>p{max-width:24em;color:var(--on-night-2)}
.details{margin-top:38px;border-top:1px solid var(--rule-n)}
.details div{display:grid;grid-template-columns:8em 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule-n);align-items:baseline}
.details dt{font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-2)}
.details dd{font-size:17px;color:var(--on-night);line-height:1.45;overflow-wrap:anywhere}
.details dd a{border-bottom:1px solid rgba(236,232,221,.35);transition:border-color .2s}
.details dd a:hover{border-color:var(--brass-hi)}
.details .tel{font:400 clamp(28px,2.6vw,38px)/1 var(--serif);letter-spacing:-.01em;border-bottom:0}
.form{grid-column:7/13;background:var(--paper);color:var(--ink-2);padding:clamp(24px,3vw,44px);position:relative}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--brass-hi)}
.form h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:6px;color:var(--ink)}
.form .small,.night .form .small{color:var(--ink-3)}
.form>.small{margin-bottom:26px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font:500 11.5px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;font:400 16.5px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:9px 0 10px;outline:0;-webkit-appearance:none;appearance:none}
.field select{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23111411' stroke-width='1.6'/></svg>") no-repeat right 4px center;padding-right:28px}
.field textarea{min-height:104px;resize:vertical;border:1px solid var(--ink);padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass);box-shadow:0 1px 0 var(--brass)}
.field textarea:focus{box-shadow:none;outline:2px solid var(--brass);outline-offset:0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:26px}
.form-foot .small{max-width:20em}
.form-note{margin-top:14px;font-size:14px;color:var(--ink-2)}
.hp{position:absolute;left:-9999px}

/* footer */
.site-foot{background:var(--night);color:var(--on-night-2);padding:0 0 40px}
.foot-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);row-gap:36px;padding:clamp(40px,5vw,64px) 0 36px;border-top:1px solid var(--rule-n)}
.foot-row .logo{color:var(--on-night);grid-column:1/5;align-self:start}
.foot-row .logo .mk{width:38px;height:43px}
.foot-row .logo .nm b{font-size:23px}
.foot-row .logo .nm small{font-size:11px}
.foot-col{grid-column:span 2;font-size:14.5px;line-height:1.7}
.foot-col.addr{grid-column:5/9}
.foot-col h4{font:500 11.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:12px}
.foot-col a{color:var(--on-night);display:block}
.foot-col a:hover{color:var(--brass-hi)}
.fine{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;padding-top:22px;border-top:1px solid var(--rule-n);font-size:13px;line-height:1.5;color:var(--on-night-2)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(15,17,15,.94);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb[data-open]{display:flex}
.lb figure{max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;margin:0 auto}
.lb figcaption{color:var(--on-night);font-size:14.5px;text-align:center}
.lb button{position:absolute;color:var(--on-night);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-n)}
.lb button:hover{background:var(--on-night);color:var(--ink)}
.lb .x{top:18px;right:18px}.lb .pv{left:18px;top:50%}.lb .nx{right:18px;top:50%}
.lb svg{width:20px;height:20px}

/* sticky mobile bar */
.mbar{display:none}

/* reveal */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1100px){
  .nav,.head-tel{display:none}
  .menu-btn{display:flex}
  .head-cta{margin-left:0}
  .head-row .head-cta .btn{display:none}
  .mobile-nav{display:block;position:fixed;inset:var(--head) 0 0 0;z-index:49;background:var(--night);padding:28px var(--gut) 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .mobile-nav[data-open]{opacity:1;transform:none;visibility:visible}
  .mobile-nav a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule-n);font:400 34px/1.1 var(--serif);color:var(--on-night)}
  .mobile-nav a small{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-2)}
  .mobile-nav .m-contact{margin-top:30px;display:grid;gap:12px}
  .mobile-nav .m-contact a{border:0;padding:0;font:500 17px/1.4 var(--sans)}
  .mobile-nav .btn{margin-top:8px;width:100%;justify-content:space-between;align-items:center;color:var(--ink);font:500 16px/1 var(--sans);padding:0 22px;border:1px solid var(--paper)}
  .tiles{columns:3}
  .facts{grid-column:1/13}
  .about-text{grid-column:1/13}.about .label{grid-column:1/13;padding-top:0}
}
@media (max-width:900px){
  body{font-size:16.5px}
  .hero-copy{grid-column:1/13}
  .hero-art{grid-column:1/13;margin:34px auto 44px;width:min(100%,520px)}
  .hero-art figcaption{bottom:-30px}
  .proof{padding-top:34px;grid-template-columns:repeat(3,minmax(0,auto))}
  .hero-band{margin-top:0}
  .sec-head h2{grid-column:1/13}
  .sec-head p{grid-column:1/13;margin-top:18px;max-width:34em}
  .s1 .big{grid-column:1/13;grid-row:auto}
  .s1 .txt{grid-column:1/13;grid-row:auto;order:-1}
  .s1 .sm1{grid-column:1/8;grid-row:auto;margin-top:0}
  .s1 .sm2{grid-column:8/13;grid-row:auto;margin-top:0}
  .s2 .txt{grid-column:1/13;grid-row:auto}
  .s2 .tall{grid-column:1/8}.s2 .det{grid-column:8/13}
  .s3 .wide,.s3 .wide-txt,.s3 .pat,.s3 .pat-txt{grid-column:1/13;grid-row:auto}
  .s3 .wide{order:1}.s3 .wide-txt{order:2;margin-bottom:20px}.s3 .pat{order:3}.s3 .pat-txt{order:4}
  .s3 .pat img{aspect-ratio:4/3;object-position:50% 40%}
  .s4 .intro{grid-column:1/13}
  .s4 .c1{grid-column:1/7}.s4 .c2{grid-column:7/13}.s4 .c3{grid-column:1/13}
  .s4 .c3 img{aspect-ratio:16/9;object-position:50% 40%}
  .explore .tabs{grid-column:1/13;border-top:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;-webkit-overflow-scrolling:touch}
  .tab{flex:none;display:flex;align-items:center;gap:8px;width:auto;padding:0 18px;height:46px;border:1px solid var(--rule-n);opacity:1;color:var(--on-night-2);scroll-snap-align:start}
  .tab .n,.tab .arr{display:none}
  .tab .t{font:500 14.5px/1 var(--sans);letter-spacing:0;white-space:nowrap}
  .tab[aria-selected=true]{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
  .panels{grid-column:1/13}
  .scores{grid-column:1/13}
  .quote-area{grid-column:1/13}
  .quote{min-height:0}
  .c-left,.form{grid-column:1/13}
  .foot-row .logo{grid-column:1/13}
  .foot-col,.foot-col.addr{grid-column:span 6}
  .tiles{columns:2}
  .tile span{opacity:1;transform:none;padding-top:26px;font-size:11.5px}
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--night);border-top:1px solid var(--rule-n)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;font:500 15px/1 var(--sans);color:var(--on-night)}
  .mbar a+a{background:var(--paper);color:var(--ink)}
  .mbar svg{width:17px;height:17px}
  .site-foot{padding-bottom:90px}
}
@media (max-width:640px){
  :root{--head:64px}
  body{font-size:16px}
  .head-row{gap:12px}
  .logo .mk{width:26px;height:30px}
  .logo .nm b{font-size:16.5px}
  .logo .nm small{font-size:8.2px;letter-spacing:.44em}
  .hero{padding-top:24px}
  .hero h1{font-size:clamp(44px,12.6vw,60px)}
  .hero h1 span:nth-child(n+3){padding-left:.55em}
  .cta .btn{width:100%;justify-content:space-between}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .proof li:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;padding-top:20px;border-top:1px solid var(--rule)}
  .proof li:nth-child(2){padding-left:18px}
  .hero-band ul{padding:18px 0;font-size:11px}
  .hero-band li+li::before{margin:0 12px}
  .facts{grid-template-columns:1fr}
  .facts li,.facts li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .about-photo img{aspect-ratio:4/3}
  .dl div{grid-template-columns:6.4em 1fr}
  .s1 .sm1{grid-column:1/8}.s1 .sm2{grid-column:8/13}
  .s2 .tall{grid-column:1/8}.s2 .det{grid-column:8/13}
  .s4 .c1,.s4 .c2{grid-column:span 6}
  .panel-cols{grid-template-columns:1fr}
  .pics{grid-template-columns:1.6fr 1fr}
  .bars{grid-template-columns:repeat(3,1fr);gap:8px}
  .also{grid-template-columns:1fr}
  .quote-nav{gap:12px}.dots button{width:16px}
  .details dd{font-size:16px}.details .tel{font-size:30px}.details dd a[href^=mailto]{font-size:15px}
  .also blockquote,.also blockquote+blockquote{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .fields{grid-template-columns:1fr}
  .details div{grid-template-columns:6.4em 1fr}
  .foot-col,.foot-col.addr{grid-column:1/13}
  .tiles{column-gap:8px}.tile{margin-bottom:8px}
  .lb .pv,.lb .nx{top:auto;bottom:18px}
  .lb .pv{left:calc(50% - 56px)}.lb .nx{right:calc(50% - 56px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .js .outline path{stroke-dashoffset:0}
}
noscript .panel[hidden]{display:block}

/* refinements after first review */
.roofline + .sec-head{padding-top:clamp(30px,3.6vw,52px)}
.pics.one{grid-template-columns:1fr}
.pics.one .a{aspect-ratio:16/10}
.pics .a img{aspect-ratio:auto}
.score.src{text-decoration:none}
.score a.src:hover b{color:var(--brass)}
.slide[hidden]{display:none}
.slide{margin:0}
.slide .quote-by{margin-top:22px}
.lb[data-open]{display:flex}