/* ===== photo marquee ===== */
.marquee{padding:8px 0 28px;overflow:hidden;display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 48s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:56s}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track figure{margin:0;position:relative;width:220px;height:140px;border-radius:14px;overflow:hidden;flex:none;border:1px solid #ffffff14}
.mq-track img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mq-track figure:hover img{transform:scale(1.08)}
.mq-track span{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--mono);letter-spacing:.06em;background:#0b0e24cc;backdrop-filter:blur(6px);padding:7px 10px;border-radius:999px;color:var(--mint)}
@keyframes mq{to{transform:translateX(calc(-50% - 7px))}}
@media (max-width:600px){.mq-track figure{width:160px;height:104px}}

/* ===== website ideas studio ===== */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"tabs tabs" "stage panel" "cap cap";gap:18px 26px;align-items:start}
.st-tabs{grid-area:tabs;display:flex;gap:10px;flex-wrap:wrap}
.st-tabs button{display:flex;align-items:center;gap:8px;font:600 14px Sora,sans-serif;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.st-tabs button span{font-size:18px}
.st-tabs button:hover{color:var(--text);border-color:var(--teal)}
.st-tabs button[aria-selected=true]{color:#04342c;background:linear-gradient(90deg,var(--mint),var(--teal));border-color:transparent;box-shadow:0 8px 24px #2ee6c533}
.st-stage{grid-area:stage;position:relative;padding-bottom:20px;min-width:0}
.shot-desk{margin:0 70px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 30px 80px #0008,0 0 0 1px #ffffff08}
.shot-desk .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1b2048}
.shot-desk .bar i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.shot-desk .bar i+i{background:#ffd166}.shot-desk .bar i+i+i{background:#06d6a0}
.shot-desk .url{margin-left:10px;font:12px var(--mono);color:var(--muted);background:#0b0e24;padding:4px 12px;border-radius:999px;flex:1;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-desk .url em{color:var(--mint);font-style:normal}
.shot-desk .vp{height:min(520px,62vw);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;background:#fff}
.shot-mob{position:absolute;right:0;bottom:0;width:190px;margin:0;padding:10px 8px;border-radius:30px;background:#05071a;border:1px solid #3a4180;box-shadow:0 30px 70px #000a;z-index:3}
.shot-mob .notch{position:absolute;top:13px;left:50%;width:56px;height:14px;margin-left:-28px;border-radius:9px;background:#05071a;z-index:2}
.shot-mob .vp{height:360px;border-radius:22px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:#fff}
.shot-mob .vp::-webkit-scrollbar{display:none}
.vp:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.st-rail{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:16px 220px 0 0;padding-top:14px}
.st-rail::before,.st-fill{content:"";position:absolute;left:0;top:0;height:3px;border-radius:3px;background:var(--line);width:100%}
.st-fill{background:linear-gradient(90deg,var(--mint),var(--teal));width:0}
.st-rail button{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;cursor:pointer}
.st-rail button.on,.st-rail button:hover{color:var(--mint);border-color:var(--teal)}
.st-panel{grid-area:panel;display:grid;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.st-panel b{display:block;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.st-swatches{display:flex;gap:10px}
.st-swatches button{width:38px;height:38px;border-radius:50%;background:var(--sw);border:3px solid var(--panel);box-shadow:0 0 0 1px #ffffff22;cursor:pointer;transition:transform .2s}
.st-swatches button:hover{transform:scale(1.1)}
.st-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--mint)}
.st-fonts{display:flex;gap:8px}
.st-fonts button{flex:1;padding:9px 6px;border-radius:10px;border:1px solid var(--line);background:#0b0e24;color:var(--text);cursor:pointer;font:600 14px Sora,sans-serif}
.st-fonts button[aria-pressed=true]{border-color:var(--teal);color:var(--mint);background:#2ee6c514}
.st-fonts .ff-classic{font-family:'Playfair Display',Georgia,serif}.st-fonts .ff-bold{font-family:'Archivo Black',Impact,sans-serif;font-weight:400}
.st-parts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-parts label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#0b0e24}
.st-parts input{accent-color:var(--teal);width:16px;height:16px;margin:0}
.st-hint{margin:0;font-size:13px;color:var(--muted)}
.st-cap{grid-area:cap;margin:0!important}
@media (max-width:900px){
 .studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "stage" "panel" "cap"}
 .st-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.st-tabs button{flex:none}
 .shot-desk{margin-right:46px}.shot-mob{width:130px;padding:7px 5px;border-radius:22px}.shot-mob .vp{height:250px;border-radius:16px}.shot-mob .notch{top:9px;width:40px;height:10px;margin-left:-20px}
 .st-rail{margin-right:150px}
 .st-panel{grid-template-columns:1fr 1fr}.st-hint{grid-column:1/-1}
}
@media (max-width:560px){
 .shot-desk{margin-right:0}.shot-desk .vp{height:300px}
 .shot-mob{position:relative;margin:-170px 4px 0 auto;width:116px}.shot-mob .vp{height:210px}
 .st-rail{margin-right:0}.st-panel{padding:18px;grid-template-columns:1fr}
}

/* the example site, laid out at real width (1000px desktop, 375px phone) and zoomed to fit its frame */
.ms{--c:#B8692E;font:16px/1.55 Sora,system-ui,sans-serif;color:#1d2033;background:#fff;text-align:left}
.ms.desk{width:1000px}.ms.mob{width:375px}
.ms img{max-width:none}
.ms h1,.ms h2{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0;color:inherit}
.ms.f-classic h1,.ms.f-classic h2,.ms.f-classic .ms-logo{font-family:'Playfair Display',Georgia,serif;letter-spacing:0}
.ms.f-bold h1,.ms.f-bold h2,.ms.f-bold .ms-logo{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.ms-nav{position:relative;z-index:2;display:flex;align-items:center;gap:26px;padding:16px 40px;background:#fffffff2;box-shadow:0 1px 0 #0000000f}
.ms-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;flex:none}
.ms-logo i{width:26px;height:26px;border-radius:8px;background:var(--c)}
.ms-nav nav{display:flex;gap:24px;margin-left:auto;font-size:15px;color:#555a70}
.ms-burger{display:none;margin-left:auto;width:26px;flex-direction:column;gap:5px}.ms-burger b{height:3px;border-radius:2px;background:#1d2033;margin:0}
.ms-btn{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--c);color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.ms-btn.sm{padding:9px 16px;font-size:14px}
.ms-btn.ghost{background:#ffffff22;border:2px solid #fff;padding:11px 20px}
.ms-hero{min-height:520px;display:flex;align-items:center;padding:60px;background:linear-gradient(90deg,#000b,#0004 70%,#0000),var(--hero) center/cover;color:#fff}
.ms.mob .ms-hero{background:linear-gradient(0deg,#000d,#0005 60%,#0002),var(--hero) center/cover}
.ms-hero>div{max-width:560px}
.ms-kind{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;opacity:.9}
.ms-hero h1{font-size:56px;margin-bottom:18px}
.ms-hero p{font-size:19px;margin:0 0 28px;opacity:.92}
.ms-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ms-strip{display:flex;justify-content:center;gap:44px;padding:18px;background:var(--c);color:#fff;font-weight:600;font-size:15px}
.ms-stars{font-style:normal;color:#ffb400;letter-spacing:2px}
.ms-strip .ms-stars{color:#fff}
.ms section{padding:70px 60px;margin:0}
.ms-kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.ms h2{font-size:38px;margin-bottom:16px}
.ms-about{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.ms-about img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.ms-about p{color:#555a70;font-size:17px}
.ms-link{color:var(--c);font-weight:700}
.ms-items,.ms-rev{background:#f6f5f2;text-align:center}
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;text-align:left}
.ms-card{background:#fff;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px #0000000d;border-top:4px solid var(--c)}
.ms-card b{display:block;font-size:19px;color:#1d2033;font-family:inherit;letter-spacing:0;text-transform:none;margin:0}
.ms-ic{font-size:32px}.ms-card small{color:#666b80;font-size:14px}.ms-card em{margin-top:8px;font-style:normal;font-weight:800;color:var(--c);font-size:18px}
.ms-gal{text-align:center}
.ms-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px;gap:12px;margin-top:28px}
.ms-photos img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.ms-photos img:first-child{grid-row:span 2}.ms-photos.n4 img:last-child{grid-column:span 2}
.ms-photos.n3{grid-template-columns:2fr 1fr}
.ms-rev blockquote{margin:0;background:#fff;border-radius:18px;padding:24px;box-shadow:0 10px 30px #0000000d}
.ms-rev blockquote p{margin:10px 0;font-size:16px;color:#1d2033}.ms-rev small{color:#888}
.ms-book{background:var(--c);color:#fff;text-align:center}
.ms-book>div{max-width:520px;margin:0 auto}
.ms-book p{margin:0}
.ms-book .ms-btn{background:#fff;color:var(--c);margin-top:22px}
.ms-pills{display:flex;justify-content:center;gap:10px;margin-top:16px}
.ms-pills span{padding:10px 18px;border-radius:12px;border:2px solid #ffffff66;font-weight:600}
.ms-pills span.on{background:#fff;color:var(--c);border-color:#fff}
.ms-visit{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.ms-map{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/3}
.ms-map svg{width:100%;height:100%;display:block}
.ms-pin{position:absolute;left:50%;top:44%;width:30px;height:30px;margin:-30px 0 0 -15px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);box-shadow:0 6px 14px #0004}
.ms-pin::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.ms-visit p{color:#555a70}
.ms-foot{display:flex;justify-content:space-between;padding:26px 60px;background:#15172a;color:#cfd2e6;font-size:14px}
.ms-foot b{color:#fff}
.ms.no-gallery [data-opt=gallery],.ms.no-reviews [data-opt=reviews],.ms.no-booking [data-opt=booking],.ms.no-map [data-opt=map]{display:none}
/* phone layout of the example site */
.ms.mob .ms-nav{padding:14px 18px}.ms.mob .ms-nav nav,.ms.mob .ms-nav .ms-btn{display:none}.ms.mob .ms-burger{display:flex}
.ms.mob .ms-hero{min-height:600px;padding:36px 22px;align-items:flex-end}
.ms.mob .ms-hero h1{font-size:40px}.ms.mob .ms-hero p{font-size:16px}
.ms.mob .ms-strip{flex-direction:column;gap:6px;align-items:center;font-size:14px}
.ms.mob section{padding:44px 22px}
.ms.mob h2{font-size:30px}
.ms.mob .ms-about,.ms.mob .ms-visit,.ms.mob .ms-grid{grid-template-columns:1fr;gap:18px}
.ms.mob .ms-photos{grid-template-columns:1fr 1fr;grid-template-rows:170px 120px 120px}
.ms.mob .ms-photos img:first-child{grid-row:auto;grid-column:span 2}.ms.mob .ms-photos.n4 img:last-child{grid-column:span 2}
.ms.mob .ms-photos.n3{grid-template-rows:170px 130px}
.ms.mob .ms-foot{flex-direction:column;gap:6px;padding:22px}

/* ===== Google listing comparison ===== */
.compare{--x:50%;position:relative;max-width:620px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px #0007;user-select:none;-webkit-user-select:none}
.gl{background:#fff;color:#202124;padding:20px 22px 22px;font-family:Arial,system-ui,sans-serif}
.gl-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.gl-tag{display:inline-block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#eceff3;color:#5f6368;margin-bottom:14px}
.gl-tag.on{background:#2ee6c533;color:#04695a}
.gl-after .gl-tag{float:right}
.gl-map{height:150px;border-radius:12px;margin-bottom:14px;background:repeating-linear-gradient(45deg,#e8eaed 0 18px,#e1e3e6 18px 36px)}
.gl-photos{clear:both;display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;height:150px;margin-bottom:14px}
.gl-photos img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.gl-name{display:block;font-size:22px;font-weight:400;margin-bottom:4px}
.gl-meta{margin:0 0 8px;color:#70757a;font-size:14px}.gl-meta i{font-style:normal;color:#fbbc04}
.gl-miss{margin:0 0 14px;color:#c5221f;font-size:14px}.gl-ok{margin:0 0 14px;color:#137333;font-size:14px}
.gl-acts{display:flex;gap:8px;flex-wrap:wrap}
.gl-acts span{padding:8px 16px;border-radius:999px;border:1px solid #dadce0;color:#1a73e8;font-size:14px;font-weight:700}
.gl-acts .pri{background:#1a73e8;color:#fff;border-color:#1a73e8}
.gl-handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--teal);pointer-events:none;box-shadow:0 0 18px var(--teal)}
.gl-handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--teal);color:#04342c;display:grid;place-items:center;font-style:normal;font-weight:800;box-shadow:0 6px 20px #0006}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.why .note,.ideas .note{text-align:center}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee .mq-row{overflow-x:auto}}

/* main nav: keep links on one line, hide them when space runs out */
.nav nav a{white-space:nowrap}
@media (max-width:980px){.nav nav{display:none}}