/* Build Your Own Website — mini website studio */
.builder-main { display: block; }

/* ---------------- intro + progress steps ---------------- */
.builder-intro { padding: clamp(3.5rem, 8vw, 6rem) var(--page-pad) clamp(2rem, 4vw, 3rem); background: radial-gradient(circle at 84% 18%, rgba(0,51,160,.3), transparent 30%), radial-gradient(circle at 10% 20%, #24251f 0, #121311 34%, var(--black) 74%); }
.builder-intro h1 { max-width: 16ch; margin: 0 0 1.2rem; font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 600; line-height: .95; letter-spacing: -.035em; color: var(--cream); }
.builder-sub { max-width: 58ch; margin: 0 0 .9rem; color: #cbc7be; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.builder-support { max-width: 62ch; margin: 0; color: var(--brand-muted); font-size: .92rem; }

.builder-steps { display: flex; flex-wrap: wrap; gap: 1px; margin: 2.6rem 0 0; padding: 0; list-style: none; background: var(--white-line); border: 1px solid var(--blue-line); }
.builder-steps li { flex: 1 1 200px; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; background: #0e0f0d; color: var(--brand-muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.builder-steps li span { color: var(--gold-bright); font-weight: 700; }
.builder-steps li b { font-weight: 500; }
.builder-steps li.is-current { background: var(--blue); color: var(--cream); }
.builder-steps li.is-current span { color: var(--cream); }
.builder-steps li.is-done span::after { content: " ✓"; color: var(--gold-bright); }

/* ---------------- shared panel furniture ---------------- */
.b-block, .s-block { min-width: 0; margin: 0; padding: 1.3rem 1.3rem 1.5rem; border: 1px solid var(--blue-line); background: rgba(255,255,255,.025); }
.b-block legend, .b-block h2, .s-block h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; padding: 0; color: var(--cream); font-family: var(--serif); font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; }
.s-index, .b-legend-index { flex: 0 0 auto; color: var(--gold-bright); font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.b-help { margin: -.4rem 0 .9rem; color: var(--brand-muted); font-size: .78rem; line-height: 1.55; letter-spacing: .02em; }
.s-subhead { margin: 1.2rem 0 .7rem; color: var(--cream); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.s-subhead-sm { margin-top: 1.4rem; color: var(--gold-bright); }
.s-tick { position: absolute; top: .45rem; right: .5rem; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--blue-bright); color: #fff; font-size: .6rem; line-height: 1; }

.s-mini-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 1px solid var(--white-line); background: #131412; color: #dedbd4; font: inherit; font-size: .72rem; letter-spacing: .06em; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.s-mini-btn:hover { border-color: var(--gold); color: var(--cream); }
.s-mini-btn-gold { border-color: var(--gold); color: var(--gold-bright); }
.s-mini-btn:focus-visible, .s-x:focus-visible, .ct-btn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

.s-chiprow { display: flex; flex-wrap: wrap; gap: .4rem; }
.s-chip { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--white-line); background: #101110; color: #d6d2cb; font: inherit; font-size: .72rem; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.s-chip:hover:not(:disabled) { border-color: var(--gold); }
.s-chip.is-on { border-color: var(--blue-bright); background: rgba(0,51,160,.28); color: var(--cream); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.s-chip:disabled { opacity: .35; cursor: not-allowed; }
.s-chip:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

.s-field { display: grid; gap: .4rem; margin-bottom: .8rem; }
.s-field > span { color: var(--brand-muted); font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.s-field input, .s-field textarea { width: 100%; padding: .6rem .65rem; border: 1px solid var(--white-line); background: #0f100e; color: var(--cream); font: inherit; font-size: .82rem; resize: vertical; }
.s-field input:focus, .s-field textarea:focus { border-color: var(--gold); outline: none; }

/* ---------------- vision quiz ---------------- */
.quiz-stage { padding: clamp(2rem, 4vw, 3.4rem) var(--page-pad) clamp(3rem, 6vw, 5rem); }
.quiz-card { max-width: 1020px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--blue-line); box-shadow: 10px 10px 0 rgba(0,51,160,.16); background: rgba(255,255,255,.025); }
.quiz-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.quiz-bar { width: min(320px, 60vw); height: 4px; margin-top: .6rem; background: var(--white-line); }
.quiz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-bright), var(--gold)); transition: width .35s ease; }
.quiz-card h2 { margin: 0 0 .5rem; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 500; line-height: 1.03; letter-spacing: -.02em; color: var(--cream); }
.quiz-help { margin: 0 0 1.5rem; color: var(--brand-muted); font-size: .88rem; }
.quiz-body { display: block; }
.quiz-body-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.quiz-body-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.quiz-field { display: grid; gap: .45rem; }
.quiz-field > span { color: var(--brand-muted); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.quiz-field small { color: rgba(255,255,255,.38); }
.quiz-field input { width: 100%; padding: .75rem .7rem; border: 1px solid var(--white-line); background: #0f100e; color: var(--cream); font: inherit; }
.quiz-field input:focus { border-color: var(--gold); outline: none; }
.quiz-card-option { position: relative; display: grid; gap: .45rem; align-content: start; padding: .8rem .8rem 1rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.quiz-card-option:hover { border-color: var(--gold); transform: translateY(-2px); }
.quiz-card-option b { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.quiz-card-option small { color: var(--brand-muted); font-size: .68rem; line-height: 1.4; }
.quiz-card-option u { position: absolute; bottom: .5rem; right: .55rem; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #10120f; font-size: .62rem; font-weight: 700; text-decoration: none; }
.quiz-card-option.is-on { border-color: var(--blue-bright); background: rgba(0,51,160,.24); color: var(--cream); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.quiz-card-option:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.quiz-tick { position: absolute; top: .45rem; right: .5rem; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--blue-bright); color: #fff; font-size: .6rem; }
.quiz-art { display: block; padding: .5rem; border: 1px solid var(--white-line); background: #141513; --accent: var(--gold); }
.quiz-swatch { display: flex; height: 42px; border: 1px solid var(--white-line); }
.quiz-swatch i { flex: 1; }
.quiz-error, .b-form-error { margin: 1rem 0 0; padding: .7rem .9rem; border-left: 2px solid #e2795f; background: rgba(226,121,95,.12); color: #f3c9bd; font-size: .8rem; }
.quiz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--white-line); }

/* ---------------- mini thumbnails ---------------- */
.m-thumb { display: grid; gap: 3px; width: 100%; min-height: 46px; padding: 5px; border-radius: 2px; background: #1b1c19; color: #fff; }
.m-thumb i { display: block; font-style: normal; }
.m-h { height: 7px; width: 72%; border-radius: 1px; background: rgba(255,255,255,.82); }
.m-p { height: 3px; width: 90%; border-radius: 1px; background: rgba(255,255,255,.32); }
.m-p.m-short { width: 62%; }
.m-b { height: 7px; width: 34%; border-radius: 1px; background: var(--accent, var(--gold)); }
.m-center { margin-inline: auto; }
.m-rule { height: 1px; width: 40%; margin-inline: auto; background: rgba(255,255,255,.4); }
.m-pill { height: 6px; width: 46%; border-radius: 99px; background: rgba(255,255,255,.35); }
.m-bar { height: 5px; width: 100%; border-radius: 1px; background: var(--accent, var(--gold)); opacity: .8; }
.m-row { display: flex; align-items: center; gap: 4px; }
.m-center-row { justify-content: center; }
.m-stack { display: grid; gap: 3px; }
.m-col { display: grid; gap: 3px; flex: 1; }
.m-nav { padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.2); }
.m-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.75); }
.m-lines { flex: 1; height: 3px; background: rgba(255,255,255,.28); }
.m-tiny { width: 16px; height: 5px; }
.m-split { align-items: stretch; gap: 5px; }
.m-img { flex: 1; min-height: 26px; border-radius: 2px; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.14)); }
.m-img.m-big { flex: 1.6; }
.m-bgblock { display: grid; gap: 4px; place-content: center; min-height: 34px; padding: 6px; border-radius: 2px; background: linear-gradient(135deg, var(--accent, var(--gold)), rgba(255,255,255,.22)); }
.m-bgblock.m-thin { min-height: 24px; }
.m-on { background: rgba(255,255,255,.9); }
.m-play { width: 12px; height: 12px; margin-inline: auto; border-radius: 50%; background: rgba(255,255,255,.9); }
.m-grid { display: grid; gap: 4px; }
.m-grid > i { min-height: 16px; border-radius: 2px; background: rgba(255,255,255,.24); }
.m-g2 { grid-template-columns: 1fr 1fr; }
.m-g3 { grid-template-columns: repeat(3, 1fr); }
.m-g4 { grid-template-columns: repeat(4, 1fr); }
.m-grid.m-tall > i { min-height: 11px; }
.m-masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 11px; gap: 4px; }
.m-masonry > i { border-radius: 2px; background: rgba(255,255,255,.24); grid-row: span 1; }
.m-masonry > i:nth-child(1) { grid-row: span 2; }
.m-masonry > i:nth-child(4) { grid-row: span 2; }
.m-sm { height: 9px; border-radius: 2px; background: rgba(255,255,255,.22); }
.m-hscroll { display: flex; gap: 4px; overflow: hidden; }
.m-hscroll > i { flex: 0 0 46%; min-height: 22px; border-radius: 2px; background: rgba(255,255,255,.24); }
.m-list > i { height: 8px; border-radius: 1px; background: rgba(255,255,255,.2); }
.m-quote { font-size: 1rem; line-height: .7; color: var(--accent, var(--gold)); text-align: center; }
.m-stars { display: flex; justify-content: center; gap: 2px; }
.m-stars > i { width: 5px; height: 5px; background: var(--accent, var(--gold)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.m-bars > i { height: 4px; background: rgba(255,255,255,.28); }
.m-bars > i:nth-child(1) { width: 90%; }
.m-bars > i:nth-child(2) { width: 55%; }
.m-bars > i:nth-child(3) { width: 30%; }
.m-dots { display: flex; justify-content: center; gap: 3px; }
.m-dots > i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }
.m-nums { justify-content: space-around; }
.m-nums > i { display: grid; gap: 2px; justify-items: center; }
.m-nums b { display: block; width: 12px; height: 7px; background: rgba(255,255,255,.8); }
.m-nums u { display: block; width: 16px; height: 3px; background: rgba(255,255,255,.24); }
.m-acc > i { height: 7px; border-radius: 1px; background: rgba(255,255,255,.2); }
.m-acc > i:first-child { background: rgba(255,255,255,.42); height: 13px; }
.m-avatars { justify-content: center; }
.m-avatars > i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.3); }
.m-timeline { display: grid; gap: 4px; padding-left: 7px; border-left: 1px solid rgba(255,255,255,.3); }
.m-timeline > i { height: 5px; width: 76%; background: rgba(255,255,255,.24); }
.m-logos { justify-content: space-between; }
.m-logos > i { flex: 1; height: 6px; background: rgba(255,255,255,.22); }
.m-form > i { height: 7px; border-radius: 1px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.m-form > i.m-b { background: var(--accent, var(--gold)); box-shadow: none; }
.m-map { flex: 1; min-height: 26px; border-radius: 2px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, rgba(255,255,255,.08) 4px 8px); }
.m-cardbig { display: grid; gap: 4px; padding: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.m-footer { display: grid; gap: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.24); }
.m-footer > i { height: 4px; background: rgba(255,255,255,.2); }
.m-footer > i:last-child { width: 50%; }

/* ---------------- studio shell ---------------- */
.studio { padding: 0 var(--page-pad) clamp(2.5rem, 5vw, 4rem); }
.studio.is-entering .studio-grid { animation: studio-in .5s ease both; }
@keyframes studio-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.studio-tablist { display: none; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px); gap: 1.2rem; align-items: start; }
.studio-col { min-width: 0; }
.studio-pane { display: grid; gap: 1.2rem; min-width: 0; }
.studio-left { display: grid; gap: 1.2rem; }
.studio-left .studio-pane, .studio-right .studio-pane { max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.studio-center .studio-pane { position: sticky; top: 84px; }
.studio-pane:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 4px; }

/* ---------------- component tray ---------------- */
.s-tray { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tray-item { position: relative; min-width: 0; }
.tray-hit { display: grid; gap: .4rem; width: 100%; padding: .5rem .55rem .6rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: grab; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.tray-hit:hover { border-color: var(--gold); transform: translateY(-2px); }
.tray-hit b { font-size: .76rem; font-weight: 600; }
.tray-hit small { color: var(--brand-muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.tray-hit:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.tray-thumb { display: block; }
.tray-item.is-dragging { opacity: .5; }
.tray-item.is-locked .tray-thumb { filter: blur(3px) saturate(.4); }
.tray-item.is-locked .tray-hit { cursor: pointer; border-style: dashed; }
.tray-item.is-locked .tray-hit small { color: var(--gold-bright); }
.tray-item.is-locked .b-lock { position: absolute; top: .5rem; right: .5rem; width: 16px; height: 16px; transform: none; }

/* ---------------- layout cards ---------------- */
.s-layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.layout-card { position: relative; display: grid; gap: .4rem; padding: .5rem .55rem .6rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.layout-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.layout-card b { font-size: .74rem; font-weight: 600; line-height: 1.25; }
.layout-card.is-on { border-color: var(--blue-bright); background: rgba(0,51,160,.24); color: var(--cream); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.layout-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.layout-rec { display: block; color: var(--gold-bright); font-size: .58rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.s-editor { border-color: var(--gold); }
.s-fields { display: block; }
.s-item { padding: .7rem .75rem .2rem; margin-bottom: .6rem; border: 1px solid var(--white-line); background: rgba(255,255,255,.02); }
.s-item-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.s-item-head b { color: var(--gold-bright); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.s-x { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--white-line); background: #131412; color: #dedbd4; font: inherit; font-size: .74rem; line-height: 1; cursor: pointer; }
.s-x:hover:not(:disabled) { border-color: var(--gold); color: var(--cream); }
.s-x:disabled { opacity: .3; cursor: not-allowed; }

/* ---------------- palettes, fonts, shapes, images ---------------- */
.s-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pal-card { position: relative; display: grid; gap: .4rem; padding: .45rem .5rem .55rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.pal-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.pal-card b { font-size: .7rem; font-weight: 600; line-height: 1.2; }
.pal-card.is-on { border-color: var(--blue-bright); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.pal-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.pal-swatches { display: flex; height: 26px; border: 1px solid rgba(255,255,255,.14); }
.pal-swatches i { flex: 1; }
.s-colour-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.s-pickers { display: grid; gap: .45rem; }
.s-picker { display: grid; grid-template-columns: 1fr auto 74px; align-items: center; gap: .5rem; }
.s-picker label { color: var(--brand-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.s-picker input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--white-line); background: transparent; cursor: pointer; }
.s-hex { width: 100%; padding: .35rem .4rem; border: 1px solid var(--white-line); background: #0f100e; color: var(--cream); font: inherit; font-size: .72rem; text-transform: lowercase; }
.s-hex.is-bad { border-color: #e2795f; }
.s-contrast { display: grid; gap: .6rem; justify-items: start; margin: .9rem 0 0; padding: .8rem .9rem; border-left: 2px solid var(--gold); background: rgba(199,150,67,.12); color: #f0e4cd; font-size: .76rem; line-height: 1.5; }
.s-contrast b { display: block; color: var(--gold-bright); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }

.s-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.font-card { position: relative; display: grid; gap: .2rem; padding: .6rem .6rem .7rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.font-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.font-card i { font-size: 1.5rem; font-style: normal; line-height: 1.1; color: var(--cream); }
.font-card b { font-size: .72rem; font-weight: 600; }
.font-card small { color: var(--brand-muted); font-size: .66rem; }
.font-card.is-on { border-color: var(--blue-bright); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.font-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

.s-shape-groups { display: grid; gap: .2rem; }
.s-shape-group .s-subhead { margin-top: .9rem; }
.shape-demo { display: inline-block; width: 16px; height: 12px; background: var(--gold); }
.shape-button-square { border-radius: 0; }
.shape-button-soft { border-radius: 3px; }
.shape-button-rounded { border-radius: 7px; }
.shape-button-pill { border-radius: 99px; }
.shape-card-flat { background: rgba(255,255,255,.3); }
.shape-card-border { background: transparent; box-shadow: inset 0 0 0 1px var(--gold); }
.shape-card-shadow { background: rgba(255,255,255,.3); box-shadow: 2px 2px 0 rgba(199,150,67,.5); }
.shape-card-elevated { background: rgba(255,255,255,.45); box-shadow: 3px 3px 0 var(--gold); }
.shape-card-glass { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.shape-image-square { border-radius: 0; }
.shape-image-rounded { border-radius: 4px; }
.shape-image-arch { border-radius: 50% 50% 2px 2px / 60% 60% 2px 2px; }
.shape-image-circle { width: 13px; border-radius: 50%; }
.shape-image-organic { border-radius: 58% 42% 52% 48% / 48% 54% 46% 52%; }
.shape-spacing-compact { height: 7px; }
.shape-spacing-balanced { height: 11px; }
.shape-spacing-spacious { height: 15px; }

.s-imagecats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.img-card { position: relative; display: grid; gap: .35rem; padding: .4rem .45rem .55rem; border: 1px solid var(--white-line); background: #0f100e; color: #dedbd4; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.img-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.img-card b { font-size: .7rem; font-weight: 600; }
.img-card.is-on { border-color: var(--blue-bright); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.img-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.img-card-art { display: block; height: 48px; background-position: center; background-size: cover; background-color: #171815; }
.img-card-art.is-gradient { background-image: linear-gradient(135deg, var(--blue), var(--gold)); }
.img-card-art.is-texture { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 6px, rgba(255,255,255,.03) 6px 12px); }
.img-card-art.is-none { background-image: linear-gradient(135deg, transparent 48%, var(--white-line) 49% 51%, transparent 52%); box-shadow: inset 0 0 0 1px var(--white-line); }
.s-uploads { margin-top: 1rem; padding-top: .4rem; border-top: 1px solid var(--white-line); }
.s-upload-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.s-upload { display: grid; gap: .3rem; }
.s-upload > span { color: var(--brand-muted); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.s-upload input { max-width: 150px; color: #cbc7be; font: inherit; font-size: .7rem; }
.s-upload-note { margin: .9rem 0 0; }

/* ---------------- canvas column ---------------- */
.canvas-pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.page-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.page-tab { padding: .5rem .85rem; border: 1px solid var(--white-line); border-bottom: 0; background: #101110; color: #cbc7be; font: inherit; font-size: .76rem; cursor: pointer; }
.page-tab:hover { color: var(--cream); border-color: var(--gold); }
.page-tab.is-on { background: var(--blue); border-color: var(--blue-bright); color: var(--cream); }
.page-tab:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.canvas-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; border: 1px solid var(--blue-line); background: rgba(255,255,255,.025); }
.ct-group { display: flex; flex-wrap: wrap; gap: .25rem; }
.ct-btn { padding: .45rem .7rem; border: 1px solid var(--white-line); background: #131412; color: #d6d2cb; font: inherit; font-size: .72rem; letter-spacing: .04em; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.ct-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--cream); }
.ct-btn.is-on { background: var(--blue); border-color: var(--blue-bright); color: var(--cream); }
.ct-btn:disabled { opacity: .35; cursor: not-allowed; }
.ct-btn-danger:hover:not(:disabled) { border-color: #e2795f; color: #f3c9bd; }
.sel-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .55rem .7rem; border: 1px solid var(--gold); background: rgba(199,150,67,.1); }
.sel-name { color: var(--gold-bright); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sel-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.canvas-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.canvas-foot .b-help { margin: 0; max-width: 46ch; }
.s-fab { display: none; }

.preview-shell { overflow: hidden; border: 1px solid var(--blue-line); box-shadow: 10px 10px 0 rgba(0,51,160,.16); background: #0f100e; }
.browser-bar { display: flex; align-items: center; gap: .45rem; height: 32px; padding: 0 .7rem; border-bottom: 1px solid var(--white-line); background: #161714; color: #9b978f; font-size: .66rem; letter-spacing: .04em; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.browser-bar span { margin-left: .5rem; }
.browser-bar b { margin-left: auto; color: var(--gold-bright); font-weight: 500; }
.pv-frame { padding: 0; background: #0c0d0b; }
.preview-shell[data-device="tablet"] .pv-frame { max-width: 820px; margin: 0 auto; padding: 14px; }
.preview-shell[data-device="mobile"] .pv-frame { max-width: 430px; margin: 0 auto; padding: 14px; }
.preview-shell[data-device="tablet"] .pv-site, .preview-shell[data-device="mobile"] .pv-site { box-shadow: 0 0 0 1px var(--white-line); }

/* ---------------- right column ---------------- */
.s-progress { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.s-progress-bar { flex: 1; height: 6px; background: var(--white-line); }
.s-progress-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-bright), var(--gold)); transition: width .4s ease; }
.s-progress strong { color: var(--cream); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.s-shaping { margin: 0 0 .8rem; padding: .6rem .8rem; border-left: 2px solid var(--gold); background: rgba(199,150,67,.12); color: var(--gold-bright); font-size: .8rem; }
.s-checklist { display: grid; gap: .35rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.s-checklist li { display: flex; align-items: flex-start; gap: .5rem; color: var(--brand-muted); font-size: .76rem; }
.s-checklist li i { color: rgba(255,255,255,.3); font-style: normal; }
.s-checklist li.is-done { color: #dedbd4; }
.s-checklist li.is-done i { color: var(--gold-bright); }
.s-facts { display: grid; gap: .5rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--white-line); }
.s-facts > div { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; }
.s-facts dt { color: var(--brand-muted); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.s-facts dd { margin: 0; color: #dedbd4; font-size: .78rem; }
.s-pagelist { display: grid; gap: .35rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.s-pagerow { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border: 1px solid var(--white-line); background: #0f100e; cursor: grab; }
.s-pagerow.is-dragging { opacity: .5; }
.s-pagerow.is-dropbefore { box-shadow: 0 -2px 0 var(--blue-bright); }
.s-grip { color: rgba(255,255,255,.3); font-size: .8rem; }
.s-pagename { flex: 1; display: grid; color: #dedbd4; font-size: .8rem; }
.s-pagename small { color: var(--brand-muted); font-size: .62rem; letter-spacing: .06em; }
.s-pageactions { display: flex; gap: .2rem; }
.s-pageadd { padding-top: .6rem; border-top: 1px solid var(--white-line); }
.s-pagechoices { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------------- toast + celebration ---------------- */
.s-toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid var(--gold); background: rgba(12,13,11,.94); color: var(--cream); font-size: .82rem; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.s-toast i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #10120f; font-size: .62rem; font-style: normal; }
.s-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.s-confetti { position: fixed; inset: 0; z-index: 59; overflow: hidden; pointer-events: none; opacity: 0; }
.s-confetti.is-on { opacity: 1; }
.s-confetti i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 14px; background: var(--c); animation: confetti-fall 2.1s var(--d) ease-in forwards; }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(520deg); opacity: .2; } }

/* ============================================================
   GENERATED WEBSITE PREVIEW
   ============================================================ */
.pv-site {
  container-type: inline-size;
  display: block;
  min-height: 220px;
  background: var(--pv-bg, #f5f6fa);
  color: var(--pv-text, #101426);
  font-family: var(--pv-font-body, var(--sans));
  font-size: 13px;
  line-height: 1.55;
  --pad: calc(1.5rem * var(--pv-space, 1));
  --gap: calc(.9rem * var(--pv-space, 1));
}
.pv-site * { min-width: 0; }
.pv-sec { position: relative; display: block; }
.pv-sec + .pv-sec { border-top: 1px solid var(--pv-line); }
.pv-sec--announcement + .pv-sec, .pv-sec--nav + .pv-sec { border-top: 0; }

/* editing chrome */
.pv-tag { position: absolute; top: 0; left: 0; z-index: 4; display: none; align-items: center; gap: .3rem; padding: .2rem .5rem; background: var(--blue); color: #fff; font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pv-grip { font-style: normal; cursor: grab; }
[data-mode="edit"] .pv-sec { cursor: pointer; }
[data-mode="edit"] .pv-sec:hover { box-shadow: inset 0 0 0 1px var(--blue-bright); }
[data-mode="edit"] .pv-sec:hover > .pv-tag, [data-mode="edit"] .pv-sec.is-selected > .pv-tag, [data-mode="edit"] .pv-sec:focus-visible > .pv-tag { display: inline-flex; }
[data-mode="edit"] .pv-sec.is-selected { box-shadow: inset 0 0 0 2px var(--blue-bright); }
[data-mode="edit"] .pv-sec:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; }
[data-mode="edit"] .pv-sec.is-hidden { opacity: .38; }
[data-mode="edit"] .pv-sec.is-dragging { opacity: .4; }
[data-mode="edit"] .pv-sec.is-dropbefore::before, [data-mode="edit"] .pv-sec.is-dropafter::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--gold); z-index: 5; }
[data-mode="edit"] .pv-sec.is-dropbefore::before { top: -2px; }
[data-mode="edit"] .pv-sec.is-dropafter::after { bottom: -2px; }
[data-mode="edit"] .pv-ed:hover { outline: 1px dashed var(--blue-bright); outline-offset: 2px; }
.pv-ed { display: block; }
.pv-empty { display: grid; gap: .4rem; place-items: center; padding: 4rem 1rem; color: var(--pv-muted); text-align: center; }
.pv-empty b { color: var(--pv-text); font-size: 1rem; }

/* primitives */
.pv-btn { display: inline-block; padding: calc(.6rem * var(--pv-space, 1)) calc(1.1rem * var(--pv-space, 1)); border-radius: var(--pv-btn-radius, 6px); background: var(--pv-primary); color: var(--pv-onPrimary); font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pv-btn-sm { padding: .4rem .7rem; font-size: .58rem; }
.pv-btn-ghost { background: transparent; border: 1px solid var(--pv-primary); color: var(--pv-primary); }
.pv-btn-center { justify-self: center; margin-top: var(--gap); }
.pv-eyebrow { display: block; color: var(--pv-accent); font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.pv-h1, .pv-h2, .pv-h3, .pv-stat-value, .pv-logo { font-family: var(--pv-font-head, var(--sans)); font-weight: var(--pv-head-weight, 700); letter-spacing: var(--pv-head-track, -.02em); text-transform: var(--pv-head-transform, none); line-height: 1.08; }
.pv-h1 { font-size: clamp(1.5rem, 5.4cqw, 2.5rem); }
.pv-h2 { font-size: clamp(1.15rem, 3.6cqw, 1.7rem); }
.pv-h3 { font-size: 1rem; }
.pv-p { display: block; color: var(--pv-muted); font-size: .78rem; line-height: 1.6; }
.pv-rule { display: block; width: 60px; height: 2px; margin: var(--gap) auto 0; background: var(--pv-accent); }
.pv-col { display: grid; align-content: center; gap: calc(.5rem * var(--pv-space, 1)); }
.pv-col .pv-btn, .pv-hero-copy .pv-btn { justify-self: start; margin-top: .3rem; }
.pv-head { display: grid; gap: .4rem; margin-bottom: var(--gap); }
.pv-head.is-center { justify-items: center; text-align: center; }
.pv-grid { display: grid; gap: var(--gap); }
.pv-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-mark { display: block; width: 26px; height: 26px; border-radius: var(--pv-btn-radius, 6px); background: linear-gradient(135deg, var(--pv-primary), var(--pv-accent)); }
.pv-card-title { display: block; font-family: var(--pv-font-head, var(--sans)); font-size: .84rem; font-weight: 700; }
.pv-card-text { display: block; color: var(--pv-muted); font-size: .74rem; line-height: 1.55; }

/* images */
.pv-img { display: block; min-height: 60px; border-radius: var(--pv-img-radius, 14px); background-color: var(--pv-line); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pv-img--gradient { background-image: linear-gradient(135deg, var(--pv-primary), var(--pv-accent)); }
.pv-img--texture { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 8px, rgba(0,0,0,.02) 8px 16px); }
.pv-img-hero { min-height: 170px; }
.pv-img-wide { min-height: 150px; margin-top: var(--gap); }
.pv-img-half { min-height: 160px; }
.pv-img-card { min-height: 96px; }
.pv-img-tile { min-height: 92px; }
.pv-img-big { min-height: 210px; }
.pv-img-show { min-height: 130px; flex: 0 0 46%; }
.pv-img-portrait { min-height: 200px; }
.pv-img-avatar { width: 54px; height: 54px; min-height: 0; border-radius: 50%; }
.pv-img-bg { position: absolute; inset: 0; border-radius: 0; }
.pv-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,0,0,.72), rgba(0,0,0,.28)); }

/* card styles */
.pv-card { position: relative; display: grid; align-content: start; gap: .45rem; padding: calc(.9rem * var(--pv-space, 1)); border-radius: var(--pv-btn-radius, 6px); background: var(--pv-surface); }
[data-card="flat"] .pv-card { background: var(--pv-surface); }
[data-card="border"] .pv-card { background: transparent; border: 1px solid var(--pv-line); }
[data-card="shadow"] .pv-card { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
[data-card="elevated"] .pv-card { box-shadow: 7px 7px 0 var(--pv-primary); border: 1px solid var(--pv-line); }
[data-card="glass"] .pv-card { background: color-mix(in srgb, var(--pv-surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--pv-text) 16%, transparent); backdrop-filter: blur(6px); }

/* announcement */
.pv-ann { display: block; padding: .55rem var(--pad); background: var(--pv-secondary); color: var(--pv-onSecondary); font-size: .7rem; letter-spacing: .06em; text-align: center; }
.pv-ann.is-split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; }
.pv-ann-link { font-weight: 700; text-decoration: underline; }

/* navigation */
.pv-nav { display: flex; align-items: center; gap: .9rem; padding: calc(.75rem * var(--pv-space, 1)) var(--pad); border-bottom: 1px solid var(--pv-line); background: var(--pv-surface); }
.pv-logo { display: block; max-width: 42%; overflow: hidden; font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pv-logo-img { width: 96px; height: 30px; max-width: 40%; background-position: left center; background-repeat: no-repeat; background-size: contain; }
.pv-links { display: flex; flex: 1; flex-wrap: wrap; gap: .75rem; }
.pv-links i { color: var(--pv-muted); font-family: var(--sans); font-size: .64rem; font-style: normal; letter-spacing: .08em; white-space: nowrap; }
.pv-links i.is-on { color: var(--pv-primary); font-weight: 700; }
.pv-nav.is-center { flex-wrap: wrap; justify-content: center; text-align: center; }
.pv-nav.is-center .pv-links { flex: 0 1 auto; order: 2; justify-content: center; width: 100%; }
.pv-nav.is-center .pv-logo { order: 1; max-width: 100%; }
.pv-nav.is-center .pv-btn { order: 3; }
.pv-nav.is-stacked { flex-direction: column; align-items: flex-start; gap: .5rem; }
.pv-nav.is-stacked .pv-links { width: 100%; }

/* hero */
.pv-hero { display: block; padding: calc(2rem * var(--pv-space, 1)) var(--pad); }
.pv-hero-copy { display: grid; align-content: center; gap: calc(.55rem * var(--pv-space, 1)); }
.pv-hero-copy.is-center { justify-items: center; text-align: center; max-width: 46ch; margin-inline: auto; }
.pv-hero-copy.is-center .pv-btn { justify-self: center; }
.pv-hero.is-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: calc(1.6rem * var(--pv-space, 1)); align-items: center; }
.pv-hero.is-split.is-reverse > :first-child { order: 2; }
.pv-hero.is-full { position: relative; overflow: hidden; min-height: 250px; display: grid; align-content: center; padding-block: calc(3rem * var(--pv-space, 1)); }
.pv-hero.is-full .pv-hero-copy { position: relative; color: #fff; }
.pv-hero.is-full .pv-p { color: rgba(255,255,255,.82); }
.pv-hero.is-full .pv-eyebrow { color: #fff; }
.pv-hero.is-service { display: grid; gap: calc(1.2rem * var(--pv-space, 1)); }
.pv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pv-tile { display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--pv-line); border-radius: var(--pv-btn-radius, 6px); background: var(--pv-surface); font-size: .7rem; }
.pv-tile i { display: block; width: 18px; height: 3px; background: var(--pv-accent); }
.pv-hero.is-local { display: grid; gap: calc(1rem * var(--pv-space, 1)); }
.pv-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-badges i { padding: .25rem .6rem; border-radius: 99px; background: color-mix(in srgb, var(--pv-accent) 22%, transparent); color: var(--pv-text); font-family: var(--sans); font-size: .6rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.pv-hero-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: calc(1.4rem * var(--pv-space, 1)); align-items: center; }
.pv-hero.is-video { display: grid; gap: calc(1.2rem * var(--pv-space, 1)); }
.pv-video { position: relative; display: grid; place-items: center; min-height: 190px; overflow: hidden; border-radius: var(--pv-img-radius, 14px); }
.pv-video .pv-scrim { border-radius: inherit; }
.pv-play { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.pv-play::after { content: ""; position: absolute; top: 50%; left: 54%; width: 0; height: 0; border-left: 13px solid var(--pv-primary); border-top: 8px solid transparent; border-bottom: 8px solid transparent; transform: translate(-50%, -50%); }
.pv-video u { position: relative; color: #fff; font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.pv-hero.is-minimal { padding-block: calc(3.4rem * var(--pv-space, 1)); }
.pv-product { position: relative; }
.pv-chip { position: absolute; top: .6rem; left: .6rem; padding: .2rem .55rem; border-radius: 99px; background: var(--pv-accent); color: var(--pv-onAccent); font-family: var(--sans); font-size: .58rem; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* logo strip */
.pv-logos { display: grid; gap: .8rem; padding: calc(1.1rem * var(--pv-space, 1)) var(--pad); background: var(--pv-surface); }
.pv-logos-label { display: block; color: var(--pv-muted); font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.pv-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pv-logos-row i { color: var(--pv-muted); font-family: var(--pv-font-head, var(--sans)); font-size: .82rem; font-style: normal; font-weight: 700; letter-spacing: .04em; opacity: .72; }
.pv-logos.is-boxed .pv-logos-row i { padding: .5rem .8rem; border: 1px solid var(--pv-line); border-radius: var(--pv-btn-radius, 6px); }

/* about */
.pv-about { display: block; padding: calc(1.8rem * var(--pv-space, 1)) var(--pad); }
.pv-about.is-split, .pv-about.is-founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: calc(1.6rem * var(--pv-space, 1)); align-items: center; }
.pv-portrait { position: relative; display: block; }
.pv-sig { position: absolute; bottom: .5rem; left: .6rem; padding: .25rem .6rem; background: var(--pv-bg); color: var(--pv-text); font-family: var(--serif); font-size: .8rem; font-style: normal; }
.pv-card.is-team { justify-items: center; text-align: center; }
.pv-timeline { display: grid; gap: calc(.9rem * var(--pv-space, 1)); padding-left: 1rem; border-left: 2px solid var(--pv-line); }
.pv-tl { position: relative; display: block; }
.pv-tl > i { position: absolute; top: .3rem; left: -1.35rem; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--pv-accent); }
.pv-tl > span { display: grid; gap: .2rem; }

/* services */
.pv-services, .pv-gallery, .pv-testi, .pv-stats, .pv-faq, .pv-featured, .pv-contact { display: block; padding: calc(1.8rem * var(--pv-space, 1)) var(--pad); }
.pv-services, .pv-faq { background: var(--pv-surface); }
.pv-rows { display: grid; gap: calc(1.3rem * var(--pv-space, 1)); }
.pv-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.2rem * var(--pv-space, 1)); align-items: center; }
.pv-row.is-reverse > :first-child { order: 2; }
.pv-icon-item { display: grid; gap: .45rem; justify-items: start; }
.pv-feat { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap); }
.pv-feat-side { display: grid; gap: var(--gap); align-content: start; }
.pv-card.is-big { gap: .6rem; }
.pv-hscroll { display: flex; gap: var(--gap); overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.pv-card.is-scroll { flex: 0 0 58%; }
.pv-scrollhint { display: block; margin-top: .5rem; color: var(--pv-muted); font-family: var(--sans); font-size: .6rem; font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.pv-list { display: grid; }
.pv-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(.8rem * var(--pv-space, 1)) 0; border-bottom: 1px solid var(--pv-line); }
.pv-list-row > span { display: grid; gap: .2rem; }
.pv-arrow { color: var(--pv-primary); font-style: normal; }
.pv-services .pv-btn-center, .pv-gallery .pv-btn-center { display: block; width: fit-content; margin-inline: auto; }

/* featured service */
.pv-featured.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5rem * var(--pv-space, 1)); align-items: center; }
.pv-featured.is-banner { position: relative; overflow: hidden; display: grid; align-content: center; min-height: 210px; }
.pv-featured.is-banner .pv-col { position: relative; color: #fff; max-width: 44ch; }
.pv-featured.is-banner .pv-p { color: rgba(255,255,255,.82); }
.pv-featured.is-card { background: var(--pv-surface); }
.pv-card.is-offer { padding: calc(1.6rem * var(--pv-space, 1)); border-top: 3px solid var(--pv-accent); }

/* gallery */
.pv-grid.is-tiles { gap: calc(.6rem * var(--pv-space, 1)); }
.pv-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 62px; gap: calc(.6rem * var(--pv-space, 1)); }
.pv-masonry .pv-img-tile { min-height: 0; height: 100%; grid-row: span 2; }
.pv-masonry .pv-img-tile.is-m1 { grid-row: span 3; }
.pv-masonry .pv-img-tile.is-m2 { grid-row: span 2; }
.pv-ba { position: relative; display: block; }
.pv-ba i { position: absolute; bottom: .5rem; left: .5rem; padding: .2rem .55rem; background: var(--pv-primary); color: var(--pv-onPrimary); font-family: var(--sans); font-size: .58rem; font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* testimonials */
.pv-card.is-quote { gap: .55rem; }
.pv-stars { display: block; color: var(--pv-accent); font-size: .78rem; font-style: normal; letter-spacing: .12em; }
.pv-quote { display: block; font-family: var(--pv-font-head, var(--sans)); font-size: .95rem; line-height: 1.45; }
.pv-attrib { display: grid; gap: .1rem; }
.pv-attrib-name { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pv-attrib-role { color: var(--pv-muted); font-family: var(--sans); font-size: .64rem; }
.pv-card.is-hero { max-width: 56ch; margin-inline: auto; justify-items: center; text-align: center; }
.pv-card.is-hero .pv-quote { font-size: clamp(1rem, 2.8cqw, 1.35rem); }
.pv-card.is-bare { background: transparent; border: 0; box-shadow: none; padding: 0; }
.pv-carousel { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gap); align-items: center; }
.pv-nav-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--pv-line); border-radius: 50%; color: var(--pv-primary); font-style: normal; }
.pv-dots { display: flex; justify-content: center; gap: .35rem; margin-top: var(--gap); }
.pv-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--pv-line); }
.pv-dots i.is-on { background: var(--pv-primary); }
.pv-testi.is-withimage { display: grid; grid-template-columns: .8fr 1.2fr; gap: calc(1.5rem * var(--pv-space, 1)); align-items: center; }
.pv-testi.is-ratings { display: grid; grid-template-columns: auto 1fr; gap: calc(1.4rem * var(--pv-space, 1)); align-items: center; }
.pv-rating { display: grid; gap: .2rem; justify-items: center; padding-right: 1.4rem; border-right: 1px solid var(--pv-line); }
.pv-rating b { font-family: var(--pv-font-head, var(--sans)); font-size: 2.2rem; line-height: 1; }
.pv-rating u { color: var(--pv-muted); font-family: var(--sans); font-size: .62rem; text-decoration: none; }
.pv-bars { display: grid; gap: .35rem; }
.pv-bar { display: grid; grid-template-columns: 26px 1fr; gap: .5rem; align-items: center; }
.pv-bar i { color: var(--pv-muted); font-family: var(--sans); font-size: .6rem; font-style: normal; }
.pv-bar u { display: block; height: 6px; background: var(--pv-line); text-decoration: none; }
.pv-bar u b { display: block; height: 100%; background: var(--pv-accent); }
.pv-testi.is-ratings .pv-card.is-bare { grid-column: 1 / -1; }

/* statistics */
.pv-stats { background: var(--pv-surface); }
.pv-stats.is-banner { background: var(--pv-primary); color: var(--pv-onPrimary); }
.pv-stats.is-banner .pv-p, .pv-stats.is-banner .pv-stat-label { color: color-mix(in srgb, var(--pv-onPrimary) 76%, transparent); }
.pv-stats.is-banner .pv-eyebrow { color: var(--pv-onPrimary); }
.pv-stat-row { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; }
.pv-stat { display: grid; gap: .2rem; flex: 1 1 110px; }
.pv-stat-value { display: block; font-size: clamp(1.4rem, 4cqw, 2.2rem); }
.pv-stat-label { display: block; color: var(--pv-muted); font-family: var(--sans); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.pv-grid .pv-card .pv-stat { justify-items: center; text-align: center; }

/* FAQ */
.pv-faq-list { display: grid; }
.pv-faq-row { display: grid; gap: .35rem; padding: calc(.85rem * var(--pv-space, 1)) 0; border-bottom: 1px solid var(--pv-line); }
.pv-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pv-faq-q i { color: var(--pv-primary); font-size: 1rem; font-style: normal; }
.pv-faq-a { display: block; color: var(--pv-muted); font-size: .76rem; line-height: 1.6; }
.pv-faq-list.is-accordion .pv-faq-row:not(.is-open) .pv-faq-a { display: none; }
.pv-faq-block { display: grid; gap: .3rem; }

/* CTA banner */
.pv-cta { display: block; padding: calc(2rem * var(--pv-space, 1)) var(--pad); background: var(--pv-primary); color: var(--pv-onPrimary); }
.pv-cta .pv-h2 { color: var(--pv-onPrimary); }
.pv-cta .pv-p { color: color-mix(in srgb, var(--pv-onPrimary) 78%, transparent); }
.pv-cta .pv-btn { background: var(--pv-accent); color: var(--pv-onAccent); }
.pv-cta.is-center { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.pv-cta.is-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.pv-cta.is-boxed { background: var(--pv-bg); color: var(--pv-text); }
.pv-card.is-cta { justify-items: center; gap: .6rem; padding: calc(1.6rem * var(--pv-space, 1)); text-align: center; border: 1px solid var(--pv-accent); }
.pv-cta.is-boxed .pv-h2 { color: var(--pv-text); }
.pv-cta.is-boxed .pv-p { color: var(--pv-muted); }
.pv-cta.is-boxed .pv-btn { background: var(--pv-primary); color: var(--pv-onPrimary); }

/* contact */
.pv-contact.is-simple, .pv-contact.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5rem * var(--pv-space, 1)); align-items: start; }
.pv-contact.is-split { grid-template-columns: 1fr .8fr .9fr; }
.pv-contact.is-consult { display: grid; justify-items: center; gap: var(--gap); text-align: center; }
.pv-contact.is-consult .pv-col { justify-items: center; }
.pv-contact.is-consult .pv-details { grid-auto-flow: column; justify-content: center; }
.pv-contact.is-map { display: grid; grid-template-columns: 1.1fr .9fr; gap: calc(1.4rem * var(--pv-space, 1)); align-items: center; }
.pv-form { display: grid; gap: .55rem; padding: calc(1rem * var(--pv-space, 1)); border: 1px solid var(--pv-line); border-radius: var(--pv-btn-radius, 6px); background: var(--pv-surface); }
.pv-form .pv-btn { justify-self: start; }
.pv-input { display: block; height: 28px; border: 1px solid var(--pv-line); border-radius: calc(var(--pv-btn-radius, 6px) / 2); background: var(--pv-bg); }
.pv-input.is-area { height: 60px; }
.pv-details { display: grid; gap: .35rem; align-content: start; }
.pv-detail { display: block; color: var(--pv-muted); font-size: .74rem; }
.pv-map { display: grid; place-items: center; min-height: 170px; border-radius: var(--pv-img-radius, 14px); background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--pv-primary) 12%, transparent) 0 10px, color-mix(in srgb, var(--pv-primary) 5%, transparent) 10px 20px); }
.pv-map i { color: var(--pv-muted); font-family: var(--sans); font-size: .62rem; font-style: normal; letter-spacing: .16em; text-transform: uppercase; }

/* footer */
.pv-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding: calc(1.3rem * var(--pv-space, 1)) var(--pad); background: var(--pv-secondary); color: var(--pv-onSecondary); }
.pv-footer .pv-logo { color: var(--pv-onSecondary); }
.pv-fbrand { display: grid; gap: .25rem; }
.pv-ftag { display: block; color: color-mix(in srgb, var(--pv-onSecondary) 72%, transparent); font-size: .7rem; }
.pv-flinks { display: flex; flex-wrap: wrap; gap: .8rem; }
.pv-flinks i { color: color-mix(in srgb, var(--pv-onSecondary) 78%, transparent); font-family: var(--sans); font-size: .64rem; font-style: normal; letter-spacing: .08em; }
.pv-copy { color: color-mix(in srgb, var(--pv-onSecondary) 60%, transparent); font-family: var(--sans); font-size: .6rem; font-style: normal; letter-spacing: .1em; }
.pv-footer.is-columns { align-items: start; }
.pv-footer.is-columns .pv-copy { flex: 1 0 100%; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--pv-onSecondary) 22%, transparent); }
.pv-footer.is-centered { flex-direction: column; text-align: center; }
.pv-footer.is-centered .pv-fbrand { justify-items: center; }

/* narrow preview containers (tablet, mobile and small screens) */
@container (max-width: 720px) {
  .pv-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-contact.is-split { grid-template-columns: 1fr 1fr; }
  .pv-hero.is-split, .pv-hero-row, .pv-row, .pv-featured.is-split, .pv-about.is-split, .pv-about.is-founder, .pv-testi.is-withimage, .pv-contact.is-map { grid-template-columns: 1fr; }
  .pv-hero.is-split.is-reverse > :first-child, .pv-row.is-reverse > :first-child, .pv-hero.is-split > :first-child { order: 0; }
  .pv-feat { grid-template-columns: 1fr; }
}
@container (max-width: 520px) {
  .pv-site { font-size: 12px; }
  .pv-g2, .pv-g3, .pv-g4, .pv-tiles, .pv-contact.is-simple, .pv-contact.is-split, .pv-stat-row { grid-template-columns: 1fr; }
  .pv-stat-row { display: grid; }
  .pv-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-nav { flex-wrap: wrap; }
  .pv-links { order: 3; width: 100%; }
  .pv-testi.is-ratings { grid-template-columns: 1fr; }
  .pv-rating { justify-items: start; padding-right: 0; border-right: 0; }
  .pv-card.is-scroll { flex: 0 0 76%; }
  .pv-ann.is-split { flex-direction: column; gap: .3rem; text-align: center; }
}

/* ---------------- estimate card ---------------- */
.b-estimate { padding: 1.4rem; border: 1px solid var(--line); background: #10110f; }
.b-estimate .eyebrow { margin-bottom: .8rem; }
.b-estimate-total { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 2.9rem); font-weight: 500; line-height: 1; color: var(--cream); }
.b-estimate-flag { display: block; margin-top: .5rem; color: var(--brand-muted); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.b-estimate-lines { display: grid; gap: .45rem; margin: 1.2rem 0; padding: 1.1rem 0 0; border-top: 1px solid var(--white-line); list-style: none; }
.b-estimate-lines li { display: flex; justify-content: space-between; gap: 1rem; color: var(--brand-muted); font-size: .76rem; }
.b-estimate-lines b { color: var(--cream); font-weight: 500; white-space: nowrap; }
.b-disclaimer { margin: 0 0 1.2rem; color: var(--brand-muted); font-size: .7rem; line-height: 1.6; }
.b-estimate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* ---------------- locked features ---------------- */
.b-locked h2 { margin-bottom: .7rem; }
.b-feature-grid { display: grid; gap: .5rem; }
.b-feature { position: relative; display: block; cursor: pointer; }
.b-feature input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.b-feature input:disabled { cursor: default; }
.b-feature-body { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem; border: 1px solid var(--white-line); background: linear-gradient(140deg, rgba(0,51,160,.18), #101110); color: #dedbd4; transition: border-color .2s ease, background .2s ease; }
.b-feature-body b { font-size: .8rem; font-weight: 500; }
.b-feature-body small { color: var(--gold-bright); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.b-feature-tick { position: absolute; top: 50%; right: .6rem; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--white-line); color: transparent; font-size: .62rem; transform: translateY(-50%); }
.b-feature.is-on .b-feature-tick { background: var(--blue-bright); color: #fff; }
.b-feature.is-on .b-feature-body { border-color: var(--blue-bright); background: rgba(0,51,160,.3); color: var(--cream); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.b-feature:hover .b-feature-body { border-color: var(--gold); }
.b-feature input:focus-visible + .b-feature-body { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.b-lock { position: absolute; top: 50%; right: .6rem; width: 15px; height: 15px; fill: none; stroke: var(--gold-bright); stroke-width: 1.7; transform: translateY(-50%); }
.b-feature.is-locked small { filter: blur(3.5px); }
.b-feature.is-locked .b-feature-body { background: rgba(255,255,255,.04); border-style: dashed; }
.b-update-row { display: grid; gap: .7rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--white-line); }
.b-update-row .b-help { margin: 0; }

/* ---------------- lead form + success ---------------- */
.builder-form-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(3rem, 6vw, 5.5rem) var(--page-pad); background: radial-gradient(circle at 86% 22%, rgba(0,51,160,.3), transparent 29%), radial-gradient(circle at 12% 22%, #25241e 0, #10110f 38%, #090a09 74%); }
.builder-form-copy h2 { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 3.8rem); font-weight: 500; line-height: .98; color: var(--cream); }
.builder-form-copy p { color: var(--brand-muted); }
.builder-lead-form { padding: clamp(1.5rem, 3vw, 2.6rem); border: 1px solid var(--blue-line); box-shadow: 10px 10px 0 rgba(0,51,160,.16); background: rgba(255,255,255,.025); }
.b-form-title { margin: 0 0 1.4rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; color: var(--cream); }
.b-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.b-form-grid label { display: flex; flex-direction: column; gap: .5rem; }
.b-form-grid label > span { color: var(--brand-muted); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.b-form-grid label small { color: rgba(255,255,255,.4); }
.b-form-grid input, .b-form-grid select, .b-form-grid textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--cream); padding: .7rem .2rem; }
.b-form-grid select { border: 1px solid rgba(255,255,255,.2); background: #10110f; padding: .7rem; }
.b-form-grid input:focus, .b-form-grid select:focus, .b-form-grid textarea:focus { border-color: var(--gold); }
.b-form-wide { grid-column: 1 / -1; }
.b-consent { flex-direction: row !important; align-items: flex-start; gap: .7rem !important; }
.b-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--blue-bright); }
.b-consent span { color: var(--cream) !important; font-size: .82rem !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
.builder-lead-form .button { width: 100%; margin-top: 1.5rem; }
.builder-lead-form .button:disabled { opacity: .65; cursor: progress; }
.b-privacy-note { margin: 1rem 0 0; color: var(--brand-muted); font-size: .72rem; line-height: 1.6; }
.honeypot { position: absolute; left: -9999px; }

.builder-success { padding: clamp(1.6rem, 3vw, 2.8rem); border: 1px solid var(--gold); background: rgba(0,51,160,.14); }
.builder-success h2 { margin: 0 0 .8rem; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500; color: var(--cream); }
.builder-success > p { color: #dedbd4; max-width: 52ch; }
.b-success-meta { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.6rem 0; padding: 1.2rem 0; border-top: 1px solid var(--white-line); border-bottom: 1px solid var(--white-line); }
.b-success-meta dt { color: var(--brand-muted); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.b-success-meta dd { margin: .4rem 0 0; color: var(--cream); font-family: var(--serif); font-size: 1.5rem; }
.b-success-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.builder-success:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 6px; }

/* ---------------- tablet and mobile: Add / Design / Preview / Estimate ---------------- */
@media (max-width: 1100px) {
  .studio { padding-top: .6rem; }
  .studio-tablist { position: sticky; top: 0; z-index: 20; display: flex; gap: 1px; margin: 0 0 1rem; background: var(--white-line); border: 1px solid var(--blue-line); }
  .studio-tab { flex: 1; padding: .8rem .4rem; border: 0; background: #0e0f0d; color: var(--brand-muted); font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .studio-tab[aria-selected="true"] { background: var(--blue); color: var(--cream); }
  .studio-tab:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -3px; }
  .studio-grid { display: block; }
  .studio-pane { display: none; }
  .studio[data-tab="add"] [data-pane="add"], .studio[data-tab="design"] [data-pane="design"],
  .studio[data-tab="preview"] [data-pane="preview"], .studio[data-tab="estimate"] [data-pane="estimate"] { display: grid; }
  .studio-center .studio-pane { position: static; }
  .studio-left .studio-pane, .studio-right .studio-pane { max-height: none; overflow: visible; }
  .s-fab { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.1rem; border: 1px solid var(--gold); background: var(--gold); color: #10120f; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
  .tray-hit { cursor: pointer; }
  .builder-form-section { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .builder-steps li { flex: 1 1 100%; }
  .b-block, .s-block { padding: 1.05rem; }
  .quiz-body-cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .s-tray, .s-layouts, .s-palettes, .s-fonts, .s-imagecats { grid-template-columns: 1fr 1fr; }
  .canvas-toolbar { gap: .35rem; }
  .ct-btn { font-size: .68rem; padding: .4rem .55rem; }
  .b-form-grid { grid-template-columns: 1fr; }
  .b-estimate-actions, .b-success-actions, .quiz-foot { flex-direction: column; align-items: stretch; }
  .b-estimate-actions .button, .quiz-foot .button { width: 100%; text-align: center; }
  .s-facts > div { grid-template-columns: 84px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-card-option, .tray-hit, .layout-card, .pal-card, .font-card, .img-card, .s-chip, .ct-btn, .s-mini-btn, .b-feature-body, .s-toast, .s-progress-bar i, .quiz-bar i { transition: none; }
  .quiz-card-option:hover, .tray-hit:hover, .layout-card:hover, .pal-card:hover, .font-card:hover, .img-card:hover { transform: none; }
  .studio.is-entering .studio-grid { animation: none; }
  .s-confetti { display: none; }
}