/* Real estate, explained: infographic pages. Uses tokens from site.css only. */
.ex-sec{padding:var(--space-16) 0 0}
.ex-sec h2{font-size:clamp(30px,3.6vw,42px); line-height:1.12; max-width:30ch}
.ex-sec .sub{margin-top:var(--space-4); color:var(--text-muted); max-width:56ch}
.ex-body{margin-top:var(--space-10)}
.quick{margin-top:var(--space-10)}
.quick .wrap>div{background:var(--panel); color:var(--panel-text); border-left:6px solid var(--sunset-gold); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--space-6) var(--space-10); max-width:860px}
.quick h2{font-size:24px; line-height:1.2}
.quick p{margin-top:var(--space-2); font-size:19px; line-height:30px}
.muted{color:var(--text-muted)}

/* Trail: a real sequence */
.trail{list-style:none; margin:0; padding:0 0 0 76px; position:relative; max-width:780px}
.trail::before{content:""; position:absolute; left:27px; top:12px; bottom:12px; border-left:3px dashed var(--sunset-gold)}
.trail li{position:relative; padding-bottom:var(--space-10)}
.trail li:last-child{padding-bottom:0}
.trail .n{position:absolute; left:-76px; top:-4px; width:56px; height:56px; border-radius:50%; background:var(--violet); color:#fff; display:grid; place-items:center; font:400 26px/1 var(--font-serif); box-shadow:0 0 0 6px var(--bg)}
.trail li:last-child .n{background:var(--sunset-gold); color:var(--evergreen)}
.trail h3{margin-top:10px}
.trail p{margin-top:6px; color:var(--text-muted); max-width:56ch}
.trail .phase{padding-bottom:var(--space-6); margin-left:-76px; padding-left:0}
.trail .phase span{display:inline-block; background:var(--bg); color:var(--link); font-weight:600; font-size:15px; padding:4px 14px; border:1.5px solid var(--violet); border-radius:var(--radius-pill); position:relative}

/* Tiles with icons */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-10)}
.tile{border-top:3px solid var(--violet); padding-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2)}
.tile svg{width:48px; height:48px; color:var(--link); margin-bottom:var(--space-2)}
.tile p{color:var(--text-muted)}

/* Checklist */
.checklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-4) var(--space-10)}
.checklist li{position:relative; padding-left:40px}
.checklist li::before{content:""; position:absolute; left:0; top:3px; width:24px; height:24px; border:2px solid var(--violet); border-radius:var(--radius-sm)}
.checklist li::after{content:""; position:absolute; left:8px; top:7px; width:8px; height:13px; border:solid var(--sunset-gold); border-width:0 3px 3px 0; transform:rotate(45deg)}
.checklist small{display:block; color:var(--text-muted); font-size:15px; line-height:22px}

/* Versus */
.versus{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6)}
.versus>div{border-radius:var(--radius-md); padding:var(--space-10)}
.versus .a{border:1.5px solid var(--hairline)}
.versus .b{background:var(--violet); color:#fff}
.versus h3{font-family:var(--font-serif); font-weight:400; font-size:30px; line-height:1.15}
.versus ul{margin:var(--space-4) 0 0; padding-left:20px; display:grid; gap:var(--space-2)}

/* Hold off list */
.holdoff{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-6)}
.holdoff li{display:flex; gap:var(--space-4); align-items:flex-start}
.holdoff li::before{content:""; flex:none; width:28px; height:28px; border-radius:50%; border:3px solid var(--sunset-rose); background:linear-gradient(45deg,transparent 44%,var(--sunset-rose) 44%,var(--sunset-rose) 56%,transparent 56%)}

/* Contract */
.contract{max-width:900px; border:1.5px solid var(--hairline); border-radius:var(--radius-md); background:var(--bg); padding:var(--space-10); position:relative}
.contract .doc-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:var(--space-2); border-bottom:2px solid var(--text); padding-bottom:var(--space-4)}
.contract .doc-head p{font-family:var(--font-serif); font-size:24px}
.contract .doc-head small{color:var(--text-muted); font-size:14px}
.row{display:grid; grid-template-columns:210px 1fr; gap:var(--space-6); padding:var(--space-6) 0; border-bottom:1px dashed var(--hairline)}
.row .field{font-family:var(--font-serif); font-size:22px; line-height:1.25}
.row .field span{display:block; margin-top:8px; height:10px; background:var(--sunset-gold); opacity:.55; border-radius:2px; width:70%}
.row p{color:var(--text-muted)}
.row p strong{color:var(--text); font-weight:600}
.sign{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); margin-top:var(--space-10)}
.sign div{border-top:1.5px solid var(--text); padding-top:6px; font-size:14px; color:var(--text-muted)}

/* Levers */
.levers{display:grid; gap:var(--space-6); max-width:820px}
.lever{display:grid; grid-template-columns:200px 1fr; gap:var(--space-6); align-items:center}
.lever b{font-weight:600}
.track{position:relative; height:8px; border-radius:var(--radius-pill); background:var(--hairline)}
.track i{position:absolute; inset:0 auto 0 0; border-radius:var(--radius-pill); background:var(--violet)}
.track i::after{content:""; position:absolute; right:-12px; top:-8px; width:24px; height:24px; border-radius:50%; background:var(--sunset-gold); border:3px solid var(--bg)}
.lever p{grid-column:2; margin-top:-12px; font-size:15px; line-height:22px; color:var(--text-muted)}

/* Diagram + legend */
.diagram{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-10); align-items:center}
.diagram svg{width:100%; height:auto; color:var(--text)}
.legend{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4)}
.legend li{display:grid; grid-template-columns:36px 1fr; gap:var(--space-4); align-items:start}
.legend .k{width:32px; height:32px; border-radius:50%; background:var(--sunset-gold); color:var(--evergreen); display:grid; place-items:center; font-weight:600; font-size:15px}
.legend p{color:var(--text-muted); font-size:16px; line-height:25px}
.svg-key circle{fill:var(--sunset-gold)} .svg-key text{fill:var(--evergreen); font:600 15px var(--font-sans); text-anchor:middle; dominant-baseline:central}
.s-line{fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round}
.s-thin{fill:none; stroke:currentColor; stroke-width:1.5; opacity:.55}
.s-fill{fill:var(--panel)} .s-violet{fill:var(--violet)} .s-green{fill:#7FA38A; opacity:.45} .s-water{fill:#8FB3D9; opacity:.5} .s-road{fill:var(--hairline)}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4)}
.chips li{list-style:none; border:1.5px solid var(--violet); color:var(--link); border-radius:var(--radius-pill); padding:8px 16px; font-size:15px; line-height:22px}
.chips li b{font-weight:600}
ul.chips{margin:0; padding:0}

/* Decision branches */
.branch{max-width:900px}
.branch .root{margin:0 auto; width:max-content; max-width:100%; background:var(--evergreen); color:var(--cream); border-radius:var(--radius-pill); padding:12px 28px; font-weight:600}
.branch .stem{width:3px; height:32px; background:var(--sunset-gold); margin:0 auto}
.branch .kids{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); border-top:3px solid var(--sunset-gold); padding-top:var(--space-6); position:relative}
.branch .kids>div{border-radius:var(--radius-md); padding:var(--space-6); background:var(--panel); color:var(--panel-text)}
.branch h3{font-family:var(--font-serif); font-weight:400; font-size:26px}
.branch p{margin-top:var(--space-2); font-size:16px; line-height:25px}

/* Swim lanes */
.lanes-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-2)}
.lanes{display:grid; grid-template-columns:150px repeat(5,minmax(150px,1fr)); min-width:900px; border-top:2px solid var(--text)}
.lanes>div{padding:var(--space-4); border-bottom:1px solid var(--hairline); font-size:15px; line-height:22px}
.lanes .h{font-weight:600; color:var(--link); background:var(--bg)}
.lanes .who{font-family:var(--font-serif); font-size:20px; line-height:1.2; position:sticky; left:0; background:var(--bg)}
.lanes .you{background:var(--panel); color:var(--panel-text)}
.lanes .mark{border-left:4px solid var(--sunset-gold)}
.scroll-hint{margin-top:var(--space-2); font-size:14px; color:var(--text-muted)}

/* Team */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--space-6) var(--space-10)}
.team div{border-top:2px solid var(--violet); padding-top:var(--space-4)}
.team p{color:var(--text-muted); font-size:16px; line-height:25px; margin-top:4px}

/* Iceberg */
.iceberg{border-radius:var(--radius-md); overflow:hidden}
.ice-top{background:var(--panel); color:var(--panel-text); padding:var(--space-10) var(--space-6) 0; text-align:center}
.ice-top p{color:var(--text-muted)}
.peak{margin:var(--space-6) auto 0; width:min(560px,96%); background:#fff; color:var(--ink); clip-path:polygon(50% 0,100% 100%,0 100%); padding:110px 26% 22px; white-space:nowrap; font-size:15px; line-height:22px; font-weight:600}
.ice-water{background:linear-gradient(180deg,var(--twilight),var(--evergreen) 70%); color:var(--cream); padding:0 var(--space-6) var(--space-10)}
.ice-body{margin:0 auto; max-width:1000px; background:rgba(255,255,255,.08); clip-path:polygon(29% 0,71% 0,96% 22%,100% 70%,88% 100%,10% 100%,0 62%,6% 20%); padding:var(--space-10) 12% var(--space-16)}
.ice-water .waterline{text-align:center; font-weight:600; color:#fff; padding:var(--space-4) 0}
.ice-body ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4) var(--space-6)}
.ice-body li{padding-left:22px; position:relative; font-size:16px; line-height:24px}
.ice-body li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--sunset-gold)}

/* Phases columns */
.phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-6)}
.phases>div{border-radius:var(--radius-md); padding:var(--space-6); border:1.5px solid var(--hairline)}
.phases>div:nth-child(1){border-top:6px solid var(--sunset-gold)}
.phases>div:nth-child(2){border-top:6px solid var(--sunset-rose)}
.phases>div:nth-child(3){border-top:6px solid var(--violet)}
.phases>div:nth-child(4){border-top:6px solid var(--evergreen)}
.phases ul{margin:var(--space-4) 0 0; padding-left:20px; display:grid; gap:6px; font-size:16px; line-height:25px}

/* Funnel */
.funnel{display:grid; gap:6px; max-width:860px; margin:0 auto; text-align:center}
.funnel div{margin:0 auto; border-radius:var(--radius-sm); padding:var(--space-4) var(--space-6); color:#fff; background:var(--twilight)}
.funnel div b{display:block; font-family:var(--font-serif); font-weight:400; font-size:22px; line-height:1.2}
.funnel div span{font-size:15px; line-height:22px; opacity:.9}
.funnel .f1{width:100%} .funnel .f2{width:88%} .funnel .f3{width:76%; background:var(--violet-deep)} .funnel .f4{width:64%; background:var(--violet)}
.funnel .f5{width:52%; background:var(--sunset-gold); color:var(--evergreen); border-radius:var(--radius-pill)}

/* Trio */
.trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-10)}
.trio div{display:flex; flex-direction:column; gap:var(--space-2)}
.trio .word{font-family:var(--font-serif); font-size:44px; line-height:1}
.trio div:nth-child(1) .word{color:var(--link)} .trio div:nth-child(2) .word{color:var(--sunset-rose)} .trio div:nth-child(3) .word{color:var(--twilight)}
:root[data-theme="dark"] .trio div:nth-child(3) .word{color:var(--sunset-gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .trio div:nth-child(3) .word{color:var(--sunset-gold)}}
.trio .tag{font-weight:600}
.trio p{color:var(--text-muted)}

/* Chart */
.chart{max-width:860px}
.chart svg{width:100%; height:auto; color:var(--text)}
.chart .area{fill:var(--violet); opacity:.14} .chart .curve{fill:none; stroke:var(--violet); stroke-width:4}
.chart text{fill:currentColor; font:500 14px var(--font-sans)} .chart .hl{fill:var(--sunset-gold); opacity:.35}

/* Sort into three */
.sort3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6)}
.sort3>div{border-radius:var(--radius-md); padding:var(--space-6); background:var(--panel); color:var(--panel-text)}
.sort3 h3{font-family:var(--font-serif); font-weight:400; font-size:28px; display:flex; align-items:center; gap:var(--space-4)}
.sort3 h3 i{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-style:normal; font:600 18px var(--font-sans)}
.sort3 .yes i{background:var(--sunset-gold); color:var(--evergreen)}
.sort3 .maybe i{background:var(--twilight); color:#fff}
.sort3 .skip i{background:var(--sunset-rose); color:#fff}
.sort3 ul{margin:var(--space-4) 0 0; padding-left:20px; display:grid; gap:8px; font-size:16px; line-height:25px}

/* Rooms */
.rooms{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-6) var(--space-10)}
.rooms div{border-top:2px solid var(--violet); padding-top:var(--space-4)}
.rooms ul{margin:var(--space-2) 0 0; padding-left:20px; font-size:16px; line-height:25px; color:var(--text-muted)}

/* Countdown */
.countdown{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:none}
.countdown li{padding:var(--space-6); border-left:1.5px solid var(--hairline)}
.countdown li:first-child{border-left:0; padding-left:0}
.countdown .wk{font-family:var(--font-serif); font-size:36px; line-height:1; color:var(--link)}
.countdown li:last-child .wk{color:var(--sunset-rose)}
.countdown p{margin-top:var(--space-2); font-size:16px; line-height:25px; color:var(--text-muted)}

/* Moving boxes */
.boxes{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-6)}
.box{background:#E9C994; color:var(--evergreen); border-radius:var(--radius-sm); padding:44px var(--space-6) var(--space-6); position:relative}
.box::before{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:56px; height:100%; background:rgba(255,255,255,.28)}
.box *{position:relative}
.box h3{font-family:var(--font-serif); font-weight:400; font-size:28px}
.box p{margin-top:var(--space-2); font-size:16px; line-height:25px}

/* Note box */
.note{border:2px solid var(--violet); border-radius:var(--radius-md); padding:var(--space-10); max-width:860px}
.note h3{font-family:var(--font-serif); font-weight:400; font-size:30px}
.note p{margin-top:var(--space-4)}

/* FAQ */
.faq{max-width:860px; border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:var(--space-6) 40px var(--space-6) 0; position:relative; font-family:var(--font-serif); font-size:22px; line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font:500 28px var(--font-sans); color:var(--link)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 var(--space-6); color:var(--text-muted); max-width:66ch}
.fine-print{font-size:13px; line-height:20px; color:var(--text-muted); padding-top:var(--space-6); padding-bottom:var(--space-10)}

/* Hub */
.hub-group{padding-top:var(--space-16)}
.hub-group h2{font-size:clamp(30px,3.6vw,42px)}
.hub-list{list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-6) var(--space-10)}
.hub-list li{border-top:2px solid var(--violet); padding-top:var(--space-4)}
.hub-list a{font-family:var(--font-serif); font-size:26px; line-height:1.2; text-decoration:none}
.hub-list a:hover{text-decoration:underline}
.hub-list p{margin-top:6px; color:var(--text-muted); font-size:16px; line-height:25px}

@media (max-width:900px){
  .diagram{grid-template-columns:1fr}
  .sort3{grid-template-columns:1fr}
  .branch .kids{grid-template-columns:1fr}
  .countdown{grid-template-columns:1fr 1fr; gap:var(--space-6) 0}
  .countdown li:nth-child(3){border-left:0; padding-left:0}
}
@media (max-width:760px){
  .quick .wrap>div{padding:var(--space-6)}
  .versus{grid-template-columns:1fr}
  .row{grid-template-columns:1fr; gap:var(--space-2)}
  .contract{padding:var(--space-6)}
  .lever{grid-template-columns:1fr; gap:var(--space-2)}
  .lever p{grid-column:1; margin-top:0}
  .trail{padding-left:64px}
  .trail::before{left:21px}
  .trail .n{left:-64px; width:44px; height:44px; font-size:21px}
  .trail .phase{margin-left:-64px}
  .ice-body{clip-path:none; border-radius:var(--radius-md); padding:var(--space-6)}
  .peak{padding:96px 24% 18px; font-size:14px}
  .funnel .f2{width:94%} .funnel .f3{width:88%} .funnel .f4{width:82%} .funnel .f5{width:76%}
  .countdown{grid-template-columns:1fr}
  .countdown li{border-left:0; padding:0 0 var(--space-4) 0; border-bottom:1px solid var(--hairline)}
  .sign{grid-template-columns:1fr; gap:var(--space-6)}
}

/* ============ Graphics and motion (v2) ============ */
/* Header illustration */
.ex-hero .wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-10); align-items:end}
.ex-hero .illo{width:100%; max-width:340px; justify-self:end; margin-bottom:-8px; overflow:visible}
.illo .ln{fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
.illo .gl{fill:none; stroke:var(--sunset-gold); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.illo .gd{fill:var(--sunset-gold)} .illo .sf{fill:rgba(255,255,255,.12)} .illo .vd{stroke:var(--violet-deep); stroke-width:2}
@keyframes il-draw{to{stroke-dashoffset:0}}
@keyframes il-pop{from{opacity:0; transform:scale(.3)}to{opacity:1; transform:none}}
@keyframes il-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(8deg)}75%{transform:rotate(-6deg)}}
@keyframes il-drive{from{transform:translateX(-110%)}to{transform:none}}
@keyframes il-sweep{0%{transform:translate(-110px,40px)}55%{transform:translate(-40px,-12px)}100%{transform:none}}
@keyframes il-paint{from{transform:scaleY(0)}to{transform:none}}
@keyframes il-roll{from{transform:translateY(160px)}to{transform:none}}
@keyframes il-flag{0%,100%{transform:skewY(0)}30%{transform:skewY(-9deg)}70%{transform:skewY(7deg)}}
@keyframes il-wiggle{0%,100%{transform:none}50%{transform:translate(-8px,5px)}}
.illo .il-draw{stroke-dasharray:1; stroke-dashoffset:1; animation:il-draw 1.4s ease-out forwards; animation-delay:var(--d,0s)}
.illo .il-pop{transform-box:fill-box; transform-origin:center; opacity:0; animation:il-pop .55s cubic-bezier(.3,1.6,.6,1) forwards; animation-delay:var(--d,0s)}
.illo .il-swing{animation:il-swing 1.2s ease-in-out 3 .3s}
.illo .il-drive{animation:il-drive 1.8s cubic-bezier(.2,.8,.2,1) both}
.illo .il-glass{animation:il-sweep 2.4s ease-in-out both}
.illo .il-paint{transform-box:fill-box; transform-origin:bottom; animation:il-paint 1.6s ease-in-out both}
.illo .il-roll{animation:il-roll 1.6s ease-in-out both}
.illo .il-flag{transform-box:fill-box; transform-origin:left center; animation:il-flag 1.3s ease-in-out 3 .4s}
.illo .il-pen{animation:il-wiggle .45s ease-in-out 4 .6s}

/* Scroll reveal (only hides things once JS is running) */
.js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal].in{opacity:1; transform:none}
.draw [pathLength]{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.1s ease; transition-delay:calc(var(--i,0) * 120ms)}
.js .draw:not(.in) [pathLength]{stroke-dashoffset:1}
.ic{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* Trail v2: line draws as you scroll, icons beside each stop */
.trail::before{transform-origin:top; transform:scaleY(var(--p,1))}
.trail li{display:grid; grid-template-columns:1fr 56px; gap:var(--space-4); align-items:start}
.trail li.phase{display:block}
.trail .bub{width:56px; height:56px; border-radius:50%; background:var(--panel); color:var(--link); display:grid; place-items:center}
.trail .bub .ic{width:30px; height:30px}
.js .trail li:not(.phase){opacity:0; transform:translateX(-14px); transition:opacity .5s ease, transform .5s ease}
.js .trail li.in{opacity:1; transform:none}
.js .trail li .n{transform:scale(.4); transition:transform .45s cubic-bezier(.3,1.6,.6,1) .1s}
.js .trail li.in .n{transform:none}

/* Tiles: icons draw in */
.tile .big{width:64px; height:64px; color:var(--link); stroke-width:1.6}
/* Checklist ticks one by one */
.js .checklist li::after{opacity:0; transform:rotate(45deg) scale(.2); transition:opacity .3s, transform .35s cubic-bezier(.3,1.6,.6,1); transition-delay:calc(var(--i,0) * 130ms + .2s)}
.js .checklist.in li::after{opacity:1; transform:rotate(45deg)}
/* Contract highlighter */
.row .field span{transform-origin:left; transition:transform .7s ease; transition-delay:calc(var(--i,0) * 130ms)}
.js .contract:not(.in) .row .field span{transform:scaleX(0)}
.contract .seal{position:absolute; right:var(--space-6); bottom:var(--space-6); width:84px; height:84px; color:var(--sunset-gold); transform:rotate(-12deg); transition:transform .5s cubic-bezier(.3,1.6,.6,1) 1.4s, opacity .3s 1.4s}
.js .contract:not(.in) .seal{opacity:0; transform:rotate(-12deg) scale(2)}
/* Levers slide */
.track i{width:var(--w); transition:width 1.1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 140ms)}
.js .levers:not(.in) .track i{width:0}

/* Hotspot diagrams (inspection, land) */
.svg-key{cursor:pointer; transition:transform .35s cubic-bezier(.3,1.6,.6,1), opacity .4s; transform-box:fill-box; transform-origin:center; transition-delay:calc(var(--i,0) * 110ms)}
.js .map:not(.in) .svg-key{opacity:0; transform:translateY(-36px)}
.svg-key.on{transform:scale(1.35); transition-delay:0s}
.svg-key.on circle{fill:var(--violet)} .svg-key.on text{fill:#fff}
.legend li{border-radius:var(--radius-md); padding:6px 8px; margin:-6px -8px; cursor:pointer; transition:background .25s}
.legend li.on{background:var(--panel)}
.legend li.on .k{background:var(--violet); color:#fff}
.map-tip{margin-top:var(--space-4); font-size:14px; color:var(--text-muted)}
.room-ill .wall{fill:#FFF4D6} .room-ill .floor{fill:#E9C994}
@keyframes flow{to{stroke-dashoffset:-44}}
.creek{fill:none; stroke:#6FA1D6; stroke-width:10; stroke-linecap:round; stroke-dasharray:14 8; animation:flow 3s linear 4}

/* Branch */
.branch .stem{transform-origin:top; transition:transform .5s ease .2s}
.js .branch:not(.in) .stem{transform:scaleY(0)}
.branch .kids>div{display:flex; flex-direction:column; gap:var(--space-2)}
.branch .kids .ic{width:36px; height:36px; color:var(--link)}

/* Journey bar */
.journey{max-width:960px; margin-bottom:var(--space-10); padding:44px 23px 0}
.j-track{position:relative; height:10px; border-radius:var(--radius-pill); background:var(--hairline)}
.j-fill{position:absolute; inset:0 auto 0 0; width:100%; border-radius:inherit; background:var(--sunset-gold); transition:width 2.6s cubic-bezier(.4,0,.2,1) .2s}
.j-car{position:absolute; left:100%; top:-46px; width:46px; height:46px; margin-left:-23px; color:var(--link); transition:left 2.6s cubic-bezier(.4,0,.2,1) .2s}
.j-car .ic{width:46px; height:46px; stroke-width:1.6; background:var(--bg); border-radius:50%}
.js .journey:not(.in) .j-fill{width:0} .js .journey:not(.in) .j-car{left:0}
.j-stops{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-2); font-size:14px; line-height:20px; color:var(--text-muted)}
.j-stops li{position:relative; padding-top:14px}
.j-stops li::before{content:""; position:absolute; top:-26px; left:0; width:14px; height:14px; border-radius:50%; background:var(--violet); border:3px solid var(--bg)}
.j-stops li:last-child{text-align:right} .j-stops li:last-child::before{left:auto; right:0; background:var(--sunset-gold)}
.j-stops li:nth-child(2)::before,.j-stops li:nth-child(3)::before,.j-stops li:nth-child(4)::before{left:50%; margin-left:-7px}
.j-stops li:nth-child(2),.j-stops li:nth-child(3),.j-stops li:nth-child(4){text-align:center}
.team .ic{width:34px; height:34px; color:var(--link); margin-bottom:6px}

/* Iceberg v2 */
.wave{display:block; width:100%; height:34px; margin-top:-1px; overflow:hidden; background:var(--panel)}
.wave svg{display:block; width:200%; height:34px; animation:wave 5s linear 3}
@keyframes wave{to{transform:translateX(-50%)}}
.ice-water{padding-top:var(--space-6)}
.peak{transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s}
.js .iceberg:not(.in) .peak{transform:translateY(60px); opacity:0}
.phases h3{display:flex; align-items:center; gap:var(--space-2)} .phases h3 .ic{color:var(--link)}

/* Funnel and chart */
.chart .curve{transition:stroke-dashoffset 1.8s ease .3s} .chart .area,.chart .hl{transition:opacity .8s ease 1.4s}
.js .chart:not(.in) .curve{stroke-dashoffset:1} .js .chart:not(.in) .area,.js .chart:not(.in) .hl{opacity:0}

/* Before and after */
.ba{position:relative; max-width:900px; aspect-ratio:600/360; border-radius:var(--radius-md); overflow:hidden; --x:50%; touch-action:pan-y}
.ba svg{position:absolute; inset:0; width:100%; height:100%}
.ba .before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba .handle{position:absolute; top:0; bottom:0; left:var(--x); width:4px; margin-left:-2px; background:#fff; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba .handle::after{content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--sunset-gold); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ba .lab{position:absolute; top:12px; padding:4px 12px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; background:rgba(13,37,47,.8); color:#fff; pointer-events:none}
.ba .lab.l{left:12px} .ba .lab.r{right:12px; background:var(--sunset-gold); color:var(--evergreen)}
.ba input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.ba:has(input:focus-visible){outline:3px solid var(--sunset-gold); outline-offset:3px}
.ba-note{margin-top:var(--space-2); font-size:14px; color:var(--text-muted)}
.sort3 .ic{width:30px; height:30px}

/* Moving boxes v2 */
.box{padding-top:var(--space-10); overflow:visible; margin-top:30px}
.box .flap{position:absolute; bottom:100%; width:50%; height:30px; background:#DDB97E; transition:transform .7s cubic-bezier(.3,1.3,.6,1); transition-delay:calc(var(--i,0) * 160ms + .2s)}
.box .flap.l{left:0; transform-origin:left bottom; border-radius:4px 0 0 0}
.box .flap.r{right:0; transform-origin:right bottom; border-radius:0 4px 0 0}
.box .flap{transform:scaleY(.12)}
.js .boxes:not(.in) .flap.l{transform:rotate(-38deg)} .js .boxes:not(.in) .flap.r{transform:rotate(38deg)}
.box .ic{width:40px; height:40px; color:var(--evergreen); stroke-width:1.7}
.box::before{transform-origin:top; transition:transform .5s ease; transition-delay:calc(var(--i,0) * 160ms + .8s)}
.js .boxes:not(.in) .box::before{transform:translateX(-50%) scaleY(0)}
.note{display:grid; grid-template-columns:64px 1fr; gap:var(--space-6)} .note .ic{width:56px; height:56px; color:var(--link); stroke-width:1.5}

/* Hub thumbnails */
.hub-list li{display:grid; grid-template-columns:120px 1fr; gap:var(--space-6); align-items:start}
.hub-thumb{display:block; background:var(--violet); border-radius:var(--radius-md); padding:10px; aspect-ratio:320/220}
.hub-thumb .illo{width:100%; height:100%}
.hub-thumb .illo *{animation:none!important; opacity:1!important; stroke-dashoffset:0!important}
.hub-thumb .illo [class*="il-"]{transform:none!important}

@media (max-width:760px){
  .ex-hero .wrap{grid-template-columns:1fr; gap:var(--space-4)}
  .ex-hero .illo{justify-self:start; max-width:240px; margin-bottom:-4px}
  .trail li{grid-template-columns:1fr 44px}
  .trail .bub{width:44px; height:44px} .trail .bub .ic{width:24px; height:24px}
  .j-stops{font-size:12px; line-height:17px}
  .note{grid-template-columns:1fr}
  .hub-list li{grid-template-columns:96px 1fr; gap:var(--space-4)}
  .contract .seal{width:60px; height:60px}
}
@media (prefers-reduced-motion: reduce){
  .illo [class*="il-"],.wave svg,.creek{animation:none!important; opacity:1!important; stroke-dashoffset:0!important; transform:none!important}
  .js [data-reveal],.js .trail li,.js .trail li .n,.js .iceberg .peak{opacity:1!important; transform:none!important; transition:none!important}
  *,*::before,*::after{transition-duration:0s!important; transition-delay:0s!important}
}


/* Ten commandments (pre-approval) */
.commandments{max-width:900px; margin:0 auto; border:3px solid var(--violet); border-radius:18px 18px var(--radius-md) var(--radius-md); background:var(--panel); color:var(--panel-text); overflow:hidden}
.commandments .tablet-top{background:var(--violet); color:#fff; text-align:center; padding:var(--space-6) var(--space-6) var(--space-4)}
.commandments .tablet-top h3{font-family:var(--font-serif); font-weight:400; font-size:clamp(26px,3.4vw,34px); line-height:1.12}
.commandments .tablet-top p{margin-top:6px; font-size:16px; line-height:24px; color:var(--cream)}
.cmd-list{list-style:none; margin:0; padding:var(--space-6) var(--space-10) var(--space-10); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-10)}
.cmd-list li{display:grid; grid-template-columns:48px 1fr; gap:var(--space-4); align-items:baseline; padding:var(--space-4) 0; border-bottom:1px solid var(--hairline)}
.cmd-list .rn{font-family:var(--font-serif); font-size:30px; line-height:1; color:var(--violet)}
.cmd-list .ct b{font-weight:600; color:var(--sunset-rose); letter-spacing:.02em}
.cmd-list .ct{font-size:17px; line-height:25px}
.js .commandments:not(.in) .cmd-list li{opacity:0; transform:translateY(12px)}
.cmd-list li{transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i,0) * 70ms)}
.cmd-foot{background:var(--violet); color:var(--cream); text-align:center; font-size:15px; line-height:22px; padding:var(--space-4) var(--space-6)}
@media (max-width:760px){ .cmd-list{grid-template-columns:1fr; padding:var(--space-4) var(--space-6) var(--space-6)} .cmd-list .rn{font-size:26px} }


/* Listing agent: the rest of the work, below the iceberg */
.more-work{margin-top:var(--space-16)}
.more-work .lead{max-width:60ch; color:var(--text-muted); margin-bottom:var(--space-6)}
.more-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-2) var(--space-10)}
.more-grid li{position:relative; padding:12px 0 12px 32px; border-bottom:1px solid var(--hairline); font-size:16px; line-height:24px}
.more-grid li::before{content:""; position:absolute; left:0; top:17px; width:14px; height:14px; border-radius:50%; border:3px solid var(--sunset-gold)}
.js .more-grid:not(.in) li{opacity:0; transform:translateX(-10px)}
.more-grid li{transition:opacity .45s ease, transform .45s ease; transition-delay:calc(var(--i,0) * 45ms)}


/* Land: all-in project budget worksheet */
.costsheet{max-width:900px; margin:0 auto; border:3px solid var(--violet); border-radius:var(--radius-md); background:var(--panel); color:var(--panel-text); overflow:hidden}
.cs-top{background:var(--violet); color:#fff; padding:var(--space-6); text-align:center}
.cs-top h3{font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3.2vw,32px); line-height:1.15}
.cs-top p{margin-top:6px; font-size:16px; line-height:24px; color:var(--cream)}
.cs-list{list-style:none; margin:0; padding:var(--space-4) var(--space-10) var(--space-6)}
.cs-list li{display:grid; grid-template-columns:40px 1fr 120px; gap:var(--space-4); align-items:end; padding:14px 0; border-bottom:1px dashed var(--hairline)}
.cs-n{font-family:var(--font-serif); font-size:24px; line-height:25px; color:var(--violet); align-self:start}
.cs-t{font-size:17px; line-height:25px}
.cs-amt{border-bottom:2px solid var(--twilight); padding-bottom:2px; font-weight:600; color:var(--twilight); height:26px}
.cs-total{border-bottom:none !important; padding-top:var(--space-6) !important}
.cs-total .cs-t{font-weight:600; font-size:19px}
.cs-total .cs-amt{border-bottom-width:4px; border-bottom-style:double}
.cs-foot{background:var(--cream); color:var(--evergreen); text-align:center; font-size:15px; line-height:22px; padding:var(--space-4) var(--space-6)}
.cs-list li{transition:opacity .45s ease, transform .45s ease; transition-delay:calc(var(--i,0) * 50ms)}
.js .costsheet:not(.in) .cs-list li{opacity:0; transform:translateY(10px)}
@media (max-width:760px){ .cs-list{padding:var(--space-2) var(--space-6) var(--space-4)} .cs-list li{grid-template-columns:30px 1fr 64px; gap:var(--space-2)} .cs-t{font-size:16px; line-height:23px} }


/* Keep reading cards */
.rel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-4)}
.rel-card{display:flex; flex-direction:column; gap:6px; padding:var(--space-6); border:2px solid var(--hairline); border-radius:var(--radius-md); text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease}
.rel-card:hover,.rel-card:focus-visible{border-color:var(--violet); transform:translateY(-2px)}
.rel-t{font-weight:600; font-size:18px; line-height:24px; color:var(--violet)}
.rel-b{font-size:15px; line-height:22px; color:var(--text-muted)}
.rel-all{margin-top:var(--space-4)}
@media (prefers-reduced-motion: reduce){ .rel-card{transition:none} .rel-card:hover{transform:none} }