/* ==========================================================================
   Landmark Quest Inc. — base styles
   Reset, type, layout, header/footer, and the shared "survey" components:
   dimension lines, plates with registration marks, floor rail, elevator doors.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.64;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:var(--bg)}

:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:16px;top:-80px;z-index:2000;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;font:500 .85rem var(--font-body);transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
:root{
  --gutter:clamp(16px,2.2vw,32px);
  --margin:clamp(20px,5.2vw,84px);
  --max:1440px;
  --sec:clamp(80px,10vw,152px);
  --hh:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
.wrap{width:min(100% - 2*var(--margin),var(--max));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec)*.6)}
.is-night{
  --bg:var(--night);--bg-2:var(--night-2);--fg:var(--bone);--muted:#9FADA9;
  --rule:rgba(237,231,218,.16);--rule-strong:rgba(237,231,218,.42);--acc:#7CC0B3;
  background:var(--bg);color:var(--fg);
}
.is-paper2{background:var(--paper-2)}
main{display:block;padding-top:var(--hh)}

/* ---------- type ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);font-weight:340;line-height:1.02;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 30;
}
h1,.display{font-size:clamp(2.9rem,7.2vw,7.4rem);line-height:.96;letter-spacing:-.028em}
h2,.h2{font-size:clamp(2rem,4.2vw,3.9rem);line-height:1.02}
h3,.h3{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.12;letter-spacing:-.012em}
h4{font-size:1.15rem;line-height:1.2;letter-spacing:-.005em;font-weight:420}
em,.em{font-style:italic;font-weight:300;color:var(--acc);font-variation-settings:"SOFT" 100}
.lead{font-size:clamp(1.15rem,1.55vw,1.42rem);line-height:1.5;max-width:44ch;color:var(--fg)}
.muted{color:var(--muted)}
.mono,.label{font-family:var(--font-mono);font-size:.72rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.label{color:var(--muted)}
.balance{text-wrap:balance}
.measure{max-width:62ch}

/* ---------- links & buttons ---------- */
.link{
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:.12em;transition:background-size .5s var(--ease),color .3s;
}
.link:hover{background-size:0% 1px;background-position:100% 100%}
.btn{
  --fill:var(--fg);
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:1rem 1.5rem;border:1px solid var(--fg);color:var(--fg);
  font:500 .76rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(var(--fill),var(--fill)) 0 0/0% 100% no-repeat;
  transition:background-size .5s var(--ease),color .5s var(--ease);
}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:var(--bg)}
.btn svg{width:18px;height:10px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{padding:.72rem 1.05rem;font-size:.7rem}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hh);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-inline:var(--margin);background:var(--bg);color:var(--fg);
  border-bottom:1px solid var(--rule);
  transition:height .4s var(--ease),background-color .5s,color .5s,border-color .5s;
}
.site-header.is-compact{--hh:58px}
.brand{display:inline-flex;align-items:center;gap:.8rem;flex:none}
.brand__mark{width:34px;height:34px;color:var(--fg)}
.brand__word{font:500 .78rem/1.05 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
.brand__word span{display:block;color:var(--muted);letter-spacing:.34em;font-size:.6rem;margin-top:.3rem}
.nav ul{display:flex;gap:clamp(18px,2.6vw,44px)}
.nav a{
  position:relative;display:block;padding-top:.78rem;font-size:.9rem;font-weight:500;letter-spacing:.005em;
}
.nav a::before,.nav a::after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
.nav a::before{background:var(--rule-strong)}
.nav a::after{background:var(--acc);height:2px;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav__n{font:400 .62rem var(--font-mono);color:var(--muted);margin-right:.5em;letter-spacing:.1em}
.site-header .btn{flex:none}
.nav-toggle{display:none;font:500 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;padding:.6rem 0}
.nav-toggle i{display:inline-block;width:18px;height:7px;margin-left:.7rem;border-top:1px solid currentColor;border-bottom:1px solid currentColor;vertical-align:middle}

.menu{
  position:fixed;inset:0;z-index:55;background:var(--bg);color:var(--fg);
  padding:calc(var(--hh) + 36px) var(--margin) 40px;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease-io),visibility 0s .7s;
}
.menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease-io)}
.menu ol{counter-reset:m}
.menu li{border-top:1px solid var(--rule)}
.menu li:last-child{border-bottom:1px solid var(--rule)}
.menu a{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;font:340 clamp(2rem,9vw,3.4rem)/1 var(--font-display);letter-spacing:-.02em}
.menu a span{flex:none;width:2.2rem;font:400 .66rem var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.menu__foot a{display:block;max-width:100%;padding:0;font:400 1rem/1.4 var(--font-body);letter-spacing:0;overflow-wrap:anywhere}
.menu__foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:1060px){
  .nav,.site-header .btn{display:none}
  .nav-toggle{display:block}
}

/* ---------- floor rail (section indicator) ---------- */
.rail{
  position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:40;
  width:22px;height:min(44vh,400px);
}
.rail__line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule-strong);transform:translateX(-.5px)}
.rail__stop{position:absolute;left:0;width:22px;height:22px;margin-top:-11px;display:block}
.rail__stop::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;background:var(--rule-strong);transform:translate(-50%,-50%)}
.rail__stop span{
  position:absolute;right:30px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  font:500 .62rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);
  background:var(--bg);padding:.3rem .5rem;border:1px solid var(--rule);
}
.rail__stop:hover span,.rail__stop:focus-visible span{opacity:1;transform:translateY(-50%)}
.rail__dot{
  position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px var(--bg);transition:background-color .5s;
}
@media (max-width:1180px){.rail{display:none}}

/* ---------- dimension line (section heads) ---------- */
.dim{display:flex;align-items:center;gap:1rem;color:var(--muted)}
.dim__label{font:500 .7rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--fg)}
.dim__bar{position:relative;flex:1;height:1px;background:var(--rule-strong);transform-origin:left}
.dim__bar::before,.dim__bar::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--rule-strong);transform:rotate(32deg)}
.dim__bar::before{left:0}
.dim__bar::after{right:0}
.dim__bar--short{flex:0 0 clamp(28px,6vw,90px)}
.js .dim__bar{transform:scaleX(0);transition:transform 1.3s var(--ease)}
.js .dim.is-in .dim__bar{transform:scaleX(1)}
.js .dim__bar:last-child{transform-origin:right}

/* ---------- plates: photographs with registration marks ---------- */
.plate{position:relative}
.plate__frame{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/5);background:var(--bg-2)}
.plate__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.plate__marks{
  position:absolute;inset:-11px;pointer-events:none;color:var(--rule-strong);
  background:
    linear-gradient(currentColor,currentColor) 0 0/15px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1px 15px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/15px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1px 15px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/15px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1px 15px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/15px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1px 15px no-repeat;
}
/* lot line that draws itself around the photo on hover */
.plate__frame::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  background:
    linear-gradient(var(--bone),var(--bone)) 0 0/0% 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 0/1px 0% no-repeat,
    linear-gradient(var(--bone),var(--bone)) 100% 100%/0% 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) 0 100%/1px 0% no-repeat;
  transition:background-size .9s var(--ease);
}
.plate:hover .plate__frame::after{background-size:100% 1px,1px 100%,100% 1px,1px 100%}
.plate__frame img{transition:transform 1.6s var(--ease)}
.plate:hover .plate__frame img{transform:scale(1.035)}
.plate figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:1.05rem;font:400 .68rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js-failed [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.js-failed .dim__bar{transform:none!important}

/* ---------- "next" teaser (page-to-page) ---------- */
.next{
  position:relative;display:block;padding:clamp(56px,8vw,120px) var(--margin);
  border-top:1px solid var(--rule);background:var(--bg);color:var(--fg);overflow:hidden;
}
.next__in{width:min(100%,var(--max));margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.next__title{display:block;font:340 clamp(2.6rem,8.6vw,8.6rem)/.95 var(--font-display);letter-spacing:-.03em;font-variation-settings:"SOFT" 30;transition:transform .8s var(--ease),color .4s}
.next__title em{font-weight:300}
.next__label{display:block;margin-bottom:1.4rem}
.next__arrow{flex:none;width:clamp(48px,7vw,108px);height:auto;color:var(--acc);transition:transform .8s var(--ease)}
.next::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.next:hover::after,.next:focus-visible::after{transform:scaleX(1)}
.next:hover .next__title{transform:translateX(clamp(8px,1.2vw,22px))}
.next:hover .next__arrow{transform:translateX(18px)}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--bone);padding:clamp(72px,9vw,132px) 0 32px;
  --muted:#9FADA9;--rule:rgba(237,231,218,.16);--rule-strong:rgba(237,231,218,.4);--acc:#7CC0B3;--fg:var(--bone);--bg:var(--night)}
.site-footer .grid{row-gap:3rem}
.foot__brand{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--rule)}
.foot__word{font:340 clamp(2.4rem,7vw,6.4rem)/.92 var(--font-display);letter-spacing:-.03em}
.foot__word em{color:var(--lamp);font-weight:300}
.foot__mail{display:block;margin-top:.8rem;font:340 clamp(1.4rem,2.6vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.01em}
.foot__col{grid-column:span 3}
.foot__col h2{font:500 .68rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.foot__col li+li{margin-top:.55rem}
.foot__col a{font-size:.96rem}
.foot__col a:hover{color:var(--lamp)}
.foot__legal{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem 3rem;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:1.6rem;font:400 .74rem/1.6 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.foot__legal p{max-width:62ch}
.eho{display:inline-flex;align-items:center;gap:.7rem;color:var(--bone)}
.eho svg{width:30px;height:30px}
@media (max-width:900px){.foot__col{grid-column:span 6}}
@media (max-width:520px){.foot__col{grid-column:1/-1}}

/* ---------- elevator doors (page transition) ---------- */
.doors{position:fixed;inset:0;z-index:1200;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;visibility:hidden;transition:visibility 0s linear .75s}
.doors.is-shut{transition:visibility 0s}
.doors__panel{position:relative;background:var(--night);transition:transform .62s var(--ease-io)}
.doors__panel--l{transform:translateX(-101%)}
.doors__panel--r{transform:translateX(101%)}
.doors__panel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(237,231,218,.025) 0 1px,transparent 1px 7px)}
.doors__panel::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--lamp);opacity:.85}
.doors__panel--l::after{right:0}
.doors__panel--r::after{left:0}
.doors__display{
  position:absolute;left:50%;top:17vh;transform:translateX(-50%);text-align:center;color:var(--lamp);
  opacity:0;transition:opacity .3s .2s;pointer-events:none;
}
.doors__floor{display:block;font:500 .7rem var(--font-mono);letter-spacing:.34em;text-transform:uppercase;margin-bottom:.8rem}
.doors__name{display:block;font:300 clamp(2rem,5vw,3.6rem)/1 var(--font-display);letter-spacing:-.02em;color:var(--bone)}
.doors.is-shut,.doors-in .doors{visibility:visible;pointer-events:all}
.doors.is-shut .doors__panel,.doors-in .doors__panel{transform:none}
.doors.is-shut .doors__display,.doors-in .doors__display{opacity:1}
/* if scripts fail, doors still open by themselves */
.doors-in .doors__panel--l{animation:doorL .62s var(--ease-io) 2.4s forwards}
.doors-in .doors__panel--r{animation:doorR .62s var(--ease-io) 2.4s forwards}
.doors-in .doors{animation:doorVis 0s 3.1s forwards}
@keyframes doorL{to{transform:translateX(-101%)}}
@keyframes doorR{to{transform:translateX(101%)}}
@keyframes doorVis{to{visibility:hidden}}
.doors-in .doors{transition:none}
.doors-in .doors__display{transition:none}

/* ---------- prose (notes, legal) ---------- */
.prose{max-width:66ch}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.3rem);margin-top:2.2em}
.prose h3{margin-top:1.8em;font-size:1.3rem}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:1.4rem}
.prose ul li+li{margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.78em;width:.7rem;height:1px;background:var(--acc)}
.prose a{color:var(--acc);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.prose a:hover{background-size:0 1px;background-position:100% 100%}
.prose strong{font-weight:600}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .doors{display:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .dim__bar{transform:none}
}