/* =========================================================
   KEYZ STUDIO PILATES — brand system
   Derived from studio photos + logo. Cobalt-indigo brand
   blue, cream paper, sage wall, warm wood. Bold grotesque
   display + refined serif. "KEYZ to life."
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300..900;1,400..700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');

:root{
  /* ---- brand ---- */
  --blue:        #2206c2;   /* logo ultramarine-indigo (primary) */
  --blue-bright: #2a48ea;   /* mirror-decal electric blue (accent) */
  --blue-deep:   #150482;   /* pressed / deep */
  --blue-a08:    rgba(34,6,194,.08);
  --blue-a12:    rgba(34,6,194,.12);
  --blue-a20:    rgba(34,6,194,.20);

  --ink:    #15140d;        /* warm near-black text */
  --ink-2:  #4a473d;        /* secondary text */
  --ink-3:  #837e6f;        /* muted */

  --cream:   #f3efe6;       /* paper / poster cream */
  --paper:   #faf8f2;       /* lightest page bg */
  --white:   #ffffff;
  --sage:    #c7cfc2;       /* studio wall green */
  --sage-lt: #e1e6dc;
  --sage-dp: #97a591;
  --wood:    #b06a35;       /* warm wood slat */
  --wood-dp: #8a5026;

  --hair:    rgba(21,20,13,.12);
  --hair-2:  rgba(21,20,13,.07);

  /* ---- type ---- */
  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Spectral', Georgia, serif;

  /* ---- shape ---- */
  --r-sm: 4px;
  --r:    10px;
  --r-lg: 20px;
  --shadow: 0 18px 50px -28px rgba(21,20,13,.4);
  --shadow-sm: 0 8px 24px -16px rgba(21,20,13,.35);

  --maxw: 1240px;
  --nav-h: 124px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--blue); color:var(--cream); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
.section{ padding:clamp(64px,10vw,140px) 0; }
@media(max-width:680px){ .wrap{ padding-inline:20px; } }

/* ---------- type scale ---------- */
.display{
  font-family:var(--sans);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  font-size:clamp(3rem,11vw,9.5rem);
}
h1,.h1{ font-family:var(--sans); font-weight:800; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6vw,4.6rem); text-transform:uppercase; }
h2,.h2{ font-family:var(--sans); font-weight:800; line-height:1; letter-spacing:-.015em;
  font-size:clamp(1.9rem,4.2vw,3.2rem); text-transform:uppercase; }
h3,.h3{ font-family:var(--sans); font-weight:700; line-height:1.05; letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.4vw,1.6rem); }
.serif{ font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:0; }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; }

/* eyebrow / section label */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue); display:inline-block; }
.eyebrow.no-rule::before{ display:none; }

.lead{ font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.5; color:var(--ink-2); font-weight:400; }
.muted{ color:var(--ink-3); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 28px; border-radius:var(--r-sm);
  transition:transform .15s var(--ease), background .2s, color .2s, border-color .2s;
  border:1.5px solid transparent; white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--blue); color:var(--cream); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-light{ border-color:rgba(243,239,230,.5); color:var(--cream); }
.btn-light:hover{ background:var(--cream); color:var(--blue); border-color:var(--cream); transform:translateY(-2px); }
.btn-wa{ background:#1faf54; color:#fff; }
.btn-wa:hover{ background:#198f45; transform:translateY(-2px); }

/* link with arrow */
.arrow-link{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue); transition:gap .2s var(--ease); }
.arrow-link:hover{ gap:15px; }
.arrow-link svg{ width:16px; height:16px; }

/* ============================================================
   HEADER / NAV  (injected by site.js)
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(250,248,242,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair-2);
  transition:background .3s, border-color .3s, transform .35s var(--ease);
}
.nav.hide{ transform:translateY(-100%); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:92px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 14px; border-radius:var(--r-sm); color:var(--ink-2);
  transition:color .15s, background .15s; position:relative;
}
.nav-links a:hover{ color:var(--blue); }
.nav-links a.active{ color:var(--blue); }
.nav-links a.active::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--blue); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; }
.nav-burger span{ display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:.25s; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:.25s; }
.nav-burger span::before{ top:-7px; } .nav-burger span::after{ top:7px; }
body.menu-open .nav-burger span{ background:transparent; }
body.menu-open .nav-burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav-burger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:49; background:var(--blue);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:90px 32px 40px; transform:translateY(-100%); transition:transform .45s var(--ease);
  pointer-events:none;
}
body.menu-open .mobile-menu{ transform:translateY(0); pointer-events:auto; }
.mobile-menu a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:2rem;
  letter-spacing:-.01em; color:var(--cream); padding:8px 0; border-bottom:1px solid rgba(243,239,230,.15); }
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu .mm-foot{ margin-top:28px; color:rgba(243,239,230,.7); font-size:.85rem; letter-spacing:.04em; }
.mobile-menu .mm-foot a{ font-size:.95rem; display:inline; border:none; padding:0; text-decoration:underline; }

@media(max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .nav-burger{ display:flex; }
}

/* floating whatsapp */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:45;
  width:58px; height:58px; border-radius:50%; background:#1faf54;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(31,175,84,.6); transition:transform .2s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ============================================================
   FOOTER (injected)
   ============================================================ */
.footer{ background:var(--ink); color:var(--cream); padding:80px 0 36px; position:relative; overflow:hidden; }
.footer .wrap{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(243,239,230,.14); }
.footer-grid img{ height:140px; margin-bottom:30px; }
.footer-grid p{ color:rgba(243,239,230,.62); font-size:.95rem; max-width:34ch; }
.footer-col h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:18px; font-weight:700; }
.footer-col a, .footer-col p.fl{ display:block; color:rgba(243,239,230,.78); font-size:.95rem; margin-bottom:11px; transition:color .15s; }
.footer-col a:hover{ color:var(--cream); }
.footer-bot{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:28px; flex-wrap:wrap; }
.footer-bot span{ color:rgba(243,239,230,.45); font-size:.8rem; letter-spacing:.03em; }
.footer-mark{ position:absolute; right:-2%; bottom:-12%; font-family:var(--sans); font-weight:900;
  font-size:clamp(7rem,22vw,20rem); color:rgba(42,72,234,.13); line-height:.8; letter-spacing:-.03em; pointer-events:none; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   SCATTERED "KEYZ" MOTIF (mirror decals)
   ============================================================ */
.keyz-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.keyz-field span{
  position:absolute; font-family:var(--sans); font-weight:800; text-transform:uppercase;
  color:var(--blue-bright); letter-spacing:-.02em; line-height:.85; user-select:none;
}

/* checkerboard strip */
.checker{
  height:14px; width:100%;
  background-image:
    linear-gradient(45deg,var(--ink) 25%,transparent 25%),
    linear-gradient(-45deg,var(--ink) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--ink) 75%),
    linear-gradient(-45deg,transparent 75%,var(--ink) 75%);
  background-size:14px 14px;
  background-position:0 0,0 7px,7px -7px,-7px 0;
}

/* thin tall logo-bar accent */
.bar{ display:inline-block; width:5px; background:var(--blue); border-radius:3px; }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
@media(prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ---------- shared cards / utilities ---------- */
.tag{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); background:var(--blue-a08); padding:6px 12px; border-radius:100px; }
.divider-line{ height:1px; background:var(--hair); width:100%; }
.page-top{ padding-top:calc(var(--nav-h) + 8px); }

/* ============================================================
   NAV — ghost mode (transparent over a full-bleed hero)
   ============================================================ */
.nav-logo{ position:relative; display:flex; align-items:center; }
.nav-logo .lg-cream{ position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .35s var(--ease); }
.nav--ghost{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.nav--ghost .nav-logo .lg-blue{ opacity:0; }
.nav--ghost .nav-logo .lg-cream{ opacity:1; }
.nav--ghost .nav-links a{ color:rgba(243,239,230,.92); text-shadow:0 1px 14px rgba(21,20,13,.55); }
.nav--ghost .nav-links a:hover,.nav--ghost .nav-links a.active{ color:#fff; }
.nav--ghost .nav-links a.active::after{ background:#fff; }
.nav--ghost .nav-burger span,.nav--ghost .nav-burger span::before,.nav--ghost .nav-burger span::after{ background:var(--cream); }
.nav--ghost .btn-primary{ background:var(--cream); color:var(--blue); }
.nav--ghost .btn-primary:hover{ background:#fff; color:var(--blue-deep); }

/* ============================================================
   MARQUEE strip (brand motion)
   ============================================================ */
.marquee{ background:var(--blue); color:var(--cream); overflow:hidden; padding:20px 0; display:flex; }
.marquee-track{ display:flex; align-items:center; gap:0; white-space:nowrap; animation:marq 32s linear infinite; will-change:transform; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.01em; padding:0 26px; display:inline-flex; align-items:center; gap:26px; }
.marquee-track span::after{ content:""; width:9px; height:9px; background:var(--blue-bright); border-radius:2px; transform:rotate(45deg); display:inline-block; }
.marquee-track .mq-it{ font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; color:#9db8ff; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* Ken Burns + slide text keyframes (used by hero slider) */
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }