/* ---- Montserrat alias ----
   The self-hosted family is registered as "Montserrat Variablefont Wght" (the
   name Webflow generated), but 89 declarations across the site ask for bare
   "Montserrat" because every page also pulled it from Google. These two faces
   point the bare name at the same local files, so the Google request can be
   dropped without 89 rules silently falling back to Arial.

   The weight range is the font's true 100-900. The Semibold 600 ceiling is
   enforced in css/mave-surface.css, not here — clamping the face to 100 600
   would make any stray 700 render as Arial rather than as a slightly-too-bold
   Montserrat, which is the worse failure.

   Paths are relative to this file (/css/ -> /fonts/). */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations'),
      url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2-variations'),
      url('../fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* MAVE Design — CTA component library
   Single source of truth for call-to-action styling, from the Figma style guide.
   Default state: blue → purple gradient.  Hover: orange → red gradient.

   Variants
     .mave-cta                base (Roboto Light, flex, shared transitions)
     .mave-cta--main          primary hero button   — filled, 60px tall, radius 3px
     .mave-cta--viewall       secondary button      — filled, radius 5px
     .mave-cta--submit        form submit           — filled pill (radius 40px)
     .mave-cta--outline       outlined pill, gradient text ("Let's build something", nav Contact)
       .mave-cta--icon-right    nudges a trailing icon on hover
     .mave-cta--link          text link with icon   — gradient text (View My Showcase)

   Filled variants cross-fade to the hover gradient via a ::before overlay.
   Gradient-text variants clip the gradient to the glyphs; their icons use
   currentColor so they track the same accent (blue → orange on hover).
*/
:root{
  --cta-c1:#839dd1; --cta-c2:#5b4ba3;            /* default: blue  → purple */
  --cta-h1:#ff6507; --cta-h2:#cf0332;            /* hover:   orange → red   */
  --cta-text:#cdd0e6;                            /* standard text gray (outline/link/nav rest state) */
  --cta-grad:linear-gradient(145deg,var(--cta-c1) 0%,var(--cta-c2) 100%);
  --cta-grad-hover:linear-gradient(120deg,var(--cta-h1) 0%,var(--cta-h2) 100%);
  /* The full brand arc. Blue and orange are two ends of one continuous hue
     sweep, not two palettes. Use for atmospheric moments: hero taglines,
     banners, email signatures, OG images, case-study headers.
     Cool end = structure at rest. Warm end = interaction.
     On anything clickable warm still means contact; see documents/MAVE_Brand_Guidelines.md */
  --brand-spectrum:linear-gradient(115deg,var(--cta-c1) 0%,var(--cta-c2) 32%,var(--cta-h2) 72%,var(--cta-h1) 100%);
  /* Text-safe arc. Same hues (220° 252° 350° 23°) with the two middle stops
     lifted into the legible band. The surface spectrum above must NOT be used
     for gradient text on the dark ground: its purple lands at 2.44:1 and its
     red at 3.04:1, so both fail even the 3:1 large-text floor. Every stop here
     clears 4.5:1 on #1b1b1b (5.11 to 6.32). */
  --spectrum-t1:#9b8ae0;  /* lifted purple */
  --spectrum-t2:#f0556f;  /* lifted red    */
  /* Darkening scrim for white text over a brand gradient fill. Measured to lift
     white past 4.5:1 on every stop of both --cta-grad and --cta-grad-hover. */
  --cta-scrim:rgba(12,12,20,.28);
  --brand-spectrum-text:linear-gradient(115deg,var(--cta-c1) 0%,var(--spectrum-t1) 32%,var(--spectrum-t2) 72%,var(--cta-h1) 100%);
}

/* Gradient text swept across the full brand arc. Tagline and display moments
   only. Uses the text-safe stops. */
.mv-spectrum-text{
  background:var(--brand-spectrum-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- base ---- */
.mave-cta{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Roboto',Verdana,sans-serif;font-weight:300;font-size:1rem;line-height:1.25;
  text-decoration:none;cursor:pointer;border:none;white-space:nowrap;
  transition:color .3s ease,border-color .3s ease,transform .25s ease;
}

/* ---- filled variants ---- */
.mave-cta--main,.mave-cta--viewall,.mave-cta--submit{
  position:relative;z-index:0;overflow:hidden;
  color:#fff;-webkit-text-fill-color:#fff;
  text-transform:uppercase;letter-spacing:.055em;
  /* A gradient fill is only as accessible as its lightest stop. White on the raw
     brand gradient measures 2.72:1 at rest (#839dd1) and 2.95:1 on hover
     (#ff6507) — both fail AA on the site's primary control. This scrim lifts
     every stop past 4.5:1 while keeping the gradient clearly readable. Do not
     remove it without re-measuring. */
  background-image:linear-gradient(var(--cta-scrim),var(--cta-scrim)),var(--cta-grad);
  /* The global `a` rule sets background-clip:text, which clips this gradient into the
     (white) glyphs and makes the button look background-less. Reset to a normal fill. */
  -webkit-background-clip:padding-box;background-clip:padding-box;
}
.mave-cta--main::before,.mave-cta--viewall::before,.mave-cta--submit::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:linear-gradient(var(--cta-scrim),var(--cta-scrim)),var(--cta-grad-hover);
  opacity:0;transition:opacity .3s ease;z-index:-1;
}
.mave-cta--main:hover::before,.mave-cta--viewall:hover::before,.mave-cta--submit:hover::before{opacity:1;}

.mave-cta--main{display:flex;width:100%;max-width:20rem;min-height:60px;margin:.9375rem auto 0;padding:15px 20px;border-radius:3px;}
.mave-cta--viewall{display:flex;width:100%;max-width:20rem;padding:15px 20px;border-radius:5px;}
.mave-cta--submit{padding:13.6px 30.4px;border-radius:40px;}

/* ---- outline variant (gradient ring border; gray text -> orange gradient on hover) ----
   The ring is a masked pseudo-element: a rounded pill can't take a gradient via
   plain `border`, and the two-layer background trick would fill the middle. ::before
   holds the blue ring, ::after the orange one crossfading in on hover. */
.mave-cta--outline{
  position:relative;
  padding:11px 21px;border-radius:40px;
  border:none;background-color:transparent;
  color:var(--cta-text);
  background-image:linear-gradient(var(--cta-text),var(--cta-text));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mave-cta--outline::before,.mave-cta--outline::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--cta-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.mave-cta--outline::after{background:var(--cta-grad-hover);opacity:0;transition:opacity .3s ease;}
.mave-cta--outline:hover{color:var(--cta-h1);background-image:var(--cta-grad-hover);}
.mave-cta--outline:hover::after{opacity:1;}
.mave-cta--outline svg{width:17px;height:17px;flex:none;transition:transform .3s ease;}
.mave-cta--icon-right:hover svg{transform:translateX(4px);}

/* ---- text link variant ---- */
.mave-cta--link{
  gap:.55rem;padding:0;
  color:var(--cta-text);
  background-image:linear-gradient(var(--cta-text),var(--cta-text));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mave-cta--link:hover{color:var(--cta-h1);background-image:var(--cta-grad-hover);}
.mave-cta--link img,.mave-cta--link svg{flex:none;}

/* ---- showcase text link: Figma badge icon left, gray text -> orange gradient on hover ---- */
.mave-showcase-link{font-size:1rem;}
.mave-showcase-link .mv-figma-badge{width:30px;height:30px;flex:none;}
.mave-showcase-link:hover .mv-figma-badge ellipse{fill:url(#figmaBadgeHover);}
.mave-showcase-link:hover .mv-figma-badge path[stroke]{stroke:url(#figmaBadgeHover);}

/* ---- site-wide text links ----
   Every plain <a> inherits gradient text (background-clip:text) from the global `a` rule
   in mave-design.webflow.css, so swapping its background-image is all a hover needs.
   Component CTAs (.mave-cta) manage their own hover and are excluded. */
a:not(.mave-cta):hover{background-image:var(--cta-grad-hover);}

/* ---- animated underline for text links ----
   Orange bar sweeps in from the left on hover. Applied to every text link
   (See the work, Get In Touch, skip-the-form, View My Showcase; the nav links
   get the same treatment in js/components.js). Supersedes the one-off Webflow
   IX2 .hover-line under "See the work". */
.link-block.hero,.mave-story-link,.mf-alt a,.mave-cta--link{position:relative;}
.link-block.hero::after,.mave-story-link::after,.mf-alt a::after,.mave-cta--link::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:20px;
  background:linear-gradient(90deg,var(--cta-h1),var(--cta-h2));
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.link-block.hero:hover::after,.mave-story-link:hover::after,.mf-alt a:hover::after,.mave-cta--link:hover::after{transform:scaleX(1);}
.animation-link-wrapper .hover-line{display:none;}
@media (prefers-reduced-motion: reduce){
  .link-block.hero::after,.mave-story-link::after,.mf-alt a::after,.mave-cta--link::after{transition:none;}
}

@media (prefers-reduced-motion: reduce){
  .mave-cta,.mave-cta *{transition:none !important;}
}