@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #001545;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'canada-type-gibson', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

/* ── Hero animations (ported from original style.css) ── */

/* Floating animation for the orange hero shape */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-14px); }
}

.hero-orange-float {
  animation: heroFloat 4s 1.3s ease-in-out infinite;
}

.slide-in-blurred-bottom {
  visibility: visible !important;
  -webkit-animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

@keyframes slide-in-blurred-bottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}

.scroll-down-infinite {
  -webkit-animation: sdinfinite 2s infinite;
          animation: sdinfinite 2s infinite;
}

@keyframes sdinfinite {
  0%   { top: calc(50% - 8px);  opacity: 0; }
  12%  { top: calc(50% - 8px);  opacity: 1; }
  24%  { top: calc(50% - 3px);  opacity: 1; }
  36%  { top: calc(50% - 3px);  opacity: 1; }
  48%  { top: calc(50% + 3px);  opacity: 1; }
  60%  { top: calc(50% + 8px);  opacity: 1; }
  72%  { top: calc(50% + 13px); opacity: 0; }
  100% { top: calc(50% + 13px); opacity: 0; }
}

/* Mobile: hide .mob-overlay on md+ (matches d-md-none) */
@media (min-width: 768px) {
  .mob-overlay { display: none; }
  /* Hint tile is mobile-only */
  .hero-tile-hint { display: none; }
}

/* ── Services section ── */

/* Title spans in orange, slightly larger (matches original span style) */
.services-title span {
  color: #d85218;
  font-size: 1.425em;
  font-weight: 600;
}

/* Excerpt spans in orange */
.services-excerpt span {
  color: #d85218;
  font-weight: 600;
}

/* Fade in when tab/slide changes */
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: stack to full width, reduce padding */
@media (max-width: 767px) {
  .services-wrapper {
    padding-left: 0 !important;
    align-items: flex-start !important;
  }
}

/* Tablet: reduce padding */
@media (min-width: 768px) and (max-width: 991px) {
  .services-wrapper {
    padding-left: 20% !important;
  }
}

/* ── FAQ section ── */

/* Show tags on medium screens and up */
@media (min-width: 640px) {
  .faq-tag { display: inline-block !important; }
}

/* Collapse to single column on mobile */
@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .faq-heading {
    position: static !important;
  }
}

/* ── Hero mobile ── */
@media (max-width: 767px) {
  /* Expand orange strip to fill the full hero so text never overflows it */
  .hero-orange-float {
    width: 140% !important;
    height: 100% !important;
    top: 0 !important;
    left: -20% !important;
    animation: none !important;  /* stop float bobbing on full-screen bg */
    filter: none !important;
  }
  /* Remove skew so the strip fills edge-to-edge, keep a slight slant */
  .hero-strip-orange {
    visibility: visible !important;
    animation: none !important;
    transform: skewX(-8deg) !important;
  }
  /* Side strips are redundant with full-orange bg */
  .hero-strip-black,
  .hero-strip-blue {
    display: none !important;
  }
  /* No dark tint needed — orange is the background */
  .mob-overlay {
    background: transparent;
  }
  /* Scale down headline on small phones */
  .hero-punchline {
    font-size: 3em !important;
  }
  /* White scroll-down on orange background */
  .hero-scroll-down {
    background-image: url('/img/scroll-down-white.svg') !important;
  }
  .hero-scroll-dot {
    background-color: #fff !important;
  }
}

/* ── Services mobile (additions to existing padding-left: 0 rule) ── */
@media (max-width: 767px) {
  /* Push card below fixed navbar */
  .services-wrapper {
    padding-top: 90px !important;
  }
  /* Card fills full width */
  .services-wrapper > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Tab bar scrolls horizontally instead of wrapping */
  .services-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-tabs::-webkit-scrollbar {
    display: none;
  }
  /* Tighter content padding */
  .services-content {
    padding: 16px 20px !important;
  }
  /* Reduce oversized title line-height */
  .services-title {
    font-size: 1.4em !important;
    line-height: 1.3 !important;
    padding-bottom: 6px !important;
  }
  .services-excerpt {
    font-size: 1em !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
  }
}

/* ── Stats section mobile ── */
@media (max-width: 767px) {
  .stats-row {
    padding: 0 12px !important;
  }
  .stats-number {
    font-size: 2.2rem !important;
    margin-bottom: 10px !important;
    letter-spacing: -1px !important;
  }
  .stats-label {
    font-size: 0.65em !important;
    letter-spacing: 1px !important;
  }
}

/* ── AI section slider ── */
@keyframes aiCardFwd {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes aiCardBwd {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}
.ai-card-fwd { animation: aiCardFwd 0.3s ease both; }
.ai-card-bwd { animation: aiCardBwd 0.3s ease both; }

@media (max-width: 767px) {
  /* Compact heading on mobile */
  #ai h2 { font-size: 1.35rem !important; margin-bottom: 0 !important; }
  #ai .ai-desc { display: none; } /* hide body paragraph on small screens */
  #ai .ai-layout { padding: 50px 16px 24px !important; }
  #ai .ai-layout > div:first-child { margin-bottom: 20px !important; }
  /* Smaller nav arrows */
  .ai-nav-btn { width: 34px !important; height: 34px !important; }
}

/* ── Inner scrollable sections ── */
.section-scroll-inner {
  scrollbar-width: thin;
  scrollbar-color: rgba(216,82,24,0.4) transparent;
}
.section-scroll-inner::-webkit-scrollbar {
  width: 4px;
}
.section-scroll-inner::-webkit-scrollbar-track {
  background: transparent;
}
.section-scroll-inner::-webkit-scrollbar-thumb {
  background: rgba(216,82,24,0.4);
  border-radius: 2px;
}
.section-scroll-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(216,82,24,0.7);
}

/* ── Key brands marquee (all breakpoints) ── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.key-brands-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 22s linear infinite;
}

.key-brands-marquee:hover .key-brands-track,
.key-brands-marquee:focus-within .key-brands-track {
  animation-play-state: paused;
}

/* ── Navbar close X ── */
.nav-close-x {
  transition: transform 0.35s ease;
}
.nav-close-row:hover .nav-close-x {
  transform: rotate(90deg);
}