/* Self-hosted italic accent (was Google Fonts — removed the external request).
   Latin subset only; used for the serif italic display accent. */
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SourceSerif4-Italic-latin.woff2") format("woff2");
}

/* ============================================================
   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;
}

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

.bg-blue        { backdrop-filter: blur(6px) saturate(2.05); background-color: #ffffff75 !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; }

.btn--contacts { color: #000 !important; }
.footer-form__submit.btn--contacts { color: #FFA1CF !important; }
.footer-form__submit.btn--contacts:hover { color: #fff !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: #000 !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: #000 !important; }

/* ---------- Hero accent typeface ---------- */
.font-bodoni-italic {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 400;
}

/* ---------- Top-bar buttons redesign (see reference) ----------
   Strip the filled blocks behind the buttons, line the logo,
   "Get in touch" and the burger up on one horizontal centerline
   (nudged slightly down), and wrap the burger in a round border. */

/* No filled blocks / divider lines behind the header buttons. */
.header .bg-blue {
  background-color: transparent !important;
  backdrop-filter: none !important;
}
.header .header-line { display: none !important; }

/* Row alignment: vertical-center all items, nudged a touch lower. */
.header > div {
  align-items: center !important;
  padding-top: 1.2rem;
}
.header .btn--contacts,
.header [data-menu-opener] {
  height: auto !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
}
.header [data-menu-opener] { width: auto !important; }

/* Logo onto the same centerline (was pinned near the top). 
.logo {
  top: calc(50% + 4rem);
  transform: translateY(-36%);
}*/

/* Burger: keep the two-bar icon + open/close animation, add a round
   border around it. */
.header [data-menu-opener] .menu-indicator {
  color: #000 !important;
  width: 4.6rem;
  height: 4.6rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  justify-items: center;
  align-content: center;
}

/* Center the close (X) icon within the round burger. */
.header [data-menu-opener] .menu-indicator .svgi {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%) scale(0);
}
.menu--opened .header [data-menu-opener] .menu-indicator .svgi {
  transform: translate(50%, 50%) scale(1);
}

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

.link--underline { transition: color .25s ease; }
.no-touchevents .link--underline:hover { color: #FFA1CF !important; }


.footer-link { color: #fff !important; transition: color .25s ease; }
.no-touchevents .footer-link:hover { color: #FFA1CF !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;
}


/* ---------- 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: -10% !important;
  height: 180% !important;
}

#about .bg-white {
  background-color: #ec97cb94;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

/* ---------- 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   { border-top: 1px solid #fff !important; }
.stack-panels__panel:nth-child(2)  { border-top: 1px solid #fff !important; }
.stack-panels__panel:nth-child(3)  { border-top: 1px solid #fff !important; }
.stack-panels__panel:nth-child(4)  { border-top: 1px solid #fff !important; }

/* 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 ---------- */


/* ---------- 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, #FFF 0%, #F5C1E1C4 60%, #AFE4F9 100%) !important;
  color: #000 !important;
}
.footer .bg-teal .w-12,
.footer .bg-teal .w-25 { background: var(--tp-mint-1) !important; }


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

::selection { background: rgba(255, 231, 214, .65); color: #000; } /* --tp-peach at 50% — overlapping line boxes stay see-through */
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 #FFA1CF !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: #fff !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; }
}

/* Hero section: full viewport height. The header is fixed and overlays the hero,
   so subtracting var(--header) (template default) just left a white strip at the bottom. */
section.min-h-available { min-height: 100svh; }

/* ---------- Footer end composition ---------- */
/* Page ends on the contacts block with the logo strip peeking below.
   Kills the template's sticky reveal (the strip used to slide over the black
   block, cutting the contacts at max scroll). Strip height tuned so roughly
   the upper half of the wordmark stays visible, as approved by the owner. */
/* Footer = exactly one viewport: black block keeps its natural height, the logo
   strip absorbs ALL the leftover space. Max scroll therefore ends with the black
   block's top exactly at the viewport top (right under the browser chrome). */
.footer { display: flex !important; flex-direction: column; min-height: 100svh; }
.footer > .bg-black { position: static !important; flex: 0 0 auto; }
.footer > .bg-teal { flex: 1 1 0; min-height: 12vw; }
.footer [data-animation="logo-reveal"] { height: 100% !important; }
@media (max-width: 767px) {
  /* Wordmark strip: FIXED height, never grows. 28vw = 20px top pad + 55% of the
     wordmark height at full-bleed width (same visible fraction as desktop).
     flex:1 + min-height let it stretch into any leftover space on taller phones,
     revealing the whole wordmark plus empty white below and letting the page
     scroll past the intended end — hence the hard cap + clip. */
  .footer > .bg-teal {
    flex: 0 0 auto !important;
    height: 28vw !important;
    min-height: 28vw !important;
    max-height: 28vw !important;
    overflow: hidden !important;
  }
}
/* Trim the black block's oversized bottom padding — the freed space goes to the
   logo strip (leftover-based), lifting the visible share of the wordmark to ~55%
   of the letter height on large screens. */
.footer > .bg-black .md\:pb-100 { padding-bottom: 3rem !important; }

/* ---------- Header over dark footer ---------- */
/* While the black contacts block sits under the header band, header text and the
   logo smoothly fade to white (and back). No menu-open suppression: the white menu
   overlay starts BELOW the header (top offset 60px > header 50px), so the header
   always sits over the page — over the dark footer it must stay white even with
   the menu open. Driven by an IntersectionObserver in index.html. */
[data-header] .text-black,
[data-header] .btn--contacts,
[data-header] .btn--contacts .link { transition: color .45s ease; }
[data-header] .menu-indicator::before,
[data-header] .menu-indicator::after,
[data-header] .btn--contacts .link::after { transition: background-color .45s ease, border-color .45s ease; }

[data-header].header--over-dark,
[data-header].header--over-dark .text-black,
[data-header].header--over-dark .btn--contacts,
[data-header].header--over-dark .btn--contacts .link { color: #fff !important; }

[data-header].header--over-dark .menu-indicator::before,
[data-header].header--over-dark .menu-indicator::after {
  background-color: #fff !important; border-color: #fff !important; }
[data-header].header--over-dark .btn--contacts .link::after {
  background-color: #fff !important; }

/* Logo: crossfade to a white-letters variant that keeps the pink dot (logo-inv.png,
   generated from logo.png). The overlay inherits the anchor's padding so it sits
   exactly over the original image. */
[data-header] .logo img { transition: opacity .45s ease; }
[data-header] .logo::after {
  content: ""; position: absolute; inset: 0; padding: inherit; box-sizing: border-box;
  background: url("/logo-inv.png") left center / contain no-repeat;
  background-origin: content-box; background-clip: content-box;
  opacity: 0; transition: opacity .45s ease; pointer-events: none; }
[data-header].header--over-dark .logo img { opacity: 0; }
[data-header].header--over-dark .logo::after { opacity: 1; }

/* ---------- Stack panels behaviour ("What we do", desktop) ---------- */
@media screen and (min-width:768px) {
  /* Parking steps: every card's strip fits its full header zone on BOTH columns.
     Strips: Licensing 14rem (2-line heading + "What we deliver:"), AML 14rem
     (3-line title), Go-to-Market 11rem. */
  .stack-panels__panel:nth-child(2) { top: 19rem !important; }
  .stack-panels__panel:nth-child(3) { top: 33rem !important; }
  .stack-panels__panel:nth-child(4) { top: 44rem !important; }
  /* Uniform air before the bullet lists (all four cards): keeps the strip cut
     lines in whitespace and the open-card typography consistent. */
  .stack-panels__panel .stack-panel__content h3 + p { margin-bottom: 4.5rem !important; }
  /* Runway for the LAST card: as the container's last child it had zero pin
     distance and left instantly. This spacer gives it a stand of 55rem — the
     same scroll distance as between earlier parkings (66rem panel − 11rem step).
     The spacer is consumed while the stack stands (About approaches hidden
     below the pinned card), so the stack departs and About follows immediately. */
  .stack-panels::after { content: ""; display: block; height: 66rem; }
  /* Unified departure: sticky release happens at (parking top + panel height).
     Equalize that sum across all four cards (top 5/19/33/44 + height 105/91/77/66
     = 110rem each) so they all release in the same instant and the whole parked
     stack slides away as ONE block, exactly as assembled. No margin compensation:
     sticky constraint rects are inset by the element's margins, so negative
     margins cancel the height extension (the bug of the previous attempt).
     The extended lower parts hide behind the following cards. */
  .stack-panels__panel:first-child  { min-height: 105rem !important; }
  .stack-panels__panel:nth-child(2) { min-height: 91rem !important; }
  .stack-panels__panel:nth-child(3) { min-height: 77rem !important; }
}


/* ---------- Menu arrow clearance ---------- */
/* The hover arrow (~1em wide) is pinned to the link's right edge; the text's
   fixed 3rem padding is smaller than the arrow at display sizes, so on the
   longest item the arrow overlapped the last letters. Reserve em-based space
   that scales with the font. */
[data-menu] .header-nav__link > span { padding-right: 1.3em !important; }

/* ---------- Global vertical grid + symmetric header (desktop) ---------- */
@media screen and (min-width:768px) {
  /* All display headings on ONE vertical (253/230 split at any rem scale:
     column-line sections indent content 2.3rem past the grid edge; hero h1 and
     About Us sat on the bare edge). */
  .intro-heading { padding-left: 2.3rem; }
  #about .extra-heading { padding-left: 2.3rem; }
  /* Hero subtext text edge 250 -> 253 (same vertical as everything else). */
  main > section:first-of-type .md\:pl-20 { padding-left: 2.3rem !important; }

  /* Symmetric header edges: visible glyph margin (left) == burger margin (right)
     = 2.4rem. logo.png carries 37/182 transparent left padding inside the file
     (= 3.05rem at its 15rem display cap), hence the negative CSS offset. */
  .header .logo { left: -0.65rem !important; }
  .header [data-menu-opener] { padding-right: 2.4rem !important; }
}

/* ---------- Remove column-separator lines (What we do / Contacts) ---------- */
/* Owner request: drop the faint full-height vertical divider lines framing these
   two sections. Only the separators carry opacity-20 here (verified) — the short
   text-accent bars are untouched. */
#services span.opacity-20.h-full,
#contacts span.opacity-20.h-full { display: none !important; }

/* ---------- Kill hero-bottom white flash during loader fade ---------- */
/* The hero section is bg-white with an absolutely-positioned cover image. As the
   splash fades out, any sub-pixel gap at the section's bottom flashed white for
   ~0.3s. Paint the hero section (and root) the image's own sky blue (#9DCEF6,
   sampled from hero.jpg's bottom edge) so any gap is invisible. */
html { background-color: #9DCEF6; }
main section.min-h-available { background-color: #9DCEF6 !important; }

/* ---------- Collapse the two-stage loader into one reveal ---------- */
/* The template's own preloader animates <main> in via GSAP — visibility, opacity
   AND clip-path — on a slower timer than our #fq-splash. That was the second
   reveal (content appearing ~1.5s after the splash opened the hero image, with a
   stutter under load). Overriding only visibility wasn't enough; the clip-path and
   opacity still held it. Force <main> permanently shown so the template's reveal is
   a no-op — the z-99999 splash covers main and lifts as the SINGLE reveal (hero
   heading + subtext are static, so the whole hero crossfades in at once). This
   single-page site has no swup content-swap transitions to preserve. */
main {
  visibility: visible !important;
  opacity: 1 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ---------- Mobile: comfortable footer tap targets ---------- */
/* Footer nav/social links were only ~18px tall — hard to tap. Pad them
   vertically on mobile (desktop unchanged); the mb-5 spacing is folded into
   the padding so the column height barely changes. */
@media (max-width: 767px) {
  .footer-link { display: inline-block; padding: 7px 0; }
  .footer-link + .footer-link { margin-top: 0; }
  .footer li.mb-5 { margin-bottom: 0 !important; }
}

/* ---------- Mobile: hide header logo over the dark footer ---------- */
/* The fixed white (inverted) logo overlapped the footer's white "Interested in
   working with us?" heading — two white elements colliding illegibly. On mobile
   the floating logo is redundant there anyway (the giant wordmark strip is right
   below), so fade it out over the dark footer. The burger stays for menu access;
   desktop keeps the inverted logo. */
@media (max-width: 767px) {
  [data-header] .logo { transition: opacity .3s ease; }
  [data-header].header--over-dark .logo { opacity: 0 !important; pointer-events: none; }
}