/* =========================================================================
   TreyTech Studios — Design Tokens
   Colors, type, spacing, shadows, radii.
   Import once at the top of any page.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Brand display face: Soiren. Headlines, studio names, hero copy.
   Hosted locally in /fonts. */
@font-face {
  font-family: "Soiren";
  src: url("/fonts/Soiren.ttf") format("truetype"),
       url("/fonts/Soiren.otf") format("opentype"),
       url("fonts/Soiren.ttf") format("truetype"),
       url("fonts/Soiren.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Brand body face: Metara. Card titles, subheads, paragraphs, UI text.
   Hosted locally in /fonts. */
@font-face {
  font-family: "Metara";
  src: url("/fonts/Metara.ttf") format("truetype"),
       url("/fonts/Metara.otf") format("opentype"),
       url("fonts/Metara.ttf") format("truetype"),
       url("fonts/Metara.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --tt-brand:           #12d6ff;        /* logo blue — primary brand */
  --tt-brand-bright:    #5ee9ff;        /* hover / lighter accent  */
  --tt-brand-deep:      #00b4e6;        /* press / darker accent   */
  --tt-brand-ink:       #0a3d5c;        /* on-brand text ink       */

  /* ---------- NEUTRAL (NAVY → PAPER) ---------- */
  --tt-midnight:        #060a12;        /* hero backgrounds        */
  --tt-navy:            #0b1424;        /* card / surface dark     */
  --tt-navy-2:          #14223b;        /* elevated dark surface   */
  --tt-slate:           #2b3a55;        /* dark border / divider   */
  --tt-graphite:        #9aa7c2;        /* secondary text on dark  */
  --tt-mist:            #d2dbec;        /* tertiary text           */
  --tt-fog:             #d8dee8;        /* light border            */
  --tt-bone:            #eef1f5;        /* surface tint            */
  --tt-paper:           #f7f8fb;        /* page background light   */
  --tt-white:           #ffffff;

  /* ---------- SPOTLIGHT ACCENTS ---------- */
  --tt-neon:            #ff4d00;        /* neon orange — rare CreativeSOS / Active highlights */
  --tt-spotlight:       #d8252b;        /* held in reserve for Experience curtain treatments  */
  --tt-amber:           #f5a623;        /* deprecated — prefer --tt-neon */
  --tt-mint:            #2bbf8a;        /* success (UI status only)                          */

  /* ---------- SEMANTIC: FG/BG ---------- */
  --fg-1:               var(--tt-midnight);   /* primary text on light */
  --fg-2:               #3a4763;              /* secondary text        */
  --fg-3:               #6b7689;              /* tertiary / meta       */
  --fg-on-dark-1:       var(--tt-white);
  --fg-on-dark-2:       #d3dbe8;
  --fg-on-dark-3:       var(--tt-mist);

  --bg-1:               var(--tt-paper);      /* page                 */
  --bg-2:               var(--tt-white);      /* card                 */
  --bg-3:               var(--tt-bone);       /* subtle surface       */
  --bg-dark-1:          var(--tt-midnight);   /* hero / inverse page  */
  --bg-dark-2:          var(--tt-navy);
  --bg-dark-3:          var(--tt-navy-2);

  --border-1:           var(--tt-fog);
  --border-2:           #c5cdd9;
  --border-dark:        var(--tt-slate);

  /* ---------- TYPE FAMILIES ---------- */
  /* Soiren leads display (Display, H1, H2, hero copy).
     Metara handles body and lower headings (H3-H5, paragraphs, UI).
     Montserrat / Inter are fallbacks. */
  --font-display:  "Soiren", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Metara", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (display-led, editorial) ---------- */
  --fs-eyebrow:    11px;   /* STUDIO 01 label, ALL CAPS */
  --fs-meta:       13px;
  --fs-body:       16px;
  --fs-lead:       19px;
  --fs-h6:         16px;
  --fs-h5:         20px;
  --fs-h4:         26px;
  --fs-h3:         34px;
  --fs-h2:         48px;
  --fs-h1:         68px;
  --fs-display:    104px;  /* hero number / monumental */

  --lh-tight:      1.02;
  --lh-snug:       1.15;
  --lh-normal:     1.45;
  --lh-loose:      1.6;

  --ls-tightest:   -0.04em;
  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.06em;
  --ls-widest:     0.22em;   /* eyebrows / section labels */

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;
  --fw-extra:      800;
  --fw-black:      900;

  /* ---------- SPACING (8px grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- RADII ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  22px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 2px rgba(10, 25, 47, .06), 0 1px 1px rgba(10, 25, 47, .04);
  --shadow-2: 0 6px 16px -6px rgba(10, 25, 47, .12), 0 2px 6px rgba(10, 25, 47, .06);
  --shadow-3: 0 18px 36px -12px rgba(10, 25, 47, .22), 0 6px 14px rgba(10, 25, 47, .08);
  --shadow-glow: 0 0 0 4px rgba(56, 182, 255, .22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
.tt-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--tt-brand);
}

.tt-eyebrow--ink {
  color: var(--fg-3);
}

.tt-h1, h1.tt {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.tt-h2, h2.tt {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.tt-h3, h3.tt {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.tt-h4, h4.tt {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.tt-h5, h5.tt {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.tt-tagline {
  /* "Where strategy becomes identity — and identity becomes momentum." */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  font-style: italic;
  color: var(--fg-2);
}

.tt-studio-name {
  /* Reserved: the FAT FUNKY treatment. Only for studio names — "BRAND STUDIO", "AI TRANSFORMATION". */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1;
  color: var(--fg-1);
}

.tt-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-display);
  line-height: .92;
  letter-spacing: var(--ls-tightest);
  color: var(--fg-1);
}

.tt-lead, p.tt-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tt-body, p.tt {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.tt-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.tt-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* dark-surface inversions */
.on-dark .tt-h1, .on-dark .tt-h2, .on-dark .tt-h3,
.on-dark .tt-h4, .on-dark .tt-h5,
.on-dark .tt-display { color: var(--fg-on-dark-1); }
.on-dark .tt-body, .on-dark .tt-lead, .on-dark .tt-tagline { color: var(--fg-on-dark-2); }
.on-dark .tt-meta { color: var(--fg-on-dark-3); }


/* ───────── PARALLAX / SCROLL REVEAL (all pages, no JS) ───────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    section {
      animation: tt-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes tt-parallax {
      from { opacity: .25; transform: translateY(48px); }
      to   { opacity: 1;  transform: translateY(0); }
    }
    /* gentle depth drift on hero radial glows + closing washes */
    .xp-hero::before, .xp-closing::before, .about-hero::before,
    .h3-hero::after, .h3-pull::before {
      animation: tt-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes tt-drift {
      from { transform: translateY(-6%) scale(1.05); }
      to   { transform: translateY(6%) scale(1.05); }
    }
  }
}


/* ───────── CONTACT POPUP (all pages) ───────── */
#tt-contact-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: #04253b; border: 0; cursor: pointer; padding: 14px 22px; border-radius: 999px;
  background: linear-gradient(115deg,#bff6ff,#12d6ff,#bff6ff); background-size: 240% 100%;
  box-shadow: 0 14px 40px -10px rgba(18,214,255,.6); animation: tt-cta-shim 6s linear infinite;
}
@keyframes tt-cta-shim { 0%{background-position:0% 50%} 100%{background-position:240% 50%} }
#tt-contact-modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 24px;
}
#tt-contact-modal[data-open] { display: flex; }
.tt-cm-card {
  width: min(460px,100%); background: #121519; border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 36px; position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
.tt-cm-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.02em; color: #fff; margin: 0 0 4px; }
.tt-cm-card p { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.6); margin: 0 0 8px; }
.tt-cm-card input, .tt-cm-card textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px;
  color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 12px 14px; outline: none;
}
.tt-cm-card input:focus, .tt-cm-card textarea:focus { border-color: #12d6ff; }
.tt-cm-card textarea { min-height: 96px; resize: vertical; }
.tt-cm-send {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: #04253b; border: 0; cursor: pointer; padding: 14px; border-radius: 999px; margin-top: 4px;
  background: linear-gradient(115deg,#bff6ff,#12d6ff,#bff6ff); background-size: 240% 100%;
  animation: tt-cta-shim 6s linear infinite;
}
.tt-cm-x { position: absolute; top: 16px; right: 18px; background: 0; border: 0; color: rgba(255,255,255,.6); font-size: 26px; cursor: pointer; line-height: 1; }


/* ───────── TT-RESPONSIVE-OPT (phone + tablet) ───────── */
@media (max-width: 900px) {
  .tt-wrap { padding-left: 22px !important; padding-right: 22px !important; }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .tt-disc-grid, .tt-hww-grid, .tt-hww-pricing, .tt-foot-grid,
  .h3-flow, .ten-grid, .team-grid, .h4-partners, .xp-cards-grid, .xp-intro-grid { grid-template-columns: 1fr !important; }
  .h3-flow .h3-node { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 600px) {
  .tt-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding-top: 52px !important; padding-bottom: 52px !important; }
  h1 { font-size: clamp(34px, 11vw, 56px) !important; line-height: 1.02 !important; }
  h2 { font-size: clamp(26px, 8vw, 40px) !important; }
  .ten-grid { grid-template-columns: 1fr 1fr !important; }
  #tt-contact-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 12px; }
  .tt-cm-card { padding: 26px; }
}