/* ============================================================
   WEB GALLERY — "Sites we build". Browser/phone frames + 5 client-site
   mockups (each its own palette & type), device toggle, hosting strip.
   ============================================================ */
.webgal{background:#E9EFF6;}

/* controls */
.wg-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.wg-pills{display:flex;flex-wrap:wrap;gap:8px;}
.wg-pill{background:var(--neutral-25);border:1.5px solid var(--border);border-radius:99px;padding:9px 16px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--neutral-700);cursor:pointer;transition:background .18s,border-color .18s,color .18s;}
.wg-pill:hover{border-color:var(--blue-300);}
.wg-pill.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.wg-device{display:flex;background:var(--neutral-25);border:1.5px solid var(--border);border-radius:10px;padding:3px;gap:2px;flex:none;}
.wg-device button{display:flex;align-items:center;gap:6px;background:none;border:none;border-radius:7px;padding:8px 14px;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--neutral-600);cursor:pointer;transition:background .18s,color .18s;}
.wg-device button.sel{background:var(--surface);color:var(--accent-press);box-shadow:var(--shadow-sm);}

/* stage + frames */
.wg-stage{display:flex;justify-content:center;min-height:540px;}
.wg-browser{width:100%;max-width:960px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid var(--border);background:#fff;animation:wg-in .4s var(--ease-out);}
.wg-chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--neutral-100);border-bottom:1px solid var(--border);}
.wg-dot{width:11px;height:11px;border-radius:50%;background:#CED4DA;}
.wg-dot:nth-child(1){background:#F0A8A0;}.wg-dot:nth-child(2){background:#F2CE84;}.wg-dot:nth-child(3){background:#9FD3A8;}
.wg-url{margin-left:14px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:5px 14px;font-family:var(--font-mono);font-size:12px;color:var(--neutral-600);}
.wg-url svg{color:var(--neutral-400);}
.wg-viewport{max-height:580px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}
.wg-viewport::-webkit-scrollbar{display:none;}
.wg-phone{width:312px;border-radius:40px;background:linear-gradient(160deg,#1c3e58,#0a1c2c);padding:11px;box-shadow:var(--shadow-xl);position:relative;animation:wg-in .4s var(--ease-out);}
.wg-phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#0a1c2c;border-radius:99px;z-index:3;}
.wg-phone-screen{border-radius:30px;overflow:hidden;max-height:600px;overflow-y:auto;background:#fff;scrollbar-width:none;-ms-overflow-style:none;}
.wg-phone-screen::-webkit-scrollbar{display:none;}
@keyframes wg-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* non-interactive image placeholders */
.wg-ph{position:relative;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--s-card);border:1px dashed var(--s-line);}
.wg-img{display:block;width:100%;object-fit:cover;}
.wg-ph-art{position:absolute;inset:0;width:100%;height:100%;color:var(--s-accent);}
.wg-ph-tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-family:'Helvetica Neue',system-ui,sans-serif;font-size:11px;font-weight:600;color:var(--s-muted);background:rgba(255,255,255,.78);border:1px solid var(--s-line);padding:5px 11px;border-radius:99px;}

/* mobile scroll hint */
.wg-hint{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) scale(.96);z-index:6;white-space:nowrap;display:flex;align-items:center;gap:8px;background:rgba(11,34,53,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:9px 15px;font-family:var(--font-display);font-weight:600;font-size:12.5px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);}
.wg-hint.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.wg-hint-ar{font-size:15px;animation:wg-bob 1.2s ease-in-out infinite;}
@keyframes wg-bob{0%,100%{transform:translateY(-2px);}50%{transform:translateY(3px);}}

/* ---- shared site structure (recolored per industry via --s-* vars) ---- */
.site{background:var(--s-bg);color:var(--s-ink);font-family:'Helvetica Neue',system-ui,sans-serif;}
.st-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 24px;border-bottom:1px solid var(--s-line);}
.st-logo{font-family:var(--s-display);font-weight:800;font-size:17px;color:var(--s-ink);letter-spacing:.01em;}
.st-logo em{font-style:italic;color:var(--s-accent);font-weight:700;}
.st-links{display:flex;gap:20px;}
.st-links a{font-size:12.5px;color:var(--s-muted);cursor:pointer;}
.st-btn{background:var(--s-accent);color:#fff;font-size:12px;font-weight:700;padding:9px 15px;border-radius:8px;white-space:nowrap;cursor:pointer;}
.st-btn.ghost{background:transparent;color:var(--s-accent);border:1px solid var(--s-accent);}
.st-btn.small{padding:7px 13px;font-size:11.5px;flex:none;}
.st-ey{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--s-accent);font-weight:700;margin-bottom:9px;}
.site .st h1,.st h1{font-family:var(--s-display);font-size:30px;line-height:1.08;letter-spacing:-.02em;color:var(--s-ink);margin:0 0 11px;font-weight:800;}
.st p{font-size:13.5px;line-height:1.55;color:var(--s-muted);margin:0 0 16px;max-width:42ch;}
.st-cta{display:flex;gap:10px;flex-wrap:wrap;}
.st-hero{padding:28px 24px;}
.st-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;}
.st-hero-center{text-align:center;}
.st-hero-center .st-ey,.st-hero-center h1{display:block;}
.st-hero-center .st-cta{justify-content:center;}
.st-hero-center p{margin-left:auto;margin-right:auto;}
.st-hero-wide{margin-top:20px;}
.st-hero-overlay{position:relative;padding:22px;}
.st-hero-overlay::after{content:"";position:absolute;left:22px;right:22px;top:22px;bottom:22px;border-radius:14px;background:linear-gradient(transparent 35%,rgba(0,0,0,.6));pointer-events:none;}
.st-hero-on{position:absolute;left:40px;right:40px;bottom:38px;z-index:2;}
.st-hero-on h1{color:#fff;margin-bottom:12px;}
.st-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px 24px;}
.st-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 24px 20px;}
.st-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px 20px;}
.st-row4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 24px 20px;}
.st-card{background:var(--s-card);border:1px solid var(--s-line);border-radius:12px;overflow:hidden;}
.st-card-b{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;}
.st-card-b b{font-family:var(--s-display);font-size:13px;color:var(--s-ink);}
.st-card-b span{font-size:13px;color:var(--s-accent);font-weight:700;}
.st-prod{display:flex;flex-direction:column;}
.st-prod b{font-family:var(--s-display);font-size:12.5px;color:var(--s-ink);margin-top:7px;}
.st-prod span{font-size:12px;color:var(--s-accent);font-weight:700;margin-top:2px;}
.st-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:15px;background:var(--s-card);font-size:12px;color:var(--s-muted);}
.st-banner{text-align:center;padding:13px;background:var(--s-accent);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.01em;}
.st-logos{display:flex;align-items:center;gap:13px;padding:2px 24px 20px;color:var(--s-muted);font-size:11px;}
.st-logos i{width:54px;height:18px;background:var(--s-line);border-radius:4px;display:inline-block;}
.st-logos em{font-style:normal;font-family:var(--s-display);font-size:12.5px;color:var(--s-ink);opacity:.72;white-space:nowrap;}
.st-svc{background:var(--s-card);border:1px solid var(--s-line);border-radius:12px;padding:14px;}
.st-svc-bar{display:block;width:30px;height:3px;border-radius:2px;background:var(--s-accent);margin-bottom:11px;}
.st-svc b{display:block;font-family:var(--s-display);font-size:14px;color:var(--s-ink);margin-bottom:5px;}
.st-svc span{font-size:12px;color:var(--s-muted);}
.st-quote{padding:6px 24px 24px;font-family:var(--s-display);font-size:16px;font-style:italic;line-height:1.4;color:var(--s-ink);}
.st-quote em{display:block;font-style:normal;font-size:12px;color:var(--s-muted);margin-top:8px;}
.st-pill{display:flex;align-items:center;gap:8px;background:var(--s-card);border:1px solid var(--s-line);border-radius:99px;padding:9px 13px;font-size:12.5px;color:var(--s-ink);}
.st-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--s-accent);}
.st-info{display:flex;align-items:center;gap:14px;padding:16px 24px 26px;}
.st-info b{font-family:var(--s-display);font-size:14px;color:var(--s-ink);flex:none;}
.st-info span{font-size:12.5px;color:var(--s-muted);flex:1;}
.st-reviews{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;padding:16px;font-size:12.5px;color:var(--s-muted);border-top:1px solid var(--s-line);}
.st-stars{color:var(--s-accent);letter-spacing:2px;}

/* ---- palettes ---- */
.site--restaurants{--s-bg:#FBF7F0;--s-ink:#2A2018;--s-accent:#C0613B;--s-accent2:#3E5C3A;--s-muted:#7A6E60;--s-card:#F2EAdd;--s-card:#F3ECE0;--s-line:#E6DCCC;--s-display:Georgia,'Times New Roman',serif;}
.site--retail{--s-bg:#F8F9F7;--s-ink:#23302A;--s-accent:#5B8C6E;--s-accent2:#1F2A24;--s-muted:#6B7770;--s-card:#FFFFFF;--s-line:#E4E8E3;--s-display:'Helvetica Neue',system-ui,sans-serif;}
.site--services{--s-bg:#FFFFFF;--s-ink:#14233A;--s-accent:#B08A3E;--s-accent2:#14233A;--s-muted:#5C6B7E;--s-card:#F5F7FA;--s-line:#E2E8EF;--s-display:Georgia,serif;}
.site--healthcare{--s-bg:#F2FAFB;--s-ink:#123A40;--s-accent:#2C9CA8;--s-accent2:#1B6B73;--s-muted:#5A7B80;--s-card:#FFFFFF;--s-line:#D8ECEE;--s-display:'Trebuchet MS',system-ui,sans-serif;}
.site--ecommerce{--s-bg:#FAF8F5;--s-ink:#1B1611;--s-accent:#C2702B;--s-accent2:#1B1611;--s-muted:#867A6B;--s-card:#FFFFFF;--s-line:#ECE4DA;--s-display:'Arial Black','Helvetica Neue',sans-serif;}
.site--ecommerce .st-logo{letter-spacing:.06em;}

/* ---- mobile reflow ---- */
.site--mobile .st-links{display:none;}
.site--mobile .st-nav{padding:34px 16px 13px;}
.site--mobile .st-hero{padding:18px 16px;}
.site--mobile .st-hero-split{grid-template-columns:1fr;gap:16px;}
.site--mobile .st h1{font-size:21px;}
.site--mobile .st-row3,.site--mobile .st-grid4,.site--mobile .st-grid3,.site--mobile .st-row4{grid-template-columns:1fr 1fr;padding-left:16px;padding-right:16px;}
.site--mobile .st-hero-on{left:24px;right:24px;bottom:26px;}
.site--mobile .st-info{flex-direction:column;align-items:flex-start;gap:8px;}
.site--mobile .st-quote{font-size:14px;}

/* ---- hosting strip ---- */
.wg-hosting{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;}
.wg-host{background:var(--neutral-25);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;}
.wg-host-ico{width:42px;height:42px;border-radius:11px;background:var(--blue-50);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.wg-host b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--navy-900);margin-bottom:5px;}
.wg-host span{font-size:13px;line-height:1.5;color:var(--neutral-600);}

@media (max-width:920px){
  .wg-hosting{grid-template-columns:1fr 1fr;}
  .st-hero-split{grid-template-columns:1fr;gap:18px;}
  .st-grid4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .wg-hosting{grid-template-columns:1fr;}
  .wg-controls{flex-direction:column;align-items:stretch;}
  .wg-device{justify-content:center;}
  .wg-device button{padding:12px 16px;}
  .wg-pill{padding:11px 17px;}
}