/* ==========================================================================
   Land To See Commercial
   A surveyor's drafting sheet that inks itself. Type and drawn geometry carry
   the page; there is no photography, no gradient, no rounded corner and no
   drop shadow in this file. One gesture governs all motion: something being
   ruled onto paper.
   ========================================================================== */

:root {
  --ink:#0A1721; --ink-deep:#06101A; --ink-2:#24323C;
  --slate:#5C6670; --slate-2:#8A9199;
  --ground:#F6F4EF; --ground-2:#EDEAE3;
  --veil:rgba(246,244,239,.88); --veil-2:rgba(237,234,227,.92);
  --panel:rgba(10,23,33,.86);
  --brass:#8C6A3F; --brass-deep:#7A5A33; --brass-lt:#B08E5E; --brass-wash:#F0EAE0;
  --rule:#D8D3C8; --rule-ink:rgba(246,244,239,.16); --alert:#8C3F3F;

  --font-display:Newsreader,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --maxw:1240px; --gutter:clamp(20px,5vw,64px);
  --f-micro:12px; --f-small:13.5px;
  --f-body:clamp(15.5px,.28vw + 14.6px,17px);
  --f-dek:clamp(18px,.6vw + 16px,21px);
  --f-h3:clamp(22px,1.1vw + 18px,30px);
  --f-h2:clamp(30px,2.3vw + 21px,50px);
  --f-h1:clamp(36px,3.6vw + 20px,68px);
  --f-ordinal:clamp(28px,1.8vw + 21px,44px);

  --ease-line:cubic-bezier(.16,.84,.44,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);
  font-size:var(--f-body);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;font-family:var(--font-display);text-wrap:balance}
h1,h2{font-weight:300;letter-spacing:-.021em;line-height:1.04}
h3{font-weight:400;letter-spacing:-.012em;line-height:1.16}
h1 em,h2 em{font-style:italic}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--ground);
  padding:12px 20px;font-size:var(--f-small);letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

#plat{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#plate{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep)}
.ink-band .eyebrow{color:var(--brass-lt)}
.dek{font-size:var(--f-dek);line-height:1.5;color:var(--slate);max-width:58ch}
.ink-band .dek{color:#A8B2BB}
.body-copy{color:var(--slate);max-width:66ch}
.ink-band .body-copy{color:#A8B2BB}
.section-head{margin-bottom:clamp(40px,5vw,72px)}
.section-head h2{font-size:var(--f-h2);margin-top:16px}
.section-head .dek{margin-top:18px}

section{padding-block:clamp(80px,9vw,140px);position:relative}
.veil{background:var(--veil)}
.veil-2{background:var(--veil-2)}
.ink-band{background:var(--ink);color:var(--ground)}
.ink-band h2,.ink-band h3{color:var(--ground)}

/* masthead */
.masthead{position:fixed;inset:0 0 auto;z-index:100;height:88px;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(10,23,33,.55),rgba(10,23,33,0));
  transition:background .3s var(--ease-out-quint),border-color .3s var(--ease-out-quint)}
.masthead.stuck{background:var(--ground);border-bottom-color:var(--rule)}
.masthead.stuck .nav a{color:var(--ink)}
.masthead.stuck .nav-cta{border-color:var(--ink);color:var(--ink)}
.masthead.stuck .brand-lockup img{content:url("/brand/dual-lockup-ink.png")}
.masthead-row{max-width:var(--maxw);margin-inline:auto;height:100%;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:28px}
.brand-lockup{flex:none;display:block}
.brand-lockup img{height:58px;width:auto}
.masthead:not(.stuck) .brand-lockup img{content:url("/brand/dual-lockup-white.png")}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{font-size:var(--f-small);font-weight:500;color:#fff;padding-block:6px;position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-line)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav-cta{border:1px solid rgba(255,255,255,.7);color:#fff;padding:10px 20px;font-size:var(--f-micro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;transition:background .25s var(--ease-out-quint),color .25s var(--ease-out-quint)}
.nav-cta::after{display:none}
.nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.burger{margin-left:auto;display:none;width:44px;height:40px;background:none;border:1px solid var(--rule);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1px;background:var(--ink);margin:4px auto}
.mobile-nav{display:none;background:var(--ground);border-bottom:1px solid var(--rule)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:15px var(--gutter);border-top:1px solid var(--rule);font-weight:500}
@media(max-width:900px){
  .masthead{height:64px}
  .brand-lockup img{height:40px}
  .nav{display:none}.burger{display:block}
}

.btn{display:inline-block;font-family:var(--font-sans);font-size:var(--f-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border:1px solid currentColor;
  cursor:pointer;background:none;color:inherit;
  transition:background .28s var(--ease-out-quint),color .28s var(--ease-out-quint),border-color .28s var(--ease-out-quint)}
.btn-fill{background:var(--brass);border-color:var(--brass);color:var(--ground)}
.btn-fill:hover{background:var(--brass-deep);border-color:var(--brass-deep)}
.btn-line-light{color:var(--ground)}
.btn-line-light:hover{background:var(--ground);color:var(--ink)}
.btn-line-ink{color:var(--ink)}
.btn-line-ink:hover{background:var(--ink);color:var(--ground)}
.btn-full{width:100%}

/* hero */
/* Aerial loop sits under the plat: the drawing reads as a survey overlay on
   real ground. Muted, looping, decorative — never autoplayed with sound, never
   loaded on reduced-motion or save-data. */
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:-1}
/* Visible from the start so the poster frame stands in whenever autoplay is
   blocked or deferred (iOS Low Power Mode, data saver, background tab). The
   element must never be invisible waiting for a play event that may not come. */
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:1}
/* Let the footage carry the frame; the plate behind the type does the
   legibility work rather than a full-bleed wash. */
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,23,33,.34) 0%,rgba(10,23,33,.20) 46%,rgba(10,23,33,.10) 100%),
  linear-gradient(180deg,rgba(10,23,33,.34) 0%,rgba(10,23,33,0) 28%,rgba(10,23,33,0) 68%,rgba(246,244,239,.96) 100%)}
.hero{position:relative;overflow:hidden;min-height:min(100vh,940px);min-height:min(100svh,940px);margin-top:-88px;
  padding-top:calc(88px + clamp(28px,5vh,72px));padding-bottom:clamp(32px,6vh,80px);
  display:flex;flex-direction:column;justify-content:center;background:transparent}
@media(max-width:900px){.hero{margin-top:-64px;padding-top:calc(64px + 28px)}}
.hero-copy{max-width:min(100%,900px);position:relative}
/* A soft, edge-feathered pool of shade behind the copy only — enough to hold
   contrast on the brightest frame of the loop, with none of the hard-edged
   panel it replaces. */
.hero-copy::before{content:"";position:absolute;
  left:-60vw;right:-60vw;top:-70vh;bottom:-70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 34% at 30% 50%,
    rgba(10,23,33,.78) 0%,
    rgba(10,23,33,.66) 30%,
    rgba(10,23,33,.40) 52%,
    rgba(10,23,33,.16) 70%,
    rgba(10,23,33,0) 84%)}
/* 12px bold is NOT WCAG "large text", so it needs 4.5:1 against the
   brightest frame of the loop. Brass cannot hold that over video; the large
   italic headline can, because large text only needs 3:1. */
.hero-copy .eyebrow{color:rgba(255,255,255,.92)}
.hero h1{font-size:var(--f-h1);color:#fff;margin-top:20px;
  text-shadow:0 1px 40px rgba(10,23,33,.45)}
.hero h1 em{color:var(--brass-lt)}
.hero-sub{margin-top:22px;color:rgba(255,255,255,.88);font-size:var(--f-dek);
  line-height:1.5;max-width:52ch;text-shadow:0 1px 24px rgba(10,23,33,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(105%)}
.ready .line>span{transform:translateY(0);transition:transform .9s var(--ease-out-quint)}
.ready .line:nth-child(1)>span{transition-delay:.52s}
.ready .line:nth-child(2)>span{transition-delay:.62s}
.ready .line:nth-child(3)>span{transition-delay:.70s}
.fade-up{opacity:0;transform:translateY(14px)}
.ready .fade-up{opacity:1;transform:none;transition:opacity .8s var(--ease-out-quint),transform .8s var(--ease-out-quint)}
.ready .d1{transition-delay:.78s}.ready .d2{transition-delay:.9s}.ready .d3{transition-delay:1s}

.practice-strip{margin-top:clamp(44px,6vw,84px);border-top:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(3,1fr);background:var(--veil)}
.practice-strip div{padding:24px 26px 28px;border-right:1px solid var(--rule)}
.practice-strip div:last-child{border-right:0}
.practice-strip .n{font-family:var(--font-display);font-size:15px;color:var(--brass-deep)}
.practice-strip .t{font-family:var(--font-display);font-size:var(--f-h3);margin-top:8px}
.practice-strip .d{font-size:var(--f-small);color:var(--slate);margin-top:8px}
@media(max-width:820px){
  .practice-strip{grid-template-columns:1fr}
  .practice-strip div{border-right:0;border-bottom:1px solid var(--rule)}
  .practice-strip div:last-child{border-bottom:0}
}

/* ledger */
.ledger{border-top:1px solid var(--ink)}
.ledger-row{display:grid;grid-template-columns:88px 1fr 1.35fr;gap:clamp(16px,3vw,48px);
  padding-block:clamp(30px,3.4vw,46px);border-bottom:1px solid var(--rule);position:relative}
.ledger-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--brass);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-line)}
.ledger-row.in::before{transform:scaleY(1)}
.ledger-row .ord{font-family:var(--font-display);font-weight:300;font-size:var(--f-ordinal);
  color:var(--brass-deep);line-height:1;padding-left:18px}
.ledger-row h3{font-size:var(--f-h3)}
.tag{display:inline-block;margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);border:1px solid var(--brass);padding:4px 9px}
.tag.muted{color:var(--slate);border-color:var(--rule)}
.caps{list-style:none;margin:18px 0 0;padding:0;columns:2;column-gap:32px}
.caps li{font-size:var(--f-small);color:var(--ink);padding:7px 0 7px 18px;position:relative;break-inside:avoid}
.caps li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;background:var(--brass)}
@media(max-width:900px){
  .ledger-row{grid-template-columns:56px 1fr}
  .ledger-row .detail{grid-column:2}
  .caps{columns:1}
}

/* numbered */
.numbered{border-top:1px solid var(--rule)}
.nrow{display:grid;grid-template-columns:96px 1fr;gap:clamp(16px,3vw,40px);padding-block:26px;
  border-bottom:1px solid var(--rule);align-items:start}
.nrow .num{font-size:var(--f-micro);font-weight:700;letter-spacing:.14em;color:var(--brass-deep);
  background:var(--brass-wash);padding:8px 0;text-align:center}
.nrow h3{font-family:var(--font-sans);font-size:var(--f-small);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nrow p{margin-top:8px;color:var(--slate);font-size:var(--f-small);max-width:70ch}

/* engagement */
.eng-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:clamp(32px,6vw,90px);align-items:start}
.eng-head{position:sticky;top:104px}
.eng-steps{border-top:1px solid var(--rule-ink)}
.estep{padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--rule-ink);
  display:grid;grid-template-columns:74px 1fr;gap:24px}
.estep .num{font-family:var(--font-display);font-size:var(--f-ordinal);font-weight:300;color:var(--brass-lt);line-height:1}
.estep h3{font-size:var(--f-h3)}
.estep p{margin-top:10px;color:#A8B2BB;font-size:var(--f-small);max-width:60ch}
@media(max-width:900px){
  .eng-grid{grid-template-columns:1fr}
  .eng-head{position:static}
  .estep{grid-template-columns:52px 1fr;gap:16px}
}

/* standards */
.std-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,64px)}
.std h4{font-size:var(--f-micro);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-deep);margin:0 0 18px}
.std ul{list-style:none;margin:0;padding:0}
.std li{padding:12px 0 12px 40px;position:relative;border-bottom:1px solid var(--rule);font-size:var(--f-small)}
.std li::before{content:"";position:absolute;left:0;top:22px;width:24px;height:1px;background:var(--brass-deep);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-line)}
.std li.in::before{transform:scaleX(1)}
.decline{background:var(--brass-wash);padding:26px 28px}
.decline li.in::before{transform:scaleX(1) skewY(-24deg)}
.tech-note{margin-top:40px;border:1px solid var(--rule);padding:24px 28px}
.tech-note h4{margin-bottom:10px}
@media(max-width:900px){.std-grid{grid-template-columns:1fr}}

.market{padding-block:clamp(56px,6vw,88px);background:transparent}
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:end}
@media(max-width:900px){.market-grid{grid-template-columns:1fr}}

.firm-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,78px);align-items:start}
.lockups{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.lockups img{max-height:96px;width:auto;margin-inline:auto}
.lockup-cap{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-deep);text-align:center;margin-top:14px}
@media(max-width:900px){.firm-grid{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6vw,88px);align-items:start}
.field{display:flex;flex-direction:column;margin-bottom:26px}
.field label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-lt);margin-bottom:10px}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:var(--f-body);
  color:var(--ground);background:transparent;border:0;border-bottom:1px solid var(--rule-ink);
  border-radius:0;padding:10px 0;transition:border-color .3s var(--ease-line)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass-lt)}
.field select option{background:var(--ink);color:var(--ground)}
.field textarea{resize:vertical;min-height:110px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:900px){.contact-grid,.field-row{grid-template-columns:1fr;gap:0}.contact-grid{gap:48px}}
.form-note{font-size:var(--f-small);color:#8D97A0;margin-top:18px}
.form-status{margin-top:18px;font-size:var(--f-small);padding:12px 14px;border:1px solid var(--rule-ink);display:none}
.form-status.show{display:block}
.form-status.ok{border-color:var(--brass-lt);color:var(--brass-lt)}
.form-status.err{border-color:var(--alert);color:#E58A8A}
.panel-list{border-top:1px solid var(--rule-ink)}
.panel-list div{padding:22px 0;border-bottom:1px solid var(--rule-ink)}
.panel-list h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-lt);margin:0 0 8px}
.panel-list p,.panel-list a{font-size:var(--f-body);color:var(--ground)}
.panel-list a:hover{color:var(--brass-lt)}

.footer{background:var(--ink-deep);color:var(--ground);padding:clamp(56px,7vw,90px) 0 32px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.footer h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);margin:0 0 16px}
.footer-col a{display:block;font-size:var(--f-small);color:#C4CCD3;padding:6px 0}
.footer-col a:hover{color:var(--ground)}
.footer-id{font-size:var(--f-small);color:#939DA6;margin-top:18px;max-width:40ch}
.footer-base{margin-top:52px;padding-top:24px;border-top:1px solid var(--rule-ink);font-size:12.5px;
  color:#8D97A0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.disclosure{font-size:12px;color:#8D97A0;max-width:78ch;margin-top:20px;line-height:1.6}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px}}

[data-r]{opacity:0;transform:translateY(16px)}
[data-r].in{opacity:1;transform:none;transition:opacity .75s var(--ease-out-quint),transform .75s var(--ease-out-quint)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-r],.fade-up{opacity:1!important;transform:none!important}
  .line>span{transform:none!important}
  .ledger-row::before{transform:scaleY(1)!important}
  .std li::before{transform:scaleX(1)!important}
}

/* --- practice cards: media first ------------------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pcard{display:block;background:var(--ground);border:1px solid var(--rule);
  transition:border-color .3s var(--ease-out-quint),transform .5s var(--ease-out-quint)}
.pcard:hover{border-color:var(--brass);transform:translateY(-3px)}
.pcard-img{overflow:hidden;aspect-ratio:3/2;background:var(--ground-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.215,.61,.355,1)}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-body{padding:22px 24px 26px;position:relative}
.pcard-n{font-family:var(--font-display);font-size:13px;color:var(--brass-deep);letter-spacing:.1em}
.pcard h3{font-size:var(--f-h3);margin-top:6px}
.pcard p{font-size:var(--f-small);color:var(--slate);margin-top:8px}
.pcard-go{display:inline-block;margin-top:16px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep)}
@media(max-width:900px){.pcards{grid-template-columns:1fr}}

/* --- branched intake ------------------------------------------------------- */
.fs{border:0;margin:0 0 30px;padding:0}
.fs legend{padding:0;margin-bottom:16px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lt)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice.cols3{grid-template-columns:repeat(3,1fr)}
.choice label{display:flex;align-items:center;gap:10px;border:1px solid var(--rule-ink);
  padding:15px 16px;cursor:pointer;font-size:var(--f-small);
  transition:border-color .25s var(--ease-line),background .25s var(--ease-line)}
.choice label:hover{border-color:var(--brass-lt)}
.choice input{accent-color:var(--brass-lt);flex:none;margin:0}
.choice input:checked+span{color:var(--ground)}
.choice label:has(input:checked){border-color:var(--brass-lt);background:rgba(176,142,94,.1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{border:1px solid var(--brass-lt);padding:32px}
.sent h3{font-size:var(--f-h3);color:var(--ground)}
.sent p{margin-top:12px;color:#A8B2BB;font-size:var(--f-small)}
.sent a{color:var(--brass-lt)}
@media(max-width:700px){.choice,.choice.cols3,.grid2{grid-template-columns:1fr}}