/* Extracted custom Webflow site styles */

/* ── SCROLL REVEAL (first paint — no flash-then-animate) ──
   html always has .ds-reveal from React. Hide until .is-revealed.
   Touch / reduced-motion stay visible. No !important so GSAP can tween. */
html.ds-reveal .fade-in-section:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  will-change: opacity, transform;
}
html.ds-reveal .fade-in-section.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Industry hero videos — PrimeFolio growIn (scale 0.75 → 1) */
@keyframes dsGrowIn {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
html.ds-reveal .ds-video-grow:not(.is-revealed) {
  opacity: 0;
  transform: scale(0.75);
  transform-origin: center center;
  will-change: opacity, transform;
}
html.ds-reveal .ds-video-grow.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}
html.ds-reveal .ds-video-grow.ds-fp {
  animation: dsGrowIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
}
/* Parent fade wrapper stays visible — only the video grows */
html.ds-reveal .fade-in-section:has(> .ds-video-grow):not(.is-revealed),
html.ds-reveal .fade-in-section:has(> .w-background-video):not(.is-revealed):has(.ds-video-grow) {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  html.ds-reveal .ds-video-grow:not(.is-revealed),
  html.ds-reveal .ds-video-grow.ds-fp {
    animation: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ── FIRST-PAINT REVEAL (runs without JS) ──
   An inline script tags everything inside the first viewport with .ds-fp, so
   the opening animation is pure CSS. Waiting for the vendor script chain left
   the page blank for as long as it took GSAP to arrive.
   Matches Webflow's slideInBottom preset: 100px, 1s, outQuart. */
@keyframes dsSlideInBottom {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.ds-reveal .fade-in-section.ds-fp {
  animation: dsSlideInBottom 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation-delay: calc(0.3s + var(--ds-fp-i, 0) * 0.12s);
}
/* Video wrappers use growIn — never slide the shell */
html.ds-reveal .fade-in-section.ds-fp:has(> .ds-video-grow),
html.ds-reveal .fade-in-section.ds-fp:has(> .w-background-video) {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Home hero staggers its own children rather than sliding as one block */
html.ds-reveal .ds-hero-section.fade-in-section.ds-fp {
  animation: none;
  opacity: 1;
  transform: none;
}
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-heading-1,
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-subtext-1,
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-ctas-1,
html.ds-reveal .ds-hero-section.ds-fp .ds-logobar-wrap {
  animation: dsSlideInBottom 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-heading-1 {
  animation-delay: 0.4s;
}
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-subtext-1 {
  animation-delay: 0.5s;
}
html.ds-reveal .ds-hero-section.ds-fp .ds-hero-ctas-1 {
  animation-delay: 0.6s;
}
html.ds-reveal .ds-hero-section.ds-fp .ds-logobar-wrap {
  animation-delay: 0.7s;
}

/* Hero section itself never hides — only its children move */
html.ds-reveal .ds-hero-section.fade-in-section:not(.is-revealed),
html.ds-reveal .ds-hero-section.fade-in-section.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* JS-driven path (client-side navigation) still uses the same start state */
html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-heading-1,
html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-subtext-1,
html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-ctas-1,
html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-logobar-wrap {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  will-change: opacity, transform;
}

/* Last resort: if the scripts never boot, nothing may stay invisible */
html.ds-reveal:not(.ds-fx-ready) .fade-in-section:not(.is-revealed),
html.ds-reveal:not(.ds-fx-ready) .ds-hero-section:not(.ds-fp) .ds-hero-heading-1,
html.ds-reveal:not(.ds-fx-ready) .ds-hero-section:not(.ds-fp) .ds-hero-subtext-1,
html.ds-reveal:not(.ds-fx-ready) .ds-hero-section:not(.ds-fp) .ds-hero-ctas-1,
html.ds-reveal:not(.ds-fx-ready) .ds-hero-section:not(.ds-fp) .ds-logobar-wrap {
  animation: dsSlideInBottom 0.6s ease-out 3.5s both;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  html.ds-reveal .fade-in-section:not(.is-revealed),
  html.ds-reveal .fade-in-section,
  html.ds-reveal .fade-in-section.ds-fp,
  html.ds-reveal .ds-hero-section.ds-fp .ds-hero-heading-1,
  html.ds-reveal .ds-hero-section.ds-fp .ds-hero-subtext-1,
  html.ds-reveal .ds-hero-section.ds-fp .ds-hero-ctas-1,
  html.ds-reveal .ds-hero-section.ds-fp .ds-logobar-wrap,
  /* Match hide-rule specificity (:not(.ds-fp):not(.is-revealed)) or mobile hero stays blank */
  html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-heading-1,
  html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-subtext-1,
  html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-hero-ctas-1,
  html.ds-reveal .ds-hero-section:not(.ds-fp):not(.is-revealed) .ds-logobar-wrap,
  html.ds-reveal .ds-hero-section:not(.is-revealed) .ds-hero-heading-1,
  html.ds-reveal .ds-hero-section:not(.is-revealed) .ds-hero-subtext-1,
  html.ds-reveal .ds-hero-section:not(.is-revealed) .ds-hero-ctas-1,
  html.ds-reveal .ds-hero-section:not(.is-revealed) .ds-logobar-wrap {
    animation: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ── CURSOR (match live dstudio.agency) ──
   Default: small white circle + exclusion = dark dot on light UI.
   Links: grow circle; exclusion inverts text underneath (no label).
   Labels ("Explore") only via [data-cursor-text]. */
.mf-cursor {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  pointer-events: none !important;
  mix-blend-mode: exclusion !important;
  will-change: transform;
}
.mf-cursor:before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transform: translate(-50%, -50%) scale(0.125) !important;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-radius 0.35s ease, opacity 0.35s ease;
  will-change: transform;
}
.mf-cursor-text {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #000 !important;
  mix-blend-mode: normal;
}
.mf-cursor.-text .mf-cursor-text { opacity: 1; transform: translateY(0); }
/* Link / button hover — grow circle (Services / Work look) */
.mf-cursor.-pointer:before { transform: translate(-50%, -50%) scale(0.5) !important; }
.mf-cursor.is-button:before { transform: translate(-50%, -50%) scale(0.625) !important; }
.mf-cursor.is-huge:before { transform: translate(-50%, -50%) scale(0.875) !important; }
.mf-cursor.is-small:before { transform: translate(-50%, -50%) scale(0.3) !important; }
/* Navbar Work / Industry / Services — same compact size even when -pointer is on */
.mf-cursor.-pointer.is-small:before { transform: translate(-50%, -50%) scale(0.3) !important; }
.mf-cursor.is-square:before { border-radius: 24px !important; }
.mf-cursor.is-dark { mix-blend-mode: normal !important; }
.mf-cursor.is-dark:before { background: #000 !important; }
.mf-cursor.is-media { mix-blend-mode: normal !important; }
.mf-cursor.is-media:before {
  background: #fff !important;
  transform: translate(-50%, -50%) scale(0.5) !important;
  opacity: 0.9 !important;
}
.mf-cursor.is-media.-text:before {
  transform: translate(-50%, -50%) scale(1.125) !important;
  opacity: 1 !important;
}
.mf-cursor.is-media.-text .mf-cursor-text {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.mf-cursor.is-drag { mix-blend-mode: normal !important; }
.mf-cursor.is-drag:before {
  transform: translate(-50%, -50%) scale(0.75) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
@media (pointer: coarse) {
  .mf-cursor { display: none !important; }
}

/* ── NAV LINK SLIDE ── */
.ds-nav-link { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.ds-nav-top, .ds-nav-bottom { display:block; transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s cubic-bezier(.4,0,.2,1); white-space:nowrap; }
.ds-nav-bottom { position:absolute; top:100%; left:0; width:100%; opacity:0; }
.ds-nav-link:hover .ds-nav-top    { transform:translateY(-100%); opacity:0; }
.ds-nav-link:hover .ds-nav-bottom { transform:translateY(-100%); opacity:1; }

/* ── BUTTON BASE ── */
.ds-btn { position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border-radius:1000px; cursor:pointer; text-decoration:none; }
.ds-btn-border { display:block; position:absolute; inset:0; z-index:3; border:1px solid currentColor; border-radius:1000px; pointer-events:none; }
.ds-btn-ripple { display:block; position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit; transform:translateZ(0); }
.ds-btn-ripple > span { display:block; width:100%; height:100%; background:var(--ds-ripple-color,#000); border-radius:50% 50% 0 0; transform:translateY(101%); transition:transform .5s cubic-bezier(.4,0,0,1), border-radius .5s cubic-bezier(.4,0,0,1); }
.ds-btn:hover .ds-btn-ripple > span { transform:translateY(0); border-radius:0; }
.ds-btn-title { position:relative; display:inline-flex; align-items:center; gap:8px; overflow:hidden; z-index:2; }
.ds-btn-icon { display:inline-flex; flex-direction:column; flex-shrink:0; position:relative; overflow:hidden; }
.ds-btn-icon-original, .ds-btn-icon-clone { display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.ds-btn:hover .ds-btn-icon-original, .ds-btn:hover .ds-btn-icon-clone { transform:translateY(-100%); }
.ds-btn-text { display:block; position:relative; white-space:nowrap; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.ds-btn:hover .ds-btn-text { transform:translateY(-100%); }
.ds-btn-text::after { content:attr(data-text); display:block; position:absolute; top:100%; left:0; width:100%; white-space:nowrap; text-align:center; }
.ds-magnetic { display:inline-block; }

/* ── DROPDOWN TOGGLE (non-navbar) ── */
.w-dropdown-toggle { display:inline-flex !important; align-items:center !important; gap:4px !important; white-space:nowrap !important; overflow:visible !important; flex-wrap:nowrap !important; }

/* ── DROPDOWN ICON ── */
.ds-dropdown-icon { display:none; align-items:center; flex-shrink:0; font-size:14px; line-height:1; font-weight:300; pointer-events:none; white-space:nowrap; }
.ds-navbar-links .w-dropdown-toggle .ds-dropdown-icon { display:inline-flex !important; font-size:inherit; font-weight:inherit; line-height:1; flex-shrink:0; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); transform-origin:center; }
.ds-navbar-links .w-dropdown.w--open .w-dropdown-toggle .ds-dropdown-icon { transform:rotate(45deg); }

/* Industry+ — align with sibling nav links (Work / Services) */
.ds-navbar-links .w-dropdown {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  height: 1.4em !important;
  line-height: 1.4 !important;
}

.ds-navbar-links .w-dropdown-toggle.ds-nav-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 1.4em !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.ds-navbar-links .w-dropdown-toggle > div {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  height: 1.4em !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
  width: max-content !important;
}

.ds-navbar-links .ds-dd-plus {
  display: inline-block;
  margin-left: 3px;
  line-height: 1;
  font-weight: 400;
  vertical-align: 0.05em;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.ds-navbar-links .w-dropdown.w--open .ds-dd-plus {
  transform: rotate(45deg);
}

/* Industry + from first paint — prevents navbar horizontal jerk when JS boots */
.ds-navbar-links .w-dropdown-toggle > div::after,
.ds-navbar-links .w-dropdown-toggle .ds-nav-top::after,
.ds-navbar-links .w-dropdown-toggle .ds-nav-bottom::after {
  content: "+";
  display: inline-block;
  margin-left: 3px;
  line-height: 1;
  font-weight: 400;
  vertical-align: 0.05em;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
/* After hover-split exists, only the slide layers keep the + (avoid double ++) */
html.ds-nav-ready .ds-navbar-links .w-dropdown-toggle > div::after {
  content: none;
}
html.ds-nav-ready .ds-navbar-links .w-dropdown-toggle .ds-nav-top::after,
html.ds-nav-ready .ds-navbar-links .w-dropdown-toggle .ds-nav-bottom::after {
  content: "+";
}
.ds-navbar-links .w-dropdown.w--open .w-dropdown-toggle > div::after,
.ds-navbar-links .w-dropdown.w--open .w-dropdown-toggle .ds-nav-top::after,
.ds-navbar-links .w-dropdown.w--open .w-dropdown-toggle .ds-nav-bottom::after {
  transform: rotate(45deg);
}

.link-block.w-inline-block { cursor:pointer; }
.link-block .text-block-18 { position:relative; overflow:hidden; display:inline-block; }
.link-block .text-block-18 .ds-nav-top, .link-block .text-block-18 .ds-nav-bottom { display:block; transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s cubic-bezier(.4,0,.2,1); white-space:nowrap; }
.link-block .text-block-18 .ds-nav-bottom { position:absolute; top:100%; left:0; width:100%; opacity:0; }
.link-block:hover .text-block-18 .ds-nav-top { transform:translateY(-100%); opacity:0; }
.link-block:hover .text-block-18 .ds-nav-bottom { transform:translateY(-100%); opacity:1; }
.link-block .ds-footer-arrow { display:inline-flex; align-items:center; transition:transform .38s cubic-bezier(.4,0,.2,1); }
.link-block:hover .ds-footer-arrow { transform:translate(3px,-3px); }
.ds-marquee { position:relative; overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.ds-marquee-track { display:flex; align-items:center; width:max-content; flex-wrap:nowrap; will-change:transform; }
.ds-marquee:hover .ds-marquee-track { animation-play-state:paused !important; }
.ds-marquee-group { display:flex; align-items:center; flex-shrink:0; gap:var(--ds-marquee-gap,64px); padding-right:var(--ds-marquee-gap,64px); }
.ds-marquee-group > * { flex-shrink:0; }
.ds-marquee-group .ds-logobar-sep { width:1px; height:28px; background:rgba(0,0,0,.15); flex-shrink:0; }
.ds-logobar-row .ds-marquee-group img, .ds-marquee-logos .ds-marquee-group img { height:auto; width:auto; display:block; }
.div-block-27.ds-marquee .ds-marquee-group, .ds-marquee-cards .ds-marquee-group { align-items:stretch; }
.div-block-27.ds-marquee .ds-marquee-group > *, .ds-marquee-cards .ds-marquee-group > * { flex-shrink:0; }
@keyframes ds-marquee-scroll { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce) { .ds-marquee-track { animation:none; } }
.ds-hero-btn-primary-1, .ds-navbar-cta { border:1px solid #000; }
.ds-hero-btn-secondary-1-2 { border:1px solid white; }
.div-block-3 img { transition:all .5s; }
.div-block-3:hover img { transform:scale(1.065) !important; }
.letters .word, .words .word { display:inline-block; white-space:nowrap; }
.letters .char, .words .char { display:inline-block; }


/* --- */


:root{ --color-text-primary:#111111; --color-text-secondary:#6b6b6b; --color-border-secondary:#d8d8d8; }
.cr{ width:100%; overflow:hidden; position:relative; padding-bottom:50px; }
#tw, .track-w{ position:relative !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; overflow:hidden !important; cursor:none !important; user-select:none !important; }
#track, .track{ display:flex !important; align-items:center !important; gap:20px !important; will-change:transform !important; animation:none !important; transition:none !important; }
#track .slide, .track .slide{ flex:0 0 72% !important; width:72% !important; min-width:0 !important; max-width:72% !important; border-radius:14px !important; overflow:hidden !important; opacity:1 !important; transform:none !important; transition:none !important; padding:0 !important; }
#track .slide-inner, .track .slide-inner{ background:#f2f2f2; }
#track img, .track img{ display:block !important; height:100% !important; width:100% !important; max-width:none !important; object-fit:cover !important; pointer-events:none !important; }
.info{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:24px; text-align:center; }
.model-link{ font-size:28px; font-weight:500; line-height:1.1; letter-spacing:-0.5px; text-decoration:none; color:var(--color-text-primary); }
.model-link:hover{ text-decoration:underline; }
.model-area{ margin-top:8px; font-size:14px; color:var(--color-text-secondary); }
.badge-new{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:30px; background:#f2f2f2; font-size:11px; margin-left:8px; letter-spacing:.5px; }
.dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:24px; }
.dot{ width:8px; height:8px; border-radius:100px; background:var(--color-border-secondary); border:none; padding:0; cursor:pointer; transition:all .35s ease; }
.dot.active{ width:28px; background:#111111; }
.nav-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,.18); transition:all .3s ease; padding:0; line-height:0; }
.nav-btn:hover{ transform:translateY(-50%) scale(1.07); background:rgba(255,255,255,0.75); }
.nav-btn svg{ width:18px; height:18px; stroke:#111; stroke-width:2.4; fill:none; display:block; flex-shrink:0; }
.prev-btn{ left:24px; } .next-btn{ right:24px; }

/* ── CASE STUDY SLIDER CURSOR ── */
.samara-slider-cursor { position:fixed; z-index:999999; left:0; top:0; pointer-events:none; opacity:0; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,0.60); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.55); box-shadow:0 4px 20px rgba(0,0,0,0.20); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; color:#111; font-weight:400; }
.samara-slider-cursor.is-visible { opacity:1; }

@media (max-width:991px){ #track .slide-inner, .track .slide-inner{ height:clamp(300px,50vh,500px) !important; } }
@media (max-width:767px){ #track, .track{ gap:14px !important; } #track .slide, .track .slide{ border-radius:12px !important; } #track .slide-inner, .track .slide-inner{ height:auto !important; } .model-link{ font-size:22px; } .nav-btn{ width:46px; height:46px; } }
.slide:hover img{ transform:scale(1) !important; }


/* --- */


  .ds-mobile-menu:has(.ds-mobile-menu__dropdown-toggle.is-open)
.ds-mobile-menu__dropdown-toggle:not(.is-open) {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.ds-mobile-menu__dropdown-toggle.is-open {
    opacity: 1;
}
#ds-mobile-menu { position:fixed; inset:0; z-index:99999; background:#fff; flex-direction:column; overflow-y:auto; display:flex; transform:translateY(-100%); visibility:hidden; transition:transform 0.65s cubic-bezier(0.76,0,0.24,1), visibility 0s linear 0.65s; will-change:transform; }
#ds-mobile-menu.is-open { transform:translateY(0); visibility:visible; transition:transform 0.65s cubic-bezier(0.76,0,0.24,1), visibility 0s linear 0s; }
.ds-mobile-menu__header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; flex-shrink:0; opacity:0; transform:translateY(-10px); transition:opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }
#ds-mobile-menu.is-open .ds-mobile-menu__header { opacity:1; transform:translateY(0); }
.ds-mobile-menu__logo img { height:28px; width:auto; display:block; }
.ds-mobile-menu__close { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:#111; line-height:1; }
.ds-mobile-menu__close svg { width:36px; height:36px; stroke:#111; stroke-width:1.5; fill:none; }
.ds-mobile-menu__nav { display:flex; flex-direction:column; padding:8px 0; flex:1; }
.ds-mobile-menu__label { padding:32px 24px 6px; font-size:16px; font-weight:400; color:#9c9c9c; letter-spacing:-.2px; line-height:1.4; opacity:0; transform:translateY(10px); transition:opacity 0.4s ease 0.25s, transform 0.4s ease 0.25s; }
#ds-mobile-menu.is-open .ds-mobile-menu__label { opacity:1; transform:translateY(0); }
.ds-mobile-menu__footer .ds-mobile-menu__label { padding:0 0 4px; opacity:1; transform:none; transition:none; }
.ds-mobile-menu__link, .ds-mobile-menu__dropdown-toggle { display:block; padding:14px 24px; font-size:clamp(34px,10.5vw,46px); font-weight:400; color:#111; text-decoration:none; letter-spacing:-1.5px; line-height:1.15; border:none; background:none; width:100%; text-align:left; cursor:pointer; clip-path:inset(0 0 100% 0); transform:translateY(24px); opacity:0; transition:clip-path 0.55s cubic-bezier(0.76,0,0.24,1), transform 0.55s cubic-bezier(0.76,0,0.24,1), opacity 0.35s ease; transition-delay:var(--item-delay,0.3s); }
#ds-mobile-menu.is-open .ds-mobile-menu__link, #ds-mobile-menu.is-open .ds-mobile-menu__dropdown-toggle { clip-path:inset(0 0 0% 0); transform:translateY(0); opacity:1; }
.ds-mobile-menu__link:hover, .ds-mobile-menu__dropdown-toggle:hover { opacity:0.45; }
.ds-mobile-menu__dropdown-toggle { display:flex; align-items:center; justify-content:space-between; }
.ds-mobile-menu__dropdown-icon { font-size:50px; font-weight:300; line-height:1; flex-shrink:0; display:inline-flex; transition:transform 0.35s cubic-bezier(0.76,0,0.24,1); transform-origin:center; }
.ds-mobile-menu__dropdown-toggle.is-open .ds-mobile-menu__dropdown-icon { transform:rotate(45deg); }
.ds-mobile-menu__dropdown-list { display:flex; flex-direction:column; background:#fff; overflow:hidden; max-height:0; transition:max-height 0.45s cubic-bezier(0.76,0,0.24,1); }
.ds-mobile-menu__dropdown-list.is-open { max-height:400px; }
.ds-mobile-menu__dropdown-link { display:flex !important; align-items:center; justify-content:space-between; padding:14px 24px; font-family:Generalsans, "General Sans", Arial, sans-serif; font-size:24px; font-weight:400; line-height:1.2; letter-spacing:-.96px; color:rgba(0,0,0); text-decoration:none; border:none; transition:color 0.2s ease; }
.ds-mobile-menu__dropdown-link::after { content:''; display:inline-flex; flex-shrink:0; width:24px; height:24px; border-radius:50%; background-color:#111; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:12px 12px; opacity:0; transform:translateX(-6px); transition:opacity 0.2s ease, transform 0.2s ease; }
.ds-mobile-menu__dropdown-link:hover { color:rgba(0,0,0,1) !important; }
.ds-mobile-menu__dropdown-link:hover::after { opacity:1; transform:translateX(0); }
.ds-mobile-menu__footer { padding:24px 24px 44px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; opacity:0; transform:translateY(16px); transition:opacity 0.45s ease, transform 0.45s ease; transition-delay:0s; }
#ds-mobile-menu.is-open .ds-mobile-menu__footer { opacity:1; transform:translateY(0); transition-delay:0.55s; }
.ds-mobile-menu__contact-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ds-mobile-menu__contact-link { font-size:18px; font-weight:400; letter-spacing:-.2px; color:#111; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; transition:opacity 0.2s ease; }
.ds-mobile-menu__contact-link:hover, .ds-mobile-menu__contact-link:active { opacity:0.5; }
.link-block-8 { display:none !important; }
@media (max-width:991px) {
  .link-block-8 { display:flex !important; }
  .ds-navbar-links { display:none !important; }
  .ds-navbar-right .ds-nav-link { display:none !important; }
  .ds-navbar-cta { display:none !important; }
}
body.ds-menu-open { overflow:hidden; }
@media (prefers-reduced-motion:reduce) { #ds-mobile-menu, #ds-mobile-menu .ds-mobile-menu__header, #ds-mobile-menu .ds-mobile-menu__label, #ds-mobile-menu .ds-mobile-menu__link, #ds-mobile-menu .ds-mobile-menu__dropdown-toggle, #ds-mobile-menu .ds-mobile-menu__footer { transition:none !important; clip-path:none !important; transform:none !important; opacity:1 !important; } #ds-mobile-menu { visibility:hidden; } #ds-mobile-menu.is-open { visibility:visible; } }


/* --- */


@media (min-width: 992px) {
  .ds-navbar-links .w-dropdown { position: relative; }
  .ds-navbar-links .w-dropdown-list { position:absolute !important; top:calc(100% + 12px) !important; left:0 !important; width:260px !important; background:#fff !important; border-radius:16px !important; border:1px solid rgba(0,0,0,0.07) !important; box-shadow:0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05) !important; padding:6px 0 !important; z-index:9999 !important; display:flex !important; flex-direction:column !important; gap:0 !important; transform:translateY(8px) !important; opacity:0; transition:opacity 0.25s ease, transform 0.28s cubic-bezier(0.4,0,0.2,1); }
  .ds-navbar-links .w-dropdown.w--open .w-dropdown-list { transform:translateY(0) !important; opacity:1; }
  .ds-navbar-links .w-dropdown-list .w-dropdown-link { display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; text-decoration:none !important; margin:0 !important; transition:color 0.2s ease, opacity 0.2s ease !important; }
  .ds-navbar-links .w-dropdown-list .w-dropdown-link::after { content:''; display:inline-flex; flex-shrink:0; width:24px; height:24px; border-radius:50%; background-color:#111; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:12px 12px; opacity:0; transform:translateX(-5px); transition:opacity 0.2s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1); }
  .ds-navbar-links .w-dropdown-list .w-dropdown-link:hover, .ds-navbar-links .w-dropdown-list .w-dropdown-link.w--current { color:rgba(0,0,0,1) !important; opacity:1 !important; }
  .ds-navbar-links .w-dropdown-list .w-dropdown-link:hover::after, .ds-navbar-links .w-dropdown-list .w-dropdown-link.w--current::after { opacity:1; transform:translateX(0); }
}


/* --- */


[data-back-to-top] .w-embed svg, [data-back-to-top] svg { transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); transform-origin:center; display:block; }
[data-back-to-top]:hover .w-embed svg, [data-back-to-top]:hover svg { transform:rotate(-45deg) scale(1.1); }
[data-back-to-top] .ds-nav-top { transition:transform 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.38s cubic-bezier(0.4,0,0.2,1); }
[data-back-to-top] .ds-nav-bottom { position:absolute; top:100%; left:0; width:100%; opacity:0; transition:transform 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.38s cubic-bezier(0.4,0,0.2,1); }
[data-back-to-top]:hover .ds-nav-top { transform:translateY(-100%); opacity:0; }
[data-back-to-top]:hover .ds-nav-bottom { transform:translateY(-100%); opacity:1; }
  .flip-text{
    vertical-align: top !important;
  }


/* --- */


/* ── EQUAL-HEIGHT CARDS — impact swiper only (additive) ── */
.ds-impact .slider_section {
  overflow: visible;
  width: 100%;
}

.impact-swiper,
.impact-swiper2 {
  overflow: visible !important;
  width: 100%;
}

.impact-swiper .swiper-wrapper,
.impact-swiper2 .swiper-wrapper {
  align-items: stretch;
}

.impact-swiper .swiper-slide,
.impact-swiper2 .swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
}

.impact-swiper .swiper-slide .div-block-42,
.impact-swiper2 .swiper-slide .div-block-42 {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}


/* --- */



/* =========================
   PROGRESS BAR
========================= */

.progress-wrap{
    width:100%;
    height:2px;
    background:#D3D3D3;
    overflow:hidden;
    margin-bottom:20px;
}

.progress-bar{
    width:0%;
    height:100%;
    background:#000;
}

/* =========================
   HEADER
========================= */


/* TITLE */

/* ACTIVE */

.autoplay-tabs_item.active .text-block-5,
.autoplay-tabs_item.active .text-block-6{
    opacity:1;
  	color:black;
}

/* =========================
   CONTENT
========================= */

.autoplay-tabs_content{
    overflow:hidden;
    height:0;
    opacity:0;
    margin-top:0 !important;
}

/* ACTIVE CONTENT — stylesheet keeps the open state after GSAP clears inline styles */

.autoplay-tabs_item.active .autoplay-tabs_content{
    height:auto;
    opacity:1;
    margin-top:24px !important;
}


/* =========================
   IMAGE
========================= */

.autoplay-tabs > div:last-child{
    position:relative;
    border-radius:24px;
    overflow:hidden;
}

/* =========================
   IMAGES
========================= */

.autoplay-tabs_image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 0.6s ease,
        transform 1.2s ease,
        visibility 0.6s;
}

/* ACTIVE IMAGE */

.autoplay-tabs_image.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

/* ACTIVE IMAGE EFFECT */

.autoplay-tabs_item.active ~ div .autoplay-tabs_image,
.autoplay-tabs:hover .autoplay-tabs_image{
    transform:scale(1);
}


  /* =========================
   CUSTOM CURSOR (disabled)
========================= */

/*.cursor{
    position:fixed;
    top:0;
    left:0;

    width:20px;
    height:20px;

    border:1px solid #fff;
    border-radius:50%;

    pointer-events:none;

    z-index:99999;

    transform:translate(-50%, -50%);

    transition:
        width 0.3s ease,
        height 0.3s ease,
        background 0.3s ease,
        border 0.3s ease;

    mix-blend-mode:difference;
}*/

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

    .autoplay-tabs{
        grid-template-columns:1fr;
        gap:50px;
    }

    .autoplay-tabs > div:last-child{
        position:relative;
        top:auto;
    }

}

@media(max-width:767px){

    .text-block-5{
        font-size:20px;
    }

    .autoplay-tabs_item{
        padding-top:24px;
        padding-bottom:24px;
    }

    .autoplay-tabs_item.active .autoplay-tabs_content{
        margin-top:16px !important;
    }

}



/* --- */

.w-webflow-badge { position: fixed !important; display: None !important; visibility: hidden !important; } 

/* --- */


  /* On touch devices, kill hover-transition flicker on buttons
     (the JS hover rebuild is also skipped there). */
  @media (hover: none) {
    .ds-btn, .ds-btn * { transition: none !important; }

    /* No hover arrow on dropdown links on touch devices — the arrow
       is a pseudo-element / background on the hover (and current)
       state, which "sticks" after a tap on mobile. Covers both the
       navbar industry dropdown and the custom mobile menu links. */
    .dropdown-link::before, .dropdown-link::after,
    .w-dropdown-link::before, .w-dropdown-link::after,
    .ds-mobile-menu__dropdown-link::before, .ds-mobile-menu__dropdown-link::after,
    .ds-mobile-menu__link::before, .ds-mobile-menu__link::after {
      content: none !important;
      display: none !important;
    }
    .dropdown-link, .w-dropdown-link,
    .ds-mobile-menu__dropdown-link, .ds-mobile-menu__link {
      background-image: none !important;
    }

    /* Samara carousel on touch: no arrow cursor (it's mouse-driven),
       and no sticky hover-zoom on slide images after a tap. */
    .samara-slider-cursor { display: none !important; }
    .slide:hover img { transform: none !important; }
  }


/* --- */


  .tabs-menu .w-tab-link { position: relative; }
  .tab-border-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .tab-border-rect {
    fill: none;
    stroke: rgba(255,255,255,.5);
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    visibility: hidden;
    animation: none;
    pointer-events: none;
  }
  /* Border trace is opt-in via .is-tracing only — never all tabs at once */
  .tabs-menu .w-tab-link.is-tracing .tab-border-rect {
    opacity: 1;
    visibility: visible;
    animation: trace-border var(--tab-duration, 10s) linear forwards;
  }
  @keyframes trace-border { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  .tabs-paused .w-tab-link.is-tracing .tab-border-rect { animation-play-state: paused; }
  .tabs-menu .w-tab-link { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease; opacity: 0.55; }
  .tabs-menu .w-tab-link.w--current, .tabs-menu .w-tab-link:hover { opacity: 1; }
  .w-tab-content { display: grid; }
  .w-tab-content .w-tab-pane { display: block !important; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease-in-out, visibility 0.5s; }
  .w-tab-content .w-tab-pane.w--tab-active { opacity: 1; visibility: visible; pointer-events: auto; }


/* --- */


/* Fixed header: hide on scroll down, ease back in on scroll up */
.ds-navbar {
  z-index: 1000 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent !important;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
  /* Show animation — slower, soft ease-out */
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.45s ease !important;
  will-change: transform;
  backface-visibility: hidden;
}

.ds-navbar-spacer {
  width: 100%;
  /* Desktop nav measures ~88px; keep this on first paint before JS measures */
  height: var(--ds-navbar-offset, 88px);
  min-height: var(--ds-navbar-offset, 88px);
  flex-shrink: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .ds-navbar-spacer {
    height: var(--ds-navbar-offset, 72px);
    min-height: var(--ds-navbar-offset, 72px);
  }
}

.ds-navbar-links {
  background: none !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.ds-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.ds-navbar.is-hidden {
  transform: translate3d(0, calc(-100% - 16px), 0);
  box-shadow: none !important;
  pointer-events: none;
  /* Hide a bit quicker than show */
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease !important;
}

/* Keep open dropdowns usable */
.ds-navbar:has(.w-dropdown.w--open) {
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Hero particle canvas disabled on homepage */
.ds-particle-canvas {
  display: none !important;
}

.ds-hero-section {
  background-color: #fff !important;
  background-image: none !important;
}

/* Solid white page background (override system cream #f9f9f7) */
body,
body.body {
  background-color: #fff !important;
  background-image: none !important;
  font-family: Generalsans, "General Sans", Arial, sans-serif !important;
}

/*
  Live Webflow registers @font-face as "Generalsans" but many rules use
  "General Sans". Alias both names to the same files so weights resolve.
*/
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6fe79da14e2dd0dda0_GeneralSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6f3650e96a2dfcff27_GeneralSans-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6f8f6beea31e79eb69_GeneralSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6f74f8b0e57b90868f_GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6f47892ede29932d9b_GeneralSans-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/wf-cdn/6a0201da9b39167d6a5a7ac6/6a035a6f9af8bfa17041843a_GeneralSans-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Contact form — match https://www.dstudio.agency/contact ── */
.ds-stats-inner-contact {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px 48px 0 !important;
  box-sizing: border-box !important;
}

.ds-stats-inner-contact .ds-hero-heading-1 {
  color: #000 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: Generalsans, "General Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
}

.ds-stats-inner-contact .ds-hero-subtext-contact {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}

.ds-stats-inner-contact .ds-hero-subtext-contact .link {
  font-family: inherit !important;
  font-weight: 500 !important;
}

.div-block-72 {
  max-width: 472px !important;
  width: 100% !important;
  margin: 40px auto 120px !important;
  box-sizing: border-box !important;
}

.div-block-72 .w-form {
  margin: 0 !important;
}

#email-form {
  width: 100%;
  margin: 0;
  scroll-margin-top: 120px;
}

#email-form .text-field,
#email-form .w-input,
#email-form .w-select {
  width: 100% !important;
  box-sizing: border-box !important;
  color: #000 !important;
  background-color: #f7f7f7 !important;
  border: 1px solid #f7f7f7 !important;
  border-radius: 12px !important;
  min-height: 64px !important;
  height: auto !important;
  margin-bottom: 12px !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  line-height: 140% !important;
  font-family: Generalsans, "General Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease !important;
}

#email-form textarea.text-field {
  min-height: 140px !important;
  resize: vertical;
}

#email-form .text-field.select-field,
#email-form select.text-field {
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  background-position: calc(100% - 24px) center !important;
  padding-right: 52px !important;
}

#email-form .text-field:focus,
#email-form .text-field:active,
#email-form .w-input:focus,
#email-form .w-input:active,
#email-form .w-select:focus,
#email-form .w-select:active {
  border-color: #000 !important;
  outline: none !important;
}

#email-form .ds-hero-btn-primary-contact {
  color: #f9f9f7 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  background-color: #121212 !important;
  border: none !important;
  border-radius: 100px !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  padding: 12px 28px !important;
  font-family: Generalsans, "General Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  overflow: hidden;
  position: relative;
}

#email-form .ds-hero-btn-primary-contact:hover {
  background-color: #333 !important;
}

#email-form .ds-hero-btn-primary-contact:disabled {
  opacity: 0.7;
  cursor: wait;
}

.div-block-72 .ds-contact-success,
.div-block-72 .ds-contact-fail {
  display: block !important;
  padding: 28px 24px;
  border-radius: 12px;
  text-align: center;
  font-family: Generalsans, "General Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #121212;
}

.div-block-72 .ds-contact-success {
  background-color: #f0f0f0;
}

.div-block-72 .ds-contact-fail {
  background-color: #ffdede;
  margin-top: 16px;
}

.div-block-72 .ds-contact-success__again {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  color: #121212;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.div-block-72 .ds-contact-success__again:hover {
  opacity: 0.55;
}

#email-form.is-attempted .text-field:invalid:not(:focus),
#email-form.is-attempted .w-input:invalid:not(:focus) {
  border-color: #c0392b !important;
}

#email-form .ds-hero-btn-primary-contact:disabled {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 767px) {
  .ds-stats-inner-contact {
    padding: 60px 24px 0 !important;
  }

  #email-form .text-field,
  #email-form .w-input,
  #email-form .w-select {
    padding-left: 16px !important;
  }
}

/* Match live dstudio.agency container alignment (Webflow):
   .ds-stats-inner / .ds-container share max-width 1440px;
   side padding lives on section shells (.ds-stats-inner, .ds-impact),
   not on .ds-container itself. */
.ds-container {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.ds-stats-inner,
.ds-stats-inner-detail {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.ds-impact {
  box-sizing: border-box !important;
}

.ds-impact > .ds-container {
  max-width: 1440px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767px) {
  .ds-stats-inner,
  .ds-stats-inner-detail {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .ds-impact {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}