/* ==========================================================================
   AlphaTech — visual layer for the Elementor-built structure.

   Elementor owns the DOM (every element is a native Container/widget, fully
   editable in the panel). This file carries the brand's visual identity on
   top of it — exactly the relationship a theme's style.css has to its markup.

   Values mirror the active Novamira DESIGN.md (slug: alphatech-solutions).
   ========================================================================== */

/* ==========================================================================
   0 · MOTION LAYER (paired with alphatech-motion.js)
   The script adds these classes; without JS the page is simply static and
   fully visible, which is the correct no-JS result.
   ========================================================================== */
.at-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--e-out) var(--at-d,0ms),transform .75s var(--e-out) var(--at-d,0ms);
}
.at-reveal.at-in{opacity:1;transform:none}

/* hero particle canvas sits above the gradient but behind the content */
.at-particles{
  position:absolute !important;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.at-hero > .e-con-inner{position:relative;z-index:1}

.at-hero__emblem img{will-change:transform;transform-style:preserve-3d}
.at-clients img{transition:translate .45s var(--e-out),transform .4s var(--e-out),filter .4s}

/* ==========================================================================
   1 · SHARED
   ========================================================================== */
.at-eyebrow .elementor-heading-title{
  color:var(--cyan-300) !important;
  font-size:.78rem !important;font-weight:700 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
}
.at-section-title .elementor-heading-title{
  letter-spacing:-.035em !important;line-height:1.1 !important;
}
.at-lead p{color:var(--ink-3) !important;font-size:1.02rem !important;line-height:1.7 !important}

/* Buttons — pill, gradient, glow. Elementor sets the gradient/colour from the
   widget settings; these add the motion and stop label+icon ever splitting. */
.at-header__cta.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button{
  white-space:nowrap !important;
  transition:transform .35s var(--e-out),box-shadow .35s var(--e-out) !important;
}
.elementor-widget-button .elementor-button:hover{transform:translateY(-2px)}
.elementor-widget-button .elementor-button-content-wrapper{flex-wrap:nowrap !important}

/* ==========================================================================
   2 · HEADER
   ========================================================================== */
/* Sticky is driven by Elementor's own control; it adds
   .elementor-sticky--effects once past the offset, which is what we style
   for the condensed "blended" state. */
.at-header{
  position:sticky;top:0;z-index:100;width:100%;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--e-out),box-shadow .35s var(--e-out),
             border-color .35s,padding .35s var(--e-out);
}
.at-header.elementor-sticky--effects{
  background:rgba(255,255,255,.94) !important;
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -18px rgba(9,38,94,.35);
  padding-top:7px !important;padding-bottom:7px !important;
}
.at-header .at-header__logo img{transition:height .35s var(--e-out)}
.at-header.elementor-sticky--effects .at-header__logo img{height:27px !important}
.at-header.elementor-sticky--effects .elementor-item{font-size:.88rem}
.at-header{gap:20px}
.at-header__logo img{display:block !important;height:34px !important;width:auto !important;max-width:none !important}

/* menu hard-right, logo stays left */
.at-header__nav{margin-left:auto !important}
.at-header__nav > .elementor-widget-container{display:flex;justify-content:flex-end}
.at-header__nav, .at-header__nav .elementor-nav-menu{
  display:flex !important;align-items:center;flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  gap:26px;white-space:nowrap;
}
/* the CTA must never wrap — this recurred twice, so pin it hard */
.at-header .at-header__cta .elementor-button{
  white-space:nowrap !important;display:inline-flex !important;
  align-items:center;flex-wrap:nowrap !important;width:auto !important;
}
.at-header .at-header__cta{flex:0 0 auto !important;width:auto !important}

/* At 375px the logo + burger + CTA cannot all fit on one nowrap row, so the
   button was being clipped off the right edge. Tighten both, and let the row
   itself shrink the logo rather than overflow. */
/* The header row is nowrap, so on small screens logo + burger + CTA overflowed
   the viewport instead of shrinking (real layout viewport 375px, row 813px),
   which also made the dropdown panel inherit that width and gave the whole
   page horizontal scroll. Let the logo shrink and cap the row. */
.at-header{max-width:100vw;overflow-x:clip}
.at-header__logo{min-width:0}
.at-header__logo img{object-fit:contain}
.at-header__nav .elementor-nav-menu--dropdown{max-width:100vw}

/* ---- Mobile / tablet menu ----------------------------------------------
   The burger sat in the middle of the bar because the menu widget was still
   growing. Push the toggle hard right and drop the dropdown as a full-width
   panel directly under the header instead of a floating box. */
@media (max-width:1024px){
  /* the menu widget must own the remaining width, otherwise the burger sits
     next to the logo instead of at the far right of the bar */
  .at-header__nav{flex:1 1 auto !important;width:auto !important}
  .at-header__nav > .elementor-widget-container{
    display:flex !important;justify-content:flex-end !important;width:100%;
  }
  .at-header__nav .elementor-menu-toggle{margin-left:auto !important}
  .at-header__nav .elementor-nav-menu--dropdown{
    position:absolute !important;
    top:100% !important;left:0 !important;right:0 !important;
    width:100% !important;max-width:100vw !important;
    background:#fff !important;
    border-top:1px solid var(--line);
    box-shadow:0 18px 40px -18px rgba(3,15,36,.35);
    border-radius:0 0 var(--radius) var(--radius);
    padding:6px 0 10px !important;
  }
  .at-header__nav .elementor-nav-menu--dropdown a{
    padding:13px 22px !important;font-size:.95rem !important;
    color:var(--ink-2) !important;
  }
  .at-header__nav .elementor-nav-menu--dropdown a:hover,
  .at-header__nav .elementor-nav-menu--dropdown a.elementor-item-active{
    background:var(--paper) !important;color:var(--blue-600) !important;
  }
}

@media (max-width:600px){
  .at-header{gap:8px}
  .at-header__logo{flex:0 1 auto !important}
  .at-header__logo img{height:24px !important;max-width:160px !important}
}
@media (max-width:400px){
  .at-header__logo img{height:21px !important;max-width:128px !important}
}

/* Mobile toggle: this install has a duplicate/conflicting "eicons" @font-face
   (one variant loads, the one our glyph resolves to does not), so Elementor's
   own hamburger silently renders as nothing. Draw it in CSS instead — it
   cannot fail regardless of any font issue. */
.at-header__nav .elementor-menu-toggle{position:relative !important;width:26px !important;height:20px !important}
.at-header__nav .elementor-menu-toggle i{font-size:0 !important}
.at-header__nav .elementor-menu-toggle::before,
.at-header__nav .elementor-menu-toggle::after,
.at-header__nav .elementor-menu-toggle i::before{
  content:'' !important;position:absolute !important;left:0 !important;
  width:100% !important;height:2px !important;
  background:var(--ink-2) !important;border-radius:2px !important;
  transition:transform .25s var(--e-out),opacity .25s !important;
}
.at-header__nav .elementor-menu-toggle::before{top:0 !important}
.at-header__nav .elementor-menu-toggle i::before{top:9px !important}
.at-header__nav .elementor-menu-toggle::after{bottom:0 !important}
.at-header__nav .elementor-menu-toggle.elementor-active::before{transform:translateY(9px) rotate(45deg)}
.at-header__nav .elementor-menu-toggle.elementor-active i::before{opacity:0}
.at-header__nav .elementor-menu-toggle.elementor-active::after{transform:translateY(-9px) rotate(-45deg)}

/* ==========================================================================
   2b · KEYWORD MARQUEE (under the hero)
   Two identical sets scroll as one track; -50% lands exactly on the seam.
   ========================================================================== */
.at-strip{overflow:hidden !important;position:relative;border-block:1px solid rgba(255,255,255,.08)}
.at-strip::before,.at-strip::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.at-strip::before{left:0;background:linear-gradient(90deg,#061A3C,transparent)}
.at-strip::after{right:0;background:linear-gradient(270deg,#061A3C,transparent)}
/* the two sets must be separated too, or the last item of set 1 collides with
   the first item of set 2 at the loop seam */
.at-strip{gap:44px}
.at-strip > .e-con,
.at-strip > .e-con-inner > .e-con{flex:0 0 auto !important}
.at-strip{animation:none}
.at-strip .at-strip__set{animation:atMarquee 34s linear infinite;flex:0 0 auto !important}
.at-strip:hover .at-strip__set{animation-play-state:paused}
@keyframes atMarquee{to{transform:translateX(-100%)}}
/* Full-white keywords, each followed by its own dot at an identical distance.
   The widget box was wider than its text, which is why some dots sat far from
   the words — shrink each item to its content so spacing is uniform. */
/* the set must be as wide as its content, or the second copy overlaps it and
   the -100% loop lands in the wrong place */
.at-strip__set{
  align-items:center;
  width:max-content !important;flex:0 0 auto !important;
  animation:atMarquee 34s linear infinite;
}
.at-strip__item{
  position:relative;display:flex !important;align-items:center;
  width:max-content !important;flex:0 0 auto !important;
}
.at-strip__item > .elementor-widget-container{width:max-content}
.at-strip__item .elementor-heading-title{
  white-space:nowrap;color:#fff !important;display:inline-block;
}
.at-strip__item::after{
  content:'';position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);
}

/* ==========================================================================
   3 · HERO
   ========================================================================== */
.at-hero{position:relative;isolation:isolate;overflow:hidden}
/* atmospheric depth — two drifting aurora blobs behind the content */
.at-hero::before,.at-hero::after{
  content:'';position:absolute;z-index:-1;border-radius:50%;
  filter:blur(90px);pointer-events:none;
}
.at-hero::before{
  width:620px;height:620px;top:-160px;left:-140px;
  background:radial-gradient(circle,rgba(21,96,239,.55),transparent 70%);
  animation:atDrift1 17s ease-in-out infinite alternate;
}
.at-hero::after{
  width:520px;height:520px;bottom:-180px;right:-100px;
  background:radial-gradient(circle,rgba(91,155,255,.34),transparent 70%);
  animation:atDrift2 21s ease-in-out infinite alternate;
}
@keyframes atDrift1{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes atDrift2{to{transform:translate(-100px,-70px) scale(1.1)}}

.at-hero__title .elementor-heading-title{color:#fff !important;letter-spacing:-.045em !important}
/* Second line picks up the brand gradient. Uses LIGHT blues — the darker
   gradient sat too close to the navy ground and the text vanished into it. */
.at-hero__title .at-grad{
  background:linear-gradient(100deg,#5b9bff 0%,#8fc2ff 55%,#cfe2ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.at-hero__subtext p{color:rgba(255,255,255,.72) !important;font-size:1.05rem !important;line-height:1.7 !important}

.at-hero__stats .elementor-counter-number-wrapper{
  color:#fff !important;font-weight:800 !important;letter-spacing:-.03em;
}
.at-hero__stats .elementor-counter-title{
  color:rgba(255,255,255,.55) !important;font-size:.8rem !important;
  letter-spacing:.04em;margin-top:4px;
}

/* Elementor's Container panel exposes flex-grow/shrink but not flex-basis, so
   ratio columns default to flex-basis:auto and each one's content expands to
   fill the row before any sharing happens — they stack instead of sitting side
   by side. flex-basis:0 is the one property needed to make the grow ratios work. */
.at-hero__row > .e-con-inner > .e-con{flex-basis:0 !important}

/* ---- Emblem + its floating furniture ---- */
.at-emblem-wrap{position:relative;min-height:430px}
.at-hero__emblem img{max-width:430px;width:100%;margin-inline:auto;display:block}

/* glass pills naming each division, sat at the triangle's points */
.at-vpill .elementor-heading-title,
.at-core p, .at-estab p{margin:0}
.at-vpill, .at-core, .at-estab{
  position:absolute;z-index:4;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -12px rgba(3,15,36,.55);
  border-radius:999px;padding:8px 16px;white-space:nowrap;
}
.at-vpill .elementor-heading-title{
  font-size:.72rem !important;font-weight:700 !important;
  color:var(--ink) !important;letter-spacing:-.01em !important;
}
.at-vpill--top{top:6%;left:50%;transform:translate(-50%,-50%)}
.at-vpill--left{bottom:22%;left:4%;transform:translate(0,50%)}
.at-vpill--right{bottom:22%;right:4%;transform:translate(0,50%)}

/* the fourth offering lives at the centre of the triangle */
.at-core{
  top:56%;left:50%;transform:translate(-50%,-50%);
  padding:8px 18px;text-align:center;border-radius:999px;
}
.at-core p{font-size:.74rem !important;font-weight:800 !important;color:var(--ink) !important;line-height:1.2}
.at-core .at-core__sub{
  display:block;font-size:.56rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-600);
}

/* "since 2005" badge floating clear of the mark */
.at-estab{top:4%;left:0;border-radius:18px;padding:10px 16px;text-align:left}
.at-estab p{line-height:1.15}
.at-estab .at-estab__num{display:block;font-size:1.25rem;font-weight:900;color:var(--ink);letter-spacing:-.03em}
.at-estab .at-estab__lbl{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:1px}

@media (max-width:860px){
  .at-hero__row > .e-con-inner > .e-con{flex-basis:100% !important}
  .at-hero__row{gap:20px !important}
  .at-hero__row > .e-con-inner{gap:20px !important}
  .at-emblem-wrap{order:-1;min-height:0}
  .at-emblem-wrap > .e-con-inner{padding:0 !important}
  .at-hero__emblem img{max-width:300px}
  .at-hero__ctas{justify-content:center !important}
  .at-hero__stats{justify-content:center !important;text-align:center}
  .at-hero__stats .elementor-widget-counter{flex:0 0 auto !important;min-width:92px}
  .at-vpill,.at-estab{display:none}   /* too tight to read at this size */
  .at-core{padding:6px 12px}
  .at-core p{font-size:.68rem !important}
}
@media (max-width:600px){
  .at-hero__emblem img{max-width:230px}
  .at-hero__title .elementor-heading-title{font-size:2.3rem !important}
}

/* ==========================================================================
   4 · LIGHT SECTIONS (About / Process / FAQ)
   ========================================================================== */
.at-about{background:linear-gradient(180deg,#fff,var(--paper))}
.at-about .elementor-heading-title{color:var(--ink)}

/* ---- Stat blocks (replaced the conic-gradient rings, which rendered as
   broken-looking partial arcs and were fragile across browsers) ---- */
.at-stats{align-items:stretch}
.at-stat{
  flex:1 1 0 !important;min-width:170px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px !important;
  box-shadow:var(--sh-sm);
  position:relative;overflow:hidden;
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out);
}
.at-stat::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad-brand);
}
.at-stat:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.at-stat .elementor-counter-number-wrapper{
  line-height:1 !important;letter-spacing:-.04em;
}
.at-stat .elementor-counter-title{
  letter-spacing:.12em;text-transform:uppercase;margin-top:8px;
}
@media (max-width:520px){
  .at-stat{flex-basis:100% !important}
}

/* ---- legacy dial rules (kept harmless if any markup still uses them) ---- */
.at-dials{display:flex;flex-wrap:wrap;gap:36px;justify-content:center}
/* The ring fills on scroll-in, then a highlight keeps orbiting it — the dials
   previously sat completely static, which is why they read as "not working".
   @property lets the conic-gradient stop actually animate. */
@property --at-fill{syntax:'<number>';inherits:false;initial-value:0}

.at-dial{
  position:relative;width:172px;height:172px;border-radius:50%;
  display:grid !important;place-items:center;
  box-shadow:var(--sh-md);
  --at-fill:0;
  background:conic-gradient(var(--blue-600) calc(var(--at-fill) * 1turn),var(--line) 0);
}
/* fill runs once the reveal observer marks it in view */
.at-dial.at-in{animation:atFill 1.6s var(--e-out) forwards,atBreathe 3s ease-in-out 1.6s infinite}
.at-dial--full.at-in{--at-target:1}
.at-dial--92.at-in{--at-target:.92}
@keyframes atFill{to{--at-fill:var(--at-target,1)}}
@keyframes atBreathe{50%{box-shadow:0 18px 46px -12px rgba(21,96,239,.5)}}

/* white core so only the ring shows */
.at-dial::before{
  content:'';position:absolute;inset:11px;border-radius:50%;
  background:#fff;z-index:0;
}
/* orbiting highlight — the "spin" */
.at-dial::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0deg 320deg,rgba(127,178,255,.95) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 12px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 12px));
  animation:atSpin 2.8s linear infinite;
  opacity:0;transition:opacity .5s .9s;
}
.at-dial.at-in::after{opacity:1}
@keyframes atSpin{to{transform:rotate(360deg)}}
.at-dial > *{position:relative;z-index:1}

/* the dials are reveal targets; keep them visible even if the observer never
   fires, and fill immediately in that case */
.at-dial.at-reveal:not(.at-in){opacity:1;transform:none}
.at-dial .elementor-counter-number-wrapper{
  font-size:2rem !important;font-weight:800 !important;color:var(--ink) !important;
}
.at-dial .elementor-counter-title{
  font-size:.74rem !important;color:var(--ink-3) !important;
  letter-spacing:.08em;text-transform:uppercase;
}

/* ---- Timeline ---- */
.at-timeline{position:relative}
.at-timeline-row{position:relative;padding-block:9px;padding-left:28px;border-bottom:1px dashed var(--line)}
.at-timeline-row .elementor-widget{margin:0 !important}
.at-timeline-row p{margin:0 !important;line-height:1.5}
.at-timeline-row h3{margin:0 !important}
.at-timeline-row:last-child{border-bottom:none}
.at-timeline-row::before{
  content:'';position:absolute;left:0;top:20px;
  width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid var(--blue-500);z-index:1;
}
.at-timeline-row::after{
  content:'';position:absolute;left:5px;top:31px;bottom:-1px;
  width:1px;background:var(--line);
}
.at-timeline-row:last-child::after{display:none}
.at-timeline-row__year .elementor-heading-title{
  color:var(--blue-700) !important;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   5 · CARDS (services, process)
   ========================================================================== */
/* the cards are WIDGETS, not containers — both selectors are needed, and a
   widget child of a flex Container defaults to flex-basis:auto, so without
   this they size to their text and wrap early instead of sharing the row */
.at-grid > .e-con-inner > .elementor-widget,
.at-grid > .elementor-widget,
.at-grid > .e-con-inner > .e-con,
.at-grid > .e-con{
  flex:1 1 0 !important;min-width:238px;
}
@media (max-width:640px){
  .at-grid > .e-con-inner > .elementor-widget,
  .at-grid > .elementor-widget,
  .at-grid > .e-con-inner > .e-con,
  .at-grid > .e-con{flex-basis:100% !important}
}

/* cards centred — icon and text both */
.at-card .elementor-icon-box-wrapper{text-align:center !important}
.at-card .elementor-icon-box-icon{
  margin-inline:auto !important;display:flex !important;justify-content:center;
}
.at-card .elementor-icon-box-content{text-align:center}
.at-step .elementor-icon-box-title::before{text-align:center}

.at-card{
  background:rgba(255,255,255,.72) !important;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-sm);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .4s;
}
.at-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-md);
  border-color:rgba(21,96,239,.3);
}
/* gradient icon chip */
.at-card .elementor-icon{
  display:grid !important;place-items:center;
  width:var(--ico-md) !important;height:var(--ico-md) !important;
  border-radius:14px !important;
  background:var(--grad-brand) !important;
  color:#fff !important;font-size:20px !important;
  box-shadow:0 10px 22px -8px rgba(21,96,239,.65);
  transition:transform .45s var(--e-out);
}
.at-card:hover .elementor-icon{transform:rotate(-6deg) scale(1.06)}
.at-card .elementor-icon-box-title{margin-block:14px 8px}
.at-card .elementor-icon-box-description{line-height:1.65}

/* ---- Process: numbered steps ---- */
.at-steps{counter-reset:atstep}
.at-steps > .e-con-inner > .elementor-widget-icon-box,
.at-steps > .elementor-widget-icon-box{counter-increment:atstep}
.at-step .elementor-icon-box-wrapper{position:relative}
.at-step .elementor-icon-box-title::before{
  content:counter(atstep,decimal-leading-zero);
  display:block;margin-bottom:6px;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;
  color:var(--blue-500);
}

/* ==========================================================================
   6 · SERVICES TABS
   ========================================================================== */
.at-services{background:#fff}
/* each tab is now its own separate pill rather than segments of one bar */
.at-services .e-n-tabs-heading{
  display:flex !important;flex-wrap:wrap;justify-content:center;gap:10px;
  background:none !important;border:none !important;padding:0 !important;
  width:100%;max-width:100%;margin-inline:auto;
}
.at-services .e-n-tab-title{
  border-radius:999px !important;
  padding:11px 24px !important;
  font-family:Inter,sans-serif;font-size:.88rem;font-weight:650;
  color:var(--ink-2) !important;
  background:var(--paper-2) !important;
  border:1px solid var(--line) !important;
  white-space:nowrap;
  transition:color .3s,background-color .35s var(--e-out),box-shadow .35s,border-color .3s;
}
.at-services .e-n-tab-title:hover{color:var(--blue-700) !important}
.at-services .e-n-tab-title[aria-selected="true"]{
  background:var(--grad-brand) !important;
  color:#fff !important;
  box-shadow:var(--sh-glow);
}
.at-services .e-n-tabs-content{padding-top:36px}

/* On mobile the tab bar stacked into one full-width block that read as a
   single huge button. Make it a horizontally scrollable pill row instead. */
@media (max-width:860px){
  .at-services .e-n-tabs-heading{
    flex-wrap:nowrap !important;
    justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;border-radius:var(--radius);
  }
  .at-services .e-n-tabs-heading::-webkit-scrollbar{display:none}
  .at-services .e-n-tab-title{
    flex:0 0 auto !important;width:auto !important;
    padding:11px 18px !important;font-size:.84rem !important;
  }
}

/* ---- About: 2-column split, dials aligned ---- */
.at-about__split > .e-con-inner > .e-con{flex-basis:0 !important}
.at-dials{align-items:center}
.at-dial{flex:0 0 auto !important}
@media (max-width:860px){
  .at-about__split > .e-con-inner > .e-con{flex-basis:100% !important}
  .at-dials{justify-content:center}
}
@media (max-width:420px){
  .at-dial{width:136px;height:136px}
  .at-dial .elementor-counter-number-wrapper{font-size:1.5rem !important}
  .at-dial .elementor-counter-title{font-size:.64rem !important}
}

/* ==========================================================================
   7 · CLIENTS
   ========================================================================== */
.at-clients{background:var(--paper)}
/* Static native logo wall (replaced the Swiper carousel, whose slides laid out
   correctly but never painted their images). Free-floating: no card, no border,
   full colour — as in the prototype. */
.at-logowall .at-logo{flex:0 0 auto !important;width:auto !important}
.at-logowall .at-logo img{
  max-height:46px !important;width:auto !important;height:auto !important;
  max-width:150px !important;object-fit:contain;
  opacity:.85;transition:transform .4s var(--e-out),opacity .3s,filter .4s;
}
.at-logowall .at-logo img:hover{
  opacity:1;transform:scale(1.14) translateY(-4px);
  filter:drop-shadow(0 12px 24px rgba(9,38,94,.28));
}
@media (max-width:640px){
  .at-logowall .at-logo img{max-height:34px !important;max-width:104px !important}
}

/* ---- Three alternating logo marquee rows ------------------------------
   The logos overlapped because each Elementor image widget defaulted to
   flex-basis:auto inside a nowrap row and collapsed onto its neighbour.
   Each row is two identical sets; the set is sized to its content so the
   -100% loop lands exactly on the seam. */
.at-logowall-rows{width:100%;overflow:hidden}
.at-logorow{
  overflow:hidden !important;position:relative;width:100%;
  flex-wrap:nowrap !important;
}
.at-logorow::before,.at-logorow::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.at-logorow::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.at-logorow::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}

.at-logoset{
  flex:0 0 auto !important;
  width:max-content !important;
  padding-right:52px;
  will-change:transform;
}
.at-logorow--ltr  .at-logoset{animation:atLogoLoop 58s linear infinite}
.at-logorow--rtl  .at-logoset{animation:atLogoLoop 66s linear infinite reverse}
.at-logorow--ltr2 .at-logoset{animation:atLogoLoop 74s linear infinite}
.at-logorow:hover .at-logoset{animation-play-state:paused}
@keyframes atLogoLoop{to{transform:translateX(-100%)}}

/* each logo must hold its own width or they stack on top of each other */
.at-logoset .at-logo{
  flex:0 0 auto !important;width:auto !important;max-width:none !important;
}
.at-logoset .at-logo > .elementor-widget-container{width:max-content}
/* Explicit height, NOT max-height. A lazy image that has not downloaded yet
   resolves height:auto to 0, so width:auto also becomes 0 and every logo
   collapses onto the same x-position -- they visibly overlap until the images
   finish loading. A fixed height lets the browser derive the width from the
   img width/height attributes immediately, so the row is laid out correctly
   from the first paint. */
.at-logoset .at-logo img{
  height:42px !important;width:auto !important;max-height:none !important;
  max-width:none !important;object-fit:contain;opacity:.82;
  transition:transform .35s var(--e-out),opacity .3s,filter .35s;
}
/* fallback for any logo that ships without width/height attributes */
.at-logoset .at-logo{min-width:48px}
.at-logoset .at-logo img:hover{
  opacity:1;transform:scale(1.14);
  filter:drop-shadow(0 10px 20px rgba(9,38,94,.28));
}
@media (max-width:640px){
  .at-logoset .at-logo img{height:30px !important;max-height:none !important}
  .at-logorow::before,.at-logorow::after{width:52px}
  .at-logowall-rows{gap:16px}
}

/* free-floating logos: no card, no border, full colour immediately */
.at-clients .elementor-image-carousel .swiper-slide,
.at-clients .elementor-image-carousel-wrapper .swiper-slide{background:none !important}
.at-clients figure,
.at-clients .elementor-carousel-image{background:none !important;border:0 !important;box-shadow:none !important}
/* Keep the Swiper track clipped. Sizing the images with width:auto let the
   track grow past the viewport and gave the whole PAGE horizontal overflow
   (documentElement.scrollWidth hit 8333px on narrow screens). */
.at-clients .elementor-image-carousel-wrapper,
.at-clients .swiper,
.at-clients .elementor-image-carousel{overflow:hidden !important;max-width:100% !important}
.at-clients .swiper-slide{display:flex !important;align-items:center;justify-content:center}
.at-clients img{
  max-height:54px !important;max-width:100% !important;width:auto !important;
  height:auto !important;object-fit:contain;
  filter:none !important;opacity:1 !important;
  transition:transform .4s var(--e-out),filter .4s;
}
.at-clients img:hover{
  transform:scale(1.16) translateY(-4px);
  filter:drop-shadow(0 12px 24px rgba(9,38,94,.3)) !important;
}

/* ==========================================================================
   8 · FAQ
   ========================================================================== */
.at-faq .elementor-accordion{display:grid;gap:12px}
.at-faq .elementor-accordion-item{
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:box-shadow .4s,border-color .4s;
}
.at-faq .elementor-accordion-item:has(.elementor-active){
  box-shadow:var(--sh-md);border-color:rgba(21,96,239,.28) !important;
}
.at-faq .elementor-tab-title{
  padding:15px 20px !important;
  font-weight:700 !important;letter-spacing:-.02em;line-height:1.45;
}
/* the answers carried a lot of dead space under the last line */
.at-faq .elementor-tab-content{padding:0 20px 15px !important;border:none !important}
.at-faq .elementor-tab-content p{margin:0 !important;line-height:1.6}
.at-faq .elementor-accordion{gap:10px}

/* two columns on desktop, single column below */
.at-faq__cols > .e-con-inner > .e-con{flex-basis:0 !important;min-width:290px}
@media (max-width:860px){
  .at-faq__cols > .e-con-inner > .e-con{flex-basis:100% !important}
}

/* ==========================================================================
   9 · CONTACT
   ========================================================================== */
.at-contact{position:relative;isolation:isolate;overflow:hidden}
.at-contact::before{
  content:'';position:absolute;z-index:-1;border-radius:50%;
  width:560px;height:560px;top:-200px;right:-160px;filter:blur(90px);
  background:radial-gradient(circle,rgba(21,96,239,.45),transparent 70%);
}
.at-contact .elementor-heading-title{color:#fff !important}
.at-contact__intro p,
.at-contact__copy p{color:rgba(255,255,255,.72) !important;line-height:1.7}

/* text left / form right */
.at-contact__row > .e-con-inner > .e-con{flex-basis:0 !important}
.at-contact__copy .at-contact__list a,
.at-contact__copy .at-contact__list .elementor-icon-list-text{color:rgba(255,255,255,.78) !important}
/* keep icon + label together instead of the text stretching to the far edge */
.at-contact__list .elementor-icon-list-item,
.at-contact__list .elementor-icon-list-item a{
  display:flex !important;align-items:center;justify-content:flex-start !important;gap:10px;
}
.at-contact__list .elementor-icon-list-text{flex:0 1 auto !important;text-align:left !important}
.at-contact__list .elementor-icon-list-icon{flex:0 0 auto !important}
.at-contact__copy .at-contact__list a:hover .elementor-icon-list-text{color:#fff !important}
@media (max-width:860px){
  .at-contact__row > .e-con-inner > .e-con{flex-basis:100% !important}
}

/* glass panel around the form */
.at-form-panel{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  padding:36px !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -24px rgba(2,8,20,.7);
}
.at-contact .elementor-field-group > label{
  color:rgba(255,255,255,.8) !important;
  font-size:.8rem !important;font-weight:600 !important;
  letter-spacing:.02em;margin-bottom:6px;
}
.at-contact .elementor-field-textual{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:var(--radius-sm) !important;
  color:#fff !important;
  padding:13px 16px !important;
  transition:border-color .3s,background-color .3s,box-shadow .3s;
}
.at-contact .elementor-field-textual:focus{
  border-color:var(--blue-400) !important;
  background:rgba(255,255,255,.11) !important;
  box-shadow:0 0 0 3px rgba(21,96,239,.25) !important;
  outline:none;
}
.at-contact .elementor-field-textual::placeholder{color:rgba(255,255,255,.4)}
.at-contact .elementor-field-option label{color:rgba(255,255,255,.7) !important;font-size:.84rem}
.at-contact .elementor-button[type=submit]{
  background:var(--grad-brand) !important;
  box-shadow:var(--sh-glow);
  font-weight:650 !important;
  padding:14px 30px !important;
}

/* ==========================================================================
   9b · LEGAL PAGES (privacy / terms)
   Kept as real, linkable pages rather than popups — CookieYes points at them
   and legal text needs a citable URL — but styled to match the site.
   ========================================================================== */
.page-template-elementor_header_footer .entry-content > *,
body.page .ast-container .entry-content{max-width:100%}

body.page-id-891 .site-content,
body.page-id-881 .site-content{background:var(--paper)}

body.page-id-891 .entry-content,
body.page-id-881 .entry-content{
  max-width:820px;margin-inline:auto;
  padding:clamp(40px,6vw,76px) var(--gutter) clamp(56px,7vw,90px);
  font-family:Inter,sans-serif;color:var(--ink-2);font-size:.95rem;line-height:1.75;
}
body.page-id-891 .entry-content h1,
body.page-id-881 .entry-content h1{
  font-size:clamp(1.9rem,4vw,2.6rem);font-weight:850;color:var(--ink);
  letter-spacing:-.035em;line-height:1.12;margin:0 0 26px;
}
body.page-id-891 .entry-content h2,
body.page-id-881 .entry-content h2{
  font-size:1.2rem;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin:34px 0 10px;
}
body.page-id-891 .entry-content h3,
body.page-id-881 .entry-content h3{
  font-size:1rem;font-weight:750;color:var(--blue-700);margin:26px 0 8px;
}
body.page-id-891 .entry-content p,
body.page-id-881 .entry-content p{margin:0 0 14px}
body.page-id-891 .entry-content a,
body.page-id-881 .entry-content a{
  color:var(--blue-600);text-decoration:underline;text-underline-offset:2px;
}
body.page-id-891 .entry-content ul,
body.page-id-881 .entry-content ul,
body.page-id-891 .entry-content ol,
body.page-id-881 .entry-content ol{margin:0 0 16px 0;padding-left:20px}
body.page-id-891 .entry-content li,
body.page-id-881 .entry-content li{margin-bottom:7px}

/* ==========================================================================
   9c · LIGHT HERO + ROTATING BUBBLE + CARD HOVER REVEAL
   ========================================================================== */
.at-hero--light{color:var(--ink)}
.at-hero--light::before{background:radial-gradient(circle,rgba(21,96,239,.22),transparent 70%)}
.at-hero--light::after{background:radial-gradient(circle,rgba(91,155,255,.20),transparent 70%)}
.at-hero--light .at-hero__title .elementor-heading-title{color:var(--ink) !important}
.at-hero--light .at-hero__title .at-grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.at-hero--light .at-hero__subtext p{color:var(--ink-2) !important}
.at-hero--light .at-hero__stats .elementor-counter-number-wrapper{color:var(--ink) !important}
.at-hero--light .at-hero__stats .elementor-counter-title{color:var(--ink-3) !important}
.at-hero--light .at-particles{opacity:.55}

/* the secondary CTA needs ink treatment on a light ground */
.at-hero--light .at-hero__ctas .elementor-widget-button:last-child .elementor-button{
  background:rgba(255,255,255,.9) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
  box-shadow:var(--sh-sm);
}

/* eyebrow becomes a glass pill with a rotating word */
.at-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;
  color:var(--ink-2) !important;
  box-shadow:var(--sh-sm);
  font-size:.8rem !important;letter-spacing:.02em !important;text-transform:none !important;
}
.at-rotate{
  color:var(--blue-600);font-weight:800;
  display:inline-block;min-width:8ch;
  transition:opacity .25s var(--e-out),transform .25s var(--e-out);
}
.at-rotate.is-out{opacity:0;transform:translateY(-6px)}

/* CTA row matches the width of the stats row beneath it */
/* The CTA row and the stats row share a parent. Capping the CTAs at 430px made
   them narrower than the three stats beneath (634px); letting them fill the
   parent makes the two rows line up exactly, at every breakpoint. */
.at-hero__ctas{width:100%;max-width:none}
/* Boxed containers wrap their children in .e-con-inner, full-width ones do not,
   so an equal-width rule has to cover both or it silently matches nothing --
   which is exactly why these two buttons stayed 152px and 163px. */
.at-hero__ctas > .elementor-widget-button,
.at-hero__ctas > .e-con-inner > .elementor-widget-button{flex:1 1 0 !important;min-width:0}
.at-hero__ctas .elementor-button{width:100% !important;justify-content:center}
.at-hero__ctas > .e-con-inner{width:100%;display:flex;gap:inherit}

/* ---- Service / process cards: reveal more on hover ---- */
.at-card{position:relative;overflow:hidden}
.at-card .elementor-icon-box-description{
  max-height:3.4em;overflow:hidden;
  transition:max-height .45s var(--e-out),opacity .35s;
}
.at-card:hover .elementor-icon-box-description{max-height:14em}
.at-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad-brand);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e-out);
}
.at-card:hover::after{transform:scaleX(1)}

/* ==========================================================================
   10 · FOOTER
   ========================================================================== */
.at-footer{background:var(--grad-dark);color:rgba(255,255,255,.62)}
.at-footer a{color:rgba(255,255,255,.62);transition:color .25s}
.at-footer a:hover{color:#fff}
.at-footer .elementor-heading-title{color:#fff !important}
.at-footer__logo img{height:30px;width:auto;display:block}
/* slim gradient bar: small white logo left, copyright right */
.at-footer--slim .at-footer__logo img{height:26px;width:auto;display:block}
.at-footer--slim .at-footer__copy p{margin:0}
.at-footer--slim .at-footer__bar{border:none !important}
.at-footer--slim .elementor-widget{margin-bottom:0 !important}
@media (max-width:600px){
  .at-footer--slim .at-footer__bar{justify-content:center !important;text-align:center}
  .at-footer--slim .at-footer__copy{text-align:center}
  .at-footer--slim .at-footer__logo img{margin-inline:auto}
}
.at-footer__cta .elementor-button{white-space:nowrap !important}

/* kill Elementor's active-item underline/pointer in the footer menus */
.at-footer .elementor-nav-menu--main .elementor-item::before,
.at-footer .elementor-nav-menu--main .elementor-item::after,
.at-footer .elementor-item::before,
.at-footer .elementor-item::after{display:none !important;content:none !important}
.at-footer .elementor-item.elementor-item-active{color:#fff !important}

/* legal menu: one compact inline row, wrapping centred on narrow screens */
.at-footer__legal .elementor-nav-menu{
  display:flex !important;flex-wrap:wrap;gap:6px 20px;align-items:center;
}
.at-footer__legal .elementor-nav-menu li{margin:0 !important}
.at-footer__legal .elementor-item{padding:2px 0 !important;font-size:.8rem !important}

.at-footer__bar{gap:12px}
.at-footer__copy p{margin:0}

@media (max-width:860px){
  .at-footer__bar{flex-direction:column !important;text-align:center}
  .at-footer__legal .elementor-nav-menu{justify-content:center}
  .at-footer__copy{text-align:center}
  .at-footer__grid{gap:26px !important}
  .at-footer__grid > .e-con-inner{gap:26px !important}
}


/* ==========================================================================
   TOUCH + SMALL-SCREEN PASS
   ========================================================================== */

/* Cards reveal their copy on hover. A touch screen has no hover, so on phones
   and tablets that copy was clipped to 3.4em and unreachable -- the reveal has
   to be unconditional there, not a hover affordance. */
@media (hover:none){
  .at-card .elementor-icon-box-description{max-height:none !important;overflow:visible !important}
  .at-card::after{transform:scaleX(1)}
}

/* The service tab strip scrolls horizontally on small screens (5 tabs, 776px of
   content in a 355px rail). It worked, but with no visual cue that there was
   anything past 'IT Services'. Fade the right edge while more remains, snap to
   tabs, and drop the scrollbar. */
.e-n-tabs-heading{
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.e-n-tabs-heading::-webkit-scrollbar{display:none}
.e-n-tabs-heading > .e-n-tab-title{scroll-snap-align:center}
@media (max-width:1024px){
  .at-services .e-n-tabs{position:relative}
  .at-services .e-n-tabs::after{
    content:'';position:absolute;top:0;right:0;width:46px;height:64px;
    pointer-events:none;z-index:3;opacity:.9;
    background:linear-gradient(270deg,var(--paper),transparent);
  }
}

/* Marquee rows: narrower edge fades and a slower loop, so the logos are
   actually legible at phone width instead of flying past. */
@media (max-width:640px){
  .at-logorow--ltr  .at-logoset{animation-duration:78s}
  .at-logorow--rtl  .at-logoset{animation-duration:88s}
  .at-logorow--ltr2 .at-logoset{animation-duration:98s}
  .at-logoset{padding-right:34px}
  .at-logoset .at-logo{min-width:38px}
}

/* Tablet: two logo rows' worth of breathing room, and keep the hero CTAs from
   stretching to full width where they look like banners rather than buttons. */
@media (min-width:641px) and (max-width:1024px){
  .at-logoset .at-logo img{height:36px !important}
}

/* The CTA row fills its column, but the three stats were left-packed and ended
   ~150px short of it, so the two rows did not line up. Spreading the stats to
   the same edges makes the buttons and the stats visibly the same width, which
   was the point of matching them. Desktop/tablet only - on phones they stay
   centred and wrap. */
@media (min-width:768px){
  /* Boxed containers put the real flex row on .e-con-inner - setting
     justify-content on the outer .e-con alone does nothing. */
  .at-hero__stats,
  .at-hero__stats > .e-con-inner{justify-content:space-between !important}
  .at-hero__stats > .elementor-widget-counter,
  .at-hero__stats > .e-con-inner > .elementor-widget-counter{flex:0 0 auto !important}
}
/* stats spread to match the CTA row */


/* Touch tap targets.
   The logo links (21-26px tall) and the mailto link sat well under the ~44px
   comfortable touch size. Padding alone would grow the header, so the padding
   is cancelled by an equal negative margin: the hit area grows, the layout does
   not move a pixel. Touch pointers only - it is pointless on a mouse. */
@media (hover:none){
  .at-header__logo a,
  .at-footer__logo a,
  .at-contact a[href^='mailto:']{
    display:inline-flex;align-items:center;
    padding-block:12px;margin-block:-12px;
  }
}


/* ---- Slim footer copyright: (c) YEAR [logo] All rights reserved ---- */
.at-footer--slim .at-footer__bar{justify-content:center !important}
.at-footer--slim .at-footer__bar > .e-con-inner{justify-content:center !important}
.at-copy{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 8px;margin:0;text-align:center;
}
/* The logo sits mid-line, so it is sized to the cap height of the text rather
   than its own natural size, and vertically centred with the words. */
/* Elementor's own widget image rules are more specific than a bare class and
   were forcing display:block at the logo's natural 1074x188. */
.at-footer--slim .at-copy img.at-copy__logo{
  height:17px !important;width:auto !important;max-width:none !important;
  display:inline-block !important;vertical-align:middle;
  position:relative;top:-1px;margin:0;
}
@media (max-width:640px){
  .at-copy{font-size:.78rem;gap:0 6px}
  .at-footer--slim .at-copy img.at-copy__logo{height:15px !important}
}