/* Homepage PROTOTYPE (page-home-proto.php): only what the existing
   homepage / /tood styles don't already cover. */
.homeHeader__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  width: 100%;
  margin-top: clamp(44px, 4.8vw, 72px);
}
/* no scroll effect: the hero is a plain one-screen block, no pinned
   driver, no fly-away, no reveal line */
.homeView .heroScroll {
  height: auto;
}
.homeView .heroScroll__sticky {
  position: relative;
  height: 100vh;
}
@media (min-width: 1025px) {
  .homeView .homeHeader__wrap {
    padding-top: clamp(72px, 7vw, 120px);
    /* breathing room between the nav and the heading */
  }
}
.homeView .heroScroll__reveal {
  display: none;
}
/* numbers block sits straight under the hero now, not under the reels */
.projectsIntro--statsOnly .projectsIntro__list {
  margin-top: 0;
}
.projectsIntro--statsOnly .projectsIntro__wrap {
  padding-block: clamp(120px, 14vw, 240px) clamp(48px, 6vw, 96px);
}
/* hero H1 a bit under the live homepage's clamp(4.2rem, 5.2125vw, 7.5rem) */
.homeView .homeHeader__title {
  font-size: clamp(3.8rem, 4.7vw, 6.8rem) !important;
}
/* typewriter H1: all characters are laid out from the start (hidden until
   typed) so nothing reflows; the underscore cursor sits after the current character
   without taking up any space. */
.homeView .homeHeader__title .hp-tw-word {
  display: inline-block;
  white-space: nowrap;
}
.homeView .homeHeader__title .hp-tw-ch {
  position: relative;
  visibility: hidden;
}
.homeView .homeHeader__title .hp-tw-ch.is-in {
  visibility: visible;
}
.homeView .homeHeader__title .hp-tw-ch.is-cur::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0.13em;
  height: 0.07em;
  width: 0.5em;
  margin-left: 0.06em;
  background: currentColor;
  visibility: visible;
  animation: hp-caret 1s steps(1, end) infinite;
}
.homeView .homeHeader__title .hp-tw-ch.is-cur:not(.is-in)::after {
  left: 0;
  margin-left: 0;
}
@keyframes hp-caret {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}
/* hero logos in the H1's own colour (--redesign-text, #141414). The logos are
   images, so the colour comes from a filter chain: flatten to black first,
   then tint to #141414 (checked numerically, lands within ~1.5/255). */
.homeView .homeHeader__logos .item img {
  filter: brightness(0) invert(8%);
  opacity: 1;
}
/* no fade at the left/right ends of the hero logo strip */
.homeView .homeHeader__logos {
  -webkit-mask-image: none;
  mask-image: none;
}
/* hero background: slightly darker beige at the top, easing into the page
   beige by the bottom so it joins the next section without a seam */
.homeView .heroScroll__sticky {
  background: var(--redesign-bg);
}
/* pixel-block transition before the news section (drawn by hp-home.js).
   --wipe-color is the news section's own colour: its glass panel is 50% white
   over the page beige, which works out to about #FAF8F4. */
.hp-pixelwipe {
  --wipe-color: #FAF8F4;
  position: relative;
  width: 100%;
  line-height: 0;
  margin-top: calc(-1 * clamp(40px, 6vw, 110px));
  /* grows up into the empty bottom padding of the form section */
  pointer-events: none;
  overflow: hidden;
}
.hp-pixelwipe canvas {
  display: block;
  width: 100%;
}
/* ---------- hero layout: big left-aligned H1 in two rows (fixed size, no
   shrinking), buttons bottom-left, lead bottom-right. While the H1 types the
   lead, buttons and logos are hidden (they keep their places), then fade in.
   JS removes .hp-intro from .homeView when the typing is done. */
.homeView .heroScroll__flyGroup {
  flex: 1 1 auto;
  margin: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.homeView .homeHeader__title {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  max-width: none !important;
  width: 100%;
  text-align: left !important;
  margin: clamp(48px, 6vw, 110px) 0 0 !important;
  /* clear the logo / nav row, with extra air */
  font-size: clamp(2.8rem, 9vw, 17rem) !important;
}
.homeView .homeHeader__title .hp-tw-br {
  display: block;
  height: 0;
}
.homeView .homeHeader__buttons {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  justify-content: flex-start;
  width: auto;
  margin: 0 !important;
}
.homeView .homeHeader__main {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: auto !important;
  max-width: 460px !important;
  padding: 0 !important;
  text-align: left;
}
.homeView .homeHeader__lead {
  max-width: none;
  margin: 0;
}
.homeView .homeHeader__main {
  visibility: visible;
}
.homeView .homeHeader__side {
  transition: opacity 0.9s ease 0.9s;
}
.homeView .homeHeader__buttons {
  transition: opacity 0.9s ease 1.3s;
}
/* lead rows fade/rise one after the other */
.homeView .hp-lead-line {
  display: block;
  transition: opacity 0.5s ease calc(var(--i, 0) * 0.07s), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 0.07s);
}
.homeView.hp-intro .hp-lead-line {
  opacity: 0;
  transform: translateY(14px);
}
.homeView.hp-intro .homeHeader__buttons,
.homeView.hp-intro .homeHeader__side {
  opacity: 0 !important;
  pointer-events: none;
}
@media (max-width: 767px) {
  .homeView .heroScroll__flyGroup {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 24px;
  }
  .homeView .homeHeader__title {
    grid-row: 1;
  }
  .homeView .homeHeader__main {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .homeView .homeHeader__buttons {
    grid-column: 1;
    grid-row: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .homeView .hp-lead-line,
  .homeView .homeHeader__buttons,
  .homeView .homeHeader__side {
    transition: none;
  }
}
/* no award labels on the homepage project tiles */
.homeView .projectsList__meta {
  display: none;
}
/* news section: no top line / shadow, it just sits flush under the block strip */
.homeView ~ .newsIntro,
.newsIntro.bg-noise {
  border-top: 0 !important;
  box-shadow: none !important;
}
/* "vääriline" in the accent blue */
.homeView .homeHeader__title .hp-tw-accent {
  color: var(--redesign-accent);
}
/* ---------- hero buttons: flat, clean pills (uppercase label + thin arrow).
   Primary = solid dark, secondary = outline. */
.homeView .homeHeader__buttons .btn-next.btn-next--new {
  background: var(--redesign-text) !important;
  background-image: none !important;
  color: var(--redesign-bg) !important;
  border: 1px solid var(--redesign-text) !important;
  box-shadow: none !important;
  padding: 17px 28px !important;
  gap: 18px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new svg {
  display: none;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new::after {
  content: '';
  width: 22px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 6h20.5M15.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 6h20.5M15.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new:hover::after {
  transform: translateX(4px);
}
.homeView .homeHeader__buttons .btn-next.btn-next--new:last-child {
  background: transparent !important;
  color: var(--redesign-text) !important;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new:hover {
  border-color: #A3AEF2 !important;
  color: #FFFFFF !important;
}
/* ---------- 3D hero scene (desktop, class .hp-3d added by hp-home.js) ----------
   A real CSS 3D room: the hero is the WALL, the first screen of the numbers +
   projects is the FLOOR, joined at the wall's bottom edge. On scroll the whole
   room is rotated so the camera pitches 90deg down from the wall to the floor.
   The stage is sticky for one extra screen of scrolling; the real floor is
   pulled up under it (-100vh) so it takes over seamlessly afterwards. */
@media (min-width: 0px) {
  .homeView.hp-3d .heroScroll {
    height: 200vh;
  }
  .homeView.hp-3d .heroScroll__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 3;
    background: var(--redesign-bg);
  }
  .homeView.hp-3d .hp-world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    will-change: transform;
  }
  .homeView.hp-3d .hp-world > .homeHeader {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background: var(--redesign-bg);
  }
  .homeView.hp-3d .hp-floorplane {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: rotateX(90deg);
    backface-visibility: hidden;
    background: var(--redesign-bg);
    pointer-events: none;
  }
  .homeView.hp-3d .hp-floor {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
  }
}
/* neutralise the glossy-button pseudo layers and text glow from redesign.css
   so the hero buttons are truly flat: no sheen, no streak, no text shadow */
.homeView .homeHeader__buttons .btn-next.btn-next--new {
  text-shadow: none !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center;
  flex-direction: row;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new:before {
  display: none !important;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new:after {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  inset: auto !important;
  flex: none;
  width: 22px !important;
  height: 12px !important;
  border-radius: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  background: currentColor !important;
}
.homeView .homeHeader__buttons .btn-next.btn-next--new > span {
  position: static;
}
/* logo cloud runs edge to edge of the screen, not inside the page margins */
.homeView .homeHeader {
  overflow-x: clip;
}
.homeView .homeHeader__side {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}
/* lead-form heading typewriter (same behaviour as the hero H1) */
.homeView .inquirySection__title .hp-tw-word {
  display: inline-block;
  white-space: nowrap;
}
.homeView .inquirySection__title .hp-tw-ch {
  position: relative;
  visibility: hidden;
}
.homeView .inquirySection__title .hp-tw-ch.is-in {
  visibility: visible;
}
.homeView .inquirySection__title .hp-tw-ch.is-cur::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0.13em;
  height: 0.07em;
  width: 0.5em;
  margin-left: 0.06em;
  background: currentColor;
  visibility: visible;
  animation: hp-caret 1s steps(1, end) infinite;
}
.homeView .inquirySection__title .hp-tw-ch.is-cur:not(.is-in)::after {
  left: 0;
  margin-left: 0;
}
/* its lead waits for the heading, then fades in row by row */
.homeView .inquirySection__text.hp-wait .hp-lead-line {
  opacity: 0;
  transform: translateY(14px);
}
/* form + contact details arrive after the lead */
.homeView .inquirySection__main,
.homeView .inquirySection__side {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.homeView .inquirySection__main.hp-hold,
.homeView .inquirySection__side.hp-hold {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}
/* per-tile pixel cover for projects 7+ (drawn by hp-home.js) */
.homeView .projectsList__media {
  position: relative;
  overflow: hidden;
}
.homeView .hp-px {
  position: relative;
}
.hp-px-cover {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.homeView .hp-px .projectsList__title {
  opacity: var(--hp-p, 1);
}
/* "Rohkem töid" under the project grid */
.homeView .hp-more,
.hp-floor .hp-more {
  display: flex;
  justify-content: center;
  padding: clamp(32px, 4vw, 72px) 0 0;
}
/* ---------- services intro (two highlights) ---------- */
.hp-services__wrap {
  padding-block: clamp(72px, 9vw, 160px) clamp(56px, 7vw, 120px);
}
.hp-services__title {
  font-size: clamp(3rem, 4.2vw, 6rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 clamp(40px, 5vw, 90px);
  color: var(--redesign-text);
}
.hp-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
}
.hp-services__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid #141414;
  padding-top: 24px;
}
.hp-services__nr {
  font-size: 1.4rem;
  margin-bottom: clamp(24px, 3vw, 56px);
  color: var(--redesign-accent);
}
.hp-services__name {
  font-size: clamp(2.8rem, 3.4vw, 5rem);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--redesign-text);
}
.hp-services__text {
  font-size: clamp(1.6rem, 1.3vw, 2rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 clamp(24px, 3vw, 48px);
  color: var(--redesign-text);
}
.hp-services__list {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(28px, 3vw, 48px);
  width: 100%;
  border-top: 1px solid #141414;
}
.hp-services__list li {
  padding: 16px 0;
  border-bottom: 1px solid #141414;
  font-size: 1.8rem;
  color: var(--redesign-text);
}
@media (max-width: 900px) {
  .hp-services__grid {
    grid-template-columns: 1fr;
  }
}
/* lilac services section, entered through the block strip above it */
.hp-services {
  --btn-fill: #F5F1EA;
  background: #A3AEF2;
  position: relative;
}
.hp-services__nr {
  color: #141414;
}
html .hp-services .btn-next.btn-next--new:hover {
  color: #141414 !important;
  border-color: #F5F1EA !important;
}
.hp-floor .hp-more,
.homeView .hp-more {
  padding-bottom: clamp(48px, 6vw, 110px);
}
/* phones: 40px between the lead and the buttons (24px grid gap + 16px) */
@media (max-width: 767px) {
  .homeView .heroScroll__flyGroup .homeHeader__buttons {
    margin-top: 16px !important;
  }
}
/* phones: the logo carousel is the last item of a hero-high flex column, so it sits on the
   hero's bottom edge by flow (no absolute positioning): the text block takes the leftover height. */
@media (max-width: 767px) {
  .homeView .homeHeader {
    height: 100%;
    box-sizing: border-box;
  }
  .homeView .homeHeader__wrap {
    height: 100%;
    min-height: 0 !important;
    box-sizing: border-box;
    padding-bottom: 16px !important;
  }
  .homeView .heroScroll__flyGroup {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
  }
  .homeView .homeHeader__side {
    margin-top: 0 !important;
    flex: none;
  }
}
/* the logo carousel is now the last row of the hero content grid */
.homeView .heroScroll__flyGroup > .homeHeader__side {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  min-width: 0;
}
@media (max-width: 767px) {
  .homeView .heroScroll__flyGroup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    align-content: normal;
  }
  .homeView .heroScroll__flyGroup > .homeHeader__side {
    grid-row: 4;
    align-self: end;
    margin-top: 0 !important;
  }
}
/* the hero is exactly one screen high (vh): stage, wall and content column all share that height,
   so the logo carousel (last row of the column) lands on the hero's bottom edge */
.homeView .heroScroll__sticky {
  height: 100vh;
}
.homeView .homeHeader {
  height: 100vh;
  min-height: 0 !important;
  box-sizing: border-box;
}
.homeView .homeHeader__wrap {
  height: 100vh;
  min-height: 0 !important;
  box-sizing: border-box;
}
/* logged in with the WordPress toolbar: the toolbar takes some of the screen, so the one-screen hero is that much shorter */
.admin-bar .homeView .heroScroll__sticky,
.admin-bar .homeView .homeHeader,
.admin-bar .homeView .homeHeader__wrap {
  height: calc(100vh - 46px);
}
@media (min-width: 601px) {
  .admin-bar .homeView.hp-3d .heroScroll__sticky {
    top: 46px;
  }
}
@media (min-width: 783px) {
  .admin-bar .homeView .heroScroll__sticky,
  .admin-bar .homeView .homeHeader,
  .admin-bar .homeView .homeHeader__wrap {
    height: calc(100vh - 32px);
  }
  .admin-bar .homeView.hp-3d .heroScroll__sticky {
    top: 32px;
  }
}
/* phones: 60px between the lead and the buttons (24px grid gap + 36px) */
@media (max-width: 767px) {
  .homeView .heroScroll__flyGroup .homeHeader__buttons {
    margin-top: 36px !important;
  }
}
/* phones: more white space above the projects (the facts block that used to sit there is hidden) */
@media (max-width: 767px) {
  .hp-floor .projectsView,
  .hp-floor-clone .projectsView {
    padding-top: 96px;
  }
}