(it used to be an h2, which left the listing pages with no top-level heading at all). Same look as before. */ #detail h1,#detail h2{font-family:'Lora',serif;font-weight:600;font-size:32px;line-height:1.2;margin:0 0 18px} .gallery-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:16px} .gallery-head .eyebrow{margin:0} .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .gallery-main,.gallery-grid > button{border:none;background:none;padding:0;margin:0;cursor:pointer;font:inherit;width:100%;display:block} .gallery-main{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden} .gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .gallery-grid > button{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden} /* click affordance: same gentle darkening + slow zoom as the front-page listings */ .gallery-main img,.gallery-grid > button img{transition:transform .5s cubic-bezier(.33,.05,.2,1)} .gallery-main::after,.gallery-grid > button::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(58,50,43,.18);opacity:0;transition:opacity .25s ease;pointer-events:none} .gallery-main:hover::after,.gallery-main:focus-visible::after,.gallery-grid > button:hover::after,.gallery-grid > button:focus-visible::after{opacity:1} .gallery-main:hover img,.gallery-main:focus-visible img,.gallery-grid > button:hover img,.gallery-grid > button:focus-visible img{transform:scale(1.045)} @media (prefers-reduced-motion: reduce){.gallery-main img,.gallery-grid > button img{transition:none}.gallery-main:hover img,.gallery-main:focus-visible img,.gallery-grid > button:hover img,.gallery-grid > button:focus-visible img{transform:none}} .gallery-more-overlay{position:absolute;z-index:2;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand);font-size:15px;font-weight:700;padding:13px 22px;border-radius:var(--r-pill);box-shadow:0 12px 28px rgba(0,0,0,.32);white-space:nowrap} .gallery-more-overlay svg{flex:none} .detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;margin-top:36px} .detail-desc{font-size:15px;color:var(--ink-soft);line-height:1.7} .detail-stats{display:flex;gap:26px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)} .detail-stats .v{font-family:'Lora',serif;font-weight:700;font-size:22px;line-height:1} .detail-stats .k{font-size:12.5px;color:var(--muted);margin-top:4px} .detail-note{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;height:fit-content} .detail-note .label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .detail-note .body{font-size:14.5px;line-height:1.6;color:var(--brand)} .detail-note .body a{color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere} .lightbox{position:fixed;inset:0;background:rgba(26,21,16,.92);z-index:300;display:none;align-items:center;justify-content:center;padding:24px} .lightbox.open{display:flex} .lightbox-img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)} /* Controls sit on top of the photo, so they need to read against both a bright and a dark image: dark translucent fill + a white hairline ring + a drop shadow. Hover/focus inverts to solid white so the target is unmistakable. */ .lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(28,23,17,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;line-height:1;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#fff;border-color:#fff;color:var(--brand)} .lightbox-close:focus-visible,.lightbox-prev:focus-visible,.lightbox-next:focus-visible{outline:2px solid #fff;outline-offset:3px} .lightbox-close{top:20px;right:20px;width:46px;height:46px;font-size:26px} .lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:54px;height:54px} /* the arrow glyphs are optically light — nudge them off-centre and up-weight */ .lightbox-prev{left:20px;padding-right:3px} .lightbox-next{right:20px;padding-left:3px} .lightbox-prev:hover,.lightbox-next:hover{transform:translateY(-50%) scale(1.06)} .lightbox-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:500;background:rgba(28,23,17,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:999px} #team{padding:0 0 var(--sec);display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center} #team h2{font-family:'Lora',serif;font-weight:600;font-size:38px;line-height:1.16;margin:14px 0 0} #team p{max-width:600px;font-size:16px;line-height:1.65;color:var(--ink-soft);margin:22px 0 0} .team-stats{display:flex;gap:40px;margin-top:34px} .team-stats .v{font-family:'Lora',serif;font-weight:700;font-size:34px;line-height:1} .team-stats .k{font-size:13px;color:var(--muted);margin-top:4px} .team-grid{display:grid;grid-template-columns:1fr;gap:18px;width:100%} /* staggered pair: the top card sits next to the text, the lower one steps right, so the column reads as a diagonal instead of a block pinned to one edge */ .team-grid > div{width:280px} .team-grid > div:last-child{justify-self:end} .team-photo{aspect-ratio:4/5;border-radius:16px;overflow:hidden} .team-photo img{width:100%;height:100%;object-fit:cover} .avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),#6E5D48);color:#fff;font-family:'Lora',serif;font-weight:600;font-size:44px} /* An

now — reset the default heading margin/size so it looks unchanged. */ .team-name{margin:12px 0 0;font-size:15px;font-weight:600;line-height:1.35} .team-role{font-size:13px;color:var(--muted);margin-top:2px} #book{padding:0 0 110px} .book-panel{background:var(--panel);border-radius:var(--r-block);padding:60px 56px;color:var(--brand);position:relative;overflow:hidden} .book-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .book-panel h2{font-family:'Lora',serif;font-weight:600;font-size:42px;line-height:1.12;margin:14px 0 8px;max-width:560px} .book-panel p{max-width:480px;font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 34px} form.quote{width:100%} .quote-bar{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 8px 8px 10px;display:flex;align-items:center;width:100%;box-shadow:0 20px 40px -24px rgba(58,50,43,.35);flex-wrap:wrap;gap:0} .qfield{flex:1;padding:8px 18px;border-right:1px solid var(--line);min-width:140px} .qfield:last-of-type{border-right:none} .qfield label{display:block;font-size:11px;font-weight:600;color:var(--brand)} .qfield input{border:none;outline:none;font-size:13px;color:var(--brand);width:100%;padding:2px 0 0;font-family:'Inter',sans-serif;background:transparent} .qfield input::placeholder{color:var(--faint)} .qfield input.is-invalid::placeholder{color:#D26060} .qsubmit{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--brand);padding:15px 26px;border-radius:var(--r-pill);font-size:15px;font-weight:600;white-space:nowrap;border:none;cursor:pointer;font-family:'Inter',sans-serif;margin:6px} /* Step 2 — revealed only after the property details are filled in. */ .quote-step2{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px 26px 26px;margin-top:14px;box-shadow:0 20px 40px -26px rgba(58,50,43,.35)} .quote-step2.is-opening{overflow:hidden;transition:height .38s cubic-bezier(.22,.61,.36,1),opacity .38s ease;opacity:0} .quote-step2.is-opening.is-open{opacity:1} .q2-head{font-family:'Lora',serif;font-size:20px;color:var(--brand);margin:0 0 16px;max-width:none} .q2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .q2field{display:block;margin-bottom:14px} .q2-grid .q2field{margin-bottom:0} .q2field label{display:block;font-size:11px;font-weight:600;color:var(--brand);margin-bottom:5px} .q2-opt{font-weight:500;color:var(--faint)} .q2field input,.q2field textarea{width:100%;border:1px solid #E7DFD0;border-radius:12px;background:#FAF6EE;padding:11px 13px;font-size:14px;color:var(--brand);font-family:'Inter',sans-serif;outline:none;transition:border-color .16s ease,background .16s ease} .q2field textarea{resize:vertical;min-height:74px;line-height:1.5} .q2field input:focus,.q2field textarea:focus{border-color:var(--brand);background:#fff} .q2field input::placeholder,.q2field textarea::placeholder{color:var(--faint)} .q2field input.is-invalid{border-color:#D26060;background:#FDF4F4} .q2-error{font-size:13px;color:#C0483F;margin:0 0 12px;max-width:none} .q2submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:var(--brand);padding:14px 26px;border-radius:var(--r-pill);font-size:15px;font-weight:600;border:none;cursor:pointer;font-family:'Inter',sans-serif;width:100%} .q2submit:disabled{cursor:default} /* while sending: the paper plane keeps taking off */ .q2submit.is-sending svg{animation:plane-fly 1s cubic-bezier(.4,0,.25,1) infinite} @keyframes plane-fly{ 0%{transform:translate(-8px,5px);opacity:0} 22%{opacity:1} 72%{transform:translate(9px,-6px);opacity:1} 100%{transform:translate(24px,-15px);opacity:0} } /* --- form <-> thank-you swap (no page reload) --- */ .quote-shell{position:relative} .quote-shell.is-switching{overflow:hidden;transition:height .44s cubic-bezier(.22,.61,.36,1)} .quote-shell .is-leaving{opacity:0;transform:translateY(-10px) scale(.985);transition:opacity .25s ease,transform .25s ease} .quote-shell .is-entering{animation:qd-rise .5s cubic-bezier(.22,.61,.36,1) backwards} @keyframes qd-rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} .quote-done{background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px 30px 40px;text-align:center;box-shadow:0 20px 40px -26px rgba(58,50,43,.35)} /* Success mark: the navy disc springs in, a ring pulses out from behind it, then the white check draws across. */ .qd-icon{position:relative;display:block;width:72px;height:72px;margin:0 auto 22px} .qd-icon::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:qd-pulse .95s .26s cubic-bezier(.2,.7,.3,1) forwards} .qd-icon svg{position:relative;display:block;width:100%;height:100%} .qd-disc{transform-box:fill-box;transform-origin:center;animation:qd-pop .6s cubic-bezier(.34,1.5,.5,1) backwards} .qd-check{stroke-dasharray:29;stroke-dashoffset:29;animation:qd-draw .42s .3s cubic-bezier(.65,0,.35,1) both} @keyframes qd-pop{0%{transform:scale(.25);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:1}} @keyframes qd-pulse{0%{transform:scale(.95);opacity:.4}100%{transform:scale(1.8);opacity:0}} @keyframes qd-draw{to{stroke-dashoffset:0}} /* text below comes up just behind the mark, so the card lands as one beat */ .quote-done .qd-title{animation:qd-up .5s .2s cubic-bezier(.22,.61,.36,1) backwards} .quote-done .qd-text{animation:qd-up .5s .28s cubic-bezier(.22,.61,.36,1) backwards} .quote-done .qd-again{animation:qd-up .5s .36s cubic-bezier(.22,.61,.36,1) backwards} @keyframes qd-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .book-panel .qd-title{font-family:'Lora',serif;font-weight:600;font-size:27px;line-height:1.15;color:var(--brand);margin:0 0 10px} .book-panel .qd-text{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 auto 24px;max-width:400px} .qd-again{display:inline-flex;align-items:center;gap:9px;background:var(--tint);color:var(--brand);border:1px solid #E7DFD0;padding:13px 24px;border-radius:var(--r-pill);font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .18s ease} .qd-again:hover{background:#EDE5D6} @media (prefers-reduced-motion:reduce){ .q2submit.is-sending svg{animation:none} .quote-shell.is-switching{transition:none} .quote-shell .is-leaving{transition:none} .quote-shell .is-entering{animation:none} .qd-icon::after{display:none} .qd-disc,.quote-done .qd-title,.quote-done .qd-text,.quote-done .qd-again{animation:none} .qd-check{animation:none;stroke-dashoffset:0} } .book-badges{display:flex;gap:26px;margin-top:26px;font-size:13.5px;color:var(--muted);flex-wrap:wrap} .book-badges span{display:inline-flex;align-items:center;gap:7px} .book-note{font-size:13px;color:var(--muted);margin-top:22px} .book-note-fail{color:#B0443B} .book-note-fail a{color:var(--brand);text-decoration:underline} footer{border-top:1px solid var(--line);padding:44px 0 60px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px} footer .brand-mark{display:flex;align-items:center;gap:9px;color:var(--brand)} footer .brand-mark .logo-mark{width:26px;height:26px} footer .brand-mark span.name{font-family:'Lora',serif;font-weight:600;font-size:21px;letter-spacing:-.015em} footer .tagline{font-size:13px;color:var(--faint);margin:16px 0 0;max-width:220px;line-height:1.6} footer .cols{display:flex;gap:64px;flex-wrap:wrap} footer .col{display:flex;flex-direction:column;gap:10px;font-size:14px} footer .col .h{font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em} @media (max-width: 880px){ .wrap{padding:0 22px} :root{--sec:64px} /* Sticky header. It stays in normal flow (sticky, not fixed) so nothing jumps when it pins. The negative margin cancels .wrap's 22px padding so the dark bar can bleed to both screen edges once .scrolled is on. */ header{position:sticky;top:0;margin:0 -22px;padding:14px 22px; transition:background .25s ease,box-shadow .25s ease} header.scrolled{background:var(--panel);box-shadow:0 6px 22px rgba(58,50,43,.20)} /* Hairline under the header so the nav reads as its own band. It fades out at both ends instead of hitting the screen edges — a hard full-width rule looks like a template divider. Hidden once .scrolled is on: the dark bar is already doing the separating. */ header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(58,50,43,.13) 22%,rgba(58,50,43,.13) 78%,transparent); transition:opacity .25s ease} header.scrolled::after{opacity:0} /* One color flip does both halves of the lockup: the wordmark inherits it and the glyph strokes with currentColor. */ header.scrolled .logo{color:var(--brand)} header.scrolled .btn-cta{background:var(--brand);color:#fff} header.scrolled .btn-back{color:var(--brand);border-color:var(--accent-strong)} .logo{gap:10px} .logo .logo-mark{width:25px;height:25px} .logo-text{font-size:20.5px} /* Mobile hero order: eyebrow -> headline -> text -> image -> CTAs. The CTAs sit inside the text

in the HTML, so display:contents dissolves that wrapper and lets .hero order all five pieces itself. Spacing then comes from each element's own margin, not the grid gap. The top padding is the breathing room between the sticky header and the eyebrow — without it the two read as one crammed block on mobile. */ .hero{grid-template-columns:1fr;gap:0;padding:38px 0 4px} .hero > div:not(.hero-media){display:contents} .hero .eyebrow{justify-self:start;font-size:11px;gap:6px} .hero .eyebrow lord-icon{width:27px !important;height:27px !important} /* The explicit breaks keep the statement to three controlled lines. */ .hero h1{font-size:clamp(35px,10.8vw,46px);line-height:1.1;letter-spacing:-.04em;margin-top:18px} .hero h1 br.br-mobile{display:inline} .hero h1 em{font-size:1em} .hero p{font-size:15px;line-height:1.6;margin-top:14px} /* Same fanned stack as desktop, but sized so nothing can leave the screen. .hero-media is sized to the card (not the full column) so the badge stays anchored to the image. The card is pulled well inside the .wrap padding to leave room for what sticks out: the fan leans right, the badge sticks out left, and the rotated cards bulge a few px on both sides. translateX(-6px) re-centres the group optically, since the fan is right-heavy. padding-bottom reserves the fan's drop so the CTAs clear it. */ .hero-media{order:1;width:min(360px,calc(100% - 56px));margin:36px auto 0;padding-bottom:40px;transform:translateX(-6px)} .hero-ctas{order:2;margin-top:26px;gap:10px} .hero-media .frame{max-width:none;width:100%;margin:0;aspect-ratio:1/1} /* Tighter fan than desktop — less travel and less rotation, so the widest card's rotated corner still lands inside the viewport. */ .stack-card[data-stack="1"]{transform:translate(7px,9px) rotate(3deg) scale(.965)} .stack-card[data-stack="2"]{transform:translate(12px,17px) rotate(-4deg) scale(.94)} .stack-card[data-stack="3"]{transform:translate(17px,24px) rotate(5deg) scale(.915)} .stack-card.is-dealing{animation-name:deal-to-back-mobile} .btn-fill,.btn-outline{padding:13px 22px;font-size:14.5px} /* Badge straddles the image's bottom-left corner instead of covering the photo. `bottom` is measured from .hero-media's padding box, so the 46px reserved for the fan is added back to sit it on the image edge (40-14). */ .floating-card{left:-18px;bottom:26px;right:auto;padding:8px 11px;gap:9px;border-radius:12px} .floating-card .ic{width:26px;height:26px;border-radius:8px} .floating-card .ic svg{width:14px;height:14px} .floating-card .big{font-size:14px} .floating-card .small{font-size:10.5px} .steps{grid-template-columns:1fr 1fr} /* Desktop-only. On mobile the booking CTA is already close by (nav + hero), so this repeat block only adds scroll length. */ .process-cta{display:none} /* Two-up grid on mobile, led by one full-width hero card. With the first card full width the rest pair up; a trailing card left alone (even total) stretches to full width too. */ .listings{gap:22px 12px} .listing,.listing.wide{width:calc((100% - 12px)/2)} .listing.wide .listing-media{aspect-ratio:1/1} .listing:first-child{width:100%} .listing:first-child .listing-media{aspect-ratio:3/2} .listing:last-child:nth-child(even){width:100%} .listing:last-child:nth-child(even) .listing-media{aspect-ratio:3/2} /* Narrow cards can't fit title + tag on one line: let the tag drop below. */ .listing-meta{margin-top:9px;gap:4px 6px;flex-wrap:wrap;justify-content:flex-start} .listing-title{font-size:14px} .listing-tag{font-size:10.5px;padding:2px 7px} .listing-subtitle{font-size:12.5px} #video{padding-bottom:var(--sec)} .video-copy{margin-bottom:28px} .video-copy h2{font-size:34px} .video-copy p{margin:16px 0 0} .video-feature{aspect-ratio:4/3} .video-mark{left:18px;bottom:18px} #team{grid-template-columns:1fr} /* stacked layout: photos go back side by side with their own aspect ratio */ .team-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:18px;max-width:none} .team-grid > div{width:auto} .team-grid > div:last-child{justify-self:auto} .team-photo{aspect-ratio:3/4} .gallery-head{flex-direction:column;align-items:flex-start;gap:10px} .gallery{grid-template-columns:1fr;height:auto} .gallery-main{aspect-ratio:4/3} .gallery-grid > button{aspect-ratio:1} .gallery-more-overlay{left:12px;right:12px;bottom:12px;justify-content:center;text-align:center;white-space:normal;line-height:1.25;font-size:13px;padding:11px 12px;gap:6px} .gallery-more-overlay svg{display:none} .detail-grid{grid-template-columns:1fr} /* still comfortably tappable (44px+) and legible at arm's length */ .lightbox-prev,.lightbox-next{width:46px;height:46px;font-size:22px} .lightbox-close{width:44px;height:44px;font-size:24px} .book-panel{padding:36px 24px} .book-panel h2{font-size:30px} .quote-bar{flex-direction:column;align-items:stretch;border-radius:20px;padding:14px} .qfield{border-right:none;border-bottom:1px solid var(--line);padding:10px 6px} .qsubmit{justify-content:center;margin:8px 0 0} .quote-step2{padding:20px 16px 22px;border-radius:20px} .quote-done{padding:34px 20px 30px;border-radius:20px} .book-panel .qd-title{font-size:23px} .qd-again{width:100%;justify-content:center} .q2-grid{grid-template-columns:1fr} .hero p, .sec-head p, #team p, .book-panel p, .book-panel h2{max-width:100%} nav.pillnav{display:none} footer{flex-direction:column} } @media (max-width: 560px){ /* full-width stacked CTAs — bigger tap targets, clearer primary action */ .hero-ctas{flex-direction:column;align-items:stretch} .hero-ctas .btn-fill,.hero-ctas .btn-outline{display:flex;justify-content:center;padding:14px 22px;text-align:center} .steps{grid-template-columns:1fr} .sec-head h2, #team h2{font-size:28px} .video-copy h2{font-size:30px} .book-panel h2{font-size:26px} } /* --- first-load intro animation: camera click -> flash -> zoom into lens -> white --- */ body.intro-playing{overflow:hidden;height:100%} #introOverlay{position:fixed;inset:0;z-index:9999;background:#fff;overflow:hidden} #introOverlay .intro-icon{position:absolute;left:50%;top:50%;width:180px;height:180px;opacity:0} #introOverlay .intro-flash,#introOverlay .intro-whiteout{position:absolute;inset:0;background:#fff;pointer-events:none;opacity:0;will-change:opacity} @media (prefers-reduced-motion: reduce){ #introOverlay{display:none} } /* Site content is simply hidden while the intro overlay is up, then shown instantly. It used to fade in as a whole block, which doubled up with the per-element scroll reveal below — the hero faded in twice. The reveal animation is now the only fade. */ body.intro-page .wrap{opacity:0} body.intro-page .wrap.is-visible{opacity:1} /* --- scroll reveal: elements pop up from below and fade in --- Implemented as an animation (not a transition) so that once it has played the element's own transform rules (e.g. .step:hover lift) take over again. "backwards" fill keeps the element hidden during its stagger delay. */ .reveal{opacity:0} .reveal.is-in{opacity:1;animation:reveal-up 1.15s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--reveal-delay,0ms)} @keyframes reveal-up{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion: reduce){ .reveal{opacity:1} .reveal.is-in{animation:none} }