/* === src/styles/tokens.css === */
/* =============================================================
   DESIGN TOKENS — Portfólio Cássio Prates
   Source of truth for all design values.
   Do not override these in component files.
============================================================= */
:root {
  /* Colors */
  --color-text-primary:    #101828;
  --color-text-secondary:  #535966;
  --color-text-dark:       #0c1320;
  --color-text-brand:      #378242;
  --color-brand-subtle:    rgba(43, 150, 44, 0.2);
  --color-border:          #d9d9d9;
  --color-border-subtle:   #b2b2b2;
  --color-page-overlay:    rgba(231, 245, 228, 0.15);
  --color-card-from:       rgba(255, 255, 255, 0.95);
  --color-card-to:         rgba(226, 240, 230, 0.70);
  --color-card-border:     rgba(255, 255, 255, 0.65);

  /* Shadows */
  --shadow-card:           0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:     0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-btn-primary:    0px 4px 4px 0px rgba(12, 45, 118, 0.4);
  --shadow-btn-secondary:  0px 2px 2px 0px rgba(238, 125, 154, 0.4);
  --shadow-photo:          0px 2.538px 1.904px 0px rgba(50, 24, 18, 0.25);

  /* Border radius */
  --radius-sm:    16px;
  --radius-photo: 25.385px;
  --radius-card:  40px;
  --radius-full:  9999px;
}


/* === src/styles/fonts.css === */
/* =============================================================
   FONTS — Self-hosted
   Expose:      Title Hero, Title Page, Heading 1
   Bespoke Sans: body text, UI labels, buttons
============================================================= */

/* Expose */
@font-face {
  font-family: 'Expose';
  src: url('/fonts/Expose-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expose';
  src: url('/fonts/Expose-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bespoke Sans */
@font-face {
  font-family: 'Bespoke Sans';
  src: url('/fonts/BespokeSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Sans';
  src: url('/fonts/BespokeSans-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Sans';
  src: url('/fonts/BespokeSans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Sans';
  src: url('/fonts/BespokeSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* === src/styles/reset.css === */
/* =============================================================
   RESET + BASE
============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  color: var(--color-text-primary);
  min-height: 100dvh;
}

a          { text-decoration: none; color: inherit; }
ul, ol     { list-style: none; }
img        { display: block; }
button     { cursor: pointer; border: none; background: none; font: inherit; }
blockquote { font-style: normal; }

/* Focus visible — accessible keyboard navigation */
:focus-visible {
  outline: 2px solid #346FF3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip to main content link (a11y) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: #1556E6;
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 16px;
  z-index: 100;
  transition: top 0.1s ease;
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* === src/styles/utilities.css === */
/* =============================================================
   UTILITIES — single-purpose helper classes shared across all pages
   Add sparingly; prefer component classes for anything more complex.
============================================================= */

/* ── Brand label — small uppercase eyebrow text ──────────── */
/* Used above section titles and hero labels across all pages. */
.section-label {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-text-brand);
}

/* ── Brand color text ─────────────────────────────────────── */
.text-brand {
  color: var(--color-text-brand);
}


/* === src/styles/components/page-bg.css === */
/* =============================================================
   PAGE BACKGROUND — animated gradient blobs
   HTML structure required in every page template:

   <div class="page-bg" aria-hidden="true">
     <svg class="page-bg__svg">
       <defs>
         <filter id="blurMe">
           <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
           <feColorMatrix in="blur" mode="matrix"
             values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
             result="goo"/>
           <feBlend in="SourceGraphic" in2="goo"/>
         </filter>
       </defs>
     </svg>
     <div class="page-bg__blobs">
       <div class="blob blob--1"></div>
       <div class="blob blob--2"></div>
       <div class="blob blob--3"></div>
       <div class="blob blob--4"></div>
       <div class="blob blob--5"></div>
       <div class="blob blob--pointer" id="bg-pointer"></div>
     </div>
     <div class="page-bg__overlay"></div>
   </div>

   Pointer JS (home only):
   see src/templates/home.html <script> block
============================================================= */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(40deg,
    var(--gradient-background-start),
    var(--gradient-background-end));

  --gradient-background-start: rgb(250, 250, 245);
  --gradient-background-end:   rgb(240, 250, 245);
  --first-color:   184, 220, 250;
  --second-color:  180, 230, 210;
  --third-color:   255, 240, 180;
  --fourth-color:  177, 218, 253;
  --fifth-color:   210, 240, 190;
  --pointer-color: 214, 214, 237;
  --blob-size:     80%;
  --blending:      hard-light;
}

.page-bg__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-page-overlay);
}

/* SVG filter — hidden, referenced by filter: url(#blurMe) */
.page-bg__svg { display: none; }

/* Blobs container */
.page-bg__blobs {
  position: absolute;
  inset: 0;
  filter: url(#blurMe) blur(40px);
}

/* Individual blobs */
.blob {
  position: absolute;
  width:  var(--blob-size);
  height: var(--blob-size);
  top:  calc(50% - var(--blob-size) / 2);
  left: calc(50% - var(--blob-size) / 2);
  background-repeat: no-repeat;
  mix-blend-mode: var(--blending);
}

.blob--1 {
  background: radial-gradient(circle at center,
    rgba(var(--first-color), 1)   0%,
    rgba(var(--first-color), 0) 50%);
  transform-origin: center center;
  animation: moveVertical 30s ease infinite;
  opacity: 1;
}

.blob--2 {
  background: radial-gradient(circle at center,
    rgba(var(--second-color), 0.8) 0%,
    rgba(var(--second-color), 0)  50%);
  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite;
  opacity: 1;
}

.blob--3 {
  background: radial-gradient(circle at center,
    rgba(var(--third-color), 0.8) 0%,
    rgba(var(--third-color), 0)  50%);
  transform-origin: calc(50% + 400px);
  animation: moveInCircle 40s linear infinite;
  opacity: 1;
}

.blob--4 {
  background: radial-gradient(circle at center,
    rgba(var(--fourth-color), 0.8) 0%,
    rgba(var(--fourth-color), 0)  50%);
  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 40s ease infinite;
  opacity: 0.7;
}

.blob--5 {
  background: radial-gradient(circle at center,
    rgba(var(--fifth-color), 0.8) 0%,
    rgba(var(--fifth-color), 0)  50%);
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: moveInCircle 20s ease infinite;
  opacity: 1;
}

/* Interactive pointer blob — follows mouse (JS required) */
.blob--pointer {
  background: radial-gradient(circle at center,
    rgba(var(--pointer-color), 0.8) 0%,
    rgba(var(--pointer-color), 0)  50%);
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top:  -50%;
  left: -50%;
  opacity: 0.7;
  pointer-events: all;
}

@keyframes moveVertical {
  0%   { transform: translateY(-50%); }
  50%  { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

@keyframes moveInCircle {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveHorizontal {
  0%   { transform: translateX(-50%) translateY(-10%); }
  50%  { transform: translateX(50%)  translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}


/* === src/styles/components/card.css === */
/* =============================================================
   CARD — shared glassmorphism base style
   Applied via .card class alongside component-specific classes.
============================================================= */
.card {
  background: linear-gradient(135deg, var(--color-card-from) 0%, var(--color-card-to) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}


/* === src/styles/components/btn.css === */
/* =============================================================
   BUTTON — base + primary + secondary variants
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius-full);
  border: 1px solid #fff;
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: filter 0.15s ease;
  min-height: 44px; /* a11y: minimum touch target */
  min-width: 44px;
}

/* Primary — blue gradient */
.btn--primary {
  background: linear-gradient(to top, #1556E6, #346FF3 50%, #5389FF);
  box-shadow: var(--shadow-btn-primary);
  color: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn--primary:hover {
  background: linear-gradient(to bottom, #1556E6, #346FF3 50%, #5389FF);
  box-shadow: 0px -2px 4px 0px rgba(12, 45, 118, 0.4);
}

.btn--primary:active {
  border-color: #1556e6;
  background: linear-gradient(to top, #1556E6, #346FF3 50%, #5389FF);
  box-shadow: 0px -2px 4px 0px rgba(12, 45, 118, 0.4);
}

.btn--primary:active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
              inset 0px  4px 4px 0px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Secondary — white gradient with pink shadow */
.btn--secondary {
  background: linear-gradient(to bottom, #ffffff 50%, #eeeeee);
  box-shadow: var(--shadow-btn-secondary);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn--secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: box-shadow 0.15s ease;
}

.btn--secondary:hover {
  border-color: #5389ff;
  box-shadow: 0px -2px 2px 0px rgba(238, 125, 154, 0.4);
}

.btn--secondary:hover::after {
  box-shadow: inset 0px -2px 1px 0px rgba(255, 255, 255, 0.4);
}

.btn--secondary:active {
  border-color: #5389ff;
  box-shadow: 0px -2px 2px 0px rgba(238, 125, 154, 0.4);
}

.btn--secondary:active::after {
  box-shadow: inset 0px 3px 6px 0px rgba(238, 125, 154, 0.8),
              inset 0px -3px 6px 0px rgba(238, 125, 154, 0.8);
}

/* btn--contact: icon-only on mobile, text label on desktop */
.btn--contact .btn__icon {
  display: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .btn--contact {
    padding: 12px;
  }

  .btn--contact .btn__icon {
    display: block;
  }

  .btn--contact .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}


/* === src/styles/components/site-header.css === */
/* =============================================================
   SITE HEADER
============================================================= */

/* Sticky wrapper — spans full viewport width for the blur effect */
.site-header-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  isolation: isolate;
}

/* Frosted glass layer — blur stronger at top, fades at bottom */
.site-header-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 245, 0.82) 0%,
    rgba(250, 250, 245, 0.50) 65%,
    rgba(250, 250, 245, 0.00) 100%
  );
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  pointer-events: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.logo {
  display: block;
  width: 67.773px;
  height: 56px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .site-header {
    padding: 24px 64px;
  }
}


/* === src/styles/components/lang-toggle.css === */
/* ============================================================
   Lang Toggle — PT / EN language switcher
   ============================================================ */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lang-toggle__current {
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 2px 4px;
  cursor: default;
  line-height: 1;
}

.lang-toggle__separator {
  color: var(--color-text-secondary);
  opacity: 0.4;
  user-select: none;
  line-height: 1;
}

/* === BTN GROUP — pill-shaped button group (language toggle) === */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, #ffffff 50%, #eeeeee);
  box-shadow: var(--shadow-btn-secondary);
  border: 1px solid #fff;
  position: relative;
}

.btn-group::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.btn-group__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  min-height: 45px;
  min-width: 36px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.btn-group__item:hover:not(.btn-group__item--active) {
  color: var(--color-text-primary);
}

.btn-group__item:focus-visible {
  outline: 2px solid var(--color-text-brand);
  outline-offset: -2px;
}

.btn-group__item--active {
  background: linear-gradient(to bottom, #ffffff 50%, #fff0f3);
  border-color: rgba(238, 125, 154, 0.35);
  color: var(--color-text-primary);
  font-weight: 600;
  cursor: default;
  box-shadow: inset 0px 2px 4px 0px rgba(238, 125, 154, 0.45),
              inset 0px -1px 2px 0px rgba(255, 255, 255, 0.7);
}


/* === src/styles/components/section-header.css === */
/* =============================================================
   SECTION HEADER — reusable title + subtitle block
   For the brand eyebrow label above a section title, use .section-label
   from utilities.css (e.g. <p class="section-label">Cases</p>).
============================================================= */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.section-header__title {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.section-header__subtitle {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.12px;
  color: var(--color-text-secondary);
}


/* === src/styles/components/hero.css === */
/* =============================================================
   HERO SECTION
============================================================= */
.hero {
  padding: 24px 16px;
  max-width: 1312px;
  margin-inline: auto;
}

.hero__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 16px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.hero__title {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.hero__description {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.hero__description strong {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

@media (min-width: 768px) {
  .hero {
    padding: 32px 64px;
  }

  .hero__card {
    flex-direction: row;
    align-items: center;
    padding: 24px;
  }

  .hero__title {
    font-size: 88px;
    letter-spacing: 0;
  }
}

@media (min-width: 1024px) {
  .hero__card {
    padding: 24px 40px;
  }
}


/* === src/styles/components/my-photo.css === */
/* =============================================================
   MY PHOTO — stacked rotated frames with hover animation
============================================================= */
.my-photo {
  width: 330px;
  height: 342.75px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

/* Background shadow frame — rotated −5° */
.my-photo__bg-layer {
  position: absolute;
  left: -14.31px;
  top:  -13.73px;
  width:  358.612px;
  height: 370.15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.4s ease, top 0.4s ease;
}

.my-photo__bg-frame {
  transform: rotate(-5deg);
  width:  330px;
  height: 342.692px;
  background-color: #A8B8AE;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

/* Front photo frame — rotated −2° */
.my-photo__front-layer {
  position: absolute;
  left: -5.88px;
  top:  -5.65px;
  width:  341.759px;
  height: 354px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-photo__front-frame {
  transform: rotate(-2deg);
  width:  330px;
  height: 342.692px;
  /* Gradient border via background-clip trick */
  border: 7.7px solid transparent;
  background:
    linear-gradient(var(--color-border), var(--color-border)) padding-box,
    linear-gradient(to bottom, #DDECE2, #CAD9D0) border-box;
  border-radius: var(--radius-photo);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), var(--shadow-photo);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

/* Hover: frames settle / straighten */
.my-photo:hover .my-photo__bg-layer {
  left: -11.55px;
  top:  -11.09px;
}

.my-photo:hover .my-photo__bg-frame {
  transform: rotate(-4deg);
}

.my-photo:hover .my-photo__front-frame {
  transform: rotate(0deg);
}

.my-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.my-photo__img--hover {
  opacity: 0;
}

.my-photo:hover .my-photo__img--default {
  opacity: 0;
}

.my-photo:hover .my-photo__img--hover {
  opacity: 1;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .my-photo__bg-layer,
  .my-photo__bg-frame,
  .my-photo__front-frame {
    transition: none;
  }
}


/* === src/styles/components/cases.css === */
/* =============================================================
   CASES SECTION
============================================================= */
.cases {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  max-width: 1312px;
  margin-inline: auto;
}

/* Scroll container — handles overflow and snap; does NOT clip the list.
   Negative margin-inline expands the scroll area beyond the section padding,
   while matching padding-inline keeps cards visually aligned. */
.cases__scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: 16px;
  padding-block: 12px; /* room for card box-shadow */
  margin-inline: -16px;
  scrollbar-width: none;
}

.cases__scroll::-webkit-scrollbar { display: none; }

/* List — overflow visible so card shadows are never clipped */
.cases__list {
  display: flex;
  gap: 24px;
  overflow: visible;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex-shrink: 0;
  width: 320px;
  scroll-snap-align: start;
  overflow: hidden;
}

.case-card__image {
  width: 100%;
  height: 240px;
  max-height: 409px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-border);
  position: relative;
  transition: height 0.4s ease;
}

.case-card__image img,
.case-card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-card__image-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.case-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .case-card:hover .case-card__image-preview {
    opacity: 1;
  }

  .case-card:hover .case-card__text {
    opacity: 0;
  }
}

.case-card--active .case-card__image-preview {
  opacity: 1;
}

.case-card--active .case-card__text {
  opacity: 0;
}

.case-card__title {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.84px;
  color: var(--color-text-primary);
}

.case-card__description {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .cases {
    padding: 24px 64px;
  }

  .cases__scroll {
    padding-inline: 64px;
    margin-inline: -64px;
  }
}

@media (min-width: 1024px) {
  .cases__scroll {
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .cases__list > li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .case-card {
    flex: 1;
    width: 100%;
    scroll-snap-align: none;
  }
}


/* === src/styles/components/testimonials.css === */
/* =============================================================
   TESTIMONIALS SECTION
============================================================= */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  max-width: 1312px;
  margin-inline: auto;
}

/* Scroll container — handles overflow and snap; does NOT clip the list.
   Negative margin-inline expands the scroll area beyond the section padding,
   while matching padding-inline keeps cards visually aligned. */
.testimonials__scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: 16px;
  padding-block: 12px; /* room for card box-shadow */
  margin-inline: -16px;
  scrollbar-width: none;
}

.testimonials__scroll::-webkit-scrollbar { display: none; }

/* List — overflow visible so card shadows are never clipped */
.testimonials__list {
  display: flex;
  gap: 24px;
  overflow: visible;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex-shrink: 0;
  min-width: 320px;
  max-width: 388px;
  min-height: 280px;
  scroll-snap-align: start;
  overflow: hidden;
}

.testimonial-card__author {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-border);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 0 0;
  min-width: 0;
}

.testimonial-card__name {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.12px;
  color: var(--color-text-dark);
}

.testimonial-card__role {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.testimonial-card__quote {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .testimonials {
    padding: 32px 64px;
  }

  .testimonials__scroll {
    padding-inline: 64px;
    margin-inline: -64px;
  }
}

@media (min-width: 1024px) {
  .testimonials__scroll {
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .testimonial-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    scroll-snap-align: none;
  }
}


/* === src/styles/components/contact.css === */
/* =============================================================
   CONTACT SECTION
============================================================= */
.contact {
  padding: 16px;
  max-width: 1312px;
  margin-inline: auto;
}

.contact__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__title {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.contact__subtitle {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.12px;
  color: var(--color-text-secondary);
}

.contact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  padding-top: 8px;
}

@media (min-width: 768px) {
  .contact {
    padding: 32px 64px;
  }
}


/* === src/styles/components/case-section.css === */
/* =============================================================
   CASE SECTION — layout containers and typography for case pages
============================================================= */

/* ── Hero (uses page-bg, no white) ────────────────────────── */
.case-hero {
  padding: 24px 16px;
  max-width: 1312px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Content sections — transparent over page-bg blobs ───── */
.case-section {}

.case-section__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  max-width: 1312px;
  margin-inline: auto;
}

/* ── Section header (label + title) ──────────────────────── */
.case-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-section__label {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-text-brand);
}

.case-section__title {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* ── Hero title ───────────────────────────────────────────── */
.case-hero__title {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

/* ── Subsection heading (Heading 2) ──────────────────────── */
.case-subsection__title {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.84px;
  color: var(--color-text-secondary);
}

/* ── Body text ────────────────────────────────────────────── */
.case-body-text {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.case-body-text p + p {
  margin-top: 16px;
}

/* ── Image gallery ────────────────────────────────────────── */
.case-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-gallery__item {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-border);
}

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

/* ── Context cards grid (reuses .card base) ───────────────── */
.case-context-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-context-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.case-context-card__label {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-text-brand);
}

.case-context-card__title {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.12px;
  color: var(--color-text-primary);
  margin-top: 2px;
}

.case-context-card__body {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ── Section text wrapper ─────────────────────────────────── */
.case-section__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Subsection container ─────────────────────────────────── */
.case-subsection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  padding: 24px 16px;
  text-align: center;
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .case-hero {
    padding: 32px 64px;
    gap: 32px;
  }

  .case-section__inner {
    padding: 32px 64px;
    gap: 32px;
  }

  .case-hero__title {
    font-size: 88px;
  }

  .case-gallery {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .case-gallery__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .case-context-cards {
    flex-direction: row;
    align-items: stretch;
  }

  .case-context-cards .card {
    flex: 1 1 0;
    min-width: 0;
  }

  .site-footer {
    padding: 32px 64px;
  }
}


/* === src/styles/components/metric-chip.css === */
/* =============================================================
   METRIC CHIP — stat badge (value + label)
============================================================= */
.metric-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px;
  background: rgba(245, 245, 245, 0.3);
  border: 1px solid #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.metric-chip__value {
  font-family: 'Expose', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.metric-chip__label {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Row of chips */
.metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Full-width variant (single prominent metric) */
.metric-chip--full {
  width: 100%;
  flex-shrink: 1;
}


/* === src/styles/components/case-numbered-item.css === */
/* =============================================================
   CASE NUMBERED ITEM — numbered process/initiative block
============================================================= */
.numbered-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.numbered-item__header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
}

.numbered-item__badge {
  grid-row: 1 / 3;
  align-self: center;
  background: rgba(43, 150, 44, 0.1);
  border-radius: var(--radius-sm);
  padding: 2px 6px 6px;
  flex-shrink: 0;
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.85),
     2px  2px 6px rgba(0, 0, 0, 0.12);
}

.numbered-item__badge-num {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.84px;
  color: var(--color-text-brand);
}

.numbered-item__name {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.12px;
  color: var(--color-text-brand);
  flex: 1;
}

.numbered-item__subtitle {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: #5e657a;
  grid-column: 2;
}

.numbered-item__body {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.numbered-item__divider {
  width: 4px;
  background: var(--color-brand-subtle);
  border-radius: var(--radius-full);
  align-self: stretch;
  flex-shrink: 0;
}

.numbered-item__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.numbered-item__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.numbered-item__image {
  width: 100%;
  min-height: 240px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-border);
}

.numbered-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.numbered-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Desktop: text and image side by side */
@media (min-width: 1024px) {
  .numbered-item__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .numbered-item__inner--with-gallery {
    flex-direction: column;
  }

  .numbered-item__text {
    flex: 1 1 0;
    min-width: 0;
  }

  .numbered-item__image {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    align-self: stretch;
    min-height: 280px;
  }
}


/* === src/styles/components/case-wildlife.css === */
/* Colorfy split: text 2/3 + video 1/3 */
.colorfy-split {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.colorfy-split__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.colorfy-split__video {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border);
}

.colorfy-split__video video {
  width: 100%;
  display: block;
}

@media (min-width: 1024px) {
  .colorfy-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }

  .colorfy-split__text {
    flex: 2;
    min-width: 0;
  }

  .colorfy-split__video {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: 24px;
  }
}


/* === src/styles/components/case-relatorio360.css === */
/* Seção 03 — layout split: texto à esquerda, mídia à direita */
.construimos-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.construimos-split__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.construimos-split__media {
  border-radius: 12px;
  overflow: hidden;
}

.construimos-split__media video,
.construimos-split__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .construimos-split {
    grid-template-columns: 1fr;
  }
}


/* === src/styles/components/lightbox.css === */
/* =============================================================
   LIGHTBOX — hover zoom + full-screen modal for case images
   Apply class="lightbox-trigger" to any <img> or <video> to enable.
============================================================= */

/* ── Trigger container (added via JS) ────────────────────── */
.lightbox-active-wrap {
  position: relative;
  cursor: pointer;
}

.lightbox-active-wrap img,
.lightbox-active-wrap video {
  transition: transform 0.3s ease;
}

/* Fill parent containers the same way <img> does */
.case-gallery__item video,
.numbered-item__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Hover overlay (desktop only, injected via JS) ────────── */
.lightbox-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

.lightbox-hover-overlay svg {
  width: 40px;
  height: 40px;
  stroke: #fff;
  flex-shrink: 0;
}

@media (hover: hover) {
  .lightbox-active-wrap:hover img,
  .lightbox-active-wrap:hover video {
    transform: scale(1.05);
  }

  .lightbox-active-wrap:hover .lightbox-hover-overlay {
    opacity: 1;
  }
}

/* ── Modal backdrop ───────────────────────────────────────── */
.lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Modal inner (prevents click-through to backdrop) ─────── */
.lightbox-modal__inner {
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
}

/* ── Expanded image ───────────────────────────────────────── */
.lightbox-modal__img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.14);
}

/* ── Expanded video ───────────────────────────────────────── */
.lightbox-modal__video {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.14);
  background: #000;
}

/* ── Caption ──────────────────────────────────────────────── */
.lightbox-modal__caption {
  font-family: 'Bespoke Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 600px;
}

/* ── Close button ─────────────────────────────────────────── */
.lightbox-modal__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.07);
  cursor: pointer;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background 0.2s;
  flex-shrink: 0;
}

.lightbox-modal__close:hover {
  background: rgba(0, 0, 0, 0.14);
}

.lightbox-modal__close:focus-visible {
  outline: 2px solid var(--color-text-brand);
  outline-offset: 2px;
}

.lightbox-modal__close svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-primary);
  flex-shrink: 0;
}