/* Chicago AI Studio: Forest & Brass DEV site, integrated ideas 1, 3, 5, 6, 7.
   Theme colors come only from theme.css tokens. The one deliberate exception is the mock site inside the style
   builder preview (.ms.pal-*): those palettes show a client's possible look and are not brand colors.
   Nothing is hidden unless <html> has .js-motion; everything settles to its final state under reduced motion. */

/* ---------- Idea 1: blueprint to finished page (hero art) ---------- */
.hero .plate.bp{padding:14px 14px 0;width:100%}
.bp-frame{position:relative;aspect-ratio:600/420;background:rgb(var(--paper-rgb));overflow:hidden;contain:paint}
.bp .bp-wire{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2;pointer-events:none}
.bp-wire *{fill:none;stroke:rgb(var(--metal-rgb));stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.bp-wire .x{stroke-opacity:.55}
.bp-page{position:absolute;inset:0;font-family:var(--sans);color:rgb(var(--deep-rgb))}
.bp-page>div{position:absolute;box-sizing:border-box}
.bp-page .k-bar{background:rgb(var(--deep-rgb))}
.bp-page .k-logo{font:600 clamp(7px,.7vw,10px)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;white-space:nowrap}
.bp-page .k-link,.bp-page .k-cl{background:rgb(var(--deep-rgb) / .45)}
.bp-page .k-heroblock{background-color:rgb(var(--deep2-rgb));background-image:var(--grain-dark)}
.bp-page .k-h{color:rgb(var(--paper-rgb));font:500 clamp(14px,1.75vw,25px)/1 var(--serif);white-space:nowrap;display:flex;align-items:center}
.bp-page .k-h em{color:rgb(var(--metal-rgb));font-style:italic}
.bp-page .k-p{background:rgb(var(--paper-rgb) / .5)}
.bp-page .k-btn{background:rgb(var(--metal-rgb));color:rgb(var(--deep-rgb));font:600 clamp(6px,.62vw,8.5px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.bp-page .k-img,.bp-page .k-cimg{background:rgb(var(--stone-rgb) / .55);overflow:hidden}
.bp-page .k-img svg,.bp-page .k-cimg svg{width:100%;height:100%;display:block}
.bp-page .k-img path,.bp-page .k-cimg path{fill:none;stroke:rgb(var(--deep2-rgb));stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-page .k-img .faint,.bp-page .k-cimg .faint{stroke-opacity:.45}
.bp-page .k-card{border:1px solid rgb(var(--deep-rgb) / .14);background:rgb(var(--paper-rgb))}
.bp-page .k-ct{font:500 clamp(9px,1vw,14px)/1 var(--serif);display:flex;align-items:center}
.bp .art-note span{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-left:6px}
/* motion: only with JS. Wire draws (stroke), then the page fills in block by block (clip + opacity). */
.js-motion .bp .bp-wire{display:block}
.js-motion .bp-wire *{stroke-dashoffset:1}
.js-motion .bp.drawn .bp-wire *{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-out) var(--d)}
.js-motion .bp.filled .bp-wire{opacity:0;transition:opacity 1s var(--ease) .9s}
.js-motion .bp-page>div{opacity:0;clip-path:inset(0 100% 0 0)}
.js-motion .bp.filled .bp-page>div{opacity:1;clip-path:inset(0 0 0 0);transition:opacity .6s var(--ease) var(--d),clip-path .9s var(--ease-out) var(--d)}
.js-motion .bp-frame{background:rgb(var(--paper-rgb) / .04);transition:background-color .9s var(--ease) .2s}
.js-motion .bp.filled .bp-frame{background:rgb(var(--paper-rgb))}

/* ---------- Idea 7: Chicago time (real America/Chicago time; ?ct=HH:MM for review) ---------- */
.hero{transition:background-color 2.4s var(--ease)}
.ct{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:22px 0 0;max-width:520px;font-size:14px;color:var(--c-ink-2)}
.ct-ico{flex:none;fill:none;stroke:rgb(var(--metal-rgb));stroke-width:1.4;stroke-linecap:round}
.ct-ico .moon{display:none}
.ct.is-night .ct-ico .moon{display:inline}.ct.is-night .ct-ico .sun{display:none}
.ct-time{font-weight:600;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--stone-rgb))}
.ct-msg{font-family:var(--serif);font-style:italic;font-size:19px;color:rgb(var(--paper-rgb) / .86)}
.ct-msg a{color:rgb(var(--paper-rgb));text-decoration-color:rgb(var(--metal-rgb));text-underline-offset:4px}
.ct-msg a:hover{color:rgb(var(--metal-rgb))}
.ct-msg a:focus-visible{outline:2px solid rgb(var(--metal-rgb));outline-offset:3px}
.ct-msg.swap{animation:ct-in .9s var(--ease-out)}
@keyframes ct-in{from{opacity:0;transform:translateY(6px)}}

/* ---------- Idea 5: style / look builder ---------- */
.lb{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:64px;align-items:start;margin-top:56px}
.lb-h{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--c-label);margin:0 0 26px}
.lb-nojs{font-size:15px;color:var(--c-ink-2);margin:0}
.lb fieldset{border:0;padding:0;margin:0 0 30px;min-width:0}
.lb legend,.lb-name{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:14px;padding:0}
.lb-name{display:grid;gap:12px;margin:0 0 30px}
.lb-name input{font:400 17px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--c-ink);background:var(--c-paper);border:1px solid rgb(var(--deep-rgb) / .3);border-radius:0;padding:12px 14px}
.lb-name input:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;display:block}
.chips input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.chips span{display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border:1px solid rgb(var(--deep-rgb) / .3);font-size:14px;color:var(--c-ink);background:var(--c-paper);transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.chips input:hover+span{border-color:rgb(var(--deep-rgb) / .6)}
.chips input:checked+span{background:rgb(var(--deep2-rgb));color:rgb(var(--paper-rgb));border-color:rgb(var(--deep2-rgb))}
.chips input:focus-visible+span{outline:2px solid rgb(var(--accent-rgb));outline-offset:3px}
.chips .sw{width:22px;height:14px;flex:none;border:1px solid rgb(var(--deep-rgb) / .25)}
.lb-status{min-height:1.5em;margin:16px 0 0;font-size:14px;color:var(--c-ink-2)}
.lb-browser{border:1px solid rgb(var(--deep-rgb) / .18);background:var(--c-paper);box-shadow:0 30px 60px -44px rgb(var(--deep-rgb) / .45)}
.lb-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid rgb(var(--deep-rgb) / .12);font-size:11px;letter-spacing:.12em;color:var(--c-ink-2)}
.lb-bar .dots{display:flex;gap:5px}.lb-bar .dots i{width:7px;height:7px;border-radius:50%;background:rgb(var(--stone-rgb))}
.lb-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tag{text-transform:uppercase;letter-spacing:.2em;font-size:10px;white-space:nowrap}
.lb-features{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.lb-f-h{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c-label)}
.lb-features ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px}
.lb-features li{position:relative;padding-left:18px}
.lb-features li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:rgb(var(--metal-rgb))}
.lb-opt{color:var(--c-ink-2)}

/* mock site: allowed palette exceptions (sample client looks, not brand colors) */
.ms{--bg:#F4F1EA;--ink:#1D1D1B;--acc:#9A4A2E;--acc-ink:#FBF9F4;--soft:#E6E0D3;--hf:var(--serif);--bf:var(--sans);--hw:500;--hst:normal;--hcase:none;--htrack:-.01em;
  background:var(--bg);color:var(--ink);font-family:var(--bf);min-height:520px;overflow:hidden;transition:background-color .6s var(--ease),color .6s var(--ease),opacity .25s var(--ease)}
/* per-palette and per-typography tokens are generated into samples/looks.css from _build/samples.json */
.ms.is-fading{opacity:.2}
.ms-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 30px;font-size:12px}
.ms-name{font-family:var(--hf);font-weight:var(--hw);font-style:var(--hst);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ms-links{display:flex;gap:16px;flex:none}.ms-links u{text-decoration-color:var(--acc);text-underline-offset:4px}
.ms-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:34px 30px 30px}
.ms-kicker{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.82;margin-bottom:12px}
.ms-h{font-family:var(--hf);font-weight:var(--hw);font-style:var(--hst);text-transform:var(--hcase);font-size:clamp(28px,3.1vw,42px);line-height:1.04;letter-spacing:var(--htrack);margin:0 0 14px;overflow-wrap:anywhere}
.ms-p{font-size:13.5px;line-height:1.55;margin:0 0 20px;opacity:.86;max-width:30em}
.ms-btns{display:flex;flex-wrap:wrap;gap:10px}
.ms-btn{display:inline-block;background:var(--acc);color:var(--acc-ink);font-size:11.5px;font-weight:600;padding:10px 18px;letter-spacing:.04em}
.ms-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ms-img{aspect-ratio:4/3;background:var(--soft);position:relative;overflow:hidden}
.ms-img svg{position:absolute;inset:0;width:100%;height:100%}
.ms-img path,.ms-img circle{fill:none;stroke:var(--acc);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ms-img .faint{stroke-opacity:.5}
.ms-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:8px 30px 32px}
.ms-card{border-top:2px solid var(--acc);padding:14px 0 0;font-size:12.5px;line-height:1.45}
.ms-card i{display:none;font-style:normal}
.ms-card b{display:block;font-family:var(--hf);font-weight:var(--hw);font-style:var(--hst);font-size:16px;margin-bottom:4px}
/* typography variants */
.ms.type-serif .ms-h{font-size:clamp(30px,3.4vw,46px)}
.ms.type-serif .ms-h span{font-style:italic}
.ms.type-display .ms-h,.ms.type-display .ms-card b,.ms.type-display .ms-name{text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.ms.type-display .ms-card{border-top-width:5px}
.ms.type-soft .ms-h{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.ms.type-sans .ms-h{font-weight:400}
/* layout variants */
.ms.lay-classic .ms-nav{flex-direction:column;gap:10px;margin:0 30px;padding:22px 0 14px;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.ms.lay-classic .ms-hero{grid-template-columns:1fr;text-align:center;padding:48px 60px 34px}
.ms.lay-classic .ms-p{margin-left:auto;margin-right:auto}
.ms.lay-classic .ms-btns{justify-content:center}
.ms.lay-classic .ms-img{display:none}
.ms.lay-classic .ms-card{border-top-width:1px;text-align:center}
.ms.lay-magazine .ms-nav{border-bottom:3px double var(--ink)}
.ms.lay-magazine .ms-hero{grid-template-columns:1.25fr .75fr;grid-template-areas:"k k" "h h" "i c";gap:20px 28px;padding:26px 30px 24px}
.ms.lay-magazine .ms-copy{display:contents}
.ms.lay-magazine .ms-kicker{grid-area:k;margin:0 0 -14px}
.ms.lay-magazine .ms-h{grid-area:h;font-size:clamp(34px,4.6vw,62px);margin:0;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.ms.lay-magazine .ms-img{grid-area:i;aspect-ratio:16/8}
.ms.lay-magazine .ms-p,.ms.lay-magazine .ms-btns{grid-column:2}
.ms.lay-magazine .ms-p{grid-row:3;align-self:start;margin:0}
.ms.lay-magazine .ms-btns{grid-row:3;align-self:end}
.ms.lay-magazine .ms-cards{gap:0}
.ms.lay-magazine .ms-card{border-top:1px solid var(--ink);padding:12px 16px 0;border-left:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.ms.lay-magazine .ms-card:first-child{border-left:0;padding-left:0}
.ms.lay-magazine .ms-card i{display:block;font-family:var(--hf);font-size:22px;color:var(--acc);margin-bottom:4px}

/* ---------- Work: fictional demos presented as looks ---------- */
.demo-kind{text-transform:none;letter-spacing:.02em}

/* ---------- Idea 6: ascent pricing ---------- */
.ascent{position:relative}
.ascent .pricing{position:static;align-items:start}
.ridge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ascent .card{position:relative;z-index:1}
.ascent .card:not(.featured){background:linear-gradient(var(--band),var(--band)),rgb(var(--paper-rgb))}
.ridge .c{fill:none;stroke:rgb(var(--deep-rgb) / .16);stroke-width:1;vector-effect:non-scaling-stroke}
.ridge .r{fill:none;stroke:rgb(var(--metal-rgb));stroke-width:1.3;vector-effect:non-scaling-stroke}
.ridge .lead{stroke:rgb(var(--deep-rgb) / .35);stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.ridge .tri{fill:rgb(var(--metal-rgb))}
.js-motion .ridge .r{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-out) .2s}
.js-motion .ascent.go .ridge .r{stroke-dashoffset:0}
.elev{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--c-label)}
.elev span{color:var(--c-label);margin-right:4px;letter-spacing:.12em}
@media (min-width:901px){
  .ascent{padding-top:24px}
  .ascent .pricing>.card:nth-child(1){margin-top:220px}
  .ascent .pricing>.card:nth-child(2){margin-top:110px}
}
@media (max-width:900px){.ridge{display:none}}

/* ---------- Idea 3: after hours (receptionist section) ---------- */
#receptionist{padding-top:0}
#receptionist>.wrap{padding-top:110px}
.ah{position:relative;margin-bottom:0}
.ah-stage{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:flex-start;background-color:rgb(var(--deep-rgb));background-image:var(--grain-dark);color:rgb(var(--paper-rgb))}
.ah-copy{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:300px}
.ah .ah-eb{color:rgb(var(--stone-rgb))}
.ah-clock{margin:16px 0 10px;font:300 clamp(48px,5.4vw,84px)/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ah-title{color:inherit;font-size:clamp(32px,3.7vw,56px);line-height:1.06;max-width:16em;margin:0}
.ah-title::before,.ah-title::after{content:none!important;display:none}
.ah-title em{display:block;font-style:italic;color:rgb(var(--metal-rgb));font-weight:400}
.ah-lead{max-width:560px;margin:26px 0 0;font-size:18px;font-weight:300;line-height:1.7;color:rgb(var(--paper-rgb) / .84)}
.ah-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:38%;z-index:1}
.ah-sky .bld{fill:none;stroke:currentColor;stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.ah-sky .lake{stroke:currentColor;stroke-opacity:.4}
.ah-moon{position:absolute;right:14%;top:calc(var(--header-h) + 9vh);width:56px;height:56px;z-index:1;fill:none;stroke:rgb(var(--metal-rgb));stroke-width:1.2}
.ah-sky .wg{fill:rgb(var(--metal-rgb))}
/* mobile / reduced motion: static night scene; with JS the windows light up once when it comes into view */
.js-motion .ah:not(.scroll) .wg{opacity:0;transition:opacity .9s var(--ease) calc(var(--g) * 120ms)}
.js-motion .ah:not(.scroll).lit .wg{opacity:1}
/* desktop scroll scene (JS adds .scroll): paper -> deep, windows light in 10 groups, clock 5:30 -> 9:42 PM */
.ah.scroll{height:210vh}
.ah.scroll .ah-stage{position:sticky;top:0;height:100vh;min-height:620px;background-image:none}
.ah.scroll .ah-copy{padding-top:calc(var(--header-h) + 8vh);padding-bottom:0}
.ah.scroll .wg{opacity:0;transition:opacity .7s var(--ease)}
.ah.scroll .wg.on{opacity:1}
.ah.scroll .ah-moon{transition:opacity 1.2s var(--ease),transform 1.6s var(--ease-out)}
.ah.scroll:not(.night) .ah-moon{opacity:0;transform:translateY(30px)}
.ah.scroll .ah-t2{transition:opacity .9s var(--ease),transform 1s var(--ease-out)}
.ah.scroll:not(.answered) .ah-t2{opacity:0;transform:translateY(10px)}
.ah.scroll:not(.night) .ah-eb{color:rgb(var(--deep2-rgb))}
.ah.scroll:not(.night) .ah-lead{color:rgb(var(--deep-rgb) / .8)}
.ah.scroll .ah-t2,.ah.scroll .ah-eb,.ah.scroll .ah-lead{transition:color .6s var(--ease),opacity .9s var(--ease),transform 1s var(--ease-out)}
.ah.scroll:not(.night) .ah-t2{color:rgb(var(--deep2-rgb))}

@media (max-width:900px){
  .lb{grid-template-columns:1fr;gap:40px}
  .ms{min-height:0}
  .ms-hero,.ms.lay-magazine .ms-hero{grid-template-columns:1fr;grid-template-areas:none}
  .ms.lay-magazine .ms-copy{display:block}
  .ms.lay-magazine .ms-img,.ms.lay-magazine .ms-p,.ms.lay-magazine .ms-btns{grid-area:auto;grid-column:auto;grid-row:auto}
  .ms.lay-magazine .ms-p{margin:14px 0 18px}
  .hero .plate.bp{max-width:560px}
  #receptionist>.wrap{padding-top:80px}
  .ah-stage{min-height:0}
  .ah-copy{padding-top:80px;padding-bottom:58vw}
  .ah-sky{height:auto;aspect-ratio:1200/420}
  .ah-moon{top:86px;right:7%;width:40px;height:40px}
}
@media (max-width:620px){
  .ms-nav{padding:14px 18px}.ms-links{display:none}
  .ms-hero{padding:24px 18px}.ms.lay-classic .ms-hero{padding:30px 18px 24px}
  .ms-cards{grid-template-columns:1fr;padding:4px 18px 24px;gap:14px}
  .ms.lay-magazine .ms-card{border-left:0;padding-left:0}
  .ms.lay-classic .ms-nav{margin:0 18px}
  .lb-tag{display:none}
  .ct-msg{font-size:17px}
  .ah-sky{aspect-ratio:1200/620}
}
@media (prefers-reduced-motion:reduce){
  .hero,.ms,.ms *{transition:none!important}
  .ct-msg.swap{animation:none}
  .js-motion .ah .wg{transition:none!important}
}
@media (min-width:901px){
  .hero .eyebrow{grid-column:1}
  .hero .ct{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;justify-content:flex-end;text-align:right;max-width:430px}
}

/* ---------- portfolio showcase: six fictional sample looks (Oct 23) ----------
   No JS: all six as a grid. JS (.sc.is-rot): one slide at a time, slow crossfade, manual controls. */
.sc-head{max-width:760px}
.sc-head .demo-heading{margin-bottom:14px}
.sc-fine{margin:10px 0 0;font-size:13px;letter-spacing:.04em;color:var(--c-ink-2)}
.sc{margin-top:48px}
.sc-slides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px}
.sc-slide{margin:0;display:grid;align-content:start;gap:20px;background-color:var(--c-paper);background-image:var(--grain)}
.lb{scroll-margin-top:88px}
.sc-shot{display:block;border:1px solid var(--c-rule);background:var(--c-paper);padding:0 12px 12px;color:var(--c-ink-2);text-decoration:none}
.sc-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:rgb(var(--stone-rgb) / .3)}
.sc-bar{display:flex;align-items:center;gap:12px;padding:9px 2px;font-size:10.5px;letter-spacing:.12em}
.sc-bar .dots{display:flex;gap:5px}.sc-bar .dots i{width:7px;height:7px;border-radius:50%;background:rgb(var(--stone-rgb))}
.sc-bar .url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-bar-tag{text-transform:uppercase;letter-spacing:.2em;font-size:10px}
.sc-cap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sc-num{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c-label);margin-top:6px}
.sc-style{font-family:var(--serif);font-size:30px;line-height:1.1;font-weight:500;color:var(--c-ink)}
.sc-note{font-size:15.5px;line-height:1.6;color:var(--c-ink);max-width:30em}
.sc-biz{font-size:13px;color:var(--c-ink-2)}
.sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:12px}
.sc-open{font-size:14px;color:var(--c-ink);text-underline-offset:5px;text-decoration-color:rgb(var(--metal-rgb));padding:10px 0}
.sc-open:hover{text-decoration-thickness:2px}
.sc-custom .arrow,.sc-custom svg{margin-left:10px}
/* rotating mode */
.sc.is-rot .sc-slides{display:grid;grid-template-columns:minmax(0,1fr)}
.sc.is-rot .sc-slide{grid-area:1/1;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:center;opacity:0;visibility:hidden;z-index:0;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s linear .8s}
.sc.is-rot .sc-slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s}
.sc.is-rot .sc-slide.is-leaving{opacity:1;visibility:visible;z-index:1;transition:none}
.sc.is-rot .sc-style{font-size:clamp(34px,3.4vw,46px)}
.sc-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--c-rule)}
.sc-ctrl[hidden]{display:none}
.sc-dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.sc-dot{min-width:44px;min-height:44px;padding:0 6px;border:0;background:none;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--c-ink-2);cursor:pointer;position:relative}
.sc-dot::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;background:currentColor;opacity:0;transition:opacity .4s ease}
.sc-dot[aria-current="true"]{color:var(--c-ink)}
.sc-dot[aria-current="true"]::after{opacity:1;height:2px;background:rgb(var(--metal-rgb))}
.sc-dot:hover{color:var(--c-ink)}
.sc-btns{display:flex;gap:8px}
.sc-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgb(var(--deep-rgb) / .35);background:transparent;color:var(--c-ink);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}
.sc-b:hover{border-color:var(--c-ink)}
.sc-pause{padding:0 16px}
.sc-pause .i-play,.sc.is-paused .sc-pause .i-pause{display:none}
.sc.is-paused .sc-pause .i-play{display:block}
.sc-dot:focus-visible,.sc-b:focus-visible,.sc-open:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:3px}
.lb-name select{font:400 16px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--c-ink);background:var(--c-paper);border:1px solid rgb(var(--deep-rgb) / .3);border-radius:0;padding:12px 14px;min-height:48px}
.lb-name select:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
.lb-base-note{margin:-18px 0 26px;font-size:13.5px;color:var(--c-ink-2);min-height:0}
.lb-base-note:empty{display:none}
@media (max-width:1100px){.sc-slides{grid-template-columns:repeat(2,minmax(0,1fr))}.sc.is-rot .sc-slide{gap:40px}}
@media (max-width:860px){.sc.is-rot .sc-slide{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}}
@media (max-width:640px){.sc-slides{grid-template-columns:minmax(0,1fr)}.sc-ctrl{justify-content:flex-start}.sc-dots{gap:0}.sc-dot{min-width:40px}}
@media (prefers-reduced-motion:reduce){.sc.is-rot .sc-slide,.sc.is-rot .sc-slide.is-active{transition:none}}

/* "Reach out to Ryan" lines (showcase + builder) */
.more-line{margin:0;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.more-line a{color:var(--c-ink);font-weight:500;white-space:nowrap;text-decoration-color:rgb(var(--metal-rgb));text-decoration-thickness:1px;text-underline-offset:5px;padding:6px 0}
.more-line a:hover{text-decoration-thickness:2px}
.sc-more{margin-top:36px;padding-left:18px;border-left:1px solid rgb(var(--metal-rgb));max-width:760px}
.lb-more{margin-top:14px;padding-top:14px;border-top:1px solid var(--c-rule);font-size:14px}

/* ---------- Style builder: "Add your logo" (read on the visitor's device; never uploaded) ---------- */
.lb-logo{margin:0 0 30px}
.lb-logo-h{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 12px}
.lb-logo-h .lb-opt{letter-spacing:.08em;text-transform:none;font-weight:400}
.lb-drop{position:relative;display:grid;gap:4px;padding:16px 16px;border:1px dashed rgb(var(--deep-rgb) / .45);background:var(--c-paper);cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.lb-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.lb-drop:hover,.lb-drop.is-over{border-color:rgb(var(--deep-rgb) / .85);border-style:solid}
.lb-drop.is-over{background:rgb(var(--deep-rgb) / .05)}
.lb-drop:focus-within{outline:2px solid rgb(var(--accent-rgb));outline-offset:3px}
.lb-drop-t{font-size:15px;color:var(--c-ink)}.lb-drop-t b{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(var(--metal-rgb))}
.lb-drop-s{font-size:13px;color:var(--c-ink-2)}
.lb-logo-note{font-size:13px;line-height:1.5;color:var(--c-ink-2);margin:10px 0 0}
.lb-logo-msg{font-size:13.5px;line-height:1.5;color:var(--c-ink);margin:8px 0 0}
.lb-logo-msg:empty{display:none}
.lb-logo-msg.is-error{color:#8A2A1F;font-weight:600}
.lb-logo-out{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;margin-top:14px}
.lb-logo-out[hidden]{display:none}
.lb-thumb{display:grid;place-items:center;width:84px;height:64px;border:1px solid rgb(var(--deep-rgb) / .2);padding:6px;background:#fff}
.lb-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-swatches{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12.5px;color:var(--c-ink)}
.lb-swatches li{display:flex;align-items:center;gap:7px}
.lb-swatches i{width:14px;height:14px;flex:none;border:1px solid rgb(var(--deep-rgb) / .3)}
.lb-swatches code{font:inherit;font-variant-numeric:tabular-nums;color:var(--c-ink-2)}
.lb-logo-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.lb-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--c-ink);min-height:44px;cursor:pointer}
.lb-check input{width:18px;height:18px;margin:0;accent-color:rgb(var(--deep2-rgb))}
.lb-check input:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
.lb-remove{font:inherit;font-size:14px;color:var(--c-ink);background:none;border:0;padding:0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lb-remove:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
.chips label[hidden]{display:none}
.lb>*{min-width:0}
.ms-brand{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.ms-logo{height:34px;width:auto;max-width:150px;object-fit:contain;flex:none}
.ms-logo[hidden]{display:none}
.ms-logo.on-plate{padding:4px 8px;border-radius:4px}
.ms.lay-classic .ms-brand{flex-direction:column;gap:8px;width:100%}
.ms.lay-classic .ms-logo{height:44px}
@media (prefers-reduced-motion:reduce){.lb-drop{transition:none}}