*{box-sizing:border-box}html{background:#080909}body{margin:0;background:#080909;color:#f0efec;font-family:Arial,Helvetica,sans-serif}.topbar{height:86px;position:absolute;z-index:20;left:0;right:0;top:0;padding:0 4.3vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#ddd}.wordmark{color:#fff;text-decoration:none;display:flex;flex-direction:column;line-height:.9;letter-spacing:.08em}.wordmark b{font-size:15px}.wordmark small{font-size:7px;letter-spacing:.28em;margin-top:6px}.topbar nav{display:flex;gap:44px}.topbar nav a,.manifest{color:#969795;text-decoration:none;font-size:8px;letter-spacing:.17em}.manifest{text-align:right;line-height:1.45}.cover{height:640px;position:relative;overflow:hidden;background:#080909}.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 57%;filter:brightness(.76) saturate(.92)}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,5,.9) 0%,rgba(4,5,5,.62) 29%,rgba(4,5,5,.12) 60%,rgba(4,5,5,.35) 100%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%)}.cover-copy{position:absolute;z-index:2;left:4.3vw;top:230px;width:390px}.cover-copy>span{font-size:11px;letter-spacing:.16em}.cover h1{font-size:43px;line-height:1;margin:25px 0 18px;letter-spacing:.02em}.cover-copy p{font-size:15px;line-height:1.3;letter-spacing:.06em;color:#d1d0cc}.cover-meta{margin-top:45px;padding-top:16px;border-top:1px solid #aaa;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em}.cover-note{position:absolute;right:4.7vw;bottom:76px;font-size:10px;line-height:1.45;letter-spacing:.13em;font-weight:bold}.metrics{height:160px;background:#111313 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");display:grid;grid-template-columns:repeat(3,1fr);padding:0 4.3vw;align-items:center}.metrics div{text-align:center;height:82px;border-right:1px solid #383a39;display:flex;flex-direction:column;justify-content:center}.metrics div:last-child{border:0}.metrics strong{font-size:17px;letter-spacing:.04em}.metrics span{margin-top:14px;font-size:9px;line-height:1.45;letter-spacing:.08em;color:#c8c8c4}.about{height:570px;display:grid;grid-template-columns:39.5% 60.5%;background:#080909}.about-copy{padding:58px 5vw 40px 4.3vw}.about h2,.process>h2,.results>h2,.inside h2{font-size:18px;letter-spacing:.08em;margin:0 0 30px}.about p{font-size:13px;line-height:1.52;color:#d1d1ce;margin:0 0 22px;max-width:420px}.mini-meta{border-top:1px solid #8a8a87;margin-top:35px;padding-top:14px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em}.about figure{margin:0;overflow:hidden}.about figure img{width:100%;height:100%;object-fit:cover;object-position:center 47%}.process{padding:35px 0 0;background:#080909}.process>h2{margin-left:4.3vw;margin-bottom:23px}.steps{width:43%;padding:0 4.3vw 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps div{display:flex;gap:14px}.steps b{font-size:12px;font-weight:400}.steps span{font-size:8px;line-height:1.35;letter-spacing:.08em;color:#bfc0bd}.process-gallery{height:520px;display:grid;grid-template-columns:28% 29% 22% 21%;overflow:hidden}.process-gallery figure{margin:0;overflow:hidden}.process-gallery>figure img{width:100%;height:100%;object-fit:cover}.p1 img{object-position:center}.p2 img{object-position:center}.p3 img{object-position:center}.process-gallery aside{padding:0 3vw 25px;background:#090a09;display:flex;flex-direction:column;justify-content:flex-end}.process-gallery aside figure{height:190px;margin:0 -1vw 30px;order:-1}.process-gallery aside img{width:100%;height:100%;object-fit:cover}.process-gallery h3{font-size:19px;line-height:1.05;letter-spacing:.04em;margin:0 0 15px}.process-gallery aside p{font-size:10px;line-height:1.45;color:#a7a8a5;margin:0}.results{background:#080909;padding-top:35px}.results>h2{margin-left:4.3vw;margin-bottom:26px}.result-gallery{height:430px;display:grid;grid-template-columns:38% 25% 37%;gap:10px}.result-gallery figure{margin:0;overflow:hidden}.result-gallery img{width:100%;height:100%;object-fit:cover}.result-gallery figure:first-child img{object-position:center}.result-gallery figure:nth-child(2) img{object-position:center}.result-gallery figure:nth-child(3) img{object-position:center}.inside{height:380px;padding:38px 4.3vw;display:grid;grid-template-columns:42% 58%;align-items:center;background:#080909}.inside-copy{padding-right:6vw}.inside-copy p{font-size:13px;line-height:1.5;color:#aaa;margin:0 0 30px}.inside-copy button{height:64px;padding:0 28px;border:1px solid #a3a3a0;background:transparent;color:#fff;font-size:10px;letter-spacing:.14em;cursor:pointer}.inside-copy button span{font-size:20px;margin-right:24px}.video-card{height:300px;position:relative;overflow:hidden}.video-card video{width:100%;height:100%;object-fit:cover;background:#000}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid #fff;border-radius:50%;background:#0009;color:#fff;font-size:20px;cursor:pointer}.video-card.playing .video-play{display:none}.project-cta{height:360px;background:#111313 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");text-align:center;padding-top:55px;position:relative}.project-cta h2{font-size:19px;letter-spacing:.08em;margin:0 0 18px}.project-cta>p{font-size:9px;letter-spacing:.18em;color:#999}.project-cta>a{display:inline-grid;place-items:center;width:245px;height:58px;margin-top:18px;border:1px solid #999;color:#fff;text-decoration:none;font-size:10px;letter-spacing:.16em}.cta-bottom{position:absolute;left:4.3vw;right:4.3vw;bottom:32px;display:flex;justify-content:space-between;text-align:left}.cta-bottom a{color:#ddd;text-decoration:none;font-size:9px;letter-spacing:.12em}.cta-bottom div{color:#777;font-size:8px;line-height:1.45;letter-spacing:.15em}.zoom img{cursor:zoom-in;}.zoom:hover img{}.lightbox{display:none;position:fixed;z-index:1000;inset:0;background:#000e;align-items:center;justify-content:center;padding:3vw}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:92vh;object-fit:contain}.lightbox button{position:absolute;right:25px;top:16px;background:none;border:0;color:#fff;font-size:44px;cursor:pointer}@media(max-width:900px){.topbar nav,.manifest{display:none}.topbar{grid-template-columns:1fr}.cover{height:680px}.cover-copy{left:24px;top:250px;width:80%}.cover h1{font-size:42px}.metrics{height:auto;grid-template-columns:1fr;padding:20px 24px}.metrics div{border-right:0;border-bottom:1px solid #333}.about{height:auto;grid-template-columns:1fr}.about-copy{padding:50px 24px}.about figure{height:420px}.steps{width:100%;padding:0 24px 25px}.process-gallery{height:auto;grid-template-columns:1fr 1fr}.process-gallery>figure{height:430px}.process-gallery aside{min-height:430px}.result-gallery{height:auto;grid-template-columns:1fr}.result-gallery figure{height:420px}.inside{height:auto;grid-template-columns:1fr;padding:55px 24px}.video-card{margin-top:35px}.project-cta{height:400px}}

/* ===== V26 polish ===== */
body{font-size:16px}
.topbar nav a,.manifest{font-size:10px}
.cover-copy>span{font-size:12px}.cover-copy p{font-size:17px}.cover-note{font-size:11px}
.cover-meta{font-size:10px}

/* project metrics becomes a designed bridge, not a detached spreadsheet */
.metrics{
  height:245px;
  grid-template-columns:1.05fr 1fr 1fr 1fr;
  padding:0 4.3vw;
  gap:0;
  background:
    linear-gradient(105deg,rgba(201,152,77,.045),transparent 42%),
    #111313;
  border-top:1px solid rgba(201,152,77,.22);
  border-bottom:1px solid rgba(201,152,77,.22)
}
.metrics>div{height:132px;border-right:1px solid #383a39;text-align:left;padding:4px 2.2vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.metrics>div:first-child{padding-left:0}.metrics>div:last-child{border:0}
.metric-intro small,.metric small{font-size:10px;letter-spacing:.18em;color:#c9984d;font-weight:700}
.metric-intro p{max-width:245px;margin:18px 0 0;font:22px/1.25 Georgia,"Times New Roman",serif;color:#dedbd4}
.metric strong{font:44px/.95 Georgia,"Times New Roman",serif;margin:14px 0 12px;letter-spacing:-.035em}
.metric strong i{font:normal 18px/1 Arial,Helvetica,sans-serif;letter-spacing:.05em}
.metric strong.material{font-size:28px;letter-spacing:.01em}
.metric span{margin:0;font-size:11px;line-height:1.5;letter-spacing:.08em;color:#aaa8a2}

/* improve readability and hierarchy */
.about{height:620px;grid-template-columns:43% 57%}
.about-copy{padding:64px 5.5vw 45px 4.3vw}
.about-heading small,.inside-head small{display:block;color:#c9984d;font-size:10px;letter-spacing:.18em;margin-bottom:18px}
.about h2{font:34px/1 Georgia,"Times New Roman",serif;letter-spacing:-.02em;margin:0}
.gold-rule{width:58px;height:1px;background:#c9984d;margin:22px 0 32px}
.about p{font-size:16px;line-height:1.62;max-width:520px;margin-bottom:21px;color:#d8d6d0}
.mini-meta{font-size:10px;margin-top:30px}
.process>h2,.results>h2{font:30px/1 Georgia,"Times New Roman",serif}
.steps span{font-size:10px}.steps b{font-size:14px;color:#c9984d}
.process-gallery aside p{font-size:12px}.process-gallery h3{font-size:23px}

/* Cinematic video block */
.inside{
  height:auto;min-height:680px;padding:78px 4.3vw 88px;
  display:grid;grid-template-columns:29% 71%;gap:4vw;align-items:center;
  background:radial-gradient(circle at 72% 45%,rgba(201,152,77,.07),transparent 30%),#080909
}
.inside-head{align-self:center}
.inside h2{font:46px/.93 Georgia,"Times New Roman",serif;letter-spacing:-.035em;margin:0 0 26px}
.inside h2 em{font-style:normal;color:#c9984d}
.inside-head p{font-size:16px;line-height:1.55;color:#aaa8a2;max-width:330px}
.video-card{height:500px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 70px rgba(0,0,0,.32)}
.video-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.video-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.13),rgba(0,0,0,.18) 55%,rgba(0,0,0,.62));transition:.35s}
.video-label{position:absolute;left:24px;top:22px;font-size:10px;letter-spacing:.18em}
.video-caption{position:absolute;left:24px;bottom:22px;font-size:10px;letter-spacing:.16em}.video-caption b{color:#c9984d;margin-left:12px}
.video-play{position:static;transform:none;width:86px;height:86px;border:1px solid rgba(255,255,255,.85);background:rgba(5,5,5,.45);backdrop-filter:blur(5px);display:grid;place-items:center}
.video-play span{transform:translateX(2px)}
.video-card.playing .video-overlay{opacity:0;pointer-events:none}
.video-card.playing video{object-fit:contain}

/* Gallery lightbox controls */
.lightbox{user-select:none}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);width:58px;height:58px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:27px;cursor:pointer}
.lightbox .lb-prev{left:25px}.lightbox .lb-next{right:25px}
.lightbox .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.16em;color:#ddd}
.lightbox>button:not(.lb-prev):not(.lb-next){z-index:3}

@media(max-width:900px){
 .metrics{height:auto;grid-template-columns:1fr;padding:30px 24px}.metrics>div{height:auto;min-height:125px;padding:22px 0!important;border-right:0;border-bottom:1px solid #383a39}
 .about{height:auto}.about p{font-size:15px}.inside{grid-template-columns:1fr;padding:60px 24px}.video-card{height:55vw;min-height:280px}.inside h2{font-size:40px}
 .lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}
}


/* ==========================================================
   V28 — stable fullscreen presentation built from V26.
   No destructive layout rewrite: only viewport sizing,
   typography/readability, and section-to-section navigation.
   ========================================================== */
@media (min-width:901px){
  html{
    scroll-snap-type:y mandatory;
    overscroll-behavior-y:contain;
  }
  body{overflow-x:hidden}

  .screen{
    width:100%;
    height:100vh !important;
    min-height:100vh !important;
    max-height:100vh !important;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    position:relative;
  }

  /* 01 — Hero + metrics */
  .screen-intro{
    display:grid;
    grid-template-rows:minmax(0,1fr) 245px;
    background:#080909;
  }
  .screen-intro .cover{
    height:auto !important;
    min-height:0 !important;
  }
  .screen-intro .metrics{
    height:245px !important;
  }
  .cover-copy{top:38%}
  .cover h1{font-size:clamp(48px,3.35vw,64px)}
  .cover-copy p{font-size:18px;line-height:1.35}
  .cover-note{font-size:12px;line-height:1.5}
  .cover-meta{font-size:11px}

  /* 02 — About */
  .about{
    height:100vh !important;
    grid-template-columns:43% 57% !important;
    align-items:stretch;
  }
  .about-copy{
    height:100%;
    padding:8vh 5.4vw 5vh 4.3vw !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .about-heading small{font-size:12px}
  .about h2{font-size:clamp(42px,3vw,56px)}
  .about p{
    max-width:610px;
    font-size:clamp(17px,1.15vw,20px) !important;
    line-height:1.62 !important;
  }
  .mini-meta{font-size:11px}
  .about>figure{height:100% !important}

  /* 03 — Process */
  .process{
    height:100vh !important;
    padding:0 !important;
    display:grid;
    grid-template-rows:105px 105px minmax(0,1fr);
    background:#080909;
  }
  .process>h2{
    margin:0 !important;
    padding:48px 4.3vw 0;
    align-self:end;
    font-size:clamp(40px,3.1vw,56px) !important;
  }
  .steps{
    width:100% !important;
    padding:24px 4.3vw 22px !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:4vw !important;
    align-items:start;
    border-bottom:1px solid rgba(201,152,77,.20);
  }
  .steps b{font-size:15px !important}
  .steps span{
    font-size:12px !important;
    line-height:1.42 !important;
  }
  .process-gallery{
    height:auto !important;
    min-height:0;
    grid-template-columns:28% 29% 22% 21% !important;
  }
  .process-gallery aside{
    padding:26px 2.2vw 34px !important;
    justify-content:flex-end;
  }
  .process-gallery aside figure{
    height:31vh !important;
    min-height:200px;
    margin:0 0 24px !important;
  }
  .process-gallery h3{font-size:clamp(23px,1.8vw,31px) !important}
  .process-gallery aside p{font-size:14px !important;line-height:1.52 !important}

  /* 04 — Results */
  .results{
    height:100vh !important;
    padding:0 !important;
    display:grid;
    grid-template-rows:125px minmax(0,1fr);
    background:#080909;
  }
  .results>h2{
    margin:0 !important;
    padding:60px 4.3vw 0;
    font-size:clamp(42px,3.1vw,56px) !important;
  }
  .result-gallery{
    height:auto !important;
    min-height:0;
    gap:12px !important;
  }

  /* 05 — Video */
  .inside{
    height:100vh !important;
    min-height:100vh !important;
    padding:7vh 4.3vw !important;
    grid-template-columns:30% 66% !important;
    gap:4% !important;
    align-items:center !important;
  }
  .inside h2{
    font-size:clamp(54px,4.25vw,78px) !important;
    line-height:.92 !important;
  }
  .inside-head small{font-size:12px !important}
  .inside-head p{
    max-width:390px;
    font-size:18px !important;
    line-height:1.58 !important;
  }
  .video-card{
    height:min(68vh,680px) !important;
  }

  /* 06 — Final */
  .project-cta{
    height:100vh !important;
    padding:0 4.3vw !important;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .project-cta h2{font-size:clamp(32px,2.7vw,48px) !important}
  .project-cta>p{font-size:12px !important}
  .project-cta>a{
    width:290px !important;
    height:68px !important;
    font-size:12px !important;
  }

  /* Metrics readability */
  .metric-intro small,.metric small{font-size:11px !important}
  .metric-intro p{font-size:24px !important}
  .metric strong{font-size:46px !important}
  .metric strong.material{font-size:30px !important}
  .metric span{font-size:12px !important}

  /* Screen position indicator */
  .screen-dots{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:90;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .screen-dots span{
    width:7px;height:7px;border-radius:50%;
    border:1px solid rgba(201,152,77,.72);
    background:rgba(8,9,9,.28);
    transition:.25s ease;
  }
  .screen-dots span.active{
    background:#c9984d;
    box-shadow:0 0 0 4px rgba(201,152,77,.12);
  }
}

/* Laptop-height safeguard */
@media (min-width:901px) and (max-height:780px){
  .screen-intro{grid-template-rows:minmax(0,1fr) 205px}
  .screen-intro .metrics{height:205px !important}
  .metric-intro p{font-size:20px !important}
  .metric strong{font-size:39px !important}
  .about-copy{padding-top:6vh !important;padding-bottom:3vh !important}
  .about p{font-size:15px !important;line-height:1.48 !important;margin-bottom:14px !important}
  .process{grid-template-rows:88px 92px minmax(0,1fr)}
  .process>h2{padding-top:35px}
  .steps{padding-top:17px !important;padding-bottom:16px !important}
  .process-gallery aside figure{height:27vh !important;min-height:165px}
  .results{grid-template-rows:100px minmax(0,1fr)}
  .results>h2{padding-top:40px}
  .inside h2{font-size:50px !important}
  .inside-head p{font-size:15px !important}
  .video-card{height:64vh !important}
}

@media(max-width:900px){
  .screen-dots{display:none}
  html{scroll-snap-type:none}
}


/* ==========================================================
   V29 — title stability + better hero + exact-style contacts
   ========================================================== */

/* Hero crop for high-quality showroom image */
.cover-img{
  object-position:center 40% !important;
  filter:brightness(.62) saturate(.84) contrast(1.04) !important;
}
.cover-shade{
  background:
    linear-gradient(90deg,rgba(4,5,5,.92) 0%,rgba(4,5,5,.66) 28%,rgba(4,5,5,.16) 58%,rgba(4,5,5,.26) 100%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 45%) !important;
}

/* Fix text collision/clipping in the video screen at all desktop widths. */
.inside-head{
  min-width:0 !important;
  overflow:visible !important;
  padding-left:0 !important;
}
.inside h2{
  max-width:100% !important;
  font-size:clamp(40px,3.65vw,68px) !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  white-space:normal !important;
}
.inside h2 em{display:block}
.inside-head p{max-width:420px !important}
@media (min-width:901px) and (max-width:1180px){
  .inside{grid-template-columns:34% 62% !important;gap:4% !important}
  .inside h2{font-size:clamp(38px,4.7vw,54px) !important}
}
@media (max-width:900px){
  .inside h2{font-size:clamp(38px,10vw,52px) !important}
}

/* RESULTS: all images are finished-state imagery, no process photo. */
.result-gallery img{object-position:center !important}

/* Final contacts screen — same visual language as approved main page. */
.portfolio-contacts{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 48%,rgba(210,158,73,.09),transparent 23%),
    linear-gradient(110deg,#090a09 0%,#0c0d0c 58%,#12100c 100%) !important;
  color:#f1eee8;
}
.contact-stage{
  position:relative;
  z-index:3;
  width:min(1600px,calc(100vw - 90px));
  height:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(40px,4vw,84px);
}
.contact-copy{max-width:760px}
.contact-kicker{
  color:#c9984d;
  font-size:14px;
  line-height:1.45;
  font-weight:800;
  letter-spacing:.12em;
}
.contact-copy h2{
  max-width:760px;
  margin:18px 0 24px;
  font:400 clamp(68px,8.2vh,108px)/.88 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
}
.contact-copy>p{
  max-width:620px;
  color:#c9c3b9;
  font-size:clamp(18px,1.9vh,22px);
  line-height:1.55;
}
.contact-links{
  display:flex;
  justify-content:flex-start;
  gap:24px;
  margin-top:46px;
  flex-wrap:wrap;
}
.contact-links a{
  width:96px;
  color:#dcd7cf;
  text-decoration:none;
  text-align:center;
  font-size:11px;
}
.contact-links .contact-icon{
  display:grid;
  place-items:center;
  width:64px;height:64px;
  margin:0 auto 10px;
  border:1px solid rgba(201,152,77,.62);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.contact-links .contact-icon img{width:27px;height:27px;object-fit:contain}
.contact-links a:last-child .contact-icon img{width:31px;height:31px;border-radius:8px}
.all-projects-link{
  display:inline-block;
  margin-top:40px;
  color:#8f887e;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}
.contact-art{
  position:relative;
  height:72vh;
  min-height:480px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.contact-art::before{
  content:"";
  position:absolute;
  width:135%;height:115%;
  right:-30%;
  border-radius:50%;
  background:
    radial-gradient(circle at 47% 46%,rgba(217,169,90,.13),transparent 30%),
    repeating-linear-gradient(146deg,transparent 0 22px,rgba(211,158,72,.17) 23px 25px,transparent 26px 39px);
  -webkit-mask-image:radial-gradient(circle,#000 0 33%,transparent 69%);
  mask-image:radial-gradient(circle,#000 0 33%,transparent 69%);
}
.contact-art img{
  position:relative;z-index:2;
  width:min(25vw,340px);height:min(25vw,340px);
  object-fit:contain;opacity:.28;
  filter:grayscale(.25) sepia(.4) drop-shadow(0 20px 50px rgba(0,0,0,.5));
}
.contact-art-line{
  position:absolute;z-index:3;
  left:calc(50% - 22px);bottom:3.6vh;
  width:1px;height:76px;
  background:linear-gradient(#c9984d,transparent);
  opacity:.68;
}
.contact-art-copy{
  position:absolute;z-index:3;
  left:50%;bottom:3.5vh;
  transform:translateX(-50%);
  color:#6f685f;opacity:.72;
  font:700 9px/1.65 Arial,Helvetica,sans-serif;
  letter-spacing:.19em;
  width:max-content;max-width:190px;
}
.contact-orbit{
  position:absolute;border:1px solid rgba(202,152,77,.09);
  border-radius:50%;pointer-events:none;
}
.contact-orbit-a{width:52vw;height:52vw;right:-21vw;top:-19vw}
.contact-orbit-b{width:34vw;height:34vw;right:-9vw;bottom:-16vw}

/* Animated gold lines, copied conceptually from approved main page V23. */
.ambient-lines{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
  --mx:0px;--my:0px;
}
.ambient-line{
  position:absolute;display:block;height:1px;
  width:clamp(210px,26vw,470px);
  opacity:.36;
  background:linear-gradient(90deg,transparent,rgba(201,152,77,.08),rgba(229,180,99,.72),rgba(201,152,77,.10),transparent);
  box-shadow:0 0 14px rgba(201,152,77,.10);
}
.al-1{left:-12vw;top:21%;animation:contactLineA 24s ease-in-out infinite alternate}
.al-2{right:-15vw;top:43%;width:34vw;animation:contactLineB 31s ease-in-out infinite alternate}
.al-3{left:35%;bottom:13%;width:24vw;opacity:.22;animation:contactLineC 28s ease-in-out infinite alternate}
@keyframes contactLineA{0%{transform:translate(-4vw,-2vh) rotate(-14deg);opacity:.16}100%{transform:translate(25vw,14vh) rotate(-14deg);opacity:.42}}
@keyframes contactLineB{0%{transform:translate(5vw,8vh) rotate(22deg);opacity:.13}100%{transform:translate(-27vw,-13vh) rotate(22deg);opacity:.34}}
@keyframes contactLineC{0%{transform:translate(-10vw,2vh) rotate(-6deg);opacity:.12}100%{transform:translate(19vw,-11vh) rotate(-6deg);opacity:.28}}

@media (min-width:901px) and (max-height:780px){
  .contact-copy h2{font-size:62px}
  .contact-links{margin-top:28px}
  .contact-art{min-height:390px}
}
@media(max-width:900px){
  .portfolio-contacts{height:auto !important;min-height:100vh !important;max-height:none !important}
  .contact-stage{width:calc(100% - 32px);grid-template-columns:1fr;padding:70px 0}
  .contact-copy h2{font-size:54px}
  .contact-art{min-height:280px;height:300px;justify-content:center}
  .contact-art img{width:220px;height:220px}
  .contact-art-copy,.contact-art-line{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ambient-line{animation:none!important}
}


/* ==========================================================
   V30 — intentional soft-focus hero.
   Low-resolution source is treated as atmospheric background;
   typography becomes the focal point.
   ========================================================== */
.cover{
  background:#070808 !important;
  overflow:hidden !important;
}
.cover-img{
  inset:-3% !important;
  width:106% !important;
  height:106% !important;
  object-fit:cover !important;
  object-position:center 56% !important;
  filter:
    blur(5.5px)
    brightness(.40)
    saturate(.68)
    contrast(.95) !important;
  transform:scale(1.025);
}
.cover-shade{
  background:
    linear-gradient(90deg,
      rgba(4,5,5,.97) 0%,
      rgba(4,5,5,.90) 24%,
      rgba(4,5,5,.63) 45%,
      rgba(4,5,5,.42) 66%,
      rgba(4,5,5,.58) 100%),
    radial-gradient(circle at 70% 38%,rgba(201,152,77,.08),transparent 28%),
    linear-gradient(0deg,rgba(0,0,0,.52),transparent 42%) !important;
  backdrop-filter:blur(.5px);
}
.cover-copy{
  width:min(700px,45vw) !important;
  top:50% !important;
  transform:translateY(-42%) !important;
}
.cover-copy>span{
  color:#d2a159 !important;
  font-size:12px !important;
  letter-spacing:.20em !important;
}
.cover h1{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(74px,7.1vw,126px) !important;
  line-height:.86 !important;
  letter-spacing:-.055em !important;
  margin:22px 0 26px !important;
  color:#f4f0e8 !important;
  text-shadow:0 8px 35px rgba(0,0,0,.28);
}
.cover-copy p{
  max-width:500px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  letter-spacing:.12em !important;
  color:#d2ccc2 !important;
}
.cover-meta{
  width:min(450px,100%) !important;
  margin-top:38px !important;
  border-color:rgba(201,152,77,.35) !important;
  color:#c8c0b5 !important;
}
.cover-note{
  right:4.6vw !important;
  bottom:8vh !important;
  max-width:230px !important;
  font-size:10px !important;
  line-height:1.6 !important;
  letter-spacing:.16em !important;
  color:#8f887e !important;
  opacity:.78;
}

/* A very subtle editorial gold hairline makes the "blurred on purpose"
   treatment feel designed rather than like a bad source image. */
.cover::after{
  content:"";
  position:absolute;
  z-index:2;
  left:4.3vw;
  bottom:6.5vh;
  width:150px;
  height:1px;
  background:linear-gradient(90deg,#c9984d,transparent);
  opacity:.72;
}

/* Wide desktop: keep copy dominant and image atmospheric. */
@media(min-width:1500px){
  .cover-copy{width:760px !important}
  .cover h1{font-size:118px !important}
}

/* Laptop safeguard */
@media(min-width:901px) and (max-height:780px){
  .cover h1{font-size:68px !important}
  .cover-copy{top:48% !important}
  .cover-copy p{font-size:13px !important}
  .cover-note{bottom:7vh !important}
}

/* Mobile: soften less to retain recognizability. */
@media(max-width:900px){
  .cover-img{
    filter:blur(3px) brightness(.40) saturate(.72) contrast(.96) !important;
  }
  .cover-copy{
    width:calc(100% - 48px) !important;
    left:24px !important;
  }
  .cover h1{
    font-size:clamp(50px,15vw,76px) !important;
  }
  .cover-note{display:none}
}


/* ==========================================================
   V32 — Rostselmash-specific red identity.
   The red is restricted to the first presentation screen and
   its metrics so the rest of the portfolio keeps the site's
   premium black / warm-neutral system.
   ========================================================== */

/* Brand line: no subtitle under ЙЕН ПЕТРОВ */
.topbar .brand small,
.topbar .brand span:last-child:empty { display:none !important; }

/* HERO — factory red becomes the project signature */
.screen-intro .cover h1{
  color:#ef2029 !important;
  text-shadow:
    0 0 18px rgba(239,32,41,.10),
    0 10px 36px rgba(0,0,0,.42) !important;
}
.screen-intro .cover-copy>span{
  color:#ef2029 !important;
}
.screen-intro .cover::after{
  background:linear-gradient(90deg,#ef2029,rgba(239,32,41,0)) !important;
  opacity:.82 !important;
}
.screen-intro .cover-meta{
  border-color:rgba(239,32,41,.45) !important;
}

/* METRICS — white + red, deliberately tied to Rostselmash signage */
.screen-intro .metrics{
  background:
    radial-gradient(circle at 6% 50%,rgba(239,32,41,.14),transparent 23%),
    linear-gradient(105deg,rgba(239,32,41,.055),transparent 46%),
    #101212 !important;
  border-top:1px solid rgba(239,32,41,.34) !important;
  border-bottom:1px solid rgba(239,32,41,.22) !important;
}
.screen-intro .metrics>div{
  border-right-color:rgba(239,32,41,.36) !important;
}
.screen-intro .metrics>div:last-child{
  border-right:0 !important;
}
.screen-intro .metric-intro small,
.screen-intro .metric small{
  color:#ef2029 !important;
}
.screen-intro .metric-intro p,
.screen-intro .metric strong,
.screen-intro .metric span{
  color:#f2eee7 !important;
}
.screen-intro .metric strong i{
  color:#f2eee7 !important;
}
.screen-intro .metric:first-of-type strong{
  color:#f2eee7 !important;
}
.screen-intro .metric:first-of-type strong::first-letter{
  color:#f2eee7 !important;
}

/* red accent on the + sign without altering the factual 3000+ value */
.screen-intro .metric:nth-of-type(2) strong{
  position:relative;
}
.screen-intro .metric:nth-of-type(2) strong{
  color:#f2eee7 !important;
}

/* Stronger vertical red separators like the approved visual */
@media(min-width:901px){
  .screen-intro .metrics>div:not(:last-child){
    border-right:1px solid rgba(239,32,41,.55) !important;
  }
}

/* Keep the rest of the case study in the existing gold system. */


/* ==========================================================
   V33 — Rostselmash red identity across the complete case.
   Red is a project-specific accent; layout/content unchanged.
   ========================================================== */
:root{
  --rs-red:#ef2029;
  --rs-red-soft:rgba(239,32,41,.55);
  --rs-red-faint:rgba(239,32,41,.14);
}

/* Navigation */
.topbar nav a:hover,
.topbar nav a:focus{color:var(--rs-red)!important}
.topbar nav a::after{background:var(--rs-red)!important}

/* Shared editorial labels */
.about-heading small,
.inside-head small,
.process .steps b,
.metric-intro small,.metric small{
  color:var(--rs-red)!important;
}
.gold-rule{background:var(--rs-red)!important}

/* ABOUT */
.about{
  background:
    radial-gradient(circle at 3% 52%,rgba(239,32,41,.055),transparent 25%),
    #080909!important;
}
.about-heading h2::after{
  content:"";
  display:block;
  width:64px;height:2px;
  margin-top:22px;
  background:var(--rs-red);
}
.mini-meta{
  border-top-color:rgba(239,32,41,.28)!important;
}
.mini-meta span:last-child{color:var(--rs-red)!important}

/* PROCESS */
.process{
  background:
    linear-gradient(105deg,rgba(239,32,41,.035),transparent 38%),
    #080909!important;
}
.process>h2::first-letter{color:var(--rs-red)}
.steps{
  border-bottom-color:rgba(239,32,41,.26)!important;
}
.steps div{
  position:relative;
}
.steps div::after{
  content:"";
  position:absolute;
  left:0;bottom:-14px;
  width:42px;height:1px;
  background:var(--rs-red);
  opacity:.68;
}
.process-gallery aside{
  border-left-color:rgba(239,32,41,.20)!important;
}
.process-gallery aside h3{
  position:relative;
}
.process-gallery aside h3::before{
  content:"";
  display:block;
  width:46px;height:2px;
  background:var(--rs-red);
  margin-bottom:16px;
}

/* RESULTS */
.results{
  background:
    radial-gradient(circle at 95% 15%,rgba(239,32,41,.045),transparent 25%),
    #080909!important;
}
.results>h2{
  position:relative;
}
.results>h2::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:72px;height:2px;
  margin-left:22px;
  background:var(--rs-red);
}
.result-gallery figure{
  border-color:rgba(239,32,41,.12)!important;
}
.result-gallery figure::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--rs-red),transparent 72%);
  opacity:.62;
  pointer-events:none;
}

/* VIDEO */
.inside{
  background:
    radial-gradient(circle at 70% 45%,rgba(239,32,41,.075),transparent 30%),
    #080909!important;
}
.inside h2 em{color:var(--rs-red)!important}
.video-card{
  border-color:rgba(239,32,41,.28)!important;
}
.video-label{color:#fff}
.video-caption b{color:var(--rs-red)!important}
.video-play{
  border-color:rgba(239,32,41,.88)!important;
  box-shadow:0 0 0 1px rgba(239,32,41,.12),0 0 35px rgba(239,32,41,.12);
}
.video-play span{color:var(--rs-red)!important}

/* Lightbox */
.lightbox .lb-prev:hover,.lightbox .lb-next:hover{
  border-color:var(--rs-red)!important;
  color:var(--rs-red)!important;
}
.lightbox .lb-count{color:#fff!important}

/* CONTACTS: preserve the approved gold main-site identity, but connect the
   project page to it with restrained Rostselmash-red typography accents. */
.portfolio-contacts .contact-kicker{color:var(--rs-red)!important}
.portfolio-contacts .all-projects-link:hover{color:var(--rs-red)!important}

/* Section-position dots become project red */
.screen-dots span{
  border-color:rgba(239,32,41,.72)!important;
}
.screen-dots span.active{
  background:var(--rs-red)!important;
  box-shadow:0 0 0 4px rgba(239,32,41,.12)!important;
}

/* Selection */
::selection{background:var(--rs-red);color:#fff}

/* Small red editorial marker on each chapter */
@media(min-width:901px){
  .about::after,.process::after,.results::after,.inside::after{
    content:"";
    position:absolute;
    right:4.3vw;top:50%;
    width:2px;height:42px;
    background:linear-gradient(var(--rs-red),transparent);
    opacity:.55;
    pointer-events:none;
  }
}


/* V41 — cross-project final fixes only */

/* Restore approved bear + name lockup in Rostselmash header. */
.wordmark{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  line-height:1 !important;
}
.wordmark-bear{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
}
.wordmark-text{
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}

/* Make "Все проекты" on Rostselmash contacts match the church link. */
.all-projects-link{
  display:inline-block !important;
  margin-top:36px !important;
  color:#8e887e !important;
  text-decoration:none !important;
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
}
.all-projects-link:hover{color:#f2efe8 !important}

/* ==========================================================
   V57.1 — desktop hero title fit.
   Keep the full project name visible at ordinary desktop widths.
   ========================================================== */
@media (min-width:901px){
  .screen-intro .cover-copy{
    width:min(920px,68vw) !important;
    max-width:calc(100vw - 8.6vw) !important;
    overflow:visible !important;
  }
  .screen-intro .cover h1{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:nowrap !important;
    font-size:clamp(58px,6.05vw,108px) !important;
    letter-spacing:-.055em !important;
  }
}
@media (min-width:901px) and (max-height:780px){
  .screen-intro .cover h1{font-size:clamp(56px,5.4vw,76px) !important}
}