/* ============================================================ FDL Photos Dark palette chosen deliberately: every listing photo is a bright white interior, so they glow against near-black and would wash out on white. Accent is pulled from the wood floors and brass fixtures in the work itself. ============================================================ */ :root{ --ink:#100E0C; --ink-2:#1A1613; --ink-3:#262019; --cream:#F4EFE7; --cream-dim:#A79E92; --brass:#C9A227; --brass-soft:#E0C46A; --danger:#E2725B; --serif:"Baskerville","Didot","Hoefler Text",Palatino,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif; --pad:clamp(1.25rem,5vw,5rem); --maxw:1400px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--cream); font-family:var(--sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:600;margin:0 0 1.1rem} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0} h1{font-size:clamp(2.4rem,5.5vw,4.4rem);letter-spacing:-.02em} h2{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.01em} h3{font-size:1.3rem} .lede{color:var(--cream-dim);font-size:clamp(1rem,1.5vw,1.15rem);max-width:52ch} p{margin:0 0 1rem} section{padding:clamp(4.5rem,10vw,9rem) var(--pad)} .wrap{max-width:var(--maxw);margin:0 auto} .tight{max-width:900px} /* ---------------- nav ---------------- */ header{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:1.1rem var(--pad); transition:background .4s,padding .4s,border-color .4s; border-bottom:1px solid transparent; } header.stuck{background:rgba(16,14,12,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--ink-3);padding:.7rem var(--pad)} .logo{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em} .logo b{color:var(--brass);font-weight:400} nav{display:flex;gap:2rem;align-items:center} nav a{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cream-dim);transition:color .25s} nav a:hover,nav a[aria-current="page"]{color:var(--cream)} .btn{display:inline-block;padding:.75rem 1.5rem;border:1px solid var(--brass);color:var(--brass); font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; transition:background .3s,color .3s;cursor:pointer;background:none;font-family:inherit} .btn:hover{background:var(--brass);color:var(--ink)} .btn-solid{background:var(--brass);color:var(--ink)} .btn-solid:hover{background:var(--brass-soft)} .nav-toggle{display:none;background:none;border:0;color:var(--cream);font-size:1.5rem;cursor:pointer;padding:.2rem .4rem} @media(max-width:900px){ nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--ink-2); flex-direction:column;justify-content:center;gap:2rem;transform:translateX(100%);transition:transform .35s} nav.open{transform:translateX(0)} nav a{font-size:1rem} .nav-toggle{display:block;z-index:101} /* A stuck header gains backdrop-filter, which makes it the containing block for the fixed nav, so once scrolled, the open menu collapses to the header's height (loses its background, links spill over the page). Drop the blur while the menu is open so the panel spans the viewport again. */ header.stuck:has(nav.open){backdrop-filter:none;-webkit-backdrop-filter:none} } /* ---------------- hero ---------------- */ .hero{position:relative;height:100svh;min-height:560px;padding:0;overflow:hidden} .hero picture,.hero img{width:100%;height:100%;object-fit:cover} .hero img{animation:slowzoom 18s ease-out forwards} @keyframes slowzoom{from{transform:scale(1.06)}to{transform:scale(1)}} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(16,14,12,.55) 0%,rgba(16,14,12,.12) 35%,rgba(16,14,12,.85) 100%)} .hero-copy{position:absolute;bottom:clamp(3rem,9vh,7rem);left:var(--pad);right:var(--pad);z-index:2;max-width:var(--maxw);margin:0 auto} .hero-copy h1{font-size:clamp(2.6rem,7vw,6rem);max-width:16ch} .hero-copy h1 em{font-style:italic;color:var(--brass-soft)} .hero-copy p{color:var(--cream-dim);max-width:44ch;margin:1.5rem 0 2.2rem;font-size:1.05rem} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} /* page header for inner pages */ .page-head{padding-top:clamp(8rem,16vh,11rem);padding-bottom:clamp(2rem,5vw,3rem)} /* ---------------- promise strip ---------------- */ .promise{background:var(--ink-2);border-block:1px solid var(--ink-3);padding:clamp(2.5rem,5vw,3.5rem) var(--pad)} .promise .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem} .promise-item{display:flex;gap:1rem;align-items:flex-start} .promise-item .num{font-family:var(--serif);font-size:2rem;color:var(--brass);line-height:1;white-space:nowrap;flex:0 0 auto} .promise-item h3{font-size:1rem;font-family:var(--sans);font-weight:600;margin-bottom:.3rem} .promise-item p{margin:0;color:var(--cream-dim);font-size:.9rem;line-height:1.55} /* ---------------- portfolio ---------------- */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem} .filters{display:flex;gap:.55rem;flex-wrap:wrap} .chip{padding:.5rem 1.05rem;border:1px solid var(--ink-3);background:none;color:var(--cream-dim); font-family:inherit;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer; transition:all .25s;border-radius:2rem} .chip:hover{color:var(--cream);border-color:var(--cream-dim)} .chip.active{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600} .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.2vw,1.1rem)} .tile{position:relative;overflow:hidden;cursor:pointer;background:var(--ink-2)} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)} .tile:hover img{transform:scale(1.05)} .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,14,12,.8));opacity:0;transition:opacity .4s} .tile:hover::after{opacity:1} .tile .cap{position:absolute;left:1.1rem;bottom:1rem;z-index:2;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;opacity:0;transform:translateY(8px);transition:all .4s} .tile:hover .cap{opacity:1;transform:translateY(0)} .tile.w4{grid-column:span 4;aspect-ratio:3/2} .tile.w3{grid-column:span 3;aspect-ratio:3/2} .tile.w2{grid-column:span 2;aspect-ratio:2/2.2} @media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} .tile.w4,.tile.w3{grid-column:span 2;aspect-ratio:3/2} .tile.w2{grid-column:span 1;aspect-ratio:1/1.2} } @media(max-width:560px){ .grid{grid-template-columns:1fr} .tile.w4,.tile.w3,.tile.w2{grid-column:span 1;aspect-ratio:3/2} } .empty-state{grid-column:1/-1;border:1px dashed var(--ink-3);padding:4rem 2rem;text-align:center;color:var(--cream-dim)} .empty-state strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--cream);margin-bottom:.5rem;font-weight:400} /* ---------------- pricing ---------------- */ .pricing{background:var(--ink-2);border-block:1px solid var(--ink-3)} .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:3rem} .tier{border:1px solid var(--ink-3);padding:2.4rem 2rem;position:relative;transition:border-color .3s,transform .3s;background:var(--ink)} .tier:hover{border-color:var(--brass);transform:translateY(-4px)} /* Clickable pricing/home tiles → package landing pages. The ::after stretches over the whole .tier (which is position:relative) so the card is clickable. */ .tier-link{display:inline-block;margin-top:1.6rem;color:var(--brass);font-size:.9rem;font-weight:600} .tier-link::after{content:"";position:absolute;inset:0} .tier:has(.tier-link){cursor:pointer} .tier.feature{border-color:var(--brass)} .tier.recommended{border-color:var(--brass)} .tier.recommended::before{content:"Recommended";position:absolute;top:-.68rem;left:2rem;background:var(--brass);color:var(--ink); font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.25rem .7rem} .tier.feature::before{content:"Most booked";position:absolute;top:-.68rem;left:2rem;background:var(--brass);color:var(--ink); font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.25rem .7rem} .tier h3{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:.04em} .tier .sqft{color:var(--cream-dim);font-size:.85rem;margin:.3rem 0 1.4rem} .tier .price{font-family:var(--serif);font-size:3rem;color:var(--brass);line-height:1} .tier ul{list-style:none;padding:0;margin:1.6rem 0 0;font-size:.9rem;color:var(--cream-dim)} .tier li{padding:.5rem 0 .5rem 1.4rem;position:relative;border-top:1px solid var(--ink-3)} .tier li::before{content:"—";position:absolute;left:0;color:var(--brass)} .addons{margin-top:3.5rem;border-top:1px solid var(--ink-3);padding-top:2.5rem} .addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:.5rem 3rem;margin-top:1.5rem} .addon{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--ink-3);font-size:.92rem} .addon span:last-child{color:var(--brass);font-weight:600;white-space:nowrap} /* ---------------- split / services ---------------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} @media(max-width:900px){.split{grid-template-columns:1fr}} .split img{width:100%;aspect-ratio:4/5;object-fit:cover} .svc-list{margin-top:2rem} .svc{border-top:1px solid var(--ink-3);padding:1.4rem 0} .svc h3{font-size:1.05rem;font-family:var(--sans);font-weight:600;margin-bottom:.35rem} .svc p{margin:0;color:var(--cream-dim);font-size:.92rem} /* ---------------- areas ---------------- */ .areas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem} .area{border:1px solid var(--ink-3);padding:.55rem 1.1rem;font-size:.85rem;color:var(--cream-dim);transition:all .25s} .area:hover{border-color:var(--brass);color:var(--brass)} /* ---------------- forms ---------------- */ .form{display:grid;gap:1.4rem;margin-top:2.5rem;max-width:720px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} @media(max-width:640px){.row2{grid-template-columns:1fr}} .field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:.5rem} .field input,.field select,.field textarea{ width:100%;background:var(--ink-2);border:1px solid var(--ink-3);color:var(--cream); padding:.85rem 1rem;font-family:inherit;font-size:.95rem;transition:border-color .25s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)} .field textarea{resize:vertical;min-height:130px} .field .err{color:var(--danger);font-size:.8rem;margin-top:.4rem} .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-top:.6rem} .check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--cream-dim);cursor:pointer} .check input{width:auto;accent-color:var(--brass);margin-top:.25rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .notice{border:1px solid var(--brass);background:rgba(201,162,39,.08);padding:1.4rem 1.6rem;margin-bottom:2rem} .notice strong{color:var(--brass);display:block;margin-bottom:.3rem;font-family:var(--serif);font-size:1.3rem;font-weight:400} /* ---------------- cta / footer ---------------- */ .cta{text-align:center;background:var(--ink-2);border-top:1px solid var(--ink-3)} .cta .lede{margin:0 auto 2.4rem} .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} footer{padding:3rem var(--pad);border-top:1px solid var(--ink-3);font-size:.82rem;color:var(--cream-dim)} footer .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center} footer nav{gap:1.2rem;flex-wrap:wrap} .foot-contact{margin-top:.55rem;display:flex;gap:1.2rem;flex-wrap:wrap} .foot-contact a{color:var(--cream)} .foot-contact a:hover{color:var(--brass)} /* ---------------- lightbox ---------------- */ .lb{position:fixed;inset:0;background:rgba(8,7,6,.96);z-index:200;display:none;align-items:center;justify-content:center;padding:2rem} .lb.open{display:flex} .lb img{max-width:92vw;max-height:86vh;object-fit:contain} .lb-close{position:absolute;top:1.4rem;right:1.8rem;font-size:2rem;color:var(--cream-dim);cursor:pointer;background:none;border:0;line-height:1} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--cream-dim);font-size:2.6rem;cursor:pointer;padding:1rem;transition:color .25s} .lb-nav:hover{color:var(--brass)} .lb-prev{left:.5rem}.lb-next{right:.5rem} .lb-count{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);font-size:.75rem;letter-spacing:.15em;color:var(--cream-dim)} /* ---------------- mobile call bar ---------------- */ .callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--brass);color:var(--ink); text-align:center;padding:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem} @media(max-width:700px){.callbar{display:block}footer{padding-bottom:5rem}} /* ---------------- reveal ---------------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero img{animation:none} } /* --------------------------------------------------------------- Video: click-to-load YouTube facade The poster fills a 16:9 box; the real iframe replaces it on click and inherits the same box, so nothing shifts when it loads. --------------------------------------------------------------- */ .video-embed{position:relative;aspect-ratio:16/9;background:var(--ink-2);overflow:hidden} /* As a grid tile the video spans the full six columns and takes 16:9, the native aspect of the footage. Left at w4's 3/2 the player is shorter than its tile and leaves a black band underneath. */ .tile.video-tile{grid-column:span 6;aspect-ratio:16/9} .tile.video-tile .video-embed{position:absolute;inset:0;aspect-ratio:auto;height:100%} @media(max-width:900px){.tile.video-tile{grid-column:span 2}} @media(max-width:560px){.tile.video-tile{grid-column:span 1}} /* The tile's hover zoom would drift the poster under a static play button. */ .tile.video-tile:hover img{transform:none} /* .tile::after is a full-size hover gradient. It is painted after the tile's content, so once the poster is swapped for the YouTube iframe it sits on top and eats every click, so the video would play but never pause. The play button escaped it only because .video-play-icon carries z-index:1. A video tile has no use for a hover gradient, so drop it outright, and stop the caption intercepting clicks over the player. */ .tile.video-tile::after{content:none} .tile.video-tile .cap{pointer-events:none} .tile.video-tile{cursor:default} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block} .video-play picture,.video-play img,.video-blank{width:100%;height:100%;object-fit:cover;display:block} .video-blank{background:var(--ink-3)} /* Darken the poster so the play control keeps contrast over a bright white interior, the exact problem the dark theme exists to solve. */ .video-play::after{content:"";position:absolute;inset:0;background:rgba(8,7,6,.35);transition:background .3s} .video-play:hover::after{background:rgba(8,7,6,.15)} .video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:clamp(56px,7vw,84px);aspect-ratio:1;border-radius:50%; background:rgba(8,7,6,.55);border:1px solid var(--brass); display:grid;place-items:center;transition:background .3s,transform .3s;z-index:1} .video-play-icon::before{content:"";border-style:solid; border-width:.62em 0 .62em 1.02em;border-color:transparent transparent transparent var(--brass-soft); font-size:clamp(15px,1.8vw,22px);margin-left:.22em} .video-play:hover .video-play-icon{background:rgba(8,7,6,.8);transform:translate(-50%,-50%) scale(1.08)} .video-play:focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* Legal pages (Privacy, Terms): long readable prose */ .legal{padding:1rem 0 4rem} .legal .wrap{max-width:820px} .legal h2{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--cream);margin:2.6rem 0 .7rem} .legal p{color:var(--cream-dim);line-height:1.75;margin:0 0 1rem;max-width:75ch} .legal ul{color:var(--cream-dim);line-height:1.7;margin:0 0 1.2rem 1.3rem;max-width:75ch} .legal li{margin:.35rem 0} .legal a{color:var(--brass)} .legal strong{color:var(--cream)} .legal .nowrap{white-space:nowrap} .legal .legal-foot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--ink-3);color:var(--cream-dim);font-size:.9rem} /* --------------------------------------------------------------- Listing map (Leaflet) --------------------------------------------------------------- The map is deliberately NOT darkened. Inverting the tiles was tried and looked murky, and a legible map matters more here than palette consistency — it is the one element on the page a visitor actually operates. It reads as a light card set into the dark page. */ .listing-map{margin:0} .listing-map-frame{position:relative;height:clamp(260px,42vh,460px); border:1px solid var(--ink-3);background:var(--ink-2)} .listing-map-canvas{position:absolute;inset:0;z-index:0} /* Leaflet paints its own white background behind the tiles. */ .leaflet-container{background:var(--ink-2);font-family:var(--sans)} /* The brass pin, matching the site rather than Leaflet's blue teardrop. */ .listing-map-pin{border-radius:50%;background:var(--brass);border:2px solid #fff; box-shadow:0 0 0 5px rgba(197,160,74,.3),0 2px 8px rgba(0,0,0,.45)} .listing-map-open{position:absolute;right:.9rem;bottom:.9rem;z-index:500; font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream); background:rgba(16,14,12,.85);border:1px solid var(--ink-3);padding:.5rem .75rem; text-decoration:none;transition:background .25s} .listing-map-open:hover{background:var(--ink)} .listing-map figcaption{margin-top:.7rem;font-size:.8rem;color:var(--cream-dim)} /* Leaflet's own chrome, toned to the site. */ .leaflet-control-attribution{background:rgba(255,255,255,.85)!important;font-size:.65rem!important} .leaflet-control-zoom a{color:var(--ink)!important} /* Share controls on the public listing page. Sits inside .hero-cta and .cta-row, which already handle spacing, so this only needs to keep the buttons together and let them wrap on a phone. */ .share-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} /* Smaller than a page CTA on purpose. Sharing is a secondary action next to the photographs; at full .btn size three of them shout louder than the house does. Applied to .btn rather than button.btn so the and the