/* YOOAN homepage hero — "Selected Projects" variant.
   Interactive floor-plan model with hoverable product hotspots.
   Typography reuses the theme's global Schibsted Grotesk / Fustat faces
   (already loaded site-wide by assets/css/components.css) — only the
   marker/label micro-type (Manrope) is new to this component. */

@font-face{font-family:YooanBannerManrope;src:url('../fonts/manrope-latin-300-normal.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:YooanBannerManrope;src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---- Layout: copy left, model right ---- */
.yh-hero{--cream:#fbf7e9;--ink:#0e1733;--soft:#4c5676;--copy:#323d5d;--orange:#f5a20e;position:relative;display:grid;min-height:100svh;grid-template-columns:minmax(430px,39%) minmax(0,61%);overflow:hidden;color:var(--ink);background:var(--cream)}
.yh-hero *{box-sizing:border-box}
.yh-hero__copy{position:relative;z-index:4;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(48px,6.1vw,118px) clamp(36px,4.8vw,92px)}
.yh-hero__copy::before{content:"";position:absolute;top:clamp(34px,4vw,70px);left:clamp(36px,4.8vw,92px);width:clamp(42px,4vw,72px);height:3px;background:var(--orange)}
.yh-hero__eyebrow{max-width:38ch;margin:0 0 clamp(22px,2.1vw,34px);color:#8c5b00;font:650 clamp(.7rem,.72vw,.82rem)/1.4 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.115em;text-transform:uppercase}
.yh-hero__title{margin:0;color:var(--ink);font:420 clamp(3.4rem,5vw,6.15rem)/.91 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:-.058em}
.yh-hero__title span{display:block}
.yh-hero__title .is-quiet{color:var(--soft);font-weight:350;white-space:nowrap}
.yh-hero__title .is-strong{margin-top:.035em;font-weight:760}
.yh-hero__title .is-italic{max-width:11.5ch;margin-top:.16em;color:var(--copy);font-size:.64em;font-style:italic;font-weight:350;line-height:1.04;letter-spacing:-.048em}
.yh-hero__lead{max-width:52ch;margin:clamp(27px,3vw,44px) 0 0;color:var(--copy);font:400 clamp(1rem,1.06vw,1.22rem)/1.58 "Fustat Variable","Helvetica Neue",Arial,sans-serif}
.yh-hero__proof{max-width:38ch;margin:clamp(18px,1.65vw,27px) 0 0;color:var(--ink);font:700 clamp(.74rem,.7vw,.85rem)/1.45 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.yh-hero__action{display:inline-flex;width:max-content;align-items:center;gap:22px;margin-top:clamp(26px,2.5vw,40px);padding:14px 17px 14px 19px;color:#fff;background:var(--ink);font:650 .8rem/1 "Schibsted Grotesk Variable","Helvetica Neue",Arial,sans-serif;letter-spacing:.035em;text-decoration:none;transition:transform .2s ease,background .2s ease}
.yh-hero__action::after{content:"↗\FE0E";color:var(--orange);font-size:1.05rem;line-height:1}
.yh-hero__action:hover,.yh-hero__action:focus-visible{transform:translateY(-2px);background:#1b2749}
.yh-hero__action:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.yh-hero__visual{position:relative;z-index:1;display:flex;min-width:0;align-items:center;background:var(--cream)}
.yh-hero__visual::before{content:"";position:absolute;inset:6% auto 6% 0;width:1px;background:linear-gradient(transparent,#dfd8c3 18% 82%,transparent)}
.yh-hero .yh-hero__model.yb-banner{--yb-background:var(--cream);width:106%;margin-left:-3%;transform:scale(1.04);transform-origin:center;background:var(--cream)}
/* Real alpha-channel cutout now — no mix-blend-mode hack needed against the cream backdrop. */
.yh-hero>.yooan-motion-toggle{position:absolute;z-index:10;top:auto;right:clamp(18px,2.4vw,36px);bottom:18px;min-height:34px;padding:7px 11px;border:1px solid rgba(14,23,51,.2);border-radius:999px;color:rgba(14,23,51,.72);background:rgba(251,247,233,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11px;line-height:1}
.yh-hero__copy>*{animation:yh-enter .7s cubic-bezier(.2,.72,.24,1) both}
.yh-hero__copy>:nth-child(2){animation-delay:.06s}.yh-hero__copy>:nth-child(3){animation-delay:.12s}.yh-hero__copy>:nth-child(4){animation-delay:.18s}.yh-hero__copy>:nth-child(5){animation-delay:.24s}
@keyframes yh-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.yh-hero{grid-template-columns:minmax(390px,43%) minmax(0,57%)}.yh-hero__copy{padding-inline:clamp(30px,4vw,56px)}.yh-hero__copy::before{left:clamp(30px,4vw,56px)}.yh-hero__title{font-size:clamp(3.1rem,5.1vw,4.65rem)}.yh-hero .yh-hero__model.yb-banner{transform:scale(1.12)}}
@media(max-width:860px){.yh-hero{display:block;min-height:100svh;background:var(--cream)}.yh-hero__copy{padding:72px clamp(24px,7vw,54px) 42px}.yh-hero__copy::before{top:36px;left:clamp(24px,7vw,54px);width:48px}.yh-hero__eyebrow{margin-bottom:20px}.yh-hero__title{font-size:clamp(3rem,10.5vw,5.3rem)}.yh-hero__title .is-italic{max-width:14ch}.yh-hero__lead{max-width:60ch;margin-top:25px}.yh-hero__visual{min-height:0;padding:0 0 12px}.yh-hero__visual::before{display:none}.yh-hero .yh-hero__model.yb-banner{width:100%;margin-left:0;transform:none}}
@media(max-width:520px){.yh-hero__copy{padding:58px 22px 30px}.yh-hero__copy::before{top:28px;left:22px;width:38px;height:2px}.yh-hero__eyebrow{max-width:31ch;margin-bottom:16px;font-size:.66rem}.yh-hero__title{font-size:clamp(2.65rem,12.2vw,3.75rem);line-height:.92}.yh-hero__title .is-quiet{white-space:normal}.yh-hero__lead{margin-top:20px;font-size:.96rem;line-height:1.5}.yh-hero__proof{margin-top:15px;font-size:.7rem}.yh-hero__action{margin-top:22px;padding:13px 15px 13px 17px}}
@media(prefers-reduced-motion:reduce){.yh-hero__copy>*{animation:none!important}.yh-hero__action{transition:none!important}}

/* ---- Interactive floor-plan model: hotspots, dashed leaders, labels ---- */
.yb-banner{--yb-accent:#526f6b;--yb-ink:#3d4541;--yb-muted:#7b827d;--yb-background:#fff;position:relative;display:block;width:100%;margin:0;padding:0;background:var(--yb-background);container:yb-banner / inline-size;font-family:YooanBannerManrope,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate;color:var(--yb-ink)}
.yb-banner *{box-sizing:border-box}
.yb-banner .yb-stage{position:relative;aspect-ratio:1920/1080;overflow:hidden;width:100%;margin:0;padding:0;user-select:none}
.yb-banner .yb-plane{position:relative;width:100%;aspect-ratio:1920/1080}
.yb-banner .yb-image{position:absolute;left:9.895833333%;top:0;width:80%;height:auto;max-width:none;display:block;border:0;margin:0;padding:0;pointer-events:none}
.yb-banner .yb-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.yb-banner .yb-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.yb-banner .yb-outline{fill:#526f6b0c;stroke:var(--yb-accent);stroke-width:1.7;stroke-linejoin:round;opacity:0;transition:opacity .18s;pointer-events:none}
.yb-banner .yb-highlight.is-active .yb-outline{opacity:1}
.yb-banner .yb-leader{fill:none;stroke:#555f59;stroke-width:1.8;stroke-dasharray:1 5;stroke-linecap:round;opacity:0;transition:opacity .15s;pointer-events:none}
.yb-banner .yb-leader.is-active{opacity:1}
.yb-banner .yb-trace{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.22,.7,.22,1)}
.yb-banner .yb-trace.is-active{stroke-dashoffset:0}
.yb-banner .yb-marker{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:white;font:400 11px/1 YooanBannerManrope,Arial,sans-serif;cursor:pointer;touch-action:manipulation;box-shadow:none}
.yb-banner .yb-marker span{display:grid;place-items:center;width:23px;height:23px;background:#6f8480;border:2px solid white;border-radius:50%;box-shadow:0 1px 5px #1f393533;transition:box-shadow .18s,background .18s}
.yb-banner .yb-marker.is-active span{background:var(--yb-accent);box-shadow:0 0 0 5px #526f6b1f}
.yb-banner .yb-marker:focus-visible{outline:2px solid var(--yb-accent);outline-offset:2px}
.yb-banner .yb-label{position:absolute;z-index:3;max-width:22%;width:max-content;margin:0;padding:9px 12px 10px;transform:translateY(-100%);text-align:left;background:rgba(255,255,255,.12);border:0;border-radius:4px;box-shadow:none;-webkit-backdrop-filter:blur(14px) saturate(108%);backdrop-filter:blur(14px) saturate(108%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s .08s,visibility .18s;font-size:18px;font-size:clamp(14px,1.06cqw,21px);font-weight:400;line-height:1.4;color:var(--yb-ink);letter-spacing:0;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.yb-banner .yb-label small{display:block;font-size:13px;font-size:clamp(11px,.78cqw,15px);font-weight:350;line-height:1.5;color:#59625d;letter-spacing:0;margin-top:1px}
.yb-banner .yb-label.is-active{opacity:1;visibility:visible;pointer-events:auto}
.yb-banner .yb-label.is-centered{transform:translate(-50%,-100%);text-align:center}
.yb-banner[data-compact] .yb-stage{aspect-ratio:5/4}
.yb-banner[data-compact] .yb-plane{width:124%;left:-12%;top:8px}
.yb-banner[data-compact] .yb-marker{width:30px;height:30px;font-size:9px}
.yb-banner[data-compact] .yb-marker span{width:18px;height:18px;border-width:1.5px}
.yb-banner[data-compact] .yb-label{font-size:14px;max-width:72%;text-align:center;transform:translate(-50%,-100%);padding:7px 11px 8px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px) saturate(108%);backdrop-filter:blur(12px) saturate(108%)}
.yb-banner[data-compact] .yb-label small{font-size:11px}
@media(prefers-reduced-motion:reduce){.yb-banner *{transition:none!important;animation:none!important}}