/* ============================================================
   FINTYQ — Visual refinement (override layer)
   Minimal editorial fintech. Restrained accents.
   ============================================================ */

:root {
  --tp-ink:       #111514;
  --tp-graphite:  #1F2927;
  --tp-paper:     #F4F6F4;
  --tp-mist:      #E6F1EA;
  --tp-mint-1:    #EAF5EE;
  --tp-mint-2:    #C9E4D2;
  --tp-mint-3:    #A6D2B6;
  --tp-orange:    #EF5A1E;
  --tp-peach:     #FFE7D6;
  --tp-line:      rgba(17, 21, 20, 0.12);

  /* Soft greys for the What we do panels (kept light so black body
     text remains legible — same logic as the original design). */
  --tp-panel-1:   #DDE5E2;
  --tp-panel-2:   #C7D2CE;
  --tp-panel-3:   #B0BEB9;
  --tp-panel-4:   #B0BEB9;
}

/* ---------- Replace #0500b0 brand blue → ink black everywhere ---------- */
/* Targets all known main.css usages of the legacy blue. */
.svg-text-clip,
.btn--primary,
.btn--primary:before,
.btn--secondary,
.btn--secondary:before {
  /* concrete rules below */
}

/* ---------- Brand color remaps ---------- */

.bg-blue        { background-color: var(--tp-orange) !important; }
.bg-blue-dark   { background-color: #000             !important; }
.bg-dark        { background-color: #000             !important; }
.bg-yllw        { background-color: var(--tp-mist)   !important; }
.bg-pink        { background-color: #ffffff          !important; }
.bg-teal        { background-color: #FEFEFC    !important; }
.bg-black       { background-color: #000             !important; }
.bg-gray        { background-color: var(--tp-paper)  !important; }

/* ---------- Buttons: kill all #0500b0 ---------- */

.btn--primary {
  background-color: var(--tp-orange) !important;
  border-color:     var(--tp-orange) !important;
  color: #fff !important;
}
.btn--primary:before { background-color: #000 !important; }

.btn--orange {
  background-color: var(--tp-orange) !important;
  color: #fff !important;
}
.btn--orange:before { background-color: #000 !important; }

.btn--secondary {
  background-color: var(--tp-peach) !important;
  border-color:     #000             !important;
  color:            #000             !important;
}
.btn--secondary:before { background-color: #ef5a1e !important; color:#fff !important; }
.btn--secondary:disabled { color: #000 !important; }

.btn--white { color: #000 !important; }
.btn--white:before { background-color: var(--tp-orange) !important; }

.btn--outline {
  border-color: var(--tp-line) !important;
  color: #000 !important;
}

.btn--contacts { color: #fff !important; }
.btn--contacts .link { color: #fff !important; }

/* Any leftover element that used blue background (e.g. svg-text-clip --bg) */
[style*="0500b0"] { background-color: #000 !important; }

/* ---------- Preloader ---------- */

/* After the animation ends, main.css sets clip-path: none on the preloader
   but never hides it. The element stays in the DOM at z-index 15, full-screen,
   no clip — creating a stacking context that sits over the hero and can expose
   the body background as a white stripe at the top. Hide it once done. */
.preloader-complete [data-component=preloader] { display: none !important; }

/* The preloader reveal tween applies clip-path to <main>. If clearProps: "all"
   races with GSAP's last render tick, the clip-path can remain. Force clear it. */
.preloader-complete main {
  clip-path: none !important;
  visibility: visible !important;
}

/* ---------- Header / Menu ---------- */

/* body + html are both position:fixed in main.css — body IS the viewport.
   [data-page-wrapper] padding-top: 2.4rem pushes the scroll wrapper 24 px down,
   leaving body's white background visible as a stripe at the very top.
   Also zero out any accidental padding/margin on the scroll-wrapper chain. */
[data-page-wrapper],
[data-scroll-wrapper],
[data-scroller] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.header { color: #000 !important; }

[data-menu-opener] .menu-indicator { color: #fff !important; }
[data-menu-opener] .header-line { background-color: rgba(255,255,255,.35) !important; }

[data-menu] .header-nav__link { color: #000 !important; }
[data-menu] .header-nav__link.is-active { color: var(--tp-orange) !important; }

/* ---------- Links ---------- */

.link--underline { transition: color .25s ease; }
.no-touchevents .link--underline:hover { color: var(--tp-orange) !important; }

.link--arrow .svgi { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.no-touchevents .link--arrow:hover .svgi { transform: translateX(4px); }

.footer-link { color: #fff !important; transition: color .25s ease; }
.no-touchevents .footer-link:hover { color: var(--tp-mint-3) !important; }

/* ---------- HERO ---------- */
/* Keep the three parallax mountain layers VISIBLE (decorative,
   gives depth). Just soften them so the watercolor flower stays
   the focal point and the foreground doesn't read as a dark slab. */

section[data-animation="ambient-move"] {
  position: relative;
  isolation: isolate;
}
section[data-animation="ambient-move"] > .container { position: relative; z-index: 2; }

/* The three decorative parallax layers — restore visibility, soften.
   Lift brightness so they don't read as muddy dark grey, drop
   saturation a touch, add multiply so they blend with the sky. */
section[data-animation="ambient-move"] [data-scroll-speed="0.8"],
section[data-animation="ambient-move"] [data-scroll-speed="1.6"],
section[data-animation="ambient-move"] [data-scroll-speed="2.4000000000000004"] {
  display: block !important;
}
section[data-animation="ambient-move"] [data-scroll-speed="0.8"] picture img {
  filter: opacity(.82);
  mix-blend-mode: multiply;
}
section[data-animation="ambient-move"] [data-scroll-speed="1.6"] picture img {
  filter: saturate(.65) brightness(1.22) contrast(.9) opacity(.5);
  mix-blend-mode: multiply;
}
section[data-animation="ambient-move"] [data-scroll-speed="2.4000000000000004"] picture img {
  filter: saturate(.6) brightness(1.28) contrast(.88) opacity(.38);
  mix-blend-mode: multiply;
}

.blur50 { filter: blur(50px) !important; }
.blur40 { filter: blur(40px) !important; }
.blur35 { filter: blur(35px) !important; }
.blur30 { filter: blur(30px) !important; }

/* ---------- ABOUT ---------- */

#about {
  position: relative;
  isolation: isolate;
  min-height: 66rem;
      border-top: 1px solid #fff;
}

/* The outer parallax wrapper (speed=5) is animated y: -Y → +Y where
   Y = section.height × 0.5. When section top is near the viewport top the
   wrapper has shifted down by up to ~50% of section height, revealing the
   section background colour at the top. Extending the wrapper 55% above
   (top: -55%) and making it 210% tall keeps it covering the full section
   at every point in the scroll, while the parallax motion is fully preserved. */
#about > .absolute.left-0.top-0 {
  top: -55% !important;
  height: 210% !important;
}

#about .bg-white {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(17,21,20,.03), 0 14px 30px -28px rgba(17,21,20,.14);
}

/* ---------- Stack panels (What we do) ---------- */
/* Use LIGHT greys so the original black body text reads.
   No structural changes — sticky stack untouched. */

.stack-panels__panel:first-child   { background: var(--tp-panel-1) !important; }
.stack-panels__panel:nth-child(2)  { background: var(--tp-panel-2) !important; }
.stack-panels__panel:nth-child(3)  { background: var(--tp-panel-3) !important; }
.stack-panels__panel:nth-child(4)  { background: var(--tp-panel-4) !important; }

/* Soften the photo so light grey + black text remain legible */
.stack-panels__panel picture img {
  filter: saturate(.85) brightness(1.05) contrast(.95);
}

/* Explicitly remove any forced white from previous version */
.stack-panels__panel .stack-panel__content,
.stack-panels__panel .stack-panel__content h3,
.stack-panels__panel .stack-panel__content p,
.stack-panels__panel .stack-panel__content > div { color: #000 !important; }

/* ---------- Inputs ---------- */

input, textarea, select {
  border-color: var(--tp-line) !important;
  background-color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--tp-orange) !important;
  box-shadow: 0 0 0 3px rgba(239,90,30,.16) !important;
}

/* ---------- Portfolio ---------- */

.portfolio-row { transition: background-color .35s ease, color .35s ease; }
.no-touchevents .portfolio-row:hover { background-color: #000 !important; color: #fff !important; }
.no-touchevents .portfolio-row:hover .text-dark { color: #fff !important; }

/* ---------- Section accents ---------- */

.default-section span.absolute.right-0.top-0 { color:#fff !important; }

/* ---------- Footer ---------- */

.footer .bg-black { background-color: #000 !important; }

.footer .bg-teal {
  background:
    linear-gradient(180deg, var(--tp-mint-1) 0%, var(--tp-mint-2) 60%, var(--tp-mint-3) 100%) !important;
  color: #000 !important;
}
.footer .bg-teal .w-12,
.footer .bg-teal .w-25 { background: var(--tp-mint-1) !important; }


/* ---------- Misc ---------- */

::selection { background: var(--tp-peach); color: #000; }
body { color: #000; }
[data-page-overlay] { background-color: #000 !important; }

/* ============================================================
   MOBILE (<768px)
   ============================================================ */
/* ---------- Footer feedback form ---------- */

/* Honeypot: visually hidden from real users, bots fill it. */
.footer-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.footer-form__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 0.45rem;
}

.footer-form__input {
  display: block;
  width: 100%;
  background: #000 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  padding: 0.75rem 0.875rem !important;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.4;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.footer-form__input::placeholder {
  color: rgba(255,255,255,.25);
}
.footer-form__input:focus {
  border-color: var(--tp-orange) !important;
  background: rgba(255,255,255,.09) !important;
  box-shadow: 0 0 0 3px rgba(239,90,30,.18) !important;
  outline: none !important;
}

.footer-form__textarea {
  resize: vertical;
  min-height: 7.5rem;
  max-height: 20rem;
}

.footer-form__actions {
  display: block;
  float: right;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-form__submit:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.footer-form__status {
  font-size: 0.8125rem;
  min-height: 1.2em;
}
.footer-form__status.is-success { color: var(--tp-mint-3); }
.footer-form__status.is-error   { color: #ff7c6b; }

@media (max-width: 767px) {
  section[data-animation="ambient-move"]::before {
    background: linear-gradient(
      180deg,
      rgba(244,246,244,0.55) 0%,
      rgba(244,246,244,0.20) 40%,
      rgba(244,246,244,0.05) 70%,
      rgba(230,241,234,0.18) 100%
    );
  }

  #about > .absolute.left-0.top-0::after {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.72) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(230,241,234,0.50) 100%);
  }

  #about .md\:col-span-5 > div.pl-12 {
    background: rgba(255,255,255,0.88);
    padding: 1.5rem 1.25rem;
  }

  [data-menu-opener] {
    background-color: #000 !important;
  }
  [data-menu-opener] .menu-indicator { color: #fff !important; }

  .footer .bg-teal .pt-25 { padding-top: 2rem; }
}