/* Mossy Rock Properties — written by the generator (studio build) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap");

:root{
  --oyster:#E9E4D4;--moss:#5F6B2A;--lichen:#C9C27A;--mud:#23251C;
  --drift:#8A8672;--shell:#F6F2E6;--tide:#3D5A63;
  --hair:rgba(138,134,114,.4);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --margin:48px;--gutter:32px;--section:128px;--block:48px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--oyster);color:var(--mud);font:400 18px/1.6 var(--sans);overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.on-dark :focus-visible,.statement :focus-visible,.menu-overlay :focus-visible,.site-header.is-over :focus-visible,.hero :focus-visible{outline-color:var(--lichen)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--moss);color:var(--shell);padding:12px 18px;text-decoration:none}
.skip:focus{top:12px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);max-width:1360px;margin:0 auto;padding:0 var(--margin)}

/* type */
.display-xl,.display-l,.h2,.h3,.h4,.footer-name,.pair-line,.numeral{font-family:var(--serif);font-variation-settings:"SOFT" 50,"WONK" 0;font-optical-sizing:auto;letter-spacing:-.02em}
.display-xl{font-size:clamp(64px,11vw,160px);line-height:.92;font-weight:450}
.display-l{font-size:clamp(52px,8.4vw,120px);line-height:.95;font-weight:450}
.h2{font-size:clamp(38px,4.2vw,56px);line-height:1.02;font-weight:450}
.h3{font-size:clamp(26px,2.4vw,32px);line-height:1.15;font-weight:500}
.h4{font-size:24px;line-height:1.2;font-weight:500}
.wonk{font-variation-settings:"SOFT" 50,"WONK" 1}
.moss{font-weight:300}
.lead{font-size:22px;line-height:1.5}
.note{font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#6E6A57}
.note-rule{border-top:1px solid var(--hair);padding-top:12px;margin-bottom:24px}
.note-lichen{color:var(--lichen)}
.note-light{color:var(--shell)}
.note-ink{color:var(--mud)}
.type.is-typing::after{content:"▍";margin-left:2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* links & buttons */
.text-link{color:var(--tide);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:500}
.text-link:hover{text-decoration-thickness:2px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:18px 28px;border:1px solid transparent;border-radius:0;font:600 16px/1.2 var(--sans);text-decoration:none;background:none;transition:background-color .2s,color .2s,border-color .2s}
.btn .arrow{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(6px)}
.btn-primary{background:var(--moss);color:var(--shell)}
.btn-primary:hover{background:var(--lichen);color:var(--mud)}
.btn-secondary{border-color:var(--mud);color:var(--mud)}
.btn-secondary:hover{background:var(--mud);color:var(--oyster)}
.btn-ghost-light{border-color:var(--shell);color:var(--shell)}
.btn-ghost-light:hover{background:var(--shell);color:var(--mud)}
.on-dark .btn-primary:hover{border-color:var(--lichen)}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:72px;background:var(--oyster);color:var(--mud);border-bottom:1px solid var(--hair);transition:transform .24s var(--ease),background-color .24s,color .24s,border-color .24s}
.site-header.is-over{background:transparent;color:var(--shell);border-bottom-color:transparent}
.site-header.is-hidden{transform:translateY(-100%)}
.header-inner{height:100%;max-width:1360px;margin:0 auto;padding:0 var(--margin);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:600 15px/1 var(--sans)}
.main-nav{display:flex;align-items:center;gap:40px}
.main-nav ul{display:flex;gap:28px}
.main-nav a{font-size:15px;text-decoration:none;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .24s var(--ease)}
.main-nav a:hover,.main-nav a[aria-current="page"]{background-size:100% 1px}
.main-nav a[aria-current="page"]{background-image:linear-gradient(var(--moss),var(--moss));background-size:100% 2px}
.header-phone{font-family:var(--mono)!important;font-size:14px!important;letter-spacing:.04em}
.menu-toggle{display:none;min-height:44px;min-width:64px;padding:0 4px;background:none;border:0;font:600 15px/1 var(--sans);text-decoration:underline;text-underline-offset:5px}

/* mobile menu */
.menu-overlay{display:none;position:fixed;inset:0;z-index:60;background:var(--moss);color:var(--shell);padding:16px 20px 40px;flex-direction:column;overflow-y:auto}
.menu-overlay.is-open{display:flex}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:56px}
.menu-close{background:none;border:0;min-height:44px;min-width:64px;font:600 15px/1 var(--sans);color:var(--shell);text-decoration:underline;text-underline-offset:5px}
.menu-list{margin:auto 0;display:grid;gap:12px}
.menu-list a{display:block;font:400 48px/1.1 var(--serif);letter-spacing:-.02em;text-decoration:none;padding:4px 0}
.menu-list a:hover{color:var(--lichen)}
.menu-phone{font:500 16px/1 var(--mono);color:var(--shell);padding:14px 0}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;color:var(--shell);background:var(--mud)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.94);animation:drift 12s var(--ease) forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(35,37,28,.55) 0%,rgba(35,37,28,.2) 45%,rgba(35,37,28,0) 70%),linear-gradient(to bottom,rgba(35,37,28,.35),transparent 140px)}
.hero-copy{position:absolute;left:0;right:0;bottom:15vh;margin:0 auto;width:100%}
.hero-copy h1,.hero-copy .tagline{grid-column:2/12}
.tagline{margin-top:24px;font-size:22px;line-height:1.5;max-width:34ch}
.hero-coords,.hero-count,.hero-scroll{position:absolute;bottom:28px;color:var(--shell)}
.hero-coords{left:var(--margin)}
.hero-count{right:var(--margin)}
.hero-scroll{left:50%;transform:translateX(-50%);text-decoration:none;padding:12px 0 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll::after{content:"";width:1px;height:28px;background:var(--shell);opacity:.7}

/* reveal (state added only by JS) */
.js-reveal .reveal img{clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ease)}
.js-reveal .reveal.is-in img{clip-path:inset(0 0 0 0)}
figure img{filter:saturate(.85) contrast(.95);object-fit:cover;width:100%}
figcaption{margin-top:12px;min-height:17px}

/* intro */
.intro{padding-top:var(--section)}
.intro-head{grid-column:2/6}
.intro-body{grid-column:7/12;display:grid;gap:24px;align-content:start;padding-top:36px}
.intro-photo{grid-column:9/13;margin-top:var(--block);margin-bottom:-96px;position:relative;z-index:2}
.intro-photo img{aspect-ratio:9/13}

/* services */
.services{padding-top:calc(var(--section) + 96px)}
.svc-head{margin-bottom:var(--block)}
.svc-note{grid-column:1/3;align-self:start}
.svc-head .h2{grid-column:2/9}
.svc-head .svc-note{grid-column:2/9}
.svc-list{border-top:1px solid var(--hair)}
.svc-row{border-bottom:1px solid var(--hair);transition:background-color .3s}
.svc-row:hover,.svc-row:focus-within{background:rgba(201,194,122,.3)}
.svc-row .grid{padding-top:40px;padding-bottom:40px;align-items:baseline}
.svc-num{grid-column:1/2}
.svc-row .h3{grid-column:2/6}
.svc-text{grid-column:6/11}
.svc-link{grid-column:11/13;justify-self:end;white-space:nowrap;padding:10px 0}
.pano{margin-top:var(--section)}
.pano img{aspect-ratio:21/9}
.pano figcaption{padding:0 var(--margin)}

/* statement */
.statement{background:var(--moss);color:var(--shell);margin-top:var(--section);min-height:90vh;display:flex;overflow:hidden}
.statement-grid{width:100%;align-items:center;padding-top:var(--section)}
.statement-copy{grid-column:2/10;padding-bottom:var(--section)}
.statement-copy .note{margin-bottom:40px}
.statement-photo{grid-column:10/13;align-self:end;margin-bottom:-2px}
.statement-photo img{aspect-ratio:7/13;max-height:78vh}
.statement-photo figcaption{position:absolute;margin:0;transform:translateY(-100%) translateY(-12px)}
.statement-photo{position:relative}
.statement-photo figcaption{top:0;left:0}

/* how */
.how{padding:var(--section) 0}
.how-title{grid-column:2/9;margin-bottom:var(--block)}
.steps{grid-column:2/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.steps li{border-top:1px solid var(--hair);padding-top:16px;display:grid;gap:12px;align-content:start}
.numeral{font-style:italic;font-size:96px;line-height:1;color:var(--moss);font-weight:400}
.steps p{font-size:17px}

/* pair */
.pair{padding-bottom:var(--section)}
.pair-wide{grid-column:1/9}
.pair-wide img{aspect-ratio:16/11}
.pair-side{grid-column:9/13;display:flex;flex-direction:column;justify-content:space-between;gap:var(--block)}
.pair-line{font-style:italic;font-size:32px;line-height:1.2;font-weight:400}
.pair-tall{margin-top:160px}
.pair-tall img{aspect-ratio:8/11}

/* promises */
.promises{background:var(--lichen);padding:var(--section) 0}
.pr-title{grid-column:2/10;margin-bottom:var(--block)}
.pr-list{grid-column:2/13;display:grid;grid-template-columns:repeat(3,1fr)}
.pr-list li{padding:8px 32px 8px;border-left:1px solid rgba(35,37,28,.35);display:grid;gap:16px;align-content:start}
.pr-list li:first-child{border-left:0;padding-left:0}

/* where */
.where{padding:0 0 var(--section)}
.where-photo img{height:70vh;min-height:380px}
.where-panel{grid-column:7/12;background:var(--oyster);margin-top:-120px;position:relative;z-index:2;padding:48px;display:grid;gap:20px;justify-items:start}

/* contact band */
.contact-band{background:var(--mud);color:var(--shell);padding:var(--section) 0}
.ct-head{grid-column:1/8}
.ct-head .note{margin-bottom:32px}
.ct-body{grid-column:8/13;display:grid;gap:24px;align-content:end;justify-items:start}
.ct-phone{font:500 32px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;border-bottom:1px solid var(--lichen);padding:6px 0}
.ct-phone:hover{color:var(--lichen)}
.ct-address{font-size:18px}
.ct-actions{display:flex;flex-wrap:wrap;gap:16px}

/* footer */
.site-footer{background:var(--moss);color:var(--shell);padding:96px 0 40px}
.site-footer .grid{row-gap:48px}
.footer-name{grid-column:1/8;font-size:clamp(40px,5vw,64px);line-height:1;font-weight:400}
.footer-col{grid-column:span 2;display:grid;gap:10px;align-content:start;font-size:15px}
.footer-col a{text-decoration:none;padding:4px 0;display:inline-block}
.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-col ul{display:grid;gap:2px}
.footer-col .note{margin-bottom:4px}
.footer-legal{grid-column:1/-1;border-top:1px solid rgba(246,242,230,.3);padding-top:20px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,24px);background:var(--mud);color:var(--shell);font:500 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;border-left:3px solid var(--lichen);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* responsive */
@media (max-width:1100px){
  .steps{grid-column:1/-1}
  .footer-name{grid-column:1/-1}
  .footer-col{grid-column:span 3}
}
@media (max-width:900px){
  :root{--margin:24px;--section:72px;--block:32px;--gutter:20px}
  .grid>*,.svc-row .grid>*{grid-column:1/-1!important}
  .main-nav{display:none}
  .menu-toggle{display:block}
  .hero-copy{bottom:96px}
  .tagline{font-size:19px;margin-top:20px}
  .tagline span{background:var(--lichen);color:var(--mud);padding:3px 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.7}
  .hero-coords{max-width:60%;font-size:11px}
  .hero-scroll{display:none}
  .intro-body{padding-top:0}
  .intro-photo{max-width:440px;justify-self:end;width:80%}
  .svc-row .grid{row-gap:12px;padding-top:28px;padding-bottom:28px}
  .svc-link{justify-self:start}
  .pano img{aspect-ratio:16/9}
  .statement{min-height:0}
  .statement-copy{padding-bottom:var(--block)}
  .statement-photo{width:60%;justify-self:end;margin-top:32px}
  .statement-photo figcaption{position:static;transform:none;margin:0 0 12px}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;margin:0 calc(-1 * var(--margin));padding:0 var(--margin) 12px;scroll-padding-left:var(--margin)}
  .steps li{flex:0 0 78%;scroll-snap-align:start}
  .pair-side{gap:24px;margin-top:var(--block)}
  .pair-tall{margin-top:0;width:72%;align-self:flex-end}
  .pair-line{font-size:28px}
  .pr-list{grid-template-columns:1fr}
  .pr-list li{border-left:0;border-top:1px solid rgba(35,37,28,.35);padding:24px 0}
  .where-photo img{height:52vh}
  .where-panel{margin:-80px 0 0;padding:32px 24px}
  .ct-body{margin-top:var(--block)}
  .ct-phone{font-size:28px}
  .footer-col{grid-column:span 6!important}
  .footer-name,.footer-legal{grid-column:1/-1!important}
}
@media (max-width:480px){
  :root{--margin:20px}
  .h2{font-size:36px}
  .lead{font-size:20px}
  .footer-col{grid-column:1/-1!important}
  .ct-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .moss{font-weight:450!important}
  .hero-img{animation:none}
  .type.is-typing::after{display:none}
  .site-header,.btn .arrow,.svc-row,.toast{transition:none}
  .js-reveal .reveal img{clip-path:none}
}
/* revision */
/* intro: photo shares the rows with the text so the left side never sits empty */
.intro-head{grid-column:2/8;grid-row:1}
.intro-body{grid-column:3/8;grid-row:2;padding-top:40px}
.intro-photo{grid-column:9/13;grid-row:1/4;margin-top:0;align-self:start}

/* pair: quote fills the gap below the wide image, beside the dropped portrait */
.pair-grid{align-items:start}
.pair-wide{grid-column:1/9;grid-row:1}
.pair-tall{grid-column:9/13;grid-row:1/3;margin-top:160px}
.pair-line{grid-column:2/8;grid-row:2;margin-top:64px;max-width:22ch;font-size:clamp(28px,2.6vw,40px)}

@media (max-width:900px){
  .intro-head,.intro-body,.intro-photo,.pair-wide,.pair-tall,.pair-line{grid-row:auto!important}
  .intro-body{padding-top:24px}
  .intro-photo{margin-top:var(--block)}
  .pair-line{margin-top:32px;font-size:28px}
  .pair-tall{margin-top:32px;width:72%;justify-self:end}
}
/* revision */
/* where: caption claims the empty left side under the photograph */
.where .grid{align-items:start}
.where-panel{grid-row:1}
.where-cap{grid-column:2/6;grid-row:1;padding-top:20px;border-top:1px solid var(--hair);margin-top:24px;max-width:36ch}
.where{padding-bottom:calc(var(--section) - 32px)}
/* contact band: text starts at column 2, per the editorial grid */
.ct-head{grid-column:2/8}
.ct-body{grid-column:8/13}
@media (max-width:900px){
  .where-panel,.where-cap{grid-row:auto!important}
  .where-cap{margin-top:20px;padding-top:12px}
}
/* revision (/what-we-do) */
/* rentals photo: guarantee the image fills its half of the band */
.wd-rent-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd-rent-photo figcaption{z-index:1}
/* development: heading travels with the list so the left column never sits empty */
@media (min-width:901px){
  .wd-dev-head{position:sticky;top:112px;align-self:start}
  .wd-dev{padding-top:var(--section)}
}
/* annotations align to the editorial columns */
.wd-land-note{grid-column:1/3}
.wd-cta-note{grid-column:2/11;padding-top:0;margin-bottom:24px}
@media (max-width:900px){
  .wd-hero-photo{top:auto}
  .wd-hero{min-height:0;padding:112px 0 72px}
}

/* review fix */
.pair img,.where img{opacity:1!important;visibility:visible!important;transform:none!important;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.where{min-height:0!important;padding-top:clamp(64px,8vw,120px)!important;padding-bottom:clamp(64px,8vw,120px)!important}.where .grid{align-items:center}.pair .grid{align-items:end;gap:clamp(16px,3vw,48px)}
/* review fix */
.contact-band .display-l{font-size:clamp(2.6rem,5.2vw,5rem);line-height:1.02;max-width:12ch}.contact-band{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}.contact-band .grid{align-items:end}
/* review fix */
@media(max-width:600px){.hero-copy p{background:none!important;padding:0!important;box-shadow:none!important;text-shadow:0 1px 12px rgba(0,0,0,.45)}}
/* review fix */
.header-phone{letter-spacing:0.02em;font-variant-numeric:tabular-nums}.statement img{margin-bottom:clamp(48px,6vw,96px)}
/* review fix */
.wd-dev h2.h2{font-weight:600}.wd-dev .wd-dev-head{align-self:start;padding-top:0}
/* review fix */
.wd-rent{padding-top:96px;padding-bottom:96px}.wd-rent .wd-img{display:block;width:100%;height:100%;min-height:520px;object-fit:cover}@media(max-width:720px){.wd-rent{padding-top:0;padding-bottom:64px}.wd-rent .wd-img{min-height:0;aspect-ratio:4/3;height:auto}}
/* review fix */
.wd-land .wd-grid>*:first-child{min-width:180px;white-space:nowrap}
/* review fix */
@media(max-width:720px){.wd-hero .wd-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-top:32px}.wd-hero{padding-bottom:48px}}
/* review fix */
.wd-process .wd-grid [class*=involved],.wd-process .wd-grid small{font-size:13px;line-height:1.5;color:#3a3a2e}