/* ==========================================================================
   Home hero scroll story: a drafting compass sets out a circle, a plan is
   drafted inside it, the plan rises into a building, the project photo opens.
   Without JavaScript, or with reduced motion, it is one still composition.
   ========================================================================== */
.hs{position:relative;background:#14231b;color:#f3ecdc}
.hs-stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;
 background:
  radial-gradient(ellipse 70% 80% at 72% 55%,rgba(64,96,76,.55),transparent 70%),
  linear-gradient(rgba(233,223,199,.05) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(233,223,199,.05) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(160deg,#1c3127 0%,#14231b 55%,#0e1813 100%)}
.hs-live{height:380vh}
.hs-live .hs-stage{position:sticky;top:0}

/* The drawing */
.hs-art{position:absolute;z-index:1;top:76px;bottom:56px;right:2vw;width:58vw;height:calc(100% - 132px);color:#e9dfc7;overflow:visible}
.hs-art .hs-label{font:500 11px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.18em;fill:currentColor;opacity:.72}
.hs-art .hs-mid{text-anchor:middle}
.hs-rule-text{font:600 11px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.12em;fill:#2a2f2d}
.hs-rule,.hs-elev{opacity:0}

/* The project photo, opened out in chapter 3 */
.hs-photo{position:absolute;inset:0;margin:0;z-index:2;clip-path:circle(0 at 70% 56%);pointer-events:none}
.hs-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hs-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,18,13,.86) 0%,rgba(9,18,13,.55) 42%,rgba(9,18,13,.08) 75%),linear-gradient(0deg,rgba(9,18,13,.6),transparent 35%)}

/* Copy */
.hs-copy{position:absolute;z-index:3;inset:0;display:flex;align-items:center;pointer-events:none}
.hs-chapters{display:grid;width:min(600px,40vw)}
.hs-ch{grid-area:1/1;align-self:center;pointer-events:none}
.hs-ch.is-active{pointer-events:auto}
.hs-kicker{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:600 11px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.28em;text-transform:uppercase;color:#d9bf8c}
.hs-kicker span{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid rgba(217,191,140,.5);border-radius:50%;letter-spacing:.06em}
.hs-ch h1,.hs-ch h2{margin:0 0 26px;font:400 clamp(48px,5.9vw,96px)/.95 var(--pm-serif,Georgia,serif);letter-spacing:-.025em;color:#f6efe0}
.hs-ch h2{font-size:clamp(44px,5.2vw,84px)}
.hs-ch em{font-style:italic;color:#e4cf9f}
.hs-text{max-width:470px;margin:0 0 34px;font:400 17px/1.65 var(--pm-sans,Inter,sans-serif);color:rgba(243,236,220,.86)}
.hs-actions{display:flex;flex-wrap:wrap;gap:12px}
.hs-feature{display:inline-flex;flex-direction:column;gap:6px;padding:16px 0 0;border-top:1px solid rgba(243,236,220,.3);color:#f6efe0;text-decoration:none;min-width:240px}
.hs-feature small{font:600 10px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.26em;text-transform:uppercase;color:#d9bf8c}
.hs-feature span{font:400 22px/1.2 var(--pm-serif,Georgia,serif)}

/* Chapter change: each part lifts in after the one before */
.hs-live .hs-ch>*{opacity:0;transform:translateY(38px);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.hs-live .hs-ch.is-active>*{opacity:1;transform:none;transition:opacity .8s ease,transform 1s cubic-bezier(.2,.75,.2,1)}
.hs-live .hs-ch.is-active>:nth-child(2){transition-delay:.08s}
.hs-live .hs-ch.is-active>:nth-child(3){transition-delay:.18s}
.hs-live .hs-ch.is-active>:nth-child(4){transition-delay:.28s}
.hs-live .hs-ch:not(.is-active)>*{transform:translateY(-30px)}
.hs:not(.hs-live) .hs-ch:not([data-ch="0"]){display:none}

/* Chapter rail */
.hs-rail{position:absolute;z-index:3;left:0;right:0;bottom:30px;display:flex;align-items:center;gap:26px;font:600 10px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.24em;text-transform:uppercase;color:rgba(243,236,220,.45)}
.hs-rail ol{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.hs-rail li{transition:color .4s}
.hs-rail li.is-active{color:#f6efe0}
.hs-bar{flex:0 1 220px;height:1px;background:rgba(243,236,220,.2);overflow:hidden}
.hs-bar i{display:block;height:100%;background:#d9bf8c;transform:scaleX(0);transform-origin:left}
.hs-cue{margin-left:auto;transition:opacity .4s}
.hs:not(.hs-live) .hs-rail{display:none}

/* Opening loader */
.hs-loader{display:none}
.hs-loading .hs-loader{display:grid}
.hs-loader{position:fixed;inset:0;z-index:200;place-items:center;background:#14231b;color:#e9dfc7;transition:clip-path 1s cubic-bezier(.76,0,.24,1);clip-path:inset(0 0 0 0)}
.hs-loader.is-done{clip-path:inset(0 0 100% 0)}
.hs-loader-inner{display:grid;justify-items:center;gap:18px}
.hs-loader svg{width:120px;height:120px;transform:rotate(-90deg)}
.hs-loader circle{fill:none;stroke:currentColor;stroke-width:1.4}
.hs-loader-track{opacity:.18}
.hs-loader-ring{stroke-dasharray:314.2;stroke-dashoffset:314.2}
.hs-loader-cross{stroke:#d9bf8c;stroke-width:1.4}
.hs-loader-count{font:400 64px/1 var(--pm-serif,Georgia,serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hs-loader p{margin:0;font:600 10px/1 var(--pm-sans,Inter,sans-serif);letter-spacing:.3em;text-transform:uppercase;opacity:.6}
html.hs-loading{overflow:hidden}

@media(max-width:860px){
 .hs-live{height:330vh}
 .hs-art{top:auto;bottom:58px;left:0;right:0;width:100%;height:46%}
 .hs-copy{align-items:flex-start;padding-top:104px}
 .hs-chapters{width:100%}
 .hs-ch h1,.hs-ch h2{font-size:clamp(38px,11vw,58px);margin-bottom:16px}
 .hs-kicker{margin-bottom:16px}
 .hs-text{font-size:15px;line-height:1.55;margin-bottom:20px}
 .hs-actions .hp-button{padding:13px 20px}
 .hs-rail{bottom:18px;gap:14px}
 .hs-rail ol{gap:14px}
 .hs-bar,.hs-cue{display:none}
 .hs-photo::after{background:linear-gradient(180deg,rgba(9,18,13,.88) 0%,rgba(9,18,13,.6) 50%,rgba(9,18,13,.2) 100%)}
}
@media(max-width:860px) and (max-height:700px){.hs-text{display:none}}

@media(prefers-reduced-motion:reduce){
 .hs-loader{display:none!important}
 .hs-live .hs-ch>*{transition:none}
}