/* =========================================================
   Solid Core Digital — Thank-you page (after the contact form)
   Loads after styles.css (global tokens, header, footer, buttons, .text-link,
   .scroll-preview) and work.css (footer legal line).
   Desktop values are 1:1 with the Figma “thank you page” frame (1440px).
   Breakpoints follow the site: 1439 / 1279 / 1199 / 1100 / 1023 / 860 / 767 / 479
   ========================================================= */
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* =========================================================
   HERO
   ========================================================= */
.thero { position: relative; height: 626px; overflow: hidden; background: #01020a; color: #fff; }
.thero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.04); animation: heroZoom 2.4s var(--ease-out) forwards; }
.thero__inner { position: relative; height: 100%; max-width: 1440px; margin-inline: auto; padding: 161px 0 0 108px; }
.thero__copy { position: relative; z-index: 2; width: 696px; display: flex; flex-direction: column; align-items: flex-start; }
.thero__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  font-family: var(--f-ui); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blue-accent);
}
.thero__kicker span { width: 48px; height: 1px; flex: none; background: rgba(59, 130, 246, .7); }
.thero__title { width: 570px; max-width: 100%; margin-bottom: 24px; font-family: var(--f-display); font-weight: 800; font-size: 60px; line-height: 62px; letter-spacing: -1.5px; color: #fff; }
.thero__title-l2 { display: block; padding-bottom: .2em; margin-bottom: -.2em; } /* room for descenders (g) inside the gradient clip, layout unchanged */
.thero__lead { width: 576px; max-width: 100%; margin-bottom: 40px; font-weight: 500; font-size: 18px; line-height: 28px; color: var(--text-soft); }
.thero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 28px; }
.thero__btn { height: 52px; padding: 0 26px 0 28px; gap: 12px; font-size: 18px; line-height: 20px; letter-spacing: .35px; }
.thero__note { font-weight: 500; font-size: 18px; line-height: 28px; color: var(--text-soft); }

/* Glass envelope (Figma right column: 488 × 306.87 at x 836, y 217.56) */
.thero__visual { position: absolute; z-index: 1; left: 836px; top: 217.56px; width: 488px; height: 306.874px; }
.tenv-float { position: absolute; inset: 0; animation: tenvFloat 7s ease-in-out infinite; }
@keyframes tenvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.tenv {
  position: absolute; left: 50%; top: 144px; width: 288px; height: 240px; margin: -120px 0 0 -144px;
  display: grid; place-items: center; border-radius: 24px; border: 1px solid rgba(147, 197, 253, .45);
  background: linear-gradient(134.96deg, rgba(255, 255, 255, .12) 0%, rgba(30, 64, 175, .25) 50%, rgba(15, 23, 42, .6) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  transform: rotate(-8deg);
}
.tenv__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tenv__glow { position: absolute; left: 71px; top: 47px; width: 144px; height: 144px; border-radius: 50%; background: rgba(59, 130, 246, .25); filter: blur(20px); animation: tenvGlow 4.5s ease-in-out infinite; }
@keyframes tenvGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; scale: 1.08; } }
.tenv__check {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15, 23, 42, .9); border: 1px solid #0280fd;
  box-shadow: 0 10px 15px -3px rgba(14, 165, 233, .5), 0 4px 6px -4px rgba(14, 165, 233, .5);
}
.tenv__check img { width: 32px; height: 32px; }
.js .tenv__check img { clip-path: inset(0 100% 0 0); }
.js.is-loaded .tenv__check img { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-out) 1s; }
.tenv-note {
  position: absolute; left: 220.97px; top: -26.1px; translate: -50% -50%; rotate: -4.21deg; white-space: nowrap;
  font-family: "Caveat", cursive; font-size: 24px; line-height: 32px; letter-spacing: .6px; color: #0280fd;
}
.tenv-arrow { position: absolute; left: 192.11px; top: -12.44px; width: 48px; height: 40px; rotate: -135deg; scale: 1 -1; }

/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */
.tproc { position: relative; overflow: hidden; min-height: 642px; padding: 51px 24px 105px; background: #f8fafc; }
.tproc__bg { position: absolute; inset: 0; pointer-events: none; }
.tproc__bg img { width: 100%; height: 100%; object-fit: cover; }
.tproc__inner { position: relative; max-width: 1097px; margin-inline: auto; }
.tproc__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tproc__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 1.12px; text-transform: uppercase; color: var(--blue-accent); }
.tproc__eyebrow span { width: 28px; height: 1.5px; border-radius: 9999px; background: var(--blue-accent); }
.tproc__title { font-family: var(--f-body); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -1.3px; color: #0f1319; }
.tproc__title .grad-text { padding-bottom: .2em; margin-bottom: -.2em; } /* room for descenders (g) inside the gradient clip, layout unchanged */
.tproc__lead {
  margin-top: 15.2px; font-weight: 500; font-size: 18px; line-height: 27.63px;
  background: var(--grad-dark-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.tsteps {
  position: relative; margin-top: 39.2px; height: 322px; padding: 48px 48px 9px;
  display: grid; grid-template-columns: 331px 341px 329px; align-items: start;
  border-radius: 28px; border: 1px solid #e4edf8; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 10px 40px -10px rgba(180, 205, 235, .35), 0 1px 3px 0 rgba(0, 0, 0, .02);
}
.tstep { position: relative; height: 265px; display: flex; flex-direction: column; align-items: flex-start; }
.tstep:nth-child(1) { padding-right: 48.11px; border-right: 1px solid #edf3fa; }
.tstep:nth-child(2) { padding: 0 40.11px 0 38px; border-right: 1px solid #edf3fa; }
.tstep:nth-child(3) { padding-left: 46px; }
.tstep__icon { width: 56px; height: 56px; flex: none; margin-bottom: 32px; border-radius: 50%; display: grid; place-items: center; background: #dbeefe; transition: transform .5s var(--ease-spring), background-color .3s; }
.tstep:hover .tstep__icon { transform: translateY(-3px) rotate(-6deg); background: #cfe6fd; }
.tstep__num { margin-bottom: 14px; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .35px; color: #005bf6; }
.tstep__title { min-height: 52.26px; margin-bottom: 12.84px; font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 26.13px; color: #0c1424; }
.tstep__text { font-family: var(--f-display); font-size: 16px; line-height: 23.56px; color: var(--slate-500); white-space: nowrap; }
.tstep__chev {
  position: absolute; right: -16.89px; top: 96px; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: #e8f2fe; border: 2px solid #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}

/* =========================================================
   EXPLORE THE WORK (navy)
   ========================================================= */
.twork { position: relative; overflow: hidden; min-height: 931px; padding: 83px 24px 40px; background: var(--navy); color: #fff; isolation: isolate; }
.twork__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.twork__inner { position: relative; max-width: 1160px; margin-inline: auto; }
.twork__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.twork__label { display: flex; align-items: center; gap: 12px; height: 17px; margin-bottom: 20px; font-weight: 600; font-size: 14px; line-height: 16.5px; letter-spacing: 2.75px; text-transform: uppercase; color: var(--blue-accent); }
.twork__label span { width: 32px; height: 1px; background: var(--blue-accent); }
.twork__title { font-family: var(--f-body); font-weight: 800; font-size: 48px; line-height: 48px; letter-spacing: -1.2px; color: #fff; white-space: nowrap; }
.twork__title .grad-text { padding-bottom: 0; }
.twork__lead { margin-top: 22px; font-size: 18px; line-height: 24px; color: var(--text-soft); }
.twork__btn { height: 52px; margin-top: 30px; padding: 0 26px 0 28px; gap: 12px; font-size: 18px; line-height: 20px; letter-spacing: .35px; }

.twork__grid { margin-top: 47.5px; display: grid; grid-template-columns: repeat(3, minmax(0, 365px)); justify-content: center; gap: 32px; }
.tcase { min-width: 0; }
.tcase__card {
  display: flex; height: 360px; padding: 20px; border-radius: 16px; overflow: hidden;
  background: #0f1115; border: 1px solid rgba(37, 99, 235, .5);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .5s var(--ease-out), border-color .35s, box-shadow .5s var(--ease-out);
}
.tcase__card:hover, .tcase__card:focus-visible { transform: translateY(-6px); border-color: rgba(59, 130, 246, .95); box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .8), 0 0 30px -8px rgba(37, 99, 235, .55); }
.tcase__screen { flex: 1 1 auto; position: relative; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .05); background: #141820; }
.tcase--1 .tcase__screen img { transform: translateY(-.06%); }
.tcase--2 .tcase__screen img { transform: translateY(-.16%); }

.tcase__body { padding: 24px 0 0 12px; display: flex; flex-direction: column; align-items: flex-start; }
.tcase__title { font-weight: 700; font-size: 20px; line-height: 24px; color: #fff; }
.tcase__sub { margin-top: 15.3px; font-size: 16px; line-height: 20px; color: var(--text-soft); }
.tcase__rule { width: 56px; height: 1px; margin-top: 24px; background: rgba(255, 255, 255, .1); }
.tcase__link { margin-top: 7.3px; }
.tcase__link img { width: 14px; height: 14px; }

/* Figma places each caption a few px apart — matched on desktop */
@media (min-width: 1200px) {
  .twork .tcase .tcase__body { padding-top: 30px; }
  .twork .tcase .tcase__sub  { margin-top: 15.3px; }
  .twork .tcase .tcase__rule { order: 0; margin-top: 24px; }
  .twork .tcase .tcase__link { order: 0; margin-top: 12px; }
}

/* Bubbles (same component as the case-study “Three key changes” section) */
.pbub { position: absolute; will-change: transform; }
.pbub--tr { left: calc(100% - 179px); top: 9px; width: 178px; height: 178px; }
.pbub--bl { left: 0; top: 781px; width: 140px; height: 146px; }
.pbub__float { position: relative; width: 100%; height: 100%; animation: bubbleFloat 12s ease-in-out infinite; transition: opacity 1.2s var(--ease-out), scale 1.4s var(--ease-out); }
.pbub--bl .pbub__float { animation-duration: 14s; animation-delay: -6s; }
.pbub__ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(125, 211, 252, .7);
  background: radial-gradient(circle at 35% 60%, rgba(37, 99, 235, .5) 0%, rgba(37, 99, 235, .2) 70%, rgba(2, 128, 253, 0) 100%);
  animation: ringBreathe 9s ease-in-out infinite;
}
.pbub__orb { position: absolute; border-radius: 50%; background: var(--grad); animation: orbDrift 11s ease-in-out infinite; }
.pbub--tr .pbub__ring { left: 16px; top: 0; width: 162px; height: 162px; }
.pbub--tr .pbub__orb { left: 0; top: 45px; width: 129.79px; height: 132.6px; }
.pbub--bl .pbub__ring { left: 0; top: 0; width: 140px; height: 140px; background: radial-gradient(circle at 35% 40%, rgba(37, 99, 235, .5) 0%, rgba(37, 99, 235, .2) 70%, rgba(2, 128, 253, 0) 100%); animation-delay: -4s; }
.pbub--bl .pbub__orb { left: 0; top: 46px; width: 100px; height: 100px; animation-delay: -5s; }
.js .twork:not(.is-in) .pbub__float { opacity: 0; scale: .8; }

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .thero__bg { transform: none; animation: none; }
  .tenv-float, .tenv__glow, .pbub__float, .pbub__ring, .pbub__orb { animation: none !important; }
  .js .tenv__check img { clip-path: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- ≥1200: Figma sets the two light-section lines left-aligned in fixed boxes ---- */
@media (min-width: 1200px) {
  .tproc__title { translate: -15.5px 0; }
  .tproc__lead { translate: -15.5px 0; }
  .tproc__eyebrow { width: 221px; translate: .5px 0; }
  .twork__title { width: 397px; text-align: left; translate: .5px 0; }
  .tcase--1 .tcase__body { padding-left: 16px; }
}

/* ---- ≤1439: keep the composition, scale the envelope column ---- */
@media (max-width: 1439px) {
  .thero__inner { padding-left: clamp(40px, 7.5vw, 108px); }
  .thero__visual { left: auto; right: clamp(24px, 8vw, 116px); }
  /* narrower gutters: tuck the lower bubble into the corner, clear of the first caption */
  .pbub--bl { left: -30px; top: auto; bottom: -30px; scale: .6; transform-origin: 0 100%; }
}

/* ---- ≤1279: laptop ---- */
@media (max-width: 1279px) {
  .thero__visual { scale: .86; transform-origin: right center; }
  .tsteps { height: auto; padding: 40px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tstep { height: auto; }
  .tstep:nth-child(1) { padding-right: 32px; }
  .tstep:nth-child(2) { padding: 0 32px; }
  .tstep:nth-child(3) { padding-left: 32px; }
  .tstep__title { font-size: 22px; }
  .tstep__text { white-space: normal; }
  .tstep__text br { display: none; }
}

/* ---- ≤1199: stack the hero ---- */
@media (max-width: 1199px) {
  .thero { height: auto; padding-bottom: 64px; }
  .thero__inner { height: auto; padding: 150px 40px 0; display: flex; flex-direction: column; align-items: flex-start; }
  .thero__copy { width: 100%; max-width: 696px; }
  .thero__visual { position: relative; left: auto; right: auto; top: auto; scale: none; align-self: center; width: 488px; max-width: 100%; margin-top: 72px; }
  .twork__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .tcase__card { height: auto; aspect-ratio: 365 / 360; }
}

/* ---- ≤1023: tablet ---- */
@media (max-width: 1023px) {
  .tproc { padding: 64px 24px 72px; min-height: 0; }
  .tproc__title { font-size: 40px; line-height: 46px; letter-spacing: -1.1px; }
  .tsteps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; padding: 12px 32px; }
  .tstep, .tstep:nth-child(1), .tstep:nth-child(2), .tstep:nth-child(3) { padding: 28px 0; border-right: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .tstep + .tstep { border-top: 1px solid #edf3fa; }
  .tstep__icon { grid-row: 1 / span 3; margin: 0; }
  .tstep__num { margin-bottom: 6px; }
  .tstep__title { min-height: 0; margin-bottom: 8px; }
  .tstep__chev { display: none; }
  .twork { min-height: 0; padding: 72px 24px 88px; }
  .twork__title { font-size: 42px; line-height: 46px; }
  .twork__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; max-width: 760px; margin-inline: auto; }
  .tcase--3 { grid-column: 1 / -1; width: 100%; max-width: calc(50% - 12px); justify-self: center; }
  .pbub--tr { scale: .7; transform-origin: top right; left: auto; right: 0; }
  .pbub--bl { left: -20px; bottom: -20px; scale: .7; }
}

/* ---- ≤767: mobile ---- */
@media (max-width: 767px) {
  .thero { padding-bottom: 48px; }
  .thero__inner { padding: 116px 20px 0; }
  .thero__kicker { gap: 10px; margin-bottom: 18px; letter-spacing: 2px; }
  .thero__kicker span { width: 32px; }
  .thero__title { font-size: clamp(38px, 10.6vw, 52px); line-height: 1.08; letter-spacing: -1.1px; margin-bottom: 18px; }
  .thero__lead { font-size: 16px; line-height: 26px; margin-bottom: 28px; }
  .thero__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  .thero__actions .btn { width: 100%; }
  .thero__btn { font-size: 17px; }
  .thero__note { font-size: 16px; line-height: 24px; }
  .thero__visual { width: 100%; height: auto; aspect-ratio: 488 / 306.874; margin-top: 56px; }
  .tenv-float { scale: .78; transform-origin: center top; }

  .tproc { padding: 56px 20px 64px; }
  .tproc__eyebrow { font-size: 13px; gap: 10px; }
  .tproc__title { font-size: 32px; line-height: 38px; letter-spacing: -1px; }
  .tproc__lead { font-size: 16px; line-height: 24px; margin-top: 12px; }
  .tsteps { margin-top: 32px; padding: 4px 20px; border-radius: 22px; }
  .tstep, .tstep:nth-child(1), .tstep:nth-child(2), .tstep:nth-child(3) { padding: 22px 0; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .tstep__icon { width: 48px; height: 48px; }
  .tstep__title { font-size: 20px; line-height: 25px; }
  .tstep__text { font-size: 15px; line-height: 22px; }

  .twork { padding: 64px 20px 72px; }
  .twork__label { font-size: 13px; letter-spacing: 2.2px; gap: 10px; }
  .twork__label span { width: 24px; }
  .twork__title { font-size: 36px; line-height: 40px; white-space: normal; }
  .twork__lead { font-size: 16px; line-height: 24px; margin-top: 16px; }
  .twork__grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-top: 40px; }
  .tcase--3 { max-width: none; }
  .tcase__card { padding: 16px; }
  .tcase__body { padding: 20px 0 0 8px; }
  .tcase__title { font-size: 19px; }
  .tcase__link { font-size: 16px; }
  .pbub--tr { scale: .5; right: -24px; }
  .pbub--bl { scale: .5; }
}

/* ---- ≤479: small phones ---- */
@media (max-width: 479px) {
  .btn--email { font-size: 14px; padding-inline: 16px; }
  .thero__visual { margin-top: 44px; }
}