/* =============================================================
   T3 Service Cards — front-end styles
   Everything is scoped under .t3sc so nothing collides with
   Elementor or theme globals. Colors/spacing come in as CSS
   custom properties written by the widget's Style controls.
   ============================================================= */
.t3sc{
  --t3sc-blue:#3CA9DA;
  --t3sc-navy:#0C1E38;
  --t3sc-ink:#111111;
  --t3sc-body:#666666;
  --t3sc-line:#E2E8F0;
  --t3sc-cols:3;
  --t3sc-gap:30px;
  --t3sc-pad:28px;
  --t3sc-accent:4px;
  --t3sc-ratio:16/9;
  --t3sc-gap-title:15px;
  --t3sc-gap-desc:20px;
  font-family:'Poppins','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
.t3sc *,.t3sc *::before,.t3sc *::after{box-sizing:border-box;}

/* ---------- section header ---------- */
.t3sc__head{text-align:center;margin:0 auto 50px;}
.t3sc__sub{
  margin:0 0 14px;color:var(--t3sc-blue);
  font-size:13px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;line-height:1.4;
}
.t3sc__title{
  margin:0 auto 18px;max-width:800px;color:var(--t3sc-ink);
  font-size:36px;font-weight:800;line-height:1.25;text-wrap:pretty;
}
.t3sc__text{
  margin:0 auto;max-width:750px;color:var(--t3sc-body);
  font-size:15px;line-height:1.6;text-wrap:pretty;
}

/* ---------- grid ---------- */
.t3sc__grid{
  display:grid;
  grid-template-columns:repeat(var(--t3sc-cols),minmax(0,1fr));
  gap:var(--t3sc-gap);
}

/* ---------- card shell ----------
   The navy accent is a bottom-anchored BACKGROUND layer, not a
   border-bottom: with overflow:hidden on the card, absolutely
   positioned overlays are clipped to the padding box, so anything
   drawn in a border area would never render. */
.t3sc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding-bottom:var(--t3sc-accent);
  background:linear-gradient(var(--t3sc-navy),var(--t3sc-navy)) bottom/100% var(--t3sc-accent) no-repeat,#FFFFFF;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-radius:0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.t3sc-card__media{
  position:relative;
  aspect-ratio:var(--t3sc-ratio);
  overflow:hidden;
  background:#E8EDF2;
}
@supports not (aspect-ratio:16/9){
  .t3sc-card__media{height:0;padding-bottom:56.25%;}
}
.t3sc-card__img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.t3sc-card__body{
  padding:var(--t3sc-pad);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.t3sc-card__title{
  margin:0 0 var(--t3sc-gap-title);color:var(--t3sc-ink);
  font-size:20px;font-weight:700;line-height:1.3;text-wrap:pretty;
  transition:color .3s ease;
}
.t3sc-card__btn{
  display:inline-block;margin:var(--t3sc-gap-desc) 0 0;padding:8px 18px;
  background:var(--t3sc-blue);color:#FFFFFF;
  font-size:13px;font-weight:600;line-height:1.4;
  text-decoration:none;border:0;border-radius:0;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.t3sc-card__btn:hover,.t3sc-card__btn:focus{
  background:var(--t3sc-navy);color:#FFFFFF;text-decoration:none;
  box-shadow:0 8px 18px rgba(12,30,56,.22);
}
.t3sc-card__btn:focus-visible{outline:2px solid var(--t3sc-navy);outline-offset:3px;}
.t3sc-card__divider{
  height:0;width:100%;margin:0 0 var(--t3sc-gap-title);
  border:0;border-top:1px dashed var(--t3sc-line);
  transition:border-color .3s ease;
}
.t3sc-card__desc{margin:0;color:var(--t3sc-body);font-size:14px;line-height:1.6;transition:color .3s ease;}
.t3sc-card__overlay{position:absolute;inset:0;display:flex;padding:24px;}
.t3sc-card__overlay p{margin:0;color:#FFFFFF;font-size:14px;line-height:1.65;}

/* ================= STYLE 1 — glassmorphism slide-up ================= */
.t3sc--s1 .t3sc-card__overlay{
  align-items:center;
  background:rgba(15,23,42,.75);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.t3sc--s1 .t3sc-card__media:hover .t3sc-card__overlay,
.t3sc--s1 .t3sc-card:focus-within .t3sc-card__overlay{transform:translateY(0);}
.t3sc--s1 .t3sc-card:hover{box-shadow:0 18px 40px rgba(12,30,56,.14);}

/* ================= STYLE 2 — classic static + lift ================= */
.t3sc--s2 .t3sc-card:hover,
.t3sc--s2 .t3sc-card:focus-within{
  transform:translateY(-8px);
  box-shadow:0 22px 45px rgba(12,30,56,.16);
}
.t3sc--s2 .t3sc-card::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:var(--t3sc-accent);
  background:var(--t3sc-blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.t3sc--s2 .t3sc-card{overflow:hidden;}
.t3sc--s2 .t3sc-card:hover::after,
.t3sc--s2 .t3sc-card:focus-within::after{transform:scaleX(1);}

/* ================= STYLE 3 — accordion reveal ================= */
.t3sc--s3 .t3sc__grid{align-items:start;}
.t3sc--s3 .t3sc-card__reveal{
  width:100%;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.3,1),opacity .4s ease .05s;
}
.t3sc--s3 .t3sc-card:hover .t3sc-card__reveal,
.t3sc--s3 .t3sc-card:focus-within .t3sc-card__reveal{max-height:280px;opacity:1;}
.t3sc--s3 .t3sc-card:hover,
.t3sc--s3 .t3sc-card:focus-within{box-shadow:0 20px 42px rgba(12,30,56,.15);}

/* ================= STYLE 4 — full-card gradient overlay ================= */
.t3sc--s4 .t3sc-card{overflow:hidden;}
.t3sc--s4 .t3sc-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,#0F5C86 0%,var(--t3sc-navy) 85%);
  opacity:0;transition:opacity .45s ease;z-index:1;
}
.t3sc--s4 .t3sc-card:hover,
.t3sc--s4 .t3sc-card:focus-within{transform:translateY(-4px);box-shadow:0 22px 45px rgba(12,30,56,.2);}
.t3sc--s4 .t3sc-card:hover::before,
.t3sc--s4 .t3sc-card:focus-within::before{opacity:1;}
.t3sc--s4 .t3sc-card__media,
.t3sc--s4 .t3sc-card__body{position:relative;z-index:2;}
.t3sc--s4 .t3sc-card__img{transition:opacity .45s ease;}
.t3sc--s4 .t3sc-card:hover .t3sc-card__img,
.t3sc--s4 .t3sc-card:focus-within .t3sc-card__img{opacity:.35;}
.t3sc--s4 .t3sc-card:hover .t3sc-card__title,
.t3sc--s4 .t3sc-card:focus-within .t3sc-card__title,
.t3sc--s4 .t3sc-card:hover .t3sc-card__desc,
.t3sc--s4 .t3sc-card:focus-within .t3sc-card__desc{color:#FFFFFF;}
.t3sc--s4 .t3sc-card:hover .t3sc-card__divider,
.t3sc--s4 .t3sc-card:focus-within .t3sc-card__divider{border-top-color:rgba(255,255,255,.35);}
.t3sc--s4 .t3sc-card:hover .t3sc-card__btn,
.t3sc--s4 .t3sc-card:focus-within .t3sc-card__btn{background:#FFFFFF;color:var(--t3sc-navy);}

/* ================= STYLE 5 — image zoom + fade-in ================= */
.t3sc--s5 .t3sc-card__img{transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.t3sc--s5 .t3sc-card__overlay{
  align-items:flex-end;
  background:rgba(12,30,56,.72);
  opacity:0;transition:opacity .4s ease;
}
.t3sc--s5 .t3sc-card__media:hover .t3sc-card__img,
.t3sc--s5 .t3sc-card:focus-within .t3sc-card__img{transform:scale(1.1);}
.t3sc--s5 .t3sc-card__media:hover .t3sc-card__overlay,
.t3sc--s5 .t3sc-card:focus-within .t3sc-card__overlay{opacity:1;}

/* ---------- placeholder shown when no image is set ---------- */
.t3sc-card__img--empty{
  background-image:linear-gradient(45deg,#E8EDF2 25%,#DCE4EC 25%,#DCE4EC 50%,#E8EDF2 50%,#E8EDF2 75%,#DCE4EC 75%);
  background-size:16px 16px;
}

/* ---------- responsive ---------- */
@media (max-width:992px){
  .t3sc__head{margin-bottom:36px;}
  .t3sc__title{font-size:30px;}
  .t3sc-card__body{padding:24px;}
}
@media (max-width:768px){
  .t3sc__head{margin-bottom:30px;}
  .t3sc__title{font-size:26px;}
  .t3sc-card__title{font-size:18px;}
  .t3sc-card__body{padding:22px;}
  /* hover-only styles reveal their copy inline on small screens */
  .t3sc--s1 .t3sc-card__overlay,
  .t3sc--s5 .t3sc-card__overlay{position:static;inset:auto;transform:none;opacity:1;}
  .t3sc--s1 .t3sc-card__overlay p,
  .t3sc--s5 .t3sc-card__overlay p{color:var(--t3sc-body);}
  .t3sc--s1 .t3sc-card__overlay,
  .t3sc--s5 .t3sc-card__overlay{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 var(--t3sc-pad) var(--t3sc-pad);}
  .t3sc--s3 .t3sc-card__reveal{max-height:none;opacity:1;overflow:visible;}
}
@media (hover:none){
  .t3sc-card:hover{transform:none;}
  .t3sc--s4 .t3sc-card:hover::before{opacity:0;}
  .t3sc--s4 .t3sc-card:hover .t3sc-card__img{opacity:1;}
  .t3sc--s2 .t3sc-card:hover::after{transform:scaleX(0);}
}
@media (prefers-reduced-motion:reduce){
  .t3sc-card,.t3sc-card *,.t3sc-card::before,.t3sc-card::after{transition:none !important;}
  .t3sc-card:hover{transform:none;}
  .t3sc--s5 .t3sc-card__media:hover .t3sc-card__img{transform:none;}
}