/* City pages (/webdesign-<stadt>/), rendered by inc/city-pages.php.
   Everything is scoped to .bcy so the global main.css/real.css rules for
   .section, h1-h3 and p cannot leak in. Palette: white, #F3F5F8, #0A1016,
   accent #3B55E6. No icon tiles, no cards, no gradients (owner rules). */

.bcy{
  --ink:#0A1016; --ink2:#2A3340; --mute:#5C6573; --faint:#8C95A2;
  --line:#E2E6EC; --soft:#F3F5F8; --accent:#3B55E6; --accent2:#2B44CF;
  --head:"Clash Display","Satoshi",system-ui,sans-serif;
  --body:"Satoshi","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,32px);
  color:var(--ink); background:#fff; font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
.bcy *, .bcy *::before, .bcy *::after{ box-sizing:border-box; }
.bcy-wrap{ width:100%; max-width:calc(var(--wrap) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }
.bcy-sec{ padding:clamp(72px,9vw,128px) 0; }
/* Resets weigh one class: they beat the global element rules of main.css,
   and every single-class rule further down wins by source order. */
.bcy :where(h1, h2, h3){ margin:0; font-family:var(--head); font-weight:600; color:inherit; text-wrap:balance; word-spacing:.06em; }
.bcy :where(p, figure, blockquote, dl, dd){ margin:0; padding:0; color:inherit; }
.bcy :where(a){ color:inherit; }
.bcy-h2{ font-size:clamp(34px,4.1vw,58px); line-height:1.04; letter-spacing:-.02em; }

/* Buttons and links */
.bcy-btn{
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 26px;
  border-radius:12px; background:var(--accent); color:#fff !important;
  font:600 16px/1 var(--body); text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
.bcy-btn:hover{ background:var(--accent2); }
.bcy-btn:active{ transform:translateY(1px); }
.bcy-btn svg{ width:18px; height:18px; flex:none; transition:transform .2s ease; }
.bcy-btn:hover svg{ transform:translateX(3px); }
.bcy-btn--light{ background:#fff; color:var(--ink) !important; }
.bcy-btn--light:hover{ background:#E8ECFF; }
.bcy-btn:focus-visible, .bcy-call:focus-visible, .bcy-rating:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.bcy-more{
  display:inline-flex; align-items:center; gap:8px; font:600 15.5px/1.4 var(--body);
  color:var(--ink); text-decoration:none; border-bottom:1.5px solid rgba(59,85,230,.5); padding-bottom:3px;
}
.bcy-more:hover{ color:var(--accent); border-color:var(--accent); }

/* ── Hero ── */
.bcy-hero{ padding:calc(var(--nav-h,76px) + clamp(28px,4vw,56px)) 0 clamp(72px,9vw,120px); }
.bcy-hero-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,5vw,80px); align-items:center; }
.bcy-crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,36px); font:500 13.5px/1.2 var(--body); color:var(--faint); }
.bcy-crumbs a{ color:var(--mute); text-decoration:none; }
.bcy-crumbs a:hover{ color:var(--ink); }
.bcy-h1{ font-size:clamp(48px,6.4vw,96px); line-height:.94; letter-spacing:-.035em; }
.bcy-h1 span{ display:block; color:var(--accent); }
.bcy-lead{ margin-top:clamp(26px,3vw,42px); max-width:31em; font-size:clamp(17px,1.35vw,19.5px); line-height:1.62; color:var(--ink2); }
.bcy-actions{ margin-top:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; }
.bcy-call{ display:inline-flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink); }
.bcy-call small{ font:500 12.5px/1 var(--body); color:var(--mute); }
.bcy-call b{ font:600 21px/1 var(--head); letter-spacing:.01em; }
.bcy-call:hover b{ color:var(--accent); }
.bcy-rating{ margin-top:clamp(28px,3vw,40px); display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font:500 14.5px/1.3 var(--body); color:var(--mute); text-decoration:none; }
.bcy-rating b{ color:var(--ink); font-weight:700; }
.bcy-rating:hover span:last-child{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.bcy-stars{ display:inline-flex; gap:2px; }
.bcy-stars svg{ width:15px; height:15px; fill:#F4B400; display:block; }

/* Laptop: the owner's mockup with the screen cut out; the page sits under it.
   Cut-out geometry as in refs-slider.css. */
.bcy-shot{ position:relative; }
.bcy-laptop{ position:relative; width:100%; aspect-ratio:900 / 656; }
.bcy-laptop::before{
  content:""; position:absolute; z-index:0; left:4%; right:4%; bottom:-4%; height:8%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(10,16,22,.26), rgba(10,16,22,.1) 45%, rgba(10,16,22,0) 72%);
  pointer-events:none;
}
.bcy-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.bcy-screen{
  position:absolute; z-index:1; left:8.85%; top:4.2%; width:82.45%; height:75.67%;
  display:flex; flex-direction:column; overflow:hidden; background:#0d1117;
}
.bcy-view{ position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; background:#fff; scrollbar-width:thin; scrollbar-color:rgba(10,16,22,.35) transparent; }
.bcy-view img{ display:block; width:100%; height:auto; }
.bcy-view:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.bcy-hint{
  position:absolute; z-index:1; left:50%; bottom:7%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:100px;
  background:rgba(10,16,22,.86); color:#fff; font:600 clamp(10px,.85vw,12.5px)/1 'Inter',system-ui,sans-serif;
  white-space:nowrap; pointer-events:none; transition:opacity .4s ease, transform .4s ease;
}
.bcy-hint svg{ width:1.15em; height:1.15em; }
.bcy-screen.is-scrolled .bcy-hint{ opacity:0; transform:translate(-50%,8px); }
.bcy-shot figcaption{ margin-top:clamp(18px,2vw,26px); text-align:center; font:500 13.5px/1.5 var(--body); color:var(--mute); }

/* Chrome's dark toolbar (owner's rule for every browser mockup). */
.bcy-bar{
  flex:none; display:flex; align-items:center; gap:clamp(5px,.9vw,14px);
  height:clamp(20px,6.4%,36px); padding:0 clamp(6px,1.4%,16px);
  background:#35363a; border-bottom:1px solid #1f2023;
  font:400 clamp(8px,.8vw,12.5px)/1 'Inter',system-ui,sans-serif; color:#e8eaed;
}
.bcy-nav{ display:flex; align-items:center; gap:clamp(4px,.75vw,13px); flex:none; }
.bcy-nav svg{ width:clamp(9px,1.05vw,17px); height:clamp(9px,1.05vw,17px); fill:#c4c7c5; display:block; }
.bcy-nav svg.is-off{ opacity:.42; }
.bcy-omni{ flex:1; min-width:0; height:74%; display:flex; align-items:center; gap:clamp(5px,.75vw,11px); padding:0 clamp(7px,1.1vw,16px); border-radius:999px; background:#282828; }
.bcy-omni svg{ width:clamp(9px,1vw,16px); height:clamp(9px,1vw,16px); flex:none; fill:#c4c7c5; display:block; }
.bcy-omni svg:last-child{ margin-inline-start:auto; }
.bcy-url{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }

/* ── Projects ── */
.bcy-projects{ background:var(--soft); }
.bcy-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:end; margin-bottom:clamp(48px,6vw,88px); }
.bcy-head p{ max-width:31em; font-size:17px; line-height:1.65; color:var(--ink2); }
.bcy-proj{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,76px); align-items:center; }
.bcy-proj + .bcy-proj{ margin-top:clamp(64px,8vw,120px); }
.bcy-proj:nth-of-type(even){ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.bcy-proj:nth-of-type(even) .bcy-browser{ order:2; }
.bcy-browser{
  display:flex; flex-direction:column; border-radius:10px; overflow:hidden; background:#0d1117;
  box-shadow:0 1px 0 rgba(10,16,22,.04), 0 28px 60px -24px rgba(10,16,22,.32);
}
.bcy-browser .bcy-bar{ height:clamp(26px,2.6vw,38px); font-size:clamp(9px,.85vw,12.5px); }
.bcy-browser-view{ aspect-ratio:16 / 10; overflow:hidden; background:#fff; }
.bcy-browser-view img{ display:block; width:100%; height:auto; }
.bcy-place{ font:500 12.5px/1.3 var(--mono); letter-spacing:.01em; color:var(--accent); }
.bcy-proj h3{ margin-top:14px; font-size:clamp(28px,2.7vw,40px); line-height:1.04; letter-spacing:-.02em; }
.bcy-type{ margin-top:8px; font-size:15px; color:var(--mute); }
.bcy-desc{ margin-top:20px; font-size:17px; line-height:1.65; color:var(--ink2); }
.bcy-quote{ margin-top:26px; padding-left:18px; border-left:2px solid var(--accent); }
.bcy-quote blockquote{ font:500 18px/1.5 var(--body); color:var(--ink); }
.bcy-quote figcaption{ margin-top:8px; font-size:14px; color:var(--mute); }
.bcy-after{ margin-top:clamp(56px,7vw,96px); }

/* ── What every website includes (dark) ── */
.bcy-offer{ background:var(--ink); color:#fff; }
.bcy-split{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(40px,6vw,104px); }
.bcy-offer .bcy-h2{ color:#fff; }
.bcy-offer-intro p{ margin-top:20px; max-width:22em; font-size:17px; line-height:1.6; color:#A7B0BD; }
.bcy-offer-intro .bcy-btn{ margin-top:36px; }
.bcy-offer-intro .bcy-more{ margin-top:22px; color:#fff; border-color:rgba(255,255,255,.4); }
.bcy-offer-intro .bcy-more:hover{ color:#fff; border-color:#fff; }
.bcy-offer-intro .bcy-links{ display:flex; flex-direction:column; align-items:flex-start; }
.bcy-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,4vw,52px) clamp(28px,4vw,56px); }
.bcy-list dt{ font:600 21px/1.25 var(--head); letter-spacing:0; word-spacing:.06em; color:#fff; }
.bcy-list dd{ margin-top:10px; font-size:16px; line-height:1.62; color:#A7B0BD; }

/* ── Reviews ── */
.bcy-score{ font:600 clamp(96px,11vw,156px)/.82 var(--head); letter-spacing:-.04em; color:var(--ink); }
.bcy-score-meta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; font-size:15.5px; color:var(--mute); }
.bcy-score-meta .bcy-stars svg{ width:18px; height:18px; }
.bcy-score-meta .bcy-more{ align-self:flex-start; margin-top:8px; }
.bcy-quotes .bcy-h2{ margin-bottom:clamp(32px,4vw,52px); }
.bcy-quotes figure + figure{ margin-top:clamp(32px,4vw,48px); }
.bcy-quotes blockquote{ font:500 clamp(19px,1.65vw,23px)/1.5 var(--body); color:var(--ink); text-wrap:pretty; }
.bcy-quotes figcaption{ margin-top:12px; font-size:14.5px; color:var(--mute); }
.bcy-quotes figcaption b{ color:var(--ink); font-weight:600; }
.bcy-note{ margin-top:clamp(32px,4vw,48px); font-size:13.5px; line-height:1.6; color:var(--faint); }

/* ── Region ── */
.bcy-local{ background:var(--soft); }
.bcy-local .bcy-split{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
.bcy-prose p{ font-size:17.5px; line-height:1.72; color:var(--ink2); }
.bcy-prose p + p{ margin-top:20px; }
.bcy-prose a{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(59,85,230,.45); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.bcy-prose a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* ── FAQ ── */
.bcy-faq-side p{ margin-top:18px; font-size:16px; line-height:1.6; color:var(--mute); }
.bcy-faq-side a{ color:var(--ink); font-weight:600; text-decoration:none; white-space:nowrap; }
.bcy-faq-side a:hover{ color:var(--accent); }
.bcy-faq details{ border-top:1px solid var(--line); }
.bcy-faq details:last-child{ border-bottom:1px solid var(--line); }
.bcy-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:24px 0; font:700 clamp(17px,1.3vw,18.5px)/1.4 var(--body); color:var(--ink);
}
.bcy-faq summary::-webkit-details-marker{ display:none; }
.bcy-faq summary::after{
  content:""; flex:none; width:14px; height:14px; margin-top:6px;
  background:linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) center / 2px 100% no-repeat;
  transition:transform .25s ease;
}
.bcy-faq details[open] summary::after{ transform:rotate(45deg); }
.bcy-faq summary:hover{ color:var(--accent); }
.bcy-faq summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.bcy-ans{ max-width:40em; padding:0 38px 26px 0; font-size:16.5px; line-height:1.7; color:var(--ink2); }

/* ── Contact person ── */
.bcy-contact{ padding:clamp(64px,8vw,112px) 0; border-top:1px solid var(--line); }
.bcy-person{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,96px); align-items:end; }
.bcy-person-who{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); }
.bcy-person-who img{ width:clamp(96px,10vw,140px); height:clamp(96px,10vw,140px); border-radius:50%; object-fit:cover; flex:none; }
.bcy-kicker{ font:500 14px/1.3 var(--body); color:var(--mute); }
.bcy-name{ margin-top:10px !important; font-size:clamp(34px,4vw,56px); line-height:1; letter-spacing:-.03em; }
.bcy-person-text{ margin-top:20px; max-width:30em; font-size:17px; line-height:1.65; color:var(--ink2); }
.bcy-reach{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.bcy-phone{ font:600 clamp(30px,3.2vw,44px)/1 var(--head); letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.bcy-phone:hover{ color:var(--accent); }
.bcy-mail{ font-size:16.5px; color:var(--ink2); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.bcy-mail:hover{ color:var(--accent); }
.bcy-reach .bcy-btn{ margin-top:8px; }

/* ── Motion: one quiet rise per block, never on reduced motion ── */
@media (prefers-reduced-motion:no-preference){
  .bcy-js .bcy-rise{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .bcy-js .bcy-rise.is-in{ opacity:1; transform:none; }
}

/* ── Narrow screens ── */
@media (max-width:960px){
  .bcy-hero-grid, .bcy-head, .bcy-proj, .bcy-proj:nth-of-type(even), .bcy-split, .bcy-local .bcy-split, .bcy-person{ grid-template-columns:minmax(0,1fr); }
  .bcy-head{ align-items:start; }
  .bcy-proj:nth-of-type(even) .bcy-browser{ order:0; }
  .bcy-shot{ max-width:640px; margin:0 auto; width:100%; }
  .bcy-person{ align-items:start; }
}
@media (max-width:600px){
  .bcy-h1{ font-size:clamp(44px,12.5vw,60px); }
  .bcy-actions{ flex-direction:column; align-items:flex-start; }
  .bcy-btn{ width:100%; justify-content:center; }
  .bcy-list{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .bcy-ans{ padding-right:0; }
  .bcy-person-who{ flex-direction:column; align-items:flex-start; }
}