/* ── Brand tokens ── */
    :root {
      --ink:    #1A1E3A;
      --cream:  #F4F6FA;
      --muted:  #6B7299;
      --cyan:   #29D9E8;
      --teal:   #00A8B5;
      --violet: #7B4FD4;
      --blue:   #3A6DD8;
      --grad:        linear-gradient(135deg,#29D9E8 0%,#3A6DD8 50%,#7B4FD4 100%);
      --grad-soft:   linear-gradient(135deg,rgba(41,217,232,.10) 0%,rgba(58,109,216,.08) 50%,rgba(123,79,212,.10) 100%);
      --border:      rgba(26,30,58,.12);
    }

    /* ── Reset ── */
    *{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden;}

    /* /* ── Custom cursor ── 
    /* #cursor{position:fixed;width:10px;height:10px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s;} */
    /* #cursor-ring{position:fixed;width:36px;height:36px;border:1.5px solid var(--violet);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .15s ease-out,width .3s,height .3s,opacity .3s;opacity:.6;} */
    /* body.cursor-hover #cursor{width:6px;height:6px;background:var(--violet);} */
    /* body.cursor-hover #cursor-ring{width:52px;height:52px;opacity:.2;border-color:var(--cyan);} */

    /* ── Gradient text ── */
    .grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

    /* ── Nav ── */
    nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(244,246,250,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(41,217,232,.18);}
	.heroweb{
		font-size:clamp(5rem,18vw,11rem);line-height:.88;letter-spacing:-.02em;
	}
	.heroweb span {
	  background: linear-gradient(90deg, #27a5c8, #f46ff6);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	}
	.overlaycolor {
		position:absolute;
		inset:0;
		background:linear-gradient(90deg, #27a5c8, #f46ff6);
		mix-blend-mode:screen;
		opacity:0.45;
		pointer-events:none;
	}
    /* ── Hero words slide up ── */
    .hero-word{display:inline-block;overflow:hidden;}
    .hero-word span{display:inline-block;transform:translateY(110%);animation:slideUp .9s cubic-bezier(.16,1,.3,1) forwards;}
    @keyframes slideUp{to{transform:translateY(0);}}

    /* ── Marquee ── */
    .marquee-track{display:flex;animation:marquee 20s linear infinite;white-space:nowrap;}
    @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

    /* ── Work list ── */
    .work-item{border-top:1px solid var(--border);}
    .work-item:last-child{border-bottom:1px solid var(--border);}
    .work-thumb{width:0;overflow:hidden;transition:width .5s cubic-bezier(.16,1,.3,1);}
    /* .work-item:hover .work-thumb{width:120px;} */
    .work-item:hover h3{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

    /* ── Scroll reveal ── */
    .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
    .reveal.visible{opacity:1;transform:translateY(0);}

    /* ── Image hover ── */
    .img-hover{overflow:hidden;}
    .img-hover img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
    .img-hover:hover img{transform:scale(1.04);}

    /* ── Nav links ── */
    .nav-link{position:relative;letter-spacing:.05em;font-size:.75rem;text-transform:uppercase;color:var(--ink);}
    .nav-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--grad);transition:width .25s ease;border-radius:2px;}
    .nav-link:hover::after{width:100%;}

    /* ── Stat numbers ── */
    .stat-num{font-family:'Playfair Display',serif;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

    /* ── Footer links ── */
    .footer-link{position:relative;}
    .footer-link::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--grad);transition:width .3s ease;}
    .footer-link:hover::after{width:100%;}

    /* ── Grain overlay ── */
    body::before{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.018;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size:128px 128px;}

    /* ── About word reveal base ── */
    .about-word{display:inline;white-space:pre-wrap;}

    /* ── Process card scale effect ── */
    .process-card{will-change:transform,filter; position:sticky;top:0;background:#E0E5F2;border-bottom:1px solid var(--border);z-index:5;overflow:hidden;height:70vh;display:flex;align-items:stretch;}
	
    /* ── Contact CTA words ── */
    #cta-lets,#cta-talk{transition:opacity .4s;}
	
	.work-accordion .accordion-item {
  border-bottom: 1px solid rgba(26, 30, 58, 0.12);
}

.work-accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.work-accordion .accordion-inner {
  padding-left: calc(2.5rem + 30px + 1.5rem);
  padding-bottom: 1.75rem;
  margin-top: 0.5rem;
}

.work-accordion .accordion-icon {
  transition: transform 0.3s ease;
}

.work-accordion .accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}

.work-accordion ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img.imgbrand {
    width: 70px;
}

.slider-wrap {
  position: relative;
  overflow: hidden;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgb(107 88 213 / 56%);
  color: #fff;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.75);
}

.slider-prev {
  left: 18px;
}

.slider-next {
  right: 18px;
}
.retailWeb{font-size:clamp(4.5rem,17vw,9rem);transition:color .45s ease;}
.PCard{display:grid;grid-template-columns:30% 1fr 38%;width:100%;position:relative;z-index:1;}
.textNum{
		position: absolute;
		left: -0.05em;
		top: 45%;
		transform: translateY(-52%);
		line-height: 1.1;
		pointer-events: none;
		user-select: none;
		z-index: 0;
	}
	   .textBtmnum{ padding: 3rem 3rem 3rem 2rem;}
	   
	   
	   .slider-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slider-wrap .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.slider-wrap .slide.active { opacity: 1; }
.slider-wrap .slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #27a5c8, #f46ff6);
  mix-blend-mode: screen; opacity: 0.45; pointer-events: none;
}
.slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.slider-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background .3s; }
.slider-dots span.on { background: #fff; }
@media (max-width: 768px) {
	#svc-detail{display:none}
	.process-card{will-change:transform,filter; position:sticky;top:0;background:#E0E5F2;border-bottom:1px solid var(--border);z-index:5;overflow:hidden;height:auto;margin-bottom:40px;display:flex;align-items:stretch;}
	.textBtmnum{padding: 3rem 1rem 3rem 7rem;}
	.textNum{
		position: absolute;
		right: -0.05em;
		top: 15%;
		transform: translateY(-52%);
		line-height: 1.85;
		pointer-events: none;
		user-select: none;
		z-index: 0;
	}
	.PCard{display:block;grid-template-columns:30% 1fr 38%;width:100%;position:relative;z-index:1;}
	.retailWeb{font-size:clamp(3rem,17vw,4rem) !important;transition:color .45s ease;}
	.heroweb {
		font-size: clamp(0rem, 18vw, 4rem);
		line-height: .88;
		letter-spacing: -.02em;
	}
  .work-accordion .accordion-inner {
    padding-left: 0;
    padding-bottom: 1.5rem;
  }

  .work-accordion .accordion-head {
    align-items: flex-start;
  }

  .work-accordion .work-thumb img {
    height: 64px !important;
    width: 90px !important;
  }
}

/* =========================================================
   CLIENT BRANDS SECTION
========================================================= */

.brand-showcase {
  --brand-card-bg: #eceef1;
  --brand-card-border: rgba(26, 30, 58, 0.07);

  position: relative;
  padding: clamp(30px, 5vw, 80px) clamp(20px, 5vw, 70px);
  background: #ffffff;
  overflow: hidden;
  border-top: 1px solid var(--border, rgba(26, 30, 58, 0.1));
  border-bottom: 1px solid var(--border, rgba(26, 30, 58, 0.1));
}

.brand-showcase::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  left: -180px;
  bottom: -210px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(41, 217, 232, 0.09),
    transparent 68%
  );
  pointer-events: none;
}

.brand-showcase__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  min-height: 440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(460px, 1.15fr);
  align-items: center;
  gap: clamp(45px, 8vw, 120px);
}

.brand-showcase__content {
  max-width: 520px;
}

.brand-showcase__label {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted, #6b7299);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-showcase__title {
  max-width: 500px;
  margin: 0;
  color: var(--ink, #1a1e3a);
  font-family: "Playfair Display", serif;
  font-size: clamp(2.15rem, 4.1vw, 4.7rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.brand-showcase__description {
  max-width: 440px;
  margin: 24px 0 0;
  color: var(--muted, #6b7299);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 400;
  line-height: 1.7;
}

.brand-showcase__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 28px;
  padding: 0 20px;
  border-radius: 5px;
  background: var(--ink, #1a1e3a);
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.brand-showcase__button span {
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.brand-showcase__button:hover {
  transform: translateY(-2px);
  background: #28304f;
  box-shadow: 0 12px 30px rgba(26, 30, 58, 0.18);
}

.brand-showcase__button:hover span {
  transform: translate(2px, -2px);
}

/* Brand carousel */

.brand-carousel {
  width: 100%;
  min-width: 0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(90px, 1fr);
  gap: 14px;
  min-height: 298px;
}

.brand-card {
  position: relative;
  min-height: 90px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-card-border);
  border-radius: 11px;
  background: var(--brand-card-bg);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.65),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.brand-card:hover {
  z-index: 2;
  background: #ffffff;
  border-color: rgba(26, 30, 58, 0.12);
  box-shadow: 0 14px 35px rgba(26, 30, 58, 0.1);
  transform: translateY(-4px);
}

.brand-card:hover::before {
  opacity: 1;
}

.brand-card__image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 72%;
  height: auto;
  max-height: 65px;
  object-fit: contain;
  filter: saturate(0.9);
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.brand-card:hover .brand-card__image {
  filter: saturate(1);
  transform: scale(1.04);
}

.brand-card__fallback {
  position: relative;
  z-index: 1;
  color: var(--ink, #1a1e3a);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.brand-grid.is-changing .brand-card {
  opacity: 0;
  transform: translateY(8px);
}

/* Carousel navigation */

.brand-carousel__footer {
  min-height: 42px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 30, 58, 0.18);
  cursor: pointer;
  transition:
    width 0.25s ease,
    border-radius 0.25s ease,
    background-color 0.25s ease;
}

.brand-carousel__dot.is-active {
  width: 25px;
  border-radius: 20px;
  background: var(--ink, #1a1e3a);
}

.brand-carousel__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-carousel__button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 30, 58, 0.12);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink, #1a1e3a);
  font-size: 1rem;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.brand-carousel__button:hover {
  color: #ffffff;
  background: var(--ink, #1a1e3a);
  border-color: var(--ink, #1a1e3a);
  transform: translateY(-2px);
}

.brand-carousel__button:focus-visible,
.brand-carousel__dot:focus-visible,
.brand-showcase__button:focus-visible {
  outline: 3px solid rgba(41, 217, 232, 0.45);
  outline-offset: 3px;
}

/* Tablet */

@media (max-width: 900px) {
  .brand-showcase__inner {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .brand-showcase__content {
    max-width: 650px;
  }

  .brand-showcase__title {
    max-width: 650px;
  }

  .brand-showcase__description {
    max-width: 580px;
  }
}

/* Mobile */

@media (max-width: 560px) {
  .brand-showcase {
    padding: 55px 18px;
  }

  .brand-showcase__inner {
    min-height: auto;
    gap: 36px;
  }

  .brand-showcase__title {
    font-size: clamp(2.2rem, 11vw, 3.3rem);
  }

  .brand-showcase__description {
    margin-top: 18px;
    font-size: 0.82rem;
  }

  .brand-showcase__button {
    margin-top: 22px;
  }

  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 78px;
    gap: 9px;
    min-height: 252px;
  }

  .brand-card {
    min-height: 78px;
    padding: 14px;
    border-radius: 8px;
  }

  .brand-card__image {
    max-width: 82%;
    max-height: 36px;
  }

  .brand-carousel__footer {
    margin-top: 15px;
  }

  .brand-carousel__button {
    width: 35px;
    height: 35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-card,
  .brand-card__image,
  .brand-carousel__button,
  .brand-carousel__dot,
  .brand-showcase__button {
    transition: none;
  }
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
  padding: 0rem 2.5rem 2rem;
  background: var(--cream);
  /* border-top: 1px solid var(--border); */
}

.contact-container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

/* Left section */

.contact-form-column {
  padding: clamp(2rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-label {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-title {
  max-width: 680px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.7rem, 5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.contact-title em {
  display: block;
  font-weight: inherit;
}

.contact-description {
  max-width: 620px;
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Form */

.contact-form {
  width: 100%;
  margin-top: 2.5rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-field {
  margin-bottom: 1.25rem;
}

.contact-field label {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 1rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 30, 58, 0.22);
  border-radius: 0;
  outline: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  transition:
    border-color 0.3s ease,
    padding-left 0.3s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(107, 114, 153, 0.7);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  padding-left: 0.35rem;
  border-bottom-color: var(--cyan);
}

.contact-field textarea {
  min-height: 115px;
  resize: vertical;
}

.contact-field select {
  cursor: pointer;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 180px;
  margin-top: 0.7rem;
  padding: 1rem 1.7rem;
  color: #ffffff;
  background: var(--grad);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 109, 216, 0.24);
}

.contact-submit span {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.contact-submit:hover span {
  transform: translate(3px, -3px);
}

.contact-form-message {
  min-height: 24px;
  margin-top: 1rem;
  color: var(--teal);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
}

/* Right image section */

.contact-image-column {
  position: relative;
  min-height: 720px;
  overflow: hidden;
}

.contact-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-image-column:hover .contact-image {
  transform: scale(1.04);
}

.contact-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5, 15, 36, 0.12) 10%,
      rgba(5, 15, 36, 0.82) 100%
    );
}

.contact-image-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(2rem, 4vw, 4rem);
  color: #ffffff;
}

.contact-image-small {
  display: inline-block;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-image-content h3 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
}

.contact-details a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 390px;
  padding-bottom: 0.8rem;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.contact-details a:hover {
  border-bottom-color: var(--cyan);
}

.contact-details a span {
  transition: transform 0.3s ease;
}

.contact-details a:hover span {
  transform: translate(3px, -3px);
}

/* Bottom */

.contact-bottom {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 1.5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}

.contact-bottom p,
.contact-locations {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-locations {
  display: flex;
  gap: 2rem;
}

/* Tablet */

@media (max-width: 1024px) {
  .contact-section {
    padding: 5rem 1.5rem 2rem;
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-image-column {
    min-height: 550px;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .contact-section {
    padding: 4rem 1rem 1.5rem;
  }

  .contact-container {
    border-radius: 4px;
  }

  .contact-form-column {
    padding: 2rem 1.25rem 2.5rem;
  }

  .contact-title {
    font-size: 2.8rem;
  }

  .contact-description {
    font-size: 0.88rem;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-image-column {
    min-height: 480px;
  }

  .contact-image-content {
    padding: 1.5rem;
  }

  .contact-image-content h3 {
    font-size: 2.5rem;
  }

  .contact-bottom {
    align-items: flex-start;
    gap: 1rem;
  }

  .contact-locations {
    flex-direction: column;
    gap: 0.4rem;
    text-align: right;
  }
}

/* =========================================================
   CASE STUDY SLIDER + RESPONSIVE POPUP FINAL FIX
   Paste/keep this section at the END of your CSS file
========================================================= */

.slider-wrap {
  width: 100%;
  height: 100%;
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.slider-wrap .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.slider-wrap .slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.slider-wrap .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slider overlay */
.slider-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Read case study button */
.case-study-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 8;
  padding: 12px 22px;
  background: var(--blue, #3A6DD8);
  color: #ffffff;
  border: none;
  border-radius: 40px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.case-study-btn:hover {
  opacity: 0.9;
}

/* Slider arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: #111111;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-prev {
  left: 18px;
}

.slider-next {
  right: 18px;
}

/* Slider dots */
.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 9;
}

.slider-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.slider-dots span.on {
  background: #ffffff;
}

/* Popup backdrop */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

.case-modal.show {
  display: flex;
}

/* Popup box */
.case-modal-box {
  width: min(1000px, 95vw);
  max-height: 90vh;
  background: #ffffff;
  position: relative;
  border-radius: 0;
  overflow: hidden;
}

/* Close icon */
.case-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1000000;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-close:hover {
  background: var(--blue, #3A6DD8);
}

/* Popup content desktop */
.case-modal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 90vh;
  padding: 15px;
}

.case-modal-image {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.case-modal-image img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  max-height: calc(90vh - 30px);
  object-fit: cover;
  display: block;
}

.case-modal-text {
  padding: 50px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.case-modal-text h3 {
  margin: 0 0 1rem;
  color: var(--ink, #1A1E3A);
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.case-modal-text p {
  margin: 0;
  color: #555555;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

body.case-modal-open {
  overflow: hidden;
}

.text_about{
	font-size:clamp(2.2rem,5.2vw,6rem);line-height:1.3;letter-spacing:-.02em;color:var(--ink);max-width:100%;
}


/* =========================================================
   MOBILE POPUP FINAL FIX
========================================================= */

@media (max-width: 768px) {
	.text_about{
	font-size:clamp(1.8rem,5.2vw,6rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);max-width:100%;
}

  .slider-wrap {
    min-height: 320px;
  }

  .slider-arrow {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .slider-prev {
    left: 12px;
  }

  .slider-next {
    right: 12px;
  }

  .slider-dots {
    bottom: 14px;
  }

  .case-study-btn {
    left: 16px;
    bottom: 18px;
    padding: 11px 17px;
    font-size: 11px;
    z-index: 10;
  }

  .case-modal {
    align-items: center;
    justify-content: center;
    padding: 12px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* .case-modal-box { */
    /* width: 100%; */
    /* max-width: 100%; */
    /* height: calc(100vh - 24px); */
    /* height: calc(100dvh - 24px); */
    /* max-height: calc(100vh - 24px); */
    /* max-height: calc(100dvh - 24px); */
    /* border-radius: 16px; */
    /* overflow: hidden; */
  /* } */

  .case-modal-content {
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-height: 100%;
    padding: 0;
  }

  .case-modal-image {
    width: 100%;
    flex: 0 0 auto;
	        padding: 15px;
  }

  .case-modal-image img {
    width: 100%;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    object-fit: cover;
    display: block;
  }

  .case-modal-text {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 22px 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .case-modal-text h3 {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1.1;
  }

  .case-modal-text p {
    font-size: 15px;
    line-height: 1.65;
  }

  .case-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 28px;
    z-index: 1000001;
  }
}


/* Extra small phones */
@media (max-width: 420px) {

  .case-modal {
    padding: 10px;
  }

  /* .case-modal-box { */
    /* height: calc(100vh - 20px); */
    /* height: calc(100dvh - 20px); */
    /* max-height: calc(100vh - 20px); */
    /* max-height: calc(100dvh - 20px); */
  /* } */

  .case-modal-image img {
    height: auto;
        min-height: auto;
        max-height: 100%;
  }
.case-modal-image  {
   height: auto;
  }

  .case-modal-text {
    padding: 22px 18px 28px;
  }

  .case-modal-text h3 {
    font-size: 28px;
  }

  .case-modal-text p {
    font-size: 14px;
    line-height: 1.6;
  }
}
img.imgbrand {
    width: 13%;
    height: auto;
    padding-right: 6px;
}


.brand-list .imgbrand {
    display: block;
    width: auto;
    height: 40px;
    max-width: 140px;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-list {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
	margin-top:10px
}
@media (max-width: 900px) and (orientation: landscape) {
	.case-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.78) !important;
    overflow: hidden !important;
  }

  .case-modal.show {
    display: flex !important;
  }

  

  .case-modal-content {
    display: grid !important;
    grid-template-columns: 45% 55% !important;
    width: 100% !important;
    height: 90vh !important;
    max-height: 100% !important;
    padding: 14px !important;
    gap: 0 !important;
  }

  .case-modal-image {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .case-modal-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .case-modal-text {
    height: 100% !important;
    max-height: 100% !important;
    padding: 28px 34px 28px 34px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  .case-modal-text h3 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
    color: var(--ink, #1A1E3A) !important;
  }

  .case-modal-text p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #555555 !important;
    margin: 0 !important;
  }

  .case-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 9999999 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .process-card {
    height: calc(100vh - 72px) !important;
    min-height: 420px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .PCard {
    display: grid !important;
    grid-template-columns: 48% 52% !important;
    width: 100% !important;
    height: 100% !important;
  }

  .PCard > div:first-child {
    display: none !important;
  }

  .textBtmnum {
    padding: 1rem 1.2rem 1rem 6rem !important;
    height: 100% !important;
    overflow-y: auto !important;
    justify-content: center !important;
  }

  .textBtmnum h3 {
    font-size: 1.6rem !important;
    margin-bottom: 0.6rem !important;
  }

  .textBtmnum p {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .imgbrand {
    width: 48px !important;
    max-height: 28px !important;
    object-fit: contain !important;
  }

  .PCard > div:last-child {
    height: 100% !important;
    min-height: 100% !important;
    border-left: 1px solid var(--border) !important;
    overflow: hidden !important;
  }

  .slider-wrap {
    height: 100% !important;
    min-height: 100% !important;
  }

  .slider-wrap .slide,
  .slider-wrap .slide img {
    height: 100% !important;
  }

  .slider-wrap .slide img {
    object-fit: cover !important;
  }

  .textNum {
    left: -0.04em !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
  }

  .textNum span {
    font-size: clamp(8rem, 22vw, 14rem) !important;
  }

  .case-study-btn {
    left: 18px !important;
    bottom: 18px !important;
    top: auto !important;
    padding: 9px 14px !important;
    font-size: 10px !important;
  }

  .slider-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }

  .slider-prev {
    left: 12px !important;
  }

  .slider-next {
    right: 12px !important;
  }

  .slider-dots {
    bottom: 12px !important;
  }
}

/* Newly added: contact form status styling */
.contact-form-message {
  min-height: 24px;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.5;
}

/* Newly added: success response */
.contact-form-message-success {
  color: #16803c;
}

/* Newly added: error response */
.contact-form-message-error {
  color: #c62828;
}

/* Newly added: disabled button state */
.contact-submit:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Newly added: hidden anti-spam field */
.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}