in index.html and these two rules. */
.hero__cta {
margin-top: clamp(1.75rem, 4vw, 2.75rem);
display: flex;
align-items: center;
gap: clamp(1.25rem, 3.5vw, 2.75rem);
flex-wrap: wrap;
}
/* Neighbourhood links across the foot of the hero. */
.hero__places {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(1rem, 3.5vw, 3rem);
list-style: none;
margin-top: clamp(2.5rem, 6vh, 4.5rem);
padding-top: var(--sp-4);
border-top: 1px solid var(--line-light);
}
.hero__places a {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 2.1vw, 1.6rem);
color: rgba(250, 247, 242, 0.86);
transition: color var(--dur) var(--ease);
}
.hero__places a:hover, .hero__places a:focus-visible { color: var(--aqua); }
/* Below 768 the four names are a fixed two by two rather than a row that wraps
where it happens to run out. This is a layout-shift fix, not a taste one.
The names are set in the display italic, and Georgia, the fallback the page
paints with before Cormorant arrives, is wider: with the fallback the row
wraps to two lines at every phone width, and with Cormorant loaded it drops
to one from 356px up. The row therefore collapsed from 105px to 57px at the
font swap, and because `.hero` is `align-items: flex-end` under a
`min(62svh, 620px)` floor, losing 48px took the inner from 516 to 468, under
the floor, so flex-end pushed the whole hero content down 35px. Measured on
the home page that was a CLS of 0.295 at 360, 375 and 390.
Reserving a height and clipping would fix the number and risk the content:
the one-line layout only just fits, 313px of text in a 316px row at 356px,
so a reserved 57px is three pixels from cutting a name in half on a slightly
different build of the font. A grid of two columns cannot collapse instead
of wrapping, so both font states are two rows and the only movement left is
the line-height difference between the two faces. That is what 320px already
did, where the fallback and the loaded font both wrapped and CLS was 0.003.
Measured after: 0.009 at 360, 0.009 at 375, 0.009 at 390, and nothing is
ever hidden, so a longer list of neighbourhoods simply makes the block
taller. From 768 up the row is one line in both faces and stays a flex row. */
@media (max-width: 767px) {
.hero__places {
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: start;
}
}
.hero__scroll {
position: absolute;
right: var(--gutter);
bottom: clamp(2.5rem, 7vh, 5rem);
z-index: 1;
display: none;
align-items: center;
gap: 0.75rem;
font-size: var(--fs-overline);
letter-spacing: var(--track-overline);
text-transform: uppercase;
color: rgba(250, 247, 242, 0.72);
}
@media (min-width: 1080px) { .hero__scroll { display: flex; } }
.hero__scroll::after {
content: "";
width: 1px; height: 3.5rem;
background: linear-gradient(180deg, rgba(250,247,242,0.7), rgba(250,247,242,0));
}
/* ==========================================================================
8. PAGE HERO (interior pages)
========================================================================== */
.page-hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: clamp(320px, 46vh, 520px);
background: var(--navy-deep);
color: var(--shell);
overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(7,33,52,0.62) 0%, rgba(7,33,52,0.3) 45%, rgba(7,33,52,0.85) 100%);
}
.page-hero__inner {
width: 100%;
padding-block: clamp(3rem, 8vh, 5.5rem);
}
.page-hero__title {
font-size: var(--fs-h1);
color: var(--shell);
max-width: 18ch;
}
.page-hero .overline { color: var(--brass-soft); }
.page-hero__lede {
margin-top: var(--sp-4);
max-width: 52ch;
font-size: var(--fs-lede);
font-weight: 300;
color: rgba(250, 247, 242, 0.88);
}
/* Plain variant — no photograph, ivory ground, for text-first pages. */
.page-hero--plain {
min-height: 0;
background: var(--shell-warm);
color: var(--ink);
}
.page-hero--plain::before { display: none; }
.page-hero--plain .page-hero__title { color: var(--navy); }
.page-hero--plain .overline { color: var(--brass-deep); }
.page-hero--plain .page-hero__lede { color: var(--ink); }
/* Breadcrumb */
.crumbs {
display: flex; flex-wrap: wrap; gap: 0.5rem;
list-style: none;
font-size: var(--fs-overline);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: var(--sp-3);
}
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.page-hero .crumbs { color: rgba(250, 247, 242, 0.7); }
.page-hero .crumbs a { color: inherit; }
/* ==========================================================================
9. FIGURES, EDITORIAL TRIO, GALLERIES
========================================================================== */
/* .figure and the frame family. Every photograph on the site hangs in one of
these; a bare rectangle is the exception, not the default.
--framed brass hairline offset down and right, the editorial signature
--matted ivory gallery mat with a hairline rule inset, for interiors
--arch arched top with a brass arch outline, for portraits and heroes
--plate navy hairline with a second brass rule outside, for small images
Cards, rails and mosaics get the mat by default (see their own rules). */
.figure { position: relative; margin: 0; }
.figure img { display: block; width: 100%; height: auto; }
.figure--framed::before {
content: "";
position: absolute;
inset: var(--frame-offset, 0.9rem) calc(-1 * var(--frame-offset, 0.9rem))
calc(-1 * var(--frame-offset, 0.9rem)) var(--frame-offset, 0.9rem);
border: 1px solid var(--line-brass);
z-index: -1;
pointer-events: none;
}
.section--ink .figure--framed::before { border-color: rgba(192, 154, 62, 0.7); }
.figure--matted {
background: var(--shell);
padding: clamp(0.6rem, 1.6vw, 1.1rem);
box-shadow: var(--shadow-soft);
}
.figure--matted::after {
content: "";
position: absolute;
inset: 0.35rem;
border: 1px solid var(--line);
pointer-events: none;
}
.section--ink .figure--matted { background: rgba(250, 247, 242, 0.96); }
.figure--arch img { border-radius: 999px 999px 0 0; }
.figure--arch::before {
content: "";
position: absolute;
inset: calc(-1 * var(--frame-offset, 0.9rem));
border: 1px solid var(--line-brass);
border-radius: 999px 999px 0 0;
pointer-events: none;
}
.figure--plate img { outline: 1px solid var(--navy); outline-offset: -1px; }
.figure--plate::after {
content: "";
position: absolute;
inset: -0.45rem;
border: 1px solid var(--line-brass);
pointer-events: none;
}
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
/* .split__media--stack holds two photographs in one media column, the smaller
one above. .figure--inset holds that one to a little over half the column and
pushes it toward the text, so it reads as an inset portrait under the page
hero rather than a second lead photograph. */
.split__media--stack { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.split__media--stack .figure--inset {
width: min(56%, 280px);
margin-left: auto;
margin-right: clamp(0rem, 4vw, 3rem);
}
.figure--wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.figure--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.figure__caption {
margin-top: var(--sp-2);
font-size: var(--fs-small);
color: var(--ink-soft);
font-style: italic;
}
/* .editorial-grid — a set of photo-led entries. Deliberately staggered so it
never reads as a row of identical cards. Use 2 or 3 children. */
.editorial-grid {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 820px) {
.editorial-grid--3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
.editorial-grid--2 { grid-template-columns: repeat(2, 1fr); align-items: start; }
.editorial-grid--3 > :nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
.editorial-grid--3 > :nth-child(3) { margin-top: clamp(1rem, 2.5vw, 2rem); }
.editorial-grid--2 > :nth-child(2) { margin-top: clamp(2rem, 5vw, 4rem); }
}
.editorial-item { display: block; }
.editorial-item__media {
position: relative;
overflow: hidden;
margin-bottom: var(--sp-4);
background: var(--shell);
padding: clamp(0.5rem, 1.2vw, 0.85rem);
box-shadow: var(--shadow-soft);
}
.editorial-item__media::after {
content: "";
position: absolute;
inset: 0.3rem;
border: 1px solid var(--line);
pointer-events: none;
}
.editorial-item__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 1.1s var(--ease);
}
.editorial-item:hover .editorial-item__media img,
.editorial-item:focus-within .editorial-item__media img { transform: scale(1.04); }
.editorial-item__title {
font-size: var(--fs-h3);
margin-bottom: var(--sp-2);
}
.editorial-item__title a { color: inherit; }
.editorial-item:hover .editorial-item__title,
.editorial-item:focus-within .editorial-item__title { color: var(--brass-deep); }
.editorial-item__body { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.8; }
.editorial-item__more {
display: inline-block;
margin-top: var(--sp-3);
font-size: var(--fs-overline);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--brass-deep);
border-bottom: 1px solid var(--line-brass);
padding-bottom: 2px;
}
/* .mosaic — asymmetric image collage for portfolio / project pages. */
.mosaic { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (min-width: 780px) {
.mosaic { grid-template-columns: repeat(6, 1fr); }
.mosaic > * { grid-column: span 2; }
.mosaic__wide { grid-column: span 4; }
.mosaic__full { grid-column: span 6; }
.mosaic__half { grid-column: span 3; }
}
.mosaic > * { position: relative; background: var(--shell); padding: 0.5rem; box-shadow: var(--shadow-soft); }
.mosaic > *::after { content: ""; position: absolute; inset: 0.3rem; border: 1px solid var(--line); pointer-events: none; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
10. REVIEWS
========================================================================== */
/* .reviews — a wall of verbatim Google reviews. CSS columns give an
editorial, uneven rhythm instead of a card grid. */
.reviews { columns: 1; column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 760px) { .reviews { columns: 2; } }
@media (min-width: 1180px) { .reviews { columns: 3; } }
.review {
break-inside: avoid;
margin: 0 0 clamp(2rem, 3.5vw, 3rem);
padding-top: var(--sp-4);
border-top: 1px solid var(--line-brass);
}
.review__quote {
font-family: var(--font-display);
font-size: clamp(1.02rem, 1.15vw, 1.16rem);
font-weight: 400;
line-height: 1.62;
color: rgba(250, 247, 242, 0.9);
margin: 0 0 var(--sp-3);
}
.section--shell .review__quote,
.section--paper .review__quote { color: var(--ink); }
.review__attrib { display: flex; flex-direction: column; gap: 0.15rem; }
.review__name {
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--brass-soft);
}
.section--shell .review__name, .section--paper .review__name { color: var(--brass-deep); }
.review__meta {
font-size: 0.78rem;
letter-spacing: 0.06em;
color: rgba(250, 247, 242, 0.55);
}
.section--shell .review__meta, .section--paper .review__meta { color: var(--ink-soft-aa); }
.review__stars { color: var(--brass-soft); letter-spacing: 0.18em; font-size: 0.8rem; }
/* Single large pull-quote, for pages that want one testimonial only. */
.pullquote {
max-width: 44ch;
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.6vw, 2.15rem);
font-style: italic;
font-weight: 400;
line-height: 1.35;
color: var(--navy);
}
.section--ink .pullquote, .section--media .pullquote { color: var(--shell); }
.pullquote footer {
margin-top: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-overline);
font-style: normal;
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--brass-deep);
}
.section--ink .pullquote footer, .section--media .pullquote footer { color: var(--brass-soft); }
/* ==========================================================================
11. VIDEO CTA + MODAL
========================================================================== */
.video-cta {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
overflow: hidden;
text-align: left;
}
.video-cta img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 1.2s var(--ease), filter var(--dur) var(--ease);
}
.video-cta::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7,33,52,0.05) 40%, rgba(7,33,52,0.72) 100%);
}
.video-cta:hover img, .video-cta:focus-visible img { transform: scale(1.03); }
.video-cta__label {
position: absolute;
left: clamp(1.25rem, 3vw, 2.25rem);
right: clamp(1.25rem, 3vw, 2.25rem);
bottom: clamp(1.25rem, 3vw, 2.25rem);
z-index: 1;
display: flex;
align-items: center;
gap: 1rem;
color: var(--shell);
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: 1.5;
}
.video-cta__play {
flex: 0 0 auto;
width: 54px; height: 54px;
border: 1px solid rgba(250, 247, 242, 0.75);
border-radius: 50%;
display: grid;
place-items: center;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.video-cta__play::before {
content: "";
width: 0; height: 0;
margin-left: 3px;
border-left: 11px solid currentColor;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.video-cta:hover .video-cta__play,
.video-cta:focus-visible .video-cta__play { background: var(--shell); color: var(--navy); }
.modal {
width: min(1080px, 92vw);
max-width: none;
padding: 0;
border: 0;
background: transparent;
color: var(--shell);
overflow: visible;
}
.modal::backdrop { background: rgba(7, 33, 52, 0.92); }
.modal[open] { animation: modal-in 0.4s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal__video {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
box-shadow: var(--shadow-lift);
}
.modal__close {
position: absolute;
top: -3rem; right: 0;
width: 44px; height: 44px;
border: 0;
background: none;
color: var(--shell);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.modal__close:hover { color: var(--aqua); }
/* ==========================================================================
12. FORMS
========================================================================== */
.form { max-width: 640px; }
.form--wide { max-width: 760px; }
.form--center { margin-inline: auto; }
.form__note {
margin-bottom: var(--sp-4);
font-size: var(--fs-small);
color: var(--ink-soft);
}
.section--ink .form__note, .section--media .form__note { color: rgba(250,247,242,0.82); }
.form__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) {
.form__grid--2 { grid-template-columns: 1fr 1fr; }
.field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label {
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-overline);
text-transform: uppercase;
color: var(--ink-soft);
}
.section--ink .field > label,
.section--media .field > label { color: rgba(250, 247, 242, 0.75); }
.field input,
.field select,
.field textarea {
width: 100%;
padding: 0.85rem 0.15rem;
border: 0;
border-bottom: 1px solid var(--line-strong);
border-radius: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.5;
transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field select {
appearance: none;
padding-right: 1.75rem;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 0.65rem center, right 0.35rem center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-bottom-color: var(--brass);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 2px solid var(--aqua-deep);
outline-offset: 4px;
}
.section--ink .field input,
.section--ink .field select,
.section--ink .field textarea,
.section--media .field input,
.section--media .field select,
.section--media .field textarea {
color: var(--shell);
border-bottom-color: rgba(250, 247, 242, 0.4);
}
.section--ink .field input::placeholder,
.section--media .field input::placeholder { color: rgba(250, 247, 242, 0.5); }
.section--ink .field input:focus,
.section--media .field input:focus { border-bottom-color: var(--brass-soft); }
.section--ink .field select option,
.section--media .field select option { color: var(--ink); }
/* Honeypot. display:none as well as off-screen. Chrome does not autofill a
display:none field, and address autofill filling this for a real visitor is
a worse outcome than a bot skipping a hidden field. Screen readers get
aria-hidden on the wrapper anyway. */
.hp {
display: none !important;
position: absolute !important;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-5);
}
.form__status {
margin: 0;
min-height: 1.5em;
font-size: var(--fs-small);
line-height: 1.5;
}
.form__status:empty { min-height: 0; }
.form__status[data-state="ok"] { color: var(--aqua-deep); }
.form__status[data-state="error"]{ color: #b1442f; }
.section--ink .form__status[data-state="ok"],
.section--media .form__status[data-state="ok"] { color: var(--aqua); }
.section--ink .form__status[data-state="error"],
.section--media .form__status[data-state="error"] { color: #f0a493; }
.form.is-sending .btn { opacity: 0.6; pointer-events: none; }
/* Newsletter band */
.newsletter { position: relative; isolation: isolate; }
.newsletter .form { max-width: 620px; }
/* ==========================================================================
13. AFFILIATIONS
========================================================================== */
.affiliations {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(2rem, 6vw, 5rem);
padding-top: var(--sp-5);
border-top: 1px solid var(--line);
}
.affiliations img {
height: clamp(46px, 6vw, 66px);
width: auto;
filter: grayscale(1);
opacity: 0.62;
transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.affiliations img:hover { filter: none; opacity: 1; }
/* Social icon row */
.social-row {
display: flex;
align-items: center;
gap: var(--sp-3);
list-style: none;
margin-top: var(--sp-5);
}
.social-row a {
display: grid;
place-items: center;
width: 42px; height: 42px;
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--navy);
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.social-row a:hover, .social-row a:focus-visible {
background: var(--navy); border-color: var(--navy); color: var(--shell);
}
.social-row svg { width: 17px; height: 17px; fill: currentColor; }
.section--ink .social-row a, .site-footer .social-row a {
border-color: var(--line-light);
color: var(--shell);
}
.section--ink .social-row a:hover, .site-footer .social-row a:hover,
.section--ink .social-row a:focus-visible, .site-footer .social-row a:focus-visible {
background: var(--brass); border-color: var(--brass); color: var(--navy-night);
}
/* ==========================================================================
14. FOOTER
========================================================================== */
.site-footer {
background: var(--navy-night);
color: rgba(250, 247, 242, 0.72);
font-size: var(--fs-small);
padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.site-footer h2, .site-footer h3 { color: var(--shell); }
.site-footer a { color: rgba(250, 247, 242, 0.82); transition: color var(--dur) var(--ease); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--aqua); }
/* One row: brand, Explore, Reach Me At, then the affiliation marks bottom right.
The disclaimer runs in two small columns under a hairline; the copyright line
closes it. Kept short on purpose: the footer is punctuation, not a page. */
.footer__top {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(1.5rem, 3vw, 2rem);
border-bottom: 1px solid var(--line-light);
align-items: start;
}
/* Phones stack; the Explore menu is already two columns wide. */
.footer__top { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
.footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer__top > .footer__badges { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
/* The contact column carries the brokerage name and address as well as the
phone and the email now, so it takes the width the brand column can spare. */
.footer__top { grid-template-columns: 1.2fr 0.95fr 1.5fr auto; }
.footer__top > .footer__badges { grid-column: auto; align-self: end; justify-self: end; }
}
/* The mark links home. An inline anchor around a lone image draws its
focus ring off the font metrics, so the ring lands beside the logo instead
of around it; the anchor takes the image's own box instead. `vertical-align`
holds the old baseline (without it the paragraph below drops 8px), and the
gap under the mark moves from the image to the link so the ring closes
on the mark rather than on the space below it. */
.footer__logo-link {
display: inline-block;
line-height: 0;
vertical-align: bottom;
margin-bottom: var(--sp-2);
max-width: 100%;
}
/* Round 6: the on-dark lockup in place of her wordmark alone. 280px is the
width at which her half of the drawing reads at the 170px the wordmark read
at, and it is what a phone gives: the brand column is 335px at 375. A
desktop gives less, not more, because the column shares the row with the
Explore menu and the contact block, so from 1000px up the column's own
241px caps it and her half reads a shade smaller there than on a phone.
That is the right way round: the desktop header carries the lockup at 360px
a few hundred pixels above it. */
.footer__logo { width: min(100%, 280px); height: auto; margin-bottom: var(--sp-2); }
.footer__logo-link .footer__logo { margin-bottom: 0; }
.footer__top > div:first-child p { margin: 0 0 var(--sp-3); line-height: 1.55; }
.footer__top .social-row { margin: 0; }
.footer__heading {
font-family: var(--font-sans);
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-overline);
text-transform: uppercase;
color: var(--brass-soft);
margin-bottom: var(--sp-2);
}
.footer__menu {
list-style: none;
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: var(--sp-4);
row-gap: 0.4rem;
}
.footer__menu li + li { margin-top: 0; }
.footer__menu a {
font-size: var(--fs-overline);
letter-spacing: var(--track-caps);
text-transform: uppercase;
}
.footer__contact { list-style: none; }
.footer__contact li + li { margin-top: 0.3rem; }
.footer__contact .footer__name {
font-family: var(--font-display);
font-size: var(--fs-h4);
color: var(--shell);
line-height: 1.15;
margin-bottom: 0.15rem;
}
.footer__badges {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.footer__badges img {
height: 40px;
width: auto;
background: var(--shell);
padding: 4px 6px;
opacity: 1;
}
/* The Herron mark is a white lockup on transparent, so it needs no ivory chip
on the navy. Its box is taller than the Houzz tile because only the lower
third of it is type; at this height the two read as one row. */
.footer__badges img.footer__badge--herron {
height: 54px;
background: none;
padding: 0;
}
/* The brokerage lines are long, so they break at the middot rather than
inside the address or the phrase. */
.footer__hold { white-space: nowrap; }
/* The Equal Housing Opportunity mark is drawn white on transparent like the
Herron lockup, so it takes no chip either. It is square and all of it is
drawing, so it sits at the Houzz tile's height and the three read as one row. */
.footer__badges img.footer__badge--eho {
height: 40px;
background: none;
padding: 0;
}
.footer__legal {
padding-block: clamp(1rem, 2vw, 1.4rem);
border-bottom: 1px solid var(--line-light);
font-size: 0.72rem;
line-height: 1.55;
color: rgba(250, 247, 242, 0.5);
max-width: none;
columns: 2;
column-gap: var(--sp-6);
}
@media (max-width: 760px) { .footer__legal { columns: 1; } }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding-block: 0.9rem clamp(1.1rem, 2vw, 1.5rem);
font-size: 0.74rem;
color: rgba(250, 247, 242, 0.5);
}
.footer__bottom p { margin: 0; }
.footer__top-link {
font-size: var(--fs-overline);
letter-spacing: var(--track-overline);
text-transform: uppercase;
}
/* ==========================================================================
15. REVEAL UTILITIES + REDUCED MOTION
========================================================================== */
/* Nothing hides unless JS is running — no-JS visitors see everything. */
.js [data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-26px); }
.js [data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal].is-revealed {
opacity: 1;
transform: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.js [data-reveal] { opacity: 1 !important; transform: none !important; }
.hero__video { display: none; }
.editorial-item__media img, .video-cta img { transition: none; }
}
/* Print — keep the contact details usable on paper. */
@media print {
.site-header, .nav-overlay, .hero__media, .modal, .video-cta, .rail { display: none !important; }
body { background: #fff; color: #000; }
.section { padding-block: 1.5rem; }
}
/* ==========================================================================
===== Buying, Selling, Design Services (lane-services) =====
Appended by the services lane. Nothing above this line was touched.
========================================================================== */
/* --- B14 -----------------------------------------------------------------
`style="list-style:none"` inline strips list semantics in VoiceOver. The
markup now carries role="list" and this class instead. */
.list-plain {
list-style: none;
padding-left: 0;
margin: 0;
}
/* --- C7 ------------------------------------------------------------------
The stagger only fired on the second child, so a four-item two-column grid
offset row one and left row two flat. Genuinely global: every other page
using .editorial-grid--2 has exactly two children, where :nth-child(even)
and :nth-child(2) select the same element, so those pages are unchanged. */
@media (min-width: 820px) {
.editorial-grid--2 > :nth-child(even) { margin-top: clamp(2rem, 5vw, 4rem); }
}
/* --- Required-field marker (B13) ---------------------------------------- */
.req {
color: var(--brass-deep);
font-weight: 500;
}
.section--ink .req, .section--media .req { color: var(--brass-soft); }
/* --- C2: rate list -------------------------------------------------------
Replaces the
wall on Design Services. Name in Cormorant, description
in Jost, price aligned right on the name's baseline, brass hairlines
between rows. */
.rates {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
.rates { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 5vw, 5rem); }
}
.rates__group { margin: 0; }
.rates__title { margin: 0 0 var(--sp-3); }
.rates__lede {
margin: 0 0 var(--sp-3);
max-width: 46ch;
}
.rates__note {
margin: var(--sp-4) 0 0;
font-size: var(--fs-small);
}
.rate-list {
border-bottom: 1px solid var(--line-brass);
}
.rate-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: clamp(1rem, 3vw, 2.5rem);
row-gap: 0.35rem;
padding: clamp(0.9rem, 1.8vw, 1.25rem) 0;
border-top: 1px solid var(--line-brass);
}
.rate-row__name {
grid-column: 1;
grid-row: 1;
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.45vw, 1.35rem);
font-weight: 500;
line-height: 1.3;
color: var(--shell);
}
.rate-row__price {
grid-column: 2;
grid-row: 1;
justify-self: end;
text-align: right;
white-space: nowrap;
font-family: var(--font-sans);
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--brass-soft);
}
.rate-row__desc {
grid-column: 1;
grid-row: 2;
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1.6;
color: rgba(250, 247, 242, 0.78);
}
/* Same list on a light band, should it ever move. */
.section--shell .rate-row__name,
.section--paper .rate-row__name { color: var(--navy); }
.section--shell .rate-row__price,
.section--paper .rate-row__price { color: var(--brass-deep); }
.section--shell .rate-row__desc,
.section--paper .rate-row__desc { color: var(--ink-soft); }
@media (max-width: 520px) {
.rate-row {
grid-template-columns: minmax(0, 1fr);
}
.rate-row__price { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
.rate-row__desc { grid-column: 1; grid-row: 3; }
}
/* --- C9: rail scroll affordance -----------------------------------------
A peek gradient in the band's own ivory plus quiet prev/next controls.
No arrow glyphs, per the studio rule. */
.rail-frame {
--rail-fade: var(--shell);
position: relative;
}
.section--shell .rail-frame { --rail-fade: var(--shell-warm); }
.rail-frame::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: var(--sp-3);
width: clamp(48px, 8vw, 110px);
pointer-events: none;
background: linear-gradient(to right, rgba(242, 235, 225, 0), var(--rail-fade) 82%);
opacity: 1;
transition: opacity var(--dur) var(--ease);
}
.rail-frame.is-end::after { opacity: 0; }
.rail-frame .rail:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: -2px; }
.rail-nav[hidden] { display: none; }
.rail-nav {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
padding-inline: var(--gutter);
padding-bottom: var(--sp-5);
margin-top: var(--sp-3);
position: relative; /* keep the controls above the peek gradient */
z-index: 1;
}
.rail-nav__btn {
appearance: none;
background: transparent;
border: 1px solid var(--line-strong);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-overline);
font-weight: 500;
letter-spacing: var(--track-caps);
text-transform: uppercase;
padding: 0.6rem 1.2rem;
cursor: pointer;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
opacity var(--dur) var(--ease);
}
.rail-nav__btn:hover:not(:disabled),
.rail-nav__btn:focus-visible {
background: var(--navy);
border-color: var(--navy);
color: var(--shell);
}
.rail-nav__btn:disabled {
opacity: 0.35;
cursor: default;
}
@media (prefers-reduced-motion: reduce) {
.rail-frame::after, .rail-nav__btn { transition: none; }
}
/* ===== Blog cards and posts (lane-blog) ===== */
/* Blog covers are 16:9 banners with the headline set into the art, so the
index cards get their own landscape box instead of the tall 4:5 crop the
shared .editorial-item rule uses for portrait photography. The ratio matches
the artwork: at 3:2 the wordmarks lost their first and last letters. */
.editorial-item--post .editorial-item__media img {
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
.editorial-item--post .editorial-item__title { font-size: var(--fs-h4); }
/* Article pages. These used to be an inline