/* =========================================================
   The Realtor v1.38 · Showcase Composition Final
   Panoramic Yekaterinburg + organically blended portrait
   ========================================================= */

:root{
  --v138-bg:#f4efe8;
  --v138-paper:#fffdf9;
  --v138-ink:#221d18;
  --v138-muted:#756d64;
  --v138-gold:#bb8644;
  --v138-gold-deep:#8b6233;
  --v138-dark:#2b2722;
  --v138-line:rgba(151,125,94,.22);
  --v138-shadow:0 28px 80px rgba(49,38,27,.11);
}

/* Overall ordering */
body.pr31-body{
  background:
    radial-gradient(circle at 8% 0%,rgba(187,134,68,.05),transparent 30rem),
    var(--v138-bg);
}
.pr31-content{width:min(calc(100% - 64px),1560px)}
.pr31-section{padding-top:98px}
.pr31-section-head{margin-bottom:36px}
.pr31-section-head h2{line-height:1.02}

/* The whole first screen is one scene */
.pr31-hero{
  min-height:720px;
  border-radius:36px;
  overflow:hidden;
  box-shadow:var(--v138-shadow);
  background-image:url('/assets/ekb-panorama-v138.jpg') !important;
  background-size:cover !important;
  background-position:center 50% !important;
}
.pr31-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,
      rgba(250,247,242,.995) 0%,
      rgba(250,247,242,.975) 20%,
      rgba(250,247,242,.83) 36%,
      rgba(250,247,242,.42) 50%,
      rgba(250,247,242,.11) 65%,
      rgba(250,247,242,.03) 100%),
    linear-gradient(180deg,
      rgba(31,24,18,.035) 0%,
      rgba(31,24,18,.015) 46%,
      rgba(31,24,18,.11) 100%);
}

.pr31-hero-copy{
  position:relative;
  z-index:4;
  width:min(700px,46vw);
  padding:108px 0 176px clamp(62px,5.2vw,100px);
}
.pr31-hero h1{
  max-width:630px;
  margin:18px 0 12px;
  font-size:clamp(60px,4.7vw,82px);
  line-height:.94;
  letter-spacing:-.052em;
}
.pr31-hero-subtitle{font-size:26px}
.pr31-hero-copy p{
  max-width:555px;
  margin-top:24px;
  font-size:13.2px;
  line-height:1.78;
}
.pr31-hero-actions{margin-top:30px}
.pr31-hero-actions .pr31-btn,
.pr31-hero-actions .pr31-btn-outline{
  min-height:47px;
  padding:0 20px;
}

/* Full portrait is not a card anymore.
   It is softly blended into the city scene using CSS masks. */
.pr31-portrait{
  position:absolute !important;
  z-index:3;
  top:34px !important;
  right:1.6% !important;
  bottom:auto !important;
  width:clamp(510px,38vw,650px) !important;
  height:clamp(585px,42vw,650px) !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none;
}
.pr31-portrait img{
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:52% 32% !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;

  /* Key effect: remove the rectangular-photo feeling */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 7%,#000 80%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 13%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0%,#000 7%,#000 80%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 13%,#000 90%,transparent 100%);
  mask-composite:intersect;

  filter:
    drop-shadow(0 24px 32px rgba(38,29,21,.15))
    saturate(.96)
    contrast(.99);
}
.pr31-portrait:before,
.pr31-portrait:after,
.pr31-portrait-caption{
  display:none !important;
}

/* Soft bridge under portrait so city does not become noisy */
.pr31-hero::after{
  content:"";
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  width:55%;
  height:58%;
  background:
    radial-gradient(ellipse at 72% 46%,
      rgba(245,238,228,.16) 0%,
      rgba(245,238,228,.07) 35%,
      transparent 72%);
  pointer-events:none;
}

/* Trust strip */
.pr31-values{
  z-index:5;
  left:4.8%;
  right:4.8%;
  bottom:20px !important;
  border-radius:18px;
  background:rgba(255,253,249,.91) !important;
  backdrop-filter:blur(13px);
  box-shadow:0 14px 36px rgba(50,39,28,.10);
}
.pr31-value{
  min-height:80px;
  padding:18px 20px 16px;
}
.pr31-value strong{font-size:10.8px}
.pr31-value p{font-size:8.6px;line-height:1.43}

/* Showcase order/premium consistency */
.pr31-approach-grid{grid-template-columns:.92fr 1.08fr;gap:20px}
.pr31-editorial-card{padding:42px;border-radius:28px}
.pr31-editorial-card h3{font-size:42px}
.pr31-service-panel{padding:42px;border-radius:28px}
.pr31-service{border-radius:18px}
.pr31-object-grid,.pr31-listing-grid,.pr31-story-grid{gap:18px}
.pr31-object-card{border-radius:26px;overflow:hidden}
.pr31-object-photo{height:320px}
.pr31-object-photo img{width:100%;height:100%;object-fit:cover!important}
.pr31-object-body{padding:22px 23px 24px}
.pr31-story{border-radius:24px}
.pr31-story-media{height:245px}
.pr31-story-media img{width:100%;height:100%;object-fit:cover!important}
.pr31-contact{border-radius:32px}
.pr31-about-portrait img{object-position:50% 20%!important}
.pr31-gallery img{object-fit:cover!important}

/* Tablet */
@media(max-width:1100px){
  .pr31-content{width:min(calc(100% - 34px),1560px)}
  .pr31-hero{min-height:740px;background-position:58% center!important}
  .pr31-hero-copy{
    width:53%;
    padding-top:100px;
    padding-left:48px;
  }
  .pr31-hero h1{font-size:58px}
  .pr31-portrait{
    top:48px !important;
    right:-3% !important;
    width:520px !important;
    height:570px !important;
  }
}

/* Mobile: portrait becomes a proper vertical layer,
   still blended, never overlaps the copy. */
@media(max-width:820px){
  body.pr31-body{padding-bottom:82px}
  .pr31-content{width:calc(100% - 24px)}
  .pr31-hero{
    min-height:1025px;
    border-radius:0 0 28px 28px;
    background-position:61% center!important;
  }
  .pr31-hero:before{
    background:
      linear-gradient(180deg,
        rgba(250,247,242,.995) 0%,
        rgba(250,247,242,.985) 25%,
        rgba(250,247,242,.74) 45%,
        rgba(250,247,242,.22) 67%,
        rgba(250,247,242,.05) 100%);
  }
  .pr31-hero-copy{
    width:auto;
    padding:48px 20px 20px;
  }
  .pr31-hero h1{max-width:430px;font-size:47px}
  .pr31-hero-subtitle{font-size:21px}
  .pr31-hero-copy p{max-width:470px;font-size:12px}
  .pr31-hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:min(100%,430px);
  }
  .pr31-hero-actions a{width:100%}

  .pr31-portrait{
    top:340px !important;
    right:50% !important;
    transform:translateX(50%) !important;
    width:min(112vw,470px) !important;
    height:500px !important;
  }
  .pr31-portrait img{
    object-position:50% 29%!important;
    -webkit-mask-image:
      linear-gradient(to bottom,transparent 0%,#000 8%,#000 78%,transparent 100%),
      linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
    mask-image:
      linear-gradient(to bottom,transparent 0%,#000 8%,#000 78%,transparent 100%),
      linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  }
  .pr31-hero::after{
    width:100%;
    height:54%;
    right:0;
  }

  .pr31-values{
    left:12px;
    right:12px;
    bottom:12px!important;
    grid-template-columns:repeat(2,1fr)!important;
  }
  .pr31-value{
    min-height:74px;
    padding:11px 12px;
  }
  .pr31-value p{margin:7px 0 0;font-size:8px}

  .pr31-section{padding-top:64px}
  .pr31-section-head{gap:18px;margin-bottom:24px}
  .pr31-approach-grid,
  .pr31-contact,
  .pr31-about-layout,
  .pr31-object-layout,
  .pr31-page-hero-inner{grid-template-columns:1fr}
  .pr31-editorial-card,.pr31-service-panel{padding:28px;border-radius:24px}
  .pr31-service-grid{grid-template-columns:1fr}
  .pr31-object-grid,.pr31-listing-grid,.pr31-story-grid,.pr31-service-list,.pr31-benefit-grid{
    grid-template-columns:1fr;
  }
  .pr31-object-photo{height:min(73vw,335px)}
  .pr31-story-media{height:min(62vw,285px)}
  .pr31-contact{border-radius:25px}
  .pr31-contact-copy,.pr31-contact-form{padding:29px}
  .pr31-about-portrait{height:500px;min-height:0}
  .pr31-object-head{grid-template-columns:1fr}
  .pr31-gallery{grid-template-columns:1fr 1fr;grid-template-rows:330px 155px}
  .pr31-gallery .main{grid-column:1/3}
}

@media(max-width:480px){
  .pr31-hero{min-height:1005px}
  .pr31-hero h1{font-size:42px}
  .pr31-portrait{
    top:350px!important;
    width:min(118vw,440px)!important;
    height:455px!important;
  }
  .pr31-hero-actions{grid-template-columns:1fr}
  .pr31-object-photo{height:260px}
}