/*--------------------------------------------------------------
# Counter One
--------------------------------------------------------------*/
.counter-one {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 150px 0 81px;
    z-index: 1;
    background: transparent; /* remove solid background so video shows */
    border-bottom: 1px solid var(--tecture-base);
    border-top: 2px solid var(--tecture-base);
}

/* Background video */
.counter-one__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2; /* behind shapes & overlay */
    pointer-events: none;
}

.counter-one__shape {
    position: absolute;
    top: 0;
    right: -100px;
    opacity: .1;
    z-index: 0;
}

.counter-one__shape-1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1; /* sits above video but behind content */
}

.counter-one__inner {
    position: relative;
    display: block;
    z-index: 1; /* keep text above video */
}

.counter-one__title-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 53px;
}

.counter-one__title-box .section-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 23px;
}

.counter-one__title-border {
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--tecture-bdr-color);
}

.counter-one__list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 33px;
}

.counter-one__list li {
    position: relative;
    display: block;
    margin-bottom: 27px;
}

.counter-one__single {
    position: relative;
    display: block;
}

.counter-one__counter-box {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.counter-one__counter-box h3 {
    font-size: 72px;
    color: var(--tecture-white);
    font-weight: 700;
    line-height: 72px !important;
    font-family: var(--tecture-font) !important;
    font-style: normal;
}

.counter-one__counter-letter {
    font-size: 72px;
    color: var(--tecture-white);
    font-weight: 700;
    line-height: 72px;
    font-family: var(--tecture-font);
    font-style: normal;
}

.counter-one__counter-plus {
    font-size: 72px;
    color: var(--tecture-white);
    font-weight: 700;
    line-height: 72px;
    font-family: var(--tecture-font);
    font-style: normal;
}

.counter-one__counter-text {
    font-size: 26px;
    color: var(--tecture-white);
    line-height: 36px;
}

/* ===== ATOC | Counter One spacing + size tweaks ===== */

/* Make items centre neatly and reduce default li margin */
.counter-one .counter-one__list li{ margin-bottom:0 !important; }

/* Numbers + suffix a touch larger, keep same baseline, tighter gap */
.counter-one .counter-one__counter-box{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;                 /* was 6px */
  margin-bottom:8px !important;       /* was 12/10px */
}
.counter-one .counter-one__counter-box h3{
  font-size:clamp(34px, 7.6vw, 60px) !important; /* slightly larger */
  line-height:1 !important;
}
.counter-one .counter-one__counter-letter,
.counter-one .counter-one__counter-plus{
  font-size:clamp(19px, 5vw, 30px) !important;   /* slightly larger */
  line-height:1 !important;
}

/* Label a touch larger and closer to the numbers */
.counter-one .counter-one__counter-text{
  font-size:clamp(13px, 3.2vw, 19px) !important; /* up from 12–18 */
  line-height:1.2 !important;
  margin-top:4px !important;                     /* was 6px */
}

/* Tablet: reduce section padding and grid gap, keep centred */
@media (max-width: 991.98px){
  .counter-one{ padding:84px 0 56px !important; }     /* was 150/81 */
  .counter-one .counter-one__list{ gap:16px 12px !important; }
  .counter-one .counter-one__counter-text{ margin-top:3px !important; }
}

/* Phones: one per row, tighter vertical rhythm and section padding */
@media (max-width: 575.98px){
  .counter-one{ padding:70px 0 48px !important; }
  .counter-one .counter-one__list{ gap:14px !important; }
  .counter-one .counter-one__counter-box{ gap:3px !important; margin-bottom:6px !important; }
  .counter-one .counter-one__counter-text{
    font-size:clamp(14px, 4vw, 18px) !important;
    margin-top:2px !important;
  }
}

/* Ensure background video always contains by width, never overflows */
.counter-one .counter-one__video{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  pointer-events:none !important; z-index:-2 !important;
}

/* ===== ATOC | Counter One true centring fix ===== */

/* Grid stays, but each li is now a centred flex item */
.counter-one .counter-one__list{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:22px 18px !important;
  }
  .counter-one .counter-one__list li{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 !important;
    text-align:center !important;
  }
  
  /* The card itself centres its contents */
  .counter-one .counter-one__single{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:auto !important;           /* do not stretch full width */
  }
  
  /* Counter row is centred as a unit, regardless of digits */
  .counter-one .counter-one__counter-box{
    display:inline-flex !important;
    align-items:baseline !important;
    gap:4px !important;
    margin:0 auto 6px auto !important; /* <- the key: auto margins centre the row */
    flex-wrap:nowrap !important;
  }
  
  /* Responsive type (a touch larger per your last note) */
  .counter-one .counter-one__counter-box h3{
    font-size:clamp(34px, 7.6vw, 60px) !important;
    line-height:1 !important;
  }
  .counter-one .counter-one__counter-letter,
  .counter-one .counter-one__counter-plus{
    font-size:clamp(19px, 5vw, 30px) !important;
    line-height:1 !important;
  }
  .counter-one .counter-one__counter-text{
    font-size:clamp(14px, 4vw, 18px) !important;
    line-height:1.2 !important;
    margin-top:2px !important;
  }
  
  /* Tablet: 2-up */
  @media (max-width: 991.98px){
    .counter-one .counter-one__list{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:16px 12px !important; }
  }
  
  /* Phones: 1-up + tighter section padding */
  @media (max-width: 575.98px){
    .counter-one .counter-one__list{ grid-template-columns:1fr !important; gap:14px !important; }
    .counter-one{ padding:70px 0 48px !important; }
  }
  
























/*--------------------------------------------------------------
# End
--------------------------------------------------------------*/