@charset "UTF-8";

/* ── Inter ──────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter/static/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Space Grotesk ───────────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── JetBrains Mono ──────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../font/JetBrains_Mono/static/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../font/JetBrains_Mono/static/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../font/JetBrains_Mono/static/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}







/* beautify ignore:start */
.back-to-top-wrapper, a,
button,
p,
input,
select,
textarea,
li {
  transition: all 0.3s ease-out;
}

/* transform */
/* beautify ignore:start */

.fz-150 {
  font-size: 120px;
}

.fz-ds-1 {
  font-size: 80px !important;
}

@media screen and (min-width: 1441px) {
  .fz-150 {
    font-size: 150px;
  }
  .fz-ds-1 {
    font-size: 124px !important;
  }
  .footer-2-connect-title {
    font-size: 220px;
  }
}

.opacity-10 {
  opacity: 0.1;
}

.page-loader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  top: 0;
}

.page-loader .page-loader-logo {
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.bar {
  width: 10vw;
  height: 105vh;
  background: #1d1d1d;
}

.swiper-button-wrapper {
  display: flex;
  gap: 10px;
}

.swiper-btn-next,
.swiper-btn-prev {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--at-neutral-700);
  background-color: var(--at-neutral-800);
  transition: all 0.3s ease-in-out;
  color: var(--at-common-white);
}
.swiper-btn-next::after,
.swiper-btn-prev::after {
  content: "";
}
.swiper-btn-next:hover,
.swiper-btn-next :active,
.swiper-btn-prev:hover,
.swiper-btn-prev :active {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: var(--at-neutral-700);
  transition: all 0.3s ease-in-out;
}

.swiper-pagination {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
  align-items: center;
  left: 50% !important;
  width: unset !important;
  gap: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(1px);
  transform: translateX(-50%);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-top: 70px;
  padding: 0;
}

/* Text Truncation */

.border-100 {
  border: 1px solid var(--at-neutral-100) !important;
}

.at-brand-item {
  display: flex;
  width: 180px;
  height: 180px;
  padding: 0 29px 0 30px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid var(--at-neutral-100, #dfdfdf);
  background: var(--at-neutral-0, #fefefe);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) {
  .at-brand-item {
    width: 165px;
    height: 165px;
  }
}

/* Allow page scroll when cursor is in empty area; children (.client-capsule-wrapper > *) keep pointer-events: auto for drag */

.reveal-text.indent .split-line:first-child {
  padding-left: 20px;
}

@media (max-width: 574.98px) {
  .reveal-text.indent .split-line:first-child {
    padding-left: 0;
  }
}

:root {
  /**
  @font family declaration
  */
  /* --at-ff-body: 'Space Grotesk', sans-serif;
  --at-ff-heading: 'Space Grotesk', sans-serif; */
  --font-display: 'Space Grotesk', sans-serif;  /* headings */
  --font-body: 'Inter', sans-serif;             /* body text */
  /* --font-mono: 'JetBrains Mono', monospace; */
  --at-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @font size declaration
  */
  --at-fz-font-md: 16px;
  --at-fz-font-lg: 20px;
  --at-fz-font-2xl: 28px;
  --at-fz-ds-1: 124px;
  --at-fz-24: 24px;
  /**
  @color declaration
  */
  --at-common-white: #ffffff;
  --at-common-white-rgb: 255, 255, 255;
  --at-common-black: #1e1e1e;
  --at-common-dark-white: #1e1e1e;
  --at-common-dark-white-rgb: 30, 30, 30;
  --at-common-dark-black: #FFFFFF;
  --at-neutral-0: #FEFEFE;
  --at-neutral-0-rgb: 254, 254, 254;
  --at-neutral-50: #F2F2F2;
  --at-neutral-100: #DFDFDF;
  --at-neutral-200: #CDCCCC;
  --at-neutral-300: #B7B7B7;
  --at-neutral-500: #585959;
  --at-neutral-700: #303030;
  --at-neutral-800: #212121;
  --at-neutral-900: #1D1D1D;
  --at-neutral-950: #0F0F0F;
  --at-neutral-dark-0: #0C0C0C;
  --at-neutral-dark-0-rgb: 12, 12, 12;
  --at-neutral-dark-50: #141414;
  --at-neutral-dark-100: #212121;
  --at-neutral-dark-200: #2D2D2D;
  --at-neutral-dark-300: #404040;
  --at-neutral-dark-500: #B3B3B3;
  --at-neutral-dark-700: #535353;
  --at-neutral-dark-800: #EAEAEA;
  --at-neutral-dark-900: #EFEFEF;
  --at-neutral-dark-950: #F4F4F4;
  --at-theme-primary: #F0460E;
  --at-theme-light: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-size: 16px;
  line-height: 1.2;
  font-weight: normal;
  color: var(--at-neutral-900);
  background-color: var(--at-neutral-0);
  font-family: var(--font-body);
  /* font-family: var(--at-ff-body); */
  /* overflow: hidden; */
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -5%;
  transition: color 0.3s ease-out;
  color: var(--at-neutral-900);
  font-family: var(--font-display);
  /* font-family: var(--at-ff-body); */
}

h1,
.h1 {
  font-size: 70px;
}

h2,
.h2 {
  font-size: 60px;
}

h3,
.h3 {
  font-size: 52px;
}

h4,
.h4 {
  font-size: 38px;
}

h5,
.h5 {
  font-size: 26px;
}

h6,
.h6 {
  font-size: 20px;
}

.fz-font-lg {
  font-size: 18px !important;
}

@media screen and (min-width: 1401px) {
  h1,
  .h1 {
    font-size: 84px;
  }
  h2,
  .h2 {
    font-size: 72px;
  }
  h3,
  .h3 {
    font-size: 64px;
  }
  h4,
  .h4 {
    font-size: 48px;
  }
  h5,
  .h5 {
    font-size: 34px;
  }
  h6,
  .h6 {
    font-size: 24px;
  }
  .fz-font-lg {
    font-size: 20px !important;
  }
}
ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  letter-spacing: -2%;
  line-height: 1.2;
  font-family: var(--at-ff-body);
  color: var(--at-neutral-500);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  color: var(--at-neutral-900);
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--at-neutral-500);
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder {
  /* MODERN BROWSER */
  color: var(--at-neutral-500);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
  /* MODERN BROWSER */
  color: var(--at-neutral-500);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--at-neutral-900);
}
input[type=text]:focus::-moz-placeholder, input[type=email]:focus::-moz-placeholder, input[type=tel]:focus::-moz-placeholder, input[type=number]:focus::-moz-placeholder, input[type=password]:focus::-moz-placeholder, input[type=url]:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  opacity: 0;
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

textarea {
  line-height: 1.4;
  padding-top: 17px;
  padding-bottom: 17px;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--at-neutral-900);
  color: var(--at-neutral-0);
  text-shadow: none;
}

::-moz-selection {
  background: var(--at-neutral-900);
  color: var(--at-neutral-0);
  text-shadow: none;
}

::selection {
  background: var(--at-neutral-900);
  color: var(--at-neutral-0);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--at-neutral-900);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--at-neutral-900);
  font-size: 14px;
  opacity: 1;
}

/*---------------------------------
    1.1 Common Classes
---------------------------------*/
.overflow-unset {
  overflow: unset !important;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.z-index-1 {
  position: relative;
  z-index: 1;
}

.z-index-2 {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.gx-30 {
}

/* Bootstrap's own gy-* row-gap scale stops at gy-5 (3rem). These extend it
   with larger steps, using the same --bs-gutter-y custom property Bootstrap's
   .row already reads, so they drop into existing gy-* / g-* markup unchanged. */
.gy-6 {
  --bs-gutter-y: 4rem;
}
.gy-7 {
  --bs-gutter-y: 5rem;
}
.gy-8 {
  --bs-gutter-y: 6rem;
}
.gy-9 {
  --bs-gutter-y: 7rem;
}
.gy-10 {
  --bs-gutter-y: 8rem;
}

.p-relative {
  position: relative;
}

.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1400px) {
  .container-2200 {
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Font weight */

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

/* Font size */

.fz-font-md {
  font-size: var(--at-fz-font-md);
}

.fz-font-lg {
  font-size: var(--at-fz-font-lg);
}

.fz-font-2xl {
  font-size: var(--at-fz-font-2xl);
}

.fz-ds-1 {
  font-size: var(--at-fz-ds-1);
}

.fz-24 {
  font-size: var(--at-fz-24);
}

/* Color */
.common-white {
  color: var(--at-common-white) !important;
}
.testimonial_bg .common-white {
  color: var(--at-common-black) !important;
}

.common-black {
  color: var(--at-common-black) !important;
}

.neutral-0 {
  color: var(--at-neutral-0) !important;
}

.neutral-500 {
  color: var(--at-neutral-500) !important;
}

.neutral-900 {
  color: var(--at-neutral-900) !important;
}

/* Background Color */

.bg-neutral-0 {
  background-color: var(--at-neutral-0) !important;
}

.bg-neutral-950 {
  background-color: var(--at-neutral-950) !important;
}

.bg-theme-primary {
  background-color: var(--at-theme-primary) !important;
}

/*---------------------------------
    Footer Fixed Bottom Effect (Kanso Style)
---------------------------------*/
#smooth-content {
  pointer-events: none;
}
#smooth-content > * {
  pointer-events: auto;
}
#smooth-content main {
  position: relative;
  z-index: 2;
  will-change: transform;
  min-height: 100vh;
}
#smooth-content .footer-placeholder {
  pointer-events: none;
}

.footer-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  transform-origin: center bottom;
  will-change: transform;
}
.footer-fixed-bottom .at-footer-area {
  position: relative;
  z-index: 1;
}

.footer-placeholder {
  width: 100%;
  pointer-events: none;
}

/*---------------------------------
    1.2 Default Spacing
---------------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .pt-130 {
    padding-top: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .pt-120 {
    padding-top: 80px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .pt-100 {
    padding-top: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}
@media (max-width: 574.98px) {
  .pb-130 {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}
@media (max-width: 574.98px) {
  .pb-120 {
    padding-bottom: 55px;
  }
   .pt-120 {
    padding-top: 55px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Font size */
  .fz-font-md {
    font-size: 18px !important;
  }
  .fz-font-lg {
    font-size: 20px !important;
  }
  .fz-font-2xl {
    font-size: 26px !important;
  }
  .fz-ds-1 {
    font-size: 72px !important;
  }
  h1,
  .h1 {
    font-size: 58px;
  }
  h2,
  .h2 {
    font-size: 50px;
  }
  h3,
  .h3 {
    font-size: 42px;
  }
  h4,
  .h4 {
    font-size: 30px;
  }
  h5,
  .h5 {
    font-size: 28px;
  }
  h6,
  .h6 {
    font-size: 20px;
  }
  .fz-150 {
    font-size: 100px;
  }
  .scroll-section .pb-80 {
    padding-bottom: 0;
  }
}
@media (min-width: 991px) {
  .pt-md-80{
    padding-top: 80px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Font size */
  .fz-font-md {
    font-size: 16px !important;
  }
  .fz-font-lg {
    font-size: 18px !important;
  }
  .fz-font-2xl {
    font-size: 24px !important;
  }
  .fz-ds-1 {
    font-size: 60px !important;
  }
  h1,
  .h1 {
    font-size: 54px;
  }
  h2,
  .h2 {
    font-size: 52px;
  }
  h3,
  .h3 {
    font-size: 40px;
  }
  h4,
  .h4 {
    font-size: 36px;
  }
  h5,
  .h5 {
    font-size: 24px;
  }
  h6,
  .h6 {
    font-size: 20px;
  }
  .fz-150 {
    font-size: 110px;
  }
  .scroll-section .pb-80 {
    padding-bottom: 0;
  }
  br {
    display: none;
  }
}
@media (max-width: 574.98px) {
  /* Font size */
  .fz-font-md {
    font-size: 14px !important;
  }
  .fz-font-lg {
    font-size: 16px !important;
  }
  .fz-font-2xl {
    font-size: 22px !important;
  }
  .fz-ds-1 {
    font-size: 54px !important;
  }
  h1,
  .h1 {
    font-size: 50px;
  }
  h2,
  .h2 {
    font-size: 38px;
  }
  h3,
  .h3 {
    font-size: 36px;
  }
  h4,
  .h4 {
    font-size: 30px;
  }
  h5,
  .h5 {
    font-size: 20px;
  }
  h6,
  .h6 {
    font-size: 16px;
  }
  .fz-150 {
    font-size: 52px;
  }
  br {
    display: none;
  }
  .scroll-section .pb-80 {
    padding-bottom: 0;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1750px;
  }
}
/* HEADER CSS */
/*----------------------------------------*/
/*  3.2 Header main
/*----------------------------------------*/
.at-header-logo {
  display: flex;
  align-items: center;
}
.at-header-logo a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.at-header-spacing {
  padding: 30px 10px 20px;
}

@media (min-width: 1600px) {
  .at-header-spacing {
    padding: 30px 45px 20px;
  }
}

.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  width: 100%;
}

/*----------------------------------------*/
/*  Header 7 (toggle inline nav)
/*----------------------------------------*/

/*----------------------------------------*/
/*  Header 8 — primary-coloured CTA button
/*----------------------------------------*/

:root {
  --basic-ease: cubic-bezier(.625, .05, 0, 1);
}

.at-title-text span {
  display: inline-block;
  text-shadow: 0 1.05em #7dd3fc;
  text-shadow: 0 1.05em color-mix(in srgb, #38bdf8 calc(100% - var(--char-pct, calc((var(--char) - 1) * 8.33%))), #ffffff);
  transition: translate 0.3s var(--basic-ease), text-shadow 0.1s 0.15s ease;
}
.at-title-anim:hover .at-title-text span {
  text-shadow: 0 1.05em currentColor;
  translate: 0 -1.05em 0;
  transition: translate 0.5s calc((var(--char) - 1) * 0.024s) var(--basic-ease), text-shadow 0.175s calc((var(--char) - 1) * 0.024s + 0.225s) ease;
}

/* Header 12 (Home 12) — keep logo/phone at their natural width and let
   the nav take the rest, instead of a fixed 2/8/2 split that's too
   tight for 5 nav items between 992-1199px and wraps the phone pill. */
@media (min-width: 992px) {
  .header-12 .at-header-area .row {
    flex-wrap: nowrap;
  }
  .header-12 .at-header-area .at-header-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .header-12 .at-header-area .at-header-col-fill {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

.header-12 .at-main-menu {
  background-color: var(--at-neutral-0);
  padding: 10px 15px;
  border-radius: 50px;
}

/* Header 14 (Home 14 — Photography Showcase) */

/*----------------------------------------*/
/*  5.2 Postbox css
/*----------------------------------------*/
.postbox-item:not(:last-child) {
  border-bottom: 1px solid rgba(30, 30, 30, 0.08);
  padding-bottom: 50px;
  margin-bottom: 60px;
}
.postbox-item:hover .postbox-thumb img {
  transform: scale(1.1);
}
.postbox-thumb {
  border-radius: 42px;
  overflow: hidden;
}
.postbox-thumb img {
  border-radius: 42px;
  transition: all 0.8s ease;
}
.postbox-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.postbox-play-btn a {
  height: 80px;
  width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 77px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  animation: animate-pulse 3s linear infinite;
}
.postbox-play-btn a svg {
  margin-left: 3px;
  display: inline-block;
}

.postbox-scroll-zoom .postbox-item-wrap {
  width: 100%;
  height: 200vh;
}
.postbox-scroll-zoom .postbox-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.postbox-scroll-zoom .postbox-thumb {
  width: 100%;
  height: 100%;
  background: var(--at-neutral-50, #f2f2f2);
  /* background-color: var(--at-neutral-0, #f5f5f5); */
}
.postbox-scroll-zoom .postbox-scroll-zoom-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: inset(calc(50% - 50px) calc(50% - 100px) calc(50% - 50px) calc(50% - 100px) round 4px);
  will-change: clip-path;
  position: relative;
  z-index: 2;
}
.postbox-scroll-zoom .postbox-scroll-zoom-play {
  z-index: 3;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  padding: 4% 0;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee-row.dir-left .postbox-scroll-zoom-marquee-track {
  animation: postbox-marquee-left 30s linear infinite;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee-row.dir-right .postbox-scroll-zoom-marquee-track {
  animation: postbox-marquee-right 35s linear infinite;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee-track {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 40px;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--at-neutral-100, #dfdfdf);
  padding-right: 40px;
}
.postbox-scroll-zoom .postbox-scroll-zoom-marquee-track > span {
  display: inline-block;
  flex-shrink: 0;
}

@keyframes postbox-marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes postbox-marquee-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .postbox-scroll-zoom .postbox-scroll-zoom-marquee-row .postbox-scroll-zoom-marquee-track {
    animation: none;
  }
}
/*----------------------------------------*/
/*  5.1 Blog css
/*----------------------------------------*/
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Blog card 2 – horizontal 3-column layout  */
.blog-card-2 {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(30, 30, 30, 0.08);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .blog-card-2 {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
}

/* Blog card 3 – sidebar Flash news (compact horizontal) */

/* Product card – shop archive */
.product-card {
  display: flex;
  flex-direction: column;
}

/*----------------------------------------*/
/*  4.1 Mobile Menu
/*----------------------------------------*/
.at-main-menu {
  padding: 5px 8px;
}
.at-main-menu nav ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}
.at-main-menu nav ul li.has-dropdown > a {
  color: var(--at-common-black);
  position: relative;
  transition: all 0.4s ease 0.3s ease-out;
}
.at-main-menu nav ul li.has-dropdown > a::after {
  content: "";
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M0.119881 4.0916L3.76201 0.14603C3.8265 0.0762058 3.912 0.0286966 4.00771 0.00950819C4.10343 -0.00968026 4.20505 0.000313791 4.29974 0.0382265C4.39443 0.0761392 4.47794 0.140268 4.5397 0.222507C4.60146 0.304746 4.63871 0.401402 4.64673 0.500256L4.96657 4.4493C4.97728 4.58185 4.93474 4.70892 4.8483 4.80257C4.76185 4.89622 4.63858 4.94877 4.50559 4.94867L0.543624 4.94521C0.444446 4.94511 0.345125 4.9157 0.258216 4.8607C0.171308 4.8057 0.100716 4.72759 0.0553628 4.63623C0.0100097 4.54486 -0.00806781 4.44436 0.00341617 4.34742C0.0149001 4.25048 0.0554298 4.16146 0.119881 4.0916Z" fill="%230F0F0F"/></svg>');
}
.at-main-menu nav ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.at-main-menu nav ul li:hover.has-dropdown > a {
  transition: all 0.4s ease 0.3s ease-out;
}
.at-main-menu nav ul li a {
  font-family: var(--at-ff-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--at-common-black);
  padding: 10px 24px;
  display: inline-block;
  line-height: 1;
}
.at-main-menu nav ul li a:hover {
  color: var(--at-common-black);
}
.at-main-menu nav ul li.has-dropdown > a::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.at-main-menu nav ul li .submenu {
  position: absolute;
  top: 140%;
  left: 0;
  width: 260px;
  z-index: 99;
  opacity: 0;
  padding: 12px 0;
  transition: 0.5s;
  text-align: start;
  visibility: hidden;
  transform-origin: 0 0;
  transform: scale(1, 0);
  backdrop-filter: blur(20px);
  background: rgba(var(--at-neutral-0-rgb), 0.9);
  box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1);
}
.at-main-menu nav ul li .submenu li {
  width: 100%;
  padding: 0 12px;
  border-radius: 8px;
  margin: 0;
}
.at-main-menu nav ul li .submenu li a {
  position: relative;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--at-neutral-500);
  padding: 12px 18px;
  display: inline-block;
  letter-spacing: -0.01em;
  text-align: start;
  width: 100%;
  font-family: var(--at-ff-body);
  transition: padding-left 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.3s ease, color 0.3s ease;
}
.at-main-menu nav ul li .submenu li .submenu {
  top: 0;
  left: 100%;
}
.at-main-menu nav ul li .submenu li:hover > a {
  background: var(--at-neutral-50);
  color: var(--at-neutral-900) !important;
  padding-left: 23px;
}

/*----------------------------------------*/
/*  4.x Main menu — text swap hover animation
/*  Wrapper .at-link-swap is injected by main.js (section 47c)
/*----------------------------------------*/
.at-main-menu > nav > ul > li > a {
  /* Descender room: wrapper has 4px padding-bottom for "g","p" tails;
     compensate link's bottom padding so total height stays 36px. */
  --link-desc-room: 4px;
  padding-bottom: calc(10px - var(--link-desc-room));
}
.at-main-menu > nav > ul > li > a .at-link-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding-bottom: var(--link-desc-room);
}
.at-main-menu > nav > ul > li > a .at-link-swap .text-1,
.at-main-menu > nav > ul > li > a .at-link-swap .text-2 {
  display: block;
  line-height: inherit;
  /* Wavy easing: cubic-bezier with overshoot creates a bounce/settle
     feel that reads as a subtle wave during the swap. */
  transition: transform 0.45s cubic-bezier(0.5, 1.5, 0.35, 1);
}
.at-main-menu > nav > ul > li > a .at-link-swap .text-1 {
  position: relative;
}
.at-main-menu > nav > ul > li > a .at-link-swap .text-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Park text-2 fully below the wrapper's padding-box
     (own height + descender room) so it never leaks at rest. */
  transform: translateY(calc(100% + var(--link-desc-room)));
}

/* Trigger swap on the parent <li>:hover so the hit area covers the
   entire menu item (incl. empty space inside .menu-light.style-1
   where <a> is shorter than the 48px container). */
.at-main-menu > nav > ul > li:hover > a .at-link-swap .text-1 {
  /* Push text-1 up enough to clear both content + padding-bottom area. */
  transform: translateY(calc(-100% - var(--link-desc-room)));
}
.at-main-menu > nav > ul > li:hover > a .at-link-swap .text-2 {
  transform: translateY(0);
}

/*----------------------------------------*/
/*  4.3 offcanvas scss
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 995;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay.apply {
  opacity: 1;
  visibility: visible;
}
.body-overlay:hover {
  cursor: url(../imgs/icons/cross-out.webp), pointer;
}

.at-offcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 460px;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--at-common-white);
  z-index: 997;
  padding: 50px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
@media (max-width: 574.98px) {
  .at-offcanvas {
    width: 100%;
    padding: 25px 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .at-offcanvas {
    width: 400px;
    padding: 40px;
  }
}
.at-offcanvas-logo a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.at-offcanvas.opened {
  opacity: 1;
  visibility: visible;
  right: 0;
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.at-offcanvas-top {
  margin-bottom: 50px;
}
.at-offcanvas-close-btn button {
  color: rgba(var(--at-common-black), 1);
}
.at-offcanvas-close-btn button:hover {
  opacity: 1;
  transform: rotate(90deg);
}
.at-offcanvas-contact {
  margin-bottom: 55px;
}
.at-offcanvas-contact ul li {
  list-style: none;
}
.at-offcanvas-contact ul li:not(:last-child) {
  margin-bottom: 14px;
}
.at-offcanvas-contact ul li a {
  display: inline-block;
  color: var(--at-neutral-900);
  position: relative;
  font-family: var(--at-ff-body);
}

.at-offcanvas-social {
  margin-top: 40px;
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) {
  .at-offcanvas-social {
    margin-bottom: 40px;
  }
}
.at-offcanvas-social__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.at-offcanvas-social__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--at-common-black);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--at-ff-body);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.at-offcanvas-social__link:hover {
  color: var(--at-theme-primary, var(--at-common-black));
  opacity: 0.85;
}
.at-offcanvas-social__link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.at-offcanvas-2-area.menu-open,
.at-offcanvas-2-area.menu-open-temp {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 100%;
  transition: all 0s 2s;
  width: 600px;
  z-index: 1000;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-offcanvas-2-area.menu-open,
  .at-offcanvas-2-area.menu-open-temp {
    width: 100%;
  }
}

.at-offcanvas-2-area {
  position: fixed;
  left: 100%;
}
.at-offcanvas-2-area.menu-open .at-offcanvas-menu > nav > ul > li {
  visibility: visible;
  opacity: 1;
}
.at-offcanvas-2-area.menu-open .at-offcanvas-menu > nav > ul > li a {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.at-offcanvas-2-area.menu-open .at-header-logo {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------------------*/
/*  4.2 Mobile Menu
/*----------------------------------------*/
.at-offcanvas-menu ul {
  list-style: none;
}
.at-offcanvas-menu ul li {
  position: relative;
}
.at-offcanvas-menu ul li > a {
  padding: 7px 0;
  display: block;
  font-size: 18px;
  font-weight: 600;
}
.at-offcanvas-menu ul li.active > a {
  color: var(--at-common-black);
}
.at-offcanvas-menu ul li.active > .at-menu-close i {
  top: 10px;
  transform: rotate(90deg);
}
.at-offcanvas-menu ul li .submenu {
  display: none;
}
.at-offcanvas-menu ul li .submenu .submenu {
  margin-left: 30px;
}
.at-offcanvas-menu .at-submenu > li > a {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 16px;
}
.at-offcanvas-menu .at-submenu > li > a:hover {
  background-color: #f8f8fb;
  color: var(--at-common-black);
}

.at-menu-close {
  position: absolute;
  right: 7px;
  top: 12px;
}
.at-menu-close i {
  transition: all 0.3s;
  font-size: 18px;
  font-weight: 500;
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
.at-footer-link .at-hero-social {
  justify-content: flex-start;
}
.at-footer-copyright {
  font-weight: 500;
  font-size: 16px;
  opacity: 0.5;
  color: var(--at-common-black);
}
.alt-footer-link-item ul li {
  list-style: none;
}
.alt-footer-link-item ul li a {
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--at-neutral-300);
  position: relative;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  transition: all 0.4s ease 0.3s ease-out;
}
.alt-footer-link-item ul li a::before {
  content: "";
  width: 14px;
  height: 13px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none"><g opacity="0.3" clip-path="url(%23clip0_1857_869)"><path d="M11.0037 3.41421L2.39712 12.0208L0.98291 10.6066L9.5895 2H2.00373V0H13.0037V11H11.0037V3.41421Z" fill="%23FEFEFE"/></g><defs><clipPath id="clip0_1857_869"><rect width="14" height="13" fill="white"/></clipPath></defs></svg>');
  margin-left: 14px;
  position: absolute;
  left: 100%;
  top: 50%;
  opacity: 0;
  transition: all 0.5s ease;
  transform: translate(-15px, -40%);
}
.alt-footer-link-item ul li a.fz-font-md::before {
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 14 13" fill="none"><g opacity="0.3" clip-path="url(%23clip0_1857_869)"><path d="M11.0037 3.41421L2.39712 12.0208L0.98291 10.6066L9.5895 2H2.00373V0H13.0037V11H11.0037V3.41421Z" fill="%23FEFEFE"/></g><defs><clipPath id="clip0_1857_869"><rect width="14" height="13" fill="white"/></clipPath></defs></svg>');
}
.alt-footer-link-item ul li a:hover {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  transition: all 0.4s ease 0.3s ease-out;
  color: var(--at-neutral-0);
}
.alt-footer-link-item ul li a:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .alt-footer-link-item-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}

.mp-footer-style .at-hero-social a {
  color: var(--at-common-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mp-footer-style .at-hero-social a:hover {
  background: var(--at-common-white);
  color: var(--at-common-black);
}
.mp-footer-style .at-footer-copyright {
  color: var(--at-common-white);
}

.text-scale-anim {
  white-space: pre-wrap;
  transform-origin: top left;
}

.at-letter-span {
  display: inline-block;
}

.at-word-span {
  display: inline-block;
}

/*----------------------------------------*/
/*  Footer Style 2
/*----------------------------------------*/
.footer-2-follow-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.footer-2-border {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-2-connect-title {
  font-weight: 500;
  font-size: 160px;
  letter-spacing: -11px;
  line-height: 1.1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-2-connect-title {
    letter-spacing: 0;
    font-size: clamp(3rem, 4vw, 3rem);
  }
}
@media (min-width: 290px) and (max-width: 380px) {
   .footer-2-connect-title {
    letter-spacing: 0;
    font-size: clamp(2.5rem, 4vw, 3rem);
  }
}
@media (min-width: 380px) and (max-width: 576px) {
   .footer-2-connect-title {
    letter-spacing: 0;
    font-size: clamp(3rem, 4vw, 3rem);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-2-connect-title {
    font-size: clamp(4rem, 4vw, 3rem);
  }
}

/* Footer feature labels (under Let's Connect) */
.footer-feature-label {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  cursor: default;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-feature-label:hover,
.footer-feature-label:focus,
.footer-feature-label:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
}

.footer-feature-label::before,
.footer-feature-label::after,
.footer-feature-label:hover::before,
.footer-feature-label:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/*----------------------------------------*/
/*  Footer style 7 (Home 7)
/*----------------------------------------*/

/*----------------------------------------*/
/*  Footer style 8 (Home 8)
/*----------------------------------------*/

.bg-neutral_new {
  background: var(--at-neutral-50, #f2f2f2);
}

/*----------------------------------------*/
/*  Footer style 9 (Home 9)
/*----------------------------------------*/

/*----------------------------------------*/
/*  Footer style 10 (Home 10)
/*----------------------------------------*/
.footer-10__hero {
  padding-bottom: clamp(40px, 6vw, 72px);
  margin-bottom: clamp(8px, 2vw, 24px);
}
.footer-10__deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  width: min(200px, 18vw);
}
.footer-10__deco img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
}
.footer-10__deco--left {
  left: 0;
}
@media (min-width: 1400px) {
  .footer-10__deco--left {
    left: clamp(8px, 4vw, 48px);
  }
}

/*----------------------------------------*/
/*  Footer style 11 (Home 11)
/*----------------------------------------*/

/* Footer 12 (Home 12) — Always-dark CTA + main footer */

/* ── CTA strip ──────────────────────────────────── */

/* `input.` selector matches the global theme rule `input[type="email"]` in
   specificity (1 element + 1 class) AND comes later in source order, so this
   reliably overrides the theme's height: 56px / line-height: 56px on this
   input only — without touching the global rule. */

/* ── Footer main ────────────────────────────────── */

/* Brand */

/* Socials — uses .at-hero-social pill pattern (shared with footer-1).
   Compound selector (.at-hero-social.footer-12__socials) keeps specificity
   above the global .at-hero-social rule from _hero.scss, which is loaded
   later in the cascade and would otherwise win on equal specificity. */

/* Column links */

/* Hours column */

/* ── Bottom bar ─────────────────────────────────── */

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 574.98px) {
  /* On mobile the pill wrapper looks cramped; lay out as two stacked
     full-width controls with their own rounded corners — no outer pill. */
}
/* Footer 13 — Architecture */

/* ── Meta bar ────────────────────────────────── */

/* ── Body ────────────────────────────────────── */

/* ── Top row ─────────────────────────────────── */

/* Brand */

/* Newsletter form */

/* Link columns */

/* ── Studios row ─────────────────────────────── */

/* ── Big brand text ──────────────────────────── */

/* ── Legal bar ───────────────────────────────── */

/* ── Responsive ──────────────────────────────── */
/* Desktop fine-tuning (range-based) */
/* Tablet & phone (≤1199px): stack top row, shrink paddings */
/* Tablet portrait & phone (≤991px): 2-col link cols, single-col studios, stacked legal */
/* Phone (≤767px): single-col link cols, form wraps */
/* Small phone (≤574px) */
/* ===========================================================
   Footer 14 — Photography Studio

   Designed dark in light mode. Inverts to light-on-dark via
   the --at-neutral-* token swap in dark mode (handled centrally
   in components/_dark-mode.scss).
   =========================================================== */

/* ===========================================================
   Footer 15 — Fashion Agency

   Layout: 2x2 panel grid of dark rounded cards.
   Row 1: nav+social (64.5%)  |  newsletter (35.5%)
   Row 2: brand+services (35.5%) | contact+legal (64.5%)

   Always-dark surface (does not swap in dark mode) — uses
   literal hex tokens to match Figma frame intent.
   =========================================================== */

/* ── Grid ────────────────────────────────────────────────── */
/* 3-col grid with staggered spans: row 1 = 2/3 + 1/3,
   row 2 = 1/3 + 2/3 (zigzag panel layout). */

/* ── Panel 1 — Nav + social ─────────────────────────────── */

/* ── Panel 2 — Newsletter ───────────────────────────────── */

/* ── Panel 3 — Brand + services ─────────────────────────── */

/* ── Panel 4 — Contact + legal ──────────────────────────── */

/* ── Responsive ─────────────────────────────────────────── */
/* Tablet landscape — stack panel 1 (nav + social) vertically */
/* Tablet portrait — single column stack */
/* Phone */
/* Small phone (≤574.98px) — explicit rules; ranges do NOT cascade */
/*----------------------------------------*/
/*  7.1 about css
/*----------------------------------------*/
.at-about-svg-wrap {
  position: relative;
  transform: translateY(-100px);
}
.at-about-svg-wrap > svg:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  top: 34px;
}
.at-about-svg-wrap > svg:nth-child(3) {
  position: absolute;
  left: 56px;
  top: 34px;
}
.at-preloader__logo{
  max-width: 200px;
  margin-bottom: 20px;
}

/*----------------------------------------*/
/*  sec-4 about contact form 
/*----------------------------------------*/
.sec-4-about-form__field {
  margin-bottom: 24px;
}
.sec-4-about-form__input {
  display: block;
  width: 100%;
  padding: 16px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--at-neutral-500);
  background: transparent;
  border: none;
  border-bottom: 1px solid #242424;
  /* border-bottom: 1px solid var(--at-neutral-900); */
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.sec-4-about-form__input::-moz-placeholder {
  color: var(--at-neutral-500);
}
.sec-4-about-form__input::placeholder {
  color: var(--at-neutral-500);
}
.sec-4-about-form__input:focus {
  border-bottom-color: var(--at-neutral-900);
}
.sec-4-about-form__textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 16px;
}
.sec-4-about-form__actions {
  margin-top: 40px;
  margin-bottom: 16px;
}
.sec-4-about-form__disclaimer {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--at-neutral-500);
}
.sec-4-about-form__link {
  color: var(--at-neutral-900);
}
/* Honeypot: hidden from people, still filled in by spam bots */
.sec-4-about-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sec-4-about-form__status {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #1f7a3d;
}
.sec-4-about-form__status.is-error {
  color: #b42318;
}
.sec-4-about-form__btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/*----------------------------------------*/
/*  About 2 - Sec 3 Our Journey / card-award-2
/*----------------------------------------*/
/*----------------------------------------*/
/*  sec-2-about: process cards (scroll-section)
/*----------------------------------------*/

/*----------------------------------------*/
/*  About 04 — editorial manifesto layout
/*----------------------------------------*/

/* Hero */
.about-4-hero__lead {
  margin: 0 0 32px;
  max-width: 48ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--at-neutral-500);
}

@media (max-width: 991px) {
 .about-4-hero__lead {
  margin: 0 0 32px;
  max-width: 100%;
} 
}

/* Proof strip */
.about-4-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.about-4-stat {
  padding: 8px 24px 8px 0;
  border-right: 1px solid var(--at-neutral-100);
}
.about-4-stat:last-child {
  border-right: 0;
  padding-right: 0;
}
.about-4-stat:not(:first-child) {
  padding-left: 28px;
}
.about-4-stat__value {
  margin: 0 0 10px;
  font-family: var(--at-ff-heading);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--at-neutral-900);
}
.about-4-stat__label {
  margin: 0;
  max-width: 16ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--at-neutral-500);
}

/* Beliefs */

/* Hover float preview (moved to body in JS; ScrollSmoother-safe) */
/* Craft */

/* Space bento */

/* CTA — always dark surface */

/* Responsive */
@media only screen and (max-width: 991px) {
  .about-4-proof__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 0;
  }
  .about-4-stat {
    border-right: 0;
    padding: 0 16px 20px 0 !important;
    border-bottom: 1px solid var(--at-neutral-100);
  }
  .about-4-stat:nth-child(odd) {
    /* border-right: 1px solid var(--at-neutral-100); */
    padding-right: 20px !important;
  }
}
@media only screen and (max-width: 575px) {
  .about-4-proof__grid {
    grid-template-columns: 1fr;
  }
  .about-4-stat {
    border-right: 0 !important;
    padding: 0 0 20px !important;
  }
}
/*----------------------------------------*/
/*  About 05 — split origin + chapters
/*----------------------------------------*/

/* Split hero */

/* Chapters */

/* People rows */

/* Nodes / cities */

/* CTA accent */

/* Responsive */
/*----------------------------------------*/
/*  7.14 hero css
/*----------------------------------------*/
.at-hero-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-hero-social {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-hero-social {
    justify-content: flex-start;
  }
}
.at-hero-social a {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--at-neutral-500);
  border: 1px solid rgba(38, 38, 38, 0.1);
  border-radius: 20px;
  padding: 6px 20px;
  display: inline-block;
}
.at-hero-social a:hover {
  background: var(--at-common-black);
  border-color: var(--at-common-black);
  color: var(--at-common-white);
}

/*----------------------------------------*/
/*  sec-1-home-4 
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-3-home-4 (How We Work Process Cards)
/*----------------------------------------*/
.card__process-card {
  display: flex;
  gap: 20px;
  align-items: center;
}
.card__process-card.card-2 {
  margin-top: 80px;
}
.card__process-card.card-3 {
  margin-top: 160px;
}
.card__process-card.card-4 {
  margin-top: 240px;
}
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  .card__process-card.card-3 {
  margin-top: 0;
  /* margin-top: 50px; */
}
.card__process-card.card-4 {
    margin-top: 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .card__process-card.card-2 {
    margin-top: 50px;
  }
  .card__process-card.card-3 {
    margin-top: 50px;
  }
  .card__process-card.card-4 {
    margin-top: 100px;
  }
}
@media (max-width: 574.98px) {
  .card__process-card {
    flex-direction: column;
    gap: 16px;
    margin-top: 0 !important;
  }
}
.card__process-visual {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 100px;
  min-height: 270px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .card__process-visual {
    max-width: 100px;
    min-height: 240px;
  }
}
@media (max-width: 574.98px) {
  .card__process-visual {
    max-width: 80px;
    min-height: 200px;
  }
}
.card__process-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  max-height: 320px;
  border-radius: 9999px;
  overflow: hidden;
}
.card__process-pill--1 {
  background-image: url(../imgs/pages/img-81.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card__process-pill--2 {
  background-image: url(../imgs/pages/img-82.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card__process-pill--3 {
  background-image: url(../imgs/pages/img-83.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card__process-pill--4 {
  background-image: url(../imgs/pages/img-84.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* .card__process-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px);
  opacity: 0.6;
  pointer-events: none;
} */
.card__process-num {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--at-neutral-0, #FEFEFE);
  color: var(--at-common-black, #1D1D1D);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
@media (max-width: 574.98px) {
  .card__process-num {
    width: 40px;
    height: 40px;
    font-size: 18px;
    top: 16px;
  }
}
.card__process-content {
  flex: 1;
  min-width: 0;
}
.card__process-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--at-neutral-900);
  margin-bottom: 12px;
}
@media (max-width: 574.98px) {
  .card__process-title {
    font-size: 20px;
  }
}
.card__process-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--at-neutral-500);
  margin-bottom: 16px;
}
@media (max-width: 574.98px) {
  .card__process-desc {
    font-size: 14px;
  }
}
.card__process-divider {
  width: 100%;
  height: 1px;
  background: #333;
  /* background: var(--at-neutral-900); */
}

/*----------------------------------------*/
/*  sec-4-home-4 (Featured Case Card)
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.22 service css
/*----------------------------------------*/

/*----------------------------------------*/
/*  Services 04 — catalog index page
/*----------------------------------------*/
/* Hero */

/* Index list */

/* Process rows */

/* Responsive */
/*----------------------------------------*/
/*  Services 05 — capability map
/*----------------------------------------*/

/* Hero */

/* Capability map */

/* Frosted stack layer — soft blur over previous .svc5-item while scrolling */

/* Process */

/* Engage */

/* Responsive */
@media only screen and (max-width: 991px) {
  /* Stack still works; cards stack denser on tablet */
}
/*----------------------------------------*/
/*  Services Details 02 — AI & Tech
/*----------------------------------------*/

/* Hero */
/* Overview */

/* Modules */

/* Pipeline horizontal */

/* Stack + deliver */

/* CTA */

/* Responsive */
/*----------------------------------------*/
/*  Services Details 03 — Startup Agency
/*----------------------------------------*/

/* Hero — full-bleed stage, minimal copy */

/* Outcomes — typographic measure strip (no card essay) */

/* Runway */

/* Tracks stack */

/* CTA */
/*----------------------------------------*/
/*  Services Details 04 — UI/UX Agency
/*----------------------------------------*/

/* Hero */

/* Practice */

/* Flow horizontal — always dark panel (light + dark mode) */

/* Deliver */

/* CTA */
/*----------------------------------------*/
/*  Services Details 05 — Digital Agency
/*----------------------------------------*/

/* Hero */

/* Channels */

/* Growth map — staggered rows instead of 2×2 cards */

/* Offers stack */

/* Process */

/* CTA */
/*----------------------------------------*/
/*  7.17 portfolio
/*----------------------------------------*/
:root {
}

.at-hover-img canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mg-portfolio-dec {
  letter-spacing: -0.03em;
  color: var(--at-common-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .mg-portfolio-dec br {
    display: none;
  }
}
.mg-portfolio-item {
  border-radius: 10px;
  overflow: hidden;
}

.mg-portfolio-item {
  transition: all 0.6s ease;
}

/*----------------------------------------*/
/*  Award Card Styles
/*----------------------------------------*/
.card-award:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--at-neutral-900);
  transition: all 0.3s ease;
  background-color: var(--at-neutral-900);
}
.card-award:hover .card-award-title {
  transition: all 0.3s ease;
  color: var(--at-common-white);
}
.card-award-title {
  color: var(--at-common-black, #1d1d1d);
  line-height: 1.4;
  margin-bottom: 4px;
  font-family: var(--at-ff-body);
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}
@media (max-width: 574.98px) {
  .card-award-title {
    font-size: 14px;
  }
}

/* Card award expanded image preview (follows cursor, top-right of cursor, rotated -15deg) */
.card-award-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  will-change: transform;
  transform-origin: left bottom;
}
.card-award-preview img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767px) {
  .card-award-preview {
    display: none !important;
  }
}

/*  testimonial css start */
.testimonial-cart-wrap {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--at-neutral-700);
  background: var(--at-neutral-800);
}
.testimonial-cart-wrap:hover .testimonial-content-author::before {
  transition: all 0.3s ease;
  width: 100px;
  background: var(--at-neutral-500);  
}
.testimonial-top {
  margin-bottom: 35px;
}
.testimonial-content-author {
  position: relative;
  margin-top: 55px;
}
.testimonial-content-author::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 57px;
  height: 1px;
  background: var(--at-neutral-500);
  transition: all 0.3s ease;
}

.slider-testimonial {
  padding-bottom: 12px;
}

.scroll-section .wrapper {
  position: relative;
  height: auto;
}
.scroll-section .list {
  height: 100%;
  position: relative;
}
.scroll-section .item {
  min-height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
}
.scroll-section .item:first-child {
  min-height: 100%;
  height: 100%;
}
.scroll-section .item:not(:first-child) {
  position: absolute;
}

/*  testimonial css end */
/*----------------------------------------*/
/*  Team Card Styles
/*----------------------------------------*/

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.team-card-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f5f5f5;
  aspect-ratio: 1 / 1.125;
}
.team-card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.5s ease;
}
.team-card-icon {
  color: var(--at-common-black);
  position: absolute;
  top: 22px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--at-common-white);
  display: flex;
  justify-content: center;
  transition: all 0.5s ease;
  align-items: center;
}
.team-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.93%, #1A1A1A 100%);
  backdrop-filter: blur(1.9500000477px);
  padding: 10px 25px;
  /* padding: 25px 81px 33px 30px; */
  overflow: hidden;
}
.team-card-name .h6 {
  color: var(--at-common-white);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
  line-height: 25px;
  margin-bottom: 0;
}
@media (min-width: 991px) {
  .team-card-name .fz-font-2xl{
    font-size: 20px !important;
  }
}
.team-card-position {
  letter-spacing: -0.28px;
  margin-top: 4px;
}

.team-card:hover .team-card-image img {
  transition: all 0.5s ease;
  filter: blur(5px);
  scale: 1.05;
}
.team-card:hover .team-card-icon {
  background: var(--at-common-black);
  color: var(--at-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .team-card-content {
    margin-top: 16px;
  }
}
/*----------------------------------------*/
/*  Team Card 2 (Home 4 Sec 6) - Social overlay on hover
/*----------------------------------------*/

/*----------------------------------------*/
/*  Team 02 — roster directory layout
/*----------------------------------------*/

/* Hero */

/* Roster */

/* Disciplines */

/* CTA */
/*----------------------------------------*/
/*  7.11 faq css
/*----------------------------------------*/
.at-faq-item {
  border-radius: 0;
  box-shadow: 0 0 2px 0 rgba(39, 39, 46, 0.04);
  background: var(--at-neutral-50);
  padding: 8px 22px 8px 22px;
  /* margin-bottom: 16px; */
}
.at-faq-body {
  font-size: 16px;
  line-height: 26px;
  padding-bottom: 10px;
  padding-right: 112px;
  padding-left: 45px;
}
.at-faq-body p {
  margin: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-faq-body {
    padding-right: 0;
  }
}
.at-faq-body p {
  font-weight: 400;
  font-size: 15px;
  line-height: 167%;
  color: #b5b5b5;
  /* color: var(--at-neutral-700); */
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-faq-body p br {
    display: none;
  }
}
.at-faq-number {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 42px;
  background: var(--at-neutral-900);
  color: var(--at-common-white);
}
.at-faq-header {
  padding: 15px 0;
}
.at-faq-button {
  background: transparent;
  font-weight: 600;
  font-size: 24px;
  color: var(--at-common-black);
  font-family: var(--at-ff-body);
  position: relative;
  width: 100%;
  text-align: left;
  padding-right: 50px;
}
@media (max-width: 574.98px) {
  .at-faq-button {
    font-size: 18px;
  }
}
.at-faq-button span {
  font-weight: 500;
  margin-right: 70px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-faq-button span {
    margin-right: 30px;
  }
}
.at-faq-button::before, .at-faq-button:after {
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  right: 0;
  top: -3px;
  width: 36px;
  height: 36px;
  text-align: center;
  border-radius: 30px;
  line-height: 35px;
  font-size: 16px;
  font-weight: 400;
  color: var(--at-common-black);
  transition: all 0.5s ease;
}
.at-faq-button.collapsed:after {
  content: "\f067";
}

/*----------------------------------------*/
/*  7.3 banner
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.13 gallery css
/*----------------------------------------*/
.at-gallery-wrapper {
  /* background: var(--at-common-black); */
  height: 1110px;
  overflow: hidden;
  border-radius: 15px;
  padding: 0 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-gallery-wrapper {
    height: 630px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .at-gallery-wrapper {
    height: 600px;
  }
}
.at-gallery-item {
  overflow: hidden;
  border-radius: 20px;
}
.at-gallery-item:hover img {
  transform: scale(1.1);
}
.at-gallery-item img {
  border-radius: 20px;
  transition: all 0.6s ease;
  object-fit: cover;
}

/*----------------------------------------*/
/*  Content product right – shop details 
/*----------------------------------------*/
.content-product-right {
  position: relative;
}
.content-product-right__size {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--at-neutral-50, #f2f2f2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--at-neutral-900, #1d1d1d);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.content-product-right__size:hover {
  background-color: var(--at-neutral-100, #e5e5e5);
}
.content-product-right__size.active {
  border-color: var(--at-neutral-900, #1d1d1d);
}
.content-product-right__color {
  width: 32px;
  height: 32px;
  border: 2px solid var(--at-neutral-0, #fefefe);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.content-product-right__color:hover {
  box-shadow: 0 0 0 1px var(--at-neutral-400);
}
.content-product-right__color.active {
  border-color: var(--at-neutral-900, #1d1d1d);
  border-width: 2px;
}
.content-product-right__qty-val {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: var(--at-neutral-900, #1d1d1d);
  min-width: 24px;
  text-align: center;
}

/*----------------------------------------*/
/*  Shop cart – list & items 
/*----------------------------------------*/
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  font-family: var(--at-ff-body);
}

.cart-remove-selected {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--at-neutral-900, #1d1d1d);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cart-remove-selected:hover {
  opacity: 0.7;
}

/* Cart item card */
.cart-item {
  border: 1px solid var(--at-neutral-100, #dfdfdf);
  border-radius: 16px;
  min-height: 177px;
  overflow: hidden;
  background: var(--at-neutral-0, #fefefe);
  transition: box-shadow 0.2s ease;
}
.cart-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cart-item__price {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.9px;
  color: var(--at-neutral-900, #1d1d1d);
  margin: 0;
}
.cart-item-qty-minus, .cart-item-qty-plus {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 0;
  line-height: 1;
}
.cart-item-qty-minus:hover, .cart-item-qty-plus:hover {
  opacity: 0.7;
}
.cart-item-qty-val {
  min-width: 24px;
  text-align: center;
}
.cart-item-delete {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--at-neutral-900, #1d1d1d);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.cart-item-delete:hover {
  opacity: 0.7;
  color: var(--at-neutral-700);
}
.cart-item-delete i {
  font-size: 18px;
}

/*----------------------------------------*/
/*  Shop cart – summary 
/*----------------------------------------*/
.cart-summary {
  background: var(--at-neutral-50, #f2f2f2);
  border-radius: 16px;
  overflow: hidden;
  padding: 52px 49px 60px;
  font-family: var(--at-ff-body);
  width: 100%;
  align-self: flex-start;
}
@media (min-width: 992px) {
  .cart-summary {
    position: sticky;
    top: 120px;
  }
}
.cart-summary__coupon-input {
  flex: 1;
  min-width: 0;
  max-width: 328px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--at-neutral-100, #dfdfdf) !important;
  border-radius: 50px;
  background: var(--at-neutral-0, #fefefe);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: var(--at-neutral-900, #1d1d1d);
}
.cart-summary__coupon-input::-moz-placeholder {
  color: var(--at-neutral-500, #585959);
}
.cart-summary__coupon-input::placeholder {
  color: var(--at-neutral-500, #585959);
}
.cart-summary__coupon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 52px;
  padding: 0 24px;
  min-width: 118px;
  border: none;
  border-radius: 42px;
  background: var(--at-neutral-900, #1d1d1d);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--at-neutral-0, #fefefe);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cart-summary__coupon-btn:hover {
  opacity: 0.9;
}
.cart-summary__delivery-date {
  font-weight: 700;
  color: var(--at-neutral-900, #1d1d1d);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cart-summary {
    padding: 40px 24px 48px;
  }
  .cart-summary__coupon-input {
    max-width: 100%;
  }
}
@media (max-width: 574.98px) {
  .cart-summary {
    padding: 32px 20px 40px;
  }
}

/*----------------------------------------*/
/*  Shop checkout – Billing Details & Payment 
/*----------------------------------------*/
/* Billing Details */

/* Payment */

/*----------------------------------------*/
/*  7.23 skill css
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-6-about: skill cards
/*----------------------------------------*/

/*----------------------------------------*/
/*  Home 2 Section 11 - Price plan toggle
/*----------------------------------------*/
.change-price-plan {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.price-plan-toggle-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--at-neutral-900);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.2s ease;
}

.price-plan-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.price-plan-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*----------------------------------------*/
/*  Home 2 Section 11 - Pricing cards
/*----------------------------------------*/

/*----------------------------------------*/
/*  Pricing 02 — alternate layout
/*----------------------------------------*/

/* Stacked plan rows (vs 3-col cards on pricing.html) */

/* Comparison table */

/* CTA band */

/* Responsive */
/*----------------------------------------*/
/*  Pricing 03 — minimal cards + testimonial
/*----------------------------------------*/

/* Plan grid */

/* Testimonial */

/* Responsive */
/*----------------------------------------*/
/*  Pricing 04 — subscription board + FAQ
/*----------------------------------------*/

/* Hero */

/* Process steps */

/* Main board */

/* Buttons */

/* Single project bar */

/* FAQ */

/* Fix mb-8 if missing spacing utility */

/* Responsive */
/*----------------------------------------*/
/*  Pricing 05 — estimate card + FAQ
/*----------------------------------------*/

/* Dark hero calculator
   Always-dark surface: use fixed light inks so dark-mode token remaps
   (e.g. --at-neutral-0 → dark) do not make titles/prices unreadable. */

/* FAQ light section */

/* Responsive */
/*----------------------------------------*/
/*  sec-2-home-5 
/*----------------------------------------*/

/*----------------------------------------*/
/*  at-brand-scroll - Vertical random scroll of 3 logos in each brand cell
/*----------------------------------------*/
.at-brand-scroll .at-brand-item .brand {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.at-brand-scroll {
  /* Viewport: show only 1 logo, fixed height = 1 slide */
}
.at-brand-scroll .brand-logo-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 70px;
  flex-shrink: 0;
  margin: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) {
  .at-brand-scroll .brand-logo-viewport {
    height: 50px;
  }
}
.at-brand-scroll .brand-logo-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  will-change: transform;
}
.at-brand-scroll .brand-logo-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  min-height: 70px;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) {
  .at-brand-scroll .brand-logo-slide {
    height: 60px;
    min-height: 60px;
  }
}
.at-brand-scroll .brand-logo-slide img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/*----------------------------------------*/
/*  block-journey - Career Path & Expertise
/*  Header CTA: Book A Call Now | Hero card: SINCE 2012 + overlay | Journey list
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-1-home-7 (Advancing Startup Innovation Hero)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-2-home-7 (We Power the World's Fastest Growing Startups)
/*----------------------------------------*/

.at-item-anime.marque {
  overflow: hidden;
  border-radius: 16px;
}
.at-item-anime.marque img {
  transition: transform 0.6s ease;
}
.at-item-anime.marque:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
  transition: transform 0.6s ease;
}

/*----------------------------------------*/
/*  sec-4-home-7 (Our mission — dual reveal-text headline + locations)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-5-home-7 (Specialized services + accordion + throwable logos)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-6-home-7 (The Process — Growth Engine)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-7-home-7 (CTA — Ready to Build the Future?)
/*----------------------------------------*/
/*----------------------------------------*/
/*  sec-8-home-7 (Team — Dedicated Team + Staggered Portrait Grid)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-9-home-7 (Marquee — carouselTicker + GSAP scroll-move)
/*  Structure mirrors Home 3 sec-2: .carouselTicker > ul.carouselTicker__list
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-10-home-7 (Insights for Founders — blog grid)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-11-home-7 (Get in touch — contact form)
/*----------------------------------------*/

/*------------------------------------------------------------------
  Home 8 — Section 1: Hero
------------------------------------------------------------------*/

/*----------------------------------------*/
/*  Home 8 — Section 2 (Orange marquee — carouselTicker-left)
/*  Brand-1 bar, 32px semibold white, 20px gap, 16px star
/*----------------------------------------*/

/*------------------------------------------------------------------
  Home 8 — Section 3 (About block + staggered photos)
------------------------------------------------------------------*/

/*----------------------------------------*/
/*  Home 8 — Section 4 (Services + Home 1 sec-4 GSAP hover stack)
/*----------------------------------------*/

/*------------------------------------------------------------------
  Home 8 — Section 6 (Selected works)
------------------------------------------------------------------*/
.sec-6-home-8 {
  background-color: var(--at-neutral-50);
  padding-top: clamp(70px, 6vw, 110px);
  padding-bottom: clamp(70px, 6vw, 110px);
}
.sec-6-home-8__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  will-change: transform;
}

/*------------------------------------------------------------------
  Home 8 — Section 7 (Image rails with scroll-move-right/left)
------------------------------------------------------------------*/

/*------------------------------------------------------------------
  Home 8 — Section 8 (Testimonials)
------------------------------------------------------------------*/
.sec-8-home-8 {
  background: var(--at-neutral-50);
  padding-top: clamp(70px, 6vw, 130px);
  padding-bottom: clamp(70px, 6vw, 130px);
}
.sec-8-home-8__stage {
  position: relative;
  min-height: 1150px;
}
.sec-8-home-8__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  text-align: center;
  width: min(595px, 92vw);
}
.sec-8-home-8__group {
  position: absolute;
  width: 408px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 1399px) {
  .sec-8-home-8__stage {
    min-height: auto;
  }
  .sec-8-home-8__center {
    position: static;
    transform: none;
    margin: 0 auto 40px;
  }
  .sec-8-home-8__group {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 24px;
  }
}

/*------------------------------------------------------------------
  Home 8 — Section 9 (CTA)
------------------------------------------------------------------*/

/*----------------------------------------*/
/*  sec-1-home-9 (Modern Agency Hero)
/*----------------------------------------*/
.sec-1-home-9__divider {
  position: relative;
  width: clamp(360px, 58.6vw, 1124px);
  max-width: 100%;
  margin-top: clamp(14px, 1.5vw, 29px);
  height: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-1-home-9__divider {
    width: 100%;
    margin-top: 40px;
  }
}
.sec-1-home-9__divider-line {
  position: absolute;
  left: 0;
  right: auto;
  width: 0;
  max-width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--at-neutral-0) 28%, transparent);
  will-change: width;
}
.sec-1-home-9__divider-line:nth-child(1) {
  top: 0;
}
.sec-1-home-9__divider-line:nth-child(2) {
  top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .sec-1-home-9__divider-line {
    width: 100%;
    will-change: auto;
  }
}

/*----------------------------------------*/
/*  sec-2-home-9 (Home 9 — stats / odometer row)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-3-home-9 (Home 9 — about + 3 pillars)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-4-home-9 (Home 9 — Selected work)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-5-home-9 (Home 9 — Marquee / contact)
/*----------------------------------------*/
.sec-5-home-9 {
  position: relative;
  min-height: clamp(520px, 78vh, 920px);
  padding-top: clamp(72px, 8.2vw, 158px);
  padding-bottom: clamp(56px, 6vw, 120px);
  background: var(--at-neutral-200, #cdcccc);
}
[data-bs-theme=dark] .sec-5-home-9 {
}
.sec-5-home-9 {
  /* Blend on wrapper only — children must not create separate blend layers with GSAP/CSS transform conflicts */
}
.sec-5-home-9__marquee {
  mix-blend-mode: difference;
  color: var(--at-neutral-0, #fefefe);
}
.sec-5-home-9__marquee .at-marquee__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation: sec5-home-9-marquee 55s linear infinite;
}
.sec-5-home-9__marquee .at-marquee__group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes sec5-home-9-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/*----------------------------------------*/
/*  sec-6-home-9 (Home 9 — Meet our team)
/*----------------------------------------*/
@media (min-width: 768px) {
  .sec-6-home-9__card {
    cursor: pointer;
  }
}
.sec-6-home-9__card {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  padding: clamp(16px, 2vw, 20px) clamp(20px, 3vw, 42px);
  border: 1px solid var(--at-neutral-100, #dfdfdf);
  background: var(--at-neutral-0, #fefefe);
  border-radius: 0;
  transition: all 0.3s ease;
}
@media (min-width: 992px) {
  .sec-6-home-9__card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: clamp(20px, 2vw, 32px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .sec-6-home-9__card:hover {
    border-radius: 24px;
    padding: clamp(16px, 2vw, 20px) clamp(30px, 5vw, 52px);
    transition: all 0.3s ease;
  }
}
.sec-6-home-9__name {
  margin: 0 0 4px;
  font-family: var(--at-ff-heading);
  font-weight: 600;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: var(--at-neutral-900, #1d1d1d);
}

/*----------------------------------------*/
/*  sec-7-home-9 (Home 9 — Collective)
/*----------------------------------------*/


/*------------------------------------------------------------------
  Home 10 — Section 1: Creative 3D Studio Hero
------------------------------------------------------------------*/

.bg_light {
  background: var(--at-neutral-50, #f2f2f2);
}

.section_spacing {  
  padding-top: clamp(48px, 6vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.section_spacing_top {  
  padding-top: clamp(48px, 6vw, 110px);
}
.section_spacing_bottom {  
  padding-bottom: clamp(48px, 8vw, 110px);
}

.section_spacing_1 { 
  position: relative; 
  padding-top: clamp(48px, 6vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}


/*----------------------------------------*/
/*  sec-5-home-10 (Home 10 — About + metrics)
/*----------------------------------------*/
.sec-5-home-10 {
  position: relative;
  padding-top: clamp(48px, 6vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
  background: var(--at-neutral-50, #f2f2f2);
}
.sec-5-home-10__container {
  max-width: 2200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5.2vw, 100px);
  padding-right: clamp(20px, 5.2vw, 100px);
}
.sec-5-home-10__intro-row {
  margin-bottom: clamp(40px, 6vw, 88px);
  position: relative;
  z-index: 3;
}
.sec-5-home-10__eyebrow-text {
  font-family: var(--at-ff-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--at-neutral-900, #1d1d1d);
}
.sec-5-home-10__eyebrow {
  transition: opacity 0.25s ease;
}
.sec-5-home-10__eyebrow:hover {
  opacity: 0.75;
}
.sec-5-home-10__title {
  max-width: 1250px;
  font-family: var(--at-ff-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--at-neutral-950, #0f0f0f);
  text-wrap: balance;
}
@media (min-width: 650px) and (max-width: 991px) {
  .sec-5-home-10__title {

  font-size: clamp(35px, 3.4vw, 48px);

}
}
.sec-5-home-10__cta {
  height: 50px;
  padding: 14px 27px;
  border-radius: 50px;
  background: var(--at-neutral-900, #1d1d1d);
  font-family: var(--at-ff-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--at-neutral-0, #fefefe) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sec-5-home-10__cta:hover {
  /* background: var(--at-theme-primary); */
  color: var(--at-neutral-0) !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.25),
    0 0 25px rgba(255, 255, 255, 0.20);
}
.sec-5-home-10__cta-arrow {
  flex-shrink: 0;
  color: currentColor;
}
.sec-5-home-10__stats {
  position: relative;
  z-index: 1;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .sec-5-home-10__stat--1 {
    align-items: flex-start;
    text-align: left;
    margin-right: auto;
  }
  .sec-5-home-10__stat--2 {
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(48px, 9vw, 160px);
  }
  .sec-5-home-10__stat--3 {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
    margin-top: clamp(96px, 16vw, 280px);
  }
}

/*==================================================================
  Home 11 — Motion & Video Creative Studio
==================================================================*/

/*------------------------------------------------------------------
  Section 1 — Cinematic Hero
------------------------------------------------------------------*/
.sec-1-home-11 {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--at-neutral-950);
  color: var(--at-common-white);
  overflow: hidden;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
}
.sec-1-home-11__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sec-1-home-11__bg-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  pointer-events: none;
}
.sec-1-home-11__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 15, 15, 0.55) 0%, rgba(15, 15, 15, 0.3) 40%, rgba(15, 15, 15, 0.75) 100%);
}
.sec-1-home-11__topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2vw, 32px) clamp(20px, 5.5vw, 96px);
  padding-top: clamp(155px, 12vw, 175px);
}
.sec-1-home-11__headline {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 0 clamp(20px, 5.5vw, 96px);
}
.sec-1-home-11__title {
  font-size: clamp(45px, 8vw, 80px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--at-common-white);
  margin-bottom: 0;
}

/*------------------------------------------------------------------
  Section 2 — Trusted Clients Marquee
------------------------------------------------------------------*/

/*------------------------------------------------------------------
  Section 3 — About Studio
------------------------------------------------------------------*/
@media (max-width: 575px) {
  .sec-1-home-11__title {
  font-size: clamp(34px, 10vw, 100px);
}
}
@media (min-width: 1600px) {
  .sec-1-home-11__title {
  font-size: clamp(34px, 14vw, 100px) !important;
}
}

/*------------------------------------------------------------------
  Section 4 — Featured Works
------------------------------------------------------------------*/

/*------------------------------------------------------------------
  Section 5 — Services (modernized)
------------------------------------------------------------------*/
.sec-5-home-11 {
  position: relative;
  background-color: var(--at-neutral-0);
  overflow: hidden;
}
.sec-5-home-11__card {
  position: relative;
  background-color: var(--at-common-white);
  border: 1px solid var(--at-neutral-100);
  border-radius: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.4s ease;
}
.sec-5-home-11__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}
.sec-5-home-11__card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.sec-5-home-11__card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*------------------------------------------------------------------
  Section 6 — Studio Process
------------------------------------------------------------------*/

/*------------------------------------------------------------------
  Section 7 — Testimonials
------------------------------------------------------------------*/

/*------------------------------------------------------------------
  Section 8 — Call to Action
------------------------------------------------------------------*/

/* Home 12 / Section 1 — Hero (Pure Design. Potent Storytelling) */

/* ── Social proof pill ───────────────────────────── */

/* ── Headline ────────────────────────────────────── */

/* ── Subline ─────────────────────────────────────── */

/* ── CTAs ────────────────────────────────────────── */

/* ── Image strip — Swiper marquee ────────────────── */

.sec-1-home-12-slider {
  overflow: visible;
}
.sec-1-home-12-slider .swiper-wrapper {
  /* Linear timing for continuous marquee feel */
  transition-timing-function: linear !important;
}

/* ── Responsive ──────────────────────────────────── */
/* Home 12 / Section 2 — Selected Projects */

/* ── Section header ─────────────────────────────── */

/* ── Cards container ────────────────────────────── */
.sec-2-home-12__cards {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  margin-inline: auto;
  max-width: 1280px;
}

/* ── Project card ───────────────────────────────── */
.card-home-12-project {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px;
  background-color: var(--at-neutral-0);
  border: 1px solid var(--at-neutral-100);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.18);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  /* JS-driven stack: ScrollTrigger pins each card; transform-origin keeps the
     scale-down "tucking under" feel anchored at the top of each card. */
  transform-origin: 50% 0%;
  will-change: transform;
}
.card-home-12-project:hover, .card-home-12-project:focus-visible {
  border-color: var(--at-neutral-300);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);
  color: inherit;
}

/* ── Responsive ─────────────────────────────────── */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .card-home-12-project {
    gap: 32px;
    padding: 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .card-home-12-project {
    gap: 24px;
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-2-home-12__cards {
    row-gap: 24px;
  }
  .card-home-12-project {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-2-home-12__cards {
    row-gap: 20px;
  }
  .card-home-12-project {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 16px;
  }
}
@media (max-width: 574.98px) {
  .card-home-12-project {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 14px;
    border-radius: 20px;
  }
}
/* Home 12 / Section 3 — Our Services */

/* ── Section header ─────────────────────────────── */

/* ── Services grid ──────────────────────────────── */

/* ── Service card ───────────────────────────────── */

/* ── Responsive ─────────────────────────────────── */
/* Home 12 / Section 4 — Process Philosophy */

/* ── Section header ─────────────────────────────── */

/* ── Cards row ──────────────────────────────────── */

/* ── Process card ───────────────────────────────── */

/* ── Responsive ─────────────────────────────────── */
/* Home 12 / Section 5 — Pricing */

/* ── Dot pattern background ─────────────────────── */

/* ── Section header ─────────────────────────────── */

/* ── Tables row ─────────────────────────────────── */

/* ── Pricing card ───────────────────────────────── */

/* ── Features list ──────────────────────────────── */

/* ── Custom pricing CTA ─────────────────────────── */

/* ── Responsive ─────────────────────────────────── */
/* Home 12 / Section 6 — About + Brand logos (dark) */

/* ── Top bar with line ──────────────────────────── */

/* ── Lede paragraph ─────────────────────────────── */

/* ── Brand logos — Swiper marquee ────────────────── */

.sec-6-home-12-slider {
  overflow: visible;
}
.sec-6-home-12-slider .swiper-wrapper {
  /* Linear timing for continuous marquee feel */
  transition-timing-function: linear !important;
  align-items: center;
}

/* ── Responsive ─────────────────────────────────── */
/* Home 12 / Section 7 — Testimonials */

/* ── Section header ─────────────────────────────── */

/* ── Cards row (3 staggered columns) ────────────── */

/* ── Testimonial card ───────────────────────────── */

/* ── Responsive ─────────────────────────────────── */
/* Home 12 / Section 8 — FAQ accordion */

/* ── Section header ─────────────────────────────── */

/* ── List ───────────────────────────────────────── */

/* ── Accordion item (native <details>) ──────────── */

/* ── Responsive ─────────────────────────────────── */
/* Home 13 / Section 1 */
.sec-1-home-13 {
  background-color: var(--at-neutral-50);
  padding: 160px 32px 32px;
}

/* ── Top row ─────────────────────────────────── */

/* ── Hero card ───────────────────────────────── */

/* ── Main slider ─────────────────────────────── */
.sec-1-home-13__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sec-1-home-13__main .swiper-wrapper,
.sec-1-home-13__main .swiper-slide {
  height: 100%;
}

/* ── Vertical nav buttons ────────────────────── */

/* ── Thumbs slider ───────────────────────────── */
.sec-1-home-13__thumbs {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  z-index: 3;
}
.sec-1-home-13__thumbs .swiper-slide {
  height: auto;
}

/* ── Responsive ──────────────────────────────── */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sec-1-home-13__thumbs {
    left: 40px;
    right: 40px;
    bottom: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-1-home-13 {
    padding: 48px 24px 24px;
  }
  .sec-1-home-13__thumbs {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-1-home-13 {
    padding: 36px 20px 20px;
  }
  .sec-1-home-13__thumbs {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-1-home-13 {
    padding: 128px 16px 16px;
  }
  .sec-1-home-13__thumbs {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}
@media (max-width: 574.98px) {
  .sec-1-home-13 {
    padding: 100px 12px 12px;
  }
  .sec-1-home-13__thumbs {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}
/* Cascading mobile pivot: stack top row + wrap brand from tablet down */
/* Home 13 / Section 2 — About Us */

/* ── Top row ─────────────────────────────────── */

/* ── Left column ─────────────────────────────── */

/* ── Right column ────────────────────────────── */

/* ── Stats row ───────────────────────────────── */

/* ── Responsive ──────────────────────────────── */
/* Cascading mobile pivot: stack top grid for tablet & phone */
/* Cascading mobile pivot: single-column media grid for phone */
/* Home 13 / Section 3 — Selected Projects */

/* ── Header ──────────────────────────────────── */

/* ── Project list ────────────────────────────── */

/* ── Card meta (left) ────────────────────────── */

/* ── Card media (middle) ─────────────────────── */

/* ── Card info (right) ───────────────────────── */

/* ── Responsive ──────────────────────────────── */
/* Cascading mobile pivot: stack header for tablet & phone */
/* Cascading mobile pivot: single-column card layout for phone */
/* Home 13 / Section 4 — Build with us CTA */

/* ── Top meta bar ────────────────────────────── */

/* ── Heading ─────────────────────────────────── */

/* ── Bottom row ──────────────────────────────── */

/* ── Responsive ──────────────────────────────── */
/* Cascading mobile pivot: stack bottom row + left-align contact for tablet & phone */
/* Phone: hide center coord bar; loosen card */
/* Home 13 / Section 5 — Our Expertise */

/* ── Header ──────────────────────────────────── */

/* ── List ────────────────────────────────────── */

/* ── Card ────────────────────────────────────── */

/* ── Responsive ──────────────────────────────── */
/* Cascading mobile pivot: stack header + card-head for tablet & phone */
/* Cascading mobile pivot: single-column card layout for phone */
/* Home 13 / Section 6 — Our Process Timeline */

/* ── Header ──────────────────────────────────── */

/* ── Timeline ────────────────────────────────── */

/* Active phase state */
/* ── Responsive ──────────────────────────────── */
/* Cascading mobile pivot: single-column header for tablet & phone */
/* Cascading mobile pivot: single-column timeline for phone */
/* Home 13 / Section 7 — Testimonial */
.sec-7-home-13 {
  background-color: var(--at-neutral-0);
  padding: 120px 96px;
}

/* ── Media ───────────────────────────────────── */

.sec-7-home-13__media-slider {
  width: 100%;
  height: 100%;
  cursor: grab;
}
.sec-7-home-13__media-slider:active {
  cursor: grabbing;
}
.sec-7-home-13__media-slider .swiper-wrapper,
.sec-7-home-13__media-slider .swiper-slide {
  height: 100%;
}

.sec-7-home-13__quote-slider {
  width: 100%;
  cursor: grab;
}
.sec-7-home-13__quote-slider:active {
  cursor: grabbing;
}
.sec-7-home-13__quote-slider .swiper-slide {
  height: auto;
}

/* ── Content ─────────────────────────────────── */

/* ── Head ────────────────────────────────────── */

/* ── Quote ───────────────────────────────────── */

/* ── CTA ─────────────────────────────────────── */

/* ── Responsive ──────────────────────────────── */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sec-7-home-13 {
    padding: 96px 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-7-home-13 {
    padding: 80px 24px;
  }
}
/* Stack inner as flex column on tablet & phone */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-7-home-13 {
    padding: 64px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-7-home-13 {
    padding: 48px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-7-home-13 {
    padding: 36px 30px;
  }
}
@media (max-width: 574.98px) {
  .sec-7-home-13 {
    padding: 36px 30px;
  }
  .at-header-spacing {
  padding: 13px 10px 13px;
}
}
/* Home 13 / Section 8 */
.sec-8-home-13 {
  background-color: var(--at-neutral-50);
  padding: 120px 96px;
}

/* ── Top wrapper ─────────────────────────────── */

/* ── Body ────────────────────────────────────── */

/* ── Left ────────────────────────────────────── */

.sec-8-home-13__media {
  width: 100%;
  overflow: hidden;
}
.sec-8-home-13__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sec-8-home-13__media.is-changing img {
  opacity: 0;
}

.sec-8-home-13__lede {
  font-family: var(--at-ff-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--at-neutral-950);
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sec-8-home-13__lede.is-changing {
  opacity: 0;
}

/* ── List ────────────────────────────────────── */

.sec-8-home-13__item {
  border-bottom: 1px solid var(--at-neutral-100);
  transition: border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Active / hover state */

/* ── Responsive ──────────────────────────────── */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sec-8-home-13 {
    padding: 96px 32px;
  }
  .sec-8-home-13__media {
    height: 420px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-8-home-13 {
    padding: 80px 24px;
  }
  .sec-8-home-13__media {
    height: 360px;
  }
  .sec-8-home-13__lede {
    font-size: 18px;
  }
}
/* Stack body as flex column on tablet & phone */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-8-home-13 {
    padding: 64px 20px;
  }
  .sec-8-home-13__media {
    height: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-8-home-13 {
    padding: 48px 30px;
  }
  .sec-8-home-13__media {
    height: 320px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-8-home-13 {
    padding: 36px 30px;
  }
  .sec-8-home-13__media {
    height: 260px;
  }
}
@media (max-width: 574.98px) {
  .sec-8-home-13 {
    padding: 36px 30px;
  }
  .sec-8-home-13__lede {
    font-size: 16px;
  }
}
/* Cascading mobile pivot: stack top wrapper for tablet & phone */
/* Cascading mobile pivot: shrink row grid for small phones */
/* ===========================================================
   Section 1 — Home 14 (Photography Hero)
   =========================================================== */

/* ===========================================================
   Section 2 — Home 14 (The Studio)
   =========================================================== */

/* ===========================================================
   Section 3 — Home 14 (Selected Series)
   =========================================================== */

/* ===========================================================
   Section 4 — Home 14 (Gallery / Archive)
   =========================================================== */
.sec-4-home-14 {
  padding-top: 140px;
  padding-bottom: 140px;
  background-color: var(--at-neutral-0);
  border-top: 1px solid var(--at-neutral-200);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-4-home-14 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-4-home-14 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-4-home-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
.sec-4-home-14 {
  /* Header */
}
.sec-4-home-14 {
  /* Filter tabs */
}
.sec-4-home-14__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--at-neutral-200);
  border-bottom: 1px solid var(--at-neutral-200);
  margin-bottom: 48px;
}
.sec-4-home-14__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--at-neutral-200);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--at-ff-body);
  line-height: 1;
  color: var(--at-neutral-950);
  transition: all 0.25s ease;
}
.sec-4-home-14__tab.is-active {
  background-color: var(--at-neutral-950);
  border-color: var(--at-neutral-950);
  color: var(--at-neutral-0);
}
.sec-4-home-14__tab:hover:not(.is-active) {
  border-color: var(--at-neutral-950);
}
.sec-4-home-14 {
  /* Masonry */
}
.sec-4-home-14__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--at-common-white);
  background-color: var(--at-neutral-900);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-4-home-14__tile {
    aspect-ratio: 4/5 !important;
  }
}
.sec-4-home-14__tile:hover {
  color: var(--at-common-white);
}
.sec-4-home-14 {
  /* Bottom row */
}

/* ===========================================================
   Section 5 — Home 14 (Services list)

   Note: this section uses an inverted (dark) palette in light mode.
   In dark mode it inherits inverse colors via the --at-neutral-*
   token swap, becoming light-on-dark.
   =========================================================== */
.sec-5-home-14__row {
  border-bottom: 1px solid var(--at-neutral-500);
}
.sec-5-home-14__row:first-child {
  border-top: 1px solid var(--at-neutral-500);
}
.sec-5-home-14__row-title {
  font-family: var(--at-ff-heading);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--at-neutral-0);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-5-home-14__row-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-5-home-14__row-title {
    font-size: 22px;
  }
}
@media (max-width: 574.98px) {
  .sec-5-home-14__row-title {
    font-size: 18px;
  }
}

/* ===========================================================
   Section 6 — Home 14 (Our Process)
   =========================================================== */

/* ===========================================================
   Section 7 — Home 14 (Client Stories / Testimonial)
   =========================================================== */
.sec-7-home-14 {
  padding-top: 140px;
  padding-bottom: 140px;
  background-color: var(--at-neutral-0);
  border-top: 1px solid var(--at-neutral-200);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-7-home-14 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-7-home-14 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-7-home-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
.sec-7-home-14 {
  /* Header */
}
.sec-7-home-14 {
  /* Main */
}
.sec-7-home-14 {
  /* Portrait */
}
.sec-7-home-14 {
  /* Quote */
}

/* ===========================================================
   Section 8 — Home 14 (Recognition Index: Press + Awards)
   =========================================================== */

/* ===========================================================
   Section 9 — Home 14 (From the Feed)
   =========================================================== */

/* ===========================================================
   Section 1 — Home 15 (Agency Hero)
   =========================================================== */
.sec-1-home-15 {
  padding-top: 66px;
  padding-bottom: 80px;
  background-color: var(--at-neutral-0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-1-home-15 {
    padding-top: 60px;
    padding-bottom: 56px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-1-home-15 {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}
.sec-1-home-15 {
  /* ---- Hero card ---- */
}
.sec-1-home-15 {
  /* ---- Top row (coordinates + email) ---- */
}
.sec-1-home-15 {
  /* ---- Scroll indicator (right side, mid-height) ---- */
}
.sec-1-home-15 {
  /* ---- Bottom row (tags + clients) ---- */
}
.sec-1-home-15 {
  /* ---- Title block under the hero card ---- */
}
.sec-1-home-15__title {
  font-family: var(--at-ff-heading);
  font-weight: 700;
  font-size: 173px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--at-neutral-900);
  margin: 0;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {
  .sec-1-home-15__title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sec-1-home-15__title {
    font-size: 128px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-1-home-15__title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-1-home-15__title {
    font-size: 92px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-1-home-15__title {
    font-size: 72px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-1-home-15__title {
    font-size: 56px;
  }
}
@media (max-width: 574.98px) {
  .sec-1-home-15__title {
    font-size: 40px;
  }
}
.sec-1-home-15__title-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: -22px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-1-home-15__title-meta {
    margin-top: -16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-1-home-15__title-meta {
    margin-top: -10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sec-1-home-15__title-meta {
    margin-top: 8px;
  }
}
@media (max-width: 574.98px) {
  .sec-1-home-15__title-meta {
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===========================================================
   Section 2 — Home 15 (About Us)
   =========================================================== */
/* ===========================================================
   Section 3 — Home 15 (Brand strip with auto-marquee)
   =========================================================== */

/* ===========================================================
   Section 4 — Home 15 (Selected work)
   =========================================================== */

/* ===========================================================
   Section 5 — Home 15 (From idea to final project)
   =========================================================== */

/*----------------------------------------*/
/*  sec-6-home-15 (Home 15 — Meet our team + throwable logos)
/*----------------------------------------*/
.sec-6-home-15 {
  position: relative;
  padding-top: clamp(48px, 6vw, 100px);
  padding-bottom: clamp(56px, 8vw, 140px);
  background: var(--at-neutral-0, #fefefe);
  overflow: hidden;
}
.sec-6-home-15__title-block {
  text-align: center;
}
@media (min-width: 1200px) {
  .sec-6-home-15__title-block {
    grid-column: 2;
    grid-row: 1/span 2;
    align-self: center;
    justify-self: center;
    z-index: 2;
    max-width: min(765px, 100%);
    padding: clamp(16px, 3vw, 48px) 0;
    pointer-events: none;
  }
}
.sec-6-home-15__member {
  min-width: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
@media (min-width: 1200px) {
  .sec-6-home-15__member {
    max-width: 407px;
  }
}
.sec-6-home-15 {
  /* --- Throwable logos scene (scoped layout; physics from throwable.js) --- */
}

/*----------------------------------------*/
/*  sec-7-home-15 (Home 15 — What we do)
/*----------------------------------------*/

/*----------------------------------------*/
/*  sec-8-home-15 (Home 15 — Testimonials)
/*----------------------------------------*/
.sec-8-home-15 {
  position: relative;
  padding-top: 100px;
  padding-bottom: 110px;
  border-bottom: 1px solid var(--at-neutral-200, #cdcccc);
  text-align: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-8-home-15 {
    padding-top: 88px;
    padding-bottom: 96px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-8-home-15 {
    padding-top: 72px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-8-home-15 {
    padding-top: 56px;
    padding-bottom: 64px;
  }
}
.sec-8-home-15 {
  /* ---- Eyebrow ---- */
}
.sec-8-home-15 {
  /* ---- Main slider ---- */
}
.sec-8-home-15__slider {
  max-width: 1330px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-8-home-15__slider {
    margin-bottom: 48px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-8-home-15__slider {
    margin-bottom: 36px;
  }
}
.sec-8-home-15 {
  /* ---- Thumbs slider ---- */
}
.sec-8-home-15__thumbs {
  max-width: 814px;
  margin-left: auto;
  margin-right: auto;
}
.sec-8-home-15__thumbs .swiper-wrapper {
  align-items: center;
}

/* ===========================================================
   Section 9 — Home 15 (Inside / Article & blogs)
   =========================================================== */

/* Slideshow — 6 layout variants in one partial.
   Wrapper: .slideshow
     - default (no modifier)        → Horizontal Cinema
     - .is-split                    → Editorial Split + Orbital
     - .is-stack                    → Typographic Stack + bottom progress bar
     - .is-curtain                  → Diagonal Curtain Reveal
     - .is-zstack                   → 3D Z-Stack Reveal
     - .is-vista                    → Slideshow-faithful vertical scroll + central minimap
   All rules scoped under the wrapper to avoid global pollution.
*/
.slideshow {
  /* Common shell --------------------------------------------------------- */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  font-family: inherit;
}
.slideshow *,
.slideshow *::before,
.slideshow *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slideshow button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.slideshow a {
  color: inherit;
  text-decoration: none;
}
.slideshow .project-list {
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow {
}
.slideshow:not(.is-split):not(.is-stack):not(.is-horizontal) {
  background-color: var(--at-neutral-50);
  color: var(--at-neutral-950);
}
.slideshow {
  /* ===================================================================== *
   * CINEMA (default) — horizontal slides + side rail
   * ===================================================================== */
}
.slideshow .project {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  padding: 6rem 9rem 4rem 6rem;
  will-change: transform;
}
.slideshow .project-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: calc(100svh - 11rem);
  overflow: hidden;
}
.slideshow .project-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.5);
  will-change: transform;
}
.slideshow .project-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.slideshow .project-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--at-common-white-rgb), 0.4);
}
.slideshow .project-title {
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 12ch;
}
.slideshow .project-meta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  gap: 1rem;
}
.slideshow .rail {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 80px;
  height: 360px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  z-index: 5;
}
.slideshow .rail-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow .rail-item {
  position: absolute;
  top: calc(50% - 30px);
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
  will-change: transform;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.slideshow .rail-item.is-active {
  opacity: 1;
}
.slideshow .rail-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(var(--at-common-white-rgb), 0.2);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.slideshow .rail-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.slideshow .rail-item.is-active .rail-thumb {
  border-color: var(--at-common-white);
  transform: scale(1.06);
}
.slideshow .rail-index {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 0.8;
}
.slideshow .rail-item.is-active .rail-index {
  opacity: 1;
}
.slideshow {
  /* Cinema responsive */
}
@media (max-width: 991px) {
  .slideshow .project {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1.5rem;
    padding: 5rem 5rem 2rem 1.25rem;
  }
  .at-menu-close {
  top: 6px;
}
  .slideshow .project-frame {
    max-height: 55vh;
  }
  .slideshow .project-title {
    font-size: clamp(2rem, 11vw, 3.5rem);
  }
  .slideshow .rail {
    right: 0.5rem;
    width: 56px;
    height: 280px;
  }
  .slideshow .rail-thumb {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 575px) {
  .slideshow .project {
    padding: 2.5rem 4rem 3.75rem 1rem;
    gap: 1rem;
  }
  .slideshow .project-frame {
    max-height: 50vh;
  }
  .slideshow .project-title {
    font-size: clamp(1.75rem, 12vw, 2.75rem);
  }
  .slideshow .project-num,
  .slideshow .project-meta-bottom {
    font-size: 0.65rem;
  }
  .slideshow .rail {
    right: 0.25rem;
    width: 48px;
    height: 240px;
  }
  .slideshow .rail-thumb {
    width: 30px;
    height: 30px;
  }
  .slideshow .rail-index {
    font-size: 0.6rem;
  }
}
.slideshow {
  /* ===================================================================== *
   * SPLIT — editorial 35/65, orbital nav corner
   * ===================================================================== */
}
.slideshow {
  /* ===================================================================== *
   * STACK — typographic backdrop, image accent, bottom progress bar
   * ===================================================================== */
}
.slideshow {
  /* ===================================================================== *
   * CURTAIN — diagonal clip-path wipe, no slide translate
   * ===================================================================== */
}
.slideshow {
  /* ===================================================================== *
   * Z-STACK — 3D perspective stack reveal
   * ===================================================================== */
}
.slideshow {
  /* ===================================================================== *
   * VISTA — Slideshow-faithful vertical infinite parallax + central minimap
   * ===================================================================== */
}
.slideshow {
  /* ===================================================================== *
   * HORIZONTAL — infinite ribbon of pre-scaled images, parallax follows
   * each slide's distance from viewport center. Slides are JS-generated;
   * .horizon-track is the single transformed element.
   * ===================================================================== */
}
.slideshow.is-horizontal {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
.slideshow.is-horizontal:active {
  cursor: grabbing;
}
.slideshow.is-horizontal {
  /* Prev / Next circular buttons — vertically centered on the sides */
}
.slideshow.is-horizontal {
  /* Pagination — bottom-center row of dots, one per source project */
}

/* Portfolio - Horizontal Scroll Gallery
   ---------------------------------------------------------------
   Two scoped wrappers:
     .hsg-intro  - normal-flow lead-in section above the gallery
     .hsg-stage  - the pinned section driven by GSAP ScrollTrigger
                   (see assets/js/horizontal-scroll-gallery.js)

   Everything is namespaced under .hsg- to avoid clashing with the
   other slideshow variants in _slideshow.scss.
*/
/* =====================================================================
   INTRO - lead-in section before the pin
   ===================================================================== */
/* =====================================================================
   STAGE - the pinned horizontal scroll section
   ===================================================================== */

/*----------------------------------------*/
/*  Portfolio Details 3 — Editorial Split
/*----------------------------------------*/
/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` <img>.
   Our image hosts position the <img> as absolute fill inside an
   aspect-ratio box — make the injected wrap fill the same box. */

/* ---------- shared plus glyph ---------- */

/* ===========================================
   SEC 1 — Hero split
   =========================================== */

/* ===========================================
   SEC 2 — 3-col Intro
   =========================================== */

/* ===========================================
   SEC 3 — Bento Gallery
   =========================================== */

/* ===========================================
   SEC 4 — Process timeline (dark)
   =========================================== */

/* ===========================================
   SEC 5 — Quote overlay
   =========================================== */

/* ===========================================
   SEC 6 — Solution + Outcome (2-col w/ divider)
   =========================================== */

/* ===========================================
   SEC 7 — Big image strip
   =========================================== */

/* ===========================================
   SEC 8 — Related projects (2 large cards)
   =========================================== */

/*----------------------------------------*/
/*  Portfolio Details 4 — Sticky Sidebar + Chapters
/*  Brand accent: var(--at-theme-primary) (#F0460E)
/*----------------------------------------*/
/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` <img>.
   Image hosts use absolute-fill img inside aspect-ratio box. */

/* =========================================================
   SEC 1 — Compact title block
   ========================================================= */

/* =========================================================
   SEC 2 — Sticky sidebar + chapters
   ========================================================= */

/* =========================================================
   SEC 3 — Pull-quote callout (centered)
   ========================================================= */

/* =========================================================
   SEC 4 — Visual showcase 3 rows
   ========================================================= */

/* =========================================================
   SEC 5 — Next project banner
   ========================================================= */

/*----------------------------------------*/
/*  Portfolio Details 5 — Swiper Fade + Cinematic
/*  Brand accent: var(--at-theme-primary) (#F0460E)
/*----------------------------------------*/
/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` <img>.
   Image hosts use absolute-fill img inside aspect-ratio box. */

/* =========================================================
   SEC 1 — Swiper fade hero (full-bleed)
   ========================================================= */
.sec-1-portfolio-details-5 {
  position: relative;
  height: 820px;
  background: var(--at-neutral-950);
  color: var(--at-neutral-0);
}
.sec-1-portfolio-details-5__slider {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.sec-1-portfolio-details-5__slider .swiper-wrapper,
.sec-1-portfolio-details-5__slider .swiper-slide {
  height: 100%;
}
.sec-1-portfolio-details-5 {
  /* Controls bar at the bottom of hero */
}
.sec-1-portfolio-details-5__counter-num {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sec-1-portfolio-details-5__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  /* Swiper bullets injected here */
}
.sec-1-portfolio-details-5__nav--next {
  background: var(--at-theme-primary);
  border-color: var(--at-theme-primary);
}
.sec-1-portfolio-details-5__nav--next:hover {
  background: var(--at-neutral-0);
  color: var(--at-theme-primary);
  border-color: var(--at-neutral-0);
}
.sec-1-portfolio-details-5__nav--prev:hover {
  background: var(--at-neutral-0);
  color: var(--at-neutral-950);
  border-color: var(--at-neutral-0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-1-portfolio-details-5 {
    height: 720px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-1-portfolio-details-5 {
    height: 620px;
  }
  .sec-1-portfolio-details-5__counter-num {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-1-portfolio-details-5 {
    height: 560px;
  }
  .sec-1-portfolio-details-5__counter-num {
    font-size: 32px;
  }
}
@media (max-width: 574.98px) {
  .sec-1-portfolio-details-5 {
    height: 520px;
  }
}

/* =========================================================
   SEC 2 — Project brief strip
   ========================================================= */

/* =========================================================
   SEC 3 — Services + Stats (2-col)
   ========================================================= */

/* =========================================================
   SEC 4 — Image grid asymmetric (magazine)
   ========================================================= */

/* =========================================================
   SEC 5 — Vertical timeline alternating L/R
   ========================================================= */

/* =========================================================
   SEC 6 — Awards & Recognition (dark)
   ========================================================= */

/* =========================================================
   SEC 7 — Next project side-by-side (light)
   ========================================================= */

/*----------------------------------------*/
/*  Portfolio Details 6 — Editorial + Marquee + Accordion
/*  Brand accent: var(--at-theme-primary)
/*----------------------------------------*/
/* JS injects `.anim-zoomin-wrap` — fit aspect-ratio hosts */

/* =========================================================
   SEC 1 — Hero + marquee strip
   ========================================================= */
/* =========================================================
   SEC 2 — Magazine 2-col + drop cap
   ========================================================= */

/* =========================================================
   SEC 3 — Horizontal scroll Swiper gallery
   ========================================================= */
.sec-3-portfolio-details-6 {
  background: var(--at-neutral-0);
}
.sec-3-portfolio-details-6__slider {
  padding-left: max((100vw - 1320px) / 2 + 12px, 12px);
  padding-right: max((100vw - 1320px) / 2 + 12px, 12px);
  cursor: grab;
}
.sec-3-portfolio-details-6__slider:active {
  cursor: grabbing;
}
@media (min-width: 1400px) {
  .sec-3-portfolio-details-6__slider {
    padding-left: max((100vw - 1320px) / 2, 12px);
    padding-right: max((100vw - 1320px) / 2, 12px);
  }
}
.sec-3-portfolio-details-6__caption-num {
  margin-right: 8px;
}
.sec-3-portfolio-details-6__nav--next {
  background: var(--at-neutral-950);
  color: var(--at-neutral-0);
}
.sec-3-portfolio-details-6__nav--next:hover {
  background: var(--at-theme-primary);
  border-color: var(--at-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-3-portfolio-details-6 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .sec-3-portfolio-details-6 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* =========================================================
   SEC 4 — Stats grid (4 inline with dot dividers)
   ========================================================= */

/* =========================================================
   SEC 5 — Quote + portrait side-by-side
   ========================================================= */

/* =========================================================
   SEC 6 — Accordion FAQ "Project details"
   ========================================================= */

/* =========================================================
   SEC 7 — Next project compact dark card
   ========================================================= */

/*----------------------------------------*/
/*  2.3 Back to top
/*----------------------------------------*/
.back-to-top-wrapper {
  position: fixed;
  right: 50px;
  bottom: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 574.98px) {
  .back-to-top-wrapper {
    right: 20px;
    bottom: 20px;
  }
}
.back-to-top-wrapper.back-to-top-btn-show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

.back-to-top-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: var(--at-common-white);
  box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
  color: var(--at-common-black);
  border-radius: 50%;
  transition: all 0.3s ease-out;
}
.back-to-top-btn svg {
  transform: translateY(-2px);
}
.back-to-top-btn:hover {
  transform: translateY(-4px);
}

/*----------------------------------------*/
/*  2.5 Buttons
/*----------------------------------------*/
.at-btn {
  gap: 8px;
  line-height: 1;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.05em;
  padding: 17px 25px;
  text-transform: capitalize;
  color: #FEFEFE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1D1D1D;
  border-radius: 50px;
}
.testimonial_bg.at-btn {
  padding: 17px 20px 0;
}

@media (max-width: 600px) {
  /* .at-btn {
  padding: 10px 0 0;
} */
}
.at-btn:hover {
  color: #FEFEFE;
}
.at-btn:hover span span.text-1 {
  transform: translateY(-150%);
}
.at-btn:hover span span.text-2 {
  top: 50%;
  transform: translateY(-50%);
}
.at-btn:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.at-btn:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}
.at-btn:hover i.icon-arrow-right svg:first-child {
  transform: translate(16px, 0);
}
.at-btn:hover i.icon-arrow-right svg:last-child {
  transform: translate(16px, 0);
}
.at-btn span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.at-btn span span.text-1 {
  position: relative;
  display: block;
  transition: 0.3s;
}
.at-btn span span.text-2 {
  position: absolute;
  top: 100%;
  display: block;
  transition: 0.3s;
}
.at-btn i {
  position: relative;
  overflow: hidden;
  width: 16px;
  height: 16px;
  display: inline-flex;
  margin-left: 4px;
}
.at-btn i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.at-btn i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.at-btn i.icon-arrow-right svg:last-child {
  left: -16px;
  bottom: 0;
}
.at-btn.filter-btn {
  border-radius: 100px;
  border: 1px solid var(--at-neutral-100, #DFDFDF);
  background: var(--at-neutral-0, #FEFEFE);
  color: var(--at-neutral-900);
}
.at-btn.active {
  background: var(--at-neutral-900);
  border-color: var(--at-neutral-900);
  color: var(--at-neutral-0);
}
.at-btn-border-white {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.25);
}
.at-btn-group {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
.at-btn-group > *:nth-child(1) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-end: -52px;
}
.at-btn-group > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
}
.at-btn-group > *:nth-child(3) {
  transform: scale3d(1, 1, 1);
  margin-inline-start: 0;
}
.at-btn-group:hover > *:nth-child(1) {
  transform: scale3d(1, 1, 1);
  margin-inline-end: 0;
  background: #1D1D1D;
}
.at-btn-group:hover > *:nth-child(2) {
  transform: scale3d(1, 1, 1);
  background: #1D1D1D;
}
.at-btn-group:hover > *:nth-child(3) {
  transform: scale3d(0.5, 0.5, 1);
  margin-inline-start: -52px;
  background: #1D1D1D;
}
.at-btn-group .at-btn-circle {
  text-align: center;
  width: 50px;
  height: 50px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background-color: #1D1D1D;
  color: #FEFEFE;
}
.at-btn-group .at-btn-circle i {
  transform: rotate(-45deg);
}

/*----------------------------------------*/
/*  2.1 Animations
/*----------------------------------------*/

@keyframes animate-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
}

/*----------------------------------------*/
/*  2.10 Preloader
/*----------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: var(--at-theme-primary);
}

.preloader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: var(--at-common-white);
  animation: preloader 1.3s linear infinite;
  -webkit-animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
}

@keyframes preloader {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/*--- end of preloader ---*/
/*----------------------------------------*/
/*  2.11 search style
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.8 Magic Cursor
/*----------------------------------------*/
body.at-magic-cursor #magic-cursor {
  display: block;
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  top: 0;
  left: 0;
}

/* Disable magic cursor on tablet/mobile (≤991px) and on touch/no-hover devices. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  body.at-magic-cursor #magic-cursor,
  #magic-cursor,
  #ball {
    display: none !important;
  }
}
#ball {
  position: fixed;
  display: flex;
  align-items: center;
  pointer-events: none;
  border-radius: 50%;
  color: transparent;
  justify-content: center;
  mix-blend-mode: difference;
  background-color: var(--at-common-black);
}

.cursor-bg-red #ball {
  background-color: #FF535B !important;
}
.cursor-bg-red #ball .ball-view {
  color: var(--at-common-white);
}

.cursor-bg-red-2 #ball {
  background-color: #FF481F !important;
}
.cursor-bg-red-2 #ball .ball-view {
  color: var(--at-common-white);
}

.cursor-white-bg #ball .ball-view {
  color: var(--at-common-black);
}

/* Ball view 
============= */
#ball .ball-view {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  transform: scale(0);
  color: var(--at-common-black);
}

/* Ball drag 
============= */

#ball.with-blur {
  backdrop-filter: blur(5px);
  transform: translate3d(0, 0, 0);
}

/* Ball close 
============== */

.at-magnetic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*----------------------------------------*/
/*  2.9 Nice Select
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  outline: none;
  position: relative;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
  color: var(--at-neutral-900);
  padding-left: 55px;
  font-weight: 500;
  background-color: var(--at-neutral-0);
  border-radius: 5px;
  font-size: 20px;
  height: 50px;
  line-height: 48px;
  padding-right: 30px;
  font-family: var(--at-ff-body);
}
.nice-select:hover {
  border-color: ar(--at-theme-primary);
}
.nice-select::before {
  position: absolute;
  content: "";
  width: 48px;
  height: 2px;
  background-color: var(--at-neutral-900);
  top: 50%;
  left: 0;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
  transform-origin: center;
  transform: translateY(-50%);
}
.nice-select::after {
  position: absolute;
  content: "\f107";
  top: 50%;
  right: 0;
  font-family: var(--at-ff-fontawesome);
  color: var(--at-neutral-900);
  font-weight: 600;
  pointer-events: none;
  font-size: 18px;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
  transform-origin: center;
  transform: translateY(-50%);
}
.nice-select.open::after {
  transform: translateY(-50%) rotate(-180deg);
}
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled::after {
  border-color: #cccccc;
}
.nice-select.right {
  float: right;
}
.nice-select.right .list {
  left: auto;
  right: 0;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small::after {
  height: 4px;
  width: 4px;
}
.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}
.nice-select .list {
  background-color: var(--at-neutral-0);
  width: 200px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(-21px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 500;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  transition: all 0.2s;
  border-radius: 12px;
}
.nice-select .option:hover {
  background-color: var(--at-neutral-50);
  color: var(--at-neutral-900);
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}
.nice-select .option.selected {
  font-weight: 400;
  color: var(--at-theme-primary);
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

[data-bs-theme=dark] {
  --at-common-white: var(--at-common-dark-white);
  --at-common-white-rgb: var(--at-common-dark-white-rgb);
  --at-common-black: var(--at-common-dark-black);
  --at-neutral-0: var(--at-neutral-dark-0);
  --at-neutral-0-rgb: var(--at-neutral-dark-0-rgb);
  --at-neutral-50: var(--at-neutral-dark-50);
  --at-neutral-100: var(--at-neutral-dark-100);
  --at-neutral-200: var(--at-neutral-dark-200);
  --at-neutral-300: var(--at-neutral-dark-300);
  --at-neutral-500: var(--at-neutral-dark-500);
  --at-neutral-700: var(--at-neutral-dark-700);
  --at-neutral-800: var(--at-neutral-dark-800);
  --at-neutral-900: var(--at-neutral-dark-900);
  --at-neutral-950: var(--at-neutral-dark-950);
}
[data-bs-theme=dark] .at-header-logo img,
[data-bs-theme=dark] .at-offcanvas-logo img {
  /* filter: invert(1); */
  width: 65px;
}
[data-bs-theme=dark] .dark-mode-invert {
  filter: invert(1);
}
[data-bs-theme=dark] .at-main-menu nav ul li.has-dropdown > a::after {
  filter: invert(1);
}
[data-bs-theme=dark] .changeless {
  --at-common-white: #ffffff;
  --at-common-white-rgb: 255, 255, 255;
  --at-common-black: #1e1e1e;
  --at-neutral-950: #0f0f0f;
  --at-neutral-900: #1d1d1d;
  --at-neutral-800: #212121;
  --at-neutral-700: #303030;
  --at-neutral-500: #585959;
  --at-neutral-300: #b7b7b7;
  --at-neutral-100: #dfdfdf;
  --at-neutral-50: #f2f2f2;
  --at-neutral-0: #fefefe;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "/");
}

.about-hero-breadcrumb {    
    font-size: 14px !important;
}

.breadcrumb-item.active {
    color: #B3B3B3 !important;
}
/* Let taps on the visible play control reach the popup-video link beneath it. */
.postbox-scroll-zoom .postbox-scroll-zoom-play {
  pointer-events: none;
}
/* Global scroll-direction navbar: hide down, reveal immediately on upward scroll. */
.header-12 {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 999;
  background: rgba(12, 12, 12, 0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transform: translateY(0);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.32s ease,
    box-shadow 0.32s ease,
    -webkit-backdrop-filter 0.32s ease,
    backdrop-filter 0.32s ease;
  will-change: transform;
}

.header-12 .at-header-area {
  position: relative;
}

.header-12.is-scroll-nav {
  background: rgba(12, 12, 12, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.header-12.is-scroll-nav.is-scroll-nav-hidden {
  transform: translateY(-105%);
}