/* Design-direction mock sites (assets/js/sites.js). Sized in em off the tile width,
   so every mock scales identically from phone to desktop. */
.tile{container-type:inline-size}
.xs{position:relative;aspect-ratio:16/10.5;overflow:hidden;font-size:2cqw;line-height:1.3;text-align:left;font-family:var(--body)}
.xs-in{position:absolute;inset:0 0 auto 0;transition:transform 5.5s cubic-bezier(.45,0,.2,1);will-change:transform}
.tile:hover .xs-in{transform:translateY(calc(-100% + 65.625cqw))}
/* touch: scroll down through the page, pause, glide back to the top */
.tile.peek .xs-in{animation:xsPeek 11s cubic-bezier(.45,0,.2,1) both}
@keyframes xsPeek{0%,8%{transform:none}48%,60%{transform:translateY(calc(-100% + 65.625cqw))}100%{transform:none}}
.xs h4{font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:.3em 0 .35em;font-size:2.7em}
.xs p{font-size:.9em;opacity:.8;max-width:24em;margin:0 0 .8em}
.xs em{font-style:normal}
.xs svg{display:block}
.xn{display:flex;align-items:center;justify-content:space-between;padding:1em 2.2em;gap:1em}
.xl{font-weight:700;font-size:1.2em;letter-spacing:-.02em;display:flex;align-items:center;gap:.45em;white-space:nowrap}
.xl i{font-style:normal}
.xm{width:1.1em;height:1.1em;border-radius:.3em;display:inline-block}
.xk{display:flex;align-items:center;gap:1.2em;font-size:.8em;white-space:nowrap}
.xk span{opacity:.8}
.xb{display:inline-flex;align-items:center;justify-content:center;padding:.55em 1.05em;border-radius:.45em;font-weight:700;font-size:.85em;white-space:nowrap}
.xb.sm{font-size:.72em;padding:.45em .8em}

/* ---- photos ---- */
.xph{position:relative;background-size:cover;background-position:center;border-radius:.7em;overflow:hidden}
.xph.xhero{border-radius:0;height:32.8em;color:#fff;display:flex;flex-direction:column}
.xph.xhero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 30%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.75));pointer-events:none}
.xph.xhero>*{position:relative}
.hero-copy{margin-top:auto;padding:0 2.2em 2.2em;max-width:60%}
.hero-copy h4{font-size:3em;text-shadow:0 .1em .6em rgba(0,0,0,.35)}
.x-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8em;padding:1.4em 2.2em 0}
.x-pair .xph{height:12em}
.x-strip{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;padding:1.4em 2.2em 0;align-items:center}
.x-strip .xph{height:13em}.x-strip>div{display:grid;gap:.8em;justify-items:start}
.x-revrow{display:flex;align-items:center;gap:1em;padding:1.2em 2.2em 0;flex-wrap:wrap}

/* ---- shared local-business blocks ---- */
.xu{display:flex;justify-content:center;gap:2.2em;padding:.45em 1em;font-size:.68em;background:#0D0D0D;color:rgba(255,255,255,.88);white-space:nowrap}
.xo{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:#3FD07F;opacity:1!important}
.xo i{width:.6em;height:.6em;border-radius:50%;background:#22B35E;box-shadow:0 0 0 .25em rgba(34,179,94,.25)}
.xg{display:inline-flex;align-items:center;gap:.6em;background:#fff;color:#222;border-radius:.7em;padding:.5em .8em;box-shadow:0 .4em 1.2em -.4em rgba(0,0,0,.3);font-size:.85em}
.xg-g{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;font-family:Arial,sans-serif;font-weight:700;color:#fff;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.xg-r{font-weight:700;display:block;line-height:1.1}.xg-r i{font-style:normal;color:#F5B301;letter-spacing:.04em}
.xg small{font-size:.8em;opacity:.6}
.xg-av{display:flex;margin-left:.3em}
.xg-av i{width:2.5em;height:2.5em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.6em;font-weight:700;color:#fff;background:hsl(var(--h) 45% 48%);border:2px solid #fff;margin-left:-.45em}
.xr{display:grid;gap:.2em;font-size:.9em}.xr-s{color:#F5B301;letter-spacing:.05em}.xr b{font-weight:500;line-height:1.3}.xr>span:last-child{font-size:.75em;opacity:.6}
.xbd{display:flex;flex-wrap:wrap;gap:.5em;padding:1.4em 2.2em 0}
.xbd span{font-size:.72em;font-weight:700;padding:.45em .8em;border-radius:2em;border:1px solid currentColor;opacity:.75}
.xv{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2em;padding:1.6em 2.2em 2.2em;align-items:start}
.xv-map{position:relative;border-radius:.9em;overflow:hidden;height:12em;box-shadow:0 .6em 1.6em -.8em rgba(0,0,0,.35)}
.xmap{width:100%;height:100%}
.xv-card{position:absolute;left:.7em;bottom:.7em;background:#fff;color:#222;border-radius:.6em;padding:.6em .8em;display:grid;gap:.15em;font-size:.82em;box-shadow:0 .4em 1em -.3em rgba(0,0,0,.3)}
.xv-card span{opacity:.65;font-size:.9em}.xv-card .xb{margin-top:.3em;justify-self:start}
.xh{display:grid;gap:.25em;font-size:.82em}
.xh>b{font-size:1.15em;margin-bottom:.2em}
.xh div{display:flex;justify-content:space-between;padding:.35em .5em;border-radius:.35em}
.xh div.on{font-weight:700;background:rgba(127,127,127,.14)}
.xv-note{grid-column:1/-1;font-size:.78em!important;margin:0!important}

/* 1 · restaurant — ember + parchment */
.xs-food{background:#1E130E;color:#F8E9D6}
.xs-food .xn{display:grid;grid-template-columns:1fr auto 1fr}.xs-food .xk:last-child{justify-content:flex-end}
.xs-food .xl{font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:1.6em}
.xs-food .xb{background:#F2A541;color:#1E130E}
.xs-food .hero-copy h4{font-family:Georgia,serif;font-weight:400}.xs-food .hero-copy h4 em{color:#F2A541;font-style:italic}
.f-res{position:absolute!important;right:2.2em;bottom:2.2em;width:32%;background:#FFF8EE;color:#1E130E;border-radius:.7em;padding:.9em;display:grid;gap:.45em;box-shadow:0 1em 2em -.8em rgba(0,0,0,.6)}
.f-sel,.f-times{display:flex;gap:.3em}.f-sel i,.f-times i{flex:1;text-align:center;font-style:normal;font-size:.66em;border:1px solid #E6D9C6;border-radius:.4em;padding:.4em 0}
.f-times i.on{background:#1E130E;color:#F2A541;font-weight:700;border-color:#1E130E}
.f-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.4em;padding:1.6em 2.2em 0;align-items:stretch}
.f-row .xph.tall{min-height:15em}
.f-menu{padding:1.1em 1.4em;border:1px solid rgba(242,165,65,.35);border-radius:.4em;display:grid;gap:.45em;font-family:Georgia,serif;align-content:start}
.f-menu .xb{justify-self:start;margin-top:.4em;font-family:var(--body)}
.f-t{font-style:italic;font-weight:400;font-size:1.2em;color:#F2A541}
.f-menu div{display:flex;align-items:baseline;gap:.5em;font-size:.86em}.f-menu div i{flex:1;border-bottom:1px dotted rgba(248,233,214,.35)}
.xs-food .xh div.on{background:rgba(242,165,65,.18)}

/* 2 · auto repair — workshop blue */
.xs-auto{background:#F2F4F7;color:#14243A}
.xs-auto .xm,.xs-auto .xb{background:#2F6FD0;color:#fff}
.xs-auto .hero-copy h4 em{color:#9CC2FF}
.a-book{margin:-3em 2.2em 0 auto;position:relative;width:58%;background:#fff;border-radius:.8em;padding:1em;display:grid;gap:.55em;box-shadow:0 1em 2.4em -1em rgba(20,36,58,.45)}
.a-row{display:grid;grid-template-columns:1fr 1fr;gap:.4em}.a-row i,.a-chips i{font-style:normal;font-size:.7em;border:1px solid #DDE3EA;border-radius:.4em;padding:.45em .6em}
.a-chips{display:flex;flex-wrap:wrap;gap:.35em}.a-chips i.on{background:#2F6FD0;border-color:#2F6FD0;color:#fff;font-weight:700}
.a-prices{display:grid;grid-template-columns:1fr 1fr;gap:.5em 2em;padding:1.4em 2.2em 0}
.a-prices div{display:flex;justify-content:space-between;font-size:.85em;padding:.5em 0;border-bottom:1px dashed #C8D1DC}.a-prices b{color:#2F6FD0}

/* 3 · hair salon — blush editorial */
.xs-salon{background:#FFF1EE;color:#3A1F2B}
.xs-salon .xl{font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:1.6em}
.xs-salon .xb{background:#3A1F2B;color:#FFF1EE;border-radius:2em}
.s-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.6em;padding:.6em 2.2em 0;height:27em}
.s-copy{align-self:center}.s-copy h4{font-family:Georgia,serif;font-weight:400;font-size:3.1em}.s-copy h4 em{font-style:italic;color:#D9567A}
.s-copy small{display:block;font-size:.72em;opacity:.6;margin-top:.7em}
.s-main{border-radius:12em 12em 1em 1em}
.s-price{margin:1.4em 2.2em 0;padding:1.1em 0;border-top:1px solid rgba(58,31,43,.15);border-bottom:1px solid rgba(58,31,43,.15);display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.s-price b{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:1.25em;margin-right:.5em}
.s-price i{font-style:normal;font-size:.78em;padding:.5em .9em;border-radius:2em;background:#fff}.s-price i span{color:#D9567A;font-weight:700;margin-left:.3em}
.s-team{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:1.2em 2.2em 0}
.s-team div{display:grid;justify-items:center;gap:.15em;background:#fff;border-radius:1em;padding:.8em;font-size:.85em}
.s-team i{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;background:hsl(var(--h) 45% 60%)}
.s-team span{font-size:.78em;opacity:.6}

/* 4 · roofing — slate + safety orange */
.xs-roof{background:#0F141B;color:#EEF1F5}
.xs-roof .xm,.xs-roof .xb{background:#FF6A2B;color:#120A05}
.xs-roof .xph.xhero::before{background:linear-gradient(90deg,rgba(10,14,20,.88),rgba(10,14,20,.55) 50%,rgba(10,14,20,.15)),linear-gradient(180deg,rgba(0,0,0,.4),transparent 25%)}
.xs-roof .hero-copy{max-width:52%}
.r-kick{font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:#FF8A55;font-weight:700}
.xs-roof .hero-copy h4{font-size:2.6em}.xs-roof .hero-copy h4 em{color:#FF8A55;font-size:.62em;letter-spacing:-.02em}
.r-form{position:absolute!important;right:2.2em;bottom:2.2em;width:34%;background:#fff;color:#141414;border-radius:.8em;padding:1em;display:grid;gap:.42em;box-shadow:0 1.5em 3em -1em rgba(0,0,0,.6)}
.r-form b{font-size:1em}
.r-form>i{display:block;font-style:normal;font-size:.7em;color:#888;border:1px solid #E2E2E2;border-radius:.4em;padding:.5em .7em}
.r-sel{display:flex;gap:.35em}.r-sel i{flex:1;text-align:center;font-style:normal;font-size:.66em;border:1px solid #E2E2E2;border-radius:.4em;padding:.4em 0}
.r-sel i.on{border-color:#FF6A2B;color:#FF6A2B;font-weight:700}
.r-work{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4em;padding:1.6em 2.2em 0}
.r-done{min-height:15em;display:flex;align-items:flex-end}
.r-done span{position:relative;margin:.7em;background:rgba(0,0,0,.7);padding:.4em .7em;border-radius:.4em;font-size:.72em}
.r-steps{display:grid;gap:.6em;align-content:center}.r-steps>b{font-size:1.15em}
.r-steps div{display:flex;align-items:center;gap:.7em;font-size:.85em}
.r-steps i{font-style:normal;width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:#FF6A2B;color:#120A05;font-weight:700;flex:none}
.r-cta{margin:1.6em 2.2em 0;padding:1em 1.3em;border-radius:.7em;background:#FF6A2B;color:#120A05;display:flex;align-items:center;gap:.5em;font-size:.88em}
.r-cta .xb{margin-left:auto;background:#120A05;color:#fff}
.xs-roof .xh div.on{background:rgba(255,106,43,.16)}