/* ==========================================================================
   YandF DEV - brand palette + accessibility layer
   Loaded after main.css so it wins on equal specificity.
   Nothing in this file is decorative-only: every rule either defines the
   brand palette in one place or fixes an accessibility defect.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Palette */
:root {
  /* Brand ramp - warm gold through magenta to deep violet. */
  --gt-brand-1: #ffb51b; /*   0%  gold          */
  --gt-brand-2: #fc930e; /*  20%  orange        */
  --gt-brand-3: #fc5a17; /*  40%  vivid orange  */
  --gt-brand-4: #fb442c; /*  60%  coral red     */
  --gt-brand-5: #ee1c78; /*  75%  vivid pink    */
  --gt-brand-6: #be146c; /*  90%  magenta       */
  --gt-brand-7: #8c085e; /* 100%  deep violet   */

  /* Primary accent used by the ~200 var(--gt-theme) references in main.css. */
  --gt-theme: var(--gt-brand-3);
  /* Dark end of the ramp: the second stop of every button gradient. */
  --gt-theme-deep: var(--gt-brand-7);
  /* Readable accent for small text on the dark background (#0b0e13):
     brand-3 lands at ~4.9:1, the gold at ~10:1 for fine print. */
  --gt-theme-text: var(--gt-brand-1);

  /* The signature diagonal gradient: top-left gold to bottom-right violet. */
  --gt-gradient: linear-gradient(
    135deg,
    var(--gt-brand-1) 0%,
    var(--gt-brand-2) 20%,
    var(--gt-brand-3) 40%,
    var(--gt-brand-4) 60%,
    var(--gt-brand-5) 75%,
    var(--gt-brand-6) 90%,
    var(--gt-brand-7) 100%
  );

  /* Horizontal, mirrored variant. Buttons animate background-position on
     hover, so the ramp has to return to its starting colour at 100%. */
  --gt-gradient-btn: linear-gradient(
    to right,
    var(--gt-brand-2) 0%,
    var(--gt-brand-4) 25%,
    var(--gt-brand-6) 50%,
    var(--gt-brand-4) 75%,
    var(--gt-brand-2) 100%
  );

  --gt-focus: var(--gt-brand-1);
}

/* Primary buttons ride the mirrored ramp. */
.gt-theme-btn,
.gt-theme-btn:hover.gt-style-border {
  background-image: var(--gt-gradient-btn);
}

/* Surfaces that should carry the full signature gradient. */
.gt-gradient-surface {
  background-image: var(--gt-gradient);
}

/* Gradient text for short headline fragments. */
.gt-gradient-text {
  background-image: var(--gt-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------ 1b. Hero headline */

/*
 * main.css gives the hero headline
 *     transform: translateX(100%); animation: slideInLeft 1.5s forwards;
 * so its resting position is one full width to the RIGHT, and only the running
 * animation brings it back. WOW.js also has the element (it carries .wow) and
 * resets animation-name when the animation ends — at which point the headline
 * snaps 100% of its width off-centre and stays there, clipped by the hero.
 * Reproduced at 375px: the h1 sat at x=238 in a 375px viewport.
 *
 * Anchoring the resting state at 0 fixes it in every case: during the animation
 * the keyframes supply their own transform, and afterwards the headline stays
 * where it belongs. It also makes the reduced-motion rule below correct, which
 * switches the animation off entirely.
 */
.hero-1 .hero-content h1 {
  transform: translateX(0);
}

/* ------------------------------------------------------- 2. Keyboard access */

/* Visible focus everywhere. The template stripped outlines from inputs and
   never replaced them, which makes the site unusable without a mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gt-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt input:focus,
.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt textarea:focus,
.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt select:focus {
  border-color: var(--gt-brand-1);
}

/* Skip link - first tab stop on every page. */
.gt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--gt-brand-7);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.gt-skip-link:focus {
  left: 0;
}

/* Screen-reader-only helper. */
.gt-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- 3. Form controls */

/* Real <label> elements inherit what the template gave to <span>. */
.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt label {
  color: var(--gt-white);
  display: inline-block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
}

.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt select {
  width: 100%;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 12px 20px;
  font-weight: 400;
  color: var(--gt-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gt-text) 50%),
    linear-gradient(135deg, var(--gt-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.gt-contact-us-wrapper .gt-comment-form-wrap .form-clt select option {
  background: #0b0e13;
  color: #fff;
}

/* Consent checkbox row. */
.gt-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gt-text);
  font-size: 14px;
  line-height: 1.6;
}
.gt-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 3px;
  accent-color: var(--gt-brand-3);
}
.gt-consent a {
  color: var(--gt-theme-text);
  text-decoration: underline;
}

/* Honeypot: hidden from people, reachable by bots. Not display:none, which
   some bots skip - moved off-canvas and out of the tab order instead. */
.gt-hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline field error text. */
.gt-field-error {
  display: block;
  margin-top: 6px;
  color: var(--gt-brand-1);
  font-size: 13px;
  font-weight: 600;
}

/* Form status messages (also used as the aria-live region). */
.gt-form-alert {
  padding: 15px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-weight: 600;
}
.gt-form-alert--ok {
  background: #0f5132;
  color: #fff;
  border: 1px solid #198754;
}
.gt-form-alert--error {
  background: #58151c;
  color: #fff;
  border: 1px solid #dc3545;
}

/* ----------------------------------------------------- 4. Newsletter + misc */
.gt-newsletter-wrapper .gt-consent {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.gt-newsletter-wrapper .gt-consent a {
  color: #fff;
}

.gt-map-section iframe {
  width: 100%;
  min-height: 400px;
  border: 0;
}

/* Opening hours in the offcanvas panel are text, not links. */
.offcanvas__contact-text .offcanvas__contact-plain {
  color: var(--gt-text);
}

/* Technology strip on a team profile. Spacing used to come from 59 empty
   <img width="10"> elements; it is a flex gap now. */
.gt-tech-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

/* A button that has to read as a link inside body copy. */
.gt-linkbutton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gt-theme-text);
  text-decoration: underline;
  cursor: pointer;
}

/* Response-time line under the contact form. */
.gt-response-note {
  margin-top: 14px;
  color: var(--gt-theme-text);
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------- 5. Legal pages */
.gt-legal-content h2 {
  margin: 40px 0 16px;
  font-size: 28px;
}
.gt-legal-content h3 {
  margin: 28px 0 12px;
  font-size: 20px;
}
.gt-legal-content p,
.gt-legal-content li {
  color: var(--gt-text);
  line-height: 1.8;
}
.gt-legal-content ul {
  padding-left: 22px;
  margin-bottom: 20px;
  list-style: disc;
}
.gt-legal-content a {
  color: var(--gt-theme-text);
  text-decoration: underline;
}
.gt-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  color: var(--gt-text);
}
.gt-legal-content table th,
.gt-legal-content table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.gt-legal-content table th {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.gt-legal-table-wrap {
  overflow-x: auto;
}
.gt-legal-updated {
  color: var(--gt-theme-text);
  font-weight: 600;
}

/* ---------------------------------------------------- 6. Proof components */

/* Selected-work cards (about.php), which replaced the invented testimonials. */
.gt-selected-work {
  display: grid;
  gap: 18px;
  margin-top: 10px;
}
.gt-work-item {
  border-left: 3px solid var(--gt-brand-3);
  padding: 14px 0 14px 18px;
  background: rgba(255, 255, 255, 0.03);
}
.gt-work-item h5 {
  margin: 0 0 6px;
  font-size: 18px;
}
.gt-work-item h5 a {
  color: #fff;
}
.gt-work-item h5 a:hover {
  color: var(--gt-theme-text);
}
.gt-work-item p {
  margin: 0 0 8px;
  color: var(--gt-text);
  font-size: 15px;
  line-height: 1.7;
}
.gt-work-link {
  color: var(--gt-theme-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
}
.gt-work-note {
  color: var(--gt-text);
  font-size: 14px;
  margin: 4px 0 0;
}
.gt-work-note a {
  color: var(--gt-theme-text);
  text-decoration: underline;
}

/* Annotated screenshots on a case study. Two up on desktop, one on mobile,
   each with the caption that explains what it proves. */
.gt-case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0 36px;
}
@media (max-width: 767px) {
  .gt-case-gallery {
    grid-template-columns: 1fr;
  }
}
.gt-case-shot {
  margin: 0;
}
.gt-case-shot a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.gt-case-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
.gt-case-shot a:hover img {
  transform: scale(1.03);
}
.gt-case-shot figcaption {
  margin-top: 10px;
  color: var(--gt-text);
  font-size: 14px;
  line-height: 1.65;
}

/* "What it does not do" — stated up front rather than discovered later. */
.gt-limits-list li i {
  color: var(--gt-theme-text);
}

/* Project facts table on a case study. */
.gt-project-facts {
  width: 100%;
  border-collapse: collapse;
  color: var(--gt-text);
}
.gt-project-facts th,
.gt-project-facts td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}
.gt-project-facts th {
  color: #fff;
  width: 32%;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
.gt-project-facts a {
  color: var(--gt-theme-text);
  text-decoration: underline;
}

/* -------------------------------------------------------- 7. Cookie notice */
.gt-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #0b0e13;
  border-top: 2px solid var(--gt-brand-3);
  padding: 18px 20px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}
.gt-cookie-banner__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gt-cookie-banner__text {
  margin: 0;
  color: var(--gt-text);
  font-size: 14px;
  line-height: 1.7;
  max-width: 760px;
}
.gt-cookie-banner__text a {
  color: var(--gt-theme-text);
  text-decoration: underline;
}
.gt-cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.gt-cookie-btn {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  /* 44px minimum touch target */
  min-height: 44px;
}
.gt-cookie-btn--primary {
  border-color: transparent;
  background-image: var(--gt-gradient-btn);
  background-size: 200% auto;
  transition: background-position 0.4s;
}
.gt-cookie-btn--primary:hover {
  background-position: right center;
}
.gt-cookie-btn--ghost:hover {
  border-color: var(--gt-brand-1);
  color: var(--gt-brand-1);
}
@media (max-width: 575px) {
  .gt-cookie-banner__actions {
    width: 100%;
  }
  .gt-cookie-btn {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------- 8. Reduced motion */

/*
 * Honour the operating-system "reduce motion" setting. The site otherwise
 * runs a preloader, a custom cursor, GSAP smooth scrolling, WOW reveals and
 * clip-path wipes - a real barrier for anyone with vestibular sensitivity,
 * and needless work on a slow phone. assets/js/main.js reads the same media
 * query and skips initialising WOW, ScrollSmoother and the custom cursor.
 */
@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;
  }

  /* These start at opacity:0 and are revealed by an animation. With the
     animation neutralised they must be visible from the start. */
  .img-custom-anim-right,
  .img-custom-anim-left,
  .img-custom-anim-top,
  .img-custom-anim-bottom,
  .wow {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
  }

  .preloader,
  .mouseCursor {
    display: none !important;
  }

  /* ScrollSmoother is not created; drop its fixed-position scaffolding. */
  #smooth-wrapper,
  #smooth-content {
    position: static !important;
    transform: none !important;
  }
}

/* The preloader must never be able to trap the page. main.js clears it on
   window load; this class is the failsafe if an asset hangs. */
.preloader.loaded {
  display: none !important;
}