/* Inter + Playfair Display Italic (latin subset), self-hosted from Google Fonts — the site's own families. Inter Display self-hosted from rsms.me/inter (OFL). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-normal-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-normal-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-normal-600.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Inter-normal-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/PlayfairDisplay-italic-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/InterDisplay-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/InterDisplay-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/InterDisplay-SemiBold.woff2") format("woff2")}

/* Agenciy — color primitives + semantic. Source: agenciy.framer.website (extracted 2026-10-26) */
:root {

  /* Neutral ramp (the whole palette is monochrome) */
  --neutral-0:    #000000;
  --neutral-50:   #0c0c0c;
  --neutral-75:   #0e0e0e;
  --neutral-100:  #1b1b1b;
  --neutral-125:  #1d1d1d;
  --neutral-150:  #262626;
  --neutral-175:  #292929;
  --neutral-200:  #2b2b2b;
  --neutral-225:  #2f2f2f;
  --neutral-250:  #333333;
  --neutral-300:  #454545;
  --neutral-325:  #494949;
  --neutral-400:  #6e6e6e;
  --neutral-500:  #999999;
  --neutral-525:  #9c9c9c;
  --neutral-600:  #bbbbbb;
  --neutral-700:  #cecece;
  --neutral-800:  #e7e7e7;
  --neutral-900:  #eeeeee;
  --neutral-1000: #ffffff;

  /* White alpha (glass) */
  --white-a0:  rgba(255, 255, 255, 0);
  --white-a5:  rgba(255, 255, 255, 0.05);
  --white-a7:  rgba(255, 255, 255, 0.07);
  --white-a10: rgba(255, 255, 255, 0.10);
  --white-a15: rgba(255, 255, 255, 0.15);
  --white-a20: rgba(255, 255, 255, 0.20);
  --white-a30: rgba(255, 255, 255, 0.30);
  --white-a40: rgba(255, 255, 255, 0.40);
  --white-a50: rgba(255, 255, 255, 0.50);

  /* Black alpha */
  --black-a20: rgba(0, 0, 0, 0.20);
  --black-a30: rgba(0, 0, 0, 0.30);
  --black-a55: rgba(0, 0, 0, 0.55);


  /* Surfaces */
  --color-bg:              var(--neutral-0);
  --color-surface:         var(--neutral-100);
  --color-surface-raised:  var(--neutral-225);
  --color-surface-glass:   var(--white-a7);
  --color-surface-glass-2: var(--white-a10);
  --color-surface-glass-3: var(--white-a20);
  --color-surface-inverse: var(--neutral-1000);

  /* Text */
  --color-text:            var(--neutral-1000);  /* headings */
  --color-text-body:       var(--neutral-900);   /* #eee body copy */
  --color-text-muted:      var(--neutral-500);   /* #999 captions, sub-copy */
  --color-text-subtle:     var(--neutral-400);   /* #6e6e6e placeholders */
  --color-text-inverse:    var(--neutral-100);   /* #1b1b1b on white buttons */
  --color-link-hover:      var(--neutral-500);

  /* Borders */
  --color-border:          var(--white-a10);
  --color-border-strong:   var(--white-a20);
  --color-border-subtle:   var(--white-a5);
  --color-divider:         var(--white-a15);

  /* Gradients */
  --gradient-text:         linear-gradient(95deg, var(--neutral-1000) 31%, var(--neutral-500) 68%);
  --gradient-text-vertical: linear-gradient(180deg, var(--neutral-1000), var(--neutral-500));
  --gradient-card:         linear-gradient(180deg, var(--neutral-150) 0%, var(--neutral-75) 100%);
  --gradient-button-dark:  linear-gradient(180deg, var(--neutral-300) 0%, var(--neutral-200) 100%);
  --gradient-button-light: linear-gradient(180deg, var(--neutral-1000) 0%, var(--neutral-700) 100%);
  --gradient-glass-edge:   linear-gradient(142deg, var(--white-a10) 79%, var(--white-a30) 100%);
  --gradient-sheen:        linear-gradient(180deg, var(--white-a10) 0%, var(--white-a0) 46%);

  /* Shadows */
  --shadow-inset-highlight: inset 1.5px 1.5px 2px 0 var(--white-a15);
  --shadow-inset-dark:      inset 1.5px 1.5px 2px 0 var(--black-a30);
  --shadow-hairline:        inset 0.3px 0.3px 0 0 var(--neutral-525);
  --shadow-sm:              2px 4px 8px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg:              0 36px 52px 0 var(--black-a55);

  /* Layout */
  --container-max:   1920px;
  --content-max:     1296px;
  --section-pad-y:   var(--space-30);
  --section-pad-x:   var(--space-18);   /* desktop 72 → tablet 24 → phone 12 */

  /* Breakpoints (reference — use in media queries) */
  /* desktop ≥1440 · laptop 1200–1439 · tablet 810–1199 · phone ≤809 */

}

/* Agenciy — type families, weights, spacing, radius, blur, motion. Source: agenciy.framer.website (extracted 2026-10-26) */
:root {
  /* Font families */
  --font-sans:    "Inter", "Inter Placeholder", system-ui, sans-serif;
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-serif:   "Playfair Display", "Playfair Display Placeholder", Georgia, serif;
  --font-features: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing (4px base; values observed on the site) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-30: 120px;

  /* Radius */
  --radius-xs:   5px;
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-2xl:  56px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Blur */
  --blur-sm: 5px;
  --blur-md: 20px;
  --blur-lg: 22px;
  --blur-xl: 24px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
  --duration-slow: 600ms; /* @kind other */

}

/* Agenciy — type scale (responsive). Source: agenciy.framer.website (extracted 2026-10-26) */
:root {
  --text-hero-size: 140px;  --text-hero-lh: 128px;  --text-hero-ls: -8.4px;  /* Inter 400 */
  --text-hero-serif-size: 140px; --text-hero-serif-lh: 96px; --text-hero-serif-ls: -5.6px; /* Playfair italic */
  --text-h1-size: 64px;     --text-h1-lh: 72px;     --text-h1-ls: -1.92px;   /* Inter 500 */
  --text-h2-size: 40px;     --text-h2-lh: 52px;     --text-h2-ls: -0.8px;
  --text-h3-size: 32px;     --text-h3-lh: 36px;     --text-h3-ls: -0.32px;
  --text-h4-size: 24px;     --text-h4-lh: 30px;     --text-h4-ls: 0;
  --text-h5-size: 20px;     --text-h5-lh: 24px;     --text-h5-ls: 0;
  --text-lead-size: 18px;   --text-lead-lh: 28px;
  --text-body-size: 16px;   --text-body-lh: 24px;   --text-body-ls: -0.48px;
  --text-sm-size: 14px;     --text-sm-lh: 20px;
  --text-xs-size: 12px;     --text-xs-lh: 16px;

}
/* Responsive type */
@media (max-width: 1199px) {
  :root {
    --text-hero-size: 100px; --text-hero-lh: 100px;
    --text-hero-serif-size: 80px; --text-hero-serif-lh: 74px;
    --text-h1-size: 51px; --text-h1-lh: 52px;
    --text-h4-size: 19px; --text-h4-lh: 20px;
    --section-pad-x: var(--space-6);
  }
}
@media (max-width: 809px) {
  :root {
    --text-hero-size: 80px; --text-hero-lh: 80px;
    --text-hero-serif-size: 64px; --text-hero-serif-lh: 64px;
    --text-h1-size: 41px; --text-h1-lh: 42px;
    --text-h4-size: 15px; --text-h4-lh: 16px;
    --section-pad-x: var(--space-3);
  }
}


/* Agenciy — component tokens. Source: agenciy.framer.website (extracted 2026-10-26) */
:root {

  /* Glass card */
  --card-bg:          var(--color-surface-glass);
  --card-border:      1px solid var(--color-border);
  --card-radius:      var(--radius-lg);
  --card-padding:     var(--space-9);
  --card-blur:        var(--blur-lg);
  --card-shadow:      var(--shadow-inset-highlight);

  /* Feature / pricing card */
  --card-feature-bg:     var(--gradient-card);
  --card-feature-radius: var(--radius-lg);
  --card-feature-shadow: var(--shadow-lg), var(--shadow-inset-highlight);

  /* Large media panel (projects, contact) */
  --panel-radius: var(--radius-2xl);

  /* Buttons (all pills) */
  --btn-radius:          var(--radius-pill);
  --btn-padding:         14px 32px;
  --btn-padding-sm:      10px 24px;
  --btn-font-size:       var(--text-body-size);
  --btn-font-weight:     var(--weight-semibold);
  --btn-primary-bg:      var(--gradient-button-light);
  --btn-primary-fg:      var(--color-text-inverse);
  --btn-primary-shadow:  var(--shadow-sm), var(--shadow-inset-dark);
  --btn-secondary-bg:    var(--gradient-button-dark);
  --btn-secondary-fg:    var(--color-text);
  --btn-secondary-shadow: var(--shadow-sm), var(--shadow-inset-highlight);

  /* Badge / eyebrow tag */
  --badge-bg:      var(--color-surface-glass-2);
  --badge-fg:      var(--color-text-body);
  --badge-radius:  var(--radius-pill);
  --badge-padding: 8px 16px;
  --badge-font:    var(--weight-medium) var(--text-sm-size)/var(--text-sm-lh) var(--font-sans);
  --badge-blur:    var(--blur-sm);

  /* Nav */
  --nav-bg:      var(--color-surface-glass);
  --nav-border:  1px solid var(--color-border);
  --nav-radius:  var(--radius-pill);
  --nav-blur:    var(--blur-xl);
  --nav-link:    var(--color-text-muted);
  --nav-link-hover: var(--color-text);

  /* Icon button (social, FAQ toggle, scroll) */
  --icon-btn-size:   32px;
  --icon-btn-bg:     var(--gradient-button-dark);
  --icon-btn-radius: var(--radius-full);

  /* Inputs (underline style) */
  --input-bg:          transparent;
  --input-border:      1px solid var(--color-border-strong);
  --input-border-focus: 1px solid var(--color-text);
  --input-fg:          var(--color-text);
  --input-placeholder: var(--color-text-subtle);
  --input-label:       var(--weight-semibold) var(--text-sm-size)/var(--text-sm-lh) var(--font-sans);

  /* Accordion (FAQ) */
  --accordion-divider: 1px solid var(--color-border);
  --accordion-padding: var(--space-5) 0;
}

/* Minimal base: page defaults + a few text utilities used across cards and kits */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--color-bg);color:var(--color-text-body);font:var(--weight-regular) var(--text-body-size)/var(--text-body-lh) var(--font-sans);letter-spacing:var(--text-body-ls);font-feature-settings:var(--font-features);-webkit-font-smoothing:antialiased}
a{color:var(--color-text);text-decoration:none;transition:color var(--duration-fast)}
a:hover{color:var(--color-link-hover)}
.ag-grad{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-grad-v{background:var(--gradient-text-vertical);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-serif{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular)}