/* Shared base for project design pages (html[data-design]).
   Family stylesheets build on these tokens; nothing here applies to classic pages. */

/* The site's own headline face (used by the home page as "StapleExpanded").
   Files are already shipped in /_nuxt/fonts and cover Cyrillic and Uzbek Latin. */
@font-face {
  font-family: "TXT Stapel Expanded";
  src: url(/_nuxt/fonts/Stapel-SemiExpandedMedium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TXT Stapel Expanded";
  src: url(/_nuxt/fonts/Stapel-ExpandedBold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html[data-design] {
  --pdx-bg: #0a0c11;
  --pdx-surface: #11141b;
  --pdx-ink: #eceff4;
  --pdx-muted: rgba(236, 239, 244, .62);
  --pdx-line: rgba(236, 239, 244, .14);
  --pdx-accent: #c9a96e;
  --pdx-accent-ink: #121008;
  --pdx-glow: rgba(201, 169, 110, .16);
  --pdx-font-display: 'Arial Narrow', sans-serif;
  --pdx-font-title: 'TXT Stapel Expanded', 'FactorA', 'Helvetica Neue', Arial, sans-serif;
  --pdx-font-text: 'FactorA', 'Helvetica Neue', Arial, sans-serif;
  --pdx-gutter: clamp(20px, 4.2vw, 72px);
  --pdx-ease: cubic-bezier(.2, .7, .1, 1);
  background: var(--pdx-bg);
}

/* The template wraps content in a custom smooth-scroll stage; design pages use native scroll
   (projects.js honours data-scroll="native"), so release the wrappers that clip overflow. */
html[data-design],
html[data-design] body {
  /* projects.js leaves overflow:auto on <body>, which would make <body> the scroll container
     for position:sticky; design pages scroll the document itself */
  position: static !important;
  height: auto !important;
  overflow-x: clip !important;   /* template chrome (cookie bar) is wider than small phones */
  overflow-y: visible !important;
}
html[data-design] body { background: var(--pdx-bg); }
html[data-design] .projects-d-page,
html[data-design] .projects-d-page .projects,
html[data-design] .Parallax,
html[data-design] .project-details-page {
  background: var(--pdx-bg) !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  transform: none !important;
}
html[data-design] .Scroll_track { display: none !important; }
/* the site footer is designed for a dark ground; light families set --pdx-footer to their ink */
html[data-design] .project-details-page .FooterDesk { background: var(--pdx-footer, var(--pdx-bg)); }
html[data-design] .Cursor { display: none !important; }

.pdx {
  position: relative;
  color: var(--pdx-ink);
  font-family: var(--pdx-font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pdx *, .pdx *::before, .pdx *::after { box-sizing: border-box; }
.pdx img { display: block; max-width: 100%; }
.pdx a { color: inherit; }
/* Element resets carry zero specificity (:where), so any component class wins over them.
   As `.pdx ol { margin: 0 }` they silently cancelled component rules such as
   `margin: … auto` on list containers, which pushed centred blocks to the left. */
:where(.pdx) p { margin: 0; }
:where(.pdx) h1, :where(.pdx) h2, :where(.pdx) h3 { margin: 0; }
:where(.pdx) ol, :where(.pdx) ul { margin: 0; padding: 0; list-style: none; }
:where(.pdx) figure { margin: 0; }
.pdx h1, .pdx h2, .pdx h3 { font-weight: inherit; } /* heading weight as the families were designed and reviewed with */
.pdx button { font: inherit; color: inherit; }

.pdx :focus-visible {
  outline: 2px solid var(--pdx-accent);
  outline-offset: 3px;
}

.pdx-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Reveal-on-scroll (core.js adds .is-in). Content stays visible without JS. */
.pdx.js-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--pdx-ease), transform 1.1s var(--pdx-ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.pdx.js-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Cursor badge ([data-cursor-label], created by core.js on hover-capable devices) */
.pdx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  padding: 10px;
  border-radius: 50%;
  background: var(--pdx-cursor-bg, var(--pdx-accent));
  color: var(--pdx-cursor-ink, var(--pdx-accent-ink));
  font: 500 10px/1.25 var(--pdx-font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  scale: .25;
  transition: opacity .3s, scale .45s var(--pdx-ease);
}
.pdx-cursor.is-on { opacity: 1; scale: 1; }
.pdx.has-cursor [data-cursor-label] { cursor: none; }

/* Lightbox */
.pdx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 64px 72px;
  background: rgba(5, 6, 9, .96);
}
.pdx-lightbox[hidden] { display: none; }
.pdx-lightbox__figure { max-width: 100%; max-height: 100%; display: grid; gap: 14px; justify-items: center; }
.pdx-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; }
.pdx-lightbox__figure figcaption { color: var(--pdx-muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pdx-lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  border: 1px solid var(--pdx-line);
  border-radius: 50%;
  background: transparent;
  color: var(--pdx-ink);
  font-size: 22px;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.pdx-lightbox__btn:hover { border-color: var(--pdx-accent); background: var(--pdx-glow); }
.pdx-lightbox__close { top: 18px; right: 18px; font-size: 28px; }
.pdx-lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.pdx-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .pdx-lightbox { padding: 64px 12px 84px; }
  .pdx-lightbox__prev, .pdx-lightbox__next { top: auto; bottom: 16px; transform: none; }
  .pdx-lightbox__prev { left: calc(50% - 64px); }
  .pdx-lightbox__next { right: calc(50% - 64px); }
}

html.pdx-lock, html.pdx-lock body { overflow: hidden !important; }

/* Drawn feature icons (icons.js, rendered with class "pdx-icon").
   Families size and colour them; these rules give every family the same draw-on and the
   same per-icon hover gesture. Draw-on: put [data-draw] on a revealed ancestor (it gets .is-in).
   Gesture: the hovered ancestor carries .pdx-icon-host. Strokes use pathLength="1". */
.pdx-icon { overflow: visible; }
.pdx-icon [class^="ic-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.pdx-icon .ic-roof, .pdx-icon .ic-finial, .pdx-icon .ic-pin, .pdx-icon .ic-p, .pdx-icon .ic-arrow, .pdx-icon .ic-lens,
.pdx-icon .ic-crown, .pdx-icon .ic-awning, .pdx-icon .ic-leaf, .pdx-icon .ic-petals, .pdx-icon .ic-car, .pdx-icon .ic-terrace { stroke: var(--pdx-icon-accent, var(--pdx-accent)); }
.pdx-icon .ic-nodraw { stroke-dasharray: .03 .035; opacity: .55; }
.pdx-icon .ic-spot { fill: var(--pdx-icon-accent, var(--pdx-accent)); stroke: none; }
.pdx-icon .ic-win { fill: transparent; transition: fill .35s; transition-delay: calc(var(--i) * 70ms); }
.pdx-icon .ic-ripple { opacity: 0; }
.pdx.js-ready [data-draw] .pdx-icon :not(.ic-nodraw):not(g) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--pdx-ease), fill .35s;
  transition-delay: calc(var(--draw-delay, .3s) + var(--d, 0) * .15s), calc(var(--i, 0) * 70ms);
}
.pdx.js-ready [data-draw].is-in .pdx-icon :not(.ic-nodraw):not(g) { stroke-dashoffset: 0; }

.pdx-icon-host:hover .ic-col { animation: pdx-col-rise .9s var(--pdx-ease) calc(var(--i) * 90ms); }
@keyframes pdx-col-rise { 50% { transform: translateY(-3px); } }
.pdx-icon-host:hover .ic-finial { fill: var(--pdx-icon-accent, var(--pdx-accent)); }
.pdx-icon .ic-pin { transform-origin: 50% 100%; }
.pdx-icon-host:hover .ic-pin { animation: pdx-drop 1.15s var(--pdx-ease); }
@keyframes pdx-drop { 30% { transform: translateY(-6px); } 55% { transform: translateY(3px) scale(1.07, .9); } 72% { transform: translateY(-1.5px); } }
.pdx-icon-host:hover .ic-ground { animation: pdx-ground 1.15s var(--pdx-ease); }
@keyframes pdx-ground { 0%, 46% { transform: none; } 60% { transform: scale(1.12, 1.08); } }
.pdx-icon-host:hover .ic-ripple { animation: pdx-ripple 1.15s ease-out; }
@keyframes pdx-ripple { 0%, 52% { opacity: 0; transform: none; } 62% { opacity: .85; } 100% { opacity: 0; transform: scale(1.8, 1.5); } }
.pdx-icon-host:hover .ic-win { fill: var(--pdx-icon-accent, var(--pdx-accent)); }
.pdx-icon .ic-tree, .pdx-icon .ic-crown { transform-origin: 50% 100%; }
.pdx-icon-host:hover .ic-tree, .pdx-icon-host:hover .ic-crown { animation: pdx-sway 1.6s ease-in-out; }
@keyframes pdx-sway { 25% { transform: rotate(-5deg); } 75% { transform: rotate(4deg); } }
.pdx-icon-host:hover .ic-car { animation: pdx-drive 1.6s var(--pdx-ease); }
@keyframes pdx-drive { 0% { transform: none; } 35% { transform: translateX(-30px); opacity: 0; } 36% { transform: translateX(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pdx-icon .ic-door-l, .pdx-icon .ic-door-r { transition: transform .9s var(--pdx-ease); }
.pdx-icon-host:hover .ic-door-l { transform: translateX(-5px); }
.pdx-icon-host:hover .ic-door-r { transform: translateX(5px); }
.pdx-icon-host:hover .ic-arrow { animation: pdx-bob 1.2s ease-in-out infinite; }
@keyframes pdx-bob { 50% { transform: translateY(-3px); } }
.pdx-icon-host:hover .ic-lens { animation: pdx-scan 1.8s ease-in-out; }
@keyframes pdx-scan { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pdx-icon .ic-leaf { transform-box: view-box; transform-origin: var(--o); transition: transform .9s var(--pdx-ease); }
.pdx-icon-host:hover .ic-leaf { transform: rotate(-28deg); }
.pdx-icon .ic-petals { transform-box: view-box; transform-origin: 32px 32px; transition: transform 1.2s var(--pdx-ease); }
.pdx-icon-host:hover .ic-petals { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .pdx *, .pdx *::before, .pdx *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .pdx.js-ready [data-reveal] { opacity: 1; transform: none; }
}