/* Ligtenhof demo: limestone, graphite and oak. Shared by the four pages. */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-latin.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2')}
:root{
  --stone:#F1EEE8; --paper:#F8F6F2; --ink:#1F2629; --soft:#4D5559; --oak:#7A5535;
  --slate:#2A3236; --on-slate:#EDEAE4; --on-slate-soft:#B9BDBC;
  --line:color-mix(in srgb,var(--ink) 16%,transparent);
  --display:'Marcellus',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(16px,5vw,80px); --max:1280px;
  /* type scale, ratio 1.25 on a 17px body */
  --t-1:.8rem; --t1:1.33rem; --t2:1.66rem; --t3:clamp(2.07rem,3.6vw,3.25rem); --t4:clamp(2.6rem,6.2vw,5.1rem);
  --kit-bg:var(--paper); --kit-fg:var(--ink); --kit-accent:var(--ink); /* demo kit dialog */
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);font-weight:400;background:var(--stone);color:var(--ink);font-size:17px;line-height:1.65}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance}
h1{font-size:var(--t4);letter-spacing:-.01em}
h2{font-size:var(--t3)}
h3{font-size:var(--t2);line-height:1.2}
p{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
.caps{font-size:var(--t-1);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.lead{font-size:var(--t1);line-height:1.5;color:var(--soft);max-width:40ch;font-weight:300}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);font:500 15px var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--slate)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.light{background:var(--on-slate);border-color:var(--on-slate);color:var(--ink)}
.btn.light:hover{background:var(--paper)}
.btn.light-line{background:transparent;border-color:var(--on-slate);color:var(--on-slate)}
.btn.light-line:hover{background:var(--on-slate);color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* demo bar: honest about what this is */
.demo{background:var(--ink);color:var(--on-slate);font-size:13px;line-height:1.5;text-align:center;padding:9px 16px}
.demo a{color:var(--on-slate)}

header{background:color-mix(in srgb,var(--stone) 96%,transparent);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{text-decoration:none;font:400 22px/1 var(--display);letter-spacing:.24em;text-transform:uppercase}
header nav{display:flex;gap:clamp(18px,3vw,36px);font-size:15px}
header nav a{text-decoration:none;color:var(--soft);padding:12px 0}
header nav a:hover,header nav a[aria-current=page]{color:var(--ink)}
header nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px}
header .btn{min-height:44px;padding:10px 20px}
@media(max-width:760px){
  header{position:static}
  header .wrap{flex-wrap:wrap;gap:0 16px;padding-top:14px;padding-bottom:6px}
  header nav{order:3;width:100%;justify-content:space-between;border-top:1px solid var(--line);margin-top:12px}
  .brand{font-size:19px}
}

/* hero: type on stone, then the photo as the space */
.hero{padding:clamp(48px,9vh,120px) 0 clamp(36px,5vw,64px)}
.hero h1{max-width:15ch;margin:20px 0 24px}
.hero .lead{margin-bottom:32px}
.hero-img{position:relative}
.hero-img img{width:100%;height:clamp(420px,46vw,720px);object-fit:cover;object-position:50% 55%}
@media(max-width:600px){.hero-img img{height:auto;aspect-ratio:4/5}}
.credit{font-size:13px;color:var(--soft);padding-top:10px}

/* one big fact row */
.facts{border-bottom:1px solid var(--line)}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:clamp(32px,5vw,56px) 0}
.facts dt{font:400 var(--t2)/1.1 var(--display)}
.facts dd{margin-top:6px;font-size:15px;color:var(--soft)}
@media(max-width:760px){.facts dl{grid-template-columns:1fr 1fr}}

section.block{padding:clamp(72px,11vw,150px) 0}

/* walkthrough preview, same pattern as the DVM .tourprev block */
.tourprev{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.tourprev video{width:100%;height:auto;background:var(--ink)}
.tourprev figcaption{min-width:0}
.tourprev h2{margin-bottom:18px}
.tourprev p{color:var(--soft);max-width:44ch}
.tourprev .tp-note{font-size:14px;margin-top:16px}
.tourprev .tp-soon{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);padding:4px 12px;background:var(--paper)}
@media(max-width:900px){.tourprev{grid-template-columns:1fr}.tourprev video{max-height:80vh;width:auto;margin:0 auto}}

/* materials: numbered photo and text rows */
.rows{display:grid;gap:clamp(64px,10vw,140px)}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.row.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.row.flip .pic{order:2}
.row .n{font:300 var(--t1)/1 var(--sans);letter-spacing:.08em;color:var(--oak);display:block;margin-bottom:18px}
.row h2,.row h3{margin-bottom:16px}
.row p{color:var(--soft);max-width:42ch}
.pic{overflow:hidden;background:#E4E0D8}
.pic img{width:100%;height:100%;object-fit:cover}
.r32{aspect-ratio:3/2}
.r45{aspect-ratio:4/5}
.r21{aspect-ratio:2/1}
@media(max-width:820px){.row,.row.flip{grid-template-columns:1fr}.row.flip .pic{order:0}}

/* sample review */
.review{max-width:900px;margin:0 auto;text-align:center}
.review blockquote{max-width:24ch;margin:0 auto}
.review blockquote{font:400 var(--t3)/1.2 var(--display);text-wrap:balance}
.review figcaption{margin-top:20px;font-size:14px;color:var(--soft)}

/* the house: wide room, text in two columns beneath */
.wide .pic{margin-bottom:clamp(24px,3vw,40px)}
.wide .txt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,64px)}
.wide p{color:var(--soft);max-width:52ch}
@media(max-width:820px){.wide .txt{grid-template-columns:1fr}}
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:end}
.pair p{color:var(--soft);max-width:40ch;margin-top:12px}
.pair .pic{margin-bottom:20px}
@media(max-width:820px){.pair{grid-template-columns:1fr}}

/* plain lists of facts */
.spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.spec dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);border-top:1px solid var(--line)}
.spec dt,.spec dd{padding:16px 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:500}
.spec dd{color:var(--soft);margin:0}
.spec ul{list-style:none;padding:0;border-top:1px solid var(--line)}
.spec li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--soft)}
.spec li b{color:var(--ink);font-weight:500}
@media(max-width:820px){.spec{grid-template-columns:1fr}}
.small{font-size:14px;color:var(--soft);margin-top:16px}

/* stay: rate and steps */
.rate{font:300 var(--t2)/1.3 var(--sans);max-width:24ch;margin:0 0 24px}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:8px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font:300 var(--t1)/1.3 var(--sans);color:var(--oak)}
.steps b{font-weight:500}
.steps span{grid-column:2;color:var(--soft)}

/* concierge: the dark chapter with the enquiry form */
.concierge{background:var(--slate);color:var(--on-slate);padding:clamp(72px,10vw,140px) 0}
.concierge .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.concierge h2{color:var(--on-slate)}
.concierge .lead{color:var(--on-slate-soft);margin:20px 0 32px}
.concierge .small{color:var(--on-slate-soft)}
@media(max-width:860px){.concierge .wrap{grid-template-columns:1fr}}
form[data-demo-form]{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:grid;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:500}
input,textarea{font:inherit;font-size:16px;min-height:48px;padding:11px 14px;border-radius:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--soft)}
.concierge input,.concierge textarea{border-color:color-mix(in srgb,var(--on-slate) 50%,transparent);background:color-mix(in srgb,var(--on-slate) 6%,transparent);color:var(--on-slate)}
.concierge input::placeholder,.concierge textarea::placeholder{color:var(--on-slate-soft)}
.concierge :focus-visible{outline-color:var(--on-slate)}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.consent input{min-height:auto;width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--ink)}
.concierge .consent input{accent-color:var(--on-slate)}
form[data-demo-form] .btn{justify-self:start}
form [role=status]{grid-column:1/-1;font-size:15px;min-height:1.5em}
@media(max-width:520px){form[data-demo-form]{grid-template-columns:1fr}}
.form-card{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,4vw,48px)}

/* demo kit panel in the display face */
.demo-wa h2{font-family:var(--display);font-weight:400}
.demo-wa .demo-wa-close{border-radius:0}

footer{background:var(--ink);color:var(--on-slate-soft);font-size:14px;padding:32px 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--on-slate)}

/* motion: the hero photo opens to full width; photos settle as they scroll in. Content is visible throughout. */
.hero-img img{animation:open 1.6s var(--ease) both}
@keyframes open{from{clip-path:inset(0 5%)}to{clip-path:inset(0 0)}}
@supports (animation-timeline:view()){
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes rise{from{transform:translateY(28px)}to{transform:none}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-img img,.rise{animation:none!important;clip-path:none;transform:none}
  .btn{transition:none}
}
section.block.flush{padding-top:0}
.rev-h{font-family:var(--sans);text-align:center;margin-bottom:28px}
.page-head{padding:clamp(48px,9vh,120px) 0 clamp(40px,6vw,80px)}
.page-head h1{max-width:16ch;margin:20px 0 24px}
p.wrap.small{margin-top:48px;margin-bottom:72px}
.spec h2 + .lead{margin:16px 0 24px}