/*
  Tackle-D shared visual refinement layer.
  This file is intentionally loaded after each page stylesheet so the
  existing page compositions remain intact while sharing one visual system.
*/

:root {
  color-scheme: dark;
}

html {
  scroll-padding-top: 96px;
}

body {
  min-width: 320px;
  color: var(--text);
  background: var(--black);
  font-family: var(--font-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Shared chrome must not inherit page-specific document typography. */
.site-header,
.site-header .nav,
.mobile-menu {
  color: var(--text);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

.footer {
  font-family: var(--font-main);
  line-height: normal;
  letter-spacing: normal;
}

:where(main h1, main h2, main h3, main h4, main h5, main h6) {
  color: var(--white);
  font-family: var(--font-display);
  text-wrap: balance;
}

:where(main h1) {
  font-size: clamp(2.55rem, 5.5vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

:where(main h2) {
  font-size: clamp(1.85rem, 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

:where(main h3) {
  font-size: clamp(1.05rem, 1.2vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

:where(main p, main li) {
  text-wrap: pretty;
}

:where(main img, .footer img) {
  max-width: 100%;
  height: auto;
}

@keyframes tdHeaderEnter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.js-enabled .site-header {
  animation: tdHeaderEnter 0.65s var(--ease-spring) both;
}

.site-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.86);
  border-bottom-color: var(--line);
}

.nav-links .nav-cta {
  border-radius: 5px 16px 5px 16px;
}

.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: var(--white);
}

.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  width: 100%;
}

.mobile-links a[aria-current="page"] {
  color: var(--yellow);
}

.menu-btn {
  position: relative;
  font-size: 0;
}

main,
section,
article,
.container,
.wd-container,
.cloud-container,
.ux-container,
.cs-container,
.ecommerce-container,
.mobile-container {
  min-width: 0;
}

main {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 197, 10, 0.045), transparent 23rem),
    linear-gradient(180deg, #000000 0%, #050505 52%, #000000 100%);
}

main::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 72%);
}

::selection {
  color: var(--black);
  background: var(--yellow);
}

:is(
  .about-hero,
  .contact-hero,
  .solutions-hero,
  .page-hero,
  .refund-hero,
  .wd-hero,
  .mobile-hero,
  .cs-hero,
  .ecommerce-hero,
  .cloud-hero,
  .ux-hero,
  .hero-showcase
) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:is(
  .about-hero-content,
  .contact-hero-content,
  .solutions-hero-content,
  .page-hero-inner,
  .refund-hero-content,
  .wd-hero-content,
  .mobile-hero-content,
  .cs-hero-content,
  .ecommerce-hero-content,
  .cloud-hero-content,
  .ux-hero-content
) {
  min-width: 0;
}

:is(
  .about-hero-copy,
  .contact-hero-copy,
  .solutions-hero-description,
  .page-lead,
  .refund-lead,
  .wd-large-text,
  .mobile-hero-text,
  .cs-hero-text,
  .cloud-hero-text,
  .ux-hero-text
) {
  max-width: 64ch;
  color: var(--text);
  line-height: 1.78;
}

:is(
  
  .project-card,
  .industry-solution,
  .solve-item,
  .belief,
  .thinking-item,
  .process-card,
  .step-card,
  .program-card,
  .benefit-card,
  .ecommerce-capability-card,
  .ecommerce-process-card,
  .cloud-service,
  .ux-service,
  .wd-service-card,
  .wd-benefit-card,
  .cs-solution-item,
  .mobile-feature-card,
  .contact-direct-item,
  .location-info-box,
  .contact-form-wrap,
  .map-card,
  .career-form-card,
  .details-panel,
  .privacy-controller-panel,
  .privacy-data-grid,
  .privacy-right,
  .terms-content-panel,
  .terms-contact-panel,
  .refund-summary-card,
  .cin-certificate,
  .proforma-document
) {
  border-color: var(--line);
  border-radius: var(--radius-cut);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    box-shadow var(--duration-normal) var(--ease),
    background-color var(--duration-normal) var(--ease);
}

:is(
  
  .project-card,
  .industry-solution,
  .solve-item,
  .belief,
  .thinking-item,
  .process-card,
  .step-card,
  .program-card,
  .benefit-card,
  .ecommerce-capability-card,
  .ecommerce-process-card,
  .cloud-service,
  .ux-service,
  .wd-service-card,
  .wd-benefit-card,
  .cs-solution-item,
  .mobile-feature-card,
  .contact-direct-item,
  .location-info-box,
  .contact-form-wrap,
  .map-card,
  .career-form-card,
  .details-panel,
  .privacy-controller-panel,
  .privacy-data-grid,
  .privacy-right,
  .terms-content-panel,
  .terms-contact-panel,
  .refund-summary-card,
  .cin-certificate,
  .proforma-document
):hover {
  border-color: var(--line-accent);
  box-shadow: var(--shadow-card), var(--shadow-accent);
}

:is(
 
  .project-card,
  .industry-solution,
  .solve-item,
  .belief,
  .thinking-item,
  .process-card,
  .step-card,
  .program-card,
  .benefit-card,
  .ecommerce-capability-card,
  .ecommerce-process-card,
  .cloud-service,
  .ux-service,
  .wd-service-card,
  .wd-benefit-card,
  .cs-solution-item,
  .mobile-feature-card,
  .project-media,
  .featured-image,
  .location-info-box,
  .map-card
) {
  overflow: hidden;
}

:is(
  
  .project-card,
  .industry-solution,
  .solve-item,
  .belief,
  .thinking-item,
  .process-card,
  .step-card,
  .program-card,
  .benefit-card,
  .ecommerce-capability-card,
  .ecommerce-process-card,
  .cloud-service,
  .ux-service,
  .wd-service-card,
  .wd-benefit-card,
  .cs-solution-item,
  .mobile-feature-card,
  .project-card,
  .featured-project
) img {
  transition: transform 0.7s var(--ease-spring), filter 0.7s var(--ease-spring);
}

:is(

  .project-card,
  .industry-solution,
  .solve-item,
  .belief,
  .thinking-item,
  .process-card,
  .step-card,
  .program-card,
  .benefit-card,
  .ecommerce-capability-card,
  .ecommerce-process-card,
  .cloud-service,
  .ux-service,
  .wd-service-card,
  .wd-benefit-card,
  .cs-solution-item,
  .mobile-feature-card,
  .project-card,
  .featured-project
):hover img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

:is(
  .btn,
  .primary-btn,
  .secondary-btn,
  .contact-primary-btn,
  .contact-secondary-btn,
  .contact-submit,
  .career-submit,
  .cloud-btn,
  .cs-btn,
  .mobile-btn,
  .ux-btn,
  .wd-btn,
  .ecommerce-primary-btn,
  .ecommerce-secondary-btn,
  .solutions-primary-button,
  .solutions-secondary-button,
  .terms-contact-button,
  .terms-final-button,
  .cin-download,
  .footer-cta-button
) {
  min-height: 52px;
  border-radius: 10px 0px 10px 0px;
  transition:
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

:is(
  .btn,
  .primary-btn,
  .contact-primary-btn,
  .cloud-btn,
  .cs-btn-yellow,
  .mobile-btn-yellow,
  .wd-btn-primary,
  .ecommerce-primary-btn,
  .solutions-primary-button,
  .contact-submit,
  .career-submit,
  .footer-cta-button
):hover {
  box-shadow: 0 14px 34px rgba(255, 197, 10, 0.18);
}

.btn::after {
  content: "↗";
}

:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) input,
:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) textarea,
:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) select {
  min-width: 0;
  max-width: 100%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 9px 2px 9px 2px;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) input:focus,
:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) textarea:focus,
:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) select:focus {
  border-color: var(--yellow);
  outline: 0;
  background: rgba(255, 197, 10, 0.055);
  box-shadow: 0 0 0 3px rgba(255, 197, 10, 0.1);
}

:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) input::placeholder,
:is(
  .contact-form,
  .career-form,
  .form-field,
  .form-group
) textarea::placeholder {
  color: rgba(217, 217, 210, 0.52);
}

/* Shared legal/document readability */
:is(
  .privacy-page,
  .terms-page,
  .refund-page,
  .cin-page,
  .proforma-page
) :is(p, li) {
  max-width: 76ch;
  color: var(--text);
  font-size: clamp(0.92rem, 0.2vw + 0.86rem, 1rem);
  line-height: 1.9;
}

:is(
  .privacy-page,
  .terms-page,
  .refund-page,
  .cin-page,
  .proforma-page
) :is(h1, h2, h3, h4) {
  color: var(--white);
  text-wrap: balance;
}

/* Reveal fallbacks: content remains available before JavaScript initializes,
   and the animation is opt-in once the shared script has marked the document. */
.reveal,
.js-reveal {
  opacity: 1;
  transform: none;
}

html.js-enabled .reveal:not(.in),
html.js-enabled .js-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

/* Shared scroll motion. JavaScript only adds the class; content stays visible
   when scripts fail or motion is disabled. */
html.premium-motion .premium-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease-spring),
    transform 0.7s var(--ease-spring);
  transition-delay: var(--premium-delay, 0ms);
}

html.premium-motion .premium-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .mobile-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease), visibility var(--duration-normal) var(--ease);
  }

  .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  :is(
    .container,
    .wd-container,
    .cloud-container,
    .ux-container,
    .cs-container,
    .ecommerce-container,
    .mobile-container
  ) {
    padding-inline: clamp(20px, 5vw, 36px);
  }

  :is(.contact-hero, .about-hero, .solutions-hero, .page-hero, .refund-hero) {
    min-height: auto;
  }

  :is(
   
    .project-card,
    .industry-solution,
    .solve-item,
    .belief,
    .thinking-item,
    .process-card,
    .step-card,
    .program-card,
    .benefit-card,
    .ecommerce-capability-card,
    .ecommerce-process-card,
    .cloud-service,
    .ux-service,
    .wd-service-card,
    .wd-benefit-card,
    .cs-solution-item,
    .mobile-feature-card
  ) {
    border-radius: 13px 3px 13px 3px;
  }
}

@media (max-width: 560px) {
  html {
    scroll-padding-top: 78px;
  }

  main {
    background:
      radial-gradient(circle at 10% 8%, rgba(255, 197, 10, 0.06), transparent 15rem),
      #000000;
  }

  :is(
    .btn,
    .primary-btn,
    .secondary-btn,
    .contact-primary-btn,
    .contact-secondary-btn,
    .contact-submit,
    .career-submit,
    .cloud-btn,
    .cs-btn,
    .mobile-btn,
    .ux-btn,
    .wd-btn,
    .ecommerce-primary-btn,
    .ecommerce-secondary-btn,
    .solutions-primary-button,
    .solutions-secondary-button,
    .terms-contact-button,
    .terms-final-button,
    .cin-download,
    .footer-cta-button
  ) {
    max-width: 100%;
  }

  :is(.contact-form, .career-form, .form-row) {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mobile-menu {
    transition: none;
    transform: none;
  }

  html.premium-motion .premium-reveal,
  html.premium-motion .premium-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js-enabled .site-header {
    animation: none;
  }
}

/* Keep the dynamically loaded shared footer independent from page-level
   document typography on legal and certificate pages. */
.footer .footer-tagline {
  margin: 26px 0 9px;
  color: var(--white);
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
}

.footer .footer-description {
  max-width: 430px;
  margin: 0;
  color: #70706b;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: normal;
}

.footer .footer-office p {
  margin: 0;
  color: #858580;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: normal;
}