/* The presentation site (scripts/prezentare.mjs serves it as stil.css, shared by every page).
   Direction "Photographs at uneven sizes" (design-taste-frontend): a rosy grey ground, brown-black ink,
   green only on the action; Archivo at a regular weight, set large; prints at uneven sizes on 12 columns.
   Russian takes its letters from Golos Text (Archivo has no Cyrillic). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/archivo-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(fonts/golos-cyrillic.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #ebe5e3;
  --surface: #e1dad7;
  --ink: #2b2622;
  --muted: #6a615d;
  --accent: #0f7d45;
  --accent-ink: #ffffff;
  --paper: #f6f2f0;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.6rem, 1.1rem + 6.6vw, 6.75rem);

  --margine: clamp(1.25rem, 4.2vw, 4rem);
  --sus-h: clamp(4.25rem, 7vw, 5.75rem);
  --jgheab: clamp(0.75rem, 1.8vw, 2rem);
  --spatiu: clamp(6rem, 13vw, 14rem);
  --usor: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (pointer: fine) {
  html {
    overscroll-behavior: none;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body) / 1.5 'Archivo', 'Golos', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

figcaption,
.nota {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--step-small);
}

a {
  color: inherit;
}

a,
button,
summary {
  -webkit-tap-highlight-color: rgb(43 38 34 / 0.12);
  touch-action: manipulation;
}

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

[id] {
  scroll-margin-top: 2rem;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display);
  line-height: 1;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--step-head);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--step-lead);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.4;
  max-width: 34ch;
}

/* the 12-column grid every section sits on, with one pair of margins */
.grila {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--jgheab);
  padding-inline: var(--margine);
}

.grila-latime,
.grila-st {
  padding-inline: var(--margine);
}

/* ------------------------------------------------------------ buttons and links */

.butoane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, transform 0.18s var(--usor);
}

.buton:hover {
  background: #0b6a3a;
}

.buton:active {
  transform: translateY(1px);
}

.buton--gol {
  background: var(--surface);
  color: var(--ink);
}

.buton--gol:hover {
  background: #d6cecb;
}

.buton--mic {
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
}

.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset 0.2s var(--usor), color 0.18s;
}

.link:hover {
  text-underline-offset: 0.45em;
  color: var(--accent);
}

.lipsa {
  max-width: 34ch;
  padding: 1rem 1.25rem;
  background: var(--surface);
  color: var(--ink);
}

.sari {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}

.sari:focus-visible {
  transform: none;
}

/* ------------------------------------------------------------ the header */

.sus {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: var(--sus-h);
  padding: 0 var(--margine);
  font-size: var(--step-small);
}

.sus__nume {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--step-body);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* (the 360 Tours mark, scripts/lib/logo.mjs: the user's choice, 2026-11-09) */
.sus__nume svg {
  width: 1.55em;
  height: 1.55em;
  flex: none;
}

.sus__nav {
  display: flex;
  gap: 1.5rem;
}

.sus__nav a,
.sus__meniu a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.18s;
}

.sus__nav a:hover,
.sus__meniu a:hover {
  color: var(--ink);
}

.sus__nav a[aria-current='page'] {
  color: #0a6236;
}

.sus__dreapta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.limba {
  color: var(--muted);
  text-underline-offset: 0.25em;
}

.limba:hover {
  color: var(--ink);
}

.sus__meniu {
  display: none;
  position: relative;
}

.sus__meniu summary {
  list-style: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sus__meniu summary::-webkit-details-marker {
  display: none;
}

/* (a menu truly floats over the page) */
.sus__meniu nav {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 0.25rem;
  min-width: 13rem;
  padding: 0.75rem 0;
  background: var(--ink);
}

.sus__meniu nav a {
  padding: 0.6rem 1.1rem;
  font-size: var(--step-body);
  color: var(--paper);
}

.sus__meniu nav a[aria-current='page'] {
  color: #7fd3a6;
}

@media (max-width: 760px) {
  .sus {
    gap: 1rem;
  }

  .sus__nav {
    display: none;
  }

  .sus__meniu {
    display: block;
  }

  .sus__dreapta {
    gap: 0.9rem;
  }
}

/* ------------------------------------------------------------ the opening, and the 360 band */

/* The first screen: the words at the top, the 360 band filling the rest of the screen to its foot, seen as
   soon as the page opens (the user, 2026-10-28: "să fie pe partea de jos a ecranului, iar textul sus"). */
.primul-ecran {
  position: relative;
  display: flex;
  flex-direction: column;
  /* the screen's height under the header; grown, never run over, where the words leave the band less than its least (a short wide
     screen, a phone on its side: held to the height, the band ran out under the next section, the review, 2026-11-10) */
  min-height: calc(100svh - var(--sus-h));
}

.deschidere {
  row-gap: 1.25rem;
  align-items: end;
  padding-block: clamp(0.75rem, 3.5vh, 3rem) clamp(1.25rem, 3.5vh, 2.75rem);
}

.deschidere__titlu {
  grid-column: 1 / -1;
  max-width: 15ch;
  /* (by the screen's height too: a short laptop screen keeps room for the band below) */
  font-size: clamp(2.4rem, min(6.6vw, 11.5vh), 6.75rem);
}

.deschidere__text {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
}

.deschidere__text p {
  font-size: var(--step-body);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .deschidere__titlu {
    grid-column: 1 / span 7;
  }

  .deschidere__text {
    grid-column: 8 / span 5;
  }
}

.banda {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  overflow: hidden;
  background: #c3bdb3;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.banda.trage {
  cursor: grabbing;
}

/* (laid by the band's edges, whatever height the band ends up with) */
.banda__fasie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: max-content;
  will-change: transform;
}

.banda__fasie > span,
.banda__fasie picture {
  display: block;
  height: 100%;
}

.banda__fasie img {
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* The hint, the note and the pause sit on the band's foot, as small labels within the page's margins: the band
   itself reaches the bottom of the screen on any screen (the user, 2026-10-28). Between them, the band can be
   dragged as before. */
.banda__sub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 2.2vh, 1.5rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.4rem;
  font-size: var(--step-small);
  color: var(--ink);
  pointer-events: none;
}

.banda__stanga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem;
}

.banda__stanga > *,
.banda__sub > button {
  pointer-events: auto;
  background: var(--paper);
  padding: 0.45rem 0.75rem;
}

@media (max-width: 599px) {
  .banda__sub {
    font-size: 0.8125rem;
  }

  .banda__stanga > *,
  .banda__sub > button {
    padding: 0.3rem 0.55rem;
  }
}

.banda__nota {
  color: var(--muted);
}

.banda__indiciu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.6s var(--usor);
}

/* (once someone has dragged the band, they know) */
.primul-ecran.atins .banda__indiciu {
  opacity: 0;
  pointer-events: none;
}

.banda__indiciu svg {
  width: 1.4rem;
  height: 1rem;
}

.banda__sub .banda__pauza {
  flex: none;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

/* ------------------------------------------------------------ home: viewings only with the interested */

.vizionari {
  margin-top: var(--spatiu);
  row-gap: 2.5rem;
  align-items: start;
}

.vizionari__titlu {
  grid-column: 1 / span 9;
  grid-row: 1;
  z-index: 1;
  max-width: 12ch;
  margin-top: 4rem;
  font-size: var(--step-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.vizionari__text {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.vizionari__mare {
  grid-column: 7 / span 6;
  grid-row: 1 / span 3;
  position: relative;
  margin-right: calc(-1 * var(--margine));
  margin-top: 10rem;
}

.vizionari__mare picture {
  display: block;
}

.vizionari__mare img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.vizionari__mare .schimba {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.vizionari__mare .schimba img {
  height: 100%;
}

.vizionari__mare .schimba.activ {
  opacity: 1;
}

.vizionari__mica {
  grid-column: 2 / span 4;
  grid-row: 3;
  margin-top: 2rem;
}

.vizionari__mica img {
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
}

@media (max-width: 899px) {
  .vizionari__titlu {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .vizionari__mare {
    grid-column: 4 / -1;
    grid-row: 2;
    margin-top: -1.6em;
  }

  .vizionari__text {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .vizionari__mica {
    grid-column: 1 / span 7;
    grid-row: 4;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------ the rooms band */

.camere {
  margin-top: var(--spatiu);
}

.camere__titlu {
  margin-bottom: 3rem;
}

@media (min-width: 900px) {
  .camere__titlu,
  .camere__nota {
    padding-left: calc(var(--margine) + (100vw - 2 * var(--margine)) / 6);
  }
}

.camere__banda {
  display: flex;
  height: 68svh;
  min-height: 420px;
}

.camere__panou {
  position: relative;
  flex: 2 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
  /* (the user, 2026-11-09: "puțin mai smooth ... parcă e prea brusc": slower, eased in as well as out, and a short wait so a
     pointer only passing over a room does not set the band moving) */
  transition: flex-grow 0.95s cubic-bezier(0.45, 0, 0.2, 1) 0.06s;
}

.camere__panou:nth-child(1) {
  flex-grow: 5;
}

.camere__panou:nth-child(3) {
  flex-grow: 3;
}

.camere__panou picture,
.camere__panou img {
  display: block;
  width: 100%;
  height: 100%;
}

.camere__panou img {
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.45, 0, 0.2, 1);
}

@media (hover: hover) {
  .camere__banda .camere__panou:hover {
    flex-grow: 6;
  }

  .camere__panou:hover img {
    transform: scale(1.03);
  }
}

.camere__panou-titlu {
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 26rem);
  padding: 1.5rem 1.5rem 4rem;
  font-size: var(--step-lead);
  line-height: 1.15;
  letter-spacing: -0.015em;
  /* (a neutral scrim, only under the title on the photograph) */
  background: linear-gradient(rgb(20 17 15 / 0.55), rgb(20 17 15 / 0)); /* taste-skill-ignore: the neutral scrim under text on a photo */
}

.camere__nume {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.55rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step-small);
  font-weight: 600;
}

.camere__nota {
  margin-top: 1rem;
}

/* on a phone: a two-by-two block, its rows split 64 / 36 and 36 / 64 */
@media (max-width: 759px) {
  .camere__banda {
    display: grid;
    grid-template-columns: repeat(100, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    height: 84svh;
    min-height: 520px;
  }

  .camere__panou:nth-child(1) {
    grid-area: 1 / 1 / 2 / 65;
  }

  .camere__panou:nth-child(2) {
    grid-area: 1 / 65 / 2 / 101;
  }

  .camere__panou:nth-child(3) {
    grid-area: 2 / 1 / 3 / 37;
  }

  .camere__panou:nth-child(4) {
    grid-area: 2 / 37 / 3 / 101;
  }
}

/* ------------------------------------------------------------ what the client sees */

.vede {
  margin-top: var(--spatiu);
  row-gap: 3rem;
  align-items: start;
}

.vede__tel {
  grid-column: 2 / span 3;
  grid-row: 1;
  margin-top: 7.5rem;
}

.vede__tel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}

.vede__3d {
  grid-column: 7 / -1;
  grid-row: 1;
}

.vede__3d img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #13171c;
}

.vede__text {
  grid-column: 2 / span 5;
  grid-row: 2;
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}

.vede__plan {
  grid-column: 9 / span 3;
  grid-row: 2;
  margin-top: 4rem;
}

.vede__plan img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--ink);
  padding: 8%;
}

.lista {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 40ch;
}

.lista li {
  position: relative;
  padding-left: 1.4rem;
  text-wrap: pretty;
}

.lista li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
}

@media (max-width: 899px) {
  .vede__tel {
    grid-column: 1 / span 6;
    margin-top: 0;
  }

  .vede__3d {
    grid-column: 4 / -1;
    grid-row: 2;
    margin-right: calc(-1 * var(--margine));
  }

  .vede__text {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .vede__plan {
    grid-column: 6 / -1;
    grid-row: 4;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------ the closing row */

.inchidere {
  margin-top: var(--spatiu);
  padding-bottom: var(--spatiu);
  align-items: start;
  row-gap: 2rem;
}

.inchidere__fraza {
  grid-column: 1 / span 5;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.inchidere__poza {
  grid-column: 8 / span 2;
}

.inchidere__poza img {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1;
  object-fit: cover;
}

.inchidere__cai {
  grid-column: 10 / span 3;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.inchidere__intrebare {
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.inchidere__cai .butoane,
.contact__cai .butoane {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 899px) {
  .inchidere__fraza {
    grid-column: 1 / -1;
  }

  .inchidere__poza {
    grid-column: 1 / span 3;
  }

  .inchidere__cai {
    grid-column: 4 / -1;
  }
}

/* ------------------------------------------------------------ the footer: the last photograph */

.jos {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  color: var(--paper);
  overflow: hidden;
}

.jos__poza,
.jos__poza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.jos__poza img {
  object-fit: cover;
  filter: brightness(0.62);
}

.jos__sus {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem var(--margine);
}

.jos__nav {
  display: grid;
  gap: 0.35rem;
}

.jos__nav a {
  text-decoration: none;
}

.jos__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.jos__rand {
  max-width: 34ch;
}

.jos__nume {
  position: relative;
  grid-row: 3;
  padding-inline: var(--margine);
  font-size: 16.5vw;
  line-height: 0.85;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.jos__legal {
  position: relative;
  grid-row: 4;
  padding: 1rem var(--margine) 2rem;
  font-size: var(--step-small);
}

/* On a phone too the last photograph is the whole screen (the user, 2026-11-10: "antetul și subsolul și pe telefon să se
   vadă pe tot ecranul"): by the screen with the browser's bars drawn back, as they are at a page's end (88% of the
   screen with them out left a strip of the section before it above the photograph). */
@media (max-width: 760px) {
  .jos {
    min-height: 100vh;
    min-height: 100lvh;
  }
}

/* ------------------------------------------------------------ tours page */

.tur-cap {
  padding-top: clamp(2rem, 7vw, 6rem);
  row-gap: 2rem;
  align-items: start;
}

.tur-cap__titlu {
  grid-column: 1 / span 6;
  grid-row: 1;
}

.tur-cap__text {
  grid-column: 1 / span 5;
  grid-row: 2;
  display: grid;
  gap: 1.75rem;
}

.tur-cap__poza {
  grid-column: 7 / -1;
  grid-row: 1 / span 3;
  margin-right: calc(-1 * var(--margine));
}

.tur-cap__poza img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.parti {
  margin-top: var(--spatiu);
  row-gap: clamp(4rem, 9vw, 9rem);
}

.parti__titlu {
  grid-column: 1 / -1;
}

.parte {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--jgheab);
  row-gap: 1.5rem;
  align-items: end;
}

.parte figure img {
  width: 100%;
  object-fit: cover;
}

.parte__text {
  display: grid;
  gap: 0.75rem;
  max-width: 34ch;
}

.parte--1 figure { grid-column: 1 / span 7; }
.parte--1 figure img { aspect-ratio: 16 / 10; }
.parte--1 .parte__text { grid-column: 9 / span 4; }

.parte--2 figure { grid-column: 8 / span 4; grid-row: 1; }
.parte--2 figure img { aspect-ratio: 1; object-fit: contain; background: var(--ink); padding: 8%; }
.parte--2 .parte__text { grid-column: 2 / span 5; grid-row: 1; align-self: center; }

.parte--3 figure { grid-column: 2 / span 7; }
.parte--3 figure img { aspect-ratio: 16 / 10; background: #13171c; }
.parte--3 .parte__text { grid-column: 10 / span 3; }

.parte--4 figure { grid-column: 7 / span 3; grid-row: 1; }
.parte--4 figure img { aspect-ratio: 4 / 5; object-position: top; }
.parte--4 .parte__text { grid-column: 2 / span 4; grid-row: 1; align-self: start; margin-top: 5rem; }

.parte--5 figure { grid-column: 4 / span 3; }
.parte--5 figure img { aspect-ratio: 4 / 5; object-position: top; }
.parte--5 .parte__text { grid-column: 8 / span 4; }

@media (max-width: 899px) {
  .tur-cap__titlu,
  .tur-cap__text {
    grid-column: 1 / -1;
  }

  .tur-cap__poza {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-inline: calc(-1 * var(--margine));
  }

  .tur-cap__poza figcaption {
    padding-inline: var(--margine);
  }

  .parte figure,
  .parte .parte__text {
    grid-row: auto !important;
    margin-top: 0 !important;
  }

  .parte .parte__text {
    grid-column: 1 / -1 !important;
  }

  .parte--1 figure,
  .parte--3 figure {
    grid-column: 1 / -1;
    margin-left: calc(-1 * var(--margine));
  }

  .parte--2 figure,
  .parte--5 figure {
    grid-column: 4 / -1;
  }

  .parte--4 figure {
    grid-column: 1 / span 8;
  }
}

/* ------------------------------------------------------------ how I work */

.cum-cap {
  padding-top: clamp(2rem, 7vw, 6rem);
  row-gap: 1.75rem;
}

.cum-cap h1 {
  grid-column: 1 / -1;
}

.cum-cap__text {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .cum-cap__text {
    grid-column: 7 / span 5;
  }
}

.pasi {
  margin-top: clamp(4rem, 9vw, 8rem);
  row-gap: 2.5rem;
}

.pasi__titlu {
  grid-column: 1 / -1;
}

/* six steps in three columns, their photographs rising and falling along the row (a real sequence: an <ol>) */
.pasi__rand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem var(--jgheab);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pas {
  display: flex;
  flex-direction: column;
  max-width: 26rem;
}

.pas h3 {
  font-size: var(--step-body);
}

.pas p {
  margin-top: 0.5rem;
  min-height: 4.5em;
}

.pas picture {
  display: block;
  margin-top: var(--aer, 96px);
}

.pas img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* (the plan: light lines, on the ink like everywhere else) */
.pas--3 img {
  object-fit: contain;
  background: var(--ink);
  padding: 10%;
}

.pas--1 { --aer: 32px; }
.pas--2 { --aer: 112px; }
.pas--3 { --aer: 64px; }
.pas--4 { --aer: 96px; }
.pas--5 { --aer: 24px; }
.pas--6 { --aer: 120px; }

@media (max-width: 760px) {
  /* on a phone one under the other, at alternating widths */
  .pasi__rand {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .pas {
    max-width: none;
    --aer: 20px;
  }

  .pas:nth-child(3n + 2) picture {
    width: 72%;
  }

  .pas:nth-child(3n) picture {
    width: 60%;
    margin-left: auto;
  }
}

/* the questions beside a tall photograph */
.intrebari {
  margin-top: var(--spatiu);
  padding-top: clamp(4rem, 8vw, 7rem);
  background: var(--surface);
  row-gap: 3rem;
}

.intrebari__text {
  grid-column: 1 / span 5;
  display: grid;
  gap: 1.75rem;
  align-content: start;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.intrebari__fapte {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-body);
}

.intrebari__lista {
  display: grid;
  gap: 1.75rem;
}

.intrebare summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 2.5rem;
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.intrebare summary::-webkit-details-marker {
  display: none;
}

/* a chevron drawn from two strokes */
.intrebare summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--usor);
}

.intrebare[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.intrebare p {
  margin-top: 0.6rem;
  max-width: 44ch;
}

.intrebari__poze {
  grid-column: 7 / -1;
  position: relative;
  margin-top: calc(-1 * clamp(4rem, 8vw, 7rem) - 3rem);
  margin-bottom: 80px;
  align-self: start;
}

.intrebari__poze > picture img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.intrebari__mica {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 34%;
}

.intrebari__mica img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 899px) {
  .intrebari__poze {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 calc(-1 * var(--margine)) 3rem;
  }

  .intrebari__poze > picture img {
    aspect-ratio: 4 / 5;
  }

  .intrebari__mica {
    left: auto;
    right: 1.25rem;
    bottom: -2rem;
    width: 38%;
  }

  .intrebari__text {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ------------------------------------------------------------ contact page */

.contact {
  padding-block: clamp(2rem, 7vw, 6rem) var(--spatiu);
  row-gap: 2.5rem;
  align-items: start;
}

.contact__titlu {
  grid-column: 1 / span 7;
}

.contact__fraza {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.contact__cai {
  grid-column: 1 / span 4;
  grid-row: 3;
  display: grid;
  gap: 1.25rem;
}

.contact__poza {
  grid-column: 8 / -1;
  grid-row: 1 / span 4;
}

.dupa-camere {
  height: var(--spatiu);
}

.contact__poza img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 899px) {
  .contact__titlu,
  .contact__fraza,
  .contact__cai {
    grid-column: 1 / -1;
  }

  .contact__poza {
    grid-column: 4 / -1;
    grid-row: 4;
  }
}

/* ------------------------------------------------------------ the parts of each section come in, once
   Quicker since the user, 2026-11-10 ("o secundă se vede alb și după apare conținutul", then: "fă tot așa ca înainte să
   apară conținutul, dar mai rapid"): begun as soon as a part's top reaches the screen's foot (pagina.js), shorter, a smaller
   rise, the next part 50 ms after (it was 8% of the screen in, 0.8 s, 24 px, 80 ms, up to 1.1 s blank); the pictures in it
   fetched ahead, each over its own middle colour meanwhile (prezentare.mjs). verificari/site.mjs: every part on the screen
   begun within a quarter of a second of being scrolled to, whole within 0.8 s. */

.js .intra {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--usor), transform 0.5s var(--usor);
}

.js .intra.vazut {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .intra {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .camere__panou,
  .camere__panou img,
  .vizionari__mare .schimba,
  .buton,
  .link {
    transition: none;
  }
}

/* ------------------------------------------------------------ home: what is not seen with us
   A quiet section near the end (the user, 2026-10-28: "să nu fie chiar impunător, dar interesant"): two films
   side by side, each the usual way on the left and ours on the right, labelled on the picture and under it
   (the user, 2026-10-29: smaller, so they fit the screen, and a second comparison: clients like to see it): the
   view going down to the tripod (the second, from one room to the next, taken out on 2026-11-09: every way a cross-fade); then more differences, each the usual way
   in grey and ours in ink, side by side, no table. */

.diferente {
  margin-top: var(--spatiu);
  row-gap: 2.25rem;
  align-items: end;
}

.diferente__text {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
}

.diferente__text p {
  max-width: 38ch;
}

.diferente__filme {
  grid-column: 1 / -1;
  display: grid;
  gap: 2.25rem 2.5rem;
}

.diferente__film {
  margin: 0;
}

.diferente__ce {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.diferente__cadru {
  position: relative;
}

/* (each half named on the picture itself: the halves are 480 px with 8 between, of 968) */
.diferente__eticheta {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.6rem 0.25rem;
  border-radius: 999px;
  background: rgb(43 38 34 / 0.62);
  color: #fff;
  font-size: var(--step-small);
  line-height: 1.3;
}

.diferente__eticheta--noi {
  left: calc(50.42% + 0.6rem);
  background: var(--ink);
}

/* (the whole of both halves, as wide as the column: the films' own rule below would make it 16 × 10, 600 px tall,
   cut at the sides) */
.film.film--trepied {
  height: auto;
  aspect-ratio: 968 / 600;
  object-fit: contain;
}

/* (each caption under its half of the film: the halves are 480 px with 8 between, of 968) */
.diferente__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.83%;
  padding-top: 0.65rem;
  font-size: var(--step-small);
  color: var(--muted);
}

.diferente__sub span:last-child {
  color: var(--ink);
}

.diferente__lista {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.75rem 2.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.diferente__lista li {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.diferente__lista p {
  margin: 0;
  text-wrap: pretty;
}

.diferente__alti {
  font-size: var(--step-small);
  color: var(--muted);
}

@media (min-width: 720px) {
  .diferente__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .diferente__text {
    grid-column: 1 / span 7;
  }

  .diferente__filme {
    grid-template-columns: 1fr 1fr;
  }

  /* (one film: the comparison of walks taken out, 2026-11-09) across both, no wider than the film's own two halves */
  .diferente__film:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 968px);
  }
}

@media (min-width: 1200px) {
  .diferente__lista {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* the film of a walk (Tururi): played only while in sight */
.film {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface);
}

/* ------------------------------------------------------------ the footer's words, readable over any photograph
   (the user, 2026-11-09, on a phone: the lines over the bright windows hardly read) */

.jos__sus::before {
  content: "";
  position: absolute;
  inset: 0 0 -4rem;
  background: linear-gradient(rgba(24, 20, 17, 0.62), rgba(24, 20, 17, 0));
  pointer-events: none;
}

.jos__sus > * {
  position: relative;
}

/* ------------------------------------------------------------ a phone, made calmer (the user, 2026-11-09: "optimizează-l mai
   mult pentru telefon ... pe pc se vede mult mai bine"): one width for the photographs, edge to edge or within the margins,
   none pushed to one side with an empty space beside it; the opening's band taller; small things side by side */

@media (max-width: 759px) {
  /* the header on one line in either language (the Russian one wrapped the name and the button in two) */
  .sus {
    gap: 0.75rem;
  }

  .sus__nume,
  .sus__dreapta > * {
    white-space: nowrap;
  }

  .sus__dreapta {
    gap: 0.75rem;
  }

  .sus .buton--mic {
    padding-inline: 0.8rem;
  }

  /* the opening: shorter words, a band that is a real part of the first screen */
  .deschidere {
    row-gap: 1rem;
    padding-block: 0.75rem 1rem;
  }

  .deschidere__titlu {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
  }

  .deschidere__text {
    gap: 1rem;
  }

  .deschidere__text p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* The first screen is the phone's whole screen, the band to its very foot. Where the words leave the band less than a
     third of the screen (a small phone, the longer Russian words) the first screen grows instead: held to the screen's
     height, the band ran out of it under the next section, 10 px on an iPhone 13, 34 px in Russian. So its strip is
     laid out by the band's edges, whatever height the band ends up with. */
  /* (the first screen, the screen as on a computer; the words and the band's least make it longer where they must: a 30rem floor
     here put the band out of sight on a phone held sideways, the review) */
  .banda {
    min-height: 34svh;
  }

  /* (the way to "Cum lucrez" is in the menu: here it took a line from the band) */
  .deschidere .butoane .link {
    display: none;
  }

  /* viewings: the photograph edge to edge, the words, the second photograph within the margins */
  .vizionari__mare {
    grid-column: 1 / -1;
    margin: 1.5rem calc(-1 * var(--margine)) 0;
  }

  .vizionari__mare img {
    aspect-ratio: 4 / 5;
  }

  .vizionari__mica {
    grid-column: 1 / -1;
  }

  .vizionari__mica img {
    aspect-ratio: 4 / 3;
  }

  /* what the client sees: the 3D view edge to edge, the words, then the tour on a phone and the plan side by side */
  .vede {
    row-gap: 2rem;
  }

  .vede__3d {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: calc(-1 * var(--margine));
  }

  .vede__text {
    grid-row: 2;
  }

  .vede__tel {
    grid-column: 1 / span 6;
    grid-row: 3;
    align-self: center;
  }

  .vede__plan {
    grid-column: 7 / -1;
    grid-row: 3;
    align-self: center;
  }

  /* the closing row: the words and the buttons, the full width */
  .inchidere__poza {
    display: none;
  }

  .inchidere__cai {
    grid-column: 1 / -1;
  }

  /* the tours page: the wide pictures edge to edge, the plan and the phone's pictures centred, one width */
  .parte--1 figure,
  .parte--3 figure {
    grid-column: 1 / -1;
    margin-inline: calc(-1 * var(--margine));
  }

  .parte--2 figure,
  .parte--4 figure,
  .parte--5 figure {
    grid-column: 2 / -2;
  }

  .parte figure + .parte__text,
  .parte .parte__text {
    margin-top: 1.25rem !important;
  }

  /* how I work: every step's picture the full width, not so tall, no step pushed aside */
  .pasi__rand {
    gap: 3rem;
  }

  .pas,
  .pas:nth-child(n) {
    --aer: 16px;
  }

  .pas p {
    min-height: 0;
  }

  .pas:nth-child(n) picture {
    width: 100%;
    margin-left: 0;
  }

  .pas img {
    aspect-ratio: 3 / 2;
  }

  /* contact: the photograph under the buttons, the full width */
  .contact__poza {
    grid-column: 1 / -1;
  }

  .contact__poza img {
    aspect-ratio: 4 / 3;
  }
}

/* (a narrow phone: the header on one line within the margins) */
@media (max-width: 389px) {
  .sus,
  .sus__dreapta {
    gap: 0.55rem;
  }

  .sus__nume {
    font-size: 1rem;
  }

  .sus__meniu,
  .sus__dreapta .limba {
    font-size: 0.8125rem;
  }

  .sus .buton--mic {
    padding-inline: 0.6rem;
  }
}

/* (the narrowest phones, up to 369 px: the mark alone, its name left to the page and the footer; with it the Russian header ran
   past the screen's edge at 340-366 px, the review, 2026-11-09) */
@media (max-width: 369px) {
  .sus__nume {
    font-size: 0;
  }

  .sus__nume svg {
    width: 26px;
    height: 26px;
  }
}