/* Only the hero illustration changes. All motion is finite transform/opacity
   animation controlled by visibility and the visitor's motion preference. */
.is-landing .hero-visual.has-build-graphic { min-width: 0; isolation: isolate; transform: none; }
.has-build-graphic > :not(.build-graphic) { display: none !important; }
.has-build-graphic::before, .has-build-graphic::after { display: none !important; }
.build-graphic { --concept-1:#d8ad68; --concept-2:#fff1cf; --concept-3:#17110b; --concept-4:#503519; position: relative; width: 100%; min-width: 0; color: #f4edff; font-family: 'Segoe UI', sans-serif; pointer-events: none; }
.build-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 4px 22px; }
.build-caption > span { color: #ce9df9; font: 9px/1.5 monospace; letter-spacing: .09em; }
.build-caption i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c081ff; margin-right: 7px; }
.build-caption > small { display: flex; align-items: center; gap: 7px; color: #bca5ce; font: 8px monospace; letter-spacing: .08em; }
.build-caption > small b { width: 7px; height: 7px; border-radius: 50%; background: #c277fb; box-shadow: 0 0 12px #a646f5; }
.build-stage { position: relative; padding: 24px 20px 70px 0; }
.build-orbit { position: absolute; width: 114%; height: 58%; left: -7%; top: 20%; border: 1px solid #9d4dff35; border-radius: 50%; transform: rotate(-25deg); pointer-events: none; }
.build-window { position: relative; background: #100a18; border: 1px solid #aa70d6; border-radius: 13px; box-shadow: 0 22px 65px #0008, 0 0 45px #8d36e518; overflow: hidden; }
.build-scan { position: absolute; z-index: 3; top: 53px; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--concept-1) 18%,transparent), color-mix(in srgb,var(--concept-2) 45%,transparent), transparent); transform: translateX(-160%); }
.build-concept-wipe { position: absolute; z-index: 5; inset: 53px auto 0 0; width: 24%; opacity: 0; background: linear-gradient(90deg,transparent,var(--concept-1),var(--concept-2),transparent); filter: blur(2px); }
.build-chrome { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: #130d1c; border-bottom: 1px solid #68438366; color: #a994bc; }
.build-chrome > span:first-child { display: flex; gap: 5px; }
.build-chrome i { width: 5px; height: 5px; border-radius: 50%; background: #7a5a94; }
.build-chrome small { font: 9px monospace; }
.build-concept-count { min-width: 44px; color: var(--concept-1); font: 8px monospace; text-align: right; }
.build-canvas { position: relative; padding: 23px; background: var(--concept-3); background: radial-gradient(ellipse at 85% 28%, color-mix(in srgb,var(--concept-4) 66%,transparent), transparent 63%), var(--concept-3); min-height: 338px; transition: background-color .35s ease; }
.build-site-nav { display: flex; align-items: center; justify-content: space-between; font: 8px monospace; letter-spacing: .04em; }
.build-site-nav > span:first-child { display: flex; align-items: center; gap: 9px; }
.build-site-nav b { display: grid; place-items: center; width: 27px; height: 27px; font: 700 15px 'Segoe UI', sans-serif; color: var(--concept-2); border: 1px solid color-mix(in srgb,var(--concept-1) 72%,transparent); border-radius: 8px; background: linear-gradient(135deg,var(--concept-4),var(--concept-3)); }
.build-site-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 10px; padding: 30px 0 26px; }
.build-site-copy > small { color: var(--concept-1); font: 7px monospace; letter-spacing: .09em; }
.build-site-copy > strong { display: block; font-size: clamp(21px,2.2vw,31px); line-height: 1.2; letter-spacing: -.045em; margin: 12px 0 10px; }
.build-site-copy em { font-style: normal; color: var(--concept-1); }
.build-site-copy p { color: color-mix(in srgb,var(--concept-2) 70%,#999); font-size: 10px; line-height: 1.7; margin: 0 0 15px; max-width: 25ch; min-height: 34px; }
.build-demo-cta { display: inline-flex; align-items: center; gap: 15px; background: linear-gradient(120deg,var(--concept-1),var(--concept-4)); border: 1px solid color-mix(in srgb,var(--concept-2) 45%,transparent); padding: 9px 12px; border-radius: 6px; font-size: 9px; color: var(--concept-2); }
.build-art { position: relative; height: 190px; min-width: 0; }
.build-art-scene { height: 100%; position: relative; border-radius: 18px; background: radial-gradient(ellipse at 35% 22%,color-mix(in srgb,var(--concept-1) 35%,transparent),transparent 65%),linear-gradient(145deg,var(--concept-4),var(--concept-3)); overflow: hidden; border: 1px solid color-mix(in srgb,var(--concept-1) 42%,transparent); }
.build-shape { position: absolute; display: block; box-sizing: border-box; }
.build-shape-a { width: 96px; height: 112px; left: calc(50% - 48px); top: 22px; border: 12px solid var(--concept-1); border-radius: 52px 52px 8px 8px; }
.build-shape-b { width: 54px; height: 54px; left: calc(50% - 27px); top: 53px; border-radius: 50%; background: radial-gradient(circle at 32% 25%,var(--concept-2),var(--concept-1) 32%,var(--concept-4) 72%); box-shadow: 7px 10px 18px #0007; }
.build-shape-c { width: 110px; height: 18px; left: calc(50% - 55px); bottom: 32px; border-radius: 50%; background: linear-gradient(90deg,var(--concept-3),var(--concept-1),var(--concept-4)); border-top: 3px solid var(--concept-2); }
.build-art-symbol { position: absolute; top: 17px; right: 18px; color: var(--concept-2); font-size: 22px; }
.build-art-scene > small { position: absolute; bottom: 11px; left: 6px; right: 6px; text-align: center; color: color-mix(in srgb,var(--concept-2) 82%,#aaa); font: 6px monospace; letter-spacing: .1em; }

/* Each concept keeps the same fast DOM while taking on a distinct art direction. */
.build-graphic[data-concept='estate'] .build-shape-a { border-radius: 4px; border-width: 1px; background: linear-gradient(145deg,#78552e,#25180d 54%,#d8ad68); clip-path: polygon(0 32%,50% 0,100% 32%,100% 100%,0 100%); }
.build-graphic[data-concept='estate'] .build-shape-b { width: 48px; height: 74px; top: 58px; border-radius: 2px 2px 0 0; background: #fff1cf20; border: 1px solid #fff1cf99; box-shadow: inset 0 0 0 10px #17110b; }
.build-graphic[data-concept='estate'] .build-shape-c { width: 34px; height: 34px; top: 20px; left: 20px; border: 0; background: #d8ad68; box-shadow: 0 0 28px #d8ad68aa; }
.build-graphic[data-concept='dining'] .build-shape-a { border-radius: 50%; border: 18px solid #ff765f; background: radial-gradient(circle,#1d090b 40%,#ffd9b8 42%,#6f201d 47%); box-shadow: 0 14px 25px #0008; }
.build-graphic[data-concept='dining'] .build-shape-b { width: 20px; height: 86px; left: 72%; top: 36px; border-radius: 50% 50% 4px 4px; background: linear-gradient(90deg,#ffd9b855,#ffd9b8,#ffd9b855); clip-path: polygon(15% 0,85% 0,68% 34%,58% 100%,42% 100%,32% 34%); }
.build-graphic[data-concept='dining'] .build-shape-c { width: 62px; height: 7px; left: 14px; bottom: 30px; border: 0; border-radius: 0; background: repeating-linear-gradient(90deg,#ffd9b8 0 7px,transparent 7px 12px); }
.build-graphic[data-concept='hotel'] .build-shape-a { width: 106px; height: 132px; top: 14px; border: 1px solid #f2dfb8aa; border-radius: 53px 53px 4px 4px; background: linear-gradient(#58c9d433,#07181b); box-shadow: inset 0 -22px #215c63; }
.build-graphic[data-concept='hotel'] .build-shape-b { width: 70px; height: 94px; top: 34px; left: calc(50% - 35px); border-radius: 35px 35px 0 0; background: linear-gradient(165deg,#f2dfb8 0 34%,#58c9d4 35% 48%,#12383e 49%); box-shadow: none; }
.build-graphic[data-concept='hotel'] .build-shape-c { width: 28px; height: 28px; top: 28px; left: 22px; border: 0; background: #f2dfb8; box-shadow: 0 0 25px #f2dfb888; }
.build-graphic[data-concept='hvac'] .build-shape-a { border-radius: 50%; border: 13px solid #49c6ff; background: conic-gradient(from 20deg,#155b83,#d8f5ff,#155b83,#d8f5ff,#155b83); box-shadow: 0 0 24px #49c6ff44; }
.build-graphic[data-concept='hvac'] .build-shape-b { width: 34px; height: 34px; top: 61px; left: calc(50% - 17px); background: #07141d; border: 7px solid #d8f5ff; box-shadow: none; }
.build-graphic[data-concept='hvac'] .build-shape-c { left: 15%; right: 15%; width: auto; height: 4px; bottom: 31px; border: 0; background: repeating-linear-gradient(90deg,#49c6ff 0 18px,transparent 18px 24px); }
.build-graphic[data-concept='landscape'] .build-shape-a { width: 132px; height: 82px; left: 8px; top: 72px; border: 0; border-radius: 80% 60% 0 0; background: #365c28; }
.build-graphic[data-concept='landscape'] .build-shape-b { width: 125px; height: 105px; left: 42%; top: 50px; border-radius: 70% 90% 0 0; background: linear-gradient(145deg,#8ed06c,#1e3c1d); box-shadow: none; }
.build-graphic[data-concept='landscape'] .build-shape-c { width: 38px; height: 38px; top: 22px; left: 22px; border: 0; background: #e4f3ba; box-shadow: 0 0 30px #e4f3ba77; }
.build-graphic[data-concept='shop'] .build-shape-a { width: 78px; height: 118px; left: 24px; top: 26px; border: 2px solid #8be9ff; border-radius: 10px; background: linear-gradient(155deg,#672061,#150718); transform: rotate(-8deg); }
.build-graphic[data-concept='shop'] .build-shape-b { width: 78px; height: 118px; left: auto; right: 22px; top: 19px; border-radius: 10px; background: linear-gradient(155deg,#ff55c8,#672061); border: 2px solid #ffd7f4; box-shadow: 0 12px 20px #0008; transform: rotate(8deg); }
.build-graphic[data-concept='shop'] .build-shape-c { width: 48px; height: 48px; top: 52px; left: calc(50% - 24px); bottom: auto; border: 2px solid #8be9ff; background: #150718; color: #fff; }
.build-graphic[data-concept='wellness'] .build-shape-a { width: 122px; height: 122px; top: 28px; border: 0; border-radius: 66% 34% 62% 38%; background: linear-gradient(145deg,#b9a4ff,#51438b); transform: rotate(22deg); }
.build-graphic[data-concept='wellness'] .build-shape-b { width: 78px; height: 78px; top: 50px; left: calc(50% - 39px); background: #100d1d; border: 14px solid #b9f2dc; box-shadow: none; }
.build-graphic[data-concept='wellness'] .build-shape-c { width: 28px; height: 28px; top: 22px; left: 22px; border: 1px solid #b9f2dc; background: transparent; }
.build-graphic[data-concept='estate'] .build-site-copy > strong, .build-graphic[data-concept='dining'] .build-site-copy > strong, .build-graphic[data-concept='hotel'] .build-site-copy > strong { font-family: Georgia,serif; font-weight: 500; letter-spacing: -.035em; }
.build-graphic[data-concept='hvac'] .build-site-copy > strong, .build-graphic[data-concept='shop'] .build-site-copy > strong { text-transform: uppercase; letter-spacing: -.06em; }
.build-modules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.build-modules > div { min-width: 0; padding: 12px 10px; background: color-mix(in srgb,var(--concept-4) 44%,#110b18); border: 1px solid color-mix(in srgb,var(--concept-1) 27%,transparent); border-radius: 8px; }
.build-modules span { color: var(--concept-1); font: 8px monospace; }
.build-modules b { display: block; color: var(--concept-2); font-size: 9px; margin: 8px 0 11px; font-weight: 500; }
.build-modules i { display: block; height: 3px; margin-top: 5px; width: 86%; background: color-mix(in srgb,var(--concept-1) 27%,transparent); border-radius: 2px; }
.build-modules i:last-child { width: 60%; }
.build-site-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; color: #a28aae; font: 6px monospace; letter-spacing: .03em; }
.build-team-note { position: absolute; display: flex; gap: 12px; align-items: center; bottom: 26px; left: 12px; right: auto; padding: 14px 16px; background: #1c0f2c; border: 1px solid #9a61c0; border-radius: 10px; box-shadow: 0 10px 25px #0006; }
.build-team-note > span { font-size: 24px; color: #dba6ff; }
.build-team-note strong { display: block; color: #f1ddff; font-size: 11px; }
.build-team-note small { display: block; color: #bca5cb; font-size: 9px; margin-top: 4px; }
.build-brief { display: flex; align-items: center; gap: 12px; width: 91%; margin: 0 auto 8px; background: linear-gradient(115deg,#281138,#100918); border: 1px solid #774495; border-radius: 12px; padding: 15px; box-shadow: 0 12px 30px #0004; }
.build-brief-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; color: #d7a2ff; background: #72349855; border-radius: 9px; font-size: 22px; }
.build-brief small { color: #bd8bdd; font: 7px monospace; letter-spacing: .1em; }
.build-brief p { color: #ede0f9; font-size: 12px; line-height: 1.5; margin: 5px 0 0; min-height: 36px; }
.build-brief-arrow { color: #bb7feb; font-size: 25px; margin-left: auto; }
.build-layer { position: absolute; left: 16px; right: 12px; top: 18px; bottom: 85px; border: 1px solid #6e3e97; border-radius: 15px; background: #251030; pointer-events: none; }
.build-layer-back { transform: rotate(5deg); opacity: .55; }
.build-layer-front { transform: rotate(1deg); background: #160b20; }
.build-phone { position: absolute; width: 116px; height: 213px; bottom: 18px; right: 0; padding: 20px 11px 10px; background: linear-gradient(150deg,var(--concept-4),var(--concept-3)); border: 3px solid color-mix(in srgb,var(--concept-1) 64%,#43304f); border-radius: 20px; box-shadow: 0 18px 32px #0009, inset 0 0 0 1px color-mix(in srgb,var(--concept-2) 30%,transparent); }
.build-phone-camera { position: absolute; top: 6px; left: 37%; width: 26%; height: 5px; background: #08050b; border-radius: 10px; }
.build-phone > span { display: block; color: var(--concept-1); font: 5px monospace; margin: 5px 0 12px; }
.build-phone > strong { display: block; font-size: 12px; line-height: 1.25; letter-spacing: -.03em; }
.build-phone em { font-style: normal; color: var(--concept-1); }
.build-phone-art { height: 65px; position: relative; display: grid; place-items: center; margin: 7px 0; border-radius: 6px; overflow: hidden; background: linear-gradient(145deg,var(--concept-4),var(--concept-3)); }
.build-phone-art > i { position: absolute; display: block; box-sizing: border-box; }
.build-phone-art > b { position: relative; z-index: 1; color: var(--concept-2); font-size: 22px; text-shadow: 0 3px 9px #000; }
.build-phone > b { display: block; text-align: center; border-radius: 4px; padding: 6px 2px; background: var(--concept-1); color: var(--concept-3); font-size: 6px; font-weight: 700; }
.build-phone-lines i { display: block; width: 85%; height: 3px; background: color-mix(in srgb,var(--concept-1) 28%,transparent); margin-top: 6px; }
.build-phone-lines i:last-child { width: 60%; }
.build-progress { display: flex; align-items: center; gap: 9px; border-top: 1px solid #77419b55; margin-top: 12px; padding-top: 16px; }
.build-progress > span { display: flex; align-items: center; gap: 5px; opacity: .38; transition: opacity .35s ease, transform .35s ease; white-space: nowrap; }
.build-progress > span.is-current { opacity: 1; transform: translateY(-1px); }
.build-progress i { color: #bc78ed; font: 7px monospace; font-style: normal; }
.build-progress b { color: #d5bce6; font: 9px 'Segoe UI',sans-serif; font-weight: 500; }
.build-progress > em { flex: 1; height: 1px; min-width: 8px; background: linear-gradient(90deg,#a555dc55,#6b3b8855); }
.build-concept-dots { display: flex; justify-content: flex-end; gap: 5px; margin-top: 11px; }
.build-concept-dots i { width: 16px; height: 2px; border-radius: 3px; background: #5b466b; transition: width .45s ease,background-color .45s ease; }
.build-concept-dots i.is-current { width: 34px; background: var(--concept-1); }
@media (max-width: 860px) {
  .is-landing .hero-visual.has-build-graphic { display: block; width: min(540px,100%); margin: 24px auto 0; }
  .build-site-copy > strong { font-size: 28px; }
  .build-team-note { right: auto; }
}
@media (max-width: 420px) {
  .build-canvas { padding: 16px; }
  .build-site-copy > strong { font-size: 23px; }
  .build-site-hero { grid-template-columns: 1.35fr 1fr; }
  .build-art { height: 180px; }
  .build-caption > span { font-size: 8px; }
  .build-caption > small { font-size: 7px; }
  .build-stage { padding-right: 9px; }
  .build-phone { width: 98px; height: 202px; }
  .build-team-note { left: 0; padding: 12px; gap: 8px; }
  .build-team-note strong { font-size: 10px; }
  .build-team-note small { font-size: 8px; }
  .build-brief { width: 96%; padding: 12px; }
  .build-brief p { font-size: 11px; }
  .build-shape-a { width: 78px; height: 100px; left: calc(50% - 39px); top: 27px; border-width: 10px; }
  .build-shape-b { width: 44px; height: 44px; left: calc(50% - 22px); }
}
@media (prefers-reduced-motion: reduce) { .build-progress > span, .build-concept-dots i, .build-canvas { transition: none; } }

/* The browser shell belongs to PayLoader Tech; everything inside it belongs to
   the fictional client. Each scene deliberately uses a different composition. */
.build-canvas { height: 338px; overflow: hidden; box-sizing: border-box; }
.build-brand-lockup { display: flex; align-items: center; gap: 8px; }
.scene-marquee { display: none; }

/* Haven & Key: restrained property editorial with a listing-led split. */
.build-graphic[data-concept='estate'] .build-canvas { padding: 0; color: #211d17; background: #eee8dc; font-family: Georgia,serif; }
.build-graphic[data-concept='estate'] .build-site-nav { height: 46px; padding: 0 18px; border-bottom: 1px solid #211d1730; color: #211d17; font: 6px Arial,sans-serif; letter-spacing: .12em; }
.build-graphic[data-concept='estate'] .build-site-nav b { width: 22px; height: 22px; border: 1px solid #211d17; border-radius: 50%; color: #211d17; background: none; font: 12px Georgia,serif; }
.build-graphic[data-concept='estate'] .build-site-hero { grid-template-columns: 41% 59%; gap: 0; height: 220px; padding: 0; }
.build-graphic[data-concept='estate'] .build-site-copy { padding: 22px 14px 10px 18px; align-self: stretch; }
.build-graphic[data-concept='estate'] .build-site-copy > small { color: #8a5b30; }
.build-graphic[data-concept='estate'] .build-site-copy > strong { margin: 13px 0 9px; color: #211d17; font: 400 26px/1.02 Georgia,serif; letter-spacing: -.05em; }
.build-graphic[data-concept='estate'] .build-site-copy em { color: #8a5b30; }
.build-graphic[data-concept='estate'] .build-site-copy p { color: #5f574d; font: 8px/1.55 Arial,sans-serif; }
.build-graphic[data-concept='estate'] .build-demo-cta { padding: 0 0 3px; border: 0; border-bottom: 1px solid #211d17; border-radius: 0; color: #211d17; background: none; font: 7px Arial,sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.build-graphic[data-concept='estate'] .build-art { height: 220px; }
.build-graphic[data-concept='estate'] .build-art-scene { border: 0; border-radius: 0; background: linear-gradient(155deg,#c9b394 0 34%,#8d7151 35% 55%,#463623 56%); }
.build-graphic[data-concept='estate'] .build-modules { height: 54px; grid-template-columns: 1.25fr .9fr .9fr; gap: 0; border-top: 1px solid #211d1730; }
.build-graphic[data-concept='estate'] .build-modules > div { padding: 9px 18px; border: 0; border-right: 1px solid #211d1730; border-radius: 0; background: transparent; }
.build-graphic[data-concept='estate'] .build-modules span { color: #8a5b30; }
.build-graphic[data-concept='estate'] .build-modules b { margin: 3px 0; color: #211d17; font: 8px Georgia,serif; }
.build-graphic[data-concept='estate'] .build-modules i { display: none; }
.build-graphic[data-concept='estate'] .build-site-footer { display: none; }

/* Ember & Salt: dark culinary editorial with the plate as the lead image. */
.build-graphic[data-concept='dining'] .build-canvas { padding: 0 19px; color: #f8e5d2; background: #190b0b; font-family: Georgia,serif; }
.build-graphic[data-concept='dining'] .build-site-nav { height: 52px; border-bottom: 1px solid #f8e5d229; color: #d6ac91; font: 6px Arial,sans-serif; letter-spacing: .14em; }
.build-graphic[data-concept='dining'] .build-site-nav .build-brand-lockup { position: absolute; left: 50%; transform: translateX(-50%); flex-direction: column; gap: 1px; font: 9px Georgia,serif; letter-spacing: .13em; }
.build-graphic[data-concept='dining'] .build-site-nav b { width: auto; height: auto; border: 0; border-radius: 0; color: #ff765f; background: none; font: 8px Georgia,serif; }
.build-graphic[data-concept='dining'] .build-site-hero { grid-template-columns: 54% 46%; gap: 13px; height: 222px; padding: 14px 0 8px; }
.build-graphic[data-concept='dining'] .build-art { height: 200px; }
.build-graphic[data-concept='dining'] .build-art-scene { border: 0; border-radius: 50% 50% 3px 3px; background: radial-gradient(circle at 50% 44%,#ff765f40,transparent 44%),#3a1111; }
.build-graphic[data-concept='dining'] .build-site-copy { padding-right: 3px; text-align: left; }
.build-graphic[data-concept='dining'] .build-site-copy > strong { color: #f8e5d2; font: italic 400 24px/1.08 Georgia,serif; letter-spacing: -.04em; }
.build-graphic[data-concept='dining'] .build-site-copy p { color: #d6ac91; font: 8px/1.55 Georgia,serif; }
.build-graphic[data-concept='dining'] .build-demo-cta { border: 1px solid #ff765f; border-radius: 999px; color: #f8e5d2; background: transparent; padding: 7px 10px; font: 6px Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.build-graphic[data-concept='dining'] .build-modules { position: absolute; right: 18px; bottom: 13px; left: 57%; display: block; }
.build-graphic[data-concept='dining'] .build-modules > div { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border: 0; border-top: 1px solid #f8e5d229; border-radius: 0; background: none; }
.build-graphic[data-concept='dining'] .build-modules span { color: #ff765f; }
.build-graphic[data-concept='dining'] .build-modules b { margin: 0; color: #f8e5d2; font: italic 7px Georgia,serif; }
.build-graphic[data-concept='dining'] .build-modules i, .build-graphic[data-concept='dining'] .build-site-footer { display: none; }

/* Aster House: image-heavy hospitality scene with copy and booking overlaid. */
.build-graphic[data-concept='hotel'] .build-canvas { padding: 0; color: #fff; background: #88cbd0; font-family: Arial,sans-serif; }
.build-graphic[data-concept='hotel'] .build-site-nav { position: absolute; z-index: 2; top: 0; right: 0; left: 0; height: 46px; padding: 0 18px; color: #fff; font: 6px Arial,sans-serif; letter-spacing: .13em; text-shadow: 0 1px 8px #0008; }
.build-graphic[data-concept='hotel'] .build-site-nav b { width: auto; height: auto; border: 0; color: #fff; background: none; font: 18px Georgia,serif; }
.build-graphic[data-concept='hotel'] .build-site-hero { position: relative; display: block; height: 338px; padding: 0; }
.build-graphic[data-concept='hotel'] .build-art { position: absolute; inset: 0; height: auto; }
.build-graphic[data-concept='hotel'] .build-art-scene { border: 0; border-radius: 0; background: linear-gradient(0deg,#052e35c9 0 22%,transparent 58%),linear-gradient(155deg,#f7d6a4 0 28%,#64bbc7 29% 53%,#216571 54%); }
.build-graphic[data-concept='hotel'] .build-site-copy { position: absolute; z-index: 2; right: 18px; bottom: 63px; left: 18px; display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 14px; }
.build-graphic[data-concept='hotel'] .build-site-copy > small { position: absolute; bottom: 48px; color: #fff; }
.build-graphic[data-concept='hotel'] .build-site-copy > strong { margin: 0; color: #fff; font: 400 29px/1 Georgia,serif; text-shadow: 0 2px 15px #0007; }
.build-graphic[data-concept='hotel'] .build-site-copy em { color: #f2dfb8; }
.build-graphic[data-concept='hotel'] .build-site-copy p { margin: 0; color: #edf8f7; font: 7px/1.5 Arial,sans-serif; }
.build-graphic[data-concept='hotel'] .build-demo-cta { align-self: center; white-space: nowrap; border: 0; border-radius: 999px; color: #173b3e; background: #f2dfb8; padding: 8px 11px; font: 6px Arial,sans-serif; }
.build-graphic[data-concept='hotel'] .build-modules { position: absolute; z-index: 2; right: 12px; bottom: 12px; left: 12px; grid-template-columns: repeat(3,1fr); gap: 1px; background: #fff; }
.build-graphic[data-concept='hotel'] .build-modules > div { padding: 8px 10px; border: 0; border-radius: 0; color: #173b3e; background: #f8f2e8; }
.build-graphic[data-concept='hotel'] .build-modules span { display: none; }
.build-graphic[data-concept='hotel'] .build-modules b { margin: 0; color: #173b3e; font: 7px Arial,sans-serif; }
.build-graphic[data-concept='hotel'] .build-modules i, .build-graphic[data-concept='hotel'] .build-site-footer { display: none; }

/* Keep Aster House's copy and booking row clear of its persistent phone preview. */
.build-graphic[data-concept='hotel'] .build-site-copy { right: 132px; bottom: 76px; display: block; }
.build-graphic[data-concept='hotel'] .build-site-copy > small { bottom: auto; top: -14px; }
.build-graphic[data-concept='hotel'] .build-site-copy p { margin: 7px 0 9px; }
.build-graphic[data-concept='hotel'] .build-demo-cta { display: inline-flex; }
.build-graphic[data-concept='hotel'] .build-modules { right: 132px; }

/* Northline Air: practical dispatch dashboard with clear service signals. */
.build-graphic[data-concept='hvac'] .build-canvas { padding: 0; color: #0a2640; background: #f4f8fb; font-family: Arial,sans-serif; }
.build-graphic[data-concept='hvac'] .build-site-nav { height: 52px; padding: 0 16px; color: #fff; background: #0a4f83; font: 7px Arial,sans-serif; letter-spacing: .04em; }
.build-graphic[data-concept='hvac'] .build-site-nav b { width: 25px; height: 25px; border: 0; border-radius: 3px; color: #0a4f83; background: #fff; font: 800 14px Arial,sans-serif; }
.build-graphic[data-concept='hvac'] .scene-status { padding: 6px 8px; color: #073452; background: #b9eaff; border-radius: 2px; font-size: 6px; }
.build-graphic[data-concept='hvac'] .build-site-hero { grid-template-columns: 58% 42%; height: 204px; gap: 0; padding: 20px 16px 8px; }
.build-graphic[data-concept='hvac'] .build-site-copy > small { color: #e25b2e; font-weight: 800; }
.build-graphic[data-concept='hvac'] .build-site-copy > strong { margin: 8px 0; color: #0a2640; font: 900 25px/.96 Arial,sans-serif; text-transform: uppercase; }
.build-graphic[data-concept='hvac'] .build-site-copy em { color: #0a4f83; }
.build-graphic[data-concept='hvac'] .build-site-copy p { color: #4d6474; font: 8px/1.45 Arial,sans-serif; }
.build-graphic[data-concept='hvac'] .build-demo-cta { border: 0; border-radius: 2px; color: #fff; background: #e25b2e; padding: 8px 10px; font: 800 7px Arial,sans-serif; text-transform: uppercase; }
.build-graphic[data-concept='hvac'] .build-art { height: 160px; }
.build-graphic[data-concept='hvac'] .build-art-scene { border: 0; border-radius: 5px; background: repeating-linear-gradient(135deg,#dcebf3 0 10px,#edf5f8 10px 20px); }
.build-graphic[data-concept='hvac'] .build-modules { grid-template-columns: repeat(3,1fr); gap: 6px; padding: 0 16px; }
.build-graphic[data-concept='hvac'] .build-modules > div { padding: 9px; border: 1px solid #bdd4e2; border-radius: 3px; background: #fff; box-shadow: 0 4px 8px #0a4f830c; }
.build-graphic[data-concept='hvac'] .build-modules span { color: #e25b2e; }
.build-graphic[data-concept='hvac'] .build-modules b { margin: 3px 0; color: #0a2640; font: 800 7px Arial,sans-serif; text-transform: uppercase; }
.build-graphic[data-concept='hvac'] .build-modules i { height: 2px; margin-top: 3px; background: #c9dbe5; }
.build-graphic[data-concept='hvac'] .build-site-footer { display: none; }

/* Wildroot: organic project story with an immersive landscape field. */
.build-graphic[data-concept='landscape'] .build-canvas { padding: 0; color: #19311c; background: #e8e2cf; font-family: 'Trebuchet MS',sans-serif; }
.build-graphic[data-concept='landscape'] .build-site-nav { height: 48px; padding: 0 18px; color: #19311c; font: 6px 'Trebuchet MS',sans-serif; letter-spacing: .1em; }
.build-graphic[data-concept='landscape'] .build-site-nav b { width: 26px; height: 26px; border: 0; border-radius: 52% 48% 61% 39%; color: #e8e2cf; background: #365c28; font: 12px Georgia,serif; }
.build-graphic[data-concept='landscape'] .build-site-hero { position: relative; display: block; height: 230px; padding: 0 15px; }
.build-graphic[data-concept='landscape'] .build-art { position: absolute; inset: 0 14px 0 14px; height: auto; }
.build-graphic[data-concept='landscape'] .build-art-scene { border: 0; border-radius: 80px 8px 80px 8px; background: linear-gradient(155deg,#e4f3ba 0 27%,#8eb779 28% 54%,#29472a 55%); }
.build-graphic[data-concept='landscape'] .build-site-copy { position: absolute; z-index: 2; top: 25px; right: 27px; width: 46%; padding: 16px; color: #f4f0e5; background: #18341de8; border-radius: 2px 32px 2px 2px; }
.build-graphic[data-concept='landscape'] .build-site-copy > small { color: #c9e89d; }
.build-graphic[data-concept='landscape'] .build-site-copy > strong { margin: 8px 0; color: #f4f0e5; font: 400 22px/1.03 Georgia,serif; }
.build-graphic[data-concept='landscape'] .build-site-copy em { color: #c9e89d; }
.build-graphic[data-concept='landscape'] .build-site-copy p { display: none; }
.build-graphic[data-concept='landscape'] .build-demo-cta { border: 0; border-radius: 16px 2px 16px 2px; color: #19311c; background: #c9e89d; padding: 7px 9px; font: 7px 'Trebuchet MS',sans-serif; }
.build-graphic[data-concept='landscape'] .build-modules { position: absolute; z-index: 2; bottom: 16px; left: 26px; display: flex; flex-direction: column; gap: 4px; }
.build-graphic[data-concept='landscape'] .build-modules > div { display: flex; align-items: center; gap: 6px; width: max-content; padding: 5px 8px; border: 0; border-radius: 999px; background: #f4f0e5e8; }
.build-graphic[data-concept='landscape'] .build-modules span { color: #5c7b49; }
.build-graphic[data-concept='landscape'] .build-modules b { margin: 0; color: #19311c; font: 6px 'Trebuchet MS',sans-serif; }
.build-graphic[data-concept='landscape'] .build-modules i, .build-graphic[data-concept='landscape'] .build-site-footer { display: none; }

/* The Wildroot project card also stops before the phone rather than sitting under it. */
.build-graphic[data-concept='landscape'] .build-site-copy { right: 132px; width: 42%; box-sizing: border-box; padding: 14px; }

/* Flux Supply: loud commerce poster with a product collage and marquee. */
.build-graphic[data-concept='shop'] .build-canvas { padding: 0; color: #0b0810; background: #eaff37; font-family: Arial,sans-serif; }
.build-graphic[data-concept='shop'] .build-site-nav { height: 44px; padding: 0 14px; color: #0b0810; border-bottom: 3px solid #0b0810; font: 800 7px Arial,sans-serif; }
.build-graphic[data-concept='shop'] .build-site-nav b { width: 25px; height: 25px; border: 2px solid #0b0810; border-radius: 0; color: #eaff37; background: #0b0810; font: 900 14px Arial,sans-serif; }
.build-graphic[data-concept='shop'] .scene-marquee { display: block; padding: 4px 0; overflow: hidden; color: #fff; background: #ff3dbb; border-bottom: 2px solid #0b0810; font: 900 7px Arial,sans-serif; letter-spacing: .12em; white-space: nowrap; }
.build-graphic[data-concept='shop'] .build-site-hero { grid-template-columns: 58% 42%; height: 206px; gap: 0; padding: 0; }
.build-graphic[data-concept='shop'] .build-art { order: 1; height: 206px; }
.build-graphic[data-concept='shop'] .build-art-scene { border: 0; border-right: 3px solid #0b0810; border-radius: 0; background: linear-gradient(135deg,#60e7ff 0 49%,#ff3dbb 50%); }
.build-graphic[data-concept='shop'] .build-site-copy { order: 2; padding: 18px 12px; }
.build-graphic[data-concept='shop'] .build-site-copy > small { color: #0b0810; font-weight: 900; }
.build-graphic[data-concept='shop'] .build-site-copy > strong { margin: 7px 0; color: #0b0810; font: 900 25px/.88 Arial,sans-serif; text-transform: uppercase; letter-spacing: -.08em; }
.build-graphic[data-concept='shop'] .build-site-copy em { color: #9e136f; }
.build-graphic[data-concept='shop'] .build-site-copy p { color: #0b0810; font: 7px/1.4 Arial,sans-serif; }
.build-graphic[data-concept='shop'] .build-demo-cta { border: 2px solid #0b0810; border-radius: 0; color: #fff; background: #0b0810; box-shadow: 3px 3px 0 #ff3dbb; padding: 7px 9px; font: 900 7px Arial,sans-serif; text-transform: uppercase; }
.build-graphic[data-concept='shop'] .build-modules { height: 58px; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 3px solid #0b0810; }
.build-graphic[data-concept='shop'] .build-modules > div { padding: 7px 10px; border: 0; border-right: 2px solid #0b0810; border-radius: 0; background: #fff; }
.build-graphic[data-concept='shop'] .build-modules span { color: #9e136f; font-weight: 900; }
.build-graphic[data-concept='shop'] .build-modules b { margin: 2px 0; color: #0b0810; font: 900 7px Arial,sans-serif; text-transform: uppercase; }
.build-graphic[data-concept='shop'] .build-modules i, .build-graphic[data-concept='shop'] .build-site-footer { display: none; }

/* Still Studio: quiet, airy schedule design with intentionally sparse type. */
.build-graphic[data-concept='wellness'] .build-canvas { padding: 0 22px; color: #302d2b; background: #f1ede6; font-family: Georgia,serif; }
.build-graphic[data-concept='wellness'] .build-site-nav { height: 55px; color: #615b58; border-bottom: 1px solid #302d2b1c; font: 6px Arial,sans-serif; letter-spacing: .13em; }
.build-graphic[data-concept='wellness'] .build-site-nav b { width: 24px; height: 24px; border: 1px solid #7e756f; border-radius: 50%; color: #615b58; background: transparent; font: 11px Georgia,serif; }
.build-graphic[data-concept='wellness'] .build-site-hero { grid-template-columns: 62% 38%; height: 190px; gap: 10px; padding: 22px 0 8px; }
.build-graphic[data-concept='wellness'] .build-site-copy > small { color: #75698b; }
.build-graphic[data-concept='wellness'] .build-site-copy > strong { margin: 10px 0; color: #302d2b; font: 400 27px/1.04 Georgia,serif; letter-spacing: -.05em; }
.build-graphic[data-concept='wellness'] .build-site-copy em { color: #75698b; }
.build-graphic[data-concept='wellness'] .build-site-copy p { max-width: 31ch; color: #77706b; font: 8px/1.55 Arial,sans-serif; }
.build-graphic[data-concept='wellness'] .build-demo-cta { padding: 0 0 3px; border: 0; border-bottom: 1px solid #75698b; border-radius: 0; color: #75698b; background: none; font: 7px Arial,sans-serif; }
.build-graphic[data-concept='wellness'] .build-art { height: 150px; }
.build-graphic[data-concept='wellness'] .build-art-scene { border: 0; border-radius: 48% 48% 5px 5px; background: linear-gradient(155deg,#d8d0e7,#b8cfc4); }
.build-graphic[data-concept='wellness'] .build-modules { display: block; padding-top: 5px; border-top: 1px solid #302d2b24; }
.build-graphic[data-concept='wellness'] .build-modules > div { display: grid; grid-template-columns: 27px 1fr 45px; align-items: center; padding: 5px 0; border: 0; border-bottom: 1px solid #302d2b18; border-radius: 0; background: none; }
.build-graphic[data-concept='wellness'] .build-modules span { color: #75698b; }
.build-graphic[data-concept='wellness'] .build-modules b { margin: 0; color: #302d2b; font: 7px Georgia,serif; }
.build-graphic[data-concept='wellness'] .build-modules i { justify-self: end; width: 35px; height: 1px; margin: 0; background: #75698b55; }
.build-graphic[data-concept='wellness'] .build-modules i:last-child { display: none; }
.build-graphic[data-concept='wellness'] .build-site-footer { display: none; }

/* The mobile previews echo each client's identity without duplicating a page. */
.build-graphic[data-concept='estate'] .build-phone { border-radius: 4px; color: #211d17; background: #eee8dc; border-color: #8a5b30; font-family: Georgia,serif; }
.build-graphic[data-concept='dining'] .build-phone { border-radius: 24px 24px 8px 8px; color: #f8e5d2; background: #190b0b; border-color: #ff765f; font-family: Georgia,serif; }
.build-graphic[data-concept='hotel'] .build-phone { border-radius: 19px; color: #fff; background: linear-gradient(#64bbc7,#173b3e); border-color: #f2dfb8; font-family: Georgia,serif; }
.build-graphic[data-concept='hvac'] .build-phone { border-radius: 8px; color: #0a2640; background: #f4f8fb; border-color: #0a4f83; font-family: Arial,sans-serif; }
.build-graphic[data-concept='landscape'] .build-phone { border-radius: 30px 8px 30px 8px; color: #19311c; background: #e8e2cf; border-color: #365c28; font-family: Georgia,serif; }
.build-graphic[data-concept='shop'] .build-phone { border-radius: 5px; color: #0b0810; background: #eaff37; border-color: #0b0810; border-width: 4px; font-family: Arial,sans-serif; }
.build-graphic[data-concept='wellness'] .build-phone { border-radius: 36px; color: #302d2b; background: #f1ede6; border-color: #9a8eb0; font-family: Georgia,serif; }
.build-graphic[data-concept='estate'] .build-phone > span, .build-graphic[data-concept='hvac'] .build-phone > span, .build-graphic[data-concept='landscape'] .build-phone > span, .build-graphic[data-concept='shop'] .build-phone > span, .build-graphic[data-concept='wellness'] .build-phone > span { color: currentColor; }
.build-graphic[data-concept='estate'] .build-phone > strong, .build-graphic[data-concept='hvac'] .build-phone > strong, .build-graphic[data-concept='landscape'] .build-phone > strong, .build-graphic[data-concept='shop'] .build-phone > strong, .build-graphic[data-concept='wellness'] .build-phone > strong { color: currentColor; }
.build-graphic[data-concept='shop'] .build-phone > b { border: 2px solid #0b0810; border-radius: 0; box-shadow: 2px 2px 0 #ff3dbb; }
.build-graphic[data-concept='hvac'] .build-phone > b { border-radius: 2px; color: #fff; background: #e25b2e; text-transform: uppercase; }
.build-graphic[data-concept='wellness'] .build-phone > b { border-radius: 999px; color: #f1ede6; background: #75698b; }

/* Each phone preview uses a business-specific motif instead of the shared ring. */
.build-graphic[data-concept='estate'] .build-phone-art { background: linear-gradient(155deg,#d8c7aa,#8a6a45); }
.build-graphic[data-concept='estate'] .build-phone-shape-a { width: 54px; height: 47px; bottom: 7px; background: #39291c; clip-path: polygon(50% 0,100% 31%,100% 100%,0 100%,0 31%); }
.build-graphic[data-concept='estate'] .build-phone-shape-b { width: 17px; height: 27px; bottom: 7px; border: 1px solid #d8ad68; background: #17110b; }
.build-graphic[data-concept='estate'] .build-phone-art > b { top: -17px; color: #39291c; font: 700 6px/1 Arial,sans-serif; letter-spacing: .12em; text-shadow: none; }

.build-graphic[data-concept='dining'] .build-phone-art { background: radial-gradient(circle at 35% 25%,#8f302a,#3a1010 70%); }
.build-graphic[data-concept='dining'] .build-phone-shape-a { width: 51px; height: 51px; border: 9px solid #ff765f; border-radius: 50%; background: #1d090b; box-shadow: 0 8px 13px #0006; }
.build-graphic[data-concept='dining'] .build-phone-shape-b { width: 25px; height: 25px; border: 2px solid #ffd9b8; border-radius: 50%; }
.build-graphic[data-concept='dining'] .build-phone-art > b { color: #ffd9b8; font: 700 6px/1 Georgia,serif; letter-spacing: .08em; text-shadow: none; }

.build-graphic[data-concept='hotel'] .build-phone-art { background: linear-gradient(165deg,#f4d9a8 0 38%,#58c9d4 39% 66%,#19545b 67%); }
.build-graphic[data-concept='hotel'] .build-phone-shape-a { width: 49px; height: 56px; bottom: 0; border-radius: 25px 25px 2px 2px; background: #f2dfb8; box-shadow: 0 8px 16px #12383e66; }
.build-graphic[data-concept='hotel'] .build-phone-shape-b { width: 31px; height: 42px; bottom: 0; border-radius: 16px 16px 0 0; background: #12383e; box-shadow: inset 0 -10px #215c63; }
.build-graphic[data-concept='hotel'] .build-phone-art > b { top: -19px; color: #12383e; font: 700 6px/1 Arial,sans-serif; letter-spacing: .1em; text-shadow: none; }

.build-graphic[data-concept='hvac'] .build-phone-art { background: repeating-linear-gradient(135deg,#d9edf7 0 8px,#f3f9fc 8px 16px); }
.build-graphic[data-concept='hvac'] .build-phone-shape-a { width: 52px; height: 52px; border: 7px solid #49c6ff; border-radius: 50%; background: repeating-conic-gradient(from 8deg,#155b83 0 20deg,#d8f5ff 20deg 38deg,#155b83 38deg 58deg); box-shadow: 0 0 0 1px #155b83; }
.build-graphic[data-concept='hvac'] .build-phone-shape-b { width: 18px; height: 18px; border: 5px solid #d8f5ff; border-radius: 50%; background: #07141d; }
.build-graphic[data-concept='hvac'] .build-phone-art > b { color: #07141d; font: 900 5px/1 Arial,sans-serif; text-shadow: none; }

.build-graphic[data-concept='landscape'] .build-phone-art { background: linear-gradient(#e4f3ba 0 46%,#8eb779 47%); }
.build-graphic[data-concept='landscape'] .build-phone-shape-a { width: 110px; height: 39px; left: -15px; bottom: -2px; border-radius: 70% 55% 0 0; background: #365c28; }
.build-graphic[data-concept='landscape'] .build-phone-shape-b { width: 78px; height: 47px; right: -13px; bottom: -2px; border-radius: 65% 85% 0 0; background: #1e3c1d; }
.build-graphic[data-concept='landscape'] .build-phone-art > b { top: -19px; left: -24px; color: #365c28; font: 700 6px/1 'Trebuchet MS',sans-serif; letter-spacing: .1em; text-shadow: none; }

.build-graphic[data-concept='shop'] .build-phone-art { background: linear-gradient(135deg,#60e7ff 0 49%,#ff3dbb 50%); }
.build-graphic[data-concept='shop'] .build-phone-shape-a { width: 36px; height: 52px; left: 14px; border: 2px solid #8be9ff; border-radius: 4px; background: #672061; transform: rotate(-9deg); box-shadow: 4px 6px 0 #15071855; }
.build-graphic[data-concept='shop'] .build-phone-shape-b { width: 39px; height: 55px; right: 12px; border: 2px solid #ffd7f4; border-radius: 4px; background: #ff55c8; transform: rotate(8deg); box-shadow: 0 7px 10px #15071866; }
.build-graphic[data-concept='shop'] .build-phone-art > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #150718; font: 900 6px/1 Arial,sans-serif; text-shadow: none; }

.build-graphic[data-concept='wellness'] .build-phone-art { background: linear-gradient(155deg,#d8d0e7,#b8cfc4); }
.build-graphic[data-concept='wellness'] .build-phone-shape-a { width: 52px; height: 52px; border: 8px solid #b9f2dc; border-radius: 50%; background: #75698b; box-shadow: 0 0 0 6px #b9a4ff55; }
.build-graphic[data-concept='wellness'] .build-phone-shape-b { width: 16px; height: 16px; border-radius: 50%; background: #f1ede6; }
.build-graphic[data-concept='wellness'] .build-phone-art > b { top: 24px; color: #615b58; font: 600 5px/1 Arial,sans-serif; letter-spacing: .08em; text-shadow: none; }

@media (max-width:420px) {
  .build-graphic[data-concept='hotel'] .build-site-copy { right: 110px; bottom: 73px; }
  .build-graphic[data-concept='hotel'] .build-site-copy > strong { font-size: 24px; }
  .build-graphic[data-concept='hotel'] .build-modules { right: 110px; }
  .build-graphic[data-concept='hotel'] .build-modules > div { padding: 7px 5px; }
  .build-graphic[data-concept='landscape'] .build-site-copy { right: 110px; width: 46%; padding: 12px; }
  .build-graphic[data-concept='landscape'] .build-site-copy > strong { font-size: 19px; }
}