/* =========================================================
   TINK HOME — PRODUCT / SERVICE DETAIL PAGES
   Shared by every gallery page.
   Main css/style.css is loaded first.
   ========================================================= */

.product-page{
  background:var(--paper);
}

.product-hero{
  min-height:92svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#10171b;
}

.product-hero-media{
  position:absolute;
  inset:0;
}
.product-hero-media img{
  filter:brightness(.42) saturate(.78);
  transform:scale(1.035);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.product-hero:hover .product-hero-media img{transform:scale(1.06)}

.product-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 68% 38%,rgba(8,123,193,.08),transparent 42%),
    linear-gradient(90deg,rgba(4,9,12,.88),rgba(4,9,12,.18) 76%),
    linear-gradient(0deg,rgba(4,9,12,.84),transparent 58%);
}

.product-hero-content{
  position:relative;
  z-index:3;
  width:100%;
  padding:150px 0 85px;
}
.product-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  color:#b5c0c5;
  font:700 8px Manrope,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.product-kicker span{
  width:34px;height:1px;background:var(--blue);display:inline-block;
}
.product-hero h1{
  max-width:950px;
  margin:23px 0 25px;
  font:700 clamp(58px,8vw,112px)/.88 Manrope,sans-serif;
  letter-spacing:-.075em;
}
.product-hero h1 em{
  color:#82d0f6;
  font-style:italic;
  font-weight:500;
}
.product-hero-copy{
  max-width:590px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.9;
}
.product-hero-meta{
  display:flex;
  gap:35px;
  flex-wrap:wrap;
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.product-hero-meta div{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.product-hero-meta span{
  color:#7f8b91;
  font:700 7px Manrope;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.product-hero-meta strong{
  font:600 10px Manrope;
  letter-spacing:.04em;
}

.product-section{
  padding:115px 0;
}
.product-intro{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:80px;
  align-items:end;
}
.product-intro h2{
  font:700 clamp(43px,5.6vw,76px)/.94 Manrope;
  letter-spacing:-.065em;
  margin-top:18px;
}
.product-intro h2 em{
  color:var(--blue);
  font-style:italic;
  font-weight:500;
}
.product-intro-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
  max-width:470px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  margin-top:52px;
}
.gallery-item{
  position:relative;
  min-height:360px;
  overflow:hidden;
  background:#dfe5e7;
  border:1px solid var(--line);
}
.gallery-item:nth-child(1){grid-column:span 7;min-height:560px}
.gallery-item:nth-child(2){grid-column:span 5}
.gallery-item:nth-child(3){grid-column:span 5}
.gallery-item:nth-child(4){grid-column:span 7}
.gallery-item img{
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
  filter:saturate(.82);
}
.gallery-item:hover img{transform:scale(1.055)}
.gallery-number{
  position:absolute;
  top:16px;left:16px;
  z-index:2;
  width:34px;height:34px;
  display:grid;place-items:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
  font:700 8px Manrope;
}
.gallery-caption{
  position:absolute;
  left:20px;right:20px;bottom:18px;
  z-index:2;
  color:#fff;
  font:700 8px Manrope;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

.video-section{
  background:#e9eef0;
}
.video-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px;
  align-items:center;
}
.video-copy h2{
  font:700 clamp(42px,5vw,72px)/.95 Manrope;
  letter-spacing:-.065em;
  margin:18px 0;
}
.video-copy h2 em{
  color:var(--blue);
  font-style:italic;
  font-weight:500;
}
.video-copy p{
  max-width:410px;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}
.video-frame{
  position:relative;
  min-height:510px;
  overflow:hidden;
  background:#10171b;
  border:1px solid rgba(11,17,21,.12);
}
.video-frame video{
  width:100%;
  height:100%;
  min-height:510px;
  display:block;
  object-fit:cover;
}
.video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  color:#fff;
  background:
    radial-gradient(circle at center,rgba(8,123,193,.12),transparent 50%),
    #11191e;
}
.video-placeholder .play{
  width:70px;height:70px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  margin-bottom:22px;
  font-size:19px;
}
.video-placeholder strong{
  font:700 11px Manrope;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.video-placeholder small{
  margin-top:10px;
  color:#91a0a7;
  font-size:11px;
}

.spec-section{
  background:#fff;
}
.spec-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:48px;
}
.spec-card{
  min-height:230px;
  padding:27px;
  border:1px solid var(--line);
  background:var(--paper);
}
.spec-card span{
  display:block;
  color:var(--blue);
  font:700 8px Manrope;
  letter-spacing:.16em;
  margin-bottom:65px;
}
.spec-card h3{
  font:700 22px Manrope;
  letter-spacing:-.035em;
  margin-bottom:10px;
}
.spec-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.75;
}

.product-cta{
  min-height:540px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.product-cta-media{
  position:absolute;inset:0;
}
.product-cta-media img{
  filter:brightness(.35) saturate(.68);
}
.product-cta-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(5,12,16,.12),rgba(5,12,16,.82));
}
.product-cta-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
}
.product-cta h2{
  font:700 clamp(50px,6.8vw,88px)/.9 Manrope;
  letter-spacing:-.07em;
  margin:20px 0;
}
.product-cta h2 em{
  color:#7bcaf1;font-style:italic;font-weight:500;
}
.product-cta p{
  color:#c1cace;
  font-size:13px;
  margin-bottom:25px;
}

.product-back{
  margin-top:28px;
  display:inline-flex;
  color:var(--muted);
  font:700 8px Manrope;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-bottom:1px solid #b9c3c7;
  padding-bottom:7px;
}
.product-back span{color:var(--blue);margin-right:9px}

@media(max-width:950px){
  .product-intro,.video-layout{grid-template-columns:1fr;gap:40px}
  .gallery-item:nth-child(n){grid-column:span 6}
  .gallery-item:nth-child(1),.gallery-item:nth-child(4){min-height:430px}
  .spec-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .product-hero{min-height:82svh}
  .product-hero-content{padding:130px 0 60px}
  .product-hero h1{font-size:57px}
  .product-section{padding:80px 0}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item:nth-child(n){grid-column:1;min-height:330px}
  .gallery-item:nth-child(1){min-height:430px}
  .video-frame,.video-frame video{min-height:350px}
  .spec-grid{grid-template-columns:1fr}
  .spec-card{min-height:210px}
}
@media(prefers-reduced-motion:reduce){
  .product-hero-media img,.gallery-item img{transition:none}
}