/* ==========================================================================
   SNATEK site styles - part 3: services bento, consulting, industries
   ========================================================================== */
.e-con.sn-svc__head{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:2.75rem}
.e-con.sn-svc__head .sn-section-head{margin-bottom:0;flex:1 1 420px}
.e-con.sn-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:1.15rem}
.e-con.sn-bento__item,.sn-bento__item{
  --accent:var(--sn-electric);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:1.9rem;background:#fff;border:1px solid var(--sn-line);border-radius:var(--sn-r);box-shadow:var(--sn-shadow-sm);
  transition:transform .34s var(--sn-ease),box-shadow .34s var(--sn-ease),border-color .34s var(--sn-ease);
}
.e-con.sn-bento__item:nth-child(1){grid-column:span 3;grid-row:span 2}
.e-con.sn-bento__item:nth-child(2),.e-con.sn-bento__item:nth-child(3){grid-column:span 3}
.e-con.sn-bento__item:nth-child(4){grid-column:span 2}
.e-con.sn-bento__item:nth-child(5){grid-column:span 4}
@media(max-width:980px){
  .e-con.sn-bento{grid-template-columns:repeat(2,1fr)}
  .e-con.sn-bento__item:nth-child(n){grid-column:span 1;grid-row:auto}
  .e-con.sn-bento__item:nth-child(1),.e-con.sn-bento__item:nth-child(5){grid-column:span 2}
}
@media(max-width:640px){.e-con.sn-bento{grid-template-columns:1fr}.e-con.sn-bento__item:nth-child(n){grid-column:span 1}}
.sn-bento__item--red{--accent:var(--sn-red)}
.sn-bento__item--deep{--accent:var(--sn-deep)}

/* spotlight: follows the pointer through --mx/--my written by JS */
.sn-spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .34s var(--sn-ease);
  background:radial-gradient(420px circle at var(--mx,100%) var(--my,0%),color-mix(in srgb,var(--accent,var(--sn-electric)) 13%,transparent),transparent 60%);
}
.sn-spot:hover::after{opacity:1}
.sn-bento__item:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent),0 22px 50px rgba(14,42,56,.16)}
.sn-bento__item > *{position:relative;z-index:1}
.sn-bento__icon{width:56px;height:56px;flex:none;display:grid;place-items:center;margin-bottom:1.3rem;color:var(--accent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 5%,transparent));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .45s var(--sn-ease)}
.sn-bento__icon svg{width:26px;height:26px}
.sn-bento__icon .fill{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:none}
.sn-bento__item:hover .sn-bento__icon{transform:translateY(-3px) rotate(-6deg)}
.elementor .sn-bento__num,.sn-bento__num{position:absolute !important;top:1.4rem;right:1.6rem;z-index:1;width:auto !important}
.sn-bento__num,.elementor .sn-bento__num .elementor-heading-title{font:800 clamp(2.2rem,4vw,3.4rem)/1 var(--sn-ff-display);color:color-mix(in srgb,var(--accent) 14%,transparent);letter-spacing:-.04em}
.sn-bento__title,.elementor .sn-bento__title .elementor-heading-title{font-family:var(--sn-ff-display);font-size:1.24rem;font-weight:700;line-height:1.25;color:var(--sn-ink)}
.sn-bento__title{margin-bottom:.65rem !important}
.sn-bento__text,.elementor .sn-bento__text p{color:var(--sn-muted);font-size:15px;line-height:1.65}
.sn-bento__tag,.elementor .sn-bento__tag .elementor-heading-title{font:600 12px/1 var(--sn-ff-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sn-muted)}
.sn-bento__tag{margin-top:auto !important;padding-top:1.2rem}
.e-con.sn-bento__item--lead{justify-content:flex-start}
.sn-bento__item--lead .sn-bento__title,.elementor .sn-bento__item--lead .sn-bento__title .elementor-heading-title{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.sn-bento__item--lead .sn-bento__tag{margin-top:1.6rem !important;padding-top:0}
.sn-bento__sweep{position:absolute !important;inset:0;z-index:0 !important;overflow:hidden;pointer-events:none;opacity:.5;width:auto !important}
.sn-bento__sweep::before{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(24,175,230,.14),transparent)}
.sn-bento__item:hover .sn-bento__sweep::before{animation:sn-sweep 1.1s var(--sn-ease)}
@keyframes sn-sweep{to{transform:translateX(350%)}}
/* lead card: what the service includes, centred in the card's spare height */
.sn-bento__item--lead .sn-bento__includes{margin-block:auto !important;padding-top:1.4rem}
.sn-bento__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1.5rem;margin:0;padding:0;list-style:none}
.sn-bento__list li{position:relative;padding-left:1.65rem;font-size:14.5px;line-height:1.45;color:var(--sn-ink)}
.sn-bento__list li::before{content:"";position:absolute;left:0;top:.12rem;width:1.05rem;height:1.05rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,transparent)}
.sn-bento__list li::after{content:"";position:absolute;left:.37rem;top:.31rem;width:.3rem;height:.55rem;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:480px){.sn-bento__list{grid-template-columns:1fr}}
/* each card opens its service page: the link sits on the tag line, JS makes the whole card clickable */
.e-con.sn-bento__item > .elementor-widget.sn-bento__morewrap{position:absolute !important;right:1.9rem;bottom:1.9rem;z-index:3;width:auto !important;margin:0 !important}
.sn-bento__more{display:flex;align-items:center;gap:.35rem;font:600 13px/1 var(--sn-ff-body);letter-spacing:.02em;color:var(--sn-link) !important;text-decoration:none}
.sn-bento__more svg{width:14px;height:14px;transition:transform .22s var(--sn-ease)}
.sn-bento__item:hover .sn-bento__more svg,.sn-bento__more:focus-visible svg{transform:translateX(3px)}
.sn-bento__item.is-linked{cursor:pointer}

.sn-more{margin-top:2.75rem !important;padding-top:1.9rem;border-top:1px solid var(--sn-line)}
.sn-more__row{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline}
.sn-more h4,.sn-more__label{font:600 12px/1.4 var(--sn-ff-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sn-muted);margin:0 .5rem 0 0}
.sn-more__links{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline}
.sn-tag-link{position:relative;display:inline-block;padding-bottom:3px;font-size:15px;font-weight:500;color:var(--sn-ink) !important;text-decoration:none}
.sn-tag-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sn-electric);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--sn-ease)}
.sn-tag-link:hover{color:var(--sn-link) !important}
.sn-tag-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ==========================================================================
   Consulting icon boxes
   ========================================================================== */
.e-con.sn-iconboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.e-con.sn-iconboxes{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.e-con.sn-iconbox,.sn-iconbox{
  --accent:var(--sn-electric);--wash:rgba(24,175,230,.08);
  position:relative;overflow:hidden;display:flex;flex-direction:row;gap:1.25rem;align-items:flex-start;padding:2rem;
  background:#fff;border:1px solid var(--sn-line);border-radius:var(--sn-r);
  transition:transform .3s var(--sn-ease),box-shadow .3s var(--sn-ease),border-color .3s var(--sn-ease);
}
.sn-iconbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);z-index:2}
.sn-iconbox > *{position:relative;z-index:1}
.sn-iconbox:hover{transform:translateY(-6px);box-shadow:var(--sn-shadow-lg);border-color:transparent}
.e-con.sn-iconbox__body{display:block;width:auto;flex:1 1 auto}
/* the icon keeps its full size; Elementor lets widgets shrink to nothing by default */
.e-con.sn-iconbox > .elementor-widget-html{flex:0 0 auto;min-width:56px}
.sn-iconbox__icon{width:56px;height:56px;flex:none;display:grid;place-items:center;color:var(--accent);background:var(--wash);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:background-color .3s var(--sn-ease),color .3s var(--sn-ease)}
.sn-iconbox__icon svg{width:25px;height:25px;transition:transform .45s var(--sn-ease)}
.sn-iconbox:hover .sn-iconbox__icon{background:var(--accent);color:#fff}
.sn-iconbox--cio:hover .sn-iconbox__icon svg{transform:rotate(-14deg) scale(1.06)}
.sn-iconbox--audit:hover .sn-iconbox__icon svg{animation:sn-pulse .9s var(--sn-ease)}
.sn-iconbox--voice:hover .sn-iconbox__icon svg{transform:rotate(-14deg) scale(1.06)}
.sn-iconbox__title,.elementor .sn-iconbox__title .elementor-heading-title{font-family:var(--sn-ff-display);font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--sn-ink)}
.sn-iconbox__title{margin-bottom:.55rem !important}
.sn-iconbox__text,.elementor .sn-iconbox__text p{color:var(--sn-muted);font-size:14.5px;line-height:1.65}
.sn-iconbox--cio{--accent:var(--sn-deep);--wash:rgba(22,126,172,.09)}
.sn-iconbox--audit{--accent:var(--sn-red);--wash:rgba(197,32,51,.07)}
.sn-iconbox--voice{--accent:var(--sn-electric);--wash:rgba(24,175,230,.09)}

/* ==========================================================================
   Industries: expanding panels on wide screens, stacked cards below
   ========================================================================== */
.e-con.sn-industries{position:relative;overflow:hidden;background:var(--sn-panel)}
.sn-industries::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 360px at 12% 18%,rgba(24,175,230,.18),transparent 66%),radial-gradient(520px 300px at 92% 90%,rgba(197,32,51,.10),transparent 70%)}
.sn-industries > *{position:relative}
.sn-industries .sn-h-lg,.elementor .sn-industries .sn-h-lg .elementor-heading-title{color:#fff}
.sn-industries .sn-lead,.elementor .sn-industries .sn-lead p{color:#9BB2C0}
.e-con.sn-ind-row{display:flex;flex-direction:row;gap:.9rem;min-height:400px}
.e-con.sn-ind,.sn-ind{
  --accent:var(--sn-electric);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  flex:1 1 0;min-width:0;width:auto;padding:1.6rem;cursor:pointer;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:var(--sn-r);
  transition:flex-grow .6s var(--sn-ease),background-color .4s var(--sn-ease),border-color .4s var(--sn-ease);
}
.sn-ind::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--sn-ease)}
.sn-ind::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--sn-ease);
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)}
.sn-ind.is-active{flex-grow:2.6;border-color:color-mix(in srgb,var(--accent) 55%,transparent);background-color:rgba(255,255,255,.04)}
.sn-ind.is-active::before{transform:scaleX(1)}
.sn-ind.is-active::after{opacity:1}
.sn-ind > *{position:relative;z-index:1}
.sn-ind__num{position:absolute !important;top:1.3rem;right:1.4rem;width:auto !important;font:800 1.9rem/1 var(--sn-ff-display);color:rgba(255,255,255,.12);letter-spacing:-.04em}
.sn-ind__icon{width:50px;height:50px;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.sn-ind > .elementor-widget-html:has(.sn-ind__icon){margin-bottom:auto}
.sn-ind__icon svg{width:24px;height:24px}
.sn-ind__title,.elementor .sn-ind__title .elementor-heading-title{font-family:var(--sn-ff-display);font-size:1.15rem;line-height:1.25;font-weight:700;color:#fff}
.sn-ind__title{margin-top:1.4rem !important}
.e-con.sn-ind__body,.sn-ind__body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--sn-ease),opacity .4s var(--sn-ease),margin .55s var(--sn-ease)}
.sn-ind__body > *{overflow:hidden;min-height:0}
.sn-ind.is-active .sn-ind__body{grid-template-rows:1fr;opacity:1;margin-top:.7rem}
.sn-ind__text,.elementor .sn-ind__text p{color:#B4C7D3;font-size:14.5px;line-height:1.6;max-width:44ch}
.sn-ind__meta,.elementor .sn-ind__meta p{font:600 11.5px/1.4 var(--sn-ff-body);letter-spacing:.1em;text-transform:uppercase;color:#7FD3F5}
.sn-ind__meta{margin-top:.9rem !important}
.sn-ind--red{--accent:var(--sn-red)}
.sn-ind--deep{--accent:#2A9AD0}
.sn-ind--sky{--accent:#7FD3F5}
@media(max-width:1100px){
  .e-con.sn-ind-row{flex-direction:column;min-height:0}
  .e-con.sn-ind,.sn-ind{flex:none;cursor:default;padding:1.5rem 1.5rem 1.6rem 1.5rem}
  .sn-ind::before{transform:scaleX(1)}
  .e-con.sn-ind__body,.sn-ind__body{grid-template-rows:1fr;opacity:1;margin-top:.6rem}
  .sn-ind > .elementor-widget-html:has(.sn-ind__icon){margin-bottom:0}
  .sn-ind__title{margin-top:1rem !important}
}
