/* ====================== [ Page header hero (about.html, contact.html, ...) ] ======================
   A team photo used as a page-header background. It sits in its own
   absolutely-positioned .page-hero-bg layer (desaturated via CSS filter, not
   a pre-processed asset, so the source file stays untouched and reusable in
   color elsewhere) so the grayscale filter -- which would otherwise apply to
   the whole subtree, including the text -- only ever touches that
   background layer. data-overlay-dark stays on the outer wrapper so its
   dark scrim + forced white text (see style.css [data-overlay-dark]) still
   apply to the real .container content. */
.page-hero {
  min-height: 480px;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center 25%;
  filter: grayscale(100%);
}

/* ====================== [ Homepage hero (index.html) ] ======================
   Replaces the old Swiper carousel: the header itself never slides or moves.
   Only the text and background SVG cross-fade in place via .hero-slide.active,
   driven by assets/js/hero-rotator.js. */
.arch-slider .parallax-slider.hero-rotator {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.arch-slider .parallax-slider .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 1;
}

.arch-slider .parallax-slider .hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Caption text animates in on top of the background crossfade; each line is
   held invisible/offset until its slide is active, then staggers in.
   Only the first (default) slide's title is a real <h1> -- the other two
   are <h2> so the page has exactly one h1, but they share this same
   selector/sizing so the swap is invisible. */
.arch-slider .parallax-slider .hero-slide .caption > h5,
.arch-slider .parallax-slider .hero-slide .caption > h1,
.arch-slider .parallax-slider .hero-slide .caption > h2,
.arch-slider .parallax-slider .hero-slide .caption > h4,
.arch-slider .parallax-slider .hero-slide .caption > div {
  opacity: 0;
  transform: translateY(28px);
}

.arch-slider .parallax-slider .hero-slide.active .caption > h5 {
  animation: heroCaptionIn .7s ease forwards;
  animation-delay: .2s;
}

.arch-slider .parallax-slider .hero-slide.active .caption > h1,
.arch-slider .parallax-slider .hero-slide.active .caption > h2 {
  animation: heroCaptionIn .7s ease forwards;
  animation-delay: .35s;
}

.arch-slider .parallax-slider .hero-slide.active .caption > h4 {
  animation: heroCaptionIn .7s ease forwards;
  animation-delay: .5s;
}

.arch-slider .parallax-slider .hero-slide.active .caption > div {
  animation: heroCaptionIn .7s ease forwards;
  animation-delay: .65s;
}

/* style.css only sizes `.caption h1` (75px/2px letter-spacing) by tag
   selector; mirror it for h2 so the two demoted slide titles render
   identically -- including style.css's own mobile override, which shrinks
   h1 to 50px at <=768px (style.css line ~8592) but obviously has no idea
   h2 needs the same treatment here. */
.arch-slider .parallax-slider .caption h2 {
  font-size: 75px;
  letter-spacing: 2px;
}

@media screen and (max-width: 768px) {
  .arch-slider .parallax-slider .caption h2 {
    font-size: 50px;
  }
}

@keyframes heroCaptionIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================== [ Hero CTA glow (index.html "Get Started" buttons) ] ======================
   A traveling bright segment of the border itself (not a separate colored
   comet): a faint static ring is always visible, and a brighter white
   dash sweeps around on top of it -- a long, dim "tail" stretch fading
   into a small, brighter "head" -- reading as if that stretch of the
   border is lighting up as it travels, both sharing one animation so the
   head always leads the tail. pathLength="100" normalizes the dash units
   to a 0-100 scale, so the same dasharray values work regardless of the
   button's actual rendered size, and since it's a real vector stroke it
   hugs the pill's tight rounded ends exactly, no matter how long the
   trail is drawn. */
.hero-cta-glow {
  position: relative;
  z-index: 0;
  border-color: transparent !important;
}

.hero-cta-glow .text,
.hero-cta-glow > i {
  position: relative;
  z-index: 2;
}

.hero-cta-glow .cta-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.hero-cta-glow .cta-trace-shape {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  /* rx is left unset on purpose: per the SVG spec, when only ry is given,
     rx inherits it, so both end up exactly half the rect's real height —
     a true stadium cap matching the button's own border-radius (which the
     browser also caps to half its height), regardless of button size. A
     hardcoded rx here would drift from that real geometry and visibly cut
     the corner instead of tracing it. */
  ry: 50%;
  fill: none;
}

.hero-cta-glow .cta-trace-base {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5px;
}

.hero-cta-glow .cta-trace-tail,
.hero-cta-glow .cta-trace-head {
  stroke-linecap: round;
  /* Held at its resting position until the caption/button entrance
     (.caption > div, delay .65s + duration .7s = finishes at 1.35s above)
     has fully played out, so attention lands on the text first and only
     then shifts to the button. */
  animation: heroCtaDash 3s linear infinite;
  animation-delay: 1.6s;
}

.hero-cta-glow .cta-trace-tail {
  stroke: #fff;
  stroke-width: 1.5px;
  opacity: 0.45;
  stroke-dasharray: 40 60;
}

.hero-cta-glow .cta-trace-head {
  stroke: #fff;
  stroke-width: 1.5px;
  /* Starts with an invisible dash + a 40-long gap (matching the tail's own
     dash length above) so the head's own visible dash picks up exactly
     where the tail's ends, rather than both starting from the same point
     with the longer tail overshooting past the head. */
  stroke-dasharray: 0 40 3 57;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

@keyframes heroCtaDash {
  to {
    stroke-dashoffset: -100;
  }
}

/* ====================== [ Opacity utilities ] ====================== */
.op-60 {
  opacity: .6;
}

.op-70 {
  opacity: .7;
}

/* ====================== [ Full-screen menu: nav links ] ======================
   Aligns the nav-links list top with where the "MCSTUDIO" watermark word starts. */
.hamenu .menu-links .main-menu.nav-links-start {
  margin-top: 23vh;
}

/* ====================== [ Team grid (about.html) ] ====================== */
.team-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
  transition: border .6s ease-out, background .6s ease-out, color .6s ease-out;
}

.team-photo:hover {
  border: 4px solid #E26130;
  background: rgba(226, 97, 48, 0.12);
  color: #E26130;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter .6s ease-out;
}

.team-photo:hover img {
  filter: grayscale(0%);
}

/* ====================== [ Client/project cards (index.html "Clients & Projects") ] ======================
   Pulled out of index.html: this section previously carried its layout as inline
   `style="..."` attributes plus inline onmouseover/onmouseout handlers on every
   card, duplicated six times over. The hover effect they set is redundant with
   the `.project-card a:hover` rule in style.css (which already wins via
   !important), so it's dropped here rather than reintroduced. */
.project-card {
  border-radius: 8px;
  overflow: hidden;
}

.project-card-body {
  padding: 30px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-card-body h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
}

.project-card-body p {
  margin: 0;
  opacity: .95;
  font-size: 14px;
  line-height: 1.6;
}

.project-card-cta {
  margin-top: 20px;
}

.project-card-meta {
  padding: 25px;
}

.project-tags {
  margin-bottom: 20px;
}

.project-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: #333;
  margin-right: 8px;
  margin-bottom: 8px;
}

.project-stack {
  margin-bottom: 15px;
}

.project-stack:last-child {
  margin-bottom: 0;
}

.project-stack-label {
  margin: 0 0 8px;
  font-size: 12px;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
}

.project-stack-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-stack-icons img {
  height: 20px;
  width: auto;
}

/* ====================== [ Industry cards (industries.html) ] ====================== */
.industry-card {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 30px;
}

.industry-card img {
  max-width: 110px;
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.industries-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
}

.industries-filter .filter-item {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

.industries-filter .filter-item:hover {
  color: #ffffff;
}

.industries-filter .filter-item.active {
  color: #E26130;
  border-bottom-color: #E26130;
}

.industry-item.is-hidden {
  display: none;
}

/* ====================== [ Partners carousel (index.html) ] ======================
   Logos come in from different partners at different native aspect ratios; without
   this, each one just fills its 100/120px-wide box at whatever height that implies,
   so they end up sitting at different sizes and baselines. This pins every logo to
   the same box and lets it scale down to fit, keeping the row visually level. */
.clients-carso .swiper-slide .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}

.clients-carso .swiper-slide .item .img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.clients-carso .swiper-slide .item .img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ====================== [ Contact page (contact.html) ] ====================== */
.contact-info-item i {
  font-size: 22px;
  width: 34px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  color: #fff;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #E26130;
}

.contact-form textarea {
  resize: vertical;
}

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

#contact-form-status[data-state="success"] {
  color: #3dbb6c;
}

#contact-form-status[data-state="error"] {
  color: #e2513a;
}

#contact-form-status[data-state="pending"] {
  opacity: .6;
}

.contact-form button[type="submit"] {
  position: relative;
}

.contact-form button[type="submit"] .btn-spinner {
  display: none;
}

.contact-form button[type="submit"].is-loading {
  pointer-events: none;
}

.contact-form button[type="submit"].is-loading .text,
.contact-form button[type="submit"].is-loading > i {
  visibility: hidden;
}

.contact-form button[type="submit"].is-loading .btn-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ====================== [ Thoughts section header contrast ] ======================
   White on the #E26130 brand orange is only ~3.5:1, under the 4.5:1 WCAG AA
   minimum for small text (flagged by Lighthouse). The rest of this section
   already uses dark text (.text-dark), so match it for the "05 / Thoughts" label. */
.testim-crv.main-colorbg .sec-leter-head .leter-1 span,
.testim-crv.main-colorbg .sec-leter-head .sub-title {
  color: #1d1d1d;
}

/* "Get Started" buttons link to /contact#contact; keep the fixed top nav
   from covering the section heading when the page jumps to it. */
#contact {
  scroll-margin-top: 100px;
}

/* ====================== [ About page: studio intro ] ====================== */
.studio-intro p {
  text-align: justify;
  /* Hyphenation keeps justified lines from opening wide gaps between words,
     which is most noticeable on narrow phone screens. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ====================== [ Contact page: "Ask AI about MCSTUDIO" ] ====================== */
.ask-ai-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.ask-ai-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ask-ai-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  transition: all .4s;
}

.ask-ai-links a:hover,
.ask-ai-links a:focus-visible {
  background: #E26130;
  border-color: #E26130;
}

.ask-ai-card {
  height: 100%;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.ask-ai-card .fz-14 {
  color: #ccc;
}

.book-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}



@media screen and (max-width: 767px) {
  .ask-ai-card {
    padding: 28px 22px;
  }
}


/* ====================== [ Pricing (index.html #services) ] ======================
   Layout inspired by withsupafast.com; MCSTUDIO colours. */
.pp-row {
  align-items: stretch;
}

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 28px;
  background: #1d1d1d;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
}

.pp-card-hi {
  background: #111;
  border-color: #E26130;
  box-shadow: 0 24px 60px rgba(226, 97, 48, 0.22);
}

/* Small "card" label, like a product/credit card */
.pp-chip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 112px;
  padding: 14px 16px;
  margin-bottom: 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c2c2c 0%, #0f0f0f 60%, #262626 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pp-chip img {
  align-self: flex-end;
  width: 22px;
}

.pp-chip-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pp-card-hi .pp-chip {
  background: linear-gradient(135deg, #E26130 0%, #B94215 100%);
  border-color: #f8865c;
}

.pp-price {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
}

.pp-per {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
}

.pp-who {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.pp-card-hi .pp-who {
  color: rgba(255, 255, 255, 0.75);
}

.pp-features {
  flex: 1;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.pp-features li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

/* Round check mark: orange disc (dark on the highlighted card) + white tick */
.pp-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E26130 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}


/* Site button (.butn.butn-bord) sits at the bottom of each card */
.pp-card .butn {
  align-self: flex-start;
}

/* Starburst sticker on the highlighted plan */
.pp-sticker {
  position: absolute;
  top: -26px;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  background: #B94215;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(12deg);
  clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
  z-index: 2;
}

@media screen and (max-width: 991px) {
  .pp-sticker {
    right: 10px;
  }
}


/* One-time / retainer switch (pricing page) */
.pp-toggle {
  display: flex;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 50px;
  background: #111;
}

.pp-toggle-btn {
  flex: 1;
  padding: 12px 16px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease;
}

.pp-toggle-btn.is-active {
  background: #B94215;
}

.pp-toggle-btn:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.08);
}

.pp-toggle-btn:focus-visible {
  outline: 2px solid #f8865c;
  outline-offset: 2px;
}

@media screen and (max-width: 575px) {
  .pp-toggle-btn {
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: .5px;
  }
}

/* Ask AI card: assistant icons and the "Contact us" button share one row */
.ask-ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* Slightly wider medium buttons (style.css: 14px 35px) -- applies to every
   .butn-md: hero "Get Started", Send Message, pricing buttons. */
.butn.butn-md {
  padding-left: 45px;
  padding-right: 45px;
}

/* About Us counters (index.html): the three stats are ~4px too wide for a
   360px phone once the numbers finish counting, so let them wrap. */
.intro-imgs .stauts {
  flex-wrap: wrap;
}

/* "Not Sure Yet?" on the homepage: sits between the black Partners section
   (#000) and the #1d1d1d footer, so fade between the two, with a faint
   brand-orange glow echoing the orange Thoughts section above. */
.ask-ai-home {
  background:
    radial-gradient(ellipse 55% 55% at 85% 45%, rgba(226, 97, 48, 0.14), transparent 70%),
    linear-gradient(180deg, #000 0%, #141414 55%, #1d1d1d 100%);
}

.ask-ai-home .ask-ai-card {
  background: rgba(255, 255, 255, 0.02);
}