/* ============================================================
   Primitive tokens — generated from Figma Tailwind + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  /* Brand-neutral */
  --color-brand-neutral-50 : #FAFAF7;
  --color-brand-neutral-100: #F5F5F3;
  --color-brand-neutral-200: #E7E7E2;
  --color-brand-neutral-300: #D6D6CD;
  --color-brand-neutral-400: #A8A8A0;
  --color-brand-neutral-500: #85857A;
  --color-brand-neutral-600: #65655D;
  --color-brand-neutral-700: #4D4D47;
  --color-brand-neutral-800: #3A3A36;
  --color-brand-neutral-900: #282825;
  --color-brand-neutral-950: #1A1A18;

  /* Brand-beige */
  --color-brand-beige-50 : #FAF6F0;
  --color-brand-beige-100: #F5F0E7;
  --color-brand-beige-200: #E5DFD5;
  --color-brand-beige-300: #D6CFC2;
  --color-brand-beige-400: #C3BBAC;
  --color-brand-beige-500: #C2B69F;
  --color-brand-beige-600: #907F60;
  --color-brand-beige-700: #6C6251;
  --color-brand-beige-800: #4D422E;
  --color-brand-beige-900: #282115;
  --color-brand-beige-950: #1A150D;

  /* Brand-blue */
  --color-brand-blue-50 : #EBFAFF;
  --color-brand-blue-100: #D1EFFA;
  --color-brand-blue-200: #A8DDF0;
  --color-brand-blue-300: #7ECBE7;
  --color-brand-blue-400: #59B7D9;
  --color-brand-blue-500: #33A3CC;
  --color-brand-blue-600: #2684A6;
  --color-brand-blue-700: #186581;
  --color-brand-blue-800: #0F4457;
  --color-brand-blue-900: #083545;
  --color-brand-blue-950: #05232E;

  /* Brand-orange */
  --color-brand-orange-50 : #FFF0EB;
  --color-brand-orange-100: #FCE2D9;
  --color-brand-orange-200: #F8B7A0;
  --color-brand-orange-300: #F4855D;
  --color-brand-orange-400: #F0612D;
  --color-brand-orange-500: #C64110;
  --color-brand-orange-600: #A0340D;
  --color-brand-orange-700: #712509;
  --color-brand-orange-800: #4B1906;
  --color-brand-orange-900: #260C03;
  --color-brand-orange-950: #1A0802;

  /* Typography scale */
  --font-size-h1   : 2.25rem;
  --font-size-h2   : 1.875rem;
  --font-size-h3   : 1.5rem;
  --font-size-h4   : 1.25rem;
  --font-size-body : 1rem;
  --font-size-lead : 1.25rem;
  --font-size-large: 1.125rem;

  /* Shadow scale */
  --shadow-2xs: 0px 1px 3px 0px #1A1A1808;
  --shadow-xs : 0px 1px 3px 0px #1A1A1808;
  --shadow-2xl: 0px 1px 3px 0px #1A1A1821;
  --shadow-sm : 0px 1px 3px 0px #1A1A180D, 0px 1px 2px -1px #1A1A180D;
  --shadow-md : 0px 1px 3px 0px #1A1A180D, 0px 2px 4px -1px #1A1A180D;
  --shadow-lg : 0px 1px 3px 0px #1A1A180D, 0px 4px 6px -1px #1A1A180D;
  --shadow-xl : 0px 1px 3px 0px #1A1A180D, 0px 8px 10px -1px #1A1A180D;

}

/* ============================================================
   Semantic color tokens — generated from Figma Mode + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  --extra-transparent     : #FFFFFF00;
  --extra-backdrop-overlay: #3C3A4099;
  --extra-shadow-color    : #0000001A;
  --muted-foreground-card : #A8A8A0;
  --opacity-accent-10     : #FFFFFF1A;
  --opacity-accent-20     : #FFFFFF33;
  --opacity-accent-30     : #FFFFFF4D;
  --opacity-accent-40     : #FFFFFF66;
  --opacity-accent-50     : #FFFFFF80;
  --opacity-success-10    : #16A34A1A;
  --opacity-success-20    : #16A34A33;
  --opacity-success-30    : #16A34A4D;
  --opacity-success-40    : #16A34A66;
  --opacity-success-50    : #16A34A80;
  --opacity-info-10       : #59B7D91A;
  --opacity-info-20       : #59B7D933;
  --opacity-info-30       : #59B7D94D;
  --opacity-info-40       : #59B7D966;
  --opacity-info-50       : #59B7D980;
  --opacity-warning-10    : #E392191A;
  --opacity-warning-20    : #D9770633;
  --opacity-warning-30    : #D977064D;
  --opacity-warning-40    : #D9770666;
  --opacity-warning-50    : #D9770680;
  --opacity-error-10      : #E034341A;
  --opacity-error-20      : #E0343433;
  --opacity-error-30      : #E034344D;
  --opacity-error-40      : #E0343466;
  --opacity-error-50      : #E0343480;
  --opacity-neutral-10    : #2828251A;
  --opacity-neutral-20    : #28282533;
  --opacity-neutral-30    : #2828254D;
  --opacity-neutral-40    : #28282566;
  --opacity-neutral-50    : #28282580;
}


:host,
[data-scheme="light"] {
  --background                : #F5F0E7;
  --foreground                : #282825;
  --card                      : #FFFFFF;
  --card-foreground           : #282825;
  --popover                   : #F5F0E7;
  --popover-foreground        : #3A3A36;
  --primary                   : #C64110;
  --primary-foreground        : #F5F0E7;
  --secondary                 : #FAF6F0;
  --secondary-foreground      : #3A3A36;
  --muted                     : #E5DFD5;
  --muted-foreground          : #85857A;
  --accent                    : #FAF6F0;
  --accent-foreground         : #282825;
  --destructive               : #EF4444;
  --info                      : #59B7D9;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #D6CFC2;
  --input                     : #D6CFC2;
  --ring                      : #59B7D9;
  --chart-1                   : #F0612D;
  --chart-2                   : #59B7D9;
  --chart-3                   : #6366F1;
  --chart-4                   : #10B981;
  --chart-5                   : #EAB308;
  --sidebar                   : #E5DFD5;
  --sidebar-foreground        : #4D4D47;
  --sidebar-primary           : #F0612D;
  --sidebar-primary-foreground: #F5F0E7;
  --sidebar-accent            : #FAF6F0;
  --sidebar-accent-foreground : #1A1A18;
  --sidebar-border            : #D6CFC2;
  --sidebar-ring              : #3A3A36;
  --extra-muted-foreground    : #D6CFC2;
  --opacity-primary-10        : #C641101A;
  --opacity-primary-20        : #C6411033;
  --opacity-primary-30        : #C641104D;
  --opacity-primary-40        : #C6411066;
  --opacity-primary-50        : #C6411080;
  --opacity-secondary-10      : #FAF6F01A;
  --opacity-secondary-20      : #FAF6F033;
  --opacity-secondary-30      : #FAF6F04D;
  --opacity-secondary-40      : #FAF6F066;
  --opacity-secondary-50      : #FAF6F080;
  --divider: #D6CFC2;
}

[data-scheme="dark"] {
  --background                : #1A1A18;
  --foreground                : #F5F0E7;
  --card                      : #282825;
  --card-foreground           : #F5F0E7;
  --popover                   : #282825;
  --popover-foreground        : #FAF6F0;
  --primary                   : #F0612D;
  --primary-foreground        : #FAF6F0;
  --secondary                 : #1A1A18;
  --secondary-foreground      : #FAF6F0;
  --muted                     : #3A3A36;
  --muted-foreground          : #65655D;
  --accent                    : #3A3A36;
  --accent-foreground         : #FAF6F0;
  --destructive               : #DC2626;
  --info                      : #7ECBE7;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #3A3A36;
  --input                     : #3A3A36;
  --ring                      : #7ECBE7;
  --chart-1                   : #C64110;
  --chart-2                   : #7ECBE7;
  --chart-3                   : #818CF8;
  --chart-4                   : #6EE7B7;
  --chart-5                   : #FACC15;
  --sidebar                   : #000000;
  --sidebar-foreground        : #85857A;
  --sidebar-primary           : #C64110;
  --sidebar-primary-foreground: #FAF6F0;
  --sidebar-accent            : #282825;
  --sidebar-accent-foreground : #FFFFFF;
  --sidebar-border            : #282825;
  --sidebar-ring              : #65655D;
  --extra-muted-foreground    : #4D4D47;
  --opacity-primary-10        : #F0612D1A;
  --opacity-primary-20        : #F0612D33;
  --opacity-primary-30        : #F0612D4D;
  --opacity-primary-40        : #F0612D66;
  --opacity-primary-50        : #F0612D80;
  --opacity-secondary-10      : #2828251A;
  --opacity-secondary-20      : #28282533;
  --opacity-secondary-30      : #2828254D;
  --opacity-secondary-40      : #28282566;
  --opacity-secondary-50      : #28282580;
  --divider: #3A3A36;
}

/* ============================================================
   Responsive layout tokens — generated from Figma Responsive exports.
   Mobile-first: :root = mobile defaults; overridden at tablet (768px)
   and web (1280px) via media queries.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

/* Mobile defaults */
:host {
  --layout-screen-size        : 360px;
  --layout-vertical-padding   : 32px;
  --layout-horizontal-padding : 16px;
  --layout-heading-size       : 24px;
  --layout-heading-line-height: 32px;
  --layout-section-spacing    : 48px;
  --layout-block-width        : 360px;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  :host {
    --layout-screen-size        : 768px;
    --layout-vertical-padding   : 64px;
    --layout-horizontal-padding : 24px;
    --layout-heading-size       : 30px;
    --layout-heading-line-height: 36px;
    --layout-section-spacing    : 64px;
    --layout-block-width        : 768px;
  }
}

/* Web (≥1280px) */
@media (min-width: 1280px) {
  :host {
    --layout-screen-size        : 1280px;
    --layout-vertical-padding   : 96px;
    --layout-horizontal-padding : 32px;
    --layout-heading-size       : 36px;
    --layout-heading-line-height: 40px;
    --layout-section-spacing    : 96px;
    --layout-block-width        : 1440px;
  }
}

/* ============================================================
   Design Tokens
   Global CSS custom properties for color, typography, spacing,
   border-radius, and shadow. Import this file at the app or
   Storybook entry level so all components can consume the vars.

   Layer 1 — Primitives (brand palette + type scale): tokens/primitives.css  [generated]
   Layer 2 — Semantic colors + opacity scale:         tokens/colors.css       [generated]
   Layer 3 — Responsive layout vars:                  tokens/responsive.css   [generated]
   Layer 4 — Manual supplements below                 (not yet in Figma)
   ============================================================ */


/* ----------------------------------------------------------
   Manual Color Supplements — Light
   Tokens not (yet) exported from Figma; kept here manually.
   ---------------------------------------------------------- */
:host,
[data-scheme="light"] {

  /* Inverse-scheme tokens — exact values from the DARK scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows dark-on-light-card). */
  --inv-popover:            #282825;  /* = dark --popover            */
  --inv-popover-foreground: #FAF9F0;  /* = dark --popover-foreground */
  --inv-accent:             #3A3A36;  /* = dark --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #F5F0E71A;
  --opacity-background-20: #F5F0E733;
  --opacity-background-30: #F5F0E74D;
  --opacity-background-40: #F5F0E766;
  --opacity-background-50: #F5F0E780;

  --opacity-inv-accent-10: #3A3A361A;
  --opacity-inv-accent-20: #3A3A3633;
  --opacity-inv-accent-30: #3A3A364D;
  --opacity-inv-accent-40: #3A3A3666;
  --opacity-inv-accent-50: #3A3A3680;

  --opacity-background-60:    #F5F0E799;
  --opacity-destructive-10:   #EF44441A;

}


/* ----------------------------------------------------------
   Manual Color Supplements — Dark
   ---------------------------------------------------------- */
[data-scheme="dark"] {

  /* Inverse-scheme tokens — exact values from the LIGHT scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows light-on-dark-card). */
  --inv-popover:            #F7F5E8;  /* = light --popover            */
  --inv-popover-foreground: #3A3A36;  /* = light --popover-foreground */
  --inv-accent:             #FAF6F0;  /* = light --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #1A1A181A;
  --opacity-background-20: #1A1A1833;
  --opacity-background-30: #1A1A184D;
  --opacity-background-40: #1A1A1866;
  --opacity-background-50: #1A1A1880;

  --opacity-inv-accent-10: #FAF6F01A;
  --opacity-inv-accent-20: #FAF6F033;
  --opacity-inv-accent-30: #FAF6F04D;
  --opacity-inv-accent-40: #FAF6F066;
  --opacity-inv-accent-50: #FAF6F080;

  --opacity-background-60:    #1A1A1899;
  --opacity-destructive-10:   #DC26261A;

}


/* ----------------------------------------------------------
   Typography Tokens
   ---------------------------------------------------------- */
:host {
  --font-family-fallback: "II_Increments_Sans", "Iiincrementssans", sans-serif;
   --font-family-default:   var(--_typography---fonts--font-main, var(--font-family-fallback));

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-xs:   1rem;     /* 16px */
  --line-height-sm:   1.25rem;  /* 20px */
  --line-height-base: 1.5rem;   /* 24px */
}


/* ----------------------------------------------------------
   Border Radius Tokens
   ---------------------------------------------------------- */
:host {
  --radius-sm:   0.5rem;    /*  8px — rounded-lg  in Figma */
  --radius-md:   1rem;      /* 16px — rounded-2xl in Figma */
  --radius-lg:   1.5rem;    /* 24px — rounded-3xl in Figma */
  --radius-full: 9999px;    /* pill / fully rounded         */
}


/* ----------------------------------------------------------
   Spacing Tokens
   ---------------------------------------------------------- */
:host {
  --spacing-0:   0px;
  --spacing-px:  1px;
  --spacing-1:   0.25rem;   /*  4px */
  --spacing-1-5: 0.375rem;  /*  6px */
  --spacing-2:   0.5rem;    /*  8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
}

/* ============================================================
   CaseStudySlide — Individual testimonial card styles.
   Used inside the CaseStudies carousel.
   ============================================================ */

.case-study-card {
  background-color: var(--card);
  border-radius:    var(--radius-lg);   /* 24px */
  box-sizing:       border-box;
  display:          flex;
  flex:             0 0 36.375rem;      /* 582px */
  flex-direction:   column;
  justify-content:  space-between;
  overflow:         hidden;
  padding:          2.25rem;
  scroll-snap-align: start;
}


/* ---- Top row: quote mark + CTA ---- */
.case-study-card__top {
  align-items:     flex-start;
  display:         flex;
  justify-content: space-between;
  padding-bottom:  1.5rem;    /* 24px */
  width:           100%;
}

.case-study-card__quote-mark {
  color:       var(--border);           /* #D6CFC2 — extra-muted-foreground */
  font-size:   3rem;                    /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  height:      38px;
}


/* ---- Body: quote + author ---- */
.case-study-card__body {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;    /* 36px */
  flex: 1 0 0;
}

.case-study-card__quote {
  color:       var(--foreground);
  font-size:   1.5rem;        /* 24px */
  font-weight: 300;           /* Light — no token exists yet */
  line-height: 2rem;          /* 32px */
  margin:      0;
  flex: 1 0 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.case-study-card__author-group {
  align-items: center;
  display:     flex;
  gap:         0.75rem;       /* 12px */
}

.case-study-card__avatar {
  background-color: var(--opacity-primary-20);
  border-radius:    var(--radius-full);
  flex-shrink:      0;
  height:           3rem;     /* 48px */
  overflow:         hidden;
  width:            3rem;
}

.case-study-card__avatar img {
  display:    block;
  height:     100%;
  object-fit: cover;
  width:      100%;
}

.case-study-card__author-meta {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.case-study-card__author-name {
  color:       var(--foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.case-study-card__author-role {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .case-study-card {
    flex:    0 0 calc(100vw - var(--carousel-gutter) * 2);
    padding: 1.5rem 2.25rem 2.25rem 2.25rem;
  }

  .case-study-card__quote {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .case-study-card__author-name,
  .case-study-card__author-role {
    font-size:   0.75rem;   /* 12px */
    line-height: 1rem;      /* 16px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:     center;
  border:          1px solid transparent;
  box-sizing:      border-box;
  cursor:          pointer;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
  overflow:        hidden;
  text-decoration: none;
  user-select:     none;
  white-space:     nowrap;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1.25rem;           /* 8px 20px → height 36px */
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"] {
  background-color: var(--secondary);
  border-color:     var(--border);
  color:            var(--secondary-foreground);
}

.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Hover */
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.88;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon,
.btn[data-size="md"] .btn__icon,
.btn[data-size="lg"] .btn__icon { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}