/* Domicile - coastal homes agency. All colours, fonts and the one radius live here in :root. */
:root {
  --bg: #15140f;        /* page */
  --bg2: #1f1d17;       /* cards, form panel */
  --sand: #2a2720;      /* footer */
  --accent: #c8a36a;    /* buttons, prices */
  --on-accent: #15140f;
  --ink: #efe8dc;       /* headings and text */
  --muted: color-mix(in srgb, var(--ink) 50%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --light: #f5efe4;     /* text over photos */
  --shade: 0, 0, 0;     /* photo overlays */
  --f-head: "Italiana", Georgia, serif;
  --w-head: 400;
  --w-hero: 400;
  --f-body: "Outfit", system-ui, sans-serif;
  --radius: 4px;        /* the ONE radius: buttons, labels, photos, panels, fields (photos only open as an arch while they come in) */
  --pad: clamp(16px, 4.45vw, 64px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --glow: 0 0 2px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .45), 0 0 28px rgba(0, 0, 0, .4), 0 0 60px rgba(0, 0, 0, .3);  /* thin outer glow: text over photos stays readable on light and dark parts */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.4 var(--f-body); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--radius); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.glow { text-shadow: var(--glow); }

/* type */
.h2 { font: var(--w-head) clamp(34px, 3.4vw, 49px)/1.1 var(--f-head); letter-spacing: -.03em; }
.h3 { font: var(--w-head) clamp(28px, 2.72vw, 39px)/1.1 var(--f-head); letter-spacing: -.025em; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--radius); font-size: 14.4px; letter-spacing: -.02em; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid::before { background: var(--ink); }
.btn--line { border: 1px solid currentColor; color: var(--light); }
.btn--line::before { background: var(--light); }
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); }
.btn--light { border: 1px solid color-mix(in srgb, var(--light) 70%, transparent); color: var(--light); }
.btn--light::before { background: var(--light); }
.btn--light:hover, .btn--light:focus-visible { color: var(--ink); }

/* header */
.head { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--light); transition: color .4s, background-color .4s; }
.head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.head.is-solid { background: var(--bg); color: var(--ink); }
.head.is-solid::after { transform: none; }
.nav { display: flex; gap: 28px; font-size: 14.4px; }
.nav a { position: relative; padding: 4px 0; }
.nav a::after, .foot a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after, .foot a:hover::after { transform: scaleX(1); transform-origin: left; }
.logo { font: 400 15px/1 var(--f-body); letter-spacing: .32em; text-transform: uppercase; margin-right: -.32em; }
.head-cta { justify-self: end; }
.head:not(.is-solid) .head-cta { background: color-mix(in srgb, var(--accent) 92%, transparent); }
.menu-btn { display: none; justify-self: end; height: 40px; padding: 0 18px; border: 1px solid currentColor; border-radius: var(--radius); background: none; cursor: pointer; font-size: 14px; }
.head:not(.is-solid) .nav, .head:not(.is-solid) .logo, .head:not(.is-solid) .menu-btn { text-shadow: var(--glow); }

.menu { position: fixed; inset: 0; z-index: 45; background: var(--bg2); padding: 110px var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: var(--w-head) clamp(40px, 11vw, 64px)/1.1 var(--f-head); letter-spacing: -.03em; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
body.menu-on .head { color: var(--ink); }
body.menu-on .head .nav, body.menu-on .head .logo, body.menu-on .menu-btn { text-shadow: none; }

/* hero: sticks while the next section slides over it */
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--light); background: #1c1915; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide { clip-path: inset(100% 0 0 0); }
.hero-slide.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
html:not(.js) .hero-slide:first-child, html:not(.js) .hero-text:first-child { clip-path: none; visibility: visible; }
.hero-slide.is-in { z-index: 2; animation: arch-in 1.6s var(--ease) both; }
.hero-slide.is-in img { animation: settle 2.4s var(--ease) both; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(var(--shade), .5), rgba(var(--shade), 0) 55%), linear-gradient(to bottom, rgba(var(--shade), .38), rgba(var(--shade), 0) 42%); pointer-events: none; }
.hero-in { position: absolute; inset: 0; z-index: 4; padding: 132px var(--pad) 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.hero-title { font: var(--w-hero) clamp(66px, 12.6vw, 210px)/.9 var(--f-head); letter-spacing: -.02em; max-width: 7.2em; text-shadow: var(--glow); }
.hero-bar { display: grid; grid-template-columns: 1fr 180px; gap: 40px; align-items: end; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--light) 35%, transparent); text-shadow: var(--glow); }
.hero-kicker { display: block; font: 400 10px/1.2 var(--f-body); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 10px; opacity: .8; }
.hero-texts { display: grid; }
.hero-text { grid-area: 1 / 1; visibility: hidden; display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .9fr) auto; gap: 28px; align-items: end; }
.hero-text.is-on { visibility: visible; }
.hero-i { font: var(--w-head) 31px/1 var(--f-head); white-space: nowrap; }
.hero-i span { font: 400 12px/1 var(--f-body); opacity: .7; }
.hero-name { font: var(--w-head) clamp(26px, 2.2vw, 34px)/1.05 var(--f-head); }
.hero-desc { font-size: 13px; line-height: 1.4; max-width: 34em; }
.hero-price { font-size: 16px; }
.hero-text > * { clip-path: inset(0 0 0 0); transition: clip-path .8s var(--ease); }
.hero-text.is-out > * { clip-path: inset(0 0 0 100%); transition-duration: .5s; }
.hero-text.is-wait > * { clip-path: inset(0 100% 0 0); transition: none; }
.hero-text > :nth-child(2) { transition-delay: .08s; }
.hero-text > :nth-child(3) { transition-delay: .16s; }
.hero-text > :nth-child(4) { transition-delay: .24s; }
.hero-text > :nth-child(5) { transition-delay: .32s; }
.hero-text.is-out > * { transition-delay: 0s; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button { flex: 1; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.hero-dots i { display: block; width: 100%; height: 1px; background: color-mix(in srgb, var(--light) 40%, transparent); position: relative; overflow: hidden; }
.hero-dots i::after { content: ""; position: absolute; inset: 0; background: var(--light); transform: scaleX(0); transform-origin: left; }
.hero-dots .is-on i::after { animation: fill var(--slide, 6s) linear both; }
.hero-dots .is-done i::after { transform: none; }

@keyframes arch-in { from { clip-path: inset(38% 40% 0 40% round 50vw 50vw 0 0); } to { clip-path: inset(0 0 0 0 round 0 0 0 0); } }
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* sections slide over the sticky hero */
.props, .about, .journal, .enquiry, .foot { position: relative; z-index: 2; }
.props { background: var(--bg); padding: 120px var(--pad) 88px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.rule { border: 0; height: 1px; background: var(--line); margin: 72px 0 32px; transform-origin: left; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.grid--mosaic { grid-template-columns: 2fr 1fr 1fr; }
.grid--mosaic > :first-child { grid-row: span 2; grid-column: span 2; }
.grid--mosaic > :first-child .card-ph { flex: 1; aspect-ratio: auto; min-height: 420px; }
.grid--mosaic > :first-child .card-name { font-size: clamp(30px, 2.8vw, 42px); }
.grid--mosaic > :nth-child(n+4) { grid-column: span 1; }
.grid--mosaic > :nth-child(4) { grid-column: 1 / 2; }
.grid--mosaic > :nth-child(n+4) .card-ph { aspect-ratio: auto; height: clamp(240px, 21vw, 420px); }
.card { display: flex; flex-direction: column; }
.card-ph { position: relative; aspect-ratio: 395 / 325; overflow: hidden; border-radius: var(--radius); }
.card-ph img, .post-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card-ph img, .post:hover .post-ph img { transform: scale(1.05); }
.tag { position: absolute; left: 16px; top: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 88%, transparent); color: var(--on-accent); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.tag::before { content: ""; width: 5px; height: 5px; background: currentColor; }
.tag--sold { background: color-mix(in srgb, var(--ink) 88%, transparent); }
.tag--under-offer { background: color-mix(in srgb, var(--bg2) 92%, transparent); color: var(--ink); }
.card-meta { margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; }
.card-meta .m { display: inline-flex; gap: 10px; white-space: nowrap; }
.card-meta .m > span { color: var(--muted); }
.card-meta b { font-weight: 400; color: var(--accent); }
.card-name { margin: 0; font: var(--w-head) clamp(24px, 2vw, 29px)/1.1 var(--f-head); letter-spacing: -.03em; }

.about { background: var(--bg2); padding: 140px var(--pad); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.about-ph { position: relative; }
.about-arch { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.about-arch img { width: 100%; height: 120%; margin-top: -10%; object-fit: cover; }
.about-in .h2 { max-width: 12em; }
.about-text { margin: 32px 0 36px; max-width: 34em; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.about-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.about-in .about-btns { margin: 0 0 72px; }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; margin: 0; }
.stat { position: relative; padding-top: 18px; display: flex; flex-direction: column-reverse; gap: 8px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.stat dt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.stat dd { font: var(--w-head) clamp(44px, 4.2vw, 64px)/1 var(--f-head); color: var(--accent); font-variant-numeric: tabular-nums; }

.journal { background: var(--bg); padding: 96px var(--pad) 140px; }
.journal .grid { margin-top: 64px; }
.jl { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px 56px; }
.jl > :first-child { grid-row: span 2; }
.jl > :first-child .post-ph { aspect-ratio: 16 / 11; }
.jl > :first-child .post-title { font-size: clamp(30px, 2.8vw, 42px); }
.jl > :not(:first-child) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; align-content: start; }
.jl > :not(:first-child) .post-ph { grid-row: span 4; margin: 0; aspect-ratio: 4 / 5; }
.post { display: flex; flex-direction: column; }
.post-ph { aspect-ratio: 400 / 257; overflow: hidden; margin-bottom: 20px; }
.post-date { margin: 0 0 10px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.post-title { margin: 0 0 16px; font: var(--w-head) clamp(24px, 2.17vw, 31px)/1.1 var(--f-head); letter-spacing: -.03em; }
.post-ex { margin: 0 0 14px; color: color-mix(in srgb, var(--ink) 80%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-more { margin: auto 0 0; align-self: flex-start; position: relative; padding-bottom: 2px; }
.post-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.post:hover .post-more::after { transform: scaleX(.3); }

.enquiry { background: var(--bg); padding: 0 0 140px; }
.enquiry-bg { position: relative; height: 62vh; min-height: 380px; overflow: hidden; margin: 0; }
.enquiry-bg img { width: 100%; height: 124%; margin-top: -12%; object-fit: cover; }
.enquiry-panel { position: relative; z-index: 1; margin: -180px var(--pad) 0; padding: clamp(28px, 4vw, 64px); background: var(--bg2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); border-radius: var(--radius); }
.enquiry-side .h2 { max-width: 11em; }
.enquiry-lines { margin: 48px 0 0; display: grid; gap: 18px; }
.enquiry-lines div { border-top: 1px solid var(--line); padding-top: 12px; }
.enquiry-lines dt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.enquiry-lines a { border-bottom: 1px solid var(--line); }
.enquiry-text { margin: 16px 0 36px; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field > span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea, .select-btn { width: 100%; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font: 14px/1.3 var(--f-body); outline: none; transition: border-color .3s; }
.field textarea { height: 150px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.field input:focus, .field textarea:focus, .select-btn[aria-expanded="true"] { border-color: var(--accent); }
.field ::placeholder { color: var(--muted); }
.field .is-bad { border-color: #b3402e; }
.select { position: relative; }
.select-btn { display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; }
.select-btn [data-value].is-empty { color: var(--muted); }
.select-btn i { width: 8px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ease); }
.select-btn[aria-expanded="true"] i { transform: translateY(1px) rotate(225deg); }
.select-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none; background: var(--bg2); border: 1px solid var(--line); clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease); outline: none; border-radius: var(--radius); }
.select-list.is-open { clip-path: inset(0 0 0 0); }
.select-list li { padding: 9px 10px; font-size: 14px; cursor: pointer; }
.select-list li:hover, .select-list li.is-active { background: var(--bg); }
.select-list li[aria-selected="true"] { color: var(--accent); }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: 13px; color: var(--accent); }

/* footer */
.foot { background: var(--sand); padding: 56px var(--pad) 28px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 32px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.foot a { position: relative; }
.foot-contact { justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; }
.foot-contact span { color: var(--muted); }
.foot-word { margin: 0 0 64px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font: var(--w-hero) 10vw/.82 var(--f-head); letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; }
.foot-word .l { display: inline-block; clip-path: inset(0 0 0 0); }
.foot-bar { margin-top: 56px; display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); clip-path: inset(50% 50% 50% 50% round var(--radius)); transition: clip-path .5s var(--ease); }
.to-top.is-on { clip-path: inset(0 0 0 0 round var(--radius)); }
.copied-tip { position: fixed; z-index: 95; transform: translate(-50%, -100%); padding: 5px 10px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-size: 12px; pointer-events: none; clip-path: inset(0 0 0 0 round var(--radius)); animation: tip-in .35s var(--ease) both; }
@keyframes tip-in { from { clip-path: inset(100% 0 0 0 round var(--radius)); } }

/* ---- motion: everything opens like a doorway or is wiped in, nothing fades or lifts ---- */
.js [data-words] .w { display: inline-block; clip-path: inset(-10% 100% -20% 0); transition: clip-path 1s var(--ease); transition-delay: calc(var(--k) * 70ms); }
.js [data-words].run .w { clip-path: inset(-10% -4% -20% 0); }
.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease) .2s; }
.js [data-wipe].run { clip-path: inset(0 0 0 0); }
.js [data-rule] { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js [data-rule].run { transform: none; }
.js [data-arch] { clip-path: inset(30% 34% 0 34% round 50vw 50vw 0 0); }
.js [data-arch] img { transform: scale(1.18); }
.js [data-arch].run { clip-path: inset(0 0 0 0 round var(--radius)); transition: clip-path 1.5s var(--ease) calc(var(--k, 0) * 110ms); }
.js [data-arch].run img { transform: none; transition: transform 2.2s var(--ease) calc(var(--k, 0) * 110ms); }
.js .card:hover [data-arch].run img, .js .post:hover [data-arch].run img { transform: scale(1.05); transition-delay: 0s; }
.js [data-stat]::before { transform: scaleY(0); transition: transform 1.2s var(--ease) calc(var(--k, 0) * 120ms); }
.js [data-stat].run::before { transform: none; }
.js [data-card] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.js [data-card].run { clip-path: inset(-20px -20px -20px -20px round var(--radius)); }
.js .foot-word .l { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease) calc(var(--k) * 60ms); }
.js .foot-word.run .l { clip-path: inset(-5% 0 0 0); }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid--mosaic { grid-template-columns: 1fr 1fr; }
  .grid--mosaic > :first-child { grid-row: auto; }
  .grid--mosaic > :first-child .card-ph { aspect-ratio: 16 / 10; min-height: 0; }
  .grid--mosaic > :nth-child(4) { grid-column: auto; }
  .grid--mosaic > :nth-child(n+4) .card-ph { aspect-ratio: 395 / 325; height: auto; }
  .hero-text { grid-template-columns: auto minmax(0, 1fr) minmax(0, .8fr) auto; }
  .hero-desc { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-contact { grid-column: 1 / -1; justify-self: start; text-align: left; align-items: flex-start; }
}
@media (max-width: 860px) {
  .nav, .head-cta { display: none; }
  .head { grid-template-columns: 1fr auto; }
  .logo { justify-self: start; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hero-in { padding-top: 112px; }
  .hero-bar { grid-template-columns: 1fr; gap: 20px; }
  .hero-text { grid-template-columns: 1fr auto; gap: 14px 20px; }
  .hero-i { display: none; }
  .hero-price { grid-column: 1; }
  .hero-text .btn { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .about { grid-template-columns: 1fr; padding: 96px var(--pad); }
  .about-ph { max-width: 420px; }
  .jl { grid-template-columns: 1fr; }
  .jl > :first-child { grid-row: auto; }
  .enquiry-panel { grid-template-columns: 1fr; margin-top: -96px; }
}
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .props { padding-top: 88px; }
  .sec-head { flex-direction: column; gap: 22px; }
  .rule { margin: 48px 0 24px; }
  .grid--mosaic, .grid--mosaic > :first-child { grid-template-columns: 1fr; grid-column: auto; }
  .grid { gap: 40px; }
  .stats { gap: 28px 16px; }
  .jl > :not(:first-child) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .jl > :not(:first-child) .post-ex { display: none; }
  .enquiry { padding-bottom: 88px; }
  .enquiry-bg { height: 46vh; min-height: 280px; }
  .enquiry-panel { margin: -64px 12px 0; }
  .journal { padding: 80px var(--pad) 96px; }
  .journal .grid { margin-top: 40px; }
  .form { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-word { margin-bottom: 40px; }
  .foot-bar { flex-direction: column; }
}
/* ---- inner pages ---- */
.label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.h4 { font: var(--w-head) clamp(26px, 2.17vw, 31px)/1.1 var(--f-head); letter-spacing: -.03em; }
body:not(.home):not(.detail):not(.lost) main { padding-top: 72px; }
.page-head { padding: 120px var(--pad) 0; display: grid; grid-template-columns: 1fr 382px; gap: 40px; align-items: start; }
.page-lead { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.props--page { padding-top: 72px; }
.props--page .grid + .grid { margin-top: 32px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--2 .card-ph { aspect-ratio: 613 / 475; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--4 .card-name { font-size: clamp(22px, 1.7vw, 25px); }
.props--sold { padding-top: 40px; padding-bottom: 140px; }
.props--sold .sec-head .page-lead { max-width: 382px; }
.props--more { padding-bottom: 140px; }
.props--more .grid { margin-top: 48px; }

.hero--detail .hero-slide, .hero--lost .hero-slide { animation: arch-in 1.8s var(--ease) both; }
.hero--detail .hero-slide img, .hero--lost .hero-slide img { animation: settle 2.6s var(--ease) both; }
.hero-in--detail { align-items: flex-start; padding-bottom: 48px; }
.hero--detail .hero-title { font-size: clamp(52px, 7vw, 110px); max-width: none; }
.hero-place { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; padding-bottom: 12px; }
.lost-side { max-width: 340px; }
.lost-side .about-btns { margin-top: 24px; }

.intro { position: relative; z-index: 2; background: var(--bg); padding: 80px var(--pad) 96px; display: grid; grid-template-columns: 1fr 650px; gap: 64px; align-items: start; }
.intro .h2 { max-width: 10em; padding-left: 27px; }
.intro-side > p:first-child { margin-bottom: 48px; }
.intro-side .label { margin-bottom: 20px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 10px; margin: 0; }
.facts div { border-top: 1px solid var(--line); padding-top: 14px; }
.facts dt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.facts dd { font-size: 16px; }
.facts a { border-bottom: 1px solid var(--line); }
.facts--list { grid-template-columns: 1fr 1fr; gap: 18px 10px; margin-bottom: 32px; }

.gallery { position: relative; z-index: 2; background: var(--bg); padding: 0 48px 48px; display: grid; gap: 48px; }
.gallery-ph { aspect-ratio: 1329 / 748; overflow: hidden; }
.gallery-ph img { width: 100%; height: 100%; object-fit: cover; }
.gallery { grid-template-columns: 1fr 1fr; }
.gallery-ph:nth-child(3n+1) { grid-column: span 2; }
.gallery-ph:not(:nth-child(3n+1)) { aspect-ratio: 4 / 5; }

.spaces { position: relative; z-index: 2; background: var(--bg); padding: 72px 129px 64px; }
.space { display: grid; grid-template-columns: 584px 1fr; gap: 64px; align-items: center; margin-top: 96px; }
.space:nth-of-type(even) { grid-template-columns: 1fr 584px; }
.space:nth-of-type(even) .space-ph { order: 2; }
.space:nth-of-type(even) .space-txt { justify-self: end; }
.space-ph { aspect-ratio: 584 / 750; overflow: hidden; }
.space-ph img { width: 100%; height: 100%; object-fit: cover; }
.space-txt { max-width: 456px; }
.space-txt > .label:first-child { margin-bottom: 24px; color: var(--accent); }
.space-txt .h2 { margin-bottom: 24px; }
.space-txt > p:not(.label) { margin-bottom: 56px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.space-txt > .label { margin-bottom: 18px; }

.faq { position: relative; z-index: 2; background: var(--bg); padding: 96px var(--pad) 120px; display: grid; grid-template-columns: 1fr 514px; gap: 64px; border-top: 1px solid var(--line); }
.faq-group + .faq-group { margin-top: 56px; }
.faq-name { margin-bottom: 18px; color: var(--accent); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-size: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: currentColor; transition: transform .45s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa-a { overflow: hidden; }
.qa-a p { padding: 0 36px 22px 0; color: color-mix(in srgb, var(--ink) 75%, transparent); }

.journal--page { padding-top: 64px; }
.journal--page .grid { margin-top: 40px; }
.grid-item { display: flex; }
.grid-item[hidden] { display: none; }
.grid-item .post { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; font-size: 13px; transition: border-color .3s, background-color .3s, color .3s; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.journal--more { border-top: 1px solid var(--line); }
.journal--more .grid { margin-top: 48px; }

.article { padding: 108px var(--pad) 96px; }
.article-head { display: grid; grid-template-columns: 316px 1fr; gap: 10px; margin-bottom: 96px; }
.article-head .h3 { max-width: 15em; }
.article-ph { aspect-ratio: 1293 / 724; overflow: hidden; margin-bottom: 60px; }
.article-ph img { width: 100%; height: 100%; object-fit: cover; }
.article-body { display: grid; grid-template-columns: 316px minmax(0, 804px); gap: 10px; }
.article-meta { align-self: start; position: sticky; top: 104px; display: grid; gap: 6px; }
.article-meta .label { color: var(--muted); }
.article-meta .label:not(:first-child) { margin-top: 18px; }
.prose { font-size: 16px; line-height: 1.45; }
.prose p { margin: 0 0 18px; }
.prose h2 { font: var(--w-head) clamp(24px, 2.17vw, 31px)/1.1 var(--f-head); letter-spacing: -.03em; margin: 40px 0 18px; }
.prose ul { margin: 0 0 22px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--accent); }
.prose a { border-bottom: 1px solid var(--line); }
.article--plain .article-head { margin-bottom: 64px; }

.contact { padding: 78px var(--pad) 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.offices > .label { margin-bottom: 30px; }
.office + .office { margin-top: 72px; }
.office-ph { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 28px; }
.office-ph img { width: 100%; height: 100%; object-fit: cover; }
.office .h3 { margin-bottom: 28px; }
.office .facts { grid-template-columns: 1fr 1fr; }
.contact-form { align-self: stretch; }
.contact .offices { order: 2; }
.contact-sticky { position: sticky; top: 104px; }
.contact-sticky .label { margin-bottom: 24px; }
.contact-sticky .h3 { margin-bottom: 44px; max-width: 12em; }

@media (max-width: 1280px) {
  .spaces { padding-left: var(--pad); padding-right: var(--pad); }
  .space, .space:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .page-head, .intro, .faq { grid-template-columns: 1fr; gap: 28px; }
  .intro .h2 { padding-left: 0; }
  .article-head, .article-body { grid-template-columns: 1fr; gap: 20px; }
  .article-head { margin-bottom: 48px; }
  .article-meta { position: static; grid-template-columns: auto 1fr; column-gap: 16px; margin-bottom: 24px; }
  .article-meta .label:not(:first-child) { margin-top: 0; }
  .gallery { padding: 0 var(--pad) 32px; gap: 24px; }
}
@media (max-width: 860px) {
  .space, .space:nth-of-type(even) { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; }
  .space:nth-of-type(even) .space-ph { order: 0; }
  .space:nth-of-type(even) .space-txt { justify-self: start; }
  .space-ph { aspect-ratio: 4 / 5; }
  .contact .offices { order: 0; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-ph:nth-child(3n+1) { grid-column: auto; }
  .gallery-ph:not(:nth-child(3n+1)) { aspect-ratio: 1329 / 748; }
  .hero-in--detail { align-items: flex-start; }
  .contact { grid-template-columns: 1fr; gap: 72px; }
  .contact-sticky { position: static; }
}
@media (max-width: 700px) {
  .page-head { padding-top: 72px; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .grid--2 .card-ph { aspect-ratio: 395 / 325; }
  .facts { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
  .intro { padding: 64px var(--pad) 64px; }
  .spaces { padding-top: 56px; }
  .faq { padding: 72px var(--pad) 88px; }
  .article { padding-top: 72px; }
  .article-ph { margin-bottom: 36px; }
  .office .facts { grid-template-columns: 1fr; }
  .hero--detail .hero-title { font-size: clamp(40px, 11vw, 56px); }
  .home .hero-title, .lost .hero-title { font-size: max(66px, 19vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}