/* ==========================================================================
   Devomarks — overrides on top of the template stylesheet.
   Kept in a separate file so style.css stays untouched and every change made
   for the Devomarks copy is visible in one place.
   ========================================================================== */

/* --------------------------------------------------------------- hero ----
   The template headline was two short words ("CREATIVE" / "AGENCY") at 100px.
   The Devomarks headline is far longer, so at that size each line wrapped and
   the overlay collided with the supporting copy and the CTAs underneath.
   Cap the display size and let the title use the full hero width instead. */
.hero-title-block .hero-left-block {
  max-width: none;
  width: 100%;
}

.hero-title-top,
.hero-title-bottom {
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.04;
}

/* Supporting copy is narrow by default; give it room now that it sits above
   two buttons rather than nothing. */
.hero-left-block.front .hero-text {
  max-width: 34ch;
}

/* ------------------------------------------------------------ hero CTAs --
   Buttons are cloned from the header component so they keep its hover
   animation; they only need to be laid out in a row. */
.hero-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.hero-cta-box .white-button {
  width: auto;
  flex: 0 0 auto;
}

/* Secondary CTA reads as the quieter of the two.
   The white pill lives on the inner .button-box-text, not on the anchor, so the
   outline treatment has to target that child - styling the anchor leaves the
   pill white and the label invisible against it. */
.hero-cta-box .hero-cta-secondary .button-box-text {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-cta-box .hero-cta-secondary .button-text,
.hero-cta-box .hero-cta-secondary .button-text * {
  color: var(--_colors---basic-color--white, #fff);
}

/* ------------------------------------------------------------- services --
   Four services instead of five: keep the row balanced. */
.explore-title-icon-box,
.single-service-link {
  min-width: 0;
}

/* The active heading is moved by js/devomarks.js; give the link the same
   treatment so the tab list and the wordmark list stay in step. */
.single-service-link.active .service-title {
  color: var(--primary-color-02, #f73737);
}

/* -------------------------------------------------------------- process --
   .process is a 100vh sticky panel inside a 6000px scroll container. With the
   showreel section removed there is nothing left to fill that run, which read
   as a huge empty gap before the team section. Shorten the run. */
.process-section {
  height: 3200px;
}

@media screen and (max-width: 991px) {
  .process-section {
    height: 2400px;
  }
}

/* The sticky panel is 100vh but its content is a fixed ~798px (40 padding +
   158 title block + 100 gap + 500 steps). Below ~800px tall the content
   overflows, and because .process-wrapper packs to flex-end the overflow went
   UPWARD - the heading disappeared above the viewport.

   Two changes: pack from the top so any overflow falls off the bottom (losing
   the bottom of an image beats losing the heading), and scale the padding and
   gap with viewport height so it usually fits outright. */
.process-wrapper {
  justify-content: flex-start;
}

.process-content-box {
  padding-top: clamp(34px, 7.5vh, 84px);
  row-gap: clamp(18px, 6vh, 100px);
  grid-row-gap: clamp(18px, 6vh, 100px);
}

@media screen and (max-height: 820px) {
  .process-title {
    font-size: clamp(26px, 4.6vh, 48px);
  }
}

/* ---------------------------------------------------------- contact form --
   The submit label is wider than the button's fixed 180px box, and the box
   clips instead of growing. */
.contact-button {
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  padding-left: var(--_spacing---spacing--space-regular-xxl, 30px);
  padding-right: var(--_spacing---spacing--space-regular-xxl, 30px);
}

/* "What Do You Need Help With?" sits in a two-up row, so the select was half
   width while its label ran the full width. Give it the whole row. */
.single-input-box.is-full {
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
}

.single-input-box.is-full .contact-single-input,
.single-input-box.is-full select {
  width: 100%;
  max-width: none;
}

/* -------------------------------------------------------------- portfolio --
   One row of six cards instead of two rows of ten, so the horizontal run is
   about half as long. */
.portfolio-top-sticky {
  height: 3800px;
}

@media screen and (max-width: 991px) {
  .portfolio-top-sticky {
    height: 2800px;
  }
}

/* ------------------------------------------------------------- contact ---
   The new dropdown must match the text inputs exactly. */
select.contact-single-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

select.contact-single-input option {
  background-color: var(--_colors---theeme-color--bg-color-02, #101010);
  color: var(--_colors---theeme-color--text-color, #c1c1c2);
}

/* -------------------------------------------------------------- footer ---
   Four link columns instead of two. */
.footer-right-box {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
}

@media screen and (max-width: 991px) {
  .footer-right-box {
    gap: 32px 40px;
  }
}

/* --------------------------------------------------------- reduced motion --
   The page leans heavily on marquees, split-text reveals and hijacked
   scrolling; honour a viewer's system preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}