/* ============ TRI-CARD PANEL (Reviews + 2 Locations) ============ */
.sp-tri{
  position:relative;overflow:hidden;padding:90px 0;
  background:linear-gradient(160deg,#0d3540 0%,#0F3E4A 45%,#0a2d36 100%);
}
.sp-tri::before,.sp-tri::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.sp-tri::before{width:560px;height:560px;top:-200px;right:-160px;
  background:radial-gradient(circle,rgba(69,200,209,.20) 0%,rgba(69,200,209,0) 70%)}
.sp-tri::after{width:460px;height:460px;bottom:-180px;left:-140px;
  background:radial-gradient(circle,rgba(69,200,209,.13) 0%,rgba(69,200,209,0) 70%)}
.sp-tri .container{position:relative;z-index:2}

/* outer glass panel = your sketch's outer box */
.tri-panel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(69,200,209,.25);
  border-radius:26px;padding:30px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}

/* 3 equal columns */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tri-card{
  display:flex;flex-direction:column;border-radius:18px;padding:30px 26px;
  position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;
}
.tri-card:hover{transform:translateY(-8px)}

/* ---- Card 1: review hero (turquoise gradient) ---- */
.tri-review{
  background:linear-gradient(150deg,#45C8D1 0%,#2BA6B0 55%,#177c88 100%);
  color:#06333a;box-shadow:0 16px 40px rgba(69,200,209,.35);
}
.tri-review:hover{box-shadow:0 26px 60px rgba(69,200,209,.5)}
.tri-quote{position:absolute;top:18px;right:22px;font-size:44px;color:rgba(255,255,255,.25)}
.tr-gchip{background:#fff;border-radius:12px;padding:10px 18px;display:inline-block;
  align-self:flex-start;box-shadow:0 6px 16px rgba(0,0,0,.15);margin-bottom:18px}
.tr-gchip img{display:block;width:110px;height:auto}
.tr-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tr-number{font-size:52px;font-weight:800;color:#fff;line-height:1;text-shadow:0 4px 14px rgba(0,0,0,.18)}
.tr-stars{color:#fff7d6;font-size:22px;letter-spacing:3px;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.tr-sub{display:block;color:#eafcff;font-weight:700;font-size:14px;margin:6px 0 14px}
.tr-text{font-size:16px;line-height:1.7;color:#083c44;margin:0 0 20px;flex:1 1 auto;font-family:var(--font-02);}
.tr-text a{color:#06333a;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tr-btn{
  align-self:flex-start;background:#0F3E4A;color:#45C8D1;font-weight:700;font-size:14px;
  padding:13px 26px;border-radius:10px;text-decoration:none;transition:.25s;
  box-shadow:0 10px 24px rgba(6,51,58,.35);
}
.tr-btn:hover{background:#06333a;transform:translateY(-2px)}

/* ---- Cards 2 & 3: white location cards ---- */
.tri-loc{background:#fff;color:#22333c;box-shadow:0 16px 40px rgba(0,0,0,.25);border-top:5px solid transparent}
.tri-loc:hover{box-shadow:0 26px 60px rgba(0,0,0,.35);border-top-color:#45C8D1}
.tri-loc.is-new{border-top-color:#45C8D1}
.tri-loc.is-new::after{ /* subtle corner dot pattern */
  content:'';position:absolute;top:0;right:0;width:110px;height:110px;
  background-image:radial-gradient(rgba(69,200,209,.35) 1.5px,transparent 1.6px);
  background-size:12px 12px;opacity:.5;pointer-events:none;
}
.tl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.tl-pin{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;font-size:21px;color:#06333a;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#45C8D1,#2BA6B0);box-shadow:0 8px 18px rgba(69,200,209,.4);
}
.tl-badge{background:#0F3E4A;color:#fff;padding:7px 15px;border-radius:999px;font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.tl-badge.badge-new{background:#45C8D1;color:#06333a}
.tri-loc h3{font-family:var(--font-01);font-size:21px;color:#0F3E4A;margin:0 0 14px}
.tl-nap{list-style:none;margin:0;padding:0;flex:1 1 auto}
.tl-nap li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:16px;line-height:1.6;color:#5A6B74;font-family: var(--font-02);}
.tl-nap li i{color:#2BA6B0;width:17px;text-align:center;font-size:14px;margin-top:4px;flex-shrink:0}
.tl-nap a{color:#2BA6B0;font-weight:700;text-decoration:none}
.tl-nap a:hover{text-decoration:underline}
.tl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px dashed #DCE6EA}
.tl-actions .yellow-btn{margin:0}
.tl-ghost{
  display:inline-block;padding:11px 20px;border-radius:8px;font-size:13.5px;font-weight:700;
  border:2px solid #0F3E4A;color:#0F3E4A;text-decoration:none;transition:.25s;
}
.tl-ghost:hover{background:#0F3E4A;color:#fff}

/* ---- trust footer ---- */
.tri-trust{display:flex;gap:12px;justify-content:center;list-style:none;margin:26px 0 0;padding:0;flex-wrap:wrap}
.tri-trust li{
  display:flex;align-items:center;gap:9px;color:#cfe3e7;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:10px 20px;border-radius:999px;
}
.tri-trust li i{color:#45C8D1}

/* ============ RESPONSIVE ============ */
@media (max-width:1199.98px){
  .tri-grid{grid-template-columns:1fr 1fr}
  .tri-review{grid-column:1 / -1}          /* review card becomes full-width banner */
  .tr-text{flex:0 1 auto}
}
@media (max-width:767.98px){
  .sp-tri{padding:60px 0}
  .tri-panel{padding:18px;border-radius:20px}
  .tri-grid{grid-template-columns:1fr;gap:18px}
  .tri-card{padding:24px 20px}
  .tr-number{font-size:42px}
  .tl-actions{flex-direction:column}
  .tl-actions .yellow-btn,.tl-actions .tl-ghost{width:100%;text-align:center}
  .tr-btn{width:100%;text-align:center}
  .tri-trust li{width:100%;justify-content:center}
}