/* =========================================================
   TNOW-002 Service v2.0 — Award Edition
   Problem-solving based service presentation
   ========================================================= */

.tnservice{
  position:relative;
  overflow:hidden;
  padding:118px 0;
  color:#f3ede4;
  background:
    radial-gradient(circle at 9% 4%,rgba(196,151,75,.12),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(196,151,75,.07),transparent 31%),
    linear-gradient(155deg,#0d0e11 0%,#14171c 54%,#19140d 100%);
}

.tnservice::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.86),transparent 95%);
}

.tnservice::after{
  content:"T&N";
  position:absolute;
  right:-3%;
  top:34%;
  color:rgba(223,190,132,.018);
  font-family:Georgia,"Yu Mincho",serif;
  font-size:clamp(15rem,25vw,31rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.08em;
  pointer-events:none;
}

.tnservice__inner{
  position:relative;
  z-index:1;
}

.tnservice__header{
  padding-bottom:46px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.tnservice__eyebrow,
.tnservice__closing-kicker{
  margin:0 0 17px;
  color:#c59b55;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.tnservice__title{
  max-width:1120px;
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(3rem,5vw,5.65rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.045em;
}

.tnservice__title span{
  display:block;
}

.tnservice__title-accent{
  margin-top:.04em;
  color:transparent;
  background:linear-gradient(110deg,#f0dcb3,#b98b43,#e8c98f);
  -webkit-background-clip:text;
  background-clip:text;
}

.tnservice__manifesto{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(430px,620px);
  gap:32px;
  align-items:start;
  margin-top:32px;
}

.tnservice__manifesto-line{
  height:1px;
  margin-top:15px;
  background:linear-gradient(90deg,rgba(220,187,125,.46),rgba(255,255,255,.07),transparent);
}

.tnservice__manifesto p{
  margin:0;
}

.tnservice__manifesto-main{
  color:#e6ddd1;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.2rem,1.8vw,1.7rem);
  line-height:1.65;
}

.tnservice__manifesto-sub{
  margin-top:8px !important;
  color:#9f978d;
  font-size:.9rem;
  line-height:1.85;
}

.tnservice__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:34px;
}

.tnservice__card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:560px;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(224,198,153,.17);
  border-radius:24px;
  background:
    radial-gradient(circle at 86% 10%,rgba(197,148,72,.13),transparent 27%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.024));
  box-shadow:0 28px 72px rgba(0,0,0,.25);
  backdrop-filter:blur(17px);
  -webkit-backdrop-filter:blur(17px);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.tnservice__card::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:24px;
  width:2px;
  background:linear-gradient(180deg,transparent,#c99d54,transparent);
  opacity:.56;
  transform:scaleY(.46);
  transition:transform .35s ease,opacity .35s ease;
}

.tnservice__card::after{
  content:"T&N";
  position:absolute;
  right:-16px;
  bottom:-21px;
  color:rgba(221,188,128,.026);
  font-family:Georgia,serif;
  font-size:7.5rem;
  font-weight:700;
  letter-spacing:-.08em;
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .tnservice__card:hover{
    transform:translateY(-8px);
    border-color:rgba(215,175,104,.38);
    background:
      radial-gradient(circle at 86% 10%,rgba(197,148,72,.20),transparent 30%),
      linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.032));
    box-shadow:0 38px 86px rgba(0,0,0,.34);
  }

  .tnservice__card:hover::before{
    transform:scaleY(1);
    opacity:1;
  }
}

.tnservice__card-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.tnservice__number{
  color:#caa15c;
  font-family:Georgia,serif;
  font-size:.88rem;
}

.tnservice__word{
  color:#817a72;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.17em;
}

.tnservice__icon{
  position:relative;
  z-index:2;
  height:132px;
  display:grid;
  place-items:center;
  margin:23px 0 27px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 18%,rgba(199,151,75,.18),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .tnservice__card:hover .tnservice__icon{
    transform:translateY(-3px) rotate(-.4deg);
  }
}

.tnservice__icon--website{
  grid-template-columns:repeat(3,44px);
  align-items:end;
  gap:10px;
}

.tnservice__icon--website span{
  display:block;
  width:44px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#dabd86,#a97831);
  box-shadow:0 0 25px rgba(196,148,72,.08);
}

.tnservice__icon--website span:nth-child(1){height:34px}
.tnservice__icon--website span:nth-child(2){height:57px}
.tnservice__icon--website span:nth-child(3){height:84px}

.tnservice__calendar{
  width:122px;
  height:86px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  padding:28px 16px 14px;
  border:1px solid rgba(210,171,99,.38);
  border-radius:14px;
  position:relative;
}

.tnservice__calendar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:18px;
  height:1px;
  background:rgba(210,171,99,.28);
}

.tnservice__calendar i{
  display:block;
  border-radius:3px;
  background:rgba(207,163,88,.33);
}

.tnservice__calendar i:nth-child(2),
.tnservice__calendar i:nth-child(5){
  background:#c99b51;
  box-shadow:0 0 14px rgba(201,155,81,.17);
}

.tnservice__icon--maintenance{
  grid-template-columns:repeat(3,54px);
  gap:9px;
}

.tnservice__icon--maintenance span{
  display:block;
  width:54px;
  aspect-ratio:1;
  border:1px solid rgba(204,162,91,.24);
  border-radius:50%;
}

.tnservice__icon--maintenance span:nth-child(1){transform:scale(.55)}
.tnservice__icon--maintenance span:nth-child(2){transform:scale(.78)}
.tnservice__icon--maintenance span:nth-child(3){
  background:radial-gradient(circle,#c79b54 0 25%,transparent 27%);
  box-shadow:0 0 22px rgba(199,155,84,.10);
}

.tnservice__icon--social{
  grid-template-columns:repeat(4,34px);
  gap:17px;
}

.tnservice__icon--social span{
  width:34px;
  aspect-ratio:1;
  display:block;
  border-radius:50%;
  background:#c5984f;
  box-shadow:0 0 0 8px rgba(197,152,79,.07);
  position:relative;
}

.tnservice__icon--social span:not(:last-child)::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:25px;
  height:1px;
  background:rgba(197,152,79,.28);
}

.tnservice__card-body{
  position:relative;
  z-index:2;
}

.tnservice__label{
  margin:0 0 8px;
  color:#c59b55;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
}

.tnservice__card h3{
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.7rem,2.5vw,2.55rem);
  font-weight:500;
  line-height:1.36;
  letter-spacing:-.025em;
}

.tnservice__card-body>p:last-child{
  max-width:48ch;
  margin:16px 0 0;
  color:#aaa298;
  font-size:.88rem;
  line-height:1.85;
}

.tnservice__needs{
  position:relative;
  z-index:2;
  display:grid;
  gap:9px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.tnservice__needs li{
  position:relative;
  padding-left:18px;
  color:#ccc3b7;
  font-size:.72rem;
  line-height:1.55;
}

.tnservice__needs li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:1px;
  background:#c99c53;
}

.tnservice__link{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#efe7dc;
  font-size:.77rem;
  font-weight:900;
}

.tnservice__link span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#18130d;
  background:linear-gradient(135deg,#e1c18a,#a97934);
  transition:transform .25s ease,box-shadow .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .tnservice__link:hover span{
    transform:translateX(4px);
    box-shadow:0 8px 20px rgba(190,139,63,.20);
  }
}

.tnservice__closing{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  margin-top:26px;
  padding:27px 29px;
  border:1px solid rgba(224,198,153,.14);
  border-radius:20px;
  background:rgba(255,255,255,.035);
}

.tnservice__closing p{
  max-width:850px;
  margin:0;
  color:#9f978d;
  font-size:.85rem;
  line-height:1.85;
}

.tnservice__closing strong{
  color:#e8ded1;
}

.tnservice__closing a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#d4b171;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

.tnservice--js .tnservice__header,
.tnservice--js .tnservice__card,
.tnservice--js .tnservice__closing{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .66s cubic-bezier(.2,.8,.2,1),
    transform .66s cubic-bezier(.2,.8,.2,1);
}

.tnservice--js .is-visible{
  opacity:1;
  transform:none;
}

@media (min-width:768px) and (max-width:1199px){
  .tnservice{
    padding:96px 0;
  }

  .tnservice__manifesto{
    grid-template-columns:1fr;
    gap:18px;
  }

  .tnservice__manifesto-line{
    width:130px;
    margin-top:0;
  }

  .tnservice__card{
    min-height:540px;
  }
}

@media (max-width:767px){
  .tnservice{
    padding:76px 0;
  }

  .tnservice .container{
    width:min(var(--max),calc(100% - 28px));
  }

  .tnservice__header{
    padding-bottom:30px;
  }

  .tnservice__eyebrow{
    margin-bottom:15px;
  }

  .tnservice__title{
    font-size:clamp(2.15rem,10vw,3.05rem);
    line-height:1.16;
  }

  .tnservice__manifesto{
    grid-template-columns:1fr;
    gap:15px;
    margin-top:23px;
  }

  .tnservice__manifesto-line{
    width:92px;
    margin-top:0;
  }

  .tnservice__manifesto-main{
    font-size:1.08rem;
    line-height:1.65;
  }

  .tnservice__manifesto-sub{
    font-size:.84rem;
    line-height:1.78;
  }

  .tnservice__grid{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:23px;
  }

  .tnservice__card{
    min-height:auto;
    padding:20px;
    border-radius:20px;
  }

  .tnservice__icon{
    height:112px;
    margin:18px 0 21px;
  }

  .tnservice__icon--website{
    grid-template-columns:repeat(3,34px);
  }

  .tnservice__icon--website span{
    width:34px;
  }

  .tnservice__calendar{
    width:105px;
    height:76px;
  }

  .tnservice__icon--maintenance{
    grid-template-columns:repeat(3,44px);
  }

  .tnservice__icon--maintenance span{
    width:44px;
  }

  .tnservice__icon--social{
    grid-template-columns:repeat(4,28px);
    gap:14px;
  }

  .tnservice__icon--social span{
    width:28px;
  }

  .tnservice__icon--social span:not(:last-child)::after{
    width:20px;
  }

  .tnservice__card h3{
    font-size:1.48rem;
    line-height:1.38;
  }

  .tnservice__card-body>p:last-child{
    font-size:.84rem;
    line-height:1.8;
  }

  .tnservice__needs{
    margin-top:18px;
  }

  .tnservice__link{
    margin-top:21px;
  }

  .tnservice__closing{
    grid-template-columns:1fr;
    gap:15px;
    padding:22px;
  }

  .tnservice__closing a{
    white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnservice__card,
  .tnservice__icon,
  .tnservice__link span,
  .tnservice--js .tnservice__header,
  .tnservice--js .tnservice__card,
  .tnservice--js .tnservice__closing{
    transition:none !important;
  }

  .tnservice--js .tnservice__header,
  .tnservice--js .tnservice__card,
  .tnservice--js .tnservice__closing{
    opacity:1;
    transform:none;
  }
}