/* =========================================================
   Taygital custom layer
   Loaded after taygital-agency.webflow.css.
   Adds: scroll-reveal motion, home hero peek, home trust
   snapshot, solution cards, services breakdown, trust checks
   and honest statement blocks. Brand: orange/black/cream,
   pp-pangram-sans, large type, strong spacing.
   ========================================================= */

:root {
  --ty-orange: #fe7505;
  --ty-orange-deep: #e24012;
  --ty-black: #040915;
  --ty-cream: #f1f0ef;
  --ty-cream-2: #f7f5f2;
  --ty-blue: #2652b9;
  --ty-line: rgba(4, 9, 21, 0.14);
  --ty-line-light: rgba(255, 255, 255, 0.18);
}

/* ---------- Scroll reveal (dependency-free) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal-delay="3"] { transition-delay: 0.21s; }
[data-reveal-delay="4"] { transition-delay: 0.28s; }
[data-reveal-delay="5"] { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Shared editorial helpers ---------- */
.ty-kicker {
  font-family: "pp-pangram-sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 14px);
  color: var(--ty-orange-deep);
}
.ty-kicker.is--light { color: var(--ty-orange); }

.ty-section-head {
  max-width: 24ch;
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 4.6vw, 76px);
  margin: 0.35em 0 0;
  text-wrap: balance;
}
.ty-section-lead {
  max-width: 56ch;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.6;
  margin: 1.1em 0 0;
  opacity: 0.85;
  text-wrap: pretty;
}

/* ---------- Home: let the next section peek ---------- */
.hero.is--home {
  height: auto;
  min-height: 90vh;
}

/* Subtle scroll cue at base of the home hero */
.ty-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 2.4em;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  z-index: 3;
  pointer-events: none;
}
.ty-scrollcue span {
  font-family: "pp-pangram-sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ty-black);
  opacity: 0.55;
}
.ty-scrollcue i {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--ty-black), rgba(4, 9, 21, 0));
  position: relative;
  overflow: hidden;
}
.ty-scrollcue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ty-orange);
  transform: translateY(-100%);
  animation: ty-scroll 2.4s ease-in-out infinite;
}
@keyframes ty-scroll {
  0% { transform: translateY(-100%); }
  45% { transform: translateY(0); }
  75% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Home featured: head + foot around the card ---------- */
.ty-featured-head {
  max-width: 52rem;
  margin: 0 auto clamp(26px, 3vw, 54px);
  text-align: center;
}
.ty-featured-head .ty-section-head { max-width: 22ch; margin: 0.3em auto 0; }
.ty-featured-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em 1.1em;
  margin-top: clamp(20px, 2vw, 34px);
  text-align: center;
}
.ty-featured-foot h3 {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -0.02em;
  margin: 0;
}
.ty-featured-foot p {
  margin: 0;
  color: rgba(4, 9, 21, 0.55);
}

/* ---------- Home: trust snapshot inside featured card ---------- */
.snapshot {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(38, 82, 185, 0.5) 0%, rgba(38, 82, 185, 0) 55%),
    radial-gradient(120% 120% at 88% 88%, rgba(254, 117, 5, 0.55) 0%, rgba(226, 64, 18, 0) 60%),
    #0a1020;
}
.snapshot__orb {
  position: absolute;
  width: 42%;
  max-width: 360px;
  right: -4%;
  bottom: -8%;
  opacity: 0.9;
  filter: saturate(1.05);
  pointer-events: none;
}
.snapshot__orb._2 {
  width: 16%;
  left: 6%;
  top: 10%;
  right: auto;
  bottom: auto;
  opacity: 0.8;
}
.snapshot__panel {
  position: relative;
  z-index: 2;
  width: min(86%, 30em);
  background: rgba(247, 245, 242, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: clamp(16px, 1.4vw, 22px);
  padding: clamp(20px, 1.9vw, 32px);
  box-shadow: 0 30px 70px rgba(4, 9, 21, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.snapshot__title {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  color: var(--ty-black);
  font-size: clamp(17px, 1.35vw, 22px);
  margin: 0;
  letter-spacing: -0.01em;
}
.snapshot__sub {
  color: rgba(4, 9, 21, 0.62);
  font-size: clamp(13px, 0.95vw, 15px);
  margin: 0.35em 0 0;
}
.snapshot__rows {
  margin-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--ty-line);
  padding-top: clamp(12px, 1.1vw, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.9vw, 14px);
}
.snapshot__row {
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.snapshot__dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 100vw;
  flex: 0 0 auto;
}
.snapshot__dot._1 { background: var(--ty-orange); }
.snapshot__dot._2 { background: var(--ty-blue); }
.snapshot__dot._3 { background: #1f8a5b; }
.snapshot__row p {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--ty-black);
  font-weight: 600;
}
.snapshot__tag {
  margin-left: auto;
  font-size: clamp(10px, 0.78vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(4, 9, 21, 0.5);
  font-weight: 700;
}

/* ---------- Solutions: solution cards ---------- */
.sol-list {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 56px);
}
.sol-card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 1.8vw, 30px);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: clamp(340px, 34vw, 480px);
  background: var(--ty-cream-2);
  color: var(--ty-black);
  isolation: isolate;
}
.sol-card__body {
  padding: clamp(26px, 3.2vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1vw, 18px);
  position: relative;
  z-index: 2;
}
.sol-card__index {
  font-family: "pp-pangram-sans", sans-serif;
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.55;
}
.sol-card__title {
  font-family: "pp-pangram-sans", sans-serif;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.sol-card__desc {
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.55;
  max-width: 44ch;
  opacity: 0.82;
  margin: 0;
}
.sol-card__list {
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.sol-card__list li {
  font-family: "pp-pangram-sans", sans-serif;
  font-size: clamp(11px, 0.8vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.55em 1em;
  border-radius: 100vw;
  border: 1px solid currentColor;
  opacity: 0.62;
}
.sol-card__cta {
  margin-top: clamp(8px, 0.8vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 16px);
  color: inherit;
  text-decoration: none;
  width: fit-content;
}
.sol-card__cta svg { width: 1em; height: 1em; transition: transform 0.3s ease; }
.sol-card:hover .sol-card__cta svg { transform: translateX(0.35em); }

.sol-card__visual {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.sol-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.9;
}
.sol-card__orb {
  position: absolute;
  width: 68%;
  max-width: 320px;
  right: -8%;
  bottom: -14%;
  pointer-events: none;
  z-index: 2;
}

/* Solution card themes */
.sol-card.is--cream { background: var(--ty-cream-2); }
.sol-card.is--cream .sol-card__visual {
  background:
    radial-gradient(90% 90% at 70% 20%, rgba(254, 117, 5, 0.22), rgba(254, 117, 5, 0) 60%),
    linear-gradient(135deg, #f3ddc4, #f7f5f2);
}
.sol-card.is--dark {
  background: linear-gradient(150deg, #0b1224, #05080f);
  color: #fff;
}
.sol-card.is--dark .sol-card__list li { opacity: 0.7; border-color: rgba(255,255,255,0.4); }
.sol-card.is--dark .sol-card__visual {
  background:
    radial-gradient(100% 100% at 80% 30%, rgba(38, 82, 185, 0.55), rgba(38, 82, 185, 0) 60%),
    radial-gradient(90% 90% at 30% 90%, rgba(254, 117, 5, 0.35), rgba(4, 9, 21, 0) 65%);
}
.sol-card.is--orange {
  background-image: radial-gradient(62.34% 62.34% at 83.12% 18.18%, #e24012 0%, #fe7505 100%);
  color: #fff;
}
.sol-card.is--orange .sol-card__index { opacity: 0.8; }
.sol-card.is--orange .sol-card__desc { opacity: 0.95; }
.sol-card.is--orange .sol-card__list li { opacity: 0.85; border-color: rgba(255,255,255,0.55); }
.sol-card.is--orange .sol-card__visual {
  background: radial-gradient(80% 80% at 30% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%);
}
.sol-card.is--blue .sol-card__visual {
  background:
    radial-gradient(90% 90% at 70% 25%, rgba(38, 82, 185, 0.3), rgba(38, 82, 185, 0) 60%),
    linear-gradient(135deg, #cdd8f1, #f2f4fa);
}

/* ---------- Trust checks panel ---------- */
.trust-panel {
  background: linear-gradient(150deg, #0b1224, #05080f);
  color: #fff;
  border-radius: clamp(20px, 1.8vw, 30px);
  padding: clamp(30px, 4vw, 72px);
  position: relative;
  overflow: hidden;
}
.trust-panel__title {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0.3em 0 0;
  text-wrap: balance;
}
.trust-panel__head { max-width: 30ch; }

/* Solutions intro lead */
.sol-lead { max-width: 44rem; }
.sol-lead .ty-section-head { max-width: 20ch; }
.trust-grid {
  margin-top: clamp(22px, 2.4vw, 42px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
}
.trust-item {
  border-top: 1px solid var(--ty-line-light);
  padding-top: clamp(12px, 1vw, 18px);
}
.trust-item h3 {
  font-family: "pp-pangram-sans", sans-serif;
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
.trust-item p {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  opacity: 0.72;
}
.trust-item .ty-check {
  color: var(--ty-orange);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 800;
}

/* ---------- Services: editorial breakdown ---------- */
.svc-list { border-bottom: 1px solid var(--ty-line); }
.svc-row {
  display: grid;
  grid-template-columns: 4em 1fr 1.1fr;
  gap: clamp(16px, 2vw, 40px);
  align-items: start;
  border-top: 1px solid var(--ty-line);
  padding: clamp(26px, 3vw, 52px) 0;
  transition: padding-left 0.4s ease;
}
.svc-row:hover { padding-left: clamp(0px, 0.8vw, 14px); }
.svc-row__num {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--ty-orange-deep);
  padding-top: 0.5em;
}
.svc-row__title {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
}
.svc-row__body p {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.6;
  opacity: 0.84;
}
.svc-row__tags {
  list-style: none;
  margin: clamp(12px, 1.1vw, 18px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-row__tags li {
  font-family: "pp-pangram-sans", sans-serif;
  font-size: clamp(11px, 0.8vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.5em 0.95em;
  border-radius: 100vw;
  border: 1px solid var(--ty-line);
  opacity: 0.75;
}

/* ---------- Honest statement block (replaces fake testimonials) ---------- */
.ty-statement { text-align: center; max-width: 52rem; margin: 0 auto; }
.ty-statement .ty-kicker { display: inline-block; margin-bottom: 0.8em; }
.ty-statement h2 {
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
}
.ty-statement p {
  margin: 1.1em auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.6;
  opacity: 0.8;
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 991px) {
  .hero.is--home { min-height: 86vh; }
  .sol-card { grid-template-columns: 1fr; min-height: 0; }
  .sol-card__visual { order: -1; min-height: 200px; }
  .sol-card__orb { width: 40%; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-row { grid-template-columns: 3em 1fr; }
  .svc-row__body { grid-column: 1 / -1; }
}

@media screen and (max-width: 767px) {
  .ty-scrollcue { display: none; }
  .snapshot__panel { width: min(90%, 26em); }
  .snapshot__orb { width: 52%; }
}

@media screen and (max-width: 479px) {
  .hero.is--home { min-height: 88vh; }
  .sol-card__visual { min-height: 160px; }
  .trust-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 1fr; gap: 0.6em; }
  .svc-row__num { padding-top: 0; }
  .snapshot__panel { width: 88%; }
}

/* ============================================================
   Audit fixes (round 2): contrast, focus, tap targets, semantics
   ============================================================ */

/* Visually hidden, available to assistive tech (one real H1 per page) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Contrast: active nav becomes dark text on the pale-orange chip (was 2.38:1) */
.navlink.w--current { color: var(--black); }
.navlink.text-white.w--current { color: #fff; }

/* Contrast: lift the low-contrast grey labels above AA 4.5:1 */
.ty-featured-foot p { color: rgba(4, 9, 21, 0.7); }
.snapshot__tag { color: rgba(4, 9, 21, 0.74); }

/* Visible, robust keyboard focus ring (works on cream, dark and orange) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navlink:focus-visible,
.sol-card__cta:focus-visible,
.contact-item:focus-visible,
.social-link:focus-visible,
.burger-menu-parent:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;   /* shown in forced-colors mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--black);
  border-radius: 4px;
}

/* Tap targets >= 44px */
.sol-card__cta { min-height: 44px; }
.contact-item { min-height: 44px; display: inline-flex; align-items: center; }
.burger-menu-parent { position: relative; }
.burger-menu-parent::after { content: ""; position: absolute; inset: -12px; }

/* Light solution cards: enlarge the orb so the visual panel is not sparse */
.sol-card.is--cream .sol-card__orb,
.sol-card.is--blue .sol-card__orb { width: 84%; right: -4%; bottom: -8%; opacity: 0.95; }

/* Hide the off-message "Our Work" label on the Solutions hero */
.work-label { display: none !important; }

/* Hide the non-functional back arrow on the booking form's first slide */
.form-prev.is--first-slide { opacity: 0 !important; pointer-events: none !important; }

/* Mobile: give footer links a comfortable vertical tap area */
@media screen and (max-width: 767px) {
  .footer-link-grid a { display: inline-block; padding-top: 0.45em; padding-bottom: 0.45em; }
}

/* Restore h1-tag typography that retagged hero headings (h1 -> div) inherited.
   .super-text and .heading-md set their own size; .subpage-h1 and .hero-h1 did not. */
.subpage-h1:not(.super-text) {
  font-size: 5.35em;
  font-weight: 500;
  line-height: 1.12;
}
.hero-h1 { font-weight: 500; }

/* ============================================================
   Branded page preloader (self-contained, pure CSS).
   The original overlay only showed while CDN scripts loaded;
   localising those scripts removed that window. This restores
   it reliably: the headline reveals on the orange field, holds,
   then the overlay wipes up to show the page. No JS dependency.
   Matches the original Webflow intro overlay. */
.ty-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: radial-gradient(62.34% 62.34% at 83.12% 18.18%, #e24012 0%, #fe7505 100%);
  transform: translateY(0);
  animation: ty-pre-out 0.85s 1.3s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.ty-preloader__head {
  text-align: center;
  padding: 0 6vw;
  font-family: "pp-pangram-sans", sans-serif;
  font-weight: 500;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 6.2vw, 92px);
}
/* Hanging-text reveal: each line rises from behind a clip mask while the
   row drifts horizontally into place (the original Webflow intro motion). */
.ty-pl-row {
  display: block;
  transform: translateX(0);
  animation: ty-pl-drift 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.ty-pl-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.ty-pl-line {
  display: block;
  transform: translateY(110%);
  animation: ty-pl-rise 0.78s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.ty-pl-row:nth-child(1) { animation-delay: 0.05s; transform: translateX(5vw); }
.ty-pl-row:nth-child(1) .ty-pl-line { animation-delay: 0.05s; }
.ty-pl-row:nth-child(2) { animation-delay: 0.16s; transform: translateX(-10vw); }
.ty-pl-row:nth-child(2) .ty-pl-line { animation-delay: 0.16s; }
.ty-pl-row:nth-child(3) { animation-delay: 0.27s; transform: translateX(-2vw); }
.ty-pl-row:nth-child(3) .ty-pl-line { animation-delay: 0.27s; }
@keyframes ty-pl-rise { to { transform: translateY(0); } }
@keyframes ty-pl-drift { to { transform: translateX(0); } }
@keyframes ty-pre-out { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ty-preloader { animation: ty-pre-fade 0.5s 1s ease forwards; }
  .ty-pl-row, .ty-pl-line { animation: none; transform: none; }
  @keyframes ty-pre-fade { to { opacity: 0; visibility: hidden; } }
}

/* ============================================================
   Mobile/tablet fix: the Contact page details are revealed by a
   Webflow scroll interaction that does not fire below desktop,
   leaving the email and "Have a question?" stuck hidden. Force
   them (and their dark panel) visible at <=991px. Desktop keeps
   its reveal animation.
   ============================================================ */
@media screen and (max-width: 991px) {
  .contact-info-wrapper,
  .contact-info-text,
  .sm-container.is--contact .image { opacity: 1 !important; }
  .contact-wrapper-bg.bg-black { width: 100% !important; height: 100% !important; }
}