/* ==========================================================================
   Palettiq Studio - design tokens + base styles
   Tokens sourced from the v4.0 brand guide, NOT from the live site.
   The live site still renders the retired v1.2 magenta (#E94CF2); using it
   would contradict the current brand system.
   ========================================================================== */

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* --- FOUNDATION (must dominate) --- */
  --ink: #171719;
  --ivory: #F8F6F1;
  --ground: #FFFFFF;

  /* --- CREATIVE PALETTE - surfaces only, never small text --- */
  --lavender: #B9B9F9;
  --sky: #CCF2FF;
  --mint: #49EAD7;
  --blush: #FFD2D5;
  --butter: #FFF1CA;

  /* --- ACCENT ---
     Mint is the brand accent, but it is 1.39:1 on Ivory and FAILS WCAG as text.
     Use --accent for FILLS only (Ink on Mint = 11.96:1).
     Use --accent-text for any text or link. */
  --accent: #49EAD7;
  --accent-text: #237E74;

  /* --- derived neutrals, biased warm to sit with Ivory --- */
  --ink-soft: #5B5B63;
  --ink-faint: #8A8A93;
  --border: #E4E0D8;
  --border-soft: #EFEBE3;

  /* --- semantic --- */
  --success: #1F6B4A;
  --danger: #A33A2E;

  /* --- signature surface ---
     The Creative IQ Gradient is a MESH. It is never rebuilt in CSS -
     the artwork is the specification. Place it, do not regenerate it. */
  --grad-fallback: #F2F4F2;

  --font-heading: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  --max-width: 1180px;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(23,23,25,.06);
  --shadow-lift: 0 12px 32px rgba(23,23,25,.12);
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-size: 1.15rem; line-height: 1.45; }
p  { margin: 0 0 1em; max-width: 640px; }

/* The brand's signature device. Ink, never a palette colour. */
.label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--ink);
  margin: 0 0 .9rem;
}

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3.5rem); }
.container--narrow { max-width: 780px; }

section { padding: 7rem 0; }
.section--tight { padding: 4.5rem 0; }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--ground); }
.section--ink { background: var(--ink); color: var(--ivory); }
.section--ink h2, .section--ink h3, .section--ink .label { color: var(--ivory); }
.section--ink p { color: rgba(248,246,241,.82); }

/* Centred section headers: base p has max-width 640px which constrains
   block elements even when text-align is centre. Override both. */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .label,
.section-header h2,
.section-header p { max-width: none; margin-left: auto; margin-right: auto; }
.section-header p { max-width: 620px; margin-top: 1rem; color: var(--ink-soft); }
.section--ink .section-header p { color: rgba(248,246,241,.75); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.9rem; border-radius: 999px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Mint as a FILL with Ink text - 11.96:1, the accessible way to use the accent */
.btn--primary { background: var(--accent); color: var(--ink); box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.section--ink .btn--ghost { border-color: rgba(248,246,241,.5); color: var(--ivory); }
.section--ink .btn--ghost:hover { background: var(--ivory); color: var(--ink); }
.btn svg { width: 16px; height: 16px; }

a.text-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
a.text-link:hover { color: var(--ink); }

/* Scroll animations */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.stagger.visible > * { opacity: 1; transform: none; }
.stagger.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger.visible > *:nth-child(5) { transition-delay: .32s; }
.stagger.visible > *:nth-child(6) { transition-delay: .40s; }

@media (max-width: 900px) {
  section { padding: 5rem 0; }
  .section-header { margin-bottom: 2.5rem; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  section { padding: 3.5rem 0; }
  .section-header { margin-bottom: 2rem; }
  h2 { font-size: 1.5rem !important; }
  .btn { width: 100%; font-size: .85rem; padding: .8rem 1.4rem; }
  /* nav CTA must stay inline - full-width here overflows the viewport */
  .nav__cta { width: auto; }
}

/* ---------- branded cursor ---------- */
/* Palettiq P/Q monogram as the default pointer, with a Mint halo variant on
   interactive elements. NOTE: a cursor is a static raster handed to the OS -
   it cannot be transitioned, animated or filtered in CSS, so the "glow on
   hover" is a SECOND IMAGE swapped in, not an effect on the first.
   48x48 (was 32x32, enlarged 2026-09-08). Browsers cap cursor images -
   anything over 128x128 is ignored outright, and over ~64px some platforms
   scale or drop it, so 48 is the safe upper-middle. Hotspot 24 24 = centre.
   Every rule keeps a standard keyword fallback (auto / pointer / text) so the
   site behaves normally wherever SVG cursors are unsupported - Safari in
   particular is inconsistent. */
body { cursor: url("../images/cursor-monogram.svg?v=20260908c") 24 24, auto; }

/* Interactive elements deliberately revert to the STANDARD hand pointer.
   The branded cursor is a finishing touch, but it carries no affordance - a
   visitor cannot tell from it whether something is clickable. Interactive
   elements therefore hand back a SYSTEM cursor, and the change from monogram to
   system cursor is itself the "you can click this" prompt.
   `default` (arrow), NOT `pointer` (hand) - the brand owner chose the arrow for
   consistency on 2026-09-08. Note this overrides `cursor: pointer` on the base
   .btn rule earlier in this file; it wins on source order, same specificity.
   (This is why cursor-monogram-glow.svg is currently unused.) */
a, button, .btn, [role="button"], summary, .faq__q, label, select {
  cursor: url("../images/cursor-monogram.svg?v=20260908c") 24 24, auto;
}
/* js/cursor-hover.js adds .cursor-ready after ~2.5s of resting on an element.
   Declared AFTER .btn so it wins on source order at equal specificity. Input
   selectors below carry an attribute (0,1,1) so text fields keep the I-beam. */
.cursor-ready { cursor: default; }

/* Text entry keeps the I-beam: the caret position matters more than branding. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea {
  cursor: text;
}


/* ---------- brand glyph line ---------- */
/* The ✦ + • + ◇ signature, repeated under each section heading for brand
   consistency. Same motif as the Telegram bio, the Flodesk form and the launch
   Instagram posts. text-align is set explicitly so it also works outside
   .section-header (the showreel statement line).
   Specificity note: `.section-header p` (0,1,1) sets max-width, margin-top and
   ink-soft colour, so the `.section-header .glyphs` (0,2,0) selector is needed
   to win. Likewise `.section--ink .section-header p` (0,2,1) is beaten by
   `.section--ink .section-header .glyphs` (0,3,0) - without that the glyphs
   would inherit Ink on the Ink section and be invisible. */
.glyphs,
.section-header .glyphs {
  /* `auto` side margins, not 0: text-align centres the TEXT inside the box,
     auto margins centre the BOX itself. With both, the glyphs stay centred
     whether the paragraph fills the container or something constrains its
     width (e.g. the `p { max-width: 640px }` rule earlier in this file). */
  margin: .85rem auto;   /* equal space above and below */
  max-width: none;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: .18em;
  /* letter-spacing also applies AFTER the last character, so the glyphs sit
     ~.18em left of true centre. text-indent pushes them back by the same
     amount, restoring optical centring. Keep the two values identical. */
  text-indent: .18em;
  font-weight: 600;
  color: var(--ink);
}
.section--ink .glyphs,
.section--ink .section-header .glyphs { color: var(--ivory); }

/* Glyphs set INLINE inside a heading (rather than as their own line). Inherits
   the heading's size, weight and colour on purpose; only the tracking is added,
   with a matching text-indent so the trailing letter-space does not pull the
   heading off centre. aria-hidden on the span keeps screen readers from
   announcing the character names mid-sentence. */
.glyphs-inline { letter-spacing: .18em; text-indent: .18em; white-space: nowrap; }

/* #mechanism lays its heading out in a grid-2 column, not a .section-header, so
   it never got the `.section-header p { margin-top: 1rem }` breathing room. With
   `h1-h4 { margin: 0 }` and `p { margin: 0 0 1em }` there was literally no gap
   between this heading and the paragraph under it. */
#mechanism h2 { margin-bottom: 1rem; }

/* The showreel statement (heading + glyph line) sits outside .section-header, so
   it had no centring PARENT - each child was centring itself independently.
   This wrapper makes it structurally identical to a .section-header block, which
   is how every other heading/glyph pair on the page is centred. */
.showreel__statement { text-align: center; }

/* Netlify injects a "Powered by Netlify" badge at DEPLOY time - it is not in our
   source, so there is no markup to delete and a redeploy re-injects it every
   time. It mounts as an iframe appended to <body> by /.netlify/scripts/hud:
   #nl-badge-frame for the public variant, #nl-hud-frame for the owner variant.
   Both carry inline styles set via style.cssText with NO !important, so an
   !important rule here wins over them. Suppressing it here (rather than per
   page) means the single stylesheet covers all six pages. If Netlify renames
   the frame ids this stops working - re-check the served HTML for the injected
   <script src="/.netlify/scripts/hud"> tag and the id it mounts. */
#nl-badge-frame,
#nl-hud-frame { display: none !important; }