@layer base {
  /* Use the bundled non-natural grokesk inktrap font (single variable file) */
  @font-face {
    font-family: "Non Natural Grotesk Inktrap";
    src: url("../assets/fonts/non-natural-grotesk-inktrap.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    min-height: 100vh;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
  }

  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-4xl);
  }

  h3 {
    font-size: var(--font-size-3xl);
  }

  h4 {
    font-size: var(--font-size-2xl);
  }

  h5 {
    font-size: var(--font-size-xl);
  }

  h6 {
    font-size: var(--font-size-lg);
  }

  p {
    margin-bottom: var(--spacing-md);
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-primary-dark);
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  input,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
}


/* Ensure font path is relative to this CSS file */
@font-face{font-family:'Non Natural Grotesk Inktrap';src:url('../assets/fonts/non-natural-grotesk-inktrap.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --font-primary:'Non Natural Grotesk Inktrap',system-ui,sans-serif;
  --color-bg:#C5B8DD;
  --color-surface:#E8E4F3;
  --color-text:#1A1A2E;
  --color-accent:#FF6B6B;
  --color-cta:#2E2E48;
  --color-card-bg:#D4C8E8;
  --space-xs:clamp(0.5rem,1vw,0.75rem);
  --space-sm:clamp(0.75rem,2vw,1rem);
  --space-md:clamp(1rem,3vw,1.5rem);
  --space-lg:clamp(1.5rem,4vw,2.5rem);
  --space-xl:clamp(2rem,6vw,4rem);
  --text-xs:clamp(0.875rem,1.5vw,1rem);
  --text-sm:clamp(1rem,2vw,1.125rem);
  --text-md:clamp(1.125rem,2.5vw,1.5rem);
  --text-lg:clamp(1.5rem,3.5vw,2.5rem);
  --text-xl:clamp(2rem,5vw,4rem);
  --radius-sm:0.5rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
body{font-family:var(--font-primary);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden}
.skip-link{position:absolute;top:-40px;left:0;background:var(--color-cta);color:#fff;padding:0.5rem 1rem;z-index:100;text-decoration:none}
.skip-link:focus{top:0}
header{position:sticky;top:0;z-index:50;background:rgba(197,184,221,0.98);backdrop-filter:blur(10px);padding:var(--space-sm) var(--space-md);border:2px solid #1A1A2E;border-radius:12px;margin:16px;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
nav{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}
.logo{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-sm);font-weight:700;color:var(--color-text);text-decoration:none}
.logo img{width:32px;height:32px;border-radius:50%}
.nav-links{display:flex;gap:var(--space-md);list-style:none;align-items:center}
.nav-links a{color:var(--color-text);text-decoration:none;font-weight:500;transition:color 0.3s;font-size:var(--text-sm)}
.nav-links a:hover,.nav-links a:focus{color:var(--color-accent)}
.burger-menu{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;z-index:60}
.burger-menu span{display:block;width:25px;height:3px;background:var(--color-text);margin:5px 0;transition:all 0.3s;border-radius:3px}
@media(max-width:768px){
  .nav-links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--color-bg);flex-direction:column;padding:5rem 2rem;box-shadow:-4px 0 12px rgba(0,0,0,0.2);transition:right 0.3s;border-left:2px solid #1A1A2E}
  .nav-links.active{right:0}
  .burger-menu{display:block}
  .burger-menu.active span:nth-child(1){transform:rotate(-45deg) translate(-5px, 6px)}
  .burger-menu.active span:nth-child(2){opacity:0}
  .burger-menu.active span:nth-child(3){transform:rotate(45deg) translate(-5px, -6px)}
}
.runway-hero{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-xl) var(--space-md);position:relative;overflow:hidden}
.hero-content{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}
.hero-text h1{font-size:var(--text-xl);font-weight:900;line-height:1.1;margin-bottom:var(--space-md);color:var(--color-text)}
.hero-text p{font-size:var(--text-sm);margin-bottom:var(--space-lg);max-width:450px;margin-left:auto;margin-right:auto;color:var(--color-text);line-height:1.5}
.cta-group{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}
.btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-weight:700;text-decoration:none;transition:transform 0.3s,box-shadow 0.3s;display:inline-block;border:none;cursor:pointer;font-size:var(--text-sm)}
.btn-primary{background:var(--color-cta);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-primary:hover,.btn-primary:focus{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.hero-picture{max-width:400px;width:100%}
.hero-picture img{width:100%;height:auto;display:block}
section{padding:var(--space-xl) var(--space-md)}
.container{max-width:1200px;margin:0 auto}
.section-card{background:var(--color-card-bg);border:3px solid #1A1A2E;border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-lg);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.section-title{font-size:var(--text-lg);font-weight:900;margin-bottom:var(--space-md);color:var(--color-text)}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
@media(max-width:768px){
  .two-column{grid-template-columns:1fr}
}
.content-text ul{list-style:none;padding:0;margin:var(--space-md) 0}
.content-text ul li{padding:var(--space-xs) 0;padding-left:1.5rem;position:relative}
.content-text ul li:before{content:'•';position:absolute;left:0;color:var(--color-text);font-weight:bold;font-size:1.2em}
.content-image{text-align:center}
.content-image img{max-width:100%;height:auto;border-radius:var(--radius-md)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin:var(--space-lg) 0}
.stat-card{background:rgba(255,255,255,0.5);border:2px solid #1A1A2E;border-radius:var(--radius-md);padding:var(--space-lg);text-align:center}
.stat-label{font-size:var(--text-xs);color:var(--color-text);margin-bottom:var(--space-xs);font-weight:600}
.stat-value{font-size:var(--text-lg);font-weight:900;color:var(--color-text)}
.form-wrapper{max-width:600px;margin:0 auto}
.form-group{margin-bottom:var(--space-md)}
.form-group label{display:block;margin-bottom:var(--space-xs);font-weight:600;color:var(--color-text)}
.form-group input,.form-group textarea{width:100%;padding:var(--space-sm);border:2px solid #1A1A2E;border-radius:var(--radius-sm);font-family:var(--font-primary);font-size:var(--text-sm);background:rgba(255,255,255,0.8)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-accent)}
footer{background:var(--color-card-bg);border-top:3px solid #1A1A2E;padding:var(--space-xl) var(--space-md)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg);margin-bottom:var(--space-lg)}
.footer-col h3,.footer-col h4{margin-bottom:var(--space-sm);font-size:var(--text-md)}
.footer-col ul{list-style:none;padding:0}
.footer-col ul li{margin-bottom:var(--space-xs)}
.footer-col a{color:var(--color-text);text-decoration:none;transition:color 0.3s}
.footer-col a:hover{color:var(--color-accent)}
.footer-bottom{text-align:center;padding-top:var(--space-lg);border-top:2px solid rgba(26,26,46,0.2);font-size:var(--text-xs);color:var(--color-text)}