/* =====================================================================
   Freehold — shared styles
   ===================================================================== */

@font-face{font-family:'Anybody';src:url(assets/fonts/anybody.woff2) format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap}
@font-face{font-family:'Anybody';src:url(assets/fonts/anybody-italic.woff2) format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

@property --lot{syntax:'<percentage>';inherits:false;initial-value:0%}

:root{
  --soil:#0C110E;
  --soil-2:#121915;
  --soil-3:#1A231E;
  --soil-4:#243029;
  --bone:#ECEFE7;
  --mute:#A3AEA6;
  --dim:#66736B;
  --tape:#FF6533;
  --tape-2:#FF8659;
  --paper:#E8EBE3;
  --paper-2:#DCE1D6;
  --ink:#0F1511;
  --ink-2:#4A5650;
  --line:rgba(236,239,231,.1);
  --line-2:rgba(236,239,231,.2);

  --display:'Anybody','Arial Narrow',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --swift:cubic-bezier(.7,0,.2,1);
  --pad:clamp(1.15rem,4.5vw,4rem);
  --max:1320px;
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
figure{margin:0}
body{
  margin:0;background:var(--soil);color:var(--bone);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.1rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,6rem);font-stretch:112%}
h2{font-size:clamp(2.2rem,5vw,4.6rem);font-stretch:112%}
h3{font-size:clamp(1.3rem,2vw,1.7rem);font-stretch:110%;line-height:1.1}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
img,video,svg{display:block;max-width:100%}
::selection{background:var(--tape);color:var(--soil)}
:focus-visible{outline:2px solid var(--tape);outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(5rem,11vw,10rem)}
.lede{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--mute);max-width:46ch}
.muted{color:var(--mute)}
.skip{position:absolute;left:-999px;top:0;z-index:500;background:var(--tape);color:var(--soil);padding:.7rem 1rem;font-weight:700}
.skip:focus{left:0}

/* Faint survey grid behind every page */
.gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;display:flex;justify-content:center}
.gridlines i{width:min(var(--max),100%);height:100%;margin:0 var(--pad);
  background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%;
  border-right:1px solid var(--line);opacity:.45}

/* =====================================================================
   Page transitions: the new page is marked out in eight lots
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lots-out .8s var(--swift) both}
::view-transition-new(root){
  animation:lots-in .8s var(--swift) both;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--lot),transparent var(--lot));
          mask-image:linear-gradient(90deg,#000 var(--lot),transparent var(--lot));
  -webkit-mask-size:12.5% 100%;mask-size:12.5% 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
@keyframes lots-in{from{--lot:0%}to{--lot:100%}}
@keyframes lots-out{to{opacity:.25;transform:scale(.97)}}
.nav{view-transition-name:nav}

/* =====================================================================
   First-visit intro: a lot boundary is surveyed, then opened
   ===================================================================== */
.veil{display:none}
html.intro .veil{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--soil);
  animation:intro-out .75s var(--swift) 1.75s forwards;
}
.intro-box{position:relative;width:min(84vw,860px);aspect-ratio:3.4/1;display:grid;place-items:center}
.intro-box .pg{position:absolute;width:12px;height:12px;background:var(--tape);transform:translate(-50%,-50%) scale(0);animation:peg .45s var(--ease) forwards}
.intro-box .pg:nth-of-type(1){left:0;top:0;animation-delay:.25s}
.intro-box .pg:nth-of-type(2){left:100%;top:0;animation-delay:.45s}
.intro-box .pg:nth-of-type(3){left:100%;top:100%;animation-delay:.65s}
.intro-box .pg:nth-of-type(4){left:0;top:100%;animation-delay:.85s}
.intro-word{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,11vw,8.4rem);line-height:1;letter-spacing:-.01em;display:flex}
.intro-word span{display:inline-block;opacity:0;font-variation-settings:'wdth' 50;animation:widen 1s var(--ease) forwards;animation-delay:calc(.5s + var(--i) * 40ms)}
.intro-cap{position:absolute;left:0;right:0;bottom:-2.4rem;text-align:center;font-size:.85rem;color:var(--mute);margin:0 auto;opacity:0;animation:fade .6s ease 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes peg{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes widen{to{opacity:1;font-variation-settings:'wdth' 125}}
@keyframes fade{to{opacity:1}}
@keyframes intro-out{to{clip-path:inset(50% 0 50% 0)}}

/* =====================================================================
   Nav
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;padding:1.1rem var(--pad);
  transition:background .35s,padding .35s,border-color .35s;border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(12,17,14,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none}
.brand svg{width:24px;height:24px;flex:none}
.brand .bx{fill:none;stroke:var(--bone);stroke-width:1.6}
.brand .pk{fill:var(--bone)}
.brand .pk.hot{fill:var(--tape)}
.brand b{font-family:var(--display);font-weight:800;font-stretch:135%;font-size:1.05rem;letter-spacing:.02em}
.brand:hover .pk.hot{animation:blip .6s var(--ease)}
@keyframes blip{50%{transform:scale(1.6);transform-origin:4px 4px}}
.links{display:flex;gap:.3rem}
.links a{position:relative;text-decoration:none;color:var(--mute);font-size:.95rem;font-weight:550;padding:.45rem .8rem;transition:color .2s}
.links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.2rem;height:1.5px;background:var(--tape);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.links a:hover,.links a[aria-current="page"]{color:var(--bone)}
.links a:hover::after,.links a[aria-current="page"]::after{transform:scaleX(1)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);background:transparent;cursor:pointer;place-items:center}
.burger span,.burger span::before{display:block;width:18px;height:1.5px;background:var(--bone);transition:transform .35s var(--ease)}
.burger span{position:relative}
.burger span::before{content:"";position:absolute;top:6px;left:0}
.burger span{transform:translateY(-3px)}
.menu-open .burger span{transform:translateY(0) rotate(45deg)}
.menu-open .burger span::before{transform:translateY(-6px) rotate(-90deg)}
.menu{
  position:fixed;inset:0;z-index:90;background:var(--soil-2);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--swift),visibility 0s linear .7s;
}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--swift),visibility 0s}
.menu a{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:clamp(2.6rem,11vw,4.4rem);line-height:1.05;text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-open .menu a{opacity:1;transform:none}
.menu a[aria-current="page"]{color:var(--tape)}
.menu-foot{margin-top:2.5rem;color:var(--mute);display:grid;gap:.25rem}
.menu-foot a{font-family:var(--body);font-size:1rem;font-weight:500;opacity:1;transform:none;color:var(--bone)}
.menu-open body{overflow:hidden}

/* =====================================================================
   Buttons: corner pegs spring out on hover
   ===================================================================== */
.btn{
  --peg:var(--tape);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 1.6rem;border:none;cursor:pointer;text-decoration:none;
  background:var(--tape);color:var(--soil);font:650 .98rem/1 var(--body);letter-spacing:.01em;
  transition:background .25s,color .25s,transform .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    linear-gradient(var(--peg),var(--peg)) 0 0/12px 2px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 0 0/2px 12px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 100% 0/12px 2px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 100% 0/2px 12px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 0 100%/12px 2px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 0 100%/2px 12px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 100% 100%/12px 2px no-repeat,
    linear-gradient(var(--peg),var(--peg)) 100% 100%/2px 12px no-repeat;
  transition:inset .45s var(--ease),opacity .3s;
}
.btn:hover::after,.btn:focus-visible::after{inset:-8px;opacity:1}
.btn:hover{background:var(--tape-2)}
.btn:active{transform:scale(.97)}
.btn.ghost{--peg:var(--bone);background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{background:rgba(236,239,231,.06)}
.btn.sm{padding:.75rem 1.1rem;font-size:.9rem}
.btn .ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn[disabled]{opacity:.55;pointer-events:none}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(12,17,14,.3);border-top-color:var(--soil);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tlink{color:var(--bone);text-decoration:none;background:linear-gradient(var(--tape),var(--tape)) 0 100%/0% 1.5px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.tlink:hover{background-size:100% 1.5px}

/* =====================================================================
   Word-by-word reveal from behind a mask
   ===================================================================== */
.js .split:not(.split-ready){visibility:hidden}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .1em;margin:-.08em 0 -.1em}
.wi{display:inline-block;transform:translateY(108%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i) * 45ms + var(--d, 0ms))}
.split.in .wi{transform:none}
.rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rise.in{opacity:1;transform:none}
html:not(.js) .rise{opacity:1;transform:none}

/* =====================================================================
   Home — hero
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:7rem 0 2.6rem}
.topo{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%)}
.hero .wrap{position:relative;width:100%}
.coords{position:absolute;top:6.4rem;left:0;right:0;display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--mute);letter-spacing:.02em;padding-inline:var(--pad);max-width:var(--max);margin:0 auto}
.coords span{display:flex;align-items:center;gap:.5rem}
.coords span::before{content:"";width:7px;height:7px;background:var(--tape)}
.bigword{
  display:flex;justify-content:center;white-space:nowrap;user-select:none;
  font-family:var(--display);font-weight:800;line-height:.8;letter-spacing:-.01em;
  font-size:17vw;margin:0 0 clamp(1.4rem,3vw,2.6rem);
}
.bigword span{display:inline-block;font-variation-settings:'wdth' 100,'wght' 800}
.hero-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.hero h1{font-size:clamp(2rem,4.2vw,3.9rem);font-stretch:108%;max-width:17ch}
.hero-side .lede{margin-bottom:1.6rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.scrollcue{position:absolute;left:50%;bottom:1rem;width:1px;height:46px;background:var(--line-2);overflow:hidden}
.scrollcue::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--tape);animation:cue 2.2s var(--swift) infinite}
@keyframes cue{to{top:110%}}

/* Home — the wall of work */
.wall{padding:clamp(5rem,10vw,8rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.wall-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.wall-head .lede{margin-bottom:1.5rem}
.wall-stage{perspective:1500px;perspective-origin:50% 20%;margin-top:clamp(3rem,6vw,5rem)}
.wall-plane{
  --p:0;display:grid;gap:clamp(.8rem,1.5vw,1.3rem);transform-origin:50% 0;will-change:transform;
  transform:rotateX(calc((1 - var(--p)) * 38deg)) rotateZ(calc((1 - var(--p)) * -8deg)) scale(calc(.8 + var(--p) * .2));
}
.wall-row{display:flex;gap:clamp(.8rem,1.5vw,1.3rem);width:max-content;will-change:transform}
.shot{flex:none;height:clamp(170px,23vw,330px);overflow:hidden;border:1px solid var(--line-2);background:var(--soil-3);border-radius:10px;box-shadow:0 40px 70px -35px rgba(0,0,0,.9)}
.shot img{height:100%;width:auto}
.shot.tall{border-radius:22px}

/* Home — trades marquee */
.marq{border-block:1px solid var(--line);overflow:hidden;padding:1.6rem 0}
.marq-track{display:flex;width:max-content;will-change:transform}
.marq-track span{display:flex;align-items:center;gap:clamp(1.6rem,3vw,3rem);padding-right:clamp(1.6rem,3vw,3rem);font-family:var(--display);font-weight:750;font-stretch:130%;font-size:clamp(2rem,5.4vw,4.6rem);line-height:1;white-space:nowrap}
.marq-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--mute)}
.marq-track i{width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);flex:none;
  background:linear-gradient(45deg,transparent 43%,var(--tape) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--tape) 43% 57%,transparent 57%)}

/* Home — what's different (sticky visual) */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);margin-top:clamp(2.5rem,5vw,4rem)}
.feat{min-height:72vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding-block:3rem}
.feat h3{font-size:clamp(1.7rem,3.2vw,2.8rem);margin-bottom:1.1rem;max-width:14ch;transition:color .4s}
.feat p{color:var(--mute);font-size:1.08rem;max-width:44ch}
.feat.on h3{color:var(--bone)}
.feat:not(.on) h3{color:var(--dim)}
.feat .fv-inline{display:none}
.feat-stage{position:sticky;top:14vh;height:72vh}
.fv{position:absolute;inset:0;display:grid;place-items:center;background:var(--soil);clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--swift)}
.fv.on{clip-path:inset(0 0 0 0)}
.fv > *{max-width:100%}
.frame{border:1px solid var(--line-2);background:var(--soil-3);border-radius:12px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.95)}
.frame img{width:100%;height:auto}
.collage{position:relative;width:100%;height:100%}
.collage .frame{position:absolute}
.collage .c1{left:0;top:6%;width:84%}
.collage .c2{right:0;bottom:6%;width:62%}
.collage .c3{left:6%;bottom:0;width:22%;border-radius:20px}
.toast{position:absolute;right:6%;bottom:10%;display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;background:var(--bone);color:var(--soil);font-weight:650;font-size:.92rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.7);transform:translateY(20px);opacity:0;transition:transform .7s var(--ease) .5s,opacity .5s .5s}
.toast::before{content:"";width:9px;height:9px;border-radius:50%;background:#2FA36B}
.fv.on .toast{transform:none;opacity:1}
.editor-wrap{position:relative;width:100%}

.deed{position:relative;width:min(100%,460px);background:var(--paper);color:var(--ink);padding:2.2rem 2rem 2rem;box-shadow:0 50px 90px -40px rgba(0,0,0,.95);transform:rotate(-2deg)}
.deed::before{content:"";position:absolute;inset:10px;border:1px solid rgba(15,21,17,.25);pointer-events:none}
.deed h4{margin:0 0 1.4rem;font-family:var(--display);font-stretch:140%;font-weight:750;font-size:1.25rem;letter-spacing:.01em}
.deed dl{margin:0;display:grid;gap:.85rem}
.deed dt{font-size:.74rem;color:var(--ink-2);font-weight:600}
.deed dd{margin:.1rem 0 0;font-size:1.05rem;font-weight:650;border-bottom:1px dashed rgba(15,21,17,.3);padding-bottom:.35rem}
.seal{position:absolute;right:1.4rem;bottom:1.4rem;width:96px;height:96px;border-radius:50%;border:2px solid var(--tape);color:var(--tape);display:grid;place-items:center;text-align:center;font-family:var(--display);font-stretch:120%;font-weight:750;font-size:.72rem;line-height:1.1;transform:rotate(-14deg) scale(1.4);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1) .6s,opacity .2s .6s}
.fv.on .seal,.feat .seal{transform:rotate(-14deg) scale(1);opacity:.92}

.route{width:min(100%,420px);background:var(--soil-2);border:1px solid var(--line-2);padding:1.4rem;box-shadow:0 50px 90px -40px rgba(0,0,0,.95)}
.route svg{width:100%;height:auto}
.route .ct{fill:none;stroke:var(--line-2);stroke-width:1}
.route .coast{fill:none;stroke:var(--mute);stroke-width:1.4;stroke-dasharray:3 5}
.route .road{fill:none;stroke:var(--tape);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--swift) .3s}
.fv.on .route .road,.feat .route .road{stroke-dashoffset:0}
.route .stop{fill:var(--soil);stroke:var(--bone);stroke-width:1.6}
.route .home{fill:var(--tape)}
.route .pulse{fill:none;stroke:var(--tape);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.route text{font:600 13px var(--body);fill:var(--bone)}
.route .sub{font-weight:400;fill:var(--mute);font-size:11px}
.route p{margin:.9rem 0 0;font-size:.9rem;color:var(--mute)}

/* Home — how it works, pinned while it scrolls sideways */
.proc{position:relative;height:320vh}
.proc-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,5vh,4rem)}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.proc-rail{position:relative}
.proc-line{position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--line-2)}
.proc-line i{position:absolute;inset:0;background:var(--tape);transform:scaleX(var(--pp,0));transform-origin:left}
.proc-track{display:flex;will-change:transform;padding-left:var(--pad)}
.pstep{flex:none;width:min(520px,72vw);padding:2.6rem 3.5rem 0 0;position:relative}
.pstep::before{content:"";position:absolute;left:0;top:-6px;width:12px;height:12px;background:var(--soil);border:1.5px solid var(--mute);transition:background .4s,border-color .4s,transform .4s var(--ease)}
.pstep.on::before{background:var(--tape);border-color:var(--tape);transform:scale(1.25)}
.pstep .n{display:block;font-family:var(--display);font-weight:800;font-stretch:150%;font-size:clamp(4.5rem,9vw,8.5rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--dim);margin-bottom:1.4rem;transition:color .5s,-webkit-text-stroke-color .5s}
.pstep.on .n{color:var(--tape);-webkit-text-stroke-color:var(--tape)}
.pstep h3{margin-bottom:.8rem}
.pstep p{color:var(--mute);max-width:40ch}
.proc-end{flex:none;width:min(420px,60vw);padding-top:2.6rem;align-self:center}

/* Home — about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.about h2{font-size:clamp(3rem,8.5vw,7.5rem);font-stretch:125%}
.about p{color:var(--mute);font-size:1.12rem}
.about p strong{color:var(--bone);font-weight:600}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--line)}
.contact-list li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.02rem}
.contact-list span{color:var(--mute)}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:var(--tape)}

/* Home — call to action, marked out with a boundary */
.cta-box{position:relative;text-align:center;padding:clamp(3.5rem,9vw,7rem) var(--pad)}
.cta-box .pg{position:absolute;width:14px;height:14px;background:var(--tape);transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--ease)}
.cta-box .pg:nth-of-type(1){left:0;top:0;transition-delay:.2s}
.cta-box .pg:nth-of-type(2){left:100%;top:0;transition-delay:.6s}
.cta-box .pg:nth-of-type(3){left:100%;top:100%;transition-delay:1s}
.cta-box .pg:nth-of-type(4){left:0;top:100%;transition-delay:1.4s}
.cta-box.in .pg{transform:translate(-50%,-50%) scale(1)}
.cta-box h2{font-size:clamp(3rem,9vw,8rem);font-stretch:130%;margin-bottom:1.4rem}
.cta-box .lede{margin:0 auto 2.2rem}
.cta-box .actions{justify-content:center}

/* =====================================================================
   Footer
   ===================================================================== */
.foot{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0 1.6rem;margin-top:clamp(2rem,5vw,4rem)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.foot h4{margin:0 0 1rem;font-size:.85rem;font-weight:650;color:var(--mute)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;overflow-wrap:anywhere}
.foot a{text-decoration:none}
.foot a:hover{color:var(--tape)}
.foot p{color:var(--mute);font-size:.95rem;max-width:34ch}
.clock{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.legal{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--dim)}
.legal a{color:var(--mute)}

/* =====================================================================
   Sub-page hero
   ===================================================================== */
.phero{padding:clamp(8.5rem,16vw,12rem) 0 clamp(2.5rem,5vw,4rem)}
.phero h1{font-size:clamp(3.4rem,11vw,10rem);font-stretch:125%;line-height:.9;margin-bottom:1.6rem}
.phero .lede{max-width:52ch}

/* =====================================================================
   Work page
   ===================================================================== */
.lotmap{margin-top:clamp(2.5rem,5vw,4rem);border:1px solid var(--line);background:var(--soil-2)}
.lotmap svg{width:100%;height:auto}
.lotmap .ct{fill:none;stroke:var(--line);stroke-width:1}
.parcel{cursor:pointer;outline:none}
.parcel path{fill:transparent;stroke:var(--mute);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:fill .35s,stroke .35s}
.ready .parcel path{animation:draw 1.4s var(--swift) forwards}
.ready .parcel:nth-of-type(2) path{animation-delay:.2s}
.ready .parcel:nth-of-type(3) path{animation-delay:.4s}
.parcel:hover path,.parcel:focus-visible path{fill:color-mix(in srgb,var(--acc) 14%,transparent);stroke:var(--acc)}
.parcel .lt{font:700 12px var(--display);font-stretch:140%;fill:var(--acc);letter-spacing:.04em}
.parcel .nm{font:700 22px var(--display);font-stretch:115%;fill:var(--bone)}
.parcel .tr{font:500 13px var(--body);fill:var(--mute)}
.parcel .pk{fill:var(--acc)}

.case{--acc:var(--tape);padding:clamp(5rem,10vw,9rem) 0;border-top:1px solid var(--line);scroll-margin-top:3rem}
.case[data-acc="amber"]{--acc:#FFB223}
.case[data-acc="copper"]{--acc:#E09A6C}
.case[data-acc="violet"]{--acc:#A38BEB}
.case-head{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 2rem;align-items:end}
.lot{font-family:var(--display);font-stretch:150%;font-weight:750;font-size:.95rem;color:var(--acc);letter-spacing:.03em;align-self:start;padding-top:.6rem}
.case h2{font-size:clamp(2.6rem,6.4vw,6rem);font-stretch:118%}
.case .trade{color:var(--mute);text-align:right;font-size:.95rem}
.stage{position:relative;margin:clamp(2.5rem,6vw,4.5rem) 0 clamp(3.5rem,8vw,6rem);perspective:1800px}
.stage-in{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.laptop{width:min(100%,1040px);margin:0 auto}
.laptop .scr{position:relative;border:12px solid #151b18;border-bottom-width:16px;border-radius:18px 18px 6px 6px;background:#000;aspect-ratio:16/10;overflow:hidden;box-shadow:0 60px 110px -50px rgba(0,0,0,1),0 0 0 1px var(--line-2)}
.laptop video,.laptop .scr > img{width:100%;height:100%;object-fit:cover}
.laptop .base{height:16px;width:114%;margin-left:-7%;background:linear-gradient(#2c3631,#141a17);border-radius:0 0 18px 18px;box-shadow:0 30px 50px -20px rgba(0,0,0,.9)}
.laptop .base::after{content:"";display:block;width:14%;height:6px;margin:0 auto;background:#0e1311;border-radius:0 0 8px 8px}
.vtoggle{position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;border:none;cursor:pointer;background:rgba(12,17,14,.72);display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vtoggle svg{width:14px;height:14px;fill:var(--bone)}
.vtoggle .play{display:none}
.vtoggle.paused .play{display:block}
.vtoggle.paused .pause{display:none}
.phone{position:absolute;right:1%;bottom:-8%;width:clamp(110px,17vw,225px);aspect-ratio:390/844;border:7px solid #070a08;border-radius:32px;overflow:hidden;background:#000;box-shadow:0 50px 70px -25px rgba(0,0,0,.95),0 0 0 1px var(--line-2);transform:translate3d(0,var(--py,0px),70px)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.case:nth-of-type(even) .phone{right:auto;left:1%}
.case-body{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem)}
.case-body .idea{font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--bone);max-width:40ch}
.pegs{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.pegs li{display:flex;gap:.9rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--mute)}
.pegs li::before{content:"";flex:none;width:8px;height:8px;background:var(--acc);transform:translateY(-1px)}
.case-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.8rem}
.passcode{font-size:.88rem;color:var(--mute)}
.passcode b{font-family:var(--display);font-stretch:125%;color:var(--bone);letter-spacing:.08em;margin-left:.25rem}
.figure{margin:clamp(2.5rem,5vw,4rem) 0 0}
.figure figcaption{margin-top:.9rem;font-size:.92rem;color:var(--mute)}
.figure .frame{transform:translateY(40px) scale(.97);opacity:0;transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
.figure.in .frame{transform:none;opacity:1}

/* =====================================================================
   Pricing page
   ===================================================================== */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.plan{position:relative;background:var(--soil);padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column}
.plan.primary{background:var(--soil-2)}
.plan.primary::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tape)}
.plan h2{font-size:clamp(2rem,3.5vw,3.1rem);font-stretch:130%;margin-bottom:.4rem}
.plan .tag{color:var(--tape);font-weight:600;margin-bottom:1.6rem}
.price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.price b{font-family:var(--display);font-stretch:120%;font-weight:750;font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.02em}
.price span{color:var(--mute)}
.plan .desc{color:var(--mute);margin:.8rem 0 1.6rem}
.plan .pegs{--acc:var(--tape);margin-bottom:1.6rem}
.plan .pegs li{color:var(--bone)}
.plan .terms{font-size:.9rem;color:var(--mute);margin:0 0 1.8rem}
.plan .btn{margin-top:auto;align-self:flex-start}

.compare{margin-top:clamp(3rem,6vw,5rem)}
.crow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.crow:first-child{border-top:1px solid var(--line);color:var(--mute);font-size:.88rem;font-weight:600}
.crow span:first-child{color:var(--mute)}

.estimator{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(2.5rem,5vw,3.5rem)}
.ectl{border-top:1px solid var(--line)}
.erow{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.erow .lbl b{display:block;font-weight:650}
.erow .lbl span{color:var(--mute);font-size:.9rem}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line-2);padding:3px}
.seg button{position:relative;z-index:1;background:none;border:none;cursor:pointer;color:var(--mute);font:600 .9rem var(--body);padding:.7rem 1.1rem;white-space:nowrap;transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--soil)}
.seg .thumb{position:absolute;z-index:0;top:3px;left:0;height:0;width:0;background:var(--bone);transition:transform .5s var(--ease),width .5s var(--ease)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2)}
.stepper button{width:46px;height:46px;background:none;border:none;color:var(--bone);font-size:1.3rem;cursor:pointer;transition:background .2s}
.stepper button:hover{background:var(--soil-3)}
.stepper button[disabled]{opacity:.3;cursor:default;background:none}
.stepper output{min-width:3ch;text-align:center;font-family:var(--display);font-stretch:120%;font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums}
.switch{position:relative;width:58px;height:32px;flex:none;border:1px solid var(--line-2);background:transparent;cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;background:var(--mute);transition:transform .45s var(--ease),background .3s}
.switch[aria-checked="true"]{border-color:var(--tape)}
.switch[aria-checked="true"]::after{transform:translateX(26px);background:var(--tape)}
.switch[disabled]{opacity:.35;cursor:not-allowed}
.eout{position:sticky;top:6.5rem;background:var(--soil-2);border:1px solid var(--line-2);padding:clamp(1.6rem,3vw,2.4rem)}
.eout h3{margin-bottom:1.4rem}
.eline{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.eline span{color:var(--mute)}
.eline b{font-family:var(--display);font-stretch:118%;font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.eline.big b{font-size:clamp(2.4rem,4.5vw,3.4rem);color:var(--tape)}
.enote{font-size:.86rem;color:var(--mute);margin:1.2rem 0 1.4rem}

/* The quote form sits on a sheet of paper, like an application */
.sheet{background:var(--paper);color:var(--ink);padding:clamp(1.8rem,5vw,3.6rem);position:relative;margin-top:clamp(2.5rem,5vw,3.5rem)}
.sheet::before{content:"";position:absolute;inset:12px;border:1px solid rgba(15,21,17,.18);pointer-events:none}
.sheet h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 1.2rem}
.fset{border:none;padding:0;margin:0 0 2rem;min-width:0}
.fset legend{font-family:var(--display);font-stretch:125%;font-weight:750;font-size:1.25rem;padding:0;margin-bottom:1.1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
.fld{margin-bottom:1.1rem}
.fld > label,.fld > .label{display:block;font-size:.84rem;font-weight:650;color:var(--ink-2);margin-bottom:.35rem}
.fld input,.fld textarea{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(15,21,17,.35);padding:.6rem 0;font:inherit;font-size:1.05rem;color:var(--ink);border-radius:0;transition:border-color .25s}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(15,21,17,.38)}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--tape)}
.fld textarea{min-height:120px;resize:vertical;border:1.5px solid rgba(15,21,17,.35);padding:.8rem}
.fld textarea:focus{border-color:var(--tape)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:1.5px solid rgba(15,21,17,.3);font-size:.93rem;font-weight:550;transition:background .2s,border-color .2s,color .2s}
.chip span::before{content:"";width:9px;height:9px;border:1.5px solid currentColor;transition:background .2s}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:checked + span::before{background:var(--tape);border-color:var(--tape)}
.chip input:focus-visible + span{outline:2px solid var(--tape);outline-offset:2px}
.bad{border-color:#C0392B !important;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ferr{color:#B03A2E;font-weight:650;margin:1rem 0 0}
.ferr:empty{display:none}
.fnote{font-size:.86rem;color:var(--ink-2);margin:1rem 0 0}
.fnote a{color:var(--ink)}
.sheet .btn{--peg:var(--ink)}
.estimate-tag{display:none;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--paper-2);padding:1rem 1.2rem;margin-bottom:1.6rem;font-size:.95rem}
.estimate-tag.show{display:flex;animation:flashin 1s var(--ease)}
@keyframes flashin{from{background:#FFD1BF}}
.estimate-tag button{background:none;border:none;color:var(--ink-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:.88rem}
.lodged{display:none;text-align:center;padding:clamp(2rem,6vw,4rem) 1rem}
.lodged.show{display:block}
.stamp{display:inline-grid;place-items:center;width:170px;height:170px;border-radius:50%;border:3px solid var(--tape);color:var(--tape);font-family:var(--display);font-stretch:130%;font-weight:800;font-size:1.5rem;line-height:1;text-align:center;transform:rotate(-12deg);animation:stamp .6s cubic-bezier(.3,1.5,.5,1) both}
.stamp small{display:block;font-size:.7rem;font-weight:600;margin-top:.4rem;font-family:var(--body);letter-spacing:.02em}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}}
.lodged h3{margin:2rem 0 .8rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.lodged p{margin:0 auto;color:var(--ink-2)}

.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:1.5rem 3.5rem 1.5rem 0;font-family:var(--display);font-stretch:112%;font-weight:650;font-size:clamp(1.1rem,1.7vw,1.35rem);transition:color .2s}
.faq summary:hover{color:var(--tape)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:16px;height:1.5px;background:var(--tape);transition:transform .45s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details[open] summary::before{transform:rotate(180deg)}
.faq details p{color:var(--mute);margin:0;padding:0 0 1.5rem;max-width:66ch}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* =====================================================================
   Privacy page — a document on paper
   ===================================================================== */
.doc{background:var(--paper);color:var(--ink);max-width:880px;margin:0 auto;padding:clamp(2rem,6vw,4.5rem);position:relative}
.doc::before{content:"";position:absolute;inset:12px;border:1px solid rgba(15,21,17,.16);pointer-events:none}
.doc .updated{font-size:.9rem;color:var(--ink-2);margin-bottom:2rem}
.doc h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-stretch:115%;margin:2.4rem 0 .8rem}
.doc p,.doc li{color:#27302B;max-width:none}
.doc ul{padding-left:1.2rem;margin:0 0 1em}
.doc li{margin-bottom:.4rem}
.doc a{color:var(--ink);text-decoration-color:var(--tape);text-underline-offset:3px}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:980px){
  .links,.nav .navcta{display:none}
  .burger{display:grid}
  .hero-row,.wall-head,.about,.case-body,.estimator,.plans{grid-template-columns:1fr}
  .coords{top:5.6rem}
  .feats{grid-template-columns:1fr}
  .feat-stage{display:none}
  .feat{min-height:0;padding-block:2.6rem}
  .feat:not(.on) h3{color:var(--bone)}
  .feat .fv-inline{display:grid;place-items:center;margin-top:2rem}
  .fv-inline .collage{height:auto;aspect-ratio:4/3}
  .proc{height:auto}
  .proc-pin{position:static;height:auto;overflow:visible}
  .proc-track{flex-direction:column;transform:none !important;padding-right:var(--pad)}
  .proc-line{display:none}
  .pstep{width:auto;padding:2rem 0 2rem 1.8rem;border-left:1.5px solid var(--line-2)}
  .pstep::before{left:-7px;top:2.4rem}
  .pstep .n{font-size:clamp(3.4rem,14vw,5rem);margin-bottom:.8rem}
  .proc-end{width:auto;padding:1.5rem 0 0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .case-head{grid-template-columns:1fr}
  .case .trade{text-align:left}
  .eout{position:static}
  .crow{grid-template-columns:1fr 1fr;row-gap:.3rem}
  .crow span:first-child{grid-column:1 / -1}
}
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .coords span:last-child{display:none}
  .phone{width:30%;bottom:-12%}
  .erow{align-items:flex-start;flex-direction:column}
  .seg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .wi{transform:none}
  .rise{opacity:1;transform:none}
  .wall-plane{transform:none}
  html.intro .veil{display:none}
  .scrollcue{display:none}
}

/* Hero wordmark entrance */
.js .bigword span{opacity:0;transform:translateY(35%)}
.go .bigword span{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i) * 55ms)}

/* Work: simple lot list for small screens */
.lotlist{display:none;list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--line)}
.lotlist a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.lotlist b{font-family:var(--display);font-stretch:118%;font-size:1.3rem}
.lotlist span{color:var(--mute);font-size:.9rem;white-space:nowrap}
@media (max-width:620px){.lotmap{display:none}.lotlist{display:block}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .bigword span{opacity:1;transform:none}}

/* Boundaries drawn edge by edge: top, right, bottom, left */
.ln{position:absolute;background:var(--bone);pointer-events:none}
.ln.t,.ln.b{left:0;right:0;height:1.5px}
.ln.l,.ln.r{top:0;bottom:0;width:1.5px}
.ln.t{top:0;transform-origin:left}.ln.b{bottom:0;transform-origin:right}
.ln.r{right:0;transform-origin:top}.ln.l{left:0;transform-origin:bottom}
.ln.t,.ln.b{transform:scaleX(0)}.ln.l,.ln.r{transform:scaleY(0)}
.intro-box .ln{animation:edge .32s var(--swift) forwards}
.intro-box .ln.t{animation-delay:.1s}.intro-box .ln.r{animation-delay:.34s}.intro-box .ln.b{animation-delay:.58s}.intro-box .ln.l{animation-delay:.82s}
@keyframes edge{to{transform:none}}
.cta-box .ln{background:var(--line-2);transition:transform .55s var(--swift)}
.cta-box .ln.r{transition-delay:.45s}.cta-box .ln.b{transition-delay:.9s}.cta-box .ln.l{transition-delay:1.35s}
.cta-box.in .ln{transform:none}